/*==================================================
OC LEGEND MEDIA

STYLE.CSS

PART 1

Foundation
Header
Navigation
Breaking News
==================================================*/





/*==========================================
VARIABLES
==========================================*/


:root{


--primary:#0A2342;


--gold-gradient:
linear-gradient(
135deg,
#B8860B,
#D4AF37,
#F4D77A
);



--gold:#D4AF37;


--white:#ffffff;


--light:#F7F8FA;


--border:#E5E7EB;


--text:#1E293B;


--text-light:#64748B;


--danger:#D90429;


--shadow:
0 12px 35px rgba(0,0,0,.08);



--radius:18px;


--transition:.35s ease;


--max-width:1400px;


}








/*==========================================
RESET
==========================================*/


*{


margin:0;

padding:0;

box-sizing:border-box;


}




html{


scroll-behavior:smooth;


}




body{


font-family:"Inter",sans-serif;


background:var(--white);


color:var(--text);


line-height:1.7;


overflow-x:hidden;


}




img{


display:block;

width:100%;


}




a{


text-decoration:none;

color:inherit;


}




ul{


list-style:none;


}




button,
input{


font-family:inherit;


}








/*==========================================
GLOBAL SECTIONS
==========================================*/


section{


padding:70px 5%;


}




.section-header{


max-width:var(--max-width);


margin:0 auto 35px;


display:flex;


justify-content:space-between;


align-items:center;


gap:20px;


}





.section-header h2{


font-size:2rem;


font-weight:800;


color:var(--primary);


}




.section-header a{


color:#B8860B;


font-weight:700;


}









/*==========================================
HEADER
==========================================*/


.site-header{


position:sticky;


top:0;


z-index:9999;


background:white;


border-bottom:1px solid var(--border);


box-shadow:
0 5px 20px rgba(0,0,0,.05);


}







.header-container{


max-width:var(--max-width);


margin:auto;


padding:15px 5%;


display:flex;


align-items:center;


justify-content:space-between;


gap:25px;


}









/* LOGO */


.logo img{


width:75px;


height:75px;


object-fit:contain;


}









/* BRAND */


.brand h1{


font-size:2rem;


font-weight:800;


color:var(--primary);


}



.brand p{


color:var(--text-light);


font-size:.95rem;


}









/*==========================================
HEADER TOOLS
==========================================*/


.header-tools{


display:flex;


align-items:center;


gap:15px;


}









/* LIVE BUTTON */


.live-button{


display:flex;


align-items:center;


gap:8px;


padding:10px 18px;


background:var(--danger);


color:white;


border-radius:50px;


font-weight:700;


}




.live-dot{


width:9px;


height:9px;


background:white;


border-radius:50%;


animation:pulse 1.4s infinite;


}




@keyframes pulse{


50%{


transform:scale(1.5);


opacity:.5;


}


}









/* SEARCH */


.search-form{


display:flex;


overflow:hidden;


border-radius:50px;


background:var(--light);


border:1px solid var(--border);


}




.search-form input{


border:none;


outline:none;


padding:12px 18px;


background:transparent;


width:240px;


}




.search-form button{


border:none;


padding:12px 20px;


background:var(--gold-gradient);


color:var(--primary);


font-weight:700;


}









/*==========================================
NAVIGATION
==========================================*/


.main-nav{


background:var(--primary);


}




.main-nav ul{


max-width:var(--max-width);


margin:auto;


padding:0 5%;


display:flex;


justify-content:center;


flex-wrap:wrap;


}





.main-nav a{


display:block;


padding:17px 15px;


color:white;


font-weight:600;


font-size:.95rem;


}





.main-nav a:hover{


color:#F4D77A;


}









/*==========================================
DROPDOWN
==========================================*/


.main-nav li{


position:relative;


}




.dropdown-menu{


position:absolute;


top:100%;


left:0;


background:white;


min-width:220px;


border-radius:12px;


box-shadow:var(--shadow);


overflow:hidden;


opacity:0;


visibility:hidden;


transform:translateY(10px);


transition:.3s;


}




.dropdown:hover .dropdown-menu{


opacity:1;


visibility:visible;


transform:translateY(0);


}




.dropdown-menu a{


color:var(--text);


padding:14px 18px;


}




.dropdown-menu a:hover{


background:var(--light);


}









/*==========================================
BREAKING NEWS BAR
==========================================*/


