/* ==========================================================================
APD TV — Awaaz Punjabian Di
Main stylesheet (loads after bootstrap.min.css)
--------------------------------------------------------------------------
1. Fonts 6. Ticker 11. Sidebar widgets
2. Tokens 7. Section heads 12. Video / gallery strips
3. Base 8. Story cards 13. Footer
4. Top bar/header 9. Layouts 14. Dialogs (menu, search)
5. Navigation 10. Ad slots 15. Reveal + utilities
========================================================================== */
/* 1. Fonts — self-hosted variable woff2, split by script with unicode-range.
English pages never download the Gurmukhi files, and vice versa. */
@font-face {
font-family: "Anek Latin";
src: url("../fonts/anek-latin.woff2") format("woff2");
font-weight: 100 800;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-latin.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Anek Gurmukhi";
src: url("../fonts/anek-gurmukhi.woff2") format("woff2");
font-weight: 100 800;
font-display: swap;
unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839;
}
@font-face {
font-family: "Noto Sans Gurmukhi";
src: url("../fonts/noto-sans-gurmukhi.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839;
}
/* 2. Tokens */
:root {
--red: #da0402;
--red-700: #b00302;
--blue: #034196;
--blue-50: #eaf1fb;
--navy: #031138;
--navy-800: #0a1c4f;
--ink: #0e1628;
--ink-2: #39435a;
--muted: #6a7389;
--line: #e3e7ef;
--bg: #f3f5f9;
--surface: #ffffff;
--font-head: "Anek Latin", "Anek Gurmukhi", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Inter", "Noto Sans Gurmukhi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--radius: 12px;
--radius-sm: 8px;
--shadow: 0 1px 2px rgba(3, 17, 56, .06), 0 4px 16px rgba(3, 17, 56, .06);
--shadow-lg: 0 10px 30px rgba(3, 17, 56, .14);
--gap: 1rem;
--header-h: 60px; /* mobile sticky header height */
--nav-h: 50px; /* desktop sticky nav height */
--ease: cubic-bezier(.2, .7, .2, 1);
/* Bootstrap overrides */
--bs-body-font-family: var(--font-body);
--bs-body-color: var(--ink);
--bs-body-bg: var(--bg);
--bs-link-color-rgb: 3, 65, 150;
--bs-border-color: var(--line);
}
/* 3. Base */
html { scroll-padding-top: calc(var(--header-h) + 12px); }
@media (min-width: 992px) { html { scroll-padding-top: calc(var(--nav-h) + 12px); } }
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-head);
font-weight: 700;
line-height: 1.18;
color: var(--ink);
letter-spacing: -.005em;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
/* Gurmukhi needs a touch more size and line height for the top bar and vowel signs.
No italics or letter-spacing — both break Gurmukhi shapes. */
html:lang(pa) { font-size: 106.25%; } /* Gurmukhi reads smaller at the same px — scale rem up ~6% */
html:lang(pa) body { line-height: 1.75; }
html:lang(pa) :is(h1, h2, h3, h4, h5, h6, .story__title) { line-height: 1.42; }
html:lang(pa) * { letter-spacing: 0 !important; font-style: normal !important; }
.container-xl { max-width: 1680px; padding-inline: 16px; } /* 1600px content + gutters */
@media (min-width: 768px) { .container-xl { padding-inline: 24px; } }
@media (min-width: 1400px) { .container-xl { padding-inline: 40px; } }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -.125em; }
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 2000;
background: var(--red); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 12px; color: #fff; }
/* 4. Top bar + header */
.topbar { background: var(--navy); color: rgba(255, 255, 255, .78); font-size: .8125rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 36px; }
.topbar a { color: rgba(255, 255, 255, .85); }
.topbar a:hover { color: #fff; }
.topbar__date { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.topbar__right { display: flex; align-items: center; gap: 1rem; }
.lang-switch { display: inline-flex; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; overflow: hidden; }
.lang-switch a { padding: .15rem .7rem; font-weight: 600; line-height: 1.6; }
.lang-switch a[aria-current="true"] { background: var(--red); color: #fff; }
/* System font for the one Gurmukhi word on English pages, so the Punjabi font file isn't downloaded */
.lang-switch [lang="pa"] { font-family: system-ui, sans-serif; font-weight: 500; }
.social { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.social a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; transition: background .2s; }
.social a:hover { background: rgba(255, 255, 255, .12); }
.site-header { background: var(--surface); position: sticky; top: 0; z-index: 1020; border-bottom: 1px solid var(--line); }
@media (min-width: 992px) { .site-header { position: static; border-bottom: 0; } }
.header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
@media (min-width: 992px) { .header__inner { min-height: 116px; gap: 1.5rem; } }
.brand { display: block; flex: none; line-height: 0; }
.brand img { height: 46px; width: auto; }
@media (min-width: 992px) { .brand img { height: 84px; } }
.header__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
/* When the header ad is shown it sits in the middle and pushes actions right. When it's
switched off, margin-left:auto keeps the actions on the right — no empty hole. */
.header__ad { margin-left: auto; }
.btn-icon {
display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.05rem;
transition: background .2s, color .2s, border-color .2s;
}
.btn-icon:hover { background: var(--blue-50); color: var(--blue); border-color: transparent; }
.btn-live {
display: inline-flex; align-items: center; gap: .5rem; height: 42px; padding: 0 1rem;
border-radius: 999px; background: var(--red); color: #fff; font-family: var(--font-head);
font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase;
box-shadow: 0 6px 16px rgba(218, 4, 2, .28); transition: background .2s, transform .2s var(--ease);
}
.btn-live:hover { background: var(--red-700); color: #fff; transform: translateY(-1px); }
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: none; }
.live-dot::after {
content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #fff;
animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@media (max-width: 575.98px) { .btn-live { padding: 0 .8rem; font-size: .85rem; } .btn-live .btn-live__txt-long { display: none; } }
/* 5. Navigation — horizontal scroller on small screens (app-like), full bar on desktop */
.main-nav { background: var(--blue); position: relative; z-index: 1010; }
@media (min-width: 992px) { .main-nav { position: sticky; top: 0; box-shadow: 0 2px 10px rgba(3, 17, 56, .15); } }
.main-nav__inner { display: flex; align-items: center; min-height: var(--nav-h); }
.nav-list {
display: flex; list-style: none; margin: 0; padding: 0; gap: .15rem;
overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.nav-list::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) { .nav-list { mask-image: none; } }
.nav-list a {
position: relative; display: flex; align-items: center; gap: .4rem; height: var(--nav-h); padding: 0 .85rem;
color: rgba(255, 255, 255, .9); font-weight: 600; font-size: .9375rem; white-space: nowrap; scroll-snap-align: start;
}
.nav-list a::after {
content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 0; height: 3px;
background: var(--red); border-radius: 3px 3px 0 0; transform: scaleX(0); transition: transform .25s var(--ease);
}
.nav-list a:hover { color: #fff; }
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: #fff; }
.main-nav__search { margin-left: auto; color: #fff; background: transparent; border: 0; width: 44px; height: var(--nav-h); }
.main-nav__search:hover { background: rgba(255, 255, 255, .1); }
/* 6. Breaking ticker */
.ticker { background: var(--surface); border-bottom: 1px solid var(--line); }
.ticker__inner { display: flex; align-items: center; gap: .75rem; min-height: 46px; overflow: hidden; }
.ticker__label {
display: inline-flex; align-items: center; gap: .4rem; flex: none; padding: .3rem .7rem;
background: var(--red); color: #fff; border-radius: 6px; font-family: var(--font-head);
font-weight: 700; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
}
.ticker__viewport { position: relative; flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.ticker__track { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; animation: ticker var(--ticker-speed, 50s) linear infinite; }
.ticker__track li { display: flex; align-items: center; white-space: nowrap; font-weight: 500; font-size: .9375rem; }
.ticker__track li::after { content: ""; width: 6px; height: 6px; margin: 0 1.25rem; border-radius: 50%; background: var(--red); }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
/* 7. Section heads */
.section { padding-block: 1.75rem; }
@media (min-width: 992px) { .section { padding-block: 2.5rem; } }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.sec-head h2 {
display: flex; align-items: center; gap: .6rem; margin: 0;
font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); text-transform: uppercase; letter-spacing: .01em;
}
.sec-head h2::before { content: ""; width: 6px; height: 1.1em; background: var(--red); border-radius: 3px; }
.sec-head__link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .875rem; color: var(--blue); white-space: nowrap; }
.sec-head__link:hover { gap: .55rem; }
.sec-head--light h2, .sec-head--light .sec-head__link { color: #fff; }
/* 8. Story cards ------------------------------------------------------------ */
.story { position: relative; display: flex; flex-direction: column; min-width: 0; }
.story__media {
position: relative; overflow: hidden; border-radius: var(--radius); background: #dbe2ee;
aspect-ratio: 16 / 9;
}
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.story:hover .story__media img { transform: scale(1.04); }
.story__body { display: flex; flex-direction: column; gap: .4rem; padding-top: .75rem; min-width: 0; }
.story__cat {
align-self: flex-start; display: inline-block; padding: .18rem .55rem; border-radius: 5px;
background: var(--blue-50); color: var(--blue); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.story__cat--red { background: var(--red); color: #fff; }
.story__title { margin: 0; font-size: 1.125rem; font-weight: 650; line-height: 1.25; }
.story__title a { transition: color .2s; }
.story__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.story:hover .story__title a { color: var(--blue); }
.story__excerpt { margin: 0; color: var(--ink-2); font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.story__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; color: var(--muted); font-size: .8125rem; }
.story__meta span { display: inline-flex; align-items: center; gap: .35rem; }
/* Overlay variant (text on image) */
.story--overlay .story__media { aspect-ratio: 4 / 3; }
.story--overlay .story__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(3, 17, 56, 0) 35%, rgba(3, 17, 56, .55) 62%, rgba(3, 17, 56, .94) 100%);
}
.story--overlay .story__body { position: absolute; inset: auto 0 0 0; padding: 1.1rem; z-index: 1; }
.story--overlay .story__title { color: #fff; }
.story--overlay:hover .story__title a { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.story--overlay .story__meta { color: rgba(255, 255, 255, .78); }
.story--overlay .story__excerpt { color: rgba(255, 255, 255, .85); }
.story--lead .story__title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem); font-weight: 700; line-height: 1.12; }
@media (min-width: 992px) {
.story--lead .story__media { aspect-ratio: auto; height: 100%; min-height: 470px; }
.story--lead .story__body { padding: 1.75rem; }
}
/* Row variant (thumb + text) */
.story--row { flex-direction: row; gap: .85rem; align-items: flex-start; }
.story--row .story__media { flex: none; width: 112px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.story--row .story__body { padding-top: 0; gap: .3rem; }
.story--row .story__title { font-size: 1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .story--row .story__media { width: 132px; } }
/* Compact variant (text only, for “Latest”) */
.story--compact { padding-left: 1.1rem; }
.story--compact::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.story--compact .story__title { font-size: .98rem; font-weight: 600; line-height: 1.35; }
.story--compact .story__meta { margin-top: .2rem; }
/* Video thumbnail decoration */
.play-badge {
position: absolute; z-index: 1; left: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .4rem;
padding: .3rem .6rem .3rem .35rem; border-radius: 999px; background: rgba(3, 17, 56, .78); color: #fff;
font-size: .78rem; font-weight: 600; backdrop-filter: blur(4px);
}
.play-badge .icon-wrap { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--red); font-size: .6rem; }
/* 9. Layouts ---------------------------------------------------------------- */
/* Hero: lead | two secondary | latest list */
.hero { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.hero__latest { background: var(--surface); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.hero__latest h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; text-transform: uppercase; margin-bottom: .9rem; }
.hero__latest h2 .icon { color: var(--red); }
.latest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.latest-list li + li { border-top: 1px dashed var(--line); padding-top: .9rem; }
@media (min-width: 768px) {
.hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero__lead { grid-column: 1 / -1; }
.hero__latest { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
.hero { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; }
.hero__lead { grid-column: 1; grid-row: 1 / span 2; }
.hero__latest { grid-column: 3; grid-row: 1 / span 2; }
.hero__sec .story__title { font-size: 1.2rem; }
.hero__lead, .hero__sec { display: flex; }
.hero__lead > .story, .hero__sec > .story { flex: 1; }
.hero .story--overlay .story__media { flex: 1; aspect-ratio: auto; min-height: 230px; }
}
@media (max-width: 991.98px) { .hero__sec .story__media { aspect-ratio: 16 / 9; } }
/* Main + sidebar. If the sidebar ends up empty (all widgets/ads off) the column collapses. */
.layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
.layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 2.25rem; }
.layout:not(:has(.sidebar > *)) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) { .layout { grid-template-columns: minmax(0, 1fr) 320px; } }
/* Category block: lead card + list */
.cat-block { background: var(--surface); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); }
@media (min-width: 768px) { .cat-block { padding: 1.4rem; } }
.cat-block + .cat-block, .cat-block + .ad, .ad + .cat-block { margin-top: 1.75rem; }
.cat-block__grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.cat-block__list { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 768px) { .cat-block__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.cat-block .story__title { font-size: 1.25rem; }
.cat-block .story--row .story__title { font-size: .98rem; }
/* Auto-fill card grid. Items (including a native in-feed ad) flow, so removing any card leaves no gap. */
.card-grid { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Editorial fallback: shown automatically when the native ad is not printed, so the grid stays full */
.ad-fallback { display: none !important; }
.card-grid:not(:has(.ad-native)) > .ad-fallback, .ads-off .ad-fallback { display: flex !important; }
/* Three category columns */
.tri-cols { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .tri-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tri-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tri-col { background: var(--surface); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); }
.tri-col .sec-head h2 { font-size: 1.2rem; }
.tri-col__list { display: grid; gap: .9rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
/* 10. Ad slots ---------------------------------------------------------------
Markup: Advertisement
…banner
![]()
or AdSense
…
RULES (keeps the design clean when a slot is switched off in the backend):
1. Backend does not print the .ad wrapper at all when the slot is disabled or unsold.
Each slot is its own wrapper, so its spacing disappears with it.
2. Safety net: an .ad with an empty box, or an unfilled AdSense unit, hides itself.
3. Each size is reserved with aspect-ratio, so ads loading late don't shift the page (CLS).
4. Slots sit inside flexible layouts (flex / auto-fill grid / sidebar), never fixed holes.
Preview with ads off: add ?ads=off to the URL.
Slot Desktop Tablet Mobile Placement
header (leaderboard) 728×90 — — Header, next to logo
mobile-top — — 320×100 Under ticker (mobile)
billboard 970×250 728×90 300×250 Between full-width home sections
leader (in-column) 728×90 728×90 300×250 Inside main column
sidebar-top 300×250 — 300×250 Sidebar, first widget
sidebar-sticky 300×600 — — Sidebar, sticks on scroll
infeed (native) card card card Inside news grids
in-article 728×90 728×90 300×250 Inside article body
anchor — — 320×50 Fixed bottom, closable
------------------------------------------------------------------------- */
.ad { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-inline: auto; width: 100%; }
.ad__label { font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.ad__box {
--w: 300; --h: 250;
width: calc(var(--w) * 1px); max-width: 100%; aspect-ratio: var(--w) / var(--h);
overflow: hidden; border-radius: 6px; background: #e9edf4;
}
.ad__box > a, .ad__box img, .ad__box iframe, .ad__box ins { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad:empty,
.ad:not(:has(.ad__box > *)),
.ad:has(ins[data-ad-status="unfilled"]),
.ads-off .ad, .ads-off .ad-native { display: none !important; }
.ad--header { width: auto; display: none; }
.ad--header .ad__box { --w: 728; --h: 90; }
@media (min-width: 992px) { .ad--header { display: flex; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .ad--header .ad__box { --w: 468; --h: 60; } }
.ad--mobile-top { padding: .75rem 0 0; }
.ad--mobile-top .ad__box { --w: 320; --h: 100; }
@media (min-width: 768px) { .ad--mobile-top { display: none; } }
.ad-band { padding-block: 1.25rem; } /* wrapper class used on the .ad itself */
.ad--billboard .ad__box { --w: 300; --h: 250; }
@media (min-width: 768px) { .ad--billboard .ad__box { --w: 728; --h: 90; } }
@media (min-width: 1200px) { .ad--billboard .ad__box { --w: 970; --h: 250; } }
.ad--leader .ad__box { --w: 300; --h: 250; }
@media (min-width: 768px) { .ad--leader .ad__box { --w: 728; --h: 90; } }
.ad--rect .ad__box { --w: 300; --h: 250; }
.ad--sky { display: none; }
.ad--sky .ad__box { --w: 300; --h: 600; }
@media (min-width: 992px) { .ad--sky { display: flex; } }
.ad--anchor {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, .97); box-shadow: 0 -4px 20px rgba(3, 17, 56, .15);
}
.ad--anchor .ad__label { display: none; }
.ad--anchor .ad__box { --w: 320; --h: 50; border-radius: 4px; }
.ad__close {
position: absolute; top: -26px; right: 8px; display: grid; place-items: center; width: 28px; height: 26px;
border: 0; border-radius: 6px 6px 0 0; background: #fff; color: var(--ink); box-shadow: 0 -3px 8px rgba(3, 17, 56, .1); font-size: .8rem;
}
@media (min-width: 992px) { .ad--anchor { display: none; } }
@media (max-width: 991.98px) { body:has(.ad--anchor:not([hidden])) { padding-bottom: 66px; } }
.ad--anchor[hidden] { display: none !important; }
/* Native in-feed ad: looks like a story card, clearly labelled */
.story--sponsored .story__cat { background: #fff4d6; color: #8a5a00; }
.story--sponsored .story__media { outline: 1px solid #f1e3b8; }
/* Demo placeholder creative (remove in production) */
.ad-demo {
display: grid !important; place-items: center; text-align: center; color: #5b6680; font-size: .8rem; font-weight: 600;
background: repeating-linear-gradient(135deg, #eef1f7 0 12px, #e5e9f2 12px 24px);
border: 1px dashed #bfc8d9; border-radius: 6px; line-height: 1.3;
}
.ad-demo small { display: block; font-weight: 500; opacity: .8; }
/* Live TV ------------------------------------------------------------------ */
.live-sec {
position: relative; overflow: hidden; color: #fff;
background: radial-gradient(900px 400px at 85% -10%, rgba(218, 4, 2, .28), transparent 60%),
radial-gradient(700px 400px at -10% 110%, rgba(3, 65, 150, .55), transparent 60%), var(--navy);
}
.live-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .live-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2rem; } }
.live-player {
position: relative; width: 100%; aspect-ratio: 16 / 9;
border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.live-player__btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.live-player img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s, transform .6s var(--ease); }
.live-player:hover img { opacity: 1; transform: scale(1.02); }
.live-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-player__play {
position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center;
width: 78px; height: 78px; border-radius: 50%; background: var(--red); color: #fff; font-size: 1.6rem; padding-left: 5px;
box-shadow: 0 0 0 10px rgba(218, 4, 2, .25), 0 10px 30px rgba(0, 0, 0, .4); transition: transform .25s var(--ease);
}
.live-player:hover .live-player__play { transform: scale(1.08); }
.live-badge {
position: absolute; z-index: 1; left: 1rem; top: 1rem; display: inline-flex; align-items: center; gap: .5rem;
padding: .3rem .75rem; border-radius: 6px; background: var(--red); color: #fff;
font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .08em;
}
.live-player__caption {
position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.1rem 1rem; text-align: left;
background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem;
}
.live-side h3 { color: #fff; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 1rem; }
.schedule { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.schedule li {
display: grid; grid-template-columns: 76px 1fr; gap: .75rem; align-items: center; padding: .7rem .9rem;
border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
}
.schedule time { white-space: nowrap; font-weight: 700; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.schedule strong { display: block; font-weight: 600; line-height: 1.3; }
.schedule small { color: rgba(255, 255, 255, .6); }
.schedule .is-now { background: rgba(218, 4, 2, .18); border-color: rgba(218, 4, 2, .55); }
.schedule .is-now time { color: #fff; }
.now-tag { display: inline-block; margin-left: .4rem; padding: 0 .4rem; border-radius: 4px; background: var(--red); font-size: .65rem; font-weight: 700; letter-spacing: .06em; vertical-align: 2px; }
.btn-outline-light-pill {
display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .35); color: #fff; font-weight: 600; font-size: .9rem; transition: background .2s;
}
.btn-outline-light-pill:hover { background: #fff; color: var(--navy); }
/* 11. Sidebar widgets */
.sidebar { display: flex; flex-direction: column; gap: 1.75rem; }
@media (min-width: 992px) { .sidebar__sticky { position: sticky; top: calc(var(--nav-h) + 1rem); display: flex; flex-direction: column; gap: 1.75rem; } }
.widget { background: var(--surface); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.widget .sec-head h2 { font-size: 1.1rem; }
.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; display: grid; gap: .25rem; }
.rank-list li { counter-increment: rank; position: relative; padding: .7rem 0 .7rem 2.75rem; border-bottom: 1px solid var(--line); }
.rank-list li:last-child { border-bottom: 0; }
.rank-list li::before {
content: counter(rank, decimal-leading-zero); position: absolute; left: 0; top: .55rem;
font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; line-height: 1; color: transparent;
-webkit-text-stroke: 1.5px var(--blue);
}
.rank-list li:nth-child(-n+3)::before { color: var(--red); -webkit-text-stroke: 0; }
.rank-list a { font-weight: 600; font-size: .95rem; line-height: 1.35; display: block; }
.rank-list small { color: var(--muted); font-size: .78rem; }
.follow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.follow-grid a {
display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; border-radius: var(--radius-sm);
color: #fff; font-size: .85rem; font-weight: 600; transition: filter .2s, transform .2s;
}
.follow-grid a:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }
.follow-grid small { display: block; font-weight: 500; opacity: .8; font-size: .7rem; line-height: 1.1; }
.bg-fb { background: #1877f2; } .bg-yt { background: #ff0000; } .bg-ig { background: linear-gradient(45deg, #f09433, #dc2743 60%, #bc1888); }
.bg-x { background: #000; } .bg-wa { background: #25d366; } .bg-tg { background: #229ed9; }
/* 12. Video + gallery strips */
.video-sec { background: #0b1636; color: #fff; }
.video-sec .story__title { color: #fff; }
.video-sec .story:hover .story__title a { color: #9fc2ff; }
.video-sec .story__meta { color: rgba(255, 255, 255, .6); }
.h-scroll-wrap { position: relative; }
.h-scroll {
display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 1.1rem;
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .25rem; overscroll-behavior-x: contain;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; }
@media (min-width: 992px) { .h-scroll { grid-auto-columns: calc((100% - 3 * 1.1rem) / 4); } }
.h-scroll__btns { display: none; gap: .5rem; }
@media (min-width: 992px) { .h-scroll__btns { display: flex; } }
.h-scroll__btn {
display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; transition: background .2s;
}
.h-scroll__btn:hover { background: var(--red); border-color: var(--red); }
.h-scroll__btn:disabled { opacity: .35; pointer-events: none; }
.gallery-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .gallery-grid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 200px); } .gallery-grid > :first-child { grid-row: span 2; } }
.gallery-item { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: #dbe2ee; aspect-ratio: 4 / 3; }
@media (min-width: 992px) { .gallery-item { aspect-ratio: auto; } }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(3, 17, 56, .85)); }
.gallery-item__txt { position: absolute; z-index: 1; left: .9rem; right: .9rem; bottom: .8rem; color: #fff; font-family: var(--font-head); font-weight: 600; line-height: 1.25; }
.gallery-item__count { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .3rem; padding: .15rem .5rem; border-radius: 5px; background: var(--red); font-family: var(--font-body); font-size: .72rem; font-weight: 700; }
/* 13. Footer */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .72); font-size: .9375rem; margin-top: 1rem; }
.site-footer a { color: rgba(255, 255, 255, .8); }
.site-footer a:hover { color: #fff; }
.footer__top { padding-block: 3rem 2rem; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1200px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer__brand img { height: 74px; width: auto; padding: .5rem .8rem; background: #fff; border-radius: var(--radius); }
.footer__brand p { margin: 1rem 0 1.25rem; max-width: 36ch; }
.site-footer h3 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__links--2col { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.footer__contact li { display: flex; gap: .65rem; align-items: flex-start; }
.footer__contact .icon { margin-top: .3rem; color: var(--red); }
.site-footer .social a { background: rgba(255, 255, 255, .08); width: 38px; height: 38px; }
.site-footer .social a:hover { background: var(--red); }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 1.1rem; font-size: .8125rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.btn-advertise { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .55rem 1rem; border-radius: 999px; background: var(--red); color: #fff !important; font-weight: 600; font-size: .875rem; }
.btn-advertise:hover { background: var(--red-700); }
/* 14. Dialogs (mobile menu + search) — native