/* ============================================================ Devders Blogs — Style 1 "Blue Modern" Ported from post1.html. Class prefix dd-ps1- preserved. Color/Font/Size are driven by Appearance settings via CSS vars injected in Style_1::inline_css_vars(). ============================================================ */ :root { /* These are overridden at runtime by inline vars; defaults kept for safety. */ --dd-ps1-primary: #2563eb; --dd-ps1-primary-hover: #1d4ed8; --dd-ps1-primary-active: #1e40af; --dd-ps1-primary-light: #dbeafe; --dd-ps1-primary-lighter: #eff6ff; --dd-ps1-primary-lightest: #f5f9ff; --dd-ps1-bg: #f8fafc; --dd-ps1-surface: #ffffff; --dd-ps1-border: #e2e8f0; --dd-ps1-border-light: #f1f5f9; --dd-ps1-text: #0f172a; --dd-ps1-text-muted: #64748b; --dd-ps1-text-light: #94a3b8; --dd-ps1-radius-sm: 6px; --dd-ps1-radius-md: 10px; --dd-ps1-radius-lg: 16px; --dd-ps1-radius-xl: 20px; --dd-ps1-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --dd-ps1-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --dd-ps1-shadow-md: 0 10px 28px rgba(15, 23, 42, 0.09); --dd-ps1-shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.14); --dd-ps1-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1); --dd-ps1-skeleton-base: #e2e8f0; --dd-ps1-skeleton-highlight: #f1f5f9; --dd-ps1-level-1: #1e40af; --dd-ps1-level-2: #2563eb; --dd-ps1-level-3: #3b82f6; --dd-ps1-level-1-bg: #eff6ff; --dd-ps1-level-2-bg: #f0f7ff; --dd-ps1-level-3-bg: #f5f9ff; /* Appearance-driven (overridden by inline vars). */ --dd-ps1-card-title-size: 16px; --dd-ps1-card-excerpt-size: 14px; --dd-ps1-badge-size: 12px; --dd-ps1-font: inherit; } /* ============================================================ THEME ISOLATION RESET Scoped to .dd-ps1-app so it never leaks into the theme. Many themes apply aggressive global styles to bare HTML elements (h1-h6 margins, ul/li padding, button backgrounds, a underlines, img borders) that can distort this component. These resets normalize those to browser defaults inside the component, then the component's own .dd-ps1-* rules layer on top. ============================================================ */ .dd-ps1-app, .dd-ps1-app *, .dd-ps1-app *::before, .dd-ps1-app *::after, .dd-ps1-offcanvas-host, .dd-ps1-offcanvas-host *, .dd-ps1-offcanvas-host *::before, .dd-ps1-offcanvas-host *::after { box-sizing: border-box; } /* Off-canvas host: while the mobile drawer is open, JS moves the drawer and overlay into this body-level host. As a direct child of it cannot be trapped under a theme wrapper's stacking context, so sticky theme headers can never paint above the drawer. */ .dd-ps1-offcanvas-host { position: relative; z-index: 999999; } .dd-ps1-app, .dd-ps1-offcanvas-host { margin: 0; padding: 0; font-family: 'Inter', var(--dd-ps1-font), system-ui, -apple-system, sans-serif; color: var(--dd-ps1-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; line-height: 1.5; /* Prevent theme text-size-adjust from distorting layout on mobile. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; word-wrap: break-word; } /* Normalize lists — themes often add bullets + left padding. Use :where() (zero specificity) so component classes override by source order. */ .dd-ps1-app :where(ul, ol), .dd-ps1-offcanvas-host :where(ul, ol) { list-style: none; margin: 0; padding: 0; } .dd-ps1-app :where(li), .dd-ps1-offcanvas-host :where(li) { list-style: none; margin: 0; padding: 0; } /* Normalize headings + paragraphs — themes add large margins. Use :where() (zero specificity) so component classes override by source order. */ .dd-ps1-app :where(h1, h2, h3, h4, h5, h6, p), .dd-ps1-offcanvas-host :where(h1, h2, h3, h4, h5, h6, p) { margin: 0; padding: 0; } /* Normalize links — themes add underline/underline offsets. */ .dd-ps1-app a, .dd-ps1-offcanvas-host a { text-decoration: none; } /* Normalize images — themes add borders/shadows/max-width rules. */ .dd-ps1-app img, .dd-ps1-offcanvas-host img { max-width: 100%; height: auto; display: block; border: none; border-radius: 0; box-shadow: none; } /* Normalize SVGs — ensure they behave as inline icons. */ .dd-ps1-app svg, .dd-ps1-offcanvas-host svg { display: block; flex-shrink: 0; } /* Normalize buttons — themes style