.breaking-news{


height:55px;


display:flex;


background:#111827;


overflow:hidden;


}





.breaking-label{


background:var(--danger);


color:white;


font-weight:800;


padding:0 25px;


display:flex;


align-items:center;


}





.breaking-container{


flex:1;


overflow:hidden;


}





.breaking-ticker{


height:55px;


display:flex;


align-items:center;


white-space:nowrap;


color:white;


padding-left:100%;


animation:ticker 35s linear infinite;


}




.breaking-ticker:hover{


animation-play-state:paused;


}




@keyframes ticker{


from{


transform:translateX(0);


}


to{


transform:translateX(-100%);


}


}/*==================================================
OC LEGEND MEDIA

STYLE.CSS

PART 2

Hero
Swiper
Featured Programmes
Latest Content
==================================================*/






/*==========================================
HERO SECTION
==========================================*/


.hero-section{


padding:25px 5% 70px;


}





.hero-container{


max-width:var(--max-width);


margin:auto;


}







/* 16:9 HERO SIZE */


.heroSwiper{


width:100%;


aspect-ratio:16 / 9;


max-height:650px;


border-radius:24px;


overflow:hidden;


background:#000;


box-shadow:var(--shadow);


}







.hero-slide{


position:relative;


height:100%;


}







/* IMAGE AND VIDEO */


.hero-slide img,
.hero-slide video{


width:100%;


height:100%;


object-fit:cover;


}





.hero-slide video{


background:#000;


}









/* HERO OVERLAY */


.hero-overlay{


position:absolute;


inset:0;


display:flex;


flex-direction:column;


justify-content:flex-end;


padding:60px;


background:


linear-gradient(

180deg,

rgba(0,0,0,.05),

rgba(0,0,0,.85)

);


color:white;


}









.hero-category{


display:inline-block;


width:max-content;


padding:7px 18px;


border-radius:50px;


background:var(--gold-gradient);


color:var(--primary);


font-size:.85rem;


font-weight:800;


margin-bottom:15px;


}







.hero-title{


font-size:3rem;


line-height:1.2;


font-weight:800;


max-width:850px;


margin-bottom:15px;


}





.hero-description{


max-width:700px;


color:rgba(255,255,255,.9);


margin-bottom:25px;


font-size:1.05rem;


}








.hero-buttons{


display:flex;


gap:15px;


}





.primary-btn{


padding:13px 30px;


border-radius:50px;


background:var(--gold-gradient);


color:var(--primary);


font-weight:800;


}






.secondary-btn{


padding:12px 28px;


border:2px solid white;


border-radius:50px;


color:white;


}









/* SWIPER */


.heroSwiper .swiper-pagination-bullet{


background:white;


opacity:.6;


}





.heroSwiper .swiper-pagination-bullet-active{


background:#D4AF37;


opacity:1;


}





.heroSwiper .swiper-button-next,
.heroSwiper .swiper-button-prev{


color:white;


}









/*==========================================
FEATURED PROGRAMMES
==========================================*/


.featured-programmes{


background:var(--light);


}







.programme-grid{


max-width:var(--max-width);


margin:auto;


display:grid;


grid-template-columns:


repeat(auto-fit,minmax(280px,1fr));


gap:30px;


}







.programme-card{


background:white;


border-radius:20px;


overflow:hidden;


box-shadow:var(--shadow);


transition:var(--transition);


}







.programme-card:hover{


transform:translateY(-8px);


}







.programme-card-image{


height:240px;


overflow:hidden;


}





.programme-card-image img,
.programme-card-image video{


height:100%;


width:100%;


object-fit:cover;


}







.programme-content{


padding:25px;


}





.programme-badge{


display:inline-block;


background:var(--gold-gradient);


color:var(--primary);


padding:6px 15px;


border-radius:50px;


font-size:.75rem;


font-weight:800;


margin-bottom:15px;


}





.programme-content h3{


font-size:1.3rem;


color:var(--primary);


margin-bottom:10px;


}




.programme-content p{


color:var(--text-light);


}









/*==========================================
LATEST CONTENT
==========================================*/


.latest-content{


background:white;


}







.latest-grid{


max-width:var(--max-width);


margin:auto;


display:grid;


grid-template-columns:


repeat(auto-fit,minmax(300px,1fr));


gap:28px;


}







