/*
Theme Name: Baztab newsroom v2.3.6 final
Theme URI: https://baztab.ir
Author: baztab
Author URI: https://baztab.ir
Description: نسخه نهایی بازتاب پس از بازبینی جامع سئو، سرعت، دسترسپذیری، فرانتاند، بکاند و تجربه تحریریه.
Version: 2.3.6
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: baztab-newsroom-v2-1-1
*/
/* ============================================================
Baztab Design Color System — v6.3.0
Centralized editorial palette for consistent, accessible UI.
============================================================ */
:root {
color-scheme: light;
--bz-brand-900: #102a46;
--bz-brand-800: #17375f;
--bz-brand-700: #21476f;
--bz-brand-100: #eaf0f6;
--bz-brand-50: #f4f7fa;
--bz-accent-700: #b51820;
--bz-accent-600: #d71920;
--bz-accent-500: #e1323b;
--bz-accent-200: #efb7bb;
--bz-accent-100: #fce8ea;
--bz-accent-50: #fff4f5;
--bz-text-strong: #17212b;
--bz-text: #263645;
--bz-text-secondary: #526171;
--bz-text-muted: #64717f;
--bz-text-faint: #6b7785;
--bz-page: #f4f6f8;
--bz-surface: #ffffff;
--bz-surface-muted: #f8fafc;
--bz-surface-subtle: #f1f4f7;
--bz-border: #dce3ea;
--bz-border-strong: #c8d2dc;
--bz-link: #17375f;
--bz-link-hover: #b51820;
--bz-focus: #2563eb;
--bz-success: #167a48;
--bz-success-border: #b9dfca;
--bz-success-soft: #eff8f3;
--bz-warning: #9a6400;
--bz-warning-border: #e8d49a;
--bz-warning-soft: #fff8e7;
--bz-danger: #b4232a;
--bz-danger-border: #e8b9b6;
--bz-danger-soft: #fff1f1;
--bz-info: #245d86;
--bz-info-border: #bad6eb;
--bz-info-soft: #f1f7fb;
--bz-white: #ffffff;
--bz-black: #000000;
--bz-white-rgb: 255, 255, 255;
--bz-black-rgb: 0, 0, 0;
--bz-brand-rgb: 23, 55, 95;
--bz-accent-rgb: 215, 25, 32;
--bz-success-rgb: 22, 122, 72;
--bz-warning-rgb: 154, 100, 0;
--bz-danger-rgb: 180, 35, 42;
--bz-info-rgb: 36, 93, 134;
--bz-shadow-xs: 0 1px 2px rgba(var(--bz-black-rgb), .04);
--bz-shadow-sm: 0 4px 14px rgba(var(--bz-black-rgb), .07);
--bz-shadow-md: 0 10px 28px rgba(var(--bz-black-rgb), .10);
--bz-shadow-lg: 0 18px 44px rgba(var(--bz-black-rgb), .14);
--bz-social-telegram: #229ed9;
--bz-social-whatsapp: #25d366;
--bz-social-facebook: #1877f2;
--bz-social-x: #171a1f;
--bz-social-twitter: #1da1f2;
--bz-social-linkedin: #0e76a8;
--bz-social-pinterest: #e60023;
--bz-social-instagram-1: #405de6;
--bz-social-instagram-2: #5851db;
--bz-social-instagram-3: #833ab4;
--bz-social-instagram-4: #c13584;
--bz-social-instagram-5: #e1306c;
--bz-social-instagram-6: #fd1d1d;
/* Unified editorial typography. */
--bz-font-family: "IRANSansX", Tahoma, Arial, sans-serif;
/* Bootstrap alignment without editing vendor files. */
--bs-primary: var(--bz-brand-800);
--bs-primary-rgb: 23, 55, 95;
--bs-secondary: var(--bz-text-secondary);
--bs-secondary-rgb: 82, 97, 113;
--bs-success: var(--bz-success);
--bs-success-rgb: 22, 122, 72;
--bs-info: var(--bz-info);
--bs-info-rgb: 36, 93, 134;
--bs-warning: var(--bz-warning);
--bs-warning-rgb: 154, 100, 0;
--bs-danger: var(--bz-danger);
--bs-danger-rgb: 180, 35, 42;
--bs-light: var(--bz-surface-muted);
--bs-light-rgb: 248, 250, 252;
--bs-dark: var(--bz-text-strong);
--bs-dark-rgb: 23, 33, 43;
--bs-body-color: var(--bz-text);
--bs-body-bg: var(--bz-surface);
--bs-border-color: var(--bz-border);
--bs-link-color: var(--bz-link);
--bs-link-hover-color: var(--bz-link-hover);
--bs-focus-ring-color: rgba(var(--bz-brand-rgb), .22);
}
::selection {
color: var(--bz-white);
background: var(--bz-accent-600);
}
html {
accent-color: var(--bz-accent-600);
}
@font-face {
font-family: iransans;
font-style: normal;
font-display: swap;
font-weight: 100;
src: url('assets/fonts/iransans/woff2/IRANSansX-Thin.woff2') format('woff2'),
url('assets/fonts/iransans/woff/iransans-thin.woff') format('woff');
}
@font-face {
font-family: iransans;
font-style: normal;
font-display: swap;
font-weight: 200;
src: url('assets/fonts/iransans/woff2/IRANSansX-UltraLight.woff2') format('woff2'),
url('assets/fonts/iransans/woff/iransans-ultralight.woff') format('woff');
}
@font-face {
font-family: iransans;
font-style: normal;
font-display: swap;
font-weight: 300;
src: url('assets/fonts/iransans/woff2/IRANSansX-Light.woff2') format('woff2'),
url('assets/fonts/iransans/woff/iransans-light.woff') format('woff');
}
@font-face {
font-family: iransans;
font-style: normal;
font-display: swap;
font-weight: 500;
src: url('assets/fonts/iransans/woff2/IRANSansX-Medium.woff2') format('woff2'),
url('assets/fonts/iransans/woff/iransans-medium.woff') format('woff');
}
@font-face {
font-family: iransans;
font-style: normal;
font-display: swap;
font-weight: 600;
src: url('assets/fonts/iransans/woff2/IRANSansX-DemiBold.woff2') format('woff2'),
url('assets/fonts/iransans/woff/iransans-demibold.woff') format('woff');
}
@font-face {
font-family: iransans;
font-style: normal;
font-display: swap;
font-weight: 800;
src: url('assets/fonts/iransans/woff2/IRANSansX-ExtraBold.woff2') format('woff2'),
url('assets/fonts/iransans/woff/iransans-extrabold.woff') format('woff');
}
@font-face {
font-family: iransans;
font-style: normal;
font-display: swap;
font-weight: 900;
src: url('assets/fonts/iransans/woff2/IRANSansX-Black.woff2') format('woff2'),
url('assets/fonts/iransans/woff/iransans-black.woff') format('woff');
}
@font-face {
font-family: iransans;
font-style: normal;
font-display: swap;
font-weight: bold;
src: url('assets/fonts/iransans/woff2/IRANSansX-Bold.woff2') format('woff2'),
url('assets/fonts/iransans/woff/iransans-bold.woff') format('woff');
}
@font-face {
font-family: iransans;
font-style: normal;
font-display: swap;
font-weight: normal;
src: url('assets/fonts/iransans/woff2/IRANSansX-Regular.woff2') format('woff2'),
url('assets/fonts/iransans/woff/iransans-regular.woff') format('woff');
}
html {
font-family: var(--bz-font-family);
-moz-font-feature-settings: "ss02";
-webkit-font-feature-settings: "ss02";
font-feature-settings: "ss02";
}
body,
button,
input,
select,
textarea,
optgroup,
option {
font-family: var(--bz-font-family);
}
button,
input,
select,
textarea {
font-feature-settings: inherit;
}
body
{
background: var(--bz-white);
}
a
{
text-decoration:none;
color:var(--bz-text);
}
.row>*
{
padding-left: calc(var(--bs-gutter-x) * .2);
padding-right: calc(var(--bs-gutter-x) * .2);
}
.container-fluid
{
padding-left: var(--bs-gutter-x,0.5rem);
padding-right: var(--bs-gutter-x,0.5rem);
max-width:1340px;
}
.container-af
{
padding-left: var(--bs-gutter-x,2rem);
padding-right: var(--bs-gutter-x,2rem);
max-width:1340px;
margin:0 auto;
}
nav
{
margin-bottom:1rem;
}
.navbar-brand
{
margin-left:3rem;
}
.br-test
{
border:1px solid var(--bz-text);
}
html :where(img)
{
max-width:none;
}
#navbarSupportedContent
{
position:relative;
}
.af-feed h2
{
font-size: 1rem;
font-weight: bold;
margin: 25px 0;
}
.af-feed li
{
list-style:none;
display:flex;
flex-wrap:wrap;
margin-bottom:10px;
}
.af-feed li .af-feed-link
{
margin-right:auto;
direction:ltr;
}
.af-feed svg
{
color:var(--bz-warning);
margin-left:10px;
margin-top:5px;
}
.af-404-p
{
text-align: center !important;
font-size: 1.5rem !important;
font-weight: bold;
color:var(--bz-accent-600);
margin-top: 50px !important;
margin-bottom: 50px !important;
}
.af-404-img
{
width:50% !important;
margin-top:30px !important;
}
.search_box {
height: 60px;
font-size: 32px;
display: inline-block;
direction:rtl;
border: none;
outline: none;
color: var(--bz-white);
padding: 3px;
padding-left: 60px;
width: 0px;
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: 3;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
.current-menu-item a
{
position:relative;
}
.dropdown .current-menu-item a:after
{
width:0;
}
.current-menu-item a:after
{
content: '';
width: 100%;
background: var(--bz-accent-600);
height: 3px;
position: absolute;
right: 0;
bottom: -16px;
}
footer .current-menu-item a:after
{
bottom: -10px;
}
.search_box:focus:hover {
background:var(--bz-brand-800);
}
input:-internal-autofill-selected {
background:transparent !important;
}
.search_box:focus {
width: 100%;
z-index: 1;
background:var(--bz-brand-800);
cursor: text;
}
.af-top-header-ads
{
flex-flow:row;
display:flex;
}
.af-top-titr1 .af-advert-widget:nth-child(1)
{
padding-right:0;
margin-top:0;
}
.af-top-titr1 .af-advert-widget:nth-child(2)
{
padding-left:0;
margin-top:0;
}
.af-top-header-ads .af-advert-widget
{
margin: 10px auto;
padding:0 10px;
}
.af-print-meta
{
padding-top:8px !important;
}
.af-top-service-ads .af-advert-widget
{
padding:0;
margin-top:0;
}
.af-sticky-ads
{
display:none;
}
.hide-btn
{
position: absolute;
left: 0;
top: 10px;
}
.hide-btn-mobile
{
position: absolute;
left: 0;
top: 15px;
}
.af-header h1
{
visibility: hidden;
position: absolute;
}
.af-header-date-main
{
margin:5px 0 0 40px;
position:relative;
}
.af-header-date-main svg
{
margin-left:0 !important;
}
.af-header-date-main:hover .af-header-date
{
display:block;
}
.af-header-date
{
display: none;
position: absolute;
width: 210px;
left:0;
padding: 10px;
background: var(--bz-surface-subtle);
font-size: 1rem;
direction: ltr;
text-align: center;
}
.af-searchservices .af-checkbox
{
display:inline-block;
margin-left: 10px;
font-size: 0.9rem;
}
.af-search-page .search-btn
{
background: var(--bz-brand-800);
border: none;
border-radius: 25px;
padding: 5px 20px;
color: var(--bz-white);
margin: 0 auto;
display: block;
}
.af-searchservices
{
border-top: 1px solid var(--bz-border);
padding: 10px 10px;
margin: 20px 0;
background: var(--bz-border);
}
.af-search-page select, .af-search-page input
{
border: 1px solid var(--bz-border);
border-radius: 10px;
padding: 5px 20px;
vertical-align: middle;
margin-left:5px;
}
.af-search-page .search-input
{
width: 100%;
margin-bottom: 15px;
}
.af-search-page h1 span
{
font-weight:normal;
}
.af-search-span
{
float: right;
padding-top: 10px;
font-size: 0.9rem;
margin-left: 15px;
}
.search_submit {
height: 67px;
width: 63px;
display: inline-block;
color:var(--bz-accent-600);
float: left;
background: url('assets/imgs/search.svg') center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
.af-date-mobile
{
display:none;
}
.search_submit:hover {
opacity: 0.8;
}
.search_submit {
position: absolute;
background: transparent;
border: none;
background-image: url('assets/imgs/search.svg');
background-repeat: no-repeat;
width: 15px;
margin: 5px;
}
#searchform {
width: 170px;
}
.says
{
display:none !important;
}
.cld-like-dislike-wrap
{
background: var(--bz-white);
border-radius: 10px;
padding: 8px 0 5px;
margin: 0 auto;
}
.cld-count-wrap
{
display:inline-block !important;
margin-right:5px;
}
.searchwrapper
{
width: 100%;
position: absolute;
left: 0;
display:none;
transition: opacity .2s ease, transform .2s ease;
}
.searchwrapper2
{
width: 100%;
position: absolute;
left: 0;
display:none;
transition: opacity .2s ease, transform .2s ease;
}
.search input
{
width: 100%;
height: 50px;
border:none;
}
.af-pishkhan
{
margin-bottom:25px;
background-image:url('assets/imgs/pishkhanbg2.jpg');
padding: 25px 0px;
background-size: cover;
background-attachment: fixed;
}
.af-pishkhan .af-head-title
{
color:var(--bz-white);
}
.af-slide
{
height:auto;
margin-bottom:1rem;
}
.af-b-radius img
{
border-radius:5px;
}
.af-news-main, .af-side-index, .af-tab-index, .af-slide-top, .af-side-allnews, .af-service-archive
{
box-shadow: 0 0px 8px 0px rgba(var(--bz-black-rgb), 0.1);
background: var(--bz-white);
border-radius:5px;
padding:30px 20px;
}
.af-news-main-tab li
{
width:auto !important;
}
.af-news-main-tab .nav-link.active, .af-news-main-tab .show>.nav-link
{
background-color: var(--bz-white) !important;
color: var(--bz-text) !important;
border: none !important;
}
.af-tab-index
{
padding:0 0 15px 0;
margin-bottom:10px;
}
.af-slide .container-fluid, .af-slide .af-advert-widget
{
padding:0;
}
.af-news-img, .af-slide-img
{
position:relative;
}
.af-slide-img h3
{
position: absolute;
bottom: 0;
padding: 30px 40px;
font-size: 1.5rem;
font-weight: bold;
line-height:35px;
color:var(--bz-white);
}
.af-news-img h3
{
position: absolute;
bottom: 0;
font-size: 1rem;
line-height: 30px;
padding: 15px 30px;
font-weight: bold;
color:var(--bz-white);
}
.af-head-title
{
font-size:1.4rem;
font-weight:900;
display:flex;
}
.af-head-title:before
{
content: '';
width: 20px;
height: 30px;
display: block;
background-color: var(--bz-accent-600);
margin: -10px 0 0 7px;
}
.af-head-title:after
{
content:'';
width:40px;
height:3px;
display:block;
background-color:var(--bz-border);
margin: 17px 10px 0 0;
}
.af-news-img h3 a, .af-slide-img h3 a
{
color:var(--bz-white);
}
.af-article-main
{
display:flex;
padding:15px 0;
}
.af-side-index
{
margin-bottom:10px;
}
.af-side-index ul, .af-side-allnews ul
{
padding:0;
margin-top:20px;
}
.af-side-index li, .af-side-allnews li
{
display: flex;
font-size: 0.9rem;
margin-bottom: 10px;
counter-increment: step-counter;
}
.af-side-allnews
{
margin-bottom:10px;
}
.af-side-allnews li
{
display:block;
line-height:2;
}
.af-side-index li a, .af-side-allnews li a
{
font-weight:bold;
}
.af-side-index li a:first-child
{
width:100px;
margin-left:10px;
}
.af-timeline li a:first-child
{
height:auto;
}
.af-side-index li a:last-child
{
width:auto;
}
.af-side-index li:before
{
content: counter(step-counter);
margin-left: 5px;
font-size: 1.3rem;
color: var(--bz-border);
font-weight: bold;
padding: 5px 0px 0 15px;
border-radius: 3px;
}
.af-slide-top
{
padding:0 25px;
}
.af-news-main
{
margin-bottom:10px;
}
.af-news-main .af-article-desc
{
width:65%;
}
.af-news-main .btn-light
{
background:transparent;
border:none;
}
.af-news-main .nav-pills .nav-link.active, .af-news-main .nav-pills .show>.nav-link, .af-news-main .nav-pills .nav-link
{
background-color: transparent;
border: none !important;
color: var(--bz-brand-800);
font-weight: normal;
font-size: 1rem;
padding: 0;
border-radius: 0 !important;
margin-top: 5px;
width: 100%;
}
.af-news-main .nav-pills .nav-link.active:before, .af-news-main .nav-pills .show>.nav-link:before, .af-news-main .nav-pills .nav-link:before
{
content:none !important;
}
.af-news-main .tab-pane a:after
{
content:none;
}
.af-news-main .nav-tabs .nav-link
{
border-color:var(--bz-white);
font-size: 0.8rem;
padding: 3px 7px;
}
.af-news-main .tab-content
{
padding:0;
}
.af-slide-top .af-article-desc
{
padding-left:10px;
width:53%;
}
.af-slide-top .af-article-desc h3
{
line-height:28px;
}
.af-slide-top .af-article-img
{
height:auto;
width:42%;
}
.af-timeline ul
{
border-right:1px solid var(--bz-accent-600);
}
.af-timeline ul li:before
{
content: '';
margin-left: 15px;
font-size: 1.3rem;
color: var(--bz-accent-600);
margin-top: 2px;
border-right: 1px solid var(--bz-accent-600);
font-weight: bold;
padding: 12px 0px 0 11px;
width: 11px;
height: 11px;
background: var(--bz-accent-600);
border-radius: 50%;
margin-right: -7px;
}
.title-comments
{
margin-right:auto;
margin-top:8px;
}
.title-comments svg
{
margin-top:-5px;
}
#respond
{
position:relative;
transition:0.5s;
}
.harika-comments #comment-status {
display: none;
position: static;
width: auto;
height: auto;
margin: 14px 0 0;
padding: 11px 14px;
border: 1px solid var(--bz-border);
border-radius: 8px;
background: var(--bz-info-soft);
color: var(--bz-text);
}
.harika-comments #comment-status[hidden] {
display: none !important;
}
.harika-comments #comment-status p {
margin: 0;
font-size: 14px;
line-height: 1.8;
text-align: right;
}
.harika-comments #comment-status.is-loading {
border-color: var(--bz-info-border);
background: var(--bz-info-soft);
color: var(--bz-info);
}
.harika-comments #comment-status.is-success {
border-color: var(--bz-success-border);
background: var(--bz-success-soft);
color: var(--bz-success);
}
.harika-comments #comment-status.is-error {
border-color: var(--bz-accent-200);
background: var(--bz-accent-50);
color: var(--bz-danger);
}
.af-comment-section li a img
{
width:90px;
height:90px;
border-radius:50%;
border: 2px solid var(--bz-accent-600);
padding: 3px;
}
.af-comment-section li:before, .af-service-section li:before
{
content:none;
}
.af-comment-section a:last-child
{
padding: 15px 10px 0 0;
font-weight:bold;
}
.af-service-section li a img
{
width:100px;
height:75px;
margin-left:20px;
border-radius:5px;
}
.af-service-section a:last-child
{
font-weight:bold;
}
.af-service-section .af-article-main
{
flex-wrap:wrap;
}
.af-service-section .af-article-main .af-article-img, .af-service-section .af-article-main .af-article-img img
{
width:100%;
height:auto;
}
.af-service-section .af-article-desc
{
margin-top:15px;
}
.af-article-desc span
{
font-size: 0.8rem;
margin-bottom: 5px;
display: flex;
}
.af-article-desc h3
{
font-weight: bold;
font-size: 1.2rem;
line-height:28px;
}
.af-article-desc p
{
font-size:0.9rem;
}
.af-article-img span
{
background: var(--bz-accent-600);
padding: 2px 10px;
font-size: 0.7rem;
border-radius: 5px 0 0 5px;
color: var(--bz-white);
position: relative;
bottom: 40px;
right: 0;
}
.af-article-archive
{
background: var(--bz-info-soft);
text-align: center;
padding: 10px;
border-radius: 5px;
}
.af-article-img
{
width: 35%;
background-size: cover;
margin-left:15px;
border-radius:5px;
position:relative;
}
.af-side-index .af-article-img
{
margin-left:0;
}
.af-article-img img
{
border-radius:5px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link, .nav-pills .nav-link
{
background-color: transparent;
border: none !important;
color: var(--bs-body-color);
font-weight: bold;
font-size: 1.1rem;
padding:0;
border-bottom: 1px solid var(--bz-accent-600) !important;
border-radius: 0 !important;
margin-top:10px;
}
.nav-pills .nav-link
{
border-bottom: 1px solid var(--bz-text-faint) !important;
}
.nav-pills .nav-link.active:before, .nav-pills .show>.nav-link:before, .nav-pills .nav-link:before
{
content: '';
width: 20px;
height: 30px;
background-color: var(--bz-accent-600);
display: inline-block;
float: right;
}
.nav-pills .nav-link:before
{
background-color: var(--bz-text-faint);
}
.nav-pills li
{
border:none;
width: 48.5%;
}
.nav-pills li button
{
width:100%;
border:1px solid var(--bz-border) !important;
border-radius: 5px !important;
}
.tab-content
{
padding:0 20px;
}
.tab-pane li
{
display:flex;
padding:3px 0;
counter-increment: step-counter;
font-size: 0.9rem;
}
#copylink
{
opacity:0;
}
.tab-pane li:before
{
content: counter(step-counter);
margin-left: 5px;
font-size: 1.5rem;
color: var(--bz-brand-800);
font-weight: bold;
padding: 0px 0px 0 10px;
border-radius: 3px;
}
.tab-pane li:nth-child(2):before
{
color: rgba(var(--bz-brand-rgb), 0.9);
}
.tab-pane li:nth-child(3):before
{
color: rgba(var(--bz-brand-rgb), 0.9);
}
.tab-pane li:nth-child(4):before
{
color: rgba(var(--bz-brand-rgb), 0.8);
}
.tab-pane li:nth-child(5):before
{
color: rgba(var(--bz-brand-rgb), 0.7);
}
.tab-pane li:nth-child(6):before
{
color: rgba(var(--bz-brand-rgb), 0.6);
}
.tab-pane li:nth-child(7):before
{
color: rgba(var(--bz-brand-rgb), 0.5);
}
.tab-pane li:nth-child(8):before
{
color: rgba(var(--bz-brand-rgb), 0.4);
}
.tab-pane li:nth-child(9):before
{
color: rgba(var(--bz-brand-rgb), 0.3);
}
.tab-pane li:nth-child(10):before
{
color: rgba(var(--bz-brand-rgb), 0.2);
}
.tab-pane li:nth-child(11):before
{
color: rgba(var(--bz-brand-rgb), 0.2);
}
.tab-pane li:nth-child(12):before
{
color: rgba(var(--bz-brand-rgb), 0.2);
}
.tab-pane a
{
overflow: hidden;
width:100%;
position:relative;
display: block;
font-weight: bold;
}
.af-news-main-tab li button
{
border:none !important;
font-size:0.8rem;
padding: 4px 10px;
}
.af-news-head
{
display:flex;
}
.af-news-head .flex-column
{
display:none;
}
.af-news-main-tab .af-article-desc .tab-pane a
{
white-space: normal;
overflow:unset !important;
}
.navbar-dark
{
background-color:var(--bz-surface-muted);
border-bottom: 1px solid var(--bz-border);
margin:0;
box-shadow: 0 0px 8px 0px rgba(var(--bz-black-rgb), 0.1);
}
.navbar .af-baztab-logo
{
margin-left:40px;
}
.navbar-dark .navbar-nav .dropdown li
{
padding: 5px 5px;
border-bottom: 1px solid var(--bz-border);
}
.navbar-dark .navbar-nav .dropdown li:last-child
{
border:none;
}
.navbar-dark .navbar-nav .nav-link
{
color:var(--bz-brand-800);
padding: 0 15px;
}
.navbar-dark .navbar-nav .nav-link svg
{
margin-right:10px;
color:var(--bz-brand-800);
}
.navbar-dark .navbar-nav a
{
color:var(--bz-brand-800);
padding: 0 15px;
}
.navbar-dark .navbar-nav .nav-link:hover
{
color:var(--bz-text);
}
.navbar-dark .nav-item
{
margin: 0 2px;
border-left: 1px solid var(--bz-border);
padding-left: 5px;
height:25px;
font-size: 1rem;
padding-top: 2px;
}
.navbar svg
{
margin-left:10px;
}
.navbar .bi-list
{
margin: 0;
padding: 0;
float: right;
color: var(--bz-brand-800);
}
.nav-cat
{
float:right;
}
.navbar-dark .nav-item:hover .bi-list,
.navbar-dark .nav-item:hover .nav-link
{
color:var(--bz-text);
}
.dropdown-toggle::after
{
display:none;
}
.nav-item:last-child
{
border-left:none;
}
.navbar-sub
{
background: var(--bz-brand-800);
padding: 5px 0;
font-size: 0.9rem;
margin-bottom:20px;
color:var(--bz-white);
}
.af-slide-top .big p
{
font-size:1rem;
}
.af-slide-top .big h3
{
font-size: 1.7rem;
line-height: 40px;
}
.af-slide-top .big
{
width:50%;
}
.af-slide-top .big img
{
width:100%;
height:auto;
}
.af-news-main .af-article-desc a
{
white-space: unset;
overflow:unset !important;
}
.af-news-main .af-article-img a
{
overflow:unset !important;
}
.af-article-img a:nth-child(2)
{
position:relative;
}
.af-header
{
z-index:2;
margin-bottom:10px;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover
{
color:var(--bz-brand-800);
}
.af-news-head .dropdown
{
display:none;
}
.af-swiper-img
{
position:relative;
display:flex;
overflow:hidden;
}
.af-swiper-hover
{
}
.af-swiper-img:hover .af-swiper-hover
{
background: var(--bz-white);
opacity:1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
will-change: transform;
}
.af-swiper-hover
{
position: absolute;
width: 100%;
color: var(--bz-text);
opacity:0;
height: 100%;
background: rgba(var(--bz-white-rgb), 0);
font-size: 0.9rem;
padding: 10px 15px;
text-align: justify;
overflow:hidden;
border-radius:5px;
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
-o-transform: translate3d(0, 100%, 0);
will-change: transform;
-webkit-transition: transform 1s ease;
-moz-transition: transform .2s ease;
-ms-transition: transform .2s ease;
-o-transition: transform .2s ease;
will-change: transition;
}
.swiper-slide h3
{
color: var(--bz-white);
font-size: 1rem;
font-weight: bold;
text-align: right;
padding: 10px;
text-align:center;
line-height:1.5;
}
.swiper-slide p
{
font-size:0.9rem;
text-align: justify !important;
padding: 20px;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
height:60px;
}
.sticky + .content {
padding-top: 102px;
}
.af-video-index
{
background-image:url('assets/imgs/videobg.jpg');
padding:30px 0;
margin:20px 0;
background-size:cover;
background-attachment: fixed;
}
.af-video-index .af-head-title
{
font-size: 1.6rem;
}
.af-video-index .af-head-title:before
{
margin: -3px 0 0 10px;
}
.af-video-index .af-head-title:after
{
margin: 20px 15px 0 0;
}
.af-video-hover
{
width: 90px;
height: 70px;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.af-video-desc
{
margin: 10px 0;
}
.af-video-desc a
{
color: var(--bz-white);
font-weight: bold;
}
.af-video-hover svg
{
color:var(--bz-white);
}
.af-video-index .af-head-title, .af-picture-service .af-head-title, .af-pishkhan .af-head-title
{
color:var(--bz-white);
margin:20px 0 30px 0;
}
.af-video-main
{
position:relative;
}
.af-video-main h3, .af-picture-big h3
{
position: absolute;
bottom: 0;
padding: 25px;
color: var(--bz-white);
font-weight: bold;
font-size: 1.5rem;
background: linear-gradient(to bottom,rgba(var(--bz-black-rgb), 0),rgba(var(--bz-black-rgb), 0.9));
line-height: 35px;
margin: 0;
width:100%;
border-radius: 5px;
}
.af-advert-widget img
{
max-width:100%;
width:100%;
}
.af-advert-widget
{
margin-bottom:10px;
position:relative;
}
.baztab-box-ad-placement {
width: 100%;
margin: 0 0 10px;
overflow: hidden;
}
.baztab-box-ad-placement .af-advert-widget {
width: 100%;
margin: 0;
}
.af-advert-meta
{
position:absolute;
}
.af-advert-meta svg
{
background: var(--bz-text-faint);
border-radius: 4px;
color: var(--bz-white);
}
.af-advert-meta a
{
background: var(--bz-text-faint);
font-size: 0.6rem;
color: var(--bz-white);
border-radius: 4px;
top: -2px;
position: relative;
right: 3px;
}
.af-advert-info:hover > span
{
display:inline-block;
}
.af-advert-info span
{
display:none;
}
.af-advert-width
{
margin:5px auto 15px auto;
width:50%;
}
.af-advert-big
{
flex-wrap:wrap;
}
.af-single-tag a
{
background: var(--bz-surface-muted);
border-radius: 1px;
margin-left: 5px;
padding: 2px 8px;
font-size: 0.9rem;
}
.af-single-metab
{
display: flex;
border-top: 1px solid var(--bz-surface-muted);
border-bottom: 1px solid var(--bz-surface-muted);
padding: 15px 0px;
margin: 50px 0 10px;
}
.af-single-metab a
{
background: var(--bz-surface-muted);
padding: 12px;
border-radius: 50%;
width: 40px;
height: 40px;
display: inline-flex;
margin-left:5px;
cursor:pointer;
}
.af-single-tag
{
margin:20px 0;
clear:both;
display:inline-block;
}
.af-single-wide-2
{
padding:10px;
}
.af-video-item:first-child, .af-video-item:nth-child(4)
{
margin-right:2%;
}
.af-video-item:nth-child(3), .af-video-item:nth-child(6)
{
margin-left:0;
}
.af-video-item
{
width:30%;
margin-left:3%;
}
.af-video-img img
{
width:100%;
border-radius:5px;
}
.af-video-image
{
position:relative;
}
.af-video-image svg
{
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
display: block;
margin: auto;
color: rgba(var(--bz-white-rgb), 0.8);
}
.af-video-item h3
{
font-size: 1rem;
font-weight: bold;
margin: 15px 0;
color:var(--bz-white);
line-height:22px;
}
.af-video-item h3 a
{
color:var(--bz-white);
}
.af-video-player
{
width:100%;
}
.af-video-main
{
margin-left:10px;
margin-right:10px;
height:100%;
}
.af-video-main img
{
width:100%;
border-radius:5px;
}
.af-picture-service
{
background: var(--bz-white);
padding: 15px 0;
margin-bottom: 10px;
background-image: url('assets/imgs/bgimage.jpg');
border-radius: 5px;
box-shadow: 0 0px 2px 0px rgba(var(--bz-black-rgb), 0.1);
background-size: cover;
}
.af-picrure-content
{
position:relative;
}
.af-picrure-content h3
{
float:right;
}
.af-picrure-content h3 a
{
color:var(--bz-white);
font-weight:bold;
}
.af-picture-service .af-head-title
{
color:var(--bz-white);
}
.af-picrure-content img
{
width: 100%;
height: auto;
border-radius: 5px;
}
.af-picture-hover h3
{
position: absolute;
bottom: 0;
color: var(--bz-white);
padding: 20px 40px;
font-weight: bold;
line-height: 35px;
}
.af-picture-hover svg
{
width: 30px;
height: 30px;
overflow: auto;
margin: auto;
position: absolute;
top: 10px;
right: 10px;
color: var(--bz-white);
}
.af-picrure-content:hover .af-picture-hover
{
background: rgba(var(--bz-black-rgb), 0.5);
width: 100%;
height: 100%;
display: block;
top: 0;
float: right;
position: absolute;
border-radius: 5px;
}
.af-picture-small h3
{
font-size:1rem;
margin-top:10px;
line-height:1.5;
margin-bottom:30px;
}
.af-picture-big
{
margin-bottom:10px;
}
.af-service-list li
{
display:block;
}
.af-service-list li:before
{
content: '';
width: 6px;
height: 6px;
background-color: var(--bz-accent-600);
margin: 7px 0 0 10px;
padding: 0;
float:right;
}
footer
{
background:var(--bz-surface-muted);
margin-top:20px;
padding:15px;
}
footer h4
{
font-size:1.2rem;
font-weight:bold;
margin:25px 0;
color:var(--bz-text);
text-align:center;
}
.af-footer-bottom
{
background: var(--bz-border);
border-radius: 5px;
margin: 10px 0;
}
.af-footer-bottom .row
{
padding:10px 20px;
}
.af-footer-bottom span,
.af-footer-bottom .af-footer-copyright
{
font-size:0.9rem;
color:var(--bz-text);
}
.af-footer-ul
{
padding:0;
}
.af-footer-ul li
{
list-style:none;
line-height:2.5;
text-align:center;
font-size:0.9rem;
}
.af-footer-ul li a
{
color:var(--bz-text);
}
.af-footer-contact
{
text-align:center;
}
.af-footer-contact ul
{
padding:0;
margin: 0 auto;
display: table;
}
.af-footer-contact ul:not(.af-footer-first) > li:not(:first-child)
{
margin-top:20px;
float:right;
}
.af-footer-contact li
{
list-style: none;
float: right;
margin: 7px 3px;
color: var(--bz-white);
padding: 6px 8px;
border-radius: 50%;
}
.af-footer-contact .af-child1
{
background: var(--bz-social-telegram);
}
.af-footer-contact .af-child2
{
background: linear-gradient(45deg, var(--bz-social-instagram-1), var(--bz-social-instagram-2), var(--bz-social-instagram-3), var(--bz-social-instagram-4), var(--bz-social-instagram-5), var(--bz-social-instagram-6));
}
.af-footer-contact .af-child3
{
background: var(--bz-social-whatsapp);
}
.af-footer-contact .af-child4
{
background: var(--bz-social-twitter);
}
.af-footer-contact .af-child1 > a,
.af-footer-contact .af-child2 > a,
.af-footer-contact .af-child3 > a,
.af-footer-contact .af-child4 > a {
color: inherit;
display: block;
line-height: 1;
}
.af-footer-first
{
position:relative;
}
.af-footer-first li
{
width:100%;
line-height:0.5;
}
.af-footer-first a
{
right: -80px;
top: 20px;
color:var(--bz-text);
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
flex-direction: column;
color: var(--bz-white);
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
border-radius: 5px;
flex-shrink: 0;
width: 100%;
color: var(--bz-white);
position: relative;
transition-property: transform;
padding: 5px;
}
.swiper-slide strong
{
margin-bottom:30px;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius:5px;
background:var(--bz-text-strong);
}
.swiper {
margin-left: auto;
margin-right: auto;
}
.brbr
{
box-shadow: 0 0px 8px 0px rgba(var(--bz-black-rgb), 0.1);
background: var(--bz-white);
border-radius: 5px;
padding: 10px 30px;
}
.af-single-comment span
{
display:block;
}
.af-single-content .af-top-header-ads
{
flex-wrap:wrap;
}
.af-single-content h1
{
font-size: 1.5rem;
margin: 10px 0 20px 0;
line-height: 1.5;
font-weight: bold;
}
.af-single-content .af-rutitr
{
margin-top: 15px;
display: flex;
}
.af-single-content h2, .af-single-content h3
{
font-weight: bold;
font-size: 1.5rem;
}
.af-single-mc h4
{
font-size: 1.1rem;
line-height: 1.8;
font-weight: bold;
}
.af-single-mc blockquote
{
background: var(--bz-surface-muted);
padding: 5px 25px;
border-radius: 10px;
font-style: italic;
}
.af-single-content p
{
font-size: 1rem;
line-height: 2rem;
text-align: justify;
margin: 20px 0;
}
tbody, td, tfoot, th, thead, tr
{
border-color: var(--bz-border);
border-style: solid;
border-width: 1px;
}
td
{
width:auto;
padding:10px;
}
table
{
margin: 0 auto;
width: 100%;
}
.wp-video
{
margin:0 auto;
}
/* Responsive post videos: scoped to article content to preserve cards and ads. */
.single-post .af-single-content .wp-video,
.single-post .af-single-mc .wp-video {
width: min(100%, 760px) !important;
max-width: 100%;
background: var(--bz-black);
overflow: hidden;
}
.single-post .af-single-content .wp-video.baztab-video-portrait,
.single-post .af-single-mc .wp-video.baztab-video-portrait {
width: min(100%, 460px, calc(75vh * var(--baztab-video-ratio, .5625))) !important;
}
.single-post .af-single-content .wp-video video,
.single-post .af-single-content .wp-video .mejs-container,
.single-post .af-single-mc .wp-video video,
.single-post .af-single-mc .wp-video .mejs-container {
width: 100% !important;
max-width: 100%;
height: auto !important;
aspect-ratio: var(--baztab-video-ratio, 16 / 9);
object-fit: contain;
background: var(--bz-black);
}
.mejs-controls
{
direction:ltr;
}
.af-single-content .lead
{
background: var(--bz-info-soft);
border-radius: 5px;
font-size: 1rem;
padding: 10px;
margin-bottom: 10px;
}
.af-single-content img
{
width: auto;
display: block;
margin: 0 auto;
max-width: 100%;
height:auto;
border-radius:5px;
}
.af-single-2
{
width:-webkit-fill-available !important;
}
.af-single-content .alignleft
{
float:left;
margin: 20px 25px 20px 0;
}
.af-single-content .alignright
{
float:right;
margin: 20px 0 20px 25px;
}
.af-sec-title
{
font-size: 1.4rem;
font-weight: 900;
margin: 30px 0;
}
.af-related-main h5
{
font-size: 1.1rem;
font-weight: bold;
margin: 10px 0;
line-height: 1.5rem;
}
.af-single-first
{
width:50% !important;
float: right;
margin-left: 30px !important;
margin-top:20px;
}
.af-single-second
{
width:50% !important;
float: left;
margin-right: 30px !important;
margin-top:20px;
}
.af-wide-img
{
height:500px;
background-size:cover;
}
.af-single-wide
{
margin-bottom:10px;
border-radius:5px;
overflow:hidden;
position:relative;
}
.af-single-wide .af-single-meta, .af-archive-big .af-single-meta
{
position: absolute;
bottom: 0;
padding:40px;
background-image: linear-gradient(to bottom,rgba(var(--bz-black-rgb), 0),rgba(var(--bz-black-rgb), 0.9));
}
.af-single-wide .af-single-meta h1, .af-archive-big .af-single-meta h1
{
color: var(--bz-white);
font-size: 1.5rem;
font-weight: bold;
}
.af-single-meta
{
width:100%;
display:flex;
}
.af-single-meta > ul
{
display:flex;
padding:0;
}
.af-single-meta ul:last-child
{
justify-content: flex-end;
}
.af-single-meta .col-md-3 ul
{
border:1px solid var(--bz-accent-600);
}
.af-single-meta ul li
{
list-style:none;
}
.af-single-meta ul .af-single-cat
{
background: var(--bz-warning);
color: var(--bz-white);
border-radius: 5px;
padding: 1px 10px;
font-size: 0.8rem;
height: 20px;
margin-left: 30px;
margin-right:15px;
}
.af-single-author span,
.af-single-identity span
{
font-size:0.8rem;
}
.af-single-meta .af-single-identity,
.af-single-meta .af-single-actions,
.af-single-meta .af-news-id {
list-style: none;
}
.af-single-cat a
{
color:var(--bz-white);
}
.af-single-meta .af-time, .af-single-meta .af-date
{
margin-left: 40px;
font-size:0.8rem;
}
.af-single-meta .af-time {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 6px;
row-gap: 2px;
}
.af-single-meta .af-time-value {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
direction: rtl;
}
.af-single-meta .af-time svg
{
margin-left:0;
flex: 0 0 auto;
}
.af-single-meta .dropdown > a
{
padding: 0 10px;
background: var(--bz-accent-600);
border: none;
}
.af-single-meta .af-news-id
{
font-size: 0.9rem;
align-self: center;
margin-right: 30px;
}
.af-single-6 .af-single-meta .af-news-id
{
color:var(--bz-white);
align-self: flex-start;
}
.af-single-6 .af-single-meta ul:last-child
{
margin-top:10px;
flex-direction: row;
}
.af-single-meta ul ul li
{
margin:0 5px;
}
.af-single-wide .af-single-meta h1
{
margin-bottom:20px;
}
.af-single-6 .af-single-meta h1
{
width:52%;
line-height:1.5;
}
.af-single-wide .af-time, .af-single-wide .af-single-share, .af-archive-big .af-time, .af-single-wide .af-single-author a, .af-single-wide .af-single-author svg, .af-single-wide .af-single-identity a, .af-single-wide .af-single-identity svg
{
color:var(--bz-white);
}
.af-archive-items
{
padding-top:40px;
}
.af-archive-item
{
margin-bottom:20px;
}
.af-archive-img
{
width:30%;
margin-left:20px;
}
.af-archive-img img
{
width:100%;
border-radius:5px;
height:auto;
}
.af-archive-desc
{
width:65%;
}
.af-archive-desc h2
{
font-size:1.5rem;
font-weight:bold;
line-height: 1.5;
}
.af-archive-desc p
{
text-align:justify;
}
.af-archive-main .pagination li
{
background: var(--bz-brand-800);
color: var(--bz-white);
margin-left: 5px;
padding: 5px 15px;
border-radius: 5px;
}
.af-archive-main .pagination li a
{
color:var(--bz-white);
}
.af-archive-main h1, .af-archive-top h1
{
font-weight: bold;
font-size: 1.6rem;
margin: 30px 0;
}
.af-archive-top h1
{
margin:15px 0;
}
.af-archive-top .brbr
{
margin-bottom:10px;
}
.af-archive-big
{
height:400px;
border-radius:5px;
background-size:cover;
margin-bottom:10px;
position:relative;
overflow:hidden;
}
/************************/
.harika-comments-list {
padding-bottom: 50px;
border-bottom: 1px solid var(--bz-border);
margin-bottom: 50px;
}
.harika-comments h2, .comments-area h3 {
border-right: 3px solid var(--maincolor);
padding: 10px 15px 10px 0;
line-height: 1;
background-color: var(--twocolor);
font-size: 18px;
margin-bottom: 30px;
}
div.comments-top-inputs p input {margin: 0;border: 1px solid var(--bz-surface-subtle);padding: 5px 15px;border-radius: 30px;width: 100%;}
.comments-bottom-inputs p textarea {
border: 1px solid var(--bz-surface-subtle);
border-radius: 24px;
padding: 10px 15px;
}
#commentform p input#submit {
border: 0;
background-color: var(--bz-brand-800);
color: var(--bz-white);
padding: 3px 20px;
border-radius: 5px;
transition: 0.2s ease-in-out;
}
#commentform p input#submit:hover {
background-color: var(--bz-text);
}
ol.comments {
padding: 0;
}
ol.comments li {
position: relative;
list-style: none;
display: flex;
background-color: var(--bz-surface-muted);
padding: 15px 10px;
border-radius: 8px;
margin-bottom: 15px;
}
.comment-content h3 a, .comment-content h3 {
font-size: 16px;
color: var(--bz-text);
}
p.comment-date {
margin: 0;
background-color: var(--bz-border);
width: fit-content;
padding: 0 10px;
border-radius: 30px;
font-size: 12px;
}
.comment-avatar {
display: inline-block;
float: right;
margin-left: 20px;
}
.comment-content {
display: inline-block;
}
main .harika-comments {
padding: 40px 40px;
}
.comment-avatar img.avatar {
border-radius: 20px;
background-color: var(--bz-border);
padding: 3px;
}
.wp-block-image img {
height: auto;
}
.af-single-meta .dropdown-menu
{
min-width:auto !important;
}
.af-single-meta .dropdown-menu li
{
margin:0;
}
.af-single-meta .dropdown-menu .dropdown-item
{
padding:3px 10px;
}
ol.comments li .awaiting {
display: block;
position: absolute;
left: 10px;
background-color: var(--bz-text);
color: var(--bz-white);
padding: 0 12px;
border-radius: 4px;
}
.comment-body p
{
font-size:0.9rem;
}
#reply-title
{
display:none !important;
}
.comment-body {
background-color: var(--bz-surface-muted);
margin-bottom: 15px;
padding: 25px;
border-radius: 5px;
}
.comment-body a {
color: var(--bz-black);
}
.comment-author img
{
width:auto;
}
.comment-inputs {
display: flex;
}
.comment-form p input {
margin: 0;
border: 1px solid var(--bz-surface-subtle);
padding: 5px 15px;
border-radius: 30px;
}
.comment-inputs p:last-child {
margin-left: 0;
}
.comment-inputs p {
margin-left: 20px;
}
textarea#comment {
border: 1px solid var(--bz-surface-subtle);
border-radius: 24px;
padding: 10px 15px;
}
input#wp-comment-cookies-consent {
width: auto !important;
}
ol.comment-list {
padding: 0;
margin: 0;
}
ol.comment-list li {
list-style: none;
}
article.comment-body {
background-color: var(--bz-surface-muted);
margin-bottom: 15px;
padding: 25px;
border-radius: 5px;
}
article.comment-body a {
color: var(--bz-black);
}
.comment-author img.avatar {
margin: 0 0 10px 10px;
border-radius: 16px;
}
.commentmetadata a {
background-color: var(--bz-border);
padding: 0 10px;
font-size: 12px;
border-radius: 20px;
color: var(--bz-text-secondary) !important;
}
.comment-content p {
margin: 15px 0;
}
a.comment-reply-link {
border: none;
padding: 0 6px;
font-size: 11px;
background-color: var(--bz-white);
border-radius: 5px;
}
em.comment-awaiting-moderation {
line-height: 3;
}
.widget a:hover {
color: var(--bz-text);
}
.widget a {
color: var(--bz-text-muted);
font-size: 13px !important;
}
.widget .tagcloud a {
background-color: var(--bz-surface-subtle);
padding: 0 10px;
border-radius: 30px;
font-weight: 300;
line-height: 2;
}
.comment-author-admin .comment-author img.avatar {
border: 2px solid var(--maincolor);
}
.comment-author-admin .comment-author:after {
content: "مدیر";
color: var(--bz-white);
font-size: 10px;
line-height: 1.4;
padding-left: 2px;
text-align: center;
background-color: var(--bz-text-secondary);
width: 34px;
height: 15px;
position: absolute;
right: -14px;
top: -5px;
border-radius: 9px;
}
.comment-author.vcard {
position: relative;
float:right;
width:15%;
}
.comment-meta
{
float:right;
width:65%;
}
ul.list-inline {
padding: 0;
margin: 0;
}
ul.list-inline li {
display: inline-block;
}
ul.list-inline li a i {
color: var(--bz-black);
font-size: 16px;
background-color: var(--bz-white);
border-radius: 10px;
margin: 3px;
width: 30px;
height: 30px;
text-align: center;
line-height: 1.7;
border: 2px solid;
transition: 0.2s ease-in-out;
}
ul.list-inline li:first-child a i {
margin-right: 0 !important;
}
.author-description-top {
display: flex;
}
.author-social-links {
margin: auto auto auto 0;
}
.author-description-meta {
margin-top: 12px;
}
i.fab.fa-twitter {
color: var(--bz-social-twitter);
}
i.fab.fa-facebook, i.fab.fa-facebook-f {
color: var(--bz-social-facebook);
}
i.fab.fa-instagram {
color: var(--bz-brand-700);
}
i.fab.fa-linkedin, i.fab.fa-linkedin-in {
color: var(--bz-social-linkedin);
}
i.fab.fa-pinterest-p, i.fab.fa-pinterest {
color: var(--bz-social-pinterest);
}
i.fab.fa-github {
color: var(--bz-accent-600);
}
i.fab.fa-dribbble {
color: var(--bz-brand-700);
}
i.fab.fa-behance {
color: var(--bz-brand-800);
}
i.fab.fa-skype {
color: var(--bz-brand-800);
}
ul.list-inline li a i:hover {
background-color: currentcolor;
}
.author-description-top h3, .author-description-top h3 a {
color: var(--bz-text);
font-size: 18px;
margin: auto 0;
}
div#author-avatar img {
width: 100%;
height: auto;
border-radius: 20px;
}
a.comment-edit-link {
margin-right: 5px;
}
.post-content-footer.post-author-box-container.container {
padding: 30px;
}
.social-share a:hover i {
color: var(--bz-white);
}
.social-share a:hover {
background-color: var(--maincolor);
color: var(--bz-white);
}
main.site-main > .single-top-image-container {
filter: grayscale(1);
}
.logged-in-as a {
color: var(--bz-text);
}
.comment-form-comment textarea {
width: 100%;
}
ul.list-inline li a i:hover:before {
color: var(--bz-white);
}
.social-share a.share_button_pinterest:hover {
background-color: var(--bz-social-pinterest);
}
.social-share a.share_button_linkedin:hover {
background-color: var(--bz-social-linkedin);
}
.social-share a.share_button_twitter:hover {
background-color: var(--bz-social-twitter);
}
.social-share a.share_button_facebook:hover {
background-color: var(--bz-social-facebook);
}
ul.list-inline li a i:before {
transition: 0.2s ease-in-out;
}
.comment-inputs p input {
width: 100%;
}
.row
{
margin-left: calc(-.2 * var(--bs-gutter-x)) !important;
margin-right: calc(-.2 * var(--bs-gutter-x)) !important;
}
.af-right-tag
{
padding-top:10px;
}
.af-left-tag li
{
float: right;
background: var(--bz-accent-600);
display: block;
margin-left: 5px;
border-radius: 5px;
padding: 5px 10px;
margin-bottom:5px;
}
.af-left-tag li a
{
color:var(--bz-white);
}
.af-archive-top .af-article-img
{
width:41%;
}
.af-archive-top .af-article-desc
{
width:50%;
}
.af-service-archive
{
margin-bottom:10px;
}
.big-img
{
width:100%;
}
.af-archive-2
{
flex-wrap:wrap;
}
.af-archive-2 .af-article-desc h3
{
margin-top:20px;
}
.af-archive-2 .af-article-img img
{
width:100%;
height:auto;
}
.af-instagram
{
background:linear-gradient(45deg, var(--bz-social-instagram-1), var(--bz-social-instagram-2), var(--bz-social-instagram-3), var(--bz-social-instagram-4), var(--bz-social-instagram-5), var(--bz-social-instagram-6));
color: var(--bz-white);
border-radius: 50%;
width: 25px;
height: 25px;
padding: 5px;
}
.af-twitter
{
background: var(--bz-social-twitter);
color: var(--bz-white);
border-radius: 50%;
width: 25px;
height: 25px;
padding: 5px;
}
.af-whatsapp
{
background: var(--bz-social-whatsapp);
color: var(--bz-white);
border-radius: 50%;
width: 25px;
height: 25px;
padding: 5px;
}
.af-telegram
{
background: var(--bz-social-telegram);
color: var(--bz-white);
border-radius: 50%;
width: 25px;
height: 25px;
padding: 5px;
}
.af-archive-top .af-article-desc
{
margin-right:15px;
width:53%;
}
.show-btn-mobile
{
display:none;
}
.tab-pane .af-article-desc h3
{
font-size:1.2rem;
}
.gallery { margin: 0 auto 18px; }
.gallery .gallery-item {
float: left;
margin-top: 0;
text-align: center;
width: 33%;
}
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery img {
box-shadow: 0px 0px 4px var(--bz-text-faint);
border: 1px solid var(--bz-white);
padding: 8px;
background: var(--bz-surface-subtle);
}
.gallery img:hover {
background: var(--bz-white);
}
.gallery-columns-2 .attachment-medium {
max-width: 92%;
height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
max-width: 84%;
height: auto;
}
.gallery .gallery-caption {
color: var(--bz-text-muted);
font-size: 12px;
margin: 0 0 12px;
}
.gallery dl, .gallery dt { margin: 0; }
.gallery br+br { display: none; }
@media (max-width: 767.98px) {
.af-single-meta .af-time, .af-single-meta .af-date
{
margin-left:40px;
}
}
@media (max-width: 899.98px) {
.af-article-main
{
flex-wrap:wrap;
}
.af-article-img, .af-article-img img {
width: 100%;
height: auto;
}
.af-article-img
{
margin:0;
}
.af-slide-top .af-article-desc
{
padding:0;
}
.af-slide-top .big h3
{
font-size: 1.3rem;
line-height: 1.5;
}
.af-article-desc h3
{
font-size:1rem;
}
.af-single-meta ul
{
flex-wrap:wrap;
}
.af-single-meta ul .af-single-author,
.af-single-meta ul .af-single-identity
{
margin-left:10px;
margin-bottom:10px;
}
.af-single-meta ul .af-single-cat
{
margin-left:25px;
}
.af-single-share
{
display:none;
}
.af-archive-img
{
margin-bottom:25px;
}
.af-archive-img, .af-archive-desc
{
width:100%;
}
.af-archive-desc .af-single-meta .af-time
{
margin-right:10px;
margin-top:5px;
}
.af-slide-top .big
{
width:100%;
}
.af-slide-top, .af-news-main
{
margin-bottom:10px;
}
.af-advert-big
{
flex-direction: column;
}
.af-advert-width
{
width:100%;
}
.af-single-wide .af-single-meta, .af-archive-big .af-single-meta
{
padding:25px;
}
.af-wide-img
{
background-position:center;
}
.af-slide-top .af-article-img, .af-slide-top .af-article-desc
{
width:48%;
}
.af-slide-top .af-article-desc
{
margin-right:10px;
}
.af-article-desc p
{
display:none;
}
.af-service-section .af-article-desc
{
margin-top:0;
}
.af-slide-top .big
{
width:100%;
}
.af-article-desc
{
width:100%;
}
.af-news-main .af-article-desc
{
width:100%;
}
.af-video-item
{
width: 48%;
margin-left: 1%;
}
.af-video-item:first-child, .af-video-item:nth-child(4)
{
margin-right:1%;
}
.af-video-main
{
margin-left: 2px;
margin-right: 2px;
margin-bottom:10px;
}
.af-footer-first a
{
display:none;
}
.af-news-head nav
{
display:none;
}
.af-news-head .flex-column
{
display:block;
}
.af-news-head .dropdown
{
display:block;
}
.af-single-second
{
width: 100% !important;
margin-bottom: 15px !important;
}
.af-single-meta ul .af-single-cat
{
margin-right:auto;
}
.af-single-meta .af-news-id
{
text-align:left;
}
.gallery-item
{
width:50% !important;
}
.gallery br
{
clear:unset !important;
}
.comment-author.vcard
{
width:30%;
}
.af-video-main h3
{
position: relative;
bottom: 0;
padding: 15px 0;
color: var(--bz-white);
font-weight: bold;
font-size: 1.2rem;
background: none;
line-height: 35px;
margin: 0;
border-radius: 5px;
}
.comment-meta
{
width:70%;
}
.comment-body
{
padding:15px;
}
.brbr
{
padding:10px 20px;
}
.cld-like-dislike-wrap
{
margin-top:10px !important;
}
.fn
{
font-size:0.9rem;
}
.af-video-hover
{
height: auto;
top: 50px
}
.af-picture-hover h3
{
position: absolute;
bottom: 0;
color: var(--bz-white);
padding: 20px 15px;
font-weight: bold;
line-height: 1.5;
font-size: 1rem;
}
.af-picture-small h3
{
line-height:1.5;
}
.navbar-dark .navbar-toggler-icon
{
background-image: url("data:image/svg+xml,");
}
.navbar-dark .nav-item
{
height: 45px;
border-bottom: 1px solid var(--bz-surface-subtle);
padding-top: 10px;
border-left: none;
}
.navbar-dark .nav-item:last-child
{
border-bottom: none;
}
.af-header-date-main, .show-btn
{
display:none;
}
.navbar-nav .dropdown-menu
{
position:absolute;
width:100%;
background:var(--bz-brand-800);
}
.navbar-nav .dropdown-menu ul
{
padding:0;
}
.navbar-nav .dropdown-menu li
{
display:block;
line-height:2;
}
.navbar-nav .dropdown-menu li a
{
color:var(--bz-white);
}
.af-video-index
{
background-position:right;
}
.af-news-head
{
align-items:center;
justify-content: space-between;
}
.navbar-nav
{
background:var(--bz-white);
}
.af-footer-contact li
{
width:100%;
}
.af-footer-contact ul:not(.af-footer-first) > li:not(:first-child)
{
width: 40px;
height: 40px;
display: inline-block;
}
.af-footer-contact ul:not(.af-footer-first) > li:not(:first-child)
{
float:unset;
margin:5px;
}
.af-mobile-flex
{
flex-grow:1;
}
.show-btn-mobile
{
flex-grow:0;
}
.af-left-tag li
{
margin-bottom:5px;
}
.af-right-tag
{
margin:15px 0;
}
.show-btn-mobile
{
display:block;
}
.af-searchservices
{
column-count:2;
padding-right:5px;
}
.af-search-page select, .af-search-page input
{
padding:5px 10px;
}
.af-footer-ul
{
padding:0;
}
.af-footer-ul li
{
font-size:0.7rem;
}
.af-single-wide .af-single-meta
{
flex-wrap:wrap;
}
.af-single-wide .af-single-meta h1
{
width:100%;
}
.af-single-meta ul:last-child
{
justify-content: flex-start;
flex:auto;
}
.col-md-9
{
width:100%;
}
.af-w65
{
width:65%;
}
.af-w35
{
width:35%;
}
.af-w100
{
width:100%;
}
.current-menu-item a:after
{
bottom: -10px;
}
.navbar-dark .navbar-nav a
{
width:100%;
display:block;
}
.af-top-header-ads
{
flex-flow:column;
}
}
@media (max-width: 575.98px)
{
#gallery-1
{
display: flex;
flex-wrap: wrap;
}
.af-w65, .af-w35
{
width:100%;
}
#gallery-1 .gallery-item
{
}
.pagination li:nth-child(4), .pagination li:nth-child(5), .pagination li:nth-child(8)
{
display:none;
}
.af-article-main
{
flex-wrap:wrap;
}
.af-article-img, .af-article-img img {
width: 100%;
height: auto;
}
.af-article-img
{
margin:0;
}
.af-slide-top .af-article-desc
{
padding:0;
}
.af-slide-top .big h3
{
font-size: 1.3rem;
line-height: 1.5;
}
.af-article-desc h3
{
font-size:1rem;
}
.af-single-meta ul
{
flex-wrap:wrap;
flex-basis: content;
flex-flow:wrap;
flex-direction: column;
}
.af-single-meta ul .af-single-cat
{
margin-left:auto;
}
.af-single-share
{
display:none;
}
.af-date-mobile
{
display: block;
text-align: center;
border-top: 1px solid var(--bz-border);
padding: 15px 0 0;
}
.af-archive-img
{
margin-bottom:25px;
}
.af-archive-img, .af-archive-desc
{
width:100%;
}
.af-slide-top .big
{
width:100%;
}
.af-slide-top, .af-news-main
{
margin-bottom:10px;
}
.af-advert-big
{
flex-direction: column;
}
.af-advert-width
{
width:100%;
}
.af-single-wide .af-single-meta, .af-archive-big .af-single-meta
{
padding:25px;
}
.af-wide-img
{
background-position:center;
}
.af-top-titr1 .af-advert-widget:nth-child(1)
{
padding-left:0;
}
.af-top-titr1 .af-advert-widget:nth-child(2)
{
padding-right:0;
}
.af-sticky-ads
{
display: block;
z-index: 100001;
position: fixed;
bottom: 0;
padding:0;
}
.af-sticky-ads .af-advert-widget
{
margin:0;
}
.af-slide-top .af-article-img, .af-slide-top .af-article-desc
{
width:48%;
}
.af-slide-top .af-article-desc
{
margin-right:10px;
}
.af-article-desc p
{
display:none;
}
.af-service-section .af-article-desc
{
margin-top:0;
}
.af-slide-top .big
{
width:100%;
}
.af-article-desc
{
width:100%;
}
.af-news-main .af-article-desc
{
width:100%;
}
.af-video-item
{
width: 48%;
margin-left: 1%;
}
.af-video-item:first-child, .af-video-item:nth-child(4)
{
margin-right:1%;
}
.af-video-main
{
margin-left: 2px;
margin-right: 2px;
margin-bottom:10px;
}
.af-footer-first a
{
display:block;
}
.af-news-head nav
{
display:none;
}
.af-news-head .flex-column
{
display:block;
}
.af-news-head .dropdown
{
display:block;
}
.af-single-second
{
width: 100% !important;
margin-bottom: 15px !important;
}
.af-single-wide .af-single-cat
{
margin-right:auto !important;
margin-left:0;
}
.af-single-meta ul .af-single-cat
{
margin: 5px 0px;
width:fit-content;
}
.af-single-meta .dropdown
{
margin-right:auto;
margin-left:0;
}
.af-single-first
{
width:100% !important;
}
.af-single-6 .af-single-meta .dropdown
{
margin-right:auto;
margin-left:0;
}
.af-single-wide .af-time
{
padding-top:5px;
}
.af-single-meta .af-news-id
{
text-align:left;
margin-right: auto;
margin-top: 10px;
width:max-content;
}
.gallery-item
{
width:50% !important;
}
.gallery br
{
clear:unset !important;
}
.comment-author.vcard
{
width:30%;
}
.af-video-main h3
{
position: relative;
bottom: 0;
padding: 15px 0;
color: var(--bz-white);
font-weight: bold;
font-size: 1.2rem;
background: none;
line-height: 35px;
margin: 0;
border-radius: 5px;
}
.comment-meta
{
width:70%;
}
.comment-body
{
padding:15px;
}
.brbr
{
padding:10px 20px;
}
.cld-like-dislike-wrap
{
margin-top:10px !important;
}
.fn
{
font-size:0.9rem;
}
.af-video-hover
{
height: auto;
top: 50px
}
.af-picture-hover h3
{
position: absolute;
bottom: 0;
color: var(--bz-white);
padding: 20px 15px;
font-weight: bold;
line-height: 1.5;
font-size: 1rem;
}
.af-picture-small h3
{
line-height:1.5;
}
.navbar-dark .navbar-toggler-icon
{
background-image: url("data:image/svg+xml,");
}
.navbar-dark .nav-item
{
height: 45px;
border-bottom: 1px solid var(--bz-surface-subtle);
padding-top: 10px;
border-left: none;
}
.navbar-dark .nav-item:last-child
{
border-bottom: none;
}
.af-header-date-main, .show-btn
{
display:none;
}
.navbar-nav .dropdown-menu
{
position:absolute;
width:100%;
}
.navbar-nav .dropdown-menu ul
{
padding:0;
}
.navbar-nav .dropdown-menu li
{
display:block;
line-height:2;
}
.af-video-index
{
background-position:right;
}
.af-news-head
{
align-items:center;
justify-content: space-between;
}
.navbar-nav
{
background:var(--bz-white);
}
.af-footer-contact li
{
width:100%;
}
.af-footer-contact ul:not(.af-footer-first) > li:not(:first-child)
{
width: 40px;
height: 40px;
display: inline-block;
}
.af-footer-contact ul:not(.af-footer-first) > li:not(:first-child)
{
float:unset;
margin:5px;
}
.af-mobile-flex
{
flex-grow:1;
}
.show-btn-mobile
{
flex-grow:0;
}
.af-left-tag li
{
margin-bottom:5px;
}
.af-right-tag
{
margin:15px 0;
}
.show-btn-mobile
{
display:block;
}
.af-searchservices
{
column-count:2;
padding-right:5px;
}
.af-search-page select, .af-search-page input
{
padding:5px 10px;
}
.af-footer-ul
{
padding:0;
}
.af-footer-ul li
{
font-size:0.7rem;
}
.af-footer-bottom
{
text-align:justify;
}
.af-single-wide .af-single-meta
{
flex-wrap:wrap;
}
.af-single-wide .af-single-meta h1
{
width:100%;
}
.af-single-meta ul:last-child
{
justify-content: flex-start;
flex: auto;
}
.current-menu-item a:after
{
bottom: -10px;
}
.navbar-dark .navbar-nav a
{
width:100%;
display:block;
}
footer h4
{
font-size:1rem;
height:35px;
}
.af-top-header-ads
{
flex-flow:column;
}
.swiper-slide img
{
width: 100%;
height: auto;
}
.af-video-main img, .af-video-img img
{
height:auto;
}
.af-feed ul
{
padding:0;
}
.af-feed li
{
flex-direction:column;
}
}
@media (max-width: 1300px) {
.af-header-date-main
{
display:none;
}
.af-article-img img
{
width:100%;
}
}
@media (max-width: 1399.98px)
{
}
@media (max-width: 600px) {
table {
display: block;
max-width: -moz-fit-content;
max-width: fit-content;
margin: 0 auto;
overflow-x: auto;
height:unset !important;
border:0;
}
}
.wp-caption
{
max-width:100%;
}
/* Safe optimization pass: mobile overflow guards only; thumbnail dimensions remain controlled by theme rules. */
iframe {
max-width: 100%;
}
.af-advert-widget img {
max-width: 100%;
}
@media (max-width: 767.98px) {
html, body {
overflow-x: hidden;
}
.af-main-content,
.container,
.container-fluid {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6,
.nav-link,
.af-head-title {
overflow-wrap: anywhere;
}
}
/* 5.3 — fast search scope and clear empty states; limited to the /srch template. */
.af-search-page .baztab-search-scope {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: -4px 0 18px;
padding: 10px 12px;
border: 1px solid var(--bz-border);
border-radius: 8px;
background: var(--bz-info-soft);
}
.af-search-page .baztab-search-scope label {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
color: var(--bz-text);
cursor: pointer;
}
.af-search-page .baztab-search-scope input {
width: auto;
margin: 0;
}
.af-search-page .baztab-search-scope small,
.af-search-page .baztab-search-hint {
color: var(--bz-text-secondary);
}
.af-search-page .baztab-search-result-summary {
margin: 18px 0 12px;
color: var(--bz-text-secondary);
}
.af-search-page .baztab-search-empty {
display: grid;
gap: 6px;
margin: 12px 0 24px;
padding: 22px;
border: 1px solid var(--bz-border);
border-radius: 10px;
background: var(--bz-info-soft);
color: var(--bz-text-secondary);
}
.af-search-page .baztab-search-empty strong {
color: var(--bz-brand-900);
font-size: 1rem;
}
@media (max-width: 767.98px) {
.af-search-page .baztab-search-scope {
align-items: flex-start;
flex-direction: column;
}
}
/* Baztab 5.2: scoped, RTL-safe comment cards. */
.af-single-comment .af-comment-guidelines {
margin: 12px 0 20px;
padding: 12px 16px;
border-right: 3px solid var(--maincolor);
border-radius: 8px;
background: var(--bz-info-soft);
color: var(--bz-text-secondary);
font-size: .88rem;
line-height: 1.8;
}
.af-single-comment .af-comment-guidelines p {
margin: 0;
}
.harika-comments .comments-area,
.harika-comments .comment-list {
width: 100%;
}
.harika-comments .comment-list {
margin: 0;
padding: 0;
}
.harika-comments .comment-list .baztab-comment-item {
display: block;
list-style: none;
margin: 0 0 16px;
}
.harika-comments .baztab-comment-card {
position: relative;
margin: 0;
padding: 20px;
border: 1px solid var(--bz-surface-subtle);
border-radius: 12px;
background: var(--bz-white);
box-shadow: 0 3px 14px rgba(var(--bz-black-rgb), 0.045);
}
.harika-comments .baztab-comment-head {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.harika-comments .baztab-comment-avatar {
flex: 0 0 52px;
width: 52px;
height: 52px;
}
.harika-comments .baztab-comment-avatar img.avatar {
display: block;
width: 52px;
height: 52px;
margin: 0;
padding: 0;
border: 2px solid var(--bz-surface-subtle);
border-radius: 50%;
object-fit: cover;
}
.harika-comments .baztab-comment-meta {
display: flex;
flex: 1 1 auto;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.harika-comments .baztab-comment-author-row {
display: flex;
align-items: center;
min-width: 0;
gap: 8px;
}
.harika-comments .baztab-comment-author,
.harika-comments .baztab-comment-author a {
color: var(--bz-text);
font-size: .96rem;
font-style: normal;
font-weight: 700;
text-decoration: none;
}
.harika-comments .baztab-comment-edit a,
.harika-comments .baztab-comment-date,
.harika-comments .baztab-comment-actions a {
display: inline-flex;
align-items: center;
width: auto;
border-radius: 999px;
text-decoration: none;
}
.harika-comments .baztab-comment-edit a {
padding: 2px 8px;
background: var(--bz-surface-muted);
color: var(--bz-text-secondary);
font-size: 11px;
}
.harika-comments .baztab-comment-date {
flex: 0 0 auto;
padding: 5px 10px;
background: var(--bz-surface-muted);
color: var(--bz-text-secondary);
direction: rtl;
font-size: 12px;
white-space: nowrap;
}
.harika-comments .baztab-comment-content {
clear: both;
margin-top: 15px;
color: var(--bz-text);
font-size: .95rem;
line-height: 2;
overflow-wrap: anywhere;
}
.harika-comments .baztab-comment-content p {
margin: 0 0 10px;
}
.harika-comments .baztab-comment-content p:last-child {
margin-bottom: 0;
}
.harika-comments .baztab-comment-awaiting {
margin: 14px 0 0;
padding: 8px 12px;
border-radius: 7px;
background: var(--bz-warning-soft);
color: var(--bz-warning);
font-size: 12px;
}
.harika-comments .baztab-comment-actions {
margin-top: 12px;
}
.harika-comments .baztab-comment-actions a {
padding: 4px 12px;
border: 1px solid var(--bz-border);
background: var(--bz-white);
color: var(--bz-text-secondary);
font-size: 12px;
}
.harika-comments .comment-list .children {
margin: 0 24px 16px 0;
padding: 0 16px 0 0;
border-right: 2px solid var(--bz-surface-subtle);
}
.harika-comments .cld-like-dislike-wrap {
display: inline-flex;
float: none;
clear: both;
align-items: center;
gap: 7px;
width: auto;
margin: 14px 0 0 !important;
padding: 6px 10px;
border: 1px solid var(--bz-surface-subtle);
border-radius: 999px;
background: var(--bz-info-soft);
}
.harika-comments .comment-navigation {
margin: 18px 0;
}
.harika-comments #commentform input:not([type="submit"]),
.harika-comments #commentform textarea {
width: 100%;
border: 1px solid var(--bz-border);
border-radius: 9px;
background: var(--bz-white);
box-shadow: none;
}
.harika-comments #commentform textarea {
min-height: 130px;
padding: 12px 14px;
}
.harika-comments #commentform input:not([type="submit"]) {
padding: 9px 13px;
}
.harika-comments #commentform input:focus,
.harika-comments #commentform textarea:focus {
border-color: var(--maincolor);
outline: 2px solid color-mix(in srgb, var(--maincolor) 18%, transparent);
}
.harika-comments #commentform input#submit {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-height: 40px;
padding: 7px 24px;
border: 0;
border-radius: 8px;
background-color: var(--bz-accent-500) !important;
color: var(--bz-white) !important;
font-weight: 700;
opacity: 1 !important;
visibility: visible !important;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.harika-comments #commentform input#submit:hover,
.harika-comments #commentform input#submit:focus,
.harika-comments #commentform input#submit:focus-visible,
.harika-comments #commentform input#submit:active {
background-color: var(--bz-accent-600) !important;
color: var(--bz-white) !important;
opacity: 1 !important;
visibility: visible !important;
outline: 2px solid rgba(var(--bz-accent-rgb), 0.28);
outline-offset: 2px;
}
.harika-comments #commentform input#submit:disabled {
background-color: var(--bz-accent-500) !important;
opacity: .72 !important;
cursor: wait;
}
@media (max-width: 767.98px) {
main .harika-comments {
padding: 22px 0;
}
.harika-comments .baztab-comment-card {
padding: 15px;
}
.harika-comments .baztab-comment-meta {
display: block;
}
.harika-comments .baztab-comment-date {
margin-top: 5px;
}
.harika-comments .comment-list .children {
margin-right: 10px;
padding-right: 10px;
}
.comment-inputs {
display: block;
}
.comment-inputs p {
margin-left: 0;
}
}
/* 5.4.1 — mobile-only hardening; desktop newsroom proportions stay intact. */
@media (max-width: 899.98px) {
.af-w65,
.af-w35 {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
footer > .container > .row > .af-footer-contact,
footer > .container > .row > .row.col-lg-7 {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
footer > .container > .row > .row.col-lg-7 {
margin-right: 0;
margin-left: 0;
}
}
@media (max-width: 767.98px) {
.af-single-content img,
.af-single-content video,
.af-single-content canvas,
.af-single-content embed,
.af-single-content object,
.af-single-mc video {
max-width: 100% !important;
height: auto !important;
}
.af-single-content iframe,
.af-single-mc iframe,
.wp-block-embed iframe,
.af-advert-widget iframe,
.baztab-box-ad-placement iframe {
max-width: 100% !important;
}
.af-single-content table,
.af-single-mc table,
.wp-block-table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.af-single-content pre,
.af-single-content code {
max-width: 100%;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.navbar-nav .dropdown-menu {
position: static;
width: 100%;
transform: none;
}
.navbar-dark .navbar-nav > .nav-item.dropdown {
height: auto;
min-height: 45px;
}
.navbar-dark .navbar-nav > .nav-item.dropdown > .dropdown-menu.show {
position: static !important;
clear: both;
margin-top: 0;
}
.af-sticky-ads {
right: 0;
left: 0;
width: 100%;
max-width: 100%;
}
.af-search-page input,
.af-search-page select,
.harika-comments input,
.harika-comments textarea {
max-width: 100%;
}
}
@media (max-width: 575.98px) {
footer > .container {
padding-right: 12px;
padding-left: 12px;
}
footer .row.col-lg-7 > .col-4 {
flex: 0 0 33.333333%;
width: 33.333333%;
max-width: 33.333333%;
margin-bottom: 14px;
padding-right: 7px;
padding-left: 7px;
}
footer .row.col-lg-7 h4 {
height: auto;
min-height: 44px;
margin: 0 0 9px;
font-size: .9rem;
line-height: 1.55;
overflow-wrap: normal;
}
footer .row.col-lg-7 .af-footer-ul li {
font-size: .78rem;
line-height: 1.75;
overflow-wrap: normal;
}
footer .row.col-lg-7 .af-footer-ul li a {
display: inline-block;
max-width: 100%;
padding: 0 0 4px;
line-height: 1.65;
overflow-wrap: break-word;
}
footer .row.col-lg-7 .current-menu-item > a:after {
right: 50%;
bottom: 0;
width: 24px;
height: 3px;
transform: translateX(50%);
}
}
/* ============================================================
* 2.3.1 — Prevent viewport-width full-bleed sections from
* creating a page-level horizontal scrollbar on desktop.
* Internal tables/tabs keep their own overflow behavior.
* ============================================================ */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
@supports (overflow: clip) {
html,
body {
overflow-x: clip;
}
}
body.home .af-video-index {
box-sizing: border-box;
}
/* =========================================================
5.5.6 — Mobile footer refinement (original layout retained)
Keeps the existing footer order, three-column menus and visual structure.
========================================================= */
@media (max-width: 767.98px) {
footer {
margin-top: 20px;
padding: 14px 8px 10px;
}
footer > .container {
width: 100%;
max-width: 100%;
padding-right: 8px;
padding-left: 8px;
}
footer > .container > .row {
margin-right: 0;
margin-left: 0;
}
/* Keep the contact block in its original location. */
footer .af-footer-contact {
width: 100%;
margin: 0 0 12px;
padding-right: 0;
padding-left: 0;
text-align: center;
}
footer .af-footer-contact > h4 {
display: none;
}
/* Keep the original vertical quick-link layout. */
footer .af-footer-first {
display: block;
width: 100%;
margin: 0 auto 10px;
padding: 0;
}
footer .af-footer-first > li {
float: none;
width: 100%;
margin: 0;
padding: 0;
line-height: 1.7;
}
footer .af-footer-first > li > a {
position: static;
top: auto;
right: auto;
display: block;
width: 100%;
margin: 0;
padding: 4px 2px;
line-height: 1.7;
text-align: center;
}
/* Only the public-story button gets the improved mobile placement. */
footer .af-footer-first > li:first-child {
margin: 0 0 12px !important;
}
footer .af-footer-first > li:first-child > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
margin: 0 !important;
padding: 11px 16px !important;
border-radius: 24px !important;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
text-align: center;
text-shadow: none !important;
}
footer .af-footer-first > li:first-child svg {
flex: 0 0 auto;
width: 21px;
height: 21px;
margin-left: 8px;
}
/* Preserve the existing logo + social-icons arrangement. */
footer .af-footer-contact > ul:not(.af-footer-first) {
display: table;
margin: 0 auto;
padding: 0;
text-align: center;
}
footer .af-footer-contact > ul:not(.af-footer-first) > li:first-child {
float: none;
width: 100%;
margin: 0 auto 5px;
padding: 0;
}
footer .af-footer-contact > ul:not(.af-footer-first) > li:first-child img {
display: block;
width: auto;
max-width: 165px;
max-height: 68px;
margin: 0 auto;
object-fit: contain;
}
footer .af-footer-contact > ul:not(.af-footer-first) > li:not(:first-child) {
float: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 4px;
padding: 0;
vertical-align: middle;
}
footer .af-footer-contact .af-child1 > a,
footer .af-footer-contact .af-child2 > a,
footer .af-footer-contact .af-child3 > a,
footer .af-footer-contact .af-child4 > a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
/* Retain the original three-column footer menus. */
footer > .container > .row > .row.col-12.col-lg-7 {
width: 100%;
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 0;
}
footer .row.col-lg-7 > .col-4 {
flex: 0 0 33.333333%;
width: 33.333333%;
max-width: 33.333333%;
margin-bottom: 10px;
padding-right: 5px;
padding-left: 5px;
}
footer .row.col-lg-7 h4 {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
height: auto;
margin: 8px 0 7px;
padding: 0 2px;
font-size: .9rem;
line-height: 1.45;
text-align: center;
}
footer .row.col-lg-7 .af-footer-ul {
margin: 0;
padding: 0;
}
footer .row.col-lg-7 .af-footer-ul li {
margin: 0;
padding: 0;
font-size: .75rem;
line-height: 1.75;
text-align: center;
}
footer .row.col-lg-7 .af-footer-ul li a {
display: inline-block;
max-width: 100%;
padding: 2px 0;
line-height: 1.6;
overflow-wrap: break-word;
}
footer .row.col-lg-7 .current-menu-item > a:after {
right: 50%;
bottom: -1px;
width: 22px;
height: 3px;
transform: translateX(50%);
}
footer .af-footer-bottom {
width: 100%;
margin: 6px 0 0;
text-align: center;
}
footer .af-footer-bottom .row {
margin: 0;
padding: 9px 10px;
}
footer .af-footer-bottom .col-md-12 {
padding: 0;
}
footer .af-footer-bottom span,
footer .af-footer-bottom .af-footer-copyright {
font-size: .78rem;
line-height: 1.8;
text-align: center;
}
}
@media (max-width: 359.98px) {
footer .row.col-lg-7 > .col-4 {
padding-right: 3px;
padding-left: 3px;
}
footer .row.col-lg-7 h4 {
font-size: .82rem;
}
footer .row.col-lg-7 .af-footer-ul li {
font-size: .69rem;
}
}
/* =========================================================
5.5.7 — Mobile footer headings + mobile navigation polish
CSS-only refinement: WordPress menus, Bootstrap collapse,
search behavior and markup remain unchanged.
========================================================= */
/* Mobile / tablet navigation: visual refinement only. */
@media (max-width: 899.98px) {
nav.af-header {
margin-bottom: 10px;
padding: 8px 10px;
background: var(--bz-white);
border-bottom: 1px solid var(--bz-brand-100);
box-shadow: 0 3px 12px rgba(var(--bz-brand-rgb), 0.08);
}
nav.af-header > .container-fluid {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
width: 100%;
max-width: 100%;
padding-right: 2px;
padding-left: 2px;
}
nav.af-header .af-mobile-flex {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
min-height: 42px;
margin: 0;
}
nav.af-header .af-baztab-logo,
nav.af-header .navbar .af-baztab-logo {
display: block;
width: auto;
max-width: 142px;
max-height: 42px;
margin: 0;
object-fit: contain;
}
nav.af-header .show-btn-mobile,
nav.af-header .navbar-toggler {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border: 1px solid var(--bz-brand-100);
border-radius: 10px;
box-shadow: none;
line-height: 1;
}
nav.af-header .show-btn-mobile:hover,
nav.af-header .show-btn-mobile:focus,
nav.af-header .navbar-toggler:hover,
nav.af-header .navbar-toggler:focus {
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border-color: var(--bz-info-border);
box-shadow: 0 0 0 3px rgba(var(--bz-brand-rgb), 0.1);
outline: none;
}
nav.af-header .show-btn-mobile svg {
width: 19px;
height: 19px;
margin: 0;
}
nav.af-header .navbar-toggler-icon {
width: 23px;
height: 23px;
background-size: 23px 23px;
}
nav.af-header #navbarSupportedContent {
flex-basis: 100%;
width: 100%;
margin-top: 8px;
padding: 7px;
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-radius: 12px;
box-shadow: 0 10px 28px rgba(var(--bz-brand-rgb), 0.1);
overflow: hidden;
}
nav.af-header #navbarSupportedContent .navbar-nav {
width: 100%;
margin: 0 !important;
padding: 0;
background: transparent;
border-radius: 9px;
}
nav.af-header #navbarSupportedContent .navbar-nav > li,
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item {
width: 100%;
height: auto;
min-height: 46px;
margin: 0;
padding: 0;
background: transparent;
border-left: 0;
border-bottom: 1px solid var(--bz-info-soft);
font-size: .95rem;
}
nav.af-header #navbarSupportedContent .navbar-nav > li:last-child,
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item:last-child {
border-bottom: 0;
}
nav.af-header #navbarSupportedContent .navbar-nav > li > a,
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item > a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 46px;
margin: 0;
padding: 10px 12px !important;
color: var(--bz-brand-800);
background: transparent;
border-radius: 8px;
font-weight: 600;
line-height: 1.55;
text-align: right;
white-space: normal;
}
nav.af-header #navbarSupportedContent .navbar-nav > li > a:hover,
nav.af-header #navbarSupportedContent .navbar-nav > li > a:focus,
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item > a:hover,
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item > a:focus {
color: var(--bz-brand-800);
background: var(--bz-info-soft);
}
nav.af-header #navbarSupportedContent .nav-cat svg {
flex: 0 0 auto;
width: 11px;
height: 11px;
margin: 0 8px 0 0;
transition: transform .2s ease;
}
nav.af-header #navbarSupportedContent .nav-cat[aria-expanded="true"] svg {
transform: rotate(180deg);
}
nav.af-header #navbarSupportedContent .dropdown-menu {
position: static !important;
width: auto;
margin: 0 8px 8px;
padding: 6px;
background: var(--bz-info-soft) !important;
border: 1px solid var(--bz-brand-100);
border-radius: 10px;
box-shadow: none;
transform: none !important;
}
nav.af-header #navbarSupportedContent .dropdown-menu li {
display: block;
width: 100%;
min-height: 0;
margin: 0;
padding: 0 !important;
border-bottom: 1px solid var(--bz-brand-100);
line-height: normal;
}
nav.af-header #navbarSupportedContent .dropdown-menu li:last-child {
border-bottom: 0;
}
nav.af-header #navbarSupportedContent .dropdown-menu li a {
display: block;
width: 100%;
margin: 0;
padding: 9px 10px !important;
color: var(--bz-brand-900) !important;
background: transparent;
border-radius: 7px;
font-size: .9rem;
font-weight: 500;
line-height: 1.55;
text-align: right;
white-space: normal;
}
nav.af-header #navbarSupportedContent .dropdown-menu li a:hover,
nav.af-header #navbarSupportedContent .dropdown-menu li a:focus {
color: var(--bz-brand-800) !important;
background: var(--bz-white);
}
nav.af-header #navbarSupportedContent .current-menu-item > a {
color: var(--bz-brand-800) !important;
background: var(--bz-info-soft);
}
nav.af-header #navbarSupportedContent .current-menu-item > a:after {
display: none;
}
nav.af-header .af-date-mobile {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
min-height: 42px;
margin: 5px 0 0;
padding: 9px 10px;
color: var(--bz-text-secondary);
background: var(--bz-info-soft);
border: 0;
border-radius: 8px;
font-size: .82rem;
line-height: 1.6;
text-align: center;
}
nav.af-header .af-date-mobile svg {
flex: 0 0 auto;
width: 15px;
height: 15px;
margin: 0;
color: var(--bz-brand-800);
}
nav.af-header .searchwrapper2 {
top: 0;
right: 0;
left: 0;
z-index: 50;
width: 100%;
min-height: 42px;
padding: 0;
background: var(--bz-white);
}
nav.af-header .searchwrapper2 .search,
nav.af-header .searchwrapper2 #searchform {
width: 100%;
margin: 0;
}
nav.af-header .searchwrapper2 .search input {
width: 100%;
height: 42px;
padding: 8px 14px 8px 48px;
color: var(--bz-brand-900);
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-radius: 10px;
font-size: 16px;
outline: none;
}
nav.af-header .searchwrapper2 .search input:focus {
border-color: var(--bz-info);
box-shadow: 0 0 0 3px rgba(var(--bz-brand-rgb), 0.1);
}
nav.af-header .hide-btn-mobile {
top: 5px;
left: 5px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border-radius: 8px;
}
nav.af-header .hide-btn-mobile svg {
width: 24px;
height: 24px;
margin: 0;
}
}
/* Footer: keep the original three columns, frame only their headings. */
@media (max-width: 767.98px) {
footer .row.col-lg-7 > .col-4 {
display: flex;
flex-direction: column;
align-items: stretch;
}
footer .row.col-lg-7 h4 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 43px;
margin: 8px 0 8px;
padding: 7px 4px;
color: var(--bz-brand-900);
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-top: 3px solid var(--bz-brand-800);
border-radius: 8px;
box-shadow: 0 2px 7px rgba(var(--bz-brand-rgb), 0.05);
font-size: .88rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
footer .row.col-lg-7 .af-footer-ul {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
margin: 0;
padding: 0 2px;
}
footer .row.col-lg-7 .af-footer-ul li {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 34px;
margin: 0;
padding: 0;
border-bottom: 1px solid var(--bz-brand-100);
font-size: .74rem;
line-height: 1.55;
text-align: center;
}
footer .row.col-lg-7 .af-footer-ul li:last-child {
border-bottom: 0;
}
footer .row.col-lg-7 .af-footer-ul li a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 33px;
margin: 0;
padding: 5px 1px;
color: var(--bz-brand-800);
line-height: 1.5;
text-align: center;
overflow-wrap: anywhere;
}
footer .row.col-lg-7 .af-footer-ul li a:hover,
footer .row.col-lg-7 .af-footer-ul li a:focus {
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border-radius: 6px;
}
}
@media (max-width: 359.98px) {
nav.af-header {
padding-right: 7px;
padding-left: 7px;
}
nav.af-header .af-baztab-logo,
nav.af-header .navbar .af-baztab-logo {
max-width: 124px;
max-height: 38px;
}
nav.af-header .show-btn-mobile,
nav.af-header .navbar-toggler {
flex-basis: 39px;
width: 39px;
height: 39px;
border-radius: 9px;
}
footer .row.col-lg-7 h4 {
min-height: 41px;
padding-right: 2px;
padding-left: 2px;
font-size: .78rem;
}
footer .row.col-lg-7 .af-footer-ul li,
footer .row.col-lg-7 .af-footer-ul li a {
font-size: .67rem;
}
}
/* =========================================================
5.5.8 — Desktop header dropdown refinement
CSS-only: WordPress menu output, Bootstrap dropdown logic,
mobile navigation and header markup remain unchanged.
========================================================= */
@media (min-width: 900px) {
nav.af-header,
nav.af-header > .container-fluid,
nav.af-header #navbarSupportedContent {
overflow: visible;
}
nav.af-header {
z-index: 1040;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown {
position: relative;
height: auto;
min-height: 34px;
padding-top: 0;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .nav-link {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 34px;
padding: 6px 13px !important;
border-radius: 8px;
font-weight: 600;
line-height: 1.35;
transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .nav-link svg {
width: 10px;
height: 10px;
margin: 0;
transition: transform .18s ease;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .nav-link:hover,
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .nav-link:focus,
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .nav-link[aria-expanded="true"] {
color: var(--bz-brand-800);
background: var(--bz-info-soft);
box-shadow: inset 0 0 0 1px var(--bz-brand-100);
outline: none;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .nav-link[aria-expanded="true"] svg {
transform: rotate(180deg);
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu {
top: calc(100% + 9px) !important;
right: 0 !important;
left: auto !important;
width: 420px;
max-width: calc(100vw - 32px);
margin: 0;
padding: 10px;
direction: rtl;
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-top: 3px solid var(--bz-brand-800);
border-radius: 0 0 13px 13px;
box-shadow: 0 16px 36px rgba(var(--bz-brand-rgb), 0.16);
transform: none !important;
overflow: visible;
z-index: 1050;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu.show {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px 8px;
animation: baztab-desktop-dropdown-in .16s ease-out both;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu li {
display: block;
width: 100%;
min-width: 0;
margin: 0;
padding: 0 !important;
border: 0;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu li a {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 41px;
margin: 0;
padding: 8px 13px 8px 10px !important;
color: var(--bz-brand-900);
background: var(--bz-info-soft);
border: 1px solid transparent;
border-radius: 8px;
font-size: .9rem;
font-weight: 500;
line-height: 1.5;
text-align: right;
white-space: normal;
transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu li a::before {
content: "";
flex: 0 0 5px;
width: 5px;
height: 5px;
margin-left: 8px;
background: var(--bz-info);
border-radius: 50%;
transition: background-color .15s ease, transform .15s ease;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu li a:hover,
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu li a:focus {
color: var(--bz-brand-800) !important;
background: var(--bz-info-soft);
border-color: var(--bz-brand-100);
transform: translateX(-2px);
outline: none;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu li a:hover::before,
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu li a:focus::before {
background: var(--bz-brand-800);
transform: scale(1.25);
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu .current-menu-item > a {
color: var(--bz-brand-800) !important;
background: var(--bz-brand-100);
border-color: var(--bz-brand-100);
font-weight: 700;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu .current-menu-item > a::before {
background: var(--bz-brand-800);
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu .current-menu-item > a::after {
display: none;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu li a:focus-visible,
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .nav-link:focus-visible {
box-shadow: 0 0 0 3px rgba(var(--bz-brand-rgb), 0.16);
}
}
@keyframes baztab-desktop-dropdown-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (min-width: 900px) and (max-width: 1180px) {
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu {
width: 370px;
}
nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .dropdown-menu li a {
padding-right: 10px !important;
padding-left: 8px !important;
font-size: .86rem;
}
}
/* =========================================================
5.5.9 — Compact desktop slide-down search panel
Restores the previous logo/icon sizing by using the
pre-sizing-refinement stylesheet as the base. CSS only:
search form action, WordPress markup and existing JS stay intact.
========================================================= */
@media (min-width: 900px) {
nav.af-header #navbarSupportedContent {
position: relative;
overflow: visible;
}
nav.af-header .show-btn {
position: relative;
z-index: 1061;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin: -7px 0 -7px 0;
padding: 0;
color: var(--bz-brand-800);
background: transparent;
border: 1px solid transparent;
border-radius: 9px;
line-height: 1;
cursor: pointer;
transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
nav.af-header .show-btn:hover,
nav.af-header .show-btn:focus,
nav.af-header .show-btn[aria-expanded="true"] {
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border-color: var(--bz-brand-100);
outline: none;
}
nav.af-header .show-btn svg {
width: 20px;
height: 20px;
margin: 0;
}
nav.af-header .searchwrapper {
right: auto;
left: 0;
top: calc(100% + 11px);
z-index: 1060;
width: 370px;
max-width: min(370px, calc(100vw - 28px));
padding: 12px;
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-radius: 13px;
box-shadow: 0 16px 38px rgba(var(--bz-brand-rgb), 0.16);
transform-origin: top left;
animation: baztabDesktopSearchSlide .22s cubic-bezier(.2, .75, .25, 1) both;
}
nav.af-header .searchwrapper::before {
content: "";
position: absolute;
top: -7px;
left: 14px;
width: 13px;
height: 13px;
background: var(--bz-white);
border-top: 1px solid var(--bz-brand-100);
border-left: 1px solid var(--bz-brand-100);
transform: rotate(45deg);
}
nav.af-header .searchwrapper .search,
nav.af-header .searchwrapper #searchform,
nav.af-header .searchwrapper .header-search-form {
width: 100%;
margin: 0;
}
nav.af-header .searchwrapper .search input,
nav.af-header .searchwrapper .search-form-input {
box-sizing: border-box;
width: 100%;
height: 48px;
margin: 0;
padding: 9px 15px 9px 48px;
color: var(--bz-brand-900);
background: var(--bz-info-soft);
border: 1px solid var(--bz-brand-100);
border-radius: 10px;
font-size: .96rem;
line-height: 1.5;
direction: rtl;
outline: none;
transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
nav.af-header .searchwrapper .search input:hover,
nav.af-header .searchwrapper .search-form-input:hover {
background: var(--bz-white);
border-color: var(--bz-info-border);
}
nav.af-header .searchwrapper .search input:focus,
nav.af-header .searchwrapper .search-form-input:focus {
background: var(--bz-white);
border-color: var(--bz-info);
box-shadow: 0 0 0 3px rgba(var(--bz-brand-rgb), 0.1);
}
nav.af-header .hide-btn {
top: 20px;
left: 20px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 31px;
height: 31px;
margin: 0;
padding: 0;
color: var(--bz-brand-800);
background: var(--bz-brand-100);
border: 0;
border-radius: 8px;
line-height: 1;
cursor: pointer;
transition: color .16s ease, background-color .16s ease;
}
nav.af-header .hide-btn:hover,
nav.af-header .hide-btn:focus {
color: var(--bz-brand-900);
background: var(--bz-brand-100);
outline: none;
}
nav.af-header .hide-btn svg {
width: 23px;
height: 23px;
margin: 0;
}
@keyframes baztabDesktopSearchSlide {
from {
opacity: 0;
transform: translateY(-9px) scale(.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
}
@media (min-width: 900px) and (max-width: 1199.98px) {
nav.af-header .searchwrapper {
width: 330px;
max-width: min(330px, calc(100vw - 24px));
}
}
@media (prefers-reduced-motion: reduce) {
nav.af-header .searchwrapper {
animation: none !important;
}
}
/* =========================================================
5.5.10 — In-header desktop search + restrained desktop footer
- Desktop search expands horizontally inside the existing header bar.
- Desktop footer keeps the original columns and content, without cards.
========================================================= */
@media (min-width: 900px) {
/* Keep the search experience inside the current header row. */
nav.af-header #navbarSupportedContent {
position: relative;
min-width: 0;
overflow: visible;
}
nav.af-header .show-btn {
position: relative;
z-index: 1072;
flex: 0 0 40px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: -8px 0;
padding: 0;
color: var(--bz-brand-800);
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
line-height: 1;
cursor: pointer;
transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
nav.af-header .show-btn:hover,
nav.af-header .show-btn:focus,
nav.af-header .show-btn[aria-expanded="true"] {
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border-color: var(--bz-brand-100);
box-shadow: 0 2px 8px rgba(var(--bz-brand-rgb), 0.07);
outline: none;
}
nav.af-header .show-btn svg {
width: 20px;
height: 20px;
margin: 0;
}
nav.af-header .af-header-date-main {
transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
nav.af-header #navbarSupportedContent.search-active .af-header-date-main {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-8px);
}
nav.af-header .searchwrapper {
display: flex !important;
align-items: center;
position: absolute;
top: 50% !important;
right: auto !important;
left: 46px !important;
z-index: 1071;
width: clamp(320px, 34vw, 430px);
max-width: calc(100% - 52px);
height: 44px;
margin: 0;
padding: 4px;
opacity: 0;
visibility: hidden;
pointer-events: none;
overflow: hidden;
color: var(--bz-brand-900);
background: linear-gradient(90deg, var(--bz-info-soft) 0%, var(--bz-info-soft) 100%);
border: 1px solid var(--bz-brand-100);
border-radius: 12px;
box-shadow: 0 5px 16px rgba(var(--bz-brand-rgb), 0.1), inset 0 1px 0 rgba(var(--bz-white-rgb), 0.8);
clip-path: inset(0 100% 0 0 round 12px);
transform: translateY(-50%) translateX(-8px);
transform-origin: left center;
animation: none !important;
transition:
clip-path .28s cubic-bezier(.22, .75, .26, 1),
opacity .18s ease,
transform .28s cubic-bezier(.22, .75, .26, 1),
visibility 0s linear .28s;
}
nav.af-header .searchwrapper::before {
display: none !important;
}
nav.af-header .searchwrapper.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
clip-path: inset(0 0 0 0 round 12px);
transform: translateY(-50%) translateX(0);
transition-delay: 0s;
}
nav.af-header .searchwrapper .search,
nav.af-header .searchwrapper #searchform,
nav.af-header .searchwrapper .header-search-form {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
nav.af-header .searchwrapper .search input,
nav.af-header .searchwrapper .search-form-input {
box-sizing: border-box;
display: block;
width: 100%;
height: 36px;
margin: 0;
padding: 7px 14px 7px 43px;
color: var(--bz-brand-900);
background: rgba(var(--bz-white-rgb), 0.92);
border: 1px solid var(--bz-brand-100);
border-radius: 9px;
font-size: .94rem;
font-weight: 400;
line-height: 1.45;
direction: rtl;
outline: none;
transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
nav.af-header .searchwrapper .search input::placeholder,
nav.af-header .searchwrapper .search-form-input::placeholder {
color: var(--bz-text-muted);
opacity: 1;
}
nav.af-header .searchwrapper .search input:hover,
nav.af-header .searchwrapper .search-form-input:hover {
background: var(--bz-white);
border-color: var(--bz-info-border);
}
nav.af-header .searchwrapper .search input:focus,
nav.af-header .searchwrapper .search-form-input:focus {
background: var(--bz-white);
border-color: var(--bz-info);
box-shadow: 0 0 0 3px rgba(var(--bz-brand-rgb), 0.09);
}
nav.af-header .hide-btn {
position: absolute;
top: 50% !important;
left: 7px !important;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 29px;
height: 29px;
margin: 0;
padding: 0;
color: var(--bz-brand-800);
background: var(--bz-brand-100);
border: 0;
border-radius: 8px;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
transition: color .16s ease, background-color .16s ease, transform .16s ease;
}
nav.af-header .hide-btn:hover,
nav.af-header .hide-btn:focus {
color: var(--bz-brand-900);
background: var(--bz-brand-100);
transform: translateY(-50%) scale(1.04);
outline: none;
}
nav.af-header .hide-btn svg {
width: 22px;
height: 22px;
margin: 0;
}
/* Desktop footer: same structure, calmer spacing and typography, no cards. */
footer {
margin-top: 26px;
padding: 34px 0 0;
background: var(--bz-info-soft);
border-top: 1px solid var(--bz-brand-100);
}
footer > .container > .row {
align-items: flex-start;
row-gap: 0;
}
footer .af-footer-contact {
padding: 0 18px 0 34px;
text-align: center;
}
footer .af-footer-contact > h4:empty {
display: none;
}
footer .af-footer-first {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 7px 16px;
width: 100%;
margin: 0 0 22px !important;
padding: 0;
}
footer .af-footer-first > li {
float: none;
width: auto;
margin: 0;
padding: 0;
color: var(--bz-text-secondary);
line-height: 1.6;
border-radius: 0;
}
footer .af-footer-first > li:first-child {
flex: 0 0 100%;
margin-bottom: 8px !important;
}
footer .af-footer-first > li > a {
position: static;
right: auto;
top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 !important;
color: var(--bz-text-secondary);
line-height: 1.6;
text-decoration: none;
}
footer .af-footer-first > li:first-child > a {
min-height: 43px;
padding: 9px 19px !important;
color: var(--bz-white) !important;
background-image: linear-gradient(100deg, var(--bz-social-telegram), var(--bz-success)) !important;
border-radius: 10px !important;
text-shadow: none !important;
box-shadow: 0 5px 14px rgba(var(--bz-info-rgb), 0.16);
font-weight: 700;
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
footer .af-footer-first > li:first-child > a:hover,
footer .af-footer-first > li:first-child > a:focus {
color: var(--bz-white) !important;
filter: saturate(1.05);
transform: translateY(-1px);
box-shadow: 0 7px 17px rgba(var(--bz-info-rgb), 0.21);
outline: none;
}
footer .af-footer-first > li:first-child svg {
width: 21px;
height: 21px;
margin: 0;
}
footer .af-footer-first > li:not(:first-child) > a {
padding: 3px 0;
font-size: .9rem;
transition: color .15s ease;
}
footer .af-footer-first > li:not(:first-child) > a:hover,
footer .af-footer-first > li:not(:first-child) > a:focus {
color: var(--bz-brand-800);
outline: none;
}
footer .af-footer-contact > ul:not(.af-footer-first) {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
margin: 0 auto;
padding: 0;
}
footer .af-footer-contact > ul:not(.af-footer-first) > li {
float: none;
margin: 0;
padding: 0;
line-height: 1;
}
footer .af-footer-contact > ul:not(.af-footer-first) > li:first-child {
flex: 0 0 100%;
margin: 0 0 7px;
border-radius: 0;
}
footer .af-footer-contact > ul:not(.af-footer-first) > li:first-child img {
display: block;
width: auto;
max-width: 176px;
max-height: 55px;
margin: 0 auto;
object-fit: contain;
}
footer .af-footer-contact > ul:not(.af-footer-first) > li:not(:first-child) {
margin: 0;
}
footer .af-footer-contact .af-child1 > a,
footer .af-footer-contact .af-child2 > a,
footer .af-footer-contact .af-child3 > a,
footer .af-footer-contact .af-child4 > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 37px;
height: 37px;
border-radius: 50%;
transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
footer .af-footer-contact .af-child1 > a:hover,
footer .af-footer-contact .af-child2 > a:hover,
footer .af-footer-contact .af-child3 > a:hover,
footer .af-footer-contact .af-child4 > a:hover,
footer .af-footer-contact .af-child1 > a:focus,
footer .af-footer-contact .af-child2 > a:focus,
footer .af-footer-contact .af-child3 > a:focus,
footer .af-footer-contact .af-child4 > a:focus {
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(var(--bz-brand-rgb), 0.14);
opacity: .95;
outline: none;
}
footer .af-footer-contact > ul:not(.af-footer-first) svg {
width: 19px;
height: 19px;
margin: 0;
}
footer > .container > .row > .row.col-12.col-lg-7 {
align-items: flex-start;
margin: 0;
padding: 0 16px 0 0;
}
footer .row.col-lg-7 > .col-4 {
padding-right: 20px;
padding-left: 20px;
}
footer .row.col-lg-7 h4 {
position: relative;
min-height: 0;
margin: 0 0 14px;
padding: 0 0 13px;
color: var(--bz-brand-900);
background: transparent;
border: 0;
border-bottom: 1px solid var(--bz-brand-100);
border-radius: 0;
box-shadow: none;
font-size: 1.03rem;
font-weight: 800;
line-height: 1.5;
text-align: center;
}
footer .row.col-lg-7 h4::after {
content: "";
position: absolute;
right: 50%;
bottom: -1px;
width: 34px;
height: 3px;
background: var(--bz-brand-800);
border-radius: 3px;
transform: translateX(50%);
}
footer .row.col-lg-7 .af-footer-ul {
width: 100%;
margin: 0;
padding: 0;
}
footer .row.col-lg-7 .af-footer-ul li {
min-height: 34px;
margin: 0;
padding: 0;
list-style: none;
font-size: .9rem;
line-height: 1.55;
text-align: center;
}
footer .row.col-lg-7 .af-footer-ul li a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 5px 0;
color: var(--bz-text-secondary);
line-height: 1.55;
text-decoration: none;
transition: color .15s ease, transform .15s ease;
}
footer .row.col-lg-7 .af-footer-ul li a:hover,
footer .row.col-lg-7 .af-footer-ul li a:focus {
color: var(--bz-brand-800);
transform: translateY(-1px);
outline: none;
}
footer .row.col-lg-7 .current-menu-item > a {
color: var(--bz-brand-800);
font-weight: 700;
}
footer .row.col-lg-7 .current-menu-item > a::after {
right: 50%;
bottom: 1px;
width: 22px;
height: 2px;
transform: translateX(50%);
}
footer .af-footer-bottom {
width: 100%;
margin: 28px 0 0;
background: transparent;
border-top: 1px solid var(--bz-brand-100);
border-radius: 0;
}
footer .af-footer-bottom .row {
margin: 0;
padding: 15px 0 17px;
}
footer .af-footer-bottom span,
footer .af-footer-bottom .af-footer-copyright {
color: var(--bz-text-muted);
font-size: .86rem;
line-height: 1.8;
text-align: center;
}
}
@media (min-width: 900px) and (max-width: 1199.98px) {
nav.af-header .searchwrapper {
width: 320px;
max-width: calc(100% - 50px);
}
footer .af-footer-contact {
padding-left: 20px;
}
footer .row.col-lg-7 > .col-4 {
padding-right: 13px;
padding-left: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
nav.af-header .searchwrapper,
nav.af-header .af-header-date-main,
footer a {
transition: none !important;
}
}
/* =========================================================
5.5.11 — Header identity sizing + discoverable date panel
- Restores a stronger mobile logo and icon scale.
- Makes Gregorian/Hijri dates discoverable by hover and click.
- Preserves WordPress menus, Bootstrap collapse and search behavior.
========================================================= */
/* Mobile header identity: remove the undersized feel without crowding 320px screens. */
@media (max-width: 899.98px) {
nav.af-header {
padding-top: 8px;
padding-bottom: 8px;
}
nav.af-header > .container-fluid {
gap: 7px;
}
nav.af-header .af-mobile-flex {
min-height: 50px;
}
nav.af-header .af-baztab-logo,
nav.af-header .navbar .af-baztab-logo {
width: auto !important;
height: auto !important;
max-width: 174px !important;
max-height: 50px !important;
margin-left: 0 !important;
object-fit: contain;
}
nav.af-header .show-btn-mobile,
nav.af-header .navbar-toggler {
flex: 0 0 46px;
width: 46px;
height: 46px;
border-radius: 11px;
}
nav.af-header .show-btn-mobile svg {
width: 22px;
height: 22px;
}
nav.af-header .navbar-toggler-icon {
width: 26px;
height: 26px;
background-size: 26px 26px;
}
/* Mobile date is an explicit accordion row at the end of the menu. */
nav.af-header .af-date-mobile {
display: block !important;
height: auto !important;
min-height: 0 !important;
margin: 6px 0 0 !important;
padding: 0 !important;
overflow: hidden;
background: var(--bz-info-soft);
border: 1px solid var(--bz-brand-100) !important;
border-radius: 11px;
}
nav.af-header .af-mobile-date-trigger {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-height: 48px;
margin: 0;
padding: 9px 11px;
color: var(--bz-brand-900);
background: transparent;
border: 0;
border-radius: 10px;
font: inherit;
text-align: right;
cursor: pointer;
}
nav.af-header .af-mobile-date-trigger:hover,
nav.af-header .af-mobile-date-trigger:focus-visible {
background: var(--bz-info-soft);
outline: none;
}
nav.af-header .af-mobile-date-trigger-main,
nav.af-header .af-mobile-date-action {
display: inline-flex;
align-items: center;
}
nav.af-header .af-mobile-date-trigger-main {
min-width: 0;
gap: 8px;
font-size: .88rem;
font-weight: 700;
line-height: 1.55;
}
nav.af-header .af-mobile-date-trigger-main > svg {
flex: 0 0 auto;
margin: 0 !important;
color: var(--bz-brand-800);
}
nav.af-header .af-mobile-date-current {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
nav.af-header .af-mobile-date-action {
flex: 0 0 auto;
gap: 5px;
color: var(--bz-brand-800);
font-size: .72rem;
font-weight: 600;
white-space: nowrap;
}
nav.af-header .af-mobile-date-action svg {
margin: 0 !important;
transition: transform .2s ease;
}
nav.af-header .af-date-mobile.is-open .af-mobile-date-action svg {
transform: rotate(180deg);
}
nav.af-header .af-mobile-date-details {
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
padding: 0 10px;
border-top: 0 solid transparent;
transition: max-height .28s ease, opacity .18s ease, padding .25s ease, border-color .25s ease, visibility 0s linear .28s;
}
nav.af-header .af-date-mobile.is-open .af-mobile-date-details {
max-height: 180px;
opacity: 1;
visibility: visible;
padding: 8px 10px 10px;
border-top: 1px solid var(--bz-brand-100);
transition-delay: 0s;
}
nav.af-header .af-mobile-date-details .af-date-detail-row {
min-height: 37px;
}
}
@media (max-width: 359.98px) {
nav.af-header .af-baztab-logo,
nav.af-header .navbar .af-baztab-logo {
max-width: 154px !important;
max-height: 46px !important;
}
nav.af-header .show-btn-mobile,
nav.af-header .navbar-toggler {
flex-basis: 43px;
width: 43px;
height: 43px;
}
nav.af-header .show-btn-mobile svg {
width: 21px;
height: 21px;
}
nav.af-header .navbar-toggler-icon {
width: 24px;
height: 24px;
background-size: 24px 24px;
}
nav.af-header .af-mobile-date-action span {
display: none;
}
}
/* Desktop date trigger and panel. */
@media (min-width: 900px) {
nav.af-header .af-header-date-main {
position: relative;
display: inline-flex;
align-items: center;
margin: -7px 7px -7px 20px;
padding: 0;
z-index: 1074;
}
nav.af-header .af-header-date-trigger {
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
margin: 0;
padding: 5px 8px 5px 6px;
color: var(--bz-brand-900);
background: var(--bz-info-soft);
border: 1px solid var(--bz-brand-100);
border-radius: 10px;
box-shadow: 0 1px 2px rgba(var(--bz-brand-rgb), 0.03);
font: inherit;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
nav.af-header .af-header-date-trigger:hover,
nav.af-header .af-header-date-trigger:focus-visible,
nav.af-header .af-header-date-main.is-open .af-header-date-trigger {
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border-color: var(--bz-brand-100);
box-shadow: 0 3px 10px rgba(var(--bz-brand-rgb), 0.08);
outline: none;
}
nav.af-header .af-header-date-trigger-primary,
nav.af-header .af-header-date-hint {
display: inline-flex;
align-items: center;
}
nav.af-header .af-header-date-trigger-primary {
gap: 6px;
font-size: .85rem;
font-weight: 700;
}
nav.af-header .af-header-date-trigger-primary > svg {
flex: 0 0 auto;
margin: 0 !important;
color: var(--bz-brand-800);
}
nav.af-header .af-header-date-hint {
gap: 4px;
padding: 4px 7px;
color: var(--bz-brand-800);
background: var(--bz-brand-100);
border-radius: 7px;
font-size: .68rem;
font-weight: 700;
line-height: 1;
}
nav.af-header .af-header-date-hint svg {
margin: 0 !important;
transition: transform .2s ease;
}
nav.af-header .af-header-date-main:hover .af-header-date-hint svg,
nav.af-header .af-header-date-main:focus-within .af-header-date-hint svg,
nav.af-header .af-header-date-main.is-open .af-header-date-hint svg {
transform: rotate(180deg);
}
nav.af-header .af-header-date {
box-sizing: border-box;
display: block !important;
position: absolute;
top: calc(100% + 10px);
left: 0;
right: auto;
z-index: 1080;
width: 286px;
margin: 0;
padding: 10px;
opacity: 0;
visibility: hidden;
pointer-events: none;
color: var(--bz-brand-900);
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-radius: 13px;
box-shadow: 0 14px 34px rgba(var(--bz-brand-rgb), 0.16), 0 2px 7px rgba(var(--bz-brand-rgb), 0.07);
direction: rtl;
text-align: right;
transform: translateY(-7px) scale(.985);
transform-origin: top left;
transition: opacity .17s ease, transform .2s ease, visibility 0s linear .2s;
}
nav.af-header .af-header-date::before {
content: "";
position: absolute;
top: -6px;
left: 24px;
width: 11px;
height: 11px;
background: var(--bz-white);
border-top: 1px solid var(--bz-brand-100);
border-left: 1px solid var(--bz-brand-100);
transform: rotate(45deg);
}
nav.af-header .af-header-date-main:hover .af-header-date,
nav.af-header .af-header-date-main:focus-within .af-header-date,
nav.af-header .af-header-date-main.is-open .af-header-date {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
transition-delay: 0s;
}
nav.af-header .af-header-date-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 30px;
margin: 0 0 7px;
padding: 0 3px 7px;
border-bottom: 1px solid var(--bz-brand-100);
}
nav.af-header .af-header-date-panel-head strong {
color: var(--bz-brand-900);
font-size: .82rem;
font-weight: 800;
}
nav.af-header .af-header-date-panel-head span {
color: var(--bz-text-muted);
font-size: .66rem;
font-weight: 500;
}
}
/* Shared date detail rows in desktop and mobile panels. */
nav.af-header .af-date-detail-row {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 39px;
padding: 7px 8px;
color: var(--bz-brand-900);
background: transparent;
border-bottom: 1px solid var(--bz-info-soft);
font-size: .8rem;
line-height: 1.55;
}
nav.af-header .af-date-detail-row:last-child {
border-bottom: 0;
}
nav.af-header .af-date-detail-row-primary {
background: var(--bz-info-soft);
border-radius: 8px;
}
nav.af-header .af-date-detail-label {
flex: 0 0 50px;
color: var(--bz-text-muted);
font-size: .7rem;
font-weight: 700;
}
nav.af-header .af-date-detail-row strong {
color: var(--bz-brand-900);
font-size: .79rem;
font-weight: 700;
text-align: left;
}
@media (prefers-reduced-motion: reduce) {
nav.af-header .af-header-date,
nav.af-header .af-header-date-trigger,
nav.af-header .af-header-date-hint svg,
nav.af-header .af-mobile-date-details,
nav.af-header .af-mobile-date-action svg {
transition: none !important;
}
}
/* ============================================================
5.5.12 — Date chrome cleanup + desktop footer utility links
- Removes the persistent frame around the desktop date control.
- Keeps hover/focus feedback subtle and accessible.
- Slightly enlarges About, Contact, Advertising and RSS links on desktop.
============================================================ */
@media (min-width: 900px) {
nav.af-header .af-header-date-trigger {
background: transparent;
border-color: transparent;
border-radius: 8px;
box-shadow: none;
}
nav.af-header .af-header-date-trigger:hover,
nav.af-header .af-header-date-trigger:focus-visible,
nav.af-header .af-header-date-main.is-open .af-header-date-trigger {
background: rgba(var(--bz-brand-rgb), 0.055);
border-color: transparent;
box-shadow: none;
}
nav.af-header .af-header-date-panel-head {
justify-content: flex-start;
}
footer .af-footer-first > li:not(:first-child) > a {
font-size: 1rem;
font-weight: 600;
line-height: 1.7;
}
}
/* =========================================================
5.5.14 — Mobile footer utility links: balanced 2×2 grid
- Keeps the public-story CTA full width.
- Places About, Contact, Advertising and RSS in two rows.
- Reuses the mobile footer heading visual language.
========================================================= */
@media (max-width: 767.98px) {
footer .af-footer-first {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 8px;
width: 100%;
max-width: 480px;
margin: 0 auto 13px;
padding: 0;
}
footer .af-footer-first > li {
float: none;
width: auto;
min-width: 0;
margin: 0;
padding: 0;
}
footer .af-footer-first > li:first-child {
grid-column: 1 / -1;
width: 100%;
margin: 0 0 4px !important;
}
footer .af-footer-first > li:not(:first-child) > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 43px;
height: 100%;
margin: 0;
padding: 7px 8px;
color: var(--bz-brand-900);
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-top: 2px solid var(--bz-brand-800);
border-radius: 8px;
box-shadow: 0 2px 7px rgba(var(--bz-brand-rgb), 0.05);
font-size: .84rem;
font-weight: 600;
line-height: 1.45;
text-align: center;
text-decoration: none;
overflow-wrap: anywhere;
transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
}
footer .af-footer-first > li:not(:first-child) > a:hover,
footer .af-footer-first > li:not(:first-child) > a:focus-visible {
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border-color: var(--bz-brand-100);
border-top-color: var(--bz-brand-800);
transform: translateY(-1px);
outline: none;
}
}
@media (max-width: 359.98px) {
footer .af-footer-first {
gap: 6px;
}
footer .af-footer-first > li:not(:first-child) > a {
min-height: 41px;
padding-right: 5px;
padding-left: 5px;
font-size: .78rem;
}
}
@media (prefers-reduced-motion: reduce) {
footer .af-footer-first > li:not(:first-child) > a {
transition: none !important;
}
}
/* =========================================================
5.5.15 — Borderless mobile utility links + modern article share
- Keeps the 2×2 mobile footer arrangement without card frames.
- Modernizes the top-of-article share control and dropdown.
========================================================= */
@media (max-width: 767.98px) {
footer .af-footer-first {
gap: 0 12px;
}
footer .af-footer-first > li:not(:first-child) {
position: relative;
border-radius: 0;
}
footer .af-footer-first > li:nth-child(2),
footer .af-footer-first > li:nth-child(3) {
border-bottom: 1px solid var(--bz-brand-100);
}
footer .af-footer-first > li:nth-child(2),
footer .af-footer-first > li:nth-child(4) {
border-left: 1px solid var(--bz-brand-100);
}
footer .af-footer-first > li:not(:first-child) > a {
min-height: 42px;
padding: 8px 6px;
color: var(--bz-brand-800);
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
font-size: .84rem;
font-weight: 600;
transition: color .15s ease, background-color .15s ease;
}
footer .af-footer-first > li:not(:first-child) > a:hover,
footer .af-footer-first > li:not(:first-child) > a:focus-visible {
color: var(--bz-brand-800);
background: rgba(var(--bz-brand-rgb), 0.035);
border: 0;
transform: none;
outline: none;
}
}
.af-single-meta .af-share-menu {
position: relative;
display: inline-flex;
margin: 0;
direction: rtl;
}
.af-single-meta .af-share-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 7px 12px;
color: var(--bz-white);
background: linear-gradient(135deg, var(--bz-accent-500), var(--bz-accent-600));
border: 1px solid rgba(var(--bz-accent-rgb), 0.22);
border-radius: 9px;
box-shadow: 0 4px 12px rgba(var(--bz-accent-rgb), 0.18);
font-family: inherit;
font-size: .79rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.af-single-meta .af-share-toggle::after {
display: none;
}
.af-single-meta .af-share-toggle:hover,
.af-single-meta .af-share-toggle:focus-visible,
.af-single-meta .af-share-toggle[aria-expanded="true"] {
color: var(--bz-white);
filter: saturate(1.06);
transform: translateY(-1px);
box-shadow: 0 7px 16px rgba(var(--bz-accent-rgb), 0.23);
outline: none;
}
.af-single-meta .af-share-toggle svg {
flex: 0 0 auto;
}
.af-single-meta .af-share-caret {
opacity: .78;
transition: transform .16s ease;
}
.af-single-meta .af-share-toggle[aria-expanded="true"] .af-share-caret {
transform: rotate(180deg);
}
.af-single-meta .af-share-dropdown {
min-width: 228px !important;
margin-top: 9px !important;
padding: 8px;
overflow: visible;
direction: rtl;
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-radius: 12px;
box-shadow: 0 14px 34px rgba(var(--bz-brand-rgb), 0.16);
}
.af-single-meta .af-share-dropdown.show {
animation: afShareMenuIn .16s ease-out both;
}
.af-single-meta .af-share-dropdown::before {
content: "";
position: absolute;
top: -5px;
left: 22px;
width: 10px;
height: 10px;
background: var(--bz-white);
border-top: 1px solid var(--bz-brand-100);
border-left: 1px solid var(--bz-brand-100);
transform: rotate(45deg);
}
.af-single-meta .af-share-dropdown-title {
margin: 0 4px 5px;
padding: 5px 7px 8px;
color: var(--bz-text-muted);
border-bottom: 1px solid var(--bz-info-soft);
font-size: .7rem;
font-weight: 700;
line-height: 1.4;
text-align: right;
}
.af-single-meta .af-share-dropdown li {
margin: 0 !important;
padding: 0;
}
.af-single-meta .af-share-dropdown .af-share-item {
display: flex;
align-items: center;
gap: 10px;
min-height: 50px;
margin: 0;
padding: 7px 8px !important;
color: var(--bz-brand-900);
border-radius: 9px;
text-align: right;
transition: color .14s ease, background-color .14s ease, transform .14s ease;
}
.af-single-meta .af-share-dropdown .af-share-item:hover,
.af-single-meta .af-share-dropdown .af-share-item:focus-visible {
color: var(--bz-brand-900);
background: var(--bz-info-soft);
transform: translateX(-2px);
outline: none;
}
.af-single-meta .af-share-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
color: var(--bz-white);
border-radius: 9px;
}
.af-single-meta .af-share-telegram .af-share-item-icon {
background: var(--bz-social-telegram);
}
.af-single-meta .af-share-whatsapp .af-share-item-icon {
background: var(--bz-social-whatsapp);
}
.af-single-meta .af-share-facebook .af-share-item-icon {
background: var(--bz-social-facebook);
}
.af-single-meta .af-share-item-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-width: 0;
}
.af-single-meta .af-share-item-text strong {
color: inherit;
font-size: .82rem;
font-weight: 800;
line-height: 1.35;
}
.af-single-meta .af-share-item-text small {
color: var(--bz-text-faint);
font-size: .67rem;
font-weight: 500;
line-height: 1.35;
}
.af-single-wide .af-share-toggle {
background: rgba(var(--bz-accent-rgb), 0.94);
border-color: rgba(var(--bz-white-rgb), 0.22);
box-shadow: 0 5px 14px rgba(var(--bz-black-rgb), 0.2);
}
@media (max-width: 575.98px) {
.af-single-meta .af-share-toggle {
width: 40px;
min-width: 40px;
height: 40px;
min-height: 40px;
padding: 0;
border-radius: 10px;
}
.af-single-meta .af-share-toggle-label,
.af-single-meta .af-share-caret {
display: none;
}
.af-single-meta .af-share-dropdown {
min-width: 218px !important;
}
}
@keyframes afShareMenuIn {
from {
opacity: 0;
transform: translateY(-5px) scale(.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.af-single-meta .af-share-toggle,
.af-single-meta .af-share-caret,
.af-single-meta .af-share-dropdown .af-share-item {
transition: none !important;
}
.af-single-meta .af-share-dropdown.show {
animation: none !important;
}
}
/* ============================================================
5.5.5 — Single story metadata rail
Clean editorial layout for desktop, tablet and mobile
============================================================ */
.af-single-meta--modern {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px 22px;
width: 100%;
margin: 14px 0 22px;
padding: 12px 0;
overflow: visible;
direction: rtl;
background: transparent;
border-top: 1px solid var(--bz-brand-100);
border-bottom: 1px solid var(--bz-brand-100);
border-radius: 0;
box-shadow: none;
}
.af-single-meta--modern::before {
content: "";
position: absolute;
top: -1px;
right: 0;
width: 58px;
height: 2px;
background: var(--bz-accent-600);
border-radius: 999px;
}
.af-single-meta--modern .af-single-meta-main,
.af-single-meta--modern .af-single-meta-badges,
.af-single-meta--modern .af-single-meta-side,
.af-single-meta--modern .af-time-chip {
display: flex;
align-items: center;
min-width: 0;
}
.af-single-meta--modern .af-single-meta-main {
flex-wrap: wrap;
gap: 8px 0;
}
.af-single-meta--modern .af-single-meta-badges {
flex-wrap: wrap;
gap: 8px 13px;
}
.af-single-meta--modern .af-single-meta-side {
justify-content: flex-end;
gap: 12px;
white-space: nowrap;
}
.af-single-meta--modern .af-single-cat {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
margin: 0;
padding: 4px 11px;
color: var(--bz-white);
background: var(--bz-warning);
border: 0;
border-radius: 7px;
box-shadow: none;
font-size: .78rem;
font-weight: 800;
line-height: 1.4;
white-space: nowrap;
}
.af-single-meta--modern .af-single-cat a,
.af-single-meta--modern .af-single-cat span {
color: inherit;
font-size: inherit;
font-weight: inherit;
}
.af-single-meta--modern .af-single-author-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
color: var(--bz-brand-800);
font-size: .8rem;
line-height: 1.45;
white-space: nowrap;
}
.af-single-meta--modern .af-single-author-chip svg {
flex: 0 0 auto;
width: 15px;
height: 15px;
color: var(--bz-text-muted);
}
.af-single-meta--modern .af-single-author-name,
.af-single-meta--modern .af-single-author-name a {
color: inherit;
font-size: inherit;
font-weight: 600;
}
.af-single-meta--modern .af-time-chip {
flex-wrap: wrap;
gap: 5px 9px;
margin: 0 0 0 16px;
padding: 0 0 0 16px;
color: var(--bz-brand-800);
border-left: 1px solid var(--bz-brand-100);
font-size: .8rem;
line-height: 1.45;
}
.af-single-meta--modern .af-meta-prefix {
color: var(--bz-text-muted);
font-size: .7rem;
font-weight: 600;
}
.af-single-meta--modern .af-time-chip .af-date-value,
.af-single-meta--modern .af-time-chip .af-time-value {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0;
padding: 0;
color: inherit;
background: transparent;
border: 0;
border-radius: 0;
font-size: inherit;
font-weight: 600;
white-space: nowrap;
}
.af-single-meta--modern .af-time-chip .af-time-value svg {
flex: 0 0 auto;
width: 14px;
height: 14px;
margin: 0;
color: var(--bz-text-muted);
}
.af-single-meta--modern .af-single-actions,
.af-single-meta--modern .af-share-menu {
margin: 0;
}
.af-single-meta--modern .af-share-toggle {
min-height: 36px;
padding: 7px 11px;
border-radius: 8px;
box-shadow: 0 3px 9px rgba(var(--bz-accent-rgb), 0.16);
font-size: .76rem;
}
.af-single-meta--modern .af-share-toggle:hover,
.af-single-meta--modern .af-share-toggle:focus-visible,
.af-single-meta--modern .af-share-toggle[aria-expanded="true"] {
box-shadow: 0 6px 14px rgba(var(--bz-accent-rgb), 0.21);
}
.af-single-meta--modern .af-news-id {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1px;
min-height: 34px;
margin: 0;
padding: 0 13px 0 0;
color: var(--bz-brand-800);
background: transparent;
border: 0;
border-right: 1px solid var(--bz-brand-100);
border-radius: 0;
line-height: 1.25;
white-space: nowrap;
}
.af-single-meta--modern .af-news-id-label {
color: var(--bz-text-faint);
font-size: .65rem;
font-weight: 600;
}
.af-single-meta--modern .af-news-id-value {
color: var(--bz-brand-900);
font-size: .82rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
direction: ltr;
}
.af-single-meta--modern .af-share-dropdown {
max-width: calc(100vw - 28px);
z-index: 1004;
}
/* Full-width image story: same system, adapted for a dark overlay. */
.af-single-wide > .af-wide-img > .af-single-meta {
display: block;
width: 100%;
}
.af-single-wide .af-single-meta--overlay-modern {
margin: 14px 0 0;
padding: 12px 0 0;
border-top-color: rgba(var(--bz-white-rgb), 0.25);
border-bottom: 0;
}
.af-single-wide .af-single-meta--overlay-modern::before {
background: var(--bz-accent-500);
}
.af-single-wide .af-single-meta--overlay-modern .af-single-author-chip,
.af-single-wide .af-single-meta--overlay-modern .af-single-author-name,
.af-single-wide .af-single-meta--overlay-modern .af-single-author-name a,
.af-single-wide .af-single-meta--overlay-modern .af-time-chip,
.af-single-wide .af-single-meta--overlay-modern .af-time-chip .af-date-value,
.af-single-wide .af-single-meta--overlay-modern .af-time-chip .af-time-value,
.af-single-wide .af-single-meta--overlay-modern .af-meta-prefix,
.af-single-wide .af-single-meta--overlay-modern .af-news-id-label,
.af-single-wide .af-single-meta--overlay-modern .af-news-id-value {
color: var(--bz-white);
}
.af-single-wide .af-single-meta--overlay-modern .af-single-author-chip svg,
.af-single-wide .af-single-meta--overlay-modern .af-time-chip .af-time-value svg {
color: rgba(var(--bz-white-rgb), 0.78);
}
.af-single-wide .af-single-meta--overlay-modern .af-time-chip,
.af-single-wide .af-single-meta--overlay-modern .af-news-id {
border-color: rgba(var(--bz-white-rgb), 0.24);
}
.af-single-wide .af-single-meta--overlay-modern .af-share-toggle {
border-color: rgba(var(--bz-white-rgb), 0.2);
}
.af-single-6 .af-single-meta h1 {
width: min(760px, 82%);
margin-bottom: 0;
}
@media (max-width: 899.98px) {
.af-single-meta--modern {
grid-template-columns: 1fr;
gap: 11px;
margin: 13px 0 20px;
}
.af-single-meta--modern .af-single-meta-main,
.af-single-meta--modern .af-single-meta-side {
width: 100%;
justify-content: space-between;
}
.af-single-meta--modern .af-single-meta-side {
padding-top: 10px;
border-top: 1px dashed var(--bz-brand-100);
}
.af-single-wide .af-single-meta--overlay-modern .af-single-meta-side {
border-top-color: rgba(var(--bz-white-rgb), 0.22);
}
}
@media (max-width: 767.98px) {
.af-single-meta--modern {
gap: 10px;
padding: 10px 0;
}
.af-single-meta--modern::before {
width: 48px;
}
.af-single-meta--modern .af-single-meta-main {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.af-single-meta--modern .af-single-meta-badges {
width: 100%;
justify-content: flex-start;
}
.af-single-meta--modern .af-time-chip {
width: 100%;
min-height: 38px;
margin: 0;
padding: 7px 10px;
background: var(--bz-info-soft);
border: 0;
border-radius: 8px;
}
.af-single-meta--modern .af-single-meta-side {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
}
.af-single-meta--modern .af-single-actions,
.af-single-meta--modern .af-share-menu {
min-width: 0;
}
.af-single-meta--modern .af-share-toggle {
width: auto;
min-width: 0;
min-height: 38px;
padding: 7px 12px;
}
.af-single-meta--modern .af-share-toggle-label {
display: inline;
}
.af-single-meta--modern .af-share-caret {
display: none;
}
.af-single-meta--modern .af-news-id {
flex-direction: row;
align-items: center;
gap: 6px;
min-height: 38px;
padding: 0 10px;
background: var(--bz-info-soft);
border: 0;
border-radius: 8px;
}
.af-single-wide .af-single-meta--overlay-modern .af-time-chip,
.af-single-wide .af-single-meta--overlay-modern .af-news-id {
background: rgba(var(--bz-white-rgb), 0.12);
}
.af-single-6 .af-single-meta h1 {
width: 100%;
}
}
@media (max-width: 359.98px) {
.af-single-meta--modern .af-single-meta-side {
grid-template-columns: minmax(0, 1fr) auto;
gap: 7px;
}
.af-single-meta--modern .af-share-toggle {
padding-inline: 10px;
font-size: .72rem;
}
.af-single-meta--modern .af-news-id {
padding-inline: 8px;
}
.af-single-meta--modern .af-news-id-label {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.af-single-meta--modern .af-share-toggle {
transition: none !important;
}
}
/* =========================================================
5.5.17 — Fully borderless mobile footer utility links
- Keeps the 2×2 arrangement.
- Removes every residual divider, frame, shadow and pseudo-line.
========================================================= */
@media (max-width: 767.98px) {
footer .af-footer-first {
gap: 4px 14px;
}
footer .af-footer-first > li:not(:first-child),
footer .af-footer-first > li:nth-child(2),
footer .af-footer-first > li:nth-child(3),
footer .af-footer-first > li:nth-child(4),
footer .af-footer-first > li:nth-child(5) {
border: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: 0 !important;
}
footer .af-footer-first > li:not(:first-child)::before,
footer .af-footer-first > li:not(:first-child)::after,
footer .af-footer-first > li:not(:first-child) > a::before,
footer .af-footer-first > li:not(:first-child) > a::after {
content: none !important;
display: none !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
footer .af-footer-first > li:not(:first-child) > a {
min-height: 40px;
padding: 7px 5px;
color: var(--bz-brand-800);
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0;
text-decoration: none;
transform: none !important;
}
footer .af-footer-first > li:not(:first-child) > a:hover,
footer .af-footer-first > li:not(:first-child) > a:focus,
footer .af-footer-first > li:not(:first-child) > a:focus-visible,
footer .af-footer-first > li:not(:first-child) > a:active {
color: var(--bz-brand-800);
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: none;
transform: none !important;
text-decoration: none;
}
}
/* =========================================================
5.5.18 — Unified article action system
- Removes the redundant publication prefix below titles.
- Uses one share control at the top and bottom of articles.
- Modernizes share, print, copy-link and comments controls.
- Responsive 2×2 action grid on mobile.
========================================================= */
.af-meta-prefix {
display: none !important;
}
.af-share-menu {
position: relative;
display: inline-flex;
min-width: 0;
margin: 0;
direction: rtl;
}
.af-story-tool {
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
min-height: 40px;
margin: 0;
padding: 8px 13px;
color: var(--bz-brand-900);
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-radius: 10px;
box-shadow: 0 2px 7px rgba(var(--bz-brand-rgb), 0.055);
font-family: inherit;
font-size: .79rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.af-story-tool:hover,
.af-story-tool:focus-visible {
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border-color: var(--bz-info-border);
box-shadow: 0 5px 13px rgba(var(--bz-brand-rgb), 0.09);
transform: translateY(-1px);
outline: none;
text-decoration: none;
}
.af-story-tool:focus-visible {
box-shadow: 0 0 0 3px rgba(var(--bz-brand-rgb), 0.13), 0 5px 13px rgba(var(--bz-brand-rgb), 0.09);
}
.af-story-tool-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 20px;
height: 20px;
line-height: 0;
}
.af-story-tool-icon svg {
display: block;
width: 19px;
height: 19px;
}
.af-story-tool-label {
display: inline-block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.af-story-tool--share,
.af-single-meta .af-story-tool--share,
.af-single-meta--modern .af-story-tool--share {
color: var(--bz-white);
background: linear-gradient(135deg, var(--bz-accent-500) 0%, var(--bz-accent-600) 100%);
border-color: rgba(var(--bz-accent-rgb), 0.28);
box-shadow: 0 4px 12px rgba(var(--bz-accent-rgb), 0.18);
}
.af-story-tool--share:hover,
.af-story-tool--share:focus-visible,
.af-story-tool--share[aria-expanded="true"],
.af-single-meta .af-story-tool--share:hover,
.af-single-meta .af-story-tool--share:focus-visible,
.af-single-meta .af-story-tool--share[aria-expanded="true"],
.af-single-meta--modern .af-story-tool--share:hover,
.af-single-meta--modern .af-story-tool--share:focus-visible,
.af-single-meta--modern .af-story-tool--share[aria-expanded="true"] {
color: var(--bz-white);
background: linear-gradient(135deg, var(--bz-accent-500) 0%, var(--bz-accent-600) 100%);
border-color: rgba(var(--bz-accent-rgb), 0.36);
box-shadow: 0 7px 17px rgba(var(--bz-accent-rgb), 0.24);
}
.af-share-toggle.dropdown-toggle::after,
.af-share-toggle::after {
display: none !important;
}
.af-share-caret {
flex: 0 0 auto;
margin-right: 1px;
opacity: .78;
transition: transform .16s ease;
}
.af-share-toggle[aria-expanded="true"] .af-share-caret {
transform: rotate(180deg);
}
.af-share-menu.dropup .af-share-caret {
transform: rotate(180deg);
}
.af-share-menu.dropup .af-share-toggle[aria-expanded="true"] .af-share-caret {
transform: rotate(0deg);
}
.af-share-dropdown,
.af-single-meta .af-share-dropdown,
.af-single-meta--modern .af-share-dropdown {
width: 286px;
min-width: 286px;
max-width: calc(100vw - 24px);
margin: 8px 0 0;
padding: 8px;
overflow: hidden;
direction: rtl;
text-align: right;
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-radius: 14px;
box-shadow: 0 16px 38px rgba(var(--bz-brand-rgb), 0.16), 0 3px 9px rgba(var(--bz-brand-rgb), 0.07);
z-index: 1100;
}
.af-share-menu.dropup .af-share-dropdown {
margin: 0 0 8px;
}
.af-share-dropdown::before,
.af-share-dropdown::after {
display: none !important;
}
.af-share-dropdown.show {
animation: afUnifiedShareIn .16s ease-out both;
}
.af-share-dropdown-head {
display: flex;
flex-direction: column;
gap: 3px;
margin: 0 0 5px;
padding: 8px 10px 10px;
border-bottom: 1px solid var(--bz-info-soft);
}
.af-share-dropdown-kicker {
color: var(--bz-accent-600);
font-size: .68rem;
font-weight: 800;
line-height: 1.3;
}
.af-share-dropdown-head strong {
color: var(--bz-brand-900);
font-size: .82rem;
font-weight: 800;
line-height: 1.5;
}
.af-share-dropdown > li:not(.af-share-dropdown-head) {
margin: 2px 0;
}
.af-share-dropdown .af-share-item,
.af-single-meta .af-share-dropdown .af-share-item,
.af-single-meta--modern .af-share-dropdown .af-share-item {
display: flex;
align-items: center;
gap: 10px;
min-height: 52px;
margin: 0;
padding: 7px 8px;
color: var(--bz-brand-900);
background: transparent;
border: 0;
border-radius: 10px;
white-space: normal;
transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.af-share-dropdown .af-share-item:hover,
.af-share-dropdown .af-share-item:focus-visible,
.af-single-meta .af-share-dropdown .af-share-item:hover,
.af-single-meta .af-share-dropdown .af-share-item:focus-visible,
.af-single-meta--modern .af-share-dropdown .af-share-item:hover,
.af-single-meta--modern .af-share-dropdown .af-share-item:focus-visible {
color: var(--bz-brand-800);
background: var(--bz-info-soft);
transform: translateX(-2px);
outline: none;
}
.af-share-item-icon,
.af-single-meta .af-share-item-icon,
.af-single-meta--modern .af-share-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
color: var(--bz-white);
background: var(--bz-brand-800);
border-radius: 10px;
box-shadow: none;
}
.af-share-item-icon svg {
display: block;
}
.af-share-telegram .af-share-item-icon,
.af-single-meta .af-share-telegram .af-share-item-icon {
background: var(--bz-social-telegram);
}
.af-share-whatsapp .af-share-item-icon,
.af-single-meta .af-share-whatsapp .af-share-item-icon {
background: var(--bz-social-whatsapp);
}
.af-share-x .af-share-item-icon,
.af-single-meta .af-share-x .af-share-item-icon {
background: var(--bz-social-x);
}
.af-share-facebook .af-share-item-icon,
.af-single-meta .af-share-facebook .af-share-item-icon {
background: var(--bz-social-facebook);
}
.af-share-item-text,
.af-single-meta .af-share-item-text,
.af-single-meta--modern .af-share-item-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
min-width: 0;
line-height: 1.35;
}
.af-share-item-text strong,
.af-single-meta .af-share-item-text strong,
.af-single-meta--modern .af-share-item-text strong {
color: var(--bz-brand-900);
font-size: .8rem;
font-weight: 800;
}
.af-share-item-text small,
.af-single-meta .af-share-item-text small,
.af-single-meta--modern .af-share-item-text small {
color: var(--bz-text-muted);
font-size: .68rem;
font-weight: 500;
}
.af-single-metab.af-story-tools {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
width: 100%;
margin: 42px 0 12px;
padding: 14px 0;
clear: both;
background: transparent;
border-top: 1px solid var(--bz-brand-100);
border-bottom: 1px solid var(--bz-brand-100);
}
.af-single-metab.af-story-tools::before {
content: "";
position: absolute;
top: -1px;
right: 0;
width: 54px;
height: 2px;
background: var(--bz-accent-600);
border-radius: 999px;
}
.af-single-metab.af-story-tools .af-share-menu {
display: inline-flex;
}
.af-single-metab.af-story-tools .af-story-tool,
.af-single-metab.af-story-tools a.af-story-tool,
.af-single-metab.af-story-tools button.af-story-tool {
width: auto;
height: auto;
min-height: 42px;
margin: 0;
padding: 8px 13px;
border-radius: 10px;
text-decoration: none;
}
.af-single-metab.af-story-tools .af-story-tool--neutral {
color: var(--bz-brand-800);
background: var(--bz-white);
border-color: var(--bz-brand-100);
}
.af-single-metab.af-story-tools .af-story-tool--neutral:hover,
.af-single-metab.af-story-tools .af-story-tool--neutral:focus-visible {
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border-color: var(--bz-info-border);
}
.af-single-metab.af-story-tools .af-story-copy.is-success {
color: var(--bz-success);
background: var(--bz-success-soft);
border-color: var(--bz-success-border);
box-shadow: 0 4px 12px rgba(var(--bz-success-rgb), 0.1);
}
.af-story-tool-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border-radius: 999px;
font-size: .68rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.af-story-tools-status {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Keep the top and bottom share control visually identical. */
.af-single-meta--modern .af-share-toggle,
.af-single-meta .af-share-toggle,
.af-single-metab.af-story-tools .af-share-toggle {
min-height: 40px;
padding: 8px 13px;
border-radius: 10px;
font-size: .79rem;
}
.af-single-meta--modern .af-share-menu,
.af-single-meta .af-share-menu {
min-width: 0;
}
@keyframes afUnifiedShareIn {
from {
opacity: 0;
transform: translateY(-5px) scale(.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 767.98px) {
.af-single-meta--modern .af-share-toggle,
.af-single-meta .af-share-toggle {
min-height: 42px;
padding: 8px 12px;
}
.af-single-meta--modern .af-share-toggle-label,
.af-single-meta .af-share-toggle-label {
display: inline;
}
.af-single-meta--modern .af-share-caret,
.af-single-meta .af-share-caret {
display: inline-block;
}
.af-single-metab.af-story-tools {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 8px;
margin: 34px 0 12px;
padding: 12px 0;
}
.af-single-metab.af-story-tools .af-share-menu,
.af-single-metab.af-story-tools .af-story-tool,
.af-single-metab.af-story-tools a.af-story-tool,
.af-single-metab.af-story-tools button.af-story-tool,
.af-single-metab.af-story-tools .af-share-toggle {
width: 100%;
min-width: 0;
min-height: 44px;
}
.af-single-metab.af-story-tools .af-story-tool {
padding: 8px 9px;
font-size: .78rem;
}
.af-share-dropdown,
.af-single-meta .af-share-dropdown,
.af-single-meta--modern .af-share-dropdown {
width: min(286px, calc(100vw - 24px));
min-width: min(286px, calc(100vw - 24px));
}
.af-share-dropdown .af-share-item {
min-height: 50px;
}
}
@media (max-width: 359.98px) {
.af-single-metab.af-story-tools {
gap: 7px;
}
.af-single-metab.af-story-tools .af-story-tool {
gap: 6px;
padding-inline: 7px;
font-size: .72rem;
}
.af-story-tool-icon,
.af-story-tool-icon svg {
width: 18px;
height: 18px;
}
.af-story-tool-count {
min-width: 20px;
height: 20px;
padding-inline: 5px;
font-size: .64rem;
}
.af-single-meta--modern .af-share-toggle,
.af-single-meta .af-share-toggle {
gap: 6px;
padding-inline: 10px;
font-size: .73rem;
}
}
@media (prefers-reduced-motion: reduce) {
.af-story-tool,
.af-share-caret,
.af-share-dropdown .af-share-item {
transition: none !important;
}
.af-share-dropdown.show {
animation: none !important;
}
}
/* =========================================================
5.5.19 — Single meta spacing + lower share menu normalization
- Separates category and publication time correctly in RTL.
- Prevents legacy circular-link rules from breaking the lower share menu.
========================================================= */
@media (min-width: 768px) {
.af-single-meta--modern .af-single-meta-main {
column-gap: 12px;
row-gap: 8px;
}
.af-single-meta--modern .af-time-chip {
margin: 0;
padding: 0 14px 0 0;
border-left: 0;
border-right: 1px solid var(--bz-brand-100);
}
}
/* The old `.af-single-metab a` rule used fixed circular dimensions.
Reset every lower-share item so its typography and layout match the top menu. */
.af-single-metab.af-story-tools .af-share-dropdown {
direction: rtl;
text-align: right;
}
.af-single-metab.af-story-tools .af-share-dropdown > li,
.af-single-metab.af-story-tools .af-share-dropdown > li:not(.af-share-dropdown-head) {
width: 100%;
height: auto;
margin: 2px 0 !important;
padding: 0 !important;
list-style: none !important;
}
.af-single-metab.af-story-tools .af-share-dropdown .af-share-dropdown-head {
width: 100%;
height: auto;
margin: 0 0 5px !important;
padding: 8px 10px 10px !important;
text-align: right;
}
.af-single-metab.af-story-tools .af-share-dropdown a.af-share-item,
.af-single-metab.af-story-tools .af-share-dropdown .dropdown-item.af-share-item {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
height: auto !important;
min-height: 52px !important;
margin: 0 !important;
padding: 7px 8px !important;
color: var(--bz-brand-900) !important;
background: transparent !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: none !important;
font-family: inherit !important;
font-size: inherit !important;
line-height: 1.35 !important;
text-align: right !important;
text-decoration: none !important;
white-space: normal !important;
}
.af-single-metab.af-story-tools .af-share-dropdown a.af-share-item:hover,
.af-single-metab.af-story-tools .af-share-dropdown a.af-share-item:focus-visible,
.af-single-metab.af-story-tools .af-share-dropdown .dropdown-item.af-share-item:hover,
.af-single-metab.af-story-tools .af-share-dropdown .dropdown-item.af-share-item:focus-visible {
color: var(--bz-brand-800) !important;
background: var(--bz-info-soft) !important;
transform: translateX(-2px);
outline: none;
}
.af-single-metab.af-story-tools .af-share-dropdown .af-share-item-icon {
flex: 0 0 38px !important;
width: 38px !important;
height: 38px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 10px !important;
}
.af-single-metab.af-story-tools .af-share-dropdown .af-share-item-text {
display: flex !important;
flex: 1 1 auto;
flex-direction: column !important;
align-items: flex-start !important;
gap: 1px !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
}
.af-single-metab.af-story-tools .af-share-dropdown .af-share-item-text strong,
.af-single-metab.af-story-tools .af-share-dropdown .af-share-item-text small {
display: block !important;
width: 100%;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
white-space: normal !important;
}
.af-single-metab.af-story-tools .af-share-dropdown .af-share-item-text strong {
color: var(--bz-brand-900) !important;
font-size: .8rem !important;
font-weight: 800 !important;
line-height: 1.45 !important;
}
.af-single-metab.af-story-tools .af-share-dropdown .af-share-item-text small {
color: var(--bz-text-muted) !important;
font-size: .68rem !important;
font-weight: 500 !important;
line-height: 1.45 !important;
}
@media (max-width: 767.98px) {
.af-single-metab.af-story-tools .af-share-dropdown a.af-share-item,
.af-single-metab.af-story-tools .af-share-dropdown .dropdown-item.af-share-item {
min-height: 50px !important;
}
}
/* =========================================================
5.5.20 — Editorial UI consistency layer (CSS-only, low risk)
Modernizes tabs, section titles, article typography, quotes,
tables, captions, galleries, tags and pagination without
changing WordPress markup or functionality.
========================================================= */
:root {
--baztab-ui-ink: var(--bz-brand-900);
--baztab-ui-text: var(--bz-brand-900);
--baztab-ui-muted: var(--bz-text-muted);
--baztab-ui-line: var(--bz-brand-100);
--baztab-ui-soft: var(--bz-info-soft);
--baztab-ui-blue: var(--bz-brand-800);
--baztab-ui-red: var(--bz-accent-600);
--baztab-ui-radius: 12px;
--baztab-ui-shadow: 0 8px 24px rgba(var(--bz-brand-rgb), 0.08);
}
/* Section titles: retain identity, replace the old heavy block with a clean accent. */
.af-head-title {
align-items: center;
gap: 8px;
line-height: 1.45;
}
.af-head-title::before {
flex: 0 0 4px;
width: 4px;
height: 25px;
margin: 0;
background: var(--baztab-ui-red);
border-radius: 999px;
}
.af-head-title::after {
flex: 0 0 34px;
width: 34px;
height: 2px;
margin: 0 8px 0 0;
background: var(--baztab-ui-line);
border-radius: 999px;
}
/* Homepage and widget tabs. Bootstrap behavior remains untouched. */
#nav-tab-special,
#nav-tab-fav,
.af-news-main-tab,
.af-tab-index > .nav-pills {
gap: 4px;
padding: 4px;
background: var(--bz-info-soft);
border: 1px solid var(--bz-brand-100);
border-radius: 12px;
}
#nav-tab-special,
#nav-tab-fav,
.af-news-main-tab {
display: flex;
flex-wrap: wrap;
border-bottom: 0;
}
#nav-tab-special .nav-link,
#nav-tab-fav .nav-link,
.af-news-main-tab .nav-link,
.af-news-main-tab li button,
.af-tab-index > .nav-pills .nav-link {
position: relative;
min-height: 38px;
margin: 0;
padding: 7px 12px;
color: var(--bz-text-secondary);
background: transparent;
border: 0 !important;
border-radius: 9px !important;
font-size: .82rem;
font-weight: 700;
line-height: 1.35;
white-space: nowrap;
transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#nav-tab-special .nav-link:hover,
#nav-tab-fav .nav-link:hover,
.af-news-main-tab .nav-link:hover,
.af-tab-index > .nav-pills .nav-link:hover {
color: var(--baztab-ui-blue);
background: rgba(var(--bz-white-rgb), 0.7);
}
#nav-tab-special .nav-link.active,
#nav-tab-fav .nav-link.active,
.af-news-main-tab .nav-link.active,
.af-news-main-tab .show > .nav-link,
.af-tab-index > .nav-pills .nav-link.active,
.af-tab-index > .nav-pills .show > .nav-link {
color: var(--baztab-ui-blue) !important;
background: var(--bz-white) !important;
box-shadow: 0 3px 10px rgba(var(--bz-brand-rgb), 0.1);
}
#nav-tab-special .nav-link.active::after,
#nav-tab-fav .nav-link.active::after,
.af-news-main-tab .nav-link.active::after,
.af-tab-index > .nav-pills .nav-link.active::after {
content: '';
position: absolute;
right: 12px;
bottom: 3px;
left: 12px;
height: 2px;
background: var(--baztab-ui-red);
border-radius: 999px;
}
.af-tab-index > .nav-pills {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0 12px 12px !important;
}
.af-tab-index > .nav-pills li {
width: auto;
min-width: 0;
}
.af-tab-index > .nav-pills li button,
.af-tab-index > .nav-pills .nav-link {
width: 100%;
}
.af-tab-index > .tab-content {
padding: 2px 16px 10px;
}
.af-news-head .dropdown > .btn-light {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
color: var(--baztab-ui-blue);
background: var(--baztab-ui-soft);
border: 1px solid var(--baztab-ui-line);
border-radius: 10px;
box-shadow: none;
}
.af-news-head .dropdown > .btn-light:hover,
.af-news-head .dropdown > .btn-light:focus-visible {
color: var(--baztab-ui-red);
background: var(--bz-white);
border-color: var(--bz-brand-100);
outline: none;
}
.af-news-main .dropdown-menu .nav-tabs {
display: grid;
gap: 3px;
padding: 5px;
border: 0;
}
.af-news-main .dropdown-menu .nav-tabs .nav-link {
width: 100%;
min-height: 40px;
padding: 8px 10px;
color: var(--bz-brand-800);
background: transparent;
border: 0 !important;
border-radius: 8px !important;
text-align: right;
}
.af-news-main .dropdown-menu .nav-tabs .nav-link.active {
color: var(--baztab-ui-blue);
background: var(--bz-info-soft);
font-weight: 800;
}
/* Editorial typography inside posts and pages. */
.af-single-content .af-single-mc h2,
.af-single-content .af-single-mc h3,
.af-single-content .af-single-mc h4 {
color: var(--baztab-ui-ink);
font-style: normal;
letter-spacing: 0;
scroll-margin-top: 110px;
}
.af-single-content .af-single-mc h2 {
margin: 38px 0 16px;
padding: 2px 13px 2px 0;
border-right: 4px solid var(--baztab-ui-red);
font-size: clamp(1.28rem, 2vw, 1.58rem);
font-weight: 900;
line-height: 1.7;
}
.af-single-content .af-single-mc h3 {
margin: 32px 0 14px;
padding: 1px 11px 1px 0;
border-right: 3px solid var(--bz-info);
font-size: clamp(1.14rem, 1.6vw, 1.36rem);
font-weight: 800;
line-height: 1.75;
}
.af-single-content .af-single-mc h4 {
margin: 26px 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--baztab-ui-line);
font-size: clamp(1.04rem, 1.35vw, 1.18rem);
font-weight: 800;
line-height: 1.8;
}
.af-single-content .af-single-mc p {
color: var(--baztab-ui-text);
font-size: clamp(.98rem, 1.15vw, 1.05rem);
line-height: 2.08;
}
.af-single-content .af-single-mc p a,
.af-single-content .af-single-mc li a {
color: var(--baztab-ui-blue);
text-decoration-line: underline;
text-decoration-color: rgba(var(--bz-brand-rgb), 0.28);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition: color .16s ease, text-decoration-color .16s ease;
}
.af-single-content .af-single-mc p a:hover,
.af-single-content .af-single-mc li a:hover {
color: var(--baztab-ui-red);
text-decoration-color: currentColor;
}
.af-single-content .af-single-mc ul,
.af-single-content .af-single-mc ol {
margin: 20px 0 24px;
padding-right: 24px;
color: var(--baztab-ui-text);
}
.af-single-content .af-single-mc li {
margin: 7px 0;
padding-right: 3px;
line-height: 1.95;
}
.af-single-content .af-single-mc li::marker {
color: var(--baztab-ui-red);
font-weight: 900;
}
.af-single-content .af-single-mc hr {
height: 1px;
margin: 34px 0;
background: linear-gradient(90deg, transparent, var(--bz-brand-100) 18%, var(--bz-brand-100) 82%, transparent);
border: 0;
opacity: 1;
}
/* Quotes and pull-quotes. */
.af-single-content .af-single-mc blockquote,
.af-single-content .af-single-mc .wp-block-quote {
position: relative;
margin: 30px 0;
padding: 20px 22px 18px 52px;
overflow: hidden;
color: var(--bz-brand-900);
background: linear-gradient(135deg, var(--bz-info-soft) 0%, var(--bz-info-soft) 100%);
border: 0;
border-right: 4px solid var(--baztab-ui-red);
border-radius: var(--baztab-ui-radius);
box-shadow: none;
font-size: 1.02rem;
font-style: normal;
font-weight: 600;
line-height: 2;
}
.af-single-content .af-single-mc blockquote::before,
.af-single-content .af-single-mc .wp-block-quote::before {
content: '“';
position: absolute;
top: 4px;
left: 15px;
color: rgba(var(--bz-brand-rgb), 0.18);
font-family: var(--bz-font-family);
font-size: 4rem;
font-weight: 700;
line-height: 1;
}
.af-single-content .af-single-mc blockquote p,
.af-single-content .af-single-mc .wp-block-quote p {
margin: 0 0 8px;
color: inherit;
font-size: inherit;
line-height: inherit;
text-align: right;
}
.af-single-content .af-single-mc blockquote p:last-child,
.af-single-content .af-single-mc .wp-block-quote p:last-child {
margin-bottom: 0;
}
.af-single-content .af-single-mc blockquote cite,
.af-single-content .af-single-mc .wp-block-quote cite {
display: block;
margin-top: 9px;
color: var(--baztab-ui-muted);
font-size: .78rem;
font-style: normal;
font-weight: 600;
}
.af-single-content .af-single-mc .wp-block-pullquote {
margin: 34px 0;
padding: 24px 8%;
color: var(--baztab-ui-ink);
background: transparent;
border-top: 2px solid var(--baztab-ui-line);
border-bottom: 2px solid var(--baztab-ui-line);
text-align: center;
}
.af-single-content .af-single-mc .wp-block-pullquote blockquote {
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
font-size: clamp(1.14rem, 2vw, 1.42rem);
font-weight: 800;
line-height: 1.9;
}
.af-single-content .af-single-mc .wp-block-pullquote blockquote::before {
content: none;
}
.af-single-content .lead {
position: relative;
margin: 18px 0 24px;
padding: 15px 17px;
color: var(--bz-brand-900);
background: var(--bz-info-soft);
border: 1px solid var(--bz-brand-100);
border-radius: 10px;
font-size: 1.02rem;
font-weight: 600;
line-height: 1.95;
}
/* Article tables: readable on desktop, horizontally scrollable on mobile. */
.af-single-content .af-single-mc table,
.af-single-content .wp-block-table table {
width: 100%;
margin: 26px 0;
overflow: hidden;
color: var(--bz-brand-900);
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-collapse: separate;
border-spacing: 0;
border-radius: 10px;
font-size: .9rem;
line-height: 1.75;
}
.af-single-content .af-single-mc table th,
.af-single-content .wp-block-table table th {
padding: 11px 12px;
color: var(--bz-brand-900);
background: var(--bz-info-soft);
border: 0;
border-bottom: 1px solid var(--bz-brand-100);
border-left: 1px solid var(--bz-brand-100);
font-weight: 800;
text-align: right;
vertical-align: middle;
}
.af-single-content .af-single-mc table td,
.af-single-content .wp-block-table table td {
padding: 10px 12px;
background: var(--bz-white);
border: 0;
border-bottom: 1px solid var(--bz-brand-100);
border-left: 1px solid var(--bz-brand-100);
text-align: right;
vertical-align: top;
}
.af-single-content .af-single-mc table tr:nth-child(even) td,
.af-single-content .wp-block-table table tr:nth-child(even) td {
background: var(--bz-info-soft);
}
.af-single-content .af-single-mc table tr:last-child td,
.af-single-content .wp-block-table table tr:last-child td {
border-bottom: 0;
}
.af-single-content .af-single-mc table th:last-child,
.af-single-content .af-single-mc table td:last-child,
.af-single-content .wp-block-table table th:last-child,
.af-single-content .wp-block-table table td:last-child {
border-left: 0;
}
/* Images, captions and classic galleries. */
.af-single-content .af-single-mc figure.wp-block-image,
.af-single-content .af-single-mc .wp-caption {
margin-top: 26px;
margin-bottom: 28px;
}
.af-single-content .af-single-mc figure.wp-block-image img,
.af-single-content .af-single-mc .wp-caption img {
border-radius: 9px;
}
.af-single-content .af-single-mc figcaption,
.af-single-content .af-single-mc .wp-caption-text,
.af-single-content .af-single-mc .gallery-caption {
margin: 8px 0 0;
padding: 0 4px;
color: var(--baztab-ui-muted);
font-size: .78rem;
font-weight: 500;
line-height: 1.75;
text-align: center;
}
.single-post .af-single-mc .gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 26px 0;
}
.single-post .af-single-mc .gallery.gallery-columns-1 { grid-template-columns: 1fr; }
.single-post .af-single-mc .gallery.gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.single-post .af-single-mc .gallery.gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.single-post .af-single-mc .gallery.gallery-columns-5,
.single-post .af-single-mc .gallery.gallery-columns-6,
.single-post .af-single-mc .gallery.gallery-columns-7,
.single-post .af-single-mc .gallery.gallery-columns-8,
.single-post .af-single-mc .gallery.gallery-columns-9 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.single-post .af-single-mc .gallery .gallery-item {
float: none;
width: auto;
margin: 0;
}
.single-post .af-single-mc .gallery img {
width: 100%;
height: auto;
padding: 0;
background: transparent;
border: 0;
border-radius: 9px;
box-shadow: 0 4px 14px rgba(var(--bz-brand-rgb), 0.1);
transition: transform .2s ease, box-shadow .2s ease;
}
.single-post .af-single-mc .gallery a:hover img,
.single-post .af-single-mc .gallery a:focus-visible img {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(var(--bz-brand-rgb), 0.15);
}
/* Tags. */
.af-single-tag {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin: 26px 0 16px;
}
.af-single-tag a {
display: inline-flex;
align-items: center;
min-height: 34px;
margin: 0;
padding: 5px 11px;
color: var(--bz-brand-800);
background: var(--bz-info-soft);
border: 1px solid var(--bz-brand-100);
border-radius: 999px;
font-size: .78rem;
font-weight: 700;
line-height: 1.35;
text-decoration: none;
transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.af-single-tag a::before {
content: '#';
margin-left: 3px;
color: var(--bz-text-faint);
font-weight: 800;
}
.af-single-tag a:hover,
.af-single-tag a:focus-visible {
color: var(--baztab-ui-blue);
background: var(--bz-white);
border-color: var(--bz-brand-100);
transform: translateY(-1px);
outline: none;
}
/* Pagination across archive, search and shortcodes. */
nav[aria-label="Page navigation"] .pagination,
.af-archive-main .pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin: 28px 0;
padding: 0;
}
nav[aria-label="Page navigation"] .pagination > li,
.af-archive-main .pagination > li {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
margin: 0;
padding: 0;
color: var(--bz-brand-800);
background: var(--bz-white);
border: 1px solid var(--bz-brand-100);
border-radius: 9px;
box-shadow: none;
overflow: hidden;
font-size: .82rem;
font-weight: 800;
}
nav[aria-label="Page navigation"] .pagination > li > a,
nav[aria-label="Page navigation"] .pagination > li > span,
.af-archive-main .pagination > li > a,
.af-archive-main .pagination > li > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 38px;
padding: 7px 11px;
color: inherit;
background: transparent;
text-decoration: none;
}
nav[aria-label="Page navigation"] .pagination > li:hover,
nav[aria-label="Page navigation"] .pagination > li:focus-within,
.af-archive-main .pagination > li:hover,
.af-archive-main .pagination > li:focus-within {
color: var(--baztab-ui-blue);
border-color: var(--bz-info-border);
box-shadow: 0 5px 15px rgba(var(--bz-brand-rgb), 0.08);
}
nav[aria-label="Page navigation"] .pagination > li .current,
nav[aria-label="Page navigation"] .pagination > li.active,
.af-archive-main .pagination > li .current,
.af-archive-main .pagination > li.active {
color: var(--bz-white);
background: var(--baztab-ui-blue);
border-color: var(--baztab-ui-blue);
}
/* Keyboard focus for all refreshed controls. */
#nav-tab-special .nav-link:focus-visible,
#nav-tab-fav .nav-link:focus-visible,
.af-news-main-tab .nav-link:focus-visible,
.af-tab-index > .nav-pills .nav-link:focus-visible,
nav[aria-label="Page navigation"] a:focus-visible {
outline: 2px solid rgba(var(--bz-brand-rgb), 0.3);
outline-offset: 2px;
}
@media (max-width: 899.98px) {
#nav-tab-special,
#nav-tab-fav {
gap: 3px;
}
#nav-tab-special .nav-link,
#nav-tab-fav .nav-link {
padding-inline: 9px;
font-size: .76rem;
}
.af-single-content .af-single-mc h2 {
margin-top: 32px;
}
.af-single-content .af-single-mc h3 {
margin-top: 27px;
}
}
@media (max-width: 767.98px) {
.af-head-title::before {
height: 22px;
}
.af-head-title::after {
flex-basis: 25px;
width: 25px;
}
.af-tab-index > .nav-pills {
margin-inline: 9px !important;
}
.af-tab-index > .nav-pills .nav-link {
min-height: 42px;
padding-inline: 7px;
font-size: .76rem;
white-space: normal;
}
.af-tab-index > .tab-content {
padding-inline: 10px;
}
.af-single-content .af-single-mc h2 {
margin: 29px 0 13px;
padding-right: 10px;
border-right-width: 3px;
font-size: 1.24rem;
line-height: 1.75;
}
.af-single-content .af-single-mc h3 {
margin: 25px 0 12px;
padding-right: 9px;
font-size: 1.12rem;
line-height: 1.8;
}
.af-single-content .af-single-mc h4 {
margin: 22px 0 10px;
font-size: 1.02rem;
}
.af-single-content .af-single-mc p {
font-size: .98rem;
line-height: 2.02;
}
.af-single-content .af-single-mc blockquote,
.af-single-content .af-single-mc .wp-block-quote {
margin: 24px 0;
padding: 17px 16px 16px 40px;
border-right-width: 3px;
border-radius: 10px;
font-size: .96rem;
line-height: 1.95;
}
.af-single-content .af-single-mc blockquote::before,
.af-single-content .af-single-mc .wp-block-quote::before {
left: 10px;
font-size: 3.2rem;
}
.af-single-content .af-single-mc .wp-block-pullquote {
margin: 27px 0;
padding: 19px 4%;
}
.af-single-content .af-single-mc table,
.af-single-content .wp-block-table table {
display: block;
width: 100%;
max-width: 100%;
margin: 22px 0;
overflow-x: auto;
border-radius: 8px;
-webkit-overflow-scrolling: touch;
}
.af-single-content .af-single-mc table th,
.af-single-content .af-single-mc table td,
.af-single-content .wp-block-table table th,
.af-single-content .wp-block-table table td {
min-width: 120px;
padding: 9px 10px;
white-space: normal;
}
.single-post .af-single-mc .gallery,
.single-post .af-single-mc .gallery.gallery-columns-3,
.single-post .af-single-mc .gallery.gallery-columns-4,
.single-post .af-single-mc .gallery.gallery-columns-5,
.single-post .af-single-mc .gallery.gallery-columns-6,
.single-post .af-single-mc .gallery.gallery-columns-7,
.single-post .af-single-mc .gallery.gallery-columns-8,
.single-post .af-single-mc .gallery.gallery-columns-9 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.af-single-tag {
gap: 6px;
margin-top: 23px;
}
.af-single-tag a {
min-height: 36px;
padding-inline: 10px;
font-size: .75rem;
}
nav[aria-label="Page navigation"] .pagination > li,
.af-archive-main .pagination > li {
min-width: 38px;
min-height: 38px;
}
}
@media (max-width: 359.98px) {
.single-post .af-single-mc .gallery,
.single-post .af-single-mc .gallery[class*="gallery-columns-"] {
grid-template-columns: 1fr;
}
.af-single-content .af-single-mc blockquote,
.af-single-content .af-single-mc .wp-block-quote {
padding-left: 14px;
}
.af-single-content .af-single-mc blockquote::before,
.af-single-content .af-single-mc .wp-block-quote::before {
content: none;
}
}
@media (prefers-reduced-motion: reduce) {
#nav-tab-special .nav-link,
#nav-tab-fav .nav-link,
.af-news-main-tab .nav-link,
.af-tab-index > .nav-pills .nav-link,
.single-post .af-single-mc .gallery img,
.af-single-tag a {
transition: none !important;
}
}
/* 5.5.20a — Neutralize legacy nav-pill markers inside the refreshed tab widget. */
.af-tab-index > .nav-pills,
#nav-tab-special,
#nav-tab-fav,
.af-news-main-tab {
margin-right: 0;
padding-right: 4px;
list-style: none;
}
.af-tab-index > .nav-pills .nav-link::before,
.af-tab-index > .nav-pills .nav-link.active::before,
.af-tab-index > .nav-pills .show > .nav-link::before {
content: none !important;
display: none !important;
}
/* ============================================================
Baztab Newsroom 6.0.0 — final release normalization
- Versioned standalone release with v5 theme-mod migration
- Correct case-sensitive local font asset paths
- Correct legacy search icon asset reference
============================================================ */
/* ========================================================================
6.2.1 — ACF rollback
ACF option reads and admin presentation restored to the original 6.0 path.
Modern comments from 6.2.0 are preserved below.
======================================================================== */
/* ========================================================================
6.2.0 — Modern article comments
Scoped to .af-single-comment to preserve widgets, plugins and admin UI.
======================================================================== */
.af-single-comment {
--bz-comment-red: var(--bz-accent-600);
--bz-comment-red-dark: var(--bz-accent-700);
--bz-comment-ink: var(--bz-brand-900);
--bz-comment-muted: var(--bz-text-muted);
--bz-comment-line: var(--bz-surface-subtle);
--bz-comment-soft: var(--bz-info-soft);
--bz-comment-blue-soft: var(--bz-info-soft);
width: 100%;
margin-top: 34px;
padding-top: 0;
}
.af-single-comment .harika-comments {
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.af-single-comment .baztab-comments-area {
width: 100%;
}
.af-single-comment .baztab-comments-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
margin: 0 0 18px;
padding: 0 0 17px;
border-bottom: 1px solid var(--bz-comment-line);
}
.af-single-comment .baztab-comments-heading {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.af-single-comment .baztab-comments-heading-icon {
display: inline-flex;
flex: 0 0 44px;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 13px;
background: rgba(var(--bz-accent-rgb), 0.09);
color: var(--bz-comment-red);
}
.af-single-comment .baztab-comments-heading-icon svg,
.af-single-comment .baztab-comments-write svg,
.af-single-comment .baztab-comment-guidelines svg,
.af-single-comment .baztab-comments-empty svg,
.af-single-comment .baztab-comment-date svg,
.af-single-comment .baztab-comment-awaiting svg,
.af-single-comment .baztab-comment-actions svg,
.af-single-comment .baztab-comment-submit svg {
display: block;
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.af-single-comment .baztab-comments-heading h2,
.af-single-comment #baztab-comments-title {
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--bz-comment-ink);
font-size: clamp(1.08rem, 1.5vw, 1.28rem);
font-weight: 800;
line-height: 1.55;
}
.af-single-comment .baztab-comments-heading p {
margin: 2px 0 0;
color: var(--bz-comment-muted);
font-size: .82rem;
line-height: 1.75;
}
.af-single-comment .baztab-comments-header-actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 9px;
}
.af-single-comment .baztab-comments-count,
.af-single-comment .baztab-comments-write {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 39px;
border-radius: 10px;
white-space: nowrap;
}
.af-single-comment .baztab-comments-count {
padding: 7px 13px;
border: 1px solid var(--bz-comment-line);
background: var(--bz-white);
color: var(--bz-text-secondary);
font-size: .79rem;
font-weight: 700;
}
.af-single-comment .baztab-comments-write {
gap: 7px;
padding: 7px 14px;
border: 1px solid transparent;
background: var(--bz-comment-red);
color: var(--bz-white);
font-size: .82rem;
font-weight: 800;
text-decoration: none;
transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.af-single-comment .baztab-comments-write svg {
width: 17px;
height: 17px;
}
.af-single-comment .baztab-comments-write:hover,
.af-single-comment .baztab-comments-write:focus-visible {
background: var(--bz-comment-red-dark);
color: var(--bz-white);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(var(--bz-accent-rgb), 0.16);
}
.af-single-comment .baztab-comment-guidelines {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 22px;
padding: 12px 14px;
border: 1px solid var(--bz-brand-100);
border-radius: 11px;
background: var(--bz-comment-blue-soft);
color: var(--bz-text-secondary);
}
.af-single-comment .baztab-comment-guidelines-icon {
display: inline-flex;
flex: 0 0 24px;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--bz-brand-800);
}
.af-single-comment .baztab-comment-guidelines-icon svg {
width: 19px;
height: 19px;
}
.af-single-comment .baztab-comment-guidelines p {
margin: 0;
font-size: .8rem;
line-height: 1.9;
}
.af-single-comment .baztab-comment-guidelines strong {
color: var(--bz-brand-900);
font-weight: 800;
}
.af-single-comment .comments-area,
.af-single-comment .comment-list {
width: 100%;
}
.af-single-comment .comment-list,
.af-single-comment ol.comment-list,
.af-single-comment .comment-list .children {
list-style: none;
}
.af-single-comment .comment-list,
.af-single-comment ol.comment-list {
margin: 0;
padding: 0;
}
.af-single-comment .comment-list .baztab-comment-item {
display: block;
margin: 0 0 14px;
padding: 0;
}
.af-single-comment .baztab-comment-card {
position: relative;
margin: 0;
padding: 18px 19px 16px;
border: 1px solid var(--bz-comment-line);
border-radius: 13px;
background: var(--bz-white);
box-shadow: 0 3px 14px rgba(var(--bz-brand-rgb), 0.035);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.af-single-comment .baztab-comment-card:hover {
border-color: var(--bz-border);
box-shadow: 0 8px 24px rgba(var(--bz-brand-rgb), 0.055);
}
.af-single-comment .baztab-comment-head {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.af-single-comment .baztab-comment-avatar {
display: block;
flex: 0 0 46px;
width: 46px;
height: 46px;
}
.af-single-comment .baztab-comment-avatar img.avatar,
.af-single-comment .comment-author img.avatar {
display: block;
width: 46px !important;
height: 46px !important;
margin: 0 !important;
padding: 0 !important;
border: 2px solid var(--bz-surface-subtle);
border-radius: 50% !important;
background: var(--bz-surface-subtle);
object-fit: cover;
}
.af-single-comment .baztab-comment-meta {
display: flex;
flex: 1 1 auto;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 12px;
float: none;
width: auto;
}
.af-single-comment .baztab-comment-author-row {
display: flex;
flex-wrap: wrap;
align-items: center;
min-width: 0;
gap: 7px;
}
.af-single-comment .baztab-comment-author,
.af-single-comment .baztab-comment-author a {
overflow: hidden;
max-width: 100%;
color: var(--bz-comment-ink);
font-size: .93rem;
font-style: normal;
font-weight: 800;
line-height: 1.65;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.af-single-comment .baztab-comment-badge,
.af-single-comment .baztab-comment-edit a {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 2px 8px;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
}
.af-single-comment .baztab-comment-badge {
background: rgba(var(--bz-accent-rgb), 0.09);
color: var(--bz-accent-600);
}
.af-single-comment .baztab-comment-edit a {
background: var(--bz-surface-subtle);
color: var(--bz-text-muted);
}
.af-single-comment .baztab-comment-date {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 6px;
width: auto;
min-height: 31px;
padding: 4px 9px;
border: 0;
border-radius: 8px;
background: var(--bz-comment-soft);
color: var(--bz-text-muted);
direction: rtl;
font-size: .72rem;
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
}
.af-single-comment .baztab-comment-date svg {
width: 15px;
height: 15px;
}
.af-single-comment .baztab-comment-date:hover,
.af-single-comment .baztab-comment-date:focus-visible {
background: var(--bz-surface-subtle);
color: var(--bz-text);
}
.af-single-comment .baztab-comment-content,
.af-single-comment .comment-content,
.af-single-comment .comment-body p {
clear: both;
color: var(--bz-text);
font-size: .93rem;
line-height: 2.05;
overflow-wrap: anywhere;
word-break: normal;
}
.af-single-comment .baztab-comment-content {
margin-top: 14px;
}
.af-single-comment .baztab-comment-content p {
margin: 0 0 9px;
}
.af-single-comment .baztab-comment-content p:last-child {
margin-bottom: 0;
}
.af-single-comment .baztab-comment-content a {
color: var(--bz-info);
text-decoration: underline;
text-decoration-color: rgba(var(--bz-info-rgb), 0.28);
text-underline-offset: 3px;
}
.af-single-comment .baztab-comment-awaiting {
display: flex;
align-items: center;
gap: 7px;
margin: 13px 0 0;
padding: 8px 10px;
border: 1px solid var(--bz-warning-border);
border-radius: 8px;
background: var(--bz-warning-soft);
color: var(--bz-warning);
font-size: .75rem;
line-height: 1.7;
}
.af-single-comment .baztab-comment-awaiting svg {
flex: 0 0 17px;
width: 17px;
height: 17px;
}
.af-single-comment .baztab-comment-footer {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 34px;
margin-top: 11px;
padding-top: 10px;
border-top: 1px solid var(--bz-surface-subtle);
}
.af-single-comment .baztab-comment-actions {
margin: 0;
}
.af-single-comment .baztab-comment-actions a,
.af-single-comment a.comment-reply-link {
display: inline-flex;
align-items: center;
gap: 6px;
width: auto;
min-height: 32px;
margin: 0;
padding: 4px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--bz-text-secondary);
font-size: .75rem;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
}
.af-single-comment .baztab-comment-actions a svg {
width: 16px;
height: 16px;
}
.af-single-comment .baztab-comment-actions a:hover,
.af-single-comment .baztab-comment-actions a:focus-visible {
background: rgba(var(--bz-accent-rgb), 0.075);
color: var(--bz-comment-red-dark);
}
.af-single-comment .comment-list .children {
position: relative;
margin: 0 28px 15px 0;
padding: 0 18px 0 0;
border: 0;
}
.af-single-comment .comment-list .children::before {
content: "";
position: absolute;
top: 3px;
right: 0;
bottom: 14px;
width: 2px;
border-radius: 2px;
background: linear-gradient(to bottom, rgba(var(--bz-accent-rgb), 0.42), rgba(var(--bz-accent-rgb), 0.06));
}
.af-single-comment .comment-list .children .baztab-comment-card {
background: var(--bz-info-soft);
}
/* Comments Like Dislike plugin: retain its logic and markup, modernize only UI. */
.af-single-comment .cld-like-dislike-wrap {
display: flex !important;
float: none !important;
clear: both;
flex-wrap: wrap;
align-items: center;
gap: 7px;
width: auto !important;
margin: 13px 0 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.af-single-comment .cld-like-dislike-wrap .cld-common-wrap,
.af-single-comment .cld-like-dislike-wrap .cld-like-wrap,
.af-single-comment .cld-like-dislike-wrap .cld-dislike-wrap {
display: inline-flex !important;
float: none !important;
align-items: center;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.af-single-comment .cld-like-dislike-wrap a,
.af-single-comment .cld-like-dislike-wrap button,
.af-single-comment .cld-like-trigger,
.af-single-comment .cld-dislike-trigger {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
width: auto !important;
min-width: 66px;
min-height: 34px;
margin: 0 !important;
padding: 5px 10px !important;
border: 1px solid var(--bz-border) !important;
border-radius: 9px !important;
background: var(--bz-white) !important;
color: var(--bz-text-secondary) !important;
font-size: .72rem !important;
font-weight: 700;
line-height: 1.4 !important;
text-decoration: none !important;
box-shadow: none !important;
transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.af-single-comment .cld-like-trigger:hover,
.af-single-comment .cld-like-trigger:focus-visible {
border-color: var(--bz-success-border) !important;
background: var(--bz-success-soft) !important;
color: var(--bz-success) !important;
}
.af-single-comment .cld-dislike-trigger:hover,
.af-single-comment .cld-dislike-trigger:focus-visible {
border-color: var(--bz-accent-200) !important;
background: var(--bz-accent-50) !important;
color: var(--bz-danger) !important;
}
.af-single-comment .cld-like-dislike-wrap img,
.af-single-comment .cld-like-dislike-wrap svg,
.af-single-comment .cld-like-dislike-wrap i {
flex: 0 0 auto;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
object-fit: contain;
}
.af-single-comment .cld-count-wrap,
.af-single-comment .cld-like-count-wrap,
.af-single-comment .cld-dislike-count-wrap {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 18px;
margin: 0 !important;
padding: 0 !important;
color: inherit;
font-size: .73rem !important;
font-weight: 800;
line-height: 1 !important;
}
.af-single-comment .comment-navigation,
.af-single-comment .comments-pagination {
margin: 16px 0 20px;
}
.af-single-comment .comment-navigation .nav-links,
.af-single-comment .comments-pagination .nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.af-single-comment .comment-navigation a,
.af-single-comment .comments-pagination a,
.af-single-comment .comments-pagination .current {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 7px 12px;
border: 1px solid var(--bz-comment-line);
border-radius: 9px;
background: var(--bz-white);
color: var(--bz-text-secondary);
font-size: .78rem;
font-weight: 700;
text-decoration: none;
}
.af-single-comment .comments-pagination .current {
border-color: var(--bz-comment-red);
background: var(--bz-comment-red);
color: var(--bz-white);
}
.af-single-comment .baztab-comments-empty {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 20px;
padding: 17px;
border: 1px dashed var(--bz-border);
border-radius: 12px;
background: var(--bz-info-soft);
}
.af-single-comment .baztab-comments-empty > span {
display: inline-flex;
flex: 0 0 40px;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 11px;
background: var(--bz-info-soft);
color: var(--bz-text-muted);
}
.af-single-comment .baztab-comments-empty strong {
display: block;
margin: 0 0 2px;
color: var(--bz-text);
font-size: .9rem;
}
.af-single-comment .baztab-comments-empty p {
margin: 0;
color: var(--bz-text-muted);
font-size: .78rem;
line-height: 1.75;
}
.af-single-comment .no-comments {
margin: 18px 0 0;
padding: 11px 13px;
border-radius: 9px;
background: var(--bz-surface-muted);
color: var(--bz-text-secondary);
font-size: .8rem;
text-align: center;
}
/* Form */
.af-single-comment #respond,
.af-single-comment .baztab-comment-respond {
position: relative;
display: block;
margin: 25px 0 0;
padding: 21px;
border: 1px solid var(--bz-comment-line);
border-radius: 14px;
background: var(--bz-white);
box-shadow: 0 5px 20px rgba(var(--bz-brand-rgb), 0.04);
transition: border-color .18s ease, box-shadow .18s ease;
}
.af-single-comment #respond:focus-within {
border-color: var(--bz-border);
box-shadow: 0 9px 28px rgba(var(--bz-brand-rgb), 0.065);
}
.af-single-comment #reply-title,
.af-single-comment .comment-reply-title {
display: flex !important;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 17px;
padding: 0 0 13px;
border: 0;
border-bottom: 1px solid var(--bz-brand-100);
background: transparent;
color: var(--bz-comment-ink);
font-size: 1rem;
font-weight: 800;
line-height: 1.7;
}
.af-single-comment #reply-title::before {
content: "";
display: inline-block;
width: 4px;
height: 22px;
border-radius: 3px;
background: var(--bz-comment-red);
}
.af-single-comment #reply-title small {
display: inline-flex;
margin-right: auto;
font-size: .72rem;
font-weight: 700;
}
.af-single-comment #cancel-comment-reply-link {
display: inline-flex;
align-items: center;
min-height: 29px;
padding: 4px 9px;
border-radius: 8px;
background: var(--bz-surface-muted);
color: var(--bz-text-secondary);
text-decoration: none;
}
.af-single-comment .baztab-comment-form,
.af-single-comment #commentform {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 14px;
margin: 0;
}
.af-single-comment #commentform > p,
.af-single-comment .comment-form p {
min-width: 0;
margin: 0;
}
.af-single-comment .comment-form-comment,
.af-single-comment .comment-form-cookies-consent,
.af-single-comment .form-submit,
.af-single-comment .logged-in-as,
.af-single-comment .must-log-in {
grid-column: 1 / -1;
}
.af-single-comment #commentform label {
display: inline-flex;
align-items: center;
gap: 3px;
margin: 0 0 7px;
color: var(--bz-text);
font-size: .79rem;
font-weight: 800;
line-height: 1.6;
}
.af-single-comment #commentform .required {
color: var(--bz-comment-red);
}
.af-single-comment #commentform input:not([type="submit"]):not([type="checkbox"]),
.af-single-comment #commentform textarea {
display: block;
width: 100%;
margin: 0;
border: 1px solid var(--bz-brand-100);
border-radius: 10px;
background: var(--bz-white);
color: var(--bz-text);
font-family: inherit;
font-size: .86rem;
line-height: 1.75;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.af-single-comment #commentform input:not([type="submit"]):not([type="checkbox"]) {
min-height: 47px;
padding: 9px 12px;
}
.af-single-comment #commentform textarea {
min-height: 154px;
padding: 12px 13px;
resize: vertical;
}
.af-single-comment #commentform input::placeholder,
.af-single-comment #commentform textarea::placeholder {
color: var(--bz-text-faint);
opacity: 1;
}
.af-single-comment #commentform input:focus,
.af-single-comment #commentform textarea:focus {
border-color: rgba(var(--bz-accent-rgb), 0.72);
outline: 0;
background: var(--bz-white);
box-shadow: 0 0 0 3px rgba(var(--bz-accent-rgb), 0.09);
}
.af-single-comment #commentform small,
.af-single-comment .baztab-comment-field-help {
display: block;
margin-top: 6px;
color: var(--bz-text-muted);
font-size: .7rem;
line-height: 1.75;
}
.af-single-comment .comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 2px 0;
}
.af-single-comment .comment-form-cookies-consent input[type="checkbox"] {
flex: 0 0 17px;
width: 17px !important;
height: 17px;
margin: 3px 0 0;
accent-color: var(--bz-comment-red);
}
.af-single-comment .comment-form-cookies-consent label {
margin: 0 !important;
color: var(--bz-text-muted) !important;
font-size: .75rem !important;
font-weight: 500 !important;
}
.af-single-comment .logged-in-as,
.af-single-comment .must-log-in {
padding: 10px 12px;
border-radius: 9px;
background: var(--bz-info-soft);
color: var(--bz-text-secondary);
font-size: .78rem;
line-height: 1.8;
}
.af-single-comment .logged-in-as a,
.af-single-comment .must-log-in a {
color: var(--bz-info);
font-weight: 700;
text-decoration: none;
}
.af-single-comment .form-submit {
display: flex;
align-items: center;
justify-content: flex-start;
padding-top: 1px;
}
.af-single-comment #commentform .baztab-comment-submit,
.af-single-comment #commentform button#submit,
.af-single-comment #commentform input#submit {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
width: auto !important;
min-width: 142px;
min-height: 44px;
margin: 0;
padding: 8px 18px;
border: 1px solid transparent;
border-radius: 10px;
background: var(--bz-comment-red) !important;
color: var(--bz-white) !important;
font-family: inherit;
font-size: .83rem;
font-weight: 800;
line-height: 1.5;
opacity: 1 !important;
visibility: visible !important;
cursor: pointer;
box-shadow: 0 7px 18px rgba(var(--bz-accent-rgb), 0.15);
appearance: none;
-webkit-appearance: none;
transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.af-single-comment #commentform .baztab-comment-submit svg {
width: 18px;
height: 18px;
}
.af-single-comment #commentform .baztab-comment-submit:hover,
.af-single-comment #commentform .baztab-comment-submit:focus-visible,
.af-single-comment #commentform button#submit:hover,
.af-single-comment #commentform button#submit:focus-visible,
.af-single-comment #commentform input#submit:hover,
.af-single-comment #commentform input#submit:focus-visible {
background: var(--bz-comment-red-dark) !important;
color: var(--bz-white) !important;
outline: 0;
transform: translateY(-1px);
box-shadow: 0 9px 22px rgba(var(--bz-accent-rgb), 0.21);
}
.af-single-comment #commentform .baztab-comment-submit:disabled,
.af-single-comment #commentform button#submit:disabled,
.af-single-comment #commentform input#submit:disabled {
background: var(--bz-accent-500) !important;
opacity: .75 !important;
cursor: wait;
transform: none;
box-shadow: none;
}
.af-single-comment #comment-status {
display: none;
position: static;
width: auto;
height: auto;
margin: 12px 0 0;
padding: 11px 13px;
border: 1px solid var(--bz-brand-100);
border-radius: 9px;
background: var(--bz-info-soft);
color: var(--bz-text);
outline: none;
}
.af-single-comment #comment-status[hidden] {
display: none !important;
}
.af-single-comment #comment-status p {
margin: 0;
font-size: .78rem;
line-height: 1.85;
text-align: right;
}
.af-single-comment #comment-status.is-loading {
border-color: var(--bz-info-border);
background: var(--bz-info-soft);
color: var(--bz-info);
}
.af-single-comment #comment-status.is-success {
border-color: var(--bz-success-border);
background: var(--bz-success-soft);
color: var(--bz-success);
}
.af-single-comment #comment-status.is-error {
border-color: var(--bz-accent-200);
background: var(--bz-accent-50);
color: var(--bz-danger);
}
@media (max-width: 767.98px) {
.af-single-comment {
margin-top: 26px;
}
.af-single-comment .baztab-comments-header {
align-items: flex-start;
gap: 13px;
padding-bottom: 14px;
}
.af-single-comment .baztab-comments-heading-icon {
flex-basis: 40px;
width: 40px;
height: 40px;
border-radius: 11px;
}
.af-single-comment .baztab-comments-heading p {
display: none;
}
.af-single-comment .baztab-comments-header-actions {
gap: 6px;
}
.af-single-comment .baztab-comments-count {
min-height: 36px;
padding: 6px 10px;
font-size: .72rem;
}
.af-single-comment .baztab-comments-write {
min-width: 40px;
min-height: 40px;
padding: 8px;
font-size: 0;
}
.af-single-comment .baztab-comments-write svg {
width: 19px;
height: 19px;
}
.af-single-comment .baztab-comment-guidelines {
margin-bottom: 17px;
padding: 10px 11px;
}
.af-single-comment .baztab-comment-guidelines p {
font-size: .74rem;
line-height: 1.85;
}
.af-single-comment .baztab-comment-card {
padding: 14px 14px 13px;
border-radius: 11px;
}
.af-single-comment .baztab-comment-head {
align-items: flex-start;
gap: 10px;
}
.af-single-comment .baztab-comment-avatar,
.af-single-comment .baztab-comment-avatar img.avatar,
.af-single-comment .comment-author img.avatar {
flex-basis: 40px;
width: 40px !important;
height: 40px !important;
}
.af-single-comment .baztab-comment-meta {
display: block;
min-width: 0;
float: none;
width: auto;
}
.af-single-comment .baztab-comment-author,
.af-single-comment .baztab-comment-author a {
font-size: .86rem;
}
.af-single-comment .baztab-comment-date {
width: fit-content;
max-width: 100%;
margin-top: 4px;
padding: 3px 7px;
font-size: .67rem;
}
.af-single-comment .baztab-comment-content,
.af-single-comment .comment-content,
.af-single-comment .comment-body p {
font-size: .87rem;
line-height: 2;
}
.af-single-comment .comment-list .children {
margin-right: 11px;
padding-right: 11px;
}
.af-single-comment .comment-list .children::before {
width: 1px;
}
.af-single-comment .cld-like-dislike-wrap a,
.af-single-comment .cld-like-dislike-wrap button,
.af-single-comment .cld-like-trigger,
.af-single-comment .cld-dislike-trigger {
min-width: 58px;
min-height: 36px;
padding: 5px 8px !important;
}
.af-single-comment #respond,
.af-single-comment .baztab-comment-respond {
margin-top: 20px;
padding: 16px;
border-radius: 12px;
}
.af-single-comment #reply-title,
.af-single-comment .comment-reply-title {
margin-bottom: 14px;
padding-bottom: 11px;
font-size: .93rem;
}
.af-single-comment .baztab-comment-form,
.af-single-comment #commentform {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.af-single-comment .comment-form-author,
.af-single-comment .comment-form-email,
.af-single-comment .comment-form-comment,
.af-single-comment .comment-form-cookies-consent,
.af-single-comment .form-submit,
.af-single-comment .logged-in-as,
.af-single-comment .must-log-in {
grid-column: 1;
}
.af-single-comment #commentform input:not([type="submit"]):not([type="checkbox"]) {
min-height: 46px;
}
.af-single-comment #commentform textarea {
min-height: 142px;
}
.af-single-comment .form-submit {
display: block;
}
.af-single-comment #commentform .baztab-comment-submit,
.af-single-comment #commentform button#submit,
.af-single-comment #commentform input#submit {
width: 100% !important;
min-height: 46px;
}
}
@media (max-width: 420px) {
.af-single-comment .baztab-comments-heading {
gap: 9px;
}
.af-single-comment .baztab-comments-heading h2,
.af-single-comment #baztab-comments-title {
font-size: .99rem;
}
.af-single-comment .baztab-comments-count {
padding-inline: 8px;
}
.af-single-comment .baztab-comment-badge {
display: none;
}
.af-single-comment .baztab-comment-card {
padding-inline: 12px;
}
.af-single-comment .comment-list .children {
margin-right: 6px;
padding-right: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.af-single-comment *,
.af-single-comment *::before,
.af-single-comment *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
/* 6.2.0 form-layout hardening: flex is more resilient than grid against
legacy form rules and third-party style optimizers. */
.af-single-comment .baztab-comment-form,
.af-single-comment #commentform {
display: flex !important;
flex-wrap: wrap;
align-items: flex-start;
gap: 14px;
}
.af-single-comment #commentform > p,
.af-single-comment .comment-form p {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
.af-single-comment #commentform .comment-form-author,
.af-single-comment #commentform .comment-form-email {
flex: 1 1 calc(50% - 7px);
width: calc(50% - 7px);
max-width: calc(50% - 7px);
}
.af-single-comment #commentform .comment-form-comment,
.af-single-comment #commentform .comment-form-cookies-consent,
.af-single-comment #commentform .form-submit,
.af-single-comment #commentform .logged-in-as,
.af-single-comment #commentform .must-log-in {
flex-basis: 100%;
width: 100%;
max-width: 100%;
}
.af-single-comment #commentform .comment-form-comment textarea {
width: 100% !important;
max-width: 100% !important;
}
@media (max-width: 767.98px) {
.af-single-comment #commentform .comment-form-author,
.af-single-comment #commentform .comment-form-email {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
}
}
/* 6.3.0 — final palette normalization and accessible interaction states */
body {
color: var(--bz-text);
background-color: var(--bz-surface);
}
a { color: var(--bz-link); }
a:hover { color: var(--bz-link-hover); }
:where(a, button, input, select, textarea, [role="button"]):focus-visible {
outline: 3px solid rgba(var(--bz-brand-rgb), .22);
outline-offset: 2px;
}
:where(input, select, textarea)::placeholder {
color: var(--bz-text-faint);
opacity: 1;
}
hr { border-color: var(--bz-border); }
/* =========================================================
6.3.1 — Full-width page share header
- Replaces the legacy empty grid lists on standard pages.
- Keeps the shared dropdown component, but gives pages a
stable, responsive and viewport-safe top action bar.
========================================================= */
.af-page-content-shell {
overflow: visible;
}
.af-page-article {
overflow: visible;
}
.af-page-header {
position: relative;
margin: 0 0 24px;
overflow: visible;
}
.af-page-header .af-page-title {
margin: 0;
}
.af-page-top-actions {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 58px;
margin: 18px 0 0;
padding: 10px 0;
overflow: visible;
border-top: 1px solid var(--bz-border);
border-bottom: 1px solid var(--bz-border);
}
.af-page-top-actions::before {
content: "";
position: absolute;
top: -1px;
right: 0;
width: 54px;
height: 2px;
background: var(--bz-accent-600);
border-radius: 999px;
}
.af-page-top-actions .af-share-menu {
position: relative;
display: inline-flex;
margin: 0;
overflow: visible;
}
.af-page-top-actions .af-share-toggle {
min-height: 42px;
padding: 9px 14px;
border-radius: 10px;
font-size: .8rem;
}
.af-page-top-actions .af-share-dropdown {
right: 0;
left: auto;
width: min(300px, calc(100vw - 32px));
min-width: min(300px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
}
.af-page-top-actions .af-share-dropdown .af-share-item {
width: 100%;
}
@media (max-width: 767.98px) {
.af-page-header {
margin-bottom: 20px;
}
.af-page-top-actions {
min-height: 0;
margin-top: 14px;
padding: 10px 0;
}
.af-page-top-actions .af-share-menu,
.af-page-top-actions .af-share-toggle {
width: 100%;
min-width: 0;
}
.af-page-top-actions .af-share-toggle {
min-height: 44px;
justify-content: center;
}
.af-page-top-actions .af-share-dropdown {
right: 0;
left: 0;
width: 100%;
min-width: 100%;
max-width: 100%;
}
}
@media (max-width: 359.98px) {
.af-page-top-actions .af-share-toggle {
gap: 6px;
padding-inline: 10px;
font-size: .74rem;
}
.af-page-top-actions .af-share-dropdown {
padding: 7px;
border-radius: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.af-page-top-actions .af-share-toggle,
.af-page-top-actions .af-share-dropdown,
.af-page-top-actions .af-share-item {
transition: none !important;
animation: none !important;
}
}
/* =========================================================
6.3.2 — Mobile footer utility cards
- Keeps the four utility links in the existing 2×2 grid.
- Matches the framed visual language of footer service headings.
- Mobile-only; desktop footer and link destinations remain unchanged.
========================================================= */
@media (max-width: 767.98px) {
footer .af-footer-first {
gap: 8px !important;
max-width: 480px;
margin-bottom: 14px;
}
footer .af-footer-first > li:not(:first-child) {
min-width: 0;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
footer .af-footer-first > li:not(:first-child) > a {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
height: 100%;
margin: 0;
padding: 8px 7px;
color: var(--bz-brand-900) !important;
background: var(--bz-white) !important;
border: 1px solid var(--bz-brand-100) !important;
border-top: 3px solid var(--bz-brand-800) !important;
border-radius: 8px !important;
box-shadow: 0 2px 7px rgba(var(--bz-brand-rgb), 0.05) !important;
font-size: .84rem;
font-weight: 700;
line-height: 1.45;
text-align: center;
text-decoration: none;
overflow-wrap: anywhere;
transform: none !important;
transition: color .16s ease, background-color .16s ease,
border-color .16s ease, box-shadow .16s ease,
transform .16s ease !important;
}
footer .af-footer-first > li:not(:first-child) > a:hover,
footer .af-footer-first > li:not(:first-child) > a:focus,
footer .af-footer-first > li:not(:first-child) > a:focus-visible,
footer .af-footer-first > li:not(:first-child) > a:active {
color: var(--bz-brand-800) !important;
background: var(--bz-info-soft) !important;
border-color: var(--bz-info-border) !important;
border-top-color: var(--bz-brand-800) !important;
box-shadow: 0 4px 10px rgba(var(--bz-brand-rgb), 0.08) !important;
outline: none;
transform: translateY(-1px) !important;
}
footer .af-footer-first > li:not(:first-child) > a:focus-visible {
box-shadow: 0 0 0 3px rgba(var(--bz-brand-rgb), 0.12),
0 4px 10px rgba(var(--bz-brand-rgb), 0.08) !important;
}
}
@media (max-width: 359.98px) {
footer .af-footer-first {
gap: 6px !important;
}
footer .af-footer-first > li:not(:first-child) > a {
min-height: 42px;
padding-right: 4px;
padding-left: 4px;
font-size: .77rem;
}
}
@media (prefers-reduced-motion: reduce) {
footer .af-footer-first > li:not(:first-child) > a {
transition: none !important;
}
}
/* 6.3.4 — Restored 6.3.2 quote styling; removed only the full dark outline. */
/* =========================================================
6.3.5 — Mobile footer hierarchy refinement
- Preserves the existing logo, social icon sizes and spacing.
- Unifies the four utility links into one 2×2 surface.
- Stacks footer service groups as calm full-width sections.
- Simplifies the CTA and copyright treatment.
- Mobile-only; desktop footer and link behavior stay unchanged.
========================================================= */
@media (max-width: 767.98px) {
/* Primary CTA: keep it visually dominant, but calmer than the old pill. */
footer .af-footer-first > li:first-child {
margin: 0 0 12px !important;
}
footer .af-footer-first > li:first-child > a,
footer .af-footer-public-story {
min-height: 46px !important;
padding: 10px 16px !important;
background-image: linear-gradient(100deg, var(--bz-social-telegram), var(--bz-success)) !important;
border: 0 !important;
border-radius: 12px !important;
box-shadow: 0 3px 10px rgba(var(--bz-info-rgb), 0.12) !important;
text-shadow: none !important;
font-size: .92rem !important;
font-weight: 800 !important;
line-height: 1.5 !important;
}
footer .af-footer-first > li:first-child > a:hover,
footer .af-footer-first > li:first-child > a:focus-visible {
filter: saturate(1.03);
box-shadow: 0 5px 13px rgba(var(--bz-info-rgb), 0.16) !important;
transform: translateY(-1px) !important;
outline: none;
}
/* Utility links: one shared card, not four competing cards. */
footer .af-footer-first {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 !important;
max-width: 480px;
margin-bottom: 18px !important;
}
footer .af-footer-first > li:not(:first-child) {
position: relative;
min-width: 0;
margin: 0 !important;
background: var(--bz-white) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
footer .af-footer-first > li:nth-child(2),
footer .af-footer-first > li:nth-child(3) {
border-top: 1px solid var(--bz-border) !important;
border-bottom: 1px solid var(--bz-border) !important;
}
footer .af-footer-first > li:nth-child(4),
footer .af-footer-first > li:nth-child(5) {
border-bottom: 1px solid var(--bz-border) !important;
}
footer .af-footer-first > li:nth-child(2),
footer .af-footer-first > li:nth-child(4) {
border-right: 1px solid var(--bz-border) !important;
border-left: 1px solid var(--bz-border) !important;
}
footer .af-footer-first > li:nth-child(3),
footer .af-footer-first > li:nth-child(5) {
border-left: 1px solid var(--bz-border) !important;
}
footer .af-footer-first > li:nth-child(2) {
border-top-right-radius: 10px !important;
}
footer .af-footer-first > li:nth-child(3) {
border-top-left-radius: 10px !important;
}
footer .af-footer-first > li:nth-child(4) {
border-bottom-right-radius: 10px !important;
}
footer .af-footer-first > li:nth-child(5) {
border-bottom-left-radius: 10px !important;
}
footer .af-footer-first > li:not(:first-child)::before,
footer .af-footer-first > li:not(:first-child)::after,
footer .af-footer-first > li:not(:first-child) > a::before,
footer .af-footer-first > li:not(:first-child) > a::after {
content: none !important;
display: none !important;
}
footer .af-footer-first > li:not(:first-child) > a {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
margin: 0 !important;
padding: 8px 10px !important;
color: var(--bz-brand-800) !important;
background: transparent !important;
border: 0 !important;
border-radius: inherit !important;
box-shadow: none !important;
font-size: .84rem !important;
font-weight: 700 !important;
line-height: 1.5 !important;
text-align: center;
text-decoration: none;
transform: none !important;
transition: color .15s ease, background-color .15s ease !important;
}
footer .af-footer-first > li:not(:first-child) > a:hover,
footer .af-footer-first > li:not(:first-child) > a:focus,
footer .af-footer-first > li:not(:first-child) > a:focus-visible,
footer .af-footer-first > li:not(:first-child) > a:active {
color: var(--bz-brand-900) !important;
background: var(--bz-brand-50) !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
outline: none;
}
footer .af-footer-first > li:not(:first-child) > a:focus-visible {
box-shadow: inset 0 0 0 2px rgba(var(--bz-brand-rgb), 0.18) !important;
}
/* Keep logo, social icon dimensions and their spacing exactly as before. */
/* Service groups: full-width editorial sections instead of three small cards. */
footer > .container > .row > .row.col-12.col-lg-7 {
display: block !important;
width: 100% !important;
margin: 4px 0 0 !important;
padding: 0 !important;
}
footer .row.col-lg-7 > .col-4 {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 16px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
footer .row.col-lg-7 h4 {
position: relative;
display: flex !important;
align-items: center;
justify-content: flex-start !important;
min-height: 42px !important;
margin: 0 !important;
padding: 8px 13px 8px 8px !important;
color: var(--bz-brand-900) !important;
background: transparent !important;
border: 0 !important;
border-right: 3px solid var(--bz-brand-800) !important;
border-bottom: 1px solid var(--bz-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: .96rem !important;
font-weight: 800 !important;
line-height: 1.5 !important;
text-align: right !important;
}
footer .row.col-lg-7 h4::before,
footer .row.col-lg-7 h4::after {
content: none !important;
display: none !important;
}
footer .row.col-lg-7 .af-footer-ul {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 18px;
row-gap: 0;
width: 100%;
margin: 0 !important;
padding: 6px 13px 0 !important;
}
footer .row.col-lg-7 .af-footer-ul li {
min-width: 0;
min-height: 38px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: .8rem !important;
line-height: 1.55 !important;
text-align: right !important;
}
footer .row.col-lg-7 .af-footer-ul li a {
display: flex !important;
align-items: center;
justify-content: flex-start !important;
width: 100%;
min-height: 38px !important;
padding: 6px 0 !important;
color: var(--bz-text-secondary) !important;
line-height: 1.55 !important;
text-align: right !important;
text-decoration: none;
overflow-wrap: anywhere;
transform: none !important;
}
footer .row.col-lg-7 .af-footer-ul li a::before {
content: "";
flex: 0 0 auto;
width: 4px;
height: 4px;
margin-left: 7px;
background: var(--bz-brand-700);
border-radius: 50%;
opacity: .55;
}
footer .row.col-lg-7 .af-footer-ul li a:hover,
footer .row.col-lg-7 .af-footer-ul li a:focus-visible {
color: var(--bz-accent-700) !important;
transform: none !important;
outline: none;
}
footer .row.col-lg-7 .current-menu-item > a::after {
content: none !important;
display: none !important;
}
/* Copyright: a quiet footer baseline, not another card. */
footer .af-footer-bottom {
width: 100%;
margin: 3px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-top: 1px solid var(--bz-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
text-align: center !important;
}
footer .af-footer-bottom .row {
margin: 0 !important;
padding: 13px 8px 16px !important;
}
footer .af-footer-bottom span,
footer .af-footer-bottom .af-footer-copyright {
color: var(--bz-text-muted) !important;
font-size: .76rem !important;
line-height: 1.9 !important;
text-align: center !important;
}
}
@media (max-width: 359.98px) {
footer .af-footer-first > li:not(:first-child) > a {
min-height: 42px;
padding-right: 6px !important;
padding-left: 6px !important;
font-size: .77rem !important;
}
footer .row.col-lg-7 .af-footer-ul {
column-gap: 12px;
padding-right: 9px !important;
padding-left: 9px !important;
}
footer .row.col-lg-7 .af-footer-ul li,
footer .row.col-lg-7 .af-footer-ul li a {
font-size: .74rem !important;
}
}
@media (prefers-reduced-motion: reduce) {
footer .af-footer-first > li:first-child > a,
footer .af-footer-first > li:not(:first-child) > a,
footer .row.col-lg-7 .af-footer-ul li a {
transition: none !important;
}
}
/* =========================================================
6.3.7 — Mobile footer shared service grid
- Keeps the approved 2×2 utility-link surface unchanged.
- Restores the three-column service layout on mobile.
- Places all three service columns inside one shared surface,
visually aligned with the utility-link block above.
- Restores the previous pill-style public-story CTA.
- Preserves logo, social icons, spacing and desktop footer.
========================================================= */
@media (max-width: 767.98px) {
/* Restore the previous, more expressive public-story button. */
footer .af-footer-first > li:first-child {
margin: 0 0 12px !important;
}
footer .af-footer-first > li:first-child > a,
footer .af-footer-public-story {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 48px !important;
margin: 0 !important;
padding: 11px 16px !important;
color: var(--bz-white) !important;
background-image: linear-gradient(to left, var(--bz-social-telegram), var(--bz-social-whatsapp)) !important;
border: 0 !important;
border-radius: 24px !important;
box-shadow: 0 4px 12px rgba(var(--bz-info-rgb), .14) !important;
text-shadow: 0 0 13px rgba(var(--bz-white-rgb), .72) !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.5 !important;
text-align: center !important;
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
footer .af-footer-first > li:first-child > a:hover,
footer .af-footer-first > li:first-child > a:focus,
footer .af-footer-first > li:first-child > a:focus-visible {
color: var(--bz-white) !important;
filter: saturate(1.06) brightness(1.01);
box-shadow: 0 7px 17px rgba(var(--bz-info-rgb), .2) !important;
transform: translateY(-1px) !important;
outline: none;
}
footer .af-footer-first > li:first-child svg {
flex: 0 0 auto;
width: 21px !important;
height: 21px !important;
margin-left: 8px !important;
}
/* Three service groups: restore the previous three-column order,
but use one calm shared card, like the utility links above. */
footer > .container > .row > .row.col-12.col-lg-7 {
box-sizing: border-box;
display: flex !important;
flex-flow: row nowrap !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
margin: 4px 0 18px !important;
padding: 0 !important;
background: var(--bz-white) !important;
border: 1px solid var(--bz-border) !important;
border-radius: 10px !important;
box-shadow: 0 2px 7px rgba(var(--bz-brand-rgb), .045) !important;
overflow: hidden !important;
}
footer .row.col-lg-7 > .col-4 {
box-sizing: border-box;
display: flex !important;
flex: 0 0 33.333333% !important;
flex-direction: column !important;
width: 33.333333% !important;
max-width: 33.333333% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
footer .row.col-lg-7 > .col-4:not(:last-child) {
border-left: 1px solid var(--bz-border) !important;
}
footer .row.col-lg-7 h4 {
position: relative;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 43px !important;
margin: 0 !important;
padding: 8px 5px !important;
color: var(--bz-brand-900) !important;
background: var(--bz-brand-50) !important;
border: 0 !important;
border-bottom: 1px solid var(--bz-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: .82rem !important;
font-weight: 800 !important;
line-height: 1.45 !important;
text-align: center !important;
overflow-wrap: anywhere;
}
footer .row.col-lg-7 h4::before,
footer .row.col-lg-7 h4::after {
content: none !important;
display: none !important;
}
footer .row.col-lg-7 .af-footer-ul {
display: block !important;
flex: 1 1 auto;
width: 100% !important;
margin: 0 !important;
padding: 4px 8px 8px !important;
}
footer .row.col-lg-7 .af-footer-ul li {
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 35px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--bz-border) !important;
list-style: none !important;
font-size: .72rem !important;
line-height: 1.5 !important;
text-align: center !important;
}
footer .row.col-lg-7 .af-footer-ul li:last-child {
border-bottom: 0 !important;
}
footer .row.col-lg-7 .af-footer-ul li a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 35px !important;
margin: 0 !important;
padding: 5px 2px !important;
color: var(--bz-text-secondary) !important;
background: transparent !important;
border: 0 !important;
border-radius: 5px !important;
box-shadow: none !important;
font-size: inherit !important;
font-weight: 500 !important;
line-height: 1.5 !important;
text-align: center !important;
text-decoration: none !important;
overflow-wrap: anywhere;
transform: none !important;
transition: color .15s ease, background-color .15s ease !important;
}
footer .row.col-lg-7 .af-footer-ul li a::before,
footer .row.col-lg-7 .af-footer-ul li a::after,
footer .row.col-lg-7 .current-menu-item > a::after {
content: none !important;
display: none !important;
}
footer .row.col-lg-7 .af-footer-ul li a:hover,
footer .row.col-lg-7 .af-footer-ul li a:focus,
footer .row.col-lg-7 .af-footer-ul li a:focus-visible,
footer .row.col-lg-7 .current-menu-item > a {
color: var(--bz-brand-900) !important;
background: var(--bz-brand-50) !important;
font-weight: 700 !important;
transform: none !important;
outline: none;
}
footer .row.col-lg-7 .af-footer-ul li a:focus-visible {
box-shadow: inset 0 0 0 2px rgba(var(--bz-brand-rgb), .14) !important;
}
}
@media (max-width: 359.98px) {
footer .row.col-lg-7 h4 {
min-height: 41px !important;
padding-right: 3px !important;
padding-left: 3px !important;
font-size: .74rem !important;
}
footer .row.col-lg-7 .af-footer-ul {
padding-right: 5px !important;
padding-left: 5px !important;
}
footer .row.col-lg-7 .af-footer-ul li,
footer .row.col-lg-7 .af-footer-ul li a {
min-height: 33px !important;
font-size: .66rem !important;
line-height: 1.45 !important;
}
}
@media (prefers-reduced-motion: reduce) {
footer .af-footer-first > li:first-child > a,
footer .row.col-lg-7 .af-footer-ul li a {
transition: none !important;
}
}
/* ============================================================
6.3.8 — Chrome Android “Desktop site” layout compatibility
Chrome on phones commonly exposes an approximately 980px CSS viewport
in desktop-request mode. Bootstrap's md grid is already active there,
so the theme now switches to its desktop rules at 900px as well.
This bridge supplies the remaining Bootstrap lg behaviors between
900px and 991.98px and prevents a mixed mobile/desktop homepage.
============================================================ */
@media (min-width: 900px) and (max-width: 991.98px) {
.navbar-expand-lg {
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-lg .navbar-nav {
flex-direction: row;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-lg .navbar-nav-scroll {
overflow: visible;
}
.navbar-expand-lg .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
.navbar-expand-lg .navbar-toggler {
display: none;
}
footer > .container > .row > .af-footer-contact.col-lg-5 {
flex: 0 0 auto;
width: 41.66666667%;
max-width: 41.66666667%;
}
footer > .container > .row > .row.col-lg-7 {
flex: 0 0 auto;
width: 58.33333333%;
max-width: 58.33333333%;
}
}
/* ============================================================
* 6.3.11 — Homepage media composition exchange
* Photo reports now follow the Baztab TV hierarchy, while the
* newspaper/front-page section uses the former photo-report grid.
* ============================================================ */
/* 6.3.12 — Restore the former Pishkhan world-map artwork for photo reports. */
.af-picture-video-layout {
background-image: url('assets/imgs/pishkhanbg2.jpg');
background-position: center center;
}
.af-picture-video-layout .af-video-main img,
.af-picture-video-layout .af-video-img img {
aspect-ratio: 16 / 10;
object-fit: cover;
}
.af-picture-video-layout .af-photo-video-hover {
align-items: center;
display: flex;
justify-content: center;
overflow: hidden;
}
.af-picture-video-layout .af-photo-video-hover svg {
height: 52px;
width: 52px;
}
.af-photo-video-item .af-video-img {
position: relative;
}
.af-photo-video-item .af-video-img > a {
display: block;
position: relative;
}
.af-photo-media-icon--small {
align-items: center;
background: rgba(var(--bz-black-rgb), 0.62);
border-radius: 50%;
color: var(--bz-white);
display: inline-flex;
height: 34px;
justify-content: center;
position: absolute;
right: 8px;
top: 8px;
width: 34px;
}
.af-photo-media-icon--small svg {
height: 18px;
width: 18px;
}
.af-pishkhan-picture-service {
margin-bottom: 18px;
padding: 15px 0 10px;
}
.af-pishkhan-picture-service .container-fluid {
padding-left: 12px;
padding-right: 12px;
}
.af-pishkhan-picture-service .af-head-title {
margin: 12px 0 22px;
}
.af-pishkhan-picture-service .af-picrure-content {
float: none;
margin-bottom: 12px;
width: 100%;
}
.af-pishkhan-picture-service .af-picrure-content img {
aspect-ratio: 16 / 10;
object-fit: cover;
}
.af-pishkhan-picture-service .af-picrure-content h3 {
float: none;
margin: 9px 0 0;
width: 100%;
}
.af-pishkhan-picture-service .af-picture-big h3 {
font-size: 1.2rem;
line-height: 1.75;
padding: 18px 20px;
}
.af-pishkhan-picture-service .af-picture-small h3 {
font-size: 0.86rem;
line-height: 1.7;
margin-bottom: 8px;
}
.af-pishkhan-picture-service .af-picture-small h3 a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.af-pishkhan-picture-service .af-picture-hover svg {
background: rgba(var(--bz-black-rgb), 0.5);
border-radius: 7px;
box-sizing: content-box;
padding: 6px;
}
@media (max-width: 899.98px) {
.af-picture-video-layout .af-photo-video-hover {
top: 0;
}
.af-pishkhan-picture-service .af-picture-big h3 {
font-size: 1rem;
line-height: 1.65;
padding: 14px 15px;
}
.af-pishkhan-picture-service .af-picture-small h3 {
font-size: 0.82rem;
}
}
/* ============================================================
* 6.3.13 — Modern media actions for Baztab TV and photo reports
* Shared, responsive play/camera controls are anchored to an
* explicit image frame so they remain centered on every viewport.
* ============================================================ */
.af-video-index .af-video-main > a,
.af-video-index .af-video-img > a {
display: block;
position: relative;
text-decoration: none;
}
.af-media-frame {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border-radius: 8px;
background: var(--bz-brand-900);
isolation: isolate;
}
.af-media-frame img {
display: block;
width: 100%;
height: auto;
margin: 0;
border-radius: inherit;
object-fit: cover;
transition: transform .28s ease, filter .28s ease;
}
.af-media-frame::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(var(--bz-black-rgb), .02), rgba(var(--bz-black-rgb), .16));
pointer-events: none;
}
.af-media-action {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 68px;
height: 68px;
margin: 0;
padding: 0;
color: var(--bz-white);
border: 1px solid rgba(var(--bz-white-rgb), .58);
border-radius: 50%;
box-shadow: 0 10px 28px rgba(var(--bz-black-rgb), .28), inset 0 1px 0 rgba(var(--bz-white-rgb), .24);
transform: translate(-50%, -50%);
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
pointer-events: none;
-webkit-backdrop-filter: blur(8px) saturate(1.08);
backdrop-filter: blur(8px) saturate(1.08);
}
.af-media-action--play {
background: rgba(var(--bz-accent-rgb), .9);
}
.af-media-action--camera {
background: rgba(var(--bz-brand-rgb), .88);
}
.af-media-action__icon {
display: block;
width: 34px;
height: 34px;
overflow: visible;
}
.af-media-action--play .af-media-action__icon {
margin-left: 3px;
}
.af-media-action--compact {
width: 38px;
height: 38px;
border-width: 1px;
box-shadow: 0 5px 14px rgba(var(--bz-black-rgb), .24), inset 0 1px 0 rgba(var(--bz-white-rgb), .2);
}
.af-media-action--compact .af-media-action__icon {
width: 21px;
height: 21px;
}
.af-video-index a:hover .af-media-frame img,
.af-video-index a:focus-visible .af-media-frame img {
filter: brightness(.92);
transform: scale(1.018);
}
.af-video-index a:hover .af-media-action,
.af-video-index a:focus-visible .af-media-action {
border-color: rgba(var(--bz-white-rgb), .82);
box-shadow: 0 13px 32px rgba(var(--bz-black-rgb), .34), inset 0 1px 0 rgba(var(--bz-white-rgb), .28);
transform: translate(-50%, -50%) scale(1.06);
}
.af-video-index a:focus-visible .af-media-frame {
outline: 3px solid rgba(var(--bz-white-rgb), .92);
outline-offset: 3px;
}
/* Neutralize legacy absolute overlays; the new icon is owned by the image frame. */
.af-video-index .af-video-hover,
.af-picture-video-layout .af-photo-video-hover,
.af-photo-media-icon--small {
display: none !important;
}
.af-video-index .af-video-main img,
.af-video-index .af-video-img img,
.af-picture-video-layout .af-video-main img,
.af-picture-video-layout .af-video-img img {
border-radius: 8px;
}
@media (max-width: 899.98px) {
.af-media-action--featured {
width: 58px;
height: 58px;
}
.af-media-action--featured .af-media-action__icon {
width: 29px;
height: 29px;
}
.af-media-action--compact {
width: 36px;
height: 36px;
}
.af-media-action--compact .af-media-action__icon {
width: 20px;
height: 20px;
}
/* Keep the icon tied to the image even when the headline moves below it. */
.af-video-index .af-video-main h3,
.af-picture-video-layout .af-video-main h3 {
position: relative;
z-index: auto;
}
}
@media (max-width: 575.98px) {
.af-media-frame {
border-radius: 7px;
}
.af-media-action--featured {
width: 54px;
height: 54px;
}
.af-media-action--featured .af-media-action__icon {
width: 27px;
height: 27px;
}
.af-media-action--compact {
width: 34px;
height: 34px;
}
.af-media-action--compact .af-media-action__icon {
width: 18px;
height: 18px;
}
}
@media (max-width: 359.98px) {
.af-media-action--featured {
width: 50px;
height: 50px;
}
.af-media-action--featured .af-media-action__icon {
width: 25px;
height: 25px;
}
.af-media-action--compact {
width: 30px;
height: 30px;
}
.af-media-action--compact .af-media-action__icon {
width: 17px;
height: 17px;
}
}
@media (prefers-reduced-motion: reduce) {
.af-media-frame img,
.af-media-action {
transition: none;
}
}
/* ============================================================
* 6.3.15 — Editorial homepage lead composition
* Rebuilds only the above-the-fold homepage hierarchy while preserving
* the existing WordPress queries, ACF options and popular-news widget.
* ============================================================ */
.af-home-top {
width: 100%;
max-width: 1220px;
margin: 0 auto 22px;
padding: 8px 12px 0;
}
.af-home-top-layout {
display: grid;
grid-template-columns: minmax(230px, 0.31fr) minmax(0, 1fr);
gap: 12px;
align-items: stretch;
direction: ltr;
}
.af-home-top-sidebar,
.af-home-top-editorial {
min-width: 0;
direction: rtl;
}
.af-home-top-editorial > .row,
.af-home-top-editorial > .af-top-header-ads {
margin-right: 0;
margin-left: 0;
}
.af-home-top-editorial .af-top-header-ads:empty {
display: none;
}
.af-home-lead.af-slide-top {
height: 100%;
margin: 0;
padding: 12px;
background: var(--bz-white);
border: 1px solid var(--bz-border);
border-radius: 7px;
box-shadow: 0 3px 12px rgba(var(--bz-brand-rgb), 0.07);
}
.af-home-lead-grid {
display: grid;
grid-template-columns: minmax(225px, 0.92fr) minmax(0, 1.86fr);
grid-template-rows: minmax(288px, 1fr) 112px;
grid-template-areas:
"secondary hero"
"secondary bottom";
gap: 12px;
min-width: 0;
direction: ltr;
}
.af-home-lead-card {
position: relative;
min-width: 0;
margin: 0;
direction: rtl;
}
.af-home-lead-card a {
color: inherit;
}
.af-home-lead-media,
.af-home-lead-media > a {
display: block;
position: relative;
width: 100%;
height: 100%;
min-width: 0;
overflow: hidden;
}
.af-home-lead-media img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
transition: transform .35s ease;
}
.af-home-lead-card:hover .af-home-lead-media img {
transform: scale(1.025);
}
.af-home-lead-category {
position: absolute;
z-index: 3;
top: 10px;
right: 10px;
display: inline-flex;
max-width: calc(100% - 20px);
}
.af-home-lead-category > a,
.af-home-lead-category > a > span {
display: inline-flex;
align-items: center;
min-height: 24px;
margin: 0;
padding: 3px 9px;
color: var(--bz-white) !important;
background: var(--bz-accent-600);
border-radius: 4px;
font-size: .72rem;
font-weight: 700;
line-height: 1.35;
}
.af-home-lead-category > a {
padding: 0;
background: transparent;
}
.af-home-lead-card--hero {
grid-area: hero;
min-height: 288px;
overflow: hidden;
background: var(--bz-brand-900);
border-radius: 5px;
}
.af-home-lead-card--hero .af-home-lead-media {
position: absolute;
inset: 0;
}
.af-home-lead-shade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(var(--bz-black-rgb), 0.04) 20%, rgba(var(--bz-black-rgb), 0.84) 100%);
pointer-events: none;
transition: background .3s ease;
}
.af-home-lead-content {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
padding: 28px 24px 20px;
color: var(--bz-white);
transition: transform .3s ease;
}
.af-home-lead-overtitle {
display: inline-block;
margin-bottom: 7px;
color: rgba(var(--bz-white-rgb), 0.9);
font-size: .82rem;
font-weight: 600;
}
.af-home-lead-card--hero h2 {
max-width: 92%;
margin: 0;
font-size: clamp(1.45rem, 2.25vw, 2.05rem);
font-weight: 900;
line-height: 1.55;
text-shadow:
0 1px 2px rgba(var(--bz-black-rgb), 0.94),
0 3px 14px rgba(var(--bz-black-rgb), 0.58);
}
.af-home-lead-card--hero h2 a {
display: -webkit-box;
overflow: hidden;
color: var(--bz-white);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.af-home-lead-card--hero p {
display: -webkit-box;
max-width: 90%;
max-height: 0;
margin: 0;
overflow: hidden;
color: rgba(var(--bz-white-rgb), 0.92);
font-size: .9rem;
line-height: 1.8;
opacity: 0;
transform: translateY(8px);
transition: max-height .32s ease, margin .32s ease, opacity .24s ease, transform .32s ease;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@media (hover: hover) and (pointer: fine) {
.af-home-lead-card--hero:hover .af-home-lead-content {
transform: translateY(-4px);
}
.af-home-lead-card--hero:hover .af-home-lead-shade {
background: linear-gradient(180deg, rgba(var(--bz-black-rgb), 0.08) 16%, rgba(var(--bz-black-rgb), 0.9) 100%);
}
.af-home-lead-card--hero:hover p {
max-height: 4.2em;
margin-top: 8px;
opacity: 1;
transform: translateY(0);
}
}
.af-home-lead-card--hero:focus-within .af-home-lead-content {
transform: translateY(-4px);
}
.af-home-lead-card--hero:focus-within p {
max-height: 4.2em;
margin-top: 8px;
opacity: 1;
transform: translateY(0);
}
.af-home-lead-card--secondary {
grid-area: secondary;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
background: var(--bz-white);
border: 1px solid var(--bz-border);
border-radius: 5px;
}
.af-home-lead-card--secondary .af-home-lead-media {
flex: 0 0 52%;
min-height: 138px;
}
.af-home-lead-secondary-content {
display: flex;
align-items: center;
flex: 1 1 auto;
padding: 14px 15px;
}
.af-home-lead-card--secondary h3,
.af-home-lead-card--compact h3 {
margin: 0;
color: var(--bz-brand-900);
font-weight: 800;
}
.af-home-lead-card--secondary h3 {
font-size: 1.08rem;
line-height: 1.85;
}
.af-home-lead-card--secondary h3 a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.af-home-lead-bottom {
grid-area: bottom;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
min-width: 0;
direction: rtl;
}
.af-home-lead-card--compact {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(112px, 42%);
gap: 10px;
align-items: center;
min-height: 112px;
padding-right: 12px;
background: var(--bz-white);
border-right: 1px solid var(--bz-border);
}
.af-home-lead-card--compact .af-home-lead-media {
height: 92px;
border-radius: 4px;
}
.af-home-lead-card--compact .af-home-lead-category {
top: auto;
right: 6px;
bottom: 6px;
}
.af-home-lead-card--compact .af-home-lead-category > a > span {
min-height: 20px;
padding: 2px 6px;
font-size: .62rem;
}
.af-home-lead-card--compact h3 {
font-size: .92rem;
line-height: 1.75;
}
.af-home-lead-card--compact h3 a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.af-home-top-sidebar > .widget,
.af-home-top-sidebar .af-tab-index {
height: 100%;
margin: 0;
}
.af-home-top-sidebar > .widget {
list-style: none;
}
.af-home-top-sidebar .af-tab-index {
padding: 4px 10px 12px;
overflow: hidden;
background: var(--bz-white);
border: 1px solid var(--bz-border);
border-radius: 7px;
box-shadow: 0 3px 12px rgba(var(--bz-brand-rgb), 0.07);
}
.af-home-top-sidebar .af-tab-index > .nav-pills {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
margin: 0 0 7px !important;
padding: 4px;
background: var(--bz-surface-muted);
border: 1px solid var(--bz-brand-100);
border-radius: 9px;
}
.af-home-top-sidebar .af-tab-index > .nav-pills .nav-item {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.af-home-top-sidebar .af-tab-index > .nav-pills .nav-link {
width: 100%;
min-height: 32px;
margin: 0;
padding: 5px 8px;
color: var(--bz-text-secondary);
background: transparent;
border: 0 !important;
border-radius: 7px;
font-size: .78rem;
font-weight: 700;
line-height: 1.4;
}
.af-home-top-sidebar .af-tab-index > .nav-pills .nav-link.active {
color: var(--bz-brand-800);
background: var(--bz-white);
box-shadow: 0 1px 5px rgba(var(--bz-brand-rgb), 0.1);
}
.af-home-top-sidebar .af-tab-index .tab-content {
padding: 0;
}
.af-home-top-sidebar .af-tab-index .tab-pane {
counter-reset: step-counter;
}
.af-home-top-sidebar .af-tab-index .tab-pane li {
position: relative;
display: block;
min-height: 33px;
margin: 0;
padding: 6px 31px 6px 2px;
counter-increment: step-counter;
border-bottom: 1px solid var(--bz-surface-muted);
font-size: .78rem;
line-height: 1.55;
}
.af-home-top-sidebar .af-tab-index .tab-pane li:last-child {
border-bottom: 0;
}
.af-home-top-sidebar .af-tab-index .tab-pane li::before {
content: counter(step-counter);
position: absolute;
top: 7px;
right: 2px;
width: 24px;
margin: 0;
padding: 0;
color: var(--bz-brand-800);
background: transparent;
border: 0;
font-size: 1.05rem;
font-weight: 800;
line-height: 1.35;
text-align: center;
}
.af-home-top-sidebar .af-tab-index .tab-pane li a {
display: -webkit-box;
overflow: hidden;
color: var(--bz-brand-900);
font-weight: 600;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.af-home-top-sidebar .af-tab-index .tab-pane li a:hover,
.af-home-top-sidebar .af-tab-index .tab-pane li a:focus {
color: var(--bz-accent-700);
}
/* The existing header already has the correct data and controls; this pass
only gives the desktop row the calmer proportions shown in the reference. */
@media (min-width: 900px) {
.home nav.af-header {
min-height: 59px;
margin-bottom: 0;
padding: 0;
background: var(--bz-white);
border-bottom: 1px solid var(--bz-border);
box-shadow: none;
}
.home nav.af-header > .container-fluid {
width: 100%;
max-width: 1220px;
min-height: 59px;
margin: 0 auto;
padding-right: 12px;
padding-left: 12px;
}
.home nav.af-header .af-mobile-flex {
flex: 0 0 auto;
margin: 0;
}
.home nav.af-header .af-baztab-logo,
.home nav.af-header .navbar .af-baztab-logo {
width: auto;
max-width: 105px;
max-height: 48px;
margin: 0 0 0 24px;
object-fit: contain;
}
.home nav.af-header #navbarSupportedContent .navbar-nav > li,
.home nav.af-header #navbarSupportedContent .navbar-nav > .nav-item {
margin: 0;
border-left: 1px solid var(--bz-border);
}
.home nav.af-header #navbarSupportedContent .navbar-nav > li > a,
.home nav.af-header #navbarSupportedContent .navbar-nav > .nav-item > a,
.home nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .nav-link {
min-height: 36px;
padding: 7px 13px !important;
border-radius: 0;
font-size: .87rem;
font-weight: 500;
}
.home nav.af-header .af-header-date-trigger {
min-height: 36px;
padding-top: 5px;
padding-bottom: 5px;
font-size: .79rem;
}
.home nav.af-header .show-btn {
width: 38px;
height: 38px;
flex-basis: 38px;
margin: 0;
}
}
@media (min-width: 900px) and (max-width: 1120px) {
.af-home-top {
padding-right: 8px;
padding-left: 8px;
}
.af-home-top-layout {
grid-template-columns: minmax(205px, 0.29fr) minmax(0, 1fr);
gap: 9px;
}
.af-home-lead-grid {
grid-template-columns: minmax(188px, .78fr) minmax(0, 1.72fr);
grid-template-rows: minmax(258px, 1fr) 104px;
gap: 9px;
}
.af-home-lead-card--hero {
min-height: 258px;
}
.af-home-lead-card--hero h2 {
font-size: 1.42rem;
}
.af-home-lead-card--hero p {
font-size: .84rem;
}
.af-home-lead-card--secondary h3 {
font-size: .95rem;
line-height: 1.75;
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) minmax(94px, 42%);
min-height: 104px;
padding-right: 8px;
}
.af-home-lead-card--compact .af-home-lead-media {
height: 82px;
}
.af-home-lead-card--compact h3 {
font-size: .82rem;
}
.af-home-top-sidebar .af-tab-index .tab-pane li {
min-height: 30px;
padding-top: 5px;
padding-bottom: 5px;
font-size: .71rem;
}
.home nav.af-header .af-baztab-logo,
.home nav.af-header .navbar .af-baztab-logo {
max-width: 94px;
margin-left: 14px;
}
.home nav.af-header #navbarSupportedContent .navbar-nav > li > a,
.home nav.af-header #navbarSupportedContent .navbar-nav > .nav-item > a,
.home nav.af-header #navbarSupportedContent .navbar-nav > .nav-item.dropdown > .nav-link {
padding-right: 9px !important;
padding-left: 9px !important;
font-size: .79rem;
}
.home nav.af-header .af-header-date-hint {
display: none;
}
}
@media (max-width: 899.98px) {
.af-home-top {
margin-bottom: 18px;
padding: 0 10px;
}
.af-home-top-layout {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"editorial"
"sidebar";
gap: 12px;
}
.af-home-top-sidebar {
grid-area: sidebar;
}
.af-home-top-editorial {
grid-area: editorial;
}
.af-home-lead.af-slide-top {
padding: 9px;
}
.af-home-lead-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
grid-template-areas:
"hero"
"secondary"
"bottom";
gap: 10px;
}
.af-home-lead-card--hero {
min-height: clamp(245px, 56vw, 390px);
}
.af-home-lead-content {
padding: 24px 18px 16px;
}
.af-home-lead-card--hero h2 {
max-width: 100%;
font-size: clamp(1.25rem, 5vw, 1.75rem);
}
.af-home-lead-card--hero p {
max-width: 100%;
-webkit-line-clamp: 2;
}
.af-home-lead-card--secondary {
display: grid;
grid-template-columns: minmax(130px, 40%) minmax(0, 1fr);
min-height: 150px;
}
.af-home-lead-card--secondary .af-home-lead-media {
min-height: 150px;
}
.af-home-lead-secondary-content {
padding: 14px;
}
.af-home-lead-card--secondary h3 {
font-size: 1rem;
-webkit-line-clamp: 3;
}
.af-home-lead-bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr);
gap: 7px;
padding: 0 0 10px;
border-right: 0;
border-bottom: 1px solid var(--bz-border);
}
.af-home-lead-card--compact .af-home-lead-media {
grid-row: 1;
height: auto;
aspect-ratio: 16 / 9;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
grid-row: 2;
padding: 0 4px;
}
.af-home-top-sidebar .af-tab-index {
height: auto;
}
}
@media (max-width: 575.98px) {
.af-home-top {
padding-right: 7px;
padding-left: 7px;
}
.af-home-lead-card--hero {
min-height: 245px;
}
.af-home-lead-card--hero p {
display: none;
}
.af-home-lead-card--secondary {
grid-template-columns: minmax(118px, 38%) minmax(0, 1fr);
min-height: 132px;
}
.af-home-lead-card--secondary .af-home-lead-media {
min-height: 132px;
}
.af-home-lead-secondary-content {
padding: 10px 12px;
}
.af-home-lead-card--secondary h3 {
font-size: .9rem;
line-height: 1.75;
}
.af-home-lead-bottom {
grid-template-columns: minmax(0, 1fr);
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) 118px;
min-height: 94px;
padding: 0 0 0 8px;
border-bottom: 1px solid var(--bz-border);
}
.af-home-lead-card--compact .af-home-lead-media {
grid-row: auto;
height: 82px;
aspect-ratio: auto;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
grid-row: auto;
padding: 0 4px;
}
.af-home-top-sidebar .af-tab-index .tab-pane li {
font-size: .76rem;
}
}
@media (prefers-reduced-motion: reduce) {
.af-home-lead-media img,
.af-home-lead-shade,
.af-home-lead-content,
.af-home-lead-card--hero p {
transition: none;
}
}
/* Keep compact teaser thumbnails on the physical right and copy on the left. */
.af-home-lead-card--compact {
direction: ltr;
}
.af-home-lead-card--compact .af-home-lead-compact-copy,
.af-home-lead-card--compact .af-home-lead-media {
direction: rtl;
}
/* ============================================================
* 6.3.20 — Homepage lead proportion and surface refinement
* Keeps the 6.3.15 editorial structure while standardizing the hero ratio,
* tightening the secondary story and enlarging the two lower thumbnails.
* ============================================================ */
.af-home-lead.af-slide-top {
padding: 10px;
background: var(--bz-page);
border-color: var(--bz-border);
border-radius: 9px;
box-shadow: none;
}
.af-home-lead-grid {
grid-template-columns: minmax(230px, .78fr) minmax(0, 2.02fr);
grid-template-rows: minmax(348px, 1fr) 132px;
gap: 10px;
}
.af-home-lead-card--hero {
min-height: 348px;
border-radius: 7px;
}
.af-home-lead-card--secondary {
border-radius: 7px;
}
.af-home-lead-card--secondary .af-home-lead-media {
flex: 0 0 62%;
min-height: 190px;
}
.af-home-lead-secondary-content {
align-items: flex-start;
padding: 8px 12px 10px;
}
.af-home-lead-card--secondary h3 {
font-size: 1.04rem;
line-height: 1.72;
}
.af-home-lead-card--secondary h3 a {
-webkit-line-clamp: 4;
}
.af-home-lead-bottom {
gap: 10px;
}
.af-home-lead-card--compact {
box-sizing: border-box;
grid-template-columns: minmax(0, 1fr) minmax(142px, 48%);
gap: 10px;
min-height: 132px;
padding: 8px;
background: var(--bz-white);
border: 1px solid var(--bz-border);
border-radius: 7px;
}
.af-home-lead-card--compact .af-home-lead-media {
height: 114px;
border-radius: 5px;
}
.af-home-lead-card--compact h3 {
font-size: .91rem;
line-height: 1.7;
}
.af-home-lead-card--compact h3 a {
-webkit-line-clamp: 3;
}
.af-home-top-sidebar .af-tab-index {
box-shadow: none;
}
@media (min-width: 900px) and (max-width: 1120px) {
.af-home-lead-grid {
grid-template-columns: minmax(195px, .72fr) minmax(0, 1.9fr);
grid-template-rows: minmax(318px, 1fr) 120px;
gap: 9px;
}
.af-home-lead-card--hero {
min-height: 318px;
}
.af-home-lead-card--secondary .af-home-lead-media {
flex-basis: 60%;
min-height: 170px;
}
.af-home-lead-secondary-content {
padding: 7px 10px 9px;
}
.af-home-lead-card--secondary h3 {
font-size: .93rem;
line-height: 1.68;
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) minmax(118px, 46%);
min-height: 120px;
padding: 7px;
}
.af-home-lead-card--compact .af-home-lead-media {
height: 104px;
}
.af-home-lead-card--compact h3 {
font-size: .8rem;
line-height: 1.65;
}
}
@media (max-width: 899.98px) {
.af-home-lead.af-slide-top {
padding: 8px;
}
.af-home-lead-grid {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
grid-template-areas:
"hero"
"secondary"
"bottom";
gap: 10px;
}
.af-home-lead-card--hero {
min-height: clamp(260px, 58vw, 390px);
}
.af-home-lead-card--secondary {
grid-template-columns: minmax(150px, 44%) minmax(0, 1fr);
}
.af-home-lead-card--secondary .af-home-lead-media {
min-height: 150px;
}
.af-home-lead-secondary-content {
padding: 9px 12px;
}
.af-home-lead-bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) minmax(126px, 46%);
gap: 8px;
min-height: 118px;
padding: 7px;
border: 1px solid var(--bz-border);
}
.af-home-lead-card--compact .af-home-lead-media {
grid-row: auto;
height: 102px;
aspect-ratio: auto;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
grid-row: auto;
padding: 0;
}
}
@media (max-width: 575.98px) {
.af-home-lead.af-slide-top {
padding: 7px;
border-radius: 8px;
}
.af-home-lead-card--hero {
min-height: clamp(245px, 64vw, 310px);
}
.af-home-lead-card--secondary {
grid-template-columns: minmax(124px, 40%) minmax(0, 1fr);
min-height: 132px;
}
.af-home-lead-card--secondary .af-home-lead-media {
min-height: 132px;
}
.af-home-lead-bottom {
grid-template-columns: minmax(0, 1fr);
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) 126px;
min-height: 98px;
padding: 7px;
}
.af-home-lead-card--compact .af-home-lead-media {
height: 82px;
}
}
/* ============================================================
* 6.3.20 — Homepage lead alignment, unified media icons,
* image ratio standardization and calmer section surfaces.
* ============================================================ */
.af-home-lead.af-slide-top {
padding: 10px;
background: var(--bz-surface-muted);
border: 1px solid var(--bz-border);
border-radius: 10px;
box-shadow: none;
}
.af-home-lead-grid {
grid-template-columns: minmax(238px, 0.86fr) minmax(0, 1.92fr);
grid-template-rows: minmax(332px, 1fr) 126px;
gap: 10px;
}
.af-home-lead-card--hero {
min-height: 332px;
border-radius: 10px;
}
.af-home-lead-card--hero .af-home-lead-media img,
.af-home-lead-card--secondary .af-home-lead-media img,
.af-home-lead-card--compact .af-home-lead-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.af-home-lead-card--hero h2 {
max-width: 88%;
font-size: clamp(1.5rem, 2.05vw, 2rem);
line-height: 1.48;
text-shadow: 0 2px 8px rgba(var(--bz-black-rgb), .46), 0 10px 24px rgba(var(--bz-black-rgb), .32);
}
.af-home-lead-content {
padding: 24px 22px 18px;
}
.af-home-lead-card--hero p {
max-width: 84%;
font-size: .92rem;
}
.af-home-lead-card--secondary {
border-radius: 10px;
}
.af-home-lead-card--secondary .af-home-lead-media {
flex: 0 0 50%;
min-height: 154px;
}
.af-home-lead-secondary-content {
align-items: flex-start;
padding: 9px 14px 12px;
}
.af-home-lead-card--secondary h3 {
font-size: 1.12rem;
line-height: 1.65;
}
.af-home-lead-bottom {
gap: 10px;
}
.af-home-lead-card--compact {
grid-template-columns: minmax(116px, 36%) minmax(0, 1fr);
gap: 11px;
min-height: 126px;
padding: 10px;
background: var(--bz-white);
border: 1px solid var(--bz-border);
border-radius: 10px;
}
.af-home-lead-card--compact .af-home-lead-media {
order: 1;
height: 104px;
border-radius: 8px;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
order: 2;
min-width: 0;
}
.af-home-lead-card--compact h3 {
font-size: 1rem;
line-height: 1.7;
}
.af-home-lead-card--compact h3 a {
-webkit-line-clamp: 3;
}
/* Keep compact thumbnails on the visual right in RTL. */
.af-home-lead-card--compact {
direction: rtl;
}
.af-home-lead-card--compact .af-home-lead-media {
grid-column: 2;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
grid-column: 1;
}
/* Calmer surfaces for media sections, closer to the older overall site background. */
.af-video-index,
.af-picture-service,
.af-pishkhan-picture-service,
.af-pishkhan {
margin: 20px 0;
padding: 20px 0;
background: var(--bz-surface-muted) !important;
background-image: none !important;
background-attachment: scroll !important;
border-top: 1px solid var(--bz-border);
border-bottom: 1px solid var(--bz-border);
}
.af-video-index .af-head-title,
.af-picture-service .af-head-title,
.af-pishkhan .af-head-title,
.af-pishkhan-picture-service .af-head-title {
margin: 0 0 18px;
color: var(--bz-brand-900) !important;
}
.af-video-main h3,
.af-picture-big h3 {
padding: 18px 18px 16px;
background: linear-gradient(to top, rgba(var(--bz-black-rgb), .86), rgba(var(--bz-black-rgb), .06));
border-radius: 0 0 8px 8px;
line-height: 1.65;
}
/* Standard ratios across hero media blocks. */
.af-video-index .af-video-main .af-media-frame--featured,
.af-photo-video-player .af-media-frame--featured,
.af-pishkhan-picture-content--featured > a,
.af-home-lead-card--hero .af-home-lead-media {
aspect-ratio: 16 / 9;
}
.af-video-index .af-video-img .af-media-frame--compact,
.af-photo-video-item .af-media-frame--compact,
.af-pishkhan-picture-grid .af-picrure-content > a,
.af-home-lead-card--compact .af-home-lead-media {
aspect-ratio: 16 / 10;
}
.af-video-index .af-video-main .af-media-frame--featured img,
.af-photo-video-player .af-media-frame--featured img,
.af-pishkhan-picture-content--featured img,
.af-video-index .af-video-img .af-media-frame--compact img,
.af-photo-video-item .af-media-frame--compact img,
.af-pishkhan-picture-grid .af-picrure-content img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Unified, softer transparent media actions across TV, photo reports and pishkhan. */
.af-media-action {
width: 60px;
height: 60px;
border: 1px solid rgba(var(--bz-white-rgb), .52);
background: rgba(var(--bz-brand-rgb), .22);
box-shadow: 0 4px 16px rgba(var(--bz-black-rgb), .14);
-webkit-backdrop-filter: blur(6px) saturate(1.02);
backdrop-filter: blur(6px) saturate(1.02);
}
.af-media-action--play,
.af-media-action--camera {
background: rgba(var(--bz-brand-rgb), .22);
}
.af-media-action__icon {
width: 30px;
height: 30px;
}
.af-media-action--compact {
width: 34px;
height: 34px;
box-shadow: 0 3px 12px rgba(var(--bz-black-rgb), .12);
}
.af-media-action--compact .af-media-action__icon {
width: 18px;
height: 18px;
}
.af-video-index a:hover .af-media-action,
.af-video-index a:focus-visible .af-media-action,
.af-picture-service a:hover .af-media-action,
.af-picture-service a:focus-visible .af-media-action,
.af-pishkhan-picture-service a:hover .af-picture-hover svg,
.af-pishkhan-picture-service a:focus-visible .af-picture-hover svg {
border-color: rgba(var(--bz-white-rgb), .72);
background: rgba(var(--bz-brand-rgb), .28);
box-shadow: 0 6px 18px rgba(var(--bz-black-rgb), .18);
}
/* Pishkhan icons follow the same quiet transparent logic. */
.af-pishkhan-picture-content > a,
.af-pishkhan-picture-content--featured > a {
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
}
.af-pishkhan-picture-content img,
.af-pishkhan-picture-content--featured img {
display: block;
border-radius: 8px;
}
.af-pishkhan-picture-content .af-picture-hover,
.af-pishkhan-picture-content--featured .af-picture-hover {
position: absolute;
inset: 0;
display: block;
background: linear-gradient(180deg, rgba(var(--bz-black-rgb), .04), rgba(var(--bz-black-rgb), .12));
border-radius: 8px;
transition: background .25s ease;
}
.af-pishkhan-picture-content .af-picture-hover svg,
.af-pishkhan-picture-content--featured .af-picture-hover svg {
width: 34px;
height: 34px;
position: absolute;
top: 50%;
left: 50%;
right: auto;
margin: 0;
padding: 8px;
color: var(--bz-white);
background: rgba(var(--bz-brand-rgb), .22);
border: 1px solid rgba(var(--bz-white-rgb), .52);
border-radius: 50%;
box-shadow: 0 3px 12px rgba(var(--bz-black-rgb), .12);
transform: translate(-50%, -50%);
-webkit-backdrop-filter: blur(6px) saturate(1.02);
backdrop-filter: blur(6px) saturate(1.02);
}
.af-pishkhan-picture-content--featured .af-picture-hover h3 {
right: 0;
left: 0;
bottom: 0;
padding: 16px 18px;
line-height: 1.6;
background: linear-gradient(to top, rgba(var(--bz-black-rgb), .84), rgba(var(--bz-black-rgb), .04));
}
.af-pishkhan-picture-content h3 {
margin-top: 8px;
font-size: .98rem;
line-height: 1.65;
}
.af-pishkhan-picture-content a:hover .af-picture-hover,
.af-pishkhan-picture-content--featured a:hover .af-picture-hover,
.af-pishkhan-picture-content a:focus-visible .af-picture-hover,
.af-pishkhan-picture-content--featured a:focus-visible .af-picture-hover {
background: linear-gradient(180deg, rgba(var(--bz-black-rgb), .06), rgba(var(--bz-black-rgb), .2));
}
/* Media section text should sit on light surfaces again. */
.af-video-desc a,
.af-video-item h3,
.af-pishkhan-picture-content h3 a {
color: var(--bz-brand-900);
}
@media (min-width: 900px) and (max-width: 1120px) {
.af-home-lead-grid {
grid-template-columns: minmax(214px, .82fr) minmax(0, 1.78fr);
grid-template-rows: minmax(302px, 1fr) 118px;
}
.af-home-lead-card--hero {
min-height: 302px;
}
.af-home-lead-card--compact {
min-height: 118px;
grid-template-columns: minmax(102px, 35%) minmax(0, 1fr);
}
.af-home-lead-card--compact .af-home-lead-media {
height: 96px;
}
}
@media (max-width: 899.98px) {
.af-home-lead.af-slide-top {
padding: 8px;
}
.af-home-lead-grid {
gap: 10px;
}
.af-home-lead-card--hero {
min-height: clamp(250px, 56vw, 360px);
}
.af-home-lead-card--secondary {
grid-template-columns: minmax(136px, 40%) minmax(0, 1fr);
}
.af-home-lead-card--secondary .af-home-lead-media {
min-height: 148px;
}
.af-home-lead-secondary-content {
padding: 10px 12px;
}
.af-home-lead-bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.af-home-lead-card--compact {
grid-template-columns: 112px minmax(0, 1fr);
min-height: 114px;
padding: 8px;
}
.af-home-lead-card--compact .af-home-lead-media {
height: 96px;
aspect-ratio: auto;
}
.af-media-action--featured {
width: 54px;
height: 54px;
}
.af-media-action--featured .af-media-action__icon {
width: 26px;
height: 26px;
}
}
@media (max-width: 575.98px) {
.af-home-lead-card--secondary {
grid-template-columns: minmax(118px, 39%) minmax(0, 1fr);
min-height: 128px;
}
.af-home-lead-card--secondary .af-home-lead-media {
min-height: 128px;
}
.af-home-lead-bottom {
grid-template-columns: minmax(0, 1fr);
}
.af-home-lead-card--compact {
grid-template-columns: 116px minmax(0, 1fr);
min-height: 102px;
}
.af-home-lead-card--compact .af-home-lead-media {
height: 84px;
}
.af-home-lead-card--hero p {
display: none;
}
.af-media-action,
.af-pishkhan-picture-content .af-picture-hover svg,
.af-pishkhan-picture-content--featured .af-picture-hover svg {
width: 32px;
height: 32px;
padding: 7px;
}
.af-media-action__icon {
width: 16px;
height: 16px;
}
.af-pishkhan-picture-content--featured .af-picture-hover h3 {
padding: 12px 14px;
font-size: 1rem;
line-height: 1.55;
}
}
/* ============================================================
* 6.3.20 — Restore section backgrounds, tighten lead-2,
* repair lower lead cards and keep top-lead content below header.
* ============================================================ */
/* Restore the three familiar section backgrounds that were unintentionally removed. */
.af-video-index {
background-color: var(--bz-white) !important;
background-image: url('assets/imgs/videobg.jpg') !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
.af-picture-service {
background-color: var(--bz-white) !important;
background-image: url('assets/imgs/pishkhanbg2.jpg') !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
.af-pishkhan-picture-service,
.af-pishkhan {
background-color: var(--bz-white) !important;
background-image: url('assets/imgs/bgpishkhan.jpg') !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
/* Keep the headline block calm and prevent any bleed onto the sticky header. */
.af-home-top,
.af-home-top-layout,
.af-home-top-editorial,
.af-home-top-sidebar,
.af-home-lead.af-slide-top,
.af-home-lead-grid,
.af-home-lead-card,
.af-home-lead-media,
.af-home-lead-content,
.af-home-lead-secondary-content,
.af-home-lead-bottom {
position: relative;
z-index: 1;
}
body.home nav.af-header {
position: relative;
z-index: 2000;
background: var(--bz-white);
}
/* Tighten headline 2 so the text starts higher and feels attached to its image. */
.af-home-lead-card--secondary {
align-content: start;
}
.af-home-lead-card--secondary .af-home-lead-media {
flex: 0 0 51%;
min-height: 158px;
}
.af-home-lead-secondary-content {
align-items: flex-start;
justify-content: flex-start;
padding: 7px 14px 12px;
}
.af-home-lead-card--secondary h3 {
margin-top: 0;
font-size: 1.12rem;
line-height: 1.62;
}
/* Enlarge the images of headlines 3 and 4 and make both cards fill the full lower row cleanly. */
.af-home-lead-bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
align-items: stretch;
}
.af-home-lead-card--compact {
direction: rtl;
display: grid;
grid-template-columns: minmax(0, 1fr) 152px;
grid-auto-rows: 1fr;
gap: 12px;
align-items: center;
min-height: 132px;
padding: 10px 12px;
overflow: hidden;
border: 1px solid var(--bz-border);
border-radius: 10px;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
grid-column: 1;
display: flex;
align-items: center;
min-width: 0;
padding: 0;
}
.af-home-lead-card--compact .af-home-lead-media {
grid-column: 2;
order: initial;
width: 100%;
height: 110px;
aspect-ratio: auto;
border-radius: 8px;
overflow: hidden;
}
.af-home-lead-card--compact .af-home-lead-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.af-home-lead-card--compact h3 {
width: 100%;
margin: 0;
font-size: 1rem;
line-height: 1.68;
}
.af-home-lead-card--compact h3 a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.af-home-lead-card--compact .af-home-lead-category {
right: 8px;
bottom: 8px;
}
@media (min-width: 900px) and (max-width: 1120px) {
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) 136px;
min-height: 124px;
}
.af-home-lead-card--compact .af-home-lead-media {
height: 100px;
}
.af-home-lead-card--secondary h3 {
font-size: 1rem;
}
}
@media (max-width: 899.98px) {
.af-home-lead-card--secondary {
grid-template-columns: minmax(136px, 41%) minmax(0, 1fr);
}
.af-home-lead-card--secondary .af-home-lead-media {
min-height: 148px;
}
.af-home-lead-secondary-content {
padding: 8px 12px 10px;
}
.af-home-lead-bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) 132px;
min-height: 118px;
padding: 8px 10px;
}
.af-home-lead-card--compact .af-home-lead-media {
height: 96px;
}
}
@media (max-width: 575.98px) {
.af-home-lead-bottom {
grid-template-columns: minmax(0, 1fr);
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) 124px;
min-height: 108px;
gap: 10px;
}
.af-home-lead-card--compact .af-home-lead-media {
height: 88px;
}
.af-home-lead-card--compact h3 {
font-size: .92rem;
line-height: 1.62;
}
}
/* ============================================================
* 6.3.20 — Mobile lead rollback + exact media background recovery
* Restores the proven 6.3.16 mobile lead behavior and the correct
* background/title treatment from the stable media-section versions.
* ============================================================ */
/* Correct background assignment for the three homepage media sections. */
body.home .af-video-index:not(.af-picture-video-layout) {
background-color: var(--bz-brand-900) !important;
background-image: url('assets/imgs/videobg.jpg') !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
body.home .af-video-index.af-picture-video-layout {
background-color: var(--bz-brand-900) !important;
background-image: url('assets/imgs/pishkhanbg2.jpg') !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
body.home .af-picture-service.af-pishkhan-picture-service {
background-color: var(--bz-brand-900) !important;
background-image: url('assets/imgs/bgimage.jpg') !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
/* Restore the original white editorial typography on dark photographic backgrounds. */
body.home .af-video-index .af-head-title,
body.home .af-video-index.af-picture-video-layout .af-head-title,
body.home .af-picture-service.af-pishkhan-picture-service .af-head-title,
body.home .af-pishkhan .af-head-title {
color: var(--bz-white) !important;
}
body.home .af-video-index .af-video-main h3,
body.home .af-video-index .af-video-main h3 a,
body.home .af-video-index .af-video-desc,
body.home .af-video-index .af-video-desc a,
body.home .af-video-index .af-video-item h3,
body.home .af-video-index .af-video-item h3 a,
body.home .af-picture-service.af-pishkhan-picture-service .af-picture-big h3,
body.home .af-picture-service.af-pishkhan-picture-service .af-picture-big h3 a,
body.home .af-picture-service.af-pishkhan-picture-service .af-picture-small h3,
body.home .af-picture-service.af-pishkhan-picture-service .af-picture-small h3 a,
body.home .af-picture-service.af-pishkhan-picture-service .af-pishkhan-picture-content h3,
body.home .af-picture-service.af-pishkhan-picture-service .af-pishkhan-picture-content h3 a {
color: var(--bz-white) !important;
}
/* Keep background attachment safe on touch devices. */
@media (min-width: 900px) {
body.home .af-video-index:not(.af-picture-video-layout),
body.home .af-video-index.af-picture-video-layout,
body.home .af-picture-service.af-pishkhan-picture-service {
background-attachment: fixed !important;
}
}
@media (max-width: 899.98px) {
body.home .af-video-index:not(.af-picture-video-layout),
body.home .af-video-index.af-picture-video-layout,
body.home .af-picture-service.af-pishkhan-picture-service {
background-attachment: scroll !important;
}
/* Restore the stable pre-6.3.17 mobile ordering and geometry. */
.af-home-top {
margin-bottom: 18px;
padding: 0 10px;
}
.af-home-top-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"editorial"
"sidebar";
gap: 12px;
}
.af-home-top-editorial {
grid-area: editorial;
min-width: 0;
}
.af-home-top-sidebar {
grid-area: sidebar;
min-width: 0;
}
.af-home-lead.af-slide-top {
padding: 9px;
background: var(--bz-white);
border: 1px solid var(--bz-border);
border-radius: 8px;
box-shadow: none;
}
.af-home-lead-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
grid-template-areas:
"hero"
"secondary"
"bottom";
gap: 10px;
direction: rtl;
}
.af-home-lead-card--hero {
grid-area: hero;
min-height: clamp(245px, 56vw, 390px);
}
.af-home-lead-content {
padding: 24px 18px 16px;
}
.af-home-lead-card--hero h2 {
max-width: 100%;
font-size: clamp(1.25rem, 5vw, 1.75rem);
}
.af-home-lead-card--hero p {
max-width: 100%;
-webkit-line-clamp: 2;
}
.af-home-lead-card--secondary {
grid-area: secondary;
display: grid;
grid-template-columns: minmax(130px, 40%) minmax(0, 1fr);
min-height: 150px;
overflow: hidden;
}
.af-home-lead-card--secondary .af-home-lead-media {
min-height: 150px;
height: 100%;
}
.af-home-lead-secondary-content {
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 14px;
}
.af-home-lead-card--secondary h3 {
margin: 0;
font-size: 1rem;
line-height: 1.72;
}
.af-home-lead-card--secondary h3 a {
-webkit-line-clamp: 3;
}
.af-home-lead-bottom {
grid-area: bottom;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
align-items: stretch;
}
.af-home-lead-card--compact {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: auto;
gap: 7px;
min-height: 0;
padding: 0 0 10px;
overflow: hidden;
background: var(--bz-white);
border: 0;
border-bottom: 1px solid var(--bz-border);
border-radius: 0;
direction: rtl;
}
.af-home-lead-card--compact .af-home-lead-media {
grid-column: auto;
grid-row: 1;
order: initial;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-radius: 7px;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
grid-column: auto;
grid-row: 2;
order: initial;
display: block;
padding: 0 4px;
direction: rtl;
}
.af-home-lead-card--compact h3 {
margin: 0;
font-size: .92rem;
line-height: 1.72;
}
.af-home-top-sidebar .af-tab-index {
height: auto;
}
}
@media (max-width: 575.98px) {
.af-home-top {
padding-right: 7px;
padding-left: 7px;
}
.af-home-lead-card--hero {
min-height: 245px;
}
.af-home-lead-card--hero p {
display: none;
}
.af-home-lead-card--secondary {
grid-template-columns: minmax(118px, 38%) minmax(0, 1fr);
min-height: 132px;
}
.af-home-lead-card--secondary .af-home-lead-media {
min-height: 132px;
}
.af-home-lead-secondary-content {
padding: 10px 12px;
}
.af-home-lead-card--secondary h3 {
font-size: .9rem;
line-height: 1.75;
}
.af-home-lead-bottom {
grid-template-columns: minmax(0, 1fr);
}
.af-home-lead-card--compact {
display: grid;
grid-template-columns: minmax(0, 1fr) 118px;
grid-template-rows: minmax(82px, auto);
gap: 8px;
min-height: 94px;
padding: 0 0 0 8px;
border-bottom: 1px solid var(--bz-border);
direction: ltr;
}
.af-home-lead-card--compact .af-home-lead-media {
grid-column: 2;
grid-row: 1;
width: 118px;
height: 82px;
aspect-ratio: auto;
direction: rtl;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
grid-column: 1;
grid-row: 1;
display: flex;
align-items: center;
min-width: 0;
padding: 0 4px;
direction: rtl;
}
.af-home-lead-card--compact h3 {
font-size: .88rem;
line-height: 1.68;
}
.af-home-top-sidebar .af-tab-index .tab-pane li {
font-size: .76rem;
}
}
/* ============================================================
* 6.3.20 — Lead headline text positioning and compact overlays.
* Keeps the stable 6.3.20 mobile order while refining headlines 1–4.
* ============================================================ */
/* Headline 1: keep all title information firmly at the bottom of the image. */
.af-home-lead-card--hero .af-home-lead-content {
top: auto !important;
right: 0;
bottom: 0 !important;
left: 0;
padding: 18px 22px 14px;
transform: none;
}
.af-home-lead-card--hero h2 {
margin: 0;
}
@media (hover: hover) and (pointer: fine) {
.af-home-lead-card--hero:hover .af-home-lead-content {
transform: translateY(-4px);
}
}
.af-home-lead-card--hero:focus-within .af-home-lead-content {
transform: translateY(-4px);
}
/* Headline 2: text panel should only be as tall as its real content. */
@media (min-width: 900px) {
.af-home-lead-card--secondary {
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: visible;
background: transparent;
border: 0;
}
.af-home-lead-card--secondary .af-home-lead-media {
flex: 0 0 auto;
height: 158px;
min-height: 158px;
border-radius: 9px 9px 0 0;
}
.af-home-lead-secondary-content {
flex: 0 0 auto;
min-height: 0;
padding: 8px 12px 10px;
background: var(--bz-white);
border: 1px solid var(--bz-border);
border-top: 0;
border-radius: 0 0 9px 9px;
}
.af-home-lead-card--secondary h3 {
margin: 0;
line-height: 1.66;
}
}
/* Headlines 3 and 4: title is now part of the image, with a restrained shade. */
.af-home-lead-card--compact {
position: relative;
display: block;
min-width: 0;
min-height: 126px;
padding: 0;
overflow: hidden;
background: var(--bz-brand-900);
border: 1px solid var(--bz-border);
border-radius: 9px;
direction: rtl;
}
.af-home-lead-card--compact .af-home-lead-media {
position: relative;
display: block;
width: 100%;
height: 100%;
min-height: 126px;
aspect-ratio: auto;
overflow: hidden;
border-radius: inherit;
}
.af-home-lead-card--compact .af-home-lead-media > a {
display: block;
width: 100%;
height: 100%;
}
.af-home-lead-card--compact .af-home-lead-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.af-home-lead-compact-shade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(var(--bz-black-rgb), .02) 30%, rgba(var(--bz-black-rgb), .82) 100%);
pointer-events: none;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: block;
min-width: 0;
padding: 32px 13px 11px;
direction: rtl;
}
.af-home-lead-card--compact h3 {
width: 100%;
margin: 0;
color: var(--bz-white);
font-size: .98rem;
font-weight: 800;
line-height: 1.62;
text-shadow: 0 2px 8px rgba(var(--bz-black-rgb), .56);
}
.af-home-lead-card--compact h3 a {
display: -webkit-box;
overflow: hidden;
color: var(--bz-white);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.af-home-lead-card--compact .af-home-lead-category {
top: 8px;
right: 8px;
bottom: auto;
z-index: 3;
}
.af-home-lead-card--compact:hover .af-home-lead-compact-shade,
.af-home-lead-card--compact:focus-within .af-home-lead-compact-shade {
background: linear-gradient(180deg, rgba(var(--bz-black-rgb), .04) 24%, rgba(var(--bz-black-rgb), .88) 100%);
}
/* Tablet/mobile: preserve the stable section order and only use a safe image overlay. */
@media (max-width: 899.98px) {
.af-home-lead-card--hero .af-home-lead-content {
top: auto !important;
bottom: 0 !important;
padding: 18px 16px 13px;
}
.af-home-lead-card--secondary {
overflow: hidden;
}
.af-home-lead-secondary-content {
min-height: 0;
height: auto;
}
.af-home-lead-card--compact {
display: block;
min-height: 0;
padding: 0;
border: 1px solid var(--bz-border);
border-radius: 8px;
direction: rtl;
}
.af-home-lead-card--compact .af-home-lead-media {
position: relative;
display: block;
grid-column: auto;
grid-row: auto;
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 16 / 9;
border-radius: inherit;
direction: rtl;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: block;
padding: 28px 10px 9px;
}
.af-home-lead-card--compact h3 {
font-size: .9rem;
line-height: 1.58;
}
}
@media (max-width: 575.98px) {
.af-home-lead-card--hero .af-home-lead-content {
padding: 15px 13px 11px;
}
.af-home-lead-card--compact {
min-height: 0;
}
.af-home-lead-card--compact .af-home-lead-media {
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 16 / 9;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
padding: 30px 12px 10px;
}
.af-home-lead-card--compact h3 {
font-size: .94rem;
line-height: 1.62;
}
}
/* ============================================================
* 6.3.21 — Correct hero bottom anchoring, full hover excerpt,
* and horizontal headline 3–4 cards with text outside the image.
* ============================================================ */
/* Headline 1: restore absolute positioning so bottom:0 really anchors the copy. */
.af-home-lead-card--hero {
position: relative;
overflow: hidden;
}
.af-home-lead-card--hero .af-home-lead-content {
position: absolute !important;
top: auto !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 4;
display: block;
width: 100%;
max-height: calc(100% - 8px);
padding: 20px 22px 16px;
overflow: visible;
transform: none !important;
}
.af-home-lead-card--hero h2 {
margin: 0;
}
.af-home-lead-card--hero p {
display: block;
width: 100%;
max-width: 92%;
max-height: 0;
margin: 0;
overflow: hidden;
opacity: 0;
transform: translateY(8px);
-webkit-box-orient: initial;
-webkit-line-clamp: unset;
transition: max-height .34s ease, margin .28s ease, opacity .24s ease, transform .3s ease;
}
@media (hover: hover) and (pointer: fine) {
.af-home-lead-card--hero:hover .af-home-lead-content {
transform: none !important;
}
.af-home-lead-card--hero:hover p {
max-height: 15rem;
margin-top: 9px;
overflow: visible;
opacity: 1;
transform: translateY(0);
-webkit-line-clamp: unset;
}
}
.af-home-lead-card--hero:focus-within .af-home-lead-content {
transform: none !important;
}
.af-home-lead-card--hero:focus-within p {
max-height: 15rem;
margin-top: 9px;
overflow: visible;
opacity: 1;
transform: translateY(0);
-webkit-line-clamp: unset;
}
/* Headlines 3 and 4: image on the right, headline in an independent panel on the left. */
.af-home-lead-bottom {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
width: 100%;
min-width: 0;
align-items: stretch;
}
.af-home-lead-card--compact {
position: relative;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(142px, 44%);
grid-template-rows: minmax(126px, 1fr);
gap: 0;
align-items: stretch;
width: 100%;
min-width: 0;
min-height: 126px;
padding: 0;
overflow: hidden;
background: var(--bz-white);
border: 1px solid var(--bz-border);
border-radius: 9px;
direction: rtl;
}
.af-home-lead-card--compact .af-home-lead-media {
position: relative;
grid-column: 2 !important;
grid-row: 1 !important;
display: block;
width: 100%;
height: 100%;
min-height: 126px;
aspect-ratio: auto;
overflow: hidden;
border-radius: 0 9px 9px 0;
direction: rtl;
}
.af-home-lead-card--compact .af-home-lead-media > a {
display: block;
width: 100%;
height: 100%;
}
.af-home-lead-card--compact .af-home-lead-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
position: relative !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
grid-column: 1 !important;
grid-row: 1 !important;
display: flex !important;
align-items: center;
min-width: 0;
padding: 13px 14px;
background: var(--bz-white);
direction: rtl;
}
.af-home-lead-card--compact h3 {
width: 100%;
margin: 0;
color: var(--bz-brand-900);
font-size: .98rem;
font-weight: 800;
line-height: 1.7;
text-shadow: none;
}
.af-home-lead-card--compact h3 a {
display: -webkit-box;
overflow: hidden;
color: var(--bz-brand-900);
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.af-home-lead-card--compact .af-home-lead-category {
top: 8px;
right: 8px;
bottom: auto;
z-index: 3;
}
.af-home-lead-compact-shade {
display: none !important;
}
@media (min-width: 900px) and (max-width: 1120px) {
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) minmax(126px, 43%);
grid-template-rows: minmax(118px, 1fr);
min-height: 118px;
}
.af-home-lead-card--compact .af-home-lead-media {
min-height: 118px;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
padding: 10px 12px;
}
.af-home-lead-card--compact h3 {
font-size: .9rem;
line-height: 1.65;
}
}
/* Preserve the stable mobile order and switch only the internal compact-card geometry. */
@media (max-width: 899.98px) {
.af-home-lead-card--hero .af-home-lead-content {
position: absolute !important;
top: auto !important;
bottom: 0 !important;
padding: 17px 16px 13px;
}
.af-home-lead-bottom {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) minmax(112px, 43%);
grid-template-rows: minmax(112px, 1fr);
min-height: 112px;
border-radius: 8px;
}
.af-home-lead-card--compact .af-home-lead-media {
grid-column: 2 !important;
grid-row: 1 !important;
width: 100%;
height: 100%;
min-height: 112px;
aspect-ratio: auto;
border-radius: 0 8px 8px 0;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
grid-column: 1 !important;
grid-row: 1 !important;
padding: 9px 10px;
}
.af-home-lead-card--compact h3 {
font-size: .86rem;
line-height: 1.58;
}
}
@media (max-width: 575.98px) {
.af-home-lead-card--hero .af-home-lead-content {
padding: 14px 13px 11px;
}
.af-home-lead-card--hero p {
display: none;
}
.af-home-lead-bottom {
grid-template-columns: minmax(0, 1fr);
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) 128px;
grid-template-rows: minmax(104px, 1fr);
min-height: 104px;
}
.af-home-lead-card--compact .af-home-lead-media {
min-height: 104px;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
padding: 10px 11px;
}
.af-home-lead-card--compact h3 {
font-size: .92rem;
line-height: 1.62;
}
}
/* Physical placement lock: copy on the left, image on the right regardless of RTL grid line direction. */
.af-home-lead-card--compact {
direction: ltr;
}
.af-home-lead-card--compact .af-home-lead-media,
.af-home-lead-card--compact .af-home-lead-compact-copy {
direction: rtl;
}
/* ============================================================
* 6.3.22 — Desktop headline 3–4 full-title cards with larger images.
* Mobile/tablet geometry from 6.3.21 remains unchanged.
* ============================================================ */
@media (min-width: 900px) {
.af-home-lead-grid {
grid-template-rows: minmax(332px, 1fr) minmax(148px, auto);
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) minmax(176px, 52%);
grid-template-rows: minmax(148px, auto);
min-height: 148px;
overflow: hidden;
}
.af-home-lead-card--compact .af-home-lead-media {
min-height: 148px;
height: 100%;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
align-items: center;
padding: 14px 16px;
overflow: visible;
}
.af-home-lead-card--compact h3 {
font-size: 1rem;
line-height: 1.72;
}
.af-home-lead-card--compact h3 a {
display: block;
overflow: visible;
white-space: normal;
text-overflow: clip;
-webkit-box-orient: initial;
-webkit-line-clamp: unset;
}
}
@media (min-width: 900px) and (max-width: 1120px) {
.af-home-lead-grid {
grid-template-rows: minmax(302px, 1fr) minmax(140px, auto);
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) minmax(156px, 50%);
grid-template-rows: minmax(140px, auto);
min-height: 140px;
}
.af-home-lead-card--compact .af-home-lead-media {
min-height: 140px;
}
.af-home-lead-card--compact .af-home-lead-compact-copy {
padding: 12px 13px;
}
.af-home-lead-card--compact h3 {
font-size: .92rem;
line-height: 1.66;
}
}
/* ============================================================
* 6.3.23 — Extend headline 3–4 row across the full editorial column.
* Desktop only; stable mobile/tablet layout remains unchanged.
* ============================================================ */
@media (min-width: 900px) {
.af-home-lead-grid {
grid-template-areas:
"secondary hero"
"bottom bottom";
}
.af-home-lead-bottom {
grid-column: 1 / -1;
width: 100%;
}
.af-home-lead-card--secondary {
grid-row: 1;
min-height: 100%;
}
}
/* ============================================================
* 6.3.24 — Responsive gallery repair, unified card surfaces,
* shared image hover, typography scale, media-title overlays,
* sticky header recovery and mobile image-ratio normalization.
* ============================================================ */
:root {
--bz-type-section-title: clamp(1.2rem, 1.45vw, 1.42rem);
--bz-type-lead-main: clamp(1.46rem, 2vw, 1.96rem);
--bz-type-featured-media: clamp(1.22rem, 1.55vw, 1.52rem);
--bz-type-card-title: 1rem;
--bz-type-list-title: .92rem;
--bz-image-hover-scale: 1.022;
--bz-image-hover-duration: .32s;
}
/* Top editorial block: return to the same clean surface language as the site. */
.af-home-lead.af-slide-top {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.af-home-lead-card--hero,
.af-home-lead-card--secondary,
.af-home-lead-card--compact,
.af-home-top-sidebar .af-tab-index {
border-radius: 7px !important;
box-shadow: none !important;
}
.af-home-lead-card--secondary,
.af-home-lead-card--compact,
.af-home-top-sidebar .af-tab-index {
background: var(--bz-white) !important;
border: 1px solid var(--bz-border) !important;
}
/* Shared editorial type scale. */
.af-head-title,
.af-news-main .af-head-title,
.af-video-index .af-head-title,
.af-picture-service .af-head-title,
.af-pishkhan .af-head-title {
font-size: var(--bz-type-section-title) !important;
font-weight: 800;
line-height: 1.5;
}
.af-home-lead-card--hero h2 {
font-size: var(--bz-type-lead-main) !important;
line-height: 1.5;
}
.af-home-lead-card--secondary h3 {
font-size: 1.08rem !important;
line-height: 1.66;
}
.af-home-lead-card--compact h3,
.af-article-desc h3,
.af-news-main .af-article-desc h3,
.af-service-section .af-article-desc h3 {
font-size: var(--bz-type-card-title) !important;
line-height: 1.72;
}
.af-video-main h3,
.af-picture-big h3,
.af-pishkhan-picture-content--featured .af-picture-hover h3 {
font-size: var(--bz-type-featured-media) !important;
line-height: 1.62;
}
.af-video-item h3,
.af-video-desc,
.af-video-desc h3,
.af-picture-small h3,
.af-pishkhan-picture-content h3,
.af-related-main h5,
.af-swiper-hover h3 {
font-size: var(--bz-type-list-title) !important;
line-height: 1.68;
}
.af-archive-desc h2 {
font-size: 1.2rem !important;
line-height: 1.75;
}
/* One consistent, non-jittery image hover throughout editorial cards. */
.af-home-lead-media,
.af-media-frame,
.af-news-img > a,
.af-slide-img > a,
.af-article-img > a,
.af-archive-img > a,
.af-related-img > a,
.af-wide-img > a,
.af-swiper-img > a,
.af-picrure-content > a {
display: block;
overflow: hidden;
}
.af-home-lead-media img,
.af-media-frame img,
.af-news-img img,
.af-slide-img img,
.af-article-img img,
.af-archive-img img,
.af-related-img img,
.af-wide-img img,
.af-swiper-img img,
.af-picrure-content > a > img,
.single-post .af-single-mc .gallery img,
.single-post .af-single-mc .wp-block-gallery img {
transform: translateZ(0) scale(1);
transform-origin: center center;
transition: transform var(--bz-image-hover-duration) cubic-bezier(.22,.61,.36,1), filter var(--bz-image-hover-duration) ease !important;
will-change: transform;
}
.af-home-lead-card:hover .af-home-lead-media img,
.af-home-lead-card:focus-within .af-home-lead-media img,
.af-video-main a:hover .af-media-frame img,
.af-video-main a:focus-visible .af-media-frame img,
.af-video-item a:hover .af-media-frame img,
.af-video-item a:focus-visible .af-media-frame img,
.af-news-img a:hover img,
.af-news-img a:focus-visible img,
.af-slide-img a:hover img,
.af-slide-img a:focus-visible img,
.af-article-img a:hover img,
.af-article-img a:focus-visible img,
.af-archive-img a:hover img,
.af-archive-img a:focus-visible img,
.af-related-img a:hover img,
.af-related-img a:focus-visible img,
.af-wide-img a:hover img,
.af-wide-img a:focus-visible img,
.af-swiper-img a:hover img,
.af-swiper-img a:focus-visible img,
.af-picrure-content > a:hover > img,
.af-picrure-content > a:focus-visible > img,
.single-post .af-single-mc .gallery a:hover img,
.single-post .af-single-mc .gallery a:focus-visible img,
.single-post .af-single-mc .wp-block-gallery a:hover img,
.single-post .af-single-mc .wp-block-gallery a:focus-visible img {
transform: translateZ(0) scale(var(--bz-image-hover-scale)) !important;
}
/* Restore a proper fixed header with a layout spacer on every viewport. */
.af-header-sticky-spacer {
display: none;
width: 100%;
height: 0;
}
.af-header-sticky-spacer.is-active {
display: block;
}
nav.af-header.sticky,
body.home nav.af-header.sticky {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
z-index: 2200 !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
background: var(--bz-white) !important;
}
body.admin-bar nav.af-header.sticky {
top: 32px !important;
}
/* Classic and Gutenberg galleries: repair mobile item width and wrapping. */
.single-post .af-single-mc .gallery .gallery-item {
width: 100% !important;
max-width: none !important;
min-width: 0;
margin: 0 !important;
float: none !important;
}
.single-post .af-single-mc .gallery .gallery-item dt,
.single-post .af-single-mc .gallery .gallery-item a,
.single-post .af-single-mc .gallery .gallery-item img {
display: block;
width: 100%;
max-width: 100%;
}
.single-post .af-single-mc .wp-block-gallery.has-nested-images {
align-items: stretch;
gap: 9px;
}
.single-post .af-single-mc .wp-block-gallery.has-nested-images figure.wp-block-image {
min-width: 0;
margin: 0 !important;
}
@media (max-width: 899.98px) {
:root {
--bz-type-section-title: 1.18rem;
--bz-type-lead-main: clamp(1.24rem, 4.7vw, 1.58rem);
--bz-type-featured-media: 1.12rem;
--bz-type-card-title: .94rem;
--bz-type-list-title: .88rem;
}
/* Keep headline imagery rectangular instead of near-square. */
.af-home-lead-card--hero {
min-height: 0 !important;
aspect-ratio: 16 / 9;
}
.af-home-lead-card--hero .af-home-lead-media,
.af-home-lead-card--hero .af-home-lead-media > a {
width: 100%;
height: 100%;
aspect-ratio: auto;
}
.af-home-lead-card--secondary {
grid-template-columns: minmax(0, 1fr) minmax(138px, 42%) !important;
min-height: 0 !important;
align-items: start;
direction: ltr;
}
.af-home-lead-card--secondary .af-home-lead-media {
grid-column: 2;
width: 100%;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 16 / 10;
direction: rtl;
}
.af-home-lead-card--secondary .af-home-lead-secondary-content {
grid-column: 1;
align-self: stretch;
direction: rtl;
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) minmax(122px, 43%) !important;
grid-template-rows: auto !important;
min-height: 0 !important;
align-items: center;
}
.af-home-lead-card--compact .af-home-lead-media {
width: 100%;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 16 / 10 !important;
align-self: center;
}
/* Featured TV and photo-report titles stay inside the image, as on desktop. */
body.home .af-video-index .af-video-main > a,
body.home .af-video-index.af-picture-video-layout .af-video-main > a {
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
}
body.home .af-video-index .af-video-main .af-media-frame--featured,
body.home .af-video-index.af-picture-video-layout .af-video-main .af-media-frame--featured {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
body.home .af-video-index .af-video-main h3,
body.home .af-video-index.af-picture-video-layout .af-video-main h3 {
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 4;
width: 100%;
margin: 0 !important;
padding: 44px 14px 12px !important;
color: var(--bz-white) !important;
background: linear-gradient(180deg, rgba(var(--bz-black-rgb), 0), rgba(var(--bz-black-rgb), .86)) !important;
border-radius: 0 0 8px 8px;
text-shadow: 0 2px 8px rgba(var(--bz-black-rgb), .45);
pointer-events: none;
}
/* Mobile gallery keeps two clean columns without half-width items inside cells. */
.single-post .af-single-mc .gallery,
.single-post .af-single-mc .gallery[class*="gallery-columns-"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.single-post .af-single-mc .wp-block-gallery.has-nested-images figure.wp-block-image {
width: calc(50% - 4.5px) !important;
flex: 0 0 calc(50% - 4.5px) !important;
}
}
@media (max-width: 782px) {
body.admin-bar nav.af-header.sticky {
top: 46px !important;
}
}
@media (max-width: 575.98px) {
.af-home-lead-card--secondary {
grid-template-columns: minmax(0, 1fr) minmax(124px, 40%) !important;
}
.af-home-lead-card--compact {
grid-template-columns: minmax(0, 1fr) minmax(126px, 41%) !important;
}
.af-home-lead-card--hero h2 {
line-height: 1.55;
}
body.home .af-video-index .af-video-main h3,
body.home .af-video-index.af-picture-video-layout .af-video-main h3 {
padding: 38px 12px 10px !important;
font-size: 1.05rem !important;
line-height: 1.6;
}
}
@media (max-width: 359.98px) {
.single-post .af-single-mc .gallery,
.single-post .af-single-mc .gallery[class*="gallery-columns-"] {
grid-template-columns: 1fr;
}
.single-post .af-single-mc .wp-block-gallery.has-nested-images figure.wp-block-image {
width: 100% !important;
flex-basis: 100% !important;
}
}
@media (prefers-reduced-motion: reduce) {
.af-home-lead-media img,
.af-media-frame img,
.af-news-img img,
.af-slide-img img,
.af-article-img img,
.af-archive-img img,
.af-related-img img,
.af-wide-img img,
.af-swiper-img img,
.af-picrure-content > a > img,
.single-post .af-single-mc .gallery img,
.single-post .af-single-mc .wp-block-gallery img {
transition: none !important;
transform: none !important;
}
}
/* Preserve intentionally single-column galleries on mobile. */
@media (max-width: 899.98px) {
.single-post .af-single-mc .gallery.gallery-columns-1 {
grid-template-columns: 1fr;
}
}
/* ============================================================
* 6.3.26 — Restore mobile headline-2 geometry and remove
* outline borders from headline cards 2–4.
* ============================================================ */
/* Headlines 2–4 should read as editorial blocks, not outlined boxes. */
.af-home-lead-card--secondary,
.af-home-lead-card--compact,
.af-home-lead-secondary-content {
border: 0 !important;
box-shadow: none !important;
}
/* Keep the established hierarchy: lead headline larger than featured media,
while still belonging to the same shared type scale. */
.af-home-lead-card--hero h2 {
font-size: var(--bz-type-lead-main) !important;
}
@media (max-width: 899.98px) {
/* Restore the stable Persian mobile composition:
image on the physical right, copy on the left. */
.af-home-lead-card--secondary {
display: grid !important;
grid-template-columns: minmax(132px, 40%) minmax(0, 1fr) !important;
grid-template-rows: minmax(144px, auto) !important;
align-items: stretch !important;
min-height: 144px !important;
overflow: hidden;
direction: rtl !important;
background: var(--bz-white) !important;
border-radius: 7px !important;
}
.af-home-lead-card--secondary .af-home-lead-media {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
height: 100% !important;
min-height: 144px !important;
aspect-ratio: auto !important;
align-self: stretch !important;
direction: rtl;
border-radius: 0 7px 7px 0;
}
.af-home-lead-card--secondary .af-home-lead-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.af-home-lead-card--secondary .af-home-lead-secondary-content {
grid-column: 2 !important;
grid-row: 1 !important;
display: flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
min-width: 0;
min-height: 0;
height: auto !important;
padding: 11px 13px !important;
direction: rtl !important;
background: var(--bz-white) !important;
border-radius: 7px 0 0 7px;
}
.af-home-lead-card--secondary h3 {
width: 100%;
margin: 0 !important;
text-align: right;
}
}
@media (max-width: 575.98px) {
.af-home-lead-card--secondary {
grid-template-columns: minmax(118px, 38%) minmax(0, 1fr) !important;
grid-template-rows: minmax(128px, auto) !important;
min-height: 128px !important;
}
.af-home-lead-card--secondary .af-home-lead-media {
min-height: 128px !important;
}
.af-home-lead-card--secondary .af-home-lead-secondary-content {
padding: 9px 11px !important;
}
}
/* ============================================================
* 6.3.26 — Match mobile headline-2 image ratio with headlines 3–4.
* ============================================================ */
@media (max-width: 899.98px) {
.af-home-lead-card--secondary {
grid-template-columns: minmax(122px, 43%) minmax(0, 1fr) !important;
grid-template-rows: auto !important;
min-height: 0 !important;
align-items: center !important;
}
.af-home-lead-card--secondary .af-home-lead-media {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 16 / 10 !important;
align-self: center !important;
}
.af-home-lead-card--secondary .af-home-lead-media > a {
display: block;
width: 100%;
height: 100%;
}
.af-home-lead-card--secondary .af-home-lead-media img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.af-home-lead-card--secondary .af-home-lead-secondary-content {
align-self: center !important;
min-height: 0 !important;
height: auto !important;
}
}
@media (max-width: 575.98px) {
.af-home-lead-card--secondary {
grid-template-columns: minmax(118px, 42%) minmax(0, 1fr) !important;
grid-template-rows: auto !important;
min-height: 0 !important;
}
.af-home-lead-card--secondary .af-home-lead-media {
min-height: 0 !important;
aspect-ratio: 16 / 10 !important;
}
}
/* ============================================================
* 6.3.27 — Unify image corner radii for lead headlines 2–4.
* Geometry, image ratios and responsive placement remain unchanged.
* ============================================================ */
/* Headlines 3 and 4: round the physical left edge too, so all image
corners use the same radius regardless of RTL/LTR grid placement. */
.af-home-lead-card--compact .af-home-lead-media {
border-radius: 8px !important;
}
.af-home-lead-card--compact .af-home-lead-media > a,
.af-home-lead-card--compact .af-home-lead-media img {
border-radius: inherit !important;
}
/* Headline 2: keep the current mobile geometry but round both lower
corners and use one uniform radius on the complete image frame. */
.af-home-lead-card--secondary .af-home-lead-media {
border-radius: 8px !important;
}
.af-home-lead-card--secondary .af-home-lead-media > a,
.af-home-lead-card--secondary .af-home-lead-media img {
border-radius: inherit !important;
}
/* ============================================================
* 6.3.28 — Restore desktop header brand scale and repair
* front-end advertisement dismissal controls.
* ============================================================ */
/* Desktop header: restore the stronger logo and search-icon scale used
before the compact homepage-header refinements. */
@media (min-width: 900px) {
nav.af-header .af-mobile-flex,
body.home nav.af-header .af-mobile-flex {
flex: 0 0 auto !important;
min-height: 54px;
}
nav.af-header .af-baztab-logo,
nav.af-header .navbar .af-baztab-logo,
body.home nav.af-header .af-baztab-logo,
body.home nav.af-header .navbar .af-baztab-logo {
width: auto !important;
height: auto !important;
max-width: 128px !important;
max-height: 54px !important;
margin: 0 0 0 22px !important;
object-fit: contain;
}
nav.af-header .show-btn,
body.home nav.af-header .show-btn {
flex: 0 0 42px !important;
width: 42px !important;
height: 42px !important;
}
nav.af-header .show-btn svg,
body.home nav.af-header .show-btn svg {
width: 22px !important;
height: 22px !important;
}
}
@media (min-width: 900px) and (max-width: 1120px) {
nav.af-header .af-baztab-logo,
nav.af-header .navbar .af-baztab-logo,
body.home nav.af-header .af-baztab-logo,
body.home nav.af-header .navbar .af-baztab-logo {
max-width: 116px !important;
max-height: 50px !important;
margin-left: 14px !important;
}
nav.af-header .show-btn,
body.home nav.af-header .show-btn {
flex-basis: 40px !important;
width: 40px !important;
height: 40px !important;
}
nav.af-header .show-btn svg,
body.home nav.af-header .show-btn svg {
width: 21px !important;
height: 21px !important;
}
}
/* Advertisement controls must sit above the clickable banner link. */
.af-advert-widget {
isolation: isolate;
}
.af-advert-widget > a {
position: relative;
z-index: 1;
}
.af-advert-meta {
top: 6px;
right: 6px;
z-index: 30;
display: inline-flex;
align-items: center;
gap: 4px;
pointer-events: auto;
}
.af-advert-meta .adsbtnclose {
box-sizing: border-box;
display: inline-block;
width: 25px;
height: 25px;
margin: 0;
padding: 4px;
color: var(--bz-white);
background: rgba(var(--bz-black-rgb), .62);
border: 0;
border-radius: 6px;
cursor: pointer;
pointer-events: auto;
transition: background-color .18s ease, transform .18s ease;
}
.af-advert-meta .adsbtnclose:hover,
.af-advert-meta .adsbtnclose:focus {
background: rgba(var(--bz-black-rgb), .82);
outline: none;
transform: scale(1.06);
}
.af-advert-meta .adsbtnclose:focus-visible {
box-shadow: 0 0 0 3px rgba(var(--bz-white-rgb), .72);
}
.af-advert-meta a.af-advert-info {
position: relative;
top: 0;
right: 0;
z-index: 1;
display: inline-flex;
align-items: center;
min-height: 25px;
padding: 2px 5px;
background: rgba(var(--bz-black-rgb), .62);
pointer-events: auto;
}
/* ============================================================
* 6.3.29 — Final low-risk audit: semantic ad control polish.
* ============================================================ */
.af-advert-meta .adsbtnclose svg {
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
/* ============================================================
* 6.3.30 — Final width alignment, complete mobile headline 2,
* calmer lead spacing, uncropped pishkhan feature and full mobile
* footer utility navigation.
* ============================================================ */
:root {
--bz-site-max-width: 1220px;
--bz-site-inline-gutter: 12px;
}
/* One editorial width across header, homepage, archive, article and footer.
This keeps the already-approved homepage lead width as the site standard. */
.container,
.container-fluid,
.container-af,
nav.af-header > .container-fluid,
.af-main-content.container-fluid,
.af-main-content > .container-fluid,
.af-main-content > .af-home-top.container-fluid,
.af-main-content > .af-news.container-fluid,
.af-main-content .container-af,
.af-video-index > .container-af,
.af-picture-service > .container-af,
.af-pishkhan > .container-af,
.af-pishkhan-picture-service > .container-fluid,
.breadcrumb-container,
footer > .container {
box-sizing: border-box;
width: 100% !important;
max-width: var(--bz-site-max-width) !important;
margin-right: auto !important;
margin-left: auto !important;
}
/* The lead already owns its responsive gutter; avoid a different visual width. */
.af-home-top {
max-width: var(--bz-site-max-width) !important;
}
@media (max-width: 899.98px) {
nav.af-header > .container-fluid,
.af-main-content.container-fluid,
.af-main-content > .container-fluid,
.af-main-content > .af-news.container-fluid,
.af-main-content .container-af,
.af-video-index > .container-af,
.af-picture-service > .container-af,
.af-pishkhan > .container-af,
.af-pishkhan-picture-service > .container-fluid,
.breadcrumb-container,
footer > .container {
padding-right: 10px !important;
padding-left: 10px !important;
}
/* Headline 2: let the text define the row height and show the full title. */
.af-home-lead-card--secondary {
grid-template-columns: minmax(126px, 42%) minmax(0, 1fr) !important;
grid-template-rows: auto !important;
align-items: start !important;
min-height: 0 !important;
height: auto !important;
overflow: hidden !important;
}
.af-home-lead-card--secondary .af-home-lead-media {
align-self: start !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 16 / 10 !important;
}
.af-home-lead-card--secondary .af-home-lead-secondary-content {
align-self: start !important;
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
padding: 11px 13px 12px !important;
}
.af-home-lead-card--secondary h3,
.af-home-lead-card--secondary h3 a {
max-height: none !important;
overflow: visible !important;
white-space: normal !important;
text-overflow: clip !important;
}
.af-home-lead-card--secondary h3 a {
display: block !important;
-webkit-box-orient: initial !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
}
}
@media (max-width: 575.98px) {
.af-home-lead-card--secondary {
grid-template-columns: minmax(118px, 41%) minmax(0, 1fr) !important;
}
.af-home-lead-card--secondary .af-home-lead-secondary-content {
padding: 10px 11px !important;
}
}
/* Desktop: add a little breathing room before the full-width lower row and
lower only the images in headlines 3–4 without moving their text blocks. */
@media (min-width: 900px) {
.af-home-lead-grid {
row-gap: 17px !important;
}
.af-home-lead-card--compact .af-home-lead-media {
align-self: stretch;
height: calc(100% - 7px) !important;
min-height: 141px !important;
margin-top: 7px;
margin-bottom: 0;
}
}
/* Pishkhan featured image: preserve the full source inside a predictable
editorial frame instead of stretching or cropping it. */
@media (min-width: 900px) {
.af-pishkhan-picture-content--featured > a {
aspect-ratio: 16 / 10 !important;
background: var(--bz-white);
}
.af-pishkhan-picture-content--featured > a > img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
background: var(--bz-white);
}
}
/* ============================================================
* 6.3.34 — Scoped mobile full-page layouts for About, Contact,
* Advertising and RSS pages. Restores the previously approved
* footer layout by removing the accidental 6.3.30 footer override.
* ============================================================ */
/* Standard static information pages: desktop remains unchanged. */
@media (max-width: 899.98px) {
.af-info-page-layout {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.af-info-page-layout > .row {
width: 100% !important;
margin: 0 !important;
}
.af-info-page-layout .af-main-single {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.af-info-page-shell {
box-sizing: border-box;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 12px 28px !important;
overflow: visible !important;
background: var(--bz-white) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.af-info-page-article {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.af-info-page-article .af-page-header {
margin: 0 -12px 20px !important;
padding: 18px 12px 0 !important;
background: linear-gradient(180deg, var(--bz-surface-muted) 0%, var(--bz-white) 100%);
border-bottom: 1px solid var(--bz-border);
}
.af-info-page-article .af-page-title {
margin: 0 !important;
color: var(--bz-brand-900);
font-size: clamp(1.5rem, 6.5vw, 1.9rem) !important;
font-weight: 800 !important;
line-height: 1.5 !important;
text-align: right;
overflow-wrap: anywhere;
}
.af-info-page-article .af-page-top-actions {
margin-top: 13px !important;
padding: 9px 0 11px !important;
border-top: 1px solid var(--bz-border) !important;
border-bottom: 0 !important;
}
.af-info-page-article > .af-single-2,
.af-info-page-article > a > .af-single-2 {
display: block;
width: 100% !important;
height: auto !important;
max-height: none !important;
margin: 0 0 18px !important;
object-fit: contain !important;
border-radius: 10px !important;
}
.af-info-page-article .af-single-mc,
.af-info-page-article .entry-content {
width: 100%;
max-width: none;
}
.af-info-page-article p,
.af-info-page-article li,
.af-info-page-article address {
color: var(--bz-text);
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 2.05 !important;
text-align: right;
overflow-wrap: anywhere;
}
.af-info-page-article p {
margin: 0 0 16px !important;
}
.af-info-page-article h2,
.af-info-page-article h3,
.af-info-page-article h4 {
margin: 26px 0 12px !important;
color: var(--bz-brand-900);
font-weight: 800 !important;
line-height: 1.65 !important;
overflow-wrap: anywhere;
}
.af-info-page-article h2 {
font-size: 1.3rem !important;
}
.af-info-page-article h3 {
font-size: 1.15rem !important;
}
.af-info-page-article h4 {
font-size: 1.04rem !important;
}
.af-info-page-article ul,
.af-info-page-article ol {
margin: 0 0 18px !important;
padding-right: 22px !important;
padding-left: 0 !important;
}
.af-info-page-article img,
.af-info-page-article video,
.af-info-page-article iframe,
.af-info-page-article embed,
.af-info-page-article object {
max-width: 100% !important;
}
.af-info-page-article img {
height: auto !important;
}
.af-info-page-article iframe {
width: 100% !important;
border-radius: 10px;
}
.af-info-page-article table {
display: block;
width: 100% !important;
max-width: 100%;
margin: 18px 0 !important;
overflow-x: auto;
border-collapse: collapse;
-webkit-overflow-scrolling: touch;
}
.af-info-page-article th,
.af-info-page-article td {
min-width: 110px;
padding: 10px 12px !important;
font-size: .9rem !important;
line-height: 1.75 !important;
}
.af-info-page-article .wp-block-columns {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
width: 100% !important;
margin: 0 0 18px !important;
}
.af-info-page-article .wp-block-column {
flex-basis: auto !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
.af-info-page-article input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.af-info-page-article select,
.af-info-page-article textarea {
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
min-height: 46px;
padding: 10px 12px !important;
border: 1px solid var(--bz-border) !important;
border-radius: 9px !important;
background: var(--bz-white);
font: inherit;
}
.af-info-page-article textarea {
min-height: 130px;
resize: vertical;
}
.af-info-page-article button,
.af-info-page-article input[type="submit"],
.af-info-page-article .wp-block-button,
.af-info-page-article .wp-block-button__link {
box-sizing: border-box;
max-width: 100%;
}
.af-info-page-article .wp-block-buttons,
.af-info-page-article .wp-block-button {
width: 100%;
}
.af-info-page-article .wp-block-button__link,
.af-info-page-article input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 10px 18px !important;
border-radius: 9px !important;
}
.af-info-page-article a {
overflow-wrap: anywhere;
word-break: break-word;
}
.af-info-page-shell + .af-single-meta,
.af-info-page-layout .af-single-meta {
max-width: 100%;
}
}
@media (max-width: 399.98px) {
.af-info-page-shell {
padding-right: 10px !important;
padding-left: 10px !important;
}
.af-info-page-article .af-page-header {
margin-right: -10px !important;
margin-left: -10px !important;
padding-right: 10px !important;
padding-left: 10px !important;
}
.af-info-page-article .af-page-title {
font-size: 1.42rem !important;
}
}
/* RSS full-page output: remove nested Bootstrap gutters and keep each
section/card genuinely full width on mobile. */
@media (max-width: 899.98px) {
.af-rss-layout,
.af-rss-layout > .af-rss-container,
.af-rss-layout > .af-rss-container > .row,
.af-rss-layout .af-feed {
box-sizing: border-box;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.af-rss-layout .baztab-rss-page {
box-sizing: border-box;
width: 100% !important;
max-width: none !important;
margin: 0 0 30px !important;
padding: 0 10px !important;
}
.af-rss-layout .baztab-rss-page__hero {
width: 100%;
margin: 0 0 14px;
padding: 15px 12px;
border-radius: 12px;
box-shadow: none;
}
.af-rss-layout .baztab-rss-page__title {
font-size: clamp(1.5rem, 7vw, 1.9rem) !important;
font-weight: 800;
line-height: 1.45;
}
.af-rss-layout .baztab-rss-page__body {
display: grid;
grid-template-columns: minmax(0, 1fr) !important;
gap: 14px;
width: 100%;
}
.af-rss-layout .baztab-rss-section {
box-sizing: border-box;
width: 100%;
min-width: 0;
margin: 0;
padding: 13px 10px 14px;
border-radius: 12px;
box-shadow: none;
}
.af-rss-layout .baztab-rss-section__title {
justify-content: flex-start;
margin: 0 0 12px;
padding: 0 2px 10px;
font-size: 1.2rem !important;
font-weight: 800;
text-align: right;
}
.af-rss-layout .baztab-rss-list {
width: 100%;
gap: 9px;
}
.af-rss-layout .baztab-rss-item {
box-sizing: border-box;
grid-template-columns: 36px minmax(0, 1fr) !important;
grid-template-rows: auto auto;
gap: 5px 9px;
width: 100%;
min-width: 0;
padding: 11px 10px;
border-radius: 10px;
}
.af-rss-layout .baztab-rss-item__icon {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
}
.af-rss-layout .baztab-rss-item__name {
grid-column: 2;
grid-row: 1;
width: 100%;
text-align: right;
font-size: .95rem;
line-height: 1.55;
}
.af-rss-layout .baztab-rss-item__link {
grid-column: 2;
grid-row: 2;
width: 100%;
min-width: 0;
text-align: left;
}
.af-rss-layout .baztab-rss-item__link a {
display: block;
width: 100%;
max-width: 100%;
overflow: visible;
font-size: .78rem;
line-height: 1.55;
text-align: left;
text-overflow: clip;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
}
@media (max-width: 359.98px) {
.af-rss-layout .baztab-rss-page {
padding-right: 8px !important;
padding-left: 8px !important;
}
.af-rss-layout .baztab-rss-section {
padding-right: 8px;
padding-left: 8px;
}
}
/* ============================================================
* 6.3.34 — Equal desktop height for the homepage lead image,
* Baztab TV featured image and photo-report featured image.
* The lead image is reduced slightly without changing mobile layout.
* ============================================================ */
@media (min-width: 900px) {
:root {
--bz-featured-main-height: clamp(248px, 27vw, 330px);
}
/* Prevent the lead image from stretching with the neighbouring sidebar. */
.af-home-lead-grid {
grid-template-rows: var(--bz-featured-main-height) minmax(148px, auto) !important;
}
.af-home-lead-card--hero,
.af-home-lead-card--hero .af-home-lead-media,
.af-home-lead-card--hero .af-home-lead-media > a,
.af-video-index .af-video-main .af-media-frame--featured,
.af-video-index.af-picture-video-layout .af-video-main .af-media-frame--featured,
.af-photo-video-player .af-media-frame--featured {
height: var(--bz-featured-main-height) !important;
min-height: 0 !important;
max-height: var(--bz-featured-main-height) !important;
aspect-ratio: auto !important;
}
.af-home-lead-card--hero .af-home-lead-media img,
.af-video-index .af-video-main .af-media-frame--featured img,
.af-video-index.af-picture-video-layout .af-video-main .af-media-frame--featured img,
.af-photo-video-player .af-media-frame--featured img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
}
/* ============================================================
* 6.3.34 — Final homepage proportion and icon polish.
* - Matches the lead image to the featured TV/photo frame geometry.
* - Adds breathing room between headlines 1 and 2.
* - Improves mobile popular-news readability.
* - Uses regular header-date weight and removes share underlines.
* - Modernizes homepage comment thumbnails and replaces legacy
* Twitter bird treatments with the current X mark.
* ============================================================ */
@media (min-width: 900px) {
/* The featured TV/photo card occupies one half of the shared 1220px
container. This lead-column ratio produces the same practical width,
while every featured frame uses the exact same 16:9 geometry. */
.af-home-lead-grid {
grid-template-columns: minmax(210px, .5fr) minmax(0, 1fr) !important;
grid-template-rows: auto minmax(148px, auto) !important;
column-gap: 16px !important;
}
.af-home-lead-card--hero {
align-self: start !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden;
}
.af-home-lead-card--hero .af-home-lead-media,
.af-home-lead-card--hero .af-home-lead-media > a,
.af-video-index .af-video-main .af-media-frame--featured,
.af-video-index.af-picture-video-layout .af-video-main .af-media-frame--featured,
.af-photo-video-player .af-media-frame--featured {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 16 / 9 !important;
}
}
/* The current date should read as utility information, not a headline. */
nav.af-header .af-header-date-trigger-primary,
nav.af-header .af-header-date-current,
nav.af-header .af-mobile-date-current {
font-weight: 500 !important;
}
/* Share-menu labels remain clean even when global article-link hover rules
apply text decoration. */
.af-share-dropdown .af-share-item,
.af-share-dropdown .af-share-item:hover,
.af-share-dropdown .af-share-item:focus,
.af-share-dropdown .af-share-item:focus-visible,
.af-share-dropdown .af-share-item:active,
.af-share-dropdown .af-share-item strong,
.af-share-dropdown .af-share-item small {
text-decoration: none !important;
}
@media (max-width: 899.98px) {
.af-home-top-sidebar .af-tab-index .tab-pane li {
min-height: 38px;
padding-top: 7px;
padding-bottom: 7px;
font-size: .86rem !important;
line-height: 1.66;
}
.af-home-top-sidebar .af-tab-index .tab-pane li a {
font-size: inherit !important;
font-weight: 600;
line-height: inherit;
-webkit-line-clamp: 3;
}
.af-home-top-sidebar .af-tab-index .tab-pane li::before {
top: 8px;
font-size: 1.08rem;
}
}
/* 6.3.36: The circular image treatment used by homepage side blocks
(including Accidents and Market Guide) is intentionally inherited from
the original .af-comment-section rules. X icon styling remains isolated. */
/* Current X identity for legacy content-icon values and footer social link. */
.af-twitter,
.af-x {
background: var(--bz-social-x) !important;
}
footer .af-footer-contact .af-child4 {
background: var(--bz-social-x) !important;
}
/* ============================================================
* 6.5.3 — Professional X-icon redesign for the homepage comment widget
* ============================================================ */
body.home .baztab-block--morecomment li {
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.8;
}
body.home .baztab-block--morecomment li .af-x,
body.home .baztab-block--morecomment li .af-twitter,
body.home .baztab-block--morecomment li svg.bi-x-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
flex: 0 0 36px;
padding: 8px;
margin: 1px 0 0 0;
border-radius: 999px;
background: linear-gradient(180deg, rgba(var(--bz-white-rgb), .96), rgba(var(--bz-black-rgb), .025)) !important;
border: 1px solid rgba(var(--bz-black-rgb), .11);
color: var(--bz-social-x) !important;
fill: currentColor;
box-shadow: 0 6px 14px rgba(var(--bz-black-rgb), .05);
vertical-align: middle;
}
body.home .baztab-block--morecomment li .af-x path,
body.home .baztab-block--morecomment li .af-twitter path,
body.home .baztab-block--morecomment li svg.bi-x-social path {
fill: currentColor;
}
body.home .baztab-block--morecomment li a,
body.home .baztab-block--morecomment li .af-post-title {
flex: 1 1 auto;
min-width: 0;
}
body.home .baztab-block--morecomment li:hover .af-x,
body.home .baztab-block--morecomment li:hover .af-twitter,
body.home .baztab-block--morecomment li:hover svg.bi-x-social {
border-color: rgba(var(--bz-accent-rgb), .18);
box-shadow: 0 9px 18px rgba(var(--bz-black-rgb), .08);
}
@media (max-width: 767.98px) {
body.home .baztab-block--morecomment li {
gap: 9px;
}
body.home .baztab-block--morecomment li .af-x,
body.home .baztab-block--morecomment li .af-twitter,
body.home .baztab-block--morecomment li svg.bi-x-social {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
flex-basis: 32px;
padding: 7px;
}
}
/* ============================================================
* 6.3.38 — Unified IRANSansX typography
* All readable interface and editorial text inherits IRANSansX.
* Technical code and icon-font glyphs retain their semantic fonts.
* ============================================================ */
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
}
/* ============================================================
* 6.4.0 — Final low-risk audit: accessibility and asset efficiency
* ============================================================ */
.af-skip-link {
position: fixed;
top: 10px;
right: 10px;
z-index: 100000;
padding: 10px 16px;
border-radius: 8px;
background: var(--bz-brand-900);
color: var(--bz-white);
font-size: .9rem;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
transform: translateY(-160%);
transition: transform .16s ease;
}
.af-skip-link:focus {
color: var(--bz-white);
transform: translateY(0);
outline: 3px solid rgba(var(--bz-accent-rgb), .35);
outline-offset: 2px;
}
#main-content:focus {
outline: none;
}
/* Prefer smaller modern background assets while retaining JPEG fallbacks. */
@supports (background-image: image-set(url("assets/imgs/videobg.webp") type("image/webp"))) {
body.home .af-video-index:not(.af-picture-video-layout) {
background-image: image-set(
url("assets/imgs/videobg.webp") type("image/webp"),
url("assets/imgs/videobg.jpg") type("image/jpeg")
) !important;
}
body.home .af-video-index.af-picture-video-layout {
background-image: image-set(
url("assets/imgs/pishkhanbg2.webp") type("image/webp"),
url("assets/imgs/pishkhanbg2.jpg") type("image/jpeg")
) !important;
}
body.home .af-picture-service.af-pishkhan-picture-service {
background-image: image-set(
url("assets/imgs/bgimage.webp") type("image/webp"),
url("assets/imgs/bgimage.jpg") type("image/jpeg")
) !important;
}
}
/* ============================================================
* 6.5.2 — Clean comments navigation without URL fragments
* ============================================================ */
#comments.baztab-comments-area {
scroll-margin-top: 110px;
}
#comments.baztab-comments-area:focus {
outline: none;
}
/* ============================================================
* 6.5.12 — True three-column homepage top
* Desktop DOM and grid are direct: popular | center | titles 2/3
* Exact width ratio: 1 : 2 : 1
* ============================================================ */
.home .af-home-top {
width: 100%;
max-width: 1220px;
margin: 0 auto 24px;
padding: 10px 12px 0;
}
.home .af-home-top > .af-top-header-ads {
margin: 0 0 12px;
}
.home .af-home-top > .af-top-header-ads:empty {
display: none;
}
.home .af-home-top-layout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) !important;
grid-template-rows: auto !important;
grid-template-areas: "popular center side" !important;
gap: 12px !important;
width: 100%;
min-width: 0;
align-items: start;
direction: ltr;
}
.home .af-home-top-sidebar {
grid-area: popular;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
direction: rtl;
}
.home .af-home-lead-center {
grid-area: center;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
direction: rtl;
}
.home .af-home-lead-side {
grid-area: side;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
direction: rtl;
}
.home .af-home-top-sidebar > .widget,
.home .af-home-top-sidebar .af-tab-index {
height: 100%;
margin: 0;
}
.home .af-home-top-sidebar .af-tab-index,
.home .af-home-lead-center,
.home .af-home-lead-side {
box-sizing: border-box;
padding: 9px;
background: var(--bz-white);
border: 1px solid rgba(var(--bz-black-rgb), .09);
border-radius: 14px;
box-shadow: 0 7px 20px rgba(var(--bz-black-rgb), .045);
}
.home .af-home-lead-center {
display: flex;
flex-direction: column;
gap: 10px;
}
.home .af-home-lead-side {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: repeat(2, auto);
gap: 10px;
align-content: start;
}
.home .af-home-lead-card {
position: relative;
min-width: 0;
width: 100%;
margin: 0;
overflow: hidden;
background: var(--bz-white);
border: 1px solid rgba(var(--bz-black-rgb), .07);
border-radius: 9px;
box-shadow: 0 3px 10px rgba(var(--bz-black-rgb), .035);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home .af-home-lead-card:hover {
border-color: rgba(var(--bz-accent-rgb), .15);
box-shadow: 0 9px 20px rgba(var(--bz-black-rgb), .075);
transform: translateY(-1px);
}
.home .af-home-lead-card a {
color: inherit;
}
.home .af-home-lead-media,
.home .af-home-lead-media > a,
.home .af-home-lead-media picture {
position: relative;
display: block;
width: 100%;
min-width: 0;
overflow: hidden;
}
.home .af-home-lead-media img {
position: absolute;
inset: 0;
display: block;
width: 100% !important;
height: 100% !important;
max-width: none;
margin: 0;
object-fit: cover !important;
object-position: center center;
transition: transform .34s ease;
}
.home .af-home-lead-card:hover .af-home-lead-media img {
transform: scale(1.025);
}
.home .af-home-lead-category {
position: absolute;
z-index: 3;
top: 9px;
right: 9px;
max-width: calc(100% - 18px);
}
.home .af-home-lead-category > a,
.home .af-home-lead-category > a > span {
display: inline-flex;
align-items: center;
min-height: 25px;
margin: 0;
padding: 3px 9px;
color: var(--bz-white) !important;
background: var(--bz-accent-600);
border-radius: 6px;
font-size: .72rem;
font-weight: 800;
line-height: 1.4;
}
.home .af-home-lead-category > a {
padding: 0;
background: transparent;
}
/* Title 1: full double-width center column, 16:9. */
.home .af-home-lead-card--hero {
position: relative;
width: 100%;
min-height: 0 !important;
height: auto !important;
aspect-ratio: 16 / 9;
background: var(--bz-brand-900);
}
.home .af-home-lead-card--hero .af-home-lead-media,
.home .af-home-lead-card--hero .af-home-lead-media > a,
.home .af-home-lead-card--hero .af-home-lead-media picture {
position: absolute;
inset: 0;
width: 100%;
height: 100% !important;
}
.home .af-home-lead-shade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(var(--bz-black-rgb), .04) 18%, rgba(var(--bz-black-rgb), .88) 100%);
pointer-events: none;
}
.home .af-home-lead-content {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
padding: 62px 22px 18px;
color: var(--bz-white);
}
.home .af-home-lead-overtitle {
display: inline-block;
margin-bottom: 6px;
color: rgba(var(--bz-white-rgb), .92);
font-size: .82rem;
font-weight: 600;
}
.home .af-home-lead-card--hero h2 {
max-width: 96%;
margin: 0;
color: var(--bz-white);
font-size: clamp(1.48rem, 2.05vw, 2rem);
font-weight: 900;
line-height: 1.48;
text-shadow: 0 2px 8px rgba(var(--bz-black-rgb), .72);
}
.home .af-home-lead-card--hero h2 a {
display: -webkit-box;
overflow: hidden;
color: inherit;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.home .af-home-lead-card--hero p {
display: -webkit-box;
max-width: 94%;
max-height: 0;
margin: 0;
overflow: hidden;
color: rgba(var(--bz-white-rgb), .94);
font-size: .9rem;
line-height: 1.85;
opacity: 0;
transform: translateY(7px);
transition: max-height .3s ease, margin .3s ease, opacity .22s ease, transform .3s ease;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
@media (hover: hover) and (pointer: fine) {
.home .af-home-lead-card--hero:hover p {
max-height: 5.7em;
margin-top: 8px;
opacity: 1;
transform: translateY(0);
}
}
.home .af-home-lead-card--hero:focus-within p {
max-height: 5.7em;
margin-top: 8px;
opacity: 1;
transform: translateY(0);
}
/* Titles 4 and 5: two equal cards under title 1. */
.home .af-home-lead-bottom {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: auto !important;
gap: 10px !important;
min-width: 0;
}
.home .af-home-lead-card--bottom {
display: flex;
flex-direction: column;
min-width: 0;
height: auto !important;
}
.home .af-home-lead-card--bottom .af-home-lead-media,
.home .af-home-lead-card--bottom .af-home-lead-media > a,
.home .af-home-lead-card--bottom .af-home-lead-media picture {
height: auto !important;
aspect-ratio: 16 / 9;
}
.home .af-home-lead-bottom-copy {
padding: 10px 11px 12px;
}
.home .af-home-lead-card--bottom h3 {
margin: 0;
color: var(--bz-brand-900);
font-size: .94rem;
font-weight: 800;
line-height: 1.68;
}
.home .af-home-lead-card--bottom h3 a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
/* Titles 2 and 3: one card above the other in the right 1fr column. */
.home .af-home-lead-card--side {
display: flex;
flex-direction: column;
min-width: 0;
height: auto !important;
}
.home .af-home-lead-card--side .af-home-lead-media,
.home .af-home-lead-card--side .af-home-lead-media > a,
.home .af-home-lead-card--side .af-home-lead-media picture {
height: auto !important;
aspect-ratio: 4 / 3;
}
.home .af-home-lead-side-copy {
padding: 10px 11px 12px;
}
.home .af-home-lead-card--side h3 {
margin: 0;
color: var(--bz-brand-900);
font-size: .96rem;
font-weight: 800;
line-height: 1.7;
}
.home .af-home-lead-card--side h3 a {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.home .af-home-top-sidebar .af-tab-index > .nav-pills {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
margin: 0 0 7px !important;
padding: 4px;
background: var(--bz-surface-muted);
border: 1px solid rgba(var(--bz-black-rgb), .06);
border-radius: 10px;
}
.home .af-home-top-sidebar .af-tab-index > .nav-pills .nav-link {
width: 100%;
min-height: 37px;
padding: 6px 8px;
border-radius: 8px;
font-size: .81rem;
font-weight: 800;
}
.home .af-home-top-sidebar .af-tab-index .tab-pane li {
position: relative;
display: block;
min-height: 39px;
margin: 0;
padding: 7px 30px 7px 3px;
border-bottom: 1px solid var(--bz-surface-muted);
font-size: .78rem;
line-height: 1.58;
}
.home .af-home-top-sidebar .af-tab-index .tab-pane li::before {
top: 8px;
right: 2px;
width: 21px;
font-size: 1rem;
}
.home .af-home-top-sidebar .af-tab-index .tab-pane li a {
font-weight: 700;
-webkit-line-clamp: 2;
}
/* The theme's real desktop breakpoint is 900px; keep three columns there too. */
@media (min-width: 900px) and (max-width: 1099.98px) {
.home .af-home-top {
padding-right: 8px;
padding-left: 8px;
}
.home .af-home-top-layout {
gap: 9px !important;
}
.home .af-home-top-sidebar .af-tab-index,
.home .af-home-lead-center,
.home .af-home-lead-side {
padding: 7px;
border-radius: 11px;
}
.home .af-home-lead-center,
.home .af-home-lead-side,
.home .af-home-lead-bottom {
gap: 8px !important;
}
.home .af-home-lead-card--hero h2 {
font-size: clamp(1.18rem, 2vw, 1.55rem);
}
.home .af-home-lead-content {
padding: 48px 14px 13px;
}
.home .af-home-lead-card--bottom h3,
.home .af-home-lead-card--side h3 {
font-size: .78rem;
line-height: 1.62;
}
.home .af-home-lead-bottom-copy,
.home .af-home-lead-side-copy {
padding: 8px 8px 9px;
}
.home .af-home-top-sidebar .af-tab-index .tab-pane li {
min-height: 34px;
padding-top: 6px;
padding-bottom: 6px;
font-size: .69rem;
}
}
/* Tablet and mobile: center first, side stories next, popular list last. */
@media (max-width: 899.98px) {
.home .af-home-top {
margin-bottom: 18px;
padding-right: 9px;
padding-left: 9px;
}
.home .af-home-top-layout {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas:
"center"
"side"
"popular" !important;
gap: 11px !important;
}
.home .af-home-lead-center,
.home .af-home-lead-side,
.home .af-home-top-sidebar .af-tab-index {
padding: 8px;
border-radius: 13px;
}
.home .af-home-lead-side {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto;
gap: 9px;
}
.home .af-home-lead-card--side .af-home-lead-media,
.home .af-home-lead-card--side .af-home-lead-media > a,
.home .af-home-lead-card--side .af-home-lead-media picture {
aspect-ratio: 16 / 9;
}
.home .af-home-top-sidebar .af-tab-index {
height: auto;
}
}
@media (max-width: 575.98px) {
.home .af-home-top {
padding-right: 7px;
padding-left: 7px;
}
.home .af-home-lead-bottom,
.home .af-home-lead-side {
grid-template-columns: minmax(0, 1fr) !important;
}
.home .af-home-lead-card--hero h2 {
max-width: 100%;
font-size: clamp(1.18rem, 5vw, 1.55rem);
}
.home .af-home-lead-content {
padding: 50px 13px 13px;
}
.home .af-home-lead-card--hero p {
display: none;
}
.home .af-home-lead-card--bottom h3,
.home .af-home-lead-card--side h3 {
font-size: .92rem;
}
}
@media (prefers-reduced-motion: reduce) {
.home .af-home-lead-card,
.home .af-home-lead-media img,
.home .af-home-lead-card--hero p {
transition: none;
}
.home .af-home-lead-card:hover {
transform: none;
}
}
/* ============================================================
* 7.0.0 — Top section cleanup + subtle background + mobile story list
* - Removes heavy boxes/borders from the three top columns.
* - Keeps a very subtle background language aligned with the theme.
* - Restores a calmer mobile presentation for headlines 2–5.
* ============================================================ */
.home .af-home-top {
background: linear-gradient(180deg, rgba(var(--bz-black-rgb), .018) 0%, rgba(var(--bz-black-rgb), .008) 48%, rgba(var(--bz-black-rgb), 0) 100%);
border-radius: 18px;
}
.home .af-home-top-layout {
gap: 14px !important;
}
.home .af-home-top-sidebar .af-tab-index,
.home .af-home-lead-center,
.home .af-home-lead-side {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.home .af-home-lead-card {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.home .af-home-lead-card:hover {
border-color: transparent !important;
box-shadow: none !important;
}
.home .af-home-lead-card--hero,
.home .af-home-lead-card--side,
.home .af-home-lead-card--bottom {
overflow: visible;
}
.home .af-home-lead-card--hero .af-home-lead-media,
.home .af-home-lead-card--side .af-home-lead-media,
.home .af-home-lead-card--bottom .af-home-lead-media,
.home .af-home-lead-card--hero .af-home-lead-media > a,
.home .af-home-lead-card--side .af-home-lead-media > a,
.home .af-home-lead-card--bottom .af-home-lead-media > a,
.home .af-home-lead-card--hero .af-home-lead-media picture,
.home .af-home-lead-card--side .af-home-lead-media picture,
.home .af-home-lead-card--bottom .af-home-lead-media picture {
border-radius: 12px;
overflow: hidden;
}
.home .af-home-lead-bottom,
.home .af-home-lead-side {
gap: 14px !important;
}
.home .af-home-lead-bottom-copy,
.home .af-home-lead-side-copy {
padding: 10px 2px 0 !important;
background: transparent !important;
}
.home .af-home-lead-card--side h3,
.home .af-home-lead-card--bottom h3 {
font-weight: 800;
line-height: 1.78;
}
.home .af-home-top-sidebar > .widget,
.home .af-home-top-sidebar .af-tab-index {
background: transparent !important;
}
.home .af-home-top-sidebar .af-tab-index > .nav-pills {
margin-bottom: 10px !important;
padding: 5px;
background: rgba(var(--bz-white-rgb), .72);
border: 1px solid rgba(var(--bz-black-rgb), .05);
border-radius: 12px;
box-shadow: none;
}
.home .af-home-top-sidebar .af-tab-index .tab-content {
background: rgba(var(--bz-white-rgb), .64);
border: 1px solid rgba(var(--bz-black-rgb), .05);
border-radius: 12px;
}
.home .af-home-top-sidebar .af-tab-index .tab-pane {
padding: 2px 10px;
}
.home .af-home-top-sidebar .af-tab-index .tab-pane li {
padding-right: 28px;
background: transparent;
}
@media (min-width: 900px) {
.home .af-home-top-sidebar .af-tab-index,
.home .af-home-lead-center,
.home .af-home-lead-side {
align-self: start;
}
}
@media (max-width: 899.98px) {
.home .af-home-top {
padding-top: 8px;
padding-right: 8px;
padding-left: 8px;
border-radius: 16px;
}
.home .af-home-top-layout {
gap: 14px !important;
}
.home .af-home-lead-side,
.home .af-home-lead-bottom {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.home .af-home-lead-card--side,
.home .af-home-lead-card--bottom {
display: grid;
grid-template-columns: minmax(118px, 37%) minmax(0, 1fr);
align-items: start;
column-gap: 12px;
row-gap: 0;
padding-bottom: 10px;
border-bottom: 1px solid rgba(var(--bz-black-rgb), .07) !important;
}
.home .af-home-lead-card--side:last-child,
.home .af-home-lead-card--bottom:last-child {
border-bottom: 0 !important;
padding-bottom: 0;
}
.home .af-home-lead-card--side .af-home-lead-media,
.home .af-home-lead-card--side .af-home-lead-media > a,
.home .af-home-lead-card--side .af-home-lead-media picture,
.home .af-home-lead-card--bottom .af-home-lead-media,
.home .af-home-lead-card--bottom .af-home-lead-media > a,
.home .af-home-lead-card--bottom .af-home-lead-media picture {
width: 100%;
height: auto !important;
aspect-ratio: 16 / 10;
}
.home .af-home-lead-side-copy,
.home .af-home-lead-bottom-copy {
display: flex;
align-items: center;
min-height: 100%;
padding: 0 !important;
}
.home .af-home-lead-card--side h3,
.home .af-home-lead-card--bottom h3 {
font-size: .95rem;
line-height: 1.82;
}
.home .af-home-top-sidebar .af-tab-index > .nav-pills,
.home .af-home-top-sidebar .af-tab-index .tab-content {
background: rgba(var(--bz-white-rgb), .78);
}
}
@media (max-width: 575.98px) {
.home .af-home-top {
padding-right: 6px;
padding-left: 6px;
}
.home .af-home-lead-card--side,
.home .af-home-lead-card--bottom {
grid-template-columns: minmax(108px, 38%) minmax(0, 1fr);
column-gap: 10px;
padding-bottom: 9px;
}
.home .af-home-lead-card--side .af-home-lead-media,
.home .af-home-lead-card--side .af-home-lead-media > a,
.home .af-home-lead-card--side .af-home-lead-media picture,
.home .af-home-lead-card--bottom .af-home-lead-media,
.home .af-home-lead-card--bottom .af-home-lead-media > a,
.home .af-home-lead-card--bottom .af-home-lead-media picture {
aspect-ratio: 16 / 10;
border-radius: 10px;
}
.home .af-home-lead-card--side h3,
.home .af-home-lead-card--bottom h3 {
font-size: .91rem;
line-height: 1.76;
}
.home .af-home-top-sidebar .af-tab-index .tab-pane li {
min-height: 42px;
}
}
/* ============================================================
* Baztab newsroom v2.1.1 — White circular frame + larger black X
* The X glyph remains identical to the footer SVG; only the
* comment-widget presentation is inverted and enlarged.
* ============================================================ */
body.home .baztab-block--morecomment li .af-x,
body.home .baztab-block--morecomment li .af-twitter,
body.home .baztab-block--morecomment li svg.bi-x-social {
display: inline-flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
flex: 0 0 42px !important;
margin: 1px 0 0 !important;
padding: 5px !important;
color: #111111 !important;
background: #ffffff !important;
border: 1px solid rgba(var(--bz-black-rgb), .11) !important;
border-radius: 50% !important;
box-shadow: 0 3px 10px rgba(var(--bz-black-rgb), .08) !important;
fill: currentColor !important;
line-height: 1;
vertical-align: middle;
overflow: visible;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.home .baztab-block--morecomment li .af-x path,
body.home .baztab-block--morecomment li .af-twitter path,
body.home .baztab-block--morecomment li svg.bi-x-social path {
fill: #111111 !important;
stroke: none !important;
}
body.home .baztab-block--morecomment li:hover .af-x,
body.home .baztab-block--morecomment li:hover .af-twitter,
body.home .baztab-block--morecomment li:hover svg.bi-x-social,
body.home .baztab-block--morecomment li:focus-within .af-x,
body.home .baztab-block--morecomment li:focus-within .af-twitter,
body.home .baztab-block--morecomment li:focus-within svg.bi-x-social {
transform: translateY(-2px);
border-color: rgba(var(--bz-black-rgb), .18) !important;
box-shadow: 0 6px 15px rgba(var(--bz-black-rgb), .12) !important;
opacity: 1;
}
@media (max-width: 767.98px) {
body.home .baztab-block--morecomment li .af-x,
body.home .baztab-block--morecomment li .af-twitter,
body.home .baztab-block--morecomment li svg.bi-x-social {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
flex-basis: 40px !important;
padding: 5px !important;
}
}
/* ------------------------------------------------------------
* 2.2.2 — Restore natural circular thumbnail size in Accidents
* and Market Guide widgets without affecting other round lists.
* ------------------------------------------------------------ */
.home :is(.baztab-round-list--accidents, .baztab-round-list--market-guide) li {
align-items: center;
}
.home :is(.baztab-round-list--accidents, .baztab-round-list--market-guide) li > a:first-child {
width: 82px !important;
min-width: 82px !important;
flex: 0 0 82px !important;
margin-left: 10px;
}
.home :is(.baztab-round-list--accidents, .baztab-round-list--market-guide) li > a:first-child img {
display: block;
width: 76px !important;
height: 76px !important;
max-width: 76px !important;
margin: 0 auto;
padding: 2px !important;
border-width: 2px !important;
border-radius: 50% !important;
object-fit: cover;
}
.home :is(.baztab-round-list--accidents, .baztab-round-list--market-guide) li > a:last-child {
padding-top: 0 !important;
line-height: 1.75;
}
@media (max-width: 767.98px) {
.home :is(.baztab-round-list--accidents, .baztab-round-list--market-guide) li > a:first-child {
width: 74px !important;
min-width: 74px !important;
flex-basis: 74px !important;
margin-left: 9px;
}
.home :is(.baztab-round-list--accidents, .baztab-round-list--market-guide) li > a:first-child img {
width: 68px !important;
height: 68px !important;
max-width: 68px !important;
}
}
/* ============================================================
* Baztab newsroom v2.2.3 — Editorial spacing rhythm
* Tightens image/title relationships and normalizes recurring
* heading, card and list gaps without changing column geometry.
* ============================================================ */
:root {
--bz-editorial-gap-xs: 6px;
--bz-editorial-gap-sm: 8px;
--bz-editorial-gap-md: 12px;
--bz-editorial-gap-lg: 14px;
}
/* Section headings should sit closer to the content they introduce. */
.home .af-news-main > .af-news-head,
.home .af-side-index > .af-head-title,
.home .af-side-allnews > .af-head-title {
margin-top: 0;
}
.home .af-news-main > .af-news-head {
align-items: center;
gap: var(--bz-editorial-gap-md);
margin-bottom: var(--bz-editorial-gap-md);
}
.home .af-news-main > .af-news-head .af-head-title,
.home .af-side-index > .af-head-title,
.home .af-side-allnews > .af-head-title {
margin-bottom: 0;
}
.home .af-side-index > ul,
.home .af-side-allnews > ul {
margin-top: var(--bz-editorial-gap-lg);
margin-bottom: 0;
}
.home .af-side-index li,
.home .af-side-allnews li {
margin-bottom: var(--bz-editorial-gap-sm);
}
.home .af-side-index li:last-child,
.home .af-side-allnews li:last-child {
margin-bottom: 0;
}
/* Circular thumbnail lists: remove hidden wrapper/padding space. */
.home .af-comment-section li {
align-items: center;
}
.home .af-comment-section li > a:last-child {
min-width: 0;
margin: 0 !important;
padding: 0 !important;
line-height: 1.72;
align-self: center;
}
.home :is(.baztab-round-list--accidents, .baztab-round-list--market-guide) li > a:first-child {
width: 76px !important;
min-width: 76px !important;
flex: 0 0 76px !important;
margin-left: 7px !important;
}
.home :is(.baztab-round-list--accidents, .baztab-round-list--market-guide) li > a:first-child img {
margin: 0 !important;
}
/* Standard horizontal cards: predictable image-to-copy spacing. */
.home .af-news-main .af-article-main {
padding-top: var(--bz-editorial-gap-md);
padding-bottom: var(--bz-editorial-gap-md);
}
.home .af-news-main .af-article-img:not(.big) {
width: 34%;
flex: 0 0 34%;
margin-left: var(--bz-editorial-gap-md);
}
.home .af-news-main .af-article-desc:not(.big) {
width: auto;
min-width: 0;
flex: 1 1 auto;
}
.home .af-article-desc h3,
.home .af-video-desc h3,
.home .af-video-item h3,
.home .af-related-main h5 {
margin-top: 0;
}
.home .af-article-desc h3 {
margin-bottom: var(--bz-editorial-gap-xs);
}
.home .af-article-desc p {
margin: var(--bz-editorial-gap-xs) 0 0;
}
/* Media cards and related stories: keep titles visually attached to images. */
.home .af-video-desc,
.home .af-video-item h3,
.home .af-related-main h5,
.home .af-pishkhan-picture-content h3 {
margin-top: var(--bz-editorial-gap-sm) !important;
margin-bottom: 0 !important;
}
.home .af-video-main h3 {
margin-top: var(--bz-editorial-gap-sm) !important;
}
/* Archive rows use the same compact image/copy rhythm. */
body:not(.home) .af-archive-item {
column-gap: var(--bz-editorial-gap-lg);
}
body:not(.home) .af-archive-img {
margin-left: 0;
}
body:not(.home) .af-archive-desc {
min-width: 0;
flex: 1 1 auto;
}
body:not(.home) .af-archive-desc h2 {
margin: 0 0 var(--bz-editorial-gap-xs);
}
body:not(.home) .af-archive-desc p {
margin: var(--bz-editorial-gap-xs) 0 0;
}
@media (max-width: 899.98px) {
.home .af-news-main > .af-news-head {
margin-bottom: 10px;
}
.home .af-side-index > ul,
.home .af-side-allnews > ul {
margin-top: 11px;
}
.home .af-news-main .af-article-main {
padding-top: 10px;
padding-bottom: 10px;
}
.home .af-news-main .af-article-img:not(.big) {
width: 100%;
flex-basis: 100%;
margin-left: 0;
margin-bottom: var(--bz-editorial-gap-sm);
}
body:not(.home) .af-archive-img {
margin-bottom: 12px;
}
}
@media (max-width: 767.98px) {
.home :is(.baztab-round-list--accidents, .baztab-round-list--market-guide) li > a:first-child {
width: 68px !important;
min-width: 68px !important;
flex-basis: 68px !important;
margin-left: 7px !important;
}
.home .af-comment-section li > a:last-child {
line-height: 1.68;
}
}
/* ============================================================
* Baztab newsroom v2.2.4 — Special/Favorites spacing repair
* Isolates these tabbed news lists from the broad 2.2.3 rhythm
* so their image and copy retain the stable original geometry.
* ============================================================ */
.home :is(#nav-special-tabContent, #nav-fav-tabContent) .af-article-main {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-start;
gap: 15px !important;
padding: 15px 0 !important;
}
.home :is(#nav-special-tabContent, #nav-fav-tabContent) .af-article-img:not(.big) {
width: 35% !important;
min-width: 0;
flex: 0 0 35% !important;
margin: 0 !important;
}
.home :is(#nav-special-tabContent, #nav-fav-tabContent) .af-article-desc:not(.big) {
width: auto !important;
min-width: 0;
flex: 1 1 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.home :is(#nav-special-tabContent, #nav-fav-tabContent) .af-article-desc h3 {
margin: 0 0 7px !important;
}
.home :is(#nav-special-tabContent, #nav-fav-tabContent) .af-article-desc p {
margin: 6px 0 0 !important;
}
@media (max-width: 899.98px) {
.home :is(#nav-special-tabContent, #nav-fav-tabContent) .af-article-main {
display: block !important;
padding: 11px 0 !important;
}
.home :is(#nav-special-tabContent, #nav-fav-tabContent) .af-article-img:not(.big) {
width: 100% !important;
max-width: none !important;
margin: 0 0 10px !important;
}
.home :is(#nav-special-tabContent, #nav-fav-tabContent) .af-article-desc:not(.big) {
width: 100% !important;
}
}
/* ============================================================
* 2.3.2 — Complete lead-story title and excerpt visibility
* Desktop: remove truncation on hover/focus and reveal the full
* excerpt inside a bounded overlay. Mobile: place the full title
* below the image and intentionally omit the excerpt.
* ============================================================ */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
.home .af-home-lead-card--hero:hover .af-home-lead-content,
.home .af-home-lead-card--hero:focus-within .af-home-lead-content {
box-sizing: border-box;
max-height: calc(100% - 12px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(var(--bz-white-rgb), .45) transparent;
}
.home .af-home-lead-card--hero:hover .af-home-lead-content::-webkit-scrollbar,
.home .af-home-lead-card--hero:focus-within .af-home-lead-content::-webkit-scrollbar {
width: 5px;
}
.home .af-home-lead-card--hero:hover .af-home-lead-content::-webkit-scrollbar-thumb,
.home .af-home-lead-card--hero:focus-within .af-home-lead-content::-webkit-scrollbar-thumb {
background: rgba(var(--bz-white-rgb), .42);
border-radius: 999px;
}
.home .af-home-lead-card--hero:hover h2 a,
.home .af-home-lead-card--hero:focus-within h2 a {
display: block;
overflow: visible;
white-space: normal;
-webkit-box-orient: initial;
-webkit-line-clamp: unset;
}
.home .af-home-lead-card--hero:hover p,
.home .af-home-lead-card--hero:focus-within p {
display: block;
max-height: none;
overflow: visible;
opacity: 1;
transform: none;
-webkit-box-orient: initial;
-webkit-line-clamp: unset;
}
}
@media (max-width: 899.98px) {
.home .af-home-lead-card--hero {
display: flex;
flex-direction: column;
aspect-ratio: auto;
background: transparent !important;
overflow: visible;
}
.home .af-home-lead-card--hero .af-home-lead-media,
.home .af-home-lead-card--hero .af-home-lead-media > a,
.home .af-home-lead-card--hero .af-home-lead-media picture {
position: relative;
inset: auto;
width: 100%;
height: auto !important;
aspect-ratio: 16 / 9;
}
.home .af-home-lead-card--hero .af-home-lead-content {
position: static;
max-height: none;
padding: 10px 2px 0;
overflow: visible;
color: var(--bz-text-strong);
background: transparent;
}
.home .af-home-lead-card--hero .af-home-lead-shade {
display: none;
}
.home .af-home-lead-card--hero .af-home-lead-overtitle {
margin-bottom: 5px;
color: var(--bz-text-secondary);
}
.home .af-home-lead-card--hero h2 {
max-width: 100%;
margin: 0;
color: var(--bz-text-strong);
font-size: clamp(1.18rem, 4.6vw, 1.55rem);
line-height: 1.68;
text-shadow: none;
}
.home .af-home-lead-card--hero h2 a {
display: block;
overflow: visible;
white-space: normal;
-webkit-box-orient: initial;
-webkit-line-clamp: unset;
}
.home .af-home-lead-card--hero p {
display: none !important;
}
}
/* ============================================================
* 2.3.3 — Mobile lead-story white title restoration
* Keep the complete mobile title, omit the excerpt, and restore
* the established white editorial treatment on a dark panel.
* ============================================================ */
@media (max-width: 899.98px) {
.home .af-home-lead-card--hero .af-home-lead-content {
padding: 12px 14px 13px;
color: var(--bz-white);
background: linear-gradient(135deg, var(--bz-brand-900), var(--bz-brand-800));
border-radius: 0 0 10px 10px;
}
.home .af-home-lead-card--hero .af-home-lead-overtitle {
color: rgba(var(--bz-white-rgb), .78);
}
.home .af-home-lead-card--hero h2,
.home .af-home-lead-card--hero h2 a,
.home .af-home-lead-card--hero h2 a:visited {
color: var(--bz-white) !important;
text-shadow: none;
}
}
/* ============================================================
* 2.3.4 — Mobile lead title overlay without navy panel
* Removes the separate navy background below the lead image while
* keeping the complete white title readable on the image itself.
* ============================================================ */
@media (max-width: 899.98px) {
.home .af-home-lead-card--hero {
position: relative;
display: block;
}
.home .af-home-lead-card--hero .af-home-lead-content {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
padding: 54px 14px 14px;
color: var(--bz-white);
background: transparent !important;
border-radius: 0 !important;
pointer-events: none;
}
.home .af-home-lead-card--hero .af-home-lead-content a {
pointer-events: auto;
}
.home .af-home-lead-card--hero .af-home-lead-shade {
display: block;
background: linear-gradient(
180deg,
rgba(var(--bz-black-rgb), 0) 28%,
rgba(var(--bz-black-rgb), .25) 50%,
rgba(var(--bz-black-rgb), .88) 100%
);
}
.home .af-home-lead-card--hero .af-home-lead-overtitle {
color: rgba(var(--bz-white-rgb), .84);
}
.home .af-home-lead-card--hero h2,
.home .af-home-lead-card--hero h2 a,
.home .af-home-lead-card--hero h2 a:visited {
color: var(--bz-white) !important;
text-shadow: 0 2px 10px rgba(var(--bz-black-rgb), .72);
}
}
/* ============================================================
* 2.3.6 — Mobile media composition restoration and optimization
* Restores the established mobile hierarchy for Baztab TV and
* Photo Reports: one full-width lead card followed by a clean
* two-column supporting grid. Desktop composition is untouched.
* ============================================================ */
@media (max-width: 899.98px) {
body.home .af-mobile-media-section {
margin: 16px 0 !important;
padding: 20px 0 22px !important;
background-attachment: scroll !important;
}
body.home .af-mobile-media-section > .container-af {
width: calc(100% - 24px) !important;
max-width: none !important;
margin-inline: auto !important;
padding: 0 !important;
}
body.home .af-mobile-media-section .af-head-title {
margin: 0 0 14px !important;
font-size: 1.18rem !important;
line-height: 1.55 !important;
}
body.home .af-mobile-media-section .af-media-layout-row {
display: block !important;
width: 100% !important;
margin: 0 !important;
}
body.home .af-mobile-media-section :is(.af-media-featured-col, .af-media-supporting-col) {
width: 100% !important;
max-width: none !important;
flex: 0 0 100% !important;
padding: 0 !important;
}
body.home .af-mobile-media-section .af-video-player,
body.home .af-mobile-media-section .af-video-main {
width: 100% !important;
height: auto !important;
margin: 0 !important;
}
body.home .af-mobile-media-section .af-video-main > a {
position: static !important;
display: block !important;
overflow: visible !important;
border-radius: 0 !important;
}
body.home .af-mobile-media-section .af-video-main .af-media-frame--featured {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
border-radius: 8px !important;
}
body.home .af-mobile-media-section .af-video-main .af-media-frame--featured img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
body.home .af-mobile-media-section .af-video-main h3 {
position: static !important;
inset: auto !important;
display: block !important;
width: 100% !important;
margin: 9px 0 0 !important;
padding: 0 !important;
color: var(--bz-white) !important;
background: transparent !important;
border-radius: 0 !important;
font-size: 1.08rem !important;
font-weight: 800 !important;
line-height: 1.72 !important;
text-shadow: none !important;
pointer-events: auto !important;
}
body.home .af-mobile-media-section .af-media-supporting-col {
margin-top: 16px !important;
}
body.home .af-mobile-media-section .af-video-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px 10px !important;
width: 100% !important;
margin: 0 !important;
}
body.home .af-mobile-media-section .af-video-item,
body.home .af-mobile-media-section .af-video-item:first-child,
body.home .af-mobile-media-section .af-video-item:nth-child(3),
body.home .af-mobile-media-section .af-video-item:nth-child(4),
body.home .af-mobile-media-section .af-video-item:nth-child(6) {
display: block !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.home .af-mobile-media-section .af-video-img,
body.home .af-mobile-media-section .af-video-img > a,
body.home .af-mobile-media-section .af-video-img .af-media-frame--compact {
display: block !important;
width: 100% !important;
}
body.home .af-mobile-media-section .af-video-img .af-media-frame--compact {
height: auto !important;
aspect-ratio: 16 / 10 !important;
overflow: hidden !important;
border-radius: 7px !important;
}
body.home .af-mobile-media-section .af-video-img .af-media-frame--compact img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
body.home .af-mobile-media-section .af-video-desc,
body.home .af-mobile-media-section .af-video-item h3 {
width: 100% !important;
margin: 7px 0 0 !important;
padding: 0 !important;
font-size: .88rem !important;
font-weight: 700 !important;
line-height: 1.66 !important;
}
body.home .af-mobile-media-section .af-video-desc a,
body.home .af-mobile-media-section .af-video-item h3 a {
display: -webkit-box !important;
overflow: hidden !important;
color: var(--bz-white) !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
}
body.home .af-mobile-media-section .af-media-action--featured {
width: 46px !important;
height: 46px !important;
}
body.home .af-mobile-media-section .af-media-action--featured .af-media-action__icon {
width: 24px !important;
height: 24px !important;
}
}
@media (max-width: 575.98px) {
body.home .af-mobile-media-section > .container-af {
width: calc(100% - 20px) !important;
}
body.home .af-mobile-media-section .af-video-main h3 {
font-size: 1.02rem !important;
line-height: 1.68 !important;
}
body.home .af-mobile-media-section .af-video-list {
gap: 15px 9px !important;
}
body.home .af-mobile-media-section .af-video-desc,
body.home .af-mobile-media-section .af-video-item h3 {
font-size: .84rem !important;
line-height: 1.62 !important;
}
}