/* ========================================================================== ekitabs.com — shadcn/ui Book Card (ct_content_block/825) & Archive System ========================================================================== */ :root { --eka-primary: var(--theme-palette-color-1); --eka-primary-hover: var(--theme-palette-color-2); --eka-fg: var(--theme-palette-color-3); --eka-heading: var(--theme-palette-color-4); --eka-border: var(--theme-palette-color-5); --eka-muted: var(--theme-palette-color-6); --eka-bg: var(--theme-palette-color-7); --eka-card: var(--theme-palette-color-8); --eka-muted-fg: var(--theme-text-color); --eka-radius-lg: 12px; --eka-radius-md: 8px; --eka-radius-sm: 6px; --eka-shadow-sm: 0 1px 2px 0 rgba(0, 21, 33, 0.04); --eka-shadow-md: 0 4px 12px -2px rgba(0, 21, 33, 0.07), 0 2px 4px -2px rgba(0, 21, 33, 0.04); --eka-font-sans: var(--theme-font-family); --eka-font-serif: var(--theme-font-family); } /* Hide the GreenLight stylemanager dummy div inside cards */ .eka-book-card.eka-book-cover-link { display: none !important; } /* 1. Book Card (.eka-book-card) */ .eka-book-card { background-color: var(--eka-card); border: 1px solid var(--eka-border); border-radius: var(--eka-radius-lg); overflow: hidden; display: flex; flex-direction: column; height: 100%; box-shadow: var(--eka-shadow-sm); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; font-family: var(--eka-font-sans); direction: rtl; text-align: right; box-sizing: border-box; } .eka-book-card:hover { transform: translateY(-2px); box-shadow: var(--eka-shadow-md); border-color: var(--eka-primary-hover); } .eka-book-cover-link { display: block; aspect-ratio: 3 / 4; background-color: var(--eka-muted); border-bottom: 1px solid var(--eka-border); overflow: hidden; text-decoration: none; } .eka-book-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; transition: transform 0.25s ease; } .eka-book-card:hover .eka-book-cover { transform: scale(1.02); } .eka-book-body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; } .eka-book-cat { font-size: 11.5px; line-height: 1.4; font-weight: 600; color: var(--eka-primary); margin-bottom: 4px; } .eka-book-cat a { color: inherit; text-decoration: none; } .eka-book-cat a:hover { text-decoration: underline; } .eka-book-title { font-family: var(--eka-font-serif); font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--eka-heading); margin: 0 0 6px 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .eka-book-title a { color: inherit; text-decoration: none; } .eka-book-title a:hover { color: var(--eka-primary); } .eka-book-writer { font-size: 12.5px; line-height: 1.4; color: var(--eka-muted-fg); margin-top: auto !important; margin-bottom: 0 !important; padding-top: 8px; border-top: 1px solid var(--eka-border); } .eka-book-writer a { color: inherit; text-decoration: none; } .eka-book-writer a:hover { color: var(--eka-heading); } /* 2. Archive Page Background & Container Spacing */ body.archive, body.blog { background-color: var(--eka-bg) !important; font-family: var(--eka-font-sans); } body.archive .site-main > .ct-container, body.blog .site-main > .ct-container { max-width: var(--theme-normal-container-max-width, 1290px); padding-top: 24px; padding-bottom: 56px; } /* 3. Archive Header Card (.hero-section[data-type="type-1"]) */ body.archive .hero-section[data-type="type-1"], body.blog .hero-section[data-type="type-1"] { background-color: var(--eka-card) !important; border: 1px solid var(--eka-border) !important; border-radius: var(--eka-radius-lg) !important; padding: 28px 32px !important; margin-bottom: 28px !important; box-shadow: var(--eka-shadow-sm) !important; text-align: right !important; max-width: 100% !important; width: 100% !important; } body.archive .hero-section[data-type="type-1"] .entry-header, body.blog .hero-section[data-type="type-1"] .entry-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: right !important; gap: 8px !important; max-width: 100% !important; margin: 0 !important; }  /* Hide redundant Blocksy .ct-title-label inside h1 since badge is shown above */ body.archive .hero-section[data-type="type-1"] .page-title .ct-title-label { display: none !important; } /* Archive H1 Title */ body.archive .hero-section[data-type="type-1"] .page-title, body.blog .hero-section[data-type="type-1"] .page-title { font-family: var(--eka-font-serif) !important; font-size: 34px !important; line-height: 1.25 !important; font-weight: 700 !important; color: var(--eka-heading) !important; margin: 0 !important; }  /* Archive Description (.page-description) */ body.archive .hero-section[data-type="type-1"] .page-description, body.blog .hero-section[data-type="type-1"] .page-description { display: block !important; font-family: var(--eka-font-sans) !important; font-size: 15px !important; line-height: 1.75 !important; color: var(--eka-muted-fg) !important; max-width: 780px !important; margin: 2px 0 0 0 !important; text-align: right !important; } body.archive .hero-section[data-type="type-1"] .page-description p, body.blog .hero-section[data-type="type-1"] .page-description p { margin: 0 !important; } /* 4. Book Archive Grid (5 columns on desktop, 3 tablet, 2 mobile) */ body[data-prefix="book_archive"] .entries { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 18px !important; width: 100% !important; } body[data-prefix="book_archive"] .entries > article.book { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; width: 100% !important; } body[data-prefix="book_archive"] .entries > article.book > div.eka-book-card { display: flex !important; flex-direction: column !important; flex: 1 !important; width: 100% !important; height: 100% !important; } body[data-prefix="book_archive"] .entries > article.book > script, body[data-prefix="book_archive"] .entries > article.book > style { display: none !important; } /* 5. Blog / Category / Tag Post Grid (3 columns on desktop, 2 tablet, 1 mobile) */ body.blog .entries, body.category .entries, body.tag .entries { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; } body.blog .entries > article.entry-card, body.category .entries > article.entry-card, body.tag .entries > article.entry-card { background-color: var(--eka-card) !important; border: 1px solid var(--eka-border) !important; border-radius: var(--eka-radius-lg) !important; box-shadow: var(--eka-shadow-sm) !important; padding: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important; } body.blog .entries > article.entry-card:hover, body.category .entries > article.entry-card:hover, body.tag .entries > article.entry-card:hover { transform: translateY(-2px) !important; box-shadow: var(--eka-shadow-md) !important; border-color: var(--eka-primary-hover) !important; } /* Reorder Blog Card children cleanly: Thumbnail at top (order 1), Category pill (order 2), Title (order 3), Excerpt (order 4), Footer Meta (order 5) */ body.blog .entries > article.entry-card > .ct-media-container, body.category .entries > article.entry-card > .ct-media-container, body.tag .entries > article.entry-card > .ct-media-container { order: 1 !important; margin: 0 !important; border-radius: 0 !important; border-bottom: 1px solid var(--eka-border) !important; aspect-ratio: 16 / 10 !important; background-color: var(--eka-muted) !important; overflow: hidden !important; } body.blog .entries > article.entry-card > .ct-media-container img, body.category .entries > article.entry-card > .ct-media-container img, body.tag .entries > article.entry-card > .ct-media-container img { width: 100% !important; height: 100% !important; object-fit: cover !important; aspect-ratio: 16 / 10 !important; } body.blog .entries > article.entry-card > ul.entry-meta:first-of-type, body.category .entries > article.entry-card > ul.entry-meta:first-of-type, body.tag .entries > article.entry-card > ul.entry-meta:first-of-type { order: 2 !important; padding: 16px 20px 0 20px !important; margin: 0 0 8px 0 !important; } body.blog .entries > article.entry-card > ul.entry-meta:first-of-type li.meta-categories a, body.category .entries > article.entry-card > ul.entry-meta:first-of-type li.meta-categories a, body.tag .entries > article.entry-card > ul.entry-meta:first-of-type li.meta-categories a { display: inline-flex !important; padding: 3px 9px !important; border-radius: var(--eka-radius-sm) !important; background-color: var(--eka-muted) !important; border: 1px solid var(--eka-border) !important; color: var(--eka-primary) !important; font-size: 11.5px !important; font-weight: 600 !important; text-decoration: none !important; } body.blog .entries > article.entry-card > .entry-title, body.category .entries > article.entry-card > .entry-title, body.tag .entries > article.entry-card > .entry-title { order: 3 !important; font-family: var(--eka-font-serif) !important; font-size: 20px !important; line-height: 1.4 !important; font-weight: 700 !important; color: var(--eka-heading) !important; padding: 0 20px !important; margin: 0 0 14px 0 !important; } body.blog .entries > article.entry-card > .entry-title a, body.category .entries > article.entry-card > .entry-title a, body.tag .entries > article.entry-card > .entry-title a { color: inherit !important; text-decoration: none !important; } body.blog .entries > article.entry-card > .entry-title a:hover, body.category .entries > article.entry-card > .entry-title a:hover, body.tag .entries > article.entry-card > .entry-title a:hover { color: var(--eka-primary) !important; } body.blog .entries > article.entry-card > .entry-excerpt, body.category .entries > article.entry-card > .entry-excerpt, body.tag .entries > article.entry-card > .entry-excerpt { order: 4 !important; padding: 0 20px !important; margin: 0 0 16px 0 !important; font-size: 13.5px !important; line-height: 1.65 !important; color: var(--eka-muted-fg) !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Hide secondary author/comments meta clutter on category/tag cards to match homepage/blog cards */ body.category .entries > article.entry-card > ul.entry-meta[data-id="meta_2"], body.tag .entries > article.entry-card > ul.entry-meta[data-id="meta_2"] { display: none !important; } /* Add bottom action bar on blog/category/tag cards */ body.blog .entries > article.entry-card::after, body.category .entries > article.entry-card::after, body.tag .entries > article.entry-card::after { order: 5; content: "قراءة المقال ←"; display: block; margin-top: auto; padding: 12px 20px 16px 20px; border-top: 1px solid var(--eka-border); font-family: var(--eka-font-sans); font-size: 13px; font-weight: 600; color: var(--eka-primary); }  /* 7. Pagination (.ct-pagination) — shadcn/ui Button Group */ .ct-pagination { margin-top: 36px !important; padding-top: 20px !important; border-top: 1px solid var(--eka-border) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex-wrap: wrap !important; } .ct-pagination > div { display: flex !important; align-items: center !important; gap: 6px !important; } .ct-pagination .page-numbers { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 38px !important; height: 38px !important; padding: 0 12px !important; border-radius: var(--eka-radius-sm) !important; background-color: var(--eka-card) !important; border: 1px solid var(--eka-border) !important; color: var(--eka-heading) !important; font-family: var(--eka-font-sans) !important; font-size: 13.5px !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: var(--eka-shadow-sm) !important; transition: all 0.15s ease !important; margin: 0 !important; } .ct-pagination a.page-numbers:hover { background-color: var(--eka-muted) !important; border-color: var(--eka-primary) !important; color: var(--eka-heading) !important; } .ct-pagination .page-numbers.current { background-color: var(--eka-primary) !important; border-color: var(--eka-primary) !important; color: var(--theme-button-text-initial-color) !important; } /* 8. Dynamic Injected Archive Toolbar (.eka-injected-toolbar) */ .eka-injected-toolbar { width: 100%; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--eka-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .eka-chips-list { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .eka-chips-label { font-size: 12.5px; font-weight: 600; color: var(--eka-muted-fg); margin-left: 4px; } .eka-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--eka-radius-sm); background-color: var(--eka-bg); border: 1px solid var(--eka-border); color: var(--eka-heading); font-size: 12.5px; line-height: 1.4; font-weight: 500; text-decoration: none !important; transition: all 0.15s ease; } .eka-chip:hover { background-color: var(--eka-muted); border-color: var(--eka-primary); color: var(--eka-heading); } .eka-chip-active { background-color: var(--eka-primary) !important; border-color: var(--eka-primary) !important; color: var(--theme-button-text-initial-color) !important; font-weight: 600; } .eka-mini-search { display: flex; align-items: center; gap: 6px; background-color: var(--eka-bg); border: 1px solid var(--eka-border); border-radius: var(--eka-radius-md); padding: 4px 6px 4px 10px; min-width: 260px; } .eka-mini-input { border: none !important; background: transparent !important; font-family: var(--eka-font-sans) !important; font-size: 13px !important; color: var(--eka-fg) !important; padding: 4px 6px !important; height: auto !important; width: 100% !important; outline: none !important; box-shadow: none !important; } .eka-mini-btn { background-color: var(--eka-primary) !important; color: var(--theme-button-text-initial-color) !important; border: none !important; border-radius: var(--eka-radius-sm) !important; padding: 6px 12px !important; font-family: var(--eka-font-sans) !important; font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap !important; } .eka-mini-btn:hover { background-color: var(--eka-primary-hover) !important; } /* Writer Monogram Avatar (.eka-writer-avatar) */ .eka-writer-row { display: flex; align-items: flex-start; gap: 18px; width: 100%; } .eka-writer-monogram { width: 60px; height: 60px; border-radius: var(--eka-radius-lg); background-color: var(--eka-muted); border: 1px solid var(--eka-border); color: var(--eka-primary); font-family: var(--eka-font-serif); font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--eka-shadow-sm); } /* Responsive Breakpoints */ @media (max-width: 1024px) { body[data-prefix="book_archive"] .entries { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.blog .entries, body.category .entries, body.tag .entries { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { body.archive .hero-section[data-type="type-1"], body.blog .hero-section[data-type="type-1"] { padding: 20px 18px !important; } body.archive .hero-section[data-type="type-1"] .page-title, body.blog .hero-section[data-type="type-1"] .page-title { font-size: 26px !important; } body[data-prefix="book_archive"] .entries { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } body.blog .entries, body.category .entries, body.tag .entries { grid-template-columns: 1fr !important; } } /* EKBS_FEATURES_CSS_START */ /* ========================================================================== ekitabs.com — «كتاب عشوائي» + «مقترحات مخصصة لك» header buttons Scope: .ekbs-random-wrap / .ekbs-random-btn (shuffle → /books/) .ekbs-suggest-wrap / .ekbs-suggest-btn (link to /suggest/) 100% Blocksy native button system: - filled → .ct-button (var(--theme-button-*), 3px radius) - outline → .ct-button-ghost (2px border, transparent → filled hover) - wrapper → .ct-header-cta ([data-size="small"] sizing tokens) No bespoke pill radii, no inner icon circles, no hardcoded sage tokens. RTL-first, logical properties, zero web-font requests. ========================================================================== */ /* -------------------------------------------------------------------------- 0) Shared Blocksy geometry (both header buttons) -------------------------------------------------------------------------- */ .ekbs-random-wrap, .ekbs-suggest-wrap { display: flex; align-items: center; margin: 0 !important; padding: 0 !important; line-height: 1; flex: 0 0 auto; } .ekbs-random-btn, .ekbs-suggest-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--theme-button-gap, 0.5em); box-sizing: border-box; min-height: var(--theme-button-min-height, 40px); padding: var(--theme-button-padding, 5px 20px); border-radius: var(--theme-button-border-radius, 3px); font-family: var(--theme-button-font-family, var(--theme-font-family)); font-size: var(--theme-button-font-size, 15px); font-weight: var(--theme-button-font-weight, 500); line-height: var(--theme-button-line-height, 1.3); text-decoration: none; white-space: nowrap; cursor: pointer; position: relative; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } /* Inline icon only — no chip, no circle, no background. */ .ekbs-random-btn .ekbs-ico, .ekbs-suggest-btn .ekbs-ico { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex: 0 0 auto; border: 0; border-radius: 0; background: none; color: currentColor; } .ekbs-random-btn .ekbs-ico svg, .ekbs-suggest-btn .ekbs-ico svg { width: 15px; height: 15px; display: block; } .ekbs-random-btn .ekbs-label, .ekbs-suggest-btn .ekbs-label { display: inline-block; } .ekbs-random-btn .ekbs-label--short, .ekbs-suggest-btn .ekbs-label--short { display: none; } .ekbs-random-btn:focus-visible, .ekbs-suggest-btn:focus-visible { outline: 2px solid var(--theme-palette-color-2, #566246); outline-offset: 2px; } /* ========================================================================== 1) «مقترحات مخصصة لك» — native Blocksy filled CTA (.ct-button) ========================================================================== */ .ekbs-suggest-btn { border: var(--theme-button-border, none); color: var(--theme-button-text-initial-color, #ffffff); background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); } .ekbs-suggest-btn:hover, .ekbs-suggest-btn:focus-visible { color: var(--theme-button-text-hover-color, #ffffff); background-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); border-color: var(--theme-button-border-hover-color, transparent); } /* Current page (/suggest/): Blocksy palette state, never custom sage. */ .ekbs-suggest-btn.is-active, .ekbs-suggest-btn[aria-current="page"] { background-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); color: var(--theme-button-text-hover-color, #ffffff); box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--theme-button-text-initial-color) 55%, transparent); } .ekbs-suggest-btn.is-active:hover, .ekbs-suggest-btn[aria-current="page"]:hover { background-color: var(--theme-palette-color-2, #566246); color: var(--theme-button-text-initial-color); } /* ========================================================================== 2) «كتاب عشوائي» — native Blocksy ghost button (.ct-button-ghost) ========================================================================== */ .ekbs-random-btn { border-width: 2px; border-style: solid; border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); background-color: transparent; color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); } .ekbs-random-btn:hover, .ekbs-random-btn:focus-visible { color: var(--theme-button-text-hover-color, #ffffff); 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)); } .ekbs-random-btn:active { transform: translateY(1px); } /* the "dice roll" feedback on click */ .ekbs-random-btn.is-rolling .ekbs-ico { animation: ekbs-roll .34s ease-in-out; } @keyframes ekbs-roll { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 2a) Desktop header (>= 1000px): always expanded native Blocksy ghost CTA (icon + «كتاب عشوائي» label visible at rest, matching .ekbs-suggest-btn). -------------------------------------------------------------------------- */ @media (min-width: 1000px) { #header [data-device="desktop"] .ekbs-random-btn .ekbs-label--long { display: inline-block; } #header [data-device="desktop"] .ekbs-random-btn .ekbs-label--short { display: none; } } /* -------------------------------------------------------------------------- 2b) Mobile top bar (< 1000px): the glue CSS hides the injected header buttons; these rules only keep a safe touch target if one is exposed. -------------------------------------------------------------------------- */ @media (max-width: 999.98px) { #header .ekbs-random-btn { min-width: 40px; min-height: 40px; padding: 0; gap: 0; justify-content: center; } #header .ekbs-random-btn .ekbs-label { display: none; } #header .ekbs-random-wrap { position: relative; } } /* -------------------------------------------------------------------------- 2c) Off-canvas drawer: full-width native ghost button adapted for the dark #offcanvas panel (white 2px outline → filled Blocksy hover). -------------------------------------------------------------------------- */ #offcanvas .ekbs-random-wrap, #offcanvas .ekbs-suggest-wrap { width: 100%; margin: 0 0 10px !important; } #offcanvas .ekbs-random-btn, #offcanvas .ekbs-suggest-btn { width: 100%; justify-content: center; min-height: 44px; padding: 8px 18px; font-family: var(--theme-button-font-family, var(--theme-font-family)); font-size: var(--theme-button-font-size, 15px); font-weight: var(--theme-button-font-weight, 500); transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } #offcanvas .ekbs-random-btn { --theme-button-background-initial-color: rgba(255, 255, 255, 0.35); --theme-button-text-initial-color: #ffffff; --theme-button-background-hover-color: var(--theme-palette-color-2, #566246); --theme-button-text-hover-color: #ffffff; color: var(--theme-button-text-initial-color); } #offcanvas .ekbs-random-btn .ekbs-label--long { display: inline-block; max-width: none; opacity: 1; overflow: visible; margin-inline-start: 0; } #offcanvas .ekbs-random-btn .ekbs-label--short { display: none; } #offcanvas .ekbs-suggest-btn { --theme-button-background-initial-color: var(--theme-palette-color-1, #333d29); --theme-button-background-hover-color: var(--theme-palette-color-2, #566246); } #offcanvas .ekbs-suggest-btn.is-active, #offcanvas .ekbs-suggest-btn[aria-current="page"] { background-color: var(--theme-palette-color-2, #566246); color: var(--theme-button-text-initial-color); box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--theme-button-text-initial-color) 55%, transparent); } /* -------------------------------------------------------------------------- 3) Blocksy wrappers we must neutralise (Text/HTML element shell) -------------------------------------------------------------------------- */ .ct-header-text .entry-content { margin: 0 !important; } .ct-header-text .ekbs-random-wrap > *, .ct-header-text .ekbs-suggest-wrap > * { margin: 0 !important; } #offcanvas .ct-header-text { width: 100%; } /* -------------------------------------------------------------------------- 4) Accessibility / print -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ekbs-random-btn, .ekbs-suggest-btn, .ekbs-random-btn .ekbs-ico, .ekbs-suggest-btn .ekbs-ico, #header [data-device="desktop"] .ekbs-random-btn .ekbs-label--long { transition: none !important; animation: none !important; } } @media print { .ekbs-random-wrap, .ekbs-suggest-wrap { display: none !important; } } /* ========================================================================== ekitabs.com — "مكتبتي" / Save Without Login File: ekbs-favorites.css (site-wide, loaded in ) Depends on the Option-A tokens already used by the Book Template (662) and the Archive/Card system (825). Every token has a fallback so the file works on pages where the GreenShift CSS is not present (home, blog, /favorites/). Tokens --ekbs-primary #333d29 forest olive --ekbs-primary-hover #566246 --ekbs-fg #001521 --ekbs-heading #001f2e --ekbs-border #d5d9d7 / #E6F0EE --ekbs-muted #F2F7F6 --ekbs-bg #FBFCFC --ekbs-card #ffffff --ekbs-mint #dde7c7 ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ :root { --ekbf-primary: var(--theme-palette-color-1); --ekbf-primary-hover: var(--theme-palette-color-2); --ekbf-fg: var(--theme-text-color); --ekbf-heading: var(--theme-headings-color); --ekbf-border: var(--theme-border-color); --ekbf-muted: var(--theme-palette-color-6); --ekbf-bg: var(--theme-palette-color-7); --ekbf-card: var(--theme-palette-color-8); --ekbf-mint: var(--theme-palette-color-6); --ekbf-mint-strong: var(--theme-border-color); --ekbf-mint-ink: var(--theme-link-initial-color); --ekbf-muted-fg: var(--theme-text-color); --ekbf-radius-lg: 12px; --ekbf-radius-md: 8px; --ekbf-radius-sm: 6px; --ekbf-shadow-sm: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); --ekbf-shadow-md: 0 4px 12px -2px rgba(0, 21, 33, 0.07), 0 2px 4px -2px rgba(0, 21, 33, 0.04); --ekbf-shadow-lg: 0 18px 38px -12px rgba(0, 21, 33, 0.22), 0 6px 14px -6px rgba(0, 21, 33, 0.1); --ekbf-font: var(--theme-font-family); --ekbf-font-serif: var(--theme-font-family); --ekbf-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } .ekbf-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 2. Shared buttons — Blocksy native button system ------------------------ */ /* Filled → .ct-button geometry/tokens; ghost → .ct-button-ghost. */ .ekbf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--theme-button-min-height, 40px); padding: var(--theme-button-padding, 5px 20px); border: var(--theme-button-border, none); border-radius: var(--theme-button-border-radius, 3px); font-family: var(--theme-button-font-family, var(--ekbf-font)); font-size: var(--theme-button-font-size, 15px); line-height: var(--theme-button-line-height, 1.3); font-weight: var(--theme-button-font-weight, 500); text-decoration: none; cursor: pointer; appearance: none; -webkit-appearance: none; transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .ekbf-btn:focus-visible, .eka-save-btn:focus-visible, .ekbs-btn-save:focus-visible, .ekbs-fav-trigger:focus-visible, .ekbs-drawer button:focus-visible, .ekbs-drawer a:focus-visible { outline: 2px solid var(--theme-palette-color-2, var(--ekbf-primary)); outline-offset: 2px; border-radius: var(--theme-button-border-radius, 3px); } .ekbf-btn--primary { background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-button-text-initial-color, #ffffff); border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); } .ekbf-btn--primary:hover, .ekbf-btn--primary:focus-visible { 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, #ffffff); } /* Secondary actions keep the native Blocksy outline treatment. */ .ekbf-btn--ghost, .ekbf-btn--mint { background-color: transparent; color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); border-width: 2px; border-style: solid; border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); } .ekbf-btn--ghost:hover, .ekbf-btn--ghost:focus-visible, .ekbf-btn--mint:hover, .ekbf-btn--mint:focus-visible { 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, #ffffff); } .ekbf-btn--danger { background: transparent; color: color-mix(in srgb, #d92d20 45%, var(--theme-text-color)); border-color: transparent; } .ekbf-btn--danger:hover { background: color-mix(in srgb, #d92d20 10%, var(--theme-palette-color-8)); border-color: color-mix(in srgb, #d92d20 25%, var(--theme-palette-color-8)); } .ekbf-btn[disabled] { opacity: .45; cursor: not-allowed; } .ekbf-btn--sm { min-height: 30px; padding: 4px 10px; font-size: 11.5px; border-radius: var(--theme-button-border-radius, 3px); } .ekbf-btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* `hidden` must win over the layout classes below */ .ekbs-fav-page [hidden], .ekbs-drawer [hidden], .ekbf-proof[hidden] { display: none !important; } /* 3. Book page — secondary CTA under .ekbs-btn-download -------------------- */ /* Native Blocksy outline button (.ct-button-ghost): transparent → filled. */ .ekbs-btn-save { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 8px; min-height: var(--theme-button-min-height, 42px); padding: 8px 20px; background-color: transparent; color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); border-width: 2px; border-style: solid; border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); border-radius: var(--theme-button-border-radius, 3px); font-family: var(--theme-button-font-family, var(--ekbf-font)); font-size: var(--theme-button-font-size, 15px); line-height: var(--theme-button-line-height, 1.3); font-weight: var(--theme-button-font-weight, 500); cursor: pointer; appearance: none; -webkit-appearance: none; box-shadow: none; transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .ekbs-btn-save:hover, .ekbs-btn-save:focus-visible { 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, #ffffff); } .ekbs-btn-save:active { transform: translateY(1px); } /* Saved state: subtle tinted Blocksy palette, still inside 3px geometry. */ .ekbs-btn-save[aria-pressed="true"] { background-color: var(--theme-palette-color-5, #E6F0EE); border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-palette-color-4, var(--theme-button-background-initial-color, var(--theme-palette-color-1))); } .ekbs-btn-save[aria-pressed="true"]: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, #ffffff); } .ekbs-btn-save__icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ekbs-btn-save[aria-pressed="true"] .ekbs-btn-save__bookmark { display: none; } .ekbs-btn-save:not([aria-pressed="true"]) .ekbs-btn-save__check { display: none; } .ekbs-btn-save[aria-pressed="true"] .ekbs-btn-save__icon { fill: var(--theme-palette-color-5, #E6F0EE); stroke: currentColor; } .ekbs-btn-save__saved { display: none; } .ekbs-btn-save[aria-pressed="true"] .ekbs-btn-save__idle { display: none; } .ekbs-btn-save[aria-pressed="true"] .ekbs-btn-save__saved { display: inline; } /* Icon "pop" when a save just happened */ @keyframes ekbf-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22) rotate(-4deg); } 100% { transform: scale(1); } } .ekbs-btn-save.is-just-saved .ekbs-btn-save__icon, .eka-save-btn.is-just-saved svg { animation: ekbf-pop .34s var(--ekbf-ease); } /* Optional social-proof line injected by JS under the save button */ .ekbf-proof { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 8px 0 0; font-family: var(--ekbf-font); font-size: 11.5px; line-height: 1.5; color: var(--ekbf-muted-fg); } .ekbf-proof[hidden] { display: none; } /* 4. Archive card — floating bookmark (injected into .eka-book-card) ------- */ .eka-book-card { position: relative; } .eka-save-btn { position: absolute; inset-block-start: 9px; inset-inline-end: 9px; /* RTL → top-left of the cover */ z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: var(--theme-button-border-radius, 3px); border: 1px solid var(--theme-border-color); background-color: var(--theme-palette-color-8); color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); box-shadow: 0 1px 2px rgba(0, 21, 33, .10); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; appearance: none; -webkit-appearance: none; transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } /* 44×44 invisible hit area around the 34px button */ .eka-save-btn::after { content: ""; position: absolute; inset: -5px; border-radius: var(--theme-button-border-radius, 3px); } .eka-save-btn:hover { background-color: var(--theme-palette-color-8); border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); transform: scale(1.06); } .eka-save-btn:active { transform: scale(.96); } .eka-save-btn[aria-pressed="true"] { background-color: var(--theme-palette-color-5, #E6F0EE); border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); } .eka-save-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .eka-save-btn[aria-pressed="true"] svg { fill: var(--theme-palette-color-5, #E6F0EE); stroke: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); } /* 5. Header trigger (injected into Blocksy header) ------------------------- Native Blocksy icon toggle: `[class*=ct-toggle]` + .ct-header-search parity. Geometry/边框 come from the --toggle-button-* custom properties. */ .ekbs-fav-trigger { --toggle-button-size: 36px; --toggle-button-radius: var(--theme-button-border-radius, 3px); --toggle-button-background: transparent; --toggle-button-border-width: 0px; --toggle-button-padding: 0px; --toggle-button-margin-start: 0; --toggle-button-margin-end: 0; position: relative; gap: 0; margin: 0; background: transparent; color: var(--theme-text-color, var(--ekbf-heading)); font-family: var(--ekbf-font); font-size: 13px; line-height: 1; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; white-space: nowrap; } .ekbs-fav-trigger:hover, .ekbs-fav-trigger:focus-visible { color: var(--theme-link-hover-color, var(--theme-palette-color-2)); } .ekbs-fav-trigger > svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ekbs-fav-trigger__label { display: none !important; } .ekbs-fav-badge { display: none; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-button-text-initial-color, #ffffff); font-family: var(--ekbf-font); font-size: 11px; line-height: 19px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .ekbs-fav-trigger[data-count]:not([data-count="0"]) .ekbs-fav-badge { display: inline-block; } .ekbs-fav-trigger[data-count]:not([data-count="0"]) > svg { fill: var(--theme-palette-color-5, #E6F0EE); stroke: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); } @keyframes ekbf-badge-bump { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } } .ekbs-fav-trigger.is-bumping .ekbs-fav-badge { animation: ekbf-badge-bump .32s var(--ekbf-ease); } /* Desktop (>= 1000px): 36×36 Blocksy toggle next to the native search toggle. */ @media (min-width: 1000px) { #header [data-device="desktop"] .ekbs-fav-trigger { --toggle-button-size: 36px; --toggle-button-radius: var(--theme-button-border-radius, 3px); --toggle-button-background: transparent; --toggle-button-border-width: 0px; --toggle-button-padding: 0px; color: var(--theme-text-color); } #header [data-device="desktop"] .ekbs-fav-trigger:hover, #header [data-device="desktop"] .ekbs-fav-trigger:focus-visible { color: var(--theme-link-hover-color, var(--theme-palette-color-2)); } #header [data-device="desktop"] .ekbs-fav-trigger .ekbs-fav-trigger__label { display: none !important; } #header [data-device="desktop"] .ekbs-fav-trigger > svg { width: 19px; height: 19px; } #header [data-device="desktop"] .ekbs-fav-trigger .ekbs-fav-badge { position: absolute; inset-block-start: -2px; inset-inline-end: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-button-text-initial-color, #ffffff); box-shadow: 0 0 0 2px var(--ekbf-card, #fff); font-size: 11px; line-height: 1; font-weight: 700; display: none; align-items: center; justify-content: center; } #header [data-device="desktop"] .ekbs-fav-trigger[data-count]:not([data-count="0"]) .ekbs-fav-badge { display: inline-flex; } } /* Fallback for the trigger when it is not inside the desktop header. */ @media (max-width: 999.98px) { .ekbs-fav-trigger__label { display: none; } .ekbs-fav-trigger { --toggle-button-size: 40px; --toggle-button-padding: 0px; } .ekbs-fav-trigger .ekbs-fav-badge { position: absolute; inset-block-start: -3px; inset-inline-end: -3px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; line-height: 17px; } } /* Optional native menu item (a.ekbs-fav-link) */ .ekbs-fav-link { display: inline-flex; align-items: center; gap: 6px; } .ekbs-fav-link .ekbs-fav-badge { display: none; } .ekbs-fav-link[data-count]:not([data-count="0"]) .ekbs-fav-badge { display: inline-block; } /* Offcanvas duplicate (mobile menu panel) — native Blocksy ghost button adapted for the dark panel: white 2px outline → filled Blocksy hover. */ .ekbs-fav-offcanvas { --theme-button-background-initial-color: rgba(255, 255, 255, 0.35); --theme-button-text-initial-color: #ffffff; --theme-button-background-hover-color: var(--theme-palette-color-2, #566246); --theme-button-text-hover-color: #ffffff; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 44px; box-sizing: border-box; margin: 0 0 10px; padding: 8px 18px; border-width: 2px; border-style: solid; border-color: var(--theme-button-background-initial-color); border-radius: var(--theme-button-border-radius, 3px); background-color: transparent; color: var(--theme-button-text-initial-color); font-family: var(--theme-button-font-family, var(--ekbf-font)); font-size: var(--theme-button-font-size, 15px); font-weight: var(--theme-button-font-weight, 500); line-height: var(--theme-button-line-height, 1.3); text-decoration: none; transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .ekbs-fav-offcanvas:hover, .ekbs-fav-offcanvas:focus-visible { background-color: var(--theme-button-background-hover-color); border-color: var(--theme-button-background-hover-color); color: var(--theme-button-text-hover-color); } .ekbs-fav-offcanvas__ico { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 0; background: none; color: currentColor; flex: 0 0 auto; } .ekbs-fav-offcanvas__ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ekbs-fav-offcanvas__label { white-space: nowrap; } .ekbs-fav-offcanvas__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--theme-palette-color-1, #333d29); color: var(--theme-button-text-initial-color); font-size: 11.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } /* 6. Slide-over drawer (native ) ---------------------------------- */ html.ekbs-no-scroll { overflow: hidden; } html.ekbs-no-scroll body { padding-inline-end: var(--ekbs-sbw, 0px); } .ekbs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; /* RTL → left edge */ inset-inline-start: auto; width: min(420px, 100vw); max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-inline-start: 1px solid var(--ekbf-border); border-radius: 0; background-color: var(--ekbf-card); color: var(--ekbf-fg); box-shadow: var(--ekbf-shadow-lg); overflow: hidden; direction: rtl; font-family: var(--ekbf-font); } .ekbs-drawer:not([open]) { display: none; } .ekbs-drawer[open] { animation: ekbf-drawer-in .28s var(--ekbf-ease); } .ekbs-drawer::backdrop { background-color: rgba(0, 21, 33, .38); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } @keyframes ekbf-drawer-in { from { transform: translateX(-100%); opacity: .5; } to { transform: translateX(0); opacity: 1; } } @media (max-width: 480px) { .ekbs-drawer { width: 100vw; border-inline-start: 0; } } .ekbs-drawer__panel { display: flex; flex-direction: column; height: 100%; min-height: 0; } .ekbs-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ekbf-border); background-color: var(--ekbf-card); } .ekbs-drawer__title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--ekbf-font-serif); font-size: 23px; line-height: 1.25; font-weight: 700; color: var(--ekbf-heading); } .ekbs-drawer__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background-color: var(--ekbf-mint); color: var(--ekbf-mint-ink); font-family: var(--ekbf-font); font-size: 12px; font-weight: 700; line-height: 24px; font-variant-numeric: tabular-nums; } .ekbs-drawer__sub { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--ekbf-muted-fg); } .ekbs-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: 0; border-radius: var(--theme-button-border-radius, 3px); background: transparent; color: var(--theme-text-color, var(--ekbf-heading)); cursor: pointer; appearance: none; transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .ekbs-drawer__close:hover { background: var(--theme-palette-color-5, var(--ekbf-muted)); color: var(--theme-link-hover-color, var(--theme-palette-color-2)); } .ekbs-drawer__close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .ekbs-drawer__actions { display: flex; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--ekbf-border); } .ekbs-drawer__actions .ekbf-btn { flex: 1; } .ekbs-drawer__actions .ekbf-btn--ghost { flex: 0 0 auto; padding-inline: 12px; } /* CSV export / restore row inside the drawer */ .ekbs-drawer__csv { display: flex; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--ekbf-border); background-color: var(--ekbf-bg); } .ekbs-drawer__csv .ekbf-btn { flex: 1 1 0; min-height: 32px; font-size: 12px; gap: 6px; color: var(--ekbf-muted-fg); } .ekbs-drawer__csv .ekbf-btn:hover { color: var(--ekbf-primary); } .ekbs-drawer__csv .ekbf-btn svg { width: 14px; height: 14px; } .ekbs-drawer__csv .ekbf-btn[disabled] { color: var(--ekbf-muted-fg); } .ekbs-drawer__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 12px; -webkit-overflow-scrolling: touch; } .ekbs-drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ekbf-border); background-color: var(--ekbf-bg); } .ekbs-drawer__foot-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ekbf-primary); font-size: 12.5px; font-weight: 600; text-decoration: none; } .ekbs-drawer__foot-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* 7. Saved-book row (drawer) ---------------------------------------------- */ .ekbs-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) 30px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ekbf-border); } .ekbs-item:last-child { border-bottom: 0; } .ekbs-item__cover { position: relative; display: block; width: 54px; aspect-ratio: 3 / 4; border-radius: var(--ekbf-radius-sm); border: 1px solid var(--ekbf-border); background-color: var(--ekbf-muted); overflow: hidden; text-decoration: none; } .ekbs-item__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .ekbs-item__fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--ekbf-mint), var(--ekbf-muted)); color: var(--ekbf-mint-ink); font-family: var(--ekbf-font-serif); font-size: 20px; font-weight: 700; } .ekbs-item__body { min-width: 0; } .ekbs-item__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-family: var(--ekbf-font-serif); font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--ekbf-heading); text-decoration: none; } .ekbs-item__title:hover { color: var(--ekbf-primary); } .ekbs-item__author { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: var(--ekbf-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ekbs-item__cat { display: inline-flex; align-items: center; margin-top: 6px; padding: 2px 8px; border-radius: var(--ekbf-radius-sm); background-color: var(--ekbf-muted); border: 1px solid var(--ekbf-border); color: var(--ekbf-primary); font-size: 10.5px; line-height: 1.5; font-weight: 600; } .ekbs-item__cat:empty { display: none; } .ekbs-item__remove { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: var(--theme-button-border-radius, 3px); background: transparent; color: color-mix(in srgb, var(--theme-text-color) 70%, transparent); cursor: pointer; appearance: none; transition: background-color .15s var(--ekbf-ease), color .15s var(--ekbf-ease), border-color .15s var(--ekbf-ease); } .ekbs-item__remove:hover { background-color: color-mix(in srgb, #d92d20 10%, var(--theme-palette-color-8)); border-color: color-mix(in srgb, #d92d20 25%, var(--theme-palette-color-8)); color: color-mix(in srgb, #d92d20 45%, var(--theme-text-color)); } .ekbs-item__remove svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* 8. Empty state ----------------------------------------------------------- */ .ekbs-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 14px 36px; } .ekbs-empty__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 999px; background-color: var(--ekbf-mint); color: var(--ekbf-mint-ink); } .ekbs-empty__icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ekbs-empty__title { margin: 0 0 6px; font-family: var(--ekbf-font-serif); font-size: 19px; line-height: 1.35; font-weight: 700; color: var(--ekbf-heading); } .ekbs-empty__text { margin: 0 0 16px; max-width: 260px; font-size: 12.5px; line-height: 1.7; color: var(--ekbf-muted-fg); } /* 9. Toast ----------------------------------------------------------------- */ .ekbs-toast-host { position: fixed; inset-block-end: 22px; inset-inline-start: 22px; z-index: 2147483000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .ekbs-toast { display: flex; align-items: center; gap: 12px; max-width: min(400px, calc(100vw - 32px)); padding: 11px 13px 11px 16px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--theme-palette-color-8) 28%, transparent); background-color: var(--theme-palette-color-4); color: var(--theme-palette-color-8); box-shadow: var(--ekbf-shadow-lg); font-family: var(--ekbf-font); font-size: 13px; line-height: 1.5; pointer-events: auto; animation: ekbf-toast-in .24s var(--ekbf-ease); } @keyframes ekbf-toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ekbs-toast__text { flex: 1 1 auto; } .ekbs-toast__action { flex: 0 0 auto; padding: 4px 8px; border: 0; border-radius: var(--theme-button-border-radius, 3px); background: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-button-text-initial-color, var(--theme-palette-color-8)); font-family: var(--ekbf-font); font-size: 12px; font-weight: 700; cursor: pointer; appearance: none; } .ekbs-toast__close { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--theme-button-border-radius, 3px); background: transparent; color: color-mix(in srgb, var(--theme-palette-color-8) 75%, transparent); font-size: 16px; line-height: 1; cursor: pointer; } .ekbs-toast__close:hover { background: color-mix(in srgb, var(--theme-palette-color-8) 8%, transparent); color: var(--theme-palette-color-8); } /* 10. /favorites/ page ---------------------------------------------------- */ body:has(.ekbs-fav-page) .hero-section { display: none !important; } body:has(.ekbs-fav-page) .site-main > .ct-container { max-width: none !important; padding: 0 !important; } .ekbs-fav-page { background-color: var(--ekbf-bg); padding: 28px 24px 64px; font-family: var(--ekbf-font); color: var(--ekbf-fg); direction: rtl; text-align: right; } .ekbs-fav-page__wrap { max-width: var(--theme-normal-container-max-width, 1290px); margin-inline: auto; } .ekbs-fav-hero { background-color: var(--ekbf-card); border: 1px solid var(--ekbf-border); border-radius: var(--ekbf-radius-lg); box-shadow: var(--ekbf-shadow-sm); padding: 28px 30px; margin-bottom: 26px; } .ekbs-fav-hero__top { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 3px 10px; border-radius: var(--ekbf-radius-sm); background-color: var(--ekbf-mint); color: var(--ekbf-mint-ink); font-size: 11.5px; font-weight: 700; } .ekbs-fav-hero__title { margin: 0 0 6px; font-family: var(--ekbf-font-serif); font-size: 34px; line-height: 1.25; font-weight: 700; color: var(--ekbf-heading); } .ekbs-fav-hero__sub { margin: 0; max-width: 620px; font-size: 14px; line-height: 1.75; color: var(--ekbf-muted-fg); } .ekbs-fav-hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ekbf-border); } .ekbs-fav-hero__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ekbf-muted-fg); } .ekbs-fav-hero__count { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--ekbf-radius-sm); background-color: var(--ekbf-muted); border: 1px solid var(--ekbf-border); color: var(--ekbf-heading); font-weight: 700; } .ekbs-fav-hero__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ekbs-fav-shared { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 22px; border: 1px solid var(--theme-border-color); border-radius: var(--ekbf-radius-lg); background-color: var(--theme-palette-color-6); } .ekbs-fav-shared__icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 999px; background: var(--ekbf-mint); color: var(--ekbf-mint-ink); } .ekbs-fav-shared__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ekbs-fav-shared__body { flex: 1 1 auto; min-width: 0; } .ekbs-fav-shared__title { margin: 0 0 3px; font-size: 14.5px; line-height: 1.5; font-weight: 700; color: var(--ekbf-heading); } .ekbs-fav-shared__text { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--ekbf-muted-fg); } .ekbs-fav-shared__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } /* CSV restore confirmation — Blocksy native surface */ .ekbs-fav-shared--csv { border-color: var(--theme-border-color); background-color: var(--theme-palette-color-6); } .ekbs-fav-shared--csv .ekbs-fav-shared__icon { background: var(--theme-palette-color-8); color: var(--theme-link-initial-color); } .ekbs-fav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 198px)); justify-content: center; gap: 18px; } @media (max-width: 560px) { .ekbs-fav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 12px; } .ekbs-fav-page { padding-inline: 16px; } .ekbs-fav-hero { padding: 22px 18px; } .ekbs-fav-hero__title { font-size: 27px; } } .ekbs-fav-card { display: flex; flex-direction: column; min-width: 0; background-color: var(--ekbf-card); border: 1px solid var(--ekbf-border); border-radius: var(--ekbf-radius-lg); overflow: hidden; box-shadow: var(--ekbf-shadow-sm); transition: transform .16s var(--ekbf-ease), box-shadow .16s var(--ekbf-ease), border-color .16s var(--ekbf-ease); } .ekbs-fav-card:hover { transform: translateY(-2px); box-shadow: var(--ekbf-shadow-md); border-color: var(--ekbf-primary-hover); } .ekbs-fav-card__cover { position: relative; display: block; aspect-ratio: 3 / 4; background-color: var(--ekbf-muted); border-bottom: 1px solid var(--ekbf-border); overflow: hidden; } .ekbs-fav-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .ekbs-fav-card__body { display: flex; flex-direction: column; flex: 1; padding: 13px 14px 0; } .ekbs-fav-card__cat { margin-bottom: 4px; font-size: 11px; line-height: 1.4; font-weight: 600; color: var(--ekbf-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ekbs-fav-card__cat:empty { display: none; } .ekbs-fav-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 6px; font-family: var(--ekbf-font-serif); font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--ekbf-heading); } .ekbs-fav-card__title a { color: inherit; text-decoration: none; } .ekbs-fav-card__title a:hover { color: var(--ekbf-primary); } .ekbs-fav-card__author { margin: auto 0 0; padding-top: 8px; border-top: 1px solid var(--ekbf-border); font-size: 12px; line-height: 1.45; color: var(--ekbf-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ekbs-fav-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 14px 12px; } .ekbs-fav-card__open { display: inline-flex; align-items: center; gap: 5px; color: var(--ekbf-primary); font-size: 12px; font-weight: 700; text-decoration: none; } .ekbs-fav-card__open:hover { text-decoration: underline; text-underline-offset: 3px; } .ekbs-fav-card__remove { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--ekbf-border); border-radius: var(--theme-button-border-radius, 3px); background: var(--ekbf-bg); color: color-mix(in srgb, var(--theme-text-color) 70%, transparent); cursor: pointer; appearance: none; transition: background-color .15s var(--ekbf-ease), color .15s var(--ekbf-ease), border-color .15s var(--ekbf-ease); } .ekbs-fav-card__remove:hover { background: color-mix(in srgb, #d92d20 10%, var(--theme-palette-color-8)); border-color: color-mix(in srgb, #d92d20 25%, var(--theme-palette-color-8)); color: color-mix(in srgb, #d92d20 45%, var(--theme-text-color)); } .ekbs-fav-card__remove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ekbs-fav-card--missing { opacity: .78; border-style: dashed; } .ekbs-fav-card--missing .ekbs-fav-card__cover { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--ekbf-muted), var(--ekbf-muted) 8px, var(--ekbf-bg) 8px, var(--ekbf-bg) 16px); } .ekbs-fav-card--missing .ekbs-fav-card__cover::after { content: "غير متاح حاليًا"; font-size: 11.5px; color: var(--ekbf-muted-fg); } .ekbs-fav-card__note { margin: 0 0 4px; font-size: 11.5px; line-height: 1.6; color: var(--ekbf-muted-fg); } /* Page-level empty state */ .ekbs-fav-page .ekbs-empty { max-width: 420px; margin: 0 auto; } .ekbs-fav-note { max-width: 760px; margin: 26px 0 0; font-size: 11.5px; line-height: 1.85; color: var(--ekbf-muted-fg); } /* Print: turn the page into a clean reading list */ @media print { .ekbs-fav-hero__bar, .ekbs-fav-shared, .ekbs-fav-card__remove, .ekbs-fav-card__foot, .ekbs-drawer, .ekbs-toast-host, .ekbs-fav-trigger { display: none !important; } .ekbs-fav-page { padding: 0; background: var(--theme-palette-color-8); } .ekbs-fav-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .ekbs-fav-card { break-inside: avoid; box-shadow: none; } } /* 11. Reduced motion ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ekbs-drawer[open], .ekbs-toast, .ekbs-fav-trigger.is-bumping .ekbs-fav-badge, .ekbs-btn-save.is-just-saved .ekbs-btn-save__icon, .eka-save-btn.is-just-saved svg { animation: none !important; } .ekbf-btn, .eka-save-btn, .ekbs-btn-save, .ekbs-fav-trigger, .ekbs-fav-card { transition-duration: .01ms !important; } } /* ========================================================================== Unified Header & Offcanvas Glue — Suggest + Random Book + My Library Desktop (>= 1000px): logo + menu on the start side, three compact actions on the end side, zero wrapping. Mobile (< 1000px): clean top bar, every action becomes a full-width button inside the #offcanvas drawer. ========================================================================== */ .eka-book-card, .ekhs-book-card, .ekbs-rel-card { position: relative; } /* -------------------------------------------------------------------------- Desktop middle row: 2 columns (logo + menu | actions) Pre-hydration lock (:not([data-column-set="2"])) positions [data-column="start"] (logo) and [data-column="middle"] (menu) with the exact same 22px gap before arrangeDesktopHeader() runs, ensuring 0.000px CLS on Desktop header! -------------------------------------------------------------------------- */ #header { contain: layout style; } @media (min-width: 1000px) { #header [data-device="desktop"] [data-row="middle"] { height: var(--height, 72px) !important; min-height: var(--height, 72px) !important; max-height: var(--height, 72px) !important; } } #header [data-device="desktop"] [data-row="middle"]:not([data-column-set="2"]) > .ct-container-fluid, #header [data-device="desktop"] [data-row="middle"]:not([data-column-set="2"]) > .ct-container { display: grid !important; grid-template-columns: max-content minmax(max-content, 1fr) max-content !important; align-items: stretch !important; column-gap: 22px !important; } #header [data-device="desktop"] [data-row="middle"]:not([data-column-set="2"]) [data-column="middle"], #header [data-device="desktop"] [data-row="middle"]:not([data-column-set="2"]) [data-column="middle"] [data-items] { justify-content: flex-start !important; justify-items: start !important; } #header [data-device="desktop"] [data-row="middle"] [data-column="end"] [data-items="primary"] { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; height: 100%; min-width: 382px; } #header [data-device="desktop"] [data-row="middle"] [data-id="menu"] > ul { flex-wrap: nowrap; white-space: nowrap; } #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] > .ct-container-fluid, #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] > .ct-container { display: grid; /* The menu keeps at least its natural (no-wrap) width; free space goes to the start column. Prevents the hover-expanded dice button from clipping the last nav item at the 1000px edge case. */ grid-template-columns: minmax(max-content, 1fr) max-content; align-items: stretch; column-gap: 18px; } #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="middle"] { display: none !important; } #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="start"] { display: flex; align-items: stretch; justify-items: start; min-width: 0; } #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="end"] { display: flex; align-items: stretch; justify-items: end; min-width: 0; } #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="start"] [data-items="primary"] { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 22px; height: 100%; width: auto; min-width: 0; } #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="start"] [data-items="primary"] > *, #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="end"] [data-items="primary"] > * { margin: 0 !important; } #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="end"] [data-items="primary"] { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; height: 100%; width: auto; min-width: 382px; } #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="start"] [data-id="menu"], #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="start"] .ct-header-text, #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="end"] .ct-header-text { min-width: 0; } #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="start"] [data-id="menu"] > ul { flex-wrap: nowrap; white-space: nowrap; } @media (min-width: 1000px) and (max-width: 1299.98px) { #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="start"] [data-items="primary"] { gap: 14px; } #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] > .ct-container-fluid, #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] > .ct-container { column-gap: 12px; } /* Tighten the nav rhythm so logo + 7 menu items + 3 actions never wrap. */ #header [data-device="desktop"] [data-row="middle"] [data-id="menu"] { --menu-items-spacing: 14px; } #header [data-device="desktop"] [data-row="middle"] [data-id="menu"] .ct-menu-link, #header [data-device="desktop"] [data-row="middle"] [data-id="menu"] > ul > li > a { font-size: 13px; padding-inline: 5px; letter-spacing: 0; } } @media (min-width: 1000px) and (max-width: 1139.98px) { #header [data-device="desktop"] [data-row="middle"] [data-id="menu"] { --menu-items-spacing: 10px; } #header [data-device="desktop"] [data-row="middle"] [data-column="end"] [data-items="primary"], #header [data-device="desktop"] [data-row="middle"][data-column-set="2"] [data-column="end"] [data-items="primary"] { min-width: 356px; } #header [data-device="desktop"] [data-row="middle"] .ekbs-random-btn, #header [data-device="desktop"] [data-row="middle"] .ekbs-suggest-btn { padding-inline: 11px; font-size: 12.5px; } } /* -------------------------------------------------------------------------- Mobile top bar: intentionally untouched and uncluttered. -------------------------------------------------------------------------- */ @media (max-width: 999.98px) { #header [data-device="mobile"] [data-items] { gap: 6px; } #header [data-device="mobile"] .ekbs-fav-trigger, #header [data-device="mobile"] .ekbs-suggest-wrap, #header [data-device="mobile"] .ekbs-random-wrap { display: none !important; } } /* -------------------------------------------------------------------------- Offcanvas drawer: three stacked full-width Blocksy buttons (suggest = filled .ct-button, random + library = .ct-button-ghost) -------------------------------------------------------------------------- */ #offcanvas .ekbs-suggest-wrap, #offcanvas .ekbs-random-wrap { display: flex; width: 100% !important; max-width: none; margin: 0 0 10px !important; padding: 0 !important; } #offcanvas .ekbs-fav-offcanvas { display: flex; width: 100% !important; max-width: none; margin: 0 0 20px !important; } #offcanvas .ekbs-suggest-btn, #offcanvas .ekbs-random-btn, #offcanvas .ekbs-fav-offcanvas { width: 100%; min-height: 44px; box-sizing: border-box; border-radius: var(--theme-button-border-radius, 3px); font-size: var(--theme-button-font-size, 15px); font-weight: var(--theme-button-font-weight, 500); } #offcanvas .ekbs-random-btn, #offcanvas .ekbs-suggest-btn { justify-content: center; gap: var(--theme-button-gap, 0.5em); padding: 8px 18px; } #offcanvas .ekbs-random-btn .ekbs-label--long { display: inline-block !important; max-width: none !important; opacity: 1 !important; overflow: visible; margin-inline-start: 0 !important; } #offcanvas .ekbs-random-btn .ekbs-label--short, #offcanvas .ekbs-suggest-btn .ekbs-label--short { display: none !important; } #offcanvas .ekbs-suggest-btn .ekbs-label--long { display: inline-block !important; } /* Hide duplicate Blocksy page title hero on /favorites/ since .ekbs-fav-hero renders the H1 */ body.page .entry-header:has(+ .entry-content .ekbs-fav-page), body.page:has(.ekbs-fav-page) .hero-section { display: none !important; } /* Same for /suggest/ — .ekbs-rec-hero renders its own H1 */ body.page .entry-header:has(+ .entry-content .ekbs-rec-page), body.page:has(.ekbs-rec-page) .hero-section { display: none !important; } /* EKBS_BLOCKSY_BUTTONS_START */ /* -------------------------------------------------------------------------- Blocksy filled button — .ct-button parity -------------------------------------------------------------------------- */ .ekbs-btn-download, .ekhs-btn-primary, .ekbs-rec-btn--primary, .ekbs-rec-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--theme-button-min-height, 40px); padding: var(--theme-button-padding, 5px 20px); border: var(--theme-button-border, none); border-radius: var(--theme-button-border-radius, 3px); font-family: var(--theme-button-font-family, var(--theme-font-family)); font-size: var(--theme-button-font-size, 15px); font-weight: var(--theme-button-font-weight, 500); line-height: var(--theme-button-line-height, 1.3); color: var(--theme-button-text-initial-color, #ffffff); background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); text-decoration: none; transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .ekbs-btn-download:hover, .ekbs-btn-download:focus-visible, .ekhs-btn-primary:hover, .ekhs-btn-primary:focus-visible, .ekbs-rec-btn--primary:hover, .ekbs-rec-btn--primary:focus-visible, .ekbs-rec-card__cta:hover, .ekbs-rec-card__cta:focus-visible { color: var(--theme-button-text-hover-color, #ffffff); background-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); border-color: var(--theme-button-border-hover-color, transparent); } /* Compact archive-card mini CTA — same native tokens, GreenShift uses !important in its element CSS so this companion rule does too. */ .eka-mini-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: var(--theme-button-min-height, 34px) !important; padding: 6px 14px !important; border: var(--theme-button-border, none) !important; border-radius: var(--theme-button-border-radius, 3px) !important; font-family: var(--theme-button-font-family, var(--theme-font-family)) !important; font-size: var(--theme-button-font-size, 13px) !important; font-weight: var(--theme-button-font-weight, 500) !important; line-height: var(--theme-button-line-height, 1.3) !important; color: var(--theme-button-text-initial-color, #ffffff) !important; background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)) !important; text-decoration: none !important; transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955) !important; } .eka-mini-btn:hover, .eka-mini-btn:focus-visible { color: var(--theme-button-text-hover-color, #ffffff) !important; background-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)) !important; border-color: var(--theme-button-border-hover-color, transparent) !important; } /* -------------------------------------------------------------------------- Blocksy ghost button — .ct-button-ghost parity -------------------------------------------------------------------------- */ .ekbs-btn-outline, .ekhs-btn-outline, .ekbs-rec-btn--ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--theme-button-min-height, 40px); padding: var(--theme-button-padding, 5px 20px); border-width: 2px; border-style: solid; border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); border-radius: var(--theme-button-border-radius, 3px); background-color: transparent; color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); font-family: var(--theme-button-font-family, var(--theme-font-family)); font-size: var(--theme-button-font-size, 15px); font-weight: var(--theme-button-font-weight, 500); line-height: var(--theme-button-line-height, 1.3); text-decoration: none; transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .ekbs-btn-outline:hover, .ekbs-btn-outline:focus-visible, .ekhs-btn-outline:hover, .ekhs-btn-outline:focus-visible, .ekbs-rec-btn--ghost:hover, .ekbs-rec-btn--ghost:focus-visible { color: var(--theme-button-text-hover-color, #ffffff); border-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); background-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); } /* -------------------------------------------------------------------------- /suggest/ filters + presets — crisp Blocksy 3px chips, not 999px pills -------------------------------------------------------------------------- */ .ekbs-rec-filter { border-radius: var(--theme-button-border-radius, 3px); border-color: var(--theme-border-color, var(--theme-palette-color-5, #E6F0EE)); background: transparent; color: var(--theme-text-color, var(--theme-button-background-initial-color, var(--theme-palette-color-1))); font-family: var(--theme-button-font-family, var(--theme-font-family)); font-weight: var(--theme-button-font-weight, 500); transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .ekbs-rec-filter:hover { border-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); } .ekbs-rec-filter[aria-pressed="true"] { background: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-button-text-initial-color, #ffffff); } .ekbs-rec-preset { border-radius: var(--theme-button-border-radius, 3px); border-color: var(--theme-border-color, var(--theme-palette-color-5, #E6F0EE)); background: transparent; color: var(--theme-text-color, var(--theme-button-background-initial-color, var(--theme-palette-color-1))); font-family: var(--theme-button-font-family, var(--theme-font-family)); font-weight: var(--theme-button-font-weight, 500); transition: all .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .ekbs-rec-preset:hover { background: var(--theme-palette-color-5, #E6F0EE); border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); } /* EKBS_BLOCKSY_BUTTONS_END */ /* EKBS_FEATURES_CSS_END */ /* EKBS_REDESIGN_CSS_START */ /* ========================================================================== ekitabs.com — 6-Concept Editorial Design & UX System (100% Blocksy Native) + Core Web Vitals Zero-CLS Stabilization Layer ========================================================================== */ /* 0B. Core Web Vitals CLS Shell Lock: 1. Prevents unreserved top-of-page Google Auto Ads injection between #header and #main from pushing #main down by 300-410px (0.19-0.44 CLS on 100% of pages), while keeping all Auto Ads 100% visible below #main (order: 3). 2. Ensures #main reserves at least 100vh - 73px so #footer never starts inside the above-the-fold viewport on short pages (/writer/*, /favorites/, /404). */ #main-container { display: flex !important; flex-direction: column !important; overflow-x: clip; } #main-container > #header { order: 1 !important; flex-shrink: 0; } #main-container > #main { order: 2 !important; flex: 1 0 auto; min-height: calc(100vh - 73px); } #main-container > .google-auto-placed { order: 3 !important; } .google-auto-placed { max-width: 100%; overflow-x: clip; } #main-container > #footer { order: 4 !important; flex-shrink: 0; } ins.adsbygoogle[data-anchor-status], ins.adsbygoogle.adsbygoogle-noablate { transition: none !important; animation: none !important; } ins.adsbygoogle.adsbygoogle-noablate[style*="position: fixed"], ins.adsbygoogle[data-anchor-status][style*="position: fixed"] { top: auto !important; bottom: 0px !important; } /* Prevent Homepage spotlight cover from shifting vertically when text wraps */ .ekhs-spotlight { align-items: flex-start !important; } .ekhs-spotlight-cover-wrap { width: 112px !important; height: 149px !important; aspect-ratio: 3 / 4 !important; flex-shrink: 0 !important; } /* Pre-hydration reservations for streaming HTML edge cases Note: 1. On body.blog, there is NO native .hero-section before .entries, so we use padding-top on section:not(:has(.ekrd-tax-hub)) so section itself stays at y=96! 2. On body.category & body.tag, .hero-section IS inside section BEFORE .entries! Reserving margin-top on > .entries keeps .hero-section stationary at y=96 while holding .entries at its exact post-hydration Y coordinate. */ body.blog .site-main > .ct-container > section:not(:has(.ekrd-tax-hub)) { padding-top: 466px; } body.category .site-main > .ct-container > section:not(:has(.ekrd-tax-hub)) > .entries, body.tag .site-main > .ct-container > section:not(:has(.ekrd-tax-hub)) > .entries { margin-top: 219px; } body.tax-writer .site-main > .ct-container > section:not(:has(#writer-books-section)) > .entries { margin-top: 238px; } @media (min-width: 690px) { body.category .hero-section[data-type="type-1"] .page-description, body.tag .hero-section[data-type="type-1"] .page-description, body.tax-cats .hero-section[data-type="type-1"] .page-description { min-height: 52.5px; } } @media (min-width: 1000px) { .ekrd-blog-hero { min-height: 247px; } .ekrd-tax-hub { min-height: 165px; } } @media (max-width: 689.98px) { body.category .hero-section[data-type="type-1"] .page-description, body.tag .hero-section[data-type="type-1"] .page-description, body.tax-cats .hero-section[data-type="type-1"] .page-description { min-height: 105px; } body.blog .site-main > .ct-container > section:not(:has(.ekrd-tax-hub)) { padding-top: 759px; } body.category .site-main > .ct-container > section:not(:has(.ekrd-tax-hub)) > .entries, body.tag .site-main > .ct-container > section:not(:has(.ekrd-tax-hub)) > .entries { margin-top: 480px; } body.tax-writer .site-main > .ct-container > section:not(:has(#writer-books-section)) > .entries { margin-top: 560px; } } body.search .site-main:not(:has(.ekrd-search-tabs-bar)) .entries { margin-top: 114px; } @media (max-width: 689.98px) { body.search .site-main:not(:has(.ekrd-search-tabs-bar)) .entries { margin-top: 210px; } } body.search .entries > article:not(:has(.eka-book-card)):not(:has(.ekrd-search-type-badge))::before { content: ""; display: inline-flex; align-self: flex-start; height: 24.1px; margin-bottom: 20px; } body.single-post .entry-header:not(:has(.ekrd-breadcrumbs))::before { content: ""; display: block; height: 20px; margin-bottom: 14px; } body.single-post .entry-header ul.entry-meta { min-height: 28px; align-items: center; } @media (max-width: 689.98px) { body.single-post .entry-header ul.entry-meta { min-height: 43px; align-content: flex-start; } } body.tax-writer .ekrd-guide-bridge { margin-top: 26px; } .ekbs-fav-page [data-ekbs-page-grid]:empty + [data-ekbs-page-empty]:empty { display: block; min-height: 258px; } @media (max-width: 689.98px) { .ekbs-fav-hero__meta { min-height: 62px; align-content: flex-start; } } @media (min-width: 1140px) { body.post-type-archive-book .eka-chip, body.tax-cats .eka-chip { padding-inline: 10px !important; white-space: nowrap; } .ekrd-tax-row--tags { flex-wrap: nowrap !important; white-space: nowrap; min-height: 40px; } .ekrd-tax-row--tags .ekrd-tag-chip { padding-inline: 9px; white-space: nowrap; } } @media (max-width: 689.98px) { body.post-type-archive-book .eka-chips-list, body.tax-cats .eka-chips-list { align-content: flex-start; } body.tax-writer .eka-chips-list, .ekrd-tax-row--tags { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } body.tax-writer .eka-chips-label, .ekrd-tax-row--tags .ekrd-row-label { grid-column: 1 / -1; } body.tax-writer .eka-chip, .ekrd-tax-row--tags .ekrd-tag-chip { justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .eka-mini-search { width: 320px !important; max-width: 100% !important; flex-shrink: 0; } .eka-mini-search .eka-mini-input { flex: 1 1 auto !important; min-width: 0 !important; } .eka-mini-search .eka-mini-btn { flex-shrink: 0 !important; } .ekrd-inline-search { width: 292px; max-width: 100%; flex-shrink: 0; } .ekrd-inline-search input[type="search"] { flex: 1 1 auto; min-width: 0 !important; } .ekrd-inline-search button.ct-button { flex-shrink: 0; } @media (max-width: 689.98px) { .eka-mini-search, .ekrd-inline-search { width: 100% !important; } } .ekbs-rec-presets:empty { min-height: 36px; } /* 0C. Strict Blocksy Default Font Inheritance Across All UI & Form Controls */ body, h1, h2, h3, h4, h5, h6, .page-title, .entry-title, .widget-title, blockquote, blockquote p, blockquote cite { font-family: var(--theme-font-family); } input, select, textarea { font-family: var(--theme-form-font-family, var(--theme-font-family)); } button, input[type="button"], input[type="submit"], input[type="reset"], .ct-button, .ct-button-ghost { font-family: var(--theme-button-font-family, var(--theme-font-family)); direction: rtl; } .ct-button:has(svg), .ct-button-ghost:has(svg), .ekbs-btn-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; direction: rtl; } aside.ekbs-action-card .ekbs-btn-download { display: flex; width: 100%; gap: 9px; } .ekrd-lucide { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; margin: 0 !important; } /* -------------------------------------------------------------------------- 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; } .ekrd-bc-sep { color: var(--theme-text-color); opacity: 0.6; font-size: 12px; flex-shrink: 0; } .ekrd-bc-cur { color: var(--theme-text-color); opacity: 0.85; min-width: 0; flex: 0 1 auto; max-width: 460px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 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-tag-pill { display: inline-flex; align-items: center; padding: 5px 12px; 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) !important; font-family: var(--theme-font-family); font-size: 13px; line-height: 1.4; font-weight: 600; text-decoration: none !important; transition: all 0.15s ease; } .ekrd-tag-pill:hover { background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-button-text-initial-color, #ffffff) !important; } .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-blog-hero { background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 12px; padding: 28px 32px; margin-bottom: 18px; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); } .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; } .ekrd-blog-hero .page-title { font-family: var(--theme-font-family) !important; font-size: 30px !important; line-height: 1.35 !important; font-weight: 700 !important; color: var(--theme-headings-color) !important; margin: 0 0 8px 0 !important; } .ekrd-blog-hero .page-description { font-size: 15px; line-height: 1.75; color: var(--theme-text-color); max-width: 820px; margin: 0; } .ekrd-tax-hub { background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 12px; padding: 18px 22px; margin-bottom: 26px; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); display: flex; flex-direction: column; gap: 14px; } .ekrd-tax-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .ekrd-tax-row--tags { padding-top: 12px; border-top: 1px solid var(--theme-border-color); justify-content: flex-start; gap: 7px; } .ekrd-pills-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ekrd-row-label { font-size: 12.5px; line-height: 1.4; font-weight: 700; color: var(--theme-headings-color); margin-left: 4px; } .ekrd-cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; 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-font-family); font-size: 13.5px; line-height: 1.4; font-weight: 600; text-decoration: none !important; transition: all 0.15s ease; } .ekrd-cat-pill:hover { border-color: var(--theme-palette-color-1); background-color: var(--theme-palette-color-6); } .ekrd-cat-pill.is-active { background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-button-text-initial-color, #ffffff) !important; } .ekrd-tag-chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--theme-button-border-radius, 3px); background-color: var(--theme-palette-color-6); border: 1px solid transparent; color: var(--theme-text-color) !important; font-family: var(--theme-font-family); font-size: 12.5px; line-height: 1.4; font-weight: 500; text-decoration: none !important; transition: all 0.15s ease; } .ekrd-tag-chip:hover { border-color: var(--theme-palette-color-1); color: var(--theme-link-initial-color) !important; } .ekrd-tag-chip.is-active { background-color: var(--theme-palette-color-8); border-color: var(--theme-palette-color-1); color: var(--theme-link-initial-color) !important; font-weight: 700; } .ekrd-inline-search { display: flex; align-items: center; gap: 6px; } .ekrd-inline-search input[type="search"] { min-width: 220px; height: 38px; padding: 6px 12px; border: 1px solid var(--theme-form-field-border-initial-color, var(--theme-border-color)); border-radius: var(--theme-form-border-radius, 3px); background-color: var(--theme-palette-color-7); font-family: var(--theme-form-font-family, var(--theme-font-family)); font-size: 13px; color: var(--theme-form-text-initial-color, var(--theme-headings-color)); } .ekrd-inline-search input[type="search"]:focus { outline: none; border-color: var(--theme-form-field-border-focus-color, var(--theme-palette-color-1)); background-color: var(--theme-palette-color-8); } .ekrd-inline-search button.ct-button { min-height: 38px; height: 38px; padding: 0 16px; font-size: 13.5px; } /* -------------------------------------------------------------------------- CONCEPT 3 & 4: Writer-to-Guide Banner + Single Book Companion Callout & 5-Book Shelf -------------------------------------------------------------------------- */ .ekrd-chip-count { display: inline-block; font-size: 11px; line-height: 1.2; padding: 1px 6px; margin-right: 4px; border-radius: 999px; background-color: var(--theme-palette-color-6); color: inherit; opacity: 0.9; } .eka-chip-active .ekrd-chip-count, .ekrd-cat-pill.is-active .ekrd-chip-count { background-color: color-mix(in srgb, var(--theme-button-text-initial-color) 22%, transparent); opacity: 1; } body.tax-writer .hero-section[data-type="type-1"] .entry-header { margin: 0 !important; padding: 0 !important; width: 100% !important; } body.tax-writer .hero-section .eka-writer-monogram { display: none !important; } body.tax-writer .hero-section .eka-injected-toolbar { display: none !important; } /* Author Dossier Breadcrumb Trail */ .ekrd-writer-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--theme-text-color); margin-bottom: 16px; } .ekrd-writer-breadcrumbs a { color: var(--theme-link-initial-color); text-decoration: none; font-weight: 500; } .ekrd-writer-breadcrumbs a:hover { color: var(--theme-link-hover-color); text-decoration: underline; } .ekrd-writer-breadcrumbs .ekrd-bc-sep { color: var(--theme-border-color); font-size: 11px; } .ekrd-writer-breadcrumbs .ekrd-bc-current { color: var(--theme-headings-color); font-weight: 600; } /* Top Breadcrumb & Dossier Header Row (.ekrd-writer-top-row) */ .ekrd-writer-top-row { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; } .ekrd-writer-monogram { width: 56px; height: 56px; min-width: 56px; border-radius: 12px; background-color: var(--theme-palette-color-1); color: var(--theme-button-text-initial-color, #ffffff); display: flex; align-items: center; justify-content: center; font-family: var(--theme-font-family); font-size: 26px; font-weight: 700; line-height: 1; user-select: none; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.08)); flex-shrink: 0; } .ekrd-writer-title-block { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; min-width: 0; } .ekrd-writer-kicker { display: inline-flex; align-items: center; font-size: 12px; line-height: 1.4; font-weight: 700; color: var(--theme-palette-color-1); background-color: var(--theme-palette-color-6); border: 1px solid var(--theme-border-color); padding: 2px 8px; border-radius: var(--theme-button-border-radius, 4px); } /* Author Metadata & Quick-Jump Pills Bar (.ekrd-writer-meta-bar) */ .ekrd-writer-meta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; margin-bottom: 8px; } .ekrd-writer-meta-pill { display: inline-flex; align-items: center; gap: 6px; direction: rtl; padding: 6px 12px; border-radius: 999px; background-color: var(--theme-palette-color-7); border: 1px solid var(--theme-border-color); color: var(--theme-headings-color) !important; font-family: var(--theme-font-family); font-size: 12.5px; line-height: 1.4; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: all 0.15s ease; } .ekrd-writer-count-pill { cursor: default; } .ekrd-writer-cat-pill:hover { border-color: var(--theme-palette-color-1); background-color: var(--theme-palette-color-6); color: var(--theme-link-initial-color) !important; } .ekrd-writer-cat-pill.is-active { background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-button-text-initial-color, #ffffff) !important; } .ekrd-writer-jump-pill { background-color: var(--theme-palette-color-6); border-color: var(--theme-palette-color-1); color: var(--theme-palette-color-1) !important; font-weight: 700; } .ekrd-writer-jump-pill:hover { background-color: var(--theme-palette-color-1); border-color: var(--theme-palette-color-1); color: var(--theme-button-text-initial-color, #ffffff) !important; } body.archive.tax-writer .hero-section[data-type="type-1"] .page-description p, body.tax-writer .hero-section .page-description p { margin: 0 0 12px 0 !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; } body.archive.tax-writer .hero-section[data-type="type-1"] .page-description p:last-child, body.tax-writer .hero-section .page-description p:last-child { margin-bottom: 0 !important; } /* Books Grid Interactive Filter, Sort & Search Hub (#writer-books-section) */ .ekrd-writer-section-head { background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); scroll-margin-top: 80px; } .ekrd-writer-head-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--theme-border-color); } .ekrd-writer-section-title { 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: 0 !important; } .ekrd-writer-live-count { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; 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: 700; } .ekrd-writer-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .ekrd-writer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ekrd-writer-sort-group { display: inline-flex; align-items: center; gap: 6px; } .ekrd-writer-filter-chip, .ekrd-writer-sort-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--theme-button-border-radius, 4px); background-color: var(--theme-palette-color-7); border: 1px solid var(--theme-border-color); color: var(--theme-headings-color) !important; font-family: var(--theme-font-family); font-size: 13px; line-height: 1.4; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } .ekrd-writer-filter-chip:hover, .ekrd-writer-sort-btn:hover { border-color: var(--theme-palette-color-1); background-color: var(--theme-palette-color-6); } .ekrd-writer-filter-chip.is-active, .ekrd-writer-sort-btn.is-active { background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-button-text-initial-color, #ffffff) !important; } .ekrd-writer-search input.ekrd-writer-search-input { min-width: 210px; height: 36px; padding: 6px 12px; border: 1px solid var(--theme-form-field-border-initial-color, var(--theme-border-color)); border-radius: var(--theme-form-border-radius, 4px); background-color: var(--theme-palette-color-7); font-family: var(--theme-form-font-family, var(--theme-font-family)); font-size: 13px; color: var(--theme-form-text-initial-color, var(--theme-headings-color)); transition: border-color 0.15s ease, background-color 0.15s ease; } .ekrd-writer-search input.ekrd-writer-search-input:focus { outline: none; border-color: var(--theme-form-field-border-focus-color, var(--theme-palette-color-1)); background-color: var(--theme-palette-color-8); } /* Empty Filter Recovery State inside #writer-books-section */ .ekrd-writer-empty-filter { display: none; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 18px; border-radius: 8px; background-color: var(--theme-palette-color-7); border: 1px dashed var(--theme-border-color); color: var(--theme-text-color); font-family: var(--theme-font-family); font-size: 14px; } .ekrd-writer-empty-filter.is-visible { display: flex; } .ekrd-writer-reset-btn { min-height: 34px !important; padding: 5px 14px !important; font-size: 12.5px !important; } /* CRITICAL SPECIFICITY FIX: Beats body[data-prefix="book_archive"] .entries > article.book { display: flex !important; } */ body[data-prefix="book_archive"] .entries > article.book.ekrd-writer-book-hidden, body.tax-writer .entries > article.ekrd-writer-book-hidden, .entries > article.ekrd-writer-book-hidden, .ekrd-writer-book-hidden { display: none !important; } /* Related Analytical Blog Guides & Summaries (#writer-guides-section) */ .ekrd-writer-guides-section { margin-top: 26px; margin-bottom: 24px; scroll-margin-top: 80px; } .ekrd-writer-guides-section .ekrd-guide-bridge { margin-top: 0; margin-bottom: 0; } .ekrd-writer-guides-grid { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; } .ekrd-writer-guides-heading { font-family: var(--theme-font-family) !important; font-size: 18px !important; line-height: 1.45 !important; font-weight: 700 !important; color: var(--theme-headings-color) !important; margin: 0 !important; } .ekrd-writer-guides-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .ekrd-writer-guide-card { background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; text-decoration: none !important; } .ekrd-writer-guide-card:hover { transform: translateY(-2px); border-color: var(--theme-palette-color-1); } .ekrd-writer-guide-card__thumb { display: block; width: 100%; aspect-ratio: 16 / 9; background-color: var(--theme-palette-color-6); overflow: hidden; } .ekrd-writer-guide-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ekrd-writer-guide-card__body { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; } .ekrd-writer-guide-card__badge { 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 7px; border-radius: var(--theme-button-border-radius, 3px); } .ekrd-writer-guide-card__title { font-family: var(--theme-font-family) !important; font-size: 15.5px !important; line-height: 1.5 !important; font-weight: 700 !important; color: var(--theme-headings-color) !important; margin: 0 !important; } .ekrd-writer-guide-card__cta { margin-top: auto; font-size: 12.5px; line-height: 1.4; font-weight: 600; color: var(--theme-link-initial-color); } @media (max-width: 768px) { .ekrd-writer-top-row { gap: 14px; } .ekrd-writer-monogram { width: 48px; height: 48px; min-width: 48px; font-size: 22px; border-radius: 10px; } .ekrd-writer-meta-bar { gap: 6px; } .ekrd-writer-meta-pill { font-size: 11.5px; padding: 5px 10px; } .ekrd-writer-section-head { padding: 16px 18px; } .ekrd-writer-section-title { font-size: 17px !important; } .ekrd-writer-filter-chip, .ekrd-writer-sort-btn { font-size: 12px; padding: 5px 10px; } .ekrd-writer-controls, .ekrd-writer-search, .ekrd-writer-search input.ekrd-writer-search-input { width: 100%; } .ekrd-writer-guides-cards { grid-template-columns: 1fr; gap: 12px; } } .ekrd-guide-bridge { background-color: var(--theme-palette-color-6); border: 1px solid var(--theme-border-color); border-right: 4px solid var(--theme-palette-color-1); border-radius: 12px; padding: 20px 26px; margin-bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); } .ekbs-companion-slot { max-width: var(--theme-normal-container-max-width, 1290px); width: var(--theme-container-width, 90vw); margin: 12px auto 28px auto; } .ekbs-companion-slot:empty { display: none; margin: 0; } .ekrd-guide-bridge__info { max-width: 760px; } .ekrd-guide-bridge__badge { display: inline-flex; align-items: center; gap: 7px; direction: rtl; padding: 3px 10px; border-radius: var(--theme-button-border-radius, 3px); background-color: var(--theme-palette-color-8); 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: 8px; } .ekrd-guide-bridge__title { font-family: var(--theme-font-family); font-size: 20px; line-height: 1.45; font-weight: 700; color: var(--theme-headings-color); margin: 0 0 4px 0; } .ekrd-guide-bridge__sub { font-size: 13.5px; line-height: 1.65; color: var(--theme-text-color); margin: 0; } .ekrd-guide-bridge__cta.ct-button { white-space: nowrap; } /* Single Book 5-column related books shelf */ .ekrd-5col-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .ekrd-5col-shelf .ekbs-rel-card { position: relative; background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .ekrd-5col-shelf .ekbs-rel-card:hover { transform: translateY(-2px); border-color: var(--theme-palette-color-2); } .ekrd-5col-shelf .ekbs-rel-cover-link { display: block; width: 100%; aspect-ratio: 2 / 3; background-color: var(--theme-palette-color-6); overflow: hidden; border-bottom: 1px solid var(--theme-border-color); } .ekrd-5col-shelf .ekbs-rel-cover { width: 100%; height: 100%; object-fit: cover; display: block; } .ekrd-5col-shelf .ekbs-rel-body { padding: 12px 14px 14px 14px; display: flex; flex-direction: column; flex: 1; } .ekrd-5col-shelf .ekbs-rel-cat { align-self: flex-start; font-size: 11px; line-height: 1.35; font-weight: 700; color: var(--theme-link-initial-color); background-color: var(--theme-palette-color-6); border: 1px solid var(--theme-border-color); border-radius: var(--theme-button-border-radius, 3px); padding: 2px 7px; margin-bottom: 7px; } .ekrd-5col-shelf .ekbs-rel-title { font-family: var(--theme-font-family); font-size: 16px; line-height: 1.45; font-weight: 700; margin: 0 0 6px 0; } .ekrd-5col-shelf .ekbs-rel-title a { color: var(--theme-headings-color) !important; text-decoration: none !important; } .ekrd-5col-shelf .ekbs-rel-title a:hover { color: var(--theme-link-hover-color) !important; } .ekrd-5col-shelf .ekbs-rel-writer { margin: auto 0 0 0; font-size: 12.5px; line-height: 1.45; color: var(--theme-text-color); } @media (max-width: 1024px) { .ekrd-5col-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .ekrd-5col-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } /* -------------------------------------------------------------------------- CONCEPT 5: Tabbed Search (body.search) & Smart 404 / Empty Results -------------------------------------------------------------------------- */ body.search { background-color: var(--theme-palette-color-7); } body.search .hero-section[data-type="type-1"] { background-color: var(--theme-palette-color-8) !important; border: 1px solid var(--theme-border-color) !important; border-radius: 12px !important; padding: 26px 30px !important; margin-bottom: 18px !important; text-align: right !important; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)) !important; } body.search .hero-section[data-type="type-1"] .page-title { font-family: var(--theme-font-family) !important; font-size: 30px !important; line-height: 1.35 !important; color: var(--theme-headings-color) !important; margin: 0 !important; } .ekrd-search-tabs-bar { background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 12px; padding: 16px 22px; margin-bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); } .ekrd-search-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ekrd-search-tab { display: inline-flex; align-items: center; gap: 7px; direction: rtl; padding: 8px 16px; 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-font-family); font-size: 13.5px; line-height: 1.4; font-weight: 600; text-decoration: none !important; transition: all 0.15s ease; } .ekrd-search-tab:hover { border-color: var(--theme-palette-color-1); } .ekrd-search-tab.is-active { background-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); color: var(--theme-button-text-initial-color, #ffffff) !important; } body.search .entries { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; } body.search.ekrd-search-books-only .entries { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } body.search .entries > article { background-color: var(--theme-palette-color-8) !important; border: 1px solid var(--theme-border-color) !important; border-radius: 10px !important; padding: 18px 20px !important; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)) !important; display: flex !important; flex-direction: column !important; } body.search .entries > article.book:has(.eka-book-card) { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } body.search .entries > article .entry-title { font-family: var(--theme-font-family) !important; font-size: 18px !important; line-height: 1.45 !important; margin: 8px 0 10px 0 !important; } .ekrd-search-type-badge { display: inline-flex; align-items: center; gap: 6px; direction: rtl; align-self: flex-start; padding: 3px 9px; border-radius: var(--theme-button-border-radius, 3px); font-size: 11.5px; line-height: 1.4; font-weight: 700; margin-bottom: 6px; background-color: var(--theme-palette-color-6); border: 1px solid var(--theme-border-color); color: var(--theme-link-initial-color); } @media (max-width: 960px) { body.search .entries, body.search.ekrd-search-books-only .entries { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { body.search .entries { grid-template-columns: 1fr !important; } } /* Smart 404 & Empty Search Recovery Card */ .ekrd-recovery-card { max-width: 880px; margin: 0 auto 48px auto; background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 12px; padding: 40px 36px; text-align: center; box-shadow: var(--theme-box-shadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04)); } .ekrd-recovery-code { display: inline-flex; align-items: center; padding: 5px 14px; 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: 13px; line-height: 1.4; font-weight: 700; margin-bottom: 14px; } .ekrd-recovery-title { font-family: var(--theme-font-family); font-size: 30px; line-height: 1.4; font-weight: 700; color: var(--theme-headings-color); margin: 0 0 10px 0; } .ekrd-recovery-sub { font-size: 15.5px; line-height: 1.8; color: var(--theme-text-color); max-width: 620px; margin: 0 auto 24px auto; } .ekrd-recovery-search { display: flex; gap: 8px; max-width: 560px; margin: 0 auto 24px auto; } .ekrd-recovery-search input[type="search"] { flex: 1; height: 44px; padding: 0 16px; border: 1px solid var(--theme-form-field-border-initial-color, var(--theme-border-color)); border-radius: var(--theme-form-border-radius, 3px); background-color: var(--theme-palette-color-7); color: var(--theme-form-text-initial-color, var(--theme-headings-color)); font-family: var(--theme-form-font-family, var(--theme-font-family)); font-size: 14.5px; } .ekrd-recovery-search input[type="search"]:focus { outline: none; border-color: var(--theme-form-field-border-focus-color, var(--theme-palette-color-1)); background-color: var(--theme-palette-color-8); } .ekrd-recovery-search button.ct-button { min-height: 44px; height: 44px; padding: 0 22px; } .ekrd-recovery-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; } .ekrd-rec-action-btn, .ekrd-pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; direction: rtl; } .ekrd-recovery-cats { padding-top: 20px; border-top: 1px solid var(--theme-border-color); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } /* -------------------------------------------------------------------------- CONCEPT 6: Native Blocksy Pre-Footer Discovery Banner + 4-Column Footer (100% Blocksy --theme-palette-color-* tokens -> Light & Dark Mode Ready) -------------------------------------------------------------------------- */ footer#footer.ekrd-footer-upgraded > [data-row] { display: none !important; } footer#footer.ct-footer.ekrd-footer-upgraded { background-color: var(--theme-palette-color-6) !important; color: var(--theme-text-color) !important; border-top: 1px solid var(--theme-border-color) !important; margin-top: 40px; direction: rtl; text-align: right; } .ekrd-prefooter { background-color: var(--theme-palette-color-8); border-bottom: 1px solid var(--theme-border-color); padding: 28px 0; } body.page-id-2424 .ekrd-prefooter { display: none; } .ekrd-prefooter-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .ekrd-prefooter-title { font-family: var(--theme-font-family); font-size: 22px; line-height: 1.4; font-weight: 700; color: var(--theme-headings-color); margin: 0 0 4px 0; } .ekrd-prefooter-sub { font-size: 14px; line-height: 1.7; color: var(--theme-text-color); margin: 0; } .ekrd-prefooter-btns { display: flex; flex-wrap: wrap; gap: 10px; } .ekrd-footer-main { padding-top: 44px; padding-bottom: 36px; display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 34px; } .ekrd-footer-brand-name { font-family: var(--theme-font-family); font-size: 22px; line-height: 1.35; font-weight: 700; color: var(--theme-headings-color); margin: 0 0 12px 0; } .ekrd-footer-brand-desc { font-size: 13.5px; line-height: 1.85; color: var(--theme-text-color); margin: 0 0 14px 0; } .ekrd-footer-col-title { font-family: var(--theme-font-family); font-size: 16.5px; line-height: 1.4; font-weight: 700; color: var(--theme-headings-color); margin: 0 0 14px 0; padding-bottom: 8px; border-bottom: 1px solid var(--theme-border-color); } .ekrd-footer-links { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 9px; } .ekrd-footer-links a { color: var(--theme-text-color) !important; font-size: 13.5px; line-height: 1.5; text-decoration: none !important; transition: color 0.15s ease; } .ekrd-footer-links a:hover { color: var(--theme-link-hover-color) !important; text-decoration: underline !important; } .ekrd-footer-bottom { border-top: 1px solid var(--theme-border-color); padding: 20px 0; background-color: var(--theme-palette-color-7); } .ekrd-footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-size: 12.5px; line-height: 1.7; color: var(--theme-text-color); } .ekrd-footer-bottom-inner a { color: var(--theme-link-initial-color) !important; text-decoration: underline !important; font-weight: 600; } .ekrd-footer-bottom-inner a:hover { color: var(--theme-link-hover-color) !important; } @media (max-width: 960px) { .ekrd-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } } @media (max-width: 580px) { .ekrd-footer-main { grid-template-columns: 1fr; } } /* ========================================================================== 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-book-fact-card .ekrd-lucide { flex-shrink: 0; vertical-align: middle; margin: 0 !important; } .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-kicker .ekrd-lucide { color: var(--theme-palette-color-1); } .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; } } /* ========================================================================== Task #2: In-Browser Reader Modal (.ekrd-reader-modal) & Preview Action Button Clean RTL CSS using 100% Blocksy theme CSS custom properties. ========================================================================== */ .ekrd-lucide { display: inline-block; vertical-align: middle; flex-shrink: 0; margin: 0 !important; } /* Secondary action button styled with 100% Blocksy button tokens (.ct-button-ghost parity) Matches .ekbs-btn-download above it and .ekbs-btn-save below it inside .ekbs-action-card */ .ekbs-btn-preview-modal, aside.ekbs-action-card .ekbs-btn-preview-modal { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 8px; margin-bottom: 0; min-height: var(--theme-button-min-height, 42px); padding: 8px 14px; border-width: 2px; border-style: solid; border-color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); border-radius: var(--theme-button-border-radius, 3px); background-color: transparent; color: var(--theme-button-background-initial-color, var(--theme-palette-color-1)); font-family: var(--theme-button-font-family, var(--theme-font-family)); font-size: var(--theme-button-font-size, 15px); font-weight: var(--theme-button-font-weight, 500); line-height: var(--theme-button-line-height, 1.3); direction: rtl; white-space: nowrap; cursor: pointer; text-decoration: none; appearance: none; -webkit-appearance: none; box-shadow: none; transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955); box-sizing: border-box; } .ekbs-btn-preview-modal .ekrd-lucide { width: 18px; height: 18px; flex-shrink: 0; } .ekbs-btn-preview-modal:hover, .ekbs-btn-preview-modal:focus-visible { color: var(--theme-button-text-hover-color, #ffffff); border-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); background-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); } .ekbs-btn-preview-modal:active { transform: translateY(1px); } /* Fixed full-viewport overlay */ .ekrd-reader-modal-backdrop { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 21, 33, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; direction: rtl; animation: ekrdFadeIn 0.2s ease-out; box-sizing: border-box; } @keyframes ekrdFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Responsive modal container */ .ekrd-reader-modal { width: min(1160px, 96vw); height: min(86vh, 900px); background-color: var(--theme-palette-color-8); border: 1px solid var(--theme-border-color); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); direction: rtl; animation: ekrdModalSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } @keyframes ekrdModalSlideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Modal header bar */ .ekrd-reader-modal-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--theme-border-color); background-color: var(--theme-palette-color-7); flex-shrink: 0; direction: rtl; box-sizing: border-box; } .ekrd-reader-modal-title-wrap { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; } .ekrd-reader-modal-title { font-family: var(--theme-font-family); font-size: 16px; font-weight: 700; color: var(--theme-headings-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; line-height: 1.4; } .ekrd-reader-modal-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; direction: rtl; } .ekrd-modal-dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; direction: rtl; min-height: var(--theme-button-min-height, 38px); padding: 6px 16px; 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, #ffffff); font-family: var(--theme-button-font-family, var(--theme-font-family)); font-size: 13.5px; font-weight: var(--theme-button-font-weight, 600); line-height: var(--theme-button-line-height, 1.3); text-decoration: none; border: 2px solid transparent; transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955); box-sizing: border-box; } .ekrd-modal-dl-btn:hover, .ekrd-modal-dl-btn:focus-visible { background-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); color: var(--theme-button-text-hover-color, #ffffff); } .ekrd-reader-modal-close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; direction: rtl; min-height: var(--theme-button-min-height, 38px); padding: 6px 16px; border-width: 2px; border-style: solid; border-color: var(--theme-border-color, var(--theme-palette-color-5)); border-radius: var(--theme-button-border-radius, 3px); background-color: transparent; color: var(--theme-text-color); font-family: var(--theme-button-font-family, var(--theme-font-family)); font-size: 13.5px; font-weight: var(--theme-button-font-weight, 600); line-height: var(--theme-button-line-height, 1.3); cursor: pointer; transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955); box-sizing: border-box; } .ekrd-reader-modal-close:hover, .ekrd-reader-modal-close:focus-visible { color: var(--theme-button-text-hover-color, #ffffff); border-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); background-color: var(--theme-button-background-hover-color, var(--theme-palette-color-2)); } /* Modal body, loading overlay & iframe */ .ekrd-reader-modal-body { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; position: relative; background-color: var(--theme-palette-color-7); overflow: hidden; } .ekrd-reader-loading { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background-color: var(--theme-palette-color-8); color: var(--theme-headings-color); font-family: var(--theme-font-family); font-size: 14.5px; font-weight: 600; transition: opacity 0.25s ease, visibility 0.25s ease; } .ekrd-reader-loading.is-loaded { opacity: 0; visibility: hidden; pointer-events: none; } .ekrd-reader-spinner { display: inline-flex; align-items: center; justify-content: center; } .ekrd-reader-spinner svg { animation: ekrdSpin 0.9s linear infinite; color: var(--theme-palette-color-1); } @keyframes ekrdSpin { to { transform: rotate(360deg); } } iframe.ekrd-reader-iframe { width: 100%; height: 100%; border: 0; flex: 1; background-color: var(--theme-palette-color-7); display: block; } /* Responsive adjustments */ @media (max-width: 640px) { .ekrd-reader-modal-backdrop { padding: 0; } .ekrd-reader-modal { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; border: none; } .ekrd-reader-modal-head { padding: 10px 14px; gap: 8px; } .ekrd-reader-modal-title { font-size: 14px; } .ekbs-btn-preview-modal { width: 100%; white-space: normal; } } /* EKBS_REDESIGN_CSS_END */
/* Breadcrumb (same look as the single-book template), rendered by mu-plugin ekitabs-core */
.ekbs-bc-bar{padding-top:24px}
.ekbs-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;line-height:1.4;color:var(--theme-text-color)}
.ekbs-breadcrumb a{color:var(--theme-text-color);text-decoration:none;font-weight:500;transition:color .15s ease}
.ekbs-breadcrumb a:hover{color:var(--theme-headings-color)}
.ekbs-breadcrumb-sep{opacity:.6;font-size:12px;line-height:1}
.ekbs-breadcrumb-current{color:var(--theme-headings-color);font-weight:600}
.ekbs-bc-bar + [data-vertical-spacing*="top"]{padding-top:20px}