.latest-card{


background:white;


border-radius:20px;


overflow:hidden;


box-shadow:var(--shadow);


transition:var(--transition);


}




.latest-card:hover{


transform:translateY(-7px);


}







.latest-image{


height:220px;


overflow:hidden;


}






.latest-image img,
.latest-image video{


height:100%;


width:100%;


object-fit:cover;


}







.latest-body{


padding:24px;


}





.latest-body h3{


font-size:1.25rem;


color:var(--primary);


margin-bottom:12px;


}





.latest-body p{


color:var(--text-light);


margin-bottom:15px;


}





.latest-meta{


font-size:.9rem;


color:var(--text-light);


}









/*==========================================
MOBILE HERO
==========================================*/


@media(max-width:768px){



.heroSwiper{


aspect-ratio:16 / 9;


max-height:450px;


}



.hero-overlay{


padding:30px;


}




.hero-title{


font-size:1.8rem;


}



.hero-description{


font-size:.95rem;


}


}/*==================================================
OC LEGEND MEDIA

STYLE.CSS

PART 3

Newsroom
Explore Media
Media Hub Card
==================================================*/







/*==========================================
FROM THE NEWSROOM
==========================================*/


.newsroom-section{


background:var(--light);


}







.newsroom-grid{


max-width:var(--max-width);


margin:auto;


display:grid;


grid-template-columns:


repeat(auto-fit,minmax(300px,1fr));


gap:30px;


}







.news-card{


background:white;


border-radius:20px;


overflow:hidden;


box-shadow:var(--shadow);


transition:var(--transition);


}







.news-card:hover{


transform:translateY(-8px);


}







.news-card-image{


height:240px;


overflow:hidden;


}







.news-card-image img,
.news-card-image video{


width:100%;


height:100%;


object-fit:cover;


}





.news-card-content{


padding:25px;


}





.news-card-content h3{


font-size:1.35rem;


font-weight:800;


color:var(--primary);


margin-bottom:12px;


line-height:1.4;


}





.news-card-content p{


color:var(--text-light);


margin-bottom:15px;


}





.news-meta{


color:var(--text-light);


font-size:.9rem;


}









/*==========================================
EXPLORE OUR MEDIA
==========================================*/


.explore-media{


background:white;


}







.explore-grid{


max-width:var(--max-width);


margin:auto;


display:grid;


grid-template-columns:


repeat(auto-fit,minmax(280px,1fr));


gap:25px;


}







.explore-card{


height:300px;


position:relative;


overflow:hidden;


border-radius:22px;


box-shadow:var(--shadow);


display:block;


}







.explore-card img{


width:100%;


height:100%;


object-fit:cover;


transition:.6s;


}







.explore-card:hover img{


transform:scale(1.1);


}







.explore-overlay{


position:absolute;


inset:0;


display:flex;


flex-direction:column;


justify-content:flex-end;


padding:30px;


background:


linear-gradient(

transparent,

rgba(0,0,0,.85)

);


color:white;


}







.explore-overlay h3{


font-size:1.6rem;


font-weight:800;


margin-bottom:8px;


}





.explore-overlay p{


color:rgba(255,255,255,.9);


}







.explore-card:hover .explore-overlay{


background:


linear-gradient(

transparent,

rgba(10,35,66,.9)

);


}









/*==========================================
MEDIA HUB HOMEPAGE CARD

Navigation Only

==========================================*/


.media-hub-card{


position:relative;


overflow:hidden;


border-radius:22px;


height:320px;


box-shadow:var(--shadow);


}





.media-hub-card img{


width:100%;


height:100%;


object-fit:cover;


}





.media-hub-card .overlay{


position:absolute;


inset:0;


display:flex;


flex-direction:column;


justify-content:flex-end;


padding:35px;


background:


linear-gradient(

transparent,

rgba(0,0,0,.85)

);


color:white;


}







.media-hub-card h3{


font-size:1.8rem;


font-weight:800;


margin-bottom:10px;


}





.media-hub-card p{


color:rgba(255,255,255,.9);


}







.media-hub-card:hover img{


transform:scale(1.08);


transition:.6s;


}









/*==========================================
SECTION LINKS
==========================================*/


.section-header a:hover{


opacity:.7;


}









/*==========================================
TABLET
==========================================*/


@media(max-width:900px){



.newsroom-grid,
.explore-grid{


grid-template-columns:


repeat(2,1fr);


}


}









