/* ===================================================== FLOATING LANGUAGE TRANSLATOR — translator.css Link in your : ===================================================== */ /* ── Widget wrapper ── */ #floating-translator { position: fixed; bottom: 28px; left: 28px; z-index: 99999; font-family: 'Segoe UI', Arial, sans-serif; } /* ── Toggle pill button ── */ #translator-toggle-btn { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #1a3a6e 0%, #0d2247 100%); color: #fff; border: none; border-radius: 50px; padding: 11px 20px 11px 14px; cursor: pointer; box-shadow: 0 6px 24px rgba(13,34,71,0.45), 0 1.5px 6px rgba(0,0,0,0.18); font-size: 14px; font-weight: 600; letter-spacing: 0.3px; transition: box-shadow 0.2s, transform 0.2s, background 0.2s; outline: none; } #translator-toggle-btn:hover { background: linear-gradient(135deg, #2354a0 0%, #1a3a6e 100%); box-shadow: 0 10px 32px rgba(13,34,71,0.55); transform: translateY(-2px); } #translator-toggle-btn .globe-icon { font-size: 18px; line-height: 1; } /* ── Dropdown panel ── */ #translator-panel { position: absolute; bottom: 58px; left: 0; background: #ffffff; border-radius: 18px; box-shadow: 0 12px 40px rgba(13,34,71,0.22), 0 2px 8px rgba(0,0,0,0.10); padding: 0; width: 290px; overflow: hidden; display: none; animation: slideUpIn 0.22s cubic-bezier(.4,1.4,.6,1) both; border: 1.5px solid #e3eaf5; } #translator-panel.open { display: block; } @keyframes slideUpIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Panel header ── */ .translator-header { background: linear-gradient(135deg, #1a3a6e 0%, #0d2247 100%); color: #fff; padding: 16px 20px 14px; display: flex; align-items: center; gap: 10px; } .translator-header span.t-title { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; } .translator-header span.globe-big { font-size: 22px; } /* ── Language options list ── */ .lang-options { display: flex; flex-direction: column; gap: 0; padding: 10px 14px 14px; background: #f7faff; } /* ── Individual language button ── */ .lang-btn { display: flex; align-items: center; gap: 14px; background: #fff; border: 1.5px solid #dde6f5; border-radius: 12px; padding: 12px 16px; margin: 5px 0; cursor: pointer; transition: all 0.18s; font-size: 14.5px; font-weight: 600; color: #1a3a6e; text-align: left; outline: none; position: relative; overflow: hidden; } .lang-btn:hover { background: linear-gradient(90deg, #e8f0fc 0%, #f0f5ff 100%); border-color: #4a7fd4; transform: translateX(3px); box-shadow: 0 4px 14px rgba(26,58,110,0.10); } .lang-btn.active { background: linear-gradient(90deg, #1a3a6e 0%, #2354a0 100%); color: #fff; border-color: #1a3a6e; box-shadow: 0 4px 16px rgba(26,58,110,0.22); } .lang-btn .flag-img { width: 34px; height: 24px; border-radius: 5px; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,0.15); border: 1px solid #e0e0e0; flex-shrink: 0; } .lang-btn .lang-label { flex: 1; } .lang-btn .lang-native { font-size: 12px; font-weight: 400; opacity: 0.65; margin-top: 1px; display: block; } .lang-btn.active .lang-native { opacity: 0.80; } .lang-btn .check-mark { font-size: 16px; opacity: 0; transition: opacity 0.15s; } .lang-btn.active .check-mark { opacity: 1; } /* ── Panel footer ── */ .translator-footer { padding: 8px 14px 12px; background: #f7faff; border-top: 1px solid #e3eaf5; text-align: center; font-size: 11px; color: #8a9bb5; letter-spacing: 0.1px; } .translator-footer a { color: #4a7fd4; text-decoration: none; } /* ===================================================== HIDE ALL GOOGLE TRANSLATE UI CHROME ===================================================== */ /* Top banner / toolbar iframe */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, #goog-gt-tt, .goog-te-balloon-frame, div#goog-gt- { display: none !important; } /* Prevent body from being pushed down */ body { top: 0 !important; } html body { margin-top: 0 !important; } /* Hide the gadget container & its logo */ .goog-te-gadget, .goog-te-gadget-simple, .goog-te-menu-value, .goog-te-gadget img, .goog-logo-link { display: none !important; } /* Hide floating tooltip / bubble that appears on hover */ .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip-content { display: none !important; } /* Remove the dashed underline Google adds to translated words */ font[style*="background-color: rgb"] { background: none !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; }