/* Theme Name: Deshtak News Theme URI: https://deshtak.com Description: A modern, modular, responsive child theme for GeneratePress focused on news and blog portals. Author: Deshtak Author URI: https://deshtak.com Template: generatepress Version: 1.2.0 Text Domain: deshtak-news */ :root { /* Color Palette */ --wph-primary: #dc2626; /* News Portal Red */ --wph-secondary: #e11d48; /* Accent Rose */ --wph-bg: #f8fafc; /* Light Slate Body Background */ --wph-text: #0f172a; /* Slate 900 Text */ --wph-text-muted: #64748b; /* Slate 500 Subtext */ --wph-border: #e2e8f0; /* Slate 200 border */ --wph-card-bg: #ffffff; /* Card Background */ --wph-success: #22c55e; /* Verified / Success Green */ /* Layout */ --wph-container: 1240px; --wph-spacing: 0.85rem; --wph-radius: 10px; --wph-radius-sm: 6px; --wph-radius-full: 9999px; /* Shadows */ --wph-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.03), 0 1px 2px -1px rgba(15, 23, 42, 0.03); --wph-shadow-hover: 0 12px 20px -5px rgba(15, 23, 42, 0.06), 0 6px 8px -6px rgba(15, 23, 42, 0.06); --wph-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Typography defaults */ --wph-font: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Base resets & typography */ *, *:before, *:after { box-sizing: border-box; } html, body { overflow-x: hidden; width: 100%; margin: 0; padding: 0; color: var(--wph-text); font-family: var(--wph-font); line-height: 1.5; } .site, #page { overflow-x: hidden; width: 100%; } img { max-width: 100%; height: auto; display: block; } a { color: var(--wph-text); text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } a:hover { color: var(--wph-primary); } h1, h2, h3, h4, h5, h6 { color: var(--wph-text); font-family: var(--wph-font); font-weight: 700; line-height: 1.25; margin-top: 0; margin-bottom: 0.5rem; } /* ============================================================ PERFORMANCE: Card Scroll-Reveal Animation (CSS-class based) Using classes instead of inline styles prevents CLS. First 4 cards (above fold) are never hidden. ============================================================ */ .wph-will-reveal { opacity: 0; transform: translateY(15px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .wph-revealed { opacity: 1 !important; transform: translateY(0) !important; } /* ============================================================ CLS FIX: Google Translate banner The .goog-te-banner-frame iframe slides in and shifts the entire page down by ~40px causing CLS. Fixed by hiding it and resetting the margin WordPress/GT adds to . Translation still works perfectly. ============================================================ */ .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } body.translated-ltr, body.translated-rtl { top: 0 !important; margin-top: 0 !important; } .skiptranslate iframe { display: none !important; } /* ============================================================ CLS FIX: Reserve space for images before they load. aspect-ratio ensures the container has the right height immediately so content below does not shift on image load. ============================================================ */ .wph-card img, .wph-post-featured-image img, .wph-hero-main img, .wph-hero-grid-item img, .wph-hero-bottom-item img, .wph-related-post-img img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; } /* ============================================================ CLS FIX: Mobile bottom nav height reservation Prevents content shift when mobile nav appears. ============================================================ */ @media (max-width: 768px) { body.has-mobile-nav { padding-bottom: 64px; } } /* ============================================================ Font Awesome fallback: before FA CSS loads (async), icon placeholders take up correct space so layout doesn't shift. ============================================================ */ .fa, .fas, .far, .fal, .fab, [class^="fa-"], [class*=" fa-"] { display: inline-block; min-width: 1em; }