/** * PunjabiTime News — UI extras: scroll-to-top button + dark mode. * * ADDITIVE & SAFE. Loaded via the Novamira sandbox loader AFTER all other * stylesheets. Adds: * 1) A floating "Back to top" button (desktop bottom-right; on mobile it sits * above the fixed bottom nav so it never covers Home/Search/Menu). * 2) A dark-mode toggle button (injected into the header actions + bottom nav * by punjabitime-ui-extras.js) and a tasteful dark theme applied when * has the .pt-dark-mode class. * * Default = current LIGHT mode. Dark mode is opt-in and remembered in * localStorage. Does NOT tint images, does NOT touch AdSense (ins.adsbygoogle * / iframes are explicitly left alone), and does NOT change the light-mode * cream background (#FFF1E5) or the existing dark footer. * * TO REVERT: disable/delete the sandbox loader (pt-ui-extras.php) and, * optionally, this file + the JS. */ :root { --ptx-red: #9e1b1b; --ptx-charcoal: #1f252e; } /* ================================================================== * * 1) SCROLL-TO-TOP BUTTON * ================================================================== */ .pt-to-top { position: fixed; right: 20px; bottom: 24px; z-index: 990; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 10px; background: var(--ptx-charcoal); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 200ms ease, transform 200ms ease, background-color 150ms ease, visibility 200ms ease; } .pt-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .pt-to-top:hover, .pt-to-top:focus-visible { background: var(--ptx-red); } .pt-to-top svg { display: block; } /* On mobile/tablet, lift the button above the fixed bottom nav (var set in * the mobile-nav CSS = --ptn-bottom-h, fallback 60px) plus a gap. */ @media (max-width: 1024px) { .pt-to-top { right: 14px; bottom: calc(var(--ptn-bottom-h, 60px) + 14px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; } } /* ================================================================== * * 2a) DARK-MODE TOGGLE BUTTON (light-mode appearance) * Injected by JS into .pt-masthead__right (desktop) and as a bottom-nav * item label is handled separately; here we style the header chip. * ================================================================== */ .pt-dark-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid var(--pt-surface-line, #ded7d2); border-radius: 2px; background: #fff; color: #1a1a1a; font-family: var(--pt-ui, Arial, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease; } .pt-dark-toggle:hover, .pt-dark-toggle:focus-visible { border-color: var(--ptx-red); color: var(--ptx-red); } .pt-dark-toggle svg { display: block; } /* Show the right icon/label per mode: .pt-dark-toggle has two children * (.pt-dt-dark shown in light mode, .pt-dt-light shown in dark mode). */ .pt-dark-toggle .pt-dt-light { display: none; } html.pt-dark-mode .pt-dark-toggle .pt-dt-dark { display: none; } html.pt-dark-mode .pt-dark-toggle .pt-dt-light { display: inline-flex; align-items: center; gap: 6px; } /* Bottom-nav variant of the toggle (mobile) inherits .pt-bottom-nav__item. */ .pt-bottom-nav .pt-dark-toggle { height: auto; padding: 0; border: 0; background: transparent; flex-direction: column; gap: 3px; font-size: 11px; text-transform: uppercase; } /* ================================================================== * * 2b) DARK MODE THEME (applied when ) * Tasteful charcoal, not pure black. Scoped overrides of the theme's * CSS custom properties + key surfaces. Images & ads untouched. * ================================================================== */ /* Apply the dark page base to (this reliably wins over the global * cream rule, which targets body), and make body transparent so the charcoal * shows through. */ html.pt-dark-mode { background: #141922 !important; } html.pt-dark-mode body { background: transparent !important; color: #d7dbe0; } /* Neutralise the global cream warm-glow overlay in dark mode. */ html.pt-dark-mode body::before { display: none !important; } /* Re-map the theme's design tokens for dark surfaces/text. These cascade * into most components that use var(--pt-*). */ html.pt-dark-mode { --pt-paper: #141922; --pt-paper-warm: #171c24; --pt-surface: #1f252e; --pt-surface-soft: #1a1f27; --pt-surface-line: #333b46; --pt-ink: #e8eaed; --pt-ink-soft: #b9bec6; --pt-muted: #8b929c; --pt-black: #f2f3f5; } /* Global background override stylesheet sets a cream bg on html/body with its * own selector; neutralise it ONLY in dark mode so the charcoal shows. */ html.pt-dark-mode { background-color: #141922 !important; } /* Generic text + links */ html.pt-dark-mode h1, html.pt-dark-mode h2, html.pt-dark-mode h3, html.pt-dark-mode h4, html.pt-dark-mode h5, html.pt-dark-mode h6 { color: #f1f3f5; } html.pt-dark-mode a { color: #d7dbe0; } html.pt-dark-mode a:hover, html.pt-dark-mode a:focus-visible { color: #e2655f; /* lightened red for contrast on dark */ } /* ---- Header in dark mode (do not redesign; just recolour) ---- */ html.pt-dark-mode .pt-header--ft { background: #1b212b; border-bottom-color: #333b46; } html.pt-dark-mode .pt-header--ft .pt-brand, html.pt-dark-mode .pt-header--ft .pt-brand-wrap .pt-brand { color: #f2f3f5; } html.pt-dark-mode .pt-tagline { color: #9aa1ab; } html.pt-dark-mode .pt-icon-btn { background: #232b35; border-color: #3a434f; color: #e8eaed; } html.pt-dark-mode .pt-icon-btn:hover, html.pt-dark-mode .pt-icon-btn:focus-visible { border-color: #e2655f; color: #e2655f; } html.pt-dark-mode .pt-signin-link { color: #c3c8d0; } html.pt-dark-mode .pt-header-search-row { background: #1b212b; border-top-color: #333b46; } html.pt-dark-mode .pt-header--ft .pt-header-search { background: #232b35; border-color: #3a434f; } html.pt-dark-mode .pt-header--ft .pt-header-search input { color: #e8eaed; } html.pt-dark-mode .pt-header--ft .pt-primary-nav { background: #1b212b; border-top-color: #333b46; } html.pt-dark-mode .pt-header--ft .pt-menu a { color: #c3c8d0; } html.pt-dark-mode .pt-header--ft .pt-menu a:hover, html.pt-dark-mode .pt-header--ft .pt-menu .current-menu-item > a { color: #e2655f; } /* ---- Breaking strip: already dark; keep readable ---- */ html.pt-dark-mode .pt-breaking { background: #0f131a; } /* ---- Cards / sections / common surfaces ---- */ html.pt-dark-mode .pt-card, html.pt-dark-mode .pt-loop-card, html.pt-dark-mode .pt-trending, html.pt-dark-mode .pt-section, html.pt-dark-mode .pt-newsletter__box, html.pt-dark-mode .pt-feature, html.pt-dark-mode article { background: #1f252e; border-color: #333b46; } html.pt-dark-mode .pt-kicker, html.pt-dark-mode .pt-meta, html.pt-dark-mode time { color: #9aa1ab; } /* Section heading underlines/borders soften on dark */ html.pt-dark-mode hr, html.pt-dark-mode .pt-section__title, html.pt-dark-mode .pt-divider { border-color: #333b46; } /* ---- Dark-mode toggle chip appearance in dark mode ---- */ html.pt-dark-mode .pt-dark-toggle { background: #232b35; border-color: #3a434f; color: #e8eaed; } html.pt-dark-mode .pt-dark-toggle:hover { border-color: #e2655f; color: #e2655f; } /* ---- Scroll-top button stays charcoal; nudge hover in dark ---- */ html.pt-dark-mode .pt-to-top { background: #2a323d; } html.pt-dark-mode .pt-to-top:hover { background: var(--ptx-red); } /* ---- Mobile bottom nav + drawer remain functional & themed in dark ---- */ html.pt-dark-mode .pt-bottom-nav { background: #1b212b; border-top-color: #333b46; } html.pt-dark-mode .pt-bottom-nav__item { color: #c3c8d0; } html.pt-dark-mode .pt-bottom-nav__item:hover, html.pt-dark-mode .pt-bottom-nav__item:focus-visible { color: #e2655f; } /* Drawer is already dark charcoal in both modes — leave it as-is. */ /* ================================================================== * * PROTECTED: never tint images or AdSense * ================================================================== */ html.pt-dark-mode img, html.pt-dark-mode picture, html.pt-dark-mode video, html.pt-dark-mode .adsbygoogle, html.pt-dark-mode ins.adsbygoogle, html.pt-dark-mode iframe { filter: none !important; background: transparent; } /* Smooth, subtle colour transition when toggling (respect reduced motion). */ @media (prefers-reduced-motion: no-preference) { html.pt-dark-mode body, html.pt-dark-mode .pt-header--ft, html.pt-dark-mode .pt-card, html.pt-dark-mode article { transition: background-color 200ms ease, color 200ms ease; } } /* ================================================================== * * 3) ORIGINAL / ENGLISH LANGUAGE TOGGLE (Phase 1, safe) * A small segmented control. “Original” = normal Punjabi site (default). * “English” opens a lightweight helper that points to the browser’s own * translate. Injected by JS into the masthead actions + the drawer. * ================================================================== */ .pt-lang-toggle { display: inline-flex; align-items: stretch; border: 1px solid var(--pt-surface-line, #ded7d2); border-radius: 2px; overflow: hidden; background: #fff; } .pt-lang-btn { appearance: none; border: 0; background: transparent; padding: 0 12px; height: 38px; font-family: var(--pt-ui, Arial, sans-serif); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: #1a1a1a; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } .pt-lang-btn + .pt-lang-btn { border-left: 1px solid var(--pt-surface-line, #ded7d2); } .pt-lang-btn:hover, .pt-lang-btn:focus-visible { color: var(--ptx-red); } .pt-lang-btn.is-active { background: var(--ptx-red); color: #fff; } /* Drawer variant: full-width segmented control inside the dark drawer. */ .pt-lang-toggle--drawer { display: flex; margin: 4px 18px 8px; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); } .pt-lang-toggle--drawer .pt-lang-btn { flex: 1 1 50%; color: #c3c8d0; } .pt-lang-toggle--drawer .pt-lang-btn + .pt-lang-btn { border-left-color: rgba(255, 255, 255, 0.18); } .pt-lang-toggle--drawer .pt-lang-btn.is-active { background: var(--ptx-red); color: #fff; } /* Dark-mode appearance of the header language chip. */ html.pt-dark-mode .pt-lang-toggle { background: #232b35; border-color: #3a434f; } html.pt-dark-mode .pt-lang-btn { color: #e8eaed; } html.pt-dark-mode .pt-lang-btn + .pt-lang-btn { border-left-color: #3a434f; } /* ---- Language helper popover (browser-translate guidance) ---- */ .pt-lang-help { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.5); } .pt-lang-help__inner { position: relative; width: min(440px, 100%); background: #fff; color: #1a1a1a; border-radius: 6px; padding: 22px 22px 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); font-family: var(--pt-ui, Arial, sans-serif); } .pt-lang-help__close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; font-size: 24px; line-height: 1; border: 0; background: transparent; color: #7e7576; cursor: pointer; } .pt-lang-help__close:hover { color: var(--ptx-red); } .pt-lang-help__title { margin: 0 0 8px; font-family: var(--pt-head, Georgia, serif); font-size: 22px; font-weight: 700; } .pt-lang-help__text { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: #4c4546; } .pt-lang-help__list { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: #1a1a1a; } .pt-lang-help__note { margin: 0; font-size: 12px; color: #7e7576; } html.pt-dark-mode .pt-lang-help__inner { background: #1f252e; color: #e8eaed; } html.pt-dark-mode .pt-lang-help__text, html.pt-dark-mode .pt-lang-help__note { color: #b9bec6; } html.pt-dark-mode .pt-lang-help__list { color: #e8eaed; } /* Hide the desktop dark/lang chips on small screens (drawer carries them). */ @media (max-width: 1024px) { .pt-masthead__right .pt-lang-toggle { display: none; } }