role; its build settings zero the padding, so re-apply the section metrics here. */ body.vk .e-con.vk-faq { padding: clamp(24px, 2.8vw, 40px) var(--vk-pad); max-width: var(--vk-max); margin: 0 auto; } body.vk .vk-faq .elementor-accordion { display: flex; flex-direction: column; gap: 14px; border: 0; } body.vk .vk-faq .elementor-accordion-item { background: var(--vk-bg-card); border: 1px solid var(--vk-line) !important; border-radius: var(--vk-r-md); overflow: hidden; box-shadow: var(--vk-shadow-card); transition: border-color .3s ease, box-shadow .3s ease; } body.vk .vk-faq .elementor-accordion-item:hover { border-color: rgba(247, 181, 0, .55) !important; box-shadow: 0 12px 30px rgba(26, 24, 19, .10); } body.vk .vk-faq .elementor-tab-title { display: flex; align-items: center; gap: 14px; padding: 16px 18px !important; border: 0 !important; cursor: pointer; font-family: var(--vk-font-bn); font-size: 16px; font-weight: 700; color: #1A1813 !important; } body.vk .vk-faq .elementor-tab-title::before { content: 'Q'; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(200, 134, 11, .12); color: #8A5A0A; font-family: var(--vk-font-en); font-weight: 800; font-size: 13px; } body.vk .vk-faq .elementor-tab-title.elementor-active::before { background: #F7B500; color: #1A1813; } body.vk .vk-faq .elementor-accordion-title { flex: 1; color: inherit !important; font-size: 16px; line-height: 1.5; } body.vk .vk-faq .elementor-accordion-icon { order: 3; margin-left: auto; float: none !important; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--vk-line-2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #8A5A0A; font-size: 12px; transition: background .3s ease, color .3s ease, border-color .3s ease; } body.vk .vk-faq .elementor-accordion-icon svg { width: 12px; height: 12px; fill: currentColor; } body.vk .vk-faq .elementor-tab-title.elementor-active .elementor-accordion-icon { background: #1A1813; border-color: #1A1813; color: #F7B500; } body.vk .vk-faq .elementor-tab-content { padding: 0 18px 16px 60px !important; border: 0 !important; color: #2A2410; line-height: 1.75; font-size: 15px; } body.vk .vk-faq .elementor-tab-content p { margin: 0 0 8px; color: #2A2410; } @media (max-width: 600px) { body.vk .vk-faq .elementor-tab-content { padding-left: 18px !important; } } /* ------------------------------------------------------------------ 3. Long-form SEO block (the reference's .extra-part, rendered after the final CTA). Styled here because the reference relied on theme block styles that this site doesn't load. ------------------------------------------------------------------ */ body.vk .vk-extra { max-width: var(--vk-max); margin: 0 auto; padding: clamp(36px, 4.5vw, 64px) var(--vk-pad); } body.vk .vk-extra h3 { font-family: var(--vk-font-bn); font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35; margin: 30px 0 12px; color: var(--vk-text); } body.vk .vk-extra h3:first-child { margin-top: 0; } body.vk .vk-extra p { color: var(--vk-text-mid); line-height: 1.85; margin: 0 0 14px; } body.vk .vk-extra a { color: var(--vk-gold); text-decoration: underline; text-underline-offset: 3px; } body.vk .vk-extra .wp-block-media-text { display: grid; grid-template-columns: 1fr 280px; gap: 26px; align-items: center; margin: 18px 0; } body.vk .vk-extra .wp-block-media-text__media img { border-radius: var(--vk-r-md); box-shadow: var(--vk-shadow-card); width: 100%; height: auto; } @media (max-width: 767px) { body.vk .vk-extra .wp-block-media-text { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ 3b. Nav dropdown + mobile drawer MECHANICS. The reference site loaded these from stylesheets the page-save didn't capture (the lms plugin's own CSS): without them the desktop subs render permanently open and the drawer subs never collapse. Colours stay with wickets-home.css. ------------------------------------------------------------------ */ body.vk .vk-nav__item { position: relative; } body.vk .vk-nav .lms-nav__sub { position: absolute; top: 100%; left: 0; z-index: 120; min-width: 210px; margin: 0; padding: 8px; list-style: none; background: #FFFFFF; border: 1px solid var(--vk-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(30, 27, 20, .16); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; pointer-events: none; } body.vk .vk-nav .vk-nav__item:hover > .lms-nav__sub, body.vk .vk-nav .vk-nav__item:focus-within > .lms-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .25s ease, transform .25s ease, visibility 0s; pointer-events: auto; } body.vk .vk-nav .lms-nav__sub-item { list-style: none; margin: 0; } body.vk .vk-nav .lms-nav__sub-item > a { display: block; padding: 10px 14px; border-radius: 9px; white-space: nowrap; font-weight: 600; font-size: 14.5px; } /* Drawer subs — collapsed until the accordion JS sets .is-open on the parent. */ body.vk .vk-mobile__inner ul .vk-mobile__item > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.vk .vk-mobile__inner .lms-mobile__label { flex: 1; min-width: 0; } body.vk .vk-mobile__inner .lms-mobile__caret { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(200, 134, 11, .14); color: #8A5A0A; transition: transform .25s ease, background .2s; flex-shrink: 0; } body.vk .vk-mobile__inner .vk-mobile__item.has-children.is-open > a .lms-mobile__caret { transform: rotate(180deg); background: rgba(200, 134, 11, .28); } body.vk .vk-mobile__inner .lms-mobile__sub { list-style: none; margin: 0 0 0 14px !important; padding: 0 0 0 14px !important; display: flex; flex-direction: column; gap: 2px; max-height: 0; overflow: hidden; opacity: .35; border-left: 1px solid rgba(200, 134, 11, .35); transition: max-height .35s ease, opacity .25s ease, margin .3s ease, padding .3s ease; } body.vk .vk-mobile__inner .vk-mobile__item.has-children.is-open > .lms-mobile__sub, body.vk .vk-mobile__inner .lms-mobile__sub-item.has-children.is-open > .lms-mobile__sub { max-height: 1200px; opacity: 1; margin: 8px 0 10px 14px !important; padding: 4px 0 4px 14px !important; } body.vk .vk-mobile__inner .lms-mobile__sub-item { list-style: none; margin: 0; padding: 0; } body.vk .vk-mobile__inner .lms-mobile__sub-item > a { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; transition: background .2s, color .2s; } body.vk .vk-mobile__inner .lms-mobile__sub-item > a::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgba(200, 134, 11, .55); flex-shrink: 0; transition: background .2s, transform .2s; } body.vk .vk-mobile__inner .lms-mobile__sub-item > a:hover::before { background: #C8860B; transform: scale(1.4); } /* ------------------------------------------------------------------ 4. Floating WhatsApp call button (ported from the reference theme's frontend.css — wickets-home.css does not carry these rules). ------------------------------------------------------------------ */ .lms-wa-float { position: fixed; left: 22px; bottom: 22px; width: 60px; height: 60px; z-index: 9998; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); } .lms-wa-float:hover, .lms-wa-float:focus-visible { transform: scale(1.08); outline: none; } .lms-wa-float:focus-visible { box-shadow: 0 0 0 3px rgba(255, 199, 44, .55); border-radius: 50%; } .lms-wa-float__core { position: relative; z-index: 3; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 25%, #4ad365 0%, #25d366 45%, #128c7e 100%); color: #fff; border-radius: 50%; border: none; box-shadow: 0 0 0 2px #FFC72C, 0 0 0 3px rgba(254, 243, 199, .35), 0 8px 22px -4px rgba(18, 140, 126, .55), 0 2px 6px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25); animation: lms-wa-bob 3.4s ease-in-out infinite; } .lms-wa-float__core svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); } .lms-wa-float__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .55); z-index: 1; pointer-events: none; opacity: 0; transform: scale(.85); animation: lms-wa-pulse 2.6s cubic-bezier(.22, 1, .36, 1) infinite; } .lms-wa-float__ring--2 { animation-delay: 1.3s; } .lms-wa-float__dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #FFE07A 0%, #FFC72C 60%, #9A6B0C 100%); border: 2px solid #FFF8E6; z-index: 4; animation: lms-wa-dot 1.8s ease-in-out infinite; } .lms-wa-float__tip { position: absolute; left: 72px; top: 50%; transform: translateY(-50%) translateX(-6px); background: linear-gradient(135deg, #FFF6D6 0%, #FFE7A8 100%); color: #14182F; font-family: var(--vk-font-bn, 'Noto Sans Bengali', system-ui, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: .2px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 199, 44, .55); box-shadow: 0 6px 18px -4px rgba(20, 24, 47, .35), inset 0 1px 0 rgba(255, 255, 255, .8); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.22, 1, .36, 1); z-index: 5; } .lms-wa-float__tip::before { content: ''; position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; background: inherit; border-left: 1px solid rgba(255, 199, 44, .55); border-bottom: 1px solid rgba(255, 199, 44, .55); transform: translateY(-50%) rotate(45deg); z-index: -1; } .lms-wa-float:hover .lms-wa-float__tip, .lms-wa-float:focus-visible .lms-wa-float__tip { opacity: 1; transform: translateY(-50%) translateX(0); } @keyframes lms-wa-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes lms-wa-pulse { 0% { opacity: 0; transform: scale(.85); border-width: 2.5px; } 20% { opacity: .55; } 100% { opacity: 0; transform: scale(1.85); border-width: 1px; } } @keyframes lms-wa-dot { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(253, 230, 138, .6); } 50% { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(253, 230, 138, 0); } } @media (max-width: 600px) { .lms-wa-float { left: 16px; bottom: 16px; width: 54px; height: 54px; } .lms-wa-float__core { width: 54px; height: 54px; } .lms-wa-float__core svg { width: 24px; height: 24px; } .lms-wa-float__tip { display: none; } } @media (prefers-reduced-motion: reduce) { .lms-wa-float__core, .lms-wa-float__ring, .lms-wa-float__dot { animation: none !important; } .lms-wa-float__ring { display: none; } }