/* Theme Name: Urdu News Theme URI: https://example.com/urdu-news Author: 3Media Design Author URI: https://3mediad.com/ Description: Custom RTL Urdu news portal theme with a magazine-style home page and category listing pages. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Tested up to: 6.6 Text Domain: urdu-news Tags: news, magazine, right-to-left, custom-menu, featured-images, custom-logo, translation-ready */ /* ------------------------------------------------------------- 0. LOCAL FONTS (Noto Nastaliq Urdu — OFL licensed, bundled locally; see assets/fonts/OFL.txt. No external/Google Fonts request.) Loading pattern matches the reference site: the page renders in the system-font fallback first (--fallback), and JS swaps the type variables over to the Nastaliq webfont only once it has actually finished downloading, by adding .fonts-loaded to — see swapFontsWhenReady() in assets/js/main.js. This avoids a flash of invisible text while the font is still loading. ------------------------------------------------------------- */ @font-face { font-family: "Jameel Noori Nastaleeq"; src: url("assets/fonts/Jameel-Noori-Nastaleeq.ttf") format("truetype"); font-weight: normal; } /* ------------------------------------------------------------- 0b. RESET / BASE ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } :root{ --fallback: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; --sansTypeface: var(--fallback); --serifTypeface: var(--sansTypeface); --color-primary:#a3095f; --color-primary-dark:#7e0949; --color-logo:#c81f6e; --color-accent:#0b57d0; --color-text:#1a1a1a; --color-muted:#767676; --color-border:#e6e6e6; --color-bg:#ffffff; --color-bg-alt:#f5f5f5; --color-dark:#181d2b; --font-body: var(--sansTypeface); --font-heading: var(--serifTypeface); --container: 1330px; --radius-sm: 2px; } .fonts-loaded{ --sansTypeface: "Jameel Noori Nastaleeq", var(--fallback); --serifTypeface: var(--sansTypeface); } html{ -webkit-text-size-adjust:100%; height:100%; } body{ padding: 0 !important; margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:16px; line-height:1.9; direction:rtl; text-align:right; min-height:100%; display:flex; flex-direction:column; } .site-content{ flex:1 0 auto; } #scroll-menu {display: none;} img{ max-width:100%; height:auto; display:block; } /* ------------------------------------------------------------- 0c. LAZY-LOAD FADE-IN Every content image (cards, hero, single-post thumbnail, etc.) already gets native browser lazy-loading via loading="lazy". This just makes each image ease in once it's actually loaded (main.js adds .is-loaded) instead of popping in abruptly. ------------------------------------------------------------- */ .site-content img{ opacity:0; transition:opacity .45s ease; } .site-content img.is-loaded{ opacity:1; } a{ color:inherit; text-decoration:none; } a:hover{ color:var(--color-primary); } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,h5{ font-family:var(--font-heading); font-weight:700; margin:0 0 .5em; line-height:1.5; } p{ margin:0 0 1em; } button, input, select{ font-family:inherit; } .container{ max-width:var(--container); margin:0 auto; padding:0 48px; } .screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } .skip-link{ position:absolute; right:-999px; top:0; background:#000; color:#fff; padding:10px 16px; z-index:9999; } .skip-link:focus{ right:10px; } /* ------------------------------------------------------------- 1. TOPBAR ------------------------------------------------------------- */ .top-bar{ background:#fff; font-size:13px; color:var(--color-muted); } .top-bar .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:4px 48px; line-height:1.4; } .top-bar__date{ color:var(--color-muted); flex:1 1 auto; font-size:12.5px; font-family:Arial, Helvetica, sans-serif; } .top-bar__social{ display:flex; align-items:center; gap:8px; } .top-bar__social a{ width:26px; height:26px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; } .top-bar__social svg{ width:13px; height:13px; fill:#fff; } .top-bar__social-link--youtube{ background:#ff0000; } .top-bar__social-link--facebook{ background:#1877f2; } .top-bar__social-link--instagram{ background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .top-bar__social-link--x{ background:#000; } .masthead{ background:#fff; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); } .masthead .container{ display:flex; align-items:center; justify-content:space-between; padding:12px 48px; min-height:56px; } .masthead .container.masthead__grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; justify-content:normal; } .masthead__grid .site-branding{ justify-content:center; } .masthead__grid .masthead__lang-col{ display:flex; justify-content:flex-start; } .masthead__grid .masthead__actions{ justify-self:end; } .primary-nav .masthead__actions--mobile{ display:none; } .site-branding{ display:flex; align-items:center; line-height:0; } .site-branding .custom-logo, .site-branding img{ display:block; max-height:50px; width:auto; } .site-branding .site-title{ font-size:28px; margin:0; color:var(--color-logo); font-weight:700; letter-spacing:.5px; line-height:1.2; } .site-branding .site-title a{ color:var(--color-logo); } .masthead__actions{ display:flex; align-items:center; gap:10px; font-family: Arial, Helvetica, sans-serif;} .btn{ display:inline-block; padding:8px 24px; border-radius:2px; font-size:18px; font-weight:600; border:1px solid var(--color-primary); color:var(--color-primary); background:#fff; cursor:pointer; line-height:1.4; } .btn:hover{ color:var(--color-primary); opacity:.85; } .btn--solid{ background:var(--color-accent); color:#fff !important; border-color:var(--color-accent); } .btn--solid:hover{ opacity:.9; } .btn--epaper{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, #0b57d0, #063a8c); border:none; border-radius:22px; padding:9px 20px; box-shadow:0 4px 10px rgba(11,87,208,.35); transition:transform .2s ease, box-shadow .2s ease; font-size: 14px; } .btn--epaper:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(11,87,208,.45); opacity:1; } .btn--epaper .btn--epaper__icon{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.2); } .btn--epaper svg{ width:13px; height:13px; fill:#fff; flex:0 0 auto; } /* ------------------------------------------------------------- 2. PRIMARY NAVIGATION ------------------------------------------------------------- */ .primary-nav{ background:#c1121f; position:sticky; top:0; z-index:90; box-shadow:0 2px 6px rgba(0,0,0,.12); } .primary-nav .container{ display:flex; align-items:stretch; gap:4px; padding:0 48px; } .menu-toggle{ display:none; background:none; border:0; color:#fff; font-size:22px; padding:8px 4px; cursor:pointer; } .search-toggle{ background:none; border:0; color:#fff; padding:0 14px; cursor:pointer; display:flex; align-items:center; } .search-toggle svg{ width:20px; height:20px; fill:#fff; } .primary-menu{ display:flex; flex:1 1 auto; } .primary-menu > li{ position:relative; } .primary-menu > li > a{ display:flex; align-items:center; min-height:46px; padding:0 15px; color:#fff; font-size:20px; line-height:1.3; white-space:nowrap; font-weight:700; border-inline-start:1px solid rgba(255,255,255,.14); } .primary-menu > li:first-child > a{ border-inline-start:0; } .primary-menu > li:hover > a, .primary-menu > li.current-menu-item > a{ background:rgba(0,0,0,.25); } .primary-menu ul{ position:absolute; top:100%; right:0; min-width:210px; background:#ff5764; display:none; z-index:50; box-shadow:0 8px 16px rgba(0,0,0,.25); } .primary-menu li:hover > ul{ display:block; } .primary-menu ul li a{ transition: all 0.3s ease; display:block; padding:10px 16px; color:#fff; font-size:20px; line-height:1.4; border-bottom:1px solid rgba(255,255,255,.1); border-inline-start:0; } .primary-menu ul li a:hover{ background: #910d17; } .header-search{ background:#fff; box-shadow:0 10px 20px rgba(0,0,0,.15); padding:14px 0; } .header-search .searchform{ max-width:520px; margin-inline-start:auto; } .header-search .searchform input[type=search]{ padding:10px 12px; } /* ------------------------------------------------------------- 3. SECTION HEADINGS ------------------------------------------------------------- */ .section-title{ font-size:21px; font-weight:700; color:var(--color-text); border-bottom:1px solid var(--color-border); padding-bottom:12px; margin:0 0 20px; position:relative; } .section-title::after{ content:""; position:absolute; right:0; bottom:-1px; width:56px; height:2px; background:var(--color-primary); } .section{ padding:30px 0; } .section--alt{ background:var(--color-bg-alt); } .section--dark{ background:var(--color-dark); color:#fff; } .section--dark .section-title{ color:#fff; border-color:rgba(255,255,255,.15); } .section__more{ text-align:center; margin-top:22px; } .section__more .btn{ border-radius:20px; padding:9px 30px; border-color:var(--color-border); color:var(--color-text); } .section__more .btn:hover{ border-color:var(--color-primary); color:var(--color-primary); } /* ------------------------------------------------------------- 4. CARDS / TEASERS ------------------------------------------------------------- */ .card{ display:block; } .card__thumb{ overflow:hidden; margin-bottom:10px; background:#eee; } .card__thumb img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:opacity .45s ease, transform .3s ease; } .card:hover .card__thumb img{ transform:scale(1.04); } .card__title{ font-size:20px; margin:0 0 6px; font-weight:800; line-height:1.7; } .card__title a{ display:block; } .card:hover .card__title a{ color:var(--color-primary); } .card__meta{ font-size:12px; color:var(--color-muted); font-family: Arial, Helvetica, sans-serif;} .card__kicker{ display:block; font-size:20px; color:var(--color-primary); margin-bottom:5px; font-weight:600; position: relative;} .card__kicker::after { content: ""; position: absolute; top: calc(50% - 8px); right: -8px; width: 2px; height: 16px; background: #1877f2; } /* small square-thumb row: used for "top stories" columns — thumbnail sits at the line-end (left) with the headline at the line-start (right). */ .card--row{ display:flex; flex-direction:row-reverse; gap:10px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--color-border); } .card--row:first-child{ padding-top:0; } .card--row .card__thumb{ flex:0 0 72px; width:72px; margin-bottom:0; } /* .card--row .card__thumb img{ aspect-ratio:1/1; } */ .card--row .card__title{ font-size:15px; line-height:2.3; margin:0; font-weight:800; } /* wide row used in the main category article list: thumbnail at the line-start (right), headline + excerpt at the line-end (left). */ .article-row{ display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--color-border); } .article-row:first-child{ padding-top:0; } .article-row .card__thumb{ flex:0 0 220px; width:220px; margin-bottom:0; } .article-row .card__thumb img{ aspect-ratio:16/10; } .article-row .card__body{ flex:1 1 auto; } .article-row .card__title{ font-size:24px; font-weight:700; margin:0 0 8px; } .article-row .card__excerpt{ color:var(--color-muted); font-size:22px; line-height:1.8; margin-bottom:8px; } .grid{ display:grid; gap:24px; } .grid--2{ grid-template-columns:repeat(2,1fr); } .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--4{ grid-template-columns:repeat(4,1fr); } /* ------------------------------------------------------------- 4b. TRENDING SLIDER (full-width image-card carousel, 4 up) ------------------------------------------------------------- */ .trending-slider__wrap{ position:relative; display:flex; align-items:center; gap:14px; } .trending-slider__viewport{ flex:1 1 auto; overflow:hidden; } .trending-slider__track{ display:flex; gap:24px; transition:transform .35s ease; will-change:transform; } .trending-slider__item{ flex:0 0 calc(25% - 18px); min-width:0; } .trending-slider__item .card__meta{ display:none; } .trending-slider__item .card__title{ font-size:20px; line-height:1.7; } .trending-slider__arrow{ flex:0 0 40px; width:40px; height:40px; border-radius:50%; border:1px solid var(--color-border); background:#fff; color:var(--color-text); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, color .2s ease, opacity .2s ease; } .trending-slider__arrow svg{ width:16px; height:16px; fill:currentColor; } .trending-slider__arrow:hover:not(:disabled){ background:var(--color-primary); color:#fff; border-color:var(--color-primary); } .trending-slider__arrow:disabled{ opacity:.35; cursor:default; } .trending-slider__dots{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:18px; } .trending-slider__dot{ width:8px; height:8px; padding:0; border-radius:50%; border:none; background:var(--color-border); cursor:pointer; } .trending-slider__dot.is-active{ width:22px; border-radius:4px; background:var(--color-primary); } /* ------------------------------------------------------------- 5. FEATURED CARD (large bg-image card with an overlaid caption — used for the home-page featured post and the category feature) ------------------------------------------------------------- */ .hero__main{ position:relative; overflow:hidden; background:#000; display:block; } .hero__main img{ width:100%; aspect-ratio:16/10; object-fit:cover; } .hero__caption{ position:absolute; inset-inline:0; bottom:0; background:linear-gradient(0deg, rgba(0,0,0,.92) 40%, rgba(0,0,0,.75) 70%, rgba(0,0,0,0) 100%); color:#fff; padding:75px 24px 22px; } .hero__caption .card__kicker{ color:#ffd7ec; } .hero__caption .card__title{ font-size:34px; font-weight:700; line-height:2; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .hero__caption .card__title a{ color:#fff; } /* ------------------------------------------------------------- 5b. BREAKING NEWS TICKER ------------------------------------------------------------- */ .breaking-ticker{ padding-top: 20px;} .breaking-ticker__inner{ display:flex; align-items:center; height: 48px; } .breaking-ticker__label{ flex:0 0 auto; background:var(--color-primary); color:#fff; font-size:22px; font-weight:500; line-height:1.3; padding:6px 16px; padding-bottom: 10px; height: 100%; } .breaking-ticker-block {border: 1px solid #dadada; padding: 8px 15px; width: 100%; } .breaking-ticker__list{ position:relative; flex:1 1 auto; min-height:26px; } .breaking-ticker__item{ position:absolute; inset-inline:0; top:0; opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; font-size:20px; font-weight:700; color:var(--color-text); line-height:1.5; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .breaking-ticker__item a{ color:inherit; } .breaking-ticker__item.is-active{ opacity:1; transform:translateY(0); position:relative; } /* ------------------------------------------------------------- 6. HOME — LATEST + FEATURED TWO-COLUMN BLOCK ------------------------------------------------------------- */ .latest-with-featured{ padding:24px 0; } .latest-with-featured__grid{ display:grid; grid-template-columns:2fr 1fr; gap:22px; align-items:stretch; } .latest-with-featured__featured .hero__main{ height:100%; } .latest-with-featured__featured .hero__main img{ width:100%; height:100%; aspect-ratio:16/10; object-fit:cover; } .latest-with-featured__list{ border:1px solid var(--color-border); border-radius:2px; display:flex; flex-direction:column; } .latest-scroll{ max-height:560px; overflow-y:auto; padding:6px 18px; } .latest-scroll .card--row:last-child{ border-bottom:0; } .latest-scroll::-webkit-scrollbar{ width:6px; } .latest-scroll::-webkit-scrollbar-thumb{ background:var(--color-border); border-radius:3px; } /* Larger, bolder headline treatment for this list specifically, to match the reference layout (big Nastaliq headline text beside a small square thumbnail, generous line spacing). */ .latest-scroll .card--row{ gap:16px; padding:22px 0; } .latest-scroll .card--row .card__thumb{ flex:0 0 96px; width:96px; } .latest-scroll .card--row .card__title{ font-size:20px; line-height:1.7; font-weight:800; } /* ------------------------------------------------------------- 6b. TOP STORIES STRIP (category sidebar) ------------------------------------------------------------- */ .top-stories{ display:flex; flex-direction:column; } .top-stories--grid-2{ display:grid; grid-template-columns:1fr 1fr; column-gap:28px; } .top-stories--grid-2 .card--row{ border-bottom:1px solid var(--color-border); } .top-stories--grid-2 .card--row:nth-last-child(-n+2){ border-bottom:0; } /* Promo / advertising band between the top-stories strip and the dynamic category sections on the front page. */ .promo-band{ padding:0 0 6px; } .promo-band .widget{ margin:0; } .promo-band img{ width:100%; } /* ------------------------------------------------------------- 7. CATEGORY PAGE ------------------------------------------------------------- */ .category-header{ padding-top:18px; padding-bottom: 4px; } .breadcrumb{ font-size:15px; font-weight: 600; color:var(--color-accent); margin-bottom:10px; } .breadcrumb a{ color:var(--color-accent); } .breadcrumb .sep{ color:var(--color-muted); margin:0 4px; } .category-title{ font-size:28px; font-weight:700; color:var(--color-accent); margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--color-border); } .category-layout{ display:grid; grid-template-columns: 800px 1fr; gap:30px; align-items:start; padding-bottom:40px; } .category-layout__sidebar{ border-inline-start:1px solid var(--color-border); padding-inline-start:28px; } .category-layout__sidebar .top-stories .card__title{ font-size:20px; line-height:1.7; font-weight:800; } .category-feature{ margin-bottom:6px; } .category-feature__grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:20px; margin-bottom:0; } .category-feature__grid .hero__main img{ aspect-ratio:16/10; } .category-feature__grid .hero__caption{ padding:50px 20px 16px; } .category-feature__side{ display:flex; flex-direction:column; gap:20px; } .article-list{ display:flex; flex-direction:column; margin-top:12px; } .load-more-wrap{ text-align:center; margin-top:10px; } #load-more-posts{ min-width:180px; border-radius:20px; } #load-more-posts[disabled]{ opacity:.6; cursor:default; } /* ------------------------------------------------------------- 8. SINGLE POST / PAGE ------------------------------------------------------------- */ .single-post{ padding:26px 0 50px; } article.single-post {padding-top: 0;} .share-bar{ display:flex; flex-wrap:wrap; gap:10px; } .share-bar__link{ width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto; } .single-page {margin-top: 20px;} .share-bar__link svg{ width:16px; height:16px; fill:#fff; } .share-bar__share{ background:#333; } .share-bar__x{ background:#000; } .share-bar__facebook{ background:#1877f2; } .share-bar__whatsapp{ background:#25d366; } .single-post__header{ margin-bottom:18px; } .single-post__title{ font-size:28px; color:#333; font-weight:700; line-height:normal; } .single-post__subhead{ font-size:17px; color:#333; font-weight:700; line-height:normal; margin:20px 0 12px; } .social-connect {display: flex;justify-content: space-between;gap: 30px;align-items: center;margin-bottom:16px;} .single-post__meta{ font-size:13px; color:var(--color-muted); font-family: Arial, Helvetica, sans-serif; line-height: normal; } .single-post__thumb{ margin-bottom:18px; } .single-post__thumb img{width: 100%; height: auto;} .single-post__content{ font-size:26px; line-height:2.2;} .single-post__content img{ margin:16px 0; } .single-post__tags{ margin-top:24px; padding-top:14px; border-top:1px solid var(--color-border); } .single-post__tags a{ display:inline-block; padding:4px 12px; border:1px solid var(--color-border); border-radius:20px; font-size:12px; margin-inline-end:6px; margin-bottom:6px; } .comments-area{ margin-top:32px; } .comment-list{ margin-bottom:20px; } .comment-body{ border-bottom:1px solid var(--color-border); padding:14px 0; } .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea{ width:100%; padding:10px; border:1px solid var(--color-border); border-radius:3px; margin-bottom:12px; } .comment-form textarea{ min-height:120px; } /* ------------------------------------------------------------- 9. SIDEBAR / WIDGETS ------------------------------------------------------------- */ .widget{ margin-bottom:30px; } .widget-title{ font-size:21px; color:var(--color-text); font-weight:700; border-bottom:1px solid var(--color-border); padding-bottom:10px; margin-bottom:14px; position:relative; } .widget-title::after{ content:""; position:absolute; right:0; bottom:-1px; width:36px; height:2px; background:var(--color-primary); } .widget ul{ margin:0; } .widget ul li{ padding:9px 0; border-bottom:1px dashed var(--color-border); font-size:14px; line-height:1.7; } .widget ul li:last-child{ border-bottom:0; } .widget ul ul{ margin-top:8px; padding-inline-start:16px; } .widget p{ font-size:14px; color:var(--color-muted); margin:0 0 10px; } .widget a{ color:var(--color-text); } .widget a:hover{ color:var(--color-primary); } .widget .post-date{ display:block; font-size:12px; color:var(--color-muted); margin-top:3px; } .searchform{ display:flex; } .searchform input[type=search]{ flex:1; padding:8px 10px; border:1px solid var(--color-border); } .searchform button{ font-size: 22px; background:var(--color-primary); color:#fff; border:0; padding:0px 25px; cursor:pointer; } /* Defensive styling for WordPress core block-based widgets, in case a sidebar/footer widget area is populated via the block widgets screen instead of a classic widget — keeps them visually consistent with the rest of the theme without needing to touch WP core markup. */ .widget .wp-block-search__label{ font-size:15px; font-weight:700; margin-bottom:8px; display:block; } .widget .wp-block-search__inside-wrapper{ display:flex; border:1px solid var(--color-border); } .widget .wp-block-search__input{ flex:1; border:0; padding:8px 10px; font-family:inherit; font-size:14px; } .widget .wp-block-search__button{ background:var(--color-primary); color:#fff; border:0; padding:0 16px; cursor:pointer; } .widget .wp-block-latest-posts, .widget .wp-block-latest-comments, .widget .wp-block-categories-list, .widget .wp-block-archives-list{ margin:0; padding:0; list-style:none; } .widget .wp-block-latest-posts li, .widget .wp-block-latest-comments li, .widget .wp-block-categories-list li, .widget .wp-block-archives-list li{ padding:9px 0; border-bottom:1px dashed var(--color-border); font-size:14px; } .site-footer .widget .wp-block-search__label, .site-footer .widget a{ color:#fff; } .site-footer .widget ul li, .site-footer .widget .wp-block-latest-posts li, .site-footer .widget .wp-block-categories-list li{ border-bottom-color:rgba(255,255,255,.2); } /* ------------------------------------------------------------- 10. FOOTER ------------------------------------------------------------- */ .site-footer{ background:linear-gradient(135deg, #2a2a2a, #4a4a4a); color:#fff; margin-top:40px; padding-top:40px; } .site-footer .widget-title, .site-footer .widget-title::after{ display:none; } .footer-grid{ display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:24px; padding-bottom:26px; } .footer-grid--logo-only{ grid-template-columns:1fr; justify-items:center; max-width:400px; margin:0 auto; } .footer-logo{ text-align:center; display:flex; flex-direction:column; align-items:center; } .footer-logo__img{ max-height:48px; width:auto; margin-bottom:14px; } .footer-social{ display:flex; justify-content:center; gap:10px; margin:12px 0 18px; } .footer-social a{ width:30px; height:30px; border-radius:50%; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; transition:background .2s ease; } .footer-social a:hover{ background:rgba(255,255,255,.15); } .footer-social svg{ width:14px; height:14px; fill:#fff; } .footer-tabs{ display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:0; overflow-x:auto; margin-bottom: 15px;} .footer-tabs__item, .footer-tabs .menu-item{ display:inline-block; flex:0 0 auto; padding:0 10px; color:#fff; font-size:11px; font-weight:400; font-family:Arial, Helvetica, sans-serif; letter-spacing:.3px; text-transform:uppercase; line-height:1.6; white-space:nowrap; transition:opacity .2s ease; } .footer-tabs__item:not(:first-child), .footer-tabs .menu-item:not(:first-child){ border-inline-start:1px solid rgba(255,255,255,.5); } .footer-tabs__item:first-child, .footer-tabs .menu-item:first-child{ border-inline-start:0; padding-inline-start:0; } .footer-tabs__item:hover, .footer-tabs .menu-item a:hover{ color:#fff; opacity:.8; } .footer-widget-title{ font-size:15px; font-weight:700; margin-bottom:14px; } .footer-widget ul li{ padding:5px 0; font-size:13.5px; } .footer-widget ul li a{ color:rgba(255,255,255,.85); } .footer-widget ul li a:hover{ color:#fff; } /* Safety net: hide leftover Search / Recent Posts / Recent Comments / Archives / Categories widget markup (classic, block-based, or plugin variant) if it's ever reintroduced or served from a cache. */ .widget_search, .widget_recent_entries, .widget_recent_comments, .widget_archive, .widget_categories, .wp-block-latest-posts, .wp-block-latest-posts__list, .wp-block-latest-comments, .wp-block-search, .wp-block-archives, .wp-block-categories{ display:none !important; } .site-footer-bottom{ border-top:1px solid rgba(255,255,255,.2); text-align:center; font-size:12.5px; padding:16px 0; color:rgba(255,255,255,.85); direction: ltr; } .site-footer-bottom p{font-family:Arial, Helvetica, sans-serif;} .site-footer-bottom a{ color:#fff; } .site-footer-bottom .footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin-bottom:10px; list-style:none; font-size:14.5px; font-weight:700; } .site-footer-bottom .footer-links li{ list-style:none; } .site-footer-bottom .footer-links li::marker{ content:none; } .site-footer-bottom .footer-links li::before{ content:none !important; } .site-footer-bottom .footer-links li:not(:last-child)::after{ content:"|"; margin:0 10px; color:rgba(255,255,255,.5); } /* ------------------------------------------------------------- 11. PAGINATION / MISC ------------------------------------------------------------- */ .pagination{ display:flex; justify-content:center; gap:6px; margin-top:26px; } .pagination a, .pagination span{ display:inline-block; padding:8px 14px; border:1px solid var(--color-border); border-radius:3px; font-size:13px; } .pagination .current{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); } .no-results{ padding:40px 0; text-align:center; font-size: 26px;} /* ------------------------------------------------------------- ADVERTISEMENT WIDGET (inc/class-urdu-news-ad-widget.php) Additive only — does not alter any rule above. ------------------------------------------------------------- */ .ad-slot{ margin:24px auto; } .urdu-news-ad{ display:flex; align-items:center; justify-content:center; overflow:hidden; } .urdu-news-ad__img{ max-width:100%; height:auto; display:block; } .urdu-news-ad__link{ display:inline-block; max-width:100%; } .urdu-news-ad--horizontal{ width:100%; } .urdu-news-ad--horizontal .urdu-news-ad__img{ width:100%; } .urdu-news-ad--vertical{ width:100%; max-width:300px; margin:0 auto; } .urdu-news-ad--vertical .urdu-news-ad__img{ width:100%; } .category-layout__sidebar .ad-widget{ margin-bottom:20px; } .footer-widget.ad-widget{ margin-bottom:0; } /* ------------------------------------------------------------- IMAGE SKELETON LOADING (grey animated placeholder) Uses the existing .is-loaded hook (main.js / rule above at "LAZY-LOAD FADE-IN") — no markup or JS changes. Every thumb/ hero container shows an animated grey shimmer until its image finishes loading, then the shimmer turns off automatically. Additive only — does not alter any rule above. ------------------------------------------------------------- */ .card__thumb, .hero__main, .single-post__thumb{ position:relative; background-image:linear-gradient(90deg,#eee 25%,#e2e2e2 37%,#eee 63%); background-size:400% 100%; animation:urdu-news-skeleton 1.4s ease infinite; } .card__thumb:has(img.is-loaded), .hero__main:has(img.is-loaded), .single-post__thumb:has(img.is-loaded){ background-image:none; animation:none; } @keyframes urdu-news-skeleton{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } } /* ------------------------------------------------------------- TEXT SKELETON LOADING (grey animated placeholder) Same per-component "still loading" state as the image skeleton above (:has(img.is-loaded)) — title/kicker/excerpt/meta text reveals at the same moment its component's image does, so no text sits blank in the meantime. Only applied to components that always render an (real thumbnail or the bundled placeholder.svg), so the condition always resolves. Additive only — does not alter any rule above. ------------------------------------------------------------- */ .card:not(:has(img.is-loaded)) .card__kicker, .card:not(:has(img.is-loaded)) .card__title a, .card:not(:has(img.is-loaded)) .card__excerpt, .card:not(:has(img.is-loaded)) .card__meta, .article-row:not(:has(img.is-loaded)) .card__kicker, .article-row:not(:has(img.is-loaded)) .card__title a, .article-row:not(:has(img.is-loaded)) .card__excerpt, .article-row:not(:has(img.is-loaded)) .card__meta, .hero__main:not(:has(img.is-loaded)) .card__kicker, .hero__main:not(:has(img.is-loaded)) .card__title a{ display:inline-block; min-height:1em; border-radius:4px; color:transparent!important; background-image:linear-gradient(90deg,#eee 25%,#e2e2e2 37%,#eee 63%); background-size:400% 100%; animation:urdu-news-skeleton 1.4s ease infinite; } /* Trending-slider slides can sit off-screen (translateX) when the page first loads, which can delay their image's load/decode; without this override, a slide's title would stay hidden behind the shimmer above indefinitely after sliding to it, looking completely blank. Their title always stays visible regardless of that slide's image-load state. */ .trending-slider__item .card__title a{ display:inline; color:inherit !important; background-image:none !important; animation:none !important; } .submenu-toggle{ display:none; } .primary-menu__close {display: none;} /* ------------------------------------------------------------- 12. RESPONSIVE ------------------------------------------------------------- */ @media (max-width: 1024px){ .trending-slider__item{ flex-basis:calc(50% - 12px); } .footer-grid{ grid-template-columns:1fr 1fr 1fr; } .category-layout{ grid-template-columns:1fr; } .category-layout__sidebar{ order:2; border-inline-start:0; padding-inline-start:0; border-top:1px solid var(--color-border); padding-top:20px; margin-top:6px; } .grid--4{ grid-template-columns:repeat(2,1fr); } .grid--3{ grid-template-columns:repeat(2,1fr); } .category-feature__grid{ grid-template-columns:1fr; } .latest-with-featured__grid{ grid-template-columns:1fr; } .latest-scroll{ max-height:320px; } .section{ padding:22px 0; } .hero__caption{ padding-top:60px; } .hero__caption .card__title{ line-height:1.5; } } @media (max-width: 782px){ body.nav-open{ overflow:hidden; } body.nav-open::after{ content:""; position:fixed; inset:0; z-index:65; background:rgba(20,10,10,.5); -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); } .container, .top-bar .container, .masthead .container, .primary-nav .container{ padding-left:15px; padding-right:15px; } .masthead .container.masthead__grid {grid-template-columns: 1fr 1fr;} .primary-menu > li{ margin:0 14px; } .primary-menu > li:first-child{ margin-top:4px; } .primary-menu > li > a{ border-radius:10px; margin:3px 0; font-weight:600; letter-spacing:.2px; border-bottom:0 !important; } .primary-menu > li:hover > a, .primary-menu > li.current-menu-item > a{ background:#5dade2; color:#fff; } .primary-menu > li > a:active{ background:rgba(93,173,226,.15); } .primary-menu .menu-item-has-children > ul{ background:rgba(145,13,23,.05); border-radius:10px; margin:2px 0 10px; padding:4px 0; } .primary-menu .menu-item-has-children > ul li a{ font-size:15.5px; padding:12px 18px 12px 34px; color:rgba(0,0,0,.75); border-bottom:1px solid rgba(0,0,0,.06); } .primary-menu .menu-item-has-children > ul li:last-child a{ border-bottom:0; } .primary-menu .menu-item-has-children > ul li a:hover{ background:rgba(93,173,226,.15); color:#2e86c1; } .primary-menu .menu-item-has-children > a{ padding-left:52px; } .primary-menu .menu-item-has-children > .submenu-toggle{ width:38px; height:38px; left:6px; top:5px; border-radius:50%; background:rgba(0,0,0,.05); color:#1c1c1c; } .primary-menu .menu-item-has-children > .submenu-toggle:active{ background:rgba(0,0,0,.1); } .primary-menu .menu-item-has-children.submenu-open > .submenu-toggle{ background:#5dade2; color:#fff; } .primary-menu .menu-item-has-children.submenu-open > .submenu-toggle svg{ transform:rotate(180deg); } .primary-menu__close{ position:absolute; top:14px; right:14px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(0,0,0,.05); border:0; padding:0; color:#1c1c1c; cursor:pointer; z-index:1; } .primary-menu__close svg{ width:18px; height:18px; } .primary-menu__close:hover, .primary-menu__close:active{ background:#5dade2; color:#fff; } .primary-menu .menu-item-has-children{ position:relative; } .primary-menu .menu-item-has-children > a{ padding-left:46px; } .primary-menu .menu-item-has-children > .submenu-toggle{ display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; width:42px; height:42px; background:transparent; border:0; padding:0; color:#1c1c1c; cursor:pointer; } .primary-menu .menu-item-has-children > .submenu-toggle svg{ width:16px; height:16px; transition:transform .2s ease; } .primary-menu .menu-item-has-children.submenu-open > .submenu-toggle svg{ transform:rotate(180deg); } .primary-menu .menu-item-has-children > ul{ display:none; } .primary-menu .menu-item-has-children.submenu-open > ul{ display:block; } .search-toggle svg{ width:18px; height:18px; } .breaking-ticker-block {line-height: normal; height: 100%;} .breaking-ticker__label{ font-size:18px; line-height: normal; } .breaking-ticker__item{ font-size:18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .primary-menu > li > a{ font-size:15px; min-height:48px; } .menu-toggle{ display:inline-block; } .primary-menu{ display:flex; position:fixed; top:0; left:0; width:95%; max-width:400px; height:100%; background:linear-gradient(180deg,#ffffff 0%,#fff2f3 100%); flex-direction:column; z-index:70; overflow-y:auto; padding:76px 0 30px; box-shadow:6px 0 28px rgba(0,0,0,.25); transform:translateX(-100%); transition:transform .35s ease; } .primary-menu.is-open{ transform:translateX(0); } .primary-nav .container{ position:relative; flex-wrap:wrap; justify-content: space-between; } .masthead__actions--mobile{ display:flex !important; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } .masthead__actions--mobile .btn--epaper{box-shadow: none; padding: 6px 20px;} .masthead__grid{ grid-template-columns:1fr 1fr; } .masthead__grid .masthead__actions{ display:none; } .masthead__grid .site-branding{ justify-content:flex-start; } .primary-menu ul{ position:static; box-shadow:none; } .primary-menu > li > a{ border-inline-start:0; border-bottom:1px solid rgba(0,0,0,.08); padding:0 22px; color:#1c1c1c; } #scroll-menu { display: block; padding: 10px 15px; border-bottom: 1px solid #f0f1f4; margin-bottom: 10px; } #scroll-menu .menu { display: flex; gap: 20px; overflow-x: auto; list-style: none; padding: 0; margin: 0; } #scroll-menu .menu .menu-item.current-menu-item a {color: #df2929 !important;} #scroll-menu .menu li a { font-size: 20px; font-weight: bold; color: #2b2b2b; white-space: nowrap; } .footer-grid{ grid-template-columns:1fr 1fr; } .article-row .card__thumb{ flex-basis:130px; width:130px; } .article-row .card__title{ font-size:16px; line-height:1.6; } .latest-scroll .card--row .card__thumb{ flex:0 0 76px; width:76px; } .card__title{ line-height:1.7; } .card--row .card__title{ line-height:1.6; } .category-layout__sidebar .top-stories .card__title{ line-height:1.6; } .hero__caption{ padding:48px 18px 16px; } .hero__caption .card__title{ font-size:22px; line-height:1.4; } .latest-scroll .card--row {padding: 12px 0;justify-content: space-between;} .top-stories .card--row {justify-content: space-between;} .latest-scroll {max-height: 400px;} .single-post__title{ padding-bottom:8px; } .single-post__content{ font-size:17px; line-height:1.9; } .section{ padding:18px 0; } .latest-with-featured{ padding:16px 0; } .grid{ gap:16px; } .category-layout__sidebar {border-top: none; padding-top: 0; margin-top: 0;} .single-post__subhead {font-size: 18px; margin-top: 15px;} .single-post__content {font-size: 22px; line-height: 2; } article.single-post {padding-bottom: 30px;} .footer-tabs, .footer-social {flex-wrap: wrap;} .site-footer-bottom p {margin-bottom: 0;} } @media (min-width:768px){ .single-post__title{ font-size:40px; } .single-post__subhead{ font-size:26px; margin-bottom:10px; } } @media (max-width: 480px){ .container, .top-bar .container, .masthead .container, .primary-nav .container{ padding-left:12px; padding-right:12px; } .breaking-ticker__label {width: 71px;} .breaking-ticker-block { padding-left: 5px; padding-right: 8px; width: calc(100% - 71px); } .latest-scroll {padding: 6px 12px;} .masthead .container{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; padding-bottom:8px; } .grid--4, .grid--3, .grid--2{ grid-template-columns:1fr; } .article-row{ flex-direction:column; } .article-row .card__thumb{ width:100%; } .article-row .card__thumb img{ aspect-ratio:16/9; } .footer-grid{ grid-template-columns:1fr; text-align:center; } .footer-tabs, .footer-social{ justify-content:center; } .footer-widget-title::after{ display:none; } .trending-slider__item{ flex-basis:100%; } .trending-slider__arrow{ display:none; } .hero__caption .card__title{ font-size:18px; -webkit-line-clamp:2; } .latest-scroll::-webkit-scrollbar{ width:3px; } .latest-scroll .card--row {gap: 10px;} .latest-scroll .card--row .card__title {font-size: 18px;} .single-post__title{ font-size:24px; } .card--row .card__thumb{ flex:0 0 60px; width:60px; } .card--row .card__title{ font-size:13.5px; } } /* ------------------------------------------------------------- LANGUAGE SWITCHER (inc/language-switcher.php) Custom dropdown driving a hidden Google Translate element. The switcher itself is excluded from translation via translate="no" / .notranslate in the markup. Additive only — does not alter any rule above. ------------------------------------------------------------- */ .lang-switcher{ position:relative; } .lang-switcher__toggle{ display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; border:1px solid var(--color-border); background:#fff; color:var(--color-text); font-size:14px; font-weight:600; cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease; } .lang-switcher__toggle:hover{ border-color:var(--color-primary); box-shadow:0 2px 8px rgba(0,0,0,.08); } .lang-switcher__globe{ width:18px; height:18px; fill:var(--color-primary); flex:0 0 auto; } .lang-switcher__chevron{ width:14px; height:14px; flex:0 0 auto; transition:transform .2s ease; } .lang-switcher__toggle[aria-expanded="true"] .lang-switcher__chevron{ transform:rotate(180deg); } .lang-switcher__current{ white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; } .lang-switcher__menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:100; list-style:none; margin:0; padding:8px 0; width:240px; max-height:360px; overflow-y:auto; background:#fff; border-radius:10px; border:1px solid var(--color-border); box-shadow:0 12px 32px rgba(0,0,0,.15); } .lang-switcher__menu[hidden]{ display:none; } .lang-switcher__group-label{ padding:8px 16px 4px; font-size:12px; font-weight:700; color:var(--color-primary); text-transform:uppercase; letter-spacing:.5px; } .lang-switcher__option{ display:block; width:100%; text-align:right; padding:9px 16px; border:0; background:none; color:var(--color-text); font-size:14.5px; cursor:pointer; } .lang-switcher__option:hover{ background:rgba(255,87,100,.08); color:var(--color-primary); } .lang-switcher__option.is-active{ color:var(--color-primary); font-weight:700; background:rgba(255,87,100,.06); } /* ------------------------------------------------------------- GOOGLE TRANSLATE — HIDE ALL DEFAULT UI The switcher above is the only visible translation control. ------------------------------------------------------------- */ #google_translate_element{ display:none !important; } .skiptranslate, .skiptranslate iframe, iframe.goog-te-banner-frame, iframe.goog-te-menu-frame, .goog-te-banner-frame, .goog-te-balloon-frame, .goog-te-spinner-pos, #goog-gt-tt, .goog-te-menu-value{ display:none !important; visibility:hidden !important; height:0 !important; } body{ top:0 !important; position:static !important; } body.translated-ltr, body.translated-rtl{ top:0 !important; } .goog-tooltip, .goog-tooltip:hover{ display:none !important; } .goog-text-highlight{ background:none !important; box-shadow:none !important; }