/*==========================================
MOBILE
==========================================*/


@media(max-width:600px){



.newsroom-grid,
.explore-grid{


grid-template-columns:1fr;


}




.explore-card{


height:260px;


}




.media-hub-card{


height:260px;


}



}/*==================================================
OC LEGEND MEDIA

STYLE.CSS

PART 4

Footer
Social Icons
Loader
Back To Top
Responsive
==================================================*/







/*==========================================
FOOTER
==========================================*/


.site-footer{


background:var(--primary);


color:white;


padding:70px 5% 20px;


}







.footer-container{


max-width:var(--max-width);


margin:auto;


display:grid;


grid-template-columns:


2fr 1fr 1fr 1fr;


gap:40px;


}








/* FOOTER BRAND */


.footer-logo img{


width:80px;


height:80px;


object-fit:contain;


margin-bottom:15px;


}







.footer-brand h3{


font-size:1.4rem;


margin-bottom:15px;


}





.footer-brand p{


max-width:380px;


color:rgba(255,255,255,.8);


}








/* FOOTER TITLES */


.footer-links h3,
.footer-contact h3,
.footer-social h3{


font-size:1.2rem;


margin-bottom:20px;


}








/* FOOTER LINKS */


.footer-links li{


margin-bottom:12px;


}





.footer-links a{


color:rgba(255,255,255,.85);


transition:.3s;


}





.footer-links a:hover{


color:#F4D77A;


}








/* CONTACT */


.footer-contact p{


color:rgba(255,255,255,.85);


margin-bottom:12px;


}









/*==========================================
SOCIAL ICONS

PNG SYSTEM
==========================================*/


.social-icons{


display:flex;


gap:14px;


flex-wrap:wrap;


}





.social-icons a{


width:42px;


height:42px;


display:flex;


align-items:center;


justify-content:center;


background:rgba(255,255,255,.12);


border-radius:50%;


transition:.3s;


}





.social-icons a:hover{


background:var(--gold-gradient);


transform:translateY(-5px);


}





.social-icons img{


width:22px;


height:22px;


object-fit:contain;


}









/*==========================================
FOOTER BOTTOM
==========================================*/


.footer-bottom{


max-width:var(--max-width);


margin:50px auto 0;


padding-top:20px;


border-top:1px solid rgba(255,255,255,.2);


text-align:center;


color:rgba(255,255,255,.7);


}









/*==========================================
PAGE LOADER
==========================================*/


.page-loader{


position:fixed;


inset:0;


background:white;


display:flex;


align-items:center;


justify-content:center;


z-index:99999;


transition:.5s;


}





.page-loader.hidden{


opacity:0;


visibility:hidden;


}







.loader{


width:45px;


height:45px;


border-radius:50%;


border:5px solid var(--light);


border-top-color:#D4AF37;


animation:loading 1s linear infinite;


}







@keyframes loading{


to{


transform:rotate(360deg);


}


}









/*==========================================
BACK TO TOP
==========================================*/


.back-to-top{


position:fixed;


right:30px;


bottom:30px;


width:50px;


height:50px;


border:none;


border-radius:50%;


background:var(--gold-gradient);


color:var(--primary);


font-size:1.5rem;


font-weight:800;


cursor:pointer;


opacity:0;


visibility:hidden;


transition:.3s;


z-index:999;


}





.back-to-top.show{


opacity:1;


visibility:visible;


}





.back-to-top:hover{


transform:translateY(-5px);


}









/*==========================================
FINAL RESPONSIVE
==========================================*/


@media(max-width:1100px){



.footer-container{


grid-template-columns:


repeat(2,1fr);


}



}








@media(max-width:768px){



.header-container{


flex-direction:column;


text-align:center;


}





.header-tools{


width:100%;


justify-content:center;


flex-wrap:wrap;


}







.search-form input{


width:180px;


}







.main-nav ul{


flex-direction:column;


padding:15px;


}





.main-nav a{


padding:12px;


}







.footer-container{


grid-template-columns:1fr;


text-align:center;


}







.footer-brand p{


margin:auto;


}





.social-icons{


justify-content:center;


}



}








@media(max-width:480px){



.search-form{


width:100%;


}





.search-form input{


width:100%;


}





section{


padding:50px 5%;


}





.hero-title{


font-size:1.5rem;


}





.back-to-top{


right:20px;


bottom:20px;


}



}