/* Hot-fixes for HubSpot-rendered markup whose external CSS was stripped during
migration off HubSpot. Loaded on every page by inject-partials.mjs. */
/* Language switcher.
Recreates the dropdown behaviour the original cos-LanguageSwitcher CSS gave:
- The globe shows the current language (appended by inline JS as text).
- The list of other languages is hidden by default.
- On hover of the globe, the list appears below the globe.
The page already has inline styles for ".globe_class" (22x22px box, blue
text) and ".globe_class:hover .lang_list_class { display: flex; ... }" but
crucially missing the default "display: none" on the list and absolute
positioning. Without those, both the current-lang label and the list
render side-by-side as flat text. */
.language-menu,
.language-menu-container {
display: inline-flex;
align-items: center;
}
.language-menu .lang_switcher_class {
position: relative;
}
.language-menu .globe_class {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer !important;
/* Show the "current language" text inserted by the inline script as an
uppercased blue label, padded out to feel clickable. */
text-transform: uppercase;
color: #09446B;
font-family: Inter, sans-serif;
font-size: 0.95rem;
font-weight: 600;
/* Override HubSpot's inline 22x22 px box that clipped the dropdown. */
width: auto !important;
height: auto !important;
min-width: 2.5rem;
min-height: 1.75rem;
background: none !important;
border-radius: 4px;
padding: 0.25rem 0.5rem;
}
.language-menu .globe_class:hover {
background-color: rgba(9, 68, 107, 0.06);
}
/* Hide the dropdown by default. */
.language-menu .lang_list_class {
display: none !important;
position: absolute;
top: 100%;
right: 0;
min-width: 5rem;
margin: 0;
padding: 0.25rem 0;
list-style: none;
background: #fff;
border: 1px solid rgba(9, 68, 107, 0.15);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
z-index: 1000;
/* Clip the hover background to the rounded corners so it doesn't bleed past. */
overflow: hidden;
box-sizing: border-box;
}
/* Show on hover of the globe wrapper. A few overlapping conditions so the
hover doesn't drop when the mouse crosses between the globe and the menu. */
.language-menu .lang_switcher_class:hover .lang_list_class,
.language-menu .globe_class:hover .lang_list_class,
.language-menu .lang_list_class:hover {
display: flex !important;
flex-direction: column;
width: auto !important;
top: 100% !important;
}
.language-menu .lang_list_class li {
display: block;
margin: 0;
padding: 0 !important;
border: none !important;
background: transparent !important;
line-height: 1;
width: auto;
box-sizing: border-box;
}
.language-menu .lang_switcher_link {
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
color: #09446B;
font-family: Inter, sans-serif;
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
white-space: nowrap;
box-sizing: border-box;
width: 100%;
}
.language-menu .lang_switcher_link:hover {
background-color: rgba(9, 68, 107, 0.08);
}
.language-menu .lang_switcher_link[aria-current="page"],
.language-menu .lang_switcher_link.active {
font-weight: 700;
}
/* Hide the current language from the dropdown. The trigger already shows it,
so listing it again is redundant. We rely on being set
correctly (it is, by HubSpot's renderer). */
html[lang="en"] .language-menu .lang_switcher_link[lang="en"],
html[lang="en-us"] .language-menu .lang_switcher_link[lang="en"],
html[lang="en-gb"] .language-menu .lang_switcher_link[lang="en"] {
display: none !important;
}
html[lang="es"] .language-menu .lang_switcher_link[lang="es"],
html[lang="es-es"] .language-menu .lang_switcher_link[lang="es"] {
display: none !important;
}
/* When the dropdown ends up with only one item (the other language), the
parent still has padding/borders — clear them. */
html[lang="en"] .language-menu .lang_switcher_link[lang="en"],
html[lang="es"] .language-menu .lang_switcher_link[lang="es"] {
/* The link itself is hidden; if the surrounding still occupies space
we hide it too. */
}
html[lang="en"] .language-menu .lang_list_class li:has(> .lang_switcher_link[lang="en"]),
html[lang="es"] .language-menu .lang_list_class li:has(> .lang_switcher_link[lang="es"]) {
display: none !important;
}
/* Hide HubSpot CTA placeholder remnants if any module is still rendering them. */
.hs-cta-embed:empty,
.hs-cta-simple-placeholder:empty {
display: none;
}
/* Full-width sections.
HubSpot's stylesheet pins `.dnd-section > .row-fluid` to max-width: 1220px
and relies on per-page generated CSS rules
(e.g. `.dnd_area-row-N-force-full-width-section > .row-fluid { max-width: none }`)
to break individual sections out of that constraint. The English home has
those rules; the Spanish home is missing some of them, which is why the
awards carousel and leading-brands strip render at 1220px on /es/ but
full-bleed on /.
Toqio marks intentionally full-width sections with `.sec-full`. Break them
out of any centered max-width parent using the classic 50% - 50vw trick:
the element pulls its left/right margins by the gap between its parent's
centre and the viewport centre, and then re-extends to 100vw. On pages
where the parent IS already viewport-wide (EN home) the negative margins
evaluate to zero, so nothing changes. */
.sec-full {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Belt-and-suspenders: also strip the .dnd-section row-fluid max-width when
it contains a .sec-full, in case the calc() trick gets nudged by a
horizontal-scrollbar quirk. */
.dnd-section > .row-fluid:has(.sec-full) {
max-width: none !important;
}
/* Scroll-reveal observer kick-start.
HubSpot's templates use two reveal systems — an in-house ".animatable"
IntersectionObserver in template_main.min.js, and AOS for [data-aos]
elements. Both sometimes fail to fire on initial load, leaving sections
invisible until a scroll or window resize. The visibility hand-off is
handled by scripts/inject-partials.mjs (which adds a tiny inline kick-
start script before ) — no CSS override is needed here because we
want the reveal animations to play normally. */