/* Theme Name: AMH Newspaper Public Theme URI: https://alphamediaholdings.com Author: Alpha Media Holdings Author URI: https://alphamediaholdings.com Description: Public-facing editorial website for Zimbabwe Independent, The Standard, and NewsDay Zimbabwe. A React SPA (Vite + Tailwind CSS) with dark mode, paywall support, and PayNow payment integration. All styles are managed by the Tailwind build — this file exists only to satisfy WordPress theme registration requirements. Version: 1.3.0 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.1 License: Proprietary Text Domain: amh-newspaper-public */ /* * Hard reset — the React bundle owns all styling. * Only minimal browser-normalisation rules live here. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow-x: hidden; } #root { min-height: 100vh; } /* * Prevent WordPress from flashing a white background on dark-mode * page loads while the React bundle parses. The inline script in * functions.php adds .dark to before stylesheets load; this * rule makes the HTML shell match. */ html.dark body { background-color: #0b0b0e; /* matches --surface dark token */ color: #dad6d0; /* matches --ink dark token */ } /* ── GTranslate widget — compact size across all breakpoints ────────────── The plugin renders inside #gtranslate_wrapper (placed in header.php). Default flags are 32 px; we shrink to 16 px and tighten padding so the widget sits neatly in the top-right corner without overlapping content. */ #gtranslate_wrapper, .gtranslate_wrapper { font-size: 11px !important; line-height: 1 !important; } /* Flag images */ #gtranslate_wrapper img, .gtranslate_wrapper img, .gt_switcher img, .gt_selected img { width: 16px !important; height: 16px !important; vertical-align: middle !important; margin-right: 3px !important; } /* Main trigger button */ .gt_switcher, .gt_switcher_wrapper, .gt_selected { padding: 4px 8px !important; font-size: 11px !important; font-weight: 600 !important; border-radius: 4px !important; line-height: 1 !important; } /* Arrow / chevron icon — many GTranslate themes use an or a span */ .gt_switcher svg, .gt_selected svg, .gt_arrow { width: 10px !important; height: 10px !important; } /* ── Float widget (the "Float" look — .gt_float_switcher) ───────────────── This is the widget style actually in use. Plugin defaults are ~24px flags and 17px text, which is why it looked oversized (especially on mobile) — the rules above only cover the Dropdown widget's class names. */ .gt_float_switcher { font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; border-radius: 6px !important; box-shadow: 0 2px 8px rgba(13, 12, 10, 0.15) !important; } .gt_float_switcher img { width: 16px !important; height: auto !important; vertical-align: middle !important; } .gt_float_switcher .gt-selected { border-radius: 6px !important; } .gt_float_switcher .gt-selected .gt-current-lang { padding: 5px 8px !important; } .gt_float_switcher span.gt-lang-code { font-size: 11px !important; } .gt_float_switcher .gt_float_switcher-arrow { width: 9px !important; height: 9px !important; background-size: 9px !important; } .gt_float_switcher .gt_options { max-height: 260px !important; } .gt_float_switcher .gt_options a { font-size: 11px !important; padding: 6px 10px !important; } /* ── Mobile: prevent overlap with the sticky React navbar (h-12 = 48px) */ @media (max-width: 1023px) { #gtranslate_wrapper, .gtranslate_wrapper { top: 52px !important; /* clear the 48px mobile navbar + 4px gap */ right: 8px !important; z-index: 40 !important; /* below React modals (z-50) but above page content */ } /* Extra-compact on phones */ .gt_float_switcher img { width: 14px !important; } .gt_float_switcher .gt-selected .gt-current-lang { padding: 4px 6px !important; } .gt_float_switcher span.gt-lang-code, .gt_float_switcher .gt_options a { font-size: 10px !important; } }