/* deploy: 1778259696 */
/*
*
* We are running a previously-made "Barnes 2024 theme" inside the Essence theme.
* Thus, some rules are to override Essence Rules in order to apply the right design guideline.
*
*
* */
/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */
:root{
--theme-color--barnes: #332882;
/* Brand unification (2026-05): all brands adopt the Spectrix purple
(#332882). Originals kept inline as comments for reference. */
--theme-color--synventive: #332882; /* was #E0263B */
--theme-color--foboha: #332882; /* was #00a9ab */
--theme-color--manner: #332882; /* was #01A7E1 */
--theme-color--thermoplay: #332882; /* was #008D54 */
--theme-color--priamus: #332882; /* was #007CC6 */
--theme-color--gammaflux: #332882; /* was #015AAF */
}
/* Swiper */
body .swiper-button-prev:after,
body .swiper-rtl .swiper-button-next:after,
body .swiper-button-next:after,
body .swiper-rtl .swiper-button-prev:after{
display: none;
}
.swiper-button-next,
.swiper-button-prev,
.swiper-button-next:active,
.swiper-button-next:hover,
.swiper-button-prev:active,
.swiper-button-prev:hover{
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-color: transparent;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
background-image: url('/hubfs/20046132/_icons/arrow-barnes.svg');
}
.swiper-button-next {
right: -50px;
}
.swiper-button-prev {
left: -50px;
transform: rotate(180deg);
}
body .button-component[data-type="default-text-only"],
body .button-component[data-type="default-text-only"]:hover,
body form .hs-button,
body form .hs-button:active,
body form .hs-button:focus,
body form .hs-button:hover,
body form input[type=submit],
body form input[type=submit]:active,
body form input[type=submit]:focus,
body form input[type=submit]:hover{
border-radius: 0;
background: transparent;
}
body a.cta_button.border-transparent,
body a.cta_button.border-transparent-brand{
border: var(--theme-global-button-border-color);
-moz-transition: all .4s ease !important;
-webkit-transition: all .4s ease !important;
-o-transition: all .4s ease !important;
transition: all .4s ease !important;
color: #FFFFFF;
border-color: #FFFFFF;
text-decoration: none;
background-color: transparent;
border-radius: 0;
}
body[data-page-type="barnes"] .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active,
body[data-page-type="barnes"] span.swiper-pagination-bullet{
/* color: var(--theme-color--barnes)!important; */
background-color: var(--theme-color--barnes)!important;
}
body[data-page-type="barnes"] a.border-transparent-brand{
border-color: var(--theme-color--barnes);
color: var(--theme-color--barnes);
}
body[data-page-type="barnes"] .button-component[data-type="default-text-only"],
body[data-page-type="barnes"] .button-component[data-type="default-text-only"]:hover,
body[data-page-type="barnes"] form input[type=submit],
body[data-page-type="barnes"] form label.hs-error-msg,
body[data-page-type="barnes"] .hs-input.invalid.error{
border-color: var(--theme-color--barnes);
color:var(--theme-color--barnes);
}
body[data-page-type="barnes"] .button-component[data-type="default-bg-text-only"],
body[data-page-type="barnes"] .button-component[data-type="default-bg-text-only"]:hover,
body[data-page-type="barnes"] .button-component[data-type="default-bg-text-only"]:active,
body[data-page-type="barnes"] .button-component[data-type="default-bg-text-only"]:focus{
background-color: var(--theme-color--barnes);
color: #fff;
border-radius: 0;
}
body[data-page-type="barnes"] .button-component[data-type="default-bg-white-text-only"],
body[data-page-type="barnes"] .button-component[data-type="default-bg-white-text-only"]:hover,
body[data-page-type="barnes"] .button-component[data-type="default-bg-white-text-only"]:active,
body[data-page-type="barnes"] .button-component[data-type="default-bg-white-text-only"]:focus{
background-color: #fff;
color: var(--theme-color--barnes);
}
body[data-page-type="barnes"] ul.hs-breadcrumb-menu a,
body[data-page-type="barnes"] .active-branch > a,
body[data-page-type="barnes"] .deco-ines ul li.hs-menu-item a:hover{
color:var(--theme-color--barnes)!important;
}
body[data-page-type="barnes"] ::marker {
color:var(--theme-color--barnes)!important;
}
body[data-page-type="barnes"] .table-of-content-menu-inner button{
color: var(--theme-color--barnes);
}
/* Synventive */
body[data-page-type="synventive"] .cm-wrapper.footer-cta-wrap {
background-color: var(--theme-color--synventive);
}
body[data-page-type="synventive"] .footer-nav-links-wrap .footer-nav-link-row {
border-color: #fff;
}
body[data-page-type="synventive"] ul.hs-breadcrumb-menu a,
body[data-page-type="synventive"] .active-branch > a,
body[data-page-type="synventive"] .deco-ines ul li.hs-menu-item a:hover{
color:var(--theme-color--synventive)!important;
}
body[data-page-type="synventive"] a:not(.cta_button) {
color: var(--theme-color--synventive);
}
body .footer-nav-links-wrap a,
body .footer-nav-links-wrap p{
color: #fff!important;
opacity: .6!important;
}
body .footer-nav-links-wrap a.footer-logo-link{
opacity: 1!important;
}
body[data-page-type="synventive"] .cm-wrapper.footer-nav {
background: #332882;
}
body[data-page-type="synventive"] .slick-prev,
body[data-page-type="synventive"] .slick-next{
color: var(--theme-color--synventive);
}
body[data-page-type="synventive"] .slick-prev:hover,
body[data-page-type="synventive"] .slick-next:hover{
color: var(--theme-color--synventive);
}
body[data-page-type="synventive"] .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active,
body[data-page-type="synventive"] span.swiper-pagination-bullet{
/* color: var(--theme-color--synventive)!important; */
background-color: var(--theme-color--synventive)!important;
}
body[data-page-type="synventive"] .button-component[data-type="default-text-only"],
body[data-page-type="synventive"] .button-component[data-type="default-text-only"]:hover,
body[data-page-type="synventive"] form input[type=submit],
body[data-page-type="synventive"] form label.hs-error-msg,
body[data-page-type="synventive"] .hs-input.invalid.error{
border-color: var(--theme-color--synventive);
color:var(--theme-color--synventive);
}
body[data-page-type="synventive"] .button-component[data-type="default-bg-text-only"],
body[data-page-type="synventive"] .button-component[data-type="default-bg-text-only"]:hover,
body[data-page-type="synventive"] .button-component[data-type="default-bg-text-only"]:active,
body[data-page-type="synventive"] .button-component[data-type="default-bg-text-only"]:focus{
background-color: var(--theme-color--synventive);
color: #fff;
border-radius: 0;
}
body[data-page-type="synventive"] .button-component[data-type="default-bg-white-text-only"],
body[data-page-type="synventive"] .button-component[data-type="default-bg-white-text-only"]:hover,
body[data-page-type="synventive"] .button-component[data-type="default-bg-white-text-only"]:active,
body[data-page-type="synventive"] .button-component[data-type="default-bg-white-text-only"]:focus{
background-color: #fff;
color: var(--theme-color--synventive);
}
body[data-page-type="synventive"] ::marker {
color:var(--theme-color--priamus)!important;
}
body[data-page-type="synventive"] .table-of-content-menu-inner button{
color: var(--theme-color--synventive);
}
body[data-page-type="synventive"] .swiper-button-next,
body[data-page-type="synventive"] .swiper-button-prev,
body[data-page-type="synventive"] .swiper-button-next:active,
body[data-page-type="synventive"] .swiper-button-next:hover,
body[data-page-type="synventive"] .swiper-button-prev:active,
body[data-page-type="synventive"] .swiper-button-prev:hover{
background-image: url('/hubfs/20046132/_icons/arrow-synventive.svg');
}
body[data-page-type="synventive"] a.border-transparent-brand{
border-color: var(--theme-color--synventive);
color: var(--theme-color--synventive);
}
/* priamus */
body[data-page-type="priamus"] .cm-wrapper.footer-cta-wrap {
background-color: var(--theme-color--priamus);
}
body[data-page-type="priamus"] a:not(.cta_button) {
color: var(--theme-color--priamus);
}
body[data-page-type="priamus"] .cm-wrapper.footer-nav {
background: #332882;
}
body[data-page-type="priamus"] .slick-prev,
body[data-page-type="priamus"] .slick-next{
color: var(--theme-color--priamus);
}
body[data-page-type="priamus"] .slick-prev:hover,
body[data-page-type="priamus"] .slick-next:hover{
color: var(--theme-color--priamus);
}
body[data-page-type="priamus"] .table-of-content-menu-inner button{
color: var(--theme-color--priamus);
}
body[data-page-type="priamus"] .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active,
body[data-page-type="priamus"] span.swiper-pagination-bullet{
/* color: var(--theme-color--synventive)!important; */
background-color: var(--theme-color--priamus)!important;
}
body[data-page-type="priamus"] .footer-nav-links-wrap .footer-nav-link-row {
border-color: #32C5F9;
}
body[data-page-type="priamus"] .button-component[data-type="default-text-only"],
body[data-page-type="priamus"] .button-component[data-type="default-text-only"]:hover,
body[data-page-type="priamus"] form input[type=submit],
body[data-page-type="priamus"] form label.hs-error-msg,
body[data-page-type="priamus"] .hs-input.invalid.error{
border-color: var(--theme-color--priamus);
color:var(--theme-color--priamus);
}
body[data-page-type="priamus"] .button-component[data-type="default-bg-text-only"],
body[data-page-type="priamus"] .button-component[data-type="default-bg-text-only"]:hover,
body[data-page-type="priamus"] .button-component[data-type="default-bg-text-only"]:active,
body[data-page-type="priamus"] .button-component[data-type="default-bg-text-only"]:focus{
background-color: var(--theme-color--priamus);
color: #fff;
border-radius: 0;
}
body[data-page-type="priamus"] .button-component[data-type="default-bg-white-text-only"],
body[data-page-type="priamus"] .button-component[data-type="default-bg-white-text-only"]:hover,
body[data-page-type="priamus"] .button-component[data-type="default-bg-white-text-only"]:active,
body[data-page-type="priamus"] .button-component[data-type="default-bg-white-text-only"]:focus{
background-color: #fff;
color: var(--theme-color--priamus);
}
body[data-page-type="priamus"] ul.hs-breadcrumb-menu a,
body[data-page-type="priamus"] .active-branch > a,
body[data-page-type="priamus"] .deco-ines ul li.hs-menu-item a:hover{
color:var(--theme-color--priamus)!important;
}
body[data-page-type="priamus"] ::marker {
color:var(--theme-color--priamus)!important;
}
body[data-page-type="priamus"] .swiper-button-next,
body[data-page-type="priamus"] .swiper-button-prev,
body[data-page-type="priamus"] .swiper-button-next:active,
body[data-page-type="priamus"] .swiper-button-next:hover,
body[data-page-type="priamus"] .swiper-button-prev:active,
body[data-page-type="priamus"] .swiper-button-prev:hover{
background-image: url('/hubfs/20046132/_icons/arrow-priamus.svg');
}
body[data-page-type="priamus"] a.border-transparent-brand{
border-color: var(--theme-color--priamus);
color: var(--theme-color--priamus);
}
/* Foboha */
body[data-page-type="foboha"] .cm-wrapper.footer-cta-wrap {
background-color: var(--theme-color--foboha);
}
body[data-page-type="foboha"] a:not(.cta_button) {
color: var(--theme-color--foboha);
}
body[data-page-type="foboha"] .cm-wrapper.footer-nav {
background: #332882;
}
body[data-page-type="foboha"] .slick-prev,
body[data-page-type="foboha"] .slick-next,
body[data-page-type="foboha"] .slick-prev:hover,
body[data-page-type="foboha"] .slick-next:hover{
color: var(--theme-color--foboha);
}
body[data-page-type="foboha"] .table-of-content-menu-inner button{
color: var(--theme-color--foboha);
}
body[data-page-type="foboha"] .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active,
body[data-page-type="foboha"] span.swiper-pagination-bullet{
/* color: var(--theme-color--synventive)!important; */
background-color: var(--theme-color--foboha)!important;
}
body[data-page-type="foboha"] .button-component[data-type="default-text-only"],
body[data-page-type="foboha"] .button-component[data-type="default-text-only"]:hover,
body[data-page-type="foboha"] form input[type=submit],
body[data-page-type="foboha"] form label.hs-error-msg,
body[data-page-type="foboha"] .hs-input.invalid.error{
border-color: var(--theme-color--foboha);
color:var(--theme-color--foboha);
}
body[data-page-type="foboha"] .button-component[data-type="default-bg-text-only"],
body[data-page-type="foboha"] .button-component[data-type="default-bg-text-only"]:hover,
body[data-page-type="foboha"] .button-component[data-type="default-bg-text-only"]:active,
body[data-page-type="foboha"] .button-component[data-type="default-bg-text-only"]:focus{
background-color: var(--theme-color--foboha);
color: #fff;
border-radius: 0;
}
body[data-page-type="foboha"] .button-component[data-type="default-bg-white-text-only"],
body[data-page-type="foboha"] .button-component[data-type="default-bg-white-text-only"]:hover,
body[data-page-type="foboha"] .button-component[data-type="default-bg-white-text-only"]:active,
body[data-page-type="foboha"] .button-component[data-type="default-bg-white-text-only"]:focus{
background-color: #fff;
color: var(--theme-color--foboha);
}
body[data-page-type="foboha"] ul.hs-breadcrumb-menu a,
body[data-page-type="foboha"] .active-branch > a,
body[data-page-type="foboha"] .deco-ines ul li.hs-menu-item a:hover{
color:var(--theme-color--foboha)!important;
}
body[data-page-type="foboha"] ::marker {
color:var(--theme-color--foboha)!important;
}
body[data-page-type="foboha"] .swiper-button-next,
body[data-page-type="foboha"] .swiper-button-prev,
body[data-page-type="foboha"] .swiper-button-next:active,
body[data-page-type="foboha"] .swiper-button-next:hover,
body[data-page-type="foboha"] .swiper-button-prev:active,
body[data-page-type="foboha"] .swiper-button-prev:hover{
background-image: url('/hubfs/20046132/_icons/arrow-foboha.svg');
}
body[data-page-type="foboha"] a.border-transparent-brand{
border-color: var(--theme-color--foboha);
color: var(--theme-color--foboha);
}
/* manner */
body[data-page-type="manner"] .cm-wrapper.footer-cta-wrap {
background-color: var(--theme-color--manner);
}
body[data-page-type="manner"] a:not(.cta_button) {
color: var(--theme-color--manner);
}
body[data-page-type="manner"] .cm-wrapper.footer-nav {
background: #332882;
}
body[data-page-type="manner"] .slick-prev,
body[data-page-type="manner"] .slick-next,
body[data-page-type="manner"] .slick-prev:hover,
body[data-page-type="manner"] .slick-next:hover{
color: var(--theme-color--manner);
}
body[data-page-type="manner"] .table-of-content-menu-inner button{
color: var(--theme-color--manner);
}
body[data-page-type="manner"] .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active,
body[data-page-type="manner"] span.swiper-pagination-bullet{
/* color: var(--theme-color--synventive)!important; */
background-color: var(--theme-color--manner)!important;
}
body[data-page-type="manner"] .footer-nav-links-wrap .footer-nav-link-row {
border-color: #32C5F9;
}
body[data-page-type="manner"] .button-component[data-type="default-text-only"],
body[data-page-type="manner"] .button-component[data-type="default-text-only"]:hover,
body[data-page-type="manner"] form input[type=submit],
body[data-page-type="manner"] form label.hs-error-msg,
body[data-page-type="manner"] .hs-input.invalid.error{
border-color: var(--theme-color--manner);
color:var(--theme-color--manner);
}
body[data-page-type="manner"] .button-component[data-type="default-bg-text-only"],
body[data-page-type="manner"] .button-component[data-type="default-bg-text-only"]:hover,
body[data-page-type="manner"] .button-component[data-type="default-bg-text-only"]:active,
body[data-page-type="manner"] .button-component[data-type="default-bg-text-only"]:focus{
background-color: var(--theme-color--manner);
color: #fff;
border-radius: 0;
}
body[data-page-type="manner"] .button-component[data-type="default-bg-white-text-only"],
body[data-page-type="manner"] .button-component[data-type="default-bg-white-text-only"]:hover,
body[data-page-type="manner"] .button-component[data-type="default-bg-white-text-only"]:active,
body[data-page-type="manner"] .button-component[data-type="default-bg-white-text-only"]:focus{
border-radius: 0;
background-color: #fff;
color: var(--theme-color--manner);
}
body[data-page-type="manner"] ul.hs-breadcrumb-menu a,
body[data-page-type="manner"] .active-branch > a,
body[data-page-type="manner"] .deco-ines ul li.hs-menu-item:hover > a{
color:var(--theme-color--manner)!important;
}
body[data-page-type="manner"] ::marker {
color:var(--theme-color--manner)!important;
}
body[data-page-type="manner"] .swiper-button-next,
body[data-page-type="manner"] .swiper-button-prev,
body[data-page-type="manner"] .swiper-button-next:active,
body[data-page-type="manner"] .swiper-button-next:hover,
body[data-page-type="manner"] .swiper-button-prev:active,
body[data-page-type="manner"] .swiper-button-prev:hover{
background-image: url('/hubfs/20046132/_icons/arrow-manner.svg');
}
body[data-page-type="manner"] a.border-transparent-brand{
border-color: var(--theme-color--manner);
color: var(--theme-color--manner);
}
/* thermoplay */
body[data-page-type="thermoplay"] .cm-wrapper.footer-cta-wrap {
background-color: var(--theme-color--thermoplay);
}
body[data-page-type="thermoplay"] a:not(.cta_button) {
color: var(--theme-color--thermoplay);
}
body[data-page-type="thermoplay"] .cm-wrapper.footer-nav {
background: #332882;
}
body[data-page-type="thermoplay"] .slick-prev,
body[data-page-type="thermoplay"] .slick-next,
body[data-page-type="thermoplay"] .slick-prev:hover,
body[data-page-type="thermoplay"] .slick-next:hover{
color: var(--theme-color--thermoplay);
}
body[data-page-type="thermoplay"] .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active,
body[data-page-type="thermoplay"] span.swiper-pagination-bullet{
/* color: var(--theme-color--synventive)!important; */
background-color: var(--theme-color--thermoplay)!important;
}
body[data-page-type="thermoplay"] .footer-nav-links-wrap .footer-nav-link-row {
border-color: #10AA6C;
}
body[data-page-type="thermoplay"] .table-of-content-menu-inner button{
color: var(--theme-color--thermoplay);
}
body[data-page-type="thermoplay"] .button-component[data-type="default-text-only"],
body[data-page-type="thermoplay"] .button-component[data-type="default-text-only"]:hover,
body[data-page-type="thermoplay"] form input[type=submit],
body[data-page-type="thermoplay"] form label.hs-error-msg,
body[data-page-type="thermoplay"] .hs-input.invalid.error{
border-color: var(--theme-color--thermoplay);
color:var(--theme-color--thermoplay);
}
body[data-page-type="thermoplay"] .button-component[data-type="default-bg-text-only"],
body[data-page-type="thermoplay"] .button-component[data-type="default-bg-text-only"]:hover,
body[data-page-type="thermoplay"] .button-component[data-type="default-bg-text-only"]:active,
body[data-page-type="thermoplay"] .button-component[data-type="default-bg-text-only"]:focus{
background-color: var(--theme-color--thermoplay);
color: #fff;
border-radius: 0;
}
body[data-page-type="thermoplay"] .button-component[data-type="default-bg-white-text-only"],
body[data-page-type="thermoplay"] .button-component[data-type="default-bg-white-text-only"]:hover,
body[data-page-type="thermoplay"] .button-component[data-type="default-bg-white-text-only"]:active,
body[data-page-type="thermoplay"] .button-component[data-type="default-bg-white-text-only"]:focus{
background-color: #fff;
color: var(--theme-color--thermoplay);
}
body[data-page-type="thermoplay"] ul.hs-breadcrumb-menu a,
body[data-page-type="thermoplay"] .active-branch > a,
body[data-page-type="thermoplay"] .deco-ines ul li.hs-menu-item:hover > a,
body[data-page-type="thermoplay"] .deco-ines ul li.hs-menu-item:hover > .menu__child-toggle > .menu__child-toggle-icon{
color:var(--theme-color--thermoplay)!important;
}
body[data-page-type="thermoplay"] ::marker {
color:var(--theme-color--thermoplay)!important;
}
body[data-page-type="thermoplay"] .swiper-button-next,
body[data-page-type="thermoplay"] .swiper-button-prev,
body[data-page-type="thermoplay"] .swiper-button-next:active,
body[data-page-type="thermoplay"] .swiper-button-next:hover,
body[data-page-type="thermoplay"] .swiper-button-prev:active,
body[data-page-type="thermoplay"] .swiper-button-prev:hover{
background-image: url('/hubfs/20046132/_icons/arrow-thermoplay.svg');
}
body[data-page-type="thermoplay"] a.border-transparent-brand{
border-color: var(--theme-color--thermoplay);
color: var(--theme-color--thermoplay);
}
/* gammaflux */
body[data-page-type="gammaflux"] .cm-wrapper.footer-cta-wrap {
background-color: var(--theme-color--gammaflux);
}
body[data-page-type="gammaflux"] a:not(.cta_button) {
color: var(--theme-color--gammaflux);
}
body[data-page-type="gammaflux"] .cm-wrapper.footer-nav {
background: #332882;
;
}
body[data-page-type="gammaflux"] .slick-prev,
body[data-page-type="gammaflux"] .slick-next,
body[data-page-type="gammaflux"] .slick-prev:hover,
body[data-page-type="gammaflux"] .slick-next:hover{
color: var(--theme-color--gammaflux);
background-color: var(--theme-color--gammaflux);
}
body[data-page-type="gammaflux"] .table-of-content-menu-inner button{
color: var(--theme-color--gammaflux);
}
body[data-page-type="gammaflux"] .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active,
body[data-page-type="gammaflux"] span.swiper-pagination-bullet{
/* color: var(--theme-color--synventive)!important; */
background-color: var(--theme-color--gammaflux)!important;
}
body[data-page-type="gammaflux"] ::marker {
color:var(--theme-color--gammaflux)!important;
}
body[data-page-type="gammaflux"] .footer-nav-links-wrap .footer-nav-link-row {
border-color: #32C5F9;
}
body[data-page-type="gammaflux"] .button-component[data-type="default-text-only"],
body[data-page-type="gammaflux"] .button-component[data-type="default-text-only"]:hover,
body[data-page-type="gammaflux"] form input[type=submit],
body[data-page-type="gammaflux"] form label.hs-error-msg,
body[data-page-type="gammaflux"] .hs-input.invalid.error{
border-color: var(--theme-color--gammaflux);
color:var(--theme-color--gammaflux);
}
body[data-page-type="gammaflux"] .button-component[data-type="default-bg-text-only"],
body[data-page-type="gammaflux"] .button-component[data-type="default-bg-text-only"]:hover,
body[data-page-type="gammaflux"] .button-component[data-type="default-bg-text-only"]:active,
body[data-page-type="gammaflux"] .button-component[data-type="default-bg-text-only"]:focus{
background-color: var(--theme-color--gammaflux);
color: #fff;
border-radius: 0;
}
body[data-page-type="gammaflux"] ul.hs-breadcrumb-menu a,
body[data-page-type="gammaflux"] .active-branch > a,
body[data-page-type="gammaflux"] .deco-ines ul li.hs-menu-item:hover > a,
body[data-page-type="gammaflux"] .deco-ines ul li.hs-menu-item:hover > .menu__child-toggle > .menu__child-toggle-icon{
color:var(--theme-color--gammaflux)!important;
}
body[data-page-type="gammaflux"] .swiper-button-next,
body[data-page-type="gammaflux"] .swiper-button-prev,
body[data-page-type="gammaflux"] .swiper-button-next:active,
body[data-page-type="gammaflux"] .swiper-button-next:hover,
body[data-page-type="gammaflux"] .swiper-button-prev:active,
body[data-page-type="gammaflux"] .swiper-button-prev:hover{
background-image: url('/hubfs/20046132/_icons/arrow-gammaflux.svg');
}
body[data-page-type="gammaflux"] a.border-transparent-brand{
border-color: var(--theme-color--gammaflux);
color: var(--theme-color--gammaflux);
}
body {
line-height: 1.4;
overflow-wrap: break-word;
font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
padding: 0;
margin: 0;
color: #18191F;
border-bottom: 1px solid rgba(29, 29, 27, 0.10);
background: rgba(255, 255, 255, 0.85);
}
@media (min-width: 1200px) {
footer {
position: relative;
z-index: 3;
}
}
body header.header.on_scroll{
position: fixed;
z-index: 999;
}
body.nav-dark .header,
body.nav-dark .header:hover{
backdrop-filter: blur(1.5px);
background: rgb(100 96 96 / 85%);
border-bottom: 1px solid rgb(0 0 0 / 10%);
}
body.nav-dark .header .deco-ines ul li.hs-menu-item.hs-menu-depth-1 > a{
color: #fff;
}
div, p, header a {
font-family: "Roboto Condensed", sans-serif;
}
.deco-ines ul li.hs-menu-item {
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.4;
}
/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this. */
html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
line-break: strict;
overflow-wrap: normal;
word-break: break-all;
}
.hidden{
display: none;
}
/* Paragraphs */
p {
margin: 0 0 18px;
}
/* Anchors */
a {
cursor: pointer;
}
/* Lists */
ul,
ol {
margin: 0 0 1.4rem;
}
ul ul,
ol ul,
ul ol,
ol ol {
margin: 0;
}
ul.no-list {
list-style: none;
margin: 0;
padding-left: 0;
}
.il-cm ul{
list-style: none;
padding-left: 10px;
}
.il-cm ul li {
position: relative;
list-style: none;
padding-left: 10px;
}
.il-cm ul li:not(.hs-form-booleancheckbox):not(.hs-form-checkbox):before {
content: "› ";
position: absolute;
color: var(--bullet-color);
left: 0px;
}
.il-cm ul li[data-bullet-style="line"]:not(.hs-form-booleancheckbox):not(.hs-form-checkbox):before {
content: "|";
}
/* Code blocks */
pre {
overflow: auto;
}
code {
vertical-align: bottom;
}
/* Blockquotes */
blockquote {
border-left: 2px solid;
margin: 0 0 1.4rem;
padding-left: 0.7rem;
}
/* Horizontal rules */
hr {
border: none;
border-bottom: 1px solid #CCC;
}
/* Image alt text */
img {
font-size: 0.583rem;
word-break: normal;
}
a {
color: #332882;
text-decoration: underline;
}
a:hover {
color: #141844;
text-decoration: none;
}
/* Button Reset */
.button,
a.cta_button,
a.cta_button_style,
button,
.button:hover,
a.cta_button:hover,
a.cta_button_style:hover,
button{
background-color: transparent;
border: 0;
border-radius: 0;
color: #332882;
text-decoration: underline;
font-size: 16px;
font-weight: 600;
}
@media (max-width: 1199px) {
a{
font-size: 17px;
}
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover>.hs-menu-children-wrapper{
top: calc(100%);
}
.content-wrapper {
max-width: 1550px;
margin: 0 auto;
padding: 0 1rem;
}
.header-block {
position: relative;
z-index: 99999;
}
/* Title settings */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6{
margin: 0 0 1.2rem;
font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body span,
body a,
body li,
body blockquote,
body h1 *,
body h2 *,
body h3 *,
body h4 *,
body h5 *,
body h6 *,
body p *,
body span *,
body a *,
body li *,
body blockquote * {
hyphens: none !important;
}
div#hs-web-interactives-bottom-anchor {
z-index: 9999;
}
#main-content ul li{
padding-left: 8px;
position: relative;
}
#main-content ul li::marker {
color: #121a1a !important;
content: "› " ;
left: 0px;
position: absolute;
}
h1,
.h1{
font-size: 50px;
font-weight: 400;
line-height: 1;
}
h2,
.h2{
font-size: 40px;
font-weight: 400;
line-height: 1;
}
h3,
.h3{
font-size: 32px;
font-weight: 400;
line-height: 1;
}
h4,
.h4{
font-size: 24px;
font-weight: 400;
line-height: 1;
}
.section-title{
text-align: left;
}
@media(min-width: 420px){
h1,
.h1{
font-size: 75px;
font-weight: 400;
text-align: center;
}
h2,
.h2{
font-size: 60px;
font-weight: 400;
}
h3,
.h3{
font-size: 44px;
font-weight: 400;
text-align: left;
}
h4,
.h4{
font-size: 32px;
}
}
@media(min-width: 768px){
h1,
.h1{
font-size: 94px;
font-weight: 400;
}
h2,
.h2{
font-size: 70px;
font-weight: 400;
}
h3,
.h3,{
font-size: 46px;
font-weight: 400;
text-align: left;
}
h4,
.h4{
font-size: 32px;
}
}
@media(min-width: 1279px){
h1,
.h1{
font-size: 123px;
font-weight: 400;
}
h2,
.h2{
font-size: 80px;
font-weight: 400;
}
h3,
.h3{
font-size: 60px;
font-weight: 400;
}
h4,
.h4{
font-size: 40px;
}
}
/* Modules heading/title */
span.title{
display: block;
}
.module-title-wrap {
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
.module-title-wrap .container.with-lines {
padding: 80px 0 32px;
}
.module-title-wrap .module-title {
padding: 0 10px;
}
.module-title-wrap .module-title h2 {
margin: 0;
line-height: 1;
}
@media (min-width: 768px) {
.module-title-wrap .container.with-lines {
padding: 120px 0 32px;
}
.module-title-wrap .module-title {
padding: 0 20px;
}
}
@media (min-width: 1279px) {
.module-title-wrap .container.with-lines {
padding: 180px 0 60px;
}
}
.cta-w[data-alignment="center"] > span{
display: block;
}
.cta-w[data-alignment="center"],
.cta-w[data-alignment="center"] .hs-cta-embed,
.h-align-center .hs-cta-embed {
text-align: center;
margin: 0 auto;
}
.h-align-right .hs-cta-embed{
text-align: right;
margin-right: 0;
margin-left: auto;
}
.container.with-lines {
border: 0;
}
/* Global Divider */
.divider-cm {
border: 1px solid #E1DFE3;
}
/* ==========================================================================
Forms
========================================================================== */
/* General Form Styles */
form {
background-color: transparent;
max-width: 1000px;
margin: 0 auto;
padding: 15px;
}
@media (min-width: 768px) {
form {
padding: 40px;
}
}
/* Labels and Legends */
form label,
form legend {
color: #141844;
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
form h1,
form h1 span,
form h2,
form h2 span,
form h3,
form h3 span,
form h4,
form h4 span,
form h5,
form h5 span,
form h6,
form h6 span{
color: #141844!important;
}
form h4{
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 31.2px */
margin-bottom: 0;
margin-top: 32px;
}
.hs-richtext.hs-main-font-element {
margin-bottom: 0;
}
/* Common Form Field Typography */
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea,
form .inputs-list input,
form .inputs-list span,
form .hs-richtext,
form .hs-richtext p {
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
padding-left: 0;
}
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea{
padding-left: 10px;
}
form input::placeholder,
form textarea::placeholder{
color: #717D8F;
}
form .legal-consent-container .hs-form-booleancheckbox-display p,
form .legal-consent-container .hs-form-booleancheckbox-display span{
color: #141844;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
}
/* Text Inputs, Textarea, Select */
.hs-input:not([type="checkbox"]):not([type="radio"]),
textarea {
width: 100% !important;
}
input.hs-input,
textarea {
background: transparent;
border: 0;
border-bottom: 2px solid #d1d6dc;
border-radius: 0;
}
input::-webkit-input-placeholder,
textarea::placeholder {
color: #121a21;
}
/* Radio Buttons and Checkboxes */
input[type=radio] {
width: 20px !important;
min-width: 20px !important;
height: 20px !important;
color: #0E1012 !important;
}
form .hs-form-radio-display span {
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 23.4px */
}
input[type=checkbox] {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
color: #0E1012 !important;
}
.hs-input[type=checkbox],
.hs-input[type=radio] {
margin-right: 16px !important;
}
/* HubSpot Form Specific Styles */
form .hs-richtext,
form .hs-richtext p {
margin: 0 0 1.4rem;
}
.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field {
margin-bottom: 1.4rem;
}
/* Legal Consent Checkbox */
.legal-consent-container *:not(a) {
color: #8694A9;
}
.hs-form-booleancheckbox-display {
display: flex;
align-items: flex-start;
}
.legal-consent-container .hs-form-booleancheckbox-display input {
float: none;
position: relative;
}
.legal-consent-container .hs-form-booleancheckbox-display>span,
.legal-consent-container .hs-form-booleancheckbox-display>span p {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* Submit Button */
.hs_submit.hs-submit {
position: inherit;
right: 0;
}
/* reCAPTCHA badge */
.grecaptcha-badge {
margin: 0;
}
/* Responsive Form Styles */
@media(min-width: 768px) {
fieldset.form-columns-2 {
display: flex;
gap: 30px;
}
}
form .hs-button, form input[type=submit]{
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
min-width: 180px;
max-width: 100%;
padding: 10px;
}
/* System */
body.page-404 header {
display: block;
}
body.page-404 header .deco-ines {
opacity: 0;
pointer-events: none;
}
@media (min-width: 768px) {
body[data-is-lp=true] #nav-container {
min-height: 88px;
}
body[data-is-lp=true] .footer-nav-links-wrap .footer-nav-link-row:last-child {
border-left: 0;
}
}
header.header.on_scroll .deco-ines.breadcrumb-cm {
display: none;
}
.menu-button-mega-tablet, .menu-button-mega-mobile {
display: none;
}
.show-nav .menu-button .icon-bar:nth-child(2) {
display: none;
}
.show-nav .icon-bar:nth-child(1) {
transform: translate(2px, 2px) rotate(45deg);
}
.show-nav .icon-bar:nth-child(3) {
transform: translate(2px, -3px) rotate(-45deg);
}
.mega-menu-menu a {
text-decoration: none;
color: #0E1012;
}
.mega-menu-menu a:hover {
color: #332882;
}
.mega-menu-mobile {
position: relative;
z-index: 9;
}
.mega-menu-mobile #mega-menu {
min-height: auto;
background-color: #fff;
width: 100%;
}
.show-nav #nav-content {
display: block;
width: 100%;
max-width: 100%;
}
.mega-menu-item .mega-menu-top-link {
text-decoration: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 18px;
border-bottom: 1px solid #E1DFE3;
cursor: pointer;
}
.mega-menu-item .mega-menu-top-link a {
font-size: 18px;
padding: 16px;
}
.mega-menu-top-link svg {
margin: 16px
}
.mega-menu-item.show .mega-menu-submenu-wrap,
.mega-menu-item.show .mega-menu-read-more-wrap,
.mega-menu-item.show .mega-menu-info,
.mega-menu-item.show .mega-menu-submenu-item-back {
display: block;
}
.mega-menu-submenu-item a {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 24px;
align-items: center;
align-items: stretch;
}
.mega-menu-submenu-item img {
max-width: 100px;
width: 100px;
margin-right: ;
}
.mega-menu-submenu-item a:hover {
background-color: #F6F7F9;
}
.mega-menu-submenu-item a:hover .mega-menu-submenu-column-title-heading {
text-decoration: underline;
}
.mega-menu-submenu-column-title {
font-size: 14px;
color: #5C5C5C;
padding: 16px;
}
.mega-menu-info {
margin-top: 32px;
}
.mega-menu-info-inner {
background-color: #f6f7f9;
padding: 20px;
display: table;
width: 100%;
height: auto;
}
.title-services-wrap {
font-size: 18px;
margin-bottom: 20px;
display: flex;
}
.mega-menu-info a {
font-size: 16px;
font-weight: 400;
display: block;
margin-bottom: 16px;
}
.title-services-wrap:nth-of-type(2) {
margin-top: 40px;
padding-top: ;
}
.mega-menu-info .title-talk-to-us-wrap a {
display: inline-block;
margin: 0;
}
.mega-menu-read-more-wrap a {
display: inline-block;
margin-right: 26px;
margin-bottom: 26px;
font-size: 16px;
font-weight: 400;
border-left: solid 2px;
padding-left: 10px;
}
.mega-menu-read-more-wrap>p {
color: #8694A9;
font-size: 18px;
margin-bottom: 16px;
margin-top: 32px;
}
.title-services-icon {
margin-right: 10px;
}
.mega-menu-submenu-wrap.show .mega-menu-top-link {
margin-top: 26px;
border: none;
font-size: 26px;
margin-bottom: 26px;
padding-left: 0;
}
.mega-menu-submenu-column-title-heading {
font-size: 16px;
color: #141844;
margin-bottom: 6px;
}
.login-register-wrap {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #E1DFE3;
}
.mega-menu-submenu-item {
max-width: 355px;
width: 100%;
}
.mega-menu-read-more-link.manner {
border-color: #332882;
}
.mega-menu-read-more-link.foboha {
border-color: #1ABCB4;
}
.mega-menu-read-more-link.thermoplay {
border-color: #332882;
}
.mega-menu-read-more-link.synventive {
border-color: #332882;
}
.mega-menu-read-more-link.priamus {
border-color: #332882;
}.mega-menu-read-more-link.gammaflux {
border-color: #332882;
}
#nav-content .mega-menu-item .mega-menu-top-link:hover {
color: #141844;
background-color: #F6F7F9;
}
.mega-menu-submenu-wrap,
.mega-menu-wrap {
display: none;
}
.mega-menu-wrap.show {
display: flex;
width: 100%;
background-color: #fff;
}
.mega-menu-submenu-wrap.show {
display: block;
}
.mega-menu-submenu-column {
min-width: 100px;
min-height: 95px;
background-size: cover;
}
.mega-menu-item-wrap.mega-menu-item-wrap-top,
.show-nav .mega-menu-item-wrap.mega-menu-item-wrap-top {
display: none;
}
.mega-menu-info {
display: none;
}
.mega-menu-menu.show .mega-menu-info {
display: flex;
max-width: 400px;
}
.mega-menu-item-wrap {
display: none;
}
.show-nav .mega-menu-item-wrap {
display: initial;
border-right: 1px solid #e1dfe3;
padding-right: 20px;
}
.mega-menu-mobile .mega-menu-item-wrap.hide {
display: none;
}
.menu-button-mega-mobile {
display: flex;
vertical-align: middle;
align-items: center;
margin-left: 40px;
}
.menu-button-wrap .menu-button-text {
padding: 0;
}
body .header__logo.header__logo--main {
display: flex;
justify-content: flex-start;
}
.header__logo--main a {
display: none;
}
.header__logo--main .logo-mobile a {
display: block;
}
.header__logo--main .logo-mobile a img {
/* Spectrix logo PNG aspect ratio is ~7:1, so height:32px would render ~222px wide.
Pin width for predictable mobile sizing. */
width: 140px !important;
height: auto !important;
}
div#nav-container .nav-container-inner {
display: flex;
justify-content: center;
max-width: 1900px;
margin: 0 auto;
width: 100%;
}
.header__logo.header__logo--main {
vertical-align: middle;
display: flex;
}
body .menu-button-wrap {
flex-grow: 0 !important;
padding: 0;
}
.title-talk-to-us-wrap p {
font-size: 16px;
}
.mega-menu-submenu-item-back {
position: absolute;
top: 0;
left: 0;
}
.mega-menu-menu, .deco-ines.breadcrumb-cm {
display: none;
}
.mega-menu-menu.show {
display: block;
}
.show-nav .mega-menu-menu {
display: block;
}
.header .bg-mega {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
transition: .5s;
display: none;
opacity: 0;
}
.header .bg-mega.show {
display: flex;
opacity: 1;
top: 160px;
background: rgba(0,0,0,0.8);
}
@media (max-width: 1278px) {
body .header__logo.header__logo--main img {
image-rendering: -webkit-optimize-contrast;
image-rendering: auto;
height: auto !important;
margin: 0;
padding: 0;
display: block;
max-width: 100% !important;
object-fit: contain;
}
}
@media (max-width: 1024px) {
body:not([data-page-type="barnes"]) .header__logo.header__logo--main img{
width: 28px !important;
}
}
.menu-button-text .button {
text-decoration: none !important;
font-size: 18px !important;
}
.mega-menu-item-wrap.mega-menu-item-wrap-top .active .mega-menu-top-link {
border-color: #141844;
}
.mega-menu-submenu-wrap.transition, .mega-menu-menu.transition, .mega-menu-info.transition, .mega-menu-wrap.transition {
display: block;
opacity: 0;
transition: .3s;
position: absolute;
}
.mega-menu-submenu-wrap.transition.show.active, .mega-menu-menu.transition.show.active, .mega-menu-info.transition.show.active, .mega-menu-wrap.transition.show.active {
opacity: 1;
transition: .5s;
position: relative;
}
.mega-menu-menu.transition.show.active {
position: absolute;
}
.mega-menu-menu-inner.transition {
opacity: 0;
}
.mega-menu-menu-inner.transition.show.active {
opacity: 1;
visibility: visible;
transition: .3s;
}
.mega-menu-menu.show .mega-menu-wrap {
display: flex;
}
.mega-menu-submenu-item-back {
display: none;
}
.mega-menu-menu.show .mega-menu-submenu-item-back {
display: block;
}
/* header logos */
header.header .content-wrapper {
max-width: 100%;
width: 100%;
}
body header.header.on_scroll .cm-wrapper.logos-colored {
display: none;
}
header.header .footer-logo-comp{
margin-bottom: 0;
}
header.header .footer-logo-comp img{
min-width: 130px;
}
header.header .cm-wrapper.logos-colored {
background-color: #717D8F;
width: 100%;
max-width: 100%;
margin: 0;
}
header.header> .container-fluid.content-wrapper {
padding: 0;
margin: 0;
}
header.header .cm-wrapper.logos-colored .container {
padding: 10px 24px;
width: 100%;
max-width: 1900px;
gap: 30px;
}
header.header .logos-colored-container {
justify-content: left;
width: 100%;
}
header.header .logos-colored-item img {
max-width: 130px !important;
margin: 0;
}
header.header .logos-colored-item-inner {
padding: 0;
}
[data-is-lp="true"] header.header .logos-colored-item-inner {
pointer-events: none;
}
header.header .logos-colored-item {
width: 130px;
}
header.header .dnd-section>.row-fluid {
max-width: 100% !important;
}
header.header .row-fluid-wrapper.dnd-section {
padding: 0;
}
body .menu-button-mega-mobile .header__logo.header__logo--main {
max-width: 145px !important;
}
@media (max-width: 1024px) {
header.header .cm-wrapper.logos-colored {
display: none;
}
body .dnd_area-row-0-force-full-width-section > .row-fluid,
body .dnd_area-row-3-max-width-section-centering > .row-fluid {
margin: 0 auto;
flex-direction: column;
max-width: calc(100% - (var(--theme-global-section-padding) * 2)) !important;
}
}
@media (min-width: 1024px) {
.mega-menu-item.show .mega-menu-submenu-wrap {
display: flex;
}
.mega-menu-menu.show .mega-menu-submenu-item-back, .menu-button-mega-mobile {
display: none;
}
.menu-button-mega-tablet {
display: flex;
vertical-align: middle;
align-items: center;
margin-left: 40px;
}
.mega-menu-item.show .mega-menu-top-link svg,
.mega-menu-menu.show .mega-menu-item {
display:flex;
}
.mega-menu-item:hover .mega-menu-submenu-wrap,
.mega-menu-item:hover .mega-menu-read-more-wrap,
.mega-menu-item:hover .mega-menu-info {
display:initial;
}
.mega-menu-submenu-wrap.transition {
display: flex;
}
.mega-menu-submenu-wrap.show {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.mega-menu-menu.show .mega-menu-info {
border-left: 1px solid #e1dfe3;
padding-left: 40px;
width: 100%;
max-width: 300px;
}
.mega-menu-item .mega-menu-top-link {
width: 100%;
border-bottom: none;
}
.mega-menu-submenu-item img {
max-width: 150px;
width: 150px;
}
.mega-menu-submenu-item-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.mega-menu-read-more-wrap {
width: 100%;
}
.mega-menu-info {
margin-top: 0;
flex-grow: 1;
}
.mega-menu-item-wrap {
width: 100%;
max-width: 200px;
margin-right: 40px;
flex-grow: 1;
}
.mega-menu-wrap.show {
flex-grow: 1;
}
.mega-menu-menu.show {
display: flex;
}
.mega-menu-menu-inner {
padding: 0px 16px 0;
max-width: 1170px;
width: 100%;
display: flex;
height: max-content;
}
.mega-menu-mobile .mega-menu-item-wrap.hide {
display: block;
}
.mega-menu-wrap.show .mega-menu-submenu-item-back {
display: none;
}
.mega-menu-submenu-wrap .mega-menu-top-link {
display: none;
}
span.logo-mobile {
display: none;
}
body .header__logo.header__logo--main {
padding-left: 23px;
}
.header__logo--main a {
display: flex;
}
body .menu-button-wrap {
flex-grow: 1 !important;
}
#nav-container .header__logo.header__logo--main {
padding-right: 24px;
border-right: 1px solid #eeedf0;
}
#nav-container .menu-button-text .button {
border-left: 1px solid #eeedf0;
padding: 24px 32px;
}
}
@media (min-width: 1279px) {
.mega-menu-item-wrap.mega-menu-item-wrap-top {
display: flex;
justify-content: space-between;
margin: 0;
max-width: 1170px;
width: 100%;
margin: 0 auto;
}
.mega-menu-submenu-column {
min-width: 150px;
min-height: 100px;
}
#mega-menu {
width: 100%;
}
.mega-menu-item-wrap.mega-menu-item-wrap-top a {
color: #141844;
font-size: 18px;
text-decoration: none;
min-width: 150px;
text-align: center;
}
.mega-menu-item-wrap.mega-menu-item-wrap-top .mega-menu-top-link {
border-bottom: 3px solid transparent;
min-height: 87px;
transition: .3s;
}
.mega-menu-item-wrap.mega-menu-item-wrap-top .mega-menu-top-link:hover {
border-bottom: 3px solid #141844;
}
.mega-menu-menu {
background: rgba(255,255,255,1);
/*height: calc(100vh - 89px);*/
overflow: auto;
position: absolute;
top: 88px;
left: 0;
right: 0;
}
.mega-menu-info-inner {
padding: 30px;
}
.mega-menu-submenu-wrap {
border-left: none;
padding-left: 0;
}
.mega-menu-submenu-item {
margin-right: 40px;
max-width: calc(50% - 40px);
}
.mega-menu-submenu-item a {
margin-bottom: 40px;
}
.mega-menu-menu-inner {
margin: 0 auto !important;
padding: 50px 0 !important;
}
.menu-button-mega-tablet {
display: none !important;
}
.header__logo.header__logo--main, .menu-button-wrap {
width: 188px !important;
}
#nav-container .deco-ines {
margin: 0 auto !important;
}
body .menu-button-wrap {
flex-grow: 0 !important;
justify-content: flex-start;
}
.mega-menu-item .mega-menu-top-link {
color: #141844;
font-size: 18px;
min-width: 150px;
text-align: center;
text-decoration: none;
justify-content: center;
}
#nav-container .menu-button-text .button,
#nav-container .header__logo.header__logo--main {
border: none;
order: initial;
}
body .menu-button-mega-mobile .header__logo.header__logo--main {
max-width: 145px !important;
}
}
@media (min-width: 1900px) {
.mega-menu-submenu-column {
min-width: 150px;
min-height: 100px;
}
#nav-container .deco-ines {
width: 100%;
margin-left: 10px;
border-right: 1px solid #ddd;
width: 100%;
max-width: 1516px;
border-left: 1px solid #ddd;
}
header.header .cm-wrapper.logos-colored .container {
padding: 10px 20px;
}
}
@media (max-width: 1400px) {
/* The Spectrix logo PNG is 2122x305 (aspect ratio ~7:1). Using height:32px with
auto width makes it render ~222px wide — that's why the logo "jumps bigger"
when crossing the 1400px boundary. Pin width instead for predictable size. */
body[data-page-type=barnes] .header__logo.header__logo--main img {
width: 140px !important;
height: auto !important;
}
}
body[data-page-type=synventive] #mega-menu a {
color: #000;
}
body[data-page-type=synventive] #mega-menu a:hover {
color: #332882;
}
.header__language-switcher-desktop-wrap {
position: absolute;
top: 9px;
left: 0;
right: 0;
max-width: 1516px;
margin: 0 auto;
}
.header__language-switcher-desktop {
max-width: 300px;
float: right;
display: flex;
width: auto;
padding-right: 26px;
position: relative;
top: 15px;
}
header.on_scroll .header__language-switcher-desktop {
z-index: -1;
display: none;
}
.header__language-switcher-desktop-wrap .header__language-switcher .lang_list_class {
border: none;
text-align: center;
right: -50px;
top: 40px;
visibility: hidden;
opacity: 0;
}
.header__language-switcher-desktop-wrap .header__language-switcher:hover .lang_list_class {
visibility: visible;
opacity: 1;
}
.header__language-switcher-desktop-wrap .header__language-switcher--label-current {
color: #fff;
letter-spacing: .5px;
font-size: 16px;
display: flex;
padding-bottom: 22px;
}
.header__language-switcher-desktop-wrap .header__language-switcher--label-current:after {
border: none;
background-image: url('data:image/svg+xml,');
width: 20px;
height: 20px;
margin-top: -6px;
margin-left: 3px;
}
.header__language-switcher-desktop-wrap .header__language-switcher .lang_switcher_class {
min-width: auto;
}
@media (min-width: 1800px) {
.header__language-switcher-desktop-wrap {
max-width: 1790px;
}
}
@media (max-width: 1025px) {
.header__language-switcher-desktop-wrap {
display: none;
}
}
.header__language-switcher-mobile {
width: 100%;
padding: 0;
max-width: 100%;
float: none;
}
.header__language-switcher-mobile-wrap .header__language-switcher--label-current {
display: flex;
font-size: 18px;
color: #141844;
font-weight: 500;
margin-left: 16px;
position: absolute;
top: 0;
}
.header__language-switcher-mobile-wrap .header__language-switcher .lang_switcher_class {
min-width: auto;
position: static;
}
.header__language-switcher-mobile-wrap .header__language-switcher .lang_list_class {
opacity: 0;
visibility: hidden;
}
.header__language-switcher-mobile-wrap .header__language-switcher-mobile-wrap {
border-bottom: 1px solid #e1dfe3;
padding-bottom: 15px;
position: relative;
}
.header__language-switcher-mobile-wrap .header__language-switcher .lang_list_class {
margin-top: 35px;
right: 0;
left: 57px;
position: relative;
}
.header__language-switcher .lang_list_class {
left: calc(100% - 78px);
}
.header__language-switcher-mobile-wrap .header__language-switcher .lang_switcher_class {
position: relative;
}
.header__language-switcher-mobile-wrap .header__language-switcher:hover .lang_list_class {
display: block;
opacity: 1;
visibility: visible;
}
span.show-for-sr {
display: none;
}
.contact-us-form-cm__content>*+*{
margin-top: 0!important;
}
.no-link, .no-link a{
pointer-events: none;
}
@media (min-width: 768px) {
.container.with-lines {
margin: 0 auto;
max-width: 1515px;
}
}
.dnd_area-row-4-max-width-section-centering > .row-fluid{
padding-left: var(--theme-global-section-padding);
padding-right: var(--theme-global-section-padding);
}
@media (min-width: 1024px) {
.dnd_area-row-4-max-width-section-centering > .row-fluid
{
padding-left: var(--theme-global-section-padding_tablet);
padding-right: var(--theme-global-section-padding_tablet);
}
}
@media (min-width: 1440px) {
.t-padding,
.dnd_area-row-4-max-width-section-centering > .row-fluid {
padding-left: var(--theme-global-section-padding_desktop);
padding-right: var(--theme-global-section-padding_desktop);
}
}
@media (min-width: 1515px) {
.inner-wrapper {
padding-left: var(--theme-global-section-padding_desktop);
padding-right: var(--theme-global-section-padding_desktop);
}
}
@media (min-width: 1900px) {
.container.with-lines {
max-width: 1515px;
}
header .deco-ines {
height: 100%;
}
}
@media (max-width: 767px) {
.row-fluid{
display: block;
}
}
.blog-section.author-page{
padding-top: 200px;
}
/* Update 17/09/25 */
#nav-container .deco-ines, #nav-container .header__logo.header__logo--main {
z-index: 5;
}
.header__logo.header__logo--main {
position: relative;
overflow: visible;
}
body[data-page-type="barnes"] .logo-companies li a {
/* Center the framed brand image horizontally within the dropdown column
to match the symmetric layout the client requested. Vertical padding
14px keeps breathing room between items. */
padding: 14px 0;
display: flex;
justify-content: center;
}
/* Spectrix dropdown brand images: cap at 120px so they match the size used
on brand subpages (Manner, Foboha, etc.). Without this cap the images
scaled up to ~140-181px on desktop and looked oversized vs the brand pages. */
body[data-page-type="barnes"] .header__logo.header__logo--main .logo-companies img {
max-width: 120px !important;
}
body[data-page-type="barnes"] .logo-wrapper:hover li:not(:last-child),
body:not([data-page-type="barnes"]) .logo-companies:hover li:not(:last-child){
border-bottom: 1px solid #E1DFE3;
}
.logo-companies li a:hover {
background-color: #E1DFE3;
}
/* Frame the dropdown container so it remains visible on light/white page
backgrounds (without a colored hero behind the nav). Thin 1px outline
on the closed state + elevation shadow when expanded so the open
dropdown reads as a popup card rather than floating text on white. */
.logo-companies {
border: 1px solid #e1dfe3;
}
/* Elevation shadow when the dropdown opens. Scope wrapper/header-logo hover
triggers to barnes (Spectrix home) only — on brand subpages, hovering
the SPECTRIX logo on the left must not phantom-trigger the brand
trigger. Direct `.logo-companies:hover` stays cross-page. `body[data-
page-type]` matches all pages and gives the rule specificity 0,3,1 so
the box-shadow lands above the base brand-subpage `.logo-companies`
rule (0,2,1). */
body[data-page-type] .logo-companies:hover,
body[data-page-type="barnes"] .logo-wrapper:hover .logo-companies,
body[data-page-type="barnes"] .header__logo--main:hover .logo-companies {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* Brand subpages: hide the dropdown frame's bottom border in the closed
state. The frame ends a few px above the nav-container's own border-
bottom, so the frame's bottom edge appeared as a stray thin line right
under the brand trigger. On hover (expanded), bring the bottom border
back so the popup card reads as closed at the bottom. */
body:not([data-page-type="barnes"]) .logo-companies {
border-bottom: none;
}
body:not([data-page-type="barnes"]) .logo-companies:hover {
border-bottom: 1px solid #e1dfe3;
}
/* Spectrix home (barnes) at desktop: the dropdown is positioned BELOW the
trigger (not wrapping it), so the always-on border shows as a thin 2px
horizontal line just under SPECTRIX in the closed state. Hide it there
and only paint the frame when the dropdown is hovered/open. */
@media (min-width: 1025px) {
body[data-page-type="barnes"] .logo-companies {
border: none;
}
body[data-page-type="barnes"] .logo-wrapper:hover .logo-companies,
body[data-page-type="barnes"] .header__logo--main:hover .logo-companies,
body[data-page-type="barnes"] .logo-companies:hover {
border: 1px solid #e1dfe3;
/* Skip the top edge — it would stack with the nav-container's existing
border-bottom at the same y, producing a visibly thicker line above
the first dropdown item compared to the inter-item dividers. */
border-top: none;
}
}
.logo-companies ul {
padding: 0;
margin-bottom: 0;
list-style: none;
/* display: flex makes whitespace text nodes between s collapse without
creating flex items, which is what we use instead of font-size:0 on
to neutralise Safari's anonymous whitespace line-boxes (font-size:0 had
a side effect of dropping intrinsic height in some configurations). */
display: flex;
flex-direction: column;
}
.logo-companies li {
list-style: none;
margin: 0;
padding: 0;
}
.logo-companies {
min-width: 178px;
}
.menu-button-wrap .menu-button-text {
height: 80px;
display: flex;
align-items: center;
}
#nav-container .menu-button-text .button {
height: 80px;
display: block;
line-height: 2;
color: #fff;
background-color: #332882;
}
.menu-button-text .button:hover {
color: #332882;
background-color: #fff;
}
.manner-header #nav-container .menu-button-text .button {
color: #fff;
background-color: #332882; */
}
.manner-header .menu-button-text .button:hover {
color: #332882;
background-color: #fff;
}
.thermoplay-header #nav-container .menu-button-text .button {
color: #fff;
background-color: #332882;
}
.thermoplay-header .menu-button-text .button:hover {
color: #332882;
background-color: #fff;
}
.foboha-header #nav-container .menu-button-text .button {
color: #fff;
background-color: #332882;
}
.foboha-header .menu-button-text .button:hover {
color: #332882;
background-color: #fff;
}
.gammaflux-header #nav-container .menu-button-text .button {
color: #fff;
background-color: #332882;
}
.gammaflux-header .menu-button-text .button:hover {
color: #332882;
background-color: #fff;
}
.priamus-header #nav-container .menu-button-text .button {
color: #fff;
background-color: #332882;
}
.priamus-header .menu-button-text .button:hover {
color: #332882;
background-color: #332882;
}
.synventive-header #nav-container .menu-button-text .button {
color: #fff;
background-color: #332882;
}
.synventive-header .menu-button-text .button:hover {
color: #332882;
background-color: #332882;
}
.header__language-switcher.header--element.header__language-switcher-desktop {
float: none;
margin: 0;
padding: 0;
max-width: none;
width: auto;
margin-right: 21px;
display: flex;
align-items: center;
padding-top: 0;
}
.header__language-switcher-desktop-wrap {
left: inherit;
right: 0;
left: 0;
justify-content: flex-start;
top: 0px;
position: fixed;
z-index: 3;
display: flex;
position: relative;
max-width: 157px;
min-width: auto;
width: auto;
margin: 0;
}
.header__language-switcher-desktop-wrap .header__language-switcher--label-current {
color: #141844;
display: flex;
align-items: center;
}
.header__language-switcher-desktop-wrap .header__language-switcher--label-current:after {
content: none;
}
.header__language-switcher .lang_list_class li:last-child {
padding: 0;
}
.header__language-switcher-desktop-wrap .header__language-switcher .lang_list_class {
right: 0;
top: 35px;
margin-left: 50px;
box-shadow: none;
}
header.on_scroll .header__language-switcher-desktop {
display: flex;
z-index: 2;
}
.header__navigation.header--element .menu-button-wrap {
padding: 0;
align-content: center;
justify-content: center;
background-color: #332882;
height: auto;
min-height: auto;
margin-bottom: 10px
}
.header__navigation.header--element .menu-button-wrap .menu-button-text {
height: auto;
color: #fff;
}
.header__navigation.header--element .menu-button-wrap .menu-button-text a {
color: #fff !important;
padding: 16px 24px;
display: block;
}
.header__language-switcher .lang_list_class li a, .header__language-switcher-label-current, .header__logo .logo-company-name, body .navigation-primary .submenu a {
color: #141844;
font-weight: 400;
}
body .header__language-switcher .lang_list_class li a:active, body .header__language-switcher .lang_list_class li a:hover {
background-color: #E1DFE3;
}
.menu-button-mega-mobile {
padding: 20px 24px;
border-left: 1px solid #E1DFE3;
margin: 0;
}
.menu__wrapper li {
border-bottom: 1px solid #E1DFE3;
padding: 17.5px 16px;
}
.span12.widget-span.widget-type-cell:empty,
.span12.widget-span.widget-type-cell:not(:has(*)) {
display: none;
}
body[data-page-type=barnes] .logo-desktop {
min-width: 160px;
}
.no-mobile-nav .menu-button-wrap {
display: flex;
}
@media (max-width: 1024px) {
span.logo-mobile {
display: flex;
align-items: center;
}
.logo-mobile:after {
content: "";
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI4NC45IDI4NC45Ij48cGF0aCBkPSJtMjgyIDc2LjUtMTQuMi0xNC4zYTkgOSAwIDAgMC0xMy4xIDBMMTQyLjUgMTc0LjQgMzAuMyA2Mi4yYTkgOSAwIDAgMC0xMy4yIDBMMyA3Ni41YTkgOSAwIDAgMCAwIDEzLjFsMTMzIDEzM2E5IDkgMCAwIDAgMTMuMSAwbDEzMy0xMzNhOSA5IDAgMCAwIDAtMTN6Ii8+PC9zdmc+);
width: 14px;
height: 17px;
display: flex;
background-repeat: no-repeat;
background-size: contain;
margin-left: 8px;
margin-right: 5px;
}
.logo-companies {
top: 0;
max-width: 164px;
width: 100%;
min-width: 164px;
padding-top: 48px;
}
.logo-companies ul {
padding-top: 11px;
}
/* Spectrix-only: at <=1024px the nav-container is 59px tall (not 79px).
Match the dropdown frame to nav height so:
- closed state: frame fills the trigger row exactly (no visible
band below SPECTRIX, chevron centred without clipping the border)
- open state: ul (and first item) start flush with the nav bottom
line (`tam çizgide`)
Widen max-width slightly so the chevron has breathing room from the
right edge — paired with the chevron margin-right rule below. */
body[data-page-type="barnes"] .logo-companies {
padding-top: 57px;
max-width: 190px;
/* The frame's top border sits flush with the iOS Safari viewport edge
and reads as a stray horizontal line above the SPECTRIX trigger.
Drop the top edge so the frame is open at the top. */
border-top: none;
}
body[data-page-type="barnes"] .logo-companies ul {
padding-top: 0;
}
body[data-page-type=barnes] .header__logo.header__logo--main .logo-companies img {
max-width: 120px !important;
}
/* Brand subpages mobile: cap brand image width so the framed logo + chevron
fit within the 164px dropdown column. Without this, the image fills the
full container and the chevron overflows to the right (visible "taşma"). */
body:not([data-page-type="barnes"]) .header__logo.header__logo--main .logo-companies img {
max-width: 120px !important;
}
.header__logo.header__logo--main .logo-companies img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
/* image-rendering: crisp-edges was forcing nearest-neighbor scaling on
anti-aliased PNG brand logos, making them look jaggy. Default
(auto) lets the browser use high-quality bilinear downscaling. */
image-rendering: auto;
/* The compositor-layer hack below is required in Safari: without it,
the brand ![]()
s inside this flex container occasionally render at
0x0 (known WebKit flex-image sizing bug). Chrome doesn't need it
but keeping it doesn't hurt rendering there. */
backface-visibility: hidden;
transform: translateZ(0);
}
.logo-companies li a {
padding-left: 18px;
}
.logo-companies:hover, .header__logo--main:hover .logo-companies, body[data-page-type=barnes] .header__logo--main:hover .logo-companies {
height: auto;
transition: .5s;
top: 0;
padding-top: 48px;
}
/* Spectrix home mobile hover: keep the trigger area the same height in
hovered/open state as in closed state (57px). Without this override
the general hover rule above shrinks the trigger area to 48px which
makes the SPECTRIX wordmark sit shorter than the nav row. */
body[data-page-type="barnes"] .logo-companies:hover,
body[data-page-type="barnes"] .header__logo--main:hover .logo-companies {
padding-top: 57px;
}
}
@media (min-width: 768px) {
body[data-is-lp=true] #nav-container {
min-height: auto;
}
}
@media (min-width: 1024px) {
.logo-desktop:after {
content: "";
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI4NC45IDI4NC45Ij48cGF0aCBkPSJtMjgyIDc2LjUtMTQuMi0xNC4zYTkgOSAwIDAgMC0xMy4xIDBMMTQyLjUgMTc0LjQgMzAuMyA2Mi4yYTkgOSAwIDAgMC0xMy4yIDBMMyA3Ni41YTkgOSAwIDAgMCAwIDEzLjFsMTMzIDEzM2E5IDkgMCAwIDAgMTMuMSAwbDEzMy0xMzNhOSA5IDAgMCAwIDAtMTN6Ii8+PC9zdmc+);
width: 14px;
height: 14px;
display: flex;
background-repeat: no-repeat;
background-size: contain;
margin-left: 8px;
}
.logo-desktop {
display: flex;
align-items: center;
z-index: 5;
}
.logo-companies li a {
padding-left: 30px;
}
.logo-companies {
max-width: 181px;
}
.menu-button-mega-tablet {
display: none;
}
.menu-button-wrap {
display: none;
}
}
@media (min-width: 1279px) {
.header__logo.header__logo--main, .menu-button-wrap, .deco-ines, .deco-ines > div, .deco-ines > div > span, .deco-ines span#hs_cos_wrapper_menu {
height: 78px !important;
}
body .menu-button-wrap {
justify-content: end;
margin-top: -1px;
}
.menu-button-wrap .menu-button-text, .menu-button-wrap .menu-button-text>div,#nav-container .menu-button-text .button {
width: 100%;
}
}
@media (min-width: 1900px) {
.header__logo.header__logo--main img {
width: 140px !important;
}
body .menu-button-wrap {
justify-content: start;
}
.logo-companies {
min-width: 193px;
}
}
@media (max-width: 1024px) {
body[data-page-type=barnes] .header__logo.header__logo--main img {
display: block;
}
.menu-button-wrap {
display: none;
}
.header__navigation.header--element .menu-button-wrap {
display: flex;
}
.logo-wrapper {
display: flex;
align-items: center;
}
.logo-desktop.has-link {
display: none;
}
span.logo-mobile {
display: flex;
align-items: center;
z-index: 5;
}
.header__logo.header__logo--main {
z-index: 5;
}
.no-mobile-nav .menu-button-wrap {
display: flex;
align-content: center;
align-items: center;
line-height: 1px;
}
#nav-container .menu-button-text .button, .menu-button-wrap .menu-button-text {
height: 58px;
padding: 13px 24px;
}
.menu-button-wrap .menu-button-text {
padding: 0;
}
button.menu__child-toggle {
margin-top: -13px;
}
}
@media (min-width: 1279px) {
.header__language-switcher-desktop-wrap .header__language-switcher .lang_list_class {
right: 0;
margin-left: 48px;
min-width: 100px;
padding-top: 11px;
}
}
.header__language-switcher-desktop-wrap {
margin-top: 0;
}
@media (min-width: 1024px){
.header__language-switcher-desktop-wrap {
align-items: flex-start;
margin-top: -15px;
}
.header__language-switcher.header--element.header__language-switcher-desktop {
align-items: flex-start;
align-content: flex-start;
padding: 0;
}
.header__navigation.header--element .menu-button-wrap {
display: flex;
}
.logo-companies ul {
padding-top: 0;
}
}
@media (min-width: 1279px) {
.logo-companies ul {
padding-top: 0;
}
}
@media (min-width: 1900px){
.header__language-switcher--label {
padding-right: 62px;
}
.header__language-switcher-desktop-wrap .header__language-switcher .lang_list_class {
margin: 0;
width: 100%;
}
.header__language-switcher.header--element.header__language-switcher-desktop {
margin-right: -4px;
}
.header__language-switcher .lang_list_class li a, .header__language-switcher-label-current, .header__logo .logo-company-name, body .navigation-primary .submenu a {
margin-left: -15px;
}
}
@media (max-width: 1399px) {
.menu-button-wrap {
display: none;
}
.no-mobile-nav .menu-button-wrap {
display: flex;
}
}
@media (max-width: 1278px) {
.menu-button-mega-mobile {
display: flex;
}
}
.menu-button-wrap .menu-button-text>div, .menu-button-wrap .menu-button-text {
width: 100%;
text-align: center;
}
.manner-header .header__navigation.header--element .menu-button-wrap {
background-color: #332882;
}
.thermoplay-header .header__navigation.header--element .menu-button-wrap {
background-color: #332882;
}
.foboha-header .header__navigation.header--element .menu-button-wrap {
background-color: #332882;
}
.gammaflux-header .header__navigation.header--element .menu-button-wrap {
background-color: #332882;
}
.priamus-header .header__navigation.header--element .menu-button-wrap {
background-color: #332882;
}
.synventive-header .header__navigation.header--element .menu-button-wrap {
background-color: #332882;
}
.show-nav .header .bg {
display: none;
}
#nav-container .deco-ines {
border-right: none;
border-left: none;
}
.menu__child-toggle-icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI4NC45IDI4NC45Ij48cGF0aCBkPSJtMjgyIDc2LjUtMTQuMi0xNC4zYTkgOSAwIDAgMC0xMy4xIDBMMTQyLjUgMTc0LjQgMzAuMyA2Mi4yYTkgOSAwIDAgMC0xMy4yIDBMMyA3Ni41YTkgOSAwIDAgMCAwIDEzLjFsMTMzIDEzM2E5IDkgMCAwIDAgMTMuMSAwbDEzMy0xMzNhOSA5IDAgMCAwIDAtMTN6Ii8+PC9zdmc+");
background-size: contain;
margin-right: 0;
height: 8px;
width: 8px;
}
.menu__item--open>.menu__child-toggle .menu__child-toggle-icon {
transform: rotate(180deg);
}
button.menu__child-toggle {
padding-right: 0;
margin-top: -7px;
}
/* custom lang switcher */
.custom-lang-switcher ul {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
left: 0;
right: 0;
}
.custom-lang-switcher li {
height: 0;
overflow: hidden;
background: #fff;
}
.custom-lang-switcher li:first-child {
height: auto;
}
.custom-lang-switcher {
display: flex;
align-items: center;
position: relative;
width: 76px;
min-width: 76px;
max-width: 76px;
text-transform: uppercase;
}
.custom-lang-switcher ul a {
color: #141844;
text-decoration: none;
font-size: 18px;
padding: 10px;
display: flex;
padding-right: 21px;
align-items: center;
flex-wrap: nowrap;
}
span.lang-flag-debug{
display: block;
min-width: fit-content;
}
.custom-lang-switcher ul a img {
margin-right: 8px;
flex-shrink: 0;
}
.custom-lang-switcher:hover li {
height: auto;
border-bottom: 1px solid #E1DFE3;
}
.custom-lang-switcher li:hover {
background-color: #E4DFE3;
}
.custom-lang-switcher:hover ul {
top: 0;
}
.custom-lang-switcher li:first-child a {
min-height: 52px;
align-items: center;
}
@media (min-width: 1279px) {
.custom-lang-switcher li:first-child a {
min-height: 77px;
}
}
@media (min-width: 1900px) {
custom-lang-switcher {
width: 100px;
}
}
/* brands - logo dropdowns
NOTE: previously this rule used `overflow: auto; max-height: 100vh` on the open
dropdown UL. Safari mobile computes 100vh including the URL bar (Chrome doesn't),
so the brand list exceeded the limit slightly and triggered a stray scrollbar
inside the dropdown. Let the UL flow naturally — if the list ever exceeds the
viewport, the document scroll handles it. */
.logo-companies:hover ul {
overflow: visible;
}
body:not([data-page-type="barnes"]) .logo-wrapper {
display: flex;
align-items: center;
}
body:not([data-page-type="barnes"]) .logo-wrapper img {
width: 150px !important;
}
body:not([data-page-type="barnes"])
.header__logo.header__logo--main
.logo-companies a img {
max-height: 60px !important;
width: auto !important;
display: flex;
align-content: center;
}
body:not([data-page-type="barnes"]) .logo-companies {
position: relative;
padding: 0;
top: -1px;
position: absolute;
left: 70px;
border-left: 1px solid #e1dfe3;
/* Fixed height (not min-height) so the closed dropdown box matches the
visible trigger exactly. min-height let the white background grow
when sibling rules briefly expanded the container, causing the visible
"taşma" (overflow) the client flagged on brand mobile. */
height: 59px;
max-width: 130px;
}
/* Burger-menu-open compensation: opening the mobile menu adds `.show-nav`
to and that reflows `.nav-container-inner` (flex) — the header
row was shrinking from 59px to 54px, pulling the brand logos up ~5px.
Pin the header chain to its original height when burger is open so the
logos stay vertically centered where they were. Apply to both Spectrix
home (barnes) and brand subpages. */
body.show-nav #nav-container,
body.show-nav .nav-container-inner,
body.show-nav .header__logo.header__logo--main {
height: 59px;
min-height: 59px;
}
body.show-nav .logo-companies {
height: 59px;
}
body[data-page-type="barnes"].show-nav .logo-companies {
padding-top: 57px;
}
body:not([data-page-type="barnes"]) .header__logo.header__logo--main {
max-width: 200px;
width: 100% !important;
position: relative;
}
body:not([data-page-type="barnes"]) span.logo-mobile {
max-width: 28px;
}
body:not([data-page-type="barnes"]) .logo-companies ul {
padding: 0;
margin: 0;
max-width: 160px;
position: relative;
z-index: 3;
min-height: 59px;
}
/* Brand subpages mobile: at <=1024px the .logo-companies frame is forced to
164px (min-width) but the ul base rule above caps at 160px — leaving a
3-4px white strip on the right where the hover background doesn't reach.
Let the ul fill the frame's content area at this breakpoint. */
@media (max-width: 1024px) {
body:not([data-page-type="barnes"]) .logo-companies ul {
max-width: 100%;
}
}
body:not([data-page-type="barnes"]) .logo-companies li a {
/* Center the framed brand image within the dropdown column. The chevron
on the first item is positioned absolutely (see :after rule below) so
it doesn't shift the image leftward via flex layout. */
padding: 14px 0;
position: relative;
display: flex;
justify-content: center;
}
body:not([data-page-type="barnes"]) .logo-companies li {
height: 0px;
overflow: hidden;
display: block;
}
body:not([data-page-type="barnes"]) .logo-companies:hover li {
height: auto;
}
body:not([data-page-type="barnes"]) .logo-companies li:first-child {
height: auto;
padding: 0;
}
/* Brand subpages: hide the stray vertical line on the right side of the
.logo-companies frame at all viewports. The right border read as a
separator between the brand trigger and the rest of the nav and the
client asked for it gone. */
body:not([data-page-type="barnes"]) .logo-companies {
border-right: none;
}
@media (min-width: 1024px) and (max-width: 1278px) {
/* 1024-1278 only: the .header__logo--main border-right is visible
across all page types at this breakpoint (the >=1279px override
that hides it doesn't apply yet). Remove it for every page so the
brand subpage stops showing a double right line and Spectrix home
stops showing a stray vertical divider on the right of its logo. */
#nav-container .header__logo.header__logo--main {
border-right: none;
}
/* Tighten the brand subpage trigger anchor's vertical padding so the
brand logo lines up with the Spectrix wordmark on its left. */
body:not([data-page-type="barnes"]) .logo-companies li:first-child a {
padding: 10px 0;
}
}
@media (max-width: 1024px) {
/* Brand subpages mobile: tighten the brand logo vertical padding so the
framed brand image sits centred inside the 59px-tall nav row. The base
`padding: 14px 0` left ~9px gaps that visually pushed the logo low
relative to the compact Spectrix mark on the left. */
body:not([data-page-type="barnes"]) .logo-companies li a {
padding: 9px 0;
}
}
body:not([data-page-type="barnes"]) .logo-companies li:first-child a {
/* Inherit the same padding as other dropdown items so the framed brand
logo at the top lines up horizontally with the brand boxes below it.
Previously this overrode padding to 0 + special image padding, which
was needed when the trigger was just text. Now that the trigger is a
framed box (same as the dropdown items), it should match their layout. */
display: flex;
align-items: center;
}
body[data-page-type="barnes"] .header__logo.header__logo--main:hover li:not(:first-child),
body[data-page-type="barnes"] .header__logo.header__logo--main:hover li{
border-bottom: 1px solid #E1DFE3;
}
body[data-page-type="barnes"] .header__logo.header__logo--main:hover li:first-child{
border-top: 1px solid #E1DFE3!important;
}
body:not([data-page-type="barnes"]) .header__logo--main:hover,
body:not([data-page-type="barnes"]) .header__logo--main:hover .logo-companies {
z-index: 4;
}
body:not([data-page-type="barnes"]) .logo-companies li:first-child a:after {
content: "";
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI4NC45IDI4NC45Ij48cGF0aCBkPSJtMjgyIDc2LjUtMTQuMi0xNC4zYTkgOSAwIDAgMC0xMy4xIDBMMTQyLjUgMTc0LjQgMzAuMyA2Mi4yYTkgOSAwIDAgMC0xMy4yIDBMMyA3Ni41YTkgOSAwIDAgMCAwIDEzLjFsMTMzIDEzM2E5IDkgMCAwIDAgMTMuMSAwbDEzMy0xMzNhOSA5IDAgMCAwIDAtMTN6Ii8+PC9zdmc+);
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-size: cover;
/* Absolute positioning so the chevron doesn't take flex space — that lets
the framed brand image stay perfectly centered, just like the items
below in the dropdown. Sits near the right edge of the at mid-height. */
position: absolute;
right: 5px;
top: 50%;
margin-top: -7px;
transition: transform 0.3s ease;
animation: nav-arrow-bounce 2s ease-in-out 6;
}
body[data-page-type="thermoplay"] .logo-companies li:first-child a:after,
body[data-page-type="gammaflux"] .logo-companies li:first-child a:after{
margin-left: 8px!important;
}
@media (min-width: 1900px) {
/* Brand subpages: push the bouncing chevron 14px in from the right edge
of the trigger anchor (default is 5px). Larger frame at >=1900px lets
us breathe more space between the brand image and the chevron. */
body:not([data-page-type="barnes"]) .logo-companies li:first-child a:after {
right: 14px;
}
}
body .logo-companies li:first-child a:after,
.logo-desktop:after{
transition: transform 0.3s ease;
animation: nav-arrow-bounce 2s ease-in-out 6;
}
@keyframes nav-arrow-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
body:not([data-page-type="barnes"]) .logo-desktop:after, body:not([data-page-type="barnes"]) .logo-mobile:after {
display: none;
}
@media (min-width: 1024px) {
body:not([data-page-type="barnes"]) .header__logo.header__logo--main {
max-width: 380px;
}
body:not([data-page-type="barnes"]) .logo-companies {
width: auto;
left: 192px;
max-width: 160px;
padding: 0;
}
body:not([data-page-type="barnes"]) .no-mobile-nav .logo-companies {
min-height: 80px;
}
body:not([data-page-type="barnes"]) .header__logo.header__logo--main .logo-companies img {
max-width: 120px !important;
width: auto !important;
/* margin-left: 20px removed — it was pushing every brand image 20px to
the right, which (combined with the chevron taking flex space on the
first item only) caused the current-brand box to sit 11px LEFT of the
other framed boxes in the dropdown. Letting images flex-start at 0
keeps all of them on the same vertical line. */
image-rendering: auto;
}
/* first-child a img / a:after special positioning removed — base rules now
handle this correctly because the trigger is a framed box, same as the
dropdown items. */
body:not([data-page-type="barnes"]) .logo-companies ul {
max-width: 193px;
width: 100%;
}
/* padding-left: 10px override removed — base rule now sets horizontal
padding to 0 so brand images touch the dropdown edge. */
}
@media (max-width: 1024px) {
body:not([data-page-type="barnes"]) .header__logo--main:hover .logo-companies {
padding-top: 0;
}
}
@media (min-width: 1279px) {
body:not([data-page-type="barnes"]) .logo-companies {
min-height: 75px;
}
body:not([data-page-type="barnes"]) .logo-companies li:first-child a {
min-height: 77px;
}
/* first-child padding overrides removed — base rules now keep the framed
trigger aligned with the dropdown items. */
#nav-container .deco-ines {
width: 100%;
max-width: 100%;
}
.mega-menu-item-wrap.mega-menu-item-wrap-top .mega-menu-top-link {
min-height: 79px;
}
.mega-menu-menu {
top: 79px;
}
.mega-menu-item .mega-menu-top-link {
min-width: auto;
padding: 0 20px;
}
.mega-menu-item-wrap.mega-menu-item-wrap-top {
justify-content: center;
}
}
.menu-button-text .button {
font-size: 15px !important;
}
.multiple-box-cm__content {
overflow: hidden;
}
.no-mobile-nav .menu-button-wrap {
flex-grow: 0 !important;
}
body #hs-eu-cookie-confirmation #hs-eu-confirmation-button,
body #hs-eu-cookie-confirmation #hs-eu-cookie-settings-button,
body #hs-eu-cookie-confirmation #hs-eu-decline-button {
font-family: Roboto Condensed;
font-size: 16px;
font-style: normal;
font-weight: 700;
padding: 15px 32px;
text-decoration: none;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
}
body[data-page-type="barnes"] #hs-eu-cookie-confirmation #hs-eu-confirmation-button {
background-color: #141844;
color: #fff;
border-color: #141844;
}
body[data-page-type="manner"] #hs-eu-cookie-confirmation #hs-eu-confirmation-button {
background-color: #332882;
color: #fff;
border-color: #332882;
}
body[data-page-type="thermoplay"] #hs-eu-cookie-confirmation #hs-eu-confirmation-button {
background-color: #332882;
color: #fff;
border-color: #332882;
}
body[data-page-type="gammaflux"] #hs-eu-cookie-confirmation #hs-eu-confirmation-button {
background-color: #332882;
color: #fff;
border-color: #332882;
}
body[data-page-type="priamus"] #hs-eu-cookie-confirmation #hs-eu-confirmation-button {
background-color: #332882;
color: #fff;
border-color: #332882;
}
body[data-page-type="synventive"] #hs-eu-cookie-confirmation #hs-eu-confirmation-button {
background-color: #332882;
color: #fff;
border-color: #332882;
}
body[data-page-type="foboha"] #hs-eu-cookie-confirmation #hs-eu-confirmation-button {
background-color: #332882;
color: #fff;
border-color: #332882;
}
/* Blog post body width — widen content from 600px to 988px (parent theme caps body/header/meta/featured-image at 600px on >=768px) */
@media (min-width: 768px) {
.blog-post__body,
.blog-post__featured-image,
.blog-post__header,
.blog-post__meta {
max-width: 988px;
}
}
/* Blog post width on very large screens — widen to 1488px (parent .blog-post caps at 960px, parent inner blocks at 1518px on >=1900px) */
@media (min-width: 1900px) {
.blog-post,
.blog-post__body,
.blog-post__featured-image,
.blog-post__header,
.blog-post__meta {
max-width: 1488px;
}
}
/* Tighten the gap between the heading and the body, and hide empty meta blocks */
.blog-post__header-wrap {
padding-bottom: 0;
margin-bottom: 32px;
}
.blog-post__meta_section {
margin-top: 12px;
}
.blog-post__meta {
margin-bottom: 0;
padding-bottom: 0;
}
.blog-post__meta_section:empty,
.blog-post__meta_section .next-meta-section:empty,
.blog-post__meta_section .date-meta:empty,
.blog-post__meta_section .blog-post__tags:empty {
display: none;
}
/* Manner footer: keep the logos strip on a white background regardless of the module's default colour. The module emits an inline style="background-color: …" so we need !important to override. Will revisit per-brand colour after Spectrix client sign-off. */
body[data-page-type="manner"] .cm-wrapper.logos-colored {
background-color: #fff !important;
}
/* The white-on-white separator gradient is invisible on Manner's logos strip, so swap to a subtle dark line */
body[data-page-type="manner"] .cm-wrapper.logos-colored::before {
background: linear-gradient(to right, transparent, rgba(20, 24, 68, 0.15), transparent);
}
/* Manner pages: the global body background is rgba(255,255,255,0.85), which lets the underlying slate-50 (#F8FAFC) bleed through and tints the header gray. Force a solid white header here so the nav matches the language switcher. */
body[data-page-type="manner"] header.header {
background: #fff;
}
/* Spectrix (barnes) pages: same root cause as Manner — body's translucent white lets the slate-50 underneath bleed through, tinting the nav. Force solid white. */
body[data-page-type="barnes"] header.header {
background: #fff;
}
/* === 1- modules pill buttons (Asana: "CTA and other Buttons > Pill Format") ===
All page-content CTAs and link-style buttons get a 10px corner radius
regardless of brand variant. `!important` here is intentional — many
per-brand rules earlier in this file explicitly set `border-radius: 0`
at higher specificity (e.g. `body[data-page-type="..."] .button-component[data-type="..."]`),
so an unweighted rule wouldn't win.
Nav-container is explicitly opted out so the colored Contact CTA in the
header and any brand-dropdown trigger buttons stay sharp. */
.button-component,
.cta_button,
a.button,
button.button,
form input[type=submit],
form button[type=submit],
.hs-button {
border-radius: 10px !important;
}
#nav-container .button-component,
#nav-container .cta_button,
#nav-container a.button,
#nav-container button.button,
#nav-container .hs-button {
border-radius: 0 !important;
}