/* -------------------------------------------------------------------------- CONCEPT 1: Single Blog Post (body.single-post) -------------------------------------------------------------------------- */ .ekrd-read-progress { position: fixed; top: 0; right: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--theme-palette-color-2), var(--theme-palette-color-1)); z-index: 99999; transition: width 0.08s linear; pointer-events: none; } body.single-post { background-color: var(--theme-palette-color-7); } body.single-post .site-main > .ct-container, body.single-post .site-main > .ct-container-narrow { width: var(--theme-container-width, 90vw) !important; max-width: var(--theme-normal-container-max-width, 1290px) !important; margin-inline: auto !important; padding-top: 24px; padding-bottom: 56px; } /* Neutralize outer article boxed wrapper on single-post so header, figure & 2-col grid breathe */ body.single-post .site-main > [class*="ct-container"] > article.type-post { background-color: transparent !important; box-shadow: none !important; padding: 0 !important; } /* Native Blocksy Breadcrumbs above single post title */ .ekrd-breadcrumbs.ct-breadcrumbs { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; height: 20px; overflow: hidden; font-family: var(--theme-font-family); font-size: 13px; line-height: 1.5; font-weight: 500; text-transform: none; color: var(--theme-text-color); margin-bottom: 14px; } .ekrd-breadcrumbs.ct-breadcrumbs a { color: var(--theme-link-initial-color); text-decoration: none; font-weight: 600; flex-shrink: 0; white-space: nowrap; } .ekrd-breadcrumbs.ct-breadcrumbs a:hover { color: var(--theme-link-hover-color); text-decoration: underline; } /* Single Post Entry Header Card */ body.single-post article.type-post > .entry-header, body.single-post .hero-section .entry-header { background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 12px; padding: 28px 34px; margin-bottom: 22px; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); text-align: right; max-width: 100% !important; } body.single-post .entry-header .page-title { font-family: var(--theme-font-family) !important; font-size: clamp(26px, 3vw, 36px) !important; line-height: 1.4 !important; font-weight: 700 !important; color: var(--theme-headings-color) !important; margin-top: 0 !important; margin-bottom: 12px !important; } body.single-post .entry-header .page-description { font-family: var(--theme-font-family); font-size: 15.5px !important; line-height: 1.8 !important; color: var(--theme-text-color) !important; margin-bottom: 14px !important; max-width: 880px !important; } body.single-post .entry-header .page-description p { margin: 0 !important; } .ekrd-readtime-pill { display: inline-flex; align-items: center; gap: 6px; direction: rtl; padding: 3px 10px; border-radius: var(--theme-button-border-radius, 3px); background-color: var(--theme-palette-color-6); border: 1px solid var(--theme-border-color); color: var(--theme-link-initial-color); font-family: var(--theme-font-family); font-size: 12.5px; line-height: 1.4; font-weight: 600; text-transform: none; } /* Crisp Full-Width 1200x675 Featured Image (16:9 CLS-Safe) */ body.single-post figure.ct-featured-image { max-width: 100% !important; width: 100% !important; margin: 0 0 26px 0 !important; border-radius: 12px !important; overflow: hidden !important; border: 1px solid var(--theme-border-color) !important; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)) !important; background-color: var(--theme-palette-color-6) !important; } body.single-post figure.ct-featured-image .ct-media-container, body.single-post figure.ct-featured-image img { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; display: block !important; } /* 2-Column Content-First Editorial Body (Prose FIRST in DOM + Sticky Rail) */ .ekrd-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; align-items: start; } .ekrd-post-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; } .ekrd-toc-card, .ekrd-rail-cta { background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 12px; padding: 18px 20px; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); } .ekrd-rail-cta { background-color: var(--theme-palette-color-6); } .ekrd-toc-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; margin: 0 0 12px 0; font-family: var(--theme-font-family); font-size: 16.5px; line-height: 1.4; font-weight: 700; color: var(--theme-headings-color); cursor: pointer; text-align: right; direction: rtl; } .ekrd-toc-toggle > span:first-child { display: inline-flex; align-items: center; gap: 8px; direction: rtl; } .ekrd-toc-toggle-icon { display: none; align-items: center; gap: 5px; direction: rtl; font-family: var(--theme-font-family); font-size: 13px; font-weight: 600; color: var(--theme-link-initial-color); } .ekrd-toc-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow-y: auto; } .ekrd-toc-link { display: block; padding: 6px 10px; border-right: 2px solid var(--theme-border-color); border-radius: 3px 0 0 3px; font-family: var(--theme-font-family); font-size: 13.5px; line-height: 1.55; color: var(--theme-text-color); text-decoration: none !important; transition: all 0.15s ease; } .ekrd-toc-link:hover, .ekrd-toc-link.is-active { color: var(--theme-link-initial-color); background-color: var(--theme-palette-color-6); border-right-color: var(--theme-palette-color-1); font-weight: 600; } .ekrd-rail-cta-kicker { display: inline-block; font-size: 11.5px; line-height: 1.4; font-weight: 700; color: var(--theme-link-initial-color); margin-bottom: 6px; } .ekrd-rail-cta-title { font-family: var(--theme-font-family); font-size: 16.5px; line-height: 1.45; font-weight: 700; color: var(--theme-headings-color); margin: 0 0 8px 0; } .ekrd-rail-cta-sub { font-size: 13px; line-height: 1.65; color: var(--theme-text-color); margin: 0 0 12px 0; } .ekrd-rail-cta-btns { display: flex; flex-direction: column; gap: 8px; } .ekrd-rail-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; direction: rtl; text-align: center; font-size: 13.5px; min-height: 38px; padding: 7px 14px; } /* Single Post Prose Container */ body.single-post .ekrd-prose-card, body.single-post article.type-post .entry-content { background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 12px; padding: var(--theme-boxed-content-spacing, 40px) !important; box-shadow: var(--theme-boxed-content-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); font-family: var(--theme-font-family); font-size: 17px; line-height: 1.9; color: var(--theme-text-color); max-width: 100% !important; } body.single-post article.type-post .entry-content > * { max-width: 100% !important; } body.single-post article.type-post .entry-content h2 { font-family: var(--theme-font-family) !important; font-size: 24px !important; line-height: 1.45 !important; font-weight: 700 !important; color: var(--theme-headings-color) !important; margin-top: 34px !important; margin-bottom: 14px !important; padding-bottom: 10px; border-bottom: 1px solid var(--theme-border-color); scroll-margin-top: 28px; } body.single-post article.type-post .entry-content h2:first-child { margin-top: 0 !important; } body.single-post article.type-post .entry-content h3 { font-family: var(--theme-font-family) !important; font-size: 20px !important; line-height: 1.45 !important; font-weight: 700 !important; color: var(--theme-headings-color) !important; margin-top: 26px !important; margin-bottom: 10px !important; } /* Blocksy Native Pull-Quotes */ body.single-post article.type-post .entry-content blockquote, body.single-post article.type-post .entry-content .wp-block-quote { position: relative; background-color: var(--theme-palette-color-6) !important; border: 1px solid var(--theme-border-color) !important; border-right: 4px solid var(--theme-palette-color-1) !important; border-left: none !important; border-radius: 8px !important; padding: 20px 24px !important; margin: 24px 0 !important; font-family: var(--theme-font-family) !important; font-size: 17.5px !important; line-height: 1.85 !important; color: var(--theme-headings-color) !important; } body.single-post article.type-post .entry-content blockquote p { margin: 0 !important; font-family: var(--theme-font-family) !important; font-size: 17.5px !important; line-height: 1.85 !important; } body.single-post article.type-post .entry-content blockquote cite { display: block; margin-top: 10px; font-family: var(--theme-font-family); font-size: 13.5px; font-style: normal; font-weight: 600; color: var(--theme-link-initial-color); } /* Styled Rank Math FAQ Block (All items visible on load for FAQPage SEO compliance) */ body.single-post .wp-block-rank-math-faq-block { margin-top: 20px; } body.single-post .rank-math-list-item { background-color: var(--theme-palette-color-7); border: 1px solid var(--theme-border-color); border-radius: 8px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.15s ease; } body.single-post .rank-math-list-item.is-open { border-color: var(--theme-palette-color-1); background-color: var(--theme-palette-color-8); } body.single-post .rank-math-question { font-family: var(--theme-font-family) !important; font-size: 18px !important; line-height: 1.5 !important; font-weight: 700 !important; color: var(--theme-headings-color) !important; margin: 0 !important; padding: 16px 20px !important; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; user-select: none; } body.single-post .rank-math-question::after { content: "−"; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: var(--theme-button-border-radius, 3px); background-color: var(--theme-palette-color-6); color: var(--theme-link-initial-color); font-family: var(--theme-font-family); font-size: 16px; font-weight: 700; } body.single-post .rank-math-list-item.is-collapsed .rank-math-question::after { content: "+"; } body.single-post .rank-math-answer { padding: 14px 20px 18px 20px; font-family: var(--theme-font-family); font-size: 15.5px; line-height: 1.85; color: var(--theme-text-color); border-top: 1px solid var(--theme-border-color); } body.single-post .rank-math-list-item.is-collapsed .rank-math-answer { display: none; } body.single-post .rank-math-answer p { margin: 0; } /* Single Post Footer: Topic Tags + Share + 3 Related Articles */ .ekrd-post-after { margin-top: 26px; display: flex; flex-direction: column; gap: 22px; } .ekrd-tags-share-card { background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 12px; padding: 20px 26px; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .ekrd-tags-group, .ekrd-share-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ekrd-group-label { font-size: 13px; line-height: 1.4; font-weight: 700; color: var(--theme-headings-color); margin-left: 4px; } .ekrd-share-btn { display: inline-flex; align-items: center; gap: 7px; direction: rtl; padding: 6px 12px; border-radius: var(--theme-button-border-radius, 3px); background-color: var(--theme-palette-color-7); border: 1px solid var(--theme-border-color); color: var(--theme-headings-color) !important; font-family: var(--theme-button-font-family, var(--theme-font-family)); font-size: 12.5px; line-height: 1.4; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .ekrd-share-btn:hover { border-color: var(--theme-palette-color-1); background-color: var(--theme-palette-color-6); } .ekrd-related-posts { background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 12px; padding: 26px 28px; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); } .ekrd-related-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--theme-border-color); } .ekrd-related-title { font-family: var(--theme-font-family); font-size: 21px; line-height: 1.4; font-weight: 700; color: var(--theme-headings-color); margin: 0; } .ekrd-related-more { font-size: 13.5px; line-height: 1.4; font-weight: 600; color: var(--theme-link-initial-color) !important; text-decoration: none !important; } .ekrd-related-more:hover { color: var(--theme-link-hover-color) !important; } .ekrd-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .ekrd-rel-post-card { background-color: var(--theme-palette-color-7); border: 1px solid var(--theme-border-color); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none !important; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .ekrd-rel-post-card:hover { transform: translateY(-2px); border-color: var(--theme-palette-color-2); box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); } .ekrd-rel-post-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background-color: var(--theme-palette-color-6); border-bottom: 1px solid var(--theme-border-color); display: block; } .ekrd-rel-post-body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; } .ekrd-rel-post-cat { align-self: flex-start; font-size: 11px; line-height: 1.4; font-weight: 700; color: var(--theme-link-initial-color); background-color: var(--theme-palette-color-6); border: 1px solid var(--theme-border-color); padding: 2px 8px; border-radius: var(--theme-button-border-radius, 3px); margin-bottom: 8px; } .ekrd-rel-post-h3 { font-family: var(--theme-font-family); font-size: 16.5px; line-height: 1.5; font-weight: 700; color: var(--theme-headings-color); margin: 0 0 12px 0; } .ekrd-rel-post-cta { margin-top: auto; font-size: 12.5px; line-height: 1.4; font-weight: 600; color: var(--theme-link-initial-color); } @media (max-width: 1059.98px) { .ekrd-single-grid { grid-template-columns: 1fr; } .ekrd-post-rail { position: static; } .ekrd-toc-toggle-icon { display: inline-flex; } .ekrd-toc-card.is-mobile-collapsed .ekrd-toc-list { display: none; } .ekrd-toc-card.is-mobile-collapsed .ekrd-toc-toggle { margin-bottom: 0; } body.single-post article.type-post .entry-content { padding: 24px 20px !important; } .ekrd-related-grid { grid-template-columns: 1fr; } } .ekrd-hero-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--theme-button-border-radius, 3px); background-color: var(--theme-palette-color-6); border: 1px solid var(--theme-border-color); color: var(--theme-link-initial-color); font-size: 12px; line-height: 1.4; font-weight: 700; margin-bottom: 10px; } /* ========================================================================== Ekitabs Book Fact Card ("بطاقة هوية الكتاب" - .ekrd-book-fact-card) Clean RTL CSS using 100% Blocksy CSS Variables (Light & Dark Mode) Responsive 2x2 grid on desktop, 1-column on mobile. ========================================================================== */ .ekrd-book-fact-card { margin: 28px 0 34px 0; padding: 22px 24px; background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 12px; box-shadow: var(--theme-box-shadow); font-family: var(--theme-font-family); direction: rtl; text-align: right; box-sizing: border-box; } .ekrd-fact-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px dashed var(--theme-border-color); direction: rtl; } .ekrd-fact-kicker { font-family: var(--theme-font-family); font-size: 16px; font-weight: 700; color: var(--theme-headings-color); display: inline-flex; align-items: center; gap: 8px; direction: rtl; } .ekrd-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin-bottom: 18px; } .ekrd-fact-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background-color: var(--theme-palette-color-7); border: 1px solid var(--theme-border-color); border-radius: var(--theme-button-border-radius, 3px); } .ekrd-fact-label { font-family: var(--theme-font-family); font-size: 12.5px; font-weight: 600; color: var(--theme-text-color); opacity: 0.85; } .ekrd-fact-value { font-family: var(--theme-font-family); font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--theme-headings-color); } .ekrd-fact-value a, .ekrd-fact-link { color: var(--theme-palette-color-1); text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s ease; } .ekrd-fact-value a:hover, .ekrd-fact-link:hover { color: var(--theme-palette-color-2); } .ekrd-fact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--theme-border-color); direction: rtl; } .ekrd-fact-btn-primary { font-family: var(--theme-button-font-family, var(--theme-font-family)); font-size: 13.5px; font-weight: 600; min-height: 38px; padding: 7px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; direction: rtl; border-radius: var(--theme-button-border-radius, 3px); background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-button-text-initial-color, var(--theme-palette-color-8)) !important; border: 1px solid var(--theme-button-background-initial-color, var(--theme-palette-color-1)); text-decoration: none !important; transition: all 0.15s ease; cursor: pointer; } .ekrd-fact-btn-primary:hover { background-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); border-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); color: var(--theme-button-text-hover-color, var(--theme-palette-color-8)) !important; } .ekrd-fact-btn-ghost { font-family: var(--theme-button-font-family, var(--theme-font-family)); font-size: 13.5px; font-weight: 600; min-height: 38px; padding: 7px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; direction: rtl; border-radius: var(--theme-button-border-radius, 3px); background-color: transparent; color: var(--theme-headings-color) !important; border: 1px solid var(--theme-border-color); text-decoration: none !important; transition: all 0.15s ease; cursor: pointer; } .ekrd-fact-btn-ghost:hover { background-color: var(--theme-palette-color-6); border-color: var(--theme-button-background-hover-color, var(--theme-palette-color-1)); color: var(--theme-button-background-hover-color, var(--theme-palette-color-1)) !important; } .ekrd-fact-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; direction: rtl; font-family: var(--theme-button-font-family, var(--theme-font-family)); font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: var(--theme-button-border-radius, 3px); background-color: var(--theme-palette-color-6); color: var(--theme-headings-color) !important; border: 1px solid var(--theme-border-color); text-decoration: none !important; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; cursor: pointer; } .ekrd-fact-pill:hover { background-color: var(--theme-button-background-hover-color, var(--theme-palette-color-1)); color: var(--theme-button-text-hover-color, var(--theme-palette-color-8)) !important; border-color: var(--theme-button-background-hover-color, var(--theme-palette-color-1)); } @media (max-width: 640px) { .ekrd-book-fact-card { padding: 18px 16px; margin: 22px 0 28px 0; } .ekrd-fact-grid { grid-template-columns: 1fr; gap: 12px; } .ekrd-fact-actions { flex-direction: column; align-items: stretch; } .ekrd-fact-btn-primary, .ekrd-fact-btn-ghost, .ekrd-fact-pill { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; } }