/* Google Fonts ab CSS @import se load nahi hoti — @import render-blocking hota hai aur ek extra round-trip add karta hai. Ab ye fonts partials/header.php mein preconnect + non-blocking se load hoti hain (Core Web Vitals / LCP behtar karne ke liye). */ /* ---------- Theme tokens ---------- Tailwind (cdn.tailwindcss.com, header.php mein configured) ab in RGB-triplet variables ko "rgb(var(--x-rgb) / )" pattern se padhta hai — isliye sirf yahan values badalne se poori site (jahan bhi bg-ink/bg-paper/text-ink/text-meta/border-hairline/text-gold/bg-red use hua hai) light <-> dark dono mein sahi rang dikhati hai. "chrome" ek fixed-dark tone hai jo header ki utility-bar aur footer jaisi humesha-dark chrome strips ke liye hai — ye theme ke saath swap nahi hoti, taaki dark mode mein bhi masthead ka look consistent rahe. Classic broadsheet palette: crisp off-white newsprint, near-black ink (zyada contrast, purane "warm ivory" se sharper), sirf ek signal red (breaking/CTA ke liye) — koi gold-shimmer ya glow decoration nahi. */ :root { --ink-rgb: 17 17 17; --paper-rgb: 252 251 248; --red-rgb: 168 22 22; --red-dark-rgb: 110 14 14; --gold-rgb: 150 110 40; --hairline-rgb: 210 205 195; --meta-rgb: 90 86 80; --chrome-rgb: 17 17 17; /* Legacy hex vars — kuch jagah abhi bhi reference ho sakte hain */ --ink: #111111; --paper: #FCFBF8; --red: #A81616; --red-dark: #6E0E0E; --gold: #966E28; --hairline: #D2CDC3; --meta: #5A5650; color-scheme: light; } html.dark { --ink-rgb: 235 232 225; --paper-rgb: 16 15 14; --red-rgb: 214 92 82; --red-dark-rgb: 235 130 118; --gold-rgb: 200 154 80; --hairline-rgb: 50 47 43; --meta-rgb: 164 158 149; --chrome-rgb: 8 8 7; color-scheme: dark; } html.dark body { background: rgb(var(--paper-rgb)); } /* TOC ke jump-links ke liye smooth scroll — reduced-motion users ke liye skip */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: 'Hind', sans-serif; background: var(--paper); color: var(--ink); transition: background-color 0.2s ease, color 0.2s ease; } /* Theme toggle button (header mein use hota hai) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1px solid rgb(var(--hairline-rgb)); background: rgb(var(--paper-rgb)); color: rgb(var(--ink-rgb)); cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease; } .theme-toggle:hover { border-color: rgb(var(--gold-rgb)); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle svg { width: 1.1rem; height: 1.1rem; } .theme-toggle .icon-moon { display: none; } html.dark .theme-toggle .icon-sun { display: none; } html.dark .theme-toggle .icon-moon { display: inline-block; } /* Google Translate widget — utility bar (dark chrome background) ke andar fit ho jaaye, isliye Google ke default banner/branding chhupa kar sirf dropdown select rakha hai. */ .gtranslate-box { line-height: 0; } .gtranslate-box .goog-te-gadget { color: transparent !important; font-size: 0 !important; } .gtranslate-box .goog-te-gadget > span > a { display: none !important; } .gtranslate-box .goog-te-gadget-simple { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 9999px !important; padding: 0.2rem 0.5rem !important; display: inline-flex !important; align-items: center; } .gtranslate-box .goog-te-gadget-simple .goog-te-menu-value { color: #fff !important; font-size: 0.7rem !important; } .gtranslate-box .goog-te-gadget-simple .goog-te-menu-value span { color: #fff !important; } .gtranslate-box img { display: none !important; } /* Google ka chhota flag/arrow icon hata diya, clean look ke liye */ /* Google Translate jab page translate karta hai to par top margin chipka deta hai (apna banner ke liye) — hamara banner hide hai, isliye ye margin bhi force-remove karte hain taaki layout na hile. */ body.skiptranslate, body { top: 0 !important; } .goog-te-banner-frame.skiptranslate { display: none !important; } .font-headline { font-family: 'Tiro Devanagari Hindi', serif; } /* Devanagari conjuncts letter-spacing se toot jaate hain — kabhi tracking na dein */ .font-headline, body { letter-spacing: 0; } /* Breaking news marquee */ .ticker-track { display: inline-flex; white-space: nowrap; animation: ticker-scroll 32s linear infinite; } @keyframes ticker-scroll { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } } /* Horizontal category nav - scrollbar hide on mobile */ .cat-nav::-webkit-scrollbar { display: none; } .cat-nav { -ms-overflow-style: none; scrollbar-width: none; } /* Keyboard focus visibility */ a:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* Article body typography (AI-rewritten content ke

tags ke liye) */ .article-body p { margin-bottom: 1.25rem; line-height: 1.9; font-size: 1.125rem; color: rgb(var(--ink-rgb) / 0.88); } .article-body a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; } /* h2/h3 subheadings — sirf naye AI-generated articles mein hote hain */ .article-body h2, .article-body h3 { font-family: 'Tiro Devanagari Hindi', serif; color: rgb(var(--ink-rgb)); scroll-margin-top: 1rem; /* TOC click se jump karne par heading top se chipke nahi */ } .article-body h2 { font-size: 1.5rem; margin: 2rem 0 1rem; } .article-body h3 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Classic masthead ---------- Nameplate ke upar/neeche thin-thick double rule — broadsheet newspapers ki sabse pehchani jaane wali typographic device. */ .masthead-rule { border: none; border-top: 3px solid rgb(var(--ink-rgb)); height: 4px; border-bottom: 1px solid rgb(var(--ink-rgb)); margin: 0; } .masthead-eyebrow { font-family: 'Hind', sans-serif; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--meta-rgb)); } /* Simple, restrained card hover — koi 3D tilt/glow nahi, bas hairline thoda darken aur halka lift, jaisa ek serious news site mein hota hai. */ .tilt-card { transition: border-color 0.2s ease, transform 0.2s ease; } .tilt-card:hover { transform: translateY(-2px); } /* Fade-up entrance — pehli baar page load hone par (CSS-only, ek baar chalta hai) */ .fade-up { animation: fade-up 0.6s ease-out both; } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Breaking alert bar — pulsing dot */ .breaking-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #fff; animation: breaking-pulse 1.4s ease-in-out infinite; } @keyframes breaking-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } } @media (prefers-reduced-motion: reduce) { .breaking-dot { animation: none; } } /* ---------- Readability controls (font-size A-/A+) ---------- */ html[data-font-scale="sm"] .article-body { font-size: 0.95rem; } html[data-font-scale="lg"] .article-body p { font-size: 1.3rem; line-height: 2; } html[data-font-scale="xl"] .article-body p { font-size: 1.5rem; line-height: 2.05; } .font-scale-btn { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(var(--hairline-rgb)); border-radius: 9999px; font-size: 0.7rem; font-weight: 700; color: rgb(var(--ink-rgb)); background: transparent; cursor: pointer; transition: border-color 0.15s ease; } .font-scale-btn:hover { border-color: rgb(var(--gold-rgb)); } /* ---------- "सुनें" (listen / text-to-speech) control ---------- */ .tts-bar { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border: 1px solid rgb(var(--hairline-rgb)); border-radius: 9999px; background: rgb(var(--paper-rgb)); } .tts-btn { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: rgb(var(--ink-rgb)); background: transparent; border: none; cursor: pointer; } .tts-btn:hover { color: rgb(var(--red-rgb)); } .tts-btn[disabled] { opacity: 0.4; cursor: not-allowed; } .tts-speaking-indicator { display: none; width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: rgb(var(--red-rgb)); animation: breaking-pulse 1s ease-in-out infinite; } .tts-active .tts-speaking-indicator { display: inline-block; } mark.tts-highlight { background: rgb(var(--gold-rgb) / 0.25); color: inherit; border-radius: 2px; } /* ---------- Search / category filter bar ---------- */ .filter-select { font-size: 0.8rem; background: rgb(var(--paper-rgb)); color: rgb(var(--ink-rgb)); border: 1px solid rgb(var(--hairline-rgb)); border-radius: 9999px; padding: 0.35rem 0.75rem; } .filter-select:focus { outline: none; border-color: rgb(var(--gold-rgb)); } /* ---------- Comments ---------- */ .comment-item { padding: 1rem 0; border-bottom: 1px solid rgb(var(--hairline-rgb)); } .comment-avatar { width: 2rem; height: 2rem; border-radius: 9999px; background: rgb(var(--gold-rgb) / 0.18); color: rgb(var(--gold-rgb)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .comment-form textarea, .comment-form input { width: 100%; border: 1px solid rgb(var(--hairline-rgb)); border-radius: 0.25rem; padding: 0.6rem 0.75rem; font-size: 0.9rem; background: rgb(var(--paper-rgb)); color: rgb(var(--ink-rgb)); } .comment-form textarea:focus, .comment-form input:focus { outline: none; border-color: rgb(var(--gold-rgb)); } @media (prefers-reduced-motion: reduce) { .shimmer-gold { animation: none; background: none; -webkit-text-fill-color: var(--gold); color: var(--gold); } .tilt-card { transition: none; transform: none !important; } .fade-up { animation: none; } }