/* * ========================================================= * SKYTAMIL.NET * AUTHORITATIVE MOBILE MENU - FINAL LARGE VERSION * * MOBILE ONLY * * - keep top multicolor/star separator * - remove old bottom multicolor/star separator * - large 2-column menu * - larger logo area * - proper text alignment * - keep new gray + TV separator below * - desktop unchanged * ========================================================= */ @media only screen and (max-width: 768px) { /* ===================================================== REMOVE OLD LEGACY SEPARATOR SOURCES We recreate ONLY the top one below. ===================================================== */ html body #main-navigation-wrap::before, html body #main-navigation-wrap::after, html body #main-navigation::before, html body #main-navigation::after, html body .primary-navigation-wrap::before, html body .primary-navigation-wrap::after, html body #main-navigation .main-navigation-menu::before, html body #main-navigation .main-navigation-menu::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; background-image: none !important; border: 0 !important; border-image: none !important; box-shadow: none !important; } /* ===================================================== NAVIGATION AREA ===================================================== */ html body #main-navigation-wrap, html body #main-navigation-wrap.primary-navigation-wrap { position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 0 !important; box-shadow: none !important; } html body #main-navigation { position: relative !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; /* * Room for the top SkyTamil separator. */ padding: 18px 16px 0 !important; background: #fff !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== RECREATE THE TOP MULTICOLOR / STAR SEPARATOR Only ONE separator. ===================================================== */ html body #main-navigation > ul.main-navigation-menu { position: relative !important; } html body #main-navigation > ul.main-navigation-menu::before { content: "✦" !important; display: flex !important; position: absolute !important; top: -18px !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 18px !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; color: #9b4dff !important; font-size: 18px !important; line-height: 18px !important; /* * Same SkyTamil multicolor appearance: * pink -> orange on left, * purple on right. */ background: linear-gradient( to right, #ff5b8a 0%, #ff3d75 28%, #ff7a21 48%, transparent 48%, transparent 52%, #8b42ff 52%, #a743ff 76%, #9148ef 100% ) center / 100% 3px no-repeat !important; text-shadow: 0 0 8px rgba(156, 77, 255, .7), 0 0 14px rgba(255, 80, 130, .35) !important; border: 0 !important; box-shadow: none !important; pointer-events: none !important; z-index: 3 !important; } /* ===================================================== TWO-COLUMN MENU GRID ===================================================== */ html body #main-navigation > ul.main-navigation-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 12px !important; row-gap: 12px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; visibility: visible !important; opacity: 1 !important; } html body #main-navigation > ul.main-navigation-menu > li { float: none !important; display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ===================================================== LARGE MENU CARDS ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sony > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; /* * Bigger than current version. */ height: 96px !important; min-height: 96px !important; max-height: 96px !important; margin: 0 !important; /* * Logo occupies first 78px. * Text begins safely after divider. */ padding: 8px 8px 8px 86px !important; color: #20252c !important; font-family: inherit !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.15 !important; text-align: left !important; text-indent: 0 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; transform: none !important; background: #fff !important; border-radius: 17px !important; box-shadow: 0 5px 16px rgba(20, 25, 35, .06) !important; } /* ===================================================== BIG LOGO TILE ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sony > a::before { content: "" !important; position: absolute !important; top: 50% !important; left: 10px !important; display: block !important; box-sizing: border-box !important; width: 66px !important; min-width: 66px !important; max-width: 66px !important; height: 70px !important; min-height: 70px !important; max-height: 70px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; background-color: #fff !important; background-repeat: no-repeat !important; background-position: center center !important; /* * Important: * leave breathing room around source artwork. * This keeps Vijay Tamil text inside its tile. */ background-size: 86% auto !important; border: 1px solid #e1e5e9 !important; border-radius: 13px !important; box-shadow: 0 3px 10px rgba(20,25,35,.07) !important; overflow: hidden !important; pointer-events: none !important; } /* Home can be slightly larger */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before { background-size: 78% auto !important; } /* Sun TV */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before { background-size: 86% auto !important; } /* Vijay needs a little more vertical breathing room */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before { background-size: 82% auto !important; } /* Zee Tamil is wider */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { background-size: 88% auto !important; } /* ===================================================== LOGO / TEXT VERTICAL DIVIDER ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sony > a::after { content: "" !important; position: absolute !important; top: 18px !important; bottom: 18px !important; left: 78px !important; display: block !important; width: 1px !important; height: auto !important; background: #d3d8de !important; border: 0 !important; transform: none !important; pointer-events: none !important; } /* ===================================================== CARD BORDER COLORS ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a { border: 1px solid #43a6ff !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a { border: 1px solid #ff8363 !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a { border: 1px solid #f6b33d !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { border: 1px solid #ff5d95 !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sony > a { border: 1px solid #766ed3 !important; } /* ===================================================== NEW LOWER TV SEPARATOR This is now the ONLY lower separator. ===================================================== */ html body .skytamil-mobile-menu-separator { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: 25px !important; margin: 22px 0 23px !important; padding: 0 16px !important; gap: 8px !important; background: #fff !important; border: 0 !important; box-shadow: none !important; z-index: 5 !important; } /* Gray long side lines */ html body .skytamil-mobile-menu-separator__line { display: block !important; flex: 1 1 auto !important; min-width: 18px !important; height: 1px !important; background: #c8ced5 !important; } /* Three small gray lines */ html body .skytamil-mobile-menu-separator__wing { display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 0 0 23px !important; width: 23px !important; height: 19px !important; gap: 3px !important; } html body .skytamil-mobile-menu-separator__wing i { display: block !important; height: 1.5px !important; background: #abb4bd !important; border-radius: 5px !important; } html body .skytamil-mobile-menu-separator__wing--left { align-items: flex-end !important; } html body .skytamil-mobile-menu-separator__wing--right { align-items: flex-start !important; } html body .skytamil-mobile-menu-separator__wing--left i:nth-child(1), html body .skytamil-mobile-menu-separator__wing--right i:nth-child(3) { width: 14px !important; } html body .skytamil-mobile-menu-separator__wing--left i:nth-child(2), html body .skytamil-mobile-menu-separator__wing--right i:nth-child(2) { width: 23px !important; } html body .skytamil-mobile-menu-separator__wing--left i:nth-child(3), html body .skytamil-mobile-menu-separator__wing--right i:nth-child(1) { width: 18px !important; } /* ===================================================== CSS DRAWN PINK TV ===================================================== */ html body .skytamil-mobile-menu-separator__tv { position: relative !important; display: block !important; flex: 0 0 22px !important; width: 22px !important; height: 22px !important; } html body .skytamil-mobile-menu-separator__screen { position: absolute !important; left: 3px !important; bottom: 1px !important; display: block !important; box-sizing: border-box !important; width: 16px !important; height: 13px !important; background: #fff !important; border: 2px solid #ff174c !important; border-radius: 3px !important; } html body .skytamil-mobile-menu-separator__antenna { position: absolute !important; top: 0 !important; left: 5px !important; display: block !important; width: 12px !important; height: 8px !important; } html body .skytamil-mobile-menu-separator__antenna::before, html body .skytamil-mobile-menu-separator__antenna::after { content: "" !important; position: absolute !important; top: 3px !important; display: block !important; width: 8px !important; height: 2px !important; background: #ff174c !important; border-radius: 3px !important; } html body .skytamil-mobile-menu-separator__antenna::before { left: -1px !important; transform: rotate(45deg) !important; transform-origin: right center !important; } html body .skytamil-mobile-menu-separator__antenna::after { right: -1px !important; transform: rotate(-45deg) !important; transform-origin: left center !important; } } /* ========================================================= SMALL PHONES Still two columns, but safely scaled. ========================================================= */ @media only screen and (max-width: 390px) { html body #main-navigation { padding-left: 10px !important; padding-right: 10px !important; } html body #main-navigation > ul.main-navigation-menu { column-gap: 8px !important; row-gap: 9px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sony > a { height: 88px !important; min-height: 88px !important; max-height: 88px !important; padding-left: 76px !important; padding-right: 5px !important; font-size: 13px !important; border-radius: 15px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sony > a::before { left: 8px !important; width: 58px !important; min-width: 58px !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sony > a::after { left: 68px !important; } } /* * Desktop intentionally has no rules in this file. */ /* ========================================================= SKYTAMIL MOBILE MENU - SEPARATOR CLEAN FINAL ========================================================= */ @media only screen and (max-width: 768px) { /* ===================================================== 1. REMOVE THE EXTRA TOP SEPARATOR WE CREATED Original SkyTamil top multicolor separator remains. ===================================================== */ html body #main-navigation > ul.main-navigation-menu::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== 2. LARGE MOBILE MENU CARDS ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { height: 104px !important; min-height: 104px !important; max-height: 104px !important; padding: 8px 8px 8px 94px !important; overflow: hidden !important; border-radius: 18px !important; } /* ===================================================== 3. BIGGER LOGO TILE Entire artwork remains inside card. ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { left: 10px !important; width: 72px !important; min-width: 72px !important; max-width: 72px !important; height: 82px !important; min-height: 82px !important; max-height: 82px !important; box-sizing: border-box !important; background-position: center center !important; background-repeat: no-repeat !important; border-radius: 14px !important; overflow: hidden !important; } /* HOME */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before { background-size: 72% auto !important; } /* SUN TV */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before { background-size: 78% auto !important; } /* VIJAY TV Smaller artwork so Tamil lettering never escapes tile. */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before { background-size: 72% auto !important; } /* ZEE TAMIL */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { background-size: 80% auto !important; } /* ===================================================== 4. MOVE VERTICAL DIVIDER AFTER BIGGER LOGO ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { left: 86px !important; top: 19px !important; bottom: 19px !important; width: 1px !important; height: auto !important; background: #d3d8de !important; } /* ===================================================== 5. TEXT ALIGNMENT ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { align-items: center !important; justify-content: flex-start !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; text-align: left !important; text-indent: 0 !important; white-space: nowrap !important; } /* ===================================================== 6. HIDE THE LEGACY BOTTOM MULTICOLOR / STAR STRIP The old decoration is still being painted between the nav and our new separator. This white mask sits directly above the new separator and covers ONLY that legacy area. ===================================================== */ html body .skytamil-mobile-menu-separator { position: relative !important; z-index: 20 !important; margin-top: 50px !important; background: #fff !important; isolation: isolate !important; } html body .skytamil-mobile-menu-separator::before { content: "" !important; display: block !important; position: absolute !important; left: -20px !important; right: -20px !important; top: -58px !important; width: calc(100% + 40px) !important; height: 58px !important; margin: 0 !important; background: #fff !important; border: 0 !important; box-shadow: none !important; z-index: 1 !important; pointer-events: none !important; } /* Keep real separator elements above white mask */ html body .skytamil-mobile-menu-separator__line, html body .skytamil-mobile-menu-separator__wing, html body .skytamil-mobile-menu-separator__tv { position: relative !important; z-index: 3 !important; } /* ===================================================== 7. REMOVE ANY LEGACY BOTTOM PSEUDO ELEMENTS WE KNOW ===================================================== */ html body #main-navigation-wrap::after, html body #main-navigation::after, html body #main-navigation > ul.main-navigation-menu::after { content: none !important; display: none !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media only screen and (max-width: 390px) { html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { height: 94px !important; min-height: 94px !important; max-height: 94px !important; padding-left: 84px !important; font-size: 13px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { left: 76px !important; } } /* ========================================================= END SKYTAMIL MOBILE MENU - SEPARATOR CLEAN FINAL ========================================================= */ /* ========================================================= SKYTAMIL MOBILE MENU EXACT TAMILTVSHOW-STYLE PROPORTIONS ========================================================= */ @media only screen and (max-width: 768px) { /* ----------------------------------------------------- NAV WRAPPER ----------------------------------------------------- */ html body #main-navigation-wrap.primary-navigation-wrap { position: relative !important; margin: 0 !important; padding: 0 !important; background-color: #fff !important; border: 0 !important; box-shadow: none !important; } html body #main-navigation { position: relative !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 18px 12px 0 !important; background-color: #fff !important; border: 0 !important; } /* ----------------------------------------------------- REMOVE OUR ACCIDENTAL EXTRA TOP SEPARATOR ----------------------------------------------------- */ html body #main-navigation > ul.main-navigation-menu::before { content: none !important; display: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } /* ----------------------------------------------------- TWO COLUMN GRID Same proportions as TamilTVShow ----------------------------------------------------- */ html body #main-navigation > ul.main-navigation-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 8px !important; row-gap: 8px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #fff !important; border: 0 !important; overflow: visible !important; } html body #main-navigation > ul.main-navigation-menu > li { float: none !important; display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- MENU CARD Match TamilTVShow compact card style ----------------------------------------------------- */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; margin: 0 !important; padding: 6px 8px 6px 66px !important; color: #252a31 !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.15 !important; text-align: left !important; text-indent: 0 !important; letter-spacing: 0 !important; white-space: nowrap !important; background: #fff !important; border-radius: 13px !important; overflow: hidden !important; box-shadow: 0 4px 12px rgba(20,25,35,.05) !important; } /* ----------------------------------------------------- LOGO TILE Same compact size as TamilTVShow ----------------------------------------------------- */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { content: "" !important; position: absolute !important; top: 50% !important; left: 7px !important; display: block !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; box-sizing: border-box !important; margin: 0 !important; transform: translateY(-50%) !important; background-color: #fff !important; background-repeat: no-repeat !important; background-position: center center !important; border: 1px solid #e2e6ea !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: 0 3px 9px rgba(20,25,35,.06) !important; pointer-events: none !important; } /* * Individual artwork scaling. * Keeps every logo inside the white tile. */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before { background-size: 72% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before { background-size: 80% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before { background-size: 72% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { background-size: 84% auto !important; } /* ----------------------------------------------------- LOGO / TEXT DIVIDER ----------------------------------------------------- */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { content: "" !important; position: absolute !important; top: 13px !important; bottom: 13px !important; left: 58px !important; display: block !important; width: 1px !important; height: auto !important; background: #d4d9df !important; border: 0 !important; pointer-events: none !important; } /* ----------------------------------------------------- CARD BORDER COLORS ----------------------------------------------------- */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a { border: 1px solid #43a6ff !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a { border: 1px solid #ff8363 !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a { border: 1px solid #f6b33d !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { border: 1px solid #ff5d95 !important; } /* ===================================================== REMOVE OLD LOWER MULTICOLOR / STAR SEPARATOR VISUALLY ===================================================== */ /* * The legacy separator is being painted immediately * underneath the menu. Cover precisely that strip. */ html body #main-navigation::after { content: "" !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -15px !important; width: 100% !important; height: 18px !important; background: #fff !important; background-image: none !important; border: 0 !important; box-shadow: none !important; z-index: 50 !important; pointer-events: none !important; } /* * Also neutralize old lower pseudo elements. */ html body #main-navigation-wrap::after, html body #main-navigation > ul.main-navigation-menu::after { content: none !important; display: none !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== OUR GRAY / PINK-TV SEPARATOR Bring it close to menu like TamilTVShow ===================================================== */ html body .skytamil-mobile-menu-separator { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: 22px !important; box-sizing: border-box !important; /* * IMPORTANT: * remove the huge 50px gap from previous patch. */ margin: 14px 0 15px !important; padding: 0 16px !important; gap: 7px !important; background: #fff !important; border: 0 !important; box-shadow: none !important; z-index: 100 !important; isolation: isolate !important; } /* * Disable previous giant white mask. */ html body .skytamil-mobile-menu-separator::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: none !important; } /* Long gray side lines */ html body .skytamil-mobile-menu-separator__line { display: block !important; flex: 1 1 auto !important; min-width: 20px !important; height: 1px !important; background: #c9cfd6 !important; } /* Small gray wings */ html body .skytamil-mobile-menu-separator__wing { display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 0 0 21px !important; width: 21px !important; height: 18px !important; gap: 3px !important; } html body .skytamil-mobile-menu-separator__wing i { display: block !important; height: 1.5px !important; background: #aeb6bf !important; border-radius: 3px !important; } html body .skytamil-mobile-menu-separator__wing--left { align-items: flex-end !important; } html body .skytamil-mobile-menu-separator__wing--right { align-items: flex-start !important; } html body .skytamil-mobile-menu-separator__wing--left i:nth-child(1), html body .skytamil-mobile-menu-separator__wing--right i:nth-child(3) { width: 14px !important; } html body .skytamil-mobile-menu-separator__wing--left i:nth-child(2), html body .skytamil-mobile-menu-separator__wing--right i:nth-child(2) { width: 21px !important; } html body .skytamil-mobile-menu-separator__wing--left i:nth-child(3), html body .skytamil-mobile-menu-separator__wing--right i:nth-child(1) { width: 17px !important; } /* Pink TV */ html body .skytamil-mobile-menu-separator__tv { position: relative !important; display: block !important; width: 20px !important; height: 20px !important; flex: 0 0 20px !important; } html body .skytamil-mobile-menu-separator__screen { position: absolute !important; left: 3px !important; bottom: 1px !important; display: block !important; box-sizing: border-box !important; width: 14px !important; height: 12px !important; background: #fff !important; border: 2px solid #ff174c !important; border-radius: 3px !important; } html body .skytamil-mobile-menu-separator__antenna { position: absolute !important; top: 1px !important; left: 5px !important; width: 10px !important; height: 7px !important; } html body .skytamil-mobile-menu-separator__antenna::before, html body .skytamil-mobile-menu-separator__antenna::after { content: "" !important; position: absolute !important; top: 3px !important; width: 7px !important; height: 2px !important; background: #ff174c !important; border-radius: 3px !important; } html body .skytamil-mobile-menu-separator__antenna::before { left: -1px !important; transform: rotate(45deg) !important; transform-origin: right center !important; } html body .skytamil-mobile-menu-separator__antenna::after { right: -1px !important; transform: rotate(-45deg) !important; transform-origin: left center !important; } } /* ========================================================= EXTRA SMALL PHONE ========================================================= */ @media only screen and (max-width: 380px) { html body #main-navigation { padding-left: 9px !important; padding-right: 9px !important; } html body #main-navigation > ul.main-navigation-menu { column-gap: 7px !important; row-gap: 7px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { height: 66px !important; min-height: 66px !important; max-height: 66px !important; padding-left: 60px !important; padding-right: 4px !important; font-size: 12px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { left: 52px !important; } } /* ========================================================= END SKYTAMIL TAMILTVSHOW MOBILE MATCH ========================================================= */ /* ========================================================= SKYTAMIL FINAL MOBILE CARD + LOWER SEPARATOR FIX ========================================================= */ @media only screen and (max-width: 768px) { /* ===================================================== MENU GRID Same compact spacing as TamilTVShow ===================================================== */ html body #main-navigation { padding: 16px 14px 0 !important; } html body #main-navigation > ul.main-navigation-menu { column-gap: 10px !important; row-gap: 10px !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== CARD SIZE ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { height: 74px !important; min-height: 74px !important; max-height: 74px !important; padding: 7px 8px 7px 70px !important; border-radius: 14px !important; overflow: hidden !important; } /* ===================================================== LOGO TILE More breathing room inside outer menu card ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { left: 9px !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; border-radius: 10px !important; background-position: center center !important; background-repeat: no-repeat !important; overflow: hidden !important; } /* Home */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before { background-size: 68% auto !important; } /* Sun TV Smaller than before so rays never touch tile/card edge. */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before { background-size: 67% auto !important; } /* Vijay TV */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before { background-size: 65% auto !important; } /* Zee Tamil */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { background-size: 72% auto !important; } /* ===================================================== VERTICAL DIVIDER ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { left: 61px !important; top: 14px !important; bottom: 14px !important; height: auto !important; background: #d4d9df !important; } /* ===================================================== TEXT ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { font-size: 13px !important; font-weight: 800 !important; line-height: 1.1 !important; text-align: left !important; text-indent: 0 !important; white-space: nowrap !important; align-items: center !important; justify-content: flex-start !important; } /* ===================================================== REMOVE ALL KNOWN LEGACY LOWER DECORATION ===================================================== */ html body #main-navigation-wrap::after, html body #main-navigation::after, html body .primary-navigation-wrap::after, html body #main-navigation > ul.main-navigation-menu::after { content: none !important; display: none !important; opacity: 0 !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; background-image: none !important; border: 0 !important; border-image: none !important; box-shadow: none !important; } /* ===================================================== HARD COVER FOR LEGACY LOWER MULTICOLOR STAR LINE No extra white gap. The cover extends upward from our real TV separator and masks only the obsolete lower strip. ===================================================== */ html body .skytamil-mobile-menu-separator { position: relative !important; z-index: 999 !important; height: 24px !important; margin: 13px 0 14px !important; padding: 0 16px !important; background: #fff !important; overflow: visible !important; isolation: isolate !important; } html body .skytamil-mobile-menu-separator::before { content: "" !important; display: block !important; position: absolute !important; left: 0 !important; right: 0 !important; /* * Only cover the narrow legacy separator area. * No large spacer. */ top: -18px !important; width: 100% !important; height: 18px !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 0 !important; box-shadow: none !important; z-index: 1 !important; pointer-events: none !important; } /* Actual gray + TV artwork remains above cover */ html body .skytamil-mobile-menu-separator__line, html body .skytamil-mobile-menu-separator__wing, html body .skytamil-mobile-menu-separator__tv { position: relative !important; z-index: 5 !important; } /* Gray side lines */ html body .skytamil-mobile-menu-separator__line { height: 1px !important; background: #c9cfd6 !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media only screen and (max-width: 380px) { html body #main-navigation { padding-left: 10px !important; padding-right: 10px !important; } html body #main-navigation > ul.main-navigation-menu { column-gap: 8px !important; row-gap: 8px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { height: 68px !important; min-height: 68px !important; max-height: 68px !important; padding-left: 62px !important; font-size: 12px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { width: 43px !important; min-width: 43px !important; max-width: 43px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { left: 54px !important; } } /* ========================================================= END SKYTAMIL FINAL MOBILE CARD + LOWER SEPARATOR FIX ========================================================= */ /* ========================================================= SKYTAMIL MOBILE MENU FINAL V5 ========================================================= */ @media only screen and (max-width: 768px) { /* ===================================================== KEEP ORIGINAL TOP MULTICOLOR / STAR SEPARATOR Add breathing room BELOW it. ===================================================== */ html body #main-navigation { padding: 18px 14px 0 !important; } html body #main-navigation > ul.main-navigation-menu { position: relative !important; z-index: 100 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 10px !important; row-gap: 10px !important; width: 100% !important; max-width: 100% !important; /* * THIS creates visible breathing room * between top multicolor separator and cards. */ margin: 10px 0 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; } /* ===================================================== BIGGER MENU CARDS ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 82px !important; min-height: 82px !important; max-height: 82px !important; box-sizing: border-box !important; margin: 0 !important; padding: 7px 8px 7px 76px !important; background: #fff !important; border-radius: 15px !important; overflow: hidden !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.1 !important; text-align: left !important; text-indent: 0 !important; white-space: nowrap !important; box-shadow: 0 4px 12px rgba(20,25,35,.05) !important; } /* ===================================================== LOGO TILE Give comfortable gap from card border. ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { content: "" !important; position: absolute !important; top: 50% !important; left: 10px !important; display: block !important; width: 52px !important; min-width: 52px !important; max-width: 52px !important; height: 60px !important; min-height: 60px !important; max-height: 60px !important; box-sizing: border-box !important; transform: translateY(-50%) !important; background-color: #fff !important; background-repeat: no-repeat !important; background-position: center center !important; border: 1px solid #e3e7eb !important; border-radius: 11px !important; overflow: hidden !important; box-shadow: 0 2px 7px rgba(20,25,35,.05) !important; pointer-events: none !important; } /* Logo artwork stays safely INSIDE tile */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before { background-size: 66% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before { background-size: 64% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before { background-size: 62% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { background-size: 69% auto !important; } /* ===================================================== LOGO / TEXT DIVIDER ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { content: "" !important; position: absolute !important; left: 66px !important; top: 15px !important; bottom: 15px !important; width: 1px !important; height: auto !important; background: #d5d9df !important; border: 0 !important; pointer-events: none !important; } /* ===================================================== BORDER COLORS ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a { border: 1px solid #43a6ff !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a { border: 1px solid #ff8363 !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a { border: 1px solid #f6b33d !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { border: 1px solid #ff5d95 !important; } /* ===================================================== REMOVE LOWER OLD MULTICOLOR/STAR SEPARATOR ===================================================== */ /* * Stop known pseudo-element versions first. */ html body #main-navigation-wrap::after, html body .primary-navigation-wrap::after, html body #main-navigation::after { content: none !important; display: none !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* * IMPORTANT FIX: * * Put the white cover DIRECTLY BELOW the menu UL. * * This sits above the legacy decorative layer, * so the old lower rainbow/star strip is covered * before our gray/pink-TV separator appears. */ html body #main-navigation > ul.main-navigation-menu::after { content: "" !important; display: block !important; position: absolute !important; left: -14px !important; right: -14px !important; bottom: -25px !important; width: calc(100% + 28px) !important; height: 26px !important; margin: 0 !important; padding: 0 !important; background: #fff !important; background-image: none !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; z-index: 99999 !important; pointer-events: none !important; } /* ===================================================== GRAY / PINK-TV SEPARATOR Bring close to menu. ===================================================== */ html body .skytamil-mobile-menu-separator { position: relative !important; z-index: 100000 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 22px !important; box-sizing: border-box !important; /* * Small controlled gap only. */ margin: 17px 0 16px !important; padding: 0 16px !important; gap: 7px !important; background: #fff !important; border: 0 !important; box-shadow: none !important; isolation: isolate !important; } /* * Previous white-mask rules are no longer needed. */ html body .skytamil-mobile-menu-separator::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: none !important; } html body .skytamil-mobile-menu-separator__line, html body .skytamil-mobile-menu-separator__wing, html body .skytamil-mobile-menu-separator__tv { position: relative !important; z-index: 2 !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media only screen and (max-width: 380px) { html body #main-navigation { padding-left: 10px !important; padding-right: 10px !important; } html body #main-navigation > ul.main-navigation-menu { column-gap: 8px !important; row-gap: 8px !important; margin-top: 9px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { height: 74px !important; min-height: 74px !important; max-height: 74px !important; padding-left: 67px !important; font-size: 12px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { left: 8px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { left: 57px !important; } html body #main-navigation > ul.main-navigation-menu::after { left: -10px !important; right: -10px !important; width: calc(100% + 20px) !important; } } /* ========================================================= END SKYTAMIL MOBILE MENU FINAL V5 ========================================================= */ /* ========================================================= SKYTAMIL MOBILE MENU FINAL V6 - fix clipped lower cards - reduce separator gaps - slightly larger cards ========================================================= */ @media only screen and (max-width: 768px) { /* ===================================================== TOP SEPARATOR -> MENU SPACING Keep original SkyTamil top multicolor/star separator, but bring menu closer to it. ===================================================== */ html body #main-navigation { padding: 8px 14px 0 !important; } html body #main-navigation > ul.main-navigation-menu { position: relative !important; z-index: 20 !important; margin: 6px 0 0 !important; padding: 0 !important; column-gap: 10px !important; row-gap: 10px !important; } /* ===================================================== SLIGHTLY LARGER MENU CARDS ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { position: relative !important; z-index: 30 !important; height: 86px !important; min-height: 86px !important; max-height: 86px !important; padding: 8px 9px 8px 78px !important; border-radius: 16px !important; overflow: hidden !important; font-size: 14px !important; background: #fff !important; } /* ===================================================== LOGO TILE ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { left: 10px !important; width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 62px !important; min-height: 62px !important; max-height: 62px !important; border-radius: 11px !important; overflow: hidden !important; } /* Keep actual artwork safely inside logo tile */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before { background-size: 66% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before { background-size: 63% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before { background-size: 61% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { background-size: 68% auto !important; } /* ===================================================== LOGO / TEXT DIVIDER ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { left: 68px !important; top: 16px !important; bottom: 16px !important; } /* ===================================================== IMPORTANT: FIX THE WHITE COVER THAT WAS CUTTING LOWER CARDS Old V5: bottom: -25px z-index: 99999 New: starts AFTER the menu never overlaps menu cards ===================================================== */ html body #main-navigation > ul.main-navigation-menu::after { content: "" !important; display: block !important; position: absolute !important; /* * Start immediately AFTER the UL. */ top: 100% !important; bottom: auto !important; left: -14px !important; right: -14px !important; width: calc(100% + 28px) !important; height: 18px !important; margin: 0 !important; padding: 0 !important; background: #fff !important; background-image: none !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; /* * Below cards, above legacy separator. */ z-index: 10 !important; pointer-events: none !important; } /* ===================================================== GRAY / PINK TV SEPARATOR Reduce large top/bottom empty gaps. ===================================================== */ html body .skytamil-mobile-menu-separator { position: relative !important; z-index: 40 !important; height: 22px !important; /* * Much tighter than previous 17px / 16px. */ margin: 7px 0 8px !important; padding: 0 16px !important; gap: 7px !important; background: #fff !important; overflow: visible !important; } /* * No second mask on TV separator. */ html body .skytamil-mobile-menu-separator::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: none !important; } /* ===================================================== REMOVE OTHER KNOWN OLD LOWER SEPARATOR SOURCES ===================================================== */ html body #main-navigation-wrap::after, html body .primary-navigation-wrap::after, html body #main-navigation::after { content: none !important; display: none !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media only screen and (max-width: 380px) { html body #main-navigation { padding: 7px 10px 0 !important; } html body #main-navigation > ul.main-navigation-menu { margin-top: 5px !important; column-gap: 8px !important; row-gap: 8px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { height: 78px !important; min-height: 78px !important; max-height: 78px !important; padding-left: 69px !important; font-size: 12px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { left: 8px !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { left: 59px !important; } html body #main-navigation > ul.main-navigation-menu::after { left: -10px !important; right: -10px !important; width: calc(100% + 20px) !important; height: 16px !important; } html body .skytamil-mobile-menu-separator { margin: 6px 0 7px !important; } } /* ========================================================= END SKYTAMIL MOBILE MENU FINAL V6 ========================================================= */ /* ========================================================= SKYTAMIL MOBILE HORIZONTAL OVERFLOW FIX Prevent left/right shaking and gray area outside viewport ========================================================= */ @media only screen and (max-width: 768px) { /* ===================================================== LOCK DOCUMENT TO MOBILE VIEWPORT ===================================================== */ html, body { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; overflow-x: hidden !important; overscroll-behavior-x: none; } /* Modern browsers */ @supports (overflow-x: clip) { html, body { overflow-x: clip !important; } } /* ===================================================== MAIN SITE WRAPPERS Nothing may become wider than viewport ===================================================== */ #page, .site, #masthead, .site-header, .header-main, #main-navigation-wrap, .primary-navigation-wrap, #main-navigation, .primary-navigation, #content, .site-content { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ===================================================== MENU GRID ===================================================== */ html body #main-navigation > ul.main-navigation-menu { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: visible !important; } html body #main-navigation > ul.main-navigation-menu > li { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } html body #main-navigation > ul.main-navigation-menu > li > a { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* ===================================================== IMPORTANT: FIX THE ELEMENT THAT WAS WIDER THAN THE SCREEN Previous version: left: -14px right: -14px width: calc(100% + 28px) That can create horizontal page overflow. ===================================================== */ html body #main-navigation > ul.main-navigation-menu::after { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; transform: none !important; box-sizing: border-box !important; } /* ===================================================== GRAY / PINK-TV SEPARATOR Keep completely inside viewport ===================================================== */ html body .skytamil-mobile-menu-separator { left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; transform: none !important; } html body .skytamil-mobile-menu-separator::before, html body .skytamil-mobile-menu-separator::after { max-width: 100% !important; box-sizing: border-box !important; } /* ===================================================== IMAGES / IFRAMES / MEDIA Prevent media from expanding document width ===================================================== */ img, video, iframe, embed, object { max-width: 100% !important; } } /* ========================================================= VERY SMALL MOBILE Cancel previous over-wide white cover rule ========================================================= */ @media only screen and (max-width: 380px) { html body #main-navigation > ul.main-navigation-menu::after { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; } } /* ========================================================= END SKYTAMIL MOBILE HORIZONTAL OVERFLOW FIX ========================================================= */ /* ========================================================= SKYTAMIL MOBILE HEADER FINAL TAMILTVSHOW.NET MATCH ========================================================= */ @media only screen and (max-width: 768px) { /* ===================================================== PREVENT MOBILE HORIZONTAL OVERFLOW ===================================================== */ html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* ===================================================== REMOVE ALL OLD SKYTAMIL NAV DECORATION TOP + BOTTOM MULTICOLOR / STAR SEPARATORS ===================================================== */ html body #main-navigation-wrap::before, html body #main-navigation-wrap::after, html body .primary-navigation-wrap::before, html body .primary-navigation-wrap::after, html body #main-navigation::before, html body #main-navigation::after, html body #main-navigation > ul.main-navigation-menu::before, html body #main-navigation > ul.main-navigation-menu::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; visibility: hidden !important; background: none !important; background-image: none !important; border: 0 !important; border-image: none !important; box-shadow: none !important; transform: none !important; pointer-events: none !important; } /* ===================================================== REMOVE OLD WHITE MASKS / EXTRA NAV LAYERS ===================================================== */ html body .skytamil-mobile-menu-separator::before, html body .skytamil-mobile-menu-separator::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== NAV WRAPPER ===================================================== */ html body #main-navigation-wrap, html body #main-navigation-wrap.primary-navigation-wrap { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } html body #main-navigation { position: relative !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 12px !important; background: #fff !important; border: 0 !important; box-shadow: none !important; } /* ===================================================== EXACT TAMILTVSHOW TOP LINE ===================================================== */ html body #main-navigation > ul.main-navigation-menu { position: relative !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 8px !important; row-gap: 8px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; /* * Same simple top separator style. */ margin: 0 !important; padding: 17px 0 0 !important; border-top: 1px solid #cfd4da !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; background: #fff !important; box-shadow: none !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; } /* ===================================================== MENU ITEMS ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li { float: none !important; display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ===================================================== MENU CARDS SAME PROPORTION AS TAMILTVSHOW.NET ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sony > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 58px !important; height: 58px !important; max-height: 58px !important; box-sizing: border-box !important; margin: 0 !important; padding: 6px 8px 6px 65px !important; color: #252a31 !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.2 !important; text-align: left !important; text-indent: 0 !important; letter-spacing: 0 !important; white-space: nowrap !important; background: #fff !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 4px 12px rgba(25,30,40,.05) !important; transform: none !important; } /* ===================================================== LOGO TILE SAME SIZE AS TAMILTVSHOW.NET ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sony > a::before { content: "" !important; position: absolute !important; top: 50% !important; left: 7px !important; display: block !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; background-color: #fff !important; background-repeat: no-repeat !important; background-position: center center !important; /* * Keep full original logo aspect ratio. */ background-size: contain !important; border: 1px solid #e4e7eb !important; border-radius: 9px !important; overflow: hidden !important; box-shadow: 0 3px 9px rgba(20,25,35,.06) !important; pointer-events: none !important; } /* Give artwork a little breathing room */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before { background-size: 74% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before { background-size: 76% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before { background-size: 70% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { background-size: 78% auto !important; } /* ===================================================== LOGO / TEXT DIVIDER SAME POSITION AS TAMILTVSHOW ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sony > a::after { content: "" !important; position: absolute !important; top: 11px !important; bottom: 11px !important; left: 54px !important; display: block !important; width: 1px !important; height: auto !important; background: #d4d9df !important; border: 0 !important; transform: none !important; pointer-events: none !important; } /* ===================================================== CARD BORDER COLORS ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a { border: 1px solid #43a6ff !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a { border: 1px solid #ff8363 !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a { border: 1px solid #f6b33d !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { border: 1px solid #ff5d95 !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sony > a { border: 1px solid #766ed3 !important; } /* ===================================================== SAME LOWER SEPARATOR AS TAMILTVSHOW.NET ===================================================== */ html body .skytamil-mobile-menu-separator { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: 20px !important; box-sizing: border-box !important; /* * Tight spacing like TamilTVShow. */ margin: 14px 0 15px !important; padding: 0 16px !important; gap: 8px !important; background: #fff !important; border: 0 !important; box-shadow: none !important; z-index: 20 !important; overflow: visible !important; } /* Long gray lines */ html body .skytamil-mobile-menu-separator__line { display: block !important; flex: 1 1 auto !important; min-width: 20px !important; height: 1px !important; background: #c9cfd6 !important; } /* Three small gray wings */ html body .skytamil-mobile-menu-separator__wing { display: flex !important; flex-direction: column !important; justify-content: center !important; width: 21px !important; height: 18px !important; flex: 0 0 21px !important; gap: 3px !important; } html body .skytamil-mobile-menu-separator__wing i { display: block !important; height: 1.5px !important; background: #aeb6bf !important; border-radius: 3px !important; } html body .skytamil-mobile-menu-separator__wing--left { align-items: flex-end !important; } html body .skytamil-mobile-menu-separator__wing--right { align-items: flex-start !important; } html body .skytamil-mobile-menu-separator__wing--left i:nth-child(1), html body .skytamil-mobile-menu-separator__wing--right i:nth-child(3) { width: 14px !important; } html body .skytamil-mobile-menu-separator__wing--left i:nth-child(2), html body .skytamil-mobile-menu-separator__wing--right i:nth-child(2) { width: 21px !important; } html body .skytamil-mobile-menu-separator__wing--left i:nth-child(3), html body .skytamil-mobile-menu-separator__wing--right i:nth-child(1) { width: 17px !important; } /* ===================================================== PINK TV ===================================================== */ html body .skytamil-mobile-menu-separator__tv { position: relative !important; display: block !important; flex: 0 0 20px !important; width: 20px !important; height: 20px !important; } html body .skytamil-mobile-menu-separator__screen { position: absolute !important; left: 3px !important; bottom: 1px !important; display: block !important; box-sizing: border-box !important; width: 14px !important; height: 12px !important; background: #fff !important; border: 2px solid #ff174c !important; border-radius: 3px !important; } html body .skytamil-mobile-menu-separator__antenna { position: absolute !important; top: 1px !important; left: 5px !important; width: 10px !important; height: 7px !important; } html body .skytamil-mobile-menu-separator__antenna::before, html body .skytamil-mobile-menu-separator__antenna::after { content: "" !important; position: absolute !important; top: 3px !important; width: 7px !important; height: 2px !important; background: #ff174c !important; border-radius: 3px !important; } html body .skytamil-mobile-menu-separator__antenna::before { left: -1px !important; transform: rotate(45deg) !important; transform-origin: right center !important; } html body .skytamil-mobile-menu-separator__antenna::after { right: -1px !important; transform: rotate(-45deg) !important; transform-origin: left center !important; } } /* ========================================================= EXTRA SMALL PHONES ========================================================= */ @media only screen and (max-width: 360px) { html body #main-navigation { padding-left: 10px !important; padding-right: 10px !important; } html body #main-navigation > ul.main-navigation-menu { column-gap: 6px !important; row-gap: 6px !important; padding-top: 15px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { height: 54px !important; min-height: 54px !important; max-height: 54px !important; padding-left: 58px !important; padding-right: 5px !important; font-size: 11px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { left: 49px !important; } html body .skytamil-mobile-menu-separator { margin: 12px 0 13px !important; } } /* ========================================================= END SKYTAMIL MOBILE HEADER FINAL TAMILTVSHOW.NET MATCH ========================================================= */ /* ========================================================= SKYTAMIL MOBILE FINAL SPACING + SIZE ========================================================= */ @media only screen and (max-width: 768px) { /* ===================================================== TOP NORMAL GRAY SEPARATOR Make it clearly visible like TamilTVShow ===================================================== */ html body #main-navigation { position: relative !important; padding: 0 12px !important; } html body #main-navigation::before { content: "" !important; display: block !important; position: relative !important; width: 100% !important; height: 1px !important; margin: 0 0 14px !important; padding: 0 !important; background: #cfd4da !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } /* ===================================================== MENU GRID ===================================================== */ html body #main-navigation > ul.main-navigation-menu { margin: 0 !important; padding: 0 !important; column-gap: 9px !important; row-gap: 9px !important; border-top: 0 !important; } /* ===================================================== SLIGHTLY BIGGER MENU CARDS ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { height: 66px !important; min-height: 66px !important; max-height: 66px !important; padding: 6px 8px 6px 69px !important; border-radius: 13px !important; font-size: 13px !important; } /* ===================================================== SLIGHTLY BIGGER LOGO TILE ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { left: 8px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; border-radius: 9px !important; } /* ===================================================== LOGO ARTWORK ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before { background-size: 74% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before { background-size: 74% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before { background-size: 69% auto !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { background-size: 76% auto !important; } /* ===================================================== VERTICAL DIVIDER ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { left: 58px !important; top: 12px !important; bottom: 12px !important; } /* ===================================================== LOWER GRAY / PINK-TV SEPARATOR Reduce empty space above and below ===================================================== */ html body .skytamil-mobile-menu-separator { height: 20px !important; margin: 7px 0 7px !important; padding: 0 16px !important; gap: 8px !important; } /* Keep gray separator line thin */ html body .skytamil-mobile-menu-separator__line { height: 1px !important; background: #c9cfd6 !important; } } /* ========================================================= SMALL PHONES ========================================================= */ @media only screen and (max-width: 360px) { html body #main-navigation { padding-left: 9px !important; padding-right: 9px !important; } html body #main-navigation::before { margin-bottom: 11px !important; } html body #main-navigation > ul.main-navigation-menu { column-gap: 7px !important; row-gap: 7px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { height: 60px !important; min-height: 60px !important; max-height: 60px !important; padding-left: 62px !important; font-size: 11px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::before, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::before { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; } html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a::after, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a::after { left: 52px !important; } html body .skytamil-mobile-menu-separator { margin: 6px 0 6px !important; } } /* ========================================================= END SKYTAMIL MOBILE FINAL SPACING + SIZE ========================================================= */ /* ========================================================= SKYTAMIL MOBILE - MENU LINE TOP FINAL ========================================================= */ @media only screen and (max-width: 768px) { /* ----------------------------------------------------- REMOVE LINE / DECORATION FROM BELOW MENU ----------------------------------------------------- */ html body #main-navigation > ul.main-navigation-menu { border-bottom: 0 !important; box-shadow: none !important; } html body #main-navigation > ul.main-navigation-menu::after, html body #main-navigation::after, html body #main-navigation-wrap::after, html body .primary-navigation-wrap::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: none !important; background-image: none !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } /* ----------------------------------------------------- CREATE NORMAL LINE ABOVE MENU ----------------------------------------------------- */ html body #main-navigation { position: relative !important; padding: 15px 12px 0 !important; border: 0 !important; background: #fff !important; } html body #main-navigation::before { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; left: 12px !important; right: 12px !important; width: auto !important; height: 1px !important; margin: 0 !important; padding: 0 !important; background: #cfd4da !important; background-image: none !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; z-index: 50 !important; pointer-events: none !important; } /* ----------------------------------------------------- MENU STARTS JUST BELOW TOP LINE ----------------------------------------------------- */ html body #main-navigation > ul.main-navigation-menu { margin: 0 !important; padding: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; } /* ----------------------------------------------------- KEEP LOWER GRAY / TV SEPARATOR Close to menu ----------------------------------------------------- */ html body .skytamil-mobile-menu-separator { margin: 7px 0 7px !important; } } /* Small phones */ @media only screen and (max-width: 360px) { html body #main-navigation { padding: 13px 9px 0 !important; } html body #main-navigation::before { left: 9px !important; right: 9px !important; } } /* ========================================================= END SKYTAMIL MOBILE - MENU LINE TOP FINAL ========================================================= */ /* ========================================================= SKYTAMIL REAL TOP MENU SEPARATOR FINAL ========================================================= */ @media only screen and (max-width: 768px) { /* ===================================================== REMOVE EVERY OLD LINE FROM NAV AREA ===================================================== */ html body #main-navigation-wrap, html body #main-navigation-wrap.primary-navigation-wrap, html body #main-navigation, html body #main-navigation > ul.main-navigation-menu { border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; border-image: none !important; background-image: none !important; box-shadow: none !important; } html body #main-navigation-wrap::before, html body #main-navigation-wrap::after, html body .primary-navigation-wrap::before, html body .primary-navigation-wrap::after, html body #main-navigation::before, html body #main-navigation::after, html body #main-navigation > ul.main-navigation-menu::before, html body #main-navigation > ul.main-navigation-menu::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; background-image: none !important; border: 0 !important; border-image: none !important; box-shadow: none !important; opacity: 0 !important; visibility: hidden !important; } /* ===================================================== REAL NORMAL LINE ABOVE MENU This is a real DIV, not a pseudo-element. ===================================================== */ html body .skytamil-mobile-menu-topline { display: block !important; position: relative !important; width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; height: 1px !important; box-sizing: border-box !important; margin: 0 12px 14px !important; padding: 0 !important; background: #cfd4da !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; clear: both !important; } /* ===================================================== MENU BEGINS DIRECTLY AFTER TOP LINE ===================================================== */ html body #main-navigation { margin: 0 !important; padding: 0 12px !important; background: #fff !important; } html body #main-navigation > ul.main-navigation-menu { margin: 0 !important; padding: 0 !important; background: #fff !important; column-gap: 9px !important; row-gap: 9px !important; } /* ===================================================== KEEP CURRENT SLIGHTLY LARGER MENU SIZE ===================================================== */ html body #main-navigation > ul.main-navigation-menu > li.tvmenu-home > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-sun > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-vijay > a, html body #main-navigation > ul.main-navigation-menu > li.tvmenu-zee > a { height: 66px !important; min-height: 66px !important; max-height: 66px !important; padding: 6px 8px 6px 69px !important; border-radius: 13px !important; font-size: 13px !important; } /* ===================================================== LOWER TV SEPARATOR This is the ONLY separator below menu. ===================================================== */ html body .skytamil-mobile-menu-separator { margin: 7px 0 7px !important; height: 20px !important; padding: 0 16px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media only screen and (max-width: 360px) { html body .skytamil-mobile-menu-topline { width: calc(100% - 18px) !important; max-width: calc(100% - 18px) !important; margin: 0 9px 11px !important; } html body #main-navigation { padding-left: 9px !important; padding-right: 9px !important; } html body .skytamil-mobile-menu-separator { margin: 6px 0 6px !important; } } /* ========================================================= DESKTOP ========================================================= */ @media only screen and (min-width: 769px) { .skytamil-mobile-menu-topline { display: none !important; } } /* ========================================================= END SKYTAMIL REAL TOP MENU SEPARATOR FINAL ========================================================= */ /* ========================================================= SKYTAMIL MOBILE - TIGHT LOWER TV SEPARATOR FINAL ========================================================= */ @media only screen and (max-width: 768px) { /* * Keep current menu and real top separator unchanged. * Only reduce space around lower gray/pink-TV separator. */ html body .skytamil-mobile-menu-separator { height: 20px !important; margin: 3px 0 4px !important; padding: 0 16px !important; gap: 8px !important; background: #fff !important; } /* Keep long gray side lines */ html body .skytamil-mobile-menu-separator__line { height: 1px !important; background: #c9cfd6 !important; } /* Keep wing spacing compact */ html body .skytamil-mobile-menu-separator__wing { height: 18px !important; gap: 3px !important; } /* Keep TV centered */ html body .skytamil-mobile-menu-separator__tv { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; } } /* Small phones */ @media only screen and (max-width: 360px) { html body .skytamil-mobile-menu-separator { margin: 2px 0 3px !important; } } /* ========================================================= END SKYTAMIL MOBILE - TIGHT LOWER TV SEPARATOR FINAL ========================================================= */ /* ========================================================= SKYTAMIL MOBILE - TV SEPARATOR MICRO GAP ========================================================= */ @media only screen and (max-width: 768px) { html body .skytamil-mobile-menu-separator { height: 20px !important; margin: 0 0 1px !important; padding: 0 16px !important; gap: 7px !important; } } /* Small phones */ @media only screen and (max-width: 360px) { html body .skytamil-mobile-menu-separator { margin: 0 !important; } } /* ========================================================= END SKYTAMIL MOBILE - TV SEPARATOR MICRO GAP ========================================================= */