: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); } /* 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; } .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; } /* 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); } @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 */ /* 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. */ /* -------------------------------------------------------------------------- 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.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; } @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; } @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; } .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; } .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-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; } .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)); } .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; } /* -------------------------------------------------------------------------- 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; } } .ekrd-book-fact-card .ekrd-lucide { flex-shrink: 0; vertical-align: middle; margin: 0 !important; } .ekrd-fact-kicker .ekrd-lucide { color: var(--theme-palette-color-1); } .ekrd-lucide { display: inline-block; vertical-align: middle; flex-shrink: 0; margin: 0 !important; } .ekbs-btn-preview-modal .ekrd-lucide { width: 18px; height: 18px; flex-shrink: 0; }
/* 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}