.elementor-kit-7209{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-8246f6e:#FFD300;--e-global-color-4557927:#FFFBE6;--e-global-color-de97f71:#F8C64F;--e-global-color-7b46298:#FFED99;--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:500;font-family:"Poppins", Sans-serif;font-size:18px;font-weight:400;line-height:25px;}.elementor-kit-7209 button,.elementor-kit-7209 input[type="button"],.elementor-kit-7209 input[type="submit"],.elementor-kit-7209 .elementor-button{background-color:#FFD300;font-family:"Poppins", Sans-serif;font-size:20px;font-weight:500;text-transform:capitalize;line-height:25px;color:#000000;}.elementor-kit-7209 button:hover,.elementor-kit-7209 button:focus,.elementor-kit-7209 input[type="button"]:hover,.elementor-kit-7209 input[type="button"]:focus,.elementor-kit-7209 input[type="submit"]:hover,.elementor-kit-7209 input[type="submit"]:focus,.elementor-kit-7209 .elementor-button:hover,.elementor-kit-7209 .elementor-button:focus{background-color:#FFF6CC;color:#000000;}.elementor-kit-7209 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7209 h1{font-family:"Poppins", Sans-serif;line-height:60px;}.elementor-kit-7209 h2{font-family:"Poppins", Sans-serif;font-size:40px;font-weight:600;}.elementor-kit-7209 h3{font-family:"Poppins", Sans-serif;font-weight:500;}.elementor-kit-7209 h4{font-family:"Poppins", Sans-serif;}.elementor-kit-7209 h5{font-family:"Poppins", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7209{font-size:14px;line-height:22px;}.elementor-kit-7209 h1{line-height:16px;}.elementor-kit-7209 h2{font-size:25px;line-height:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================== STAR CLOUD HEADER FINAL COMPLETE DESKTOP + MOBILE CSS ========================================================== */ /* ========================================================== 1. MAIN HEADER ========================================================== */ .sc-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; background: transparent !important; border: 0 !important; box-shadow: none; transition: background 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* ========================================================== 2. HEADER INNER ========================================================== */ .sc-header-inner { width: 100%; max-width: 1540px; min-height: 90px; margin: 0 auto; padding: 0 165px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; transition: min-height 0.35s ease, padding 0.35s ease; } /* ========================================================== 3. LOGO WRAPPER ========================================================== */ .sc-logo-wrapper { position: relative; width: 165px !important; min-width: 165px; height: 60px; flex: 0 0 165px; display: flex; align-items: center; justify-content: flex-start; } /* ========================================================== 4. LOGOS ========================================================== */ .sc-logo-light, .sc-logo-dark { width: 145px !important; max-width: 145px; margin: 0 !important; } .sc-logo-light img, .sc-logo-dark img { display: block; width: 145px !important; max-width: 145px; height: auto; object-fit: contain; } /* Normal state */ .sc-header .sc-logo-light { display: block !important; } .sc-header .sc-logo-dark { display: none !important; } /* ========================================================== 5. DESKTOP MENU ========================================================== */ .sc-menu { flex: 1 1 auto; width: auto !important; display: flex; align-items: center; } .sc-menu .elementor-nav-menu--main .elementor-nav-menu { display: flex; align-items: center; } .sc-header .sc-menu .elementor-nav-menu--main .elementor-item { color: #ffffff !important; font-size: 16px; font-weight: 500; line-height: 1; padding-top: 12px !important; padding-bottom: 12px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; transition: color 0.25s ease, opacity 0.25s ease; } /* Remove active page box */ .sc-menu .elementor-nav-menu--main .elementor-item-active, .sc-menu .elementor-nav-menu--main .current-menu-item > a, .sc-menu .elementor-nav-menu--main .current_page_item > a { background: transparent !important; } /* Remove Elementor hover lines */ .sc-menu .elementor-nav-menu--main .elementor-item::before, .sc-menu .elementor-nav-menu--main .elementor-item::after { display: none !important; } /* Normal desktop hover */ .sc-header:not(.elementor-sticky--effects) .sc-menu .elementor-nav-menu--main .elementor-item:hover { color: #ffffff !important; opacity: 0.72; } /* ========================================================== 6. RIGHT ACTIONS ========================================================== */ .sc-actions { width: auto !important; flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 18px; } /* ========================================================== 7. ACCOUNT BUTTON ========================================================== */ .sc-account { width: auto !important; flex: 0 0 auto; } .sc-account .elementor-button { min-height: 44px; padding: 0 20px !important; display: inline-flex; align-items: center; justify-content: center; background: #ffd302 !important; color: #111111 !important; border: 1px solid #ffd302 !important; border-radius: 10px !important; font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; box-shadow: 0 5px 15px rgba(0,0,0,0.14); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .sc-account .elementor-button:hover { background: #FFD000 !important; color: #111111 !important; border-color: #FFD000 !important; transform: translateY(-1px); } /* ========================================================== 8. CART ========================================================== */ .sc-cart { position: relative; width: 42px !important; min-width: 42px; height: 44px; flex: 0 0 42px; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .sc-cart .elementor-widget-container, .sc-cart .elementor-shortcode { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .sc-cart .elementor-shortcode > *, .sc-cart a { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .sc-header .sc-cart svg { display: block !important; width: 30px !important; height: 30px !important; margin: 0 !important; color: #ffffff !important; fill: #ffffff !important; } .sc-header .sc-cart i { color: #ffffff !important; font-size: 28px; line-height: 1 !important; } /* ========================================================== 9. DESKTOP STICKY GLASS HEADER ========================================================== */ .sc-header.elementor-sticky--effects { position: fixed !important; top: 0; left: 0; width: 100%; background: linear-gradient( 90deg, rgba(228,240,248,0.48) 0%, rgba(245,249,252,0.36) 50%, rgba(228,240,248,0.48) 100% ) !important; -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); border-bottom: 1px solid rgba(255,255,255,0.52) !important; box-shadow: 0 8px 32px rgba(17,24,39,0.07); z-index: 9999; } .sc-header.elementor-sticky--effects .sc-header-inner { min-height: 74px; } /* Sticky logo */ .sc-header.elementor-sticky--effects .sc-logo-light { display: none !important; } .sc-header.elementor-sticky--effects .sc-logo-dark { display: block !important; } /* Sticky menu */ .sc-header.elementor-sticky--effects .sc-menu .elementor-nav-menu--main .elementor-item { color: #111111 !important; } .sc-header.elementor-sticky--effects .sc-menu .elementor-nav-menu--main .elementor-item:hover { color: #D6A800 !important; opacity: 1; } /* Sticky cart */ .sc-header.elementor-sticky--effects .sc-cart svg { color: #111111 !important; fill: #111111 !important; } .sc-header.elementor-sticky--effects .sc-cart i { color: #111111 !important; } /* ========================================================== 10. WORDPRESS ADMIN BAR ========================================================== */ body.admin-bar .sc-header.elementor-sticky--effects { top: 32px; } /* ========================================================== 11. LARGE DESKTOP ========================================================== */ @media (min-width: 1600px) { .sc-header-inner { max-width: 1600px; } } /* ========================================================== 12. SMALLER DESKTOP / TABLET LANDSCAPE ========================================================== */ @media (max-width: 1300px) and (min-width: 768px) { .sc-header-inner { padding-left: 22px; padding-right: 22px; } .sc-menu { margin-left: 25px; } .sc-menu .elementor-nav-menu--main .elementor-nav-menu { gap: 24px; } } /* ========================================================== ========================================================== MOBILE ========================================================== ========================================================== */ @media (max-width: 767px) { /* ====================================================== 13. MOBILE HEADER NOT STICKY ====================================================== */ .sc-header, .sc-header.elementor-sticky--effects, .sc-header.elementor-sticky--active { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; transform: none !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; z-index: 9999 !important; } /* ====================================================== 14. MOBILE INNER HEADER ====================================================== */ .sc-header-inner { position: relative !important; width: 100% !important; max-width: 100% !important; min-height: 78px !important; height: 78px !important; margin: 0 !important; padding: 0 16px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 9px !important; } .sc-header.elementor-sticky--effects .sc-header-inner { min-height: 78px !important; height: 78px !important; } /* ====================================================== 15. MOBILE LOGO ====================================================== */ .sc-logo-wrapper { order: 1; width: 128px !important; min-width: 128px !important; max-width: 128px !important; height: 52px !important; flex: 0 0 128px !important; margin: 0 !important; } .sc-header .sc-logo-light, .sc-header.elementor-sticky--effects .sc-logo-light { display: block !important; width: 128px !important; opacity: 1 !important; visibility: visible !important; } .sc-header .sc-logo-dark, .sc-header.elementor-sticky--effects .sc-logo-dark { display: none !important; } .sc-logo-light img { width: 128px !important; max-width: 128px !important; height: auto !important; } /* ====================================================== 16. MOBILE ACTIONS ====================================================== */ .sc-actions { order: 2; width: auto !important; flex: 0 0 auto !important; margin-left: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } /* ====================================================== 17. MOBILE ACCOUNT ====================================================== */ .sc-account { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; } .sc-account .elementor-button { width: auto !important; min-width: 92px !important; height: 44px !important; min-height: 44px !important; padding: 0 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #FFD000 !important; border: 1px solid #FFD000 !important; border-radius: 11px !important; color: #111111 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; box-shadow: 0 5px 15px rgba(0,0,0,0.13) !important; } /* Replace My Account with Account */ .sc-account .elementor-button-text { font-size: 0 !important; } .sc-account .elementor-button-text::after { content: "Account"; font-size: 13px !important; font-weight: 600 !important; color: #111111 !important; } /* ====================================================== 18. MOBILE CART ====================================================== */ .sc-cart { width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 44px !important; flex: 0 0 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .sc-cart .elementor-widget-container, .sc-cart .elementor-shortcode { width: 42px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; } .sc-cart .elementor-shortcode > *, .sc-cart a { width: 42px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .sc-header .sc-cart svg, .sc-header.elementor-sticky--effects .sc-cart svg { display: block !important; width: 28px !important; height: 28px !important; margin: auto !important; color: #ffffff !important; fill: #ffffff !important; } .sc-header .sc-cart i, .sc-header.elementor-sticky--effects .sc-cart i { color: #ffffff !important; font-size: 27px !important; line-height: 1 !important; margin: 0 !important; } /* ====================================================== 19. MOBILE MENU WIDGET ====================================================== */ .sc-menu { order: 3; position: static !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; flex: 0 0 44px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Hide desktop navigation */ .sc-menu .elementor-nav-menu--main { display: none !important; } /* ====================================================== 20. HAMBURGER BUTTON ====================================================== */ .sc-menu .elementor-menu-toggle { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #111111 !important; color: #FFD000 !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 50% !important; box-shadow: 0 5px 15px rgba(0,0,0,0.14) !important; line-height: 1 !important; } .sc-menu .elementor-menu-toggle svg { width: 22px !important; height: 22px !important; fill: #FFD000 !important; } .sc-menu .elementor-menu-toggle i { color: #FFD000 !important; font-size: 22px !important; } /* ====================================================== 21. MOST IMPORTANT FIX DROPDOWN HIDDEN BY DEFAULT ====================================================== */ .sc-menu .elementor-nav-menu--dropdown { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: fixed !important; top: 86px !important; left: 16px !important; right: 16px !important; width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important; height: auto !important; margin: 0 !important; padding: 10px !important; box-sizing: border-box !important; background: rgba(248,252,255,0.94) !important; -webkit-backdrop-filter: blur(22px) saturate(150%) !important; backdrop-filter: blur(22px) saturate(150%) !important; border: 1px solid rgba(255,255,255,0.75) !important; border-radius: 18px !important; box-shadow: 0 18px 45px rgba(15,23,42,0.20) !important; overflow: hidden !important; z-index: 999999 !important; } /* ====================================================== 22. SHOW MENU ONLY AFTER HAMBURGER IS ACTIVE Elementor active class ====================================================== */ .sc-menu:has( .elementor-menu-toggle.elementor-active ) .elementor-nav-menu--dropdown { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Also support Elementor aria-expanded state */ .sc-menu:has( .elementor-menu-toggle[aria-expanded="true"] ) .elementor-nav-menu--dropdown { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Some Elementor versions put active state on dropdown itself */ .sc-menu .elementor-nav-menu--dropdown.elementor-active { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* ====================================================== 23. MOBILE DROPDOWN INNER UL ====================================================== */ .sc-menu .elementor-nav-menu--dropdown > ul, .sc-menu .elementor-nav-menu--dropdown .elementor-nav-menu { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; background: transparent !important; } /* ====================================================== 24. MOBILE DROPDOWN ITEMS ====================================================== */ .sc-menu .elementor-nav-menu--dropdown li { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } .sc-menu .elementor-nav-menu--dropdown a, .sc-menu .elementor-nav-menu--dropdown .elementor-item { width: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 0 15px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; color: #111111 !important; background: transparent !important; border: 0 !important; border-radius: 11px !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.2 !important; text-align: left !important; opacity: 1 !important; } /* Current page / hover */ .sc-menu .elementor-nav-menu--dropdown a:hover, .sc-menu .elementor-nav-menu--dropdown .current-menu-item > a, .sc-menu .elementor-nav-menu--dropdown .elementor-item-active { color: #111111 !important; background: rgba(255,208,0,0.15) !important; } /* Remove desktop spacing */ .sc-menu .elementor-nav-menu { gap: 0 !important; } /* Prevent accidental horizontal scrolling */ html, body { overflow-x: hidden !important; } } /* ========================================================== 25. VERY SMALL PHONES ========================================================== */ @media (max-width: 390px) { .sc-header-inner { padding-left: 12px !important; padding-right: 12px !important; gap: 6px !important; } .sc-logo-wrapper { width: 112px !important; min-width: 112px !important; max-width: 112px !important; flex-basis: 112px !important; } .sc-header .sc-logo-light { width: 112px !important; } .sc-logo-light img { width: 112px !important; } .sc-account .elementor-button { min-width: 80px !important; padding: 0 10px !important; } .sc-account .elementor-button-text::after { font-size: 12px !important; } .sc-cart { width: 34px !important; min-width: 34px !important; max-width: 34px !important; flex-basis: 34px !important; } .sc-cart .elementor-widget-container, .sc-cart .elementor-shortcode, .sc-cart .elementor-shortcode > *, .sc-cart a { width: 34px !important; } .sc-header .sc-cart svg { width: 25px !important; height: 25px !important; } .sc-menu { width: 42px !important; min-width: 42px !important; max-width: 42px !important; flex-basis: 42px !important; } .sc-menu .elementor-menu-toggle { width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; } .sc-menu .elementor-nav-menu--dropdown { left: 12px !important; right: 12px !important; width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } } /* ========================================================== STAR CLOUD HEADER NON-HOME PAGES = DARK VERSION BY DEFAULT Homepage remains exactly as it is now: - transparent header - light logo - white menu/cart - dark version after scroll All other pages: - dark logo immediately - dark menu immediately - dark cart immediately ========================================================== */ /* ========================================================== 1. NON-HOME PAGE LOGO ========================================================== */ /* Hide light/white logo */ body:not(.home) .sc-header .sc-logo-light { display: none !important; } /* Show dark logo */ body:not(.home) .sc-header .sc-logo-dark { display: block !important; opacity: 1 !important; visibility: visible !important; } /* ========================================================== 2. NON-HOME PAGE MENU ========================================================== */ body:not(.home) .sc-header .sc-menu .elementor-nav-menu--main .elementor-item, body:not(.home) .sc-header .sc-menu a { color: #111111 !important; } /* Menu hover */ body:not(.home) .sc-header .sc-menu a:hover { color: #D6A800 !important; opacity: 1 !important; } /* ========================================================== 3. NON-HOME PAGE CART ========================================================== */ /* SVG cart */ body:not(.home) .sc-header .sc-cart svg { color: #111111 !important; fill: #111111 !important; } /* SVG paths */ body:not(.home) .sc-header .sc-cart svg path { fill: #111111 !important; stroke: #111111 !important; } /* Icon-font cart */ body:not(.home) .sc-header .sc-cart i { color: #111111 !important; } /* ========================================================== 4. NON-HOME HEADER BACKGROUND Keeps it clean over white pages. Change transparent to white if you want a solid header. ========================================================== */ body:not(.home) .sc-header:not(.elementor-sticky--effects) { background: transparent !important; } /* ========================================================== 5. STICKY STATE ON NON-HOME PAGES Keep your existing glassmorphism when scrolling. ========================================================== */ body:not(.home) .sc-header.elementor-sticky--effects .sc-logo-light { display: none !important; } body:not(.home) .sc-header.elementor-sticky--effects .sc-logo-dark { display: block !important; } body:not(.home) .sc-header.elementor-sticky--effects .sc-menu .elementor-item, body:not(.home) .sc-header.elementor-sticky--effects .sc-menu a { color: #111111 !important; } body:not(.home) .sc-header.elementor-sticky--effects .sc-cart svg { color: #111111 !important; fill: #111111 !important; } body:not(.home) .sc-header.elementor-sticky--effects .sc-cart i { color: #111111 !important; } /* ========================================================== 6. MOBILE - NON-HOME PAGES Dark logo + dark cart on white pages Homepage mobile remains unchanged. ========================================================== */ @media (max-width: 767px) { /* Hide white logo */ body:not(.home) .sc-header .sc-logo-light { display: none !important; } /* Show dark logo */ body:not(.home) .sc-header .sc-logo-dark { display: block !important; opacity: 1 !important; visibility: visible !important; } /* Make dark logo responsive */ body:not(.home) .sc-logo-dark img { width: 128px !important; max-width: 128px !important; height: auto !important; } /* Black cart */ body:not(.home) .sc-header .sc-cart svg { color: #111111 !important; fill: #111111 !important; } body:not(.home) .sc-header .sc-cart svg path { fill: #111111 !important; stroke: #111111 !important; } body:not(.home) .sc-header .sc-cart i { color: #111111 !important; } } /* ========================================================== 7. SMALL MOBILE DARK LOGO ========================================================== */ @media (max-width: 390px) { body:not(.home) .sc-logo-dark img { width: 112px !important; max-width: 112px !important; } }/* End custom CSS */