/* ============================================================= THE GURUKUL HIGH — LANGUAGE SWITCHER & NAV SHARED STYLES Single source of truth: edit THIS file → all pages update. Linked after inline styles so these rules win via specificity. ============================================================= */ /* ── 1. NAV RIGHT WRAPPER ──────────────────────────────────── */ .nav-right { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; margin-left: 8px !important; } /* ── 2. LANGUAGE TOGGLE BUTTON ─────────────────────────────── */ .lang-btn { background: transparent; border: 1.5px solid rgba(201, 162, 39, 0.65); color: #C9A227; padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; font-family: 'Poppins', sans-serif; white-space: nowrap; line-height: 1; flex-shrink: 0; letter-spacing: 0.3px; outline: none; -webkit-appearance: none; } .lang-btn:hover, .lang-btn:focus { background: rgba(201, 162, 39, 0.2); border-color: #C9A227; color: #fff; } /* ── 3. HAMBURGER ☰ → ✕ ANIMATION ────────────────────────── */ .mobile-menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; flex-shrink: 0; z-index: 1002; } .mobile-menu-toggle span { display: block; width: 26px; height: 3px; background: #ffffff; border-radius: 2px; transition: transform .3s, opacity .3s; } /* When menu is open: animate to ✕ */ .nav-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ── 4. MOBILE BREAKPOINT (≤ 768px) ────────────────────────── */ @media (max-width: 768px) { /* Show hamburger */ .mobile-menu-toggle { display: flex !important; } /* Normalize nav padding across all pages so content fits */ .nav-inner { padding-left: 12px !important; padding-right: 12px !important; } /* Allow logo to shrink if space is tight */ .logo-wrap { gap: 8px !important; flex-shrink: 1 !important; min-width: 0 !important; } /* Constrain the text column so it never pushes nav-right off screen */ .logo-text-wrap { min-width: 0 !important; overflow: hidden !important; } /* Tagline — visible, small, clipped if truly too long */ .logo-tagline { display: block !important; font-size: 7.5px !important; white-space: nowrap !important; letter-spacing: 0.2px !important; margin-top: 1px !important; opacity: 0.85; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } /* Emblem size */ .logo-wrap img, .logo-emblem { height: 44px !important; width: 44px !important; flex-shrink: 0 !important; } /* Logo name */ .logo-name { font-size: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; } /* Smaller lang button on mobile */ .lang-btn { padding: 5px 10px !important; font-size: 11px !important; border-radius: 16px !important; } /* Prevent any section/container from creating horizontal scroll */ .container, .inner-section, .two-col > *, .section-content, .page-content { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } } /* ── 5. TRANSLATED MODE — fit longer Kannada nav text ──────── */ /* Google Translate adds .translated-ltr to when active */ /* Hide tagline on DESKTOP in translated mode — saves ~180px so nav fits. On mobile the nav is a dropdown so tagline can stay visible. */ @media (min-width: 769px) { .translated-ltr .logo-tagline { display: none !important; } } /* Slightly tighter nav items to accommodate longer translations */ .translated-ltr .nav-menu > li > a { padding: 10px 10px !important; font-size: 13px !important; letter-spacing: 0 !important; } /* Suppress the floating Google Translate gadget icon */ .goog-te-gadget, .goog-te-gadget img, .goog-logo-link, .goog-te-gadget span, .goog-te-gadget a { display: none !important; } /* ── 6. SUPPRESS GOOGLE TRANSLATE BANNER ───────────────────── */ /* The banner iframe Google injects at the top of the page */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate { display: none !important; } /* All Google Translate widget / icon variants (hide all VIpgJd elements) */ .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-l9xktf, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-aZ2wEe-OiiCO, div[class^="VIpgJd"], div[class*=" VIpgJd"] { display: none !important; } /* Prevent Google pushing the page body down */ body { top: 0 !important; } /* Tooltip balloon */ #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } /* Hidden translate widget container */ #google_translate_element { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }