:root {
--gs-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
--gs-font-heading: var(--gs-font-main);
--gs-font-body: var(--gs-font-main);
--gs-font-mono: var(--gs-font-main); --gs-blue: #2090D0;
--gs-blue-nav: #1678CE;
--gs-blue-dark: #126DA3;
--gs-blue-deep: #0D4F78;
--gs-blue-soft: #EBF6FC;
--gs-blue-border: #BEE3F8;
--gs-orange: #F07020;
--gs-orange-dark: #D65A0E;
--gs-orange-soft: #FFF4EC;
--gs-orange-border: #FBD3B6;
--gs-teal: #0D9488;
--gs-teal-soft: #F0FDFA; --gs-bg-page: #F5FAFE;
--gs-bg-white: #FFFFFF;
--gs-text-main: #0A0A0A;
--gs-text-body: #353535;
--gs-text-muted: #666666;
--gs-border: #DCE9F5;
--gs-border-light: #E9F2FA;
}
*, *::before, *::after {
box-sizing: border-box;
}
body.gs-demo-body {
margin: 0;
padding: 0;
font-family: var(--gs-font-main);
font-size: 14.5px;
color: var(--gs-text-body);
background-color: var(--gs-bg-page);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body.gs-demo-body a {
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.gs-container {
width: 100%;
max-width: 1360px;
margin: 0 auto;
padding: 0 20px;
} .gs-demo-switcher {
position: sticky;
top: 0;
z-index: 9999;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(8px);
color: var(--gs-text-main);
border-bottom: 1px solid var(--gs-blue-border);
box-shadow: 0 2px 12px rgba(22, 120, 206, 0.08);
padding: 6px 0;
font-size: 13px;
}
.gs-demo-switcher-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: nowrap;
}
.gs-demo-switcher-brand {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--gs-blue-deep);
white-space: nowrap;
font-size: 13px;
}
.gs-demo-pulse {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--gs-orange);
box-shadow: 0 0 0 3px rgba(240, 112, 32, 0.22);
display: inline-block;
flex-shrink: 0;
}
.gs-demo-switcher-tabs {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
}
.gs-demo-tab {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 6px;
font-weight: 700;
font-size: 12px;
background: var(--gs-blue-soft);
color: var(--gs-blue-deep) !important;
border: 1px solid var(--gs-blue-border);
transition: all 0.2s ease;
white-space: nowrap;
}
.gs-demo-tab:hover {
background: #D8EEFB;
border-color: var(--gs-blue);
}
.gs-demo-tab.is-active {
background: var(--gs-blue-nav);
color: #FFFFFF !important;
border-color: var(--gs-blue-dark);
box-shadow: 0 2px 8px rgba(22, 120, 206, 0.25);
}
.gs-demo-tab-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
background: #FFFFFF;
color: var(--gs-orange);
font-size: 11px;
font-weight: 700;
}
.gs-demo-tab.is-active .gs-demo-tab-num {
background: var(--gs-orange);
color: #FFFFFF;
}
.gs-demo-tab-orig {
background: var(--gs-orange-soft);
border-color: var(--gs-orange-border);
color: var(--gs-orange-dark) !important;
}
.gs-tab-lbl-mob {
display: none;
} @keyframes gsTopbarMarquee {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
}
.gs-topbar {
background: linear-gradient(90deg, #1678CE 0%, #2090D0 55%, #1678CE 100%);
color: #FFFFFF;
height: 34px;
display: flex;
align-items: center;
overflow: hidden;
font-size: 13px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.gs-topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: nowrap;
width: 100%;
height: 34px;
}
.gs-topbar-marquee-viewport {
flex: 1;
min-width: 0;
overflow: hidden;
position: relative;
height: 34px;
display: flex;
align-items: center;
mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
}
.gs-topbar-marquee-track {
display: inline-flex;
align-items: center;
white-space: nowrap;
width: max-content;
animation: gsTopbarMarquee 32s linear infinite;
}
.gs-topbar-marquee-viewport:hover .gs-topbar-marquee-track {
animation-play-state: paused;
}
.gs-topbar-marquee-group {
display: inline-flex;
align-items: center;
gap: 28px;
padding-right: 28px;
}
.gs-topbar-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: #FFFFFF;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.gs-topbar-item strong {
background: rgba(255, 255, 255, 0.22);
color: #FFFFFF;
padding: 1px 7px;
border-radius: 4px;
font-size: 11.5px;
font-weight: 700;
}
.gs-topbar-fixed-right {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
white-space: nowrap;
padding-left: 14px;
border-left: 1px solid rgba(255, 255, 255, 0.25);
font-size: 12.5px;
font-weight: 700;
}
.gs-topbar-fixed-right a {
color: #FFFFFF;
display: inline-flex;
align-items: center;
gap: 5px;
}
.gs-topbar-fixed-right a:hover {
color: #FFE4D1;
} .gs-header {
background: #FFFFFF;
border-bottom: 1px solid var(--gs-border);
box-shadow: 0 4px 16px rgba(22, 120, 206, 0.06);
position: relative;
z-index: 100;
}
.gs-header-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 12px 0;
}
.gs-brand {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
} .gs-brand-logo {
height: 98px !important;
width: auto !important;
max-width: 260px !important;
object-fit: contain;
}
.gs-brand-text {
display: flex;
flex-direction: column;
}
.gs-brand-company {
font-size: 12.5px;
font-weight: 700;
color: var(--gs-orange);
letter-spacing: 0.02em;
text-transform: uppercase;
margin-bottom: 2px;
}
.gs-brand-title {
font-weight: 700;
font-size: 20px;
color: var(--gs-blue-nav);
line-height: 1.2;
}
.gs-brand-sub {
font-size: 13px;
font-weight: 500;
color: var(--gs-text-muted);
margin-top: 2px;
}
.gs-header-search {
flex: 1;
max-width: 480px;
position: relative;
}
.gs-header-search-form {
display: flex;
align-items: center;
background: #FFFFFF;
border: 2px solid var(--gs-blue);
border-radius: 6px;
overflow: hidden;
height: 42px;
}
.gs-header-search-input {
flex: 1;
border: none;
background: transparent;
padding: 8px 14px;
font-size: 14px;
color: var(--gs-text-main);
outline: none;
font-family: var(--gs-font-main);
}
.gs-header-search-btn {
background: var(--gs-blue-nav);
color: #FFFFFF;
border: none;
height: 100%;
padding: 0 18px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.gs-header-search-btn:hover {
background: var(--gs-orange);
}
.gs-header-ctas {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.gs-hotline-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
border-radius: 8px;
background: var(--gs-blue-soft);
border: 1px solid var(--gs-blue-border);
}
.gs-hotline-icon {
width: 34px;
height: 34px;
border-radius: 6px;
background: var(--gs-blue-nav);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
}
.gs-hotline-info small {
display: block;
font-size: 12px;
color: var(--gs-text-body);
line-height: 1.15;
}
.gs-hotline-info strong {
font-size: 16px;
font-weight: 700;
color: #E50404;
}
.gs-btn-rfq-header {
background: var(--gs-orange);
color: #FFFFFF !important;
padding: 10px 16px;
border-radius: 6px;
font-weight: 700;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 7px;
border: none;
cursor: pointer;
box-shadow: 0 3px 10px rgba(240, 112, 32, 0.25);
white-space: nowrap;
}
.gs-btn-rfq-header:hover {
background: var(--gs-orange-dark);
} .gs-nav-bar {
background: var(--gs-blue-nav);
padding: 0;
position: relative;
z-index: 950;
box-shadow: 0 3px 10px rgba(13, 79, 120, 0.12);
}
.gs-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.gs-mob-menu-trigger {
display: none;
align-items: center;
gap: 6px;
background: var(--gs-blue-deep);
color: #FFFFFF !important;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.25);
padding: 10px 12px;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
.gs-nav-list {
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: nowrap;
flex: 1;
}
.gs-nav-list > li {
flex-shrink: 0;
position: relative;
}
.gs-nav-list > li.gs-has-mega {
position: static;
}
.gs-nav-list > li > a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 11px 16px;
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #FFFFFF !important;
white-space: nowrap;
border-right: 1px solid rgba(255, 255, 255, 0.16);
height: 100%;
}
.gs-nav-list > li:first-child > a {
border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.gs-nav-list > li > a:hover,
.gs-nav-list > li:hover > a,
.gs-nav-list > li > a.is-active,
.gs-nav-list > li > a.is-highlight {
background: var(--gs-orange);
color: #FFFFFF !important;
}
.gs-nav-caret {
font-size: 10px;
opacity: 0.9;
transition: transform 0.2s ease;
}
.gs-nav-list > li:hover .gs-nav-caret {
transform: rotate(180deg);
}
.gs-nav-right-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #FFFFFF !important;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
.gs-nav-right-badge:hover {
background: var(--gs-orange);
border-color: var(--gs-orange);
} .gs-mega-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #FFFFFF;
border-radius: 0 0 14px 14px;
border: 1px solid var(--gs-blue-border);
border-top: 3px solid var(--gs-orange);
box-shadow: 0 22px 48px rgba(13, 41, 66, 0.20);
padding: 20px 22px 18px;
z-index: 1200;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
pointer-events: none;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
.gs-nav-list > li.gs-has-mega:hover .gs-mega-dropdown,
.gs-nav-list > li.gs-has-mega:focus-within .gs-mega-dropdown,
.gs-nav-list > li.gs-has-mega.is-open .gs-mega-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.gs-mega-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px 20px;
align-items: start;
}
.gs-mega-col {
display: flex;
flex-direction: column;
gap: 16px;
}
.gs-mega-group {
background: #FBFDFF;
border: 1px solid var(--gs-border-light);
border-radius: 10px;
padding: 12px 13px;
}
.gs-mega-cat-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font-size: 13.5px;
font-weight: 800;
color: var(--gs-blue-nav) !important;
text-transform: uppercase;
line-height: 1.3;
padding-bottom: 7px;
margin-bottom: 8px;
border-bottom: 1.5px solid var(--gs-blue-border);
}
.gs-mega-cat-title:hover {
color: var(--gs-orange) !important;
}
.gs-mega-sublist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.gs-mega-sublist > li > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--gs-text-body) !important;
padding: 3px 6px;
border-radius: 5px;
line-height: 1.35;
}
.gs-mega-sublist > li > a:hover {
color: var(--gs-orange-dark) !important;
background: var(--gs-orange-soft);
transform: translateX(2px);
}
.gs-mega-sublist > li > a.is-chromagar-link {
color: var(--gs-orange-dark) !important;
background: var(--gs-orange-soft);
border: 1px solid var(--gs-orange-border);
font-weight: 800;
padding: 4px 8px;
}
.gs-mega-sublist > li > a.is-chromagar-link:hover {
background: var(--gs-orange);
color: #FFFFFF !important;
}
.gs-mega-subhead {
display: block;
font-size: 12.5px;
font-weight: 800;
color: var(--gs-blue-nav) !important;
padding: 4px 6px 2px;
}
.gs-mega-level3 {
list-style: none;
margin: 2px 0 6px 8px;
padding: 0 0 0 8px;
border-left: 2px solid var(--gs-blue-border);
display: flex;
flex-direction: column;
gap: 3px;
}
.gs-mega-level3 > li > a {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--gs-text-body) !important;
padding: 2px 5px;
border-radius: 4px;
line-height: 1.3;
}
.gs-mega-level3 > li > a:hover {
color: var(--gs-orange-dark) !important;
background: var(--gs-orange-soft);
}
.gs-mega-footer-bar {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--gs-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
font-size: 12.5px;
} .gs-mobile-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 30, 50, 0.55);
backdrop-filter: blur(3px);
z-index: 10050;
display: none;
}
.gs-mobile-drawer-backdrop.is-open {
display: block;
}
.gs-mobile-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(350px, 88vw);
background: #FFFFFF;
z-index: 10060;
box-shadow: 12px 0 36px rgba(10, 30, 50, 0.25);
transform: translateX(-102%);
transition: transform 0.25s ease;
display: flex;
flex-direction: column;
}
.gs-mobile-drawer.is-open {
transform: translateX(0);
}
.gs-mobile-drawer-head {
background: linear-gradient(90deg, #1678CE 0%, #2090D0 100%);
color: #FFFFFF;
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.gs-mobile-drawer-body {
flex: 1;
overflow-y: auto;
padding: 12px 14px 24px;
}
.gs-mob-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.gs-mob-nav-list > li {
border-bottom: 1px solid var(--gs-border-light);
}
.gs-mob-nav-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.gs-mob-nav-row > a {
flex: 1;
padding: 11px 6px;
font-size: 14px;
font-weight: 700;
color: var(--gs-text-main) !important;
}
.gs-mob-acc-btn {
background: var(--gs-blue-soft);
border: 1px solid var(--gs-blue-border);
color: var(--gs-blue-nav);
border-radius: 6px;
width: 32px;
height: 32px;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.gs-mob-sub-panel {
display: none;
padding: 4px 0 10px 10px;
}
.gs-mob-sub-panel.is-open {
display: block;
}
.gs-mob-cat-block {
margin-bottom: 10px;
background: #F8FCFF;
border: 1px solid var(--gs-border);
border-radius: 8px;
padding: 8px 10px;
}
.gs-mob-cat-block > a {
display: block;
font-size: 13px;
font-weight: 800;
color: var(--gs-blue-nav) !important;
margin-bottom: 5px;
}
.gs-mob-cat-block ul {
list-style: none;
margin: 0;
padding: 0 0 0 8px;
border-left: 2px solid var(--gs-blue-border);
}
.gs-mob-cat-block ul li a {
display: block;
padding: 3.5px 4px;
font-size: 12.5px;
color: var(--gs-text-body) !important;
} .gs-visual-cat-strip {
padding: 14px 0;
background: #FFFFFF;
border-bottom: 1px solid var(--gs-border);
}
.gs-visual-cat-grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 10px;
}
.gs-vcat-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 10px 6px;
border-radius: 8px;
background: #F8FCFF;
border: 1px solid var(--gs-border);
transition: all 0.2s ease;
}
.gs-vcat-item:hover {
border-color: var(--gs-blue-nav);
background: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(22, 120, 206, 0.12);
}
.gs-vcat-thumb {
width: 52px;
height: 52px;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid var(--gs-border);
padding: 4px;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.gs-vcat-thumb img {
max-height: 42px !important;
width: auto !important;
object-fit: contain;
}
.gs-vcat-title {
font-size: 13px;
font-weight: 700;
color: var(--gs-text-main);
line-height: 1.25;
margin-bottom: 3px;
}
.gs-vcat-count {
font-size: 11.5px;
font-weight: 700;
color: var(--gs-orange);
background: var(--gs-orange-soft);
padding: 1px 7px;
border-radius: 99px;
} .gs-d1-hero {
background:
radial-gradient(circle at 85% 15%, rgba(240, 112, 32, 0.08) 0%, transparent 38%),
radial-gradient(circle at 15% 80%, rgba(32, 144, 208, 0.12) 0%, transparent 45%),
linear-gradient(180deg, #EBF6FC 0%, #FFFFFF 100%);
padding: 28px 0 36px;
border-bottom: 1px solid var(--gs-border);
}
.gs-d1-hero-grid {
display: grid;
grid-template-columns: 1.08fr 0.92fr;
gap: 28px;
align-items: center;
}
.gs-eyebrow-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border-radius: 999px;
background: #FFFFFF;
border: 1px solid var(--gs-blue-border);
color: var(--gs-blue-nav);
font-size: 12.5px;
font-weight: 700;
margin-bottom: 12px;
}
.gs-eyebrow-pill span {
color: var(--gs-orange);
} .gs-d1-hero-title {
font-size: 27px;
font-weight: 700;
color: var(--gs-text-main);
line-height: 1.3;
margin: 0 0 12px;
}
.gs-d1-hero-title .gs-hl-blue {
color: var(--gs-blue-nav);
}
.gs-d1-hero-title .gs-hl-orange {
color: var(--gs-orange);
}
.gs-d1-hero-desc {
font-size: 15px;
color: var(--gs-text-body);
margin: 0 0 16px;
}
.gs-smart-search-box {
background: #FFFFFF;
border: 2px solid var(--gs-blue-nav);
border-radius: 8px;
padding: 4px;
box-shadow: 0 6px 18px rgba(22, 120, 206, 0.10);
margin-bottom: 12px;
}
.gs-smart-search-row {
display: flex;
align-items: center;
gap: 6px;
}
.gs-smart-search-input {
flex: 1;
border: none;
padding: 9px 12px;
font-size: 14px;
color: var(--gs-text-main);
outline: none;
font-family: var(--gs-font-main);
}
.gs-smart-search-submit {
background: var(--gs-orange);
color: #FFFFFF;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
}
.gs-smart-search-submit:hover {
background: var(--gs-blue-nav);
}
.gs-quick-tags {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 18px;
font-size: 13px;
}
.gs-quick-tags-label {
color: var(--gs-text-body);
font-weight: 700;
}
.gs-quick-tag {
padding: 4px 10px;
border-radius: 4px;
background: #FFFFFF;
border: 1px solid var(--gs-border);
color: var(--gs-text-body);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.gs-quick-tag:hover {
border-color: var(--gs-orange);
color: var(--gs-orange-dark);
background: var(--gs-orange-soft);
}
.gs-d1-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.gs-d1-kpi-card {
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-top: 3px solid var(--gs-blue-nav);
border-radius: 8px;
padding: 10px 12px;
}
.gs-d1-kpi-card:nth-child(even) {
border-top-color: var(--gs-orange);
}
.gs-d1-kpi-num {
font-size: 18px;
font-weight: 700;
color: var(--gs-blue-nav);
line-height: 1.2;
}
.gs-d1-kpi-card:nth-child(even) .gs-d1-kpi-num {
color: var(--gs-orange);
}
.gs-d1-kpi-label {
font-size: 12.5px;
color: var(--gs-text-body);
margin-top: 3px;
} .gs-spotlight-deck {
background: #FFFFFF;
border: 1px solid var(--gs-blue-border);
border-radius: 12px;
padding: 18px;
box-shadow: 0 10px 28px rgba(22, 120, 206, 0.10);
}
.gs-spotlight-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.gs-spotlight-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 4px;
background: var(--gs-orange-soft);
color: var(--gs-orange-dark);
border: 1px solid var(--gs-orange-border);
font-size: 12px;
font-weight: 700;
}
.gs-spot-thumb-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.gs-spot-thumb-btn {
background: #F8FCFF;
border: 1px solid var(--gs-border);
border-radius: 6px;
padding: 6px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.18s ease;
}
.gs-spot-thumb-btn img {
height: 36px !important;
width: auto !important;
object-fit: contain;
margin-bottom: 4px;
}
.gs-spot-thumb-btn span {
font-size: 12px;
font-weight: 700;
color: var(--gs-text-main);
line-height: 1.1;
}
.gs-spot-thumb-btn.is-active {
background: var(--gs-blue-soft);
border-color: var(--gs-blue-nav);
box-shadow: 0 0 0 2px rgba(22, 120, 206, 0.18);
}
.gs-spot-thumb-btn.is-active span {
color: var(--gs-blue-nav);
}
.gs-spot-slide {
display: none;
}
.gs-spot-slide.is-active {
display: block;
}
.gs-spot-img-wrap {
height: 195px;
background: radial-gradient(circle, #FFFFFF 0%, #EBF6FC 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
margin-bottom: 12px;
border: 1px solid var(--gs-border-light);
overflow: hidden;
}
.gs-spot-img-wrap img {
max-height: 175px !important;
width: auto !important;
object-fit: contain;
}
.gs-spot-brand {
font-size: 12px;
font-weight: 700;
color: var(--gs-orange);
text-transform: uppercase;
}
.gs-spot-title {
font-size: 18px;
font-weight: 700;
color: var(--gs-text-main);
margin: 4px 0 8px;
}
.gs-spot-specs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.gs-spec-pill {
padding: 4px 9px;
border-radius: 4px;
background: var(--gs-blue-soft);
color: var(--gs-blue-deep);
border: 1px solid var(--gs-blue-border);
font-size: 12.5px;
font-weight: 600;
}
.gs-spot-actions {
display: flex;
gap: 10px;
}
.gs-btn-primary {
flex: 1;
background: var(--gs-orange);
color: #FFFFFF !important;
padding: 9px 16px;
border-radius: 6px;
font-weight: 700;
font-size: 14px;
text-align: center;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.gs-btn-primary:hover {
background: var(--gs-blue-nav);
}
.gs-btn-outline {
flex: 1;
background: #FFFFFF;
color: var(--gs-blue-nav) !important;
border: 1px solid var(--gs-blue-nav);
padding: 9px 16px;
border-radius: 6px;
font-weight: 700;
font-size: 14px;
text-align: center;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.gs-btn-outline:hover {
background: var(--gs-blue-soft);
} .gs-section {
padding: 36px 0;
}
.gs-section-alt {
background: #FFFFFF;
border-top: 1px solid var(--gs-border);
border-bottom: 1px solid var(--gs-border);
}
.gs-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.gs-section-eyebrow {
font-size: 12.5px;
font-weight: 700;
color: var(--gs-orange);
text-transform: uppercase;
margin-bottom: 3px;
display: block;
} .gs-section-title {
font-size: 21px;
font-weight: 700;
color: var(--gs-text-main);
margin: 0;
}
.gs-section-sub {
font-size: 14.5px;
color: var(--gs-text-body);
margin: 4px 0 0;
max-width: 720px;
}
.gs-industry-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
.gs-industry-card {
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 8px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.gs-industry-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gs-blue-nav), var(--gs-orange));
}
.gs-industry-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(22, 120, 206, 0.12);
border-color: var(--gs-blue-nav);
}
.gs-industry-visual {
height: 105px;
background: #F8FCFF;
border: 1px solid var(--gs-border-light);
border-radius: 6px;
padding: 8px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.gs-industry-visual img {
max-height: 86px !important;
width: auto !important;
object-fit: contain;
}
.gs-industry-badge {
position: absolute;
top: 6px;
left: 6px;
background: var(--gs-blue-nav);
color: #FFFFFF;
font-size: 10.5px;
font-weight: 700;
padding: 2px 7px;
border-radius: 4px;
}
.gs-industry-card h3 {
font-size: 15px;
font-weight: 700;
color: var(--gs-text-main);
margin: 0 0 6px;
line-height: 1.3;
}
.gs-industry-card p {
font-size: 13.5px;
color: var(--gs-text-body);
margin: 0 0 10px;
}
.gs-industry-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 10px;
}
.gs-industry-tags span {
font-size: 12px;
padding: 2px 7px;
background: var(--gs-blue-soft);
border-radius: 4px;
color: var(--gs-blue-deep);
font-weight: 600;
}
.gs-industry-link {
font-size: 13.5px;
font-weight: 700;
color: var(--gs-orange) !important;
display: inline-flex;
align-items: center;
gap: 5px;
} .gs-bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.gs-bento-card {
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.2s ease;
}
.gs-bento-card:hover {
border-color: var(--gs-blue-nav);
box-shadow: 0 10px 24px rgba(22, 120, 206, 0.10);
}
.gs-bento-card.is-featured {
background: linear-gradient(135deg, #E8F5FD 0%, #FFFFFF 65%, #FFF4EC 100%);
border: 1.5px solid var(--gs-blue-nav);
}
.gs-bento-header-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.gs-bento-thumb {
width: 64px;
height: 64px;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid var(--gs-border);
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.gs-bento-thumb img {
max-height: 52px !important;
width: auto !important;
object-fit: contain;
}
.gs-bento-count {
display: inline-block;
font-size: 11.5px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
background: var(--gs-orange-soft);
color: var(--gs-orange-dark);
border: 1px solid var(--gs-orange-border);
margin-bottom: 3px;
}
.gs-bento-card h3 {
font-size: 16px;
font-weight: 700;
margin: 0;
color: var(--gs-text-main);
line-height: 1.25;
}
.gs-bento-card p {
font-size: 14px;
color: var(--gs-text-body);
margin: 0 0 10px;
}
.gs-bento-subs {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 12px;
}
.gs-bento-sub-pill {
font-size: 12.5px;
padding: 3px 9px;
border-radius: 4px;
background: var(--gs-blue-soft);
color: var(--gs-blue-deep);
font-weight: 600;
border: 1px solid var(--gs-blue-border);
}
.gs-bento-sub-pill:hover {
background: var(--gs-blue-nav);
color: #FFFFFF !important;
}
.gs-bento-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
border-top: 1px solid var(--gs-border-light);
font-size: 13.5px;
font-weight: 700;
color: var(--gs-blue-nav);
} .gs-tabs-nav {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.gs-tab-btn {
padding: 8px 14px;
border-radius: 6px;
border: 1px solid var(--gs-blue-border);
background: #FFFFFF;
font-family: var(--gs-font-main);
font-size: 13.5px;
font-weight: 700;
color: var(--gs-blue-deep);
cursor: pointer;
}
.gs-tab-btn.is-active {
background: var(--gs-blue-nav);
color: #FFFFFF;
border-color: var(--gs-blue-nav);
}
.gs-product-panel {
display: none;
}
.gs-product-panel.is-active {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.gs-prod-card {
background: #FFFFFF;
border: 1px solid #E6E6E6;
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.2s ease;
}
.gs-prod-card:hover {
border-color: var(--gs-blue-nav);
box-shadow: 0 8px 20px rgba(22, 120, 206, 0.12);
}
.gs-prod-img-box {
height: 185px;
background: #FFFFFF;
border-bottom: 1px solid #ECECEC;
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.gs-prod-img-box img {
max-height: 155px !important;
width: auto !important;
object-fit: contain;
}
.gs-prod-brand-tag {
position: absolute;
top: 8px;
left: 8px;
background: var(--gs-blue-nav);
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
}
.gs-prod-std-tag {
position: absolute;
top: 8px;
right: 8px;
background: var(--gs-orange-soft);
color: var(--gs-orange-dark);
border: 1px solid var(--gs-orange-border);
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 4px;
}
.gs-prod-body {
padding: 12px 14px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.gs-prod-cat {
font-size: 12px;
font-weight: 700;
color: var(--gs-blue-nav);
margin-bottom: 4px;
} .gs-prod-title {
font-size: 14.5px;
font-weight: 700;
color: #353535;
margin: 0 0 8px;
line-height: 1.35;
}
.gs-prod-title a:hover {
color: var(--gs-blue-nav);
text-decoration: underline;
}
.gs-prod-specs {
font-size: 13px;
color: #555555;
margin-bottom: 12px;
background: #F8FAFC;
border: 1px solid #ECECEC;
padding: 7px 9px;
border-radius: 4px;
}
.gs-prod-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.gs-prod-btn-view {
padding: 7px 10px;
border-radius: 4px;
border: 1px solid var(--gs-blue-nav);
background: #FFFFFF;
color: var(--gs-blue-nav) !important;
font-size: 13px;
font-weight: 700;
text-align: center;
}
.gs-prod-btn-view:hover {
background: var(--gs-blue-soft);
}
.gs-prod-btn-rfq {
padding: 7px 10px;
border-radius: 4px;
border: none;
background: var(--gs-orange);
color: #FFFFFF !important;
font-size: 13px;
font-weight: 700;
text-align: center;
cursor: pointer;
}
.gs-prod-btn-rfq:hover {
background: var(--gs-blue-nav);
} .gs-d2-hero {
background: linear-gradient(180deg, #E3F3FC 0%, #F5FAFE 100%);
color: var(--gs-text-main);
padding: 26px 0 34px;
border-bottom: 2px solid var(--gs-orange);
}
.gs-d2-visual-pills {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.gs-d2-vpill {
background: #FFFFFF;
border: 1.5px solid var(--gs-border);
border-radius: 8px;
padding: 8px 10px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all 0.18s ease;
text-align: left;
}
.gs-d2-vpill:hover,
.gs-d2-vpill.is-active {
border-color: var(--gs-orange);
background: var(--gs-orange-soft);
}
.gs-d2-vpill img {
width: 40px !important;
height: 40px !important;
object-fit: contain;
background: #FFFFFF;
border-radius: 6px;
padding: 3px;
border: 1px solid var(--gs-border);
flex-shrink: 0;
}
.gs-d2-vpill strong {
display: block;
font-size: 13px;
color: var(--gs-text-main);
line-height: 1.2;
}
.gs-d2-vpill small {
font-size: 11.5px;
color: var(--gs-blue-nav);
font-weight: 700;
}
.gs-d2-hero-grid {
display: grid;
grid-template-columns: 1.35fr 0.65fr;
gap: 20px;
align-items: stretch;
}
.gs-d2-finder-card {
background: #FFFFFF;
color: var(--gs-text-main);
border: 1.5px solid var(--gs-blue-border);
border-radius: 10px;
padding: 18px;
}
.gs-d2-finder-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px solid var(--gs-blue-soft);
}
.gs-d2-finder-head h2 {
font-size: 17px;
font-weight: 700;
color: var(--gs-blue-nav);
margin: 0;
}
.gs-d2-filter-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.gs-d2-field label {
display: block;
font-size: 12.5px;
font-weight: 700;
color: var(--gs-text-main);
margin-bottom: 5px;
}
.gs-d2-select,
.gs-d2-input {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--gs-blue-border);
border-radius: 6px;
font-family: var(--gs-font-main);
font-size: 13.5px;
color: var(--gs-text-main);
background: #F8FCFF;
}
.gs-d2-finder-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
background: var(--gs-blue-soft);
padding: 8px 12px;
border-radius: 6px;
border: 1px solid var(--gs-blue-border);
}
.gs-d2-btn-orange {
background: var(--gs-orange);
color: #FFFFFF !important;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-weight: 700;
font-size: 13.5px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.gs-d2-quick-rfq-box {
background: linear-gradient(135deg, #FFFFFF 0%, #FFF5EE 100%);
border: 1.5px solid var(--gs-orange-border);
border-radius: 10px;
padding: 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.gs-d2-quick-rfq-box h3 {
font-size: 17px;
font-weight: 700;
margin: 4px 0 6px;
color: var(--gs-text-main);
}
.gs-d2-chip-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 6px 0 12px;
}
.gs-d2-chip {
font-size: 12.5px;
padding: 4px 9px;
border-radius: 4px;
background: #FFFFFF;
color: var(--gs-blue-deep);
cursor: pointer;
border: 1px solid var(--gs-blue-border);
font-weight: 600;
}
.gs-d2-chip:hover {
background: var(--gs-orange);
color: #FFFFFF;
border-color: var(--gs-orange);
}
.gs-d2-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.gs-d2-table-wrap {
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 8px;
overflow-x: auto;
}
.gs-sku-table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
.gs-sku-table th {
background: var(--gs-blue-nav);
color: #FFFFFF;
text-align: left;
padding: 11px 12px;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.gs-sku-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--gs-border-light);
vertical-align: middle;
}
.gs-sku-table tr:hover td {
background: #F4FAFF;
}
.gs-sku-thumb {
width: 52px !important;
height: 52px !important;
border-radius: 6px;
border: 1px solid var(--gs-border);
background: #FFFFFF;
padding: 3px;
object-fit: contain;
}
.gs-sku-code {
font-size: 12.5px;
font-weight: 700;
color: var(--gs-blue-nav);
background: var(--gs-blue-soft);
border: 1px solid var(--gs-blue-border);
padding: 2px 7px;
border-radius: 4px;
white-space: nowrap;
} .gs-d3-hero {
background: linear-gradient(180deg, #E6F4FD 0%, #FFFFFF 100%);
color: var(--gs-text-main);
padding: 28px 0 42px;
border-bottom: 1px solid var(--gs-blue-border);
}
.gs-d3-hero-top {
display: grid;
grid-template-columns: 1.12fr 0.88fr;
gap: 28px;
align-items: center;
margin-bottom: 24px;
}
.gs-d3-hero h1 {
font-size: 26px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 12px;
color: var(--gs-text-main);
}
.gs-d3-hero h1 span {
color: var(--gs-blue-nav);
}
.gs-d3-hero h1 em {
font-style: normal;
color: var(--gs-orange);
}
.gs-workflow-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.gs-wf-step {
background: #FFFFFF;
border: 1.5px solid var(--gs-border);
border-radius: 10px;
padding: 14px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.gs-wf-step:hover,
.gs-wf-step.is-active {
background: #F4FAFF;
border-color: var(--gs-orange);
box-shadow: 0 8px 20px rgba(240, 112, 32, 0.14);
}
.gs-wf-step-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.gs-wf-step-num {
font-size: 11.5px;
font-weight: 700;
color: #FFFFFF;
background: var(--gs-blue-nav);
padding: 2px 8px;
border-radius: 4px;
}
.gs-wf-step.is-active .gs-wf-step-num {
background: var(--gs-orange);
}
.gs-wf-step-thumb {
width: 52px;
height: 52px;
border-radius: 6px;
background: #FFFFFF;
border: 1px solid var(--gs-border);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.gs-wf-step-thumb img {
max-height: 44px !important;
width: auto !important;
object-fit: contain;
}
.gs-wf-step h3 {
font-size: 15px;
font-weight: 700;
color: var(--gs-text-main);
margin: 0 0 5px;
line-height: 1.3;
}
.gs-wf-step p {
font-size: 13px;
color: var(--gs-text-body);
margin: 0;
}
.gs-wf-detail-box {
background: #FFFFFF;
border: 1.5px solid var(--gs-blue-nav);
border-radius: 10px;
padding: 22px;
margin-top: -18px;
box-shadow: 0 10px 28px rgba(22, 120, 206, 0.10);
position: relative;
z-index: 10;
}
.gs-wf-panel {
display: none;
}
.gs-wf-panel.is-active {
display: block;
} .gs-pt-hub {
background: linear-gradient(135deg, #E3F3FC 0%, #FFFFFF 55%, #FFF3EB 100%);
border: 1.5px solid var(--gs-blue-nav);
border-radius: 12px;
padding: 26px;
color: var(--gs-text-main);
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 24px;
align-items: center;
}
.gs-pt-hub h3 {
font-size: 21px;
font-weight: 700;
margin: 6px 0 10px;
color: var(--gs-text-main);
}
.gs-pt-hub p {
color: var(--gs-text-body);
font-size: 14.5px;
margin: 0 0 16px;
}
.gs-pt-orgs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.gs-pt-org-card {
background: #FFFFFF;
border: 1px solid var(--gs-blue-border);
border-radius: 6px;
padding: 10px;
transition: all 0.2s ease;
}
.gs-pt-org-card:hover {
border-color: var(--gs-orange);
}
.gs-pt-org-card strong {
display: block;
font-size: 14px;
color: var(--gs-blue-nav);
}
.gs-pt-org-card span {
font-size: 12px;
color: var(--gs-orange-dark);
font-weight: 600;
}
.gs-brands-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px;
}
.gs-brand-card {
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 8px;
padding: 14px;
height: 86px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.gs-brand-card img {
max-height: 42px !important;
width: auto !important;
object-fit: contain;
}
.gs-brand-card strong {
font-size: 14px;
color: var(--gs-blue-nav);
}
.gs-brand-card small {
font-size: 12px;
color: var(--gs-text-muted);
margin-top: 3px;
}
.gs-news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.gs-news-card {
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.gs-news-img {
height: 180px;
background: var(--gs-blue-soft);
overflow: hidden;
}
.gs-news-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.gs-news-body {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.gs-news-meta {
font-size: 12px;
color: var(--gs-orange);
font-weight: 700;
margin-bottom: 5px;
}
.gs-news-title {
font-size: 15.5px;
font-weight: 700;
color: var(--gs-text-main);
margin: 0 0 8px;
line-height: 1.35;
} .gs-footer {
background: linear-gradient(180deg, #EBF6FC 0%, #DCEFFB 100%);
color: var(--gs-text-body);
border-top: 3px solid var(--gs-blue-nav);
padding: 40px 0 24px;
font-size: 14px;
}
.gs-footer-grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr;
gap: 28px;
padding-bottom: 28px;
border-bottom: 1px solid var(--gs-blue-border);
}
.gs-footer h4 {
color: var(--gs-blue-deep);
font-size: 15px;
font-weight: 700;
margin: 0 0 12px;
}
.gs-footer ul {
list-style: none;
padding: 0;
margin: 0;
}
.gs-footer ul li {
margin-bottom: 7px;
}
.gs-footer ul li a {
color: var(--gs-text-body);
font-size: 14px;
}
.gs-footer ul li a:hover {
color: var(--gs-orange);
text-decoration: underline;
}
.gs-d2-view-switch {
display: flex;
align-items: center;
gap: 8px;
}
.gs-d2-grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.gs-d3-flagship-card {
background: #FFFFFF;
border: 2px solid var(--gs-blue-border);
border-radius: 16px;
padding: 18px;
box-shadow: 0 12px 32px rgba(32, 144, 208, 0.12);
}
.gs-d3-flagship-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.gs-d3-dual-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.gs-d3-dual-item {
background: #F4FAFF;
border: 1.5px solid var(--gs-border);
border-radius: 12px;
padding: 12px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
transition: all 0.2s ease;
}
.gs-d3-dual-item:hover {
border-color: var(--gs-orange);
background: #FFFFFF;
box-shadow: 0 6px 16px rgba(240, 112, 32, 0.12);
}
.gs-d3-dual-item img {
height: 100px !important;
width: auto !important;
margin: 0 auto 8px;
object-fit: contain;
}
.gs-d3-dual-item strong {
display: block;
font-size: 13.5px;
color: var(--gs-text-main);
line-height: 1.25;
}
.gs-d3-dual-item small {
font-family: var(--gs-font-mono);
font-size: 11px;
font-weight: 700;
margin-top: 3px;
}
.gs-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 41, 66, 0.55);
backdrop-filter: blur(4px);
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.gs-modal-backdrop.is-open {
display: flex;
}
.gs-modal-card {
background: #FFFFFF;
border: 2px solid var(--gs-blue-nav);
border-radius: 10px;
max-width: 540px;
width: 100%;
padding: 24px;
box-shadow: 0 20px 50px rgba(22, 120, 206, 0.25);
position: relative;
max-height: 92vh;
overflow-y: auto;
}
.gs-modal-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.gs-modal-actions {
display: flex;
gap: 10px;
margin-top: 16px;
} .gs-mobile-sticky-bar {
display: none;
} @media (max-width: 1100px) {
.gs-mob-menu-trigger {
display: inline-flex;
}
.gs-nav-right-badge {
display: none;
}
.gs-nav-list {
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.gs-nav-list::-webkit-scrollbar {
display: none;
}
.gs-nav-list > li > a {
padding: 10px 11px;
font-size: 12.5px;
}
.gs-mega-dropdown {
display: none !important;
}
.gs-visual-cat-grid {
grid-template-columns: repeat(3, 1fr);
}
.gs-d2-visual-pills {
grid-template-columns: repeat(3, 1fr);
}
.gs-d1-hero-grid,
.gs-d2-hero-grid,
.gs-d3-hero-top,
.gs-pt-hub {
grid-template-columns: 1fr;
}
.gs-industry-grid {
grid-template-columns: repeat(2, 1fr);
}
.gs-bento-grid,
.gs-product-panel.is-active,
.gs-d2-grid-container,
.gs-workflow-strip {
grid-template-columns: repeat(2, 1fr);
}
.gs-brands-grid {
grid-template-columns: repeat(3, 1fr);
}
.gs-footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
body.gs-demo-body {
padding-bottom: 66px;
}
.gs-container {
padding: 0 12px;
} .gs-demo-switcher {
padding: 5px 0;
}
.gs-demo-switcher-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.gs-demo-switcher-brand {
display: none;
}
.gs-tab-lbl-desk {
display: none;
}
.gs-tab-lbl-mob {
display: inline;
}
.gs-demo-switcher-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
width: 100%;
}
.gs-demo-tab {
font-size: 11.5px;
padding: 5px 4px;
white-space: nowrap;
justify-content: center;
} .gs-topbar {
height: 30px;
font-size: 12px;
}
.gs-topbar-inner {
height: 30px;
}
.gs-topbar-fixed-right {
display: none;
} .gs-header-main {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px 0;
}
.gs-brand {
width: 100%;
min-width: 0;
gap: 10px;
align-items: center;
}
.gs-brand-logo {
height: 62px !important;
max-width: 82px !important;
flex-shrink: 0;
}
.gs-brand-text {
flex: 1;
min-width: 0;
}
.gs-brand-company {
font-size: 10.5px;
white-space: normal;
line-height: 1.25;
}
.gs-brand-title {
font-size: 16.5px;
line-height: 1.2;
}
.gs-brand-sub {
font-size: 11.5px;
white-space: normal;
line-height: 1.3;
color: var(--gs-text-body);
}
.gs-header-ctas {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.gs-hotline-pill {
display: flex;
padding: 6px 10px;
gap: 8px;
justify-content: center;
}
.gs-hotline-icon {
width: 28px;
height: 28px;
font-size: 14px;
flex-shrink: 0;
}
.gs-hotline-info small {
font-size: 10px;
}
.gs-hotline-info strong {
font-size: 13.5px;
}
.gs-btn-rfq-header {
padding: 8px 10px;
font-size: 12.5px;
justify-content: center;
width: 100%;
}
.gs-header-search {
order: 3;
max-width: 100%;
width: 100%;
}
.gs-header-search-form {
height: 38px;
}
.gs-header-search-input {
font-size: 13px;
padding: 6px 10px;
}
.gs-header-search-btn {
padding: 0 12px;
font-size: 13px;
} .gs-visual-cat-strip {
padding: 10px 0;
}
.gs-visual-cat-grid {
display: flex;
overflow-x: auto;
gap: 8px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.gs-visual-cat-grid::-webkit-scrollbar {
display: none;
}
.gs-vcat-item {
flex: 0 0 108px;
scroll-snap-align: start;
padding: 8px 5px;
}
.gs-vcat-thumb {
width: 44px;
height: 44px;
margin-bottom: 5px;
}
.gs-vcat-thumb img {
max-height: 36px !important;
}
.gs-vcat-title {
font-size: 11.5px;
}
.gs-vcat-count {
font-size: 10px;
padding: 1px 5px;
} .gs-d1-hero,
.gs-d2-hero,
.gs-d3-hero {
padding: 18px 0 24px;
}
.gs-eyebrow-pill {
font-size: 11px;
padding: 4px 10px;
white-space: normal;
line-height: 1.3;
}
.gs-d1-hero-title,
.gs-d3-hero h1 {
font-size: 21px;
line-height: 1.3;
}
.gs-smart-search-row {
flex-direction: column;
align-items: stretch;
}
.gs-smart-search-submit {
width: 100%;
padding: 10px;
}
.gs-spot-thumb-bar {
grid-template-columns: repeat(2, 1fr);
}
.gs-spot-actions {
flex-direction: column;
}
.gs-d1-kpis {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
} .gs-d2-visual-pills {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.gs-d2-vpill {
padding: 7px 8px;
gap: 8px;
}
.gs-d2-vpill img {
width: 34px !important;
height: 34px !important;
}
.gs-d2-vpill strong {
font-size: 12px;
}
.gs-d2-finder-head {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.gs-d2-filter-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.gs-d2-view-switch {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.gs-d2-view-switch .gs-tab-btn {
font-size: 12px;
padding: 8px 6px;
text-align: center;
} .gs-d3-flagship-card {
padding: 14px;
}
.gs-d3-dual-grid {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.gs-d3-dual-item {
padding: 10px 6px;
}
.gs-d3-dual-item img {
height: 76px !important;
}
.gs-d3-dual-item strong {
font-size: 12.5px;
}
.gs-wf-detail-box {
padding: 14px;
margin-top: 10px;
} .gs-tabs-nav {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.gs-tab-btn {
font-size: 12px;
padding: 8px 6px;
text-align: center;
}
.gs-industry-grid,
.gs-bento-grid,
.gs-product-panel.is-active,
.gs-d2-grid-container,
.gs-workflow-strip,
.gs-news-grid,
.gs-pt-orgs-grid,
.gs-footer-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.gs-brands-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.gs-section {
padding: 24px 0;
}
.gs-section-title {
font-size: 18.5px;
} .gs-modal-card {
padding: 16px;
}
.gs-modal-form-row {
grid-template-columns: 1fr;
gap: 8px;
}
.gs-modal-actions {
flex-direction: column;
} .gs-mobile-sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9990;
background: rgba(255, 255, 255, 0.98);
border-top: 1.5px solid var(--gs-blue-border);
box-shadow: 0 -4px 16px rgba(22, 120, 206, 0.14);
padding: 8px 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.gs-mob-btn-call {
background: var(--gs-blue-nav);
color: #FFFFFF !important;
border-radius: 6px;
padding: 10px 8px;
font-size: 13px;
font-weight: 700;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.gs-mob-btn-rfq {
background: var(--gs-orange);
color: #FFFFFF !important;
border: none;
border-radius: 6px;
padding: 10px 8px;
font-size: 13px;
font-weight: 700;
text-align: center;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
}  .quick-call-button,
#callnowbutton,
.call-now-button {
display: none !important;
}
.gs-subpage-main {
background: var(--gs-bg-page);
min-height: 60vh;
}
.gs-vcat-item.is-active {
border-color: var(--gs-orange);
background: var(--gs-orange-soft);
box-shadow: 0 6px 16px rgba(240, 112, 32, 0.14);
} .gs-sub-hero {
background: linear-gradient(135deg, #E8F4FD 0%, #FFFFFF 55%, #FFF5EC 100%);
border-bottom: 1.5px solid var(--gs-border);
padding: 18px 0 22px;
}
.gs-breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
font-size: 13px;
color: var(--gs-text-muted);
margin-bottom: 12px;
}
.gs-breadcrumbs a {
color: var(--gs-blue-nav);
font-weight: 600;
}
.gs-breadcrumbs a:hover {
color: var(--gs-orange);
text-decoration: underline;
}
.gs-breadcrumbs .gs-bc-current {
color: var(--gs-text-main);
font-weight: 700;
}
.gs-sub-hero-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: #FFFFFF;
border: 1.5px solid var(--gs-blue-border);
border-radius: 12px;
padding: 20px 24px;
box-shadow: 0 8px 24px rgba(22, 120, 206, 0.06);
}
.gs-sub-hero-title {
font-family: var(--gs-font-heading);
font-size: 24px;
font-weight: 800;
color: var(--gs-blue-deep);
margin: 0 0 8px;
line-height: 1.28;
}
.gs-sub-hero-desc {
font-size: 14.5px;
color: var(--gs-text-body);
margin: 0;
max-width: 820px;
line-height: 1.55;
}
.gs-sub-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
flex-shrink: 0;
} .gs-subcat-pills-bar {
margin-top: 14px;
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 10px;
padding: 12px 16px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.gs-subcat-pills-label {
font-size: 13px;
font-weight: 700;
color: var(--gs-blue-deep);
white-space: nowrap;
}
.gs-subcat-pills-list {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.gs-subcat-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 13px;
border-radius: 99px;
font-size: 13px;
font-weight: 600;
background: var(--gs-blue-soft);
color: var(--gs-blue-deep) !important;
border: 1px solid var(--gs-blue-border);
transition: all 0.18s ease;
}
.gs-subcat-pill:hover,
.gs-subcat-pill.is-active {
background: var(--gs-blue-nav);
color: #FFFFFF !important;
border-color: var(--gs-blue-nav);
}
.gs-subcat-pill.is-chromagar-pill {
background: var(--gs-orange-soft);
color: var(--gs-orange-dark) !important;
border-color: var(--gs-orange-border);
font-weight: 700;
}
.gs-subcat-pill.is-chromagar-pill:hover {
background: var(--gs-orange);
color: #FFFFFF !important;
} .gs-sub-content-section {
padding: 26px 0 44px;
}
.gs-sub-layout-grid {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 24px;
align-items: start;
} .gs-sub-main-col + .gs-sub-sidebar {
order: 2;
}
.gs-sub-sidebar {
display: flex;
flex-direction: column;
gap: 18px;
}
.gs-side-card {
background: #FFFFFF;
border: 1.5px solid var(--gs-blue-border);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(22, 120, 206, 0.05);
}
.gs-side-card-head {
background: var(--gs-blue-nav);
color: #FFFFFF;
font-size: 13.5px;
font-weight: 800;
padding: 12px 15px;
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0.02em;
}
.gs-side-cat-list {
list-style: none;
margin: 0;
padding: 6px 0;
}
.gs-side-cat-list > li {
border-bottom: 1px solid var(--gs-border-light);
}
.gs-side-cat-list > li:last-child {
border-bottom: none;
}
.gs-side-cat-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
gap: 6px;
}
.gs-side-cat-row a {
font-size: 13.5px;
font-weight: 700;
color: var(--gs-text-main);
line-height: 1.3;
flex: 1;
}
.gs-side-cat-row a:hover,
.gs-side-cat-list > li.is-active > .gs-side-cat-row a {
color: var(--gs-orange);
}
.gs-side-acc-btn {
width: 24px;
height: 24px;
border-radius: 5px;
border: 1px solid var(--gs-blue-border);
background: var(--gs-blue-soft);
color: var(--gs-blue-deep);
font-size: 12px;
font-weight: 800;
cursor: pointer;
flex-shrink: 0;
}
.gs-side-sublist {
display: none;
list-style: none;
margin: 0;
padding: 4px 12px 10px 20px;
background: #F8FBFF;
border-top: 1px dashed var(--gs-border);
}
.gs-side-cat-list > li.is-open > .gs-side-sublist {
display: block;
}
.gs-side-sublist li {
margin: 4px 0;
}
.gs-side-sublist a {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12.8px;
color: var(--gs-text-body);
padding: 3px 6px;
border-radius: 5px;
}
.gs-side-sublist a:hover,
.gs-side-sublist li.is-sub-active > a {
background: var(--gs-blue-soft);
color: var(--gs-blue-nav);
font-weight: 700;
}
.gs-side-sublist a.is-chromagar {
color: var(--gs-orange-dark) !important;
font-weight: 700;
background: var(--gs-orange-soft);
}
.gs-side-sublist a.is-chromagar small {
font-size: 10.5px;
background: #FFFFFF;
padding: 1px 5px;
border-radius: 4px;
border: 1px solid var(--gs-orange-border);
}
.gs-side-lvl3 {
list-style: none;
margin: 2px 0 4px 10px;
padding: 0;
border-left: 2px solid var(--gs-blue-border);
}
.gs-side-lvl3 a {
font-size: 12px;
padding: 2px 8px;
} .gs-side-support-card {
background: linear-gradient(145deg, #E8F5FD 0%, #FFFFFF 60%, #FFF4EB 100%);
border: 1.5px solid var(--gs-blue-nav);
border-radius: 10px;
padding: 16px;
}
.gs-side-support-badge {
display: inline-block;
font-size: 11px;
font-weight: 800;
color: var(--gs-orange-dark);
background: var(--gs-orange-soft);
border: 1px solid var(--gs-orange-border);
padding: 3px 8px;
border-radius: 4px;
margin-bottom: 8px;
}
.gs-side-support-card h4 {
font-size: 15px;
font-weight: 800;
color: var(--gs-blue-deep);
margin: 0 0 6px;
line-height: 1.35;
}
.gs-side-support-card p {
font-size: 12.8px;
color: var(--gs-text-body);
margin: 0 0 12px;
}
.gs-side-contact-rows {
display: flex;
flex-direction: column;
gap: 8px;
}
.gs-side-contact-item {
display: flex;
align-items: center;
gap: 10px;
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 8px;
padding: 8px 10px;
}
.gs-side-contact-item span {
width: 30px;
height: 30px;
border-radius: 6px;
background: var(--gs-blue-nav);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.gs-side-contact-item small {
display: block;
font-size: 11px;
color: var(--gs-text-muted);
}
.gs-side-contact-item strong {
font-size: 13.5px;
color: var(--gs-blue-deep);
} .gs-catalog-toolbar {
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 10px;
padding: 12px 16px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.gs-inline-cat-search {
display: flex;
align-items: center;
border: 1.5px solid var(--gs-blue-nav);
border-radius: 7px;
overflow: hidden;
background: #FFFFFF;
}
.gs-inline-cat-search input {
border: none !important;
box-shadow: none !important;
padding: 7px 12px !important;
font-size: 13px !important;
min-width: 230px;
margin: 0 !important;
height: 36px !important;
}
.gs-inline-cat-search button {
border: none;
background: var(--gs-blue-nav);
color: #FFFFFF;
font-weight: 700;
font-size: 13px;
padding: 0 14px;
height: 36px;
cursor: pointer;
}
.gs-inline-cat-search button:hover {
background: var(--gs-orange);
}
.gs-sub-product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.gs-sub-product-grid.gs-grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gs-custom-order-notice {
background: linear-gradient(135deg, #FFF7F0 0%, #FFFFFF 60%, #EBF6FE 100%);
border: 1.5px solid var(--gs-orange-border);
border-radius: 10px;
padding: 16px 20px;
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.gs-custom-order-notice strong {
display: block;
font-size: 15px;
color: var(--gs-blue-deep);
margin-bottom: 4px;
}
.gs-custom-order-notice p {
font-size: 13.5px;
color: var(--gs-text-body);
margin: 0;
}
.gs-chromagar-spotlight-banner {
background: linear-gradient(135deg, #FFF3E8 0%, #FFFFFF 55%, #E8F5FD 100%);
border: 2px solid var(--gs-orange);
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.gs-chromagar-badge {
display: inline-block;
font-size: 11.5px;
font-weight: 800;
color: #FFFFFF;
background: var(--gs-orange);
padding: 3px 10px;
border-radius: 5px;
margin-bottom: 6px;
}
.gs-chromagar-spotlight-banner h2 {
font-size: 20px;
font-weight: 800;
color: var(--gs-blue-deep);
margin: 0 0 6px;
}
.gs-chromagar-spotlight-banner p {
font-size: 13.8px;
color: var(--gs-text-body);
margin: 0;
max-width: 780px;
} .gs-sub-brands-section {
margin-bottom: 30px;
}
.gs-partner-showcase-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.gs-partner-showcase-card {
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 10px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.2s ease;
}
.gs-partner-showcase-card:hover {
border-color: var(--gs-blue-nav);
box-shadow: 0 10px 24px rgba(22, 120, 206, 0.10);
}
.gs-partner-card-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.gs-partner-logo-box {
width: 68px;
height: 68px;
border-radius: 8px;
border: 1px solid var(--gs-border);
background: #FFFFFF;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.gs-partner-logo-box img {
max-height: 54px !important;
width: auto !important;
object-fit: contain;
}
.gs-partner-country {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: var(--gs-orange-dark);
background: var(--gs-orange-soft);
padding: 2px 7px;
border-radius: 4px;
margin-bottom: 3px;
}
.gs-partner-showcase-card h3 {
font-size: 15.5px;
font-weight: 800;
color: var(--gs-blue-deep);
margin: 0 0 2px;
line-height: 1.25;
}
.gs-partner-field {
font-size: 12px;
font-weight: 700;
color: var(--gs-blue-nav);
}
.gs-partner-showcase-card p {
font-size: 13.2px;
color: var(--gs-text-body);
margin: 0 0 12px;
line-height: 1.48;
}
.gs-partner-card-foot {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--gs-border-light);
} .gs-single-product-section {
padding: 14px 0 44px;
}
.gs-sp-hero-card {
background: #FFFFFF;
border: 1.5px solid var(--gs-blue-border);
border-radius: 12px;
padding: 24px;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 28px;
box-shadow: 0 10px 28px rgba(22, 120, 206, 0.07);
}
.gs-sp-main-img-box {
height: 360px;
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 10px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.gs-sp-main-img-box img {
max-height: 310px !important;
width: auto !important;
object-fit: contain;
}
.gs-sp-thumb-strip {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.gs-sp-thumb-btn {
width: 66px;
height: 66px;
border-radius: 8px;
border: 1.5px solid var(--gs-border);
background: #FFFFFF;
padding: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.gs-sp-thumb-btn.is-active,
.gs-sp-thumb-btn:hover {
border-color: var(--gs-orange);
background: var(--gs-orange-soft);
}
.gs-sp-thumb-btn img {
max-height: 54px !important;
width: auto !important;
object-fit: contain;
}
.gs-sp-meta-top {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.gs-sp-brand-pill {
font-size: 12.5px;
background: var(--gs-blue-soft);
color: var(--gs-blue-deep);
border: 1px solid var(--gs-blue-border);
padding: 4px 10px;
border-radius: 6px;
}
.gs-sp-sku-pill {
font-family: var(--gs-font-mono);
font-size: 12px;
font-weight: 700;
background: #F1F5F9;
color: var(--gs-text-main);
padding: 4px 10px;
border-radius: 6px;
}
.gs-sp-stock-pill {
font-size: 12px;
font-weight: 700;
background: #E8F8F0;
color: #0D8A4E;
padding: 4px 10px;
border-radius: 6px;
}
.gs-sp-title {
font-family: var(--gs-font-heading);
font-size: 24px;
font-weight: 800;
color: var(--gs-blue-deep);
margin: 0 0 12px;
line-height: 1.3;
}
.gs-sp-cats-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-size: 13px;
color: var(--gs-text-muted);
margin-bottom: 14px;
}
.gs-sp-cat-chip {
background: #F8FAFC;
border: 1px solid var(--gs-border);
color: var(--gs-blue-nav) !important;
font-weight: 700;
padding: 3px 10px;
border-radius: 99px;
font-size: 12.5px;
}
.gs-sp-cat-chip:hover {
background: var(--gs-blue-nav);
color: #FFFFFF !important;
}
.gs-sp-excerpt-box {
background: #F8FBFF;
border-left: 4px solid var(--gs-blue-nav);
border-radius: 6px;
padding: 12px 15px;
font-size: 14px;
color: var(--gs-text-body);
margin-bottom: 16px;
line-height: 1.55;
}
.gs-sp-excerpt-box p:last-child {
margin-bottom: 0;
}
.gs-sp-cta-box {
background: linear-gradient(135deg, #FFF5EC 0%, #FFFFFF 60%, #EBF6FE 100%);
border: 1.5px solid var(--gs-orange-border);
border-radius: 10px;
padding: 16px;
margin-bottom: 16px;
}
.gs-sp-cta-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.gs-sp-cta-head small {
display: block;
font-size: 11px;
font-weight: 800;
color: var(--gs-orange-dark);
}
.gs-sp-cta-head strong {
font-size: 14.5px;
color: var(--gs-blue-deep);
}
.gs-sp-response-badge {
font-size: 11.5px;
font-weight: 700;
background: #FFFFFF;
border: 1px solid var(--gs-orange-border);
color: var(--gs-orange-dark);
padding: 3px 9px;
border-radius: 99px;
white-space: nowrap;
}
.gs-sp-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gs-sp-guarantees {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 12px;
}
.gs-sp-guar-item {
display: flex;
align-items: center;
gap: 10px;
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 8px;
padding: 9px 12px;
}
.gs-sp-guar-item span {
font-size: 20px;
}
.gs-sp-guar-item strong {
display: block;
font-size: 13px;
color: var(--gs-text-main);
}
.gs-sp-guar-item small {
font-size: 11.5px;
color: var(--gs-text-muted);
}
.gs-sp-tags-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-size: 12.5px;
color: var(--gs-text-muted);
padding-top: 8px;
border-top: 1px dashed var(--gs-border);
}
.gs-sp-tags-row a {
color: var(--gs-blue-nav);
font-weight: 600;
}
.gs-sp-details-card {
background: #FFFFFF;
border: 1px solid var(--gs-border);
border-radius: 12px;
padding: 22px 24px;
box-shadow: 0 6px 18px rgba(22, 120, 206, 0.04);
}
.gs-sp-details-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding-bottom: 14px;
margin-bottom: 18px;
border-bottom: 2px solid var(--gs-blue-soft);
}
.gs-sp-details-head h2 {
font-size: 19px;
font-weight: 800;
color: var(--gs-blue-deep);
margin: 0;
}
.gs-sp-RichContent {
font-size: 15px;
line-height: 1.68;
color: var(--gs-text-main);
}
.gs-sp-RichContent h2,
.gs-sp-RichContent h3,
.gs-sp-RichContent h4 {
color: var(--gs-blue-deep);
font-weight: 800;
margin-top: 18px;
margin-bottom: 10px;
}
.gs-sp-RichContent img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 12px auto;
display: block;
}
.gs-sp-RichContent table {
width: 100%;
border-collapse: collapse;
margin: 14px 0;
}
.gs-sp-RichContent table th,
.gs-sp-RichContent table td {
border: 1px solid var(--gs-border);
padding: 9px 12px;
font-size: 13.5px;
}
.gs-sp-RichContent table th {
background: var(--gs-blue-soft);
color: var(--gs-blue-deep);
font-weight: 700;
}
.gs-sp-related-wrap {
margin-top: 28px;
} .gs-about-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 26px;
}
.gs-about-kpi-card {
background: #FFFFFF;
border: 1.5px solid var(--gs-blue-border);
border-radius: 10px;
padding: 18px;
}
.gs-about-kpi-num {
display: block;
font-family: var(--gs-font-heading);
font-size: 26px;
font-weight: 800;
color: var(--gs-orange);
margin-bottom: 4px;
}
.gs-about-kpi-card strong {
display: block;
font-size: 15.5px;
color: var(--gs-blue-deep);
margin-bottom: 6px;
}
.gs-about-kpi-card p {
font-size: 13.2px;
color: var(--gs-text-body);
margin: 0;
}
.gs-about-pillars-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.gs-about-pillar-item {
background: #F8FBFF;
border: 1px solid var(--gs-blue-border);
border-radius: 10px;
padding: 16px;
}
.gs-about-pillar-item strong {
display: block;
font-size: 15.5px;
color: var(--gs-blue-deep);
margin-bottom: 6px;
}
.gs-about-pillar-item p {
font-size: 13.8px;
color: var(--gs-text-body);
margin: 0;
}
.gs-contact-offices-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 24px;
}
.gs-contact-office-card {
background: #FFFFFF;
border: 1.5px solid var(--gs-border);
border-radius: 10px;
padding: 18px 20px;
}
.gs-contact-office-card.is-highlight {
border-color: var(--gs-orange);
background: linear-gradient(135deg, #FFF7F0 0%, #FFFFFF 100%);
}
.gs-office-tag {
display: inline-block;
font-size: 11px;
font-weight: 800;
color: var(--gs-blue-nav);
background: var(--gs-blue-soft);
padding: 3px 9px;
border-radius: 4px;
margin-bottom: 8px;
}
.gs-contact-office-card h3 {
font-size: 17px;
font-weight: 800;
color: var(--gs-blue-deep);
margin: 0 0 8px;
}
.gs-contact-office-card p {
font-size: 13.5px;
color: var(--gs-text-body);
margin: 5px 0;
}
.gs-contact-main-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 24px;
}
.gs-cf7-unified-wrap input[type="text"],
.gs-cf7-unified-wrap input[type="email"],
.gs-cf7-unified-wrap input[type="tel"],
.gs-cf7-unified-wrap textarea {
width: 100%;
border: 1.5px solid var(--gs-border) !important;
border-radius: 8px !important;
padding: 10px 12px !important;
font-size: 14px !important;
margin-bottom: 10px !important;
box-shadow: none !important;
}
.gs-cf7-unified-wrap input[type="submit"],
.gs-cf7-unified-wrap .wpcf7-submit {
background: var(--gs-orange) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 8px !important;
padding: 11px 24px !important;
font-size: 14.5px !important;
font-weight: 800 !important;
cursor: pointer;
} .gs-article-meta-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
font-size: 13px;
color: var(--gs-text-muted);
}
.gs-article-cat-badge {
background: var(--gs-blue-soft);
color: var(--gs-blue-nav);
font-weight: 700;
padding: 4px 10px;
border-radius: 6px;
}
.gs-article-h1 {
font-family: var(--gs-font-heading);
font-size: 25px;
font-weight: 800;
color: var(--gs-blue-deep);
margin: 0 0 16px;
line-height: 1.32;
}
.gs-article-featured-img {
margin-bottom: 18px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--gs-border);
}
.gs-article-featured-img img {
width: 100%;
max-height: 440px;
object-fit: cover;
display: block;
}
.gs-article-cta-footer {
margin-top: 24px;
background: linear-gradient(135deg, #E8F4FD 0%, #FFF5EC 100%);
border: 1.5px solid var(--gs-blue-border);
border-radius: 10px;
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.gs-article-cta-footer strong {
display: block;
font-size: 15px;
color: var(--gs-blue-deep);
margin-bottom: 4px;
}
.gs-article-cta-footer p {
font-size: 13.2px;
color: var(--gs-text-body);
margin: 0;
} .gs-pagination-wrap {
margin-top: 24px;
display: flex;
justify-content: center;
}
.gs-pagination-wrap ul.page-numbers {
display: flex;
align-items: center;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.gs-pagination-wrap .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 11px;
border-radius: 7px;
border: 1px solid var(--gs-border);
background: #FFFFFF;
color: var(--gs-text-main);
font-size: 13.5px;
font-weight: 700;
}
.gs-pagination-wrap .page-numbers.current,
.gs-pagination-wrap a.page-numbers:hover {
background: var(--gs-blue-nav);
color: #FFFFFF !important;
border-color: var(--gs-blue-nav);
}
.gs-sub-layout-grid.gs-sidebar-right {
grid-template-columns: minmax(0, 1fr) 290px;
} .fix_chatZalo,
.fix_tel {
display: none !important;
}
@media (max-width: 1024px) {
.gs-sub-layout-grid,
.gs-sub-layout-grid.gs-sidebar-right,
.gs-sp-hero-card,
.gs-contact-main-grid {
grid-template-columns: 1fr;
}
.gs-sub-sidebar {
order: 2;
}
.gs-sub-product-grid,
.gs-sub-product-grid.gs-grid-4,
.gs-partner-showcase-grid,
.gs-contact-offices-grid,
.gs-about-kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.gs-sub-hero-box,
.gs-custom-order-notice,
.gs-chromagar-spotlight-banner,
.gs-article-cta-footer {
flex-direction: column;
align-items: flex-start;
padding: 16px;
}
.gs-sub-hero-title,
.gs-sp-title,
.gs-article-h1 {
font-size: 20px;
}
.gs-sub-product-grid,
.gs-sub-product-grid.gs-grid-4,
.gs-partner-showcase-grid,
.gs-contact-offices-grid,
.gs-about-kpi-grid,
.gs-about-pillars-grid,
.gs-sp-guarantees {
grid-template-columns: 1fr;
}
.gs-sp-hero-card,
.gs-sp-details-card {
padding: 15px;
}
.gs-sp-main-img-box {
height: 250px;
}
.gs-sp-cta-buttons {
flex-direction: column;
}
.gs-inline-cat-search {
width: 100%;
}
.gs-inline-cat-search input {
min-width: 0;
flex: 1;
}
} .gs-colony-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 700;
padding: 4px 10px;
border-radius: 99px;
background: #F0F7FF;
color: #0F3558;
border: 1px solid #C8E1F8;
}
.gs-colony-dot {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 1px 3px rgba(0,0,0,0.2);
}
.gs-order-ref-box {
background: #F4F9FE;
border: 1.5px solid #C5E0F8;
border-left: 4px solid #1678CE;
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 16px;
}
.gs-order-ref-title {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #1678CE;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.gs-order-ref-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 6px 14px;
}
.gs-order-ref-list li {
font-size: 13px;
font-weight: 700;
color: #0F2942;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
background: #FFFFFF;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid #DCEBFA;
} .gs-sp-chromagar-body {
font-size: 15px;
line-height: 1.72;
color: #1E293B;
}
.gs-sp-chromagar-body h3,
.gs-sp-chromagar-body p > strong > span[style*="150%"],
.gs-sp-chromagar-body p > span[style*="150%"] > strong {
display: inline-block;
font-size: 20px !important;
font-weight: 800 !important;
color: #0F2942 !important;
text-transform: uppercase;
letter-spacing: 0.03em;
margin: 18px 0 12px;
padding: 6px 18px;
background: linear-gradient(90deg, #EAF4FE 0%, #F8FBFF 100%);
border-left: 4px solid #F07020;
border-radius: 0 10px 10px 0;
}
.gs-sp-chromagar-body .box-image-box,
.gs-sp-chromagar-body .ux-image-box {
background: #F8FBFF;
border: 1.5px solid #D5E8FA;
border-radius: 16px;
padding: 18px 16px;
text-align: center;
height: 100%;
box-shadow: 0 6px 18px rgba(15, 41, 66, 0.05);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gs-sp-chromagar-body .box-image-box:hover {
transform: translateY(-3px);
box-shadow: 0 12px 26px rgba(22, 120, 206, 0.12);
border-color: #2090D0;
}
.gs-sp-chromagar-body .box-image-box .box-image img {
max-height: 150px;
width: auto;
margin: 0 auto 10px;
border-radius: 12px;
object-fit: contain;
}
.gs-sp-chromagar-body .box-image-box h4 {
font-size: 16px !important;
font-weight: 800 !important;
color: #0F2942 !important;
margin: 8px 0 4px !important;
}
.gs-sp-chromagar-body .vce-col--lg-33-33p,
.gs-sp-chromagar-body .performance-wrap {
background: #F8FBFF;
border: 1px solid #D5E8FA;
border-top: 3px solid #2090D0;
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 16px;
}
.gs-sp-chromagar-body .performance-detail a {
color: #1678CE !important;
font-weight: 800;
text-decoration: none !important;
pointer-events: none;
}
.gs-sp-chromagar-body .related-doc-img img,
.gs-sp-chromagar-body .related-cert-img img {
max-width: 54px !important;
height: auto !important;
margin: 8px auto !important;
display: block;
}
.gs-sp-chromagar-body .related-doc-title a,
.gs-sp-chromagar-body .related-cert-title a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: #1678CE;
color: #FFFFFF !important;
font-size: 13px;
font-weight: 700;
padding: 7px 16px;
border-radius: 99px;
text-decoration: none !important;
margin-top: 6px;
transition: background 0.2s ease;
}
.gs-sp-chromagar-body .related-doc-title a:hover,
.gs-sp-chromagar-body .related-cert-title a:hover {
background: #F07020;
} .gs-site-wrapper button,
.gs-site-wrapper input[type="text"],
.gs-site-wrapper input[type="search"],
.gs-site-wrapper input[type="tel"],
.gs-site-wrapper input[type="email"],
.gs-site-wrapper select,
.gs-modal-backdrop button,
.gs-modal-backdrop input[type="text"],
.gs-modal-backdrop input[type="tel"],
.gs-modal-backdrop input[type="email"],
.gs-modal-backdrop select {
margin-bottom: 0 !important;
text-transform: none !important;
line-height: 1.35 !important;
min-height: 0 !important;
box-shadow: none !important;
}
.gs-inline-cat-search {
display: flex !important;
align-items: center !important;
margin-bottom: 0 !important;
}
.gs-inline-cat-search button {
white-space: nowrap !important;
flex-shrink: 0 !important;
padding: 8px 14px !important;
}
.gs-header-search {
margin-bottom: 0 !important;
}