/** * Rebgr Blog Theme — Apple Premium UI Layer * apple-premium.css (v2.0) * * This file adds the Apple.com-quality design touches: * - True Inter typography with optical sizing * - Frosted glass header refinements * - Hero section display typography * - 3D perspective coverflow * - Apple-exact footer styling * - Premium sidebar widgets * - Scroll-reveal animations * - Mobile menu slide panel * - Dark mode sun/moon icon toggle */ /* ============================================================ 0. Apple Fonts — Inter optical sizing ============================================================ */ @supports (font-size-adjust: 1) { body { font-size-adjust: 0.507; } } /* ============================================================ 1. Global Selection + Scrollbar ============================================================ */ ::selection { background: rgba(0, 113, 227, 0.15); color: var(--vv-ink); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 8px; } html[scheme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); } /* ============================================================ 2. Header — Apple Nav Bar ============================================================ */ .rebgr-header { /* Hairline exactly like Apple's nav */ border-bottom: 0.5px solid var(--vv-header-border) !important; } .rebgr-header-shell { display: flex; align-items: center; gap: 1.25rem; height: 52px; /* Apple nav exact height */ padding-top: 0 !important; padding-bottom: 0 !important; } .rebgr-header-brand { flex-shrink: 0; } .rebgr-primary-nav { flex: 1; } /* Apple nav links — no background pills, just text + animated underline */ .rebgr-primary-nav .vv-primary-menu, .rebgr-primary-nav ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0.15rem; } .rebgr-primary-nav li a { display: inline-block; padding: 0.4rem 0.85rem; color: var(--vv-ink) !important; font-size: 0.92rem; font-weight: 400; letter-spacing: 0; border-radius: 6px; transition: background 200ms ease, color 200ms ease; text-decoration: none !important; } .rebgr-primary-nav li a:hover { background: var(--vv-header-hover-bg); color: var(--vv-ink) !important; } .rebgr-primary-nav li.current-menu-item > a { color: var(--vv-apple-blue) !important; font-weight: 600; } html[scheme="dark"] .rebgr-primary-nav li a { color: var(--vv-ink) !important; } /* ============================================================ 3. Header Actions — Search, Toggle, Subscribe, Mobile ============================================================ */ .rebgr-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Search pill */ .rebgr-search-box .vv-header-search-form { display: flex; align-items: center; background: rgba(0, 0, 0, 0.05); border-radius: 999px; padding: 0.3rem 0.75rem; gap: 0.35rem; border: 1px solid transparent; transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } html[scheme="dark"] .rebgr-search-box .vv-header-search-form { background: rgba(255, 255, 255, 0.07); } .rebgr-search-box .vv-header-search-form:focus-within { background: #fff; border-color: var(--vv-apple-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); } html[scheme="dark"] .rebgr-search-box .vv-header-search-form:focus-within { background: var(--vv-surface); } .rebgr-search-box .vv-header-search-input { background: transparent; border: none; outline: none; font-size: 0.875rem; color: var(--vv-ink); width: 140px; transition: width 300ms ease; padding: 0; } .rebgr-search-box .vv-header-search-form:focus-within .vv-header-search-input { width: 200px; } .rebgr-search-box .vv-header-search-submit { background: none; border: none; padding: 0; cursor: pointer; color: var(--vv-muted); display: flex; align-items: center; } /* Dark mode toggle — Apple-style SVG icon swap */ .rebgr-theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: none; border: none; cursor: pointer; color: var(--vv-ink); transition: background 200ms ease; } .rebgr-theme-toggle:hover { background: var(--vv-header-hover-bg); } /* In light mode: show moon (to switch to dark), hide sun */ .rebgr-icon-sun { display: none !important; } .rebgr-icon-moon { display: block !important; } /* In dark mode: show sun (to switch to light), hide moon */ html[scheme="dark"] .rebgr-icon-sun, html[data-theme="dark"] .rebgr-icon-sun, html.dark-mode .rebgr-icon-sun, body.dark-mode .rebgr-icon-sun { display: block !important; } html[scheme="dark"] .rebgr-icon-moon, html[data-theme="dark"] .rebgr-icon-moon, html.dark-mode .rebgr-icon-moon, body.dark-mode .rebgr-icon-moon { display: none !important; } /* Subscribe button — Apple blue pill */ .rebgr-subscribe-btn, .subscribe-button { display: inline-flex; align-items: center; padding: 0.42rem 1rem; background: var(--vv-apple-blue); color: #ffffff !important; font-size: 0.875rem; font-weight: 500; border-radius: 999px; text-decoration: none !important; transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease; white-space: nowrap; } .rebgr-subscribe-btn:hover, .subscribe-button:hover { background: var(--vv-apple-blue-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 113, 227, 0.30); } /* Mobile menu button */ .rebgr-mobile-menu-btn { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; cursor: pointer; color: var(--vv-ink); border-radius: 8px; transition: background 200ms ease; } .rebgr-mobile-menu-btn:hover { background: var(--vv-header-hover-bg); } /* Mobile panel */ .rebgr-mobile-panel { display: none; overflow: hidden; max-height: 0; transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1); border-top: 0.5px solid var(--vv-header-border); background: var(--vv-header-glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .rebgr-mobile-panel.is-open { max-height: 520px; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15); } .rebgr-mobile-panel-inner { padding: 1rem 1.25rem 1.25rem; } .rebgr-mobile-search { margin-bottom: 0.85rem; } .rebgr-mobile-search .vv-header-search-form { display: flex; align-items: center; width: 100%; background: var(--vv-header-hover-bg, rgba(0,0,0,0.05)); border: 1px solid var(--vv-header-border, rgba(0,0,0,0.1)); border-radius: 10px; padding: 2px 8px; } .rebgr-mobile-search .vv-header-search-input { flex: 1; border: none; background: transparent; padding: 8px 10px; font-size: 0.95rem; color: var(--vv-ink); outline: none; } .rebgr-mobile-search .vv-header-search-submit { background: transparent; border: none; color: var(--vv-ink-muted); cursor: pointer; padding: 6px; display: flex; align-items: center; } .rebgr-mobile-subscribe { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 0.5px solid var(--vv-header-border); } .rebgr-subscribe-btn-mobile { display: block; width: 100%; text-align: center; padding: 0.65rem 1rem; background: var(--vv-blue, #0071e3); color: #ffffff !important; border-radius: 980px; font-weight: 500; font-size: 0.95rem; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 113, 227, 0.25); } .rebgr-mobile-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .rebgr-mobile-menu li a { display: block; padding: 0.65rem 0.85rem; color: var(--vv-ink); font-size: 1rem; font-weight: 500; border-radius: 10px; transition: background 200ms ease; } .rebgr-mobile-menu li a:hover { background: var(--vv-header-hover-bg); } @media (max-width: 820px) { .rebgr-mobile-menu-btn { display: flex; } .rebgr-primary-nav { display: none; } .rebgr-search-box { display: none; } .rebgr-subscribe-btn { display: none; } .rebgr-mobile-panel { display: block; } .rebgr-header-shell { height: 54px; } } /* ============================================================ 4. Homepage Hero Section — Apple "Think Different" Style ============================================================ */ .rebgr-homepage-hero { width: 100%; overflow: hidden; background: transparent !important; background-image: linear-gradient(135deg, #5a74a8 0%, #6f87b8 40%, #8aa3cc 70%, #4e6898 100%) !important; background-attachment: fixed !important; position: relative; } .rebgr-hero-text { text-align: center; padding: 4.5rem 1.5rem 2rem; position: relative; z-index: 5; } .rebgr-hero-eyebrow-container { display: flex; justify-content: center; margin-bottom: 1.15rem; } .rebgr-hero-eyebrow.rebgr-hero-badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.52rem 1.6rem; background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 9999px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6); color: #ffffff !important; font-family: "Noto Sans Tamil", var(--vv-font-sans, "Inter", sans-serif); font-size: 0.98rem !important; font-weight: 750 !important; letter-spacing: 0.04em; text-transform: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); margin: 0; } .rebgr-hero-eyebrow.rebgr-hero-badge:hover { transform: translateY(-2px) scale(1.03); background: rgba(255, 255, 255, 0.32); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .rebgr-hero-sparkle { color: #ffd700; font-size: 1.05rem; filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.85)); display: inline-block; animation: vvSparklePulse 2s ease-in-out infinite alternate; } @keyframes vvSparklePulse { 0% { transform: scale(0.9) rotate(-10deg); opacity: 0.85; } 100% { transform: scale(1.15) rotate(15deg); opacity: 1; } } .rebgr-hero-headline { font-family: "Noto Serif Tamil", "Noto Sans Tamil", serif !important; font-size: clamp(2.3rem, 5.2vw, 4.3rem) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; color: #ffffff !important; text-shadow: 0 3px 20px rgba(0, 0, 0, 0.25) !important; margin: 0 auto 1.25rem !important; max-width: 850px !important; } .rebgr-hero-subtitle { font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255, 255, 255, 0.92) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important; margin: 0 auto; max-width: 580px; line-height: 1.55; font-weight: 450; } /* ============================================================ 5. Coverflow — Apple 3D Perspective Cards ============================================================ */ .rebgr-coverflow-wrapper { padding: 0 0 3rem; } /* cf-stage perspective */ .cf-stage { perspective: 1400px; perspective-origin: center 40%; } /* Card 3D tilt — enhanced */ .rebgr-cf-card { transform-style: preserve-3d; transition: transform 400ms var(--vv-spring), box-shadow 400ms var(--vv-spring), opacity 400ms ease; } .rebgr-cf-card.cf-active { box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18) !important; } /* Thumbnail rounded-corner Apple style */ .rebgr-cf-thumb { border-radius: 16px; overflow: hidden; background: var(--vv-surface-2); } /* Category badge */ .rebgr-cf-category { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vv-apple-blue); background: rgba(0, 113, 227, 0.08); border-radius: 999px; padding: 0.2em 0.65em; } html[scheme="dark"] .rebgr-cf-category { color: #6eb0ff; background: rgba(110, 176, 255, 0.12); } /* Read button */ .rebgr-read-btn { font-size: 0.85rem; font-weight: 600; color: var(--vv-apple-blue) !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 0.25rem; transition: gap 200ms ease; } .rebgr-read-btn:hover { gap: 0.45rem; } /* Nav arrows — Apple-style circular ghost buttons */ .rebgr-cf-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vv-border-strong); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px); color: var(--vv-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .rebgr-cf-btn:hover { background: #fff; transform: scale(1.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } html[scheme="dark"] .rebgr-cf-btn { background: rgba(44, 44, 46, 0.85); border-color: var(--vv-border); color: var(--vv-ink); } /* Dot indicators */ .rebgr-cf-dots { display: flex; justify-content: center; gap: 6px; margin-top: 1.25rem; } .rebgr-cf-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.18); border: none; cursor: pointer; padding: 0; transition: background 250ms ease, transform 250ms ease, width 250ms ease; } .rebgr-cf-dot.is-active { background: var(--vv-apple-blue); width: 20px; border-radius: 999px; } html[scheme="dark"] .rebgr-cf-dot { background: rgba(255, 255, 255, 0.2); } html[scheme="dark"] .rebgr-cf-dot.is-active { background: #6eb0ff; } /* ============================================================ 6. Post Cards — Apple Product Card Feel ============================================================ */ .blog .post, .archive .post, .search .post, .blogsy-post-grid article { background: var(--vv-card-bg); border: 0.5px solid var(--vv-border); border-radius: var(--vv-radius-lg); box-shadow: var(--vv-shadow); transition: transform 360ms var(--vv-spring), box-shadow 360ms var(--vv-spring); } .blog .post:hover, .archive .post:hover, .search .post:hover, .blogsy-post-grid article:hover { transform: translateY(-5px); box-shadow: var(--vv-shadow-hover); } /* Image zoom */ .blog .post:hover .post-thumbnail img, .archive .post:hover .post-thumbnail img { transform: scale(1.04); } .post-thumbnail img { transition: transform 500ms var(--vv-spring); } /* ============================================================ 7. Sidebar Widgets — Ultra-clean Apple card style ============================================================ */ .sidebar-container-inner .blogsy-sidebar-widget.card-layout-w { background: var(--vv-card-bg) !important; border: 0.5px solid var(--vv-border) !important; border-radius: var(--vv-radius-lg) !important; box-shadow: var(--vv-shadow) !important; padding: 1.5rem !important; position: relative; overflow: hidden; } /* Accent stripe — Apple teal-blue gradient */ .sidebar-container-inner .blogsy-sidebar-widget.card-layout-w::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2.5px; background: linear-gradient(90deg, var(--vv-apple-blue) 0%, var(--vv-apple-purple) 100%); border-radius: var(--vv-radius-lg) var(--vv-radius-lg) 0 0; } /* Widget titles */ .blogsy-divider-heading .title-text { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vv-muted) !important; } html[scheme="dark"] .sidebar-container-inner .blogsy-sidebar-widget.card-layout-w { background: var(--vv-card-bg) !important; border-color: var(--vv-border) !important; } /* ============================================================ 8. Apple-Style Footer ============================================================ */ .rebgr-footer { font-size: 0.875rem; } .rebgr-footer-main { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 0.5px solid rgba(0, 0, 0, 0.14); } html[scheme="dark"] .rebgr-footer-main { border-bottom-color: rgba(255, 255, 255, 0.10); } .rebgr-footer-brand .vv-brand-logo__art { margin-bottom: 0.75rem; } .rebgr-footer-desc { color: var(--vv-muted); font-size: 0.875rem; line-height: 1.6; margin: 0.65rem 0 0; } .rebgr-footer-heading { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vv-ink); margin: 0 0 0.85rem; } .rebgr-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .rebgr-footer-links a, .rebgr-footer-links li > a { color: var(--vv-muted) !important; font-size: 0.875rem; font-weight: 400; text-decoration: none !important; transition: color 180ms ease; } .rebgr-footer-links a:hover, .rebgr-footer-links li > a:hover { color: var(--vv-ink) !important; } /* Subscribe form — Apple pill input */ .rebgr-subscribe-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .rebgr-subscribe-form input[type="email"] { flex: 1; padding: 0.55rem 0.85rem; border-radius: 999px; border: 1px solid var(--vv-border-strong); background: var(--vv-surface); color: var(--vv-ink); font-size: 0.875rem; outline: none; transition: border-color 200ms ease, box-shadow 200ms ease; } .rebgr-subscribe-form input[type="email"]:focus { border-color: var(--vv-apple-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); } .rebgr-subscribe-form button { padding: 0.55rem 1rem; border-radius: 999px; border: none; background: var(--vv-apple-blue); color: #fff; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 200ms ease; } .rebgr-subscribe-form button:hover { background: var(--vv-apple-blue-hover); } .rebgr-subscribe-note { font-size: 0.78rem; color: var(--vv-muted); margin-top: 0.5rem; } /* Footer bottom bar */ .rebgr-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; color: var(--vv-muted); font-size: 0.8rem; } .rebgr-back-to-top { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--vv-muted) !important; font-size: 0.8rem; text-decoration: none !important; transition: color 200ms ease; } .rebgr-back-to-top:hover { color: var(--vv-ink) !important; } /* Footer in dark mode */ html[scheme="dark"] .rebgr-footer-links a, html[scheme="dark"] .rebgr-footer-links li > a, html[scheme="dark"] .rebgr-copyright, html[scheme="dark"] .rebgr-back-to-top { color: var(--vv-muted) !important; } html[scheme="dark"] .rebgr-footer-links a:hover, html[scheme="dark"] .rebgr-footer-links li > a:hover, html[scheme="dark"] .rebgr-back-to-top:hover { color: var(--vv-ink) !important; } /* Footer category list cleanup */ .rebgr-footer-links li.cat-item a, .rebgr-footer-links .cat-item a { color: var(--vv-muted) !important; font-size: 0.875rem; } .rebgr-footer-links li.cat-item a:hover { color: var(--vv-ink) !important; } /* Footer responsive */ @media (max-width: 900px) { .rebgr-footer-main { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 600px) { .rebgr-footer-main { grid-template-columns: 1fr; gap: 1.75rem; } .rebgr-footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.65rem; } .rebgr-hero-text { padding: 3.5rem 1rem 2rem; } } /* ============================================================ 9. Reading Progress Bar — Thinner, Apple Blue ============================================================ */ .vv-reading-progress { height: 2.5px !important; background: rgba(0, 0, 0, 0.06) !important; } .vv-reading-progress span { background: linear-gradient(90deg, var(--vv-apple-blue) 0%, var(--vv-apple-purple) 100%) !important; } html[scheme="dark"] .vv-reading-progress { background: rgba(255, 255, 255, 0.08) !important; } /* ============================================================ 10. Scroll-Reveal Animations ============================================================ */ @keyframes rebgr-rise-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .rebgr-hero-eyebrow, .rebgr-hero-headline, .rebgr-hero-subtitle { animation: rebgr-rise-in 0.7s var(--vv-spring) both; } .rebgr-hero-eyebrow { animation-delay: 0.05s; } .rebgr-hero-headline { animation-delay: 0.12s; } .rebgr-hero-subtitle { animation-delay: 0.20s; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .rebgr-hero-eyebrow, .rebgr-hero-headline, .rebgr-hero-subtitle { animation: none; } } /* ============================================================ 11. Single Post — Apple Editorial Style ============================================================ */ .single-content { background: var(--vv-card-bg); border: 0.5px solid var(--vv-border); border-radius: var(--vv-radius-xl); padding: 3rem 3.5rem; box-shadow: var(--vv-shadow); } .single-content-inner { font-size: 1.1rem; line-height: 1.85; color: var(--vv-ink); max-width: 680px; margin: 0 auto; } .entry-title { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; } /* Blockquote */ .single-content blockquote { border-left: 3px solid var(--vv-apple-blue); background: rgba(0, 113, 227, 0.04); border-radius: 0 12px 12px 0; padding: 1.25rem 1.5rem; margin: 2rem 0; font-style: italic; color: var(--vv-muted); } @media (max-width: 700px) { .single-content { padding: 1.5rem 1.25rem; border-radius: var(--vv-radius-lg); } } /* ============================================================ 12. Pagination — Apple Minimalist ============================================================ */ .page-numbers a, .page-numbers span { border-radius: 8px; border: 0.5px solid var(--vv-border-strong); background: var(--vv-surface); color: var(--vv-ink); font-size: 0.9rem; font-weight: 500; transition: all 200ms ease; } .page-numbers a:hover, .page-numbers .current { background: var(--vv-apple-blue) !important; color: #fff !important; border-color: var(--vv-apple-blue) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 113, 227, 0.25); } /* ============================================================ 13. Skip Link (Accessibility) ============================================================ */ .skip-link { position: absolute; top: -80px; left: 1rem; z-index: 99999; background: var(--vv-apple-blue); color: #fff; padding: 0.65rem 1.25rem; border-radius: 0 0 10px 10px; font-weight: 600; font-size: 0.9rem; transition: top 0.2s ease; } .skip-link:focus { top: 0; } /* ============================================================ 14. BUG FIXES v2.1 - Production Polish ============================================================ */ /* Fix 1: Scope font sizes - global h1/h2/h3 overrides from style.css were too big everywhere */ h1, h2, h3 { font-size: revert; } .rebgr-hero-headline { font-size: clamp(2rem, 5vw, 3.75rem) !important; font-weight: 700 !important; letter-spacing: -0.028em !important; } .blogsy-divider-heading .title-text, .sidebar-container-inner .widget-title { font-size: 0.78rem !important; text-transform: uppercase; letter-spacing: 0.07em; } .entry-title, .blogsy-post-grid .entry-title { font-size: clamp(1.1rem, 2vw, 1.5rem) !important; line-height: 1.3; } /* Fix 2: Coverflow background - blue gradient to match outer body */ .coverflow-wrapper, .rebgr-coverflow-wrapper { background: transparent !important; } .rebgr-homepage-hero { background: transparent !important; background-image: linear-gradient(135deg, #5a74a8 0%, #6f87b8 40%, #8aa3cc 70%, #4e6898 100%) !important; background-attachment: fixed !important; overflow: hidden; } html[scheme="dark"] .rebgr-homepage-hero, html[data-theme="dark"] .rebgr-homepage-hero, body.dark-mode .rebgr-homepage-hero { background: #000000 !important; background-image: none !important; } .cf-stage { background: transparent !important; } .cf-card { background-color: var(--vv-card-bg) !important; -webkit-box-reflect: none !important; } .cf-info { background-color: var(--vv-card-bg) !important; } html[scheme="dark"] .cf-card { background-color: #1c1c1e !important; border-color: rgba(255,255,255,0.10) !important; } html[scheme="dark"] .cf-info { background-color: #1c1c1e !important; color: #f5f5f7 !important; } /* Fix 3: Dark mode search bar */ html[scheme="dark"] .rebgr-search-box .vv-header-search-form { background: rgba(255,255,255,0.10) !important; border-color: rgba(255,255,255,0.14); } html[scheme="dark"] .rebgr-search-box .vv-header-search-form:focus-within { background: rgba(255,255,255,0.14) !important; border-color: rgba(110,176,255,0.6); box-shadow: 0 0 0 3px rgba(110,176,255,0.18); } html[scheme="dark"] .rebgr-search-box .vv-header-search-input { color: #f5f5f7; } html[scheme="dark"] .rebgr-search-box .vv-header-search-input::placeholder { color: rgba(255,255,255,0.38); } html[scheme="dark"] .rebgr-search-box .vv-header-search-submit { color: rgba(255,255,255,0.55); } /* Fix 4: Global overflow prevention */ html, body { overflow-x: hidden; max-width: 100%; } /* Fix 5: Mobile coverflow adjustments */ @media (max-width: 600px) { .cf-stage { height: 460px; } .cf-card { width: 280px !important; height: 370px !important; } .cf-thumb { height: 190px !important; } .cf-card.prev { transform: translateX(-180px) translateZ(-120px) rotateY(50deg) scale(0.78) !important; } .cf-card.prev-2 { transform: translateX(-300px) translateZ(-220px) rotateY(58deg) scale(0.60) !important; opacity: 0.22 !important; } .cf-card.next { transform: translateX(180px) translateZ(-120px) rotateY(-50deg) scale(0.78) !important; } .cf-card.next-2 { transform: translateX(300px) translateZ(-220px) rotateY(-58deg) scale(0.60) !important; opacity: 0.22 !important; } .rebgr-cf-controls { display: none !important; } } @media (max-width: 480px) { .rebgr-hero-text { padding: 2.5rem 1rem 1.5rem; } .rebgr-hero-headline { font-size: clamp(1.6rem, 8vw, 2.2rem) !important; } .rebgr-hero-subtitle { font-size: 0.92rem; } } /* Fix 6: Dot overflow prevention */ .rebgr-cf-dots { flex-wrap: wrap; max-width: 100%; padding: 0 1rem; box-sizing: border-box; } /* Fix 7: Sidebar widgets - premium Apple redesign */ .sidebar-container-inner .blogsy-sidebar-widget.card-layout-w { background: var(--vv-surface, #fff) !important; border: 0.5px solid var(--vv-border) !important; border-radius: 16px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; padding: 1.25rem 1.35rem !important; position: relative; overflow: hidden; margin-bottom: 1.25rem; } html[scheme="dark"] .sidebar-container-inner .blogsy-sidebar-widget.card-layout-w { background: #1c1c1e !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; } .sidebar-container-inner .blogsy-sidebar-widget.card-layout-w::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #0071e3 0%, #bf5af2 100%); } .sidebar-container-inner .blogsy-sidebar-widget li a { font-size: 0.875rem !important; color: var(--vv-ink) !important; text-decoration: none !important; padding: 0.3rem 0; display: block; border-bottom: 0.5px solid var(--vv-border); transition: color 180ms ease; } .sidebar-container-inner .blogsy-sidebar-widget li:last-child a { border-bottom: none !important; } .sidebar-container-inner .blogsy-sidebar-widget li a:hover { color: var(--vv-apple-blue) !important; } /* Fix 8: Live search dropdown */ .rebgr-search-box { position: relative; } #rebgr-live-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: rgba(255,255,255,0.97); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 0.5px solid rgba(0,0,0,0.12); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.12); z-index: 9999; max-height: 420px; overflow-y: auto; padding: 0.5rem 0; min-width: 300px; } html[scheme="dark"] #rebgr-live-search-results { background: rgba(28,28,30,0.97); border-color: rgba(255,255,255,0.12); box-shadow: 0 20px 48px rgba(0,0,0,0.6); } #rebgr-live-search-results .rls-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; text-decoration: none; color: var(--vv-ink); border-radius: 8px; margin: 0 0.3rem; transition: background 150ms ease; } #rebgr-live-search-results .rls-item:hover { background: rgba(0,113,227,0.07); } html[scheme="dark"] #rebgr-live-search-results .rls-item:hover { background: rgba(110,176,255,0.10); } #rebgr-live-search-results .rls-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } #rebgr-live-search-results .rls-placeholder { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg, #0071e3, #bf5af2); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: rgba(255,255,255,0.7); } #rebgr-live-search-results .rls-title { font-size: 0.875rem; font-weight: 600; color: var(--vv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rebgr-live-search-results .rls-meta { font-size: 0.72rem; color: var(--vv-muted); margin-top: 0.1rem; } #rebgr-live-search-results .rls-empty, #rebgr-live-search-results .rls-loading { padding: 1rem; color: var(--vv-muted); font-size: 0.875rem; text-align: center; } #rebgr-live-search-results .rls-view-all { display: block; text-align: center; padding: 0.7rem 0.55rem 0.55rem; font-size: 0.82rem; font-weight: 600; color: var(--vv-apple-blue); text-decoration: none; margin: 0.2rem 0.3rem 0.1rem; border-radius: 8px; border-top: 0.5px solid var(--vv-border); transition: background 150ms ease; } #rebgr-live-search-results .rls-view-all:hover { background: rgba(0,113,227,0.06); } /* Fix 9: Dark mode card/content */ html[scheme="dark"] body { background-color: #000000; } html[scheme="dark"] .blog .post, html[scheme="dark"] .archive .post, html[scheme="dark"] .blogsy-post-grid article { background: #1c1c1e !important; border-color: rgba(255,255,255,0.08) !important; } html[scheme="dark"] .blog .post .entry-title a, html[scheme="dark"] .archive .post .entry-title a { color: #f5f5f7 !important; } html[scheme="dark"] .blog .post .entry-content, html[scheme="dark"] .archive .post .entry-content { color: #adadb8 !important; } /* Fix 10: Dark mode nav text */ html[scheme="dark"] .rebgr-primary-nav li a { color: rgba(255,255,255,0.85) !important; } html[scheme="dark"] .rebgr-primary-nav li a:hover, html[scheme="dark"] .rebgr-primary-nav li.current-menu-item > a { color: #6eb0ff !important; } /* Fix 11: Footer responsive */ @media (max-width: 1024px) { .rebgr-footer-main { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; } .rebgr-footer-brand { margin-left: 0 !important; } } @media (max-width: 600px) { .rebgr-footer-main { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .rebgr-footer-bottom { flex-direction: column; gap: 0.5rem; } .rebgr-subscribe-form { flex-direction: column; } .rebgr-subscribe-form button { width: 100%; } .pt-container { padding-left: 1rem !important; padding-right: 1rem !important; } } /* ============================================================ 15. PYML Widget (You May Have Missed) — Compact Apple Cards ============================================================ */ /* Make the card image containers much shorter */ .blogsy-post-nexo-widget .post-wrapper .image-wrapper { min-height: 20rem !important; /* Was 38rem — cut in half */ } .blogsy-pyml .post-wrapper .image-wrapper img { max-height: 20rem !important; /* Was 38rem */ } /* Tighter section padding */ .blogsy-pyml { padding-top: 2rem !important; padding-bottom: 3.5rem !important; margin-bottom: 2rem !important; } /* Compact swiper pagination */ .blogsy-pyml .swiper-pagination-fraction { font-size: 1rem !important; padding: 0.55rem 1.1rem !important; } /* Smaller term badges on PYML cards */ .blogsy-post-nexo-widget .term-item { font-size: 0.72rem !important; padding: 4px 10px !important; border-radius: 6px !important; } /* Smaller title text on PYML cards */ .blogsy-post-nexo-widget .post-wrapper .item-title, .blogsy-post-nexo-widget .post-wrapper h2, .blogsy-post-nexo-widget .post-wrapper h3 { font-size: clamp(0.95rem, 1.5vw, 1.2rem) !important; line-height: 1.3 !important; } /* Tighter content padding inside cards */ .blogsy-post-nexo-widget .post-wrapper .content-wrapper-inner, .blogsy-post-nexo-widget .post-wrapper .content-container { padding: 1rem 1.1rem !important; } /* Arrow buttons — smaller to match slimmer cards */ .blogsy-pyml .carousel-nav-prev, .blogsy-pyml .carousel-nav-next { width: 36px !important; height: 36px !important; font-size: 1.2rem !important; } /* ============================================================ 16. Single Post Page — Apple Editorial Typography ============================================================ */ /* Post body text — comfortable reading size (not too big) */ .single-content-inner { font-size: 1rem !important; /* 16px — Apple body standard */ line-height: 1.8 !important; color: var(--vv-ink); max-width: 720px; margin: 0 auto; } .single-content-inner p { font-size: 1rem !important; line-height: 1.8 !important; margin-bottom: 1.4em; } /* Post meta (author, date) — smaller */ .single-hero-meta { font-size: 0.875rem !important; } .single-hero-meta .author-name { font-size: 0.875rem !important; } /* Category label above title */ .single-hero-title .category a { font-size: 0.78rem !important; letter-spacing: 0.05em; } /* Post entry title — large but not extreme */ .single-content .entry-title, .single-hero-title .title h1, .single-hero-title .title h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } /* Updated date badge */ .single-date-updated { font-size: 0.82rem !important; padding: 3px 12px !important; } /* Post content headings — sensible editorial sizes */ .single-content-inner h2 { font-size: clamp(1.25rem, 2.2vw, 1.65rem) !important; margin-top: 2.2em !important; margin-bottom: 0.65em !important; letter-spacing: -0.015em; } .single-content-inner h3 { font-size: clamp(1.05rem, 1.8vw, 1.3rem) !important; margin-top: 1.8em !important; margin-bottom: 0.5em !important; } .single-content-inner h4 { font-size: 1rem !important; font-weight: 700; margin-top: 1.5em !important; } /* Blockquote in post — Apple-style pull quote */ .single-content-inner blockquote { font-size: 1.1rem !important; font-style: italic; line-height: 1.7; border-left: 3px solid var(--vv-apple-blue); background: rgba(0,113,227,0.04); border-radius: 0 12px 12px 0; padding: 1.1rem 1.4rem; margin: 1.75rem 0; color: var(--vv-muted); } /* Code blocks */ .single-content-inner code, .single-content-inner pre { font-size: 0.875rem !important; border-radius: 8px; } /* Dark mode post text */ html[scheme="dark"] .single-content-inner { color: #e0e0e5; } html[scheme="dark"] .single-content-inner p, html[scheme="dark"] .single-content-inner li { color: #c7c7cc; } /* Single post card wrapper — clean Apple editorial card */ article.single-content.card-layout-w { border-radius: 20px !important; border: 0.5px solid var(--vv-border) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important; overflow: hidden; } html[scheme="dark"] article.single-content.card-layout-w { background: #111111 !important; border-color: rgba(255,255,255,0.08) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; } /* Single post inner padding */ .single-content .single-content-inner { padding: 2rem 2.5rem 2.5rem !important; } @media (max-width: 600px) { .single-content .single-content-inner { padding: 1.25rem 1rem 1.5rem !important; } .single-content-inner { font-size: 0.97rem !important; } } /* ============================================================ 17. PYML Widget — Extra title size reduction ============================================================ */ /* The overlay title text inside cards is still too large */ .blogsy-post-nexo-widget .post-wrapper .item-title a, .blogsy-post-nexo-widget .post-wrapper .item-title, .blogsy-post-nexo-widget h2.item-title, .blogsy-pyml .post-wrapper .item-title { font-size: clamp(0.82rem, 1.2vw, 1rem) !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -0.01em; } /* Reduce the category labels inside the PYML cards */ .blogsy-post-nexo-widget .terms-wrapper .term-item { font-size: 0.68rem !important; padding: 3px 8px !important; border-radius: 5px !important; line-height: 1.2; } /* Tighter gap between tags */ .blogsy-post-nexo-widget .terms-wrapper { gap: 0.4rem !important; } /* Card content padding */ .blogsy-post-nexo-widget .post-wrapper .content-container { padding: 0.7rem 0.9rem 0.9rem !important; gap: 0.35rem !important; } /* ============================================================ 18. Single Post — make article card less padded on desktop ============================================================ */ /* The card should not be too padded on the article content */ .single-content .single-content-inner { padding: 1.5rem 2rem 2rem !important; } /* Reading line-length cap for comfort */ /* Content width inside articles */ .single-content-inner > p, .single-content-inner > ul, .single-content-inner > ol, .single-content-inner > blockquote { max-width: 100%; } /* ============================================================ 19. Comprehensive Cross-Screen Responsiveness & SEO Cleanups ============================================================ */ /* 19.1 Global Overflow & Layout Container Constraints */ html, body { max-width: 100% !important; overflow-x: hidden !important; } .pt-container, .content-wrapper, .main-wrapper { box-sizing: border-box; } /* MailerLite renders popups inside a fixed, full-screen iframe. Do not let the site's responsive embed rule collapse that iframe to its content height. */ iframe[src*="assets.mailerlite.com"][style*="position: fixed"] { width: 100vw !important; max-width: none !important; height: 100vh !important; max-height: none !important; } /* 19.2 Responsive Images, Media & Embeds */ img, video, iframe, embed, object { max-width: 100% !important; height: auto !important; box-sizing: border-box; } /* Tables & Code blocks responsive scroll wrappers */ .wp-block-table, .single-content-inner table, table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; } .single-content-inner pre, .single-content-inner code, pre, code { max-width: 100% !important; overflow-x: auto !important; white-space: pre-wrap !important; word-break: break-word !important; } /* 19.3 Header Responsive Styles across All Breakpoints */ @media (max-width: 1024px) { .rebgr-primary-nav { display: none !important; /* Hide desktop menu on tablets & mobile */ } .rebgr-mobile-menu-btn { display: flex !important; /* Show mobile menu button */ } } @media (max-width: 768px) { .rebgr-header-shell { height: 54px !important; padding-left: 12px !important; padding-right: 12px !important; gap: 0.5rem !important; } .rebgr-header-brand img, .rebgr-header-brand svg { max-height: 36px !important; width: auto !important; } /* Search box on mobile */ .rebgr-search-box .vv-header-search-input { width: 90px !important; font-size: 0.8rem !important; } .rebgr-search-box .vv-header-search-input:focus { width: 130px !important; } /* Hide subscribe text on small mobile screens, keep compact button */ .rebgr-subscribe-btn, .subscribe-button { padding: 0.35rem 0.75rem !important; font-size: 0.78rem !important; } } @media (max-width: 480px) { .rebgr-header-shell { padding-left: 8px !important; padding-right: 8px !important; } .rebgr-subscribe-btn, .subscribe-button { display: none !important; /* Hide subscribe pill in header on mobile < 480px to prevent clutter */ } .rebgr-search-box .vv-header-search-input { width: 70px !important; } } /* 19.4 Footer Responsive Grid & Stacking */ @media (max-width: 1024px) { .rebgr-footer-main { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; } } @media (max-width: 768px) { .rebgr-footer-main { grid-template-columns: 1fr !important; gap: 2.2rem !important; padding-top: 2.5rem !important; padding-bottom: 2rem !important; } .rebgr-footer-brand { text-align: left; margin-left: 0 !important; } .rebgr-footer-col { text-align: left; } .rebgr-footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; } } @media (max-width: 420px) { .rebgr-subscribe-form { flex-direction: column !important; } .rebgr-subscribe-form button { width: 100% !important; } } /* 19.5 CoverFlow Carousel Mobile Optimization */ @media (max-width: 600px) { .coverflow-wrapper, .pyml-coverflow-wrapper { padding-left: 0 !important; padding-right: 0 !important; } .cf-btn, .rebgr-cf-btn { width: 44px !important; height: 44px !important; } .cf-controls, .rebgr-cf-controls { padding: 0 6px !important; } .cf-card, .rebgr-cf-card { width: clamp(250px, 84vw, 320px) !important; } .cf-counter-badge { margin-top: 10px !important; } } /* 19.6 Mobile Slide Panel Touch Optimization */ .rebgr-mobile-panel { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; max-height: 0 !important; overflow: hidden !important; visibility: hidden !important; opacity: 0 !important; transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.35s !important; -webkit-overflow-scrolling: touch; } html[scheme="dark"] .rebgr-mobile-panel, html[data-theme="dark"] .rebgr-mobile-panel, html.dark-mode .rebgr-mobile-panel { background: rgba(15, 23, 33, 0.96) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .rebgr-mobile-menu-toggle:checked ~ .rebgr-mobile-panel, .rebgr-mobile-panel.is-open { max-height: 85vh !important; overflow-y: auto !important; visibility: visible !important; opacity: 1 !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important; } .rebgr-mobile-menu { list-style: none !important; padding: 0.5rem 0 !important; margin: 0 !important; } .rebgr-mobile-menu li { list-style: none !important; margin: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; } html[scheme="dark"] .rebgr-mobile-menu li { border-bottom-color: rgba(255, 255, 255, 0.06) !important; } .rebgr-mobile-menu li:last-child { border-bottom: none !important; } .rebgr-mobile-menu li a { display: flex !important; align-items: center !important; padding: 0.95rem 0.5rem !important; font-size: 1.08rem !important; font-weight: 600 !important; color: #1d1d1f !important; text-decoration: none !important; border: none !important; min-height: 48px !important; line-height: 1.4 !important; transition: all 0.2s ease !important; } html[scheme="dark"] .rebgr-mobile-menu li a { color: #f1f5f9 !important; } .rebgr-mobile-menu li a:hover, .rebgr-mobile-menu li a:focus { color: #0071e3 !important; padding-left: 0.85rem !important; text-decoration: none !important; } .rebgr-mobile-menu li.current-menu-item > a { color: #0071e3 !important; } /* 19.7 Typography Responsive Heading Clamps */ h1, .h1 { font-size: clamp(1.6rem, 4vw, 2.5rem) !important; word-break: break-word; overflow-wrap: break-word; } h2, .h2 { font-size: clamp(1.3rem, 3.2vw, 1.85rem) !important; word-break: break-word; overflow-wrap: break-word; } h3, .h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem) !important; word-break: break-word; overflow-wrap: break-word; } /* ============================================================ 20. MailerLite Form Integration & Responsive Styling ============================================================ */ .rebgr-mailerlite-form-wrapper { width: 100% !important; margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; box-sizing: border-box !important; } .rebgr-mailerlite-form-wrapper form, .rebgr-mailerlite-form-wrapper .ml-form-embedWrapper, .rebgr-mailerlite-form-wrapper .ml-subscribe-form, .rebgr-mailerlite-form-wrapper .ml-block-form, .rebgr-mailerlite-form-wrapper .mailerlite-form { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; } .rebgr-mailerlite-form-wrapper input[type="text"], .rebgr-mailerlite-form-wrapper input[type="email"], .rebgr-mailerlite-form-wrapper .ml-form-fieldRow input, .rebgr-mailerlite-form-wrapper .mailerlite-form-field-input, .rebgr-mailerlite-form-wrapper .mailerlite-form input[type="text"], .rebgr-mailerlite-form-wrapper .mailerlite-form input[type="email"] { width: 100% !important; box-sizing: border-box !important; background: #ffffff !important; color: #0f172a !important; border: 1.5px solid #cbd5e1 !important; border-radius: 12px !important; padding: 0.75rem 1rem !important; font-family: 'Inter', sans-serif !important; font-size: 0.9375rem !important; margin-bottom: 0.75rem !important; outline: none !important; transition: all 0.2s ease !important; } .rebgr-mailerlite-form-wrapper input[type="text"]:focus, .rebgr-mailerlite-form-wrapper input[type="email"]:focus, .rebgr-mailerlite-form-wrapper .ml-form-fieldRow input:focus, .rebgr-mailerlite-form-wrapper .mailerlite-form-field-input:focus { border-color: #0070f3 !important; box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.18) !important; background: #ffffff !important; } html[scheme="dark"] .rebgr-mailerlite-form-wrapper input[type="text"], html[scheme="dark"] .rebgr-mailerlite-form-wrapper input[type="email"], html[scheme="dark"] .rebgr-mailerlite-form-wrapper .ml-form-fieldRow input, html[scheme="dark"] .rebgr-mailerlite-form-wrapper .mailerlite-form-field-input { background: #0f172a !important; color: #f8fafc !important; border-color: #334155 !important; } html[scheme="dark"] .rebgr-mailerlite-form-wrapper input[type="text"]:focus, html[scheme="dark"] .rebgr-mailerlite-form-wrapper input[type="email"]:focus, html[scheme="dark"] .rebgr-mailerlite-form-wrapper .ml-form-fieldRow input:focus, html[scheme="dark"] .rebgr-mailerlite-form-wrapper .mailerlite-form-field-input:focus { background: #020617 !important; border-color: #38bdf8 !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important; } .rebgr-mailerlite-form-wrapper button[type="submit"], .rebgr-mailerlite-form-wrapper .ml-button-horizontal button, .rebgr-mailerlite-form-wrapper .primary-btn, .rebgr-mailerlite-form-wrapper .mailerlite-subscribe-submit, .rebgr-mailerlite-form-wrapper .mailerlite-form input[type="submit"] { width: 100% !important; background: #0070f3 !important; color: #ffffff !important; border: none !important; border-radius: 12px !important; padding: 0.75rem 1.4rem !important; font-family: 'Inter', sans-serif !important; font-size: 0.9375rem !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 4px 12px rgba(0, 112, 243, 0.3) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .rebgr-mailerlite-form-wrapper button[type="submit"]:hover, .rebgr-mailerlite-form-wrapper .ml-button-horizontal button:hover, .rebgr-mailerlite-form-wrapper .primary-btn:hover, .rebgr-mailerlite-form-wrapper .mailerlite-subscribe-submit:hover, .rebgr-mailerlite-form-wrapper .mailerlite-form input[type="submit"]:hover { background: #0060df !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(0, 112, 243, 0.45) !important; } /* Success / Response Messages */ .rebgr-mailerlite-form-wrapper .mailerlite-form-response, .rebgr-mailerlite-form-wrapper .ml-form-successBody, .rebgr-mailerlite-form-wrapper .mailerlite-form-success { background: rgba(16, 185, 129, 0.1) !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; color: #065f46 !important; border-radius: 10px !important; padding: 0.85rem 1rem !important; font-size: 0.9rem !important; margin-top: 0.65rem !important; font-weight: 500 !important; } html[scheme="dark"] .rebgr-mailerlite-form-wrapper .mailerlite-form-response, html[scheme="dark"] .rebgr-mailerlite-form-wrapper .ml-form-successBody { background: rgba(16, 185, 129, 0.15) !important; border-color: rgba(16, 185, 129, 0.4) !important; color: #6ee7b7 !important; } /* ============================================================ 21. Subscribe Popup Modal (Header CTA Modal) ============================================================ */ .rebgr-modal-overlay { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 1.25rem !important; box-sizing: border-box !important; opacity: 0; pointer-events: none; transition: opacity 220ms ease !important; } .rebgr-modal-overlay.is-open { opacity: 1 !important; pointer-events: auto !important; } .rebgr-modal-backdrop { position: absolute !important; inset: 0 !important; background: rgba(15, 23, 42, 0.65) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; cursor: pointer !important; } .rebgr-modal-card { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 460px !important; background: #ffffff !important; color: #0f172a !important; border-radius: 20px !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08) !important; padding: 2.25rem 2rem 1.75rem !important; text-align: center !important; transform: scale(0.94) translateY(12px) !important; transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1) !important; box-sizing: border-box !important; overflow: hidden !important; } html[scheme="dark"] .rebgr-modal-card { background: #1e293b !important; color: #f8fafc !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1) !important; } .rebgr-modal-overlay.is-open .rebgr-modal-card { transform: scale(1) translateY(0) !important; } .rebgr-modal-close { position: absolute !important; top: 1rem !important; right: 1rem !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #64748b !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 180ms ease !important; padding: 0 !important; } .rebgr-modal-close:hover { background: #e2e8f0 !important; color: #0f172a !important; transform: scale(1.08) !important; } html[scheme="dark"] .rebgr-modal-close { background: #334155 !important; border-color: #475569 !important; color: #94a3b8 !important; } html[scheme="dark"] .rebgr-modal-close:hover { background: #475569 !important; color: #ffffff !important; } .rebgr-modal-icon { width: 52px !important; height: 52px !important; margin: 0 auto 1rem !important; border-radius: 16px !important; background: rgba(0, 112, 243, 0.1) !important; color: #0070f3 !important; display: flex !important; align-items: center !important; justify-content: center !important; } html[scheme="dark"] .rebgr-modal-icon { background: rgba(56, 189, 248, 0.15) !important; color: #38bdf8 !important; } .rebgr-modal-title { font-family: 'Inter', sans-serif !important; font-size: 1.4rem !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 0 0.45rem !important; line-height: 1.25 !important; } html[scheme="dark"] .rebgr-modal-title { color: #ffffff !important; } .rebgr-modal-desc { font-size: 0.9rem !important; color: #64748b !important; margin: 0 0 1.25rem !important; line-height: 1.5 !important; } html[scheme="dark"] .rebgr-modal-desc { color: #94a3b8 !important; } .rebgr-modal-privacy { font-size: 0.8rem !important; color: #94a3b8 !important; margin: 1rem 0 0 !important; } html[scheme="dark"] .rebgr-modal-privacy { color: #64748b !important; } /* ============================================================ 21. Footer Custom Layout & Styling (Matching Screenshot) ============================================================ */ footer#site-footer { position: relative !important; border-top: none !important; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 45%, #e2e8f0 100%) !important; padding-top: 48px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; } footer#site-footer::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, #7c3aed 0%, #0d7a5f 40%, #0284c7 75%, #f59e0b 100%) !important; z-index: 10 !important; } html[scheme="dark"] footer#site-footer { background: linear-gradient(180deg, #0f172a 0%, #090d16 60%, #020617 100%) !important; } html[scheme="dark"] footer#site-footer::before { background: linear-gradient(90deg, #a78bfa 0%, #10b981 40%, #38bdf8 75%, #fbbf24 100%) !important; } .rebgr-footer-main { display: grid !important; grid-template-columns: 1.45fr 1fr 1.05fr 1.35fr !important; gap: 2.5rem !important; align-items: start !important; } .rebgr-footer-brand { display: flex; flex-direction: column; gap: 0.8rem; margin-left: -20px; } .rebgr-footer-logo-wrap img { max-height: 95px !important; width: auto !important; object-fit: contain !important; } .rebgr-footer-desc { font-size: 0.9rem !important; color: #4b5563 !important; margin-top: 0.2rem !important; line-height: 1.4 !important; } .rebgr-footer-heading { font-size: 0.82rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #1f2937 !important; margin-bottom: 1.2rem !important; } html[scheme="dark"] .rebgr-footer-heading { color: #e5e7eb !important; } /* Category Hierarchy */ .rebgr-explore-links { list-style: none !important; padding: 0 !important; margin: 0 !important; } .cat-item-parent { margin-bottom: 0.7rem !important; } .cat-item-parent > a { font-weight: 600 !important; color: #4b5563 !important; font-size: 0.95rem !important; text-decoration: none !important; transition: color 0.18s ease !important; } .cat-item-parent > a:hover { color: #0d7a5f !important; } .cat-children { list-style: none !important; padding-left: 1.2rem !important; margin-top: 0.35rem !important; margin-bottom: 0.4rem !important; } .cat-item-child a { font-weight: 500 !important; color: #6b7280 !important; font-size: 0.88rem !important; text-decoration: none !important; transition: color 0.18s ease !important; } .cat-item-child a:hover { color: #0d7a5f !important; } .subcat-bullet { color: #9ca3af !important; margin-right: 4px !important; } /* Information Column */ #site-footer .rebgr-info-links, #site-footer .vv-footer-menu { list-style: none !important; padding: 0 !important; margin: 0 !important; } #site-footer .rebgr-info-links li, #site-footer .vv-footer-menu li { margin-bottom: 0.65rem !important; } #site-footer .rebgr-info-links a, #site-footer .vv-footer-menu a { color: #4b5563 !important; font-size: 0.92rem !important; text-decoration: none !important; font-weight: 400 !important; line-height: 1.6 !important; text-transform: none !important; transition: color 0.18s ease !important; } #site-footer .rebgr-info-links a:hover, #site-footer .vv-footer-menu a:hover { color: #0d7a5f !important; } /* MailerLite Form Clean Overrides (Hide Internal Headers & Big Box) */ .rebgr-mailerlite-form-wrapper .ml-form-embedWrapper h4, .rebgr-mailerlite-form-wrapper .ml-form-embedWrapper p.ml-block-form-text, .rebgr-mailerlite-form-wrapper .ml-form-embedBody p, .rebgr-mailerlite-form-wrapper h1, .rebgr-mailerlite-form-wrapper h2, .rebgr-mailerlite-form-wrapper h3, .rebgr-mailerlite-form-wrapper h4 { display: none !important; } .rebgr-mailerlite-form-wrapper .ml-form-embedContainer, .rebgr-mailerlite-form-wrapper .ml-form-embedWrapper, .rebgr-mailerlite-form-wrapper .ml-form-embedBody, .rebgr-mailerlite-form-wrapper .ml-subscribe-form, .rebgr-mailerlite-form-wrapper .ml-block-form { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } .rebgr-mailerlite-form-wrapper input[type="text"], .rebgr-mailerlite-form-wrapper input[type="email"], .rebgr-mailerlite-form-wrapper .ml-form-fieldRow input { width: 100% !important; box-sizing: border-box !important; height: 40px !important; background: #ffffff !important; color: #1f2937 !important; border: 1px solid #d1d5db !important; border-radius: 20px !important; padding: 0 16px !important; font-size: 0.88rem !important; margin-bottom: 8px !important; outline: none !important; transition: border-color 0.2s ease !important; } .rebgr-mailerlite-form-wrapper input[type="text"]:focus, .rebgr-mailerlite-form-wrapper input[type="email"]:focus { border-color: #0071e3 !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important; } .rebgr-mailerlite-form-wrapper button[type="submit"], .rebgr-mailerlite-form-wrapper .ml-button-horizontal button, .rebgr-mailerlite-form-wrapper .primary-btn { width: 100% !important; height: 40px !important; background: #0071e3 !important; color: #ffffff !important; border: none !important; border-radius: 20px !important; padding: 0 20px !important; font-size: 0.88rem !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 2px 8px rgba(0, 113, 227, 0.25) !important; } .rebgr-mailerlite-form-wrapper button[type="submit"]:hover, .rebgr-mailerlite-form-wrapper .ml-button-horizontal button:hover, .rebgr-mailerlite-form-wrapper .primary-btn:hover { background: #005bb5 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 113, 227, 0.35) !important; } /* Stay Connected & Newsletter Inline Form */ .rebgr-subscribe-subtitle { font-size: 0.88rem !important; color: #4b5563 !important; margin-bottom: 0.85rem !important; line-height: 1.4 !important; } .inline-pill-form { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 0.75rem !important; margin-bottom: 0.5rem !important; } .inline-pill-form input[type="email"] { flex: 1 !important; height: 42px !important; border-radius: 22px !important; border: 1px solid #d1d5db !important; padding: 0 16px !important; font-size: 0.88rem !important; background: #ffffff !important; color: #1f2937 !important; outline: none !important; margin: 0 !important; transition: border-color 0.2s ease !important; } .inline-pill-form input[type="email"]:focus { border-color: #0071e3 !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important; } .rebgr-subscribe-blue-btn { height: 42px !important; padding: 0 22px !important; border-radius: 22px !important; background: #0071e3 !important; color: #ffffff !important; font-weight: 700 !important; font-size: 0.88rem !important; border: none !important; cursor: pointer !important; white-space: nowrap !important; transition: all 0.2s ease !important; box-shadow: 0 2px 8px rgba(0, 113, 227, 0.25) !important; } .rebgr-subscribe-blue-btn:hover { background: #005bb5 !important; transform: scale(1.03) !important; box-shadow: 0 4px 12px rgba(0, 113, 227, 0.35) !important; } .rebgr-subscribe-note { font-size: 0.78rem !important; color: #9ca3af !important; margin-top: 0.35rem !important; margin-bottom: 1.4rem !important; } /* Social Follow Badges */ .rebgr-social-follow { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 1.2rem !important; } .rebgr-follow-label { font-weight: 700 !important; font-size: 0.95rem !important; color: #1f2937 !important; } html[scheme="dark"] .rebgr-follow-label { color: #f3f4f6 !important; } .rebgr-social-icons { display: flex !important; align-items: center !important; gap: 8px !important; } .rebgr-social-icon { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: #e6f4f1 !important; color: #0d7a5f !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; font-size: 0.9rem !important; transition: all 0.2s ease !important; } .rebgr-social-icon:hover { background: #0d7a5f !important; color: #ffffff !important; transform: scale(1.1) !important; } /* Bottom Bar */ .rebgr-footer-bottom { border-top: 1px solid #e5e7eb !important; padding-top: 1.4rem !important; padding-bottom: 1.6rem !important; margin-top: 2rem !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 0.84rem !important; color: #6b7280 !important; } html[scheme="dark"] .rebgr-footer-bottom { border-top-color: rgba(255, 255, 255, 0.1) !important; color: #9ca3af !important; } .rebgr-back-to-top { color: #4b5563 !important; text-decoration: none !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; transition: color 0.18s ease !important; } .rebgr-back-to-top:hover { color: #0d7a5f !important; } /* Dark Mode Overrides for Footer Links */ html[scheme="dark"] .cat-item-parent > a, html[scheme="dark"] .cat-item-child a, html[scheme="dark"] .rebgr-info-links a, html[scheme="dark"] .rebgr-footer-desc, html[scheme="dark"] .rebgr-subscribe-subtitle { color: #d1d5db !important; } html[scheme="dark"] .cat-item-parent > a:hover, html[scheme="dark"] .cat-item-child a:hover, html[scheme="dark"] .rebgr-info-links a:hover, html[scheme="dark"] .rebgr-back-to-top:hover { color: #10b981 !important; } html[scheme="dark"] .rebgr-social-icon { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; } html[scheme="dark"] .rebgr-social-icon:hover { background: #10b981 !important; color: #111111 !important; } /* Responsive Footer Stacking */ @media (max-width: 1024px) { .rebgr-footer-main { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; } } @media (max-width: 768px) { .rebgr-footer-main { grid-template-columns: 1fr !important; gap: 2.2rem !important; } .rebgr-footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; } } /* ============================================================ /* ============================================================ 22. Premium Blue Gradient (Light Mode) & Dark Mode Original ============================================================ */ /* 22.1 Blue Gradient Background for Light Version Only */ html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body.home, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body.blog, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body.front-page, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body.single, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body.single-post, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body.page, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body.archive, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body.search-results, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site-inner { background-color: #6f87b8 !important; background-image: linear-gradient(135deg, #5a74a8 0%, #6f87b8 40%, #8aa3cc 70%, #4e6898 100%) !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-size: cover !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .main-wrapper, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #content, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .content-wrapper, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .page-content-wrapper { background: transparent !important; border: none !important; } /* Dark Mode Background — Original Ambient Dark Mesh */ html[scheme="dark"] body, html[data-theme="dark"] body, html.dark-mode body, html[scheme="dark"] body.home, html[scheme="dark"] body.blog, html[scheme="dark"] body.front-page, html[scheme="dark"] body.single, html[scheme="dark"] body.single-post, html[scheme="dark"] body.page, html[scheme="dark"] body.archive, html[scheme="dark"] body.search-results, html[scheme="dark"] #site, html[scheme="dark"] #site-inner, html[scheme="dark"] .main-wrapper, html[scheme="dark"] #content { background-color: #090d16 !important; background-image: radial-gradient(at 12% 12%, rgba(167, 139, 250, 0.12) 0px, transparent 55%), radial-gradient(at 88% 28%, rgba(16, 185, 129, 0.1) 0px, transparent 50%), radial-gradient(at 48% 70%, rgba(56, 189, 248, 0.08) 0px, transparent 55%), linear-gradient(180deg, #090d16 0%, #0f172a 40%, #1e1b4b 75%, #090d16 100%) !important; background-attachment: fixed !important; color: #f1f5f9 !important; } /* 22.2 Single Post Article Container — White in Light Mode, Dark in Dark Mode */ html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body.single article.single-content.card-layout-w { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important; border-radius: 24px !important; } html[scheme="dark"] body.single article.single-content.card-layout-w { background: rgba(17, 24, 39, 0.88) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65) !important; border-radius: 24px !important; } /* 22.3 Post Cards on Grids — White in Light Mode, Dark in Dark Mode */ html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .card-layout-w:not(article.single-content), html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .blogsy-post-grid-item, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .pyml-card { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important; border-radius: 18px !important; transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .card-layout-w:not(article.single-content):hover, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .blogsy-post-grid-item:hover, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .pyml-card:hover { background: #ffffff !important; transform: translateY(-4px) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06) !important; border-color: rgba(0, 113, 227, 0.35) !important; } html[scheme="dark"] .card-layout-w:not(article.single-content), html[scheme="dark"] .blogsy-post-grid-item, html[scheme="dark"] .pyml-card { background: rgba(17, 24, 39, 0.8) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important; } html[scheme="dark"] .card-layout-w:not(article.single-content):hover { border-color: rgba(167, 139, 250, 0.4) !important; box-shadow: 0 16px 40px rgba(167, 139, 250, 0.2) !important; } /* ============================================================ 23. Production Polish — Single Source of Truth Fixes: background conflicts, font hierarchy, link colors, dark mode body, footer consolidation, card perf, a11y ============================================================ */ /* 23.1 Body & Page Background — Definitive Rules Override the old #000 dark body set in Fix 9 (Section 14) and let Section 22 ambient gradients take full effect. These selectors are more specific so they win cleanly. */ html[scheme="dark"] body { background-color: #0b0f19 !important; } body { color: #1d1d1f; } /* 23.2 Font Size — Single Definitive Scale Resolve conflicts between style.css clamp() & Section 19 overrides. These !important rules win over both older sheets. */ body, p, li, blockquote, figcaption { font-size: 1rem !important; /* 16px base — universal comfortable reading */ line-height: 1.75 !important; } .single-content-inner, .single-content-inner p { font-size: 1.0625rem !important; /* ~17px — slightly larger for longform editorial */ line-height: 1.82 !important; color: #1d1d1f !important; } html[scheme="dark"] .single-content-inner, html[scheme="dark"] .single-content-inner p { color: #d1d5db !important; } /* Entry title scale */ .entry-title, .blogsy-post-grid .entry-title { font-size: clamp(1.05rem, 2vw, 1.4rem) !important; line-height: 1.28 !important; letter-spacing: -0.015em !important; font-weight: 700 !important; } /* Archive / category page H1 */ .archive-title, .page-title, .category-title { font-size: clamp(1.5rem, 3vw, 2.25rem) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } /* Widget headings */ .widget-title, .blogsy-divider-heading .title-text { font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--vv-muted) !important; } /* 23.3 Link colors — scope to avoid body-wide blue override Global `a` in style.css colors everything blue; we scope fixes here. */ .single-content-inner a { color: #0071e3; text-decoration: underline; text-underline-offset: 2px; transition: opacity 180ms ease; } .single-content-inner a:hover { opacity: 0.75; } /* Post card title links — dark ink, not blue */ .entry-title a, .blogsy-post-grid .entry-title a, .post .entry-title a { color: var(--vv-ink) !important; text-decoration: none !important; } .entry-title a:hover, .blogsy-post-grid .entry-title a:hover { color: var(--vv-apple-blue) !important; } html[scheme="dark"] .entry-title a { color: #f5f5f7 !important; } /* Footer links — muted gray, not blue */ #site-footer a, footer a { color: inherit !important; text-decoration: none !important; } /* Navigation links — ink color, not blue */ .blogsy-header-nav > li > a, .rebgr-primary-nav li a { color: var(--vv-ink) !important; text-decoration: none !important; } /* 23.4 Header — final frosted glass authority */ #site-header, .site-header, .pt-header-inner { background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: saturate(180%) blur(22px) !important; -webkit-backdrop-filter: saturate(180%) blur(22px) !important; border-bottom: 0.5px solid rgba(0, 0, 0, 0.09) !important; position: sticky !important; top: 0 !important; z-index: 1000 !important; transition: background 300ms ease, border-color 300ms ease !important; } html[scheme="dark"] #site-header, html[scheme="dark"] .site-header, html[scheme="dark"] .pt-header-inner { background: rgba(11, 15, 26, 0.85) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* Header brand site title */ .site-title a { font-size: 1.35rem !important; font-weight: 700 !important; color: var(--vv-ink) !important; text-decoration: none !important; letter-spacing: -0.02em !important; } html[scheme="dark"] .site-title a { color: #f5f5f7 !important; } /* Header nav link text size & weight */ .blogsy-header-nav > li > a { font-size: 0.9rem !important; font-weight: 600 !important; } /* 23.5 Footer — Definitive Background (Overrides style.css #f5f5f7 AND Section 21 gradient) Use a refined gradient that works consistently for light & dark. */ footer#site-footer, #site-footer { position: relative !important; border-top: none !important; background-color: #f3f4f6 !important; background-image: radial-gradient(at 10% 0%, rgba(124, 58, 237, 0.07) 0px, transparent 50%), radial-gradient(at 90% 100%, rgba(13, 122, 95, 0.06) 0px, transparent 50%), linear-gradient(180deg, #f8fafc 0%, #f1f5f9 60%, #eaecf0 100%) !important; padding-top: 52px !important; padding-bottom: 0 !important; } footer#site-footer::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, #7c3aed 0%, #0d7a5f 38%, #0284c7 72%, #f59e0b 100%) !important; z-index: 10 !important; } html[scheme="dark"] footer#site-footer, html[scheme="dark"] #site-footer { background-color: #0d111a !important; background-image: radial-gradient(at 10% 0%, rgba(167, 139, 250, 0.1) 0px, transparent 50%), radial-gradient(at 90% 100%, rgba(16, 185, 129, 0.08) 0px, transparent 50%), linear-gradient(180deg, #111827 0%, #0d111a 60%, #080c14 100%) !important; } html[scheme="dark"] footer#site-footer::before { background: linear-gradient(90deg, #a78bfa 0%, #10b981 38%, #38bdf8 72%, #fbbf24 100%) !important; } /* Footer text colors */ .rebgr-footer-desc, .rebgr-copyright, .rebgr-subscribe-note { color: #6b7280 !important; font-size: 0.875rem !important; } html[scheme="dark"] .rebgr-footer-desc, html[scheme="dark"] .rebgr-copyright, html[scheme="dark"] .rebgr-subscribe-note { color: #9ca3af !important; } /* Footer headings */ .rebgr-footer-heading { font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #374151 !important; margin-bottom: 1.1rem !important; padding-bottom: 0 !important; } html[scheme="dark"] .rebgr-footer-heading { color: #d1d5db !important; } /* Category parent links */ .cat-item-parent > a { font-size: 0.92rem !important; font-weight: 600 !important; color: #374151 !important; text-decoration: none !important; } html[scheme="dark"] .cat-item-parent > a { color: #d1d5db !important; } .cat-item-parent > a:hover { color: #0d7a5f !important; } /* Category child links */ .cat-item-child a { font-size: 0.85rem !important; font-weight: 400 !important; color: #6b7280 !important; text-decoration: none !important; } html[scheme="dark"] .cat-item-child a { color: #9ca3af !important; } .cat-item-child a:hover { color: #0d7a5f !important; } /* Information links */ #site-footer .rebgr-info-links a { color: #4b5563 !important; font-size: 0.9rem !important; font-weight: 400 !important; line-height: 1.7 !important; } html[scheme="dark"] #site-footer .rebgr-info-links a { color: #9ca3af !important; } #site-footer .rebgr-info-links a:hover { color: #0d7a5f !important; } /* Footer bottom bar */ .rebgr-footer-bottom { padding-top: 1.1rem !important; padding-bottom: 1.25rem !important; border-top: 0.5px solid rgba(0, 0, 0, 0.1) !important; margin-top: 2rem !important; } html[scheme="dark"] .rebgr-footer-bottom { border-top-color: rgba(255, 255, 255, 0.08) !important; } /* 23.6 Performance: Remove backdrop-filter from grid cards (expensive on mobile) Replace with solid semi-transparent backgrounds instead. */ .card-layout-w:not(article.single-content), .blogsy-post-grid-item, .pyml-card { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(0, 0, 0, 0.07) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04) !important; border-radius: 16px !important; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important; } .card-layout-w:not(article.single-content):hover { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important; border-color: rgba(124, 58, 237, 0.2) !important; } html[scheme="dark"] .card-layout-w:not(article.single-content), html[scheme="dark"] .blogsy-post-grid-item, html[scheme="dark"] .pyml-card { background: #1c1c1e !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important; } html[scheme="dark"] .card-layout-w:not(article.single-content):hover { border-color: rgba(167, 139, 250, 0.35) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6) !important; } /* 23.7 Single post article card — keep glass but tighten */ body.single article.single-content.card-layout-w { background: rgba(255, 255, 255, 0.97) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(0, 0, 0, 0.07) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03) !important; border-radius: 20px !important; } html[scheme="dark"] body.single article.single-content.card-layout-w { background: rgba(17, 24, 39, 0.92) !important; border-color: rgba(255, 255, 255, 0.09) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important; } /* 23.8 Dark mode backgrounds — align with Section 22 ambient gradients Override the old Fix 9 `html[scheme="dark"] body { background-color: #000000 }` */ html[scheme="dark"] body.home, html[scheme="dark"] body.blog, html[scheme="dark"] body.front-page { background-color: #090d16 !important; } html[scheme="dark"] body.single, html[scheme="dark"] body.single-post { background-color: #0b0f19 !important; } html[scheme="dark"] body.archive, html[scheme="dark"] body.page, html[scheme="dark"] body.search-results { background-color: #0d111a !important; } /* Fallback for any other page type in dark mode */ html[scheme="dark"] body { background-color: #0b0f19 !important; } /* 23.9 Accessibility — Focus ring system */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2.5px solid #0071e3 !important; outline-offset: 2px !important; border-radius: 4px; } html[scheme="dark"] a:focus-visible, html[scheme="dark"] button:focus-visible { outline-color: #6eb0ff !important; } /* 23.10 Reading progress bar — correct color */ .vv-reading-progress span, .reading-progress-bar { background: linear-gradient(90deg, #7c3aed 0%, #0d7a5f 50%, #0071e3 100%) !important; } /* 23.11 Mobile: Reduce backdrop-filter on single post for performance */ @media (max-width: 768px) { body.single article.single-content.card-layout-w { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #ffffff !important; } html[scheme="dark"] body.single article.single-content.card-layout-w { background: #111827 !important; } /* Tighter padding on mobile post card */ .single-content .single-content-inner { padding: 1rem 1rem 1.5rem !important; } } /* 23.12 Print styles — basic readability */ @media print { #site-header, #site-footer, .rebgr-coverflow-wrapper, .blogsy-pyml, .sidebar-container-inner { display: none !important; } body, .single-content-inner { background: #fff !important; color: #000 !important; font-size: 12pt !important; } .single-content { border: none !important; box-shadow: none !important; padding: 0 !important; } } /* ============================================================ Custom Layout & Widget Refinements ============================================================ */ .widget_recent_comments, #recent-comments, .widget-card.widget_recent_comments, .blogsy-sidebar-widget.widget_recent_comments { display: none !important; } .site-footer, #site-footer, footer, .rebgr-footer, .site-footer::before, #site-footer::before, footer::before, .rebgr-footer::before { border-top: none !important; background-image: none !important; } .tag-pill, .tags-wrapper a, .single-post-tags a { padding: 4px 10px !important; font-size: 0.8125rem !important; font-weight: 500 !important; } .author-box, .author-box-card, .blogsy-author-box { padding: 1rem 1.25rem !important; gap: 1rem !important; } .author-avatar img, .author-box-avatar img { width: 52px !important; height: 52px !important; } .author-name, .author-box-name { font-size: 1rem !important; } .author-bio, .author-box-bio { font-size: 0.85rem !important; } .author-box .btn, .author-box button, .author-box a.button { padding: 6px 14px !important; font-size: 0.8125rem !important; border-radius: 20px !important; } .comments-area, #respond { margin-top: 1.5rem !important; padding-top: 1.25rem !important; } .comment-reply-title, #reply-title, .comments-title { font-size: 1.15rem !important; font-weight: 600 !important; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { font-size: 0.875rem !important; padding: 8px 12px !important; border-radius: 8px !important; } .comment-form textarea { min-height: 100px !important; } .form-submit #submit, .comment-form .btn-subscribe, .comment-form input[type="submit"] { padding: 8px 18px !important; font-size: 0.875rem !important; font-weight: 500 !important; border-radius: 20px !important; } /* Header & Footer Logo Sizing & Mode Switching */ .site-logo, .site-branding img, .header-logo-img { height: 76px !important; max-height: 76px !important; width: auto !important; object-fit: contain; } .footer-logo-img { height: 68px !important; max-height: 68px !important; width: auto !important; object-fit: contain; } html:not([data-theme="dark"]):not([scheme="dark"]) .logo-light-mode, html:not([data-theme="dark"]):not([scheme="dark"]) .logo-light-theme { display: inline-block !important; } html:not([data-theme="dark"]):not([scheme="dark"]) .logo-dark-mode, html:not([data-theme="dark"]):not([scheme="dark"]) .logo-dark-theme { display: none !important; } html[data-theme="dark"] .logo-dark-mode, html[scheme="dark"] .logo-dark-mode, html[data-theme="dark"] .logo-dark-theme, html[scheme="dark"] .logo-dark-theme { display: inline-block !important; } html[data-theme="dark"] .logo-light-mode, html[scheme="dark"] .logo-light-mode, html[data-theme="dark"] .logo-light-theme, html[scheme="dark"] .logo-light-theme { display: none !important; } /* Footer brand logo styling */ .rebgr-footer-logo-link { display: inline-block; max-width: 180px; height: auto; } .rebgr-footer-logo-link .footer-logo-img { display: block; width: auto; max-height: 52px; object-fit: contain; } /* ============================================================ Header Responsive Breakpoints (Tablets & Mobiles < 992px) ============================================================ */ @media (max-width: 991px) { .rebgr-primary-nav, .vv-primary-navigation { display: none !important; } .rebgr-search-box, .vv-header-search-box { display: none !important; } /* Keep header bar clean on mobile: Subscribe button lives inside the slide-down drawer */ .rebgr-header-actions .rebgr-subscribe-btn, .rebgr-header-actions .vv-subscribe-link, .rebgr-header-actions .subscribe-button { display: none !important; } .rebgr-header-shell, .vv-header-shell { display: flex !important; align-items: center !important; justify-content: space-between !important; height: 60px !important; min-height: 60px !important; padding: 0 1rem !important; gap: 0.5rem !important; box-sizing: border-box !important; max-width: 100% !important; } .rebgr-header-brand, .vv-header-brand { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; } .rebgr-header-brand a, .vv-header-brand a { display: flex !important; align-items: center !important; gap: 8px !important; text-decoration: none !important; max-width: 100% !important; } .rebgr-brand-title { font-size: 1.05rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .rebgr-header-actions { display: flex !important; align-items: center !important; gap: 0.45rem !important; flex-shrink: 0 !important; } .rebgr-theme-toggle, .vv-theme-toggle, #theme-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 50% !important; padding: 0 !important; } .rebgr-mobile-menu-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 10px !important; background: rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; color: #1d1d1f !important; cursor: pointer !important; padding: 0 !important; transition: all 0.2s ease !important; } html[scheme="dark"] .rebgr-mobile-menu-btn { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #f1f5f9 !important; } .rebgr-mobile-menu-toggle:checked ~ .rebgr-mobile-panel, #site-header.menu-open .rebgr-mobile-panel, .rebgr-mobile-panel.is-open { max-height: 85vh !important; overflow-y: auto !important; visibility: visible !important; opacity: 1 !important; } .rebgr-mobile-menu-toggle:checked + .rebgr-header-shell .rebgr-icon-hamburger, #site-header.menu-open .rebgr-icon-hamburger { display: none !important; } .rebgr-mobile-menu-toggle:checked + .rebgr-header-shell .rebgr-icon-close, #site-header.menu-open .rebgr-icon-close { display: block !important; } } @media (max-width: 576px) { .rebgr-header-shell, .vv-header-shell { height: 56px !important; min-height: 56px !important; padding: 0 0.75rem !important; } .rebgr-header-brand .site-logo, .vv-header-brand .site-logo { max-height: 32px !important; height: 32px !important; } .rebgr-brand-title { font-size: 0.95rem !important; } .rebgr-theme-toggle, .vv-theme-toggle, #theme-toggle { width: 34px !important; height: 34px !important; min-width: 34px !important; } .rebgr-mobile-menu-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; } } .rebgr-mobile-menu-toggle { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; } .rebgr-mobile-menu-toggle:focus-visible + .rebgr-header-shell .rebgr-mobile-menu-btn { outline: 2px solid #0070f3; outline-offset: 2px; } /* Single Post Page ONLY — Content Container Width Expansion (Sidebar remains side-by-side) */ .single .container, .single-post .container, .single-post-container { max-width: 1400px !important; } .single .site-main-layout, .single-post .site-main-layout, .single-post-main-layout, .single .page-content-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: var(--space-8, 2rem) !important; align-items: flex-start !important; } .single .content-container, .single-post-content-container, .single .single-post-article, .single-post .content-container { flex: 1 1 0% !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; } .single .sidebar-container, .single-post-sidebar-container, .single .site-main-layout > div:last-child { flex: 0 0 310px !important; width: 310px !important; min-width: 280px !important; } @media (max-width: 992px) { .single .site-main-layout, .single-post .site-main-layout, .single-post-main-layout, .single .page-content-wrapper { flex-direction: column !important; } .single .sidebar-container, .single-post-sidebar-container { width: 100% !important; flex: 1 1 100% !important; } } /* ============================================================ PREMIUM SINGLE POST — Complete Visual Overhaul ============================================================ */ /* ── Reading Progress Bar ──────────────────────────────────── */ #vv-reading-bar { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, #1a3c6e 0%, #1f8a70 100%); z-index: 99999; transition: width 0.12s linear; pointer-events: none; } /* ── Hero Image — Make it Cinematic ────────────────────────── */ .single-post .single-hero-1 .image-container { position: relative; max-height: 560px; overflow: hidden; border-radius: 0; } .single-post .single-hero-1 .image-container::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.08) 55%, rgba(0,0,0,0.45) 100% ); pointer-events: none; } .single-post .single-hero-1 .image-container img { width: 100%; max-height: 560px; object-fit: cover; object-position: center 30%; display: block; transition: transform 0.7s ease; } .single-post .single-hero-1 .image-container:hover img { transform: scale(1.025); } /* ── Hero Title — Immersive Typography ─────────────────────── */ .single-post .single-hero-title .category { margin-bottom: 0.875rem; } .single-post .single-hero-title .category a { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #fff !important; background: #1f8a70; text-decoration: none; margin-right: 0.4rem; transition: background 0.2s ease; } .single-post .single-hero-title .category a:hover { background: #1a3c6e; } .single-post .single-hero-title h1.title { font-size: clamp(1.35rem, 2.2vw + 0.35rem, 1.85rem) !important; line-height: 1.32 !important; font-weight: 700 !important; letter-spacing: -0.015em; margin-bottom: 0.85rem !important; } .single-post .single-hero-meta { padding-bottom: 1.25rem; margin-bottom: 0; border-bottom: 1px solid rgba(0,0,0,0.08); } .single-post .single-hero-meta .author-avatar img { width: 40px !important; height: 40px !important; border-radius: 50% !important; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .single-post .single-hero-meta .author-name { font-weight: 700; font-size: 0.95rem; } .single-post .single-hero-meta .meta-item.date, .single-post .single-hero-meta .meta-item.reading-time { font-size: 0.85rem; } /* ── Article Card ──────────────────────────────────────────── */ .single-post article.single-content.card-layout-w { border-radius: 16px !important; box-shadow: 0 2px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05) !important; overflow: hidden !important; border: 1px solid rgba(0,0,0,0.06) !important; } /* ── Post Body — Typography Overhaul ──────────────────────── */ .single-post .single-content-inner { padding: 2.25rem 3rem 2rem !important; } .single-post .single-content-inner p, .single-post p, .single-post-wrapper p, .single .entry-content p { font-size: 1.0625rem !important; line-height: 1.9 !important; margin-bottom: 1.4rem !important; } .single-post .single-content-inner h2 { font-size: 1.65rem; margin-top: 2.5rem; font-weight: 700; } .single-post .single-content-inner h3 { font-size: 1.35rem; margin-top: 2rem; font-weight: 700; } .single-post .single-content-inner h4 { font-size: 1.125rem; margin-top: 1.75rem; font-weight: 700; } .single-post .single-content-inner ul, .single-post .single-content-inner ol { margin: 0 0 1.4rem 1.75rem; line-height: 1.85; } .single-post .single-content-inner li { font-size: 1.0625rem; margin-bottom: 0.45rem; } .single-post .single-content-inner blockquote { border-left: 4px solid #1f8a70; background: linear-gradient(90deg, rgba(31,138,112,0.06) 0%, transparent 100%); margin: 2rem 0; padding: 1.25rem 1.5rem; border-radius: 0 10px 10px 0; font-style: italic; font-size: 1.1rem; } .single-post .single-content-inner a { color: #1f8a70; text-decoration: underline; text-decoration-color: rgba(31,138,112,0.35); text-underline-offset: 3px; } /* ── Author Box ────────────────────────────────────────────── */ .single-post .single-author-box-container { margin-top: 1.5rem; } .single-post .single-author-box.card-layout-w { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 1.5rem; padding: 1.75rem 2rem !important; text-align: left !important; border-radius: 16px !important; box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important; border: 1px solid rgba(0,0,0,0.07) !important; } .single-post .single-author-box-avatar { flex-shrink: 0 !important; } .single-post .single-author-box-avatar img { width: 72px !important; height: 72px !important; border-radius: 50% !important; object-fit: cover !important; border: 3px solid rgba(31,138,112,0.2) !important; box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important; } .single-post .single-author-box-desc { flex: 1 !important; text-align: left !important; } .single-post .single-author-box-desc .written-by { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #5a5f66; margin-bottom: 3px; } .single-post .single-author-box-desc h4.author-name { font-size: 1.1rem !important; font-weight: 700 !important; margin-bottom: 0.4rem !important; } .single-post .single-author-box-desc .author-bio { font-size: 0.875rem; line-height: 1.65; margin-bottom: 0.875rem; text-align: left; } .single-post .single-author-box-desc .more-articles { display: inline-flex; align-items: center; padding: 7px 18px; border-radius: 24px; font-size: 0.8rem; font-weight: 600; background: #1f8a70 !important; color: #fff !important; text-decoration: none; transition: background 0.2s ease, transform 0.15s ease; } .single-post .single-author-box-desc .more-articles:hover { background: #176e59 !important; transform: translateY(-1px); } /* ── Comment form ──────────────────────────────────────────── */ .single-post .comments-area { margin-top: 1.5rem !important; border-radius: 16px !important; padding: 2rem 2.5rem !important; border: 1px solid rgba(0,0,0,0.07) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important; } .single-post .comment-form input[type="text"], .single-post .comment-form input[type="email"], .single-post .comment-form input[type="url"], .single-post .comment-form textarea { padding: 10px 14px !important; border-radius: 8px !important; font-size: 0.9375rem !important; } .single-post .comment-form input[type="submit"], .single-post .form-submit #submit { padding: 10px 24px !important; background: #1f8a70 !important; color: #fff !important; border: none !important; border-radius: 24px !important; font-size: 0.9375rem !important; font-weight: 600 !important; cursor: pointer !important; transition: background 0.2s ease, transform 0.15s ease !important; width: auto !important; } .single-post .comment-form input[type="submit"]:hover, .single-post .form-submit #submit:hover { background: #176e59 !important; transform: translateY(-1px) !important; } /* ── Mobile ─────────────────────────────────────────────────── */ @media (max-width: 768px) { .single-post .single-content-inner { padding: 1.5rem 1.25rem !important; } .single-post .single-author-box.card-layout-w { flex-direction: column !important; text-align: center !important; } .single-post .single-author-box-desc { text-align: center !important; } .single-post .comments-area { padding: 1.25rem !important; } } /* ============================================================ POST PAGE POLISH — Final Targeted Fixes ============================================================ */ /* 1. Remove the big grey top gap above post */ body.single-post #main.main-wrapper, body.single #main.main-wrapper { padding-top: 0 !important; } body.single-post .single-post-wrapper, body.single .single-post-wrapper { padding-top: 0 !important; margin-top: 0 !important; } body.single-post .content-wrapper, body.single .content-wrapper { padding-top: 1rem !important; } /* 2. Remove footer top color border */ .rebgr-footer, footer.site-footer, .site-footer, #colophon { border-top: none !important; background-image: none !important; box-shadow: none !important; } .rebgr-footer::before, .site-footer::before, footer::before, .rebgr-footer::after, .site-footer::after, footer::after { display: none !important; content: none !important; } /* 4. Compact comment section */ body.single-post .comments-area, body.single .comments-area { padding: 1.5rem 1.75rem !important; border-radius: 12px !important; background: #fff !important; border: 1px solid rgba(0,0,0,0.07) !important; box-shadow: 0 1px 8px rgba(0,0,0,0.05) !important; margin-top: 1.25rem !important; } body.single-post .comments-title, body.single-post .comment-reply-title, body.single-post #reply-title { font-size: 1.05rem !important; font-weight: 700 !important; margin-bottom: 0.875rem !important; color: #1c1c1e !important; } body.single-post .comment-form textarea { min-height: 100px !important; max-height: 160px !important; resize: vertical !important; border-radius: 8px !important; padding: 10px 12px !important; font-size: 0.9rem !important; width: 100% !important; } body.single-post .comment-form p { margin-bottom: 0.625rem !important; } body.single-post .form-submit #submit, body.single-post .comment-form input[type="submit"] { padding: 8px 20px !important; font-size: 0.875rem !important; font-weight: 600 !important; background: #1f8a70 !important; color: #fff !important; border: none !important; border-radius: 20px !important; cursor: pointer !important; width: auto !important; display: inline-flex !important; } body.single-post .form-submit #submit:hover, body.single-post .comment-form input[type="submit"]:hover { background: #176e59 !important; } /* 5. Author box — horizontal layout, properly sized */ body.single-post .single-author-box-container { margin-top: 1.25rem !important; } body.single-post .single-author-box.card-layout-w { display: flex !important; flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 1.25rem !important; padding: 1.25rem 1.5rem !important; border-radius: 12px !important; border: 1px solid rgba(0,0,0,0.07) !important; box-shadow: 0 1px 8px rgba(0,0,0,0.05) !important; background: #fff !important; } body.single-post .single-author-box-avatar { flex-shrink: 0 !important; } body.single-post .single-author-box-avatar img { width: 58px !important; height: 58px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid rgba(31,138,112,0.3) !important; } body.single-post .single-author-box-desc { flex: 1 !important; text-align: left !important; } body.single-post .single-author-box-desc .written-by { font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; color: #999 !important; font-weight: 600 !important; display: block !important; } body.single-post .single-author-box-desc h4.author-name { font-size: 1rem !important; font-weight: 700 !important; margin: 2px 0 4px !important; } body.single-post .single-author-box-desc .author-bio { font-size: 0.84rem !important; color: #5a5f66 !important; line-height: 1.55 !important; margin-bottom: 0.625rem !important; text-align: left !important; } body.single-post .single-author-box-desc a.more-articles { font-size: 0.78rem !important; padding: 5px 14px !important; border-radius: 20px !important; background: #1f8a70 !important; color: #fff !important; text-decoration: none !important; font-weight: 600 !important; display: inline-block !important; } body.single-post .single-author-box-desc a.more-articles:hover { background: #176e59 !important; } /* 6. Sidebar — better proportions */ body.single-post .sidebar-container, body.single .sidebar-container, .single-post aside.sidebar-container { flex: 0 0 380px !important; width: 380px !important; min-width: 340px !important; } /* Widget proportions */ body.single-post .widget, body.single .widget { background: #fff; border-radius: 10px; padding: 1rem 1.125rem !important; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 6px rgba(0,0,0,0.04); margin-bottom: 1.25rem !important; } body.single-post .widget .widget-title, body.single-post .widget h2.widget-title, body.single-post .widget h3.widget-title { font-size: 0.9375rem !important; font-weight: 700 !important; margin: 0 0 0.75rem !important; padding-bottom: 0.5rem !important; border-bottom: 2px solid #1f8a70 !important; color: #1c1c1e !important; display: block !important; } body.single-post .widget p, body.single-post .widget li, body.single-post .widget a { font-size: 0.875rem !important; line-height: 1.55 !important; } body.single-post .widget li { padding: 0.3rem 0 !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; } body.single-post .widget li:last-child { border-bottom: none !important; } /* Next/Prev articles */ body.single-post .blogsy-next-prev-posts-wrapper { border-radius: 12px !important; overflow: hidden !important; border: 1px solid rgba(0,0,0,0.07) !important; box-shadow: 0 1px 8px rgba(0,0,0,0.05) !important; background: #fff !important; margin-top: 1.25rem !important; } /* 7. Dark mode adaptations */ html[scheme="dark"] body.single-post .single-author-box.card-layout-w, html[scheme="dark"] body.single-post .comments-area, html[scheme="dark"] body.single-post .blogsy-next-prev-posts-wrapper { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; } html[scheme="dark"] body.single-post .widget { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; } /* 8. Google AdSense / Ad Containers Fix — Never show yellow background on ins */ ins, ins.adsbygoogle, .adsbygoogle, ins[data-ad-client], ins[class*="adsbygoogle"] { background: transparent !important; background-color: transparent !important; text-decoration: none !important; } /* ============================================================ 19. Production polish — focused header, footer and article page ============================================================ */ /* The automatic top article advert reserves empty space even when it has no creative to show. Keep in-content adverts intact, but remove this orphaned placement so readers arrive at the story immediately. */ body.single-post .single-post-wrapper > ins.adsbygoogle, body.single-post .single-post-wrapper > .adsbygoogle { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; } /* ============================================================ 19. Header, Footer, Post Typography & Image Display Refinements ============================================================ */ /* ── Header: Clean, balanced frosted glass navigation bar ───── */ #site-header.rebgr-header { position: sticky; top: 0; z-index: 9999; background: rgba(255, 255, 255, 0.88) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } #site-header .rebgr-header-shell { min-height: 70px !important; height: 70px; max-width: 1240px; padding-inline: clamp(1rem, 3vw, 2.25rem) !important; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } #site-header .rebgr-header-brand, .rebgr-header-brand { flex-shrink: 0; position: relative; z-index: 50; pointer-events: auto; } #site-header .logo-link, .rebgr-header-brand .logo-link, .rebgr-brand-link, .rebgr-footer-logo-link, .vv-brand-logo { display: inline-flex !important; align-items: center !important; gap: 0.75rem !important; text-decoration: none !important; cursor: pointer !important; position: relative !important; z-index: 50 !important; pointer-events: auto !important; color: inherit !important; transition: opacity 180ms ease, transform 180ms ease; } #site-header .logo-link:hover, .rebgr-brand-link:hover, .rebgr-footer-logo-link:hover, .vv-brand-logo:hover { opacity: 0.88; } #site-header .rebgr-brand-icon-wrap, .rebgr-brand-icon-wrap, .rebgr-footer-icon-wrap { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; pointer-events: auto !important; cursor: pointer !important; } #site-header .rebgr-header-brand img, #site-header .site-logo, #site-header .site-logo-icon, .site-logo, .site-logo-icon, .footer-logo-img { height: 53px !important; max-height: 53px !important; width: auto !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important; pointer-events: auto !important; cursor: pointer !important; filter: drop-shadow(0 2px 10px rgba(250, 204, 21, 0.8)) drop-shadow(0 0 18px rgba(255, 215, 0, 0.6)) brightness(1.06) contrast(1.05) !important; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease !important; } #site-header .logo-link:hover .site-logo-icon, .rebgr-brand-link:hover .site-logo-icon, .rebgr-footer-logo-link:hover .footer-logo-img, .vv-brand-logo:hover .site-logo-icon { transform: scale(1.14) rotate(5deg) !important; filter: drop-shadow(0 0 24px rgba(253, 224, 71, 1)) drop-shadow(0 0 42px rgba(245, 158, 11, 0.85)) brightness(1.18) !important; } /* Strictly toggle logo visibility based on theme */ .logo-dark-theme, .logo-dark-mode, img.logo-dark-theme, img.logo-dark-mode, #site-header img.logo-dark-theme, .rebgr-footer-brand img.logo-dark-theme { display: none !important; } .logo-light-theme, .logo-light-mode, img.logo-light-theme, img.logo-light-mode, #site-header img.logo-light-theme, .rebgr-footer-brand img.logo-light-theme { display: block !important; } html[data-theme="dark"] .logo-dark-theme, html[scheme="dark"] .logo-dark-theme, html.dark-mode .logo-dark-theme, body.dark-mode .logo-dark-theme, html[data-theme="dark"] img.logo-dark-theme, html[scheme="dark"] img.logo-dark-theme, html.dark-mode img.logo-dark-theme, body.dark-mode img.logo-dark-theme { display: block !important; } html[data-theme="dark"] .logo-light-theme, html[scheme="dark"] .logo-light-theme, html.dark-mode .logo-light-theme, body.dark-mode .logo-light-theme, html[data-theme="dark"] img.logo-light-theme, html[scheme="dark"] img.logo-light-theme, html.dark-mode img.logo-light-theme, body.dark-mode img.logo-light-theme { display: none !important; } #site-header .rebgr-brand-wordmark, #site-header .rebgr-brand-text, #site-header .rebgr-brand-title, .rebgr-brand-wordmark, .rebgr-brand-text, .rebgr-brand-title, .rebgr-footer-wordmark { color: var(--vv-ink, #0f172a) !important; font-size: 1.25rem !important; font-weight: 900 !important; letter-spacing: -0.025em !important; line-height: 1.1 !important; white-space: nowrap !important; display: inline-block !important; pointer-events: auto !important; cursor: pointer !important; text-decoration: none !important; user-select: auto !important; text-shadow: none !important; } #site-header .rebgr-primary-nav { flex: 1; display: flex; align-items: center; position: relative; z-index: 20; } #site-header .rebgr-primary-nav .vv-primary-menu, #site-header .rebgr-primary-nav ul { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } #site-header .rebgr-primary-nav a { display: inline-flex; align-items: center; padding: 0.42rem 0.85rem; border-radius: 8px; color: var(--vv-ink, #2d3748) !important; font-size: 0.92rem !important; font-weight: 550 !important; letter-spacing: -0.01em; text-decoration: none !important; transition: background 180ms ease, color 180ms ease; } #site-header .rebgr-primary-nav a:hover { background: rgba(0, 0, 0, 0.05) !important; color: #0071e3 !important; } #site-header .rebgr-primary-nav li.current-menu-item > a, #site-header .rebgr-primary-nav li.current_page_item > a { color: #0071e3 !important; font-weight: 650 !important; } /* Header Actions */ #site-header .rebgr-header-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } /* Redesigned Modern Search Box */ #site-header .rebgr-search-box .rebgr-search-form, #site-header .rebgr-search-box .vv-header-search-form { display: flex; align-items: center; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.09); border-radius: 999px; height: 38px; padding: 0 4px 0 11px; gap: 6px; transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1); box-sizing: border-box; } #site-header .rebgr-search-box .rebgr-search-form:hover, #site-header .rebgr-search-box .vv-header-search-form:hover { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.14); } #site-header .rebgr-search-box .rebgr-search-form:focus-within, #site-header .rebgr-search-box .vv-header-search-form:focus-within { background: #ffffff; border-color: #0071e3; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.16), 0 2px 8px rgba(0, 0, 0, 0.04); } #site-header .rebgr-search-box .rebgr-search-icon { display: inline-flex; align-items: center; justify-content: center; color: #64748b; pointer-events: none; flex-shrink: 0; transition: color 180ms ease; } #site-header .rebgr-search-box .rebgr-search-form:focus-within .rebgr-search-icon { color: #0071e3; } #site-header .rebgr-search-box .rebgr-search-input, #site-header .rebgr-search-box .vv-header-search-input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 0.88rem; color: var(--vv-ink, #0f172a); width: 135px; padding: 0; margin: 0; transition: width 240ms cubic-bezier(0.16, 1, 0.3, 1); } #site-header .rebgr-search-box .rebgr-search-input::placeholder, #site-header .rebgr-search-box .vv-header-search-input::placeholder { color: #94a3b8; font-weight: 450; } #site-header .rebgr-search-box .rebgr-search-form:focus-within .rebgr-search-input, #site-header .rebgr-search-box .vv-header-search-form:focus-within .vv-header-search-input { width: 190px; } #site-header .rebgr-search-box .rebgr-search-submit, #site-header .rebgr-search-box .vv-header-search-submit { border: none; background: transparent; width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer; color: #94a3b8; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 180ms ease; } #site-header .rebgr-search-box .rebgr-search-submit:hover, #site-header .rebgr-search-box .vv-header-search-submit:hover { background: rgba(0, 113, 227, 0.1); color: #0071e3; } /* Theme Toggle — override legacy pill styling with clean circular icon button */ #site-header .rebgr-theme-toggle.dark-mode-switcher, #site-header .rebgr-theme-toggle, #site-header .vv-theme-toggle { width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.04) !important; border: 1px solid rgba(0, 0, 0, 0.07) !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; color: var(--vv-ink, #1c2630) !important; transition: all 180ms ease; flex-shrink: 0; } #site-header .rebgr-theme-toggle:hover, #site-header .vv-theme-toggle:hover { background: rgba(0, 0, 0, 0.08) !important; color: #0071e3 !important; } #site-header .rebgr-theme-toggle svg, #site-header .vv-theme-toggle svg { pointer-events: none; } /* Stay Connected CTA button */ #site-header .rebgr-stay-connected-btn, #site-header .rebgr-subscribe-btn, #site-header .subscribe-button { display: inline-flex; align-items: center !important; justify-content: center !important; gap: 6px !important; height: 38px !important; padding: 0 1.25rem !important; border-radius: 999px !important; background: #0071e3 !important; color: #ffffff !important; font-family: 'Inter', -apple-system, sans-serif !important; font-size: 0.875rem !important; font-weight: 600 !important; letter-spacing: -0.01em; text-decoration: none !important; box-shadow: 0 3px 10px rgba(0, 113, 227, 0.25) !important; transition: all 180ms ease !important; cursor: pointer !important; white-space: nowrap !important; } #site-header .rebgr-stay-connected-btn:hover, #site-header .rebgr-subscribe-btn:hover, #site-header .subscribe-button:hover { background: #0077ed !important; transform: translateY(-1px); box-shadow: 0 5px 15px rgba(0, 113, 227, 0.35) !important; color: #ffffff !important; } #site-header .rebgr-stay-connected-btn .rebgr-btn-icon { display: inline-block; flex-shrink: 0; pointer-events: none; } #site-header .rebgr-brand-wordmark, #site-header .rebgr-brand-title { color: #1d1d1f; } #site-header .rebgr-primary-nav a { color: #1d1d1f; } #site-header .rebgr-primary-nav a:hover { background: rgba(0, 0, 0, 0.04); color: #0071e3; } #site-header .rebgr-primary-nav li.current-menu-item > a { color: #0071e3; } /* Dark Mode Header */ html[scheme="dark"] #site-header.rebgr-header { background: rgba(15, 23, 33, 0.90) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; } html[scheme="dark"] #site-header .rebgr-brand-wordmark { color: #f8fafc !important; } html[scheme="dark"] #site-header .rebgr-primary-nav a { color: #cbd5e1 !important; } html[scheme="dark"] #site-header .rebgr-primary-nav a:hover { background: rgba(255, 255, 255, 0.08) !important; color: #38bdf8 !important; } html[scheme="dark"] #site-header .rebgr-primary-nav li.current-menu-item > a { color: #38bdf8 !important; } html[scheme="dark"] #site-header .rebgr-search-box .vv-header-search-form { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); } html[scheme="dark"] #site-header .rebgr-search-box .vv-header-search-form:focus-within { background: #1e293b; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); } html[scheme="dark"] #site-header .rebgr-theme-toggle.dark-mode-switcher, html[scheme="dark"] #site-header .rebgr-theme-toggle { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #f8fafc !important; } html[scheme="dark"] #site-header .rebgr-theme-toggle:hover { background: rgba(255, 255, 255, 0.14) !important; color: #38bdf8 !important; } /* ── Article / Single Post Refinements ─────────────────────── */ body.single-post .single-post-wrapper { padding: clamp(1.5rem, 3vw, 3rem) 0 4rem !important; } body.single-post .content-wrapper { padding-top: 0 !important; } body.single-post .page-content-wrapper { align-items: flex-start; } body.single-post .single-content { border: 1px solid rgba(29, 44, 58, 0.09) !important; border-radius: 20px !important; box-shadow: 0 12px 35px rgba(26, 44, 65, 0.07) !important; overflow: hidden; } body.single-post .single-hero-inside { margin-bottom: 1.5rem !important; padding-bottom: 1.25rem !important; border-bottom: 1px solid rgba(29, 44, 58, 0.08); } body.single-post .single-hero-inside .wp-post-image { display: block; width: 100%; aspect-ratio: 16 / 8.5; height: auto !important; object-fit: cover; border-radius: 14px; margin-bottom: 1.5rem !important; } body.single-post .single-hero-inside .image-container { margin: 0 0 1.5rem !important; } body.single-post .single-hero-inside .image-container .wp-post-image { margin-bottom: 0 !important; } /* Post Page Header Title Size (Item 3) */ body.single-post .single-hero-title h1.title, body.single-post .single-hero-title .title, body.single-post .single-hero-title .title h1, body.single-post .single-content .entry-title, .single-hero-title .title { font-size: clamp(1.35rem, 2.2vw + 0.35rem, 1.85rem) !important; line-height: 1.32 !important; font-weight: 700 !important; letter-spacing: -0.015em !important; margin-bottom: 0.85rem !important; color: var(--vv-ink, #1e293b); } /* Hide Featured Image Caption & Any Stray Overlay Text (Item 4) */ .single-featured-caption, .single-hero-inside .single-featured-caption, .image-container .single-featured-caption, body.single-post .single-featured-caption { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; } /* Images and GIFs in Post Content */ body.single-post .single-content-inner figure, body.single-post .single-content-inner .wp-block-image, body.single-post .single-content-inner p:has(> img) { margin: 2rem auto !important; max-width: min(100%, 760px); } body.single-post .single-content-inner figure img, body.single-post .single-content-inner .wp-block-image img, body.single-post .single-content-inner p > img { display: block; width: 100%; max-width: 100%; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; border-radius: 14px; box-shadow: 0 8px 24px rgba(24, 46, 67, 0.08); } body.single-post .single-content-inner { max-width: 720px; margin-inline: auto; font-size: clamp(1.02rem, 1vw + 0.7rem, 1.14rem) !important; line-height: 1.95 !important; } body.single-post .single-content-inner p { margin-bottom: 1.4em !important; } /* ── Footer: Clean theme neutral styling with high contrast text (Fixed Font Colors) ─── */ .rebgr-footer, body footer#site-footer.rebgr-footer { font-size: 0.9rem; background: var(--vv-surface, #f8fafc) !important; background-image: none !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; color: #334155 !important; margin-top: 3.5rem !important; } .rebgr-footer-main { max-width: 1240px; display: grid; grid-template-columns: 1.45fr 1fr 1.05fr 1.35fr; gap: 2.5rem; padding: 3.75rem clamp(1rem, 3vw, 2.25rem) 2.75rem !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; } .rebgr-footer-logo-link { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none !important; cursor: pointer; transition: opacity 180ms ease; } .rebgr-footer-logo-link:hover { opacity: 0.88; } .rebgr-footer .footer-logo-img { height: 54px !important; max-height: 54px !important; width: auto !important; object-fit: contain; filter: none !important; display: block; } .rebgr-footer .rebgr-footer-wordmark { color: #0f172a !important; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; } .rebgr-footer .rebgr-footer-desc { color: #334155 !important; font-size: 0.9rem; line-height: 1.65; margin: 0.75rem 0 0; } .rebgr-footer .rebgr-footer-heading { font-size: 0.78rem !important; font-weight: 750 !important; letter-spacing: 0.1em !important; text-transform: uppercase; color: #0f172a !important; margin: 0 0 1rem; } .rebgr-footer .rebgr-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; } .rebgr-footer .rebgr-footer-links a, .rebgr-footer .rebgr-footer-links li > a { color: #1e293b !important; font-size: 0.92rem; font-weight: 500; text-decoration: none !important; transition: color 180ms ease; } .rebgr-footer .rebgr-footer-links li.cat-item-child a, .rebgr-footer .rebgr-footer-links .cat-children a { color: #334155 !important; font-size: 0.88rem; } .rebgr-footer .rebgr-footer-links a:hover, .rebgr-footer .rebgr-footer-links li > a:hover { color: #0071e3 !important; font-weight: 600; } .rebgr-footer .rebgr-subscribe-subtitle { color: #334155 !important; font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.85rem; } .rebgr-footer .rebgr-subscribe-note { color: #475569 !important; font-size: 0.82rem; margin-top: 0.5rem; } .rebgr-footer-bottom { max-width: 1240px; display: flex; align-items: center; justify-content: space-between; padding: 1.35rem clamp(1rem, 3vw, 2.25rem) 1.65rem !important; color: #475569 !important; font-size: 0.84rem; } .rebgr-footer .rebgr-copyright { color: #475569 !important; } .rebgr-footer .rebgr-back-to-top { color: #334155 !important; font-weight: 550; text-decoration: none !important; transition: color 180ms ease; } .rebgr-footer .rebgr-back-to-top:hover { color: #0071e3 !important; } /* Footer Dark Mode */ html[scheme="dark"] .rebgr-footer, html[scheme="dark"] body footer#site-footer.rebgr-footer { background: rgba(15, 23, 33, 0.95) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; color: #cbd5e1 !important; } html[scheme="dark"] .rebgr-footer-main { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[scheme="dark"] .rebgr-footer .rebgr-footer-wordmark { color: #f8fafc !important; } html[scheme="dark"] .rebgr-footer .rebgr-footer-heading { color: #f1f5f9 !important; } html[scheme="dark"] .rebgr-footer .rebgr-footer-desc, html[scheme="dark"] .rebgr-footer .rebgr-subscribe-subtitle { color: #cbd5e1 !important; } html[scheme="dark"] .rebgr-footer .rebgr-subscribe-note, html[scheme="dark"] .rebgr-footer .rebgr-copyright, html[scheme="dark"] .rebgr-footer .rebgr-back-to-top { color: #94a3b8 !important; } html[scheme="dark"] .rebgr-footer .rebgr-footer-links a, html[scheme="dark"] .rebgr-footer .rebgr-footer-links li > a { color: #e2e8f0 !important; } html[scheme="dark"] .rebgr-footer .rebgr-footer-links li.cat-item-child a, html[scheme="dark"] .rebgr-footer .rebgr-footer-links .cat-children a { color: #cbd5e1 !important; } html[scheme="dark"] .rebgr-footer .rebgr-footer-links a:hover, html[scheme="dark"] .rebgr-footer .rebgr-back-to-top:hover { color: #38bdf8 !important; } html[scheme="dark"] body.single-post .single-content { border-color: rgba(255, 255, 255, 0.09) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24) !important; } html[scheme="dark"] body.single-post .single-hero-inside { border-bottom-color: rgba(255, 255, 255, 0.11); } html[scheme="dark"] body.single-post .single-content-inner figcaption, html[scheme="dark"] body.single-post .single-content-inner .wp-caption-text { color: rgba(240, 250, 255, 0.72); } /* ── Responsive Breakpoints ────────────────────────────────── */ @media (max-width: 900px) { .rebgr-footer-main { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; } } @media (max-width: 760px) { #site-header .rebgr-header-shell { min-height: 62px !important; height: 62px; } #site-header .rebgr-header-brand img, #site-header .site-logo { height: 38px !important; max-height: 38px !important; } #site-header .rebgr-brand-wordmark { font-size: 1.08rem; } .rebgr-footer .footer-logo-img { height: 44px !important; max-height: 44px !important; } .rebgr-footer .rebgr-footer-wordmark { font-size: 1.2rem; } body.single-post .single-post-wrapper { padding-top: 1rem !important; } body.single-post .single-content { border-radius: 16px !important; } body.single-post .single-hero-inside .wp-post-image { border-radius: 10px; margin-bottom: 1.25rem !important; } body.single-post .single-hero-title h1.title, body.single-post .single-hero-title .title { font-size: 1.25rem !important; } .rebgr-footer-main { grid-template-columns: 1fr !important; gap: 1.75rem !important; padding-top: 2.5rem !important; } .rebgr-footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.65rem; } } /* ============================================================ 26. Universal Blue Gradient & Star Logo Polish ============================================================ */ /* ============================================================ 26. Refined Blue Gradient (Light-Only) & White Content Boxes ============================================================ */ /* 1. Page Background: Continuous Glassy Blue Gradient across the Whole Site */ html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode), html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site-inner { background-color: #6f87b8 !important; background-image: linear-gradient(135deg, #5a74a8 0%, #6f87b8 40%, #8aa3cc 70%, #4e6898 100%) !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-size: cover !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .main-wrapper, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #content, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .site-content, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .content-wrapper, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .page-content-wrapper, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .default-archive-wrap, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .default-archive-container, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .archive-content-container, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .content-container { background: transparent !important; border: none !important; border-top: none !important; border-bottom: none !important; } /* 2. Site Logo: 5-pointed radiant golden star */ .site-logo, .site-logo-icon, .footer-logo-img, #site-header .site-logo-icon, .rebgr-brand-icon-wrap img { height: 48px !important; max-height: 48px !important; width: auto !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important; filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.55)) !important; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease !important; } @media (max-width: 768px) { #site-header .site-logo, #site-header .site-logo-icon, #site-header .rebgr-brand-icon-wrap img { height: 38px !important; max-height: 38px !important; } .footer-logo-img { height: 42px !important; max-height: 42px !important; } } @media (max-width: 480px) { #site-header .site-logo, #site-header .site-logo-icon, #site-header .rebgr-brand-icon-wrap img { height: 32px !important; max-height: 32px !important; } #site-header .rebgr-brand-title { font-size: 1.02rem !important; } } @media (max-width: 600px) { .card-layout, .card-layout-w, .blogsy-post-grid-item, .single-content, body.single article.single-content.card-layout-w { border-radius: 16px !important; } } .rebgr-brand-link:hover .site-logo-icon, .rebgr-footer-logo-link:hover .footer-logo-img, .vv-brand-logo:hover .site-logo-icon { transform: scale(1.14) rotate(5deg) !important; filter: drop-shadow(0 0 18px rgba(253, 224, 71, 0.95)) drop-shadow(0 0 35px rgba(245, 158, 11, 0.5)) !important; } /* 3. Header: Frosted Apple White in Light Mode (NOT blue) */ html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site-header.rebgr-header { background: rgba(255, 255, 255, 0.92) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site-header .rebgr-brand-title, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site-header .rebgr-brand-wordmark { color: #1d1d1f !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site-header .rebgr-primary-nav a { color: #1d1d1f !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site-header .rebgr-primary-nav a:hover { background: rgba(0, 0, 0, 0.05) !important; color: #0071e3 !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site-header .rebgr-primary-nav li.current-menu-item > a { color: #0071e3 !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site-header .rebgr-search-box .vv-header-search-form { background: rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site-header .rebgr-search-box input { color: #1d1d1f !important; } /* 4. Footer: Clean White Apple Style in Light Mode */ html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) #site-footer, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .site-default-footer, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .vv-apple-footer, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .vision-vectors-footer { background: #ffffff !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04) !important; color: #334155 !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer .rebgr-brand-title, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer .rebgr-footer-heading, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer .rebgr-footer-wordmark { color: #0f172a !important; text-shadow: none !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer .rebgr-brand-subtitle, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer .rebgr-footer-desc, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer .rebgr-subscribe-subtitle, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer .rebgr-copyright { color: #334155 !important; text-shadow: none !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer a, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .site-default-footer a, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer .rebgr-footer-links a, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer .rebgr-footer-links li > a { color: #1e293b !important; text-shadow: none !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer a:hover, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .site-default-footer a:hover, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer .rebgr-footer-links a:hover, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer .rebgr-footer-links li > a:hover { color: #0071e3 !important; text-shadow: none !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .rebgr-footer-bottom { color: #475569 !important; border-top: 1px solid rgba(0, 0, 0, 0.06) !important; } /* 5. Post Tabs, Cards, Articles & Text Boxes: Pure White Background in Light Mode */ /* 5. Post Tabs, Cards, Articles & Content Containers: Pure White Background in Light Mode */ html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .card-layout, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .card-layout-w:not(.single-next-prev-posts), html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .blogsy-post-grid-item, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .pyml-card, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .single-content, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) body.single article.single-content.card-layout-w, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .sidebar-container .blogsy-sidebar-widget, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .comments-area, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .cf-card, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .cf-info, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .default-archive-container .post-wrapper, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .blogsy-post-grid .post-wrapper { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important; } /* Fix Image 1: Comments Section — Single seamless white card with NO nested box */ .comments-area { border-radius: 20px !important; padding: 2.25rem 2.5rem !important; margin-top: 2.25rem !important; } .comments-area .comment-respond, .comment-respond { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 1.5rem 0 0 0 !important; } .comments-area .comment-reply-title { font-size: 1.35rem !important; font-weight: 700 !important; color: #1d1d1f !important; margin-bottom: 0.5rem !important; } html[scheme="dark"] .comments-area .comment-reply-title { color: #f1f5f9 !important; } .comments-area textarea, .comments-area input[type="text"], .comments-area input[type="email"], .comments-area input[type="url"] { background: #fbfbfd !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 12px !important; padding: 12px 16px !important; font-size: 0.95rem !important; color: #1d1d1f !important; box-shadow: none !important; transition: all 0.2s ease !important; } html[scheme="dark"] .comments-area textarea, html[scheme="dark"] .comments-area input[type="text"], html[scheme="dark"] .comments-area input[type="email"], html[scheme="dark"] .comments-area input[type="url"] { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #f1f5f9 !important; } .comments-area textarea:focus, .comments-area input:focus { border-color: #0071e3 !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15) !important; } .comments-area .form-submit input#submit, .comments-area input[type="submit"] { background: #0071e3 !important; color: #ffffff !important; border-radius: 999px !important; padding: 10px 28px !important; font-weight: 600 !important; border: none !important; cursor: pointer !important; transition: all 0.2s ease !important; } .comments-area .form-submit input#submit:hover { background: #0077ed !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 113, 227, 0.3) !important; } /* Fix Image 2: Other Articles (Next/Prev Posts) — Single clean white card with seamless items */ .single-next-prev-posts-container { margin: 2.25rem 0 !important; } .single-next-prev-posts.card-layout-w { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 20px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important; padding: 1.75rem 2rem !important; } html[scheme="dark"] .single-next-prev-posts.card-layout-w { background: rgba(17, 24, 39, 0.88) !important; border-color: rgba(255, 255, 255, 0.09) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important; } .single-next-prev-posts-title { font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #6e6e73 !important; margin-bottom: 1.25rem !important; } /* Remove nested box look from post-wrapper inside next-prev */ .single-next-prev-posts .post-wrapper { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0.85rem !important; border-radius: 14px !important; transition: all 0.25s ease !important; } .single-next-prev-posts .post-wrapper:hover { background: rgba(0, 113, 227, 0.04) !important; transform: translateY(-2px) !important; border-color: transparent !important; box-shadow: none !important; } html[scheme="dark"] .single-next-prev-posts .post-wrapper:hover { background: rgba(255, 255, 255, 0.05) !important; } .single-next-prev-posts .image { border-radius: 12px !important; overflow: hidden !important; flex-shrink: 0 !important; width: 72px !important; height: 72px !important; } .single-next-prev-posts .image img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 12px !important; } .single-next-prev-posts .next-prev-label { font-size: 0.82rem !important; font-weight: 600 !important; color: #0071e3 !important; margin-bottom: 4px !important; display: flex !important; align-items: center !important; gap: 4px !important; } .single-next-prev-posts .post-wrapper .title { font-size: 0.98rem !important; line-height: 1.45 !important; font-weight: 600 !important; margin: 0 !important; } .single-next-prev-posts .post-wrapper .title a { color: #1d1d1f !important; text-decoration: none !important; } html[scheme="dark"] .single-next-prev-posts .post-wrapper .title a { color: #f1f5f9 !important; } /* Fix Image 3: Article Tags — Apple pill badges, no green dots, no underlines */ .single-post-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding-top: 1.5rem !important; margin-top: 1.5rem !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; align-items: center !important; } html[scheme="dark"] .single-post-tags { border-top-color: rgba(255, 255, 255, 0.08) !important; } .single-post-tags h4, .single-post-tags .tags-title { font-size: 0.92rem !important; font-weight: 600 !important; color: #1d1d1f !important; margin: 0 6px 0 0 !important; display: inline-flex !important; align-items: center !important; } html[scheme="dark"] .single-post-tags h4, html[scheme="dark"] .single-post-tags .tags-title { color: #f1f5f9 !important; } .single-post-tags a { display: inline-flex !important; align-items: center !important; padding: 6px 14px !important; border-radius: 999px !important; background: rgba(0, 113, 227, 0.08) !important; color: #0071e3 !important; font-size: 0.88rem !important; font-weight: 500 !important; text-decoration: none !important; border: 1px solid rgba(0, 113, 227, 0.15) !important; white-space: nowrap !important; transition: all 0.2s ease !important; } .single-post-tags a:focus:before, .single-post-tags a:hover:before, .single-post-tags a::before, .single-post-tags a:before { display: none !important; content: none !important; } .single-post-tags a:hover { background: #0071e3 !important; color: #ffffff !important; border-color: #0071e3 !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 113, 227, 0.25) !important; text-decoration: none !important; } html[scheme="dark"] .single-post-tags a { background: rgba(255, 255, 255, 0.08) !important; color: #70b4ff !important; border-color: rgba(255, 255, 255, 0.12) !important; } html[scheme="dark"] .single-post-tags a:hover { background: #0071e3 !important; color: #ffffff !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .card-layout-w:hover, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .blogsy-post-grid-item:hover, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .pyml-card:hover { background: #ffffff !important; transform: translateY(-4px) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06) !important; border-color: rgba(0, 113, 227, 0.35) !important; } /* Typography on White Cards/Boxes in Light Mode */ html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .card-layout-w .title, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .card-layout-w .title a, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .blogsy-post-grid-item .title, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .blogsy-post-grid-item .title a, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .single-hero-title h1, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .single-hero-title .title, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) h1, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) h2, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) h3, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) h4, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) h5, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) h6 { color: #1d1d1f !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .card-layout-w p, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .blogsy-post-grid-item p, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .single-content-inner, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .single-content-inner p, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .post-excerpt { color: #374151 !important; } html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .post-meta, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .post-meta a, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .post-date, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .posted-on, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .byline, html:not([scheme="dark"]):not([data-theme="dark"]):not(.dark-mode) .reading-time { color: #6b7280 !important; } /* 6. Dark Mode: Preserved Exactly as Before */ html[scheme="dark"] body, html[data-theme="dark"] body, html.dark-mode body, html[scheme="dark"] #site, html[data-theme="dark"] #site, html.dark-mode #site, html[scheme="dark"] #site-inner, html[data-theme="dark"] #site-inner, html.dark-mode #site-inner, html[scheme="dark"] .main-wrapper, html[data-theme="dark"] .main-wrapper, html.dark-mode .main-wrapper, html[scheme="dark"] #content, html[data-theme="dark"] #content, html.dark-mode #content { background-color: #0b0f19 !important; background-image: radial-gradient(at 12% 12%, rgba(167, 139, 250, 0.12) 0px, transparent 55%), radial-gradient(at 88% 28%, rgba(16, 185, 129, 0.1) 0px, transparent 50%), radial-gradient(at 48% 70%, rgba(56, 189, 248, 0.08) 0px, transparent 55%), linear-gradient(180deg, #090d16 0%, #0f172a 40%, #1e1b4b 75%, #090d16 100%) !important; background-attachment: fixed !important; color: #f1f5f9 !important; } html[scheme="dark"] #site-header.rebgr-header, html[data-theme="dark"] #site-header.rebgr-header, html.dark-mode #site-header.rebgr-header { background: rgba(15, 23, 33, 0.90) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; } html[scheme="dark"] .card-layout-w:not(article.single-content), html[scheme="dark"] .blogsy-post-grid-item, html[scheme="dark"] .pyml-card, html[scheme="dark"] body.single article.single-content.card-layout-w { background: rgba(17, 24, 39, 0.88) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important; color: #f1f5f9 !important; } html[scheme="dark"] .rebgr-footer, html[scheme="dark"] #site-footer, html[scheme="dark"] .site-default-footer { background: #0b0f19 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; color: #f1f5f9 !important; } /* ========================================================================== MOBILE HEADER COMPLETE FIX — Overrides everything ========================================================================== */ @media (max-width: 900px) { /* 1. Header Bar Container */ #site-header, #site-header.vv-site-header, #site-header.rebgr-header { position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 99999 !important; background: #ffffff !important; overflow: visible !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; } html[scheme="dark"] #site-header, html[data-theme="dark"] #site-header, html.dark-mode #site-header { background: #0f172a !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; } .vv-header-shell, .rebgr-header-shell { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 0 14px !important; gap: 10px !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } /* 2. Brand Section: Fits neatly on the left with zero overflow */ .vv-header-brand, .rebgr-header-brand { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .vv-header-brand a, .rebgr-header-brand a, .logo-link, .rebgr-brand-link { display: inline-flex !important; align-items: center !important; min-width: 0 !important; max-width: 100% !important; text-decoration: none !important; gap: 0 !important; } /* Requirement 6: in mobile version remove logo */ #site-header .rebgr-brand-icon-wrap, #site-header .site-logo, #site-header .site-logo-icon, #site-header .rebgr-brand-link .rebgr-brand-icon-wrap { display: none !important; } .rebgr-brand-wordmark, .rebgr-brand-text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; min-width: 0 !important; overflow: hidden !important; line-height: 1.15 !important; gap: 0 !important; } /* Requirement 1: no glowness in header title */ #site-header .rebgr-brand-title { font-family: "Noto Sans Tamil", "Inter", sans-serif !important; font-size: 1.15rem !important; font-weight: 750 !important; color: #1a1a2e !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; text-shadow: none !important; filter: none !important; } /* Hide subtitle on mobile for a clean centered title bar */ #site-header .rebgr-brand-subtitle { display: none !important; } html[scheme="dark"] #site-header .rebgr-brand-title, html[data-theme="dark"] #site-header .rebgr-brand-title, html.dark-mode #site-header .rebgr-brand-title { color: #f1f5f9 !important; } /* 3. Header Actions (Right Side): Theme Toggle (if space available) + Hamburger */ .vv-header-actions, .rebgr-header-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; } /* Hide Desktop elements from Mobile Header Bar */ #site-header .vv-primary-navigation, #site-header .rebgr-primary-nav, #site-header .vv-header-search-box, #site-header .rebgr-search-box, #site-header .rebgr-header-actions .rebgr-stay-connected-btn, #site-header .rebgr-header-actions .vv-subscribe-link, #site-header .rebgr-header-actions .rebgr-subscribe-btn, #site-header .rebgr-header-actions .subscribe-button, #site-header .rebgr-header-actions .popmake-7256 { display: none !important; } /* 4. Theme Toggle Button: Clean circle */ #site-header .rebgr-theme-toggle, #site-header .vv-theme-toggle, #site-header #theme-toggle, #site-header .dark-mode-switcher { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; color: #1e293b !important; cursor: pointer !important; padding: 0 !important; box-sizing: border-box !important; flex-shrink: 0 !important; position: static !important; pointer-events: auto !important; transition: background-color 180ms ease, color 180ms ease !important; } #site-header .rebgr-theme-toggle svg, #site-header .vv-theme-toggle svg { pointer-events: none !important; } html[scheme="dark"] #site-header .rebgr-theme-toggle, html[data-theme="dark"] #site-header .rebgr-theme-toggle, html.dark-mode #site-header .rebgr-theme-toggle { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #f1f5f9 !important; } /* 5. Mobile Hamburger Button: Clean circle */ #site-header .rebgr-mobile-menu-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; color: #1e293b !important; cursor: pointer !important; padding: 0 !important; box-sizing: border-box !important; flex-shrink: 0 !important; position: static !important; pointer-events: auto !important; transition: background-color 180ms ease, color 180ms ease !important; } #site-header .rebgr-mobile-menu-btn svg, #site-header .rebgr-mobile-menu-btn line { pointer-events: none !important; } html[scheme="dark"] #site-header .rebgr-mobile-menu-btn, html[data-theme="dark"] #site-header .rebgr-mobile-menu-btn, html.dark-mode #site-header .rebgr-mobile-menu-btn { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #f1f5f9 !important; } /* Hamburger icon toggle */ #site-header .rebgr-mobile-menu-btn .rebgr-icon-hamburger { display: block !important; } #site-header .rebgr-mobile-menu-btn .rebgr-icon-close { display: none !important; } #site-header.menu-open .rebgr-mobile-menu-btn .rebgr-icon-hamburger, #site-header .rebgr-mobile-menu-btn[aria-expanded="true"] .rebgr-icon-hamburger { display: none !important; } #site-header.menu-open .rebgr-mobile-menu-btn .rebgr-icon-close, #site-header .rebgr-mobile-menu-btn[aria-expanded="true"] .rebgr-icon-close { display: block !important; } /* 6. Mobile Slide-down Panel */ #site-header .rebgr-mobile-panel, .rebgr-mobile-panel { display: none; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; background: #ffffff !important; border-top: 1px solid rgba(0, 0, 0, 0.06) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important; z-index: 99998 !important; max-height: calc(100vh - 56px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; } #site-header.menu-open .rebgr-mobile-panel, .rebgr-mobile-panel.is-open { display: block !important; animation: rebgrMobileSlideDown 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes rebgrMobileSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } html[scheme="dark"] .rebgr-mobile-panel, html[data-theme="dark"] .rebgr-mobile-panel, html.dark-mode .rebgr-mobile-panel { background: #0f172a !important; border-top-color: rgba(255, 255, 255, 0.06) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important; } /* Inner items in mobile panel */ .rebgr-mobile-panel-inner { padding: 1.25rem 1.25rem 1.75rem !important; box-sizing: border-box !important; } /* Mobile Search inside Panel */ .rebgr-mobile-search { margin-bottom: 1.25rem !important; } .rebgr-mobile-search .rebgr-mobile-search-form { display: flex !important; align-items: center !important; width: 100% !important; height: 44px !important; padding: 0 8px 0 12px !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-sizing: border-box !important; gap: 8px !important; } .rebgr-mobile-search .rebgr-search-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #64748b !important; flex-shrink: 0 !important; } .rebgr-mobile-search .rebgr-search-input { flex: 1 !important; width: 100% !important; border: none !important; background: transparent !important; outline: none !important; font-family: inherit !important; font-size: 0.95rem !important; color: #0f172a !important; } .rebgr-mobile-search .rebgr-search-submit { width: 32px !important; height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: none !important; background: rgba(0, 113, 227, 0.1) !important; color: #0071e3 !important; border-radius: 8px !important; cursor: pointer !important; flex-shrink: 0 !important; } html[scheme="dark"] .rebgr-mobile-search .rebgr-mobile-search-form, html[data-theme="dark"] .rebgr-mobile-search .rebgr-mobile-search-form, html.dark-mode .rebgr-mobile-search .rebgr-mobile-search-form { background: #1e293b !important; border-color: #334155 !important; } html[scheme="dark"] .rebgr-mobile-search .rebgr-search-input, html[data-theme="dark"] .rebgr-mobile-search .rebgr-search-input, html.dark-mode .rebgr-mobile-search .rebgr-search-input { color: #f8fafc !important; } .rebgr-mobile-panel .vv-primary-menu, .rebgr-mobile-panel .rebgr-mobile-menu { display: flex !important; flex-direction: column !important; gap: 0.35rem !important; padding: 0 !important; margin: 0 0 1.25rem !important; list-style: none !important; } .rebgr-mobile-panel li a { display: flex !important; align-items: center !important; width: 100% !important; padding: 0.8rem 1rem !important; border-radius: 10px !important; font-family: "Noto Sans Tamil", "Inter", sans-serif !important; font-size: 1.05rem !important; font-weight: 600 !important; color: #1e293b !important; text-decoration: none !important; transition: background-color 180ms ease, color 180ms ease !important; box-sizing: border-box !important; } .rebgr-mobile-panel li a:hover, .rebgr-mobile-panel li a:active { background-color: rgba(0, 112, 243, 0.08) !important; color: #0070f3 !important; } html[scheme="dark"] .rebgr-mobile-panel li a, html[data-theme="dark"] .rebgr-mobile-panel li a, html.dark-mode .rebgr-mobile-panel li a { color: #f1f5f9 !important; } /* Stay Connected button in mobile drawer: visible and prominent HERE */ .rebgr-mobile-stay-connected, .rebgr-mobile-subscribe { padding-top: 1rem !important; border-top: 1px solid rgba(0, 0, 0, 0.06) !important; } html[scheme="dark"] .rebgr-mobile-stay-connected, html[data-theme="dark"] .rebgr-mobile-stay-connected, html.dark-mode .rebgr-mobile-stay-connected, html[scheme="dark"] .rebgr-mobile-subscribe, html[data-theme="dark"] .rebgr-mobile-subscribe, html.dark-mode .rebgr-mobile-subscribe { border-top-color: rgba(255, 255, 255, 0.08) !important; } .rebgr-mobile-stay-connected .rebgr-stay-connected-btn--mobile, .rebgr-mobile-subscribe .rebgr-subscribe-btn-mobile { display: flex !important; width: 100% !important; height: 48px !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 12px !important; background: #0071e3 !important; color: #ffffff !important; font-family: 'Inter', sans-serif !important; font-size: 1rem !important; font-weight: 600 !important; text-decoration: none !important; box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35) !important; box-sizing: border-box !important; cursor: pointer !important; } .rebgr-mobile-stay-connected .rebgr-stay-connected-btn--mobile:hover, .rebgr-mobile-subscribe .rebgr-subscribe-btn-mobile:hover { background: #0077ed !important; } } /* Very narrow mobile screen (< 330px) - keep layout unbroken */ @media (max-width: 330px) { #site-header .rebgr-brand-title { font-size: 1rem !important; } #site-header .rebgr-theme-toggle { width: 32px !important; height: 32px !important; min-width: 32px !important; } #site-header .rebgr-mobile-menu-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; } } /* ============================================================ About Me Page — Welcome Hero Image Banner ============================================================ */ .rebgr-about-hero-image { width: 100%; margin: 0.5rem 0 2rem; overflow: hidden; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.06); background: #ffffff; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } .rebgr-about-hero-image:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); } .rebgr-about-banner-img { width: 100%; height: auto; max-height: 480px; object-fit: cover; display: block; border-radius: inherit; } html[scheme="dark"] .rebgr-about-hero-image, html[data-theme="dark"] .rebgr-about-hero-image, body.dark-mode .rebgr-about-hero-image { background: #1c1c1e; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5); } /* Responsive reading layout and uncropped editorial images. */ body.single-post .single-post-wrapper, body.single-post .single-post-wrapper > .pt-container, body.single-post .single-post-wrapper .page-content-wrapper { max-width: 100% !important; } body.single-post article.single-content.card-layout-w { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; padding: clamp(1.25rem, 3vw, 2.5rem) !important; } body.single-post article.single-content .single-content-inner { padding: 0 !important; font-size: clamp(1rem, 1.15vw, 1.125rem) !important; line-height: 1.8 !important; } body.single-post .single-hero-inside img, body.single-post .single-hero-outside img, body.single-post .single-hero .image-container img, body.single-post .single-featured-image img, body.single-post .post-thumbnail img { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; } @media (max-width: 768px) { body.single-post .single-post-wrapper { padding: 1rem 0 !important; } body.single-post article.single-content.card-layout-w { padding: 1.1rem !important; border-radius: 14px !important; } body.single-post article.single-content .single-content-inner { font-size: 1rem !important; line-height: 1.75 !important; } .rebgr-header-shell { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; gap: 0.5rem !important; } .rebgr-header-brand { flex: 1 1 auto !important; min-width: 0 !important; } .rebgr-brand-link { min-width: 0 !important; } .rebgr-header-actions { flex: 0 0 auto !important; min-width: 0 !important; } .rebgr-header-actions .rebgr-search-box { display: none !important; } } @media (max-width: 420px) { .rebgr-header-shell { padding-right: 0.6rem !important; padding-left: 0.6rem !important; } .rebgr-brand-icon-wrap img { width: 34px !important; height: 34px !important; } .rebgr-brand-title { font-size: 0.85rem !important; } } /* Screenshot follow-up: keep header groups from colliding, and let Tamil text wrap naturally instead of stretching every line across the card. */ @media (min-width: 901px) { #site-header .rebgr-header-brand { flex: 0 1 300px !important; min-width: 230px !important; } #site-header .rebgr-primary-nav { flex: 1 1 0 !important; min-width: 0 !important; } #site-header .rebgr-primary-nav .vv-primary-menu { justify-content: center !important; gap: clamp(0.55rem, 1vw, 1rem) !important; } #site-header .rebgr-header-actions { flex: 0 1 430px !important; min-width: 0 !important; gap: 0.65rem !important; } #site-header .rebgr-search-box { flex: 1 1 190px !important; min-width: 150px !important; max-width: 220px !important; } } body.single-post .single-content-inner, body.single-post .single-content-inner p, body.single-post .single-content-inner li { max-width: none !important; text-align: start !important; text-justify: auto !important; word-spacing: normal !important; } body.single-post .single-hero-inside .image-container .wp-post-image { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; } @media (max-width: 768px) { body.single-post .content-wrapper > .pt-container { width: 100% !important; max-width: none !important; padding-right: 10px !important; padding-left: 10px !important; } body.single-post .page-content-wrapper, body.single-post .page-content-wrapper > .content-container { width: 100% !important; max-width: none !important; min-width: 0 !important; } body.single-post article.single-content.card-layout-w { padding: 12px !important; } body.single-post .single-content-inner { max-width: none !important; margin: 0 !important; } } /* ============================================================ Post Card Title Flush Alignment & Clean Spacing ============================================================ */ .default-post-list-item .title, .card-layout .title, .post-wrapper .title, h2.title, h1.title, .entry-title { text-indent: 0 !important; padding-left: 0 !important; margin-left: 0 !important; } .default-post-list-item .title a, .card-layout .title a, .post-wrapper .title a, h2.title a, .entry-title a, .title-span { text-indent: 0 !important; padding-left: 0 !important; margin-left: 0 !important; } .default-post-list-item .title::before, .default-post-list-item .title .title-span::before, .default-post-list-item .title a::before { display: none !important; content: none !important; } /* ============================================================ WIDGETS & SITE-WIDE GLASSY BLUE REFINEMENTS ============================================================ */ /* 1. Global Glassy Blue Background */ html:not([scheme="dark"]), html:not([scheme="dark"]) body, html[scheme="light"] body, html[data-theme="light"] body, html.light-mode body, body:not([class*="dark"]):not([scheme="dark"]) { background-color: #6f87b8 !important; background-image: linear-gradient(135deg, #5a74a8 0%, #6f87b8 40%, #8aa3cc 70%, #4e6898 100%) !important; background-attachment: fixed !important; background-size: cover !important; background-repeat: no-repeat !important; } /* 2. Top Hero widget: White headline */ .rebgr-hero-headline, .rebgr-homepage-hero h1, .rebgr-hero-text h1 { color: #ffffff !important; text-shadow: 0 3px 20px rgba(0, 0, 0, 0.28) !important; } /* 3. Bottom PYML Coverflow widget: White heading & remove line */ #blogsy-pyml, .blogsy-pyml, .rebgr-pyml-coverflow-section { border: none !important; border-top: none !important; border-bottom: none !important; box-shadow: none !important; outline: none !important; background: transparent !important; } .pyml-header-container { border: none !important; border-top: none !important; border-bottom: none !important; } .pyml-header-container { border: none !important; border-top: none !important; border-bottom: none !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; width: 100% !important; margin: 0 auto 1.75rem auto !important; } .pyml-coverflow-heading { color: #ffffff !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif !important; font-size: clamp(1.25rem, 2.4vw, 1.85rem) !important; font-weight: 700 !important; letter-spacing: -0.015em !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; margin: 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.75rem !important; white-space: nowrap !important; padding: 0.65rem 2.25rem !important; background: rgba(255, 255, 255, 0.20) !important; backdrop-filter: blur(16px) saturate(180%) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; border-radius: 9999px !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important; } .pyml-sparkle { color: #ffd700 !important; font-size: 1.15em !important; filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.75)) !important; line-height: 1 !important; display: inline-block !important; } .pyml-title-text { white-space: nowrap !important; color: #ffffff !important; } /* 4. Navigation Buttons: Frosted Glass with Apple Blue */ .cf-btn, .rebgr-cf-btn { pointer-events: auto !important; width: 52px !important; height: 52px !important; border-radius: 50% !important; border: 1.5px solid rgba(255, 255, 255, 0.75) !important; background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; color: #0071e3 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16) !important; } .cf-btn svg, .rebgr-cf-btn svg { width: 24px !important; height: 24px !important; stroke: #0071e3 !important; stroke-width: 2.5px !important; fill: none !important; } .cf-btn:hover, .rebgr-cf-btn:hover { background: #0071e3 !important; border-color: #0071e3 !important; color: #ffffff !important; transform: scale(1.1) !important; box-shadow: 0 8px 24px rgba(0, 113, 227, 0.4) !important; } .cf-btn:hover svg, .rebgr-cf-btn:hover svg { stroke: #ffffff !important; } /* ============================================================ PRODUCTION-READY: NON-INTRUSIVE ADVERTISEMENT SYSTEM Places ads in elegant, non-disruptive, fully responsive containers ============================================================ */ /* Wrapper for Top Single Post Ad */ .rebgr-single-top-ad-wrapper { max-width: 860px !important; margin: 1.5rem auto 1.25rem auto !important; padding: 0 clamp(0.75rem, 2vw, 1.5rem) !important; box-sizing: border-box !important; clear: both !important; text-align: center !important; } /* Wrapper for In-Content Ads */ .rebgr-single-before-content-ad-wrapper { margin: 1.75rem auto 2.25rem auto !important; clear: both !important; text-align: center !important; } .rebgr-single-after-content-ad-wrapper { margin: 2.75rem auto 2rem auto !important; clear: both !important; text-align: center !important; border-top: 1px solid rgba(0, 0, 0, 0.06) !important; padding-top: 1.5rem !important; } html[scheme="dark"] .rebgr-single-after-content-ad-wrapper { border-top-color: rgba(255, 255, 255, 0.08) !important; } /* Wrapper for Archive Header Ad */ .rebgr-archive-top-ad-wrapper { max-width: 100% !important; margin: 1.5rem auto 2rem auto !important; text-align: center !important; } /* Ad Block Container - Clean Frosted Apple Frame */ .rebgr-single-top-ad-wrapper ins.adsbygoogle, .rebgr-single-before-content-ad-wrapper ins.adsbygoogle, .rebgr-single-after-content-ad-wrapper ins.adsbygoogle, .rebgr-archive-top-ad-wrapper ins.adsbygoogle, .blogsy-banner-widget, .blogsy-banner, .blogsy-adsense, .sidebar-container .widget_block:has(.adsbygoogle) { display: block !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important; border-radius: 14px !important; text-align: center !important; } /* Subtle, Elegant Micro-Disclosure Label ("ADVERTISEMENT") */ .rebgr-single-top-ad-wrapper::before, .rebgr-single-before-content-ad-wrapper::before, .rebgr-single-after-content-ad-wrapper::before, .rebgr-archive-top-ad-wrapper::before, .blogsy-banner-widget::before, .sidebar-container .widget_block:has(.adsbygoogle)::before { content: "ADVERTISEMENT" !important; display: block !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif !important; font-size: 0.65rem !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #94a3b8 !important; margin-bottom: 6px !important; text-align: center !important; line-height: 1 !important; } html[scheme="dark"] .rebgr-single-top-ad-wrapper::before, html[scheme="dark"] .rebgr-single-before-content-ad-wrapper::before, html[scheme="dark"] .rebgr-single-after-content-ad-wrapper::before, html[scheme="dark"] .rebgr-archive-top-ad-wrapper::before, html[scheme="dark"] .blogsy-banner-widget::before, html[scheme="dark"] .sidebar-container .widget_block:has(.adsbygoogle)::before { color: #64748b !important; } /* Sidebar Ad Constraint */ .sidebar-container ins.adsbygoogle, .sidebar-container .blogsy-banner { max-width: 100% !important; overflow: hidden !important; margin: 1rem auto !important; } /* Ensure no ad causes horizontal scrollbar on any screen */ ins.adsbygoogle, ins.adsbygoogle iframe { max-width: 100% !important; box-sizing: border-box !important; } /* ============================================================ PRODUCTION-READY: READABILITY & CROSS-DEVICE COMPATIBILITY Optimized line length, fluid typography, touch ergonomics ============================================================ */ /* Global Smoothness & Layout Protection */ html { overflow-x: hidden !important; scroll-behavior: smooth !important; -webkit-text-size-adjust: 100% !important; } body { overflow-x: hidden !important; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* Single Post Reading Experience - Optimal Measure & Leading */ .single-content { max-width: 100% !important; box-sizing: border-box !important; } .single-content .single-content-inner { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Mukta Malar", "Noto Sans Tamil", sans-serif !important; color: #2d3748 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } html[scheme="dark"] .single-content .single-content-inner { color: #e2e8f0 !important; } /* Article Body Paragraphs - Comfortable Line Height for Tamil and English */ .single-content-inner p { font-size: clamp(1.05rem, 1.8vw, 1.125rem) !important; line-height: 1.85 !important; letter-spacing: -0.003em !important; margin-bottom: 1.5rem !important; color: #1e293b !important; } html[scheme="dark"] .single-content-inner p { color: #f1f5f9 !important; } /* Article Headings inside Post */ .single-content-inner h2 { font-size: clamp(1.4rem, 3vw, 1.85rem) !important; font-weight: 750 !important; line-height: 1.35 !important; letter-spacing: -0.015em !important; margin-top: 2.25rem !important; margin-bottom: 0.85rem !important; color: #0f172a !important; } .single-content-inner h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important; font-weight: 700 !important; line-height: 1.4 !important; margin-top: 1.85rem !important; margin-bottom: 0.75rem !important; color: #0f172a !important; } html[scheme="dark"] .single-content-inner h2, html[scheme="dark"] .single-content-inner h3 { color: #f8fafc !important; } /* Blockquotes: Elegant Apple Pull-Quote */ .single-content-inner blockquote { margin: 2rem 0 !important; padding: 1.25rem 1.75rem !important; border-left: 4px solid #0071e3 !important; background: rgba(0, 113, 227, 0.04) !important; border-radius: 0 14px 14px 0 !important; font-size: 1.12rem !important; line-height: 1.75 !important; font-style: italic !important; color: #1e293b !important; } html[scheme="dark"] .single-content-inner blockquote { background: rgba(0, 113, 227, 0.10) !important; border-left-color: #38bdf8 !important; color: #e2e8f0 !important; } /* Unordered & Ordered Lists inside Articles */ .single-content-inner ul, .single-content-inner ol { padding-left: 1.5rem !important; margin-bottom: 1.5rem !important; } .single-content-inner li { font-size: clamp(1rem, 1.6vw, 1.08rem) !important; line-height: 1.8 !important; margin-bottom: 0.5rem !important; color: #1e293b !important; } html[scheme="dark"] .single-content-inner li { color: #e2e8f0 !important; } /* Code & Pre Blocks */ .single-content-inner pre { background: #0f172a !important; color: #e2e8f0 !important; padding: 1.25rem !important; border-radius: 12px !important; overflow-x: auto !important; font-size: 0.92rem !important; line-height: 1.6 !important; margin: 1.75rem 0 !important; } /* Images & Media inside Article: Fluid with Apple Soft Radius */ .single-content-inner img { max-width: 100% !important; height: auto !important; border-radius: 14px !important; display: block !important; margin: 1.5rem auto !important; } /* Responsive Tables */ .single-content-inner table { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; margin: 1.75rem 0 !important; display: block !important; overflow-x: auto !important; } /* Post Tags & Author Box */ .single-post-tags { margin-top: 2rem !important; padding-top: 1.25rem !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; } html[scheme="dark"] .single-post-tags { border-top-color: rgba(255, 255, 255, 0.08) !important; } /* ============================================================ RESPONSIVE BREAKPOINTS (Mobile, Tablet, Desktop) ============================================================ */ /* Mobile Phones (<= 640px) */ @media (max-width: 640px) { .pt-container { padding-left: 1rem !important; padding-right: 1rem !important; } .single-content { padding: 1.25rem 1rem 1.75rem 1rem !important; border-radius: 16px !important; } .single-content .single-content-inner { padding: 0 !important; } .single-hero-inside h1, .single-content .entry-title, .single-content .title { font-size: clamp(1.4rem, 6vw, 1.85rem) !important; line-height: 1.35 !important; } .single-content-inner p { font-size: 1.05rem !important; line-height: 1.8 !important; margin-bottom: 1.25rem !important; } /* Compact card layout for archive list on mobile */ .default-post-list-item.card-layout { padding: 1rem !important; border-radius: 16px !important; margin-bottom: 1.25rem !important; } .default-post-list-item .post-wrapper-inner { flex-direction: column !important; } .default-post-list-item .image-container { width: 100% !important; max-height: 220px !important; margin-bottom: 0.85rem !important; } /* Tap target size enhancements (min 44px) */ .page-numbers, .cf-btn, .rebgr-cf-btn, .rebgr-read-btn, .cf-read-btn { min-height: 44px !important; min-width: 44px !important; } /* Top ad slot on mobile: compact margins */ .rebgr-single-top-ad-wrapper { margin: 0.75rem auto !important; padding: 0 0.5rem !important; } } /* Tablet Screens (641px - 1024px) */ @media (min-width: 641px) and (max-width: 1024px) { .pt-container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .page-content-wrapper.sidebar-right, .page-content-wrapper.sidebar-left { flex-direction: column !important; } .content-container { width: 100% !important; max-width: 100% !important; } .sidebar-container { width: 100% !important; max-width: 100% !important; margin-top: 2.5rem !important; } .single-content { padding: 2rem 1.75rem !important; } } /* Large Desktop (>= 1280px) */ @media (min-width: 1280px) { .page-content-wrapper { display: flex !important; gap: 2.5rem !important; } .content-container { flex: 1 1 0% !important; min-width: 0 !important; } .sidebar-container { width: 340px !important; flex-shrink: 0 !important; } }