/* Theme Name: crecsowp Theme URI: https://branding.net.in/ Description: Custom WordPress theme designed to replicate the layout, typography, and accent styling of the Branding.net.in blog. Author: Antigravity Author URI: https://gemini.google.com/ Version: 1.2.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: crecsowp */ /* ========================================== 1. Theme Variables & Reset ========================================== */ :root { --accent-color: #F43676; --accent-color-hover: #d2265f; --text-color: #313131; --text-color-muted: #767676; --bg-color: #ffffff; --body-bg-color: #f7f7fa; --border-color: #e5e5eb; --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.04); --font-heading: 'Inter Tight', sans-serif; --font-body: 'Be Vietnam Pro', sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { /* Do NOT set overflow-x here. Setting overflow-x on silently forces overflow-y to 'auto', which turns into a new scroll container and breaks position:sticky on all descendant elements. */ } body { background-color: var(--body-bg-color); color: var(--text-color); font-family: var(--font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* overflow-x: clip prevents horizontal scrollbars without creating a new scroll container — unlike 'hidden' it does not change overflow-y to 'auto', so position:sticky continues to work correctly. */ overflow-x: clip; } a { color: var(--text-color); text-decoration: none; transition: color 0.25s ease; } a:hover { color: var(--accent-color); } img { height: auto; max-width: 100%; vertical-align: middle; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.25; margin-bottom: 0.8rem; color: var(--text-color); } /* ========================================== 2. Main Structure & Container ========================================== */ .site { display: flex; flex-direction: column; min-height: 100vh; } .bloghash-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; } .site-main { padding: 40px 0; position: relative; z-index: 10; } .site-main > .bloghash-container { display: grid; grid-template-columns: 1fr; gap: 30px; } @media (min-width: 992px) { .site-main > .bloghash-container { grid-template-columns: 8fr 4fr; align-items: start; /* Required: lets sticky work inside the sidebar column */ } } /* Glassmorphism background blobs */ .bloghash-glassmorphism { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; pointer-events: none; } .bloghash-glassmorphism .block { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.15; } .bloghash-glassmorphism .block.one { background-color: var(--accent-color); width: 400px; height: 400px; top: 10%; right: 5%; } .bloghash-glassmorphism .block.two { background-color: #4721fb; width: 500px; height: 500px; bottom: 10%; left: 5%; } /* ========================================== 3. Header & Navigation ========================================== */ .site-header { background-color: var(--bg-color); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); } .bloghash-header-container { display: flex; align-items: center; justify-content: space-between; height: 85px; } .bloghash-logo img { max-height: 55px; width: auto; } /* ── Main Navigation ── */ .main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 0; } /* Top-level items */ .main-navigation ul > li { position: relative; } .main-navigation ul > li > a { padding: 10px 16px; white-space: nowrap; } .main-navigation a { font-family: var(--font-heading); font-size: 15px; font-weight: 600; text-transform: capitalize; position: relative; display: flex; align-items: center; gap: 4px; color: var(--text-color); transition: color 0.2s; } /* Underline animation — top level only */ .main-navigation ul > li > a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 16px; right: 16px; background-color: var(--accent-color); transition: width 0.3s ease; } .main-navigation ul > li:hover > a::after, .main-navigation ul > li.current-menu-item > a::after, .main-navigation ul > li.current-menu-ancestor > a::after { width: calc(100% - 32px); } .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { color: var(--accent-color); } /* Dropdown caret for parents */ .main-navigation ul > li.menu-item-has-children > a::before { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: auto; position: absolute; right: 6px; top: 50%; margin-top: -5px; transition: transform 0.2s; } .main-navigation ul > li.menu-item-has-children > a { padding-right: 24px; } .main-navigation ul > li.menu-item-has-children:hover > a::before { transform: rotate(-135deg); margin-top: -2px; } /* ── Dropdown sub-menu ── */ .main-navigation ul .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--bg-color, #fff); border: 1px solid var(--border-color, #e8e8e8); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); z-index: 9999; padding: 6px 0; flex-direction: column; gap: 0; /* animate in */ opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; } /* Show on hover */ .main-navigation ul li:hover > .sub-menu { display: flex; opacity: 1; transform: translateY(0); pointer-events: auto; } .main-navigation ul .sub-menu li { position: relative; width: 100%; } .main-navigation ul .sub-menu a { font-size: 14px; font-weight: 500; padding: 9px 18px; white-space: nowrap; display: block; color: var(--text-color); border-radius: 0; transition: background 0.15s, color 0.15s; } /* No underline animation inside dropdowns */ .main-navigation ul .sub-menu a::after { display: none; } .main-navigation ul .sub-menu a:hover, .main-navigation ul .sub-menu .current-menu-item > a { background: var(--body-bg-color, #f5f5f5); color: var(--accent-color); } /* Separator line between items */ .main-navigation ul .sub-menu li + li { border-top: 1px solid var(--border-color, #f0f0f0); } /* ── Nested (3rd level) sub-menus open to the right ── */ .main-navigation ul .sub-menu .sub-menu { top: 0; left: 100%; border-radius: 8px; } .main-navigation ul .sub-menu li:hover > .sub-menu { display: flex; opacity: 1; transform: translateY(0); pointer-events: auto; } /* Nested caret pointing right */ .main-navigation ul .sub-menu li.menu-item-has-children > a::before { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); position: absolute; right: 14px; top: 50%; margin-top: -3px; transition: none; } .main-navigation .current-menu-item a { color: var(--accent-color); } .bloghash-header-widgets { display: flex; align-items: center; } .bloghash-search-btn { background: none; border: none; cursor: pointer; color: var(--text-color); padding: 5px; display: flex; align-items: center; justify-content: center; } .bloghash-search-btn:hover { color: var(--accent-color); } /* ========================================== 4. News Ticker ========================================== */ .bloghash-ticker { background-color: var(--bg-color); border-bottom: 1px solid var(--border-color); padding: 12px 0; overflow: hidden; } .bloghash-ticker-container { display: flex; align-items: center; gap: 15px; } .bloghash-ticker .widget-title { background-color: var(--accent-color); color: #fff; padding: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; border-radius: 3px; white-space: nowrap; margin-bottom: 0; } .ticker-slider-box { flex-grow: 1; overflow: hidden; position: relative; height: 24px; } .ticker-slider-wrap { display: flex; animation: tickerLoop 30s linear infinite; white-space: nowrap; gap: 40px; } .ticker-item h6 { font-size: 14px; margin-bottom: 0; font-weight: 500; } .ticker-item a:hover { color: var(--accent-color); } @keyframes tickerLoop { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } /* ========================================== 5. Page Header & Breadcrumbs ========================================== */ .page-header { background-color: var(--bg-color); padding: 35px 0; border-bottom: 1px solid var(--border-color); } .page-title { font-size: 32px; font-weight: 700; margin-bottom: 5px; } .bloghash-page-header-description { color: var(--text-color-muted); font-size: 14px; max-width: 800px; margin-top: 10px; } /* ========================================== 6. Post List (Horizontal Cards) ========================================== */ .bloghash-flex-row { display: flex; flex-direction: column; gap: 25px; } .bloghash-article { background-color: var(--bg-color); border-radius: 8px; overflow: hidden; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); transition: transform 0.25s ease, box-shadow 0.25s ease; } .bloghash-article:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06); } .bloghash-blog-entry-wrapper { display: flex; flex-direction: column; } @media (min-width: 576px) { .bloghash-blog-entry-wrapper.bloghash-thumb-left { flex-direction: row; } } .bloghash-article .post-thumb { width: 100%; position: relative; overflow: hidden; } @media (min-width: 576px) { .bloghash-article .post-thumb { width: 38%; min-width: 220px; flex-shrink: 0; } } .bloghash-article .post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .bloghash-article:hover .post-thumb img { transform: scale(1.04); } .bloghash-entry-content-wrapper { padding: 25px; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; } .post-category { margin-bottom: 8px; } .post-category .cat-links a { color: var(--accent-color); font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; } .bloghash-article .entry-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; line-height: 1.35; } .bloghash-article .entry-title a { color: var(--text-color); } .bloghash-article .entry-title a:hover { color: var(--accent-color); } .entry-summary { color: var(--text-color-muted); font-size: 14px; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .entry-meta { display: flex; align-items: center; gap: 15px; font-size: 12px; color: var(--text-color-muted); border-top: 1px solid var(--border-color); padding-top: 12px; margin-top: auto; } .post-author { display: flex; align-items: center; gap: 8px; } .author-avatar img { border-radius: 50%; width: 26px; height: 26px; } .author-name { font-weight: 600; color: var(--text-color); } .posted-on { display: flex; align-items: center; gap: 5px; } .posted-on svg { width: 12px; height: 12px; fill: currentColor; } /* ========================================== 7. Sidebar Widgets ========================================== */ .bloghash-sidebar-container { display: flex; flex-direction: column; gap: 30px; /* align-self:start is required for position:sticky to work on children. In a CSS grid, grid items stretch to full row height by default. A fully-stretched sidebar has no room to scroll relative to its parent, which makes sticky silently do nothing. align-self:start ensures the sidebar is only as tall as its own content, giving sticky the height differential it needs. Set here on the element itself so it cannot be accidentally overridden by a parent align-items change. */ align-self: start; } .bloghash-sidebar-widget { background-color: var(--bg-color); border-radius: 8px; padding: 25px; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); } .widget-title { font-size: 16px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--accent-color); display: inline-block; text-transform: uppercase; letter-spacing: 0.5px; } /* Recent Posts widget listing with thumbnails */ .hester-posts-list-widget { display: flex; gap: 15px; margin-bottom: 18px; align-items: flex-start; } .hester-posts-list-widget:last-child { margin-bottom: 0; } .hester-posts-list-widget-thumb { width: 65px; height: 65px; border-radius: 4px; overflow: hidden; flex-shrink: 0; } .hester-posts-list-widget-thumb img { width: 100%; height: 100%; object-fit: cover; } .hester-posts-list-widget-details { display: flex; flex-direction: column; gap: 4px; } .hester-posts-list-widget-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; } .hester-posts-list-widget-meta { font-size: 11px; color: var(--text-color-muted); display: flex; align-items: center; gap: 4px; } .hester-posts-list-widget-meta svg { width: 10px; height: 10px; fill: currentColor; } /* Categories widget list */ .widget_categories ul, .widget_archive ul { list-style: none; } .widget_categories li, .widget_archive li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--border-color); font-size: 14px; } .widget_categories li:last-child, .widget_archive li:last-child { border-bottom: none; } .widget_categories li span, .widget_archive li span { background-color: var(--body-bg-color); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; } /* ========================================== 8. Single Post Styling ========================================== */ .single-post .site-main > .bloghash-container { grid-template-columns: 1fr; } @media (min-width: 992px) { .single-post .site-main > .bloghash-container { grid-template-columns: 8fr 4fr; align-items: start; /* Required: lets sticky work inside the sidebar column */ } } .single-post-wrapper { background-color: var(--bg-color); border-radius: 8px; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); overflow: hidden; } .single-post-wrapper .post-thumb { width: 100%; max-height: 480px; overflow: hidden; } .single-post-wrapper .post-thumb img { width: 100%; height: 100%; object-fit: cover; } .single-post-wrapper .entry-content-container { padding: 30px; } .single-post-wrapper .entry-header { margin-bottom: 25px; } .single-post-wrapper .entry-title { font-size: 30px; font-weight: 700; margin-bottom: 15px; line-height: 1.25; } .single-post-wrapper .entry-meta { border-top: none; border-bottom: 1px solid var(--border-color); padding-top: 0; padding-bottom: 15px; margin-bottom: 0; /* gap handled by featured image margin-top below */ } /* ── Post Meta Byline: "Published By [Author] on [Date]" ── */ .entry-meta-byline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .entry-meta-byline .author-avatar img { width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; } .entry-meta-byline .entry-meta-text { font-size: 13px; color: var(--text-color-muted); line-height: 1.5; } .entry-meta-byline .author-name, .entry-meta-byline a.author-name { font-weight: 600; color: var(--heading-color); margin: 0 3px; text-decoration: none; } .entry-meta-byline .author-name:hover { color: var(--accent-color); text-decoration: underline; } .entry-meta-byline .entry-date { font-style: normal; margin-left: 3px; font-weight: 500; } /* ── Featured Image: Now sits after post meta ── */ .single-post-featured-image { margin-top: 24px; margin-bottom: 28px; border-radius: 8px; overflow: hidden; } .single-post-featured-image img { width: 100%; height: auto; display: block; border-radius: 8px; } .entry-content { font-size: 16px; line-height: 1.8; } .entry-content p { margin-bottom: 1.5rem; } .entry-content h2 { font-size: 22px; margin-top: 2rem; margin-bottom: 1rem; border-left: 4px solid var(--accent-color); padding-left: 12px; } .entry-content h3 { font-size: 18px; margin-top: 1.5rem; margin-bottom: 0.8rem; } .entry-content hr { border: 0; height: 1px; background-color: var(--border-color); margin: 2rem 0; } .entry-content ul, .entry-content ol { margin-bottom: 1.5rem; padding-left: 20px; } .entry-content li { margin-bottom: 0.5rem; } /* ========================================== 9. Pagination ========================================== */ .navigation.pagination { margin-top: 35px; } .navigation.pagination .nav-links { display: flex; justify-content: center; gap: 8px; list-style: none; } .navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 4px; background-color: var(--bg-color); border: 1px solid var(--border-color); font-weight: 600; font-size: 14px; transition: all 0.2s ease; } .navigation.pagination .page-numbers.current, .navigation.pagination .page-numbers:hover { background-color: var(--accent-color); color: #fff; border-color: var(--accent-color); } .navigation.pagination .page-numbers.dots { background: none; border: none; color: var(--text-color-muted); } /* ========================================== 10. Footer Section ========================================== */ .site-footer { background-color: var(--bg-color); border-top: 1px solid var(--border-color); padding: 30px 0; margin-top: auto; font-size: 13.5px; color: var(--text-color-muted); } .bloghash-copyright-container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 15px; } @media (min-width: 768px) { .bloghash-copyright-container { flex-direction: row; } } .footer-nav ul { list-style: none; display: flex; gap: 20px; } .footer-nav a { color: var(--text-color-muted); } .footer-nav a:hover { color: var(--accent-color); } /* ---------------------------------------- Popular Posts Widget ---------------------------------------- */ .crecsowp-popular-posts-list { list-style: none; margin: 0; padding: 0; } .crecsowp-popular-post-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); } .crecsowp-popular-post-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .crecsowp-popular-post-thumb { display: block; width: 70px; height: 70px; flex-shrink: 0; border-radius: 6px; overflow: hidden; } .crecsowp-popular-post-thumb img { width: 70px; height: 70px; object-fit: cover; display: block; transition: transform 0.3s ease; } .crecsowp-popular-post-item:hover .crecsowp-popular-post-thumb img { transform: scale(1.06); } .crecsowp-popular-post-details { display: flex; flex-direction: column; gap: 5px; justify-content: center; } .crecsowp-popular-post-title { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--heading-color); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .crecsowp-popular-post-title:hover { color: var(--accent-color); } .crecsowp-popular-post-date { font-size: 11px; color: var(--text-color-muted); display: flex; align-items: center; gap: 4px; } .crecsowp-popular-post-date svg { width: 11px; height: 11px; fill: currentColor; flex-shrink: 0; } /* ---------------------------------------- Sticky Sidebar (desktop only) The ENTIRE sidebar container is sticky, not just the last widget. Reason: sticking only the last widget creates a tiny scroll window (sidebar_height - last_widget_offsetTop) that becomes 0 or even negative when the sidebar is tall — the sticky silently never fires. When the sidebar fits inside the viewport the JS in wp_footer keeps it pinned at --crecsowp-sticky-top. When the sidebar is taller than the viewport the JS progressively shifts the sidebar upward as the user scrolls so the LAST widget is visible by the time they reach the bottom of the article. Override --crecsowp-sticky-top in your child theme CSS if your header height differs from the default 85 px + 20 px gap. ---------------------------------------- */ :root { --crecsowp-sticky-top: 105px; /* 85px sticky header + 20px breathing room */ } @media (min-width: 992px) { .bloghash-sidebar-container { position: sticky; top: var(--crecsowp-sticky-top); /* align-self: start is already set on this element — required so the sidebar's height equals its content, not the grid row */ } } /* ============================================================ POST NAVIGATION — Prev / Next Cards ============================================================ */ .crecsowp-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0; } .crecsowp-nav-card { display: flex; align-items: center; gap: 14px; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px 18px; text-decoration: none; color: var(--text-color); box-shadow: var(--card-shadow); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; min-width: 0; } .crecsowp-nav-card:hover { border-color: var(--accent-color); box-shadow: 0 6px 20px rgba(244, 54, 118, 0.12); transform: translateY(-2px); color: var(--text-color); } .crecsowp-nav-card--empty { pointer-events: none; opacity: 0; } /* Thumbnail */ .crecsowp-nav-thumb { display: block; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; flex-shrink: 0; } .crecsowp-nav-thumb img { width: 56px; height: 56px; object-fit: cover; display: block; } /* Text area */ .crecsowp-nav-inner { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; } .crecsowp-nav-card--next .crecsowp-nav-inner { text-align: right; } .crecsowp-nav-label { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent-color); } .crecsowp-nav-card--next .crecsowp-nav-label { justify-content: flex-end; } .crecsowp-nav-label svg { width: 16px; height: 16px; fill: var(--accent-color); flex-shrink: 0; } .crecsowp-nav-title { font-size: 13.5px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-color); } .crecsowp-nav-card:hover .crecsowp-nav-title { color: var(--accent-color); } @media ( max-width: 600px ) { .crecsowp-post-nav { grid-template-columns: 1fr; } .crecsowp-nav-card--empty { display: none; } } /* ============================================================ COMMENTS AREA ============================================================ */ .crecsowp-comments-area { margin-top: 10px; padding-top: 36px; border-top: 2px solid var(--border-color); } /* Title */ .crecsowp-comments-title { font-size: 18px; font-weight: 700; margin-bottom: 28px; padding-bottom: 12px; border-bottom: 2px solid var(--accent-color); display: inline-block; font-family: var(--font-heading); } .crecsowp-comments-title span:first-child { color: var(--accent-color); margin-right: 4px; } /* Comment list reset */ .crecsowp-comment-list, .crecsowp-comment-list ol { list-style: none; margin: 0; padding: 0; } /* Nested replies indent */ .crecsowp-comment-list .children { padding-left: 28px; border-left: 2px solid var(--border-color); margin-top: 16px; } /* Single comment */ .crecsowp-comment { margin-bottom: 24px; } .crecsowp-comment-body { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 10px; padding: 20px 22px; box-shadow: var(--card-shadow); } /* Comment header row */ .crecsowp-comment-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .crecsowp-comment-avatar { flex-shrink: 0; } .crecsowp-avatar { width: 46px !important; height: 46px !important; border-radius: 50% !important; border: 2px solid var(--border-color); display: block; } .crecsowp-comment-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .crecsowp-comment-author { font-weight: 700; font-size: 14px; color: var(--text-color); } .crecsowp-comment-author a { color: inherit; text-decoration: none; } .crecsowp-comment-author a:hover { color: var(--accent-color); } .crecsowp-comment-date { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-color-muted); text-decoration: none; } .crecsowp-comment-date:hover { color: var(--accent-color); } .crecsowp-comment-date svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; } /* Reply link */ .crecsowp-comment-reply { margin-left: auto; } .crecsowp-comment-reply .comment-reply-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--accent-color); text-decoration: none; padding: 5px 12px; border: 1px solid var(--accent-color); border-radius: 20px; transition: background 0.2s ease, color 0.2s ease; } .crecsowp-comment-reply .comment-reply-link:hover { background: var(--accent-color); color: #fff; } /* Comment text */ .crecsowp-comment-content { font-size: 14.5px; line-height: 1.75; color: var(--text-color); } .crecsowp-comment-content p { margin: 0 0 10px; } .crecsowp-comment-content p:last-child { margin-bottom: 0; } /* Moderation notice */ .crecsowp-comment-awaiting { font-size: 12.5px; color: var(--text-color-muted); background: var(--body-bg-color); border-radius: 5px; padding: 6px 12px; margin-bottom: 10px; } /* No comments / closed */ .crecsowp-no-comments { color: var(--text-color-muted); font-size: 14px; margin-bottom: 24px; } /* ============================================================ COMMENT FORM ============================================================ */ .crecsowp-comment-form-wrap { margin-top: 36px; padding-top: 30px; border-top: 2px solid var(--border-color); } .comment-reply-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; font-family: var(--font-heading); } .comment-reply-title small { font-size: 13px; font-weight: 400; margin-left: 10px; } .comment-reply-title small a { color: var(--accent-color); text-decoration: none; } /* Logged-in notice */ .crecsowp-comment-form-wrap .logged-in-as { font-size: 13px; color: var(--text-color-muted); margin-bottom: 20px; } .crecsowp-comment-form-wrap .logged-in-as a { color: var(--accent-color); } /* Form layout */ .crecsowp-comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .crecsowp-form-field { display: flex; flex-direction: column; gap: 6px; margin: 0; } .crecsowp-form-field--full, .form-submit { grid-column: 1 / -1; } .crecsowp-form-field label { font-size: 13px; font-weight: 600; color: var(--text-color); } .crecsowp-form-field label .required { color: var(--accent-color); margin-left: 2px; } .crecsowp-comment-form input[type="text"], .crecsowp-comment-form input[type="email"], .crecsowp-comment-form input[type="url"], .crecsowp-comment-form textarea { width: 100%; padding: 10px 14px; font-size: 14px; font-family: var(--font-body); color: var(--text-color); background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 8px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .crecsowp-comment-form input[type="text"]:focus, .crecsowp-comment-form input[type="email"]:focus, .crecsowp-comment-form input[type="url"]:focus, .crecsowp-comment-form textarea:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(244, 54, 118, 0.1); } .crecsowp-comment-form textarea { resize: vertical; min-height: 130px; line-height: 1.6; } .crecsowp-submit-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 28px; background: var(--accent-color); color: #fff !important; font-size: 14px; font-weight: 600; font-family: var(--font-body); border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; letter-spacing: 0.3px; } .crecsowp-submit-btn:hover { background: var(--accent-color-hover); transform: translateY(-1px); } .crecsowp-submit-btn:active { transform: translateY(0); } @media ( max-width: 640px ) { .crecsowp-comment-form { grid-template-columns: 1fr; } } /* ============================================================ BREADCRUMBS — Single Post ============================================================ */ .crecsowp-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text-color-muted); margin-bottom: 14px; } .crecsowp-breadcrumbs a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-color-muted); text-decoration: none; transition: color 0.2s ease; } .crecsowp-breadcrumbs a:hover { color: var(--accent-color); } .crecsowp-breadcrumbs a svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; } .crecsowp-breadcrumb-sep { display: inline-flex; align-items: center; color: var(--border-color); } .crecsowp-breadcrumb-sep svg { width: 14px; height: 14px; fill: currentColor; } .crecsowp-breadcrumb-current { color: var(--text-color); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } /* ============================================================ SINGLE POST EXCERPT — Below Title ============================================================ */ .single-post-excerpt { font-size: 16px; line-height: 1.7; color: var(--text-color-muted); margin-top: 10px; margin-bottom: 0; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); } /* ============================================================ AD SLOTS — Before / After Content ============================================================ */ .crecsowp-ad-slot { width: 100%; text-align: center; overflow: hidden; } .crecsowp-ad-slot--before_content { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border-color); } .crecsowp-ad-slot--after_content { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border-color); } /* Responsive: let ad units reflow on mobile */ .crecsowp-ad-slot ins, .crecsowp-ad-slot iframe, .crecsowp-ad-slot > div { max-width: 100%; } /* ============================================================ RELATED POSTS — 3-column grid ============================================================ */ .crecsowp-related-posts { margin-top: 36px; padding-top: 32px; border-top: 2px solid var(--border-color); } .crecsowp-related-title { font-size: 17px; font-weight: 700; font-family: var(--font-heading); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; } .crecsowp-related-title::after { content: ''; flex: 1; height: 2px; background-color: var(--border-color, #eee); } /* ── Related Posts Grid ── */ .crecsowp-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* ── Related Post Card ── */ .crecsowp-related-card { background: var(--bg-color); border-radius: 10px; overflow: hidden; border: 1px solid var(--border-color); display: flex; flex-direction: column; transition: box-shadow 0.25s ease, transform 0.25s ease; } .crecsowp-related-card:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10); transform: translateY(-4px); } /* ── Thumbnail wrapper ── */ .crecsowp-related-thumb { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--border-color); } .crecsowp-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .crecsowp-related-card:hover .crecsowp-related-thumb img { transform: scale(1.06); } /* ── Category badge on thumbnail ── */ .crecsowp-related-cat { position: absolute; top: 10px; left: 10px; background: var(--accent-color, #4f46e5); color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 4px; line-height: 1.5; } /* ── Card body ── */ .crecsowp-related-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; } /* ── Card title ── */ .crecsowp-related-post-title { font-size: 15px; font-weight: 600; line-height: 1.45; margin: 0; } .crecsowp-related-post-title a { color: var(--heading-color); text-decoration: none; } .crecsowp-related-post-title a:hover { color: var(--accent-color); } /* ── Meta row (date) ── */ .crecsowp-related-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-color-muted); } .crecsowp-related-date { display: inline-flex; align-items: center; gap: 4px; } .crecsowp-related-date svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; } /* ── Excerpt ── */ .crecsowp-related-excerpt { font-size: 13px; color: var(--text-color-muted); line-height: 1.6; margin: 0; flex: 1; } /* ── Read More link ── */ .crecsowp-related-read-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent-color); text-decoration: none; margin-top: 4px; transition: gap 0.2s ease; } .crecsowp-related-read-more:hover { color: var(--accent-color); gap: 8px; } .crecsowp-related-read-more svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; transition: transform 0.2s ease; } .crecsowp-related-read-more:hover svg { transform: translateX(3px); } /* ============================================================ RESPONSIVE & MOBILE NAV Rule: desktop nav visible on ≥992px, hidden on <992px. Mobile drawer hidden on ≥992px, available on <992px. display:none is the ONLY show/hide mechanism — no relying on transform to keep things invisible. ============================================================ */ /* ─── Hamburger — hidden on desktop, shown on mobile ─── */ .bloghash-hamburger { display: none; /* hidden until <992px media query */ flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; flex-shrink: 0; z-index: 1100; order: 3; } .bloghash-hamburger:hover { background: var(--body-bg-color, #f5f5f5); } .hamburger-bar { display: block; width: 22px; height: 2px; background: var(--text-color); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease, width 0.2s ease; transform-origin: center; } .bloghash-hamburger.is-active .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .bloghash-hamburger.is-active .hamburger-bar:nth-child(2) { opacity: 0; width: 0; } .bloghash-hamburger.is-active .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ─── Mobile Nav Drawer — hidden on ALL screens by default ─── */ .crecsowp-mobile-nav { display: none; /* always hidden unless overridden in <992px block below */ position: fixed; top: 0; left: 0; width: 300px; max-width: 85vw; height: 100%; background: var(--bg-color, #fff); z-index: 99999; flex-direction: column; box-shadow: 4px 0 30px rgba(0,0,0,0.15); overflow-y: auto; -webkit-overflow-scrolling: touch; animation: crecsowpSlideIn 0.3s cubic-bezier(0.4,0,0.2,1) forwards; } @keyframes crecsowpSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* ─── Overlay — hidden on ALL screens by default ─── */ .crecsowp-mobile-overlay { display: none; /* always hidden unless overridden below */ position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 99998; } /* ─── Prevent body scroll when drawer open ─── */ body.crecsowp-nav-open { overflow: hidden; } /* ─── Mobile nav inner components (always styled, just shown inside drawer) ─── */ .crecsowp-mobile-nav__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-color, #e8e8e8); background: var(--bg-color); position: sticky; top: 0; z-index: 2; flex-shrink: 0; } .crecsowp-mobile-nav__title { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--text-color); } .crecsowp-mobile-nav__close { background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--text-color); padding: 0 4px; transition: color 0.2s; } .crecsowp-mobile-nav__close:hover { color: var(--accent-color); } .crecsowp-mobile-nav__search { padding: 14px 16px; border-bottom: 1px solid var(--border-color, #e8e8e8); flex-shrink: 0; } .crecsowp-mobile-nav__search .search-form { display: flex; gap: 8px; } .crecsowp-mobile-nav__search .search-field { flex: 1; padding: 8px 12px; border: 1px solid var(--border-color, #ddd); border-radius: 6px; font-size: 14px; background: var(--body-bg-color, #f5f5f5); color: var(--text-color); } .crecsowp-mobile-nav__search .search-submit { padding: 8px 14px; background: var(--accent-color); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; } /* Mobile menu list */ .crecsowp-mobile-nav__menu ul { list-style: none; margin: 0; padding: 0; } .crecsowp-mobile-nav__menu > ul > li { border-bottom: 1px solid var(--border-color, #f0f0f0); } .crecsowp-mobile-nav__menu li { position: relative; } .crecsowp-mobile-nav__menu a { display: block; padding: 13px 48px 13px 20px; font-size: 15px; font-weight: 600; font-family: var(--font-heading); color: var(--text-color); transition: color 0.15s, background 0.15s; } .crecsowp-mobile-nav__menu a:hover, .crecsowp-mobile-nav__menu .current-menu-item > a { color: var(--accent-color); background: var(--body-bg-color, #f9f9f9); } /* Sub-menu accordion toggle button */ .crecsowp-mob-sub-toggle { position: absolute; top: 0; right: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--text-color); z-index: 2; } .crecsowp-mob-sub-toggle svg { fill: currentColor; transition: transform 0.25s; } .crecsowp-mob-sub-toggle.is-open svg { transform: rotate(180deg); } .crecsowp-mob-sub-toggle:hover { color: var(--accent-color); } /* Mobile sub-menus — accordion style */ .crecsowp-mobile-nav__menu .sub-menu { background: var(--body-bg-color, #f9f9f9); overflow: hidden; transition: max-height 0.3s ease; } .crecsowp-mobile-nav__menu .sub-menu a { padding: 10px 48px 10px 36px; font-size: 14px; font-weight: 500; } .crecsowp-mobile-nav__menu .sub-menu .sub-menu a { padding-left: 52px; } /* ================================================================ BREAKPOINT RULES — the only place we flip display values ================================================================ */ /* DESKTOP (≥ 992px): desktop nav ON, mobile elements OFF — always */ @media (min-width: 992px) { .bloghash-primary-nav { display: block !important; } .bloghash-hamburger { display: none !important; } .crecsowp-mobile-nav { display: none !important; } .crecsowp-mobile-overlay { display: none !important; } } /* MOBILE (< 992px): desktop nav OFF, mobile drawer available */ @media (max-width: 991px) { .bloghash-primary-nav { display: none !important; } .bloghash-header-widget__search { display: none !important; } .bloghash-hamburger { display: flex !important; } .bloghash-header-container { height: 65px; } /* Drawer: only flex when JS adds .is-open */ .crecsowp-mobile-nav.is-open { display: flex !important; } /* Overlay: only block when JS adds .is-visible */ .crecsowp-mobile-overlay.is-visible { display: block !important; } } /* ── Layout responsiveness ── */ @media (max-width: 767px) { .bloghash-container { padding: 0 16px; } .site-main { padding: 24px 0; } /* Single post */ .single-post-wrapper .entry-content-container { padding: 20px 16px; } .single-post-wrapper .entry-title { font-size: 22px; line-height: 1.35; } /* Blog listing */ .bloghash-blog-entry-wrapper.bloghash-thumb-left { flex-direction: column; } .bloghash-article .post-thumb { width: 100%; min-width: unset; max-height: 220px; } .bloghash-entry-content-wrapper { padding: 16px; } /* Page */ .page-title { font-size: 24px; } .site-main > .bloghash-container { gap: 20px; } /* Post nav */ .crecsowp-post-nav { grid-template-columns: 1fr; gap: 12px; } .crecsowp-nav-card--empty { display: none; } /* Related posts → 1 col */ .crecsowp-related-grid { grid-template-columns: 1fr; } /* Comments */ .crecsowp-comment-form-fields { grid-template-columns: 1fr; } .crecsowp-comment-body { padding: 14px; } /* Misc */ .crecsowp-breadcrumbs { flex-wrap: wrap; font-size: 12px; } .entry-meta { flex-wrap: wrap; gap: 8px; } .bloghash-ticker-container { gap: 10px; } .footer-nav ul { flex-wrap: wrap; justify-content: center; gap: 10px; } } @media (max-width: 480px) { .single-post-wrapper .entry-title { font-size: 19px; } .single-post-wrapper .entry-content-container { padding: 16px 12px; } .bloghash-header-container { height: 58px; } .bloghash-logo img { max-height: 40px; } .site-title { font-size: 18px; } .crecsowp-related-grid { grid-template-columns: 1fr; } .crecsowp-comment-list .children { padding-left: 14px; } } /* Related posts: 2-col on medium screens */ @media (min-width: 576px) and (max-width: 899px) { .crecsowp-related-grid { grid-template-columns: 1fr 1fr; } } /* ========================================== TABLET (768px – 991px) ========================================== */ @media (min-width: 768px) and (max-width: 991px) { /* Container */ .bloghash-container { padding: 0 24px; } /* Header */ .bloghash-header-container { height: 70px; } /* Page header */ .page-title { font-size: 28px; } .page-description { font-size: 15px; } /* Blog listing — keep horizontal card layout but smaller image */ .bloghash-blog-entry-wrapper.bloghash-thumb-left { flex-direction: row; } .bloghash-article .post-thumb { width: 200px; min-width: 200px; } /* Content + sidebar stack on tablet */ .site-main > .bloghash-container { grid-template-columns: 1fr; gap: 24px; } /* Single post */ .single-post-wrapper .entry-title { font-size: 26px; } .single-post-wrapper .entry-content-container { padding: 28px 24px; } /* Related posts 2-col */ .crecsowp-related-grid { grid-template-columns: 1fr 1fr; } /* Post nav */ .crecsowp-post-nav { grid-template-columns: 1fr 1fr; } /* Footer */ .footer-nav ul { flex-wrap: wrap; gap: 12px; } /* Ticker */ .bloghash-ticker-container { gap: 12px; } } /* ========================================== BACK TO TOP BUTTON ========================================== */ .crecsowp-back-to-top { position: fixed; bottom: 28px; right: 28px; z-index: 9999; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-color, #4f46e5); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease; } .crecsowp-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .crecsowp-back-to-top:hover { background: var(--accent-color-dark, #3730a3); transform: translateY(-2px); } @media (max-width: 480px) { .crecsowp-back-to-top { bottom: 16px; right: 16px; width: 40px; height: 40px; } } /* ============================================================ FULL-WIDTH AD BANNER — Above Single Post Sits between the sticky header and .site-main. Paste any ad network code (Google Ads, etc.) via Appearance → Customize → Ad Management → Above Single Post Ad. ============================================================ */ .crecsowp-ad-above-post { width: 100%; background: var(--bg-color, #fff); border-bottom: 1px solid var(--border-color, #eee); padding: 16px 0; margin-top: 0; margin-bottom: 0; text-align: center; overflow: hidden; line-height: 0; /* collapse whitespace around ad iframe */ } .crecsowp-ad-above-post ins { display: block; max-width: 100%; } /* Ensure script/style tags inside the ad slot are never rendered as visible text */ .crecsowp-ad-above-post script, .crecsowp-ad-above-post style { display: none !important; } @media (max-width: 767px) { .crecsowp-ad-above-post { padding: 12px 0; } }