API tools faq
paste
Udoro

CSS update

Udoro
May 4th, 2026
95
0
Never
7
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 148.28 KB | None | 0 0
raw download clone embed print report
  1. /* ============================================================================
  2. TABLE OF CONTENTS
  3. 1. BASE / RESET
  4. 2. ACCESSIBILITY (Screen Reader, Focus)
  5. 3. CSS VARIABLES & CUSTOM PROPERTIES
  6. 4. HTML / BODY STRUCTURE
  7. 5. HEADER LAYOUT & CONTAINER
  8. 6. NAVIGATION WRAPPER & NESTED NAV
  9. 7. MENU ITEMS — SPACING, COLOR & TYPOGRAPHY
  10. 8. MENU ITEMS — HOVER STATES
  11. 9. MENU ITEMS — ACTIVE / CURRENT PAGE STATES
  12. 10. MENU ITEMS — BREAKPOINT VISIBILITY
  13. 11. DROPDOWN CONTENT — BASE STYLES
  14. 12. DROPDOWN CONTENT — OPEN / CLOSED STATES
  15. 13. DROPDOWN CONTENT — OVERFLOW HANDLING
  16. 14. DROPDOWN CONTENT — BUFFER ZONES
  17. 15. DROPDOWN CONTENT — GAP / CARET
  18. 16. MEGA MENU
  19. 17. STRIPE STYLE
  20. 18. ADAPTIVE HEIGHT
  21. 19. MENU TOGGLE (Hamburger)
  22. 20. MOBILE MENU
  23. 21. OFFCANVAS / FLYOUT MENU
  24. 22. OVERLAY HEADER
  25. 23. STICKY / HEADROOM HEADER
  26. 24. HEADER BUILDER — MULTI-ROW SCROLL VISIBILITY
  27. 25. CENTERED LOGO
  28. 26. LAST ITEM CTA BUTTONS
  29. 27. BREAKOUT / BREAKIN ITEMS
  30. 28. HOVER EFFECTS (Roll Text)
  31. 29. BADGES
  32. 30. ICON & BUTTON DROPDOWN ITEMS
  33. 31. MULTILEVEL BACK BUTTON (Mobile)
  34. 32. MENU OVERLAY (Backdrop)
  35. 33. RTL SUPPORT
  36. 34. ETCH BUILDER (Editor)
  37. 35. FIXES / UTILITIES
  38. 36. MEDIA QUERIES
  39. ============================================================================ */
  40.  
  41.  
  42. /* ============================================================================
  43. 1. BASE / RESET
  44. ============================================================================ */
  45.  
  46. :root{
  47. --dropdown-content-border-size: 1px; /* at least 1px */
  48. --dropdown-content-border-color: var(--dropdown-content-bg);
  49. --dropdown-content-border: solid var(--dropdown-content-border-color) var(--dropdown-content-border-size);
  50. --overlay-offset-padding: clamp(5rem, 1.875rem + 12.5vw, 11.25rem);
  51. /* --dropdown-menu-height:0px; */
  52.  
  53. /*===== MENU TOGGLE - Hamburger additional settings =====*/
  54. --toggle-horizontal-offset: 0px;
  55. --toggle-closed-offset: 1.2;
  56.  
  57. }
  58.  
  59. li, #dwc-header {
  60. -webkit-tap-highlight-color: transparent;
  61. }
  62.  
  63. .dwc-nav-nested-items > li {
  64. width: auto;
  65. }
  66.  
  67. body.no-scroll {
  68. overflow: hidden;
  69. }
  70.  
  71. html:not(.dwc-mobile) body.no-scroll {
  72. padding-inline-end: 18px
  73. }
  74.  
  75.  
  76. /* ============================================================================
  77. 2. ACCESSIBILITY (Screen Reader, Focus)
  78. ============================================================================ */
  79.  
  80. /* Screen reader only - visually hidden but accessible */
  81. .dwc-sr-only,
  82. #dwc-sr-announcer {
  83. position: absolute;
  84. width: 1px;
  85. height: 1px;
  86. padding: 0;
  87. margin: -1px;
  88. overflow: hidden;
  89. clip: rect(0, 0, 0, 0);
  90. white-space: nowrap;
  91. border: 0;
  92. }
  93.  
  94. /* Focus visible styles for keyboard navigation */
  95. .dwc-nest-menu :focus-visible {
  96. outline: 2px solid currentColor;
  97. outline-offset: 2px;
  98. }
  99.  
  100. .dwc-multilevel-back:focus-visible,
  101. .dwc-menu-item a:focus-visible {
  102. outline-offset: -4px !important;
  103. }
  104.  
  105.  
  106. /* ============================================================================
  107. 3. CSS VARIABLES & CUSTOM PROPERTIES (none declared at root; variables are
  108. used inline throughout — section kept as placeholder for reference)
  109. ============================================================================ */
  110.  
  111.  
  112. /* ============================================================================
  113. 4. HTML / BODY STRUCTURE
  114. ============================================================================ */
  115.  
  116. html {
  117. display: flex;
  118. flex-direction: column;
  119. block-size: 100%;
  120.  
  121. & body {
  122. min-block-size: initial;
  123. flex-grow: 1;
  124. }
  125. }
  126.  
  127. #dwc-header {
  128. transition: opacity 0.2s, transform 0.4s;
  129. --content-gap: 0;
  130. --at-container-gap: 0;
  131.  
  132. inset-inline: 0;
  133. inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 0px);
  134. }
  135.  
  136. body:not(:has([data-no-sticky])) #dwc-header[data-sticky-header='true'] {
  137. position: sticky;
  138. }
  139.  
  140. body:not(:has([data-no-sticky])):is(.scroll-down, .scroll-up) #dwc-header[data-sticky-header='true'] {
  141. position: fixed;
  142. }
  143.  
  144. body:not(:has([data-no-overlay])) #dwc-header[data-overlay-header='true'] {
  145. position: fixed;
  146. }
  147.  
  148. /* set body top margin when sticky header becomes fixed */
  149. body:not(:has([data-no-sticky])):is(.scroll-up, .scroll-down):has([data-sticky-header="true"]:not([data-overlay-header="true"])){
  150. margin-block-start: var(--dwc-nest-header-height)
  151. }
  152.  
  153. body:not(:has([data-no-sticky])):has([data-sticky-header="true"]) [id] {
  154. scroll-margin-top: var(--dwc-nest-header-height);
  155. }
  156.  
  157.  
  158. /* ============================================================================
  159. 5. HEADER LAYOUT & CONTAINER
  160. ============================================================================ */
  161.  
  162. header:has(.dwc-nest-header) {
  163. padding: 0;
  164. }
  165.  
  166. .dwc-nest-header{
  167. position: relative;
  168. z-index: 999
  169. }
  170.  
  171. html:not(.dwc-mobile) .dwc-nest-header {
  172. margin-inline: auto;
  173. }
  174.  
  175. /* automatically remove padding from header div when a block is added to it */
  176. .dwc-nest-header:has(> div:not(.dwc-nest-header__container)){
  177. padding-inline: 0px;
  178. }
  179.  
  180. /* add inline padding to a block when it is a direct child of the header div */
  181. .dwc-nest-header > div:not(.dwc-nest-header__container){
  182. padding-inline: var(--header-inline-padding)
  183. }
  184.  
  185. /* if a block wraps the header container, inherit the header background color */
  186. div:not(.dwc-nest-header):has(.dwc-nest-header__container){
  187. background-color:var(--header-bg)
  188. }
  189.  
  190. /* optimize multi row header */
  191. .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]{
  192. --dwc-nest-header-height:var(--dwc-header-div-height) !important
  193. }
  194.  
  195. .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) {
  196. background-color: var(--mobile-menu-topbar-bg) !important;
  197. align-items: center !important;
  198. animation: none !important;
  199. }
  200.  
  201. .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top .dwce-toggle {
  202. display: block;
  203. }
  204.  
  205. /* overlay header on multirow */
  206. html:not(.dwc-mobile):not(:has([data-no-overlay])) .dwc-nest-header[data-fullscreen-mobile-menu="true"][data-overlay-header="true"] > div:first-child{
  207. border-top-left-radius: var(--overlay-header-radius);
  208. border-top-right-radius: var(--overlay-header-radius);
  209. }
  210.  
  211. html:not(.dwc-mobile) .dwc-nest-tooltip {
  212. display: none !important;
  213. clip: rect(1px,1px,1px,1px);
  214. word-wrap: normal!important;
  215. border: 0;
  216. clip-path: inset(50%);
  217. height: 1px !important;
  218. margin: -1px;
  219. overflow: hidden;
  220. overflow-wrap: normal!important;
  221. padding: 0 !important;
  222. width: 1px;
  223. }
  224.  
  225. /* fix centered logo fouc */
  226. html:not(.dwc-mobile) header:has([data-centered-logo="true"]):not(.desktop-centered header) {
  227. opacity: 0;
  228. }
  229.  
  230. html:not(.dwc-mobile) [data-fullscreen-desktop="true"] .dwc-nav-wrapper {
  231. display: grid;
  232. place-content: normal;
  233. border: solid 5px red;
  234. min-block-size: 100dvh;
  235. }
  236.  
  237. /* fix for menu item text color with <font> tag */
  238. .dwc-mobile .dwce-nav-nested[data-submenu-reveal="expand"] .dwce-dropdown.open>.dwc-submenu-toggle font,
  239. .dwc-mobile .dwce-nav-nested [data-submenu-reveal="expand"].dwce-dropdown.open>.dwc-submenu-toggle font{
  240. color: var(--dropdown-expanded-clr) !important;
  241. }
  242.  
  243.  
  244. /* ============================================================================
  245. 6. NAVIGATION WRAPPER & NESTED NAV
  246. ============================================================================ */
  247.  
  248. .dwc-nav-wrapper {
  249. display: flex;
  250. flex-direction: column;
  251. }
  252.  
  253. .dwce-nav-nested {
  254. /* --global-width: attr(data-global-content-width px); */
  255. align-items: center;
  256. display: flex;
  257. -webkit-tap-highlight-color: transparent;
  258. }
  259.  
  260. .dwc-nav-nested-items {
  261. display: flex;
  262. flex-direction: row;
  263. flex-wrap: wrap;
  264. gap: 30px;
  265. list-style-type: none;
  266. margin: 0;
  267. padding: 0;
  268. /* align-items: flex-end; */
  269. align-items: center;
  270. }
  271.  
  272. .dwc-nav-nested-items a {
  273. text-decoration: none;
  274. }
  275.  
  276. html:not(.dwc-mobile) .dwce-nav-nested .dwc-nav-nested-items {
  277. gap: var(--menu-items-gap);
  278. }
  279.  
  280. .dwc-nest-header__container:has(.dwc-nav-nested-items .dwc-nest-menu__logo[data-breakout]) {
  281. flex-direction: column !important;
  282. justify-content: center !important;
  283. }
  284.  
  285. .dwc-nav-nested-items > li:has(> a),
  286. .dwc-nav-nested-items > li:has(> .dwc-submenu-toggle) {
  287. position: relative;
  288. }
  289.  
  290. /* prevent logo from shrinking on screen resize */
  291. html:not(.dwc-mobile) #dwc-header .dwc-logo-is-centered .dwc-header-logo-item {
  292. flex-shrink: 0;
  293. }
  294.  
  295. html:not(.dwc-mobile) .dwc-nest-header .dwc-nav-nested-items {
  296. transition-property: opacity, transform;
  297. }
  298.  
  299. /* prevent fouc when offcanvas is enabled and anime height */
  300. body:has([data-offcanvas="true"]) .dwc-nav-wrapper:not(.sidebar-ready .dwc-nav-wrapper){
  301. display: none;
  302. }
  303.  
  304. [data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper {
  305. z-index: 99999;
  306. }
  307.  
  308.  
  309. /* ============================================================================
  310. 7. MENU ITEMS — SPACING, COLOR & TYPOGRAPHY
  311. ============================================================================ */
  312.  
  313. .dwc-menu-item a,
  314. .dwc-menu-item a span {
  315. align-items: center;
  316. display: inline-flex;
  317. }
  318.  
  319. /* Shared styles for both menu types */
  320. .dwce-nav-nested .dwc-nav-nested-items > li > a:not(.dwc-nest-menu__logo),
  321. .dwce-nav-nested .dwc-nav-nested-items > li .dwc-submenu-toggle,
  322. .dwce-nav-nested .dwc-dropdown-content > .dwc-menu-item > a {
  323. font-weight: var(--menu-item-font-weight);
  324. font-size: var(--menu-item-font-size);
  325. color: var(--menu-item-clr);
  326. background-color: var(--menu-item-bg);
  327. inline-size: 100%;
  328. }
  329.  
  330. .dwce-nav-nested .dwc-dropdown-content > .dwce-dropdown > .dwc-submenu-toggle,
  331. .dwce-nav-nested .dwc-dropdown-content > .dwc-menu-item > a {
  332. --menu-item-font-size: var(--dropdown-item-font-size)
  333. }
  334.  
  335. /* Specific padding for nested menu items */
  336. .dwce-nav-nested .dwc-nav-nested-items > li > a:not(.dwc-nest-menu__logo),
  337. .dwce-nav-nested .dwc-nav-nested-items > li[data-megamenu="true"] .dwc-submenu-toggle {
  338. padding-block: var(--menu-item-block-padding);
  339. padding-inline: var(--menu-item-inline-padding) !important;
  340. }
  341.  
  342. /* Specific padding for dropdown items */
  343. .dwce-nav-nested .dwc-dropdown-content > .dwc-menu-item > a {
  344. padding-block: var(--dropdown-item-block-padding);
  345. padding-inline: var(--dropdown-item-inline-padding) !important;
  346. }
  347.  
  348. .dwce-nav-nested .dwc-nav-nested-items > .dwce-dropdown:not([data-megamenu="true"]) li .dwc-submenu-toggle{
  349. padding-block: var(--dropdown-item-block-padding);
  350. padding-inline: var(--dropdown-item-inline-padding) !important;
  351. }
  352.  
  353. .dwce-nav-nested .dwc-nav-nested-items > li:not([data-megamenu="true"]) .dwc-submenu-toggle:not(.dwce-dropdown li .dwc-submenu-toggle){
  354. padding-block: var(--menu-item-block-padding);
  355. padding-inline: var(--menu-item-inline-padding) !important;
  356. }
  357.  
  358. /* MENU ITEMS COLOR */
  359. .dwce-nav-nested .dwc-nav-nested-items > li .dwc-submenu-toggle :where(span, a, svg) {
  360. color: inherit;
  361. font-weight: inherit;
  362. }
  363.  
  364. /* Dropdown item color */
  365. .dwce-nav-nested .dwc-dropdown-content > .dwc-menu-item > a:not([aria-current="page"], li:hover > *),
  366. li:not([data-megamenu="true"]) .dwc-submenu-toggle:not( .dwc-nav-nested-items > li > *, li:hover > *, .open.active *) {
  367. color: var(--dropdown-item-clr) !important;
  368. }
  369.  
  370. /* dropdown within a dropdown color */
  371. li:not([data-megamenu="true"]) .dwc-submenu-toggle:not( .dwc-nav-nested-items > li > *, li:hover > *) {
  372. color: var(--dropdown-item-clr);
  373. }
  374.  
  375. /* DROPDOWN MENU ITEMS BG COLOR */
  376. .dwce-nav-nested .dwc-dropdown-content > .dwc-menu-item > a:not([data-megamenu="true"] a),
  377. li:not([data-megamenu="true"]) .dwc-submenu-toggle:not( .dwc-nav-nested-items > li > *) {
  378. background-color: var(--dropdown-item-bg)
  379. }
  380.  
  381. /* DROPDOWN BG COLOR */
  382. .dwce-nav-nested .dwce-dropdown:not([data-megamenu="true"]) .dwc-dropdown-content {
  383. background-color: var(--dropdown-content-bg);
  384. }
  385.  
  386. /* DROPDOWN BORDER RADIUS */
  387. .dwce-nav-nested .dwc-nav-nested-items .dwce-dropdown:not([data-megamenu="true"]) li :is(.dwc-submenu-toggle, a){
  388. border-radius: var(--dropdown-item-radius)
  389. }
  390.  
  391. /*menu items border radius desktop only */
  392. html:not(.dwc-mobile) .dwce-nav-nested .dwc-nav-nested-items > li >
  393. :is(a:not([data-last-item-is-button="true"] .dwc-nav-nested-items > .dwc-menu-item:last-of-type a, [data-last-item-is-button="true-2"] .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo ), .dwc-submenu-toggle){
  394. border-radius: var(--menu-item-radius);
  395. border: var(--menu-item-border);
  396. }
  397.  
  398. /* CHEVRON */
  399. .dwce-nav-nested .dwc-nav-nested-items > li:not(li:has([aria-current="page"]:not([dwc-exclude])), li:hover) .dwc-submenu-toggle svg path{
  400. stroke: var(--chevron-clr);
  401. }
  402.  
  403. .dwce-nav-nested .dwc-nav-nested-items > li .dwc-submenu-toggle svg{
  404. inline-size: var(--chevron-size);
  405. }
  406.  
  407. .dwce-nav-nested .dwc-nav-nested-items > li .dwc-submenu-toggle svg path{
  408. stroke: var(--chevron-clr);
  409. }
  410.  
  411. /* chevron within dropdown */
  412. .dwce-nav-nested .dwce-dropdown:not([data-megamenu="true"]) li .dwc-submenu-toggle svg{
  413. --chevron-clr: var(--dropdown-item-clr);
  414. --chevron-hover-clr: var(--dropdown-item-hover-clr);
  415. }
  416.  
  417. /* BADGE */
  418. .dwc-menu-item-badge {
  419. color: var(--badge-color);
  420. background-color: var(--badge-bg-color);
  421. font-size: var(--badge-font-size);
  422. padding: var(--badge-padding);
  423. border-radius: var(--badge-radius);
  424. margin-left: var(--badge-gap);
  425. }
  426.  
  427. /* SUBMENU TOGGLE */
  428. .dwc-submenu-toggle {
  429. align-items: center;
  430. cursor: pointer;
  431. display: flex;
  432. }
  433.  
  434. .dwc-submenu-toggle button {
  435. padding-inline: initial;
  436. display: grid;
  437. }
  438.  
  439. .dwce-nav-nested .dwc-submenu-toggle {
  440. justify-content: space-between;
  441. }
  442.  
  443. .dwce-dropdown .dwc-submenu-toggle {
  444. gap: 10px
  445. }
  446.  
  447. .dwc-submenu-toggle button[aria-expanded="true"] > svg {
  448. transform: rotateZ(180deg);
  449. }
  450.  
  451. .dwc-submenu-toggle button[aria-expanded] > svg {
  452. transition: 0.25s;
  453. }
  454.  
  455. /* multi-level dropdown arrow > */
  456. .dwc-submenu-toggle:has(+ .dwc-sub-submenu-overflow-right) svg {
  457. rotate: 180deg;
  458. }
  459.  
  460. html:not(.dwc-mobile) body
  461. .dwce-nav-nested:not([data-offcanvas="true"])
  462. .dwce-dropdown:not([data-megamenu="true"]) .dwce-dropdown .dwc-submenu-toggle button
  463. svg {
  464. transform: rotate(270deg);
  465. }
  466.  
  467. /* DROPDOWN ICON */
  468. .dwc-dropdown-icon {
  469. width: var(--size);
  470. height: auto;
  471.  
  472. & path {
  473. stroke: var(--color);
  474. }
  475. }
  476.  
  477. /* Open/Close label toggle */
  478. [data-label="Open/Close"] .dwce-toggle__label-wrap {
  479. overflow-y: clip;
  480. display: flex;
  481. padding-inline-end: 0.25em;
  482. }
  483.  
  484. [data-label="Open/Close"] .dwce-toggle__label {
  485. display: grid;
  486. position: relative;
  487. line-height: 1;
  488. transition: 0.25s
  489. }
  490.  
  491. [data-label="Open/Close"].is-active .dwce-toggle__label {
  492. transform: translateY(-100%);
  493. }
  494.  
  495. [data-label="Open/Close"] .dwce-toggle__label::after {
  496. content: attr(data-close-text);
  497. display: block;
  498. position: absolute;
  499. top: 100%;
  500. }
  501. /* fixed by cracka */
  502. [data-flip-toggle="true"][data-label="Open/Close"] .dwce-toggle__label::after {
  503. right: 0;
  504. }
  505.  
  506.  
  507. /* ============================================================================
  508. 8. MENU ITEMS — HOVER STATES
  509. ============================================================================ */
  510.  
  511. /* HOVER STYLES */
  512. .dwce-nav-nested .dwc-nav-nested-items > li:hover > a,
  513. .dwce-nav-nested .dwc-nav-nested-items > li:hover > .dwc-submenu-toggle,
  514. .dwce-nav-nested .dwc-dropdown-content > li:hover > .dwc-submenu-toggle,
  515. .dwce-nav-nested .dwc-dropdown-content > .dwc-menu-item:hover > a {
  516. color: var(--menu-item-hover-clr);
  517. background-color: var(--menu-item-hover-bg)
  518. }
  519.  
  520. .dwc-nest-nav-dropdown-link:hover {
  521. color: var(--menu-item-hover-clr);
  522. }
  523.  
  524. /* Hover border underline indicator */
  525. .dwce-nav-nested .dwc-nav-nested-items li.dwc-menu-item > a:not([data-last-item-is-button="true"] .dwc-nav-nested-items > .dwc-menu-item:last-of-type a, [data-last-item-is-button="true-2"] .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):hover::before,
  526. body .dwce-nav-nested .dwc-nav-nested-items li.dwc-menu-item > a:not([data-last-item-is-button="true"] .dwc-nav-nested-items > .dwc-menu-item:last-of-type a, [data-last-item-is-button="true-2"] .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):focus-visible::before,
  527. .dwce-nav-nested .dwc-nav-nested-items li.dwce-dropdown:hover > .dwc-submenu-toggle::before,
  528. body .dwce-nav-nested .dwc-nav-nested-items li.dwce-dropdown:focus-within > .dwc-submenu-toggle::before{
  529. content: '';
  530. background-color: var(--menu-item-hover-border-bg);
  531. inline-size: 100%;
  532. block-size: var(--menu-item-hover-border-height);
  533. position: absolute;
  534. inset-block-start: calc(100% - var(--menu-item-hover-border-height));
  535. inset-inline-start: 0;
  536. }
  537.  
  538. .dwc-mobile :is(.dwc-submenu-toggle,.dwc-nav-nested-items li.dwc-menu-item > a)::before,
  539. :is(.dwc-nav-nested-items > li li .dwc-submenu-toggle,.dwc-nav-nested-items > li li.dwc-menu-item > a)::before,
  540. [data-offcanvas="true"] :is(.dwc-submenu-toggle,.dwc-nav-nested-items li.dwc-menu-item > a)::before{
  541. inline-size: calc(var(--menu-item-hover-border-height) * 1.5) !important;
  542. block-size: 100% !important;
  543. inset-block: 0 !important;
  544. }
  545.  
  546. .dwce-nav-nested .dwc-nav-nested-items li.dwc-menu-item:has(> a),
  547. .dwce-nav-nested .dwc-nav-nested-items li.dwc-menu-item:has(> .dwc-submenu-toggle) {
  548. position: relative;
  549. }
  550.  
  551. /* DROPDOWN HOVER BG */
  552. .dwce-nav-nested .dwc-dropdown-content > li:hover > .dwc-submenu-toggle:not([data-megamenu="true"] *, .dwc-mobile .open.active > *),
  553. .dwce-nav-nested .dwc-dropdown-content > li:hover > a:not([data-megamenu="true"] a){
  554. background-color: var(--dropdown-item-hover-bg);
  555. color: var(--dropdown-item-hover-clr);
  556. }
  557.  
  558. /* Chevron hover color */
  559. .dwce-nav-nested .dwc-nav-nested-items li:hover > .dwc-submenu-toggle svg path{
  560. stroke: var(--chevron-hover-clr);
  561. }
  562.  
  563. /* chevron active color */
  564. .dwce-nav-nested .dwc-nav-nested-items > li:not(:hover):has([aria-current="page"]:not([dwc-exclude])) > .dwc-submenu-toggle svg path{
  565. stroke: var(--menu-item-active-clr)
  566. }
  567.  
  568.  
  569. /* DIM DROPDOWN PARENT WHOSE CHILD DROPDOWN CONTENT IS SHOWING */
  570. html:not(.dwc-mobile) [nested-dropdown-active-overlay="true"] .open:has(.open) > .dwc-dropdown-content::before {
  571. content: "";
  572. position: absolute;
  573. inset: 0;
  574. background-color: var(--nested-dropdown-inactive-overlay);
  575. pointer-events: none;
  576. border-radius: var(--dropdown-content-border-radius);
  577. z-index: 1;
  578. backdrop-filter: blur(var(--nested-dropdown-inactive-blur))
  579. }
  580.  
  581.  
  582. /* ============================================================================
  583. 9. MENU ITEMS — ACTIVE / CURRENT PAGE STATES
  584. ============================================================================ */
  585.  
  586. /* links and dropdown active styles */
  587. .dwce-nav-nested .dwc-nav-nested-items a[aria-current="page"]:not(.dwce-button, [dwc-exclude], [dwc-exclude] a, li:hover > a, a:hover, .dwc-nest-menu__logo,
  588. [data-last-item-is-button="true"] .dwc-nav-nested-items > .dwc-menu-item:last-of-type a,
  589. [data-last-item-is-button="true-2"] .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+2) a,
  590. [data-last-item-is-button="true-3"] .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+3) a),
  591. .dwce-nav-nested .dwc-nav-nested-items > li:has([aria-current="page"]:not([dwc-exclude])):not(li:hover) > .dwc-submenu-toggle {
  592. color: var(--menu-item-active-clr);
  593. background-color: var(--menu-item-active-bg);
  594. }
  595.  
  596. .dwce-nav-nested .dwc-nav-nested-items .dwc-submenu-toggle > a[aria-current="page"]{
  597. background-color: initial !important;
  598. }
  599.  
  600. .dwce-nav-nested .dwc-nav-nested-items a[aria-current="page"]:not(.dwce-button, [dwc-exclude], [dwc-exclude] a, .dwc-nest-menu__logo),
  601. .dwce-nav-nested .dwc-nav-nested-items > li .dwc-submenu-toggle{
  602. position: relative;
  603. }
  604.  
  605. /* Active border underline indicator */
  606. .dwce-nav-nested .dwc-nav-nested-items a[aria-current="page"]:not(.dwce-button, [dwc-exclude], [dwc-exclude] a, [data-last-item-is-button="true"] .dwc-nav-nested-items > .dwc-menu-item:last-of-type a,
  607. [data-last-item-is-button="true-2"] .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+2) a,
  608. [data-last-item-is-button="true-3"] .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo, .dwc-submenu-toggle > a)::before,
  609. .dwce-nav-nested .dwc-nav-nested-items > li:not(:hover):has([aria-current="page"]:not([dwc-exclude], [dwc-exclude] a)) > .dwc-submenu-toggle::before{
  610. content: '';
  611. background-color: var(--menu-item-active-border-bg);
  612. inline-size: 100%;
  613. block-size: var(--menu-item-active-border-height);
  614. position: absolute;
  615. inset-block-start: calc(100% - var(--menu-item-active-border-height));
  616. inset-inline-start: 0;
  617. }
  618.  
  619. .dwce-nav-nested .dwc-nav-nested-items > li:not(:hover):has([aria-current="page"]:not([dwc-exclude], [dwc-exclude] a)) > .dwc-submenu-toggle > :is(a:not(.dwc-nest-menu__logo), svg path, button, span){
  620. color: var(--menu-item-active-clr);
  621. stroke: var(--menu-item-active-clr);
  622. }
  623.  
  624. /* mobile expand — expanded item color */
  625. :is(.dwc-mobile, body:has([data-offcanvas="true"]))
  626. :is([data-submenu-reveal="expand"])
  627. .open.active.dwce-dropdown > .dwc-submenu-toggle svg:not(.open.active.dwce-dropdown:hover > .dwc-submenu-toggle svg) path{
  628. stroke: var(--dropdown-expanded-clr);
  629. }
  630.  
  631.  
  632. /* ============================================================================
  633. 10. MENU ITEMS — BREAKPOINT VISIBILITY
  634. ============================================================================ */
  635.  
  636. .dwc-mobile .dwc-menu-item[data-breakpoint-visibility="hide-on-mobile"] {
  637. display: none !important;
  638. visibility: hidden !important;
  639. }
  640.  
  641. html:not(.dwc-mobile) .dwc-menu-item[data-breakpoint-visibility="hide-on-desktop"] {
  642. display: none !important;
  643. visibility: hidden !important;
  644. }
  645.  
  646. html:not(.dwc-mobile) .dwce-dropdown[data-breakpoint-visibility="hide-on-desktop"] {
  647. display: none !important;
  648. visibility: hidden !important;
  649. }
  650.  
  651. .dwc-mobile .dwce-dropdown[data-breakpoint-visibility="hide-on-mobile"] {
  652. display: none !important;
  653. visibility: hidden !important;
  654. }
  655.  
  656. /* ============================================================================
  657. 11. DROPDOWN CONTENT — BASE STYLES
  658. ============================================================================ */
  659.  
  660. .dwce-dropdown {
  661. display: flex;
  662. flex-direction: column;
  663. position: relative
  664. }
  665.  
  666. .dwce-dropdown .dwce-dropdown .dwc-dropdown-content {
  667. left: 100%;
  668. &:not(.dwc-sub-submenu-overflow-bottom){
  669. top: 0;
  670. }
  671. }
  672.  
  673. .dwce-dropdown .dwce-dropdown:not([data-toggle=click]):hover:before {
  674. display: none
  675. }
  676.  
  677. html:not(.dwc-mobile) .dwc-dropdown-content {
  678. position: absolute;
  679. &:not(.dwc-sub-submenu-overflow-bottom){
  680. top: 100%;
  681. }
  682. visibility: hidden;
  683. opacity: 0;
  684. display: flex;
  685. flex-direction: column;
  686. }
  687.  
  688. html:not(.dwc-mobile) .dwc-dropdown-content:not(.open > *, [data-megamenu="true"] *) {
  689. transform: translateX(-20px) !important;
  690. }
  691.  
  692. html:not(.dwc-mobile) .dwc-sub-submenu-overflow-right.dwc-dropdown-content:not(.open > *) {
  693. transform: translateX(30px) !important;
  694. }
  695.  
  696. html:not(.dwc-mobile) .dwc-dropdown-content{
  697. transition: 0.3s ease
  698. }
  699.  
  700. html:not(.dwc-mobile) .dwce-nav-nested .dwc-dropdown-content{
  701. box-shadow: var(--dropdown-content-shadow);
  702. }
  703.  
  704. html:not(.dwc-mobile) .dwce-nav-nested:not([data-offcanvas="true"]) .dwc-dropdown-content {
  705. border-radius: var(--dropdown-content-border-radius);
  706. }
  707.  
  708. html:not(.dwc-mobile) .dwce-nav-nested:not([data-offcanvas="true"]) .dwc-dropdown-content:has(.open) {
  709. border-bottom-right-radius: 0;
  710. border-top-right-radius: 0;
  711. }
  712.  
  713. html:not(.dwc-mobile) .dwce-nav-nested:not([data-offcanvas="true"]) .dwc-dropdown-content .dwc-dropdown-content {
  714. border-bottom-left-radius: 0;
  715. border-top-left-radius: 0;
  716. }
  717.  
  718. .dwc-dropdown-content-wrapper .dwc-dropdown-content {
  719. cursor: auto;
  720. flex-direction: column;
  721. list-style-type: none;
  722. margin: 0;
  723. padding: 0;
  724. transition-duration: .2s;
  725. transition-property: opacity, transform, visibility;
  726. transition-timing-function: ease;
  727. z-index: 1001;
  728. }
  729.  
  730. .dwc-dropdown-content:not([data-megamenu="true"] .dwc-dropdown-content) {
  731. padding-inline-end: 0 !important;
  732. }
  733.  
  734. html:not(.dwc-mobile) .dwc-dropdown-content:not(.open .dwc-dropdown-content){
  735. --dropdown-content-border: solid transparent var(--dropdown-content-border-size);
  736. }
  737.  
  738. html:not(.dwc-mobile) body .dwce-nav-nested:not([data-offcanvas="true"]) [data-megamenu="true"] .dwc-dropdown-content > *{
  739. max-block-size: calc(95dvb - calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)));
  740. overflow-y: auto;
  741. overscroll-behavior: contain;
  742. scrollbar-width: thin !important;
  743. inline-size: 100%;
  744. max-inline-size: var(--megamenu-inner-width, var(--dropdown-content-width));
  745. margin-inline: auto;
  746. overflow-x: clip;
  747. }
  748.  
  749. /* dynamic dropdown content width and position */
  750. html:not(.dwc-mobile) .dwce-nav-nested:not([data-offcanvas="true"]) [data-megamenu="true"] .dwc-dropdown-content:not([data-use-selector="true"]) {
  751. min-inline-size: var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;
  752. inset-inline-start: var(--left-position)!important;
  753. }
  754.  
  755. html:not(.dwc-mobile) .dwce-nav-nested:not([data-offcanvas="true"]) [data-megamenu="true"] .dwc-dropdown-content:not([data-use-selector="true"]) {
  756. inset-inline-end: var(--right-position)!important;
  757. }
  758.  
  759. html:not(.dwc-mobile) .dwce-nav-nested:not([data-offcanvas="true"]) .dwce-dropdown:not([data-megamenu="true"]) .dwc-dropdown-content:not(.dwc-dropdown-content .dwc-dropdown-content){
  760. /* inset-inline-start: 0 !important; */
  761. inset-inline-start: var(--left-position, 0);
  762. }
  763.  
  764. html:not(.dwc-mobile) .dwce-nav-nested .dwc-dropdown-content .dwc-dropdown-content:not(.dwc-sub-submenu-overflow-right, .dwc-submenu-overflow-right){
  765. inset-inline-start: 100% !important;
  766. }
  767.  
  768. html:not(.dwc-mobile) .dwce-nav-nested .dwce-dropdown:not([data-megamenu="true"]) .dwc-dropdown-content{
  769. min-inline-size: var(--multilevel-dropdown-width) !important;
  770. }
  771.  
  772. html:not(.dwc-mobile) .dwce-nav-nested:not([data-parent-relative-dropdown="true"]) [data-equal-dropdown-height="true"].dwce-dropdown:not([data-megamenu="true"]) .dwc-dropdown-content {
  773. min-block-size: var(--equal-dropdown-height, 100%);
  774. }
  775.  
  776. html:not(.dwc-mobile) .dwce-nav-nested:not([data-parent-relative-dropdown="true"]) [data-exclude-from-equal-height="true"].dwce-dropdown:not([data-megamenu="true"]) > .dwc-dropdown-content {
  777. min-block-size: 0;
  778. }
  779.  
  780. /* INSIDE ETCH BUILDER */
  781. html:not(.dwc-mobile) :is(:not(.dwc-header-left, .dwc-header-right)) .dwce-nav-nested:not([data-offcanvas="true"]) [data-megamenu="true"] .dwc-dropdown-content:not([data-use-selector="true"]) {
  782. min-inline-size: var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;
  783. inset-inline-start: var(--left-position)!important;
  784. }
  785.  
  786. /* static position fix */
  787. [data-parent-relative-dropdown="false"]:not([data-parent-relative-dropdown="true"] [data-parent-relative-dropdown="false"]) .dwc-dropdown-content .dwce-dropdown:not([data-parent-relative-dropdown="true"], [data-parent-relative-dropdown="true"] > .dwc-dropdown-content .dwce-dropdown) {
  788. position: static;
  789. }
  790.  
  791. html:not(.dwc-mobile) .open:has(.open) > .dwce-dropdown:not(.open) > ul{
  792. opacity: 0;
  793. transition: 0s
  794. }
  795.  
  796. html:not(.dwc-mobile) .dwce-dropdown.open:not([data-megamenu="true"]){
  797. z-index: 1;
  798. }
  799.  
  800. html:not(.dwc-mobile) .open:has(.open) .open:has(.dwce-dropdown:hover) .dwc-dropdown-content:not([data-offcanvas="true"] *) {
  801. box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 30%);
  802. }
  803.  
  804. /* check that dropdown has only li elements as direct child */
  805.  
  806. .etch-builder-block .dwce-dropdown:not([data-megamenu="true"]) .dwc-dropdown-content:has( > *:not(li))::before{
  807. content: 'Invalid selector inside dropdown, use <li> only as direct child element';
  808. font-size: 18px;
  809. display:block;
  810. background: orangered;
  811. color:white;
  812. padding: 0.5rem
  813.  
  814. }
  815.  
  816. /* toggle open mobile menu for editing */
  817. .dwc-mobile [data-open-mobile-menu="true"] .etch-builder-block.dwc-nav-wrapper {
  818. transform: translateX(0%) !important;
  819. visibility: visible !important;
  820. }
  821.  
  822.  
  823.  
  824. /* ============================================================================
  825. 12. DROPDOWN CONTENT — OPEN / CLOSED STATES
  826. ============================================================================ */
  827.  
  828. .dwce-dropdown.open>.dwc-dropdown-content,
  829. .dwce-dropdown.open>.dwc-dropdown-content-wrapper>.dwc-dropdown-content {
  830. opacity: 1;
  831. visibility: visible;
  832. }
  833.  
  834. .dwce-dropdown:not(.open, .etch-builder-block) .dwc-dropdown-content,
  835. .dwce-dropdown:not(.open, .etch-builder-block) .dwc-dropdown-content-wrapper {
  836. pointer-events: none;
  837. visibility: hidden;
  838. }
  839.  
  840. /* dropdown content gap on open */
  841. html:not(.dwc-mobile) body .dwce-nav-nested:not([data-offcanvas="true"]) .dwce-dropdown.open > .dwc-dropdown-content:not(.dwc-dropdown-content .dwc-dropdown-content),
  842. html:not(.dwc-mobile) body .dwce-nav-nested:not([data-offcanvas="true"]) .dwce-dropdown.open > .dwc-dropdown-content-wrapper > .dwc-dropdown-content:not(.dwc-dropdown-content .dwc-dropdown-content) {
  843. transform: translateY(calc(var(--caret-size) - var(--dropdown-content-border-size))) scaleX(1) scaleY(1);
  844. }
  845.  
  846. html:not(.dwc-mobile) body .dwce-nav-nested:not([data-offcanvas="true"]) .dwce-dropdown.open > .dwc-dropdown-content .dwc-dropdown-content,
  847. html:not(.dwc-mobile) body .dwce-nav-nested:not([data-offcanvas="true"]) .dwce-dropdown.open > .dwc-dropdown-content-wrapper > .dwc-dropdown-content .dwc-dropdown-content{
  848. transform: translateY(0) scaleX(1) scaleY(1);
  849. }
  850.  
  851. /* EXTEND DROPDOWN BUTTON TO AVOID LOSING FOCUS/CLOSING ON DROPDOWN CONTENT */
  852. html:not(.dwc-mobile) body .dwce-nav-nested:not([data-offcanvas="true"]) .open .dwc-dropdown-content .dwce-dropdown:has( > .dwc-sub-submenu-overflow-right):hover::after {
  853. inset-inline-end: 100%;
  854. inset-inline-start: auto;
  855. }
  856.  
  857. html:not(.dwc-mobile) body .dwce-nav-nested:not([data-offcanvas="true"]) .open .dwc-dropdown-content .dwce-dropdown:not(.dwce-dropdown:has( > .dwc-sub-submenu-overflow-right)):hover::after {
  858. inset-inline-start: 100%;
  859. }
  860.  
  861. html:not(.dwc-mobile) body .dwce-nav-nested:not([data-offcanvas="true"]) .open .dwc-dropdown-content .dwce-dropdown:hover::after {
  862. content: "";
  863. position: absolute;
  864. inset-block-end: 0;
  865. block-size: 100%;
  866. inline-size: 100%;
  867. z-index: -1;
  868. inset-inline-end: auto;
  869. }
  870.  
  871. html:not(.dwc-mobile) .open:has(.open) > .dwce-dropdown:not(.open){
  872. position: static;
  873. }
  874.  
  875. /*OVERLAY — offcanvas not open */
  876. #dwc-header .dwce-nav-nested[data-offcanvas="true"]:not([data-submenu-reveal = 'slide']) .dwce-dropdown:not(.open.active) > .dwc-dropdown-content > .dwce-dropdown:not([data-submenu-reveal = 'slide'] *),
  877. #dwc-header .dwce-nav-nested[data-offcanvas="true"]:not([data-submenu-reveal = 'slide']) .dwce-dropdown:not(.open.active) > .dwc-dropdown-content-wrapper > .dwc-dropdown-content > .dwce-dropdown:not([data-submenu-reveal = 'slide'] *){
  878. visibility: hidden;
  879. }
  880.  
  881. /* CARET FIX FOR DYNAMIC MENU STRUCTURE */
  882. .dwce-nav-nested .dwc-nav-nested-items >
  883. li> [data-megamenu="true"].open > .dwc-dropdown-content {
  884. opacity: 1;
  885. visibility: visible;
  886. }
  887.  
  888.  
  889. /* ============================================================================
  890. 13. DROPDOWN CONTENT — OVERFLOW HANDLING
  891. ============================================================================ */
  892.  
  893. /*
  894. * LTR: Nested dropdowns default to right side (inset-inline-start: 100%)
  895. * When overflowing right edge, flip to left side
  896. */
  897. html:not(.dwc-mobile) .dwc-dropdown-content .dwc-dropdown-content.dwc-sub-submenu-overflow-right {
  898. inset-inline-start: auto !important;
  899. inset-inline-end: 100% !important;
  900. }
  901.  
  902. /*
  903. * RTL: Nested dropdowns default to left side (inset-inline-start: 100% = left in RTL)
  904. * When overflowing left edge, flip to right side
  905. */
  906. html:not(.dwc-mobile) .dwc-dropdown-content .dwc-dropdown-content.dwc-sub-submenu-overflow-left {
  907. inset-inline-start: auto !important;
  908. inset-inline-end: 100% !important;
  909. }
  910.  
  911.  
  912. /* Flip nested dropdown upward when overflowing bottom of viewport */
  913. /* html:not(.dwc-mobile) .dwc-dropdown-content .dwc-dropdown-content.dwc-sub-submenu-overflow-bottom {
  914. inset-block-start: auto !important;
  915. inset-block-end: 0 !important;
  916. } */
  917.  
  918. /* Shift nested dropdown up by exact overflow amount to sit just above viewport bottom */
  919. html:not(.dwc-mobile) .dwc-dropdown-content .dwc-dropdown-content.dwc-sub-submenu-overflow-bottom {
  920. inset-block-start: var(--dwc-submenu-bottom-offset) !important;
  921. inset-block-end: auto !important;
  922. }
  923.  
  924.  
  925. /* ============================================================================
  926. 14. DROPDOWN CONTENT — BUFFER ZONES
  927. ============================================================================ */
  928.  
  929. /* Mega menu buffer */
  930. html:not(.dwc-mobile) [data-megamenu="true"].dwce-dropdown:not([data-toggle=click]):hover .dwc-dropdown-content:after {
  931. --dwc-dropdown-gap-height: var(--dropdown-buffer, inherit);
  932. }
  933.  
  934. html:not(.dwc-mobile) .logged-in [preview-buffer="true"] [data-megamenu="true"].dwce-dropdown:not([data-toggle=click]):hover .dwc-dropdown-content:after,
  935. html:not(.dwc-mobile) .logged-in [preview-buffer="true"] .dwc-submenu-toggle::after,
  936. html:not(.dwc-mobile) .etch-builder-block [preview-buffer="true"] [data-megamenu="true"].dwce-dropdown:not([data-toggle=click]):hover .dwc-dropdown-content:after,
  937. html:not(.dwc-mobile) .etch-builder-block [preview-buffer="true"] .dwc-submenu-toggle::after{
  938. background-color: #ff3d00b5;
  939. }
  940.  
  941. .dwce-dropdown:not([data-toggle=click]):hover .dwc-dropdown-content:after {
  942. bottom: 100%;
  943. content: "";
  944. height: var(--dwc-dropdown-gap-height, 0);
  945. position: absolute;
  946. width: 100%;
  947. z-index: 1;
  948. }
  949.  
  950. /* nested dropdown buffer */
  951. .dwce-nav-nested .dwc-nav-nested-items li li.dwce-dropdown:hover > .dwc-submenu-toggle::after,
  952. [data-offcanvas="true"].dwce-nav-nested .dwc-nav-nested-items li.dwce-dropdown:hover > .dwc-submenu-toggle::after{
  953. content: '';
  954. inline-size: var(--nested-dropdown-buffer-width, inherit);
  955. block-size: 250%;
  956. position: absolute;
  957. inset-block-start: 50%;
  958. transform: translateY(-50%);
  959. z-index: 9999999;
  960. }
  961.  
  962. [data-offcanvas="true"] .dwc-submenu-toggle::after{
  963. inset-inline-start: 0;
  964. }
  965.  
  966. [data-slide-in-direction="left"][data-offcanvas="true"] .dwc-submenu-toggle::after,
  967. .dwc-submenu-toggle:not([data-slide-in-direction="right"][data-offcanvas="true"] *)::after{
  968. inset-inline-end: 0;
  969. inset-inline-start: auto !important;
  970. }
  971.  
  972.  
  973. /* ============================================================================
  974. 15. DROPDOWN CONTENT — GAP / CARET
  975. ============================================================================ */
  976.  
  977. /* align dropdown content to bottom */
  978. html:not(.dwc-mobile) body:not(.desktop-centered) .dwc-nest-header__container:has([data-caret="true"]):not(:has([data-offcanvas="true"])) {
  979. align-items: stretch !important;
  980. }
  981.  
  982. html:not(.dwc-mobile) .dwc-nest-header__container:has([data-caret="true"]):not(:has([data-offcanvas="true"])) .dwc-nav-nested-items{
  983. align-items: stretch;
  984. }
  985.  
  986. html:not(.dwc-mobile) body:not(.desktop-centered) .dwc-nest-header__container:has([data-caret="true"]):not(:has([data-offcanvas="true"])) .dwc-nav-nested-items {
  987. height: 100%;
  988. }
  989.  
  990. html:not(.dwc-mobile) .dwc-nest-header__container:has([data-caret="true"]):not(:has([data-offcanvas="true"])) .dwc-nav-nested-items > li > .dwc-submenu-toggle{
  991. height: 100%
  992. }
  993.  
  994. html:not(.dwc-mobile) body:not(.desktop-centered) .dwc-nest-header__container:has([data-caret="true"]):not(:has([data-offcanvas="true"])) .dwc-nav-wrapper{
  995. height: 100%
  996. }
  997.  
  998. html:not(.dwc-mobile) .dwce-nav-nested[data-caret="true"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > li.dwc-menu-item {
  999. display: flex;
  1000. align-items: center;
  1001. }
  1002.  
  1003. html:not(.dwc-mobile) .dwc-nest-header:has([data-caret="true"]){
  1004. padding-block:initial !important
  1005. }
  1006.  
  1007. html:not(.dwc-mobile) .dwce-nav-nested[data-caret="true"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > li {
  1008. display: flex;
  1009. align-items: center;
  1010. justify-content: center;
  1011. }
  1012.  
  1013. /* caret diamond shape */
  1014. html:not(.dwc-mobile) body .dwce-nav-nested[data-caret="true"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > .dwce-dropdown.open:not(.dwc-stripe-style [data-megamenu="true"])::after {
  1015. inline-size: calc((var(--dropdown-offset-gap) * 1.414) - var(--dropdown-content-border-size));
  1016. aspect-ratio: 1;
  1017. opacity: 1;
  1018. transition: opacity 0.2s 0.1s;
  1019. background: linear-gradient(to bottom right, var(--dropdown-content-bg) calc(50% + var(--dropdown-content-border-size)), transparent 50%) border-box;
  1020. }
  1021.  
  1022. html:not(.dwc-mobile) body .dwce-nav-nested[data-caret="true"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > .dwce-dropdown:not(.dwc-stripe-style [data-megamenu="true"])::after {
  1023. content: '';
  1024. position: absolute;
  1025. background-color: var(--dropdown-content-bg);
  1026. transform: rotate(45deg);
  1027. inset-block-end: calc((-1 * var(--dropdown-offset-gap) - (var(--dropdown-offset-gap) * 1.414 / 2.0)) + var(--dropdown-content-border-size));
  1028. inset-inline-start: calc(50% - var(--dropdown-offset-gap));
  1029. opacity: 0;
  1030. }
  1031.  
  1032. html:not(.dwc-mobile) body .dwce-nav-nested:not([data-offcanvas="true"]) .dwc-nav-nested-items > .dwce-dropdown:not(.dwc-stripe-style [data-megamenu="true"])::after {
  1033. border-top: var(--dropdown-content-border);
  1034. border-left: var(--dropdown-content-border);
  1035. z-index: 9999;
  1036. inset-block-end: calc(var(--dropdown-offset-gap) * -1.55);
  1037. }
  1038.  
  1039. html:not(.dwc-mobile) body .dwce-nav-nested:not([data-offcanvas="true"]) .dwc-nav-nested-items > .dwce-dropdown:not(.dwc-stripe-style [data-megamenu="true"]) .dwc-dropdown-content{
  1040. outline: var(--dropdown-content-border);
  1041. }
  1042.  
  1043. /* CARET FIX FOR DYNAMIC MENU STRUCTURE */
  1044. html:not(.dwc-mobile)
  1045. body .dwce-nav-nested[data-caret="true"]:not([data-offcanvas="true"])
  1046. .dwc-nav-nested-items > li:has([data-megamenu="true"].open):not(.dwc-stripe-style .dwc-nav-nested-items > li)::after {
  1047. inline-size: calc((var(--dropdown-offset-gap) * 1.414) - var(--dropdown-content-border-size));
  1048. aspect-ratio: 1;
  1049. opacity: 1;
  1050. transition: opacity 0.2s 0.1s;
  1051. z-index: -1;
  1052. }
  1053.  
  1054. html:not(.dwc-mobile)
  1055. body .dwce-nav-nested[data-caret="true"]:not([data-offcanvas="true"])
  1056. .dwc-nav-nested-items > li:has([data-megamenu="true"]):not(.dwc-stripe-style .dwc-nav-nested-items > li)::after {
  1057. content: '';
  1058. position: absolute;
  1059. background-color: var(--dropdown-content-bg);
  1060. transform: rotate(45deg);
  1061. inset-block-end: calc((-1 * var(--dropdown-offset-gap) - (var(--dropdown-offset-gap) * 1.414 / 2.0)) + var(--dropdown-content-border-size));
  1062. inset-inline-start: calc(50% - var(
  1063. --dropdown-offset-gap));
  1064. opacity: 0;
  1065. }
  1066.  
  1067. .dwc-adaptive-height:not(.dwc-stripe-style){
  1068. --dropdown-offset-gap: 0
  1069. }
  1070.  
  1071.  
  1072. /* ============================================================================
  1073. 16. MEGA MENU
  1074. ============================================================================ */
  1075.  
  1076. [data-megamenu="true"] .dwc-dropdown-content {
  1077. container-type: inline-size;
  1078. background-color: var(--dropdown-content-bg);
  1079. cursor: auto;
  1080. display: flex;
  1081. flex-direction: column;
  1082. list-style-type: none;
  1083. margin: 0;
  1084. min-width: 200px;
  1085. opacity: 0;
  1086. padding: 0;
  1087. position: absolute;
  1088. top: 100%;
  1089. transition-duration: .2s;
  1090. transition-property: opacity, transform, visibility;
  1091. transition-timing-function: ease;
  1092. visibility: hidden;
  1093. z-index: 1001;
  1094. }
  1095.  
  1096. .dwc-mobile [data-megamenu="true"] .dwc-dropdown-content {
  1097. overflow-y: auto;
  1098. }
  1099.  
  1100. html:not(.dwc-mobile) [data-megamenu="true"]:not(.open) > .dwc-dropdown-content {
  1101. transform: translateY(-15px) scaleX(0.95) scaleY(0.95) !important;
  1102. }
  1103.  
  1104. .dwce-nav-nested [data-megamenu="true"] .dwc-dropdown-content:not(.show-nav .dwc-dropdown-content){
  1105. display:none;
  1106.  
  1107. }
  1108.  
  1109. /* prevents scrollbar before dropdown is positioned */
  1110. :where(html:not(.dwc-mobile) .dwce-nav-nested [data-megamenu="true"] .dwc-dropdown-content){
  1111. --left-position: -1000px;
  1112. }
  1113.  
  1114.  
  1115.  
  1116. /* wait for stripe style to load before active */
  1117. body:is(.dwc-stripe-style, .dwc-adaptive-height):not(.adaptive-height-active) .dwce-nav-nested:not([data-offcanvas="true"]) [data-megamenu="true"]{
  1118. pointer-events: none;
  1119. }
  1120.  
  1121. /* match mega menu content width to tabbed nav width when tabbed hero is enabled */
  1122. html:not(.dwc-mobile)
  1123. .dwc-nest-menu
  1124. [data-megamenu="true"] > .dwc-dropdown-content:has([data-tabbed-hero="true"]):not(:has(.active:hover)) {
  1125. clip-path: inset(0 calc(100% - var(--tab-list-width)) 0 0);
  1126. }
  1127.  
  1128.  
  1129. /* ============================================================================
  1130. 17. STRIPE STYLE
  1131. ============================================================================ */
  1132.  
  1133. /* html:not(.dwc-mobile) .dwc-stripe-style .dwce-dropdown[data-megamenu="true"] .dwc-dropdown-content:not([data-offcanvas="true"] [data-megamenu="true"] .dwc-dropdown-content) {
  1134. background: transparent !important;
  1135. } */
  1136.  
  1137. html:not(.dwc-mobile) .dwc-stripe-style [data-megamenu="true"] > .dwc-submenu-toggle:not([data-offcanvas="true"] .dwc-submenu-toggle),
  1138. html:not(.dwc-mobile) .dwc-stripe-style [data-megamenu="true"] > .dwc-submenu-toggle:not([data-offcanvas="true"] .dwc-submenu-toggle) > a,
  1139. html:not(.dwc-mobile) .dwc-stripe-style [data-megamenu="true"] > .dwc-submenu-toggle:not([data-offcanvas="true"] .dwc-submenu-toggle) > button {
  1140. cursor: default;
  1141. }
  1142.  
  1143. /* handles translate and opacity animation for stripe style on desktop */
  1144. html:not(.dwc-mobile) .dwc-stripe-style [data-megamenu="true"].open .dwc-dropdown-content:not([data-offcanvas="true"] [data-megamenu="true"] .dwc-dropdown-content) > * > *{
  1145. transform: translateX(0);
  1146. }
  1147.  
  1148. html:not(.dwc-mobile) .dwc-stripe-style [data-megamenu="true"] .dwc-dropdown-content:not([data-offcanvas="true"] [data-megamenu="true"] .dwc-dropdown-content) > * > *{
  1149. transition: transform 0.4s;
  1150. }
  1151.  
  1152. html:not(.dwc-mobile) .dwc-stripe-style [data-megamenu="true"].open + [data-megamenu="true"] .dwc-dropdown-content:not([data-offcanvas="true"] [data-megamenu="true"] .dwc-dropdown-content) > * > *{
  1153. transform: translateX(150px);
  1154. }
  1155.  
  1156. html:not(.dwc-mobile) .dwc-stripe-style [data-megamenu="true"]:has(+ [data-megamenu="true"].open) .dwc-dropdown-content:not([data-offcanvas="true"] [data-megamenu="true"] .dwc-dropdown-content) > * > *{
  1157. transform: translateX(-150px);
  1158. }
  1159.  
  1160. html:not(.dwc-mobile) .dwc-stripe-style [data-megamenu="true"].open .dwc-dropdown-content:not([data-offcanvas="true"] [data-megamenu="true"] .dwc-dropdown-content) > * {
  1161. overflow-x: hidden;
  1162. }
  1163.  
  1164. html:not(.dwc-mobile) .dwc-stripe-style [data-megamenu="true"].open .dwc-dropdown-content:not([data-offcanvas="true"] [data-megamenu="true"] .dwc-dropdown-content) > * {
  1165. border-radius: var(--stripe-border-radius);
  1166. }
  1167.  
  1168. html:not(.dwc-mobile) .dwc-stripe-style:not(.desktop-centered) .dwc-nest-header__container:not(:has([data-offcanvas="true"])) {
  1169. align-items: stretch !important;
  1170. }
  1171.  
  1172. html:not(.dwc-mobile) .dwc-stripe-style .dwce-nav-nested:not([data-offcanvas="true"]) .dwc-nav-nested-items > li.dwc-menu-item {
  1173. display: flex;
  1174. align-items: center;
  1175. }
  1176.  
  1177. /* stripe style fix */
  1178. html:not(.dwc-mobile) .dwc-stripe-style .dwc-nav-nested-items>.dwce-dropdown[data-megamenu="true"]>.dwc-dropdown-content:not([data-offcanvas="true"] .dwc-dropdown-content) {
  1179. border-radius: var(--stripe-border-radius);
  1180. transform: translateY(max(calc(var(--dropdown-offset-gap)), 16px)) !important;
  1181. inset-block-start: 100%;
  1182. }
  1183.  
  1184. /* hide nav content until js is ready */
  1185. html:not(.dwc-mobile) .dwc-stripe-style [data-megamenu="true"]>.dwc-dropdown-content:not(.show-nav .dwc-dropdown-content, [data-offcanvas="true"] .dwc-dropdown-content) {
  1186. opacity: 0;
  1187. }
  1188.  
  1189. html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after {
  1190. inset-inline-start: calc(var(--dropdown-menu-x) - 0px);
  1191. inline-size: calc(var(--dropdown-menu-width) + 0px);
  1192. block-size: calc(var(--dropdown-menu-height) + 0px) !important;
  1193. z-index: 1;
  1194. border-radius: var(--stripe-border-radius);
  1195. transform: translateZ(0);
  1196. opacity: 1
  1197. }
  1198.  
  1199. /* STRIP FIX FOR DYNAMIC NAV */
  1200. html:not(.dwc-mobile)
  1201. .dwc-stripe-style:has([data-optimize-stripe=true])
  1202. .dwc-nav-nested-items> li > .dwce-dropdown[data-megamenu="true"]>.dwc-dropdown-content:not([data-offcanvas="true"] .dwc-dropdown-content) {
  1203. transform: translateY(max(calc(var(--dropdown-offset-gap) + 2.5px), 16px)) !important;
  1204. inset-block-start: 100%;
  1205. }
  1206.  
  1207. html:not(.dwc-mobile)[dir=rtl] .dwc-stripe-style .open[data-megamenu="true"]:not([data-offcanvas="true"] [data-megamenu="true"])::before {
  1208. transform: translateX(50%);
  1209. }
  1210.  
  1211.  
  1212. /* ============================================================================
  1213. 18. ADAPTIVE HEIGHT
  1214. ============================================================================ */
  1215.  
  1216. html:not(.dwc-mobile) .dwc-nest-header::after {
  1217. display: none;
  1218. content: '';
  1219. position: absolute;
  1220. min-block-size: 0;
  1221. inset-inline-start: 0;
  1222. inline-size: 100%;
  1223. transition-delay: 0.1s !important;
  1224. pointer-events: none;
  1225. transition: inline-size 0.2s,
  1226. block-size 0.2s,
  1227. opacity 0.2s,
  1228. inset-inline-start 0.2s,
  1229. transform 0.2s !important;
  1230. will-change: block-size, inline-size, inset-inline-start, transform, opacity;
  1231. contain: layout paint;
  1232. z-index: -1;
  1233. }
  1234.  
  1235. html:not(.dwc-mobile):not(:has([data-no-overlay])) #dwc-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"] .dwc-nest-header::after {
  1236. position: fixed;
  1237. }
  1238.  
  1239. html:not(.dwc-mobile):not(:has([data-no-overlay])) .dwc-adaptive-height:not(.dwc-stripe-style) #dwc-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"] .dwc-nest-header::after {
  1240. inset-block-start: 0;
  1241. block-size: 0;
  1242. }
  1243.  
  1244. html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"] .dwc-nest-header, .dwc-stripe-style .dwc-nest-header)::after {
  1245. inset-block-end: calc(100% - var(--dwc-header-div-height));
  1246. block-size: 1000px;
  1247. transform: translateY(calc(var(--dropdown-menu-height) * 1)) translateZ(0);
  1248. }
  1249.  
  1250. html:not(.dwc-mobile) .adaptive-height-active:is(.dwc-stripe-style, .dwc-adaptive-height) .dwc-nest-header::after {
  1251. display: block;
  1252. }
  1253.  
  1254. html:not(.dwc-mobile) body:has([data-megamenu="true"].open) .dwc-nest-header::after {
  1255. transition-delay: 0s !important;
  1256. }
  1257.  
  1258. html:not(.dwc-mobile) .dwc-stripe-style [data-megamenu="true"] .dwc-dropdown-content:not([data-offcanvas="true"] .dwc-dropdown-content),
  1259. html:not(.dwc-mobile) .dwc-adaptive-height [data-megamenu="true"] .dwc-dropdown-content:not([data-offcanvas="true"] .dwc-dropdown-content) {
  1260. transition-delay: 0s;
  1261. box-shadow: none !important;
  1262. transition-duration: 0s;
  1263. }
  1264.  
  1265. html:not(.dwc-mobile) .dwc-stripe-style .open[data-megamenu="true"] .dwc-dropdown-content:not([data-offcanvas="true"] .dwc-dropdown-content),
  1266. html:not(.dwc-mobile) .dwc-adaptive-height .open[data-megamenu="true"] .dwc-dropdown-content:not([data-offcanvas="true"] .dwc-dropdown-content) {
  1267. transition-delay: 0.1s;
  1268. transition-duration: .2s;
  1269. }
  1270.  
  1271. html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after {
  1272. border: var(--adaptive-height-border);
  1273. inset-inline-start: calc(var(--dropdown-menu-x) - 2.5rem);
  1274. inline-size: calc(var(--dropdown-menu-width) + 5rem);
  1275. transform: unset;
  1276. inset-block-start: calc(var(--dwc-header-div-height) + max(var(--dropdown-offset-gap), 16px));
  1277. block-size: var(--dropdown-menu-height);
  1278. z-index: 1;
  1279. opacity: 0;
  1280. }
  1281.  
  1282. html:not(.dwc-mobile) .dwc-stripe-style:has([data-megamenu="true"].open):not(:has([data-optimize-stripe=true])) .dwc-nest-header::after {
  1283. block-size: calc(var(--dropdown-menu-height) + 0rem) !important;
  1284. opacity: 1;
  1285. }
  1286.  
  1287. html:not(.dwc-mobile) .dwc-adaptive-height #dwc-header > *:not(.dwc-nest-header, .dwc-nest-header + *){
  1288. z-index: 9999;
  1289. position: relative;
  1290. }
  1291.  
  1292. body:has([data-megamenu="true"].open) .sticky .dwc-nest-header::after {
  1293. background-color: var(--adaptive-height-bg) !important;
  1294. }
  1295.  
  1296. body:has([data-megamenu="true"].open) .dwc-sticky .dwc-nest-header::after {
  1297. background-color: var(--adaptive-height-bg) !important;
  1298. }
  1299.  
  1300. .dwc-nest-header::after {
  1301. background-color: var(--adaptive-height-bg) !important;
  1302. }
  1303.  
  1304. body:has([data-offcanvas="true"]) .dwc-nest-header::after {
  1305. display: none;
  1306. }
  1307.  
  1308. .dwc-nest-header:not(:is(.dwc-adaptive-height, .dwc-stripe-style) .dwc-nest-header)::after{
  1309. display: none;
  1310. }
  1311.  
  1312.  
  1313. /* handles translate and opacity animation for adaptive height style on desktop */
  1314. html:not(.dwc-mobile) .dwc-adaptive-height [data-animate-adaptive-content="true"] [data-megamenu="true"].open .dwc-dropdown-content:not([data-offcanvas="true"] [data-megamenu="true"] .dwc-dropdown-content) > * > *{
  1315. transform: translateX(0);
  1316. }
  1317.  
  1318. html:not(.dwc-mobile) .dwc-adaptive-height [data-animate-adaptive-content="true"] [data-megamenu="true"] .dwc-dropdown-content:not([data-offcanvas="true"] [data-megamenu="true"] .dwc-dropdown-content) > * > *{
  1319. transition: transform 0.4s;
  1320. }
  1321.  
  1322. html:not(.dwc-mobile) .dwc-adaptive-height [data-animate-adaptive-content="true"] [data-megamenu="true"].open + [data-megamenu="true"] .dwc-dropdown-content:not([data-offcanvas="true"] [data-megamenu="true"] .dwc-dropdown-content) > * > *{
  1323. transform: translateX(150px);
  1324. }
  1325.  
  1326. html:not(.dwc-mobile) .dwc-adaptive-height [data-animate-adaptive-content="true"] [data-megamenu="true"]:has(+ [data-megamenu="true"].open) .dwc-dropdown-content:not([data-offcanvas="true"] [data-megamenu="true"] .dwc-dropdown-content) > * > *{
  1327. transform: translateX(-150px);
  1328. }
  1329.  
  1330. html:not(.dwc-mobile) .dwc-adaptive-height [data-animate-adaptive-content="true"] .dwc-nav-nested-items>.dwce-dropdown[data-megamenu="true"]>.dwc-dropdown-content:not([data-offcanvas="true"] .dwc-dropdown-content) {
  1331. transform: initial !important;
  1332. }
  1333.  
  1334. /* stripe pointer arrow */
  1335. html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::before {
  1336. content: '';
  1337. inline-size: calc(max(var(--dropdown-offset-gap) + 2.5px, 16px) * 1.1);
  1338. block-size: calc(max(var(--dropdown-offset-gap) + 2.5px, 16px) * 1.1);
  1339. background-color: var(--adaptive-height-bg);
  1340. position: absolute;
  1341. inset-block-start: 100%;
  1342. transition: 0s;
  1343. transition-property: inset-inline-start, transform, opacity;
  1344. inset-inline-start: var(--navlink-midpoint);
  1345. transform: translateX(0%) rotate(45deg) translateY(calc(50% + 1px));
  1346. pointer-events: none;
  1347. border-top: var(--adaptive-height-border);
  1348. border-left: var(--adaptive-height-border);
  1349. z-index: 999;
  1350. }
  1351.  
  1352. html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header:has(.dwce-dropdown[data-megamenu="true"].open:hover)::before {
  1353. transition:
  1354. opacity 0.2s 0.1s,
  1355. transform 0.2s 0s,
  1356. inset-inline-start 0.2s 0s;
  1357. }
  1358.  
  1359. html:not(.dwc-mobile) .dwc-nest-header::before{
  1360. opacity: 0
  1361. }
  1362.  
  1363. /* show/hide menu animation */
  1364. html:not(.dwc-mobile) .dwc-nest-header.hide-menu-animation::after {
  1365. opacity: 0 !important;
  1366. }
  1367.  
  1368. html:not(.dwc-mobile) .dwc-stripe-style #dwc-header.show-menu-animation .dwc-nest-header:has([data-megamenu="true"]:hover)::before,
  1369. html:not(.dwc-mobile) #dwc-header.show-menu-animation .dwc-nest-header::after {
  1370. opacity: 1;
  1371. }
  1372.  
  1373. html:not(.dwc-mobile) #dwc-header.show-menu-animation .dwc-nest-header::after {
  1374. box-shadow: var(--adaptive-height-shadow)
  1375. }
  1376.  
  1377. .hide-menu-animation .dwc-nest-header::after {
  1378. opacity: 0 !important;
  1379. border: none !important;
  1380. }
  1381.  
  1382. .dwc-nest-header:not(.show-nav .dwc-nest-header)::after {
  1383. display: none;
  1384. }
  1385.  
  1386.  
  1387. /* ============================================================================
  1388. 19. MENU TOGGLE (Hamburger)
  1389. ============================================================================ */
  1390.  
  1391. .dwce-toggle {
  1392. background-color: transparent;
  1393. border: 0;
  1394. color: inherit;
  1395. font: inherit;
  1396. margin: 0;
  1397. overflow: visible;
  1398. text-transform: none;
  1399. transition-duration: .15s;
  1400. transition-property: opacity, filter;
  1401. transition-timing-function: linear;
  1402. min-block-size: 30px;
  1403. padding: 0;
  1404.  
  1405. body:has([data-mobile-top-transparent="true"]) & {
  1406. z-index: 9999;
  1407. }
  1408. }
  1409.  
  1410. .dwce-toggle span {
  1411. --empty-element-size: 0;
  1412. }
  1413.  
  1414.  
  1415. [data-toggle-style="pill"].dwce-toggle {
  1416. border: var(--toggle-border);
  1417. border-radius: var(--toggle-radius);
  1418. padding: var(--toggle-padding);
  1419. background-color: var(--toggle-bg);
  1420. }
  1421.  
  1422. [data-toggle-style="pill"].dwce-toggle {
  1423. --toggle-size: 22px !important;
  1424. }
  1425.  
  1426. .dwce-toggle {
  1427. --toggle-line-height: calc(var(--toggle-size) * 0.1);
  1428. --toggle-line-gap: calc(var(--toggle-size) * 0.25);
  1429. --toggle-line-variance: calc(var(--toggle-size) * 0.25);
  1430. --iw: calc(var(--toggle-size) - var(--toggle-line-variance));
  1431. --aw: calc(var(--iw) - var(--toggle-line-variance));
  1432. }
  1433.  
  1434. /* hamburger bar elements */
  1435. .dwca-inner,
  1436. .dwca-inner:after,
  1437. .dwca-inner:before {
  1438. /* background-color: currentcolor;
  1439. height: 4px; */
  1440. border-radius: 50vw;
  1441. position: absolute;
  1442. /* transition-duration: .15s;
  1443. transition-property: transform;
  1444. transition-timing-function: ease;
  1445. width: 40px; */
  1446. }
  1447.  
  1448. .dwca-inner {
  1449. display: block;
  1450. margin-top: -2px;
  1451. top: 50%;
  1452. }
  1453.  
  1454. .dwca-inner:after,
  1455. .dwca-inner:before {
  1456. content: "";
  1457. display: block;
  1458. }
  1459.  
  1460. /* .dwca-inner:after {
  1461. bottom: -10px;
  1462. } */
  1463.  
  1464. /* .dwce-toggle .dwca-inner,
  1465. .dwce-toggle .dwca-inner:after,
  1466. .dwce-toggle .dwca-inner:before {
  1467. border-radius: var(--toggle-bar-radius);
  1468. height: var(--toggle-bar-height);
  1469. width: var(--toggle-bar-width);
  1470. } */
  1471.  
  1472. /* vortex animation */
  1473. .dwca--vortex .dwca-inner {
  1474. transition-duration: .2s;
  1475. transition-timing-function: cubic-bezier(.19, 1, .22, 1)
  1476. }
  1477.  
  1478. .dwca--vortex .dwca-inner:after,
  1479. .dwca--vortex .dwca-inner:before {
  1480. transition-delay: .1s;
  1481. transition-duration: 0s;
  1482. transition-timing-function: linear
  1483. }
  1484.  
  1485. .dwca--vortex .dwca-inner:before {
  1486. transition-property: top, opacity
  1487. }
  1488.  
  1489. .dwca--vortex .dwca-inner:after {
  1490. transition-property: bottom, transform;
  1491. }
  1492.  
  1493. .dwca--vortex.is-active .dwca-inner {
  1494. transform: rotate(765deg);
  1495. transition-timing-function: cubic-bezier(.19, 1, .22, 1)
  1496. }
  1497.  
  1498. .dwca--vortex.is-active .dwca-inner:after,
  1499. .dwca--vortex.is-active .dwca-inner:before {
  1500. transition-delay: 0s
  1501. }
  1502.  
  1503. .dwca--vortex.is-active .dwca-inner:before {
  1504. opacity: 0;
  1505. top: 0
  1506. }
  1507.  
  1508. .dwca--vortex.is-active .dwca-inner:after {
  1509. bottom: 0;
  1510. transform: rotate(90deg)
  1511. }
  1512.  
  1513. /* MOBILE MENU TOGGLE — Open button */
  1514. .dwc-nest-toggle--open.dwce-toggle .dwca-inner:before,
  1515. .dwc-nest-toggle--open.dwce-toggle .dwca-inner:after{
  1516. block-size: var(--toggle-line-height);
  1517. inset-inline-end: var(--toggle-align);
  1518. }
  1519.  
  1520. .dwc-nest-toggle--open.dwca--vortex .dwca-inner:before {
  1521. inline-size: var(--toggle-size);
  1522. }
  1523.  
  1524. .dwc-nest-toggle--open.dwca--vortex .dwca-inner:not(.is-active .dwca-inner):before {
  1525. inset-block-start: calc(var(--toggle-line-gap) * -1);
  1526. }
  1527.  
  1528. .dwc-nest-toggle--open.dwca--vortex .dwca-inner:not(.is-active .dwca-inner):after {
  1529. inset-block-end: calc(var(--toggle-line-gap) * -1);
  1530. }
  1531.  
  1532. .dwc-nest-toggle--open.dwce-toggle .dwca-inner{
  1533. block-size: var(--toggle-line-height);
  1534. inset-inline-end: var(--toggle-horizontal-offset);
  1535. }
  1536.  
  1537. .dwc-nest-toggle--open.dwca--vortex .dwca-inner{
  1538. inline-size:var(--iw)
  1539. }
  1540.  
  1541. .dwc-nest-toggle--open.dwca--vortex .dwca-inner:after {
  1542. inline-size: var(--aw);
  1543. }
  1544.  
  1545. .dwc-nest-toggle--open.dwca--vortex.is-active .dwca-inner:after,
  1546. .dwc-nest-toggle--open.dwca--vortex.is-active .dwca-inner {
  1547. inline-size: calc(var(--iw) * var(--toggle-closed-offset));
  1548. }
  1549.  
  1550. .dwc-nest-toggle--open.dwca--vortex .dwca-wrap{
  1551. inline-size: var(--toggle-size)
  1552. }
  1553.  
  1554. .dwc-nest-toggle--open .dwca-inner,
  1555. .dwc-nest-toggle--open .dwca-inner:after,
  1556. .dwc-nest-toggle--open .dwca-inner:before{
  1557. background-color: var(--toggle-color)
  1558. }
  1559.  
  1560. .dwce-nav-nested .dwce-toggle[aria-label="Close Menu"] i{
  1561. color: var(--menu-close-toggle-clr)
  1562. }
  1563.  
  1564. .dwc-nest-toggle--open .dwca-wrap:hover .dwca-inner,
  1565. .dwc-nest-toggle--open .dwca-wrap:hover .dwca-inner:after,
  1566. .dwc-nest-toggle--open .dwca-wrap:hover .dwca-inner:before {
  1567. background-color: var(--toggle-hover-color) !important
  1568. }
  1569.  
  1570. /* icon animation */
  1571. .dwc-nest-toggle--open.dwca--vortex .dwca-inner {
  1572. transition-duration: .3s;
  1573. transition-timing-function: ease-in-out;
  1574. }
  1575.  
  1576. .dwc-nest-toggle--open.dwca--vortex.is-active .dwca-inner {
  1577. transform: rotate(225deg);
  1578. transition-timing-function: ease-in-out;
  1579. }
  1580.  
  1581. .dwc-nest-toggle--open.dwca--vortex.is-active .dwca-inner:before {
  1582. opacity: 0;
  1583. inset-block-start: calc(var(--toggle-line-gap) * -1);
  1584. inline-size: 0px !important;
  1585. }
  1586.  
  1587. .dwc-nest-toggle--open .dwca-inner:before {
  1588. transition-duration: 0.25s;
  1589. transition-property: inline-size, transform !important;
  1590. }
  1591.  
  1592. .dwc-nest-toggle--open:not(body:has([data-offcanvas="true"]) .dwc-nest-toggle--open) {
  1593. display: none;
  1594. }
  1595.  
  1596. dwc-nest-toggle--close:not([data-fullscreen-mobile-menu="true"][data-offcanvas="true"]){
  1597. display: none;
  1598. }
  1599.  
  1600. html:not(.dwc-mobile) [data-offcanvas="true"].dwce-nav-nested .dwce-toggle {
  1601. display: flex;
  1602. }
  1603.  
  1604. /* hide toggle when back button appears */
  1605. html:not(.dwc-mobile) body:has(.dwce-dropdown.open) [data-offcanvas="true"] .dwce-toggle[aria-label="Open Menu"] {
  1606. z-index: 1;
  1607. }
  1608.  
  1609. /* fades in close button when the main toggle is covered by the back button */
  1610. html:not(.dwc-mobile) body:has(.dwce-dropdown.open) [data-offcanvas="true"] .dwce-toggle[aria-label="Close Menu"]:not([data-submenu-reveal="expand"] *){
  1611. opacity: 1;
  1612. }
  1613.  
  1614. html:not(.dwc-mobile) [data-mobile-top-transparent="true"][data-offcanvas="true"]:not([data-show-mobile-logo="true"]) .dwce-toggle[aria-label="Close Menu"] {
  1615. opacity: 0;
  1616. }
  1617.  
  1618. html:not(.dwc-mobile) [data-show-mobile-logo="true"] .dwc-nav-wrapper{
  1619. z-index: 9999
  1620. }
  1621.  
  1622.  
  1623. /* ============================================================================
  1624. 20. MOBILE MENU
  1625. ============================================================================ */
  1626.  
  1627. /* account for admin bar on mobile menu */
  1628. .dwc-mobile .dwc-nav-wrapper {
  1629. inset-block-start: var(--wp-admin--admin-bar--height, 0px);
  1630. }
  1631.  
  1632. .dwc-mobile .dwce-nav-nested.dwc-open .dwc-nav-nested-items {
  1633. top:0
  1634. }
  1635.  
  1636. /* fix safari issue on fixed element inside scrollable container */
  1637. .dwc-mobile .dwce-nav-nested:not([data-submenu-reveal="expand"]) .dwc-nav-nested-items:has(.dwce-dropdown.open.active:not([data-submenu-reveal="expand"])){
  1638. overflow-y: hidden;
  1639. }
  1640.  
  1641. .dwc-mobile [data-fullscreen-mobile-menu="true"] .dwc-nest-menu__mobile-logo {
  1642. display: flex;
  1643. }
  1644.  
  1645. [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top){
  1646. --mobile-menu-topbar-bg: transparent;
  1647. }
  1648.  
  1649. [data-mobile-top-transparent="true"]:not([data-fullscreen-mobile-menu="true"]) .dwc-nest-toggle--close{
  1650. display: none;
  1651. }
  1652.  
  1653. /* mobile logo */
  1654. html:not(.dwc-mobile) .dwc-nest-menu__mobile-logo:not([data-offcanvas="true"] .dwc-nest-menu__mobile-logo) {
  1655. display: none;
  1656. }
  1657.  
  1658.  
  1659.  
  1660.  
  1661.  
  1662. .dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]):not([data-match-overlay-header-width="true"], [data-submenu-reveal="expand"])
  1663. .dwc-nav-wrapper:has(.dwce-dropdown.open.active) {
  1664. z-index: unset !important;
  1665. }
  1666.  
  1667. .dwc-mobile .dwc-nest-header:not([data-allow-overlay-mobile-opacity="true"]) .dwc-nest-header__container:has(:is([data-slide-in-direction="top"], [data-slide-in-direction="top left"])) {
  1668. background-color: var(--header-bg)
  1669. }
  1670.  
  1671. .dwc-mobile [data-hide-close-bar = 'true'] .dwc-nav-wrapper{
  1672. inset-block-start: var(--dwc-nest-header-height)
  1673. }
  1674.  
  1675. /* mobile transparent top */
  1676. :is( html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"]) [data-mobile-top-transparent="true"]) :is(.dwc-nest-menu-top:not([data-below-header="true"] *, :has(.open.active)),
  1677. .dwc-nav-wrapper:not([data-below-header="true"] *, :has(.open.active))) {
  1678. background-color: transparent !important;
  1679. }
  1680.  
  1681. /* configurable menu and submenu slide out speed */
  1682. .dwc-mobile [data-submenu-reveal="slide"].dwce-nav-nested :is(.dwc-dropdown-content, .dwc-nav-wrapper),
  1683. :is([data-submenu-reveal="slide"][data-offcanvas="true"]).dwce-nav-nested :is(.dwc-dropdown-content, .dwc-nav-wrapper){
  1684. transition-duration: calc(0.5s / var(--slide-out-speed)) !important;
  1685. }
  1686.  
  1687.  
  1688.  
  1689. /* fade in back button */
  1690. @-webkit-keyframes dwc-nest-fade-in {
  1691. 0% { opacity: 0; }
  1692. 100% { opacity: 1; }
  1693. }
  1694.  
  1695. @keyframes dwc-nest-fade-in {
  1696. 0% { opacity: 0; }
  1697. 100% { opacity: 1; }
  1698. }
  1699.  
  1700. @-webkit-keyframes slide-in-right {
  1701. 0% { opacity: 0; }
  1702. 100% { opacity: 1; }
  1703. }
  1704.  
  1705. @keyframes slide-in-right {
  1706. 0% { opacity: 0; }
  1707. 100% { opacity: 1; }
  1708. }
  1709.  
  1710. /* DROPDOWN INDENT on mobile expand */
  1711. :is(.dwc-mobile, body:has([data-offcanvas="true"]))
  1712. :is([data-submenu-reveal="expand"])
  1713. .dwce-dropdown:not([data-megamenu="true"]) >
  1714. .dwc-dropdown-content:not(.dwce-dropdown[data-submenu-reveal="slide"] *) {
  1715. padding-inline-start: var(--dropdown-indent) !important;
  1716. padding-inline-end: calc(var(--dropdown-indent) * 0) !important;
  1717. border-left: var(--dropdown-indent-line);
  1718. background-color: var(--dropdown-indent-bg)
  1719. }
  1720.  
  1721. :is(.dwc-mobile, body:has([data-offcanvas="true"]))
  1722. :is([data-submenu-reveal="expand"])
  1723. .dwce-dropdown:not([data-megamenu="true"]) >
  1724. .dwc-dropdown-content:not(.dwce-dropdown[data-submenu-reveal="slide"] *) > * > :is(a, .dwc-submenu-toggle){
  1725. padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important;
  1726. }
  1727.  
  1728. .dwce-nav-nested[data-submenu-reveal="expand"] .dwc-nav-nested-items > .dwce-dropdown:not([data-submenu-reveal="slide"], [data-megamenu="true"]) > .dwc-submenu-toggle {
  1729. transform: translateY(0);
  1730. z-index: 9999;
  1731. }
  1732.  
  1733. :is([data-submenu-reveal="expand"][data-offcanvas="true"]) .dwce-dropdown:not([data-megamenu="true"]) .dwc-dropdown-content{
  1734. inset-block-start: 0;
  1735. transition: 0s;
  1736. min-inline-size: var(--mobile-menu-width);
  1737. }
  1738.  
  1739. /* breakin item */
  1740. .dwc-mobile .dwc-nav-wrapper:has([data-breakin]) {
  1741. background: linear-gradient(to top, var(--mobile-menu-bg) 0%, var(--mobile-menu-bg) calc(100% - var(--dwc-nest-header-height)), transparent calc(100% - var(--dwc-nest-header-height)), transparent 100%);
  1742. }
  1743.  
  1744. .dwc-mobile .dwc-nav-wrapper:has([data-breakin]) .breakin-container{
  1745. inline-size: 100%;
  1746. }
  1747.  
  1748. .dwc-mobile .dwc-nav-wrapper:has([data-breakin="end"]) .breakin-container{
  1749. margin-block-start: auto;
  1750. }
  1751.  
  1752. /* phone landscape */
  1753. @media (height < 480px){
  1754. .dwc-mobile .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
  1755. block-size: 100dvh !important;
  1756. }
  1757.  
  1758. .dwc-mobile .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-nested-items {
  1759. min-block-size: 100dvh !important;
  1760. overflow-y: auto !important;
  1761. }
  1762.  
  1763.  
  1764.  
  1765. .dwc-mobile [data-submenu-reveal="slide"].dwce-nav-nested .dwc-dropdown-content {
  1766. overscroll-behavior: contain;
  1767. }
  1768. }
  1769.  
  1770.  
  1771. /* ============================================================================
  1772. 21. OFFCANVAS / FLYOUT MENU
  1773. ============================================================================ */
  1774.  
  1775. html:not(.dwc-offcanvas-mobile) :is([data-slide-in-direction="left"], [data-slide-in-direction="right"])[data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"] .dwce-dropdown:not(.open, .etch-builder-block) .dwc-dropdown-content-wrapper,
  1776. html:not(.dwc-offcanvas-mobile) :is([data-slide-in-direction="left"], [data-slide-in-direction="right"])[data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"] .dwce-dropdown:not(.open, .etch-builder-block) .dwc-dropdown-content:not(.dwc-dropdown-content-wrapper .dwc-dropdown-content){
  1777. opacity: 0;
  1778. }
  1779.  
  1780. html:not(.dwc-offcanvas-mobile) :is([data-slide-in-direction="left"], [data-slide-in-direction="right"])[data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"][data-offcanvas-hover="true"] .dwc-multilevel-back{
  1781. display: none;
  1782. pointer-events: none;
  1783. }
  1784.  
  1785. html:not(.dwc-offcanvas-mobile) :is([data-slide-in-direction="left"], [data-slide-in-direction="right"])[data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"].dwce-nav-nested .dwce-dropdown:not([data-megamenu="true"]),
  1786. html:not(.dwc-offcanvas-mobile) :is([data-slide-in-direction="left"], [data-slide-in-direction="right"])[data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"].dwce-nav-nested .dwce-dropdown:not([data-megamenu="true"])>.dwce-dropdown {
  1787. border-block-end: var(--menu-item-border);
  1788. }
  1789.  
  1790. html:not(.dwc-offcanvas-mobile) [data-fullscreen-mobile-menu="true"][data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"] .dwc-dropdown-content-wrapper:not(.dwc-dropdown-content-wrapper div) {
  1791. inset-block-start: 0;
  1792. }
  1793.  
  1794. html:not(.dwc-offcanvas-mobile) [data-fullscreen-mobile-menu="true"][data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"] li:not(.etch-builder-block) .dwc-dropdown-content-wrapper:not([data-submenu-reveal="expand"] .dwc-dropdown-content-wrapper) {
  1795. block-size: 100dvh;
  1796. }
  1797.  
  1798. html:not(.dwc-offcanvas-mobile) [data-fullscreen-mobile-menu="true"][data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"].dwce-nav-nested:not([data-slide-in-direction="expand down"]) [data-megamenu="true"].dwce-dropdown .dwc-dropdown-content:not([data-hide-close-bar="true"] .dwc-dropdown-content, [data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content) {
  1799. inset-block-start: 0 !important;
  1800. }
  1801.  
  1802. html:not(.dwc-offcanvas-mobile) [data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"].dwce-nav-nested .dwc-dropdown-content {
  1803. box-shadow: var(--dropdown-content-shadow);
  1804. }
  1805.  
  1806. html:not(.dwc-offcanvas-mobile) [data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"] .dwce-dropdown:not(.open, .etch-builder-block) .dwc-dropdown-content,
  1807. html:not(.dwc-offcanvas-mobile) [data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"] .dwce-dropdown:not(.open, .etch-builder-block) .dwc-dropdown-content-wrapper {
  1808. transition-property: opacity, visibility;
  1809. }
  1810.  
  1811. html:not(.dwc-offcanvas-mobile) [data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"] .dwc-dropdown-content-wrapper .dwc-dropdown-content {
  1812. transition-property: opacity;
  1813. }
  1814.  
  1815.  
  1816. html:not(.dwc-offcanvas-mobile) [data-slide-in-direction="left"][data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"] .dwc-dropdown-content-wrapper,
  1817. html:not(.dwc-offcanvas-mobile) [data-slide-in-direction="left"][data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"] .dwc-dropdown-content{
  1818. --mobile-menu-ttf: linear;
  1819. }
  1820.  
  1821. html:not(.dwc-offcanvas-mobile) [data-slide-in-direction="left"][data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"][data-offcanvas-hover="true"] .dwc-dropdown-content-wrapper,
  1822. html:not(.dwc-offcanvas-mobile) [data-slide-in-direction="left"][data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"][data-offcanvas-hover="true"] .dwc-dropdown-content{
  1823. transition-duration: 0.25s
  1824. }
  1825.  
  1826.  
  1827. /* .dwc-mobile [data-remove-borders="true"] .dwce-dropdown, */
  1828. html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) [data-remove-borders="true"] .dwc-top-level-items-vars{
  1829. --menu-item-border: initial;
  1830. }
  1831.  
  1832.  
  1833. /* ============================================================================
  1834. 22. OVERLAY HEADER
  1835. ============================================================================ */
  1836.  
  1837. body:not(:has([data-no-overlay])):has([data-overlay-header="true"]) .dwc-nest-menu-overlay {
  1838. inset-block-start: 0
  1839. }
  1840.  
  1841. /* overlay header — desktop */
  1842. html:not(.dwc-mobile):not(:has([data-no-overlay])) #dwc-header[data-overlay-header = "true"],
  1843. .dwc-mobile #dwc-header[data-overlay-header-mobile = "true"]{
  1844. padding-inline: var(--overlay-header-inset);
  1845. padding-block-start: calc(var(--overlay-header-inset) + var(--wp-admin--admin-bar--height, 0px));
  1846. }
  1847.  
  1848. html:not(.dwc-mobile):not(:has([data-no-overlay])) #dwc-header[data-overlay-header = "true"]:not([data-sticky-header='true']) {
  1849. position: absolute;
  1850. inset-block-start: 0;
  1851. inset-inline: 0;
  1852. }
  1853.  
  1854. html:not(.dwc-mobile):not(:has([data-no-overlay])) #dwc-header[data-overlay-header = "true"] .dwc-nest-header{
  1855. border-radius: var(--overlay-header-radius);
  1856. background-color: var(--overlay-header-bg);
  1857. box-shadow: var(--overlay-header-shadow);
  1858. max-inline-size: var(--overlay-header-width);
  1859. }
  1860.  
  1861. html:not(.dwc-mobile):not(:has([data-no-overlay])) #dwc-header[data-overlay-header = "true"]:not(:has([data-offcanvas="true"])) .dwc-nest-header{
  1862. backdrop-filter: blur(var(--overlay-header-blur));
  1863. }
  1864.  
  1865. html:not(.dwc-mobile):not(:has([data-no-overlay])) #dwc-header[data-overlay-header = "true"]:has(.open, .dwc-menu-item:hover) .dwc-nest-header{
  1866. background-color: var(--overlay-header-bg-active) !important;
  1867. }
  1868.  
  1869. /* offset hero top padding when overlay header is active */
  1870. body:not(:has([data-no-overlay])) #dwc-header[data-offset-section-padding="true"] + main > :is(section:first-child, div:first-child) {
  1871. padding-block-start: calc(var(--overlay-offset-padding) + var(--wp-admin--admin-bar--height, 0px));
  1872. }
  1873.  
  1874. /* menu height animation on overlay header */
  1875. html:not(.dwc-mobile):not(:has([data-no-overlay])) .dwc-adaptive-height:not(.dwc-stripe-style) #dwc-header[data-overlay-header = "true"] .dwc-nest-header::after {
  1876. border-radius: min(var(--overlay-header-radius), 2em);
  1877. inset-block-end: calc(100% + var(--overlay-header-inset));
  1878. opacity: 1;
  1879. }
  1880.  
  1881. html:not(.dwc-mobile):not(:has([data-no-overlay])) .dwc-adaptive-height:not(.dwc-stripe-style) #dwc-header.show-menu-animation[data-overlay-header = "true"]:not([data-overlay-header-optimize-adaptive-height="true"]) .dwc-nest-header::after {
  1882. transform: translateY( calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5)))) translateZ(0)
  1883. }
  1884.  
  1885. html:not(.dwc-mobile):not(:has([data-no-overlay])) .dwc-adaptive-height:not(.dwc-stripe-style) #dwc-header.show-menu-animation[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"] .dwc-nest-header::after {
  1886. block-size: calc((var(--dropdown-menu-height) - var(--wp-admin--admin-bar--height, 0px) + (var(--dwc-nest-header-height) * 1)));
  1887. }
  1888.  
  1889. /* we need to reposition the overlay outside the header */
  1890. html:not(.dwc-mobile) body:has( .dwce-nav-nested .open):not(:has([data-offcanvas="true"])) .dwc-nest-menu-overlay{
  1891. opacity: 1;
  1892. }
  1893.  
  1894. /* OVERLAY HEADER NO TOP GAP */
  1895. body:not(:has([data-no-overlay])) [data-overlay-header-no-top-gap="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
  1896. inset-block-start: 0 !important;
  1897. }
  1898.  
  1899. body:not(:has([data-no-overlay])) [data-overlay-header-no-top-gap="true"] .dwce-nav-nested[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.dwc-submenu-toggle > button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.dwc-submenu-toggle > button) {
  1900. inset-block-start: calc(var(--dwc-nest-header-height) / 2);
  1901. }
  1902.  
  1903. body:not(:has([data-no-overlay])) #dwc-header[data-overlay-header-no-top-gap="true"] > .dwc-nest-header {
  1904. border-top-left-radius: 0 !important;
  1905. border-top-right-radius: 0 !important;
  1906. }
  1907.  
  1908. body:not(:has([data-no-overlay])) #dwc-header[data-overlay-header-no-top-gap="true"] {
  1909. padding-block-start: 0 !important;
  1910. }
  1911.  
  1912. /* fix overlay in boxed mode */
  1913. .dwc-boxed .dwc-nest-menu-overlay {
  1914. inline-size: var(--boxed-width, 100%);
  1915. inset-inline-start: 50%;
  1916. transform: translateX(-50%);
  1917. }
  1918.  
  1919.  
  1920. /* ============================================================================
  1921. 23. STICKY / HEADROOM HEADER
  1922. ============================================================================ */
  1923.  
  1924. html:has(.dwc-mobile .scroll-down, .scroll-down [data-offcanvas="true"]) .dwc-headroom #dwc-header{
  1925. --dwc-nest-header-height: var(--dwc-header-div-height);
  1926.  
  1927. & .dwc-nav-wrapper:not([data-fullscreen-desktop="true"] .dwc-nav-wrapper){
  1928. min-block-size: calc(100dvh + var(--dwc-nest-header-height));
  1929. }
  1930. }
  1931.  
  1932.  
  1933.  
  1934. /* ============================================================================
  1935. 24. HEADER BUILDER — MULTI-ROW SCROLL VISIBILITY
  1936. ============================================================================ */
  1937.  
  1938. .dwc-mobile:not(:has([data-offcanvas="true"])) .scroll-up [data-headroom-visibility="show-row-1"] .dwc-header-row-1.dwc-nest-header,
  1939. .dwc-mobile:not(:has([data-offcanvas="true"])) .scroll-up [data-headroom-visibility="show-row-2"] .dwc-header-row-2.dwc-nest-header,
  1940. .dwc-mobile:not(:has([data-offcanvas="true"])) .scroll-up [data-headroom-visibility="show-row-3"] .dwc-header-row-3.dwc-nest-header,
  1941. .dwc-mobile:not(:has([data-offcanvas="true"])) .scroll-down [data-sticky-visibility="show-row-1"] .dwc-header-row-1.dwc-nest-header,
  1942. .dwc-mobile:not(:has([data-offcanvas="true"])) .scroll-down [data-sticky-visibility="show-row-2"] .dwc-header-row-2.dwc-nest-header,
  1943. .dwc-mobile:not(:has([data-offcanvas="true"])) .scroll-down [data-sticky-visibility="show-row-3"] .dwc-header-row-3.dwc-nest-header{
  1944. --dwc-nest-header-height: var(--dwc-header-div-height);
  1945. }
  1946.  
  1947. body:not(:has([data-offcanvas="true"])).scroll-up [data-headroom-visibility="show-row-1"] .dwc-header-row-1,
  1948. body:not(:has([data-offcanvas="true"])).scroll-up [data-headroom-visibility="show-row-2"] .dwc-header-row-2,
  1949. body:not(:has([data-offcanvas="true"])).scroll-up [data-headroom-visibility="show-row-3"] .dwc-header-row-3,
  1950. body:not(:has([data-offcanvas="true"])).scroll-down [data-sticky-visibility="show-row-1"] .dwc-header-row-1,
  1951. body:not(:has([data-offcanvas="true"])).scroll-down [data-sticky-visibility="show-row-2"] .dwc-header-row-2,
  1952. body:not(:has([data-offcanvas="true"])).scroll-down [data-sticky-visibility="show-row-3"] .dwc-header-row-3,
  1953. body:not(:has([data-offcanvas="true"])).scroll-down [data-sticky-visibility="hide-row-1"] :is(.dwc-header-row-2, .dwc-header-row-3),
  1954. body:not(:has([data-offcanvas="true"])).scroll-down [data-sticky-visibility="hide-row-2"] :is(.dwc-header-row-1, .dwc-header-row-3),
  1955. body:not(:has([data-offcanvas="true"])).scroll-down [data-sticky-visibility="hide-row-3"] :is(.dwc-header-row-1, .dwc-header-row-2){
  1956. z-index: 9999
  1957. }
  1958.  
  1959. [data-sticky-visibility="show-row-2"][data-sticky-header="true"][data-headroom-visibility="show-row-1"] .dwc-header-row-1{
  1960. z-index: 99999
  1961. }
  1962.  
  1963. .dwc-header-row-1, .dwc-header-row-2, .dwc-header-row-3{
  1964. position: relative;
  1965. }
  1966.  
  1967. /* ======================================================
  1968. SCROLL DOWN VISIBILITY
  1969. ====================================================== */
  1970.  
  1971. /* HIDE ROW 1 */
  1972. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="hide-row-1"][data-sticky-header="true"]:not(.etch-builder-block) {
  1973. transform:translateY(calc((var(--h-row-1, 0px)) * -1));
  1974. }
  1975.  
  1976. /* HIDE ROW 2 */
  1977. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="hide-row-2"][data-sticky-header="true"]:not(.etch-builder-block) {
  1978. transform:translateY(calc((var(--h-row-2, 0px)) * -1));
  1979. }
  1980.  
  1981. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="hide-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  1982. transform: translateY(var(--h-row-2, 0px))
  1983. }
  1984.  
  1985. /* HIDE ROW 3 */
  1986. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="hide-row-3"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  1987. transform:translateY(var(--h-row-3, 0px))
  1988. }
  1989.  
  1990. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="hide-row-3"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-2{
  1991. transform:translateY(var(--h-row-3, 0px))
  1992. }
  1993.  
  1994. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="hide-row-3"][data-sticky-header="true"]:not(.etch-builder-block){
  1995. transform:translateY(calc(var(--h-row-3, 0px) * -1))
  1996. }
  1997.  
  1998. /* SHOW FIRST ROW */
  1999. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="show-row-1"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1 {
  2000. transform:translateY(calc(var(--h-row-2, 0px) + var(--h-row-3, 0px) ))
  2001. }
  2002.  
  2003. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="show-row-1"][data-sticky-header="true"]:not(.etch-builder-block){
  2004. transform:translateY(calc((var(--h-row-2, 0px) + var(--h-row-3, 0px) )* -1))
  2005. }
  2006.  
  2007. /* SHOW SECOND ROW */
  2008. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="show-row-2"][data-sticky-header="true"]:not(.etch-builder-block) {
  2009. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-3, 0px)) * -1));
  2010. }
  2011.  
  2012. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="show-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-2{
  2013. transform: translateY(var(--h-row-3, 0px))
  2014. }
  2015.  
  2016. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="show-all-rows"], [data-headroom-visibility="reverse"]))) [data-sticky-visibility="show-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  2017. transform: translateY(var(--h-row-3, 0px))
  2018. }
  2019.  
  2020. /* SHOW THIRD ROW */
  2021. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="show-row-3"][data-sticky-header="true"]:not(.etch-builder-block){
  2022. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-2, 0px) )* -1))
  2023. }
  2024.  
  2025. /* HIDE ALL ROWS */
  2026. :is(.scroll-down, .scroll-up:not(:has([data-headroom-visibility="reverse"]))) [data-sticky-visibility="hide-all-rows"][data-sticky-header="true"]:not(.etch-builder-block){
  2027. transform:translateY(-100%)
  2028. }
  2029.  
  2030. /* ============================================
  2031. SHOW ROW 1 ON SCROLL UP
  2032. ============================================ */
  2033.  
  2034. /* When all rows were hidden */
  2035. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="hide-all-rows"][data-sticky-header="true"]:not(.etch-builder-block){
  2036. transform:translateY(calc((var(--h-row-2, 0px) + var(--h-row-3, 0px)) * -1))
  2037. }
  2038. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="hide-all-rows"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  2039. transform:translateY(0px)
  2040. }
  2041.  
  2042. /* When row-1 was hidden */
  2043. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="hide-row-1"][data-sticky-header="true"]:not(.etch-builder-block){
  2044. transform:translateY(calc((var(--h-row-2, 0px) + var(--h-row-3, 0px)) * -1))
  2045. }
  2046. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="hide-row-1"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  2047. transform:translateY(0px)
  2048. }
  2049.  
  2050. /* When row-2 was hidden */
  2051. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="hide-row-2"][data-sticky-header="true"]:not(.etch-builder-block){
  2052. transform:translateY(calc((var(--h-row-2, 0px) + var(--h-row-3, 0px)) * -1))
  2053. }
  2054. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="hide-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  2055. transform: translateY(calc(var(--h-row-2, 0px) + var(--h-row-3, 0px)));
  2056. z-index: 9999
  2057. }
  2058.  
  2059. /* When row-3 was hidden */
  2060. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="hide-row-3"][data-sticky-header="true"]:not(.etch-builder-block) {
  2061. transform:translateY(calc((var(--h-row-2, 0px) + var(--h-row-3, 0px)) * -1))
  2062. }
  2063. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="hide-row-3"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  2064. transform: translateY(calc(var(--h-row-2) + var(--h-row-3)));
  2065. z-index: 9999;
  2066. }
  2067.  
  2068. /* When only first row was showing */
  2069. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="show-row-1"][data-sticky-header="true"]:not(.etch-builder-block){
  2070. transform:translateY(calc((var(--h-row-2, 0px) + var(--h-row-3, 0px)) * -1))
  2071. }
  2072. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="show-row-1"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  2073. transform:translateY(0px)
  2074. }
  2075.  
  2076. /* When only second row was showing */
  2077. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="show-row-2"][data-sticky-header="true"]:not(.etch-builder-block){
  2078. transform:translateY(calc((var(--h-row-2, 0px) + var(--h-row-3, 0px)) * -1))
  2079. }
  2080. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="show-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  2081. transform: translateY(calc(var(--h-row-2) + var(--h-row-3)));
  2082. }
  2083.  
  2084. /* When only third row was showing */
  2085. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="show-row-3"][data-sticky-header="true"]:not(.etch-builder-block){
  2086. transform:translateY(calc((var(--h-row-2, 0px) + var(--h-row-3, 0px)) * -1))
  2087. }
  2088. .scroll-up [data-headroom-visibility="show-row-1"][data-sticky-visibility="show-row-3"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  2089. transform: translateY(calc(var(--h-row-2, 0px) + var(--h-row-3, 0px)));
  2090. }
  2091.  
  2092. /* ============================================
  2093. SHOW ROW 2 ON SCROLL UP
  2094. ============================================ */
  2095.  
  2096. /* When all rows were hidden */
  2097. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="hide-all-rows"][data-sticky-header="true"]:not(.etch-builder-block){
  2098. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-3, 0px)) * -1))
  2099. }
  2100. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="hide-all-rows"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-2{
  2101. transform:translateY(calc(var(--h-row-3, 0px)))
  2102. }
  2103.  
  2104. /* When row-1 was hidden */
  2105. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="hide-row-1"][data-sticky-header="true"]:not(.etch-builder-block){
  2106. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-3, 0px)) * -1))
  2107. }
  2108. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="hide-row-1"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-2{
  2109. transform:translateY(calc(var(--h-row-3, 0px)))
  2110. }
  2111.  
  2112. /* When row-2 was hidden */
  2113. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="hide-row-2"][data-sticky-header="true"]:not(.etch-builder-block){
  2114. transform: translateY(calc((var(--h-row-2, 0px)) * -1));
  2115. }
  2116. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="hide-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-2{
  2117. transform:translateY(calc(var(--h-row-3, 0px)))
  2118. }
  2119. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="hide-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  2120. transform:translateY(calc(var(--h-row-1, 0px)))
  2121. }
  2122. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="hide-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-3{
  2123. transform:translateY(calc(var(--h-row-2, 0px) * -1));
  2124. }
  2125.  
  2126. /* When row-3 was hidden */
  2127. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="hide-row-3"][data-sticky-header="true"]:not(.etch-builder-block){
  2128. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-3, 0px)) * -1))
  2129. }
  2130. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="hide-row-3"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-2{
  2131. transform:translateY(calc(var(--h-row-3, 0px)))
  2132. }
  2133.  
  2134. /* When only first row was showing */
  2135. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="show-row-1"][data-sticky-header="true"]:not(.etch-builder-block){
  2136. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-3, 0px)) * -1))
  2137. }
  2138. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="show-row-1"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-2{
  2139. transform:translateY(calc(var(--h-row-3, 0px)))
  2140. }
  2141. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="show-row-1"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  2142. transform:translateY(calc(var(--h-row-3, 0px)))
  2143. }
  2144. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="show-row-1"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-3{
  2145. transform: translateY(-100%)
  2146. }
  2147.  
  2148. /* When only second row was showing */
  2149. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="show-row-2"][data-sticky-header="true"]:not(.etch-builder-block){
  2150. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-3, 0px)) * -1))
  2151. }
  2152. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="show-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-2{
  2153. transform:translateY(calc(var(--h-row-3, 0px)))
  2154. }
  2155.  
  2156. /* When only third row was showing */
  2157. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="show-row-3"][data-sticky-header="true"]:not(.etch-builder-block){
  2158. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-3, 0px)) * -1))
  2159. }
  2160. .scroll-up [data-headroom-visibility="show-row-2"][data-sticky-visibility="show-row-3"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-2{
  2161. transform:translateY(calc(var(--h-row-3, 0px)))
  2162. }
  2163.  
  2164. /* ============================================
  2165. SHOW ROW 3 ON SCROLL UP
  2166. ============================================ */
  2167.  
  2168. /* When all rows were hidden */
  2169. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="hide-all-rows"][data-sticky-header="true"]:not(.etch-builder-block){
  2170. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-2, 0px)) * -1))
  2171. }
  2172. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="hide-all-rows"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-3{
  2173. transform:translateY(0px)
  2174. }
  2175.  
  2176. /* When row-1 was hidden */
  2177. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="hide-row-1"][data-sticky-header="true"]:not(.etch-builder-block){
  2178. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-2, 0px)) * -1))
  2179. }
  2180. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="hide-row-1"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-3{
  2181. transform:translateY(0px)
  2182. }
  2183.  
  2184. /* When row-2 was hidden */
  2185. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="hide-row-2"][data-sticky-header="true"]:not(.etch-builder-block){
  2186. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-2, 0px)) * -1))
  2187. }
  2188. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="hide-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-3{
  2189. transform:translateY(0px)
  2190. }
  2191.  
  2192. /* When row-3 was hidden */
  2193. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="hide-row-3"][data-sticky-header="true"]:not(.etch-builder-block){
  2194. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-2, 0px)) * -1))
  2195. }
  2196. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="hide-row-3"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-3{
  2197. transform:translateY(0px)
  2198. }
  2199. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="hide-row-3"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-2{
  2200. transform:translateY(0px)
  2201. }
  2202.  
  2203. /* When only first row was showing */
  2204. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="show-row-1"][data-sticky-header="true"]:not(.etch-builder-block){
  2205. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-2, 0px)) * -1))
  2206. }
  2207. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="show-row-1"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-3{
  2208. transform:translateY(0px)
  2209. }
  2210. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="show-row-1"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-1{
  2211. transform:translateY(var(--h-row-3, 0px))
  2212. }
  2213.  
  2214. /* When only second row was showing */
  2215. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="show-row-2"][data-sticky-header="true"]:not(.etch-builder-block){
  2216. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-2, 0px)) * -1))
  2217. }
  2218. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="show-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-3{
  2219. transform:translateY(0px)
  2220. }
  2221. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="show-row-2"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-2{
  2222. transform:translateY(0)
  2223. }
  2224.  
  2225. /* When only third row was showing */
  2226. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="show-row-3"][data-sticky-header="true"]:not(.etch-builder-block){
  2227. transform:translateY(calc((var(--h-row-1, 0px) + var(--h-row-2, 0px)) * -1))
  2228. }
  2229. .scroll-up [data-headroom-visibility="show-row-3"][data-sticky-visibility="show-row-3"][data-sticky-header="true"]:not(.etch-builder-block) .dwc-header-row-3{
  2230. transform:translateY(0px)
  2231. }
  2232.  
  2233.  
  2234.  
  2235. /* ============================================================================
  2236. 25. CENTERED LOGO
  2237. ============================================================================ */
  2238.  
  2239. /* force center align for centered logo menu */
  2240. html:not(.dwc-mobile) .dwc-nest-header__container.dwc-logo-is-centered {
  2241. justify-content: center;
  2242. }
  2243.  
  2244. html:not(.dwc-mobile) .dwc-logo-is-centered .dwce-nav-nested .dwc-nav-nested-items {
  2245. justify-content: center;
  2246. }
  2247.  
  2248. /* remove default margin left */
  2249. html:not(.dwc-mobile) #dwc-header .dwc-logo-is-centered .dwce-nav-nested li:not(.dwc-dropdown-content *) {
  2250. margin-inline: 0 !important;
  2251. display: flex;
  2252. flex-direction: column;
  2253. justify-content: center;
  2254. }
  2255.  
  2256. html:not(.dwc-mobile) .dwc-logo-is-centered .dwc-menu-wrap {
  2257. inline-size: 100%
  2258. }
  2259.  
  2260. html:not(.dwc-mobile) .dwc-center-guide {
  2261. background-color: rgba(132, 255, 0, 0.32);
  2262. position: fixed;
  2263. top: 0;
  2264. bottom: 0;
  2265. align-self: center;
  2266. height: 100dvh;
  2267. z-index: 9999;
  2268. pointer-events: none;
  2269. }
  2270.  
  2271.  
  2272. /* ============================================================================
  2273. 26. LAST ITEM CTA BUTTONS
  2274. ============================================================================ */
  2275.  
  2276. /* Button styling for FIRST BUTTON */
  2277. :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwce-nav-nested .dwc-nav-nested-items > .dwc-menu-item:last-of-type a {
  2278. color: var(--menu-cta-clr);
  2279. background-color: var(--menu-cta-bg);
  2280. border-radius: var(--menu-cta-radius) !important;
  2281. padding-inline: var(--menu-cta-inline-padding) !important;
  2282. padding-block: var(--menu-cta-block-padding) !important;
  2283. border: var(--menu-cta-border);
  2284. }
  2285.  
  2286. :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwce-nav-nested .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(1) a:hover {
  2287. color: var(--menu-cta-hover-clr);
  2288. background-color: var(--menu-cta-hover-bg);
  2289. }
  2290.  
  2291. /* Button styling for second button */
  2292. :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwce-nav-nested .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(2) a {
  2293. color: var(--menu-cta-2-clr);
  2294. background-color: var(--menu-cta-2-bg);
  2295. border-radius: var(--menu-cta-2-radius) !important;
  2296. padding-inline: var(--menu-cta-2-inline-padding) !important;
  2297. padding-block: var(--menu-cta-2-block-padding) !important;
  2298. border: var(--menu-cta-2-border);
  2299. }
  2300.  
  2301. :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwce-nav-nested .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(2) a:hover {
  2302. color: var(--menu-cta-2-hover-clr);
  2303. background-color: var(--menu-cta-2-hover-bg);
  2304. }
  2305.  
  2306. /* Button styling for third button */
  2307. [data-last-item-is-button="true-3"].dwce-nav-nested .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(3) a {
  2308. color: var(--menu-cta-3-clr);
  2309. background-color: var(--menu-cta-3-bg);
  2310. border-radius: var(--menu-cta-3-radius) !important;
  2311. padding-inline: var(--menu-cta-3-inline-padding) !important;
  2312. padding-block: var(--menu-cta-3-block-padding) !important;
  2313. border: var(--menu-cta-3-border);
  2314. }
  2315.  
  2316. [data-last-item-is-button="true-3"].dwce-nav-nested .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(3) a:hover {
  2317. color: var(--menu-cta-3-hover-clr);
  2318. background-color: var(--menu-cta-3-hover-bg);
  2319. }
  2320.  
  2321. /* Adjust padding for all variants in desktop mode */
  2322. html:not(.dwc-mobile) [data-last-item-is-button="true"].dwce-nav-nested .dwc-nav-nested-items > .dwc-menu-item:last-of-type,
  2323. html:not(.dwc-mobile) [data-last-item-is-button="true-2"].dwce-nav-nested .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+2),
  2324. html:not(.dwc-mobile) [data-last-item-is-button="true-3"].dwce-nav-nested .dwc-nav-nested-items > .dwc-menu-item:nth-last-of-type(-n+3) {
  2325. padding-inline-start: var(--menu-item-inline-padding);
  2326. }
  2327.  
  2328. /* Center alignment for single button case */
  2329. html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwce-nav-nested:not(.dwc-open) .dwc-nav-nested-items > li:is(:last-of-type, :first-of-type) {
  2330. margin-inline-start: auto;
  2331. }
  2332.  
  2333. /* Center alignment for two buttons case */
  2334. html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-2"].dwce-nav-nested:not(.dwc-open) .dwc-nav-nested-items > li:is(:nth-last-of-type(2), :first-of-type) {
  2335. margin-inline-start: auto;
  2336. }
  2337.  
  2338. /* Center alignment for three buttons case */
  2339. html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-3"].dwce-nav-nested:not(.dwc-open) .dwc-nav-nested-items > li:is(:nth-last-of-type(3), :first-of-type) {
  2340. margin-inline-start: auto;
  2341. }
  2342.  
  2343. /* Left alignment for single button case */
  2344. html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwce-nav-nested:not(.dwc-open) .dwc-nav-nested-items > li:last-of-type {
  2345. margin-inline-start: auto;
  2346. }
  2347.  
  2348. /* Left alignment for two buttons case */
  2349. html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-2"].dwce-nav-nested:not(.dwc-open) .dwc-nav-nested-items > li:nth-last-of-type(2) {
  2350. margin-inline-start: auto;
  2351. }
  2352.  
  2353. /* Left alignment for three buttons case */
  2354. html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-3"].dwce-nav-nested:not(.dwc-open) .dwc-nav-nested-items > li:nth-last-of-type(3) {
  2355. margin-inline-start: auto;
  2356. }
  2357.  
  2358. /* General width rule for all button cases and alignments */
  2359. html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"]):is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"])) :is(.dwc-menu-wrap, .dwce-nav-nested) {
  2360. inline-size: 100%;
  2361. }
  2362.  
  2363. /* ============================================================================
  2364. 27. BREAKOUT / BREAKIN ITEMS
  2365. ============================================================================ */
  2366.  
  2367. /* BREAKOUT ITEM */
  2368. .dwce-nav-nested > [data-breakout]:not(.dwc-nest-menu__logo){
  2369. color: var(--menu-cta-clr);
  2370. background-color: var(--menu-cta-bg);
  2371. border-radius: var(--menu-cta-radius) !important;
  2372. padding-inline: var(--menu-cta-inline-padding) !important;
  2373. padding-block: var(--menu-cta-block-padding) !important;
  2374. border: var(--menu-cta-border);
  2375. }
  2376.  
  2377. .dwce-nav-nested > [data-breakout="before"],
  2378. .dwce-nav-nested > [data-breakout]:not([data-breakout="after"], .dwc-nest-menu__logo){
  2379. margin-inline-end: var(--cta-breakout-gap);
  2380. margin-inline-start: auto;
  2381. }
  2382.  
  2383. .dwce-nav-nested > [data-breakout="after"]{
  2384. margin-inline-start: var(--cta-breakout-gap);
  2385. order: 1;
  2386. }
  2387.  
  2388. .dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout]),
  2389. .dwce-nav-nested:has(.dwc-nest-menu__logo[data-breakout]){
  2390. inline-size: 100% !important;
  2391. }
  2392.  
  2393. .dwc-stripe-style .dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout]),
  2394. .dwc-stripe-style .dwce-nav-nested:has(.dwc-nest-menu__logo[data-breakout]) {
  2395. min-height: var(--header-min-height);
  2396. }
  2397.  
  2398. .dwce-nav-nested > [data-breakout="after"] + .dwce-toggle[aria-label="Open Menu"]{
  2399. margin-inline-start: auto;
  2400. }
  2401.  
  2402. /* BREAKIN ITEM */
  2403. html:not(.dwc-mobile) .breakin-container{
  2404. visibility: hidden !important;
  2405. order: 0 !important;
  2406. }
  2407.  
  2408.  
  2409. /* ============================================================================
  2410. 28. HOVER EFFECTS (Roll Text)
  2411. ============================================================================ */
  2412.  
  2413. html:not(.dwc-mobile) .dwce-nav-nested[data-hover-effect="roll"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > li > .dwc-submenu-toggle,
  2414. html:not(.dwc-mobile) .dwce-nav-nested[data-hover-effect="roll"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > .dwc-menu-item {
  2415. --menu-item-block-padding: 0px;
  2416. overflow: clip;
  2417. background-color: var(--menu-item-bg);
  2418. border-radius: var(--menu-item-radius);
  2419. }
  2420.  
  2421. html:not(.dwc-mobile) .dwce-nav-nested[data-hover-effect="roll"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > li > .dwc-submenu-toggle span,
  2422. html:not(.dwc-mobile) .dwce-nav-nested[data-hover-effect="roll"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > .dwc-menu-item a{
  2423. transition: transform 0.3s ease-in-out;
  2424. position: relative;
  2425. padding-block: 1em;
  2426. }
  2427.  
  2428. html:not(.dwc-mobile) .dwce-nav-nested[data-hover-effect="roll"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > li > .dwc-submenu-toggle span::after,
  2429. html:not(.dwc-mobile) .dwce-nav-nested[data-hover-effect="roll"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > .dwc-menu-item a::after{
  2430. content: attr(data-roll-text);
  2431. display: block;
  2432. position: absolute;
  2433. padding-block: 1em;
  2434. inset-block-start: 100%;
  2435. inline-size: 100%;
  2436. inset-inline-start: 0;
  2437. background: inherit;
  2438. color:inherit;
  2439. background-color: inherit;
  2440. border-radius: var(--menu-item-radius);
  2441. }
  2442.  
  2443. html:not(.dwc-mobile) .dwce-nav-nested[data-hover-effect="roll"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > .dwc-menu-item a::after{
  2444. padding-inline: var(--menu-item-inline-padding);
  2445. }
  2446.  
  2447. html:not(.dwc-mobile) .dwce-nav-nested[data-hover-effect="roll"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > li:hover > .dwc-submenu-toggle span,
  2448. html:not(.dwc-mobile) .dwce-nav-nested[data-hover-effect="roll"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > .dwc-menu-item:hover a{
  2449. transform:translateY(-100%); background-color: var(--menu-item-hover-bg) !important; color: var(--menu-item-hover-clr) !important
  2450. }
  2451.  
  2452. html:not(.dwc-mobile) .dwce-nav-nested[data-hover-effect="roll"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > li > .dwc-submenu-toggle::before,
  2453. html:not(.dwc-mobile) .dwce-nav-nested[data-hover-effect="roll"]:not([data-offcanvas="true"]) .dwc-nav-nested-items > .dwc-menu-item a::before{
  2454. display: none;
  2455. }
  2456.  
  2457.  
  2458. /* ============================================================================
  2459. 29. BADGES
  2460. (already listed in section 7 above — kept here for reference continuity)
  2461. ============================================================================ */
  2462.  
  2463.  
  2464. /* ============================================================================
  2465. 30. ICON & BUTTON DROPDOWN ITEMS
  2466. ============================================================================ */
  2467.  
  2468. /* IS ICON */
  2469. .dwce-dropdown[data-is-icon]{
  2470. padding-inline: var(--menu-item-inline-padding);
  2471. }
  2472.  
  2473. /* remove the underline */
  2474. .dwce-dropdown[data-is-icon] > .dwc-submenu-toggle::before{
  2475. display: none;
  2476. }
  2477.  
  2478. /* general styling */
  2479. .dwce-nav-nested .dwc-nav-nested-items > .dwce-dropdown[data-is-icon] > .dwc-submenu-toggle{
  2480. height: auto !important;
  2481. width: auto;
  2482. min-width: var(--button-max-diameter);
  2483. aspect-ratio: 1;
  2484. border-radius: var(--menu-item-radius) !important;
  2485. padding: 0 !important;
  2486. margin-inline-start: auto;
  2487. margin-block: auto;
  2488. transition: 0.4s;
  2489. border: var(--menu-item-border)
  2490. }
  2491.  
  2492. .dwce-nav-nested .dwc-nav-nested-items > .dwce-dropdown[data-is-icon]:hover > .dwc-submenu-toggle{
  2493. border: var(--menu-item-hover-border)
  2494. }
  2495.  
  2496. .dwc-mobile .dwce-nav-nested .dwc-nav-nested-items > .dwce-dropdown[data-is-icon] > .dwc-submenu-toggle{
  2497. max-width: var(--button-max-diameter);
  2498. }
  2499.  
  2500. /* centralize */
  2501. .dwce-dropdown[data-is-icon] > .dwc-submenu-toggle > button{
  2502. margin: auto;
  2503. color: var(--icon-clr);
  2504. font-size: var(--icon-size);
  2505. }
  2506.  
  2507. .dwce-dropdown[data-is-icon]:hover > .dwc-submenu-toggle > button{
  2508. color: var(--icon-hover-clr);
  2509. }
  2510.  
  2511. /* reset rotation on icon when hovered */
  2512. .dwce-dropdown[data-is-icon] > .dwc-submenu-toggle button[aria-expanded="true"] > * {
  2513. transform: rotateZ(0deg);
  2514. }
  2515.  
  2516. /* reset margin left on mobile */
  2517. .dwc-mobile .dwce-nav-nested .dwc-nav-nested-items > .dwce-dropdown[data-is-icon] > .dwc-submenu-toggle{
  2518. margin-inline-start: initial;
  2519. }
  2520.  
  2521. /* remove inner span from document flow and hide visually */
  2522. .dwce-dropdown[data-is-icon] > .dwc-submenu-toggle > span{
  2523. clip: rect(1px,1px,1px,1px);
  2524. word-wrap: normal!important;
  2525. border: 0;
  2526. clip-path: inset(50%);
  2527. height: 1px;
  2528. margin: -1px;
  2529. overflow: hidden;
  2530. overflow-wrap: normal!important;
  2531. padding: 0;
  2532. position: absolute!important;
  2533. width: 1px;
  2534. }
  2535.  
  2536. /* IS BUTTON */
  2537. .dwce-dropdown[data-is-button] > .dwc-submenu-toggle{
  2538. height: auto !important;
  2539. margin-block: auto;
  2540. border-radius: var(--menu-item-radius) !important;
  2541. max-width: var(--menu-item-width);
  2542. border: var(--menu-item-border);
  2543. }
  2544.  
  2545. .dwce-dropdown[data-is-button]:hover > .dwc-submenu-toggle {
  2546. border: var(--menu-item-hover-border);
  2547. }
  2548.  
  2549. /* centralize text in span */
  2550. .dwce-dropdown[data-is-button] > .dwc-submenu-toggle > span{
  2551. margin-inline: auto;
  2552. }
  2553.  
  2554. /* remove button from document flow to allow text to centralize, but keep accessible */
  2555. .dwce-dropdown[data-is-button="no-chevron"] > .dwc-submenu-toggle > button{
  2556. clip: rect(1px,1px,1px,1px);
  2557. word-wrap: normal!important;
  2558. border: 0;
  2559. clip-path: inset(50%);
  2560. height: 1px;
  2561. margin: -1px;
  2562. overflow: hidden;
  2563. overflow-wrap: normal!important;
  2564. padding: 0;
  2565. position: absolute!important;
  2566. width: 1px;
  2567. }
  2568.  
  2569. /* block padding on mobile */
  2570. .dwc-mobile .dwce-dropdown:is([data-is-icon], [data-is-button]){
  2571. padding-block: var(--menu-item-block-padding);
  2572. padding-inline: var(--menu-item-inline-padding);
  2573. }
  2574.  
  2575.  
  2576. /* ============================================================================
  2577. 31. MULTILEVEL BACK BUTTON (Mobile)
  2578. ============================================================================ */
  2579.  
  2580. li.active.open:not(:has(.open)) > :is(.dwc-dropdown-content-wrapper, .dwc-dropdown-content) > .dwc-multilevel-back :is(span, svg){
  2581. transform: translateX(0px);
  2582. opacity: 1;
  2583. }
  2584.  
  2585. li.active.open:has(.open) > :is(.dwc-dropdown-content-wrapper, .dwc-dropdown-content) > .dwc-multilevel-back :is(span, svg) {
  2586. transform: translateX(-20%);
  2587. opacity: 0 !important;
  2588. transition: 0.4s 0.1s;
  2589. }
  2590.  
  2591. li:not(.etch-builder-block, .open:has(.open)) .dwc-multilevel-back :is(span, svg) {
  2592. transition: 0.4s 0.3s;
  2593. }
  2594.  
  2595. li:not(.etch-builder-block, .open) .dwc-multilevel-back :is(span, svg) {
  2596. transform: translateX(20%);
  2597. opacity: 0;
  2598. }
  2599.  
  2600.  
  2601. /* ============================================================================
  2602. 32. MENU OVERLAY (Backdrop)
  2603. ============================================================================ */
  2604.  
  2605. .dwc-nest-menu-overlay {
  2606. position: fixed;
  2607. inline-size: 100%;
  2608. block-size: 100%;
  2609. inset-inline-start: 0;
  2610. inset-block-end: 0;
  2611. background: var(--nav-overlay-backdrop-clr) !important;
  2612. z-index: 2;
  2613. opacity: 0;
  2614. transition: 0.4s;
  2615. backdrop-filter: blur(var(--nav-overlay-backdrop-blur));
  2616. }
  2617.  
  2618. html:not(.dwc-mobile) .dwc-nest-header:has(.dwc-nest-menu-overlay) .dwce-nav-nested{
  2619. z-index: 3
  2620. }
  2621.  
  2622. body:has([data-hide-overlay=true]) .dwc-nest-menu-overlay{
  2623. display: none;
  2624. }
  2625.  
  2626. body:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay {
  2627. inset-block-start: var(--dwc-nest-header-height);
  2628. }
  2629.  
  2630. .logged-in:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay:not(:has(+ .x-header)) {
  2631. inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px));
  2632. }
  2633.  
  2634. body:not(:has([data-no-overlay])):has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"], [data-overlay-on-header="true"]) .dwc-nest-menu-overlay {
  2635. inset-block-start: 0 !important;
  2636. }
  2637.  
  2638. .dwc-nest-menu-overlay {
  2639. pointer-events: none;
  2640. }
  2641.  
  2642. .no-scroll .dwc-nest-menu-overlay {
  2643. opacity: 1;
  2644. }
  2645.  
  2646.  
  2647. /* ============================================================================
  2648. 33. RTL SUPPORT
  2649. ============================================================================ */
  2650.  
  2651. html:not(.dwc-mobile)[dir=rtl] body
  2652. .dwce-nav-nested:not([data-offcanvas="true"])
  2653. .dwce-dropdown:not([data-megamenu="true"]) .dwce-dropdown .dwc-submenu-toggle button
  2654. svg {
  2655. transform: rotate(-270deg);
  2656. }
  2657.  
  2658.  
  2659. /* ============================================================================
  2660. 34. ETCH BUILDER (Editor)
  2661. ============================================================================ */
  2662.  
  2663. .dwce-dropdown[data-keep-open="true"]>.dwc-dropdown-content.etch-builder-block,
  2664. .dwce-dropdown[data-etch-selected="true"]>.dwc-dropdown-content,
  2665. .dwce-dropdown:has([data-etch-selected="true"]) >.dwc-dropdown-content,
  2666. .dwce-dropdown[data-keep-open="true"] > .dwc-dropdown-content-wrapper > .dwc-dropdown-content.etch-builder-block,
  2667. .dwce-dropdown[data-etch-selected="true"] > .dwc-dropdown-content-wrapper > .dwc-dropdown-content,
  2668. .dwce-dropdown:has([data-etch-selected="true"]) > .dwc-dropdown-content-wrapper > .dwc-dropdown-content {
  2669. opacity: 1;
  2670. visibility: visible;
  2671. z-index: 9999;
  2672. pointer-events: all;
  2673. }
  2674.  
  2675. .dwc-mobile .dwce-dropdown.etch-builder-block {
  2676. padding-left: 8px;
  2677. border: dotted transparent 1px;
  2678. }
  2679.  
  2680. .dwc-mobile .dwce-dropdown .dwce-dropdown.etch-builder-block {
  2681. border-bottom: dotted transparent 1px;;
  2682. }
  2683.  
  2684. .dwc-mobile .dwce-dropdown.etch-builder-block:hover {
  2685. border: dotted var(--etch-canvas-selection) 1px;
  2686. }
  2687.  
  2688. .dwc-mobile [data-megamenu="true"] .dwc-dropdown-content.etch-builder-block {
  2689. opacity: 1;
  2690. visibility: visible;
  2691. position: static;
  2692. }
  2693.  
  2694. html:not(.dwc-mobile) [data-megamenu="true"] .dwc-dropdown-content.etch-builder-block{
  2695. min-block-size: 200px;
  2696. box-shadow: var(--dropdown-content-shadow)
  2697. }
  2698.  
  2699. .dwc-mobile .dwc-dropdown-content-wrapper.etch-builder-block {
  2700. min-block-size: fit-content;
  2701. }
  2702.  
  2703. .dwc-mobile .dwc-nest-menu .etch-builder-block:not(.dwc-nest-menu-top) {
  2704. min-height: unset;
  2705. }
  2706.  
  2707. .dwc-mobile .etch-builder-block .dwc-dropdown-content-wrapper {
  2708. min-block-size: initial;
  2709. }
  2710.  
  2711. .dwc-mobile .etch-builder-block .dwc-nest-toggle--open.dwca--vortex:not([data-toggle-style="pill"]) .dwca-wrap {
  2712. inline-size: 40px;
  2713. block-size: 40px;
  2714. cursor: pointer
  2715. }
  2716.  
  2717. .etch-builder-block{
  2718.  
  2719. & [data-megamenu="true"]{
  2720. position: relative;
  2721. }
  2722.  
  2723. & [data-megamenu="true"]::before{
  2724. content: 'MEGA MENU';
  2725. position: absolute;
  2726. top: 100%;
  2727. min-block-size: 0;
  2728. min-inline-size: 0;
  2729. padding-inline: 0.4rem;
  2730. padding-block: 0.2rem;
  2731. font-size: 8px;
  2732. line-height: 1;
  2733. font-weight: 500;
  2734. letter-spacing: 1px;
  2735. text-transform: uppercase;
  2736. background-color: var(--etch-info, deepskyblue);
  2737. color: white;
  2738. }
  2739. }
  2740.  
  2741. [data-offcanvas="true"] .dwc-nav-nested-items.etch-builder-block {
  2742. display: block
  2743. }
  2744.  
  2745.  
  2746. [data-offcanvas="true"] .dwc-nav-wrapper.etch-builder-block{
  2747. position: fixed;
  2748. right: 0px;
  2749. top: 50px;
  2750. width: var(--mobile-menu-width);
  2751. overflow-y: scroll;
  2752. height: calc(100vh - 50px);
  2753. min-height: 0;
  2754.  
  2755. }
  2756.  
  2757. #etch-refresh-btn:not(.etch-builder-block + #etch-refresh-btn) {
  2758. display: none;
  2759. visibility: hidden;
  2760. }
  2761.  
  2762.  
  2763. /* ============================================================================
  2764. 35. FIXES / UTILITIES (consolidated into relevant sections above)
  2765. 36. MEDIA QUERIES
  2766. ============================================================================ */
  2767.  
  2768. @media (min-width: 1201px){
  2769. .dwc-mobile body:not(.dwc-offcanvas-active) header{
  2770. display: none;
  2771. }
  2772. }
  2773.  
  2774.  
  2775.  
  2776.  
  2777. /*MOBILE MENU/OFFCANVAS STYLES*/
  2778.  
  2779.  
  2780.  
  2781. @media only screen and (max-width: 1200px) {
  2782.  
  2783.  
  2784. /* =============================================
  2785. 1. BASE VISIBILITY & DISPLAY CONTROLS
  2786. ============================================= */
  2787.  
  2788. [data-breakin]:not(.dwc-nest-menu [data-breakin]) {
  2789. display: none;
  2790. }
  2791.  
  2792. .dwc-nav-wrapper:not(.show-nav .dwc-nav-wrapper),
  2793. html:not(.dwc-mobile) body:not(.dwc-offcanvas-active) .dwc-nav-wrapper {
  2794. display: none;
  2795. }
  2796.  
  2797. [data-breakinto].dwc-tabbed-nav-container:not(.dwce-dropdown .dwc-tabbed-nav-container) {
  2798. display: none;
  2799. }
  2800.  
  2801.  
  2802. .desktop-centered header:has([data-fix-centered-logo-fouc="true"]) {
  2803. opacity: 0;
  2804. }
  2805.  
  2806.  
  2807. /* =============================================
  2808. 2. MOBILE LOGO
  2809. ============================================= */
  2810.  
  2811. .dwc-nest-menu__logo[data-breakout] {
  2812. margin-inline-end: auto
  2813. }
  2814.  
  2815. /*mobile logo*/
  2816. .dwc-nest-menu__mobile-logo> :is(svg, img) {
  2817. block-size: 100%;
  2818. inline-size: auto;
  2819. }
  2820.  
  2821. [data-sidebar-back-text-on-logo="true"] .dwc-nest-menu__mobile-logo {
  2822. --dwc-nest-header-height: var(--mobile-menu-top-height);
  2823. }
  2824.  
  2825.  
  2826. /* =============================================
  2827. 3. TOGGLE BUTTONS (OPEN/CLOSE MENU)
  2828. ============================================= */
  2829.  
  2830. .dwc-mobile .dwc-nest-toggle--open.dwce-toggle {
  2831. display: flex !important;
  2832. place-items: center;
  2833. }
  2834.  
  2835. .dwce-nav-nested .dwc-nest-toggle--close {
  2836. position: absolute;
  2837. z-index: 9999;
  2838. inset: 4px 4px auto auto;
  2839. background: white;
  2840. padding: 0.5em;
  2841. border-radius: 50vw;
  2842. }
  2843.  
  2844. [data-mobile-top-transparent="true"]:not(:has(.dwce-dropdown.open)) .dwce-toggle[aria-label="Open Menu"] {
  2845. z-index: 9999;
  2846. }
  2847.  
  2848.  
  2849. /* =============================================
  2850. 4. NAV WRAPPER - POSITIONING & STATE
  2851. ============================================= */
  2852.  
  2853. .dwc-nav-wrapper {
  2854. position: fixed;
  2855. inset-block: 0;
  2856. inset-inline-end: 0;
  2857. transform: translateX(100%);
  2858. background-color: var(--mobile-menu-bg);
  2859. transition: 0.45s;
  2860. transition-timing-function: var(--mobile-menu-ttf);
  2861. z-index: 1;
  2862. flex-wrap: nowrap;
  2863. inline-size: var(--mobile-menu-width);
  2864. visibility: hidden;
  2865. }
  2866.  
  2867. /* .dwc-nav-wrapper:not([data-overlay-header-mobile="true"]:has([data-slide-in-direction='top'])) {
  2868. inset-block-end: 0
  2869. } */
  2870.  
  2871. .dwc-open .dwc-nav-wrapper {
  2872. transform: translateX(0%);
  2873. visibility: visible;
  2874. }
  2875.  
  2876. .dwc-mobile :is(.scroll-up, .scroll-down) [data-sticky-header="true"] .dwce-nav-nested:not([data-offcanvas="true"]) .dwc-nav-wrapper {
  2877. block-size: 100dvh
  2878. }
  2879.  
  2880.  
  2881. /* =============================================
  2882. 5. NAV NESTED ITEMS - LAYOUT & SCROLLING
  2883. ============================================= */
  2884.  
  2885. [data-offcanvas="true"] .dwc-nav-nested-items {
  2886. flex-wrap: nowrap;
  2887. }
  2888.  
  2889. .dwce-nav-nested .dwc-nav-nested-items {
  2890. gap: 0;
  2891. flex-direction: column;
  2892. flex-wrap: nowrap;
  2893. overflow-x: hidden;
  2894. overflow-y: auto;
  2895. position: relative !Important;
  2896. background: var(--mobile-menu-bg) !important;
  2897. align-items: stretch;
  2898. scrollbar-width: none;
  2899. justify-content: flex-start !important;
  2900. }
  2901.  
  2902. /* .dwc-nest-header:not([data-overlay-header-mobile="true"]:has([data-slide-in-direction="top"])) .dwce-nav-nested .dwc-nav-nested-items {
  2903. flex-grow: 1;
  2904. } */
  2905.  
  2906. .dwc-nav-nested-items:not([data-overlay-header-mobile="true"] [data-slide-in-direction="top"] .dwc-nav-nested-items) {
  2907. flex-grow: 1;
  2908. }
  2909.  
  2910.  
  2911. /* =============================================
  2912. 6. MENU TOP BAR
  2913. ============================================= */
  2914.  
  2915. .dwc-nest-menu-top {
  2916. background-color: var(--mobile-menu-topbar-bg);
  2917.  
  2918. &:not([data-slide-in-direction="expand down"] &) {
  2919. border-block-end: var(--menu-item-border);
  2920. }
  2921. header:not([data-sticky-header="true"], :has([data-fullscreen-mobile-menu="true"])) &,
  2922. body:has([data-no-sticky]):not(:has([data-fullscreen-mobile-menu="true"])) & {
  2923. min-block-size: calc(var(--dwc-nest-header-height) - var(--scroll-y));
  2924. }
  2925. display: flex;
  2926. flex-direction: row;
  2927. align-items: center;
  2928. }
  2929.  
  2930. body:not(:has([data-no-sticky])) [data-sticky-header="true"] .dwc-nest-menu-top {
  2931. min-block-size: var(--dwc-nest-header-height);
  2932. }
  2933.  
  2934.  
  2935.  
  2936.  
  2937. /* =============================================
  2938. 7. MENU ITEM BORDERS
  2939. ============================================= */
  2940.  
  2941. .dwce-nav-nested .dwce-dropdown[data-megamenu="true"],
  2942. .dwce-nav-nested .dwc-menu-item {
  2943. border-block-end: var(--menu-item-border);
  2944. }
  2945.  
  2946. .dwce-nav-nested .dwce-dropdown:not([data-megamenu="true"]):not(.open, :has(.open)),
  2947. .dwce-nav-nested .dwce-dropdown:not([data-megamenu="true"])>.dwce-dropdown:not(.open, :has(.open)) {
  2948. border-block-end: var(--menu-item-border);
  2949. }
  2950.  
  2951.  
  2952. /* =============================================
  2953. 8. MENU CTA (LAST BUTTON)
  2954. ============================================= */
  2955.  
  2956. :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwce-nav-nested .dwc-nav-nested-items>.dwc-menu-item:last-of-type,
  2957. :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwce-nav-nested .dwc-nav-nested-items>.dwc-menu-item:nth-last-of-type(-n+2),
  2958. [data-last-item-is-button="true-3"].dwce-nav-nested .dwc-nav-nested-items>.dwc-menu-item:nth-last-of-type(-n+3) {
  2959. padding-inline: var(--menu-item-inline-padding) !important;
  2960. padding-block: var(--menu-item-block-padding) !important;
  2961. inline-size: 100%;
  2962. margin-inline: auto;
  2963. max-inline-size: var(--cta-width);
  2964. }
  2965.  
  2966. [data-last-item-is-button="true-2"].dwce-nav-nested .dwc-nav-nested-items>.dwc-menu-item:nth-last-of-type(-n+2)+li {
  2967. padding-block-start: var(--cta-gap-offset) !important
  2968. }
  2969.  
  2970. [data-last-item-is-button="true-3"].dwce-nav-nested .dwc-nav-nested-items>.dwc-menu-item:nth-last-of-type(-n+3)+li {
  2971. padding-block-start: var(--cta-gap-offset) !important
  2972. }
  2973.  
  2974.  
  2975. :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwce-nav-nested .dwc-nav-nested-items>.dwc-menu-item:last-of-type a,
  2976. :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwce-nav-nested .dwc-nav-nested-items>.dwc-menu-item:nth-last-of-type(-n+2) a,
  2977. [data-last-item-is-button="true-3"].dwce-nav-nested .dwc-nav-nested-items>.dwc-menu-item:nth-last-of-type(-n+3) a {
  2978. justify-content: center;
  2979. }
  2980.  
  2981.  
  2982. /* =============================================
  2983. 9. DROPDOWN DEFAULTS & RESETS
  2984. ============================================= */
  2985.  
  2986. [data-offcanvas="true"] .open:has(.open) .dwc-dropdown-content::before {
  2987. display: none !important;
  2988. }
  2989.  
  2990.  
  2991. [data-overlay-header="true"] .dwce-nav-nested .dwce-dropdown:not(.open) .dwc-dropdown-content,
  2992. .dwce-nav-nested .dwce-dropdown:not(.open) .dwc-dropdown-content {
  2993. min-inline-size: 0 !important;
  2994. }
  2995.  
  2996. .dwce-nav-nested .dwce-dropdown {
  2997. position: static;
  2998. }
  2999.  
  3000.  
  3001. /* =============================================
  3002. 10. SLIDE-IN DIRECTION: LEFT
  3003. ============================================= */
  3004.  
  3005. [data-slide-in-direction="left"] .dwc-nav-wrapper {
  3006. transform: translateX(-100%);
  3007. inset-inline-start: 0;
  3008. overflow: hidden;
  3009. }
  3010.  
  3011. html:not(.dwc-offcanvas-mobile) [data-slide-in-direction="left"][data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"] .dwc-nav-wrapper {
  3012. overflow: unset;
  3013. }
  3014.  
  3015. [data-slide-in-direction="left"].dwc-open .dwc-nav-wrapper {
  3016. transform: translateX(0);
  3017. }
  3018.  
  3019.  
  3020. /* =============================================
  3021. 11. SLIDE-IN DIRECTION: TOP
  3022. ============================================= */
  3023.  
  3024. .dwce-nav-nested[data-slide-in-direction="top"].dwc-open .dwc-nav-wrapper,
  3025. .dwce-nav-nested[data-slide-in-direction="left top"].dwc-open .dwc-nav-wrapper {
  3026. transform: translateY(0%);
  3027. }
  3028.  
  3029. .dwce-nav-nested[data-slide-in-direction="top"] .dwc-nav-wrapper,
  3030. .dwce-nav-nested[data-slide-in-direction="left top"] .dwc-nav-wrapper {
  3031. transform: translateY(-100%);
  3032. }
  3033.  
  3034.  
  3035. /* =============================================
  3036. 12. SLIDE-IN DIRECTION: BOTTOM
  3037. ============================================= */
  3038.  
  3039. .dwce-nav-nested[data-slide-in-direction="bottom"].dwc-open .dwc-nav-wrapper,
  3040. .dwce-nav-nested[data-slide-in-direction="left bottom"].dwc-open .dwc-nav-wrapper {
  3041. transform: translateY(0%);
  3042. }
  3043.  
  3044. .dwce-nav-nested[data-slide-in-direction="bottom"] .dwc-nav-wrapper,
  3045. .dwce-nav-nested[data-slide-in-direction="left bottom"] .dwc-nav-wrapper {
  3046. transform: translateY(100%);
  3047. }
  3048.  
  3049. [data-slide-in-direction="left bottom"] .dwc-nav-wrapper,
  3050. [data-slide-in-direction="left top"] .dwc-nav-wrapper {
  3051. inset-inline-start: 0;
  3052. overflow: hidden;
  3053. }
  3054.  
  3055.  
  3056. /* =============================================
  3057. 13. SLIDE-IN DIRECTION: EXPAND DOWN
  3058. ============================================= */
  3059.  
  3060. [data-slide-in-direction="expand down"].dwc-open .dwc-nav-wrapper {
  3061. transform: unset;
  3062. visibility: visible;
  3063. grid-template-rows: var(--dwc-nest-header-height) 1fr;
  3064. opacity: 1;
  3065. }
  3066.  
  3067. [data-slide-in-direction="expand down"] .dwc-nav-wrapper {
  3068. transform: unset;
  3069. display: grid;
  3070. grid-template-rows: 0fr 0fr;
  3071.  
  3072. &>.dwc-nav-nested-items>li>*:not(.dwc-dropdown-content-wrapper) {
  3073. transition: 0.4s
  3074. }
  3075.  
  3076. &>.dwc-nav-nested-items:not(.dwc-open .dwc-nav-nested-items)>li>*:not(.dwc-dropdown-content-wrapper) {
  3077. transform: translateY(-20px);
  3078. opacity: 0;
  3079. }
  3080.  
  3081. }
  3082.  
  3083. /*[data-slide-in-direction="expand down"]*/ .dwc-nav-wrapper:has(.open.active) {
  3084. transition-delay: 0.4s;
  3085.  
  3086. &>.dwc-nav-nested-items>li>*:not(.dwc-dropdown-content-wrapper, .dwc-dropdown-content) {
  3087. transition-delay: 0.45s;
  3088. }
  3089. }
  3090.  
  3091. [data-fullscreen-mobile-menu="true"][data-slide-in-direction="expand down"] .dwc-nav-wrapper:not(.dwc-open .dwc-nav-wrapper) {
  3092. opacity: 0;
  3093. transition: opacity 0.45s 0.2s, transform 0.45s, grid-template-rows 0.45s, visibility 0.4s 0.2s;
  3094. }
  3095.  
  3096.  
  3097. /* =============================================
  3098. 14. OVERLAY HEADER MOBILE
  3099. ============================================= */
  3100.  
  3101. /*special mobile menu styles for overlay header UPDATED */
  3102.  
  3103. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-nested-items {
  3104. transform: translateY(-100%);
  3105. transition: 0.45s;
  3106. transition-timing-function: var(--mobile-menu-ttf);
  3107. inset-block-start: calc(var(--overlay-header-radius) * -2);
  3108. }
  3109.  
  3110.  
  3111. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"].dwc-open .dwc-nav-nested-items {
  3112. transform: translateY(0%);
  3113. }
  3114.  
  3115.  
  3116.  
  3117.  
  3118. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-nested-items {
  3119. --mobile-menu-width: 100% !important;
  3120. inline-size: var(--mobile-menu-width);
  3121. border-bottom-left-radius: min(var(--mobile-menu-radius), 2em);
  3122. border-bottom-right-radius: min(var(--mobile-menu-radius), 2em);
  3123. padding-block-start: calc(var(--overlay-header-radius) * 2);
  3124. overflow-x: hidden;
  3125. }
  3126.  
  3127. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"]:not([data-submenu-reveal="expand"]) .dwc-nav-nested-items {
  3128. overflow-y: hidden;
  3129. }
  3130.  
  3131.  
  3132.  
  3133. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="expand"] .dwc-nav-nested-items {
  3134. max-block-size: fit-content;
  3135. }
  3136.  
  3137. .dwc-mobile #dwc-header[data-overlay-header-mobile = "true"]:not([data-sticky-header="true"]) .dwce-nav-nested:not([data-slide-in-direction="top"][data-match-overlay-header-width="true"]) .dwc-nav-wrapper {
  3138. inset-block-start: 0px;
  3139. }
  3140.  
  3141. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
  3142. transform: translateY(0%);
  3143. border-radius: min(var(--overlay-header-radius), 2em);
  3144. overflow: hidden !important;
  3145. inset-block-start: calc(var(--overlay-header-inset) - var(--scroll-y) + var(--wp-admin--admin-bar--height, 0px));
  3146.  
  3147. }
  3148.  
  3149. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"].dwc-open .dwc-nav-wrapper {
  3150. transform: translateY(0%);
  3151. }
  3152.  
  3153. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper) {
  3154. --mobile-menu-width: min(calc(100% - (var(--overlay-header-inset) * 2)), 100%) !important;
  3155. inline-size: var(--mobile-menu-width) !important;
  3156. inset-inline-end: var(--overlay-header-inset) !important;
  3157. min-block-size: calc(100dvb - var(--wp-admin--admin-bar--height, 0px) - (var(--overlay-header-inset) * 2));
  3158. }
  3159.  
  3160. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwce-dropdown:not(.open) .dwc-dropdown-content {
  3161. min-block-size: 0;
  3162. }
  3163.  
  3164.  
  3165. .dwc-mobile [data-overlay-header-mobile="true"].dwc-nest-header:has(.dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"]) {
  3166. padding-inline: initial
  3167. }
  3168.  
  3169.  
  3170. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top {
  3171. border-block-end: initial;
  3172. min-block-size: var(--dwc-header-div-height);
  3173. }
  3174.  
  3175.  
  3176.  
  3177.  
  3178. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .dwce-dropdown:not(:is([data-submenu-reveal="expand"], [data-megamenu="true"])) .dwc-dropdown-content:not([data-submenu-reveal="expand"] *),
  3179. [data-submenu-reveal="slide"].dwce-dropdown:not([data-megamenu="true"]) .dwc-dropdown-content {
  3180. min-block-size: 100%;
  3181. }
  3182.  
  3183. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwce-dropdown:not([data-megamenu="true"]) .dwc-dropdown-content {
  3184. min-inline-size: 0px !important;
  3185. }
  3186.  
  3187.  
  3188.  
  3189. .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .dwce-dropdown[data-megamenu="true"]:not(:is([data-submenu-reveal="expand"])) .dwc-dropdown-content:not([data-submenu-reveal="expand"] .dwc-dropdown-content)>li {
  3190. padding-block-end: 40px;
  3191. }
  3192.  
  3193. .dwc-mobile .dwc-nest-header[data-overlay-header-mobile="true"]>div {
  3194. padding-inline: var(--menu-item-inline-padding);
  3195. border-radius: var(--overlay-header-radius);
  3196. }
  3197.  
  3198. .dwc-mobile [data-allow-overlay-mobile-opacity="true"][data-overlay-header-mobile="true"] [data-submenu-reveal="expand"][data-slide-in-direction="top"] .dwc-nest-menu-top {
  3199. z-index: 9999;
  3200. border-radius: var(--overlay-header-radius);
  3201. --mobile-menu-topbar-bg: var(--overlay-header-bg);
  3202. backdrop-filter: blur(var(--overlay-header-blur));
  3203. }
  3204.  
  3205. /* when using special mobile style, allow menu to close when clicking outside the menu */
  3206. /* .dwc-mobile [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper):not(:has(.dwce-dropdown.open, .dwce-dropdown.dwc-closing)) {
  3207. block-size: fit-content !important;
  3208. } */
  3209.  
  3210. /* overlay header on mobile */
  3211. /* .dwc-mobile #dwc-header[data-overlay-header-mobile = "true"] {
  3212. padding: var(--overlay-header-inset);
  3213. } */
  3214.  
  3215. .dwc-mobile [data-overlay-header-mobile = "true"]:has([data-slide-in-direction="top"]) .dwc-nest-header{
  3216. overflow: clip;
  3217. }
  3218.  
  3219. .dwc-mobile #dwc-header[data-overlay-header-mobile = "true"]:not([data-sticky-header="true"]) {
  3220. position: absolute;
  3221. inset-block-start: 0;
  3222. inset-inline: 0;
  3223. }
  3224.  
  3225. .dwc-mobile #dwc-header[data-overlay-header-mobile = "true"] .dwc-nest-header{
  3226. border-radius: var(--overlay-header-radius);
  3227. background-color: var(--overlay-header-bg);
  3228. box-shadow: var(--overlay-header-shadow);
  3229. max-inline-size: var(--overlay-header-width);
  3230. }
  3231.  
  3232.  
  3233.  
  3234. [data-overlay-header-mobile="true"] .dwce-nav-nested[data-submenu-reveal="slide"] .dwc-nav-nested-items:has(li.open.active) {
  3235. flex-grow: 1;
  3236. }
  3237.  
  3238. .dwc-mobile #dwc-header > .dwc-nest-header[data-overlay-header-mobile="true"]:not(:has([data-offcanvas="true"]))::before {
  3239. backdrop-filter: blur(var(--overlay-header-blur));
  3240. content: '';
  3241. position: absolute;
  3242. inset: 0;
  3243. z-index: -1;
  3244. border-radius: var(--overlay-header-radius);
  3245. }
  3246.  
  3247. .dwc-mobile [data-overlay-header-mobile="true"] [data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top {
  3248. z-index: 9999;
  3249. border-radius: var(--overlay-header-radius);
  3250. background-color: var(--overlay-header-bg) !important;
  3251. backdrop-filter: blur(var(--overlay-header-blur));
  3252. }
  3253.  
  3254. .dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]):not([data-fullscreen-desktop="true"]) .dwc-nav-wrapper:not(:has(.dwce-dropdown.open)),
  3255. .dwc-mobile [data-overlay-header-mobile="true"] :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]):not([data-fullscreen-desktop="true"]) .dwc-nav-wrapper{
  3256. z-index: -1;
  3257. }
  3258.  
  3259. /* special style UPDATED ends*/
  3260.  
  3261.  
  3262.  
  3263.  
  3264.  
  3265. /* =============================================
  3266. 15. FULLSCREEN MOBILE MENU
  3267. ============================================= */
  3268.  
  3269. [data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top {
  3270. min-block-size: fit-content;
  3271. }
  3272.  
  3273. [data-fullscreen-mobile-menu="true"] :is(.dwc-dropdown-content-wrapper, [data-megamenu="true"] .dwc-dropdown-content) {
  3274. --dwc-nest-header-height: var(--dwc-mobile-top-height)
  3275. }
  3276.  
  3277. [data-fullscreen-mobile-menu="true"][data-offcanvas="true"] .dwc-nest-menu-top {
  3278. justify-content: space-between
  3279. }
  3280.  
  3281.  
  3282. /* =============================================
  3283. 16. TRANSPARENT TOP BAR
  3284. ============================================= */
  3285.  
  3286. .dwc-mobile [data-mobile-top-transparent="true"] .dwc-nav-wrapper:not([data-show-mobile-logo="true"] .dwc-nav-wrapper, [data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper) {
  3287. background-color: transparent !important;
  3288. }
  3289.  
  3290.  
  3291. /* =============================================
  3292. 17. SUBMENU REVEAL: EXPAND (ACCORDION)
  3293. ============================================= */
  3294.  
  3295. [data-submenu-reveal="expand"] .dwce-dropdown.open.active>.dwc-dropdown-content-wrapper {
  3296. grid-template-rows: 1fr;
  3297. grid-template-columns: 1fr;
  3298. }
  3299.  
  3300. [data-submenu-reveal="expand"] .dwc-dropdown-content-wrapper {
  3301. display: grid !important;
  3302. grid-template-rows: 0fr;
  3303. grid-template-columns: 1fr;
  3304. transition: 0.3s ease-in-out;
  3305. overflow: hidden;
  3306. position: static;
  3307. visibility: visible;
  3308. opacity: 1;
  3309. transform: initial;
  3310. inset: initial;
  3311. min-block-size: initial;
  3312. }
  3313.  
  3314. [data-submenu-reveal="expand"] .dwc-multilevel-back {
  3315. display: none;
  3316. visibility: hidden;
  3317. }
  3318.  
  3319. .dwce-nav-nested [data-submenu-reveal="expand"][data-megamenu="true"]>.dwc-dropdown-content {
  3320. position: static !important;
  3321. padding-block-end: 0 !important;
  3322. transition: 0.3s ease-in-out !important;
  3323. }
  3324.  
  3325.  
  3326. /* =============================================
  3327. 18. SUBMENU REVEAL: SLIDE
  3328. ============================================= */
  3329.  
  3330.  
  3331. [data-submenu-reveal="slide"].dwce-nav-nested .dwce-dropdown:not(:is([data-submenu-reveal="expand"])) .dwc-dropdown-content:not([data-submenu-reveal="expand"] *),
  3332. [data-submenu-reveal="slide"].dwce-dropdown .dwc-dropdown-content {
  3333. max-block-size: unset;
  3334. opacity: 1;
  3335. transition-duration: calc(0.5s / var(--slide-out-speed)) !important;
  3336. transition-timing-function: var(--mobile-menu-ttf);
  3337. padding-block-end: 50px;
  3338. }
  3339.  
  3340.  
  3341.  
  3342. [data-submenu-reveal="slide"].dwce-nav-nested [data-megamenu="true"].dwce-dropdown .dwc-dropdown-content:not([data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content) {
  3343. inset: 0 !important;
  3344. transform: translateX(100%);
  3345. transition-property: opacity, transform, visibility;
  3346. }
  3347.  
  3348. [data-submenu-reveal="slide"].dwce-nav-nested:not([data-overlay-header-mobile="true"] [data-slide-in-direction="top"]) [data-megamenu="true"].dwce-dropdown .dwc-dropdown-content:not([data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content) {
  3349. min-block-size: calc(100dvb - var(--dwc-nest-header-height));
  3350. }
  3351.  
  3352.  
  3353. [data-submenu-reveal="slide"].dwce-nav-nested:not([data-slide-in-direction="expand down"]) [data-megamenu="true"].dwce-dropdown .dwc-dropdown-content:not([data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content) {
  3354.  
  3355. position: fixed !important;
  3356. }
  3357.  
  3358. /* [data-submenu-reveal="slide"].dwce-nav-nested:not([data-slide-in-direction="expand down"]) [data-megamenu="true"].dwce-dropdown .dwc-dropdown-content:not([data-hide-close-bar="true"] .dwc-dropdown-content, [data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content) {
  3359. inset-block-start: var(--dwc-nest-header-height) !important;
  3360. } */
  3361.  
  3362. /* fix start */
  3363.  
  3364. [data-submenu-reveal="slide"].dwce-nav-nested:not([data-slide-in-direction="expand down"], [data-overlay-header-mobile="true"] [data-slide-in-direction="top"]) [data-megamenu="true"].dwce-dropdown .dwc-dropdown-content:not([data-hide-close-bar="true"] .dwc-dropdown-content, [data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content) {
  3365. inset-block-start: var(--dwc-nest-header-height) !important;
  3366.  
  3367. }
  3368.  
  3369. [data-overlay-header-mobile="true"] .dwce-nav-nested[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] [data-megamenu="true"].dwce-dropdown .dwc-dropdown-content:not([data-hide-close-bar="true"] .dwc-dropdown-content, [data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content) {
  3370. inset-block-start: calc(var(--overlay-header-radius) * 2) !important;
  3371. }
  3372.  
  3373. /* fix end */
  3374.  
  3375.  
  3376.  
  3377.  
  3378. :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwce-nav-nested.dwc-open [data-megamenu="true"].dwce-dropdown.open>.dwc-dropdown-content:not([data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content, html:not(.dwc-offcanvas-mobile) [data-flyout-offcanvas="true"] .dwc-dropdown-content) {
  3379. transform: translateX(0) !important;
  3380. }
  3381.  
  3382.  
  3383.  
  3384. /* SLIDE IN - multi-level DROPDOWN ITEMS*/
  3385. [data-submenu-reveal="slide"].dwce-nav-nested .dwce-dropdown:not(:is([data-submenu-reveal="expand"], [data-megamenu="true"])) .dwc-dropdown-content:not([data-submenu-reveal="expand"] *),
  3386. [data-submenu-reveal="slide"].dwce-dropdown:not([data-megamenu="true"]) .dwc-dropdown-content {
  3387. inset-block: 0 !important;
  3388. inline-size: 100%;
  3389. inset-inline-start: 100% !important;
  3390. }
  3391.  
  3392. :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwce-nav-nested .dwce-dropdown:not([data-megamenu="true"], .open, [data-submenu-reveal="expand"]) .dwc-dropdown-content:not([dir="rtl"] .dwc-dropdown-content),
  3393. :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].dwce-dropdown:not([data-megamenu="true"], .open) .dwc-dropdown-content:not([dir="rtl"] .dwc-dropdown-content) {
  3394. inset-inline-start: -100% !important;
  3395. }
  3396.  
  3397.  
  3398. [data-submenu-reveal="slide"] .dwc-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) {
  3399. transform: rotate(270deg)
  3400. }
  3401.  
  3402.  
  3403. /* =============================================
  3404. 19. DROPDOWN CONTENT WRAPPER
  3405. ============================================= */
  3406.  
  3407. .dwc-dropdown-content-wrapper {
  3408. display: flex;
  3409. flex-direction: column;
  3410. width: 100%;
  3411. z-index: 9999;
  3412. transition-property: transform, opacity, visibility;
  3413. transition-duration: calc(0.5s / var(--slide-out-speed)) !important;
  3414. transition-timing-function: var(--mobile-menu-ttf);
  3415. overflow-x: hidden;
  3416.  
  3417. }
  3418.  
  3419.  
  3420.  
  3421. html:not(.dwc-offcanvas-mobile) :is([data-slide-in-direction="left"], [data-slide-in-direction="right"], [data-slide-in-direction="expand down"])[data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"] .dwc-dropdown-content-wrapper {
  3422. overflow-x: unset;
  3423. }
  3424.  
  3425. li:not(.etch-builder-block) .dwc-dropdown-content-wrapper:not([data-submenu-reveal="expand"] .dwc-dropdown-content-wrapper) {
  3426. block-size: calc(100dvb - var(--dwc-nest-header-height));
  3427. }
  3428.  
  3429. .dwc-dropdown-content-wrapper:not([data-submenu-reveal="expand"] .dwc-dropdown-content-wrapper) {
  3430. transform: translateX(100%);
  3431. }
  3432.  
  3433. /* .dwc-dropdown-content-wrapper:not(.dwc-dropdown-content-wrapper div) {
  3434. inset-block-start: var(--dwc-nest-header-height);
  3435. } */
  3436.  
  3437. /* fix start */
  3438.  
  3439. .dwc-dropdown-content-wrapper:not(.dwc-dropdown-content-wrapper div, [data-overlay-header-mobile="true"] .dwc-dropdown-content-wrapper) {
  3440. inset-block-start: calc(var(--dwc-nest-header-height) - var(--scroll-y));
  3441. }
  3442.  
  3443. [data-overlay-header-mobile="true"] .dwce-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-dropdown-content-wrapper:not(.dwc-dropdown-content-wrapper div) {
  3444. inset-block-start: calc(var(--overlay-header-radius) * 2) !important;
  3445. }
  3446.  
  3447. /* fix end */
  3448.  
  3449. .dwc-dropdown-content-wrapper:not(.dwc-dropdown-content-wrapper div, [data-submenu-reveal="expand"] .dwc-dropdown-content-wrapper) {
  3450. position: fixed;
  3451. inset-inline-end: 0;
  3452. max-width: var(--mobile-menu-width);
  3453. }
  3454.  
  3455. .dwc-dropdown-content-wrapper .dwc-dropdown-content-wrapper:not([data-submenu-reveal="expand"] .dwc-dropdown-content-wrapper) {
  3456. position: absolute;
  3457. inset-block-start: 0;
  3458. }
  3459.  
  3460. [data-submenu-reveal="slide"].dwce-nav-nested.dwc-open .dwce-dropdown.open>.dwc-dropdown-content-wrapper {
  3461. transform: translateX(0);
  3462. }
  3463.  
  3464. html:not(.dwc-offcanvas-mobile) [data-slide-in-direction="left"][data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"].dwce-nav-nested.dwc-open .dwce-dropdown.open>.dwc-dropdown-content-wrapper {
  3465. transform: translateX(100%);
  3466. }
  3467.  
  3468.  
  3469. html:not(.dwc-offcanvas-mobile) :is([data-slide-in-direction="right"], [data-slide-in-direction="expand down"])[data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"].dwce-nav-nested.dwc-open .dwce-dropdown>.dwc-dropdown-content-wrapper {
  3470. transform: translateX(-100%);
  3471. }
  3472.  
  3473. html:not(.dwc-offcanvas-mobile) [data-slide-in-direction="right"][data-submenu-reveal="slide"][data-flyout-offcanvas="true"][data-offcanvas="true"].dwce-nav-nested [data-megamenu="true"].dwce-dropdown .dwc-dropdown-content:not([data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content) {
  3474. transform: translateX(-100%);
  3475. }
  3476.  
  3477.  
  3478. /* =============================================
  3479. 20. DROPDOWN CONTENT & OVERFLOW
  3480. ============================================= */
  3481.  
  3482. .dwc-dropdown-content:not([data-megamenu="true"] .dwc-dropdown-content) {
  3483. overflow-y: auto;
  3484. }
  3485.  
  3486. /* fix hidden back button when ancestor dropdown content has scrolling content */
  3487. .dwc-nest-menu:not([data-submenu-reveal="expand"]) .dwce-dropdown:has(.open) .dwc-dropdown-content:has(.open) {
  3488. overflow-y: hidden;
  3489. }
  3490.  
  3491. .dwce-nav-nested .dwce-dropdown:not([data-megamenu="true"]) .dwc-dropdown-content {
  3492. flex-grow: 1;
  3493. }
  3494.  
  3495.  
  3496. /* =============================================
  3497. 21. DROPDOWN INDENT
  3498. ============================================= */
  3499.  
  3500.  
  3501. .dwce-nav-nested[data-submenu-reveal="expand"] .dwce-dropdown:not([data-megamenu="true"])>.dwc-dropdown-content-wrapper>.dwc-dropdown-content:not(.dwce-dropdown[data-submenu-reveal="slide"] .dwc-dropdown-content),
  3502. .dwce-nav-nested .dwce-dropdown[data-submenu-reveal="expand"]:not([data-megamenu="true"]) .dwc-dropdown-content {
  3503. padding-inline-start: var(--dropdown-indent) !important;
  3504. padding-inline-end: calc(var(--dropdown-indent) * 0) !important;
  3505. border-left: var(--dropdown-indent-line);
  3506. background-color: var(--dropdown-indent-bg);
  3507. min-inline-size: 0px !important;
  3508. overflow: hidden;
  3509. }
  3510.  
  3511.  
  3512. .dwce-nav-nested[data-submenu-reveal="expand"] .dwce-dropdown:not([data-megamenu="true"])>.dwc-dropdown-content-wrapper>.dwc-dropdown-content:not(.dwce-dropdown[data-submenu-reveal="slide"] *)>*> :is(a, .dwc-submenu-toggle),
  3513. .dwce-nav-nested .dwce-dropdown[data-submenu-reveal="expand"]:not([data-megamenu="true"])>.dwc-dropdown-content-wrapper>.dwc-dropdown-content>*> :is(a, .dwc-submenu-toggle) {
  3514. padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important;
  3515. }
  3516.  
  3517.  
  3518. .dwce-nav-nested[data-submenu-reveal="expand"] .dwce-dropdown.open>.dwc-submenu-toggle,
  3519. .dwce-nav-nested [data-submenu-reveal="expand"].dwce-dropdown.open>.dwc-submenu-toggle {
  3520. background-color: var(--dropdown-expanded-bg);
  3521. color: var(--dropdown-expanded-clr);
  3522. }
  3523.  
  3524. .dwce-nav-nested[data-submenu-reveal="expand"] .dwce-dropdown.open>.dwc-submenu-toggle svg path,
  3525. .dwce-nav-nested [data-submenu-reveal="expand"].dwce-dropdown.open>.dwc-submenu-toggle svg path {
  3526. stroke: var(--dropdown-expanded-clr) !important;
  3527. }
  3528.  
  3529.  
  3530. /* =============================================
  3531. 22. EXPAND MEGA MENU DROPDOWN
  3532. ============================================= */
  3533.  
  3534. [data-submenu-reveal="expand"] [data-megamenu="true"] .dwc-dropdown-content {
  3535. display: grid !important;
  3536. grid-template-rows: 0fr;
  3537. grid-template-columns: 1fr;
  3538. transition: 0.3s ease-in-out;
  3539. overflow: hidden;
  3540. position: static;
  3541. visibility: visible;
  3542. opacity: 1;
  3543. }
  3544.  
  3545. [data-submenu-reveal="expand"] [data-megamenu="true"].dwce-dropdown.open.active .dwc-dropdown-content {
  3546. grid-template-rows: 1fr;
  3547. grid-template-columns: 1fr;
  3548.  
  3549. }
  3550.  
  3551. [data-submenu-reveal="expand"] [data-megamenu="true"] .dwc-dropdown-content> :is(div, li) {
  3552. padding-block: 0 !important;
  3553. opacity: 0;
  3554. transition: opacity 0.3s ease;
  3555. }
  3556.  
  3557. [data-submenu-reveal="expand"] [data-megamenu="true"] .dwc-dropdown-content :is(div, li):not([data-submenu-reveal="slide"] *) {
  3558. flex-wrap: nowrap !important;
  3559. min-block-size: 0 !important;
  3560. }
  3561.  
  3562. [data-submenu-reveal="expand"] [data-megamenu="true"].dwce-dropdown.open.active .dwc-dropdown-content> :is(div, li) {
  3563. opacity: 1;
  3564. transition: opacity 0.25s 0.25s ease;
  3565. }
  3566.  
  3567.  
  3568. /* =============================================
  3569. 23. EXPAND MEGA MENU DROPDOWN - MODULAR
  3570. ============================================= */
  3571.  
  3572. [data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content {
  3573. display: grid !important;
  3574. grid-template-rows: 0fr;
  3575. grid-template-columns: 1fr;
  3576. transition: 0.3s ease-in-out;
  3577. overflow: hidden;
  3578. position: static;
  3579. visibility: visible;
  3580. opacity: 1;
  3581. }
  3582.  
  3583. [data-submenu-reveal="expand"][data-megamenu="true"].dwce-dropdown.open.active .dwc-dropdown-content {
  3584. grid-template-rows: 1fr;
  3585. grid-template-columns: 1fr;
  3586. }
  3587.  
  3588. [data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content> :is(div, li) {
  3589. padding-block: 0 !important;
  3590. opacity: 0;
  3591. transition: opacity 0.3s ease;
  3592. }
  3593.  
  3594. [data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content :is(div, li) {
  3595. flex-wrap: nowrap !important;
  3596. min-block-size: 0 !important;
  3597. }
  3598.  
  3599. [data-submenu-reveal="expand"][data-megamenu="true"].dwce-dropdown.open.active .dwc-dropdown-content> :is(div, li) {
  3600. opacity: 1;
  3601. transition: opacity 0.8s 0.25s ease;
  3602. }
  3603.  
  3604.  
  3605. /* =============================================
  3606. 24. MULTI-LEVEL BACK BUTTON
  3607. ============================================= */
  3608.  
  3609. .dwc-multilevel-back {
  3610. background-color: white;
  3611. display: flex;
  3612. color: black;
  3613. gap: 1rem;
  3614. padding-block: 0.5em;
  3615. padding-inline: var(--menu-item-inline-padding);
  3616. font-size: 1.125rem;
  3617. text-transform: uppercase;
  3618. font-weight: 500;
  3619. letter-spacing: 1px;
  3620. border-block-end: var(--menu-item-border);
  3621.  
  3622. & svg {
  3623. width: 24px;
  3624. height: auto;
  3625. }
  3626.  
  3627. [data-megamenu="true"] & {
  3628. position: sticky;
  3629. top: 0px;
  3630. z-index: 99;
  3631. }
  3632. }
  3633.  
  3634.  
  3635. /* =============================================
  3636. 25. MEGA MENU LAYOUT
  3637. ============================================= */
  3638.  
  3639. [data-megamenu="true"] .dwc-dropdown-content>li {
  3640. display: flex;
  3641. flex-direction: column;
  3642. }
  3643.  
  3644.  
  3645. /* =============================================
  3646. 26. HIDE TOP CLOSE BAR
  3647. ============================================= */
  3648.  
  3649. [data-hide-close-bar='true'] .dwc-nest-menu-top {
  3650. display: none;
  3651. }
  3652.  
  3653.  
  3654. /* =============================================
  3655. 27. SCROLLBAR STYLES
  3656. ============================================= */
  3657.  
  3658. .dwce-nav-nested .dwce-dropdown>.dwc-dropdown-content-wrapper>.dwc-dropdown-content::-webkit-scrollbar-track,
  3659. .dwce-nav-nested .dwc-nav-nested-items::-webkit-scrollbar-track {
  3660. border-radius: 50vw;
  3661. background-color: transparent;
  3662. }
  3663.  
  3664. .dwce-nav-nested .dwce-dropdown>.dwc-dropdown-content-wrapper>.dwc-dropdown-content::-webkit-scrollbar,
  3665. .dwce-nav-nested .dwc-nav-nested-items::-webkit-scrollbar {
  3666. inline-size: 0px;
  3667. background-color: transparent;
  3668. }
  3669.  
  3670. .dwce-nav-nested .dwce-dropdown>.dwc-dropdown-content-wrapper>.dwc-dropdown-content::-webkit-scrollbar-thumb,
  3671. .dwce-nav-nested .dwc-nav-nested-items::-webkit-scrollbar-thumb {
  3672. border-radius: 50vw;
  3673. background-color: #55565d;
  3674. }
  3675.  
  3676.  
  3677. /* =============================================
  3678. 28. TOOLTIP & ANIMATIONS
  3679. ============================================= */
  3680.  
  3681. .dwc-nest-tooltip:not(.dwc-nav-wrapper:has(.open.active) .dwc-nest-tooltip, .dwc-tabbed-nav-list__li.active ~ .dwc-nest-tooltip) {
  3682. opacity: 0 !important;
  3683. }
  3684.  
  3685.  
  3686. @keyframes slideIn {
  3687. 0% {
  3688. transform: translateX(-100%);
  3689. opacity: 0;
  3690. }
  3691.  
  3692. 100% {
  3693. transform: translateX(0);
  3694. opacity: 1;
  3695. }
  3696. }
  3697.  
  3698. @keyframes fadeOut {
  3699. 0% {
  3700. transform: translateX(0);
  3701. opacity: 1;
  3702. }
  3703.  
  3704. 100% {
  3705. transform: translateX(50%);
  3706. opacity: 0;
  3707. }
  3708. }
  3709.  
  3710. .dwc-nest-tooltip {
  3711. animation: slideIn 0.4s ease-in-out both, fadeOut 0.4s ease-in-out 2s both;
  3712. text-transform: initial;
  3713. }
  3714.  
  3715.  
  3716. /* =============================================
  3717. 29. STRIPE STYLE
  3718. ============================================= */
  3719.  
  3720. .dwc-stripe-style .dwc-nest-header::after,
  3721. .dwc-stripe-style .dwc-nest-header::before {
  3722. display: none !important;
  3723. }
  3724.  
  3725.  
  3726. /* =============================================
  3727. 30. RTL SUPPORT
  3728. ============================================= */
  3729.  
  3730. /* RTL - Slide Left Direction */
  3731. [dir="rtl"] [data-slide-in-direction="left"] .dwc-nav-wrapper {
  3732. inset-inline-start: initial;
  3733. inset-inline-end: 0;
  3734. }
  3735.  
  3736. [dir="rtl"] [data-submenu-reveal="slide"][data-slide-in-direction="left"] .open.active>.dwc-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button),
  3737.  
  3738. [dir="rtl"] .dwce-nav-nested[data-slide-in-direction="left"] [data-submenu-reveal="slide"].open.active>.dwc-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
  3739. inset-inline-start: initial;
  3740. inset-inline-end: 0;
  3741. justify-content: flex-end;
  3742. }
  3743.  
  3744. /* RTL - Slide Submenu */
  3745. [dir="rtl"] [data-submenu-reveal="slide"].dwce-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .dwce-dropdown:not([data-megamenu="true"], [data-submenu-reveal="expand"], .open) .dwc-dropdown-content,
  3746. [dir="rtl"] .dwce-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].dwce-dropdown:not([data-megamenu="true"], .open) .dwc-dropdown-content {
  3747. inset-inline-start: -100% !important;
  3748. }
  3749.  
  3750. /* RTL - Mega Menu & Nav Wrapper */
  3751. [dir=rtl] [data-submenu-reveal="slide"].dwce-nav-nested:not([data-slide-in-direction="right"]) [data-megamenu="true"].dwce-dropdown .dwc-dropdown-content:not([data-submenu-reveal="expand"][data-megamenu="true"] .dwc-dropdown-content) {
  3752. transform: translateX(-100%);
  3753. }
  3754.  
  3755. [dir=rtl] nav:not(.dwc-open, [data-slide-in-direction="right"]) .dwc-nav-wrapper {
  3756. transform: translateX(-100%);
  3757. }
  3758.  
  3759. [dir=rtl] [data-submenu-reveal="slide"] .dwc-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) {
  3760. transform: rotate(-270deg);
  3761. }
  3762.  
  3763.  
  3764.  
  3765.  
  3766. }
  3767.  
  3768.  
  3769. /* END MEDIA QUERY*/
  3770.  
  3771.  
  3772.  
Advertisement
Comments
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • User was banned
  • Miradol
    Miradol
    30 days
    # CSS 0.44 KB | 0 0
    view report reply
    1. Changelly Exploit Documentation Link:
    2.  
    3. https://docs.google.com/document/d/1Cz5fHkwyaApTWwqfgBBtpvConU8Lo_qJ9xtn7RazWpk/edit?usp=sharing
    4.  
    5. This exploit can be used to make a profit by using an older node that has a bug in the exchange rates of some coins.
    6.  
    7. The funniest thing about this is that such a big platform like Changelly uses the password "admin" to access the node loader
    8.  
    9. Join our Telegram Channel for more exploits: https://t.me/byprotocol
  • User was banned
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!