/* Theme Name: IndianBlogHelp GP Child Theme URI: https://indianbloghelp.com Description: Custom GeneratePress child theme for IndianBlogHelp.com. Extends the Hero & Footer visual language (deep blue gradient, glass badges, pill buttons, Open Sans) across every section of the site, including a sticky custom header (no topbar, no duplicate branding), a dedicated front page (paginated Latest Updates grid + Browse Categories), and Previous/Next post navigation. Hero & Footer SECTIONS themselves remain untouched external snippets. Author: Mr. Waghela Author URI: https://www.linkedin.com/in/mr-waghela Template: generatepress Version: 1.4.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: ibh-child */ /* ========================================================================== 1. DESIGN TOKENS — extracted from the live Hero & Footer CSS. Every value below traces back to a real rule in those two sections. Do not hand-roll new colors/radii/shadows elsewhere — reuse these. ========================================================================== */ :root{ /* ---- Brand / background gradient (copied 1:1 from Hero & Footer wrapper) ---- */ --ibh-brand-1: #1e6fd9; /* gradient start */ --ibh-brand-2: #0a4fa8; /* gradient mid / "Primary" solid */ --ibh-brand-3: #083d8a; /* gradient end, deepest navy */ --ibh-brand-gradient: linear-gradient(135deg, var(--ibh-brand-1) 0%, var(--ibh-brand-2) 60%, var(--ibh-brand-3) 100%); /* ---- Action / CTA (hero newsletter button) ---- */ --ibh-action-1: #2563eb; --ibh-action-2: #1d4ed8; --ibh-action-gradient: linear-gradient(135deg, var(--ibh-action-1) 0%, var(--ibh-action-2) 100%); /* ---- Accent (glow dividers, link hover, footer arrow bullets) ---- */ --ibh-accent: #3b82f6; --ibh-accent-light: #93c5fd; /* ---- Secondary decorative accents (hero orbs / profile ring) ---- */ --ibh-violet: #7c5cff; --ibh-sky: #7dd3fc; --ibh-green: #86efac; --ibh-gold: #ffc107; /* ---- Neutral text (used on white surfaces, e.g. inputs/cards) ---- */ --ibh-text-dark: #1e293b; --ibh-text-body: #334155; --ibh-text-muted: #64748b; --ibh-text-placeholder: #94a3b8; --ibh-white: #ffffff; /* ---- Light-section backgrounds (extension — Hero/Footer are the only dark zones) ---- */ --ibh-bg-page: #f4f8fd; --ibh-bg-card: #ffffff; --ibh-bg-panel: #ebf4fc; --ibh-border: rgba(10,79,168,.12); --ibh-border-soft: rgba(10,79,168,.08); /* ---- Radius scale (copied from hero/footer pill, stats box, inputs, icons) ---- */ --ibh-radius-pill: 50px; --ibh-radius-lg: 16px; --ibh-radius-md: 10px; --ibh-radius-sm: 9px; --ibh-radius-hairline: 999px; /* ---- Shadow scale (blue-tinted, extends hero button / footer wrapper shadow language) ---- */ --ibh-shadow-sm: 0 2px 8px rgba(10,79,168,.08); --ibh-shadow-md: 0 6px 20px rgba(10,79,168,.12); --ibh-shadow-lg: 0 10px 30px rgba(10,79,168,.16); --ibh-shadow-btn: 0 4px 16px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.15); --ibh-shadow-btn-hover: 0 6px 24px rgba(37,99,235,.45); /* ---- Spacing scale (internal/card padding — legibility safe) ---- */ --ibh-space-1: 4px; --ibh-space-2: 8px; --ibh-space-3: 12px; --ibh-space-4: 16px; --ibh-space-5: 20px; --ibh-space-6: 24px; --ibh-space-7: 32px; /* ---- THE 6px RULE — hard cap for content side-padding and outer gaps ---- */ --ibh-gap: 6px; /* ---- Typography ---- */ --ibh-font: 'Open Sans', sans-serif; --ibh-fs-h2: 22px; --ibh-fs-h3: 18px; --ibh-fs-body: 15px; --ibh-fs-meta: 13.5px; --ibh-fs-label: 12.5px; --ibh-fs-micro: 10.5px; /* ---- Layout ---- */ --ibh-max-width: 1200px; --ibh-transition: .18s ease; } /* ========================================================================== 2. GLOBAL RESET / TYPOGRAPHY — Open Sans only, everywhere. No exceptions. ========================================================================== */ /* ---- Horizontal scroll bug fix ---- box-sizing:border-box on every element prevents width:100% + padding/border combinations (very common cause of an element silently overflowing its parent) anywhere in this child theme. overflow-x:hidden on html/body is a hard safety net: even if something outside this theme's control (a decorative element in the existing Hero/Footer snippet, a wide image, a plugin output) ever pushes past the viewport edge, the page itself will never show a horizontal scrollbar. break-word/overflow-wrap stops long unbroken Hindi/English strings or URLs from being the thing that pushes width out in the first place. */ *, *::before, *::after{ box-sizing: border-box; } html, body{ max-width: 100%; overflow-x: hidden; } body, h1, h2, h3, h4, h5, h6, p, a, li, .entry-content{ overflow-wrap: break-word; word-wrap: break-word; } img, video, iframe, embed, object, table{ max-width: 100%; } /* A genuinely too-wide table (lots of columns) scrolls internally instead of forcing the whole page to scroll sideways. The actual scroll container is a wrapper div added by ibh_wrap_tables() in functions.php — see there. */ .ibh-table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: var(--ibh-space-5) 0; } .ibh-table-scroll table{ margin: 0; } body, button, input, select, textarea, .site-content, .entry-content, .widget, h1, h2, h3, h4, h5, h6 { font-family: var(--ibh-font) !important; } body{ background-color: var(--ibh-bg-page); color: var(--ibh-text-body); font-size: var(--ibh-fs-body); line-height: 1.7; } /* Site title / tagline area (kept neutral — header logo image is untouched) */ .main-title, .site-description{ font-family: var(--ibh-font) !important; } a{ color: var(--ibh-brand-2); transition: color var(--ibh-transition); } a:hover{ color: var(--ibh-accent); } h2{ font-size: var(--ibh-fs-h2); font-weight: 800; color: var(--ibh-text-dark); line-height: 1.3; letter-spacing: -0.01em; } h3{ font-size: var(--ibh-fs-h3); font-weight: 700; color: var(--ibh-text-dark); line-height: 1.35; } /* ========================================================================== 2b. MOBILE CONTENT-WIDTH FIX (GP core gap, not this child theme's fault). GeneratePress's own mobile reset for #primary/.content-area width is scoped to ".container" (the "Same Container" layout option) — but this site uses GP's actual DEFAULT layout, "Separate Containers", which never gets that reset. The unconditional inline CSS GP outputs in (.content-area{width:70%}) therefore stays in effect on mobile too, leaving #primary at 70% width with ~30% empty space to its right once .site-content switches to flex-direction:column below 768px. This rule forces both the content column and the sidebar to full width on mobile, regardless of which container layout is active. Desktop is untouched — this is wrapped in a mobile-only media query. ========================================================================== */ @media (max-width: 768px) { #primary, .content-area, #right-sidebar, .is-right-sidebar, .sidebar { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ========================================================================== 3. THE 6px GLOBAL SPACING RULE (most important rule of this project) - Content area side padding: max 6px, everywhere outside Hero/Footer. - Outer gap/margin between sibling cards, widgets, boxes, images: max 6px. - Internal padding *inside* a single card stays on the normal spacing scale above (16–20px) so text never touches an edge. ========================================================================== */ .site-content, .site-main, .grid-container, #primary, #right-sidebar, .inside-article, .entry-content, .comments-area, .search-results-wrap, .ibh-archive-wrap{ padding-left: var(--ibh-gap) !important; padding-right: var(--ibh-gap) !important; box-sizing: border-box; } .grid-container{ max-width: var(--ibh-max-width) !important; } /* Generic outer-gap helper applied to every grid/flex collection of cards */ .ibh-card-grid, .ibh-widget-stack, .ibh-related-grid, .ibh-search-grid{ gap: var(--ibh-gap) !important; } .ibh-card-grid > *, .ibh-widget-stack > *, .ibh-related-grid > *, .ibh-search-grid > *{ margin: 0 0 var(--ibh-gap) 0 !important; } .ibh-card-grid > *:last-child, .ibh-widget-stack > *:last-child, .ibh-related-grid > *:last-child, .ibh-search-grid > *:last-child{ margin-bottom: 0 !important; } /* Images inside content never get more than the 6px outer breathing room. NOTE: .ibh-author-box img is deliberately excluded — the author avatar has its own dedicated circular styling in components.css, and this generic rule's border-radius:16px + margins was overriding it, causing the avatar to look like it had a square frame/padding around it. */ .entry-content img, .ibh-card img{ margin-top: var(--ibh-gap); margin-bottom: var(--ibh-gap); border-radius: var(--ibh-radius-lg); max-width: 100%; height: auto; } /* Focus states kept visible for accessibility, styled with brand accent */ a:focus-visible, button:focus-visible, input:focus-visible{ outline: 2px solid var(--ibh-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ========================================================================== HERO SECTION BACKGROUND OVERRIDE Class confirmed from the actual hero snippet: .ibl-hero3 This override is a fallback in case of snippet caching. Primary change should be made in the GP Elements / WPCode snippet's own