StarHub brings UEFA Euro 2024™ excitement on SPOTV, brought ...

'; $(this).html(html); }); $('.tv-pass-tile').click(function(){ window.location.href = $('.tile-cta').attr('href'); }); $(window).resize(function(){ $('.clearbutt').css('height',(($('.tv-pass-tile').height()/2)-10)+'px'); }).resize(); } /* Component : Tile Container + Tile */ starlight.lob_hero_card_tiles = function(){ var css = ` .product-tiles h4.paddingTop30{padding-top:5px!important;} .product-tiles .cards-content.personal-content.paddingTop20{padding-top:0px;} .product-tiles p.tile-pricing{margin-top:25px;} .product-tiles div.dotdotdot{height:90px!important;} .product-tiles .eq-ht-cont.cards{ border-radius: 12px; } .product-tiles .cards-img-bg img { border-top-left-radius:12px; border-top-right-radius:12px; } .tile_v1 .col-lg-6 .cards.material .cards-img-bg{ height:auto !important; } .tile_v1 .cards-img-bg.cbgTileImg{ height:auto !important; } /*@media screen and (max-width:767px){ .tile_v1 .col-lg-6 .cards.material .cards-img-bg{ height:auto !important; } .tile_v1 .cards-img-bg.cbgTileImg{ height:auto !important; } }*/ `; $('head').append(''); } /* Component : Featured Banner (Half) */ starlight.msa_onpage_banner = function(){ var css = ` .shared_featurebanner_half .feature-half { background:#250e62; border-radius:14px; -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%); -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; } .shared_featurebanner_half .feature-half .border-lighter-grey{ border-color:transparent; } .shared_featurebanner_half .feature-half .top-headline{ text-transform:uppercase; font-size:14px; color:#ffffff; font-weight:bold; } .shared_featurebanner_half .feature-half .header3{ color:#ffffff; } .shared_featurebanner_half .feature-half .text-content p{ color:#ffffff; } .shared_featurebanner_half .feature-half .text-content .msa-links{ margin-right:7px; } `; $('head').append(''); var msa_banner = $('.shared_featurebanner_half').first(); msa_banner.find('.border-lighter-grey.border1').removeClass('border1'); } /* Component : Plan Banner */ starlight.plan_banner = function(block_seq){ var css = ` .plan-banner-component .cards-img-bg.cbgTileImg { border-top-right-radius: 12px; border-top-left-radius: 12px; } .plan-banner-component .plan-banner-box-content { padding: 20px 30px 20px!important; border-radius: 12px; } .plan-banner-component .plan-banner-box a:hover { color: #fff!important; border-radius: 12px; } .plan-banner-component .plan-banner-box a { border-radius: 12px; color:#ffffff; background-color: #c800a1; } .plan-banner-component .plan-banner-box a h4{ color:#ffffff; } .plan-banner-component .plan-banner-box a #green-hr-line{ background-color: #fff; border-color: #fff; } .plan-banner-component .plan-banner-box:nth-child(1) a { background-color: #c800a1!important; } .plan-banner-component .plan-banner-box:nth-child(2) a { background-color: #1cd4b0; } .plan-banner-component .plan-banner-box:nth-child(3) a { background-color: #685bc7; } .plan-banner-component .plan-banner-box:nth-child(4) a { background-color: #1ed760; } .plan-banner-component .border1{border:0px!important} .plan-banner-component .padding-left-bott {padding-left:25px;padding-bottom:25px;} .plan-banner-component .padding-bott {padding-bottom:25px;} .plan-banner-box a{ -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%); -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; } .plan-banner-box a:hover { box-shadow: 0 5px 5px 0 rgb(0 0 0 / 30%); } `; var firstbanner = $('.plan-banner-component').first(); var firstblock = firstbanner.find('.col-xs-24.col-md-12').first(); var secondblock = firstbanner.find('.col-xs-24.col-md-12').last(); var fb_html = firstblock.html(); var sb_html = secondblock.html(); $('head').append(''); if (block_seq == 'tiles-left'){ firstblock.html(sb_html); secondblock.html(fb_html); var thirdblock = '

'+fb_html+'

