/* ========================================================================== Shallow Ceramic - Language Switcher (Google Translate) -------------------------------------------------------------------------- Standalone stylesheet. Every switcher selector is namespaced `sc-lang-` so it cannot collide with the Creote theme, Bootstrap, WooCommerce or the group/certificates styles. Loaded LAST in include/head.blade.php so it wins on specificity ties against Google's injected styles. Companion script: public/js/translator.js ========================================================================== */ /* -------------------------------------------------------------------------- 1. Neutralise Google's injected chrome Google Translate injects a toolbar iframe and pushes down with `top: 40px`, which would break the theme's sticky header (.get_sticky_header). -------------------------------------------------------------------------- */ /* Hide ONLY the injected banner iframe, not a bare `.skiptranslate` -- Google puts that class on its gadget too, which is parked offscreen by #sc-google-translate-host below rather than display:none'd. */ iframe.skiptranslate { display: none !important; } body { top: 0 !important; position: static !important; } /* Google's yellow "translated text" highlight + hover tooltip */ .goog-text-highlight { background: none !important; box-shadow: none !important; } #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } .goog-te-banner-frame { visibility: hidden !important; height: 0 !important; } /* Offscreen host for the real Google widget (lives in include/script.blade.php) */ #sc-google-translate-host { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* -------------------------------------------------------------------------- 2. Switcher shell Sits inside ul.navbar_nav as the last

, to the right of "Contact Us". -------------------------------------------------------------------------- */ .sc-lang-switch { position: relative; } .sc-lang-toggle { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 3px; padding: 6px 12px; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #fff; cursor: pointer; outline: none; text-transform: none; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; } .sc-lang-toggle:hover, .sc-lang-toggle:focus { color: var(--primary-color-one, #0099d4); border-color: var(--primary-color-one, #0099d4); } .sc-lang-icon { font-size: 15px; line-height: 1; } .sc-lang-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 0.3s ease; } .sc-lang-switch.sc-lang-open .sc-lang-caret { transform: rotate(180deg); } /* Sticky header turns the nav text dark - mirror that here. Matches: .fixed-header .get_sticky_header ... li a.nav-link { color:#000 } */ .fixed-header .get_sticky_header .sc-lang-toggle { color: #000; border-color: rgba(0, 0, 0, 0.25); } .fixed-header .get_sticky_header .sc-lang-toggle:hover, .fixed-header .get_sticky_header .sc-lang-toggle:focus { color: var(--primary-color-one, #0099d4); border-color: var(--primary-color-one, #0099d4); } /* -------------------------------------------------------------------------- 3. Dropdown panel -------------------------------------------------------------------------- */ .sc-lang-list { position: absolute; top: 100%; right: 0; left: auto; z-index: 1001; min-width: 172px; margin: 10px 0 0; padding: 8px 0; list-style: none; text-align: left; background-color: #fff; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; } .sc-lang-switch.sc-lang-open .sc-lang-list { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Theme puts display:inline-block + margin-right:30px on every .navbar_nav li */ .sc-lang-list li { display: block !important; margin: 0 !important; padding: 0 !important; width: 100%; } .sc-lang-option { display: flex !important; align-items: center; gap: 10px; padding: 9px 18px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--menu-dropdown-color, #282f3b); text-decoration: none; transition: color 0.25s ease, background-color 0.25s ease; } .sc-lang-option:hover, .sc-lang-option:focus { color: var(--primary-color-one, #0099d4); background-color: #f5f7f9; text-decoration: none; } .sc-lang-code { flex: 0 0 auto; min-width: 26px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: #8b93a0; transition: color 0.25s ease; } .sc-lang-option:hover .sc-lang-code, .sc-lang-option.sc-lang-active .sc-lang-code { color: var(--primary-color-one, #0099d4); } .sc-lang-option.sc-lang-active { color: var(--primary-color-one, #0099d4); font-weight: 700; } /* -------------------------------------------------------------------------- 4. Mobile menu creote-extension.js clones .navigation_menu markup into .crt_mobile_menu, so the switcher appears there too. Render it flat/expanded instead. -------------------------------------------------------------------------- */ .crt_mobile_menu .sc-lang-toggle { width: 100%; justify-content: flex-start; color: #fff; border: 0; border-radius: 0; padding: 12px 0; } .crt_mobile_menu .sc-lang-caret { margin-left: auto; } .crt_mobile_menu .sc-lang-list { position: static; min-width: 0; margin: 0; padding: 0 0 6px; background-color: transparent; box-shadow: none; transform: none; display: none; opacity: 1; visibility: visible; pointer-events: auto; } .crt_mobile_menu .sc-lang-switch.sc-lang-open .sc-lang-list { display: block; transform: none; } .crt_mobile_menu .sc-lang-option { padding: 8px 0 8px 18px; color: rgba(255, 255, 255, 0.75); background-color: transparent; } .crt_mobile_menu .sc-lang-option:hover, .crt_mobile_menu .sc-lang-option.sc-lang-active { color: var(--primary-color-one, #0099d4); background-color: transparent; } /* Tablet / small desktop: keep the panel from overflowing the viewport */ @media (max-width: 1199px) { .sc-lang-toggle { padding: 5px 10px; font-size: 13px; } }