/* Hide PAGE titles only */ body.page h1.entry-title, body.page .page-title, body.page .entry-header .entry-title, body.page header.entry-header h1, body.page .wp-block-post-title, body.page .site-main h1:first-of-type { display: none !important; } /* For Banner CSS */ .show-banner-container { width: 100%; max-width: 1200px; margin: 25px auto; padding: 0 15px; box-sizing: border-box; } .show-banner-grid { display: flex !important; flex-direction: row !important; gap: 20px; } .show-banner-card { position: relative; flex: 1; min-width: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 1 / 1; background: #141414; box-shadow: 0 8px 24px rgba(0,0,0,0.2); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); text-decoration: none; display: block; } .show-banner-card:hover { transform: translateY(-8px); } .show-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Frosted glass floating layout tag */ .show-banner-overlay { position: absolute; bottom: 12px; left: 12px; right: 12px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px; border-radius: 12px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.25); } .show-banner-title { color: #ffffff !important; font-size: 12px !important; font-weight: 600; margin: 0; letter-spacing: 0.5px; } @media (max-width: 768px) { .show-banner-grid { flex-wrap: wrap; gap: 10px; } .show-banner-card { flex: 0 0 calc(50% - 5px); border-radius: 14px; } .show-banner-overlay { bottom: 8px; left: 8px; right: 8px; padding: 6px; } } /* ========================================================== BIGG BOSS LIVE CARDS FINAL CSS + BROADCAST SIGNAL LIVE BADGE ========================================================== */ /* ========================================================== CARD ========================================================== */ .bb-safe-box { position: relative !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 15px !important; background: #000 !important; box-shadow: 0 8px 22px rgba(0,0,0,.18) !important; line-height: 0 !important; font-size: 0 !important; vertical-align: top !important; } /* ========================================================== CLICKABLE LINK ========================================================== */ .bb-safe-box > a { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; line-height: 0 !important; font-size: 0 !important; text-decoration: none !important; overflow: hidden !important; } .bb-safe-box > a::before, .bb-safe-box > a::after { content: none !important; display: none !important; } /* ========================================================== IMAGE ========================================================== */ .bb-safe-box img { position: absolute !important; top: 0 !important; left: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; border: 0 !important; border-radius: 0 !important; line-height: 0 !important; transition: transform .35s ease !important; } .bb-safe-box:hover img { transform: scale(1.035) !important; } /* ========================================================== STYLE 1 - BROADCAST SIGNAL LIVE BADGE ========================================================== */ .bb-safe-live { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 20 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; height: 32px !important; margin: 0 !important; padding: 0 12px !important; background: linear-gradient( 135deg, rgba(7,10,17,.94), rgba(18,20,28,.92) ) !important; border: 1px solid rgba(255,255,255,.25) !important; border-radius: 9px !important; color: #fff !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 1px !important; text-shadow: 0 1px 2px rgba(0,0,0,.4) !important; box-shadow: 0 4px 12px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; pointer-events: none !important; overflow: visible !important; } /* ========================================================== BROADCAST RED DOT ========================================================== */ .bb-safe-dot { position: relative !important; display: block !important; width: 9px !important; height: 9px !important; min-width: 9px !important; margin: 0 !important; padding: 0 !important; background: #ff174c !important; border-radius: 50% !important; box-shadow: 0 0 8px rgba(255,23,76,.85) !important; animation: bbBroadcastDot 1.15s infinite ease-in-out !important; } /* FIRST BROADCAST WAVE */ .bb-safe-dot::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 17px !important; height: 17px !important; border: 1px solid rgba(255,49,93,.90) !important; border-radius: 50% !important; transform: translate(-50%, -50%) scale(.35) !important; opacity: 0 !important; animation: bbBroadcastRing 1.5s infinite ease-out !important; } /* SECOND BROADCAST WAVE */ .bb-safe-dot::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 25px !important; height: 25px !important; border: 1px solid rgba(255,49,93,.60) !important; border-radius: 50% !important; transform: translate(-50%, -50%) scale(.35) !important; opacity: 0 !important; animation: bbBroadcastRing 1.5s .35s infinite ease-out !important; } /* ========================================================== PLAY BUTTON ========================================================== */ .bb-safe-play { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 15 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; background: rgba(255,255,255,.92) !important; border: 1px solid rgba(255,255,255,.80) !important; border-radius: 50% !important; box-shadow: 0 4px 14px rgba(0,0,0,.28) !important; pointer-events: none !important; transition: transform .25s ease, background .25s ease, box-shadow .25s ease !important; } .bb-safe-box:hover .bb-safe-play { transform: translate(-50%, -50%) scale(1.10) !important; background: #fff !important; box-shadow: 0 6px 18px rgba(0,0,0,.32) !important; } /* PLAY TRIANGLE */ .bb-safe-play::after { content: "" !important; display: block !important; width: 0 !important; height: 0 !important; margin-left: 3px !important; border-top: 6px solid transparent !important; border-bottom: 6px solid transparent !important; border-left: 10px solid #ff174c !important; } /* ========================================================== LANGUAGE LABEL ========================================================== */ .bb-safe-language { position: absolute !important; left: 9px !important; bottom: 9px !important; z-index: 20 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: 21px !important; margin: 0 !important; padding: 0 7px !important; background: rgba(7,10,18,.78) !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 6px !important; box-shadow: 0 2px 6px rgba(0,0,0,.20) !important; color: #fff !important; font-size: 8px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .7px !important; pointer-events: none !important; } /* ========================================================== TABLE - KEEP WORKING 2 x 2 LAYOUT ========================================================== */ table[role="presentation"] { width: 100% !important; max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; border: 0 !important; border-collapse: separate !important; border-spacing: 12px 18px !important; background: transparent !important; } /* TABLE CELLS */ table[role="presentation"] td { width: 50% !important; vertical-align: top !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; line-height: 0 !important; font-size: 0 !important; } /* TABLE ROW */ table[role="presentation"] tr { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* REMOVE POSSIBLE THEME PSEUDO ELEMENTS */ table[role="presentation"] td::before, table[role="presentation"] td::after { content: none !important; display: none !important; } /* ========================================================== BROADCAST DOT ANIMATION ========================================================== */ @keyframes bbBroadcastDot { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 7px rgba(255,23,76,.70); } 50% { opacity: .75; transform: scale(.78); box-shadow: 0 0 13px rgba(255,23,76,1); } } /* ========================================================== BROADCAST WAVE ANIMATION ========================================================== */ @keyframes bbBroadcastRing { 0% { transform: translate(-50%, -50%) scale(.35); opacity: .95; } 60% { opacity: .30; } 100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } } /* ========================================================== MOBILE ========================================================== */ @media only screen and (max-width:600px) { table[role="presentation"] { border-spacing: 6px 10px !important; } .bb-safe-box { border-radius: 10px !important; } /* BROADCAST LIVE */ .bb-safe-live { top: 6px !important; right: 6px !important; height: 24px !important; padding: 0 8px !important; gap: 5px !important; border-radius: 7px !important; font-size: 8px !important; letter-spacing: .6px !important; } .bb-safe-dot { width: 6px !important; height: 6px !important; min-width: 6px !important; } .bb-safe-dot::before { width: 12px !important; height: 12px !important; } .bb-safe-dot::after { width: 18px !important; height: 18px !important; } /* PLAY */ .bb-safe-play { width: 32px !important; height: 32px !important; } .bb-safe-play::after { border-top-width: 5px !important; border-bottom-width: 5px !important; border-left-width: 8px !important; } /* LANGUAGE */ .bb-safe-language { left: 5px !important; bottom: 5px !important; height: 17px !important; padding: 0 5px !important; font-size: 11px !important; letter-spacing: .4px !important; } } /* ========================================================== BIGG BOSS TOP INTRO ========================================================== */ .bb-top-intro { position: relative !important; width: 100% !important; max-width: 820px !important; margin: 5px auto 25px !important; padding: 10px 15px 5px !important; text-align: center !important; overflow: hidden !important; } /* ========================================================== STREAMING NOW ========================================================== */ .bb-top-live { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 0 7px !important; padding: 5px 10px !important; background: #fff1f3 !important; border: 1px solid #ffd5dc !important; border-radius: 30px !important; color: #e60032 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 1.3px !important; } /* RED LIVE DOT */ .bb-top-dot { display: block !important; width: 6px !important; height: 6px !important; min-width: 6px !important; background: #ff174c !important; border-radius: 50% !important; animation: bbTopDotPulse 1.2s infinite !important; } /* ========================================================== PREMIUM BLACK + RED LIVE HEADER ========================================================== */ .bb-premium-head { position: relative !important; width: 100% !important; max-width: 820px !important; margin: 5px auto 25px !important; padding: 18px 15px 16px !important; text-align: center !important; background: linear-gradient( 135deg, rgba(8,10,18,.98), rgba(22,25,35,.96) ) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; box-shadow: 0 10px 28px rgba(0,0,0,.15) !important; overflow: hidden !important; } /* MOVING GLOSS */ .bb-premium-head::before { content: "" !important; position: absolute !important; top: 0 !important; left: -120% !important; width: 60% !important; height: 100% !important; background: linear-gradient( 110deg, transparent 0%, rgba(255,255,255,.04) 35%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.04) 65%, transparent 100% ) !important; transform: skewX(-20deg) !important; animation: bbPremiumSweep 4s infinite ease-in-out !important; pointer-events: none !important; } /* ========================================================== LIVE NOW BADGE ========================================================== */ .bb-premium-status { position: relative !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 0 9px !important; padding: 5px 11px !important; background: rgba(255,23,76,.12) !important; border: 1px solid rgba(255,23,76,.35) !important; border-radius: 30px !important; color: #ff4168 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 1.2px !important; } /* LIVE DOT */ .bb-premium-dot { display: block !important; width: 6px !important; height: 6px !important; min-width: 6px !important; background: #ff174c !important; border-radius: 50% !important; box-shadow: 0 0 8px rgba(255,23,76,.9) !important; animation: bbPremiumDot 1.15s infinite !important; } /* ========================================================== TITLE ========================================================== */ .bb-premium-title { position: relative !important; z-index: 3 !important; margin: 0 !important; color: #ffffff !important; font-size: 28px !important; line-height: 1.15 !important; font-weight: 900 !important; letter-spacing: -.4px !important; text-shadow: 0 3px 12px rgba(0,0,0,.25) !important; } /* LIVE 24/7 */ .bb-premium-title span { position: relative !important; display: inline-block !important; margin-left: 6px !important; color: #ff174c !important; text-shadow: 0 0 10px rgba(255,23,76,.35), 0 0 20px rgba(255,23,76,.18) !important; animation: bbPremiumRedGlow 1.8s ease-in-out infinite !important; } /* LITTLE SPARK */ .bb-premium-title span::after { content: "✦" !important; position: absolute !important; top: -5px !important; right: -13px !important; color: #ffffff !important; font-size: 9px !important; text-shadow: 0 0 7px #fff, 0 0 10px #ff174c !important; animation: bbPremiumSpark 1.4s infinite ease-in-out !important; } /* ========================================================== RED UNDERLINE ========================================================== */ .bb-premium-line { position: relative !important; z-index: 3 !important; width: 80px !important; height: 3px !important; margin: 11px auto 0 !important; border-radius: 5px !important; background: linear-gradient( 90deg, transparent, #ff174c, #ff6a86, #ff174c, transparent ) !important; background-size: 200% 100% !important; box-shadow: 0 0 10px rgba(255,23,76,.45) !important; animation: bbPremiumLine 2s linear infinite !important; } /* ========================================================== SUBTITLE ========================================================== */ .bb-premium-sub { position: relative !important; z-index: 3 !important; margin: 9px 0 0 !important; color: rgba(255,255,255,.65) !important; font-size: 20px !important; line-height: 1.4 !important; font-weight: 500 !important; letter-spacing: .25px !important; } /* ========================================================== ANIMATIONS ========================================================== */ @keyframes bbPremiumSweep { 0% { left: -120%; } 45%, 100% { left: 150%; } } @keyframes bbPremiumDot { 0% { box-shadow: 0 0 0 0 rgba(255,23,76,.8); } 70% { box-shadow: 0 0 0 7px rgba(255,23,76,0); } 100% { box-shadow: 0 0 0 0 rgba(255,23,76,0); } } @keyframes bbPremiumRedGlow { 0%, 100% { opacity: 1; text-shadow: 0 0 7px rgba(255,23,76,.28), 0 0 15px rgba(255,23,76,.12); } 50% { opacity: .92; text-shadow: 0 0 13px rgba(255,23,76,.70), 0 0 25px rgba(255,23,76,.30); } } @keyframes bbPremiumSpark { 0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.35) rotate(90deg); } } @keyframes bbPremiumLine { 0% { background-position: 200% center; } 100% { background-position: -100% center; } } /* ========================================================== MOBILE ========================================================== */ @media only screen and (max-width:600px) { .bb-premium-head { padding: 15px 10px 14px !important; border-radius: 14px !important; margin-bottom: 18px !important; } .bb-premium-title { font-size: 21px !important; } .bb-premium-title span { margin-left: 4px !important; } .bb-premium-status { font-size: 7px !important; } .bb-premium-sub { font-size: 9px !important; } .bb-premium-line { width: 65px !important; } } /* ========================================================== TAMILTVSERIAL.COM PREMIUM TV CATEGORY BROWSE SYSTEM ========================================================== */ .tvs-premium-wrap, .tvs-premium-wrap * { box-sizing: border-box !important; } /* ========================================================== MAIN PREMIUM PANEL ========================================================== */ .tvs-premium-wrap { position: relative !important; width: calc(100% - 30px) !important; max-width: 980px !important; margin: 20px auto 35px !important; padding: 26px 28px 28px !important; text-align: center !important; background: radial-gradient( circle at 50% -40px, rgba(255,23,76,.13), transparent 240px ), linear-gradient( 135deg, #0b0e16 0%, #151923 52%, #0d1018 100% ) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 20px !important; box-shadow: 0 15px 40px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06) !important; overflow: hidden !important; } /* ========================================================== DECORATIVE GLOW ========================================================== */ .tvs-premium-wrap::before { content: "" !important; position: absolute !important; top: -80px !important; left: 50% !important; width: 320px !important; height: 170px !important; transform: translateX(-50%) !important; background: radial-gradient( ellipse, rgba(255,23,76,.17), rgba(255,23,76,0) 70% ) !important; pointer-events: none !important; } /* MOVING GLOSS */ .tvs-premium-wrap::after { content: "" !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 38% !important; height: 100% !important; background: linear-gradient( 110deg, transparent, rgba(255,255,255,.025), rgba(255,255,255,.08), rgba(255,255,255,.025), transparent ) !important; transform: skewX(-18deg) !important; animation: tvsPanelSweep 7s infinite ease-in-out !important; pointer-events: none !important; } /* ========================================================== BREADCRUMBS ========================================================== */ .tvs-premium-breadcrumb { position: relative !important; z-index: 3 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 7px !important; margin: 0 0 13px !important; padding: 0 !important; font-size: 10px !important; line-height: 1.4 !important; font-weight: 600 !important; } .tvs-premium-breadcrumb a { color: rgba(255,255,255,.56) !important; text-decoration: none !important; transition: color .2s ease !important; } .tvs-premium-breadcrumb a:hover { color: #fff !important; } .tvs-breadcrumb-arrow { color: rgba(255,255,255,.25) !important; } .tvs-breadcrumb-current { color: #ff4168 !important; font-weight: 700 !important; } /* ========================================================== QUICK BROWSE / LATEST EPISODES BADGE ========================================================== */ .tvs-premium-eyebrow { position: relative !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 0 10px !important; padding: 6px 11px !important; background: rgba(255,23,76,.10) !important; border: 1px solid rgba(255,23,76,.30) !important; border-radius: 30px !important; color: #ff5575 !important; font-size: 8px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 1.35px !important; } /* PULSING DOT */ .tvs-premium-pulse { display: block !important; width: 6px !important; height: 6px !important; min-width: 6px !important; background: #ff174c !important; border-radius: 50% !important; box-shadow: 0 0 8px rgba(255,23,76,.8) !important; animation: tvsPremiumPulse 1.25s infinite !important; } /* ========================================================== BROWSE HEADING ========================================================== */ .tvs-premium-heading { position: relative !important; z-index: 3 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 27px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: -.4px !important; } .tvs-premium-heading span { color: #ff174c !important; text-shadow: 0 0 15px rgba(255,23,76,.30) !important; } /* ========================================================== SUBTITLE ========================================================== */ .tvs-premium-subtitle { position: relative !important; z-index: 3 !important; margin: 7px 0 0 !important; color: rgba(255,255,255,.48) !important; font-size: 10px !important; line-height: 1.5 !important; } /* ========================================================== ANIMATED DIVIDER ========================================================== */ .tvs-premium-divider { position: relative !important; z-index: 3 !important; width: 80px !important; height: 2px !important; margin: 14px auto 20px !important; overflow: hidden !important; border-radius: 5px !important; background: rgba(255,255,255,.08) !important; } .tvs-premium-divider span { display: block !important; width: 45% !important; height: 100% !important; background: linear-gradient( 90deg, transparent, #ff174c, #ff6c88, transparent ) !important; animation: tvsDividerMove 2s linear infinite !important; } /* ========================================================== BUTTON CONTAINER ========================================================== */ .tvs-premium-buttons { position: relative !important; z-index: 3 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 9px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== PREMIUM CATEGORY BUTTON ========================================================== */ .tvs-premium-button { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 39px !important; margin: 0 !important; padding: 0 13px !important; background: linear-gradient( 180deg, rgba(255,255,255,.095), rgba(255,255,255,.045) ) !important; border: 1px solid rgba(255,255,255,.13) !important; border-radius: 9px !important; color: #f5f5f6 !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 650 !important; text-decoration: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 3px 8px rgba(0,0,0,.13) !important; overflow: hidden !important; transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease !important; } /* REMOVE THEME LINK DECORATION */ .tvs-premium-button::before, .tvs-premium-button::after { content: none !important; display: none !important; } /* BUTTON DOT */ .tvs-button-dot { display: block !important; width: 5px !important; height: 5px !important; min-width: 5px !important; background: #ff174c !important; border-radius: 50% !important; box-shadow: 0 0 7px rgba(255,23,76,.7) !important; } /* BUTTON NAME */ .tvs-button-name { color: inherit !important; } /* BUTTON ARROW */ .tvs-button-arrow { color: rgba(255,255,255,.38) !important; font-size: 12px !important; transition: transform .22s ease, color .22s ease !important; } /* BUTTON HOVER */ .tvs-premium-button:hover { color: #fff !important; border-color: rgba(255,23,76,.48) !important; background: linear-gradient( 180deg, rgba(255,23,76,.18), rgba(255,23,76,.08) ) !important; transform: translateY(-2px) !important; box-shadow: 0 7px 18px rgba(0,0,0,.22), 0 0 16px rgba(255,23,76,.08) !important; } .tvs-premium-button:hover .tvs-button-arrow { color: #ff5575 !important; transform: translateX(3px) !important; } /* ========================================================== INDIVIDUAL SERIAL / SHOW ========================================================== */ .tvs-series-name { position: relative !important; z-index: 3 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 28px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: -.4px !important; } .tvs-series-description { position: relative !important; z-index: 3 !important; margin: 9px auto 0 !important; max-width: 680px !important; color: rgba(255,255,255,.56) !important; font-size: 12px !important; line-height: 1.6 !important; } .tvs-series-description strong { color: #fff !important; font-weight: 650 !important; } /* ========================================================== CHANNEL + TYPE ========================================================== */ .tvs-series-meta { position: relative !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 15px !important; margin: 17px auto 0 !important; padding: 9px 15px !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 10px !important; } .tvs-meta-item { display: flex !important; flex-direction: column !important; gap: 3px !important; text-align: left !important; } .tvs-meta-label { color: rgba(255,255,255,.34) !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 1px !important; } .tvs-meta-value { color: #fff !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 700 !important; } .tvs-meta-separator { width: 1px !important; height: 27px !important; background: rgba(255,255,255,.10) !important; } /* ========================================================== LATEST EPISODE ========================================================== */ .tvs-latest-premium { position: relative !important; z-index: 3 !important; display: flex !important; align-items: center !important; width: 100% !important; max-width: 660px !important; margin: 20px auto 0 !important; padding: 12px 14px !important; background: linear-gradient( 135deg, rgba(255,23,76,.12), rgba(255,255,255,.045) ) !important; border: 1px solid rgba(255,23,76,.22) !important; border-radius: 12px !important; text-align: left !important; transition: transform .25s ease, border-color .25s ease, background .25s ease !important; } .tvs-latest-premium:hover { transform: translateY(-2px) !important; border-color: rgba(255,23,76,.46) !important; background: linear-gradient( 135deg, rgba(255,23,76,.17), rgba(255,255,255,.06) ) !important; } /* LIVE ICON */ .tvs-latest-icon { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; margin-right: 11px !important; background: rgba(255,23,76,.12) !important; border: 1px solid rgba(255,23,76,.28) !important; border-radius: 50% !important; } .tvs-latest-icon span { display: block !important; width: 8px !important; height: 8px !important; background: #ff174c !important; border-radius: 50% !important; animation: tvsPremiumPulse 1.2s infinite !important; } /* LATEST CONTENT */ .tvs-latest-content { flex: 1 1 auto !important; min-width: 0 !important; } .tvs-latest-small { margin: 0 0 3px !important; color: #ff5575 !important; font-size: 7px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 1.1px !important; } .tvs-latest-title { display: inline !important; color: #fff !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 650 !important; text-decoration: none !important; } .tvs-latest-title:hover { color: #ff8098 !important; } .tvs-latest-arrow { margin-left: 10px !important; color: #ff5575 !important; font-size: 18px !important; transition: transform .2s ease !important; } .tvs-latest-premium:hover .tvs-latest-arrow { transform: translateX(4px) !important; } /* ========================================================== ANIMATIONS ========================================================== */ @keyframes tvsPremiumPulse { 0% { box-shadow: 0 0 0 0 rgba(255,23,76,.75); } 70% { box-shadow: 0 0 0 6px rgba(255,23,76,0); } 100% { box-shadow: 0 0 0 0 rgba(255,23,76,0); } } @keyframes tvsDividerMove { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } } @keyframes tvsPanelSweep { 0% { left: -100%; } 45%, 100% { left: 150%; } } /* ========================================================== TABLET ========================================================== */ @media only screen and (max-width:800px) { .tvs-premium-wrap { width: calc(100% - 20px) !important; padding: 23px 18px 24px !important; } } /* ========================================================== MOBILE ========================================================== */ @media only screen and (max-width:600px) { .tvs-premium-wrap { width: calc(100% - 14px) !important; margin: 14px auto 24px !important; padding: 20px 12px 21px !important; border-radius: 15px !important; } .tvs-premium-heading, .tvs-series-name { font-size: 21px !important; } .tvs-premium-eyebrow { font-size: 7px !important; padding: 5px 9px !important; } .tvs-premium-buttons { gap: 6px !important; } .tvs-premium-button { min-height: 34px !important; padding: 0 9px !important; gap: 6px !important; border-radius: 7px !important; font-size: 10px !important; } .tvs-button-arrow { font-size: 10px !important; } .tvs-button-dot { width: 4px !important; height: 4px !important; min-width: 4px !important; } .tvs-series-description { font-size: 10px !important; } .tvs-series-meta { margin-top: 13px !important; padding: 8px 11px !important; } .tvs-meta-value { font-size: 9px !important; } .tvs-latest-premium { margin-top: 15px !important; padding: 10px !important; } .tvs-latest-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; } .tvs-latest-title { font-size: 10px !important; } } /* ========================================================== CLICKABLE SERIES / CHANNEL / TYPE LINKS ========================================================== */ /* MAIN SERIES TITLE */ .tvs-series-name-link { color: #fff !important; text-decoration: none !important; } .tvs-series-name-link:hover { color: #ff5575 !important; } /* INLINE LINKS */ .tvs-inline-link { color: #fff !important; font-weight: 700 !important; text-decoration: none !important; transition: color .2s ease, text-shadow .2s ease !important; } .tvs-inline-link:hover { color: #ff5575 !important; text-shadow: 0 0 8px rgba(255,23,76,.30) !important; } /* CHANNEL + TYPE CLICKABLE BOXES */ .tvs-meta-link { position: relative !important; padding: 5px 8px !important; border-radius: 7px !important; text-decoration: none !important; transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important; } .tvs-meta-link:hover { background: rgba(255,23,76,.12) !important; transform: translateY(-1px) !important; box-shadow: 0 0 12px rgba(255,23,76,.10) !important; } .tvs-meta-link:hover .tvs-meta-value { color: #ff5575 !important; } /* ========================================================== HIDE OLD CATEGORY TITLE + DESCRIPTION KEEP PREMIUM QUICK BROWSE PANEL ========================================================== */ /* Hide old theme category title */ body.category .page-title, body.category .archive-title, body.category .entry-title { display: none !important; } /* Hide old category description text only */ body.category .taxonomy-description > p, body.category .archive-description > p, body.category .category-description > p { display: none !important; } /* Always keep our premium TV panel visible */ body.category .tvs-premium-wrap { display: block !important; } /* ========================================================== FORCE HIDE OLD CATEGORY TITLE ========================================================== */ body.category h1, body.category .page-title, body.category .archive-title, body.category .entry-title, body.category .category-title, body.category .archive-page-title, body.category .cat-title, body.category .title-bar, body.category .archive-header h1, body.category .page-header h1, body.category .category-header h1 { display: none !important; } /* Hide old plain category description text */ body.category .taxonomy-description > p, body.category .archive-description > p, body.category .category-description > p { display: none !important; } /* Always keep our premium panel visible */ body.category .tvs-premium-wrap, body.category .tvs-premium-wrap * { visibility: visible !important; } /* ========================================================== NEW SITE - PREMIUM BLACK MENU BAR HOME + SUN TV + VIJAY TV + ZEE TAMIL + SONY ========================================================== */ /* ========================================================== MENU ITEM SPACING ========================================================== */ .tvmenu-home, .tvmenu-sun, .tvmenu-vijay, .tvmenu-zee, .tvmenu-sony { margin: 0 5px !important; vertical-align: middle !important; } /* ========================================================== COMMON PREMIUM MENU CARDS ========================================================== */ .tvmenu-home > a, .tvmenu-sun > a, .tvmenu-vijay > a, .tvmenu-zee > a, .tvmenu-sony > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; min-height: 70px !important; height: 70px !important; box-sizing: border-box !important; padding: 9px 34px 9px 72px !important; background: linear-gradient( 145deg, #ffffff 0%, #fbfbfd 100% ) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 16px !important; color: #15161b !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: .1px !important; text-decoration: none !important; text-transform: none !important; box-shadow: 0 7px 20px rgba(0,0,0,.18) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important; overflow: visible !important; } /* ========================================================== HOME BUTTON ========================================================== */ .tvmenu-home > a { min-width: 145px !important; padding: 9px 22px 9px 62px !important; border-color: rgba(255,23,76,.62) !important; background: linear-gradient( 145deg, #ffffff 0%, #fffafb 100% ) !important; box-shadow: 0 7px 20px rgba(255,23,76,.14) !important; } /* HOME IMAGE */ .tvmenu-home > a::before { content: "" !important; position: absolute !important; left: 13px !important; top: 50% !important; width: 39px !important; height: 39px !important; transform: translateY(-50%) !important; background-image: url("../images/menu/home.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; pointer-events: none !important; transition: transform .22s ease !important; } /* HOME HOVER */ .tvmenu-home > a:hover { color: #171821 !important; background: linear-gradient( 145deg, #ffffff, #fff1f5 ) !important; border-color: rgba(255,23,76,.82) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 28px rgba(255,23,76,.27), 0 5px 12px rgba(0,0,0,.12) !important; } .tvmenu-home > a:hover::before { transform: translateY(-50%) scale(1.08) !important; } /* ========================================================== CHANNEL LOGO AREA ========================================================== */ .tvmenu-sun > a::before, .tvmenu-vijay > a::before, .tvmenu-zee > a::before, .tvmenu-sony > a::before { content: "" !important; position: absolute !important; left: 14px !important; top: 50% !important; width: 48px !important; height: 48px !important; transform: translateY(-50%) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; pointer-events: none !important; transition: transform .22s ease !important; } /* ========================================================== SUN TV LOGO ========================================================== */ .tvmenu-sun > a::before { background-image: url("../images/menu/sun-tv.png") !important; width: 50px !important; height: 50px !important; } /* ========================================================== VIJAY TV LOGO ========================================================== */ .tvmenu-vijay > a::before { background-image: url("../images/menu/vijay-tv.png") !important; width: 49px !important; height: 49px !important; } /* ========================================================== ZEE TAMIL LOGO ========================================================== */ .tvmenu-zee > a::before { background-image: url("../images/menu/zee-tamil.png") !important; width: 56px !important; height: 48px !important; } /* ========================================================== SONY LOGO ========================================================== */ .tvmenu-sony > a::before { background-image: url("../images/menu/sony.png") !important; width: 49px !important; height: 49px !important; } /* ========================================================== CHANNEL CARD WIDTHS ========================================================== */ .tvmenu-sun > a { min-width: 190px !important; } .tvmenu-vijay > a { min-width: 190px !important; } .tvmenu-zee > a { min-width: 205px !important; } .tvmenu-sony > a { min-width: 190px !important; } /* ========================================================== CHANNEL COLORS ========================================================== */ /* SUN TV */ .tvmenu-sun > a { border-color: rgba(255,158,0,.72) !important; box-shadow: 0 7px 20px rgba(255,158,0,.15) !important; } /* VIJAY TV */ .tvmenu-vijay > a { border-color: rgba(255,62,75,.72) !important; box-shadow: 0 7px 20px rgba(255,62,75,.15) !important; } /* ZEE TAMIL */ .tvmenu-zee > a { border-color: rgba(160,50,255,.70) !important; box-shadow: 0 7px 20px rgba(160,50,255,.15) !important; } /* SONY */ .tvmenu-sony > a { border-color: rgba(30,123,255,.74) !important; box-shadow: 0 7px 20px rgba(30,123,255,.15) !important; } /* ========================================================== CHANNEL HOVER ========================================================== */ .tvmenu-sun > a:hover, .tvmenu-vijay > a:hover, .tvmenu-zee > a:hover, .tvmenu-sony > a:hover { color: #111111 !important; transform: translateY(-3px) !important; } /* SUN HOVER */ .tvmenu-sun > a:hover { background: linear-gradient( 145deg, #fffdf7, #fff7e8 ) !important; border-color: rgba(255,158,0,.92) !important; box-shadow: 0 12px 28px rgba(255,158,0,.28), 0 5px 12px rgba(0,0,0,.12) !important; } /* VIJAY HOVER */ .tvmenu-vijay > a:hover { background: linear-gradient( 145deg, #fffafa, #fff1f2 ) !important; border-color: rgba(255,62,75,.92) !important; box-shadow: 0 12px 28px rgba(255,62,75,.28), 0 5px 12px rgba(0,0,0,.12) !important; } /* ZEE HOVER */ .tvmenu-zee > a:hover { background: linear-gradient( 145deg, #fefaff, #faf0ff ) !important; border-color: rgba(160,50,255,.90) !important; box-shadow: 0 12px 28px rgba(160,50,255,.27), 0 5px 12px rgba(0,0,0,.12) !important; } /* SONY HOVER */ .tvmenu-sony > a:hover { background: linear-gradient( 145deg, #f8fbff, #edf5ff ) !important; border-color: rgba(30,123,255,.92) !important; box-shadow: 0 12px 28px rgba(30,123,255,.27), 0 5px 12px rgba(0,0,0,.12) !important; } /* ========================================================== LOGO HOVER ZOOM ========================================================== */ .tvmenu-sun > a:hover::before, .tvmenu-vijay > a:hover::before, .tvmenu-zee > a:hover::before, .tvmenu-sony > a:hover::before { transform: translateY(-50%) scale(1.07) !important; } /* ========================================================== DROPDOWN ARROWS ========================================================== */ .tvmenu-sun.menu-item-has-children > a::after, .tvmenu-vijay.menu-item-has-children > a::after, .tvmenu-zee.menu-item-has-children > a::after, .tvmenu-sony.menu-item-has-children > a::after { content: "⌄" !important; position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-56%) !important; color: #252830 !important; font-size: 18px !important; line-height: 1 !important; font-weight: 900 !important; pointer-events: none !important; transition: transform .2s ease, color .2s ease !important; } /* ARROW HOVER */ .tvmenu-sun.menu-item-has-children:hover > a::after, .tvmenu-vijay.menu-item-has-children:hover > a::after, .tvmenu-zee.menu-item-has-children:hover > a::after, .tvmenu-sony.menu-item-has-children:hover > a::after { color: #ff174c !important; transform: translateY(-45%) rotate(180deg) !important; } /* ========================================================== PREMIUM DARK DROPDOWN ========================================================== */ .tvmenu-sun > .sub-menu, .tvmenu-vijay > .sub-menu, .tvmenu-zee > .sub-menu, .tvmenu-sony > .sub-menu { min-width: 220px !important; margin-top: 8px !important; padding: 8px !important; background: rgba(15,15,18,.99) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 12px !important; box-shadow: 0 16px 34px rgba(0,0,0,.35) !important; overflow: hidden !important; } /* ========================================================== DROPDOWN LINKS ========================================================== */ .tvmenu-sun > .sub-menu > li > a, .tvmenu-vijay > .sub-menu > li > a, .tvmenu-zee > .sub-menu > li > a, .tvmenu-sony > .sub-menu > li > a { display: block !important; padding: 10px 12px !important; margin: 2px 0 !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #ffffff !important; font-size: 11px !important; line-height: 1.3 !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: none !important; transition: background .2s ease, padding-left .2s ease, color .2s ease !important; } /* DROPDOWN LINK HOVER */ .tvmenu-sun > .sub-menu > li > a:hover, .tvmenu-vijay > .sub-menu > li > a:hover, .tvmenu-zee > .sub-menu > li > a:hover, .tvmenu-sony > .sub-menu > li > a:hover { background: rgba(255,23,76,.15) !important; color: #ffffff !important; padding-left: 16px !important; } /* ========================================================== PREVENT THEME OVERRIDES ========================================================== */ .tvmenu-home > a span, .tvmenu-sun > a span, .tvmenu-vijay > a span, .tvmenu-zee > a span, .tvmenu-sony > a span { color: inherit !important; } .tvmenu-home > a::marker, .tvmenu-sun > a::marker, .tvmenu-vijay > a::marker, .tvmenu-zee > a::marker, .tvmenu-sony > a::marker { display: none !important; } /* ========================================================== TABLET ========================================================== */ @media only screen and (max-width:1100px) { .tvmenu-home > a, .tvmenu-sun > a, .tvmenu-vijay > a, .tvmenu-zee > a, .tvmenu-sony > a { min-width: 148px !important; height: 61px !important; min-height: 61px !important; padding: 8px 29px 8px 61px !important; font-size: 11px !important; } .tvmenu-home > a { min-width: 120px !important; padding: 8px 18px 8px 52px !important; } .tvmenu-home > a::before { left: 10px !important; width: 34px !important; height: 34px !important; } .tvmenu-sun > a::before, .tvmenu-vijay > a::before, .tvmenu-zee > a::before, .tvmenu-sony > a::before { left: 10px !important; width: 41px !important; height: 41px !important; } .tvmenu-zee > a::before { width: 46px !important; } } /* ========================================================== MOBILE ========================================================== */ @media only screen and (max-width:900px) { .tvmenu-home, .tvmenu-sun, .tvmenu-vijay, .tvmenu-zee, .tvmenu-sony { margin: 4px 0 !important; } .tvmenu-home > a, .tvmenu-sun > a, .tvmenu-vijay > a, .tvmenu-zee > a, .tvmenu-sony > a { width: 100% !important; min-width: 0 !important; height: 54px !important; min-height: 54px !important; padding: 8px 32px 8px 56px !important; border-radius: 11px !important; font-size: 11px !important; } .tvmenu-home > a { padding: 8px 20px 8px 54px !important; } .tvmenu-home > a::before { left: 10px !important; width: 34px !important; height: 34px !important; } .tvmenu-sun > a::before, .tvmenu-vijay > a::before, .tvmenu-zee > a::before, .tvmenu-sony > a::before { left: 9px !important; width: 38px !important; height: 38px !important; } .tvmenu-zee > a::before { width: 43px !important; } .tvmenu-sun > .sub-menu, .tvmenu-vijay > .sub-menu, .tvmenu-zee > .sub-menu, .tvmenu-sony > .sub-menu { min-width: 100% !important; margin-top: 4px !important; border-radius: 9px !important; } } /* ========================================================== NEW SITE - FORCE PREMIUM MENU HORIZONTAL + CENTER Put this at the VERY BOTTOM of Additional CSS ========================================================== */ /* Target the exact menu UL containing our premium buttons */ ul:has(> li.tvmenu-home), ul:has(> li.tvmenu-sun), ul:has(> li.tvmenu-vijay) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; float: none !important; } /* Force all 5 top-level buttons into one horizontal row */ ul:has(> li.tvmenu-home) > li.tvmenu-home, ul:has(> li.tvmenu-home) > li.tvmenu-sun, ul:has(> li.tvmenu-home) > li.tvmenu-vijay, ul:has(> li.tvmenu-home) > li.tvmenu-zee, ul:has(> li.tvmenu-home) > li.tvmenu-sony { display: block !important; float: none !important; width: auto !important; clear: none !important; flex: 0 0 auto !important; margin: 0 5px !important; } /* Prevent theme from making top-level links full width */ ul:has(> li.tvmenu-home) > li.tvmenu-home > a, ul:has(> li.tvmenu-home) > li.tvmenu-sun > a, ul:has(> li.tvmenu-home) > li.tvmenu-vijay > a, ul:has(> li.tvmenu-home) > li.tvmenu-zee > a, ul:has(> li.tvmenu-home) > li.tvmenu-sony > a { width: auto !important; float: none !important; } /* ========================================================== BLACK NAVIGATION BAR Center its contents vertically too ========================================================== */ nav:has(.tvmenu-home), .navigation:has(.tvmenu-home), .main-navigation:has(.tvmenu-home), #site-navigation:has(.tvmenu-home) { text-align: center !important; } /* ========================================================== TABLET Allow wrapping instead of vertical stacking ========================================================== */ @media only screen and (max-width:1100px) { ul:has(> li.tvmenu-home) { flex-wrap: wrap !important; justify-content: center !important; gap: 5px !important; } } /* ========================================================== MOBILE Mobile menu may return to vertical layout ========================================================== */ @media only screen and (max-width:900px) { ul:has(> li.tvmenu-home) { display: block !important; width: 100% !important; } ul:has(> li.tvmenu-home) > li.tvmenu-home, ul:has(> li.tvmenu-home) > li.tvmenu-sun, ul:has(> li.tvmenu-home) > li.tvmenu-vijay, ul:has(> li.tvmenu-home) > li.tvmenu-zee, ul:has(> li.tvmenu-home) > li.tvmenu-sony { display: block !important; width: 100% !important; margin: 4px 0 !important; } } /* ========================================================== SKYTAMIL FINAL MOBILE TV MENU COMPACT Desktop / tablet premium menu remains unchanged ========================================================== */ @media only screen and (max-width: 640px) { /* menu list */ #main-navigation .main-navigation-menu { margin: 0 !important; padding: 4px 7px 6px !important; } /* channel rows */ #main-navigation .main-navigation-menu > li.tvmenu-home, #main-navigation .main-navigation-menu > li.tvmenu-sun, #main-navigation .main-navigation-menu > li.tvmenu-vijay, #main-navigation .main-navigation-menu > li.tvmenu-zee, #main-navigation .main-navigation-menu > li.tvmenu-sony { display: block !important; width: 100% !important; margin: 0 0 4px !important; padding: 0 !important; float: none !important; clear: both !important; } #main-navigation .main-navigation-menu > li.tvmenu-zee:last-child, #main-navigation .main-navigation-menu > li.tvmenu-sony:last-child { margin-bottom: 0 !important; } /* compact card */ #main-navigation .main-navigation-menu > li.tvmenu-home > a, #main-navigation .main-navigation-menu > li.tvmenu-sun > a, #main-navigation .main-navigation-menu > li.tvmenu-vijay > a, #main-navigation .main-navigation-menu > li.tvmenu-zee > a, #main-navigation .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; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 4px 10px 4px 48px !important; box-sizing: border-box !important; border-radius: 9px !important; font-size: 11px !important; line-height: 1 !important; font-weight: 800 !important; transform: none !important; box-shadow: 0 2px 7px rgba(0,0,0,.06) !important; } /* HOME icon */ #main-navigation .main-navigation-menu > li.tvmenu-home > a::before { left: 9px !important; top: 50% !important; width: 28px !important; height: 28px !important; transform: translateY(-50%) !important; } /* channel icons */ #main-navigation .main-navigation-menu > li.tvmenu-sun > a::before, #main-navigation .main-navigation-menu > li.tvmenu-vijay > a::before, #main-navigation .main-navigation-menu > li.tvmenu-zee > a::before, #main-navigation .main-navigation-menu > li.tvmenu-sony > a::before { left: 8px !important; top: 50% !important; width: 30px !important; height: 30px !important; transform: translateY(-50%) !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; } /* Zee logo is naturally wider */ #main-navigation .main-navigation-menu > li.tvmenu-zee > a::before { width: 34px !important; } /* disable desktop hover lift on touch */ #main-navigation .main-navigation-menu > li.tvmenu-home > a:hover, #main-navigation .main-navigation-menu > li.tvmenu-sun > a:hover, #main-navigation .main-navigation-menu > li.tvmenu-vijay > a:hover, #main-navigation .main-navigation-menu > li.tvmenu-zee > a:hover, #main-navigation .main-navigation-menu > li.tvmenu-sony > a:hover { transform: none !important; } #main-navigation .main-navigation-menu > li.tvmenu-home > a:hover::before, #main-navigation .main-navigation-menu > li.tvmenu-sun > a:hover::before, #main-navigation .main-navigation-menu > li.tvmenu-vijay > a:hover::before, #main-navigation .main-navigation-menu > li.tvmenu-zee > a:hover::before, #main-navigation .main-navigation-menu > li.tvmenu-sony > a:hover::before { transform: translateY(-50%) !important; } } /* very small phones */ @media only screen and (max-width: 380px) { #main-navigation .main-navigation-menu > li.tvmenu-home > a, #main-navigation .main-navigation-menu > li.tvmenu-sun > a, #main-navigation .main-navigation-menu > li.tvmenu-vijay > a, #main-navigation .main-navigation-menu > li.tvmenu-zee > a, #main-navigation .main-navigation-menu > li.tvmenu-sony > a { height: 38px !important; min-height: 38px !important; padding: 3px 9px 3px 44px !important; font-size: 10px !important; } #main-navigation .main-navigation-menu > li.tvmenu-home > a::before { width: 25px !important; height: 25px !important; } #main-navigation .main-navigation-menu > li.tvmenu-sun > a::before, #main-navigation .main-navigation-menu > li.tvmenu-vijay > a::before, #main-navigation .main-navigation-menu > li.tvmenu-zee > a::before, #main-navigation .main-navigation-menu > li.tvmenu-sony > a::before { width: 27px !important; height: 27px !important; } #main-navigation .main-navigation-menu > li.tvmenu-zee > a::before { width: 31px !important; } } /* ========================================================== SKYTAMIL MOBILE TV MENU CONTENT VISIBILITY FIX Mobile only ========================================================== */ @media only screen and (max-width: 640px) { /* FORCE LINK CONTENT VISIBLE */ #main-navigation .main-navigation-menu > li.tvmenu-home > a, #main-navigation .main-navigation-menu > li.tvmenu-sun > a, #main-navigation .main-navigation-menu > li.tvmenu-vijay > a, #main-navigation .main-navigation-menu > li.tvmenu-zee > a, #main-navigation .main-navigation-menu > li.tvmenu-sony > a { color: #171821 !important; -webkit-text-fill-color: #171821 !important; opacity: 1 !important; visibility: visible !important; text-indent: 0 !important; overflow: visible !important; } /* HOME ICON */ #main-navigation .main-navigation-menu > li.tvmenu-home > a::before { content: "" !important; display: block !important; opacity: 1 !important; visibility: visible !important; filter: none !important; -webkit-filter: none !important; background-image: url("../images/menu/home.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } /* SUN TV */ #main-navigation .main-navigation-menu > li.tvmenu-sun > a::before { content: "" !important; display: block !important; opacity: 1 !important; visibility: visible !important; filter: none !important; -webkit-filter: none !important; background-image: url("../images/menu/sun-tv.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } /* VIJAY TV */ #main-navigation .main-navigation-menu > li.tvmenu-vijay > a::before { content: "" !important; display: block !important; opacity: 1 !important; visibility: visible !important; filter: none !important; -webkit-filter: none !important; background-image: url("../images/menu/vijay-tv.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } /* ZEE TAMIL */ #main-navigation .main-navigation-menu > li.tvmenu-zee > a::before { content: "" !important; display: block !important; opacity: 1 !important; visibility: visible !important; filter: none !important; -webkit-filter: none !important; background-image: url("../images/menu/zee-tamil.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } /* SONY - READY IF YOU ENABLE IT LATER */ #main-navigation .main-navigation-menu > li.tvmenu-sony > a::before { content: "" !important; display: block !important; opacity: 1 !important; visibility: visible !important; filter: none !important; -webkit-filter: none !important; background-image: url("../images/menu/sony.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } /* KEEP DIVIDER SUBTLE */ #main-navigation .main-navigation-menu > li.tvmenu-home > a::after, #main-navigation .main-navigation-menu > li.tvmenu-sun > a::after, #main-navigation .main-navigation-menu > li.tvmenu-vijay > a::after, #main-navigation .main-navigation-menu > li.tvmenu-zee > a::after, #main-navigation .main-navigation-menu > li.tvmenu-sony > a::after { opacity: .55 !important; visibility: visible !important; } } /* ========================================================== SKYTAMIL MOBILE TV MENU FINAL 2X2 GRID Desktop / tablet untouched ========================================================== */ @media only screen and (max-width: 640px) { /* 2 x 2 channel grid */ #main-navigation ul.main-navigation-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; width: 100% !important; margin: 0 !important; padding: 6px 8px 8px !important; box-sizing: border-box !important; } /* individual menu cells */ #main-navigation ul.main-navigation-menu > li.tvmenu-home, #main-navigation ul.main-navigation-menu > li.tvmenu-sun, #main-navigation ul.main-navigation-menu > li.tvmenu-vijay, #main-navigation ul.main-navigation-menu > li.tvmenu-zee { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; } /* compact buttons */ #main-navigation ul.main-navigation-menu > li.tvmenu-home > a, #main-navigation ul.main-navigation-menu > li.tvmenu-sun > a, #main-navigation ul.main-navigation-menu > li.tvmenu-vijay > a, #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; min-width: 0 !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 4px 7px 4px 40px !important; box-sizing: border-box !important; border-radius: 9px !important; color: #171821 !important; -webkit-text-fill-color: #171821 !important; font-size: 10px !important; line-height: 1 !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; opacity: 1 !important; visibility: visible !important; } /* logos */ #main-navigation ul.main-navigation-menu > li.tvmenu-home > a::before, #main-navigation ul.main-navigation-menu > li.tvmenu-sun > a::before, #main-navigation ul.main-navigation-menu > li.tvmenu-vijay > a::before, #main-navigation ul.main-navigation-menu > li.tvmenu-zee > a::before { display: block !important; left: 7px !important; top: 50% !important; width: 27px !important; height: 27px !important; opacity: 1 !important; visibility: visible !important; transform: translateY(-50%) !important; filter: none !important; -webkit-filter: none !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; } /* Zee logo is naturally wider */ #main-navigation ul.main-navigation-menu > li.tvmenu-zee > a::before { width: 30px !important; } /* remove hover movement on phones */ #main-navigation ul.main-navigation-menu > li.tvmenu-home > a:hover, #main-navigation ul.main-navigation-menu > li.tvmenu-sun > a:hover, #main-navigation ul.main-navigation-menu > li.tvmenu-vijay > a:hover, #main-navigation ul.main-navigation-menu > li.tvmenu-zee > a:hover { transform: none !important; } } /* very narrow phones */ @media only screen and (max-width: 340px) { #main-navigation ul.main-navigation-menu > li.tvmenu-home > a, #main-navigation ul.main-navigation-menu > li.tvmenu-sun > a, #main-navigation ul.main-navigation-menu > li.tvmenu-vijay > a, #main-navigation ul.main-navigation-menu > li.tvmenu-zee > a { height: 39px !important; min-height: 39px !important; padding-left: 36px !important; font-size: 9px !important; } #main-navigation ul.main-navigation-menu > li.tvmenu-home > a::before, #main-navigation ul.main-navigation-menu > li.tvmenu-sun > a::before, #main-navigation ul.main-navigation-menu > li.tvmenu-vijay > a::before, #main-navigation ul.main-navigation-menu > li.tvmenu-zee > a::before { width: 24px !important; height: 24px !important; } } /* ========================================================== SKYTAMIL MOBILE FINAL ALIGNMENT FIX Mobile only ========================================================== */ @media only screen and (max-width: 640px) { /* ====================================================== REMOVE BLUE LINE BELOW HAMBURGER NAVIGATION ====================================================== */ #main-navigation-wrap, #main-navigation-wrap.primary-navigation-wrap, .primary-navigation-wrap { border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } #main-navigation { border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } /* Keep hamburger area clean */ #main-navigation-wrap.primary-navigation-wrap { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* ====================================================== BIGG BOSS MOBILE BANNER WIDTH Fix inherited desktop/fixed widths ====================================================== */ .skytamil-show-banners { width: 100% !important; max-width: 100% !important; padding: 0 14px !important; box-sizing: border-box !important; } .skytamil-show-banners__grid { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: none !important; gap: 8px !important; } /* IMPORTANT: cancel every count-1 / count-2 / count-5 desktop width */ .skytamil-show-banners .skytamil-show-banner, .skytamil-show-banners--count-1 .skytamil-show-banner, .skytamil-show-banners--count-2 .skytamil-show-banner, .skytamil-show-banners--count-3 .skytamil-show-banner, .skytamil-show-banners--count-4 .skytamil-show-banner, .skytamil-show-banners--count-5 .skytamil-show-banner { display: block !important; flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* Mobile card itself */ .skytamil-show-banner__mobile { width: 100% !important; min-height: 58px !important; box-sizing: border-box !important; padding: 8px 13px !important; gap: 11px !important; } /* ====================================================== TITLE Keep normal show names on one line ====================================================== */ .skytamil-show-banner__mobile-title { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; font-size: 13px !important; line-height: 1.15 !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Keep arrow properly at right edge */ .skytamil-show-banner__arrow { flex: 0 0 25px !important; width: 25px !important; min-width: 25px !important; margin-left: auto !important; text-align: center !important; } /* ====================================================== LIVE CARD Keep title + LIVE NOW neatly together ====================================================== */ .skytamil-show-banner.is-live .skytamil-show-banner__mobile-title { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow: visible !important; } .skytamil-show-banner__mobile-title small { flex: 0 0 auto !important; white-space: nowrap !important; margin-left: 8px !important; } } /* VERY SMALL PHONES */ @media only screen and (max-width: 380px) { .skytamil-show-banners { padding: 0 10px !important; } .skytamil-show-banner__mobile-title { font-size: 12px !important; } } /* ========================================================== SKYTAMIL CLEAN MOBILE HAMBURGER Remove blue button - keep clean hamburger only ========================================================== */ @media only screen and (max-width: 640px) { /* Remove blue button/card */ #main-navigation .menu-toggle, #main-navigation-wrap .menu-toggle, .primary-navigation-wrap .menu-toggle, button.menu-toggle, .main-navigation-toggle, #main-navigation-toggle { background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; color: #20232a !important; padding: 6px 8px !important; margin: 0 !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; transform: none !important; } /* Remove blue hover/focus/active state */ #main-navigation .menu-toggle:hover, #main-navigation .menu-toggle:focus, #main-navigation .menu-toggle:active, #main-navigation-wrap .menu-toggle:hover, #main-navigation-wrap .menu-toggle:focus, #main-navigation-wrap .menu-toggle:active, button.menu-toggle:hover, button.menu-toggle:focus, button.menu-toggle:active { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #ff174c !important; transform: none !important; } /* Hamburger icon */ .menu-toggle::before, .menu-toggle::after, .menu-toggle span, .menu-toggle svg, .menu-toggle i { color: #20232a !important; fill: #20232a !important; } /* Keep button nicely positioned */ .menu-toggle { margin-left: 8px !important; margin-top: 3px !important; margin-bottom: 3px !important; } } /* ========================================================== SKYTAMIL ABSOLUTE FINAL MOBILE HEADER 2026 Mobile only ========================================================== */ @media only screen and (max-width: 640px) { /* ------------------------------------------------------- LOGO AREA ------------------------------------------------------- */ #masthead .header-main.container { margin: 0 !important; padding: 10px 12px 8px !important; min-height: 0 !important; height: auto !important; border: 0 !important; box-shadow: none !important; background: #fff !important; } #masthead #logo.site-branding { margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; } #masthead #logo.site-branding .custom-logo-link { display: block !important; width: fit-content !important; margin: 0 auto !important; padding: 0 !important; line-height: 0 !important; } #masthead #logo.site-branding img.custom-logo { display: block !important; width: auto !important; max-width: 250px !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; } /* ------------------------------------------------------- NAVIGATION WRAPPER Completely reset inherited Tortuga/mobile shell ------------------------------------------------------- */ #masthead #main-navigation-wrap, #masthead #main-navigation-wrap.primary-navigation-wrap { position: relative !important; display: block !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; /* space for our glitter divider */ padding: 12px 0 5px !important; background: #fff !important; background-image: none !important; border: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ------------------------------------------------------- REMOVE ANY THEME GENERATED BLUE/CYAN LINES ------------------------------------------------------- */ #masthead #main-navigation-wrap::before { content: "" !important; position: absolute !important; left: 14px !important; right: 14px !important; top: 5px !important; display: block !important; width: auto !important; height: 2px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient( 90deg, transparent 0%, #ff174c 12%, #ff8a00 30%, #8b38ff 50%, #ff1493 70%, #ff174c 88%, transparent 100% ) !important; background-size: 200% 100% !important; box-shadow: 0 0 5px rgba(255,23,76,.30), 0 0 9px rgba(139,56,255,.18) !important; opacity: 1 !important; pointer-events: none !important; animation: skytamilFinalGlitterMove 3s linear infinite !important; } #masthead #main-navigation-wrap::after { content: "✦" !important; position: absolute !important; left: 50% !important; top: -2px !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 5px !important; transform: translateX(-50%) !important; border: 0 !important; background: #fff !important; color: #8b38ff !important; font-size: 13px !important; line-height: 16px !important; text-shadow: 0 0 4px #fff, 0 0 7px #8b38ff, 0 0 11px #ff1493 !important; pointer-events: none !important; animation: skytamilFinalStarPulse 1.4s ease-in-out infinite !important; } /* ------------------------------------------------------- NAV ITSELF ------------------------------------------------------- */ #masthead #main-navigation.primary-navigation, #masthead #main-navigation.navigation, #masthead #main-navigation.container { display: block !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ------------------------------------------------------- THERE IS NO MOBILE TOGGLE IN CURRENT HTML Make sure no pseudo/legacy toggle space survives ------------------------------------------------------- */ #masthead .menu-toggle, #masthead .main-navigation-toggle, #masthead #main-navigation-toggle { display: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* ------------------------------------------------------- 2 x 2 CHANNEL GRID ------------------------------------------------------- */ #masthead #main-navigation ul.main-navigation-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 8px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } #masthead #main-navigation ul.main-navigation-menu > li.tvmenu-home, #masthead #main-navigation ul.main-navigation-menu > li.tvmenu-sun, #masthead #main-navigation ul.main-navigation-menu > li.tvmenu-vijay, #masthead #main-navigation ul.main-navigation-menu > li.tvmenu-zee { display: block !important; float: none !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* ------------------------------------------------------- CHANNEL CARDS Preserve your current good appearance ------------------------------------------------------- */ #masthead #main-navigation ul.main-navigation-menu > li.tvmenu-home > a, #masthead #main-navigation ul.main-navigation-menu > li.tvmenu-sun > a, #masthead #main-navigation ul.main-navigation-menu > li.tvmenu-vijay > a, #masthead #main-navigation ul.main-navigation-menu > li.tvmenu-zee > a { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; box-sizing: border-box !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.1 !important; transform: none !important; } /* ------------------------------------------------------- NO GAP BETWEEN HEADER AND BIGG BOSS AREA ------------------------------------------------------- */ #masthead { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; } #masthead + #content.site-content, #content.site-content { margin-top: 0 !important; padding-top: 12px !important; border-top: 0 !important; } } /* ========================================================== GLITTER ANIMATION ========================================================== */ @keyframes skytamilFinalGlitterMove { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes skytamilFinalStarPulse { 0%, 100% { opacity: .55; transform: translateX(-50%) scale(.82); } 50% { opacity: 1; transform: translateX(-50%) scale(1.25); } } /* ========================================================== SKYTAMIL MOBILE BOTTOM GLITTER 2026 Matches existing TOP glitter divider ========================================================== */ @media only screen and (max-width: 640px) { /* * Give the navigation enough room underneath * the 2x2 TV menu for the second glitter divider. */ #masthead #main-navigation.primary-navigation, #masthead #main-navigation.navigation, #masthead #main-navigation.container { position: relative !important; padding-bottom: 19px !important; overflow: visible !important; } /* ====================================================== BOTTOM GRADIENT LINE ====================================================== */ #masthead #main-navigation::before { content: "" !important; position: absolute !important; left: 14px !important; right: 14px !important; bottom: 6px !important; top: auto !important; display: block !important; width: auto !important; height: 2px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient( 90deg, transparent 0%, #ff174c 12%, #ff8a00 30%, #8b38ff 50%, #ff1493 70%, #ff174c 88%, transparent 100% ) !important; background-size: 200% 100% !important; box-shadow: 0 0 5px rgba(255,23,76,.30), 0 0 9px rgba(139,56,255,.18) !important; opacity: 1 !important; pointer-events: none !important; animation: skytamilFinalGlitterMove 3s linear infinite !important; z-index: 5 !important; } /* ====================================================== CENTER GLITTER STAR ====================================================== */ #masthead #main-navigation::after { content: "✦" !important; position: absolute !important; left: 50% !important; bottom: -1px !important; top: auto !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 5px !important; transform: translateX(-50%) !important; border: 0 !important; background: #fff !important; color: #8b38ff !important; font-size: 13px !important; line-height: 16px !important; text-shadow: 0 0 4px #fff, 0 0 7px #8b38ff, 0 0 11px #ff1493 !important; pointer-events: none !important; animation: skytamilFinalStarPulse 1.4s ease-in-out infinite !important; z-index: 6 !important; } /* * Small breathing room between bottom glitter * and the Bigg Boss banner section. */ #masthead + #content.site-content, #content.site-content { padding-top: 14px !important; } } /* ========================================================== SKYTAMIL SEARCH - FINAL CLEAN VERSION 2026 Desktop: SEARCH text button Mobile: magnifying-glass button ========================================================== */ /* ---------------------------------------------------------- FORM ---------------------------------------------------------- */ .search-form { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; max-width: 780px !important; min-height: 54px !important; margin: 20px auto 24px !important; padding: 5px !important; box-sizing: border-box !important; overflow: hidden !important; background: linear-gradient( #ffffff, #ffffff ) padding-box, linear-gradient( 100deg, #ff315f, #ff9b35, #794aff ) border-box !important; border: 1px solid transparent !important; border-radius: 15px !important; box-shadow: 0 6px 20px rgba(20,25,35,.08) !important; transition: box-shadow .20s ease, transform .20s ease !important; } .search-form:focus-within { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(20,25,35,.11), 0 0 0 3px rgba(121,74,255,.08) !important; } /* ---------------------------------------------------------- INPUT ---------------------------------------------------------- */ .search-form .search-field { position: static !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 44px !important; margin: 0 !important; padding: 0 17px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-radius: 10px !important; outline: 0 !important; box-shadow: none !important; color: #20242c !important; font-family: inherit !important; font-size: 14px !important; font-weight: 600 !important; -webkit-appearance: none !important; } .search-form .search-field::placeholder { color: #8d939d !important; opacity: 1 !important; font-weight: 500 !important; } /* ---------------------------------------------------------- CRITICAL BUTTON RESET Cancels Tortuga absolute positioning ---------------------------------------------------------- */ .search-form .search-submit { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; float: none !important; flex: 0 0 118px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 118px !important; min-width: 118px !important; max-width: 118px !important; height: 44px !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box !important; background: linear-gradient( 135deg, #ff174c 0%, #ff315f 45%, #7145ff 100% ) !important; border: 0 !important; border-radius: 10px !important; outline: 0 !important; box-shadow: 0 5px 14px rgba(255,23,76,.22) !important; color: #ffffff !important; cursor: pointer !important; overflow: hidden !important; transform: none !important; transition: transform .18s ease, box-shadow .18s ease !important; } /* ---------------------------------------------------------- REAL TORTUGA SEARCH ICON ---------------------------------------------------------- */ .search-form .search-submit .genericon-search { display: inline-block !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: "Genericons" !important; font-size: 20px !important; line-height: 1 !important; font-weight: normal !important; font-style: normal !important; vertical-align: middle !important; opacity: 1 !important; visibility: visible !important; } /* Desktop SEARCH text */ .search-form .search-submit::after { content: "SEARCH" !important; display: inline-block !important; position: static !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: inherit !important; font-size: 12px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .7px !important; text-transform: uppercase !important; } /* Remove any old artificial icon */ .search-form .search-submit::before { content: none !important; display: none !important; } /* Hide screen-reader text visually */ .search-form .search-submit .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* Hover */ .search-form .search-submit:hover { transform: translateY(-1px) !important; box-shadow: 0 7px 18px rgba(255,23,76,.29) !important; } .search-form .search-submit:active { transform: scale(.97) !important; } /* ========================================================== MOBILE ========================================================== */ @media only screen and (max-width: 640px) { .search-form { width: calc(100% - 28px) !important; max-width: none !important; min-height: 48px !important; margin: 15px auto 20px !important; padding: 4px !important; border-radius: 13px !important; } .search-form .search-field { height: 40px !important; padding: 0 13px !important; font-size: 13px !important; border-radius: 9px 0 0 9px !important; } /* * Mobile = small icon-only button */ .search-form .search-submit { flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 40px !important; padding: 0 !important; gap: 0 !important; border-radius: 9px !important; } /* * Hide SEARCH text on mobile */ .search-form .search-submit::after { content: none !important; display: none !important; } /* * Bigger clean magnifying glass */ .search-form .search-submit .genericon-search { display: block !important; color: #ffffff !important; font-size: 23px !important; line-height: 1 !important; transform: none !important; } } /* ========================================================== SMALL PHONES ========================================================== */ @media only screen and (max-width: 380px) { .search-form { width: calc(100% - 20px) !important; } .search-form .search-submit { flex-basis: 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; } } /* ========================================================== SKYTAMIL SEARCH FLEX LABEL FIX 2026 ========================================================== */ .search-form { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; } /* IMPORTANT: WordPress wraps input inside LABEL */ .search-form > label { display: block !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Input fills all remaining space */ .search-form > label > .search-field, .search-form .search-field { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } /* ========================= DESKTOP ========================= */ @media only screen and (min-width: 641px) { .search-form .search-submit { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; flex: 0 0 118px !important; width: 118px !important; min-width: 118px !important; max-width: 118px !important; height: 44px !important; margin: 0 0 0 5px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; transform: none !important; } } /* ========================= MOBILE ========================= */ @media only screen and (max-width: 640px) { .search-form { width: calc(100% - 28px) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; } .search-form > label { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } .search-form > label > .search-field, .search-form .search-field { width: 100% !important; min-width: 0 !important; } .search-form .search-submit { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 40px !important; margin: 0 0 0 4px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; transform: none !important; } /* Hide SEARCH text only */ .search-form .search-submit::after { content: none !important; display: none !important; } /* Keep theme icon */ .search-form .search-submit .genericon-search { display: block !important; position: static !important; width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: "Genericons" !important; font-size: 22px !important; line-height: 24px !important; text-align: center !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* ========================================================== SKYTAMIL MOBILE SEARCH ICON ABSOLUTE FINAL 2026 Desktop untouched ========================================================== */ @media only screen and (max-width: 640px) { /* * Keep the current good mobile button positioning. */ .search-form .search-submit { position: relative !important; flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 40px !important; margin: 0 0 0 4px !important; padding: 0 !important; display: block !important; overflow: hidden !important; border-radius: 9px !important; background: linear-gradient( 135deg, #ff174c 0%, #ff315f 46%, #7145ff 100% ) !important; box-shadow: 0 4px 12px rgba(255,23,76,.22) !important; font-size: 0 !important; text-indent: 0 !important; } /* * Hide Tortuga / Genericons search symbol completely. */ .search-form .search-submit .genericon-search { display: none !important; } /* * Magnifying glass circle. */ .search-form .search-submit::before { content: "" !important; display: block !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 14px !important; height: 14px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; border: 2.4px solid #ffffff !important; border-radius: 50% !important; background: transparent !important; transform: translate(-58%, -58%) !important; opacity: 1 !important; pointer-events: none !important; } /* * Magnifying glass handle. */ .search-form .search-submit::after { content: "" !important; display: block !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 8px !important; height: 2.4px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 2px !important; background: #ffffff !important; transform: translate(4px, 5px) rotate(45deg) !important; transform-origin: left center !important; opacity: 1 !important; pointer-events: none !important; } } /* Small phones */ @media only screen and (max-width: 380px) { .search-form .search-submit { flex-basis: 44px !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; } } /* ========================================================== SKYTAMIL MOBILE SEARCH SPAN ICON FINAL 2026 ========================================================== */ @media only screen and (max-width: 640px) { /* * Keep current button layout. */ .search-form .search-submit { position: static !important; flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 40px !important; margin: 0 0 0 4px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: linear-gradient( 135deg, #ff174c 0%, #ff315f 45%, #7145ff 100% ) !important; border: 0 !important; border-radius: 9px !important; } /* * Existing theme span becomes the glass circle. */ .search-form .search-submit .genericon-search { position: relative !important; display: block !important; flex: 0 0 auto !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; border: 2.4px solid #ffffff !important; border-radius: 50% !important; background: transparent !important; color: transparent !important; font-size: 0 !important; font-family: Arial, sans-serif !important; line-height: 0 !important; text-indent: 0 !important; overflow: visible !important; transform: translate(-1px,-1px) !important; opacity: 1 !important; visibility: visible !important; } /* * Disable the Genericons font glyph. * This removes the broken C-shaped symbol. */ .search-form .search-submit .genericon-search::before { content: none !important; display: none !important; } /* * Magnifying glass handle. */ .search-form .search-submit .genericon-search::after { content: "" !important; position: absolute !important; display: block !important; width: 8px !important; height: 2.4px !important; right: -6px !important; bottom: -3px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: 0 !important; border-radius: 3px !important; transform: rotate(45deg) !important; transform-origin: left center !important; } /* * No SEARCH text on mobile. */ .search-form .search-submit::before, .search-form .search-submit::after { content: none !important; display: none !important; } } /* ========================================================== SKYTAMIL MOBILE SEARCH PARENT FULL WIDTH 2026 ========================================================== */ @media only screen and (max-width: 640px) { /* * WA-1 wrapper that contains the search widget. * The half-width problem is coming from this level. */ .home.ban-1 { display: block !important; float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* * Search widget itself must occupy the entire row. */ .home.ban-1 > aside.widget_search, .home.ban-1 > #search-2, #search-2.header-widget.widget_search { display: block !important; float: none !important; clear: both !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* * This widget contains only the old blank
. * Do not let it reserve the other half of the row. */ .home.ban-1 > #custom_html-36 { display: none !important; float: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* * Now the form can genuinely use the available width. */ .home.ban-1 #search-2 .search-form { display: flex !important; width: calc(100% - 32px) !important; max-width: none !important; min-width: 0 !important; margin-left: 16px !important; margin-right: 16px !important; box-sizing: border-box !important; } /* * Label/input takes all space except search button. */ .home.ban-1 #search-2 .search-form > label { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; } .home.ban-1 #search-2 .search-field { width: 100% !important; max-width: none !important; min-width: 0 !important; } /* * Preserve the search button we already fixed. */ .home.ban-1 #search-2 .search-submit { flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; } }