/* ================================================================ reader-redesign.css — IsmailBooks Blog Post Reader Full rewrite: CSS custom properties, three themes, mobile-first Loaded AFTER blog_vibrant.css — these rules take precedence. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap'); /* ================================================================ 1. THEME CUSTOM PROPERTIES Three themes: cad (white), madow (dark), huruud (saffron) Applied as data-reader-theme attribute on ================================================================ */ /* Default = Cad (White) */ body.blog-reader-page { --rd-bg: #FCFCFC; --rd-bg-alt: #F3F4F6; --rd-bg-card: #FFFFFF; --rd-bg-blockquote: #F0F9F5; --rd-text: #1A1A1A; --rd-text-muted: #6B7280; --rd-text-faint: #9CA3AF; --rd-border: #E5E7EB; --rd-border-strong: #D1D5DB; --rd-accent: #10B981; --rd-accent-dark: #059669; --rd-accent-bg: rgba(16, 185, 129, 0.08); --rd-heading: #111827; --rd-link: #10B981; --rd-progress-bg: rgba(0,0,0,0.06); --rd-ctrl-bg: rgba(255,255,255,0.92); --rd-ctrl-border: rgba(229,231,235,0.9); --rd-ctrl-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06); --rd-btn-bg: #FFFFFF; --rd-btn-border: #D1D5DB; --rd-btn-text: #374151; --rd-shadow-img: 0 16px 40px rgba(0,0,0,0.08); --rd-toc-border: #E5E7EB; /* Reading typography */ --rd-font-body: 'Lora', Georgia, 'Times New Roman', serif; --rd-font-ui: 'Inter', system-ui, -apple-system, sans-serif; --rd-font-size: 18px; --rd-line-height: 1.75; --rd-max-width: 680px; font-family: var(--rd-font-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Madow (Dark / Eye-safe) */ body.blog-reader-page.reader-theme-madow { --rd-bg: #121212; --rd-bg-alt: #1C1C1E; --rd-bg-card: #1E1E1E; --rd-bg-blockquote: #1C2420; --rd-text: #E5E5E5; --rd-text-muted: #A1A1AA; --rd-text-faint: #71717A; --rd-border: #2D2D30; --rd-border-strong: #3A3A3C; --rd-accent: #34D399; --rd-accent-dark: #10B981; --rd-accent-bg: rgba(52, 211, 153, 0.10); --rd-heading: #F0F0F0; --rd-link: #34D399; --rd-progress-bg: rgba(255,255,255,0.08); --rd-ctrl-bg: rgba(28,28,30,0.95); --rd-ctrl-border: rgba(58,58,60,0.9); --rd-ctrl-shadow: 0 8px 32px rgba(0,0,0,0.50), 0 1px 4px rgba(0,0,0,0.30); --rd-btn-bg: #2D2D30; --rd-btn-border: #3A3A3C; --rd-btn-text: #D1D5DB; --rd-shadow-img: 0 16px 40px rgba(0,0,0,0.40); --rd-toc-border: #2D2D30; } /* Huruud (Saffron / Manuscript) */ body.blog-reader-page.reader-theme-huruud { --rd-bg: #F5E6C0; --rd-bg-alt: #EDD8A4; --rd-bg-card: #F8EDD0; --rd-bg-blockquote: #E8D28A; --rd-text: #1F1706; --rd-text-muted: #5C4A1A; --rd-text-faint: #8C7547; --rd-border: #D4B87A; --rd-border-strong: #C5A55E; --rd-accent: #B45309; --rd-accent-dark: #92400E; --rd-accent-bg: rgba(180, 83, 9, 0.08); --rd-heading: #0F0A00; --rd-link: #B45309; --rd-progress-bg: rgba(0,0,0,0.10); --rd-ctrl-bg: rgba(245,230,192,0.95); --rd-ctrl-border: rgba(212,184,122,0.9); --rd-ctrl-shadow: 0 8px 32px rgba(100,70,0,0.15), 0 1px 4px rgba(100,70,0,0.08); --rd-btn-bg: #F5E6C0; --rd-btn-border: #C5A55E; --rd-btn-text: #3B2A08; --rd-shadow-img: 0 16px 40px rgba(100,70,0,0.15); --rd-toc-border: #D4B87A; } /* ================================================================ 2. READING PROGRESS BAR ================================================================ */ #reading-progress { position: fixed !important; top: 0 !important; left: 0 !important; width: 0% !important; height: 4px !important; background: linear-gradient(90deg, var(--rd-accent), var(--rd-accent-dark)) !important; z-index: 99999 !important; transition: width 0.12s linear !important; border-radius: 0 2px 2px 0; will-change: width; } /* ================================================================ 3. PAGE WRAPPER & GLOBAL CANVAS ================================================================ */ body.blog-reader-page { background-color: var(--rd-bg) !important; color: var(--rd-text) !important; transition: background-color 0.35s ease, color 0.35s ease; } body.blog-reader-page .blog-page-wrapper { background-color: var(--rd-bg) !important; min-height: 100vh; padding-top: 72px; transition: background-color 0.35s ease; } /* ================================================================ 4. NAVBAR THEME ADAPTATION Adapts navbar & mobile nav to match active reader theme ================================================================ */ /* --- Default (Cad) navbar --- */ body.blog-reader-page .navbar { background: rgba(252,252,252,0.92) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--rd-border) !important; box-shadow: 0 1px 0 var(--rd-border) !important; transition: background 0.35s ease, border-color 0.35s ease !important; } body.blog-reader-page .navbar .nav-logo, body.blog-reader-page .navbar .nav-link, body.blog-reader-page .navbar .icon-btn { color: var(--rd-text) !important; transition: color 0.2s ease !important; } body.blog-reader-page .navbar .nav-link:hover, body.blog-reader-page .navbar .icon-btn:hover { color: var(--rd-accent) !important; } body.blog-reader-page .navbar .btn-primary-new { background: var(--rd-accent) !important; color: #fff !important; border: none !important; } body.blog-reader-page .navbar .btn-primary-new:hover { background: var(--rd-accent-dark) !important; } /* Madow: dark navbar */ body.blog-reader-page.reader-theme-madow .navbar { background: rgba(18,18,18,0.94) !important; } /* Huruud: warm navbar */ body.blog-reader-page.reader-theme-huruud .navbar { background: rgba(245,230,192,0.94) !important; } /* Mobile bottom nav adapts too */ body.blog-reader-page .mobile-bottom-nav { background: var(--rd-ctrl-bg) !important; border-top: 1px solid var(--rd-ctrl-border) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; transition: background 0.35s ease !important; } body.blog-reader-page .mobile-bottom-nav .bottom-nav-item { color: var(--rd-text-muted) !important; } body.blog-reader-page .mobile-bottom-nav .bottom-nav-item.active, body.blog-reader-page .mobile-bottom-nav .bottom-nav-item:hover { color: var(--rd-accent) !important; } /* ================================================================ 5. LAYOUT — centered single-column with optional ToC aside ================================================================ */ .blog-page-wrapper .blog-container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } /* Main content area: article + optional sidebar */ .blog-page-wrapper .post-body-layout { display: grid; grid-template-columns: minmax(0, var(--rd-max-width)) minmax(0, 220px); column-gap: 4rem; align-items: start; justify-content: center; max-width: 1040px; margin: 0 auto; } /* ================================================================ 6. BREADCRUMB ================================================================ */ .blog-page-wrapper .blog-breadcrumb { max-width: var(--rd-max-width); margin: 0 auto; padding: 2rem 0 0.75rem; font-size: 13px; font-family: var(--rd-font-ui); color: var(--rd-text-muted); display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } .blog-page-wrapper .blog-breadcrumb__maqaallada { color: var(--rd-text-muted); } .blog-page-wrapper .blog-breadcrumb__sep { color: var(--rd-border-strong); } .blog-page-wrapper .blog-breadcrumb__category-link { color: var(--rd-accent); font-weight: 600; text-decoration: none; transition: color 0.2s; } .blog-page-wrapper .blog-breadcrumb__category-link:hover { color: var(--rd-accent-dark); text-decoration: underline; } /* ================================================================ 7. ARTICLE HEADER ================================================================ */ .blog-page-wrapper .post-header { max-width: var(--rd-max-width); margin: 0 auto; padding: 0 0 1.75rem; text-align: left; } /* Category + Featured badges */ .blog-page-wrapper .post-header__badges { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; flex-wrap: wrap; } .blog-page-wrapper .post-header__category { display: inline-flex; align-items: center; gap: 5px; padding: 0.3rem 0.875rem; border-radius: 9999px; background: var(--rd-accent-bg); color: var(--rd-accent); font-size: 12px; font-weight: 700; text-decoration: none; font-family: var(--rd-font-ui); letter-spacing: 0.04em; text-transform: uppercase; transition: background 0.2s, color 0.2s; } .blog-page-wrapper .post-header__category:hover { background: var(--rd-accent); color: #fff; } /* Featured pill */ .blog-page-wrapper .post-header__featured-pill { display: inline-flex; align-items: center; gap: 4px; padding: 0.3rem 0.75rem; border-radius: 9999px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; font-size: 11px; font-weight: 700; font-family: var(--rd-font-ui); letter-spacing: 0.04em; text-transform: uppercase; } /* Post Title */ .blog-page-wrapper .post-header__title { font-family: var(--rd-font-ui); font-size: clamp(26px, 5vw, 40px); font-weight: 800; line-height: 1.2; color: var(--rd-heading); margin: 0 0 1.25rem; text-align: left !important; letter-spacing: -0.025em; transition: color 0.35s ease; } /* Post excerpt / deck */ .blog-page-wrapper .post-header__excerpt { font-family: var(--rd-font-body); font-size: 19px; line-height: 1.6; color: var(--rd-text-muted); margin: 0 0 1.5rem; text-align: left !important; font-style: italic; } /* Author Row */ .blog-page-wrapper .post-header__author-row { display: flex; align-items: center; gap: 12px; padding: 1rem 0; border-top: 1px solid var(--rd-border); border-bottom: 1px solid var(--rd-border); margin-bottom: 0.5rem; flex-wrap: wrap; } .blog-page-wrapper .post-header__author-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--rd-bg-alt); border: 2px solid var(--rd-border); flex-shrink: 0; } .blog-page-wrapper .post-header__author-avatar svg { width: 100%; height: 100%; display: block; } .blog-page-wrapper .post-header__author-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .blog-page-wrapper .post-header__author-name { font-size: 14px; font-weight: 600; color: var(--rd-heading); font-family: var(--rd-font-ui); transition: color 0.35s ease; } .blog-page-wrapper .post-header__author-meta { font-size: 13px; color: var(--rd-text-muted); font-family: var(--rd-font-ui); display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .blog-page-wrapper .post-header__meta-dot { margin: 0 6px; color: var(--rd-border-strong); } /* View Count */ .blog-page-wrapper .post-header__meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; } .blog-page-wrapper .post-header__meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--rd-text-faint); font-family: var(--rd-font-ui); } .blog-page-wrapper .post-header__meta-item svg { width: 14px; height: 14px; stroke: currentColor; flex-shrink: 0; } /* Share row */ .blog-page-wrapper .post-share { display: flex; align-items: center; gap: 0.625rem; margin-top: 1rem; flex-wrap: wrap; } .blog-page-wrapper .post-share__label { font-size: 12px; font-weight: 600; color: var(--rd-text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--rd-font-ui); } .blog-page-wrapper .post-share__btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rd-border); background: var(--rd-bg-card); color: var(--rd-text-muted); display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; cursor: pointer; padding: 0; text-decoration: none; flex-shrink: 0; } .blog-page-wrapper .post-share__btn:hover { color: var(--rd-accent); border-color: var(--rd-accent); background: var(--rd-accent-bg); transform: translateY(-2px); } .blog-page-wrapper .post-share__btn.is-copied { color: var(--rd-accent); border-color: var(--rd-accent); background: var(--rd-accent-bg); } /* ================================================================ 8. FEATURED IMAGE ================================================================ */ .blog-page-wrapper .post-featured-image { display: block; width: 100%; max-width: var(--rd-max-width); height: auto; max-height: 420px; object-fit: cover; border-radius: 14px; margin: 0 auto 2.5rem; box-shadow: var(--rd-shadow-img); transition: box-shadow 0.35s ease; } /* ================================================================ 9. READER CONTROLS — Floating pill toolbar Desktop: sits in grid as first item spanning both columns Mobile: fixed floating toolbar at bottom ================================================================ */ .blog-page-wrapper .blog-reader-controls { grid-column: 1 / -1; max-width: var(--rd-max-width); margin: 0 auto 1.75rem; background: var(--rd-ctrl-bg); border: 1px solid var(--rd-ctrl-border); border-radius: 14px; padding: 0.625rem 1rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; transition: background 0.35s ease, border-color 0.35s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .blog-page-wrapper .blog-reader-controls::-webkit-scrollbar { display: none; } .blog-page-wrapper .blog-reader-controls__divider { width: 1px; height: 22px; background: var(--rd-border); flex-shrink: 0; margin: 0 0.25rem; } .blog-page-wrapper .blog-reader-controls__group { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .blog-page-wrapper .blog-reader-controls__label { font-size: 11px; font-weight: 600; color: var(--rd-text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--rd-font-ui); white-space: nowrap; padding-right: 2px; } /* Reader control buttons */ .blog-page-wrapper .blog-reader-btn { background: var(--rd-btn-bg); border: 1px solid var(--rd-btn-border); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--rd-btn-text); cursor: pointer; transition: all 0.18s ease; font-family: var(--rd-font-ui); white-space: nowrap; line-height: 1; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .blog-page-wrapper .blog-reader-btn:hover { border-color: var(--rd-accent) !important; color: var(--rd-accent) !important; background: var(--rd-accent-bg) !important; } .blog-page-wrapper .blog-reader-btn.is-active { background: var(--rd-accent) !important; border-color: var(--rd-accent) !important; color: #fff !important; } /* Theme swatches — small colour dots */ .blog-page-wrapper .blog-reader-btn--theme-swatch { width: 28px; height: 28px; border-radius: 50%; padding: 0; position: relative; border: 2px solid var(--rd-btn-border) !important; } .blog-page-wrapper .blog-reader-btn--theme-swatch.is-active { border: 2.5px solid var(--rd-accent) !important; box-shadow: 0 0 0 2px var(--rd-accent-bg) !important; background: unset !important; } .blog-page-wrapper .blog-reader-btn--swatch-cad { background: #FCFCFC !important; } .blog-page-wrapper .blog-reader-btn--swatch-huruud { background: #F5E6C0 !important; } .blog-page-wrapper .blog-reader-btn--swatch-madow { background: #1C1C1E !important; } /* ================================================================ 10. ARTICLE / PROSE — the reading experience ================================================================ */ .blog-page-wrapper .blog-prose { width: 100%; max-width: var(--rd-max-width); font-family: var(--rd-font-body); font-size: var(--rd-font-size); line-height: var(--rd-line-height); color: var(--rd-text); text-align: left !important; transition: color 0.35s ease, font-size 0.25s ease; word-break: break-word; overflow-wrap: break-word; } /* Strict left-align — never justify (prevents Somali word-spacing rivers) */ .blog-page-wrapper .blog-prose *, .blog-page-wrapper .blog-prose p, .blog-page-wrapper .blog-prose li, .blog-page-wrapper .blog-prose h1, .blog-page-wrapper .blog-prose h2, .blog-page-wrapper .blog-prose h3, .blog-page-wrapper .blog-prose h4, .blog-page-wrapper .blog-prose h5, .blog-page-wrapper .blog-prose h6 { text-align: left !important; text-justify: none !important; word-spacing: normal !important; } .blog-page-wrapper .blog-prose p { margin: 0 0 1.5em; color: var(--rd-text); transition: color 0.35s ease; } /* Drop-cap for first paragraph */ .blog-page-wrapper .blog-prose > p:first-of-type::first-letter { font-size: 3.4em; font-weight: 700; float: left; line-height: 0.85; margin: 0.05em 0.12em 0 0; color: var(--rd-accent); font-family: var(--rd-font-body); } /* Headings */ .blog-page-wrapper .blog-prose h2 { font-family: var(--rd-font-ui); font-size: 1.6em; font-weight: 700; line-height: 1.3; color: var(--rd-heading); margin: 2.5rem 0 1rem; letter-spacing: -0.015em; transition: color 0.35s ease; } .blog-page-wrapper .blog-prose h3 { font-family: var(--rd-font-ui); font-size: 1.3em; font-weight: 700; line-height: 1.35; color: var(--rd-heading); margin: 2rem 0 0.875rem; transition: color 0.35s ease; } .blog-page-wrapper .blog-prose h4 { font-family: var(--rd-font-ui); font-size: 1.1em; font-weight: 600; color: var(--rd-heading); margin: 1.5rem 0 0.625rem; transition: color 0.35s ease; } /* Heading anchor decoration */ .blog-page-wrapper .blog-prose h2::before, .blog-page-wrapper .blog-prose h3::before { content: ''; display: block; height: 80px; margin-top: -80px; visibility: hidden; pointer-events: none; } /* Lists */ .blog-page-wrapper .blog-prose ul, .blog-page-wrapper .blog-prose ol { margin: 0 0 1.5em; padding-left: 1.5rem; } .blog-page-wrapper .blog-prose li { margin-bottom: 0.5em; line-height: var(--rd-line-height); color: var(--rd-text); transition: color 0.35s ease; } .blog-page-wrapper .blog-prose li::marker { color: var(--rd-accent); } /* Links */ .blog-page-wrapper .blog-prose a { color: var(--rd-link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--rd-link) 40%, transparent); transition: all 0.2s ease; } .blog-page-wrapper .blog-prose a:hover { text-decoration-color: var(--rd-link); } /* Images inside content */ .blog-page-wrapper .blog-prose img { max-width: 100%; height: auto; border-radius: 10px; } /* Horizontal rule */ .blog-page-wrapper .blog-prose hr { border: none; height: 1px; background: var(--rd-border); margin: 2.5rem auto; max-width: 80px; transition: background 0.35s ease; } /* Inline code */ .blog-page-wrapper .blog-prose code:not(pre code) { background: var(--rd-bg-alt); color: var(--rd-accent); padding: 2px 6px; border-radius: 5px; font-size: 0.875em; font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace; border: 1px solid var(--rd-border); transition: background 0.35s ease; } /* Code blocks */ .blog-page-wrapper .blog-prose pre { background: var(--rd-bg-alt); border: 1px solid var(--rd-border); border-radius: 10px; padding: 1.25rem 1.5rem; overflow-x: auto; margin: 1.5rem 0; transition: background 0.35s ease; } .blog-page-wrapper .blog-prose pre code { background: none; border: none; padding: 0; font-size: 14px; color: var(--rd-text); } /* ================================================================ 11. BLOCKQUOTE — Classic Islamic Quote Card ================================================================ */ .blog-page-wrapper .blog-prose blockquote { background: var(--rd-bg-blockquote) !important; border: none !important; border-left: 4px solid var(--rd-accent) !important; border-radius: 0 10px 10px 0 !important; padding: 1.25rem 1.5rem 1.25rem 1.75rem !important; margin: 2rem 0 !important; position: relative; transition: background 0.35s ease, border-color 0.35s ease; } /* Quote icon decoration */ .blog-page-wrapper .blog-prose blockquote::before { content: '\201C'; position: absolute; top: -8px; left: 1.5rem; font-size: 56px; line-height: 1; color: var(--rd-accent); opacity: 0.25; font-family: Georgia, serif; pointer-events: none; } .blog-page-wrapper .blog-prose blockquote p { font-family: var(--rd-font-body) !important; font-size: 1.05em !important; line-height: 1.7 !important; color: var(--rd-text) !important; font-style: italic !important; margin-bottom: 0 !important; text-align: left !important; transition: color 0.35s ease; } /* Arabic / RTL text inside blockquote */ .blog-page-wrapper .blog-prose blockquote [dir="rtl"], .blog-page-wrapper .blog-prose blockquote .arabic-text, .blog-page-wrapper .blog-prose blockquote p[lang="ar"] { text-align: right !important; direction: rtl !important; font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Traditional Arabic', Georgia, serif !important; font-size: 1.35em !important; line-height: 1.8 !important; font-style: normal !important; color: var(--rd-heading) !important; margin-bottom: 0.75rem !important; } /* Translation lines (Somali / English) — left-aligned below Arabic */ .blog-page-wrapper .blog-prose blockquote .translation, .blog-page-wrapper .blog-prose blockquote cite, .blog-page-wrapper .blog-prose blockquote footer { display: block; text-align: left !important; direction: ltr !important; font-family: var(--rd-font-body) !important; font-size: 0.9em !important; font-style: italic !important; color: var(--rd-text-muted) !important; margin-top: 0.75rem; padding-top: 0.625rem; border-top: 1px solid color-mix(in srgb, var(--rd-border) 60%, transparent); transition: color 0.35s ease, border-color 0.35s ease; } /* ================================================================ 12. TABLE OF CONTENTS SIDEBAR ================================================================ */ .blog-page-wrapper .toc-sidebar { position: sticky; top: 100px; width: 220px; flex-shrink: 0; align-self: start; display: block; transition: opacity 0.3s ease; } .blog-page-wrapper .toc-box { background: transparent; border: none; padding: 0; } .blog-page-wrapper .toc-box__title { font-family: var(--rd-font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rd-text-faint); margin-bottom: 0.875rem; transition: color 0.35s ease; } .blog-page-wrapper .toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--rd-toc-border); transition: border-color 0.35s ease; } .blog-page-wrapper .toc-list li { padding-left: 1rem; } .blog-page-wrapper .toc-list li a { display: block; color: var(--rd-text-muted); text-decoration: none; font-size: 13px; font-family: var(--rd-font-ui); font-weight: 500; line-height: 1.45; padding: 3px 0 3px 4px; border-left: 2px solid transparent; margin-left: -1.0625rem; border-radius: 0; transition: all 0.18s ease; } .blog-page-wrapper .toc-list li a:hover { color: var(--rd-accent); } .blog-page-wrapper .toc-list li a.toc-active { color: var(--rd-accent); font-weight: 600; border-left-color: var(--rd-accent); padding-left: 8px; } .blog-page-wrapper .toc-list .toc-h3 { padding-left: 2rem; } .blog-page-wrapper .toc-list .toc-h3 a { font-size: 12px; font-weight: 400; } /* ================================================================ 13. POST FOOTER BAR (inside article) ================================================================ */ .blog-page-wrapper .post-footer-bar { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rd-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; transition: border-color 0.35s ease; } .blog-page-wrapper .post-back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--rd-text-muted); text-decoration: none; font-size: 14px; font-weight: 600; font-family: var(--rd-font-ui); transition: color 0.2s ease; } .blog-page-wrapper .post-back-link:hover { color: var(--rd-accent); } .blog-page-wrapper .post-back-link svg { stroke: currentColor; flex-shrink: 0; } /* ================================================================ 14. FONT SIZE VARIANTS ================================================================ */ .blog-page-wrapper .blog-prose.prose-size-sm { --rd-font-size: 16px; --rd-line-height: 1.7; } .blog-page-wrapper .blog-prose.prose-size-md { --rd-font-size: 18px; --rd-line-height: 1.75; } .blog-page-wrapper .blog-prose.prose-size-lg { --rd-font-size: 20px; --rd-line-height: 1.8; } .blog-page-wrapper .blog-prose.prose-size-xl { --rd-font-size: 22px; --rd-line-height: 1.85; } /* ================================================================ 15. FONT FAMILY VARIANTS ================================================================ */ .blog-page-wrapper .blog-prose.prose-font-sans { font-family: var(--rd-font-ui); } .blog-page-wrapper .blog-prose.prose-font-serif { font-family: var(--rd-font-body); } /* ================================================================ 16. BACK TO TOP BUTTON ================================================================ */ #btn-back-to-top { position: fixed; bottom: 90px; right: 1.5rem; width: 44px; height: 44px; border-radius: 50%; background: var(--rd-accent); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(16,185,129,0.4); opacity: 0; visibility: hidden; transform: translateY(12px); transition: all 0.3s ease; z-index: 1000; } #btn-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } #btn-back-to-top:hover { background: var(--rd-accent-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,185,129,0.5); } /* ================================================================ 17. RELATED POSTS SECTION ================================================================ */ .blog-page-wrapper .related-posts { background: var(--rd-bg-alt) !important; border-top: 1px solid var(--rd-border) !important; padding: 4rem 1.5rem !important; margin-top: 4rem; transition: background 0.35s ease, border-color 0.35s ease; } .blog-page-wrapper .related-posts__header { max-width: 1040px; margin: 0 auto 2rem; } .blog-page-wrapper .related-posts__title { font-family: var(--rd-font-ui); font-size: 22px; font-weight: 700; color: var(--rd-heading); text-align: left; transition: color 0.35s ease; } .blog-page-wrapper .related-posts__grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } /* Related post cards */ .blog-page-wrapper .blog-card { background: var(--rd-bg-card) !important; border-radius: 12px !important; overflow: hidden !important; border: 1px solid var(--rd-border) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.35s ease, opacity 0.5s ease !important; display: flex; flex-direction: column; } .blog-page-wrapper .blog-card.is-hidden-initially { opacity: 0; transform: translateY(16px); } .blog-page-wrapper .blog-card.is-visible { opacity: 1; transform: translateY(0); } .blog-page-wrapper .blog-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important; border-color: var(--rd-accent) !important; } .blog-page-wrapper .blog-card__image-wrap { position: relative; display: block; overflow: hidden; padding-bottom: 62.5%; /* 16:10 aspect ratio fallback */ background: var(--rd-bg-alt); } .blog-page-wrapper .blog-card__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .blog-page-wrapper .blog-card:hover .blog-card__image { transform: scale(1.04); } .blog-page-wrapper .blog-card__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: rgba(255,255,255,0.7); font-family: var(--rd-font-ui); background: linear-gradient(135deg, #2563EB, #7C3AED); } .blog-page-wrapper .blog-card__badge { position: absolute; top: 10px; left: 10px; background: rgba(16,185,129,0.95); backdrop-filter: blur(4px); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--rd-font-ui); } .blog-page-wrapper .blog-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex-grow: 1; } .blog-page-wrapper .blog-card__title { font-family: var(--rd-font-ui); font-size: 16px; font-weight: 700; line-height: 1.35; margin-bottom: 0.625rem; } .blog-page-wrapper .blog-card__title a { color: var(--rd-heading) !important; text-decoration: none !important; transition: color 0.2s ease; } .blog-page-wrapper .blog-card__title a:hover { color: var(--rd-accent) !important; } .blog-page-wrapper .blog-card__excerpt { font-size: 13.5px; line-height: 1.55; color: var(--rd-text-muted); margin-bottom: 1rem; font-family: var(--rd-font-ui); transition: color 0.35s ease; } .blog-page-wrapper .blog-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.875rem; border-top: 1px solid var(--rd-border); font-size: 12.5px; color: var(--rd-text-faint); font-family: var(--rd-font-ui); transition: border-color 0.35s ease, color 0.35s ease; } .blog-page-wrapper .blog-card__read-link { color: var(--rd-accent) !important; font-weight: 600; text-decoration: none !important; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; transition: color 0.2s ease, gap 0.2s ease; } .blog-page-wrapper .blog-card__read-link:hover { color: var(--rd-accent-dark) !important; gap: 6px; } /* ================================================================ 18. FOOTER THEME ADAPTATION ================================================================ */ body.blog-reader-page .footer-strip-new { background: var(--rd-bg-alt) !important; border-top: 1px solid var(--rd-border) !important; color: var(--rd-text-muted) !important; transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease; } body.blog-reader-page .footer-strip-new .footer-logo-brand-new, body.blog-reader-page .footer-strip-new .footer-link-new { color: var(--rd-text-muted) !important; transition: color 0.35s ease; } body.blog-reader-page .footer-strip-new .footer-link-new:hover, body.blog-reader-page .footer-strip-new .footer-social-row-new a:hover { color: var(--rd-accent) !important; } body.blog-reader-page .footer-strip-new .footer-copyright-new { color: var(--rd-text-faint) !important; transition: color 0.35s ease; } /* ================================================================ 19. RESPONSIVE — MOBILE FIRST ================================================================ */ /* Tablet: hide sidebar, single column */ @media (max-width: 1023px) { .blog-page-wrapper .post-body-layout { display: block; } .blog-page-wrapper .toc-sidebar { display: none !important; } .blog-page-wrapper .blog-reader-controls { max-width: 100%; margin: 0 0 1.5rem; } } /* Mobile */ @media (max-width: 767px) { :root { --rd-max-width: 100%; } body.blog-reader-page .blog-page-wrapper { padding-top: 64px; /* Extra bottom padding so fixed bottom controls don't cover content */ padding-bottom: 80px; } .blog-page-wrapper .blog-container { padding: 0 1rem; } .blog-page-wrapper .blog-breadcrumb { padding: 1.25rem 0 0.5rem; font-size: 12px; } .blog-page-wrapper .post-header__title { font-size: clamp(22px, 6vw, 30px); letter-spacing: -0.02em; } .blog-page-wrapper .post-header__excerpt { font-size: 16px; } .blog-page-wrapper .post-featured-image { border-radius: 10px; margin-bottom: 1.75rem; max-height: 260px; } .blog-page-wrapper .blog-prose { font-size: 17px; line-height: 1.75; } /* Remove drop-cap on mobile — can misalign with small viewports */ .blog-page-wrapper .blog-prose > p:first-of-type::first-letter { font-size: 1em; float: none; margin: 0; } .blog-page-wrapper .blog-prose h2 { font-size: 1.4em; margin: 2rem 0 0.875rem; } .blog-page-wrapper .blog-prose h3 { font-size: 1.2em; margin: 1.75rem 0 0.75rem; } .blog-page-wrapper .blog-prose blockquote { padding: 1rem 1.125rem 1rem 1.25rem !important; margin: 1.5rem 0 !important; } .blog-page-wrapper .blog-prose blockquote::before { font-size: 40px; top: -4px; left: 1rem; } .blog-page-wrapper .blog-prose blockquote [dir="rtl"], .blog-page-wrapper .blog-prose blockquote .arabic-text { font-size: 1.2em !important; } /* Reader controls: fixed floating pill at bottom on mobile */ .blog-page-wrapper .blog-reader-controls { position: fixed !important; bottom: 70px; /* above mobile bottom nav */ left: 50%; transform: translateX(-50%); width: calc(100% - 2rem); max-width: 480px; margin: 0; z-index: 500; border-radius: 999px; padding: 0.5rem 1rem; box-shadow: var(--rd-ctrl-shadow) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } .blog-page-wrapper .blog-reader-controls__label { display: none; /* hide labels on mobile to save space */ } #btn-back-to-top { bottom: 140px; /* above controls on mobile */ right: 1rem; width: 40px; height: 40px; } .blog-page-wrapper .post-footer-bar { flex-direction: column; align-items: flex-start; gap: 1rem; } .blog-page-wrapper .related-posts { padding: 3rem 1rem !important; margin-top: 3rem; } .blog-page-wrapper .related-posts__grid { grid-template-columns: 1fr; gap: 1rem; } .blog-page-wrapper .post-share { flex-wrap: wrap; } } /* Very small screens */ @media (max-width: 380px) { .blog-page-wrapper .blog-prose { font-size: 16px; } .blog-page-wrapper .post-header__title { font-size: 21px; } .blog-page-wrapper .blog-reader-controls { width: calc(100% - 1rem); padding: 0.5rem 0.75rem; } }