/* ========================================================================== OMNIWIRE MEDIA - GLOBAL TAILWIND CSS DUAL-THEME ENGINE (v5.1) Universal High-Speed Editorial Stylesheet & Zero-Bug Color Inverter ========================================================================== */ /* Fonts preconnected and loaded asynchronously via HTML with font-display: swap */ /* 1. Global Tokens & Font Hierarchies */ :root { --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Playfair Display', Georgia, serif; --font-urdu: 'Noto Nastaliq Urdu', serif; /* Light Mode Defaults */ --canvas-bg: #ffffff; --canvas-text: #1e293b; --heading-color: #0f172a; --body-color: #334155; --muted-color: #64748b; --border-color: #e2e8f0; --card-bg: #ffffff; --link-color: #0891b2; } html.dark { /* Dark Mode Overrides */ --canvas-bg: #0B0F17; --canvas-text: #e2e8f0; --heading-color: #ffffff; --body-color: #cbd5e1; --muted-color: #94a3b8; --border-color: #1e293b; --card-bg: rgba(15, 23, 42, 0.7); --link-color: #22d3ee; } body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color 0.25s ease, color 0.25s ease; } h1, h2, h3, .editorial-headline { font-family: var(--font-serif); letter-spacing: -0.015em; word-break: break-word; overflow-wrap: break-word; } /* Urdu / Arabic RTL Font */ html[dir="rtl"] body { font-family: var(--font-urdu), var(--font-sans); } /* ========================================================================== 2. ROOT CANVAS & GLOBAL THEME INVERSION ========================================================================== */ /* Light Mode: Pristine White Canvas & Dark Black Typography */ html:not(.dark) body { background-color: #f8fafc !important; color: #1e293b !important; } /* Dark Mode: Deep Obsidian Canvas & Crisp White Typography */ html.dark body { background-color: #0B0F17 !important; color: #e2e8f0 !important; } /* Top Utility Bar */ html:not(.dark) .nav-utility-bar { background-color: rgba(255, 255, 255, 0.92) !important; border-color: #e2e8f0 !important; color: #475569 !important; } html.dark .nav-utility-bar { background-color: rgba(15, 23, 42, 0.9) !important; border-color: #1e293b !important; color: #94a3b8 !important; } /* Header */ html:not(.dark) header { background-color: rgba(255, 255, 255, 0.95) !important; border-color: #e2e8f0 !important; } html.dark header { background-color: rgba(15, 23, 42, 0.9) !important; border-color: #1e293b !important; } /* News Cards & Generic Containers */ html:not(.dark) .article-card { background-color: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); } html.dark .article-card { background-color: rgba(15, 23, 42, 0.7) !important; border-color: #1e293b !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2); } .article-card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease; } .article-card:hover { transform: translateY(-4px); } .article-card:active { transform: scale(0.99); } .article-img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease; } .group:hover .article-img { transform: scale(1.05); } /* Fixed Solid Ranking Number Badge */ .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; font-weight: 900; font-size: 0.875rem; line-height: 1; flex-shrink: 0; } /* ========================================================================== 3. UNIVERSAL UNDERLINE REMOVAL & LINK SYSTEM Eliminates all unwanted underlines site-wide (Homepage, Grids, Articles) ========================================================================== */ a, a:hover, a:focus, a:active, .article-card a, .hero-card a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, nav a, footer a, header a { text-decoration: none !important; } /* ========================================================================== 4. HOMEPAGE HERO CARD (Featured Breaking Story - Always Pure White) ========================================================================== */ .hero-card, .hero-card h1, .hero-card h1 a, .hero-card .hero-title-link { color: #ffffff !important; text-decoration: none !important; } .hero-card h1 a:hover, .hero-card .hero-title-link:hover { color: #34d399 !important; text-decoration: none !important; } .hero-card p { color: #cbd5e1 !important; } .hero-card span:not([class*="bg-red-"]):not([class*="bg-emerald-"]) { color: #e2e8f0 !important; } /* ========================================================================== 5. FOOTER (Always Dark Obsidian Canvas with Pure White Headings) ========================================================================== */ footer, footer h3, footer h4 { color: #ffffff !important; } footer p, footer span { color: #94a3b8 !important; } footer a { color: #94a3b8 !important; text-decoration: none !important; } footer a:hover { color: #34d399 !important; text-decoration: none !important; } /* ========================================================================== 6. ARTICLE CARDS (Homepage Grid, Category Pages & Search Results) ========================================================================== */ html:not(.dark) .article-card:not(.hero-card) { background-color: #ffffff !important; border-color: #e2e8f0 !important; } html:not(.dark) .article-card:not(.hero-card) h3, html:not(.dark) .article-card:not(.hero-card) h4, html:not(.dark) .article-card:not(.hero-card) h3 a, html:not(.dark) .article-card:not(.hero-card) h4 a, html:not(.dark) .article-card:not(.hero-card) h2 a { color: #0f172a !important; text-decoration: none !important; } html:not(.dark) .article-card:not(.hero-card):hover h3 a, html:not(.dark) .article-card:not(.hero-card):hover h4 a, html:not(.dark) .article-card:not(.hero-card) h3 a:hover, html:not(.dark) .article-card:not(.hero-card) h4 a:hover { color: #059669 !important; text-decoration: none !important; } html.dark .article-card:not(.hero-card) { background-color: rgba(15, 23, 42, 0.7) !important; border-color: #1e293b !important; } html.dark .article-card:not(.hero-card) h3, html.dark .article-card:not(.hero-card) h4, html.dark .article-card:not(.hero-card) h3 a, html.dark .article-card:not(.hero-card) h4 a, html.dark .article-card:not(.hero-card) h2 a { color: #ffffff !important; text-decoration: none !important; } html.dark .article-card:not(.hero-card):hover h3 a, html.dark .article-card:not(.hero-card):hover h4 a, html.dark .article-card:not(.hero-card) h3 a:hover, html.dark .article-card:not(.hero-card) h4 a:hover { color: #34d399 !important; text-decoration: none !important; } /* ========================================================================== 7. UNIVERSAL HEADINGS HIERARCHY (H1, H2, H3, H4, H5, H6) ========================================================================== */ /* Light Mode: Headings on Light surfaces are SOLID DARK BLACK (#0f172a) */ html:not(.dark) .prose :is(h1, h2, h3, h4, h5, h6), html:not(.dark) .article-card:not(.hero-card) :is(h1, h2, h3, h4, h5, h6), html:not(.dark) .editorial-headline, html:not(.dark) main h1:not(.hero-card *), html:not(.dark) :is(h1, h2, h3, h4, h5, h6):not(.hero-card *, footer *, aside *, [class*="bg-slate-9"] *, [class*="bg-slate-950"] *, [class*="bg-black"] *, pre *, button *, .badge *, [class*="bg-red-"] *, [class*="bg-emerald-"] *, [class*="bg-amber-"] *, .smartphone-envelope *) { color: #0f172a !important; text-decoration: none !important; } html:not(.dark) :is(h1, h2, h3, h4, h5, h6) a:not(.hero-card *, footer *, aside *, [class*="bg-slate-9"] *, [class*="bg-slate-950"] *, [class*="bg-black"] *, button *, .badge *, .smartphone-envelope *) { color: #0f172a !important; text-decoration: none !important; } /* Dark Mode: All Headings are CRISP WHITE (#ffffff) */ html.dark :is(h1, h2, h3, h4, h5, h6):not(pre *, button *, .badge *), html.dark .editorial-headline, html.dark .prose :is(h1, h2, h3, h4, h5, h6), html.dark .article-card :is(h1, h2, h3, h4, h5, h6), html.dark :is(h1, h2, h3, h4, h5, h6) a { color: #ffffff !important; text-decoration: none !important; } /* ========================================================================== 8. PARAGRAPHS, LISTS & IN-ARTICLE CONTENT (.prose) ========================================================================== */ /* Light Mode: Dark slate text (#334155) on white background */ html:not(.dark) .prose :is(p, li, dd, blockquote), html:not(.dark) article :is(p, li, dd, blockquote) { color: #334155 !important; } html:not(.dark) .prose strong, html:not(.dark) article strong { color: #0f172a !important; } html:not(.dark) .prose table th { color: #0f172a !important; background-color: #f1f5f9 !important; } html:not(.dark) .prose table td { color: #334155 !important; } /* Dark Mode: Light slate text (#cbd5e1) on dark background */ html.dark .prose :is(p, li, dd, blockquote), html.dark article :is(p, li, dd, blockquote) { color: #cbd5e1 !important; } html.dark .prose strong, html.dark article strong { color: #ffffff !important; } html.dark .prose table th { color: #ffffff !important; background-color: #0f172a !important; } html.dark .prose table td { color: #cbd5e1 !important; } /* Hyperlinks strictly inside article paragraphs & lists */ html:not(.dark) .prose p a, html:not(.dark) .prose li a, html:not(.dark) .prose td a { color: #0891b2 !important; text-decoration: none !important; } html:not(.dark) .prose p a:hover, html:not(.dark) .prose li a:hover, html:not(.dark) .prose td a:hover { color: #0e7490 !important; text-decoration: none !important; } html.dark .prose p a, html.dark .prose li a, html.dark .prose td a { color: #22d3ee !important; text-decoration: none !important; } html.dark .prose p a:hover, html.dark .prose li a:hover, html.dark .prose td a:hover { color: #67e8f9 !important; text-decoration: none !important; } /* Strip legacy hardcoded utility classes in Light Mode */ html:not(.dark) .prose .text-white:not(pre *, button, .badge, [class*="bg-red-"], [class*="bg-emerald-"], [class*="bg-blue-"], [class*="bg-purple-"], [class*="bg-amber-"]) { color: #0f172a !important; } html:not(.dark) .prose .text-slate-300:not(pre *) { color: #334155 !important; } html:not(.dark) .prose .text-slate-200:not(pre *) { color: #334155 !important; } html:not(.dark) .prose .text-slate-100:not(pre *) { color: #0f172a !important; } html:not(.dark) .prose .border-slate-800:not(pre, pre *) { border-color: #e2e8f0 !important; } html:not(.dark) .prose .border-slate-700:not(pre, pre *) { border-color: #e2e8f0 !important; } html:not(.dark) .prose .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; } /* ========================================================================== 6. IN-ARTICLE CALLOUT CARDS & CASE STUDY BOXES (ZERO BLACK BOXES IN LIGHT) ========================================================================== */ /* Light Mode: Turn hardcoded bg-slate-900 / bg-slate-950 boxes into pristine white cards */ html:not(.dark) .prose div[class*="bg-slate-9"], html:not(.dark) .prose div[class*="bg-slate-8"], html:not(.dark) .prose section[class*="bg-slate-9"], html:not(.dark) .prose section[class*="bg-slate-8"] { background-color: #ffffff !important; background-image: none !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important; color: #334155 !important; } html:not(.dark) .prose div[class*="bg-slate-9"] :is(h1, h2, h3, h4, h5, h6, strong), html:not(.dark) .prose div[class*="bg-slate-8"] :is(h1, h2, h3, h4, h5, h6, strong) { color: #0f172a !important; } html:not(.dark) .prose div[class*="bg-slate-9"] p, html:not(.dark) .prose div[class*="bg-slate-8"] p { color: #334155 !important; } /* Dark Mode: Maintain sleek slate-900 surface */ html.dark .prose div[class*="bg-slate-9"], html.dark .prose div[class*="bg-slate-8"] { background-color: rgba(15, 23, 42, 0.75) !important; border-color: #1e293b !important; } /* ========================================================================== 7. EXECUTIVE KEY TAKEAWAYS BOX (PERFECT LIGHT & DARK ADAPTATION) ========================================================================== */ /* Light Mode */ html:not(.dark) .takeaways-box, html:not(.dark) .prose aside[itemprop="abstract"], html:not(.dark) aside[itemprop="abstract"] { background: rgba(236, 254, 255, 0.75) !important; background-image: none !important; border: 1px solid #a5f3fc !important; color: #1e293b !important; box-shadow: 0 4px 6px -1px rgba(6, 182, 212, 0.08) !important; } html:not(.dark) .takeaways-box h2, html:not(.dark) aside[itemprop="abstract"] h2, html:not(.dark) .takeaways-box h3, html:not(.dark) aside[itemprop="abstract"] h3 { color: #0891b2 !important; } html:not(.dark) .takeaways-box span[class*="text-slate-400"], html:not(.dark) aside[itemprop="abstract"] span[class*="text-slate-400"] { color: #64748b !important; } html:not(.dark) .takeaways-box ul, html:not(.dark) aside[itemprop="abstract"] ul, html:not(.dark) .takeaways-box li, html:not(.dark) aside[itemprop="abstract"] li { color: #334155 !important; } html:not(.dark) .takeaways-box strong, html:not(.dark) aside[itemprop="abstract"] strong { color: #0f172a !important; } /* Dark Mode */ html.dark .takeaways-box, html.dark .prose aside[itemprop="abstract"], html.dark aside[itemprop="abstract"] { background: rgba(15, 23, 42, 0.75) !important; border: 1px solid rgba(8, 145, 178, 0.35) !important; color: #e2e8f0 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important; } html.dark .takeaways-box h2, html.dark aside[itemprop="abstract"] h2, html.dark .takeaways-box h3, html.dark aside[itemprop="abstract"] h3 { color: #67e8f9 !important; } html.dark .takeaways-box ul, html.dark aside[itemprop="abstract"] ul, html.dark .takeaways-box li, html.dark aside[itemprop="abstract"] li { color: #cbd5e1 !important; } html.dark .takeaways-box strong, html.dark aside[itemprop="abstract"] strong { color: #ffffff !important; } /* ========================================================================== 8. ARTICLE TABLES (ZERO DARK PATCHES IN LIGHT MODE) ========================================================================== */ /* Light Mode Tables */ html:not(.dark) .prose table, html:not(.dark) article table, html:not(.dark) table { background-color: transparent !important; border: 1px solid #e2e8f0 !important; border-collapse: separate !important; border-spacing: 0 !important; border-radius: 0.75rem !important; overflow: hidden !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important; } html:not(.dark) .prose thead, html:not(.dark) article thead, html:not(.dark) thead { background-color: #f1f5f9 !important; background-image: none !important; border-bottom: 1px solid #e2e8f0 !important; } html:not(.dark) .prose th, html:not(.dark) article th, html:not(.dark) th { background-color: #f1f5f9 !important; color: #0f172a !important; font-weight: 700 !important; border-bottom: 1px solid #e2e8f0 !important; border-color: #e2e8f0 !important; padding: 0.875rem !important; } html:not(.dark) .prose td, html:not(.dark) article td, html:not(.dark) td { background-color: #ffffff !important; color: #334155 !important; border-bottom: 1px solid #e2e8f0 !important; border-color: #e2e8f0 !important; padding: 0.875rem !important; } html:not(.dark) .prose td:first-child, html:not(.dark) article td:first-child, html:not(.dark) td:first-child { color: #0f172a !important; font-weight: 600 !important; } html:not(.dark) .prose tr:hover td, html:not(.dark) article tr:hover td, html:not(.dark) tr:hover td { background-color: #f8fafc !important; } /* Dark Mode Tables */ html.dark .prose table, html.dark article table, html.dark table { background-color: rgba(15, 23, 42, 0.6) !important; border: 1px solid #1e293b !important; border-collapse: separate !important; border-spacing: 0 !important; border-radius: 0.75rem !important; overflow: hidden !important; } html.dark .prose thead, html.dark article thead, html.dark thead { background-color: #0f172a !important; border-bottom: 1px solid #1e293b !important; } html.dark .prose th, html.dark article th, html.dark th { background-color: #0f172a !important; color: #67e8f9 !important; border-bottom: 1px solid #1e293b !important; border-color: #1e293b !important; padding: 0.875rem !important; } html.dark .prose td, html.dark article td, html.dark td { background-color: transparent !important; color: #cbd5e1 !important; border-bottom: 1px solid #1e293b !important; border-color: #1e293b !important; padding: 0.875rem !important; } html.dark .prose td:first-child, html.dark article td:first-child, html.dark td:first-child { color: #ffffff !important; font-weight: 600 !important; } html.dark .prose tr:hover td, html.dark article tr:hover td, html.dark tr:hover td { background-color: rgba(30, 41, 59, 0.4) !important; } /* ========================================================================== 9. CODE & TERMINAL SNIPPETS (HACKER SLATE + EMERALD GREEN IN BOTH MODES) ========================================================================== */ pre, .prose pre, article pre { background-color: #0f172a !important; color: #34d399 !important; border: 1px solid #1e293b !important; border-radius: 0.75rem !important; padding: 1.25rem !important; overflow-x: auto !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important; } pre code, .prose pre code, article pre code { background-color: transparent !important; color: #34d399 !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important; font-size: 0.85rem !important; line-height: 1.6 !important; border: none !important; padding: 0 !important; } /* Inline Code */ html:not(.dark) :not(pre) > code { background-color: #f1f5f9 !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important; padding: 0.15rem 0.4rem !important; border-radius: 0.375rem !important; font-size: 0.875em !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; } html.dark :not(pre) > code { background-color: #1e293b !important; color: #38bdf8 !important; border: 1px solid #334155 !important; padding: 0.15rem 0.4rem !important; border-radius: 0.375rem !important; font-size: 0.875em !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; } /* ========================================================================== 10. FAQ ACCORDIONS (#geo-faq-accordion) ========================================================================== */ html:not(.dark) #geo-faq-accordion details { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; } html:not(.dark) #geo-faq-accordion summary { color: #0f172a !important; } html:not(.dark) #geo-faq-accordion summary span[class*="bg-slate-"] { background-color: #f1f5f9 !important; color: #64748b !important; } html:not(.dark) #geo-faq-accordion details > div { color: #334155 !important; border-top-color: #f1f5f9 !important; } html.dark #geo-faq-accordion details { background-color: rgba(15, 23, 42, 0.6) !important; border-color: #1e293b !important; } html.dark #geo-faq-accordion summary { color: #f1f5f9 !important; } html.dark #geo-faq-accordion summary span[class*="bg-slate-"] { background-color: #1e293b !important; color: #94a3b8 !important; } html.dark #geo-faq-accordion details > div { color: #cbd5e1 !important; border-top-color: #1e293b !important; } /* ========================================================================== 11. EDITORIAL FOOTER (DEEP OBSIDIAN CANVAS IN BOTH MODES) ========================================================================== */ footer { margin-top: 5rem !important; padding-top: 4.5rem !important; } @media (max-width: 639px) { footer { margin-top: 3.5rem !important; padding-top: 3rem !important; } } html:not(.dark) footer { background-color: #0f172a !important; color: #94a3b8 !important; border-top-color: #1e293b !important; } html.dark footer { background-color: #070A0F !important; color: #94a3b8 !important; border-top-color: #1e293b !important; } /* ========================================================================== 12. WEB-KIT AUTOFILL FIX (PREVENTS WHITE-ON-WHITE & DARK-ON-DARK GLITCHES) ========================================================================== */ html:not(.dark) input:-webkit-autofill, html:not(.dark) input:-webkit-autofill:hover, html:not(.dark) input:-webkit-autofill:focus, html:not(.dark) textarea:-webkit-autofill, html:not(.dark) select:-webkit-autofill { -webkit-text-fill-color: #0f172a !important; -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; transition: background-color 5000s ease-in-out 0s; caret-color: #059669 !important; } html.dark input:-webkit-autofill, html.dark input:-webkit-autofill:hover, html.dark input:-webkit-autofill:focus, html.dark textarea:-webkit-autofill, html.dark select:-webkit-autofill { -webkit-text-fill-color: #ffffff !important; -webkit-box-shadow: 0 0 0px 1000px #090d16 inset !important; transition: background-color 5000s ease-in-out 0s; caret-color: #10b981 !important; } /* ========================================================================== 13. MOBILE SMARTPHONE ENVELOPE MOCKUP (موبائل انویلپ) ========================================================================== */ .smartphone-envelope { position: relative; width: 100%; max-width: 360px; margin: 0 auto; border-radius: 46px; background: #0f172a; border: 12px solid #1e293b; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; box-sizing: border-box; } .smartphone-island { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 96px; height: 22px; background: #020617; border-radius: 20px; z-index: 30; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .smartphone-island::after { content: ''; width: 8px; height: 8px; background: #1e293b; border-radius: 50%; } .smartphone-screen { background: #0B0F17; min-height: 520px; max-height: 600px; display: flex; flex-direction: column; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Scrollbar */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; } .dark ::-webkit-scrollbar-thumb { background: #334155; } /* Hide Google Translate top bar frame that causes UI shift */ .goog-te-banner-frame.skiptranslate, .goog-te-banner-frame { display: none !important; } body { top: 0px !important; } #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* Mobile Drawer Transitions */ #mobile-drawer { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } #mobile-drawer.drawer-closed { transform: translateX(100%); opacity: 0; pointer-events: none; } #mobile-drawer.drawer-open { transform: translateX(0); opacity: 1; pointer-events: auto; } /* Badge Glow Effect */ .pulse-badge { box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); } /* Zero Ghost Containers */ .prose .border-dashed, .prose div[class*="border-dashed"], [id^="ad-slot-"]:empty { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================== 14. INTERNATIONAL LANGUAGE DROPDOWN & FOOTER SOCIAL BUTTONS ========================================================================== */ #lang-selector-container { position: relative; z-index: 100; } #lang-dropdown-menu { z-index: 9999 !important; } html:not(.dark) #lang-dropdown-menu { background-color: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; } html:not(.dark) #lang-dropdown-menu .dropdown-header { color: #64748b !important; border-bottom: 1px solid #e2e8f0 !important; } html:not(.dark) #lang-dropdown-menu button { color: #0f172a !important; } html:not(.dark) #lang-dropdown-menu button:hover { background-color: #f1f5f9 !important; color: #059669 !important; } html.dark #lang-dropdown-menu { background-color: #0f172a !important; border: 1px solid #334155 !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important; } html.dark #lang-dropdown-menu .dropdown-header { color: #94a3b8 !important; border-bottom: 1px solid #1e293b !important; } html.dark #lang-dropdown-menu button { color: #f8fafc !important; } html.dark #lang-dropdown-menu button:hover { background-color: #1e293b !important; color: #34d399 !important; } .footer-social-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 12px !important; color: #ffffff !important; box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important; transition: transform 0.2s ease, opacity 0.2s ease !important; } .footer-social-btn:hover { transform: scale(1.12) !important; opacity: 0.95 !important; } .footer-social-btn svg { fill: #ffffff !important; width: 18px !important; height: 18px !important; } /* Locked Admin Hero Thumbnail to prevent layout crushing */ .hero-thumb-locked { width: 176px !important; height: 112px !important; min-width: 176px !important; max-width: 176px !important; max-height: 112px !important; object-fit: cover !important; border-radius: 12px !important; flex-shrink: 0 !important; } /* ========================================================================== ADMIN RESPONSIVE SYSTEM REINFORCEMENTS & AUTOPILOT LAYOUT ENGINE ========================================================================== */ /* Locked Autopilot Story Thumbnail Preview */ .autopilot-thumb-box { width: 100% !important; max-width: 340px !important; aspect-ratio: 16 / 9 !important; flex-shrink: 0 !important; } @media (max-width: 767px) { .autopilot-thumb-box { max-width: 100% !important; } } .autopilot-details-box { flex: 1 1 0% !important; min-width: 0 !important; } .admin-title-locked { word-break: normal !important; overflow-wrap: normal !important; } @media (min-width: 640px) { .admin-title-locked { white-space: nowrap !important; } .sm\:flex-row { flex-direction: row !important; } .sm\:items-center { align-items: center !important; } .sm\:w-auto { width: auto !important; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .sm\:text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; } .sm\:text-base { font-size: 1rem !important; line-height: 1.5rem !important; } .sm\:text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; } .sm\:p-6 { padding: 1.5rem !important; } .sm\:p-8 { padding: 2rem !important; } .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .sm\:py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; } } @media (min-width: 768px) { .md\:flex-row { flex-direction: row !important; } .md\:items-center { align-items: center !important; } .md\:w-auto { width: auto !important; } .md\:w-72 { width: 18rem !important; } .md\:w-80 { width: 20rem !important; } .md\:w-64 { width: 16rem !important; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .md\:block { display: block !important; } .md\:hidden { display: none !important; } .md\:col-span-2 { grid-column: span 2 / span 2 !important; } } @media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .lg\:col-span-2 { grid-column: span 2 / span 2 !important; } .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } } /* ========================================================================== GLOBAL MOBILE SPACING FIX — reduce excessive top/bottom gaps on small screens ========================================================================== */ @media (max-width: 639px) { /* Reduce section spacing on mobile */ main .space-y-12 > * + * { margin-top: 1.5rem !important; } main .space-y-8 > * + * { margin-top: 1.25rem !important; } main .gap-8 { gap: 1rem !important; } main .gap-6 { gap: 0.875rem !important; } /* Nav spacing */ .nav-utility-bar { height: auto !important; min-height: 2.5rem !important; } /* Article page mobile spacing */ .article-content p { margin-bottom: 1rem !important; } .article-content h2, .article-content h3 { margin-top: 1.25rem !important; margin-bottom: 0.5rem !important; } /* Footer mobile fix */ footer .grid { gap: 1.25rem !important; } } /* ========================================================================== ARTICLE PAGE — sm:flex-row CTA BOX FIX ========================================================================== */ @media (min-width: 640px) { .sm\:flex-row { flex-direction: row !important; } .sm\:items-center { align-items: center !important; } } /* ========================================================================== FOOTER RESPONSIVE GRID SYSTEM (EXACT USER SPECIFICATION) - Desktop (>= 1024px): 4 Columns side by side - Laptop & Tablet (640px - 1023px): 2 Columns grid - Mobile (< 640px): 1 Column, Centralized / Centered ========================================================================== */ .footer-grid-system { display: grid !important; width: 100% !important; } @media (max-width: 639px) { .footer-grid-system { grid-template-columns: 1fr !important; text-align: center !important; gap: 2rem !important; } .footer-grid-system .footer-col { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .footer-grid-system ul { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .footer-grid-system .social-icons-wrapper { justify-content: center !important; } .footer-grid-system .chief-publisher-info { text-align: center !important; } .footer-grid-system p { text-align: center !important; } } @media (min-width: 640px) and (max-width: 1023px) { .footer-grid-system { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2.5rem 2rem !important; text-align: left !important; } .footer-grid-system .footer-col { text-align: left !important; } .footer-grid-system ul { text-align: left !important; } .footer-grid-system .social-icons-wrapper { justify-content: flex-start !important; } } @media (min-width: 1024px) { .footer-grid-system { grid-template-columns: 1.5fr 1fr 1fr 1fr !important; gap: 2.5rem !important; text-align: left !important; } .footer-grid-system .footer-col { text-align: left !important; } .footer-grid-system ul { text-align: left !important; } .footer-grid-system .social-icons-wrapper { justify-content: flex-start !important; } } /* ========================================================================== HOMEPAGE HERO BANNER & 20PX UNIFIED AUTO SPACING (ALL DEVICES) ========================================================================== */ .hero-section-grid { gap: 20px !important; margin-bottom: 20px !important; } .hero-card-viewport { position: relative !important; width: 100% !important; overflow: hidden !important; } .hero-content-padding { padding: 20px !important; } .hero-badge-row { top: 20px !important; left: 20px !important; } @media (max-width: 639px) { .hero-card-viewport { min-height: 330px !important; max-height: 390px !important; height: auto !important; } .hero-fluid-title { font-size: clamp(1.05rem, 4vw, 1.35rem) !important; line-height: 1.25 !important; margin-top: 4px !important; margin-bottom: 6px !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } } @media (min-width: 640px) and (max-width: 1023px) { .hero-card-viewport { height: 370px !important; } .hero-fluid-title { font-size: clamp(1.25rem, 2.8vw, 1.65rem) !important; line-height: 1.25 !important; margin-top: 6px !important; margin-bottom: 8px !important; } } @media (min-width: 1024px) { .hero-card-viewport { height: 400px !important; } .hero-fluid-title { font-size: clamp(1.5rem, 2.2vw, 2rem) !important; line-height: 1.22 !important; margin-top: 6px !important; margin-bottom: 10px !important; } } /* ========================================================================== WRITE-FOR-US PRICING CARDS GRID ========================================================================== */ @media (min-width: 768px) { .pricing-grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }