/* ==================================================================== NPD Stories Pro — Frontend Styles Extends / replaces theme CSS. Uses CSS custom properties set by PHP. ==================================================================== */ /* ── App / Browser visibility gating ───────────────────────────────── * * Elements marked with [data-npd-show] are hidden by default. * * npd-frontend.js reveals the correct subset on DOM ready based on * * npdData.is_mobile_app (detected via Android WebView "wv" UA token). * * * * PHP already gates server-side — this CSS+JS layer handles any * * client-side toggling (e.g. after plan upgrade without page reload). * * ---------------------------------------------------------------------- */ [data-npd-show="app-only"], [data-npd-show="app-premium"], [data-npd-show="browser-only"] { display: none !important; } :root { /* ── Theme-aware colours ───────────────────────────────────────── Pull from Elementor global colours → Astra global colours → hardcoded fallback. Change your primary colour in Elementor Site Settings or Astra → Global → Colours and these update automatically. ────────────────────────────────────────────────────────────────── */ --npd-primary: var(--e-global-color-primary, var(--ast-global-color-0, #5E1D2D)); --npd-secondary: var(--e-global-color-secondary, var(--ast-global-color-1, #34091A)); --npd-gold: var(--e-global-color-accent, var(--ast-global-color-3, #C9A24D)); /* ── Non-colour tokens (layout, motion) ─────────────────────── */ --npd-radius: 12px; --npd-shadow: 0 4px 16px rgba(0,0,0,.1); --npd-transition: .2s ease; } /* ── Utility ─────────────────────────────────────────────────────── */ .npd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 8px; border: 2px solid transparent; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none !important; transition: background var(--npd-transition), color var(--npd-transition), border-color var(--npd-transition); } .npd-btn-primary { background: var(--npd-primary); color: #fff; } .npd-btn-primary:hover { background: var(--npd-secondary); color: #fff; } .npd-btn-secondary{ background: var(--npd-secondary); color: #fff; } .npd-btn-outline { background: transparent; border-color: var(--npd-primary); color: var(--npd-primary); } .npd-btn-outline:hover { background: var(--npd-primary); color: #fff; } .npd-btn:disabled { opacity: .5; cursor: not-allowed; } .npd-link { color: var(--npd-primary); text-decoration: underline; } /* ── Category Grid Wrapper (horizontal scroll + arrows) ─────────── */ .nb-category-grid-wrapper { position: relative; display: flex; align-items: center; /* Push inward so -18px absolute arrows don't get clipped by Elementor overflow:hidden */ padding-left: 22px; padding-right: 22px; /* Must be visible so absolutely-positioned arrows outside the inner grid show */ overflow: visible !important; box-sizing: border-box; } /* Also ensure any Elementor column/widget wrapping us doesn't clip the arrows */ .elementor-widget-shortcode:has(.nb-category-grid-wrapper), .elementor-column:has(.nb-category-grid-wrapper) > .elementor-widget-wrap, .elementor-widget-wrap:has(.nb-category-grid-wrapper) { overflow: visible !important; } .nb-category-grid-wrapper .nb-category-grid, .nb-category-grid-wrapper .nb-category-grid-hover, .nb-category-grid-wrapper .npd-oc-grid { flex: 1; min-width: 0; } .nb-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: var(--npd-primary); color: #fff; border: none; border-radius: 8px; width: 32px; height: 32px; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.25); transition: opacity 0.2s, transform 0.15s; z-index: 100; flex-shrink: 0; } .nb-nav-btn:hover { opacity: 0.85; transform: translateY(-50%) scale(1.08); } .nb-nav-btn.disabled { opacity: 0; pointer-events: none; } /* Sit just inside the padding bands */ .nb-nav-left { left: 0; } .nb-nav-right { right: 0; } /* On mobile hide arrows — user swipes natively */ @media (max-width: 768px) { .nb-category-grid-wrapper { padding-left: 0; padding-right: 0; } } /* ── Horizontal scroll grid ─────────────────────────────────────── */ .nb-category-grid { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 10px; /* Padding compensates for the -18px nav buttons so cards stay centred */ padding-left: 2px; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--npd-primary) #f0e6e9; scroll-snap-type: x mandatory; /* Ensure grid itself is centred inside its wrapper */ align-items: stretch; box-sizing: border-box; width: 100%; } .nb-category-grid::-webkit-scrollbar { height: 4px; } .nb-category-grid::-webkit-scrollbar-thumb { background: var(--npd-primary); border-radius: 4px; } /* ── Grid card ───────────────────────────────────────────────────── */ /* Desktop : ~3 cards visible */ /* Tablet : exactly 2 cards per view (≤ 1024px) */ /* Mobile : exactly 1 card per view (≤ 600px) */ .nb-category-card { /* Desktop: show ~3 cards with a peek of the next */ flex: 0 0 calc((100% - 2 * 16px) / 3); min-width: 0 !important; /* kill the 320px override that caused left offset */ max-width: none; background: #fff; border-radius: var(--npd-radius); box-shadow: var(--npd-shadow); display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start; transition: transform var(--npd-transition), box-shadow var(--npd-transition); } .nb-category-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.15); } /* Tablet — 2 cards exactly, centred */ @media (max-width: 1024px) { .nb-category-card { flex: 0 0 calc((100% - 16px) / 2); min-width: 0 !important; } } /* Mobile — 1 card, full width, no gaps */ @media (max-width: 600px) { .nb-category-grid { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; gap: 12px; } .nb-category-card { flex: 0 0 100%; min-width: 0 !important; width: 100%; margin-left: 0 !important; margin-right: 0 !important; } } .nb-category-content { padding: 10px; flex: 1; } .nb-category-body { padding: 12px; } .nb-category-title { padding-top: 10px; display: flex; justify-content: center; color: black; } .nb-category-title h6 { padding-left: 5px; padding-right: 5px; padding-top:5px; padding-bottom:5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; font-weight: 700; color: black; text-align: center; margin: 0 0 8px; } .nb-category-title span { padding-left: 5px; padding-right: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .color-white { background: #FD3DB5; color: #fff !important; } /* Only apply the fixed 200px image style to standard cards, NOT overlay cards */ .nb-category-thumb img:not(.npd-oc-img) { margin: 5% auto; width: 200px !important; height: 300px !important; display: block; object-fit: cover; border-radius: 20px; } /* Overlay card image — always full-bleed, beats everything */ .npd-oc-img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; display: block !important; z-index: 1; } .nb-category-desc { margin: 1% 0; font-size: 0.8rem; color: #555; padding: 0 2%; text-align: left; } .nb-category-stats { padding: 10px; border-top: 1px solid #e9e9e9; display: flex; justify-content: space-between; align-items: center; gap: 6px; /*background: #f8f8f8;*/ border-radius: 0 0 12px 12px; color: black; } .nb-category-stats .nb-left { display: flex; gap: 8px; } .nb-category-stats .nb-center { display: flex; gap: 8px; } .nb-category-stats span { font-size: 12px; } .nb-category-stats .nb-right .btn { font-size: 12px; padding: 8px 10px; border-radius: 10px; } .nb-left { display: flex; gap: 8px; flex-wrap: wrap; font-size: .75rem; color: var(--npd-primary); } .nb-left span { display: flex; align-items: center; gap: 3px; } .nb-author-row { display: flex; justify-content:center; align-items: center; gap: 6px; margin-top: 6px; } .nb-author-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .nb-author-name { font-size: .78rem; font-weight: 600; color: var(--npd-primary); } .npd-btn-read-more { display: inline-block; padding: 4px 10px; background: var(--npd-primary); color: #fff !important; border-radius: 6px; font-size: .75rem; font-weight: 600; text-decoration: none !important; white-space: nowrap; transition: background var(--npd-transition); } .npd-btn-read-more:hover { background: var(--npd-secondary); } /* ── Hover grid (category_grid_hover) ─────────────────────────────── */ .nb-category-grid-hover { display: flex; gap: 15px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-snap-type: x mandatory; } .nb-category-grid-hover::-webkit-scrollbar { height: 6px; } .nb-category-grid-hover::-webkit-scrollbar-thumb { background: #ccc; border-radius: 6px; } .nb-category-grid-hover::-webkit-scrollbar-thumb:hover { background: #999; } /* Card */ .nb-category-card-hover { position: relative; flex: 0 0 calc((100% / 3.2) - 20px); min-width: 320px !important; box-sizing: border-box; border: 1px solid #e9e9e9; border-radius: 12px; background: #fff; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none !important; color: inherit; } .nb-category-card-hover:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); } @media (max-width: 1024px) { .nb-category-card-hover { flex: 0 0 calc((100% / 2) - 15px); min-width: 320px !important; } } @media (max-width: 600px) { .nb-category-card-hover { flex: 0 0 100%; min-width: 320px !important; } } /* Thumbnail */ .nb-category-thumb-hover { position: relative; overflow: hidden; } .nb-category-thumb-hover img { width: 100%; padding: 1% 10%; height: auto; display: block; object-fit: cover; transition: transform 0.3s ease; } .nb-category-card-hover:hover .nb-category-thumb-hover img { transform: scale(1.05); } /* Diagonal corner tag */ .nb-category-tag { position: absolute; top: 30px; left: -40px; background: var(--npd-primary); color: #fff; font-size: 9px; font-weight: 600; padding: 4px 40px; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,0.15); z-index: 2; letter-spacing: 0.8px; } .nb-category-tag::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.2); } /* Body — flex column, NOT absolute overlay */ .nb-category-body-hover { position: relative; text-align: center; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } /* Title bar — pink accent */ .nb-category-title-hover { font-size: 1.1rem; font-weight: 600; color: #333; padding: 8px 0 6px; background-color: #FD3DB5; } /* Description — expands between title & stats on hover */ .nb-category-desc-hover { font-size: 0.9rem; padding: 0 10%; line-height: 1.5; color: #555; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease; margin: 0; } .nb-category-card-hover:hover .nb-category-desc-hover { max-height: 120px; opacity: 1; margin: 5% 0; } /* Keep non-hovered siblings collapsed when any card is hovered */ .nb-category-grid-hover:has(.nb-category-card-hover:hover) .nb-category-card-hover:not(:hover) .nb-category-desc-hover { max-height: 0 !important; opacity: 0 !important; margin: 0 !important; } /* Stats bar */ .nb-category-stats-hover { display: flex; justify-content: space-between; align-items: center; background: #f8f8f8; padding: 10px 0; border-radius: 0 0 12px 12px; border-top: 1px solid #e9e9e9; color: var(--npd-primary); font-size: 13px; margin-top: auto; } .nb-category-stats-hover span { flex: 1; text-align: center; } .nb-category-stats-hover i { margin-right: 4px; } /* Full-width read button */ .nb-category-btn-hover { display: block; width: 100%; background: var(--npd-primary); color: #fff !important; text-decoration: none !important; text-align: center; padding: 5px 0; font-size: 0.95rem; font-weight: 500; border-radius: 0 0 12px 12px; transition: background 0.3s ease; } .nb-category-btn-hover:hover { background: #fd3db5; color: #fff !important; } /* ── Block grid (no scroll) ─────────────────────────────────────── */ .nb-category-grid-block { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1024px) { .nb-category-grid-block { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .nb-category-grid-block { grid-template-columns: 1fr; } } .nb-category-grid-block .nb-category-card { width: 100%; max-width: 100%; flex: none; } /* ── Author carousel ────────────────────────────────────────────── */ .npd-author-scroll-wrap { position: relative; padding: 10px 40px; } .npd-author-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: thin; } .npd-author-chip { display: flex; align-items: center; gap: 8px; background: #f4f0f1; padding: 6px 14px; border-radius: 50px; white-space: nowrap; text-decoration: none !important; color: #222; font-weight: 600; font-size: .85rem; transition: background var(--npd-transition); min-width: max-content; } .npd-author-chip:hover { background: #f0e6e9; color: var(--npd-primary); } .npd-author-chip-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .npd-scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: pointer; font-size: 1.2rem; z-index: 5; color: #000; display: flex; justify-content: center; align-items: center; } .npd-scroll-left { left: 4px; } .npd-scroll-right { right: 4px; } /* ── Category Page ───────────────────────────────────────────────── */ .npd-category-page { width: 100%; margin: 0; padding: 0; } /* ── Hero: white, full-width, cover-left / info-right ─────────────── */ .npd-story-hero { display: flex; align-items: flex-start; gap: 40px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 36px 28px 32px; } /* Cover image – portrait card */ .npd-story-cover { flex: 0 0 220px; } .npd-story-cover-img { width: 220px; aspect-ratio: 2/3; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 4px 20px rgba(0,0,0,.15); } /* Info panel */ .npd-story-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 4px; } .npd-story-title { font-size: 2rem; font-weight: 900; color: var(--npd-primary); margin: 0 0 16px; line-height: 1.2; } .npd-story-description { font-size: .97rem; color: #333; line-height: 1.8; margin-bottom: 20px; } .npd-story-description p { margin: 0 0 .9em; } .npd-story-description p:last-child { margin-bottom: 0; } /* Author row */ .npd-story-author { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .npd-story-author-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #f0e6e9; } .npd-story-author-label { font-size: .73rem; color: #999; display: block; text-transform: uppercase; letter-spacing: .4px; } .npd-story-author-name { font-size: .95rem; font-weight: 700; color: var(--npd-primary); } /* Stats inline row */ .npd-story-stats { display: flex; gap: 24px; flex-wrap: wrap; } .npd-story-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; } .npd-story-stat i { font-size: 1.1rem; color: var(--npd-primary); } .npd-story-stat span { font-size: 1rem; font-weight: 800; color: #222; } .npd-story-stat small { font-size: .68rem; color: #999; text-transform: uppercase; } /* ── Episodes section ─────────────────────────────────────────────── */ .npd-episodes-section { border-top: 3px solid var(--npd-primary); padding: 28px 28px 56px; max-width: 1200px; margin: 0 auto; } /* Episode bar */ .npd-episode-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .npd-episode-heading { font-size: 1.2rem; font-weight: 800; color: var(--npd-primary); margin: 0; } .npd-episode-count { font-size: .95rem; font-weight: 500; color: #888; margin-left: 4px; } .npd-sort-select { padding: 7px 14px; border: 2px solid #e8d8db; border-radius: 8px; font-size: .85rem; color: var(--npd-primary); background: #fff; cursor: pointer; font-weight: 600; } .npd-sort-select:focus { outline: none; border-color: var(--npd-primary); } /* Episode grid — 3 desktop / 2 tablet / 1 mobile */ .npd-episode-list { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 0; } @media (max-width: 1024px) { .npd-episode-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .npd-episode-list { grid-template-columns: 1fr; } } /* Neutralise Bootstrap col- wrappers */ .npd-episode-list > [class*="col-"] { width: 100% !important; max-width: 100% !important; padding: 0 !important; flex: none !important; } /* Episode card */ .npd-episode-card { background: #fff; border-radius: 12px; border: 1px solid #f0e6e9; box-shadow: 0 2px 8px rgba(0,0,0,.06); padding: 16px 18px; height: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .npd-episode-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(94,29,45,.12); border-color: var(--npd-primary); } /* Episode feature-image thumbnail (Appearance → Show Episode Feature Images) */ .npd-episode-thumb { display: block; float: left; width: 56px; height: 56px; margin: 0 12px 6px 0; border-radius: 8px; overflow: hidden; flex-shrink: 0; border: 1px solid #f0e6e9; } .npd-episode-thumb img { width: 56px; height: 56px; object-fit: cover; display: block; } .npd-episode-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .npd-episode-number-title { display: flex; gap: 6px; flex: 1; color: var(--npd-primary);} .npd-episode-sno { color: var(--npd-primary); font-weight: 800; flex-shrink: 0; font-size: .88rem; } .npd-episode-title { color: #1a1a1a; font-weight: 700; text-decoration: none !important; font-size: .93rem; line-height: 1.45; } .npd-episode-title:hover { color: var(--npd-primary); text-decoration: underline; } .npd-episode-date { font-size: .72rem; color: #aaa; white-space: nowrap; flex-shrink: 0; } .npd-episode-card-stats { display: flex; gap: 14px; color: #888; font-size: .78rem; margin-top: 10px; } .npd-episode-card-stats i { color: var(--npd-gold); font-size: .72rem; } /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .npd-story-hero { flex-direction: column; align-items: center; padding: 24px 18px 20px; } .npd-story-cover { flex: none; width: 160px; } .npd-story-cover-img { width: 160px; margin: auto;} .npd-story-title { font-size: 1.45rem; text-align: center; } .npd-story-description { font-size: .9rem; } .npd-story-author { justify-content: center; } .npd-story-stats { justify-content: center; } .npd-episodes-section { padding: 20px 16px 40px; } } /* ── Single Post — full-width, clean reading experience ──────────── */ .npd-single-wrap { width: 100%; max-width: 100%; margin: 0; padding: 0; } .npd-post-article { background: transparent; border-radius: 0; box-shadow: none; padding: 0; } .npd-post-header { margin-top: 20px; width: 90%; padding: 22px 24px 22px; text-align: center; margin-bottom: 0; margin: 20px auto; } .npd-post-title { font-size: 2rem; font-weight: 900; color: var(--npd-primary); margin: 0 0 12px; line-height: 1.25; } .npd-post-meta { font-size: .88rem; color: var(--npd-gold); display: flex; gap: 14px; align-items: center; justify-content: center;} .npd-post-sep { opacity: .4; } .npd-post-views { display: flex; align-items: center; gap: 5px; color: var(--npd-gold); } /* Body — constrained for readability, full-width container */ .npd-post-body-wrap { max-width: 1280px; margin: 0 auto; padding: 36px 28px 12px; } .npd-post-body { font-size: 1.08rem; line-height: 1.95; color: #222; } .npd-post-body p { margin-bottom: 1.5em; } /* Engage row */ .npd-post-engage { max-width: 820px; margin: 0 auto; display: flex; justify-content: space-evenly; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px 28px; border-top: 1px solid #f0e6e9; } /* Prev/next */ .npd-post-nav { max-width: 820px; margin: 0 auto 0; padding: 20px 28px 28px; display: flex; justify-content: space-between; gap: 10px; } .npd-nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; background: var(--npd-secondary); color: #fff !important; border-radius: 10px; text-decoration: none !important; font-size: .85rem; font-weight: 600; transition: background var(--npd-transition); } .npd-nav-btn:hover { background: var(--npd-primary); color: #fff !important; } /* Related section */ .npd-related-stories { padding: 0 28px 32px; max-width: 80%; margin:auto; } .npd-section-title { font-size: 1.05rem; font-weight: 700; color: var(--npd-primary); margin-bottom: 14px; } .npd-comments-wrap { padding: 24px 28px 40px; border-top: 1px solid #f0e6e9; max-width: 820px; margin: 0 auto; } /* Fade-out before paywall */ .npd-fade-out { height: 80px; background: linear-gradient(transparent, #fff); margin-bottom: -16px; pointer-events: none; } @media (max-width: 768px) { .npd-post-header { padding: 28px 20px 24px; } .npd-post-title { font-size: 1.4rem; } .npd-post-body-wrap { padding: 24px 18px 8px; } .npd-post-engage, .npd-post-nav { padding-left: 18px; padding-right: 18px; } .npd-comments-wrap { padding: 20px 18px 32px; } .npd-related-stories { max-width:100%; padding: 0 18px 28px; } .npd-story-hero { flex-direction: column; } .npd-story-cover { flex: none; width: 100%; } .npd-story-cover-img { min-height: 260px; max-height: 300px; } .npd-story-info { padding: 24px 20px; } .npd-story-title { font-size: 1.5rem; } .npd-episodes-section { padding: 24px 16px 40px; } } /* ============================================================ CATEGORY GRID V2 — [category_grid_v2] ============================================================ */ .nb-icons-center { display: flex; justify-content: center; align-content: center; margin: 5px; gap: 15px; } /* ============================================================ CATEGORY GRID MINIMAL — [category_grid_v3] ============================================================ */ .nb-category-stats-minimal { display: flex; justify-content: space-between; align-items: center; font-size: 10px; margin-top: auto; } .nb-category-stats-minimal span { padding-left: 20px; padding-right: 20px; font-size: 10px; } .nb-category-stats-minimal i { margin-right: 4px; } .nb-category-title-minimal { font-size: 8px !important; } /* ============================================================ CATEGORY GRID IMAGE — [category_grid_v4] ============================================================ */ .nb-category-card-image { border-radius: 12px; overflow: hidden; } .nb-category-thumb-image img, .nb-category-card-image img { display: block; width: 100%; height: auto; } /* ============================================================ AUTHOR NAME DEFAULT ============================================================ */ .author-name-default { display: flex; justify-content: center; padding: 5px; align-items: center; gap: 1px; } /* ============================================================ CKEDITOR CONTENT FIX ============================================================ */ .ck-content { color: #000 !important; } /* ============================================================ HIDE DROPDOWN ARROWS ON DESKTOP ------------------------------------------------------------ Astra adds an SVG caret (span.ast-icon.icon-arrow) to every submenu link. It belongs on mobile/expanded menus only. On desktop the previous rule forced it visible (display:block), which made a stray arrow appear above each submenu item. Hide it on desktop; Astra still shows it on mobile. ============================================================ */ @media (min-width: 768px) { .ast-desktop .main-header-menu .sub-menu .menu-link > .ast-icon.icon-arrow, .ast-desktop .sub-menu .ast-icon.icon-arrow { display: none !important; } } /* ── YASR Rating Integration (v2.5.0) ───────────────────────────────── */ /* Overall rating in post header — visible even on locked posts */ .npd-post-overall-rating { display: flex; justify-content: center; margin-top: 10px; } .npd-post-overall-rating .yasr-overall-rating-container, .npd-post-overall-rating .yasr_all_votes_container { display: inline-flex !important; align-items: center; gap: 6px; justify-content: center; } /* Visitor rating block in engage section */ .npd-rating { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .npd-rating-label { font-size: .82rem; font-weight: 600; color: var(--npd-primary); margin: 0; } .npd-rating-login { font-size: .78rem; color: #888; margin: 4px 0 0; } .npd-rating-login a { color: var(--npd-primary); text-decoration: underline; } /* Ensure YASR stars sit inline cleanly inside NPD layout */ .npd-post-overall-rating .yasr-star-rating, .npd-rating .yasr-star-rating { display: inline-flex !important; vertical-align: middle; } /* ── Elementor shortcode widget padding reset ──────────────────────── Elementor wraps [category_grid] in .elementor-widget-shortcode which adds padding/margin that causes the left gap on mobile. We target only widgets that contain our grid so nothing else breaks. */ @media (max-width: 768px) { .elementor-widget-shortcode:has(.nb-category-grid), .elementor-widget-shortcode:has(.nb-category-grid-wrapper) { padding: 0 !important; margin: 0 !important; } .elementor-widget-shortcode:has(.nb-category-grid) .elementor-shortcode, .elementor-widget-shortcode:has(.nb-category-grid-wrapper) .elementor-shortcode { padding: 0 !important; margin: 0 !important; } /* Also strip the column/section padding that wraps the widget */ .elementor-column:has(.nb-category-grid) > .elementor-widget-wrap, .elementor-column:has(.nb-category-grid-wrapper) > .elementor-widget-wrap { padding: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════ NPD Stories Pro v4.0 — New Feature Styles ═══════════════════════════════════════════════════════════════════════ */ /* ── Story Tag Badges ─────────────────────────────────────────────────── */ .npd-story-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .npd-story-tag-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; color: #fff !important; text-decoration: none !important; letter-spacing: 0.3px; transition: opacity 0.2s, transform 0.15s; white-space: nowrap; } .npd-story-tag-badge:hover { opacity: 0.85; transform: translateY(-1px); } .npd-story-tags-mini { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 8px; } .npd-story-tags-mini .npd-story-tag-badge { font-size: 10px; padding: 2px 8px; } /* ── Follow Button ────────────────────────────────────────────────────── */ .npd-follow-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: 25px; font-size: 14px; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: all 0.25s ease; text-decoration: none; } .npd-btn-follow { background: var(--npd-primary, #5E1D2D); color: #fff; border-color: var(--npd-primary, #5E1D2D); } .npd-btn-follow:hover { background: transparent; color: var(--npd-primary, #5E1D2D); } .npd-btn-following { background: transparent; color: var(--npd-primary, #5E1D2D); border-color: var(--npd-primary, #5E1D2D); } .npd-btn-following:hover { background: #f8d7da; border-color: #c0392b; color: #c0392b; } .npd-follower-count { background: rgba(255,255,255,0.25); padding: 1px 7px; border-radius: 12px; font-size: 12px; } .npd-btn-following .npd-follower-count { background: rgba(94,29,45,0.1); } /* ── Bookmark Button ──────────────────────────────────────────────────── */ .npd-bookmark-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1.5px solid #ccc; background: transparent; color: #555; transition: all 0.2s; text-decoration: none; } .npd-bookmark-btn:hover, .npd-btn-bookmarked { border-color: var(--npd-primary, #5E1D2D); color: var(--npd-primary, #5E1D2D); background: rgba(94,29,45,0.07); } /* ── Author Profile Page ──────────────────────────────────────────────── */ .npd-author-profile { max-width: 1100px; margin: 0 auto; padding: 20px 0; } /* Hero */ .npd-profile-hero { display: flex; align-items: flex-start; gap: 30px; background: linear-gradient(135deg, var(--npd-primary, #5E1D2D) 0%, var(--npd-secondary, #34091A) 100%); border-radius: 16px; padding: 35px; margin-bottom: 30px; color: #fff; } .npd-profile-avatar { width: 120px; height: 120px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.4); object-fit: cover; flex-shrink: 0; } .npd-profile-identity { flex: 1; } .npd-profile-name { font-size: 28px; font-weight: 700; margin: 0 0 8px; color: #fff; } .npd-profile-bio { font-size: 14px; opacity: 0.85; margin-bottom: 18px; line-height: 1.6; } .npd-profile-social-counts { display: flex; gap: 24px; margin-bottom: 18px; } .npd-psc-item { display: flex; flex-direction: column; align-items: center; } .npd-psc-num { font-size: 22px; font-weight: 700; line-height: 1; } .npd-psc-label { font-size: 11px; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; } .npd-profile-hero .npd-follow-btn { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); color: #fff; } .npd-profile-hero .npd-follow-btn:hover { background: rgba(255,255,255,0.3); } /* Insights */ .npd-section-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: var(--npd-primary, #5E1D2D); } body.npd-dark .npd-section-title { color: #f093aa; } .npd-profile-insights { margin-bottom: 35px; } .npd-insights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .npd-insight-card { background: #fff; border-radius: 12px; padding: 20px 16px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.07); border: 1px solid #f0f0f0; transition: transform 0.2s, box-shadow 0.2s; } .npd-insight-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .npd-insight-icon { font-size: 26px; margin-bottom: 10px; } .npd-insight-value { font-size: 24px; font-weight: 700; line-height: 1; color: #1a1a2e; margin-bottom: 6px; } .npd-insight-label { font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: 0.5px; } /* Story grid in profile */ .npd-profile-story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .npd-profile-story-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.07); border: 1px solid #f0f0f0; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; } .npd-profile-story-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.13); } .npd-psc-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; } .npd-psc-body { padding: 16px; display: flex; flex-direction: column; flex: 1; } .npd-psc-title { font-size: 16px; font-weight: 700; margin: 0 0 8px; } .npd-psc-title a { color: #1a1a2e; text-decoration: none; } .npd-psc-title a:hover { color: var(--npd-primary, #5E1D2D); } .npd-psc-excerpt { font-size: 13px; color: #666; line-height: 1.5; margin-bottom: 12px; flex: 1; } .npd-psc-stats { display: flex; gap: 12px; font-size: 12px; color: #888; margin-bottom: 12px; flex-wrap: wrap; } .npd-psc-stats span { display: flex; align-items: center; gap: 4px; } .npd-psc-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f0f0f0; padding-top: 10px; font-size: 12px; color: #888; } .npd-psc-date { display: flex; align-items: center; gap: 5px; } /* Pagination */ .npd-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 30px; flex-wrap: wrap; } .npd-page-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: #fff; border: 1.5px solid #ddd; color: #444; text-decoration: none; font-weight: 600; transition: all 0.2s; } .npd-page-btn.active, .npd-page-btn:hover { background: var(--npd-primary, #5E1D2D); border-color: var(--npd-primary, #5E1D2D); color: #fff; } /* ── Bookmarks Grid ───────────────────────────────────────────────────── */ .npd-bookmarks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .npd-bookmark-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.07); position: relative; display: flex; flex-direction: column; } .npd-bookmark-thumb img { width: 100%; height: 150px; object-fit: cover; display: block; } .npd-bookmark-info { padding: 14px; } .npd-bookmark-info h4 { margin: 0 0 5px; font-size: 15px; font-weight: 700; } .npd-bookmark-info h4 a { color: #1a1a2e; text-decoration: none; } .npd-bookmark-author { font-size: 12px; color: #888; margin-bottom: 8px; } .npd-remove-bookmark { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: background 0.2s; } .npd-remove-bookmark:hover { background: #c0392b; } /* ── User List (Follow/Following/Followers) ───────────────────────────── */ .npd-user-list { display: flex; flex-direction: column; gap: 12px; } .npd-user-card { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 10px; padding: 14px 18px; box-shadow: 0 1px 6px rgba(0,0,0,0.07); } .npd-user-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .npd-user-info { flex: 1; display: flex; flex-direction: column; } .npd-user-info strong { font-size: 15px; } .npd-user-meta { font-size: 12px; color: #888; margin-top: 3px; } /* ── Social empty states ──────────────────────────────────────────────── */ .npd-social-empty { text-align: center; padding: 50px 20px; color: #aaa; } .npd-social-empty i { font-size: 40px; display: block; margin-bottom: 12px; } .npd-social-empty p { font-size: 15px; } /* ── Story Search Bar ─────────────────────────────────────────────────── */ .npd-search-wrapper { position: relative; max-width: 800px; margin: 0 auto 20px; /* Must be visible so absolute dropdown isn't clipped by Elementor overflow:hidden */ overflow: visible !important; z-index: 9999; } /* Force any Elementor wrapper containing the search to not clip the dropdown */ .elementor-widget-shortcode:has(.npd-search-wrapper), .elementor-widget-shortcode:has(.npd-search-wrapper) .elementor-shortcode, .elementor-column:has(.npd-search-wrapper) > .elementor-widget-wrap, .elementor-section:has(.npd-search-wrapper) { overflow: visible !important; z-index: 100; } .npd-search-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #fff; border: 2px solid #e0e0e0; border-radius: 50px; padding: 8px 16px; box-shadow: 0 3px 15px rgba(0,0,0,0.08); transition: border-color 0.2s, box-shadow 0.2s; } .npd-search-bar:focus-within { border-color: var(--npd-primary, #5E1D2D); box-shadow: 0 3px 20px rgba(94,29,45,0.15); } .npd-search-input-group { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 200px; } .npd-search-icon { color: #aaa; font-size: 16px; flex-shrink: 0; } .npd-search-input { flex: 1; border: none; outline: none; font-size: 15px; background: transparent; color: #1a1a2e; min-width: 0; padding: 4px 0; } .npd-search-clear { background: none; border: none; cursor: pointer; color: #bbb; font-size: 15px; padding: 0; display: none; transition: color 0.2s; } .npd-search-clear:hover { color: #555; } .npd-search-clear.visible { display: block; } .npd-search-filters { display: flex; gap: 8px; flex-wrap: wrap; } .npd-filter-tag, .npd-filter-order { border: 1px solid #ddd; border-radius: 20px; padding: 5px 12px; font-size: 13px; background: #f9f9f9; cursor: pointer; outline: none; color: #444; transition: border-color 0.2s; } .npd-filter-tag:focus, .npd-filter-order:focus { border-color: var(--npd-primary, #5E1D2D); } .npd-search-submit { background: var(--npd-primary, #5E1D2D); color: #fff; border: none; border-radius: 30px; padding: 9px 22px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s, transform 0.15s; white-space: nowrap; } .npd-search-submit:hover { opacity: 0.9; transform: scale(1.02); } /* Results */ .npd-search-results { background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.18); margin-top: 6px; overflow: hidden; display: none; border: 1px solid #eee; /* Float above all page content — not in document flow */ position: absolute; top: 100%; left: 0; right: 0; z-index: 99999; max-height: 480px; overflow-y: auto; } .npd-search-results.open { display: block; } .npd-search-loader, .npd-search-no-results { text-align: center; padding: 30px; color: #aaa; font-size: 14px; } .npd-search-loader i { margin-right: 8px; } .npd-search-result-item { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #f5f5f5; text-decoration: none; color: inherit; transition: background 0.15s; } .npd-search-result-item:last-child { border-bottom: none; } .npd-search-result-item:hover { background: #fdf7f8; } .npd-sri-thumb { width: 70px; height: 55px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .npd-sri-body { flex: 1; min-width: 0; } .npd-sri-title { font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .npd-sri-excerpt { font-size: 12px; color: #777; line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .npd-sri-meta { display: flex; gap: 10px; font-size: 11px; color: #aaa; flex-wrap: wrap; } .npd-sri-meta span { display: flex; align-items: center; gap: 3px; } .npd-search-see-all { display: block; text-align: center; padding: 12px; font-size: 13px; color: var(--npd-primary, #5E1D2D); font-weight: 600; border-top: 1px solid #f0f0f0; text-decoration: none; background: #fdf7f8; transition: background 0.15s; } .npd-search-see-all:hover { background: #f5e8eb; } /* ── Minimal Search Bar [npd_story_search_icon] ────────────────────── */ .npd-ics-wrap { position: relative; display: block; width: 100%; overflow: visible !important; z-index: 9999; } .elementor-widget-shortcode:has(.npd-ics-wrap), .elementor-widget-shortcode:has(.npd-ics-wrap) .elementor-shortcode, .elementor-column:has(.npd-ics-wrap) > .elementor-widget-wrap { overflow: visible !important; z-index: 100; } /* The bar — always visible, flex row */ .npd-ics-bar { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid rgba(139,58,82,0.25); border-radius: 50px; padding: 7px 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); transition: border-color 0.2s, box-shadow 0.2s; width: 100%; box-sizing: border-box; } .npd-ics-bar:focus-within { border-color: var(--npd-primary, #8b3a52); box-shadow: 0 3px 18px rgba(139,58,82,0.15); } /* Lens icon */ .npd-ics-bar-icon { color: var(--npd-primary, #8b3a52); font-size: 15px; flex-shrink: 0; pointer-events: none; display: inline-block; } /* Input */ .npd-ics-input { flex: 1; border: none !important; outline: none !important; background: transparent !important; font-size: 14px; color: #333; min-width: 0; box-shadow: none !important; padding: 0 !important; margin: 0 !important; line-height: 1.4; -webkit-appearance: none; } .npd-ics-input::placeholder { color: #bbb; } .npd-ics-input:focus { outline: none !important; box-shadow: none !important; } /* Clear — span, so zero theme interference */ .npd-ics-clear { display: none; align-items: center; justify-content: center; cursor: pointer; color: #bbb; font-size: 13px; flex-shrink: 0; line-height: 1; width: 18px; height: 18px; transition: color 0.15s; } .npd-ics-clear.visible { display: flex; } .npd-ics-clear:hover { color: var(--npd-primary, #8b3a52); } /* Results dropdown */ .npd-ics-results { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 440px; overflow-y: auto; background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); border: 1px solid #eee; z-index: 99999; } .npd-ics-results.open { display: block; } .npd-ics-loader, .npd-ics-no-results { padding: 20px; text-align: center; color: #888; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; } .npd-ics-results .npd-search-result-item { display: flex; gap: 10px; padding: 10px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid #f5f5f5; transition: background 0.15s; } .npd-ics-results .npd-search-result-item:hover { background: #fdf7f8; } .npd-ics-results .npd-search-result-item:last-child { border-bottom: none; } /* Dark mode */ body.npd-dark .npd-ics-bar { background: #1a1a2e; border-color: rgba(139,58,82,0.4); } body.npd-dark .npd-ics-input { color: #e0e0e0 !important; } body.npd-dark .npd-ics-results { background: #1e1e35; border-color: #333; } body.npd-dark .npd-ics-results .npd-search-result-item { border-color: #2a2a40; } body.npd-dark .npd-ics-results .npd-search-result-item:hover { background: #252540; } /* ── Write CTA Card [npd_write_cta] ────────────────────────────────── */ .npd-write-cta { background: linear-gradient(135deg, #fdf0f3 0%, #fce8ed 60%, #f5d5de 100%); border-radius: 16px; overflow: hidden; position: relative; width: 100%; box-sizing: border-box; } .npd-write-cta-inner { padding: 28px 28px 30px; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; } .npd-write-cta-header { display: flex; align-items: center; gap: 10px; } .npd-write-cta-icon { font-size: 26px; line-height: 1; flex-shrink: 0; } .npd-write-cta-title { font-size: 20px; font-weight: 800; color: #99173E; margin: 0; padding: 0; line-height: 1.25; font-style: italic; } .npd-write-cta-desc { font-size: 14px; color: #5a3a3a; line-height: 1.65; margin: 0; padding: 0; } /* Button — a tag so theme button styles don't apply */ a.npd-write-cta-btn, a.npd-write-cta-btn:visited { display: inline-block; background: var(--npd-primary, #8b3a52); color: #fff !important; text-decoration: none !important; font-size: 15px; font-weight: 700; padding: 12px 28px; border-radius: 50px; margin-top: 4px; align-self: flex-start; letter-spacing: 0.3px; transition: opacity 0.2s, transform 0.15s; box-shadow: 0 4px 16px rgba(139,58,82,0.3); } a.npd-write-cta-btn:hover { opacity: 0.88; transform: translateY(-1px); color: #fff !important; } /* ── Login-to-Write Button [npd_login_to_write] ────────────────────── */ a.npd-ltw-btn, a.npd-ltw-btn:visited { display: inline-flex; align-items: center; gap: 7px; text-decoration: none !important; font-weight: 700; letter-spacing: 0.3px; transition: opacity 0.2s, transform 0.15s, background 0.2s; white-space: nowrap; } a.npd-ltw-btn:hover { transform: translateY(-1px); } /* Pill style (default) */ a.npd-ltw-pill { background: var(--npd-primary, #8b3a52); color: #fff !important; font-size: 14px; padding: 10px 22px; border-radius: 50px; box-shadow: 0 3px 14px rgba(139,58,82,0.28); } a.npd-ltw-pill:hover { opacity: 0.88; color: #fff !important; } /* Outline style */ a.npd-ltw-outline { background: transparent; color: var(--npd-primary, #8b3a52) !important; font-size: 14px; padding: 9px 20px; border-radius: 50px; border: 2px solid var(--npd-primary, #8b3a52); } a.npd-ltw-outline:hover { background: var(--npd-primary, #8b3a52); color: #fff !important; } /* Minimal style */ a.npd-ltw-minimal { background: transparent; color: var(--npd-primary, #8b3a52) !important; font-size: 14px; padding: 6px 0; border-bottom: 2px solid transparent; } a.npd-ltw-minimal:hover { border-bottom-color: var(--npd-primary, #8b3a52); } /* Dark mode */ body.npd-dark .npd-write-cta { background: linear-gradient(135deg, #1e1228 0%, #241530 60%, #1a0e20 100%); } body.npd-dark .npd-write-cta-title { color: #f0d0da; } body.npd-dark .npd-write-cta-desc { color: #c0a0aa; } /* ── Dark / Light Mode Toggle ────────────────────────────────────────── */ /* Switch style */ .npd-theme-switch { display: inline-flex; align-items: center; cursor: pointer; user-select: none; } .npd-theme-checkbox { display: none; } .npd-theme-slider { position: relative; width: 58px; height: 30px; background: #ddd; border-radius: 30px; transition: background 0.3s; display: flex; align-items: center; padding: 4px; box-shadow: inset 0 1px 4px rgba(0,0,0,0.15); } .npd-theme-slider::before { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff; left: 4px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 4px rgba(0,0,0,0.2); } .npd-theme-checkbox:checked + .npd-theme-slider { background: #1a1a2e; } .npd-theme-checkbox:checked + .npd-theme-slider::before { transform: translateX(28px); } .npd-icon-dark, .npd-icon-light { position: absolute; font-size: 12px; transition: opacity 0.2s; } .npd-icon-dark { right: 6px; color: #f5c842; } .npd-icon-light { left: 6px; color: #f5c842; opacity: 0; } .npd-theme-checkbox:checked + .npd-theme-slider .npd-icon-dark { opacity: 0; } .npd-theme-checkbox:checked + .npd-theme-slider .npd-icon-light { opacity: 1; } /* Icon button */ .npd-theme-icon-btn { background: transparent; border: 1.5px solid #ddd; border-radius: 50%; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; color: #555; transition: all 0.2s; } .npd-theme-icon-btn:hover { border-color: var(--npd-primary, #5E1D2D); color: var(--npd-primary, #5E1D2D); } /* Text button */ .npd-theme-text-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 25px; border: 1.5px solid #ddd; background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; color: #555; transition: all 0.2s; } .npd-theme-text-btn:hover { border-color: var(--npd-primary, #5E1D2D); color: var(--npd-primary, #5E1D2D); } /* Full toggle */ .npd-theme-full-toggle { display: inline-flex; border-radius: 30px; overflow: hidden; border: 1.5px solid #ddd; background: #f5f5f5; } .npd-theme-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; background: transparent; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: #888; transition: all 0.2s; } .npd-theme-opt.active, .npd-theme-opt:hover { background: var(--npd-primary, #5E1D2D); color: #fff; } /* ── Dark Mode — Global Overrides ─────────────────────────────────────── */ body.npd-dark { background-color: #0d0d1a !important; color: #e0e0e0 !important; } body.npd-dark .npd-author-profile, body.npd-dark .npd-profile-insights, body.npd-dark .npd-profile-stories { color: #e0e0e0; } body.npd-dark .npd-insight-card, body.npd-dark .npd-profile-story-card, body.npd-dark .npd-bookmark-card, body.npd-dark .npd-user-card, body.npd-dark .npd-search-results, body.npd-dark .npd-search-bar { background: #1a1a2e !important; border-color: #2a2a4a !important; color: #e0e0e0 !important; } body.npd-dark .npd-search-input { color: #e0e0e0 !important; } body.npd-dark .npd-psc-title a, body.npd-dark .npd-insight-value { color: #e0e0e0 !important; } body.npd-dark .npd-search-result-item:hover { background: #252540 !important; } body.npd-dark .nb-category-card, body.npd-dark .nb-category-card-hover { background: #1a1a2e !important; color: #e0e0e0 !important; } body.npd-dark .npd-filter-tag, body.npd-dark .npd-filter-order { background: #252540; border-color: #3a3a5a; color: #e0e0e0; } body.npd-dark .npd-search-see-all { background: #1a1a2e; color: #f093aa; } body.npd-dark .npd-search-see-all:hover { background: #252540; } body.npd-dark .npd-insight-label, body.npd-dark .npd-psc-excerpt, body.npd-dark .npd-psc-stats, body.npd-dark .npd-sri-excerpt, body.npd-dark .npd-sri-meta, body.npd-dark .npd-user-meta { color: #a0a0c0 !important; } body.npd-dark .npd-page-btn { background: #1a1a2e; border-color: #2a2a4a; color: #e0e0e0; } body.npd-dark .npd-psc-footer { border-color: #2a2a4a; } body.npd-dark .npd-theme-slider { background: #3a3a5a; } body.npd-dark .npd-theme-icon-btn, body.npd-dark .npd-theme-text-btn { color: #e0e0e0; border-color: #3a3a5a; } body.npd-dark .npd-theme-full-toggle { background: #1a1a2e; border-color: #3a3a5a; } body.npd-dark .npd-theme-opt { color: #a0a0c0; } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 768px) { .npd-profile-hero { flex-direction: column; align-items: center; text-align: center; padding: 24px; } .npd-profile-social-counts { justify-content: center; } .npd-insights-grid { grid-template-columns: repeat(2, 1fr); } .npd-profile-story-grid { grid-template-columns: 1fr; } .npd-search-bar { border-radius: 16px; flex-direction: column; align-items: stretch; } .npd-search-submit { border-radius: 10px; } .npd-bookmarks-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════ Related Stories Widget — Overlay Card [npd_related_stories] ══════════════════════════════════════════════════════════════════════ */ .npd-related-stories { margin: 28px 0; } /* ── Standalone grid — completely independent of nb-category-grid ─────── */ .npd-oc-grid { display: flex; flex-direction: row; gap: 16px; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--npd-primary) #f0e6e9; padding-bottom: 8px; /* NO align-items:stretch — let each card size itself naturally */ align-items: flex-start; box-sizing: border-box; width: 100%; } .npd-oc-grid::-webkit-scrollbar { height: 4px; } .npd-oc-grid::-webkit-scrollbar-thumb { background: var(--npd-primary); border-radius: 4px; } /* ── Card ─────────────────────────────────────────────────────────────── */ .npd-oc-card { flex: 0 0 calc((100% - 2 * 16px) / 3) !important; min-width: 0 !important; max-width: none !important; border-radius: 14px; overflow: visible; box-shadow: 0 4px 14px rgba(0,0,0,.18); scroll-snap-align: start; transition: transform .2s, box-shadow .2s; background: transparent; display: block !important; height: auto !important; } /* Thumb is the real card box — fixed 300px height, nothing can collapse it */ .npd-oc-thumb { display: block !important; width: 100% !important; height: 300px !important; position: relative !important; overflow: hidden !important; border-radius: 14px !important; background: #111 !important; } .npd-oc-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.28); } @media (max-width: 1024px) { .npd-oc-card { flex: 0 0 calc((100% - 16px) / 2); } } @media (max-width: 600px) { .npd-oc-card { flex: 0 0 100%; } } /* ── Link: just a block wrapper around the thumb ─────────────────────── */ .npd-oc-link { display: block; text-decoration: none; } /* ── Thumb: THE positioning context — padding-top gives 2:3 ratio ─────── */ .npd-oc-thumb { position: relative !important; display: block; width: 100%; padding-top: 150% !important; /* 2:3 portrait: height = 1.5 × width */ overflow: hidden !important; border-radius: 14px !important; background: #111; } /* ── Cover image fills the entire thumb box ──────────────────────────── */ /* npd-oc-img defined above */ .npd-oc-card:hover .npd-oc-img { transform: scale(1.04); } /* ── Dual gradient overlay ───────────────────────────────────────────── */ .npd-oc-thumb::before { content: ''; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: linear-gradient( 180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.00) 32%, rgba(0,0,0,.00) 54%, rgba(0,0,0,.88) 100% ); z-index: 2; pointer-events: none; border-radius: 14px; } /* ── TOP overlay: rank + genre tags (stacked column) ─────────────────── */ .npd-oc-top { position: absolute !important; top: 10px !important; left: 10px !important; right: 10px; z-index: 3 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px; pointer-events: none; } /* #N — black pill */ .npd-oc-rank { background: rgba(0,0,0,.80) !important; color: #fff !important; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 20px; line-height: 1.6; letter-spacing: .4px; backdrop-filter: blur(4px); display: inline-block; } /* Genre tag pills */ .npd-oc-tag { display: inline-flex !important; align-items: center; gap: 4px; color: #fff !important; font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 20px; line-height: 1.6; backdrop-filter: blur(3px); white-space: nowrap; pointer-events: auto; } .npd-oc-tag i { font-size: 9px; } /* ── BOTTOM overlay: episodes + author ───────────────────────────────── */ .npd-oc-bottom { position: absolute !important; bottom: 11px !important; left: 10px !important; right: 10px; z-index: 3 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px; pointer-events: none; } /* Episodes: primary-colour pill */ .npd-oc-episodes { background: var(--npd-primary, #5E1D2D) !important; color: #fff !important; font-size: 10px; font-weight: 700; padding: 2px 10px; border-radius: 20px; line-height: 1.6; display: inline-block; letter-spacing: .2px; } /* Author: white text */ .npd-oc-author { color: #fff !important; font-size: 12px; font-weight: 600; line-height: 1.3; display: flex !important; align-items: center; gap: 5px; text-shadow: 0 1px 5px rgba(0,0,0,.7); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .npd-oc-author i { font-size: 10px; opacity: .85; flex-shrink: 0; } /* ── Dark mode ───────────────────────────────────────────────────────── */ body.npd-dark .npd-oc-card { box-shadow: 0 3px 12px rgba(0,0,0,.5); } /* ══════════════════════════════════════════════════════════════════════ Poster Grid — [category_grid_poster_grid] Moved from inline