'; firstblock.before(thirdblock); secondblock.addClass('hidden-sm hidden-xs padding-left-bott'); } $('.plan-banner-component h1.bold-font').removeClass('paddingTop40'); } /* Component : Masthead */ starlight.video_banner = function(){ if ($('.desktop-masthead .video-btn.dam-video-btn')){ var css = ` .clear30{ clear:both; height:30px !important; } .vid-banner{ position:relative; width:100%; overflow:hidden; } .vid-banner .vid-content{ width:100%; float:left; position:absolute; bottom:30px; z-index:5; text-align:center; padding: 10px; } .vid-banner .vid-content h1{ color:#ffffff !important; font-weight:bold; font-size:38px; line-height: 42px; } .vid-banner .vid-content .m_desc{ width:100%; float:left; position:relative; z-index:5; text-align:center; padding: 20px 10px; } .vid-banner .vid-content .m_desc p{ color:#ffffff !important; font-weight:bold; font-size:16px; line-height:22px; } .vid-banner .vid-content .m_butt{ width:100%; float:left; position:relative; z-index:5; text-align:center; } .vid-banner .vid-content .m_butt .butt2{ margin-left:8px; } .vid-mask{ position:absolute; top:0px; right:0px; bottom:0px; left:0px; z-index:1; background-image:linear-gradient(180deg, #00000014, #00000045); } .vid-back{ position:relative; float:left; width:100%; min-height:500px; padding:0px; margin:0px; z-index:-1; } /* .vid-back video{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } */ .vid-back video{ height: 100%; width: 177.77777778vh; /* 100 * 16 / 9 */ min-width: 100%; min-height: 56.25vw; /* 100 * 9 / 16 */ } .vid-content-ext{ width:100%; float:left; position:relative; text-align:center; padding: 10px; display:none; background:#000000; } .vid-content-ext h1{ color:#ffffff !important; font-weight:bold; font-size:32px; line-height:37px; } .vid-content-ext .m_desc{ width:100%; float:left; position:relative; z-index:5; text-align:center; padding:10px; } .vid-content-ext .m_desc p{ color:#ffffff !important; font-weight:bold; font-size:16px; line-height:22px; } .vid-content-ext .m_butt{ width:100%; float:left; position:relative; z-index:5; text-align:center; margin-bottom: 20px; } .vid-content-ext .m_butt .butt2{ margin-left:8px; } @media screen and (max-width:768px){ .vid-mask{display:none;} .bg-video { display: block !important; } .vid-back{ min-height:350px; } .vid-banner .vid-content{ display:none; } .vid-content-ext{ display:block; } } @media screen and (max-width:605px){ .vid-back video{ height: 100%; width: 100%; min-width: 100%; min-height: 100%; } .vid-content-ext{ margin-top:-10px; } .vid-banner{ margin-top:-10px; } } @media screen and (max-width:580px){ .vid-back video{ margin-top:-10px; } .vid-content-ext{ margin-top:-30px; } } @media screen and (max-width:545px){ .vid-back video{ margin-top:-20px; } .vid-content-ext{ margin-top:-50px; } } @media screen and (max-width:510px){ .vid-back video{ margin-top:-25px; } .vid-content-ext{ margin-top:-60px; } } @media screen and (max-width:495px){ .vid-back video{ margin-top:-30px; } .vid-content-ext{ margin-top:-70px; } } @media screen and (max-width:470px){ .vid-back video{ margin-top:-40px; } .vid-content-ext{ margin-top:-90px; } } @media screen and (max-width:440px){ .vid-back video{ margin-top:-50px; } .vid-content-ext{ margin-top:-110px; } } @media screen and (max-width:400px){ .vid-back video{ margin-top:-60px; } .vid-content-ext{ margin-top:-130px; } } @media screen and (max-width:370px){ .vid-back video{ margin-top:-70px; } .vid-content-ext{ margin-top:-150px; } } @media screen and (max-width:335px){ .vid-back video{ margin-top:-80px; } .vid-content-ext{ margin-top:-170px; } } `; var mp4 = $('.desktop-masthead .video-btn.dam-video-btn') ? $('.desktop-masthead .video-btn.dam-video-btn').attr('data-url') : ''; if (mp4 != ''){ $('head').append(''); var vidtypes = [ {'format' : 'video/mp4','src' : mp4}, {'format' : 'video/ogv','src' : mp4.replace('.mp4','.ogv')}, {'format' : 'video/webm','src' : mp4.replace('.mp4','.webm')}, ]; var vid = document.createElement("video"); vid.setAttribute("class","bg-video"); vid.setAttribute("preload","auto"); vid.setAttribute("playsinline",true); vid.id= "bg-vid"; vid.muted = true; vid.autoplay = true; vid.loop = true; for (var i=0; i 0 ? $('.masthead-main-title h1 pre').html() : ''; var m_desc = $('.blend-extend .mastheadDesc h5') && $('.blend-extend .mastheadDesc h5').length > 0 ? $('.blend-extend .mastheadDesc h5').html() : ''; var m_butt1_link = $('.blend-extend .btn').first() && $('.blend-extend .btn').length > 0 ? $('.blend-extend .btn').first().attr('href') : ''; var m_butt1_label = $('.blend-extend .btn').first() && $('.blend-extend .btn').length > 0 ? $('.blend-extend .btn').first().attr('title') : ''; var m_butt2_link = $('.blend-extend .btn').last() && $('.blend-extend .btn').length > 1 ? $('.blend-extend .btn').last().attr('href') : ''; var m_butt2_label = $('.blend-extend .btn').last() && $('.blend-extend .btn').length > 1 ? $('.blend-extend .btn').last().attr('title') : ''; var butts = ''; if (m_butt1_link && m_butt1_label){ var tgt = ''; if ($('.blend-extend .btn').first().attr('target') == '_blank'){ //tgt = 'target="_blank"'; } butts += ''; } var vid_html = ` `; $('.masthead_v1').html(vid_html); $('.vid-back').append(vid); } } }; starlight.video_banner_extended = function(){ if ($('.desktop-masthead .video-btn.dam-video-btn')){ var css = ` .clear30{ clear:both; height:30px !important; } .vid-banner{ position:relative; width:100%; overflow:hidden; } .vid-banner .vid-content{ width:100%; float:left; position:relative; z-index:5; text-align:center; padding: 10px 10px 25px 10px; background: #ffffff; } .vid-banner .vid-content h1{ color:#3d3d3b !important; font-weight:bold; font-size:38px; line-height: 42px; } .vid-banner .vid-content .m_desc{ width:100%; float:left; position:relative; z-index:5; text-align:center; padding: 20px 10px; } .vid-banner .vid-content .m_desc p{ color:#3d3d3b !important; font-weight:bold; font-size:16px; line-height:22px; } .vid-banner .vid-content .m_butt{ width:100%; float:left; position:relative; z-index:5; text-align:center; } .vid-banner .vid-content .m_butt .butt2{ margin-left:8px; } .vid-mask{ position:absolute; top:0px; right:0px; bottom:0px; left:0px; z-index:1; } .vid-back{ position:relative; float:left; width:100%; min-height:400px; padding:0px; margin:0px; z-index:-1; } /* .vid-back video{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } */ .vid-back video{ height: 100%; width: 177.77777778vh; /* 100 * 16 / 9 */ min-width: 100%; min-height: 56.25vw; /* 100 * 9 / 16 */ } .vid-content-ext{ width:100%; float:left; position:relative; text-align:center; padding: 10px; display:none; background:#000000; } .vid-content-ext h1{ color:#ffffff !important; font-weight:bold; font-size:32px; line-height:37px; } .vid-content-ext .m_desc{ width:100%; float:left; position:relative; z-index:5; text-align:center; padding:10px; } .vid-content-ext .m_desc p{ color:#ffffff !important; font-weight:bold; font-size:16px; line-height:22px; } .vid-content-ext .m_butt{ width:100%; float:left; position:relative; z-index:5; text-align:center; margin-bottom: 20px; } .vid-content-ext .m_butt .butt2{ margin-left:8px; } @media screen and (max-width:768px){ .vid-mask{display:none;} .bg-video { display: block !important; } .vid-back{ min-height:350px; } .vid-banner .vid-content{ display:none; } .vid-content-ext{ display:block; } } @media screen and (max-width:605px){ .vid-back video{ height: 100%; width: 100%; min-width: 100%; min-height: 100%; } .vid-content-ext{ margin-top:-10px; } .vid-banner{ margin-top:-10px; } } @media screen and (max-width:580px){ .vid-back video{ margin-top:-10px; } .vid-content-ext{ margin-top:-30px; } } @media screen and (max-width:545px){ .vid-back video{ margin-top:-20px; } .vid-content-ext{ margin-top:-50px; } } @media screen and (max-width:510px){ .vid-back video{ margin-top:-25px; } .vid-content-ext{ margin-top:-60px; } } @media screen and (max-width:495px){ .vid-back video{ margin-top:-30px; } .vid-content-ext{ margin-top:-70px; } } @media screen and (max-width:470px){ .vid-back video{ margin-top:-40px; } .vid-content-ext{ margin-top:-90px; } } @media screen and (max-width:440px){ .vid-back video{ margin-top:-50px; } .vid-content-ext{ margin-top:-110px; } } @media screen and (max-width:400px){ .vid-back video{ margin-top:-60px; } .vid-content-ext{ margin-top:-130px; } } @media screen and (max-width:370px){ .vid-back video{ margin-top:-70px; } .vid-content-ext{ margin-top:-150px; } } @media screen and (max-width:335px){ .vid-back video{ margin-top:-80px; } .vid-content-ext{ margin-top:-170px; } } `; var mp4 = $('.desktop-masthead .video-btn.dam-video-btn') ? $('.desktop-masthead .video-btn.dam-video-btn').attr('data-url') : ''; if (mp4 != ''){ $('head').append(''); var vidtypes = [ {'format' : 'video/mp4','src' : mp4}, {'format' : 'video/ogv','src' : mp4.replace('.mp4','.ogv')}, {'format' : 'video/webm','src' : mp4.replace('.mp4','.webm')}, ]; var vid = document.createElement("video"); vid.setAttribute("class","bg-video"); vid.setAttribute("preload","auto"); vid.setAttribute("playsinline",true); vid.id= "bg-vid"; vid.muted = true; vid.autoplay = true; vid.loop = true; for (var i=0; i 0 ? $('.masthead-main-title h1 pre').html() : ''; var m_desc = $('.blend-extend .mastheadDesc h5') && $('.blend-extend .mastheadDesc h5').length > 0 ? $('.blend-extend .mastheadDesc h5').html() : ''; var m_butt1_link = $('.blend-extend .btn').first() && $('.blend-extend .btn').length > 0 ? $('.blend-extend .btn').first().attr('href') : ''; var m_butt1_label = $('.blend-extend .btn').first() && $('.blend-extend .btn').length > 0 ? $('.blend-extend .btn').first().attr('title') : ''; var m_butt2_link = $('.blend-extend .btn').last() && $('.blend-extend .btn').length > 1 ? $('.blend-extend .btn').last().attr('href') : ''; var m_butt2_label = $('.blend-extend .btn').last() && $('.blend-extend .btn').length > 1 ? $('.blend-extend .btn').last().attr('title') : ''; var butts = ''; if (m_butt1_link && m_butt1_label){ var tgt = ''; if ($('.blend-extend .btn').first().attr('target') == '_blank'){ //tgt = 'target="_blank"'; } butts += ''; } var vid_html = ` `; $('.masthead_v1').html(vid_html); $('.vid-back').append(vid); } } }; /* Component : Card Tiles with Tab Container + Card Tile with Tab Tile */ starlight.plan_card_tiles = function(){ var css = ` .mobile-feature.noBG .mobile-feature-content{ background-color:transparent; margin-top:60px; } .mobile-feature .mfeature-img{ margin-top:110px; } .mobile-feature .mfeature-img img{ max-width:75%; } .cardtile_with_tab_tiles_v1{ margin-top:30px; } .desktop-tile { padding: 0px; } .tile-wrapper{ width:250px; } .tile-wrapper.recommendedPlanCont{ margin-top:0px !important; } .plan-card-tile .front-side { border-radius: 12px; border: 3px solid #250e62; } .plan-card-tile-cont.flip .back-side { border-radius: 12px; border: 3px solid #250e62; } .plan-card-tile .data-plan-name{ min-height:0px; } .plan-card-tile .data-plan-details{ height:auto; } .sel-plan { position: absolute; bottom: 0px; right: 0px; left: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .sel-plan a:hover { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .plan-card-tile .front-side .btnSeeMoreCont, .plan-card-tile .back-side .btnSeeMoreCont { height: 25px; position: absolute; bottom: 70px; width: 100%; left: 0px; } .plan-tile-tabs ul li:first-child, .plan-tile-tabs ul li:nth-child(2){ margin:0px 5px !important; } .plan-tile-tabs ul li.active a, .plan-tile-tabs ul li.active a:focus, .plan-tile-tabs ul li.active a:hover { background-color: #250e62 !important; color: #ffffff !important; border-radius: 4px; } .select-picker.float-label .bootstrap-select, .select-picker.float-label .dropdown-toggle{ background-color:#250e62 !important; border-color:#250e62 !important; border:none; } @media screen and (max-width: 1023px){ .tile-main-wrapper { padding: 0px 0px !important; } .plan-tile-carousel .jcarousel-control-prev,.plan-tile-carousel .jcarousel-control-next{ top:40%; } } @media screen and (max-width: 991px){ .plan-card-tile .recommended-plan{ margin-top:-20px; } } @media screen and (max-width: 767px){ .sel-plan-tile .bs-caret{ position: absolute; right: 10px; top: 20px; } .sel-plan-tile-cont .select-picker .bootstrap-select.btn-group .dropdown-toggle .filter-option{ padding-top:0px; margin-top:0px; } } `; $('head').append(''); $('.plan-tile-carousel .tile-wrapper.recommendedPlanCont').removeClass('recommendedPlanCont'); $('.sel-plan-tile .bs-caret').html(''); } /* Component : Event Info Tiles */ starlight.event_info_tiles = function(){ var css = ` .event-info-img .media-object{ width:auto; height:auto; } .event-info-img .img-circle.center{ border-radius:0px; } `; $('head').append(''); } /* Component : TV offer boxes and list bullets */ starlight.tv_boxes_and_bullets = function(){ var css = ` *{ box-sizing: border-box; /* this will keep the padding in check and prevent it from pushing the boxes down */ } .clear20{ clear:both; height:20px; /* 20px clearance for floats */ } .main-container{ max-width:100%; width:600px; font-family:'Lato'; margin:auto; border:1px solid #cccccc; /* Just to draw an outline */ padding:30px; position:relative; } .accent-1{ width:100%; position:relative; /* So that the box title can be absolutely-positioned within it */ float:left; /* So that the other box can be next to it if there's enuff space */ padding:20px 10px 0px 10px; background:#ffffff; transition:width 0.2s; border:1px solid #685bc7; margin-top:25px; } .accent-1 > .title{ position:absolute; top:-15px; right:10px; text-transform:uppercase; background:#685bc7; color:#ffffff; padding:1px 8px; font-weight:normal; font-size:12px; } .accent-1 > p{ font-size:14px; color:#685bc7; line-height: 18px; font-weight:bold; } .accent-2{ width:100%; position:relative; /* So that the box title can be absolutely-positioned within it */ float:left; padding:20px 10px 0px 10px; background:#ffffff; margin-top:25px; transition:width 0.2s; border:1px solid #C800a1; } .accent-2 a{ color:#C800a1 !important; text-decoration:underline !important; } .accent-2 a:hover{ text-decoration:none !important; } .accent-2 > .title{ position:absolute; top:-15px; right:10px; text-transform:uppercase; background:#C800a1; color:#ffffff; padding:1px 8px; font-weight:normal; font-size:12px; } .accent-2 > p{ font-size:14px; color:#C800a1; line-height: 18px; font-weight:bold; } ul.no_bullet { list-style-type: none; font-size: 12px; line-height: 18px; padding: 0px; margin: 0px; } ul.no_bullet > li{ padding-left: 35px; padding-bottom: 10px; } li.portal { background: url(/content/dam/starhub/2021/personal/tvplus/passes/portal-bullet.png) no-repeat left top; } li.tvplusapp { background: url(/content/dam/starhub/2021/personal/tvplus/passes/tv-plus-app.png) no-repeat left top; } li.bbc { background: url('/content/dam/starhub/2021/personal/tvplus/passes/bbc-player-app.png') no-repeat left top; } li.bein { background: url('/content/dam/starhub/2021/personal/tvplus/passes/bein-sports-connect-app.png') no-repeat left top; } li.hotstar { background: url('/content/dam/starhub/2021/personal/tvplus/passes/hotstar-app.png') no-repeat left top; } `; $('head').append(''); } /* End Starlight object */