/* Auto-generated by php artisan layout-boxes:build-css. Do not edit this file directly. */ /* ===== 00-box-shell.css ===== */ /* * Source: 00-box-shell.css * Keep selectors scoped to this layout-box module. */ .lb-box-v2{background:var(--lb-bg);border:1px solid var(--lb-border);padding:14px;min-width:0} .lb-box-v2[data-box-type="simple_image_title_lead"]{background:transparent;border:0;padding:0} .lb-box-v2[data-render-strategy="titre1saat24"], .lb-box-v2:has(> .titre1saat24){padding:0;overflow:hidden} .lb-box-v2[data-render-strategy="titre1saat24"] > .titre1saat24, .lb-box-v2 > .titre1saat24{max-width:100%;margin:0} .lb-box-v2[data-box-type="simple_title_only"], .lb-box-v2[data-render-strategy="latest_news"], .lb-box-v2[data-render-strategy="saat24latestscrool"]{align-self:start;height:auto;min-height:0} .lb-box-v2[data-box-type="simple_title_only"], .lb-box-v2[data-box-type="khatedaghsaat24"], .lb-box-v2[data-render-strategy="latest_news"], .lb-box-v2[data-render-strategy="saat24latestscrool"], .lb-box-v2[data-box-type="saat24latestscrool"], .lb-box-v2[data-render-strategy="simple_title_only"], .lb-box-v2[data-render-strategy="khatedaghsaat24"]{background:#fff;border:0;padding:0} .lb-box-v2:has(> .khatedaghsaat24), .lb-box-v2:has(> .latest-news), .lb-box-v2:has(> .saat24latestscrool){background:#fff;border:0;padding:0} .lb-box-v2:has(> .khatedaghsaat24), .lb-box-v2:has(> .latest-news), .lb-box-v2:has(> .saat24latestscrool){margin:0!important} .lb-box-v2 > .lb-box-v2-title:first-child{margin:-14px -14px 12px} .lb-box-v2[data-box-type="site_header_desktop"], .lb-box-v2[data-box-type="site_header_mobile"]{background:transparent;border:0;padding:0} .lb-box-v2[data-box-type="footer"], .lb-box-v2[data-render-strategy="footer"], .lb-box-v2[data-box-type="site_footer_simple"], .lb-box-v2[data-render-strategy="site_footer_simple"]{background:transparent;border:0;padding:0} .lb-box-v2-title{display:flex;justify-content:flex-start;gap:12px;align-items:end;border-bottom:2px solid var(--lb-accent);padding-bottom:0;margin-bottom:12px;direction:rtl;text-align:right} .lb-box-v2-title h2{font-size:17px;margin:0;background:var(--lb-accent);color:#fff;padding:5px 13px;line-height:1.7} .lb-header-filled .lb-box-v2-title{background:var(--lb-header);padding:8px 10px;border-bottom:0} .lb-header-filled .lb-box-v2-title h2{color:#fff} .lb-header-minimal .lb-box-v2-title{border-bottom:1px solid var(--lb-border)} .lb-header-badge .lb-box-v2-title{border-bottom:1px solid var(--lb-border)} .lb-header-badge .lb-box-v2-title h2{display:inline-flex;align-items:center;background:var(--lb-accent);color:#fff;padding:3px 10px} .lb-header-tab .lb-box-v2-title{border-bottom:2px solid var(--lb-accent)} .lb-header-tab .lb-box-v2-title h2{background:var(--lb-accent);color:#fff;padding:5px 12px;margin-bottom:-10px} .lb-header-side-border{border-right:4px solid var(--lb-accent)} /* Keep the page-builder spacing single-source and compact, like saat24.news. */ .lb-builder,.lb-template,.lb-main,.lb-builder-section,.lb-builder-column,.lb-region{gap:4px!important} .lb-builder-columns{gap:12px!important} .lb-box-v2{margin:0!important} /* ===== 01-legacy-shared.css ===== */ /* * Source: 01-legacy-shared.css * Keep selectors scoped to this layout-box module. */ .lb-v2-media{display:flex;align-items:center;justify-content:center;background:#f4f5f6;color:#697386;aspect-ratio:var(--lb-ratio);overflow:hidden} .lb-v2-media img{display:block;width:100%;height:100%;object-fit:cover} /* ===== 10-lead.css ===== */ /* * Source: 10-lead.css * Keep selectors scoped to this layout-box module. */ .lb-v2-lead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr);gap:16px;align-items:start} .lb-v2-lead h3{font-size:25px;line-height:1.55;margin:5px 0} .lb-v2-lead p,.lb-v2-card p,.lb-v2-row p{color:#4b5563;font-size:13px;margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* ===== 11-grid.css ===== */ /* * Source: 11-grid.css * Keep selectors scoped to this layout-box module. */ .lb-v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} .lb-v2-grid-compact{margin-top:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .lb-v2-card{border:1px solid var(--lb-border);padding:10px;background:#fff} .lb-v2-card h3{font-size:15px;line-height:1.7;margin:7px 0 0} .lb-v2-card a,.lb-v2-row a,.lb-v2-headlines a{color:var(--ink)} /* ===== 12-slider.css ===== */ /* * Source: 12-slider.css * Keep selectors scoped to this layout-box module. */ .lb-v2-slider{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:12px;overflow:auto;padding-bottom:4px;scroll-snap-type:x mandatory} .lb-v2-slider .lb-v2-card{scroll-snap-align:start} /* ===== 13-media-list.css ===== */ /* * Source: 13-media-list.css * Keep selectors scoped to this layout-box module. */ .lb-v2-media-list{display:grid;gap:0} .lb-v2-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;border-top:1px solid var(--lb-border);padding:10px 0} .lb-v2-row:first-child{border-top:0} .lb-v2-row .lb-v2-media{aspect-ratio:4 / 3} .lb-v2-row h3{font-size:15px;line-height:1.75;margin:0} [data-box-type="simple_image_title_lead"] .lb-v2-row{grid-template-columns:minmax(220px,260px) minmax(0,1fr);gap:14px;align-items:start} [data-box-type="simple_image_title_lead"] .lb-v2-row .lb-v2-media{aspect-ratio:16 / 10} [data-box-type="simple_image_title_lead"] .lb-v2-row > div{max-height:162px;overflow:hidden} [data-box-type="simple_image_title_lead"] .lb-v2-row .lb-meta{font-size:11px;line-height:1.6;margin:0 0 2px} [data-box-type="simple_image_title_lead"] .lb-v2-row h3{font-size:12px;line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} [data-box-type="simple_image_title_lead"] .lb-v2-row p{font-size:12px;line-height:1.8;-webkit-line-clamp:3;margin-top:5px} /* ===== 13-titre2saat24.css ===== */ /* ===================================================================== saat24-news-card.css — باکس لیست اخبار (الگو: news-box--second_titles سایت saat24.news) --------------------------------------------------------------------- - تمام سلکتورها زیر کلاس مادر .saat24-news-card هستند؛ هیچ استایل عمومی ندارد. - وابسته به متغیرهای s24-theme.css است (پیشوند --s24-). - مقادیر عددی از DevTools سایت گرفته شده‌اند: ردیف سفید با گوشه 4px، عکس 150px راست، تیتر 15.3px/500 مشکی، خلاصه 12.8px/19.2px جاستیفای، فاصله ردیف‌ها 16px. - نقطه شکست موبایل: 800px (هماهنگ با تم). ===================================================================== */ /* ---------------- کلاس مادر: لیست ---------------- */ .saat24-news-card { display: block; width: 100%; max-width: 100%; margin: 0 0 var(--s24-box-gap); padding: 0; list-style: none; direction: rtl; text-align: start; color: var(--s24-color-text); font-family: var(--s24-font-family); font-size: var(--s24-fs-body); /* 16px */ font-weight: var(--s24-fw-normal); line-height: var(--s24-lh-body); /* 24px */ } /* ---------------- آیتم (ردیف خبر) ---------------- */ .saat24-news-card__item { position: relative; display: block; margin: 0 0 var(--s24-sp-4); /* 16px بین ردیف‌ها */ padding: var(--s24-sp-2) var(--s24-sp-2) var(--s24-sp-2) 0; /* 8 8 8 0 مطابق سایت */ background-color: var(--s24-color-surface); border-radius: var(--s24-radius); overflow: hidden; } .saat24-news-card__item:last-child { margin-bottom: 0; } /* ---------------- چیدمان داخلی ردیف ---------------- */ .saat24-news-card__row { display: flex; flex-direction: row; /* در RTL: عکس (عنصر اول) راست، متن چپ */ align-items: center; gap: var(--s24-sp-2); /* 8px */ } /* ---------------- عکس ---------------- */ .saat24-news-card__media { display: block; flex: 0 0 150px; /* عرض ثابت مطابق سایت */ max-width: 150px; text-decoration: none; } .saat24-news-card__img { display: block; width: 150px; height: auto; /* ارتفاع آزاد، مطابق نسبت تصویر (مثل سایت) */ border: 0; border-radius: var(--s24-radius); margin: 0; padding: 0; } /* ---------------- بخش متن ---------------- */ .saat24-news-card__info { flex: 1 1 auto; min-width: 0; padding: var(--s24-sp-2); /* 8px مطابق سایت */ } /* ---------------- تیتر ---------------- */ .saat24-news-card__meta { margin: 0 0 var(--s24-sp-1); color: var(--s24-color-muted); font-size: 12px; line-height: 1.5; } .saat24-news-card__title { margin: 0; padding: 0; font-size: 15.3px; /* مقدار دقیق سایت (fs-6) */ font-weight: var(--s24-fw-medium); /* 500 */ line-height: 1.2; /* 18.37px */ color: var(--s24-color-heading); } .saat24-news-card__title-link { color: var(--s24-color-heading); /* مشکی */ text-decoration: none; font: inherit; } .saat24-news-card__title-link:hover, .saat24-news-card__title-link:focus { color: var(--s24-color-heading); /* مشکی، بدون زیرخط حتی در hover */ text-decoration: none; } /* ---------------- خلاصه ---------------- */ .saat24-news-card__summary { margin: var(--s24-sp-1) 0; /* 4px 0 مطابق سایت */ padding: 0; color: var(--s24-color-text); font-size: var(--s24-fs-summary); /* 12.8px */ font-weight: var(--s24-fw-normal); line-height: var(--s24-lh-summary); /* 19.2px */ text-align: justify; /* مطابق text-justify سایت */ } /* ===================================================== رفتار موبایل — تا 800px هر ردیف ستونی می‌شود: عکس تمام‌عرض بالا، متن پایین ===================================================== */ @media (max-width: 800px) { .saat24-news-card { max-width: 100%; } .saat24-news-card__item { padding: var(--s24-sp-2); /* پدینگ یکنواخت دور آیتم */ } .saat24-news-card__row { flex-direction: column; align-items: stretch; } .saat24-news-card__media { flex: 0 0 auto; max-width: 100%; } .saat24-news-card__img { width: 100%; aspect-ratio: 3 / 2; /* هم‌نسبت با تصاویر 240×160 سایت */ object-fit: cover; } .saat24-news-card__info { padding: var(--s24-sp-2) var(--s24-sp-1); } } /* ===== 14-headline-list.css ===== */ /* * Source: 14-headline-list.css * Keep selectors scoped to this layout-box module. */ .lb-v2-headlines{display:grid;counter-reset:headline;direction:rtl} .lb-v2-headlines a{display:grid;grid-template-columns:8px minmax(0,1fr);column-gap:6px;row-gap:2px;align-items:start;border-top:1px solid var(--lb-border);padding:11px 0;text-decoration:none;text-align:right;direction:rtl} .lb-v2-headlines a:first-child{border-top:0} .lb-v2-headlines a:before{content:"";grid-column:1;grid-row:1;width:7px;height:7px;background:var(--lb-accent);align-self:start;margin-top:10px} .lb-v2-headlines.lb-bullet-number a,.lb-v2-headlines.lb-bullet-rank a{grid-template-columns:26px minmax(0,1fr)} .lb-v2-headlines.lb-bullet-badge a,.lb-v2-headlines.lb-bullet-hot a,.lb-v2-headlines.lb-bullet-service a{grid-template-columns:48px minmax(0,1fr)} .lb-v2-headlines.lb-bullet-none a{grid-template-columns:1fr} .lb-bullet-square a:before{border-radius:0} .lb-bullet-number a:before,.lb-bullet-rank a:before{counter-increment:headline;content:counter(headline);width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px} .lb-bullet-badge a:before{content:"خبر";width:auto;height:auto;color:#fff;font-size:11px;padding:1px 6px} .lb-bullet-hot a:before{content:"داغ";width:auto;height:auto;background:#c63d2f;color:#fff;font-size:11px;padding:1px 6px} .lb-bullet-service a:before{content:"سرویس";width:auto;height:auto;background:var(--lb-header);color:#fff;font-size:11px;padding:1px 6px} .lb-bullet-none a:before{display:none} .lb-v2-headlines strong{grid-column:2;grid-row:1;font-size:14px;line-height:1.8} .lb-v2-headlines span{grid-column:2;grid-row:2} .lb-v2-headlines span,.lb-meta{font-size:12px;color:var(--muted)} [data-box-type="simple_title_only"] .lb-v2-headlines a{column-gap:4px} /* ===== 14-khatedaghsaat24.css ===== */ /* ===================================================================== khatedaghsaat24.css — باکس «تیتر داغ» (الگو: card news-box سایدبار saat24.news) --------------------------------------------------------------------- - تمام سلکتورها زیر کلاس مادر .khatedaghsaat24 هستند؛ هیچ استایل عمومی ندارد. - وابسته به متغیرهای s24-theme.css است (پیشوند --s24-). - مقادیر عددی از DevTools سایت: کارت سفید گوشه 4px | هدر: پس‌زمینه #bb1919ØŒ متن سفید 15.3px/500ØŒ پدینگ 4px 8pxØŒ گوشه گرد فقط بالا | آیتم: پدینگ عمودی 4pxØŒ تیتر 15.3px وزن 300 (نازک)ØŒ لینک مشکی بدون زیرخط | بولت لوزی قرمز. - نقطه شکست موبایل: 800px (هماهنگ با تم). ===================================================================== */ /* ---------------- کلاس مادر: کارت ---------------- */ .khatedaghsaat24 { /* رنگ اختصاصی هدر این باکس (از سایت: rgb(187,25,25)) — محلی Ùˆ ایزوله */ --khatedaghsaat24-header-bg: #bb1919; display: flex; flex-direction: column; position: relative; width: 100%; /* عرض را ستون CMS تعیین می‌کند (در سایت: ستون 318px سایدبار) */ margin: 0 0 var(--s24-box-gap); padding: 0; background-color: #ffffff !important; border: 0; border-radius: var(--s24-radius); overflow: hidden; direction: rtl; text-align: start; color: var(--s24-color-text); font-family: var(--s24-font-family); font-size: var(--s24-fs-body); /* 16px */ font-weight: var(--s24-fw-normal); line-height: var(--s24-lh-body); /* 24px */ height: auto !important; min-height: 0 !important; } /* ---------------- هدر قرمز ---------------- */ .khatedaghsaat24__header { margin: 0; padding: var(--s24-sp-1) var(--s24-sp-2); /* 4px 8px مطابق سایت */ background-color: #bb1919 !important; color: #ffffff !important; font-size: 15.3px; /* مقدار دقیق سایت (fs-6) */ font-weight: var(--s24-fw-medium); /* 500 */ line-height: 1.2; /* 18.37px */ border-radius: var(--s24-radius) var(--s24-radius) 0 0; /* گوشه گرد فقط بالا */ } /* ---------------- لیست ---------------- */ .khatedaghsaat24__list { margin: var(--s24-sp-1) var(--s24-sp-2) var(--s24-sp-4) var(--s24-sp-2); /* 4 8 16 8 */ padding: 0 var(--s24-sp-3) 0 0; /* جا برای بولت لوزی در سمت راست */ list-style: none; height: auto !important; min-height: 0 !important; } /* ---------------- آیتم ---------------- */ .khatedaghsaat24__item { position: relative; display: block; margin: 0; padding: var(--s24-sp-1) 0; /* 4px 0 مطابق سایت */ } /* بولت لوزی قرمز (معادل list-lozi سایت) */ .khatedaghsaat24__item::before { content: ""; position: absolute; top: 13px; right: calc(-1 * var(--s24-sp-3)); /* بیرون از متن، داخل پدینگ لیست */ width: 6px; height: 6px; background: var(--s24-color-primary); transform: rotate(45deg); /* مربع چرخیده = لوزی */ } /* ---------------- تیتر Ùˆ لینک ---------------- */ .khatedaghsaat24__title { margin: 0; padding: 0; font-size: 15.3px; /* مقدار دقیق سایت */ font-weight: 300; /* fw-light مطابق سایت */ line-height: 1.2; /* 18.37px */ color: var(--s24-color-text); } .khatedaghsaat24__link { color: var(--s24-color-heading); /* مشکی */ text-decoration: none; font: inherit; } .khatedaghsaat24__link:hover, .khatedaghsaat24__link:focus { color: var(--s24-color-heading); /* مشکی، بدون زیرخط حتی در hover */ text-decoration: none; } /* ===================================================== رفتار موبایل — تا 800px باکس ذاتاً تک‌ستونه است؛ فقط تمام‌عرض ستون می‌شود Ùˆ فاصله پایینش Ú©Ù…ÛŒ کمتر (هماهنگ با فشرده‌شدن تم). ===================================================== */ /* Keep the red heading flush with the outer box and keep list spacing compact. */ .lb-box-v2:has(> .khatedaghsaat24) { padding: 0 !important; border: 0 !important; background: transparent !important; margin: 0 !important; } .khatedaghsaat24 { margin: 0 !important; } .khatedaghsaat24__list { margin: 2px var(--s24-sp-2) 6px var(--s24-sp-2); } .khatedaghsaat24__item { padding: 4px 0; } @media (max-width: 800px) { .khatedaghsaat24 { margin-bottom: 0 !important; } .khatedaghsaat24__item { padding: 3px 0; } } /* ===== 15-five-image-mosaic.css ===== */ /* * Source: 15-five-image-mosaic.css * Keep selectors scoped to this layout-box module. */ .lb-v2-five-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} .lb-v2-mosaic-card{min-width:0} .lb-v2-mosaic-card:nth-child(1),.lb-v2-mosaic-card:nth-child(2){grid-column:span 3} .lb-v2-mosaic-card:nth-child(n+3){grid-column:span 2} .lb-v2-mosaic-card a{position:relative;display:block;min-height:210px;overflow:hidden;background:#e5e7eb;color:#fff;text-decoration:none} .lb-v2-mosaic-card:nth-child(n+3) a{min-height:165px} .lb-v2-mosaic-card img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .2s ease} .lb-v2-mosaic-card a:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%)} .lb-v2-mosaic-card span{position:absolute;right:14px;left:14px;bottom:14px;z-index:1;color:#fff;font-weight:800;font-size:21px;line-height:1.55;text-align:right;text-shadow:0 2px 8px rgba(0,0,0,.55);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lb-v2-mosaic-card:nth-child(n+3) span{font-size:17px} .lb-v2-mosaic-card a:hover img{transform:scale(1.03)} /* ===== 20-titre1saat24.css ===== */ /* ===================================================================== titre1saat24.css — باکس خبر ویژه (الگو: باکس اول saat24.news) --------------------------------------------------------------------- - تمام سلکتورها زیر کلاس مادر .titre1saat24 هستند؛ هیچ استایل عمومی ندارد. - وابسته به متغیرهای s24-theme.css است (پیشوند --s24-). - نقطه شکست موبایل: 800px (هماهنگ با تم). - دسکتاپ: دو ستون مساوی — عکس راست، متن چپ، خط قرمز پایینِ چپِ متن. - موبایل: عکس پرتره تمام‌عرض بالا، متن پایین. ===================================================================== */ /* ---------------- کلاس مادر (دسکتاپ) ---------------- */ .titre1saat24 { display: flex; flex-direction: row-reverse; /* در RTL: عکس (عنصر دوم) راست، متن چپ */ direction: rtl; text-align: start; width: 100%; max-width: var(--s24-content-width); /* 758px مطابق saat24 */ height: 200px; margin: 0 0 var(--s24-box-gap); padding: 0; overflow: hidden; background-color: var(--s24-color-surface); border-radius: var(--s24-radius); color: var(--s24-color-text); font-family: var(--s24-font-family); font-size: var(--s24-fs-body); font-weight: var(--s24-fw-normal); line-height: var(--s24-lh-body); } /* ---------------- ستون متن ---------------- */ .titre1saat24__content { position: relative; flex: 1 1 50%; min-width: 0; padding: var(--s24-sp-3) var(--s24-sp-3) var(--s24-sp-2); /* 12 12 8 */ } /* خط قرمز امضا — پایینِ سمت چپِ بخش متن */ .titre1saat24__content::before { content: ""; position: absolute; left: 0; bottom: var(--s24-sp-1); /* 4px */ width: var(--s24-line-accent-w); /* 58px */ height: var(--s24-line-accent-h); /* 2px */ background: var(--s24-color-primary); } /* ---------------- تیتر ---------------- */ .titre1saat24__title { margin: 0 0 var(--s24-sp-2); /* 8px */ padding: 0; font-size: var(--s24-fs-h3); /* 18px */ font-weight: var(--s24-fw-medium); /* 500 */ line-height: var(--s24-lh-heading); /* 21.6px */ color: var(--s24-color-heading); } .titre1saat24__title-link { color: var(--s24-color-heading); /* مشکی */ text-decoration: none; font: inherit; } .titre1saat24__title-link:hover, .titre1saat24__title-link:focus { color: var(--s24-color-heading); /* مشکی، بدون زیرخط حتی در hover */ text-decoration: none; } /* ---------------- خلاصه ---------------- */ .titre1saat24__summary { margin: 0; padding: 0; color: var(--s24-color-text); font-size: var(--s24-fs-summary); /* 12.8px */ font-weight: var(--s24-fw-normal); line-height: var(--s24-lh-summary); /* 19.2px */ } .titre1saat24__summary p { margin: 0; padding: 0; /* محدودکردن خلاصه به ۶ خط تا از خط قرمز عبور نکند */ display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } /* ---------------- ستون عکس ---------------- */ .titre1saat24__image { display: block; flex: 0 0 50%; max-width: 50%; overflow: hidden; text-decoration: none; } .titre1saat24__img { display: block; width: 100%; height: 100%; object-fit: cover; /* عکس افقی، هم‌ارتفاع کارت */ border: 0; margin: 0; padding: 0; } /* ===================================================== رفتار موبایل — تا 800px عکس پرتره تمام‌عرض بالا، متن پایین (مطابق اسکرین‌شات موبایل) ===================================================== */ @media (max-width: 800px) { .titre1saat24 { flex-direction: column-reverse; /* عکس (عنصر دوم) به بالا می‌رود */ height: auto; max-width: 100%; } .titre1saat24__image { flex: 0 0 auto; max-width: 100%; width: 100%; } .titre1saat24__img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; } .titre1saat24__content { flex: 0 0 auto; padding: var(--s24-sp-4) var(--s24-sp-3) var(--s24-sp-7); /* جای خط قرمز پایین */ } .titre1saat24__summary p { -webkit-line-clamp: 8; /* در موبایل چند خط بیشتر جا هست */ } } /* ===== 21-news-design-shared.css ===== */ /* * Source: 21-news-design-shared.css * Keep selectors scoped to this layout-box module. */ .news-featured-card{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:18px;align-items:stretch;direction:rtl} .news-featured-card--compact{display:block} .news-featured-card__content{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden} .news-featured-card__figure,.news-card-box__figure,.photo-news-box__figure,.related-news-box__figure,.analysis-note-box__figure,.selected-headlines-box__main-image,.selected-headlines-box__thumb{margin:0;overflow:hidden;background:#f3f4f6} .news-featured-card__figure{aspect-ratio:16 / 9} .news-featured-card__image,.news-card-box__image,.photo-news-box__image,.related-news-box__image,.analysis-note-box__image,.selected-headlines-box img{display:block;width:100%;height:100%;object-fit:cover} .news-featured-card__meta,.selected-headlines-box__meta,.news-card-box__meta,.photo-news-box__meta,.simple-news-list__meta,.breaking-news-box__meta,.most-viewed-box__meta,.analysis-note-box__meta,.related-news-box__meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:var(--muted);font-size:12px;line-height:1.8} .news-featured-card__service,.selected-headlines-box__service,.news-card-box__service,.simple-news-list__service,.breaking-news-box__service,.latest-news-box__service,.most-viewed-box__service,.analysis-note-box__service,.related-news-box__service{color:var(--lb-accent);font-weight:700;text-decoration:none} .news-featured-card__title,.selected-headlines-box__headline,.news-card-box__headline,.photo-news-box__headline,.simple-news-list__headline,.breaking-news-box__headline,.latest-news-box__headline,.most-viewed-box__headline,.analysis-note-box__headline,.related-news-box__headline{margin:0;color:var(--ink);font-weight:800;line-height:1.7} .news-featured-card__title{font-size:17px;line-height:1.75;margin-top:4px} .news-featured-card__title a,.selected-headlines-box__headline a,.news-card-box__headline a,.simple-news-list__headline a,.breaking-news-box__headline a,.latest-news-box__headline a,.most-viewed-box__headline a,.analysis-note-box__headline a,.related-news-box__headline a{color:inherit;text-decoration:none} .news-featured-card__title a:hover,.selected-headlines-box__headline a:hover,.news-card-box__headline a:hover,.simple-news-list__headline a:hover,.breaking-news-box__headline a:hover,.latest-news-box__headline a:hover,.most-viewed-box__headline a:hover,.analysis-note-box__headline a:hover,.related-news-box__headline a:hover{color:var(--lb-accent)} .news-featured-card__summary,.selected-headlines-box__summary,.news-card-box__summary,.analysis-note-box__summary,.related-news-box__summary{margin:8px 0 0;color:#4b5563;font-size:14px;line-height:2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .news-featured-card__summary{font-size:13px;line-height:1.9;-webkit-line-clamp:5} .news-featured-card__read-more,.news-card-box__read-more{display:inline-flex;margin-top:10px;color:var(--lb-accent);font-size:13px;font-weight:700;text-decoration:none} /* ===== 22-selected-headlines.css ===== */ /* * Source: 22-selected-headlines.css * Keep selectors scoped to this layout-box module. */ .selected-headlines-box{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:16px} .selected-headlines-box__main-image{display:block;aspect-ratio:16 / 9;margin-bottom:10px} .selected-headlines-box__headline--main{font-size:23px;line-height:1.65} .selected-headlines-box__side-items{display:grid;gap:0} .selected-headlines-box__side-item{display:grid;grid-template-columns:86px minmax(0,1fr);gap:9px;border-top:1px solid var(--lb-border);padding:10px 0} .selected-headlines-box__side-item:first-child{border-top:0;padding-top:0} .selected-headlines-box__thumb{aspect-ratio:4 / 3} .selected-headlines-box__side-item .selected-headlines-box__headline{font-size:14px} /* ===== 23-simple-news-list.css ===== */ /* * Source: 23-simple-news-list.css * Keep selectors scoped to this layout-box module. */ .simple-news-list__items,.breaking-news-box__items,.latest-news-box__items,.most-viewed-box__items{display:grid;gap:0;margin:0;padding:0;list-style:none} .simple-news-list__article{padding:10px 0;border-top:1px solid var(--lb-border)} .simple-news-list__item:first-child .simple-news-list__article{border-top:0;padding-top:0} .simple-news-list__headline{font-size:15px} /* ===== 24-news-cards.css ===== */ /* * Source: 24-news-cards.css * Keep selectors scoped to this layout-box module. */ .news-card-box__grid{display:grid;grid-template-columns:repeat(var(--news-card-columns,3),minmax(0,1fr));gap:14px} .news-card-box__item{border:1px solid var(--lb-border);background:#fff;min-width:0} .news-card-box__figure{aspect-ratio:16 / 10} .news-card-box__content{padding:12px} .news-card-box__headline{font-size:16px;margin-top:5px} .news-card-box--compact .news-card-box__summary,.news-card-box--compact .news-card-box__read-more,.news-card-box--text-only .news-card-box__image-link{display:none} /* ===== 25-photo-news.css ===== */ /* * Source: 25-photo-news.css * Keep selectors scoped to this layout-box module. */ .photo-news-box__grid{display:grid;grid-template-columns:repeat(var(--photo-news-columns,2),minmax(0,1fr));gap:14px} .photo-news-box__link{display:block;color:inherit;text-decoration:none} .photo-news-box__figure{position:relative;aspect-ratio:16 / 10} .photo-news-box--overlay .photo-news-box__caption{position:absolute;inset:auto 0 0;padding:42px 14px 14px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));color:#fff} .photo-news-box--overlay .photo-news-box__headline,.photo-news-box--overlay .photo-news-box__meta{color:#fff} .photo-news-box--below-title .photo-news-box__figure{overflow:visible;background:transparent} .photo-news-box--below-title .photo-news-box__caption{padding-top:9px;background:transparent} .photo-news-box__headline{font-size:18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .photo-news-box--mosaic .photo-news-box__item--featured{grid-row:span 2} .photo-news-box--mosaic .photo-news-box__item--featured .photo-news-box__figure{height:100%;min-height:330px;aspect-ratio:auto} /* ===== 26-breaking-news.css ===== */ /* * Source: 26-breaking-news.css * Keep selectors scoped to this layout-box module. */ .breaking-news-box__inner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;background:#fff7ed;border:1px solid var(--lb-border);overflow:hidden} .breaking-news-box__header{display:flex;align-items:center;background:var(--lb-accent);color:#fff;padding:8px 13px} .breaking-news-box__title{font-size:14px;font-weight:900;white-space:nowrap} .breaking-news-box__items{padding:0 12px} .breaking-news-box__article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid rgba(198,61,47,.18)} .breaking-news-box__item:first-child .breaking-news-box__article{border-top:0} .breaking-news-box__headline{font-size:15px} .breaking-news-box--compact .breaking-news-box__inner{display:block} .breaking-news-box--ticker .breaking-news-box__items{display:flex;gap:22px;overflow:hidden} .breaking-news-box--ticker .breaking-news-box__item{flex:0 0 auto} /* ===== 27-latest-most-viewed.css ===== */ /* * Source: 27-latest-most-viewed.css * Keep selectors scoped to this layout-box module. */ .latest-news-box__article,.most-viewed-box__article{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--lb-border)} .latest-news-box__item:first-child .latest-news-box__article,.most-viewed-box__item:first-child .most-viewed-box__article{border-top:0;padding-top:0} .latest-news-box__time{display:inline-flex;min-width:82px;justify-content:center;background:#f3f4f6;color:#374151;padding:3px 7px;font-size:12px;line-height:1.8} .latest-news-box__headline,.most-viewed-box__headline{font-size:15px} .most-viewed-box__rank{display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;background:var(--lb-header);color:#fff;font-weight:900;font-size:14px} .most-viewed-box--plain-rank .most-viewed-box__rank{background:transparent;color:var(--lb-accent);font-size:21px} .most-viewed-box__views{font-weight:700;color:var(--lb-accent)} /* ===== 27-saat24lsatestnews.css ===== */ /* ===================================================================== latest-news.css — باکس «تازه‌ترین خبرها» (الگو: card news-box با list-latest_news سایت saat24.news) --------------------------------------------------------------------- - تمام سلکتورها زیر کلاس مادر .latest-news هستند؛ هیچ استایل عمومی ندارد. - وابسته به متغیرهای s24-theme.css است (پیشوند --s24-). - مقادیر عددی از DevTools سایت: کارت سفید گوشه 4px | هدر: پس‌زمینه #bb1919، متن سفید 15.3px/500، پدینگ 4px 8px، گوشه گرد فقط بالا | لیست: margin بالا 4px و پایین 16px، سقف ارتفاع (max-height) با اسکرول عمودی همیشه نمایان (overflow: auto scroll) | آیتم: flex با gap 4px، پدینگ 4px 4px 4px 0، پس‌زمینه یکی‌درمیان سفید/طوسی rgb(238,238,238) | آیکون فلش 18px تیره | تیتر 15.3px وزن 300، لینک مشکی بدون زیرخط. - نقطه شکست موبایل: 800px (هماهنگ با تم). ===================================================================== */ /* ---------------- کلاس مادر: کارت ---------------- */ .latest-news { /* متغیرهای اختصاصی این باکس — محلی و ایزوله */ --latest-news-header-bg: #bb1919; /* از سایت: rgb(187,25,25) */ --latest-news-list-h: 460px; /* سقف اسکرول در صورت زیاد بودن خبرها */ display: flex; flex-direction: column; position: relative; width: 100%; /* عرض را ستون CMS تعیین می‌کند (در سایت: ستون 318px سایدبار) */ margin: 0 0 var(--s24-box-gap); padding: 0; background-color: var(--s24-color-surface); border: 0; border-radius: var(--s24-radius); overflow: hidden; direction: rtl; text-align: start; color: var(--s24-color-text); font-family: var(--s24-font-family); font-size: var(--s24-fs-body); /* 16px */ font-weight: var(--s24-fw-normal); line-height: var(--s24-lh-body); /* 24px */ } /* ---------------- هدر قرمز ---------------- */ .latest-news__header { margin: 0; padding: var(--s24-sp-1) var(--s24-sp-2); /* 4px 8px مطابق سایت */ background-color: var(--latest-news-header-bg); color: #ffffff; font-size: 15.3px; /* مقدار دقیق سایت (fs-6) */ font-weight: var(--s24-fw-medium); /* 500 */ line-height: 1.2; /* 18.37px */ border-radius: var(--s24-radius) var(--s24-radius) 0 0; /* گوشه گرد فقط بالا */ } /* ---------------- لیست اسکرول‌خور ---------------- */ .latest-news__list { margin: var(--s24-sp-1) 0 var(--s24-sp-4); /* 4px 0 16px مطابق سایت */ padding: 0; list-style: none; max-height: min(var(--latest-news-list-h), 70vh); /* فقط وقتی خبرها زیاد شد اسکرول بخورد */ overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* اسکرول‌بار باریک و همیشه نمایان (مرورگرهای وب‌کیت) */ .latest-news__list::-webkit-scrollbar { width: 8px; } .latest-news__list::-webkit-scrollbar-track { background: #f4f4f4; } .latest-news__list::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 4px; } .latest-news__list::-webkit-scrollbar-thumb:hover { background: #a9a9a9; } /* ---------------- آیتم ---------------- */ .latest-news__item { display: flex; flex-direction: row; align-items: flex-start; gap: var(--s24-sp-1); /* 4px مطابق سایت */ margin: 0; padding: var(--s24-sp-1) var(--s24-sp-1) var(--s24-sp-1) 0; /* 4px 4px 4px 0 مطابق سایت */ } /* پس‌زمینه یکی‌درمیان: ردیف‌های زوج طوسی (مطابق سایت: rgb(238,238,238)) */ .latest-news__item:nth-child(even) { background-color: #eeeeee; } /* ---------------- آیکون کنار تیتر ---------------- */ .latest-news__icon { display: block; flex: 0 0 18px; width: 18px; height: 24px; /* هم‌ارتفاع خط متن */ display: flex; align-items: center; justify-content: center; color: var(--s24-color-text); /* rgb(33,37,41) مطابق سایت */ } /* ---------------- تیتر و لینک ---------------- */ .latest-news__title { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-size: 15.3px; /* مقدار دقیق سایت */ font-weight: 300; /* fw-light مطابق سایت */ line-height: 1.2; /* 18.37px */ color: var(--s24-color-text); } .latest-news__link { color: var(--s24-color-heading); /* مشکی */ text-decoration: none; font: inherit; } .latest-news__link:hover, .latest-news__link:focus { color: var(--s24-color-heading); /* مشکی، بدون زیرخط حتی در hover */ text-decoration: none; } /* ===================================================== رفتار موبایل — تا 800px باکس تک‌ستونه است؛ تمام‌عرض ستون می‌شود، ناحیه اسکرول کمی کوتاه‌تر و ردیف‌ها برای لمس راحت‌تر کمی بلندتر. ===================================================== */ @media (max-width: 800px) { .latest-news { --latest-news-list-h: 380px; margin-bottom: var(--s24-sp-3); } .latest-news__item { padding-top: 3px; padding-bottom: 3px; } } /* The column supplies the separation between boxes; the box itself stays tight. */ .latest-news { margin: 0 !important; } .latest-news__list { margin-top: 2px; margin-bottom: 4px; } .latest-news__item { padding-top: 2px; padding-bottom: 2px; } /* Slightly more breathing room between headlines in the featured list. */ .saat24lsatestnews .latest-news__item { padding-top: 4px; padding-bottom: 4px; } /* The featured list uses the site's red arrow accent. */ .saat24lsatestnews .latest-news__icon { color: var(--latest-news-header-bg, #bb1919); } /* The featured latest-news box shows all items; only the scroll variant scrolls. */ .saat24lsatestnews .latest-news__list { max-height: none !important; overflow: visible !important; } /* Backward compatibility for already-rendered/cached old markup. */ .saat24lsatestnews, .saat24latestscrool { height: auto !important; min-height: 0 !important; } .saat24lsatestnews__list, .saat24latestscrool__list { height: auto !important; min-height: 0 !important; max-height: min(460px, 70vh) !important; overflow-x: hidden; overflow-y: auto !important; } /* ===== 28-analysis-notes.css ===== */ /* * Source: 28-analysis-notes.css * Keep selectors scoped to this layout-box module. */ .analysis-note-box__items{display:grid;grid-template-columns:repeat(var(--analysis-columns,1),minmax(0,1fr));gap:14px} .analysis-note-box__item{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;border:1px solid var(--lb-border);padding:12px;background:#fff} .analysis-note-box__figure{aspect-ratio:1 / 1} .analysis-note-box__headline{font-size:16px;margin-top:4px} .analysis-note-box__author{display:block;margin-top:6px;color:var(--muted);font-size:12px} .analysis-note-box--text-only .analysis-note-box__image-link{display:none} .analysis-note-box--text-only .analysis-note-box__item{display:block} .analysis-note-box--compact .analysis-note-box__summary,.analysis-note-box--compact .analysis-note-box__meta{display:none} /* ===== 28-saat24realtednewstitrend.css ===== */ /* * saat24realtednewstitrend.css * Related/headline trend list box. All selectors are scoped to this box. */ .saat24realtednewstitrend { --saat24realtednewstitrend-bg: #faeeee; --saat24realtednewstitrend-accent: var(--s24-color-primary, #b40000); --saat24realtednewstitrend-link: #3b3b3b; display: block; width: 100%; margin: var(--s24-sp-3, 12px) 0; padding: 0; background-color: var(--saat24realtednewstitrend-bg); border-radius: var(--s24-radius, 4px); direction: rtl; text-align: right; color: var(--s24-color-text, #161616); font-family: var(--s24-font-family, Vazirmatn, Tahoma, Arial, sans-serif); font-size: var(--s24-fs-summary, 13px); font-weight: var(--s24-fw-normal, 400); line-height: var(--s24-lh-summary, 1.8); } .saat24realtednewstitrend__header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--s24-sp-5, 24px); padding: var(--s24-sp-5, 24px) var(--s24-sp-4, 16px) 0; } .saat24realtednewstitrend .saat24realtednewstitrend__header-title { display: block; margin: 0; padding: 0; background: transparent; color: var(--saat24realtednewstitrend-accent); font-size: 17.6px; font-weight: var(--s24-fw-bold, 700); line-height: 24px; } .saat24realtednewstitrend__list { display: flex; flex-direction: column; gap: var(--s24-sp-2, 8px); margin: 0; padding: 0 var(--s24-sp-4, 16px) var(--s24-sp-4, 16px); list-style: none; } .saat24realtednewstitrend__item { display: flex; align-items: flex-start; gap: var(--s24-sp-3, 12px); margin: 0; padding: 0 0 var(--s24-sp-2, 8px); text-align: right; } .saat24realtednewstitrend__item:last-child { padding-bottom: 0; } .saat24realtednewstitrend__icon { flex: 0 0 12px; width: 12px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--saat24realtednewstitrend-accent); } .saat24realtednewstitrend .saat24realtednewstitrend__title { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; padding: 0; font-size: 14px; font-weight: var(--s24-fw-normal, 400); line-height: 28px; color: var(--saat24realtednewstitrend-link); } .saat24realtednewstitrend .saat24realtednewstitrend__link { display: block; color: var(--saat24realtednewstitrend-link); text-decoration: none; font: inherit; } .saat24realtednewstitrend__text { display: block; min-width: 0; } .saat24realtednewstitrend .saat24realtednewstitrend__link:hover, .saat24realtednewstitrend .saat24realtednewstitrend__link:focus { color: var(--saat24realtednewstitrend-accent); text-decoration: none; } @media (max-width: 800px) { .saat24realtednewstitrend__header { margin-bottom: var(--s24-sp-4, 16px); padding: var(--s24-sp-4, 16px) var(--s24-sp-3, 12px) 0; } .saat24realtednewstitrend__list { padding: 0 var(--s24-sp-3, 12px) var(--s24-sp-3, 12px); } .saat24realtednewstitrend .saat24realtednewstitrend__title { line-height: 24px; } } /* ===== 29-related-news-design.css ===== */ /* * Source: 29-related-news-design.css * Keep selectors scoped to this layout-box module. */ .related-news-box__items{display:grid;grid-template-columns:repeat(var(--related-columns,1),minmax(0,1fr));gap:12px} .related-news-box__item{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;border-top:1px solid var(--lb-border);padding:10px 0} .related-news-box__item:first-child{border-top:0;padding-top:0} .related-news-box__figure{aspect-ratio:4 / 3} .related-news-box__headline{font-size:15px} .related-news-box--grid .related-news-box__item{display:block;border-top:0;padding:0} .related-news-box--grid .related-news-box__figure{margin-bottom:8px} .related-news-box--text-only .related-news-box__image-link{display:none} .related-news-box--text-only .related-news-box__item{display:block} .related-news-box--inline{padding:13px;border:1px solid var(--lb-border);background:#f9fafb} .related-news-box--inline .related-news-box__items{display:grid;grid-template-columns:1fr;gap:8px} .related-news-box--inline .related-news-box__item{display:block;padding:0;border-top:0} .related-news-box--inline .related-news-box__image-link,.related-news-box--inline .related-news-box__meta,.related-news-box--inline .related-news-box__summary{display:none} /* ===== 29-saat24relatedvasattitr.css ===== */ /* * saat24relatedvasattitr.css * Article-page related headline box. All selectors are scoped to this box. */ .saat24relatedvasattitr { --saat24relatedvasattitr-bg: #faeeee; --saat24relatedvasattitr-tab-bg: #f2dcdc; --saat24relatedvasattitr-accent: var(--s24-color-primary, #b40000); --saat24relatedvasattitr-link: #3b3b3b; display: block; position: relative; width: 100%; margin: var(--s24-sp-6, 32px) 0; padding: 0; background-color: var(--saat24relatedvasattitr-bg); border-radius: var(--s24-radius, 4px); direction: rtl; text-align: right; color: var(--s24-color-text, #161616); font-family: var(--s24-font-family, Vazirmatn, Tahoma, Arial, sans-serif); font-size: var(--s24-fs-summary, 13px); font-weight: var(--s24-fw-normal, 400); line-height: var(--s24-lh-summary, 1.8); } .saat24relatedvasattitr__header { display: block; margin: 0 0 10px; text-align: right; line-height: 26px; } .saat24relatedvasattitr__header-title { display: inline-block; margin: 0; padding: 0 var(--s24-sp-2, 8px) 0 10px; background-color: var(--saat24relatedvasattitr-tab-bg); color: var(--saat24relatedvasattitr-accent); font-size: var(--s24-fs-body, 16px); font-weight: var(--s24-fw-bold, 700); line-height: 26px; border-radius: var(--s24-radius, 4px) var(--s24-radius, 4px) 0 0; } .saat24relatedvasattitr__list { margin: var(--s24-sp-3, 12px) 0; padding: 0 var(--s24-sp-5, 24px) var(--s24-sp-2, 8px) var(--s24-sp-3, 12px); list-style: none; } .saat24relatedvasattitr__item { display: block; margin: 0 0 var(--s24-sp-1, 4px); padding: 0 0 var(--s24-sp-1, 4px); text-align: right; } .saat24relatedvasattitr__item:last-child { margin-bottom: 0; padding-bottom: 0; } .saat24relatedvasattitr__icon { width: 16px; height: 19px; display: inline-flex !important; align-items: center; justify-content: center; margin-top: 0.28em; color: var(--saat24relatedvasattitr-accent); } .saat24relatedvasattitr__title { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; padding: 0; display: block; font-size: var(--s24-fs-summary, 13px); font-weight: var(--s24-fw-medium, 500); line-height: var(--s24-lh-summary, 1.8); color: var(--saat24relatedvasattitr-link); } .saat24relatedvasattitr__link { display: grid !important; grid-template-columns: 16px minmax(0, 1fr); column-gap: var(--s24-sp-1, 4px); align-items: start; width: 100%; direction: rtl; text-align: right; color: var(--saat24relatedvasattitr-link); text-decoration: none; font: inherit; } .saat24relatedvasattitr__text { display: block; min-width: 0; } .saat24relatedvasattitr__link:hover, .saat24relatedvasattitr__link:focus { color: var(--saat24relatedvasattitr-accent); text-decoration: none; } @media (max-width: 800px) { .saat24relatedvasattitr { margin: var(--s24-sp-5, 24px) 0; } .saat24relatedvasattitr__list { padding-right: var(--s24-sp-3, 12px); } .saat24relatedvasattitr__item { margin-bottom: 6px; padding-bottom: 6px; } } /* ===== 30-ads.css ===== */ /* * Source: 30-ads.css * Keep selectors scoped to this layout-box module. */ /* A banner must occupy only its real content height in a stacked column. */ .lb-box-v2[data-ad-type]{width:100%;height:auto!important;min-height:0!important;align-self:start;background:transparent;border:0;padding:0;margin:0!important;line-height:0} .lb-ad-banner{display:block;width:100%;height:auto!important;min-height:0!important;margin:0!important;padding:0;text-decoration:none;line-height:0} .lb-ad-banner img{display:block;width:100%;max-width:100%;height:auto!important;min-height:0!important;margin:0;padding:0;border:0} .lb-ad-text-list{display:grid;gap:8px;direction:rtl;text-align:right} .lb-ad-text-list a{display:block;color:var(--ink);text-decoration:none;border-top:1px solid var(--lb-border);padding:9px 0;line-height:1.8} .lb-ad-text-list a:first-child{border-top:0} .lb-ad-script{min-width:0;overflow:hidden} @media(max-width:900px){ .lb-ad-banner.is-portrait{display:flex;justify-content:center;align-items:flex-start;width:100%} .lb-ad-banner.is-portrait img{width:auto!important;max-width:min(200px,100%)!important;max-height:420px;object-fit:contain;margin-inline:auto} } /* ===== 31-site-header-footer.css ===== */ /* * Source: 31-site-header-footer.css * Keep selectors scoped to this layout-box module. */ .site-header-box,.site-footer-box{direction:rtl;color:var(--ink)} .site-header-box a,.site-footer-box a{color:inherit;text-decoration:none} .site-header-box--desktop{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(220px,280px);gap:18px;align-items:center} .site-header-box--mobile{display:none;grid-template-columns:auto 44px;gap:12px;align-items:center} .site-header-box__logo img,.site-footer-box__logo img{display:block;max-width:170px;max-height:64px;object-fit:contain} .site-header-box__brand,.site-footer-box__title{font-size:24px;font-weight:900} .site-header-box__menu ul,.site-footer-box__menu ul{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;list-style:none;margin:0;padding:0} .site-header-box__menu a{font-size:14px;font-weight:800;line-height:1.8} .site-header-box__menu a:hover,.site-footer-box__menu a:hover{color:var(--lb-accent)} .site-header-box__search{display:flex;min-width:0} .site-header-box__search input{min-width:0;flex:1;border:1px solid var(--lb-border);padding:8px 10px;font:inherit} .site-header-box__search button,.site-header-box__menu-button{border:1px solid var(--lb-accent);background:var(--lb-accent);color:#fff;padding:8px 10px;font:inherit;font-weight:800;cursor:pointer} .site-footer-box--columns{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.2fr) minmax(180px,.8fr);gap:22px;align-items:start} .site-footer-box__brand p{color:var(--muted);font-size:13px;line-height:2;margin:10px 0 0} .site-footer-box__menu{min-width:0} .site-footer-box__menu ul{align-items:flex-start} .site-footer-box__menu li{min-width:120px} .site-footer-box__menu a,.site-footer-box__meta a{font-size:13px;line-height:2} .site-footer-box__meta{display:grid;gap:4px} .site-footer-box__meta strong{font-size:14px;margin-bottom:4px} .site-footer-box--simple{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--lb-border);padding-top:10px;font-size:13px} .site-footer-box__menu--simple ul{gap:8px 12px} /* ===== 32-pagination-density.css ===== */ /* * Source: 32-pagination-density.css * Keep selectors scoped to this layout-box module. */ .lb-box-pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--lb-border);direction:rtl} .lb-page-link,.lb-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border:1px solid var(--lb-border);background:#fff;color:var(--ink);padding:0 9px;text-decoration:none;font-size:13px;line-height:1;border-radius:3px} .lb-page-link:hover{border-color:var(--lb-accent);color:var(--lb-accent);text-decoration:none} .lb-page-link.is-active{background:var(--lb-accent);border-color:var(--lb-accent);color:#fff} .lb-page-link.is-disabled{color:var(--muted);background:#f8fafc;pointer-events:none} .lb-page-ellipsis{border-color:transparent;background:transparent;color:var(--muted);min-width:20px;padding:0} .lb-density-compact{padding:10px} .lb-density-compact .lb-v2-grid,.lb-density-compact .lb-v2-slider{gap:8px} .lb-density-comfortable{padding:18px} /* ===== 33-continue-button.css ===== */ /* Continue-to-archive action for news boxes. */ .lb-box-continue{display:flex;align-items:stretch;justify-content:center;width:100%;min-height:58px;margin-top:12px;padding:0 14px;border:1px solid #d1d1d1;background:#e3e3e3;color:#fff;text-decoration:none;font-size:14px;line-height:1.6;border-radius:3px;transition:background-color .15s ease;text-align:center} .lb-box-continue__label{display:inline-flex;align-items:center;justify-content:center;padding:0 16px;background:#c9151b;color:#fff;border-radius:2px} .lb-box-continue:hover{color:#fff;background:#d5d5d5;text-decoration:none} .lb-box-continue:hover .lb-box-continue__label{background:#a91015} /* ===== 33-saat24headerdesktop.css ===== */ /* ===================================================================== saat24-header-desktop.css — هدر دسکتاپ (الگو: #header سایت saat24.news) --------------------------------------------------------------------- - تمام سلکتورها زیر کلاس مادر .saat24-header-desktop هستند؛ هیچ استایل عمومی ندارد. - وابسته به متغیرهای s24-theme.css است (پیشوند --s24-). - مقادیر عددی از DevTools سایت: نوار قرمز #a91717 با متن #f5f4ef، ارتفاع 160px، کانتینر 1320px | لوگو 230×80 راست | منو: فونت 15.2px، ارتفاع خط 32px، پدینگ افقی 7px | جستجو: اینپوت سفید گوشه 16px، ارتفاع ~41px، دکمه آیکونی داخل اینپوت | تاریخ 14.4px | «به‌روزشده» 11.2px رنگ #e1e1e1. - نکته: در خود سایت هدر position:fixed است؛ این‌جا عمداً static است تا به‌عنوان باکس CMS جابه‌جایی‌پذیر باشد. برای چسباندن به بالای صفحه، در قالب اصلی به کلاس مادر position:sticky/fixed و به body پدینگ بدهید. - نقطه شکست موبایل: 800px (هماهنگ با تم) — نسخه ساده‌شده؛ اگر هدر موبایل سایت را جدا خواستید، باکس مستقل saat24-header-mobile ساخته می‌شود. ===================================================================== */ /* ---------------- کلاس مادر: نوار هدر ---------------- */ .saat24-header-desktop { /* رنگ‌های اختصاصی این باکس (از سایت) — محلی و ایزوله */ --saat24-header-desktop-bg: #a91717; /* rgb(169,23,23) */ --saat24-header-desktop-fg: #f5f4ef; /* rgb(245,244,239) */ --saat24-header-desktop-fg-dim: #e1e1e1; /* متن «به‌روزشده» */ --saat24-header-desktop-icon: #393939; /* آیکون جستجو داخل اینپوت سفید */ --saat24-header-desktop-container: 1320px; /* عرض کانتینر سایت */ display: block; width: 100%; margin: 0; padding: var(--s24-sp-4) 0; /* 16px بالا و پایین (160 - 128 = 32) */ background-color: var(--saat24-header-desktop-bg); direction: rtl; text-align: start; color: var(--saat24-header-desktop-fg); font-family: var(--s24-font-family); font-size: var(--s24-fs-body); /* 16px */ font-weight: var(--s24-fw-normal); line-height: var(--s24-lh-body); /* 24px */ } /* ---------------- کانتینر دو ستونه ---------------- */ .saat24-header-desktop__container { display: flex; flex-direction: row; align-items: center; gap: var(--s24-sp-5); width: 100%; max-width: var(--saat24-header-desktop-container); min-height: 128px; margin: 0 auto; padding: 0 var(--s24-sp-3); /* 12px مطابق سایت */ } /* ---------------- ستون راست: لوگو ---------------- */ .saat24-header-desktop__brand { flex: 0 0 auto; } .saat24-header-desktop__logo-link { display: inline-block; text-decoration: none; color: var(--saat24-header-desktop-fg); } .saat24-header-desktop__logo { display: block; width: 230px; /* ابعاد لوگوی سایت */ height: 80px; border: 0; margin: 0; padding: 0; } /* ---------------- ستون چپ: منو + ابزارها ---------------- */ .saat24-header-desktop__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; /* هل‌دادن منو و ابزارها به سمت چپ (مطابق سایت) */ justify-content: space-around; /* مطابق سایت */ gap: var(--s24-sp-3); } /* ---------------- منوی اصلی ---------------- */ .saat24-header-desktop__nav { display: block; padding-bottom: 7px; /* فاصله متن تا خط زیر منو */ border-bottom: 1px solid var(--saat24-header-desktop-fg); /* خط زیر منو (مطابق عکس) */ } .saat24-header-desktop__nav-list { display: flex; flex-direction: row; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .saat24-header-desktop__nav-item { display: block; position: relative; } /* خط جداکننده | بین آیتم‌ها (مطابق عکس) */ .saat24-header-desktop__nav-item + .saat24-header-desktop__nav-item { border-right: 1px solid var(--saat24-header-desktop-fg); } .saat24-header-desktop__nav-link { display: block; padding: 0 7px; /* مطابق سایت */ color: var(--saat24-header-desktop-fg); font-size: 16px; font-weight: var(--s24-fw-bold, 700); line-height: 32px; /* مطابق سایت */ text-decoration: none; white-space: nowrap; } .saat24-header-desktop__nav-item--has-children > .saat24-header-desktop__nav-link { display: flex; align-items: center; gap: 6px; } .saat24-header-desktop__nav-arrow { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); } .saat24-header-desktop__submenu { position: absolute; top: 100%; right: 0; z-index: 1200; display: none; min-width: 190px; margin: 0; padding: 6px 0; background: #ffffff; border-top: 3px solid var(--saat24-header-desktop-bg); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); list-style: none; direction: rtl; text-align: right; } .saat24-header-desktop__nav-item--has-children:hover > .saat24-header-desktop__submenu, .saat24-header-desktop__nav-item--has-children:focus-within > .saat24-header-desktop__submenu { display: block; } .saat24-header-desktop__submenu-item { display: block; margin: 0; padding: 0; border-bottom: 1px solid #ececec; } .saat24-header-desktop__submenu-item:last-child { border-bottom: 0; } .saat24-header-desktop__submenu-link, .saat24-header-desktop__submenu-heading { display: block; padding: 9px 14px; color: #181818; font-size: 15px; font-weight: var(--s24-fw-medium, 500); line-height: 1.5; text-decoration: none; white-space: nowrap; } .saat24-header-desktop__submenu-link:hover, .saat24-header-desktop__submenu-link:focus { background: #f3f3f3; color: var(--saat24-header-desktop-bg); text-decoration: none; } .saat24-header-desktop__nav-link:hover, .saat24-header-desktop__nav-link:focus { color: #ffffff; text-decoration: none; } /* آیتم فعال (صفحه جاری) */ .saat24-header-desktop__nav-item--active .saat24-header-desktop__nav-link { font-weight: var(--s24-fw-medium); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } /* ---------------- ردیف ابزارها ---------------- */ .saat24-header-desktop__tools { display: flex; flex-direction: row-reverse; /* جستجو در انتهای چپ، تاریخ سمت راستِ آن (مطابق عکس) */ align-items: center; gap: var(--s24-sp-5); } /* ---------------- جستجو ---------------- */ .saat24-header-desktop__search { position: relative; flex: 0 0 auto; width: 224px; /* مطابق سایت */ margin: 0; padding: 0; } .saat24-header-desktop__search-input { display: block; width: 100%; margin: 0; padding: 4px 40px 4px 12px; /* جا برای دکمه در سمت راست (مطابق سایت و عکس) */ background-color: #ffffff; color: var(--s24-color-text); border: 0; border-radius: 16px; /* مطابق سایت */ font-family: var(--s24-font-family); font-size: var(--s24-fs-body); line-height: 32px; outline: none; } .saat24-header-desktop__search-input::placeholder { color: var(--s24-color-text-muted); } .saat24-header-desktop__search-button { position: absolute; top: 0; right: 0; /* دکمه در انتهای راست اینپوت (مطابق سایت و عکس) */ height: 100%; margin: 0; padding: 0 12px; display: flex; align-items: center; background: transparent; border: 0; border-radius: 16px; color: var(--saat24-header-desktop-icon); cursor: pointer; } .saat24-header-desktop__search-icon { display: block; } /* ---------------- تاریخ و به‌روزرسانی ---------------- */ .saat24-header-desktop__datetime { flex: 0 0 auto; } .saat24-header-desktop__date { color: var(--saat24-header-desktop-fg); font-size: 14.4px; /* مقدار دقیق سایت */ line-height: 28px; } .saat24-header-desktop__updated { color: var(--saat24-header-desktop-fg-dim); font-size: 11.2px; /* مقدار دقیق سایت */ line-height: 16.8px; } /* ===================================================== رفتار موبایل — تا 800px (نسخه ساده‌شده) لوگو وسط و کوچک‌تر، منو اسکرول افقی، جستجو تمام‌عرض، تاریخ و شبکه‌های اجتماعی مخفی برای صرفه‌جویی در فضا. ===================================================== */ @media (max-width: 800px) { .saat24-header-desktop { padding: var(--s24-sp-2) 0; } .saat24-header-desktop__container { flex-direction: column; align-items: stretch; gap: var(--s24-sp-2); min-height: 0; padding: 0 var(--s24-site-gutter); } .saat24-header-desktop__brand { display: flex; justify-content: center; } .saat24-header-desktop__logo { width: 172px; /* هم‌نسبت با 230×80 */ height: 60px; } .saat24-header-desktop__nav-list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .saat24-header-desktop__tools { gap: var(--s24-sp-3); } .saat24-header-desktop__search { flex: 1 1 auto; width: auto; } .saat24-header-desktop__datetime { display: none; } } /* ===== 34-saat24heeadermenu.css ===== */ /* Replaced by 34-saat24heeadermenumobile.css */ /* ===== 34-saat24heeadermenumobile.css ===== */ /* ===================================================================== saat24heeadermenumobile.css — هدر موبایل + منوی بازشو + جستجوی تمام‌صفحه (الگوی ساختار: هدر موبایل مرجع — رنگ: saat24) --------------------------------------------------------------------- - تمام سلکتورها زیر کلاس مادر .saat24heeadermenumobile هستند؛ هیچ استایل عمومی ندارد. - وابسته به متغیرهای s24-theme.css است (پیشوند --s24-). - سه بخش: Û±) نوار هدر (لوگو راست، ذره‌بین Ùˆ همبرگر Ú†Ù¾ — ارتفاع 60px مطابق مرجع) Û²) جستجوی تمام‌صفحه (اورلی + اینپوت بزرگ + دکمه بستن — مطابق مرجع) Û³) پنل منوی کشویی از راست (عرض 75%ØŒ اسکرول‌خور، z-index 888 مطابق مرجع) - باز/بسته‌شدن کاملاً با CSS (چک‌باکس مخفی) — بدون جاوااسکریپت: .saat24heeadermenumobile__state → منو (همبرگر Ùˆ × Ùˆ پس‌زمینه = label) .saat24heeadermenumobile__search-state → جستجو (ذره‌بین Ùˆ × = label) .saat24heeadermenumobile__sub-state → زیرمنوی هر سرویس (+ به − تبدیل می‌شود) - نقطه شکست موبایل: 800px — این باکس برای موبایل است؛ نمایش/عدم‌نمایش آن در دسکتاپ با قالب صفحه است (معمولاً بالای 800px مخفی Ùˆ هدر دسکتاپ نمایان). ===================================================================== */ /* ---------------- کلاس مادر ---------------- */ .saat24heeadermenumobile { /* رنگ‌های اختصاصی این باکس — محلی Ùˆ ایزوله */ --saat24heeadermenumobile-bg: #a91717; /* قرمز هدر ساعت۲۴ */ --saat24heeadermenumobile-fg: #f5f4ef; /* متن کرم */ --saat24heeadermenumobile-sub-bg: rgba(255, 255, 255, .12); /* پنل زیرمنو: یک پرده روشن‌تر */ --saat24heeadermenumobile-close-bg: #7c0f0f; /* دکمه بستن: قرمز تیره‌تر */ --saat24heeadermenumobile-backdrop: rgba(0, 0, 0, .45); /* پس‌زمینه پشت منو */ --saat24heeadermenumobile-overlay: rgba(25, 6, 6, .88); /* اورلی جستجوی تمام‌صفحه */ --saat24heeadermenumobile-input-bg: #555555; /* اینپوت جستجو (مطابق مرجع) */ --saat24heeadermenumobile-bar-h: 60px; /* ارتفاع نوار (مطابق مرجع) */ --saat24heeadermenumobile-width: 75%; /* عرض پنل منو (مطابق مرجع) */ --saat24heeadermenumobile-max-width: 320px; --saat24heeadermenumobile-z: 888; /* z-index منو (مطابق مرجع) */ --saat24heeadermenumobile-search-z: 1500; /* z-index جستجو (مطابق مرجع) */ direction: rtl; font-family: var(--s24-font-family); } /* ---------------- چک‌باکس‌های وضعیت (مخفی) ---------------- */ .saat24heeadermenumobile__state, .saat24heeadermenumobile__search-state, .saat24heeadermenumobile__sub-state { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; } /* ===================================================== Û±) نوار هدر موبایل ===================================================== */ .saat24heeadermenumobile__bar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; /* لوگو راست، دکمه‌ها Ú†Ù¾ */ height: var(--saat24heeadermenumobile-bar-h); padding: 0 var(--s24-sp-3); background-color: var(--saat24heeadermenumobile-bg); color: var(--saat24heeadermenumobile-fg); } /* لوگو */ .saat24heeadermenumobile__logo-link { display: flex; align-items: center; text-decoration: none; color: var(--saat24heeadermenumobile-fg); } .saat24heeadermenumobile__logo { display: block; width: auto; height: 48px; /* داخل نوار 60px */ border: 0; margin: 0; padding: 0; } /* دکمه‌های Ú†Ù¾ نوار */ .saat24heeadermenumobile__actions { display: flex; flex-direction: row-reverse; /* همبرگر در انتهای چپ، ذره‌بین کنارش (مطابق مرجع) */ align-items: center; gap: var(--s24-sp-1); } .saat24heeadermenumobile__search-open, .saat24heeadermenumobile__burger { display: flex; align-items: center; justify-content: center; width: 48px; /* ناحیه لمس بزرگ (مرجع: 56px با حاشیه) */ height: 48px; color: var(--saat24heeadermenumobile-fg); cursor: pointer; } .saat24heeadermenumobile__search-open-icon { display: block; } /* آیکون همبرگر: سه خط */ .saat24heeadermenumobile__burger-icon { position: relative; display: block; width: 22px; height: 2px; background: var(--saat24heeadermenumobile-fg); } .saat24heeadermenumobile__burger-icon::before, .saat24heeadermenumobile__burger-icon::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--saat24heeadermenumobile-fg); } .saat24heeadermenumobile__burger-icon::before { top: -7px; } .saat24heeadermenumobile__burger-icon::after { top: 7px; } /* ===================================================== Û²) جستجوی تمام‌صفحه ===================================================== */ .saat24heeadermenumobile__search { position: fixed; inset: 0; z-index: var(--saat24heeadermenumobile-search-z); background: var(--saat24heeadermenumobile-overlay); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .saat24heeadermenumobile__search-state:checked ~ .saat24heeadermenumobile__search { opacity: 1; visibility: visible; } /* بستن جستجو — بالا-Ú†Ù¾ */ .saat24heeadermenumobile__search-close { position: absolute; top: var(--s24-sp-2); left: var(--s24-sp-2); z-index: 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; cursor: pointer; } .saat24heeadermenumobile__search-close-icon { position: relative; display: block; width: 22px; height: 22px; } .saat24heeadermenumobile__search-close-icon::before, .saat24heeadermenumobile__search-close-icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 22px; height: 2px; background: #ffffff; } .saat24heeadermenumobile__search-close-icon::before { transform: translateY(-50%) rotate(45deg); } .saat24heeadermenumobile__search-close-icon::after { transform: translateY(-50%) rotate(-45deg); } /* فرم جستجو */ .saat24heeadermenumobile__search-form { position: absolute; top: 72px; /* زیر دکمه بستن */ right: var(--s24-sp-3); left: var(--s24-sp-3); margin: 0; padding: 0; } .saat24heeadermenumobile__search-input { display: block; width: 100%; height: 60px; /* مطابق مرجع */ margin: 0; padding: 0 var(--s24-sp-3) 0 60px; /* جا برای دکمه ذره‌بین در Ú†Ù¾ */ background-color: var(--saat24heeadermenumobile-input-bg); color: #ffffff; border: 0; border-radius: 3px; /* مطابق مرجع */ font-family: var(--s24-font-family); font-size: 24px; /* مرجع: 30px — برای نمایشگرهای باریک Ú©Ù…ÛŒ کوچک‌تر */ line-height: 60px; outline: none; } .saat24heeadermenumobile__search-input::placeholder { color: #dddddd; } .saat24heeadermenumobile__search-submit { position: absolute; top: 0; left: 0; width: 60px; /* مطابق مرجع */ height: 60px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; background: transparent; border: 0; color: #dddddd; /* مطابق مرجع */ cursor: pointer; } .saat24heeadermenumobile__search-submit-icon { display: block; } /* ===================================================== Û³) منوی بازشو ===================================================== */ /* پس‌زمینه پشت منو */ .saat24heeadermenumobile__backdrop { position: fixed; inset: 0; z-index: calc(var(--saat24heeadermenumobile-z) - 1); background: var(--saat24heeadermenumobile-backdrop); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; cursor: pointer; } /* پنل منو */ .saat24heeadermenumobile__panel { position: fixed; top: 0; right: 0; /* از سمت راست باز می‌شود */ bottom: 0; z-index: var(--saat24heeadermenumobile-z); width: var(--saat24heeadermenumobile-width); max-width: var(--saat24heeadermenumobile-max-width); padding: var(--s24-sp-3) 0 var(--s24-sp-6); background-color: var(--saat24heeadermenumobile-bg); color: var(--saat24heeadermenumobile-fg); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); /* حالت بسته: بیرون از صفحه */ transition: transform .25s ease; text-align: right; font-size: var(--s24-fs-body); line-height: var(--s24-lh-body); } /* حالت باز */ .saat24heeadermenumobile__state:checked ~ .saat24heeadermenumobile__panel { transform: translateX(0); } .saat24heeadermenumobile__state:checked ~ .saat24heeadermenumobile__backdrop { opacity: 1; visibility: visible; } /* دکمه بستن منو (بالا-Ú†Ù¾ پنل) */ .saat24heeadermenumobile__close { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--saat24heeadermenumobile-close-bg); cursor: pointer; } .saat24heeadermenumobile__close-icon { position: relative; display: block; width: 16px; height: 16px; } .saat24heeadermenumobile__close-icon::before, .saat24heeadermenumobile__close-icon::after { content: ""; position: absolute; top: 50%; left: 0; width: 16px; height: 2px; background: var(--saat24heeadermenumobile-fg); } .saat24heeadermenumobile__close-icon::before { transform: translateY(-50%) rotate(45deg); } .saat24heeadermenumobile__close-icon::after { transform: translateY(-50%) rotate(-45deg); } /* لیست سرویس‌ها */ .saat24heeadermenumobile__list { margin: 44px 0 0; /* جا برای دکمه بستن */ padding: 0; list-style: none; } .saat24heeadermenumobile__item { position: relative; display: block; margin: 0; padding: 0 var(--s24-sp-3); /* 12px مطابق منوی مرجع */ } /* لینک سرویس */ .saat24heeadermenumobile__link { display: block; padding: var(--s24-sp-3) var(--s24-sp-6) var(--s24-sp-3) var(--s24-sp-2); /* راست: جا برای + */ color: var(--saat24heeadermenumobile-fg); font-size: 16px; font-weight: var(--s24-fw-bold, 700); line-height: 1.4; text-decoration: none; } .saat24heeadermenumobile__link--home { font-size: 18px; font-weight: 800; } .saat24heeadermenumobile__link:hover, .saat24heeadermenumobile__link:focus { color: #ffffff; text-decoration: none; } /* سرویس بدون زیرسرویس هم همان پدینگ را دارد تا همه عنوان‌ها هم‌راستا بمانند */ /* دکمه + / − (فقط سرویس‌های دارای زیرسرویس) */ .saat24heeadermenumobile__toggler { position: absolute; top: 0; right: var(--s24-sp-3); z-index: 2; display: flex; align-items: center; justify-content: center; width: 50px; /* مطابق منوی مرجع */ height: 46px; /* هم‌ارتفاع ردیف */ cursor: pointer; } /* آیکون + با دو خط؛ در حالت باز خط عمودی حذف می‌شود Ùˆ − می‌ماند */ .saat24heeadermenumobile__toggler-icon { position: relative; display: block; width: 14px; height: 14px; } .saat24heeadermenumobile__toggler-icon::before, .saat24heeadermenumobile__toggler-icon::after { content: ""; position: absolute; background: var(--saat24heeadermenumobile-fg); transition: transform .2s ease, opacity .2s ease; } .saat24heeadermenumobile__toggler-icon::before { /* خط افقی */ top: 50%; left: 0; width: 14px; height: 2px; transform: translateY(-50%); } .saat24heeadermenumobile__toggler-icon::after { /* خط عمودی */ top: 0; left: 50%; width: 2px; height: 14px; transform: translateX(-50%); } /* + ← − در حالت باز */ .saat24heeadermenumobile__sub-state:checked ~ .saat24heeadermenumobile__toggler .saat24heeadermenumobile__toggler-icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); } /* زیرمنو */ .saat24heeadermenumobile__submenu { display: none; /* حالت بسته */ margin: 0 0 var(--s24-sp-2) var(--s24-sp-4); /* Ú©Ù…ÛŒ تورفتگی از Ú†Ù¾ (مطابق عکس) */ padding: var(--s24-sp-2) 0; list-style: none; background-color: var(--saat24heeadermenumobile-sub-bg); border-radius: 0 0 0 var(--s24-radius); } .saat24heeadermenumobile__sub-state:checked ~ .saat24heeadermenumobile__submenu { display: block; } .saat24heeadermenumobile__subitem { display: block; margin: 0; padding: 0; } .saat24heeadermenumobile__sublink { display: block; padding: var(--s24-sp-2) var(--s24-sp-5) var(--s24-sp-2) var(--s24-sp-2); color: var(--saat24heeadermenumobile-fg); font-size: 14.4px; font-weight: var(--s24-fw-normal); line-height: 1.6; text-decoration: none; } .saat24heeadermenumobile__sublink:hover, .saat24heeadermenumobile__sublink:focus { color: #ffffff; text-decoration: none; } /* ===================================================== رفتار موبایل — تا 800px این باکس ذاتاً موبایلی است؛ در نمایشگر باریک پنل منو همان 75% صفحه است (بدون سقف عرض) Ùˆ ردیف‌ها لمس‌پذیرند. ===================================================== */ @media (max-width: 800px) { .saat24heeadermenumobile__panel { max-width: none; /* در موبایل همان 75% صفحه (مطابق منوی مرجع) */ } .saat24heeadermenumobile__search-input { font-size: 20px; } } /* ===== 35-saat24breadcrumb.css ===== */ /* ===== saat24breadcrumb.css ===== */ .saat24breadcrumb { display: block; width: 100%; margin: 0 0 var(--s24-sp-5, 20px); padding: 0; direction: rtl; text-align: right; font-family: var(--s24-font-family, Tahoma, Arial, sans-serif); font-size: var(--s24-fs-body, 16px); font-weight: var(--s24-fw-bold, 700); line-height: 24px; color: var(--s24-color-heading, #111111); background: transparent; border: 0; } .saat24breadcrumb__list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; } .saat24breadcrumb__item { display: flex; align-items: center; min-width: 0; color: var(--s24-color-heading, #111111); } .saat24breadcrumb__item + .saat24breadcrumb__item::before { content: "/"; margin: 0 var(--s24-sp-2, 8px); color: var(--s24-color-heading, #111111); font-weight: var(--s24-fw-normal, 400); } .saat24breadcrumb__item--active, .saat24breadcrumb__current { color: var(--s24-color-heading, #111111); } .saat24breadcrumb__link { color: var(--s24-color-heading, #111111); text-decoration: none; } .saat24breadcrumb__link:hover, .saat24breadcrumb__link:focus { color: var(--s24-color-primary, #b40000); text-decoration: none; } @media (max-width: 800px) { .saat24breadcrumb { font-size: 14px; line-height: 22px; } } /* ===== 36-saat24contentbody.css ===== */ /* ===================================================================== content-body.css — بدنه صفحه خبر (الگوی ساختار: صفحه خبر مرجع — رنگ: saat24) --------------------------------------------------------------------- - تمام سلکتورها زیر کلاس مادر .content-body هستند؛ هیچ استایل عمومی ندارد. - وابسته به متغیرهای s24-theme.css است (پیشوند --s24-). - چیدمان (مطابق مرجع): ردیف کد خبر/تاریخ با پس‌زمینه طوسی (بالای همه) ← تیتر (18px) ← دسکتاپ: لید ستون راست + تصویر ستون چپ / موبایل: لید سپس تصویر ← متن. (مسیر راهنما باکس مستقل breadcrumb است و اینجا نیست.) - مقادیر از DevTools مرجع: مسیر راهنما با پس‌زمینه روشن و پدینگ 12×16 | تیتر ~21px/500 | لید ~14.8px با ارتفاع خط 2 | متن 14.4px justify با فاصله پاراگراف 16px | ردیف متا با چیپ‌های حاشیه‌دار (مطابق عکس پروژه). - رنگ saat24: خط قرمز لید، دکمه قرمز «کپی لینک»، لینک‌ها در hover قرمز. - نقطه شکست موبایل: 800px (هماهنگ با تم). ===================================================================== */ /* ---------------- کلاس مادر ---------------- */ .content-body { /* متغیرهای اختصاصی این باکس — محلی و ایزوله */ --content-body-accent: var(--s24-color-primary); /* قرمز برند */ --content-body-chip-line: var(--s24-color-border); /* خطوط جداکننده فوتر */ --content-body-meta-bg: #eeeeee; /* پس‌زمینه طوسی ردیف کد خبر/تاریخ (مطابق مرجع) */ display: block; width: 100%; margin: 0 0 var(--s24-box-gap); padding: 0; background-color: var(--s24-color-surface); border-radius: var(--s24-radius); padding: var(--s24-sp-4); direction: rtl; text-align: right; color: var(--s24-color-text); font-family: var(--s24-font-family); font-size: var(--s24-fs-body); font-weight: var(--s24-fw-normal); line-height: var(--s24-lh-body); } /* ---------------- ردیف کد خبر و تاریخ ---------------- */ .content-body__meta { display: flex; flex-direction: row; align-items: center; justify-content: space-between; /* کد خبر راست، تاریخ چپ (مطابق مرجع) */ gap: var(--s24-sp-3); margin: 0 0 var(--s24-sp-4); padding: var(--s24-sp-2) var(--s24-sp-3); /* پدینگ داخل نوار طوسی */ background-color: var(--content-body-meta-bg); /* پس‌زمینه طوسی یکدست (مطابق مرجع) */ border-radius: var(--s24-radius); } .content-body__code, .content-body__date { display: flex; align-items: center; gap: var(--s24-sp-2); padding: 0; /* بدون چیپ جدا؛ کل نوار طوسی است */ font-size: var(--s24-fs-small); /* 12px */ line-height: 1.8; color: var(--s24-color-text); } .content-body__code-label { color: var(--s24-color-text-muted); } .content-body__code-value { font-weight: var(--s24-fw-medium); } .content-body__date-icon { display: block; color: var(--s24-color-text); } /* ---------------- تیتر + لید + تصویر ---------------- */ /* دسکتاپ: grid دو ستونه — ستون اول (راست در RTL) تیتر و لید، ستون دوم (چپ) تصویر */ .content-body__summary { display: grid; grid-template-columns: 1fr 1fr; /* مطابق مرجع: 50/50 — لید راست، تصویر چپ */ grid-template-areas: "lead img"; align-items: start; gap: var(--s24-sp-3) var(--s24-sp-5); margin: 0 0 var(--s24-sp-5); } .content-body__summary--no-image { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead"; } .content-body__summary--no-image .content-body__lead { width: 100%; } .article .content-body__title { margin: 0 0 var(--s24-sp-4); /* زیر ردیف متا، با فاصله تا لید/تصویر */ padding: 0; font-size: 28px; font-weight: var(--s24-fw-bold); line-height: 1.6; color: var(--s24-color-heading); } /* لید با خط قرمز در سمت راست (مطابق عکس پروژه) */ .content-body__lead { grid-area: lead; align-self: start; margin: 0; padding: var(--s24-sp-1) var(--s24-sp-3) var(--s24-sp-1) 0; border-right: 4px solid var(--content-body-accent); font-size: 14.8px; /* مطابق مرجع */ font-weight: var(--s24-fw-normal); line-height: 2; /* مرجع: 29.6px */ color: var(--s24-color-heading); text-align: justify; } .content-body__figure { grid-area: img; margin: 0; padding: 0; } .content-body__img { display: block; width: 100%; height: auto; border: 0; border-radius: var(--s24-radius); margin: 0; padding: 0; } .content-body__caption { padding: var(--s24-sp-1) var(--s24-sp-2); font-size: var(--s24-fs-small); color: var(--s24-color-text-muted); text-align: center; } /* ---------------- متن خبر (خروجی ادیتور CMS) ---------------- */ .content-body__text { font-size: 14.4px; /* مطابق مرجع */ line-height: 1.9; /* مرجع: 27.4px */ text-align: justify; color: var(--s24-color-text); } .content-body__text p { margin: 0 0 var(--s24-sp-4); /* 16px مطابق مرجع */ padding: 0; } /* میان‌تیترهای احتمالی داخل متن ادیتور */ .content-body__text h2, .content-body__text h3 { margin: var(--s24-sp-5) 0 var(--s24-sp-3); padding: 0; font-size: var(--s24-fs-h4); font-weight: var(--s24-fw-bold); line-height: 1.6; color: var(--s24-color-heading); } .content-body__text img { display: block; max-width: 100%; height: auto; border-radius: var(--s24-radius); margin: var(--s24-sp-4) auto; } .content-body__text a { color: var(--content-body-accent); text-decoration: none; } .content-body__text a:hover, .content-body__text a:focus { text-decoration: underline; } .content-body__text blockquote { margin: var(--s24-sp-4) 0; padding: var(--s24-sp-3) var(--s24-sp-4); border-right: 4px solid var(--content-body-accent); background-color: #faeeee; border-radius: var(--s24-radius); } /* ---------------- اشتراک‌گذاری + لینک کوتاه ---------------- */ .content-body__footer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; /* اشتراک‌گذاری راست، لینک کوتاه چپ */ flex-wrap: wrap; gap: var(--s24-sp-3); margin: var(--s24-sp-5) 0 0; padding: var(--s24-sp-3) 0 0; border-top: 1px solid var(--content-body-chip-line); } /* گروه دکمه‌های اشتراک‌گذاری */ .content-body__share { display: flex; flex-direction: row; align-items: center; gap: var(--s24-sp-2); } .content-body__share-label { font-size: var(--s24-fs-small); color: var(--s24-color-text-muted); } .content-body__share-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--content-body-chip-line); border-radius: 50%; color: var(--s24-color-text); text-decoration: none; transition: all .15s ease; } .content-body__share-btn:hover, .content-body__share-btn:focus { border-color: var(--content-body-accent); background-color: var(--content-body-accent); color: #ffffff; } /* گروه لینک کوتاه */ .content-body__shortlink { display: flex; flex-direction: row; align-items: center; gap: var(--s24-sp-2); flex: 1 1 auto; min-width: 0; justify-content: flex-end; /* چسبیده به انتهای چپ */ } .content-body__shortlink-label { flex: 0 0 auto; font-size: var(--s24-fs-small); color: var(--s24-color-text-muted); } .content-body__shortlink-input { flex: 1 1 auto; min-width: 0; max-width: 280px; padding: var(--s24-sp-1) var(--s24-sp-3); border: 1px solid var(--content-body-chip-line); border-radius: var(--s24-radius); background-color: #fafafa; /* مطابق نوار پایانی مرجع */ color: var(--s24-color-text); font-family: var(--s24-font-family); font-size: var(--s24-fs-small); line-height: 1.8; direction: ltr; /* آدرس لاتین */ text-align: left; outline: none; } .content-body__copy { flex: 0 0 auto; padding: var(--s24-sp-1) var(--s24-sp-4); border: 0; border-radius: var(--s24-radius); background-color: var(--content-body-accent); color: #ffffff; font-family: var(--s24-font-family); font-size: var(--s24-fs-small); font-weight: var(--s24-fw-medium); line-height: 1.8; cursor: pointer; } .content-body__copy:hover, .content-body__copy:focus { background-color: #a80000; /* قرمز تیره‌تر تم */ } /* حالت «کپی شد!» */ .content-body__copy--done { background-color: #1d7a3a; /* سبز تایید */ } /* ===================================================== رفتار موبایل — تا 800px (مطابق عکس پروژه) تیتر ← لید ← تصویر پشت‌سرهم و تمام‌عرض؛ فونت‌ها جمع‌وجورتر. ===================================================== */ @media (max-width: 800px) { .content-body { padding: var(--s24-sp-3); } /* grid → جریان عادی: ترتیب DOM یعنی تیتر، لید، تصویر */ .content-body__summary { display: block; } .article .content-body__title { margin-bottom: var(--s24-sp-3); font-size: 22px; } .content-body__lead { margin-bottom: var(--s24-sp-4); } .content-body__figure { margin-bottom: var(--s24-sp-2); } /* هر گروه فوتر یک ردیف کامل بگیرد */ .content-body__share, .content-body__shortlink { flex: 1 1 100%; justify-content: flex-start; } .content-body__shortlink-input { max-width: none; } } /* ===== 37-saat24realtedaxdar.css ===== */ /* * saat24realtedaxdar.css * Image-based related-news grid. All selectors are scoped to this box. */ .saat24realtedaxdar { --saat24realtedaxdar-accent: var(--s24-color-primary, #b40000); display: block; width: 100%; margin: var(--s24-sp-5, 24px) 0 var(--s24-box-gap, 20px); padding: 0; direction: rtl; text-align: right; color: var(--s24-color-text, #161616); font-family: var(--s24-font-family, Vazirmatn, Tahoma, Arial, sans-serif); font-size: 13px; font-weight: var(--s24-fw-normal, 400); line-height: var(--s24-lh-body, 1.8); } .saat24realtedaxdar__header { display: flex; flex-direction: row; align-items: center; gap: var(--s24-sp-3, 12px); margin: 0 0 var(--s24-sp-5, 24px); } .saat24realtedaxdar__header-dot { display: block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--saat24realtedaxdar-accent); } .saat24realtedaxdar__header-title { display: block; margin: 0; color: var(--s24-color-heading, #111); font-size: var(--s24-fs-body, 16px); font-weight: var(--s24-fw-medium, 600); line-height: 25px; } .saat24realtedaxdar__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s24-sp-4, 16px) 13px; } .saat24realtedaxdar__item { display: block; min-width: 0; margin: 0; padding: 0; } .saat24realtedaxdar__media { display: flex; align-items: center; justify-content: center; margin: 0 0 10px; overflow: hidden; border-radius: var(--s24-radius, 4px); background: #eef1f4; text-decoration: none; aspect-ratio: 232 / 135; } .saat24realtedaxdar__img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: var(--s24-radius, 4px); } .saat24realtedaxdar__placeholder { color: var(--s24-color-text-muted, #6b7280); font-size: var(--s24-fs-small, 12px); } .saat24realtedaxdar__text { display: block; } .saat24realtedaxdar__rutitr { margin: 0 0 3px; color: var(--s24-color-text-muted, #6b7280); font-size: 13px; font-weight: var(--s24-fw-normal, 400); line-height: 1.8; } .saat24realtedaxdar__title { display: block; color: var(--s24-color-heading, #111); font-size: 15px; font-weight: var(--s24-fw-normal, 400); line-height: 25px; text-align: justify; text-decoration: none; } .saat24realtedaxdar__title:hover, .saat24realtedaxdar__title:focus { color: var(--saat24realtedaxdar-accent); text-decoration: none; } .saat24realtedaxdar__dot { display: inline-block; width: 7px; height: 7px; margin-left: var(--s24-sp-2, 8px); border-radius: 50%; background-color: var(--saat24realtedaxdar-accent); vertical-align: middle; } @media (max-width: 800px) { .saat24realtedaxdar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24-sp-4, 16px) var(--s24-sp-3, 12px); } .saat24realtedaxdar__title { font-size: 14px; line-height: 22px; } .saat24realtedaxdar__media { margin-bottom: var(--s24-sp-2, 8px); } } /* ===== 38-saat24latestscrool.css ===== */ /* ===================================================================== latest-news.css — باکس «تازه‌ترین خبرها» (الگو: card news-box با list-latest_news سایت saat24.news) --------------------------------------------------------------------- - تمام سلکتورها زیر کلاس مادر .latest-news هستند؛ هیچ استایل عمومی ندارد. - وابسته به متغیرهای s24-theme.css است (پیشوند --s24-). - مقادیر عددی از DevTools سایت: کارت سفید گوشه 4px | هدر: پس‌زمینه #bb1919، متن سفید 15.3px/500، پدینگ 4px 8px، گوشه گرد فقط بالا | لیست: margin بالا 4px و پایین 16px، سقف ارتفاع (max-height) با اسکرول عمودی همیشه نمایان (overflow: auto scroll) | آیتم: flex با gap 4px، پدینگ 4px 4px 4px 0، پس‌زمینه یکی‌درمیان سفید/طوسی rgb(238,238,238) | آیکون فلش 18px تیره | تیتر 15.3px وزن 300، لینک مشکی بدون زیرخط. - نقطه شکست موبایل: 800px (هماهنگ با تم). ===================================================================== */ /* ---------------- کلاس مادر: کارت ---------------- */ .latest-news { /* متغیرهای اختصاصی این باکس — محلی و ایزوله */ --latest-news-header-bg: #bb1919; /* از سایت: rgb(187,25,25) */ --latest-news-list-h: 460px; /* سقف اسکرول در صورت زیاد بودن خبرها */ display: flex; flex-direction: column; position: relative; width: 100%; /* عرض را ستون CMS تعیین می‌کند (در سایت: ستون 318px سایدبار) */ margin: 0 0 var(--s24-box-gap); padding: 0; background-color: var(--s24-color-surface); border: 0; border-radius: var(--s24-radius); overflow: hidden; direction: rtl; text-align: start; color: var(--s24-color-text); font-family: var(--s24-font-family); font-size: var(--s24-fs-body); /* 16px */ font-weight: var(--s24-fw-normal); line-height: var(--s24-lh-body); /* 24px */ } /* ---------------- هدر قرمز ---------------- */ .latest-news__header { margin: 0; padding: var(--s24-sp-1) var(--s24-sp-2); /* 4px 8px مطابق سایت */ background-color: var(--latest-news-header-bg); color: #ffffff; font-size: 15.3px; /* مقدار دقیق سایت (fs-6) */ font-weight: var(--s24-fw-medium); /* 500 */ line-height: 1.2; /* 18.37px */ border-radius: var(--s24-radius) var(--s24-radius) 0 0; /* گوشه گرد فقط بالا */ } /* ---------------- لیست اسکرول‌خور ---------------- */ .latest-news__list { margin: var(--s24-sp-1) 0 var(--s24-sp-4); /* 4px 0 16px مطابق سایت */ padding: 0; list-style: none; max-height: min(var(--latest-news-list-h), 70vh); /* فقط وقتی خبرها زیاد شد اسکرول بخورد */ overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* اسکرول‌بار باریک و همیشه نمایان (مرورگرهای وب‌کیت) */ .latest-news__list::-webkit-scrollbar { width: 8px; } .latest-news__list::-webkit-scrollbar-track { background: #f4f4f4; } .latest-news__list::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 4px; } .latest-news__list::-webkit-scrollbar-thumb:hover { background: #a9a9a9; } /* ---------------- آیتم ---------------- */ .latest-news__item { display: flex; flex-direction: row; align-items: flex-start; gap: var(--s24-sp-1); /* 4px مطابق سایت */ margin: 0; padding: var(--s24-sp-1) var(--s24-sp-1) var(--s24-sp-1) 0; /* 4px 4px 4px 0 مطابق سایت */ } /* پس‌زمینه یکی‌درمیان: ردیف‌های زوج طوسی (مطابق سایت: rgb(238,238,238)) */ .latest-news__item:nth-child(even) { background-color: #eeeeee; } /* ---------------- آیکون کنار تیتر ---------------- */ .latest-news__icon { display: block; flex: 0 0 18px; width: 18px; height: 24px; /* هم‌ارتفاع خط متن */ display: flex; align-items: center; justify-content: center; color: var(--s24-color-text); /* rgb(33,37,41) مطابق سایت */ } /* ---------------- تیتر و لینک ---------------- */ .latest-news__title { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-size: 15.3px; /* مقدار دقیق سایت */ font-weight: 300; /* fw-light مطابق سایت */ line-height: 1.2; /* 18.37px */ color: var(--s24-color-text); } .latest-news__link { color: var(--s24-color-heading); /* مشکی */ text-decoration: none; font: inherit; } .latest-news__link:hover, .latest-news__link:focus { color: var(--s24-color-heading); /* مشکی، بدون زیرخط حتی در hover */ text-decoration: none; } /* ===================================================== رفتار موبایل — تا 800px باکس تک‌ستونه است؛ تمام‌عرض ستون می‌شود، ناحیه اسکرول کمی کوتاه‌تر و ردیف‌ها برای لمس راحت‌تر کمی بلندتر. ===================================================== */ @media (max-width: 800px) { .latest-news { --latest-news-list-h: 380px; margin-bottom: var(--s24-sp-3); } .latest-news__item { padding-top: 3px; padding-bottom: 3px; } } /* The column supplies the separation between boxes; the box itself stays tight. */ .lb-box-v2:has(> .latest-news) { margin: 0 !important; } .latest-news { margin: 0 !important; } .latest-news__list { margin-top: 2px; margin-bottom: 4px; } .latest-news__item { padding-top: 2px; padding-bottom: 2px; } /* Slightly more breathing room between headlines in the scrolling list. */ .saat24latestscrool .latest-news__item { padding-top: 4px; padding-bottom: 4px; } .saat24latestscrool .latest-news__icon { color: #c9181e !important; font-size: 30px; font-weight: 700; line-height: 1; } /* ===== 39-saat24coments.css ===== */ /* ===== 39-saat24coments.css ===== */ .saat24coments { --uc-ribbon-bg: #70be60; --uc-ribbon-fg: #0f3d6f; --uc-tab-bg: #17603c; --uc-fold: #8f1414; --uc-form-bg: #f8f9fa; --uc-field-line: #dee2e6; display: block; width: 100%; margin: 0 0 var(--s24-box-gap, 20px); direction: rtl; text-align: start; font-family: var(--s24-font-family, Tahoma, Arial, sans-serif); font-size: var(--s24-fs-body, 16px); line-height: var(--s24-lh-body, 1.9); color: var(--s24-color-text, #161616); } .saat24coments__heading { margin: 0 0 var(--s24-sp-4, 16px); padding: 0; font-size: var(--s24-fs-h4, 16px); font-weight: var(--s24-fw-bold, 700); line-height: 1.6; color: var(--s24-color-heading, #111); } .saat24coments__card { background-color: var(--s24-color-surface, #fff); border-radius: var(--s24-radius, 4px); padding-top: 10px; } .saat24coments__ribbon { position: relative; height: 30px; margin: 0 0 0 10px; background-color: var(--uc-ribbon-bg); display: flex; align-items: center; justify-content: center; } .saat24coments__ribbon::before { content: ""; position: absolute; right: 100%; top: 0; width: 0; height: 0; border-style: solid; border-width: 15px 10px 15px 0; border-color: transparent var(--uc-fold) transparent transparent; } .saat24coments__tab { position: absolute; top: -10px; right: 8px; height: 40px; padding: 7px 20px 0 16px; background-color: var(--uc-tab-bg); color: #fff; font-size: var(--s24-fs-body, 16px); line-height: 28px; text-align: center; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%); } .saat24coments__notice { margin: 0 48px 0 0; padding: 2px 0 0; font-size: var(--s24-fs-summary, 13px); line-height: 28px; color: var(--uc-ribbon-fg); text-align: center; } .saat24coments__form { display: flex; flex-direction: column; margin: 0; padding: var(--s24-sp-5, 24px) var(--s24-sp-4, 16px); background-color: var(--uc-form-bg); border-radius: 16px; } .saat24coments__row { display: flex; flex-direction: row; align-items: flex-start; gap: var(--s24-sp-5, 24px); margin: 0 0 var(--s24-sp-4, 16px); } .saat24coments__label { flex: 0 0 88px; padding-top: var(--s24-sp-2, 8px); font-size: var(--s24-fs-body, 16px); line-height: var(--s24-lh-body, 1.9); color: var(--s24-color-text, #161616); } .saat24coments__required { color: var(--s24-color-primary, #b40000); } .saat24coments__input, .saat24coments__textarea { flex: 1 1 auto; min-width: 0; display: block; width: 100%; margin: 0; padding: 6px 12px; background-color: #fff; color: var(--s24-color-text, #161616); border: 1px solid var(--uc-field-line); border-radius: 8px; font-family: var(--s24-font-family, Tahoma, Arial, sans-serif); font-size: 18px; line-height: 1.55; outline: none; } .saat24coments__textarea { resize: vertical; min-height: 180px; } .saat24coments__input:focus, .saat24coments__textarea:focus { border-color: var(--s24-color-primary, #b40000); } .saat24coments__trap { position: absolute !important; right: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; } .saat24coments__actions { align-self: flex-end; } .saat24coments__submit { display: inline-block; margin: 0; padding: var(--s24-sp-1, 4px) var(--s24-sp-4, 16px); background-color: var(--s24-color-primary, #b40000); color: #fff; border: 0; border-radius: var(--s24-radius, 4px); font-family: var(--s24-font-family, Tahoma, Arial, sans-serif); font-size: var(--s24-fs-body, 16px); font-weight: var(--s24-fw-medium, 600); line-height: 1.6; cursor: pointer; } .saat24coments__submit:hover, .saat24coments__submit:focus { background-color: var(--s24-color-primary-dark, #8f0000); } .saat24coments__list { display: grid; gap: 12px; margin-top: 16px; } .saat24coments__item, .saat24coments__reply { border: 1px solid var(--s24-color-border, #e5e5e5); background: #fff; padding: 12px; } .saat24coments__item--featured { border-right: 4px solid var(--s24-color-primary, #b40000); } .saat24coments__item-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .saat24coments__item-header strong { color: var(--s24-color-heading, #111); } .saat24coments__item-header time { font-size: 12px; color: var(--s24-color-muted, #6b7280); } .saat24coments__item p, .saat24coments__reply p { margin: 0; color: var(--s24-color-text, #161616); line-height: 2; } .saat24coments__replies { display: grid; gap: 8px; margin-top: 12px; padding-right: 14px; border-right: 2px solid var(--s24-color-border, #e5e5e5); } .saat24coments__reply { background: #fafafa; } .saat24coments__empty { border: 1px dashed var(--s24-color-border, #d8dde3); color: var(--s24-color-muted, #6b7280); padding: 14px; text-align: center; background: #fff; } @media (max-width: 800px) { .saat24coments__notice { display: none; } .saat24coments__row { flex-direction: column; gap: var(--s24-sp-1, 4px); } .saat24coments__label { flex: 0 0 auto; padding-top: 0; } .saat24coments__actions { align-self: stretch; } .saat24coments__submit { width: 100%; padding-top: var(--s24-sp-2, 8px); padding-bottom: var(--s24-sp-2, 8px); } } /* ===== 40-footer.css ===== */ /* ===================================================================== saat24-footer.css — فوتر سایت (الگو: footer-container سایت saat24.news) --------------------------------------------------------------------- - تمام سلکتورها زیر کلاس مادر .saat24-footer هستند؛ هیچ استایل عمومی ندارد. - وابسته به متغیرهای s24-theme.css است (پیشوند --s24-). - مقادیر از DevTools سایت: فوتر روشن (روی پس‌زمینه صفحه)، کانتینر 1320px با پدینگ 12px | ستون‌ها: درباره (5/12 با آفست) + دو منوی 2/12 + حقوقی 2/12 | تیتر «درباره» 18px/500 با فاصله 24px | متن 16px/24 | لینک‌ها مشکی 16px | نوار پایینی: خط بالایی، پدینگ و مارجین 24px، کپی‌رایت راست و آیکون‌های اجتماعی 24px چپ. - حال‌وهوای سایت: hover همه لینک‌ها و آیکون‌ها قرمز برند. - نقطه شکست موبایل: 800px — درباره تمام‌عرض، منوها دوتایی کنار هم، نوار پایینی ستونی (مطابق flex-column flex-sm-row سایت). ===================================================================== */ /* ---------------- کلاس مادر ---------------- */ .saat24-footer { /* متغیرهای اختصاصی این باکس — محلی و ایزوله */ --sf-line: var(--s24-color-border); /* خط جداکننده نوار پایینی */ display: block; width: 100%; margin: var(--s24-sp-7) 0 0; /* فاصله از محتوای بالا (mt-5 سایت) */ padding: 0 0 var(--s24-sp-2); /* pb-1 سایت */ direction: rtl; text-align: start; font-family: var(--s24-font-family); font-size: var(--s24-fs-body); /* 16px */ font-weight: var(--s24-fw-normal); line-height: var(--s24-lh-body); /* 24px */ color: var(--s24-color-text); } /* ---------------- کانتینر ---------------- */ .saat24-footer__container { width: 100%; max-width: var(--s24-site-width); margin: 0 auto; padding: 0 var(--s24-sp-3); /* 12px مطابق سایت */ } /* ---------------- ردیف ستون‌ها ---------------- */ /* راست→چپ: درباره (پهن) | منوی ۱ | منوی ۲ | حقوقی — مطابق سایت */ .saat24-footer__grid { display: grid; grid-template-columns: 5fr 2fr 2fr 2fr; gap: var(--s24-sp-4) var(--s24-sp-5); padding-right: 4%; /* معادل offset-md-1 سایت */ } /* ---------------- ستون درباره ---------------- */ .saat24-footer__about-title { margin: 0 0 var(--s24-sp-5); /* 24px مطابق سایت */ padding: 0; font-size: var(--s24-fs-h3); /* 18px مطابق سایت */ font-weight: var(--s24-fw-medium); /* 500 */ line-height: 1.2; color: var(--s24-color-text); } .saat24-footer__about-text { margin: 0 0 var(--s24-sp-5); padding: 0; font-size: var(--s24-fs-body); line-height: var(--s24-lh-body); color: var(--s24-color-text); text-align: justify; } /* ---------------- ستون‌های منو و حقوقی ---------------- */ .saat24-footer__nav-list, .saat24-footer__legal-list { display: flex; flex-direction: column; margin: 0 0 var(--s24-sp-4); padding: 0; list-style: none; } .saat24-footer__nav-item, .saat24-footer__legal-item { display: block; line-height: 24px; /* مطابق سایت */ } .saat24-footer__nav-link, .saat24-footer__legal-link { display: inline-block; padding: 0; color: var(--s24-color-heading); /* مشکی مطابق سایت */ font-size: var(--s24-fs-body); text-decoration: none; } .saat24-footer__nav-link:hover, .saat24-footer__nav-link:focus, .saat24-footer__legal-link:hover, .saat24-footer__legal-link:focus { color: var(--s24-color-primary); /* hover قرمز — حال‌وهوای سایت */ text-decoration: none; } /* ---------------- نوار پایینی ---------------- */ .saat24-footer__bottom { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; /* کپی‌رایت راست، شبکه‌ها چپ */ gap: var(--s24-sp-4); margin: var(--s24-sp-5) 0 0; /* 24px مطابق سایت */ padding: var(--s24-sp-5) 0 0; /* 24px مطابق سایت */ border-top: 1px solid var(--sf-line); } .saat24-footer__copyright { margin: 0; padding: 0; font-size: var(--s24-fs-body); line-height: var(--s24-lh-body); color: var(--s24-color-text); } .saat24-footer__brand { font-weight: var(--s24-fw-medium); } /* شبکه‌های اجتماعی */ .saat24-footer__social { display: flex; flex-direction: row; align-items: center; gap: var(--s24-sp-4); /* 16px مطابق سایت (ms-3) */ margin: 0; padding: 0; list-style: none; } .saat24-footer__social-item { display: block; } .saat24-footer__social-link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--s24-color-text); /* آیکون تیره مطابق سایت */ text-decoration: none; transition: color .15s ease; } .saat24-footer__social-link:hover, .saat24-footer__social-link:focus { color: var(--s24-color-primary); /* hover قرمز */ } /* ===================================================== رفتار موبایل — تا 800px درباره تمام‌عرض بالا؛ منوها و حقوقی دوتایی کنار هم (مطابق col-6 سایت)؛ نوار پایینی ستونی. ===================================================== */ @media (max-width: 800px) { .saat24-footer { margin-top: var(--s24-sp-6); } .saat24-footer__grid { grid-template-columns: 1fr 1fr; padding-right: 0; } .saat24-footer__about { grid-column: 1 / -1; /* تمام‌عرض */ } .saat24-footer__about-title { margin-bottom: var(--s24-sp-3); } .saat24-footer__about-text { margin-bottom: var(--s24-sp-2); } /* نوار پایینی ستونی (مطابق flex-column flex-sm-row سایت) */ .saat24-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s24-sp-3); } } /* Final visual override: light footer like the current Saat24 reference. */ .saat24-footer { --sf-bg: #f4f5f6; --sf-text: #050b14; --sf-muted: #1f2937; --sf-line: #d9dee5; width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; background: var(--sf-bg); color: var(--sf-text); padding-top: var(--s24-sp-7); } .saat24-footer__about-title, .saat24-footer__about-text, .saat24-footer__nav-link, .saat24-footer__legal-link, .saat24-footer__copyright { color: var(--sf-text); } .saat24-footer__social-link { color: var(--sf-muted); } /* ===== 41-content-free.css ===== */ .content-free-box { direction: rtl; width: 100%; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e5e5); border-radius: var(--radius-sm, 4px); padding: 22px 24px; color: var(--color-text, #161616); font-family: var(--font-main, Tahoma, Arial, sans-serif); } .content-free-box__body { font-size: var(--text-news, 17px); line-height: var(--lh-news, 2.2); } .content-free-box__body > :first-child { margin-top: 0; } .content-free-box__body > :last-child { margin-bottom: 0; } .content-free-box__body h1, .content-free-box__body h2, .content-free-box__body h3, .content-free-box__body h4 { margin: 0 0 14px; color: var(--color-text, #161616); font-weight: 800; line-height: 1.7; } .content-free-box__body h1 { font-size: var(--title-article, 34px); } .content-free-box__body h2 { font-size: var(--title-featured, 28px); } .content-free-box__body h3 { font-size: 22px; } .content-free-box__body p { margin: 0 0 16px; } .content-free-box__body a { color: var(--color-link-hover, #b40000); text-decoration: none; font-weight: 700; } .content-free-box__body a:hover { text-decoration: underline; } .content-free-box__body ul, .content-free-box__body ol { margin: 0 0 18px; padding-inline-start: 24px; } .content-free-box__body li { margin-bottom: 8px; } .content-free-box__body img { display: block; max-width: 100%; height: auto; margin: 18px auto; } .content-free-box__body blockquote { margin: 18px 0; padding: 12px 16px; border-right: 4px solid var(--color-brand, #b40000); background: var(--color-soft-bg, #f6f6f6); color: var(--color-muted, #6b7280); } .content-free-box__body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: var(--text-base, 15px); } .content-free-box__body th, .content-free-box__body td { border: 1px solid var(--color-border, #e5e5e5); padding: 10px; text-align: right; } .content-free-box__body th { background: var(--color-soft-bg, #f6f6f6); font-weight: 800; } .content-free-box__empty { color: var(--color-muted, #6b7280); font-size: var(--text-base, 15px); line-height: var(--lh-normal, 1.8); text-align: center; } @media (max-width: 768px) { .content-free-box { padding: 16px; } .content-free-box__body { font-size: var(--text-news, 16px); line-height: 2; } } /* ===== 42-saat24linkestan.css ===== */ .saat24linkestan { --saat24linkestan-accent: var(--s24-color-primary, #b40000); --saat24linkestan-strip: #f7f7f7; --saat24linkestan-chip: #6c757d; display: block; width: 100%; margin: 0 0 var(--s24-box-gap, 20px); padding: var(--s24-sp-3, 12px); background-color: var(--s24-color-surface, #ffffff); border-radius: var(--s24-radius, 4px); direction: rtl; text-align: start; font-family: var(--s24-font-family, inherit); font-size: var(--s24-fs-summary, 13px); font-weight: var(--s24-fw-normal, 400); line-height: var(--s24-lh-summary, 1.8); color: var(--s24-color-text, #161616); } .saat24linkestan__header { position: relative; display: block; height: 30px; margin: 0 0 var(--s24-sp-3, 12px); background-color: var(--saat24linkestan-strip); line-height: 30px; } .saat24linkestan__header::before { content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 30px; background-color: var(--saat24linkestan-accent); } .saat24linkestan__header-title { display: inline-block; margin: 0; padding: 0 38px 0 var(--s24-sp-2, 8px); color: var(--saat24linkestan-accent); font-size: 14.4px; font-weight: var(--s24-fw-bold, 700); line-height: 30px; } .saat24linkestan__list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; } .saat24linkestan__item { display: block; min-width: 0; } .saat24linkestan__link { display: block; padding: 1px 6px; border: 1px solid var(--saat24linkestan-chip); border-radius: 3px; color: var(--saat24linkestan-chip); font-size: 12px; font-weight: var(--s24-fw-normal, 400); line-height: 18px; text-align: center; text-decoration: none; white-space: nowrap; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .saat24linkestan__link:hover, .saat24linkestan__link:focus { border-color: var(--saat24linkestan-accent); color: var(--saat24linkestan-accent); background-color: #faeeee; text-decoration: none; } @media (max-width: 800px) { .saat24linkestan__link { padding: 3px 8px; } } /* ===== 43-saat24rss.css ===== */ /* RSS directory box. All selectors are scoped to this box. */ .saat24rss { --saat24rss-accent: var(--s24-color-primary, #b40000); --saat24rss-line: #dee2e6; --saat24rss-head-bg: #faeeee; --saat24rss-hover: #fbf4f4; display: block; width: 100%; margin: 0 0 var(--s24-box-gap, 20px); padding: var(--s24-sp-4, 16px); background-color: var(--s24-color-surface, #ffffff); border-radius: var(--s24-radius, 4px); direction: rtl; text-align: start; font-family: var(--s24-font-family, inherit); font-size: var(--s24-fs-summary, 13px); line-height: var(--s24-lh-summary, 1.8); color: var(--s24-color-text, #161616); } .saat24rss__scroll { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .saat24rss__table { width: 100%; margin: 0; border: 1px solid var(--saat24rss-line); border-collapse: collapse; } .saat24rss__th, .saat24rss__cell { padding: var(--s24-sp-3, 12px); border: 1px solid var(--saat24rss-line); line-height: var(--s24-lh-summary, 1.8); } .saat24rss__th { background-color: var(--saat24rss-head-bg); color: var(--saat24rss-accent); font-weight: var(--s24-fw-bold, 700); text-align: center; } .saat24rss__cell { color: var(--s24-color-text, #161616); text-align: right; vertical-align: middle; } .saat24rss__cell--url { direction: ltr; text-align: left; white-space: nowrap; } .saat24rss__row:hover .saat24rss__cell { background-color: var(--saat24rss-hover); } .saat24rss__icon { display: inline-flex; align-items: center; margin-right: 6px; color: var(--saat24rss-accent); vertical-align: middle; } .saat24rss__link { color: var(--s24-color-text, #2c3e50); text-decoration: none; vertical-align: middle; } .saat24rss__link:hover, .saat24rss__link:focus { color: var(--saat24rss-accent); text-decoration: underline; } @media (max-width: 800px) { .saat24rss { padding: var(--s24-sp-3, 12px); } .saat24rss__table { min-width: 560px; } .saat24rss__th, .saat24rss__cell { padding: var(--s24-sp-2, 8px); } } /* ===== 44-saat243tabs.css ===== */ .saat243tabs { --saat243tabs-active: var(--s24-color-primary, #c9151b); --saat243tabs-list-h: 500px; --saat243tabs-line: #ececec; display: block; width: 100%; margin: 0; padding: var(--s24-sp-4, 16px); background: var(--s24-color-surface, #fff); border-radius: var(--s24-radius, 4px); direction: rtl; text-align: right; color: var(--s24-color-text, #111); } .saat243tabs__tab-state { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .saat243tabs__tabbar { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; direction: rtl; gap: var(--s24-sp-5, 20px); margin: 0 0 var(--s24-sp-3, 12px); padding: 0 0 var(--s24-sp-2, 8px); border-bottom: 1px solid var(--saat243tabs-line); } .saat243tabs__tab { display: block; padding: 0 0 var(--s24-sp-2, 8px); margin-bottom: calc(-1 * var(--s24-sp-2, 8px) - 1px); color: var(--s24-color-heading, #111); font-size: 14px; font-weight: 400; line-height: 1.6; cursor: pointer; border-bottom: 2px solid transparent; } .saat243tabs__tab:hover { color: var(--saat243tabs-active); } .saat243tabs__panel { display: none; } .saat243tabs__list { display: flex; flex-direction: column; gap: 0; height: var(--saat243tabs-list-h); max-height: var(--saat243tabs-list-h); margin: 0; padding: 0 0 0 var(--s24-sp-2, 8px); overflow-x: hidden; overflow-y: scroll; scrollbar-color: #c9c9c9 #f3f3f3; scrollbar-gutter: stable; scrollbar-width: thin; list-style: none; } .saat243tabs__list::-webkit-scrollbar { width: 6px; } .saat243tabs__list::-webkit-scrollbar-track { background: #f3f3f3; } .saat243tabs__list::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 3px; } .saat243tabs__item { display: flex; align-items: flex-start; gap: var(--s24-sp-2, 8px); margin: 0; padding: 5px 0; border-bottom: 1px solid var(--saat243tabs-line); } .saat243tabs__item:last-child { border-bottom: 0; } .saat243tabs__bullet { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 8px; border-radius: 2px; background: var(--saat243tabs-active); } .saat243tabs__link { flex: 1 1 auto; min-width: 0; color: var(--s24-color-heading, #111); font-size: var(--s24-fs-body, 16px); line-height: 24px; text-decoration: none; } .saat243tabs__link:hover,.saat243tabs__link:focus { color: var(--saat243tabs-active); text-decoration: none; } .saat243tabs__empty { padding: 12px 0; color: #6b7280; font-size: 14px; } @media (max-width: 800px) { .saat243tabs { --saat243tabs-list-h: 420px; padding: var(--s24-sp-3, 12px); } .saat243tabs__tabbar { gap: var(--s24-sp-4, 16px); } .saat243tabs__tab { white-space: nowrap; font-size: 14px; } .saat243tabs__link { font-size: 15px; line-height: 23px; } } /* ===== 45-saat242tabs.css ===== */ .saat242tabs { --saat242tabs-active: var(--s24-color-primary, #c9151b); --saat242tabs-list-h: 320px; --saat242tabs-line: #ececec; display: block; width: 100%; margin: 0; padding: var(--s24-sp-4, 16px); background: var(--s24-color-surface, #fff); border-radius: var(--s24-radius, 4px); direction: rtl; text-align: right; color: var(--s24-color-text, #111); font-family: var(--s24-font-family); } .saat242tabs__tab-state { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .saat242tabs__tabbar { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; direction: rtl; gap: var(--s24-sp-5, 20px); margin: 0 0 var(--s24-sp-3, 12px); padding: 0 0 var(--s24-sp-2, 8px); border-bottom: 1px solid var(--saat242tabs-line); } .saat242tabs__tab { display: block; padding: 0 0 var(--s24-sp-2, 8px); margin-bottom: calc(-1 * var(--s24-sp-2, 8px) - 1px); color: var(--s24-color-heading, #111); font-size: 14px; font-weight: 400; line-height: 1.6; cursor: pointer; border-bottom: 2px solid transparent; } .saat242tabs__tab:hover { color: var(--saat242tabs-active); } .saat242tabs__panel { display: none; } .saat242tabs__list { display: flex; flex-direction: column; gap: 0; height: var(--saat242tabs-list-h); max-height: var(--saat242tabs-list-h); margin: 0; padding: 0 0 0 var(--s24-sp-2, 8px); overflow-x: hidden; overflow-y: scroll; scrollbar-color: #858585 #ededed; scrollbar-gutter: stable; scrollbar-width: thin; list-style: none; } .saat242tabs__list::-webkit-scrollbar { width: 7px; } .saat242tabs__list::-webkit-scrollbar-track { background: #ededed; } .saat242tabs__list::-webkit-scrollbar-thumb { background: #858585; border-radius: 3px; } .saat242tabs__item { display: flex; align-items: flex-start; gap: var(--s24-sp-2, 8px); margin: 0; padding: 5px 0; border-bottom: 1px solid var(--saat242tabs-line); } .saat242tabs__item:last-child { border-bottom: 0; } .saat242tabs__bullet { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 8px; border-radius: 2px; background: var(--saat242tabs-active); } .saat242tabs__link { flex: 1 1 auto; min-width: 0; color: var(--s24-color-heading, #111); font-family: inherit; font-size: 15.3px; font-weight: 300; line-height: 1.2; text-decoration: none; } .saat242tabs__link:hover,.saat242tabs__link:focus { color: var(--saat242tabs-active); text-decoration: none; } .saat242tabs__empty { padding: 12px 0; color: #6b7280; font-size: 14px; } @media (max-width: 800px) { .saat242tabs { --saat242tabs-list-h: 300px; padding: var(--s24-sp-3, 12px); } .saat242tabs__tabbar { gap: var(--s24-sp-4, 16px); } .saat242tabs__tab { white-space: nowrap; font-size: 14px; } .saat242tabs__link { font-size: 15.3px; line-height: 1.2; } } /* ===== 46-saat24tags.css ===== */ .news-tags { --news-tags-chip-bg: #f5f5f5; --news-tags-chip-fg: #000; display: flex; flex-direction: row; align-items: flex-start; gap: var(--s24-sp-2, 8px); width: 100%; margin: 0 0 var(--s24-box-gap, 16px); direction: rtl; text-align: right; font-family: var(--s24-font-family, inherit); font-size: var(--s24-fs-body, 16px); font-weight: var(--s24-fw-normal, 400); line-height: 30px; color: var(--s24-color-text, #111); } .news-tags__label { flex: 0 0 auto; font-size: var(--s24-fs-small, 12px); color: var(--s24-color-text-muted, #555); } .news-tags__list { display: flex; flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; gap: var(--s24-sp-2, 8px); min-width: 0; margin: 0; padding: 0; list-style: none; } .news-tags__item { display: block; margin: 0; padding: 0; } .news-tags__link { display: block; height: 30px; padding: 0 10px; border-radius: 3px; background-color: var(--news-tags-chip-bg); color: var(--news-tags-chip-fg); font-size: 12px; font-weight: var(--s24-fw-normal, 400); line-height: 30px; text-decoration: none; white-space: nowrap; transition: background-color .3s ease, color .3s ease; } .news-tags__link:hover, .news-tags__link:focus { background-color: #faeeee; color: var(--s24-color-primary, #c9151b); text-decoration: none; } @media (max-width: 800px) { .news-tags { flex-direction: column; gap: var(--s24-sp-1, 4px); line-height: 1.8; } .news-tags__link { height: 34px; padding: 0 12px; line-height: 34px; } } /* ===== 90-responsive.css ===== */ /* * Source: 90-responsive.css * Keep selectors scoped to this layout-box module. */ @media(max-width:900px){ .lb-v2-lead{grid-template-columns:1fr} .lb-mobile-title-only .lb-v2-media,.lb-mobile-title-only p,.lb-mobile-title-only .lb-meta{display:none} .lb-mobile-hide{display:none} .lb-mobile-carousel .lb-v2-grid{grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);grid-template-columns:none;overflow:auto} .lb-mobile-compact{padding:10px} .lb-mobile-compact .lb-v2-grid{grid-template-columns:1fr;gap:8px} .lb-mobile-compact .lb-v2-card{display:grid;grid-template-columns:82px minmax(0,1fr);gap:8px;align-items:start} .lb-mobile-compact .lb-v2-card .lb-v2-media{aspect-ratio:4 / 3} .lb-mobile-compact .lb-v2-card p{display:none} .lb-mobile-compact .lb-v2-card h3{margin:0;font-size:14px} .site-header-box--desktop{display:none} .site-header-box--mobile{display:grid} .site-header-box__menu--mobile{grid-column:1 / -1;border-top:1px solid var(--lb-border);padding-top:10px} .site-header-box__menu--mobile ul,.site-footer-box__menu ul{display:grid;gap:6px} .site-footer-box--columns{grid-template-columns:1fr} .site-footer-box--simple{display:grid;justify-content:stretch;text-align:center} [data-box-type="simple_image_title_lead"] .lb-v2-row{grid-template-columns:150px minmax(0,1fr);gap:10px} [data-box-type="simple_image_title_lead"] .lb-v2-row > div{max-height:94px} [data-box-type="simple_image_title_lead"] .lb-v2-row h3{font-size:12px} .lb-v2-five-mosaic{grid-template-columns:1fr} .lb-v2-mosaic-card:nth-child(n){grid-column:auto} .lb-v2-mosaic-card a,.lb-v2-mosaic-card:nth-child(n+3) a{min-height:210px} .lb-v2-mosaic-card span,.lb-v2-mosaic-card:nth-child(n+3) span{font-size:18px} .news-featured-card,.selected-headlines-box,.breaking-news-box__inner{display:block} .pro-chatgpt-title-1-saat24.saat24-card{width:100%;max-width:758px;height:auto;flex-direction:column} .pro-chatgpt-title-1-saat24 .col-md-6{width:100%;max-width:100%;height:auto;flex:0 0 auto} .pro-chatgpt-title-1-saat24 .news-card__image{height:auto;aspect-ratio:16 / 10} .pro-chatgpt-title-1-saat24 .news-card__image img,.pro-chatgpt-title-1-saat24 .w-100{min-height:0;border-radius:4px 4px 0 0} .pro-chatgpt-title-1-saat24 .news-card__content{padding:14px 12px 40px} .pro-chatgpt-title-1-saat24 .news-card__title{max-width:none;font-size:17px} .pro-chatgpt-title-1-saat24 .news-card__summary{max-width:none;height:auto;max-height:135px} .news-featured-card__figure,.selected-headlines-box__main-image{margin-bottom:12px} .news-featured-card__title{font-size:16px} .news-featured-card__summary{-webkit-line-clamp:4} .selected-headlines-box__headline--main{font-size:20px} .news-card-box__grid,.photo-news-box__grid,.analysis-note-box__items,.related-news-box__items{grid-template-columns:1fr} .photo-news-box--mosaic .photo-news-box__item--featured{grid-row:auto} .photo-news-box--mosaic .photo-news-box__item--featured .photo-news-box__figure{height:auto;min-height:0;aspect-ratio:16 / 10} .breaking-news-box__header{justify-content:center} .breaking-news-box__article{display:block} .breaking-news-box__meta{margin-top:4px} }