/*MAIN COMMON CSS*/
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
font-size: 16px;
/* ── Color Palette ─────────────────────────────────────── */
--c-charcoal: #1e2a38; /**#222222; #304050;**/
--c-white-on-charcoal: #c8d1dc;
--c-logo-blue:#005cad;
--c-gold: #f17901;
--c-gray-blue: #4f5d75;
--c-white: #fff;
--c-light-grey: #E8E8E8;
--c-light-grey2: #e4e4e7;
--c-gray-feature: #4a4a4a;
--c-light-blue: #90c4f5;
--c-deep-blue: #1b4275;
--c-orange: #f17901;
--c-dark-grey: #70737c;
--c-teal: #3d9970;
--c-black: #000000;
--c-blue: #1550bd; /*#1550bd; #4a90e2;*/
--c-sidebar-black: #555555;
--c-silver-blue: #ebf1fc;
--c-blue-grey: #f7fafe;
--c-slate: #475569;
--c-border-mid: #94a3b8; /* mid-tone border — section headers */
--c-red-dis:#b30000;
--c-green-adv:#006b00;
--c-metric-warm: #fff4e7;
/* ── Semantic UI Colors ────────────────────────────────── */
--c-hover-bg: #f5f5f5; /* hover background for cards/options */
--c-input-bg: #ffffff; /* form input backgrounds */
--c-accent-warm: #ffeae7; /* key-competitor highlight bg */
--c-calc-highlight: #ffe6e6; /* calc block error/warning row highlight */
--c-pricing-qc: #e2eff9; /* pricing row tint — quality control */
--c-pricing-iqc: #d4e8f7; /* pricing row tint — incoming quality (lighter) */
--c-pricing-sc: #dce4f0; /* pricing row tint — supply chain (subdued) */
--c-pricing-qms: #fde8c8; /* pricing row tint — QMS (warm, stands out) */
--c-pricing-qc-open: #cce0f5;
--c-pricing-iqc-open: #bdd8f0;
--c-pricing-sc-open: #c8d4e8;
--c-pricing-qms-open: #f9d9a8;
/* ── Type Scale ────────────────────────────────────────── */
--text-xs: 0.8rem; /* captions, tier labels, verify links */
--text-sm: 0.9rem; /* secondary descriptions, small labels */
--text-base: 1rem; /* body/UI default, table cells */
--text-md: 1.1rem; /* body copy, form labels */
--text-lg: 1.2rem; /* nav items, CTA buttons, card titles */
--text-xl: 1.4rem; /* feature labels, section emphasis */
/* ── Spacing Scale ─────────────────────────────────────── */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
/* ── Line Heights (unitless) ───────────────────────────── */
--lh-tight: 1.2; /* headings, compact UI */
--lh-ui: 1.5; /* UI labels, nav, secondary text */
--lh-body: 1.7; /* body copy */
}
body {
margin: 0;
}
.material-symbols-outlined {
vertical-align: middle;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
}
h1, h2, h3, h4, h5, p{
display: block;
padding: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
h1,h2,h3,h4,h5{
font-family: "Roboto", sans-serif;
}
p{
font-family: "Roboto", sans-serif;
}
ol, ul {
display: block;
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
padding-inline-start: 2rem;
unicode-bidi: isolate;
}
ol > ul {
margin-block-start: 0;
margin-block-end: 0;
}
ol>li, ul>li, li {
margin-top: 0.5rem;
}
/*--- FONT SIZES and LINE HEIGHTS (Base - Desktop 1440px+) ----------------------*/
h1{font-size: 2.7rem; line-height: 3.2rem; font-weight: 600; letter-spacing: -0.03em;}
h2{font-size: 2.1rem; line-height: 2.5rem; font-weight: 700; letter-spacing: -0.02em;}
h3{font-size: 1.7rem; line-height: 2.3rem; font-weight: 600; letter-spacing: -0.01em;}
h4{font-size: 1.3rem; line-height: 1.9rem; font-weight: 600;}
h5{font-size: 1.2rem; line-height: 1.75rem; font-weight: 600;}
p {font-size: 1.1rem; line-height: 1.85rem; font-weight: 400; color:var(--c-slate);}
a {font-size: 1.1rem; line-height: 1.85rem; font-weight: 400; color:var(--c-slate); text-decoration: none;}
li{font-size: 1.1rem; line-height: 1.85rem; font-weight: 400; color:var(--c-slate);}
/* for a link within a paragraph or within a list */
p>a, li>a {
font-size: 1.1rem;
line-height: 1.85rem;
font-weight: 400;
text-decoration: underline;
color: var(--c-blue);
text-decoration-color: var(--c-blue);
text-underline-offset: 0.2rem;
}
/*--- FONT SIZES for max-width 1536px (Windows 125% on 1920px = 1536 CSS px) ---*/
@media all and (max-width: 1536px) {
h1 {font-size: 2.35rem; line-height: 3.0rem; font-weight: 600; letter-spacing: -0.03em;}
h2 {font-size: 1.75rem; line-height: 2.3rem; font-weight: 700; letter-spacing: -0.02em;}
h3 {font-size: 1.6rem; line-height: 2.2rem; font-weight: 600; letter-spacing: -0.01em;}
h4 {font-size: 1.35rem; line-height: 1.9rem; font-weight: 600;}
h5 {font-size: 1.25rem; line-height: 1.7rem; font-weight: 600;}
p {font-size: 1.05rem; line-height: 1.75rem; font-weight: 400; color: var(--c-slate);}
a {font-size: 1.05rem; line-height: 1.75rem; font-weight: 400; color: var(--c-slate); text-decoration: none;}
li {font-size: 1.05rem; line-height: 1.75rem; font-weight: 400; color: var(--c-slate);}
p > a, li > a, td > a {
font-size: 1.05rem;
line-height: 1.75rem;
font-weight: 400;
text-decoration: underline;
color: var(--c-blue);
text-decoration-color: var(--c-blue);
text-underline-offset: 0.2rem;
}
}
/*--- FONT SIZES for max-width 1280px ----------------------*/
@media all and (max-width: 1280px) {
h1 {font-size: 2.0rem; line-height: 2.8rem; font-weight: 600;}
h2 {font-size: 1.55rem; line-height: 2.2rem; font-weight: 700;}
h3 {font-size: 1.4rem; line-height: 2.1rem; font-weight: 600;}
h4 {font-size: 1.2rem; line-height: 1.8rem; font-weight: 600;}
p {font-size: 1.0rem; line-height: 1.65rem; font-weight: 400; color: var(--c-slate);}
a {font-size: 1.0rem; line-height: 1.65rem; font-weight: 400; color: var(--c-slate); text-decoration: none;}
li {font-size: 1.0rem; line-height: 1.65rem; font-weight: 400; color: var(--c-slate);}
p > a, li > a, td > a {
font-size: 1.0rem;
line-height: 1.65rem;
font-weight: 400;
text-decoration: underline;
color: var(--c-blue);
text-decoration-color: var(--c-blue);
text-underline-offset: 0.2rem;
}
}
/*--- FONT SIZES for max-width 768px ----------------------*/
@media all and (max-width: 768px) {
h1 {font-size: 2.2rem; line-height: 2.8rem; font-weight: 600;}
h2 {font-size: 1.7rem; line-height: 2.3rem; font-weight: 700;}
h3 {font-size: 1.3rem; line-height: 1.8rem; font-weight: 600;}
h4 {font-size: 1.15rem; line-height: 1.65rem; font-weight: 600;}
}
/*--- FONT SIZES for max-width 480px ----------------------*/
@media all and (max-width: 480px) {
h1 {font-size: 2.0rem; line-height: 2.6rem; font-weight: 600;}
h2 {font-size: 1.6rem; line-height: 2.2rem; font-weight: 700;}
}
/*---- NAVIGATION UPPER, LOWER ---------------------------------*/
nav {
position: sticky;
top: 0;
z-index: 100;
}
.main-nav{
display: grid;
grid-template-columns: .5fr 2fr 10fr .5fr;
grid-template-rows: auto;
grid-column-gap: 0;
grid-template-areas:
"empty-left-1 nav-upper nav-upper empty-right-1"
"empty-left-2 logo nav-lower empty-right-2";
}
/*----Upper Navigation Structure -----------------------------------------*/
.empty-left-1 {
grid-area: empty-left-1;
background: var(--c-charcoal);
}
.empty-right-1 {
grid-area: empty-right-1;
background: var(--c-charcoal);
}
.nav-upper {
grid-area: nav-upper;
background: var(--c-charcoal);
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0;
}
/*---Sign-Up and Sign-In buttons ------------------------------------*/
.nav-upper .sign-up,
.sign-in {
min-width: 6rem;
margin: 0.5rem 0.5rem;
padding: .5rem 1rem;
font-size: 1rem;
font-weight: 500;
border: 2px solid;
border-radius: 2px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
text-align: center;
display: flex;
}
.nav-upper .sign-up {
border-color: var(--c-orange);
background-color: var(--c-charcoal);
color: var(--c-white);
margin-right: 1rem;
}
.nav-upper .sign-up:hover {
background-color: var(--c-orange);
text-decoration: none;
}
.sign-in {
border-color: var(--c-teal);
background-color: var(--c-charcoal);
color: var(--c-white);
align-items: center;
justify-content: center;
}
.sign-in:hover,
.sign-in.active {
background-color: var(--c-teal);
}
.sign-in .material-symbols-outlined {
font-size: 2rem;
transition: transform 0.3s ease;
vertical-align: middle;
}
.sign-in:hover .material-symbols-outlined {
transform: rotate(180deg);
}
/* Sign In Dropdown Container */
.sign-in-dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Menu */
.sign-in-menu {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
background: var(--c-white);
border-radius: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
min-width: 320px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.sign-in-dropdown:hover .sign-in-menu,
.sign-in-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Menu Options Container */
.sign-in-options {
padding: 0.5rem;
}
/* Individual Sign-In Option */
.sign-in-option {
display: flex;
align-items: center;
gap: 0;
padding: 0.5rem;
border-radius: 2px;
text-decoration: none;
color: var(--c-charcoal);
transition: all 0.2s ease;
cursor: pointer;
border: 1px solid var(--c-light-grey);
}
.sign-in-option:hover {
background: var(--c-hover-bg);
transform: translateX(4px);
}
/* Icon styling */
.sign-in-option .material-symbols-outlined {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.6rem;
}
.sign-in-option.general .material-symbols-outlined {
color: var(--c-blue);
}
.sign-in-option.validated .material-symbols-outlined {
color: var(--c-teal);
}
.sign-in-option.fedramp .material-symbols-outlined {
color: var(--c-deep-blue);
}
/* Content area for text */
.sign-in-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.sign-in-content h4 {
font-size: var(--text-md);
font-weight: 600;
color: var(--c-charcoal);
margin: 0;
}
.sign-in-content p {
font-size: var(--text-sm);
color: var(--c-dark-grey);
margin: 0;
line-height: var(--lh-ui);
}
/*---Lower Nav ------------------------------------*/
.logo {
grid-area: logo;
display: flex;
background: var(--c-white);
flex-direction: row;
justify-content: left;
align-items: center;
padding: 0.5rem;
border-bottom: solid 01px var(--c-charcoal);
}
.logo img {
display: block;
max-height: 3.2rem;
max-width: 100%;
}
.empty-left-2 {
grid-area: empty-left-2;
background: var(--c-white);
border-bottom: solid 01px var(--c-charcoal);
}
.empty-right-2 {
grid-area: empty-right-2;
background: var(--c-white);
border-bottom: solid 01px var(--c-charcoal);
}
.nav-lower {
grid-area: nav-lower;
display: flex;
background: var(--c-white);
flex-direction: row;
line-height: 3.2rem;
align-items: center;
border-bottom: solid 01px var(--c-charcoal);
}
.nav-lower a.nav-lower-main {
display: inline-flex;
align-items: center;
font-style: normal;
font-size: 1.3rem;
font-weight: 500;
text-decoration: none;
border-bottom: solid 3px transparent;
padding: 0 1rem;
height: 100%;
color: var(--c-charcoal);
transition: all 0.3s ease;
white-space: nowrap;
}
.nav-lower-main{
text-align: center;
}
.nav-lower a:link,
.nav-lower a:visited {
color: var(--c-charcoal);
}
.nav-lower a:hover {
text-decoration: none;
border-bottom: solid 3px var(--c-charcoal);
}
.nav-lower a:active {
text-decoration: none;
border-bottom: solid 3px var(--c-charcoal);
}
.nav-lower a.active {
text-decoration: none;
border-bottom: solid 3px var(--c-logo-blue);
}
.nav-lower a.active:hover {
text-decoration: none;
border-bottom: solid 3px var(--c-logo-blue);
}
/* Prevent dropdown triggers from inheriting active underline */
.nav-lower a.products-nav {
text-decoration: none;
}
.nav-lower a.products-nav:hover {
text-decoration: none;
border-bottom: solid 3px var(--c-charcoal);
}
.main-nav {
position: relative;
}
.nav-lower .horizontal {
position: relative;
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
flex-wrap: nowrap;
height: 100%;
}
.nav-lower .horizontal > * {
flex: 0 0 auto;
text-align: center;
min-width: 0;
}
/* Prevent text-align center from bleeding into dropdown menus */
.products-menu,
.resources-menu,
.industries-menu {
text-align: left;
}
.nav-item {
position: relative;
display: inline-block;
}
/* Products Dropdown Container */
.products-dropdown {
position: relative;
display: inline-block;
}
.products-nav {
font-style: normal;
font-size: 1.2rem;
font-weight: 500;
text-decoration: none;
border-bottom: solid 3px transparent;
padding: 0 1rem;
height: 100%;
color: var(--c-charcoal);
transition: all 0.3s ease;
cursor: pointer;
display: inline-flex;
align-items: center;
white-space: nowrap;
flex-wrap: nowrap;
}
.products-nav:link,
.products-nav:visited {
color: var(--c-charcoal);
text-decoration: none;
}
.products-nav:hover {
text-decoration: underline;
text-underline-offset: 0.2rem;
}
.products-nav .material-symbols-outlined {
font-size: 1.4rem;
padding: 0;
transition: transform 0.3s ease;
vertical-align: middle;
line-height: 0;
}
.products-dropdown:hover .products-nav .material-symbols-outlined {
transform: rotate(180deg);
}
/* Products Dropdown Menu */
.products-menu {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
background: var(--c-white);
border-radius: 4px;
box-shadow: 2px 10px 24px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.products-dropdown:hover .products-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.products-solutions {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "products-left products-right";
grid-template-rows: auto;
height: auto;
align-items: baseline;
margin: 0;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.products-left {
grid-area: products-left;
padding: 0 1rem;
}
.products-right {
grid-area: products-right;
padding: 0 1rem;
}
.products-left a{
font-size: var(--text-lg);
display: block;
padding: 0.5rem 0;
}
.products-left p{
font-size: var(--text-sm);
color: var(--c-dark-grey);
margin: 0;
line-height: var(--lh-ui);
}
.products-options a:link,
.products-options a:visited,
.solutions-options a:link,
.solutions-options a:visited{
color: var(--c-deep-blue);
}
.products-options a:hover,
.solutions-options a:hover{
text-decoration: underline;
text-underline-offset: 0.3rem;
}
.products-options a:active,
.solutions-options a:active{
text-decoration: underline;
text-underline-offset: 0.2rem;
}
.products-options a.active:hover,
.solutions-options a.active:hover{
text-decoration: underline;
}
/* Individual Product Option */
.products-option {
display: flex;
align-items: center;
padding: 0.75rem 1.25rem;
border-radius: 4px;
text-decoration: none;
color: var(--c-charcoal);
transition: all 0.2s ease;
cursor: pointer;
border-left: 3px solid transparent;
}
.products-option:hover {
background: var(--c-hover-bg);
border-left-color: var(--c-logo-blue);
}
/* Content area for text */
.products-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.products-content h4 {
font-size: var(--text-lg);
font-weight: 600;
color: var(--c-blue);
margin: 0;
line-height: var(--lh-tight);
}
.products-content p {
font-size: var(--text-sm);
color: var(--c-dark-grey);
margin: 0;
line-height: var(--lh-ui);
}
.industries-menu {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
background: var(--c-white);
border-radius: 4px;
box-shadow: 2px 10px 24px rgba(0, 0, 0, 0.15);
min-width: 30rem;
max-width: 36rem;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.resources-dropdown {
position: relative;
display: inline-block;
}
.resources-menu {
position: absolute;
top: calc(100% + 0.5rem);
left: auto; /* Reset the default left alignment */
right: 0; /* Align the right edge of the menu to the right edge of the link */
padding: 1rem .5rem;
background: var(--c-white);
border-radius: 4px;
box-shadow: 2px 10px 24px rgba(0, 0, 0, 0.15);
min-width: 20rem;
max-width: 25rem;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.resources-dropdown:hover .products-nav .material-symbols-outlined {
transform: rotate(180deg);
}
.resources-dropdown:hover .resources-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.resources-content p {
font-size: var(--text-sm);
color: var(--c-dark-grey);
margin: 0;
line-height: var(--lh-ui);
}
.resources-content h4{
font-size: var(--text-md);
color: var(--c-charcoal);
margin: 0;
line-height: var(--lh-tight);
white-space: nowrap;
}
/* ── NEW NAV MENUS ─────────────────────────────────────────── */
/* Products menu: wider to accommodate two-column card layout */
/* Overrides the existing .products-menu min/max-width */
.products-menu {
min-width: 56rem;
max-width: 64rem;
padding: 1.25rem;
}
/* Two-column grid inside the products menu */
.nav-menu-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, auto);
gap: .75rem;
align-items: stretch;
}
/* Product card — reuses sign-in-option pattern: border, hover bg, transition */
.nav-product-card {
display: flex;
flex-direction: column;
gap: .3rem;
padding: .85rem 1rem;
border-radius: 4px;
border: 1px solid var(--c-light-grey);
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
font-weight: 600;
}
.nav-product-card:hover {
background-color: var(--c-blue-grey);
border-color: var(--c-logo-blue);
text-decoration: none;
}
.nav-product-card-qms {
grid-column: 2;
grid-row: 1;
}
.nav-product-card-mfg {
grid-column: 1;
grid-row: 1;
}
.nav-product-card-iqc {
grid-column: 1;
grid-row: 2;
}
.nav-product-card-sq {
grid-column: 1;
grid-row: 3;
}
}
.nav-card-title {
font-size: 1.15rem;
font-weight: 600;
color: var(--c-blue);
line-height: 1.4;
}
.nav-card-desc {
font-size: 1rem;
font-weight: 400;
color: var(--c-slate);
line-height: 1.5;
}
.nav-card-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .15rem .5rem;
margin-top: .25rem;
padding-top: .35rem;
border-top: 1px solid var(--c-light-grey);
}
.nav-card-link {
display: flex;
align-items: center;
gap: .35rem;
font-size: 0.9rem;
color: var(--c-blue);
text-decoration: none;
padding: .05rem 0;
transition: color 0.15s ease;
}
.nav-card-link .material-symbols-outlined {
font-size: 1rem;
color: var(--c-blue);
flex-shrink: 0;
line-height: 1;
}
.nav-card-link:hover {
color: var(--c-deep-blue);
text-decoration: underline;
text-underline-offset: .15rem;
}
/* Override global nav-lower a:link/visited for new menu items */
.nav-lower .nav-product-card:link,
.nav-lower .nav-product-card:visited {
color: var(--c-blue);
}
.nav-lower .nav-card-link:link,
.nav-lower .nav-card-link:visited {
color: var(--c-blue);
}
.nav-lower .nav-industry-card:link,
.nav-lower .nav-industry-card:visited {
color: var(--c-blue);
}
.nav-lower .nav-resource-title {
color: var(--c-blue);
}
/* Suppress active-page underline on industry and resource cards */
.nav-lower .nav-industry-card.active,
.nav-lower .nav-industry-card:active,
.nav-lower .nav-resource-card.active,
.nav-lower .nav-resource-card:active,
.nav-lower .nav-product-card .nav-card-title.active {
text-decoration: none;
}
.nav-lower .nav-product-card:hover,
.nav-lower .nav-product-card:hover *,
.nav-lower .nav-industry-card:hover,
.nav-lower .nav-resource-card:hover,
.nav-lower .nav-resource-card:hover * {
text-decoration: none;
}
/* Keep underline on the sub-solution links only */
.nav-lower .nav-card-link:hover {
text-decoration: underline;
text-underline-offset: .15rem;
}
/* ── Industries menu ───────────────────────────────────────── */
/* Wider than the old single-column list */
/* 2-column grid of industry cards — now single column flex, same as resources */
/* Shared list layout for Industries and Resources menus */
.nav-industries-grid,
.nav-resources-list {
display: flex;
flex-direction: column;
gap: .6rem;
}
/* Industry card — clean, name only, consistent with sign-in-option */
.nav-industry-card {
display: block;
padding: .6rem .85rem;
border-radius: 4px;
border: 1px solid var(--c-light-grey);
font-size: 1.15rem;
font-weight: 500;
color: var(--c-blue);
text-decoration: none;
transition: all 0.2s ease;
}
.nav-industry-card:hover {
background-color: var(--c-blue-grey);
border-color: var(--c-logo-blue);
color: var(--c-logo-blue);
text-decoration: none;
transform: translateX(3px);
}
/* ── Resources menu ────────────────────────────────────────── */
/* Styled to match the sign-in dropdown which the client likes */
.nav-resource-card {
display: flex;
flex-direction: column;
gap: .15rem;
padding: .6rem .85rem;
border-radius: 4px;
border: 1px solid var(--c-light-grey);
text-decoration: none;
color: var(--c-charcoal);
transition: all 0.2s ease;
cursor: pointer;
}
.nav-resource-card:hover {
background-color: var(--c-hover-bg);
transform: translateX(4px);
text-decoration: none;
}
.nav-resource-title {
font-size: 1.15rem;
font-weight: 500;
color: var(--c-blue);
line-height: 1.3;
}
.nav-resource-desc {
font-size: 1rem;
color: var(--c-dark-grey);
line-height: 1.5;
}
/* Mobile adjustments */
/* At 1280px the two-column grid starts feeling tight — reduce padding */
@media all and (max-width: 1280px) {
.products-menu {
min-width: 44rem;
max-width: 52rem;
}
.nav-product-card {
padding: .7rem .85rem;
}
.nav-card-title {
font-size: 1.05rem;
}
.nav-card-desc {
font-size: 0.85rem;
}
}
/* At 1024px collapse the two-column grid to a single column */
@media all and (max-width: 1024px) {
.products-menu {
min-width: 26rem;
max-width: 32rem;
}
.nav-menu-grid {
grid-template-columns: 1fr;
}
}
@media all and (max-width: 768px) {
.products-dropdown,
.resources-dropdown {
display: none;
}
}
/* The Dropdown button for navigation*/
.dropbtn {
position: relative;
display: none;
border: none;
margin-left: 1rem;
margin-right: 1rem;
padding: 1rem;
font-size: var(--text-lg);
font-weight: 500;
text-decoration: none;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-nav {
display: none;
position: absolute;
right: 0;
background-color: var(--c-white);
width: 18rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
z-index: 1;
padding: 1rem;
margin-left: 1rem;
margin-right: 1rem;
transition: all ease-in-out 400ms;
-webkit-transition: all ease-in-out 400ms;
}
.dropdown-nav a {
background-color: var(--c-white);
color: var(--c-charcoal);
padding: 0.5rem;
text-decoration: none;
font-size: var(--text-base);
font-weight: 500;
}
.dropdown-nav a:any-link {
background-color: var(--c-white);
color: var(--c-charcoal);
padding: 0.5rem;
text-decoration: none;
font-size: var(--text-base);
font-weight: 500;
}
button {
background-color: var(--c-white);
padding: 0;
margin: 0;
font-size: var(--text-xl);
font-weight: 500;
}
.drop {
background-color: var(--c-white);
width: 18rem;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
z-index: 1;
padding: 1rem;
margin-left: 1rem;
margin-right: 1rem;
}
/* Footer */
.footer-nav{
display: grid;
/* 0.5fr (empty) | 3fr (content 1) | 3fr (content 2) | 3fr (content 3) | 3fr (content 4) | 0.5fr (empty) */
grid-template-columns: .5fr 3fr 3fr 3fr 3fr .5fr;
grid-template-rows: auto;
grid-column-gap: 0;
grid-template-areas:
"empty-left-3 footer-col1 footer-col2 footer-col3 footer-col4 empty-right-3"
"empty-left-4 copyright copyright copyright copyright empty-right-4"; /* Spanning copyright over 4 columns */
}
/* New CSS for the new grid areas - will replace existing .footer-left and .footer-right */
.footer-col1 {
grid-area: footer-col1;
background-color: var(--c-charcoal);
padding: 1rem 1rem;
}
.footer-col2 {
grid-area: footer-col2;
background-color: var(--c-charcoal);
padding: 1rem 1rem;
}
.footer-col3 {
grid-area: footer-col3;
background-color: var(--c-charcoal);
padding: 1rem 1rem;
}
.footer-col4 li {
min-height: 24px;
}
.footer-col4 li a {
justify-self: start;
line-height: 1.2;
display: inline-block;
}
.footer-col4 .material-symbols-outlined {
padding-right: 0.625rem;
padding-top: 0.25rem;
}
.contact-header {
color: var(--c-white);
font-size: var(--text-lg);
margin-top: 1.25rem;
display: block;
}
.social-row img {
width: 1.125rem;
height: 1.125rem;
margin-right: 1rem;
padding-top: 0.2rem;
filter: invert(1);
}
.foot {
background-color: var(--c-charcoal);
padding: 1rem 1rem;
}
.foot a:link{
color: var(--c-white);
text-decoration: none;
}
.foot a:visited {
color: var(--c-white);
text-decoration: none;
}
.foot a:hover {
color: var(--c-white);
border-bottom: solid 1px var(--c-white);
text-decoration: none;
}
.foot a:active{
color: var(--c-white);
border-bottom: solid 1px var(--c-white);
text-decoration: none;
}
.foot ul{
padding-inline-start: 0;
}
.foot li{
list-style: none;
color: var(--c-white);
padding: var(--space-sm) var(--space-md);
margin: 0;
}
.foot p{
color: var(--c-white);
text-decoration: none;
padding: var(--space-sm) var(--space-md);
margin: 0;
}
.copyright {
grid-area: copyright;
text-align: right;
background-color: var(--c-charcoal);
color: var(--c-white);
font-size: var(--text-base);
padding: 1rem 2rem;
border-top: solid 01px var(--c-light-grey);
}
.empty-left-3{
grid-area: empty-left-3;
background-color: var(--c-charcoal);
}
.empty-right-3{
grid-area: empty-right-3;
background-color: var(--c-charcoal);
}
.empty-left-4{
grid-area: empty-left-4;
background-color: var(--c-charcoal);
}
.empty-right-4{
grid-area: empty-right-4;
background-color: var(--c-charcoal);
}
/*--- NEW: 1024px Breakpoint for Tablets ------------------------------------*/
@media all and (max-width: 1024px) {
/* Switch to mobile navigation at tablet size */
.nav-lower .horizontal{
display:none;
}
.dropbtn{
position: relative;
display: block;
font-size: var(--text-lg);
}
.nav-lower{
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.dropdown-nav a{
display: block;
background-color: var(--c-white);
color: var(--c-charcoal);
padding: 0.5rem;
text-decoration: none;
font-size: var(--text-base);
font-weight: 500;
}
/* Switch to mobile navigation at tablet size */
.dropdown-nav {
max-height: 80vh;
overflow-y: auto;
}
.dropdown-nav a {
border-bottom: 1px solid var(--c-light-grey);
}
.dropdown-nav a:last-child {
border-bottom: none;
}
/* Scale down feature tiles */
.solution-tile {
height: 7rem;
width: 7rem;
}
/* Three columns become two */
.three-block{
grid-template-columns: 1fr 1fr;
grid-template-areas:
"left-three-block middle-three-block"
"right-three-block right-three-block";
}
/* Customer logos scale down */
.customer-logo{
height: 7rem;
width: 7rem;
}
.logo img {
max-height: 2.4rem;
}
}
/*--- Navigation: 1536px (Windows 125% scaling) ------------------------------------*/
@media all and (max-width: 1536px) {
.main-nav {
grid-template-columns: 0.25fr 2.5fr 10fr 0.25fr;
}
.nav-lower a.nav-lower-main {
font-size: 1.15rem;
padding: 0 0.75rem;
}
.products-nav {
font-size: 1.1rem;
padding: 0 0.75rem;
}
.nav-upper .sign-up, .sign-in {
font-size: 0.95rem;
padding: 0.4rem 0.85rem;
}
.products-menu {
min-width: 35rem;
max-width: 43rem;
}
.products-content h4 {
font-size: 1.1rem;
}
.products-content p {
font-size: 0.85rem;
}
.footer-nav {
grid-template-columns: 0.25fr 3fr 3fr 3fr 3fr 0.25fr;
}
}
@media all and (max-width: 1280px) {
.footer-nav {
/* 2x2 grid for content */
grid-template-columns: 6fr 6fr;
grid-template-areas:
"footer-col1 footer-col2"
"footer-col3 footer-col4"
"copyright copyright";
}
.empty-left-3, .empty-right-3,
.empty-left-4, .empty-right-4 {
display: none;
}
.nav-upper a {
font-size: 1.0rem;
}
.nav-lower a.nav-lower-main {
font-size: 1.1rem;
padding: 0 0.6rem;
}
.main-nav{
display: grid;
grid-template-columns: 0.5fr 4fr 8fr 0.5fr;
grid-template-rows: auto;
grid-column-gap: 0;
grid-template-areas:
"empty-left-1 nav-upper nav-upper empty-right-1"
"empty-left-2 logo nav-lower empty-right-2";
}
}
@media all and (max-width: 768px) {
.footer-nav{
/* Single column for content */
grid-template-columns: 1fr;
grid-template-areas:
"footer-col1"
"footer-col2"
"footer-col3"
"footer-col4"
"copyright";
padding: 0 1rem;
}
/* Hide upper nav on mobile */
.nav-upper a{
display:none;
}
}
/* PRODUCT PAGE STRUCTURE ---------------------------------*/
.container-product {
display: grid;
grid-template-columns: .5fr 12fr .5fr;
grid-template-rows: auto;
grid-column-gap: 1rem;
grid-template-areas:
". headline ."
". shortcuts ."
". customers ."
". testimonials ."
". products-block ."
". article-block ."
". big-block ."
". case-study ."
". supporting ."
". faq .";
height: auto;
margin-bottom: 1rem;
}
.products-block{
grid-area: products-block;
}
.customers{
grid-area: customers;
}
.solution-link{
border: 1px solid var(--c-light-grey);
}
.solution-link:link{
display: block;
min-width: 20rem;
max-width: 50%;
width: auto;
height: auto;
line-height: 2.0rem;
text-align: left;
cursor: pointer;
padding: 1rem 0.5rem;
margin: 1rem 1rem;
font-weight: 400;
font-size: 1.2rem;
color: var(--c-charcoal);
background-color: var(--c-white);
border-radius: .2em;
}
.solution-link:hover {
color: var(--c-blue);
text-decoration: underline;
text-underline-offset: 0.2rem;
}
.solution-link:visited {
color: var(--c-charcoal);
}
.block-shadow {
}
/*--Article Quality Academy --*/
.article-block{
grid-area: article-block;
display: grid;
grid-template-columns: 1.5fr 10fr 1.5fr;
grid-template-rows: auto;
grid-template-areas:
". article .";
height: auto;
}
.article{
grid-area: article;
margin: auto auto;
padding: 1rem 1rem;
}
.article-body{
max-width: 960px;
margin: 0 auto 2.5rem auto;
border: none;
border-radius: 0;
padding: 0;
}
.center-block {
border: solid 01px var(--c-light-grey);
padding: 1rem 2rem;
margin: 2rem 1rem;
}
.article>img{
display: block;
margin: 1rem auto;
max-width: 90%;
padding: 1rem 1rem;
border: solid 01px var(--c-light-grey);
}
.article-body p {
font-size: 1.15rem;
line-height: 1.95rem;
text-align: left;
font-weight: 400;
color: var(--c-slate);
margin-bottom: 1rem;
padding: 0;
}
.article h2{
font-size: 2rem;
font-weight: 600;
color: var(--c-deep-blue);
margin: 1.5rem 0 0.35rem 0;
padding: 0 0 0.4rem 0;
border-bottom: 2px solid var(--c-border-mid);
}
.article h3{
font-size: 1.45rem;
font-weight: 600;
color: var(--c-blue);
margin: 1.1rem 0 0.3rem 0;
padding: 0;
}
.article h4{
font-size: 1.2rem;
font-weight: 600;
color: var(--c-slate);
margin: 0.9rem 0 0.25rem 0;
padding: 0;
}
.article li{
font-size: 1.15rem;
line-height: 1.85rem;
color: var(--c-slate);
text-align: left;
margin-bottom: 0.4rem;
padding-left: 0.25rem;
}
.article ul, .article ol {
margin: 0.75rem 0 1rem 1.5rem;
}
p.article-img-description {
text-align: center;
font-size: var(--text-base);
color: var(--c-charcoal);
}
p.article-lede {
font-size: 1.25rem;
line-height: 2rem;
color: var(--c-charcoal);
font-weight: 400;
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--c-border-mid);
}
.ol.article {
display: block;
list-style-type: decimal;
margin-block-start: 1rem;
margin-block-end: 1rem;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 1.5rem;
font-size: var(--text-lg);
}
.headline{
grid-area: headline;
display: grid;
grid-template-columns: 6fr 6fr;
grid-template-rows: auto;
grid-column-gap: 1rem;
grid-template-areas:
"headline-image headline-text";
height: auto;
}
.headline-text {
grid-area: headline-text;
display: flex;
flex-direction: column;
justify-content: center;
}
h2.descriptor{
font-size: 1.7rem;
line-height: 2.3rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--c-deep-blue);
}
@media all and (max-width: 768px) {
h2.descriptor { font-size: 1.3rem; line-height: 1.8rem; font-weight: 600; }
}
@media all and (max-width: 480px) {
h2.descriptor { font-size: 1.1rem; line-height: 1.5rem; font-weight: 600; }
}
h1.product-name{
font-size: 3.2rem;
line-height: 3.8rem;
color: var(--c-blue);
padding: 1rem 0;
}
.headline-text p {
text-align: justify;
padding-bottom: 1rem;
font-weight: 400;
font-size: 1.2rem;
line-height: 1.9rem;
}
.headline-image {
grid-area: headline-image;
display: flex;
justify-content: center;
align-items: center;
max-height: 720px;
min-height: 480px;
padding: 2rem 2rem;
}
.headline-image img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.nav-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.nav-section, .nav-links a {
pointer-events: auto;
position: absolute;
text-decoration: none;
color: var(--c-slate);
transition: color 0.3s ease;
}
.manufacturing {
top: 5%;
left: 5%;
}
.nav-links a:nth-child(1) { top: 25%; left: 5%; }
.nav-links a:nth-child(2) { top: 35%; left: 5%; }
.nav-links a:nth-child(3) { top: 45%; left: 5%; }
.nav-links a:nth-child(4) { top: 55%; left: 5%; }
.nav-links a:nth-child(5) { top: 65%; left: 5%; }
.nav-links a:nth-child(6) { top: 75%; left: 5%; }
.management {
bottom: 5%;
left: 5%;
}
.main-link {
font-size: var(--text-xl);
font-weight: bold;
margin-bottom: 0.25rem;
color: var(--c-charcoal);
text-decoration: none;
display: block;
}
.subtitle {
font-size: var(--text-sm);
color: var(--c-dark-grey);
margin: 0;
}
.main-link:hover, .nav-links a:hover {
color: var(--c-logo-blue);
}
.nav-section, .nav-links {
z-index: 10;
}
/* CTA Buttons */
.cta {
width: 100%;
max-width: 40rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
padding: 1rem 1rem 1rem 0rem;
}
.cta .dropdown {
display: block;
margin: 0;
min-width: 0;
}
.cta .dropdown .btn {
width: 100%;
box-sizing: border-box;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 2px;
font-weight: 500;
margin: 0;
white-space: nowrap;
}
.btn-default-trial {
background-color: var(--c-charcoal);
color: var(--c-white);
padding: 0.85rem 1.5rem;
font-size: 1rem;
text-decoration: none;
text-align: center;
border-radius: 2px;
border: 2px solid var(--c-orange);
}
.btn-default-trial:hover {
background-color: var(--c-orange);
color: var(--c-white);
text-decoration: none;
}
.dropdown{
position: relative;
display: inline-block;
margin-right: 1rem;
}
.btn-default-reviews {
background-color: var(--c-charcoal);
color: var(--c-white);
padding: 0.85rem 1.5rem;
font-size: 1rem;
text-decoration: none;
text-align: center;
border-radius: 2px;
border: 2px solid var(--c-teal);
cursor: pointer;
gap: 0.25rem;
}
.btn-default-reviews .material-symbols-outlined{
font-size: 1.1rem;
font-weight: 700;
font-variation-settings: 'FILL' 1;
vertical-align: middle;
display: inline-block;
line-height: 1;
}
.btn-default-reviews:hover {
background-color: var(--c-gray-blue);
color: var(--c-white);
text-decoration: none;
}
.btn-default-reviews:active {
background-color: var(--c-gray-blue);
color: var(--c-white);
}
/* outlined buttons */
.btn-outline {
display: inline-block;
border-radius: .2em;
font-weight: 500;
min-width: 8rem;
max-width: 12rem;
width: auto;
height: auto;
line-height: 2.0rem;
text-align: center;
background-color: var(--c-white);
color: var(--c-charcoal);
padding: 0.5rem 1rem;
margin-right: var(--space-md);
border: 1px solid var(--c-charcoal);
}
.btn-primary {
border-color: solid 2px var(--c-blue);;
background-color: var(--c-white);
color: var(--c-charcoal);
}
.btn-outline:hover, .btn-outline:active, .btn-primary:hover {
background-color: var(--c-blue);
color: var(--c-white);
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: block;
opacity: 0;
visibility: hidden;
position: absolute;
background-color: var(--c-white);
box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.15);
z-index: 1;
padding: 0.75rem;
width: 14rem;
transform: translateY(-6px);
transition: all 0.2s ease;
border: solid 1px var(--c-light-grey);
border-radius: 2px;
box-sizing: border-box;
}
.dropdown-content a {
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--c-charcoal);
padding: 0.4rem 0.5rem;
text-decoration: none;
font-size: var(--text-sm);
border-radius: 2px;
}
/* Show dropdown on click via reviews-open class */
.reviews-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Keep hover as fallback for non-JS */
.dropdown:hover .dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-content a:hover {
background-color: var(--c-hover-bg);
color: var(--c-charcoal);
text-decoration: none;
}
.show {
display:block;
}
.star-color{
padding-top: 0.2rem;
color: var(--c-gold);
font-size: var(--text-base);
letter-spacing: 0.2rem;
text-align: right;
font-variation-settings: 'FILL' 1;
vertical-align: middle;
}
.feature{
height: auto;
border: solid 01px var(--c-light-grey);
border-radius: 2%;
padding: 1rem;
margin-bottom: 1rem;
}
/*common standard header and section header -----------------------------*/
.std-header {
grid-area: headline;
width: 100%;
color: var(--c-deep-blue);
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
margin: 2rem 0 1rem 0;
}
.std-header h1 {
font-size: 2.4rem;
line-height: 3rem;
color: var(--c-deep-blue);
}
.section-header {
display: flex;
align-items: stretch;
margin: 1rem 0;
overflow: hidden;
border: 2px solid var(--c-border-mid);
background-color: transparent;
}
.section-header h2,
.section-header h3 {
flex: 1;
padding: 1rem 1rem;
margin: 0;
font-weight: 600;
letter-spacing: -0.01em;
text-align: center;
color: var(--c-deep-blue);
}
/*two-column block --------------------*/
.big-block{
grid-area: big-block;
min-width: 0;
}
/*three-column layout --------------------*/
.three-block{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-column-gap: 1rem;
grid-template-areas:
"left-three-block middle-three-block right-three-block";
height: auto;
}
.left-three-block{
grid-area: left-three-block;
padding: 2rem 2rem;
margin: 1rem 0.5rem;
border: solid 1px var(--c-light-grey);
border-radius: .2rem;
}
.middle-three-block{
grid-area: middle-three-block;
padding: 2rem 2rem;
margin: 1rem 0.5rem;
border: solid 1px var(--c-light-grey);
border-radius: .2rem;
}
.right-three-block{
grid-area: right-three-block;
padding: 2rem 2rem;
margin: 1rem 0.5rem;
border: solid 1px var(--c-light-grey);
border-radius: .2rem;
}
.left-three-block p, .right-three-block p, .middle-three-block p{
text-align: justify;
padding: 0.2rem 0;
}
.left-three-block li, .right-three-block li, .middle-three-block li{
text-align: justify;
padding: 0.2rem 0;
list-style-type: square;
}
.left-three-block h4, .right-three-block h4, .middle-three-block h4{
padding: 0.2rem 0 0.3rem 0;
}
.overview{
h4{
font-size: 1.3rem;line-height: 1.8rem; font-weight: 500;
}
p{
font-size: 1.1rem; line-height: 1.6rem; font-weight: 400; color:var(--c-slate);
}
}
.solution{
background-color: var(--c-white);
border: solid .5px var(--c-gray-blue);
border-radius: .2rem;
h4{
color: var(--c-blue);
}
}
/*two-column layout - not balanced --------------------*/
.block-not-bal {
display: grid;
grid-template-columns: 5fr 7fr;
grid-template-rows: auto;
grid-column-gap: 1rem;
height: auto;
align-items: center; /* NEW: Vertically centers left-block */
}
/*two-column layout - balanced -------------------*/
.block-bal {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-column-gap: 2rem;
height: auto;
align-items: stretch; /*will make both child divs stretch to match the height of the tallest one*/
}
.left-block-bal,
.right-block-bal {
border: solid 01px var(--c-light-grey);
padding: 1rem 2rem;
margin: 2rem 1rem;
}
.case-study .block-bal {
margin: 1rem 0;
padding: 1rem 0;
align-items: center;
}
.case-study .left-block-bal{
border: none;
padding: 1rem 1rem;
margin: 1rem 0;
}
.case-study .right-block-bal{
border: none;
padding: 1rem 1rem;
margin: 1rem 0;
}
.right-block-bal {
overflow: hidden;
}
.left-block-bal>img, .right-block-bal>img{
width: 100%;
}
.block-bal p{
text-align: justify;
padding: 0.2rem 0;
}
.block-bal li{
text-align: justify;
padding: 0.1rem 0;
}
.block-bal h4{
color: var(--c-blue);
padding: 0.5rem 0;
}
.feature-summary .btn{
margin-top: 1rem;
padding: 0.25rem 0.25rem;
}
/* Feature group grid - cleaner alignment */
.feature-group {
padding: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: space-evenly;
gap: 0;
margin: 0;
}
.solution-tile {
height: 9rem;
width: 9rem;
padding: 0.5rem 0.5rem;
background-color: var(--c-silver-blue); /*--default values - will be changed by nth selector later --*/
border: solid 1px var(--c-slate);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-shrink: 0;
margin: 1rem 1rem;
}
.home-page .block-not-bal:nth-child(odd) {
background-color: var(--c-blue-grey); /* Light blue-grey */
}
.home-page .block-not-bal:nth-child(even) {
background-color: var(--c-white);
}
/* Feature tiles in alternating sections - HOME PAGE ONLY */
.home-page .block-not-bal:nth-child(even) .solution-tile {
background-color: var(--c-white);
border-color: var(--c-slate);
}
/* ODD sections: Slate theme - HOME PAGE ONLY */
.home-page .block-not-bal:nth-child(odd) .solution-tile {
border-color: var(--c-slate);
}
.home-page .block-not-bal:nth-child(odd) .feature-bullet {
background-color: var(--c-slate);
border-color: var(--c-slate);
color: var(--c-white);
}
.home-page .block-not-bal:nth-child(odd) .feature-title {
color: var(--c-slate);
}
/* EVEN sections: Blue theme - HOME PAGE ONLY */
.home-page .block-not-bal:nth-child(even) .feature-bullet {
background-color: var(--c-blue);
border-color: var(--c-blue);
color: var(--c-white);
}
.home-page .block-not-bal:nth-child(even) .feature-title {
color: var(--c-blue);
}
.solution-tile h4 {
font-size: 1.1rem;
margin: auto;
}
.feature-summary {
max-width: 100%;
margin: 1rem 0.5rem;
padding: 1rem 1rem;
border: solid 1px var(--c-light-grey);
}
.product-summary {
max-width: 100%;
margin: 1rem 0.5rem;
padding: 1rem 1rem;
border: solid 1px var(--c-light-grey);
}
.feature-bullet {
display: inline-block;
font-weight: 500;
border: solid 01px var(--c-light-grey);
background-color: var(--c-blue);
color: var(--c-white);
height: 2rem;
width: 2rem;
border-radius: 2%;
text-align: center;
padding: 0.2rem;
}
.product-bullet {
display: inline-block;
font-weight: 500;
border: solid 01px var(--c-light-grey);
background-color: var(--c-blue);
color: var(--c-white);
height: 2rem;
width: 2rem;
border-radius: 2%;
text-align: center;
padding: 0.2rem;
}
.solution-tile{
text-align: center;
}
.feature-group-name {
text-align: left;
padding: 0.2rem 0;
background-color: var(--c-teal);
}
/*guide tables ------------------*/
.guide table {
/* Use the table selector directly instead of wrapping in .guide */
border-collapse: collapse;
width: 100%;
margin: 1.5rem 0; /* Add more vertical space */
border: 1px solid var(--c-light-grey);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Soft shadow for depth */
}
.guide th, .guide td {
border: 1px solid var(--c-light-grey);
padding: 1rem 0.75rem; /* Increased padding */
text-align: left; /* Align text left for better readability */
color: var(--c-charcoal); /* Darker text for better contrast */
font-size: var(--text-base);
line-height: var(--lh-ui);
}
.guide th {
background-color: var(--c-deep-blue);
color: var(--c-white);
font-weight: 600;
text-align: center;
padding: 1rem 0.75rem;
font-size: 1.1rem;
}
/* Zebra striping for easy row distinction */
.guide tr:nth-child(even) {
background-color: var(--c-blue-grey); /* Lightest blue for alternating rows */
}
.guide tr:hover {
background-color: var(--c-light-grey2); /* Subtle hover effect */
}
.guide td:first-child {
font-weight: 500;
}
/* Center text for the Verification column content */
.guide td:last-child {
text-align: center;
}
.guide caption {
font-size: var(--text-xl);
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--c-blue);
}
.guide .legend {
margin: 0.625rem 0;
font-size: var(--text-sm);
color: var(--c-gray-feature);
}
.calc {
border: solid 1px var(--c-light-grey);
padding: 0.5rem 0.5rem;
margin: 1rem 0;
background-color: var(--c-blue-grey);
h4{
font-size: 1.2rem;
}
p, li {
font-size: 1.1rem;
}
table {
border-collapse: collapse;
width: 100%;
margin: 1rem 0;
}
th, td {
border: 1px solid var(--c-light-grey);
padding: 0.5rem;
text-align: center;
}
th {
background-color: var(--c-hover-bg);
}
.highlight {
background-color: var(--c-calc-highlight);
}
}
/* formula block for guide pages ----------------------- */
.formula{
border: solid 0.1rem var(--c-light-grey);
background-color: var(--c-blue-grey);
padding: 1rem 1rem;
margin-top: 0.5rem;
p {
font-weight: 500;
}
}
/* comparison table for vs-competitor pages ----------------------- */
.comparison table {
margin-top: 1rem;
width: 100%;
}
.comparison .table-col-1 {
width: 20%;
}
.comparison .table-col-2 {
width: 38%;
}
.comparison .table-col-3 {
width: 42%;
}
.comparison table,
.comparison th,
.comparison td {
border-collapse: collapse;
}
.comparison table th {
background-color: var(--c-deep-blue);
color: var(--c-white);
text-align: left;
font-weight: 600;
font-size: var(--text-xl);
padding: 2rem 0.5rem;
}
.comparison table td {
border: 1px solid var(--c-light-grey);
padding: 1rem 0.5rem;
}
.comparison .category {
color: var(--c-charcoal);
font-size: 1.2rem;
line-height: 1.7rem;
font-weight: 500;
}
.comparison .disadvantage {
color: var(--c-red-dis);
font-size: 1.2rem;
line-height: 1.7rem;
font-weight: 500;
}
.comparison .advantage {
color: var(--c-green-adv);
font-size: 1.2rem;
line-height: 1.7rem;
font-weight: 500;
}
.comparison tr:nth-child(even) {
background-color: var(--c-blue-grey);
}
/* testimonials ----------------------- */
.testimonials{
grid-area: testimonials;
}
/* Testimonials: 2-column grid, tightened spacing */
.testimonials-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 1rem;
height: auto;
}
.testimonials-grid > div {
padding: .75rem 1.25rem;
margin: .4rem 0;
border: solid 01px var(--c-light-grey);
}
.game-changer {
display: flex;
flex-direction: column;
justify-content: center;
}
.game-changer h3 {
color: var(--c-blue);
font-weight: 600;
}
.game-changer h4 {
color: var(--c-blue);
font-weight: 600;
margin-bottom: .35rem;
}
.game-changer p {
font-weight: 400;
font-size: var(--text-md);
line-height: var(--lh-body);
margin: 0;
}
.reviewer p {
font-size: var(--text-base);
line-height: var(--lh-ui);
text-align: right;
padding: .25rem 0 0 0;
color: var(--c-slate);
}
.game-changer-star {
font-size: 0.85rem;
letter-spacing: .1em;
text-align: right;
padding: .2rem 0 0 0;
color: var(--c-gold);
font-weight: 700;
font-variation-settings: 'FILL' 1;
}
.game-changer-star .material-symbols-outlined {
font-variation-settings: 'FILL' 1;
}
.game-changer img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* faq */
.faq{
grid-area: faq;
}
.faq h4 {
color: var(--c-blue);
}
/* supporting */
.supporting{
grid-area: supporting;
}
.benefits {
color: var(--c-blue);
font-weight: bold;
}
/* customer short list ----------------*/
.customer-short-list{
grid-area: customers;
}
/*horizontal line separator*/
hr {
display: block;
height: 1px;
border: 0;
border-top: solid 01px var(--c-light-grey);
margin: 1rem 0;
}
/*------- pdf drawing ballooning page ---*/
.balloon{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.dwg{
width: 18rem;
display: inline-block;
margin: 0.5rem;
padding: 1rem;
text-align: center;
background-color: var(--c-white);
border: solid 01px var(--c-light-grey);
height: auto;
}
.dwg h4{
text-align: center;
padding: .5rem .5rem;
}
.dwg p{
color: var(--c-charcoal);
text-align: justify;
margin: 1rem;
}
.dwg img{
height: 2rem;
margin: 0;
padding: 0;
}
.magnify img{
height: 4rem;
}
.case-study{
grid-area: case-study;
}
.case-study-block{
margin: 1rem 0;
padding: 1rem 0;
align-items: center;
border-bottom: 1px solid var(--c-light-grey);
}
.case-study-block:last-child {
border-bottom: none;
}
.case-study-block .case-title {
margin-bottom: 1rem;
line-height: var(--lh-ui);
}
.case-study-block .left-block-bal{
border: none;
}
.case-study-block .right-block-bal{
border: none;
}
.key-metric {
color: var(--c-charcoal);
background-color: var(--c-metric-warm);
padding: 0.5rem 0.75rem;
margin: var(--space-sm) -0.75rem;
display: block;
line-height: var(--lh-body);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-weight: 500;
}
.case-video {
background-color: var(--c-white);
border: none;
padding:56.25% 0 0 0;
display: flex;
justify-content: center;
align-items: center;
position:relative;
}
.case-video iframe {
border: none;
position:absolute;
top: 0;
left: 0;
width:100%;
height:100%
}
.case-image {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
}
.case-image img{
max-width: 100%;
height: auto;
}
.case-title{
margin-bottom: 1rem;
color: var(--c-blue)
}
.case-button .btn{
margin: 0.5rem 0;
}
.beta {
color: var(--c-red-dis);
}
.highlight p{
padding-top: 0.75rem;
padding-bottom: 0;
line-height: var(--lh-body);
}
.highlight img{
max-width: 100%;
}
/* Filter Dropdowns - reusing products dropdown pattern */
.filter-section {
grid-area: shortcuts;
background: var(--c-white);
margin: 0;
display: flex;
gap: 1rem;
align-items: start;
justify-content: flex-end;
}
.filter-dropdown {
position: relative;
display: inline-block;
flex: 0 0 auto;
max-width: 30rem;
}
.filter-dropdown-btn {
font-size: 1.2rem;
font-weight: 500;
text-decoration: none;
padding: 0.75rem 1.5rem;
min-width: 20rem;
color: var(--c-charcoal);
background: var(--c-white);
border: 2px solid var(--c-light-grey);
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.filter-dropdown-btn:hover {
border-color: var(--c-logo-blue);
background: var(--c-light-grey);
}
.filter-dropdown-btn .material-symbols-outlined {
font-size: 2rem;
transition: transform 0.3s ease;
}
.filter-dropdown:hover .filter-dropdown-btn .material-symbols-outlined {
transform: rotate(180deg);
}
.filter-dropdown-menu {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
background: var(--c-white);
border-radius: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
min-width: 100%;
max-width: 400px;
max-height: 400px;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.filter-dropdown:hover .filter-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.filter-dropdown-options {
padding: 0.5rem;
}
.filter-dropdown-option {
display: block;
padding: 0.75rem 1rem;
border-radius: 4px;
text-decoration: none;
color: var(--c-gray-feature);
font-size: 1.1rem;
transition: all 0.2s ease;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.filter-dropdown-option:hover {
background: var(--c-light-grey);
color: var(--c-charcoal);
}
.filter-dropdown-option.active {
background: var(--c-silver-blue);
color: var(--c-blue);
font-weight: 600;
}
/* supporting (easy to use, lightning fast secure ...)----------------------- */
.supporting{
grid-area: supporting;
}
/* customer short list ----------------*/
.customer-short-list{
grid-area: customers;
}
/* customer list ----------------------- */
.customer-long-list{
grid-area: big-block;
display: grid;
grid-template-columns: repeat(6, 1fr);
justify-items: center;
align-items: start;
}
.customer-list{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-evenly;
}
.logo-industry{
margin: 1.5rem 1.5rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.customer-logo{
height: 7rem;
width: 7rem;
padding: 0.5rem 0.5rem;
border: solid 1px var(--c-border-mid);
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
}
.customer-logo>img{
width: 100%;
max-height: 100%;
padding: 0 0;
margin: auto auto;
}
.label p{
text-align: center;
font-size: 0.75rem;
padding-top: .2rem;
}
/*product and feature -------------------*/
.feature-name {
display: inline-block;
grid-area: feature-name;
font-weight: 500;
text-align: left;
padding: 0.5rem 0.25rem;
vertical-align: middle;
line-height: 2rem;
}
.feature-number {
display: inline-block;
grid-area: feature-number;
font-weight: 500;
border: solid 01px var(--c-blue);
background-color: var(--c-blue);
color: white;
height: 2rem;
width: 2rem;
border-radius: 2%;
text-align: center;
padding: 0.2rem;
}
.feature-title{
padding-left: 0.5rem;
color: var(--c-blue);
}
.feature-desc{
display: block;
grid-area: feature-desc;
width: 100%;
text-align: justify;
color: var(--c-slate);
padding: 0.25rem 0.25rem;
}
/* Base styling for left-block and right-block */
.left-block {
padding: 1rem 1rem;
margin: 1rem 1rem;
}
.right-block {
padding: 1rem 1rem;
margin: 1rem 1rem;
overflow: hidden;
}
.left-block-bal, .right-block-bal {
h4 {
color: var(--c-blue);
font-weight: 600;
}
}
/*ballooning css ends */
.case-study{
grid-area: case-study;
}
.case-video {
background-color: var(--c-white);
border: none;
padding:56.25% 0 0 0; /*creates a 16:9 aspect ratio*/
display: flex;
justify-content: center;
align-items: center;
position:relative;
}
.case-video iframe {
border: none;
position:absolute;
top: 0;
left: 0;
width:100%;
height:100%
}
.case-image img{
max-width: 100%;
height: auto;
}
.case-title{
margin-bottom: 1rem;
color: var(--c-blue)
}
.beta {
color: var(--c-red-dis);
}
/*--- Windows 125% Scaling: 1536px ------------------------------------*/
@media all and (max-width: 1536px) {
.headline-image {
max-height: 640px;
}
.btn {
min-width: 0;
max-width: none;
}
.btn-default-trial, .btn-default-reviews {
font-size: 1.1rem;
padding: 0.8rem 0.5rem;
}
.solution-tile {
height: 7.5rem;
width: 7.5rem;
margin: 0.5rem 0.5rem;
}
.solution-tile h4 {
font-size: 1rem;
}
.logo-industry {
margin: 1rem 1rem;
}
.left-three-block, .middle-three-block, .right-three-block {
padding: 1.5rem 1.5rem;
}
.left-block-bal, .right-block-bal {
padding: 1rem 1.5rem;
margin: 1.5rem 0.75rem;
}
.article h2 {
font-size: 2.05rem;
}
.article h3 {
font-size: 1.6rem;
}
.article h4 {
font-size: 1.35rem;
}
.guide th {
font-size: 1.0rem;
padding: 0.8rem 0.55rem;
}
.guide th, .guide td {
font-size: 0.95rem;
line-height: 1.3rem;
}
.comparison table th {
font-size: 1.25rem;
padding: 1.35rem 0.5rem;
}
.comparison .category,
.comparison .disadvantage,
.comparison .advantage {
font-size: 1.1rem;
line-height: 1.55rem;
}
.std-header {
margin: 1.5rem 0;
}
.std-header h1 {
font-size: 1.9rem;
line-height: 2.4rem;
}
.section-header {
margin: 0.75rem 0;
}
.section-header h2,
.section-header h3 {
padding: 0.9rem 1rem;
}
.customer-long-list {
grid-template-columns: repeat(6, 1fr);
}
}
/*--- Tablet Breakpoint: 1024px ------------------------------------*/
@media all and (max-width: 1024px) {
.container-product {
grid-column-gap: 0.5rem;
}
.headline{
grid-column-gap: 0.5rem;
}
.three-block{
grid-template-columns: 1fr 1fr;
grid-column-gap: 0.5rem;
grid-template-areas:
"left-three-block middle-three-block"
"right-three-block right-three-block";
}
.left-three-block, .middle-three-block, .right-three-block {
margin: 0.5rem 0.5rem;
padding: 1.5rem 1.5rem;
}
.block-not-bal {
grid-column-gap: 0.5rem;
}
.block-bal {
grid-column-gap: 0.5rem;
}
.solution-tile {
height: 7rem;
width: 7rem;
}
.article-block {
grid-template-columns: .25fr 12fr .25fr;
}
.comparison .table-col-1 { width: 18%; }
.comparison .table-col-2 { width: 40%; }
.comparison .table-col-3 { width: 42%; }
.comparison table th {
font-size: 1.15rem;
padding: 1.25rem 0.5rem;
}
.comparison .category,
.comparison .disadvantage,
.comparison .advantage {
font-size: 1.05rem;
line-height: 1.5rem;
}
.shortcuts {
gap: 1rem;
}
.btn-shortcut {
font-size: 0.95rem;
padding: 0.85rem 0.85rem;
}
.filter-dropdown-btn {
font-size: 0.8rem;
font-weight: 500;
text-decoration: none;
padding: 0.5rem 1rem;
min-width: 13rem;
color: var(--c-charcoal);
background: var(--c-white);
border: 2px solid var(--c-light-grey);
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
}
.filter-dropdown-option{
font-size: 0.8rem;
}
.feature-image img {
max-width: 100%;
width: 100%;
height: auto;
}
}
/*--- Desktop/Laptop: 1280px ------------------------------------*/
@media all and (max-width: 1280px) {
.article-block{
grid-template-columns: .5fr 12fr .5fr;
}
.article{
margin: 1rem .5rem;
}
.cta {
grid-template-columns: 1fr;
max-width: 24rem;
padding-left: 1rem;
}
.right-block{
margin: 1rem 0.5rem;
overflow: hidden;
}
.left-block{
margin: 1rem 0.5rem;
}
.block-not-bal {
grid-template-columns: 1fr 1fr;
}
.feature{
display: grid;
grid-template-columns: 6fr;
grid-template-areas:
"feature-name"
"feature-desc";
height: auto;
border: solid 01px var(--c-light-grey);
border-radius: 2%;
padding: 1rem;
margin-bottom: 1rem;
}
.customer-long-list{
grid-template-columns: repeat(6, 1fr);
}
.logo-industry{
margin: 0.5rem 0.5rem;
}
.guide th, .guide td {
padding: 0.75rem 0.5rem;
}
.comparison table th {
font-size: 1.2rem;
padding: 1.25rem 0.5rem;
}
.comparison .category,
.comparison .disadvantage,
.comparison .advantage {
font-size: 1.05rem;
line-height: 1.5rem;
}
.calc {
padding: 0.5rem;
}
.formula {
padding: 0.85rem;
}
}
/*--- Tablet: 768px ------------------------------------*/
@media all and (max-width: 768px) {
.container-product {
grid-template-columns: 1rem 1fr 1rem;
grid-column-gap: 0;
padding: 0;
}
.testimonials-grid {
grid-template-columns: 1fr;
padding: 0 1rem;
}
.article{
margin: 0.75rem 0;
padding: 0.75rem;
}
.headline{
grid-template-columns: 12fr;
grid-column-gap: 0;
grid-template-areas:
"headline-image"
"headline-text";
}
.headline-text {
padding: 1rem 2rem;
text-align: center;
margin: 0.75rem 0;
}
.headline-image {
padding: 1rem;
margin: 0.75rem 0;
min-height: 360px;
}
.headline-image img {
padding: 1rem;
min-height: 360px;
}
h1.product-name {
font-size: 2.2rem;
line-height: 2.8rem;
}
.block-not-bal {
grid-template-columns: 12fr;
grid-column-gap: 0;
grid-template-areas:
"left-block"
"right-block";
}
.right-block {
margin: 0.75rem 0;
padding: 0.75rem;
}
.left-block {
margin: 0.75rem 0;
padding: 0.75rem;
}
.block-bal {
grid-template-columns: 12fr;
grid-column-gap: 0;
grid-template-areas:
"left-block-bal"
"right-block-bal";
}
.left-block-bal, .right-block-bal {
margin: 0.75rem 1rem;
}
.three-block{
grid-template-columns: 12fr;
grid-column-gap: 0;
grid-template-areas:
"left-three-block"
"middle-three-block"
"right-three-block";
}
.left-three-block, .middle-three-block, .right-three-block {
margin: 0.5rem 0;
padding: 1rem;
}
.testimonials-grid > div {
padding: 1rem 2rem;
margin: 0.4rem 1rem;
}
.cta {
grid-template-columns: 1fr;
max-width: 24rem;
gap: 0.75rem;
}
.btn-default-reviews, .btn-default-trial {
margin: 0;
font-size: 1rem;
padding: 0.75rem 0.5rem;
}
.feature-image {
width: 100%;
height: auto;
position: relative;
min-height: auto;
padding: 1rem 0;
}
.feature-image img {
max-width: 100%;
width: 100%;
height: auto;
}
.feature-number{
height: 2.5rem;
width: 2.5rem;
}
.solution-tile {
height: auto;
min-height: 5.5rem;
width: calc(50% - 1.2rem);
margin: 0.4rem;
padding: 0.6rem 0.5rem;
}
.solution-tile h4 {
font-size: 0.85rem;
line-height: 1.2rem;
}
.customer-logo{
height: 5.5rem;
width: 5.5rem;
}
.logo-industry{
margin: 0.75rem 1rem;
width: 6.5rem;
}
.case-text p{
font-size: 1rem;
line-height: 1.5rem;
font-weight: 500;
}
.article-body {
padding: 1rem 0.75rem;
margin-bottom: 1rem;
border-left: none;
border-right: none;
overflow-x: auto;
}
.article-body p {
font-size: 1.1rem;
text-align: left;
line-height: 1.85rem;
}
.guide {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.guide table {
min-width: 500px;
}
.guide th, .guide td {
min-width: 120px;
font-size: 0.9rem;
line-height: 1.25rem;
}
.comparison {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.comparison table {
min-width: 800px;
}
.comparison table th {
font-size: 1.0rem;
padding: 0.75rem 0.4rem;
}
.comparison table td {
padding: 0.6rem 0.4rem;
}
.comparison .category,
.comparison .disadvantage,
.comparison .advantage {
font-size: 0.9rem;
line-height: 1.35rem;
}
.calc {
padding: 0.4rem;
margin: 0.75rem 0;
}
.calc h4 {
font-size: 1.0rem;
}
.calc p, .calc li {
font-size: 0.95rem;
}
.calc table {
overflow-x: auto;
display: block;
}
.formula {
padding: 0.75rem;
word-break: break-word;
}
.formula p {
font-size: 1.0rem;
line-height: 1.5rem;
}
.center-block {
padding: 0.75rem;
margin: 0.75rem 0;
}
.key-metric {
padding: 0.75rem;
font-size: 1rem;
line-height: 1.6rem;
}
.shortcuts {
gap: 0.75rem;
}
.btn-shortcut {
font-size: 0.9rem;
padding: 0.75rem;
min-width: auto;
}
.filter-section {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.filter-dropdown {
max-width: 100%;
}
.filter-dropdown-btn {
min-width: auto;
width: 100%;
}
.std-header {
margin: 1rem 0;
padding: 0;
}
.std-header h1 {
font-size: 1.8rem;
line-height: 2.4rem;
}
.section-header {
margin: 0.75rem 1rem;
}
.section-header h2,
.section-header h3 {
padding: 0.75rem 0.75rem;
}
.customer-long-list {
grid-template-columns: repeat(4, 1fr);
}
.label p {
font-size: 0.75rem;
}
}
/*--- Mobile: 480px ------------------------------------*/
@media all and (max-width: 480px){
.container-product{
grid-template-columns: 1rem 1fr 1rem;
padding: 0;
}
.testimonials-grid {
grid-template-columns: 1fr;
padding: 0 1rem;
}
.article{
margin: 0.5rem 0;
padding: 0.5rem;
}
.headline-image {
min-height: 300px;
}
.headline-image img {
min-height: 270px;
}
h1.product-name {
font-size: 1.8rem;
line-height: 2.3rem;
}
.btn-shortcut {
min-width: 7rem;
padding: 0.75rem;
}
.cta {
grid-template-columns: 1fr;
max-width: 22rem;
gap: 0.5rem;
}
.btn-default-reviews, .btn-default-trial {
font-size: 0.9rem;
padding: 0.5rem 0.75rem;
}
.feature {
padding: 0.75rem;
margin: 0 0 0.75rem 0;
}
.feature-number {
height: 1.8rem;
width: 1.8rem;
}
.three-block .left-three-block,
.three-block .middle-three-block,
.three-block .right-three-block {
padding: 0.75rem;
margin: 0.5rem 0;
}
.customer-logo{
height: 4.5rem;
width: 4.5rem;
}
.logo-industry{
margin: 0.4rem 1rem;
width: 5.5rem;
}
.label p{
font-size: .65rem;
}
.left-block-bal, .right-block-bal {
padding: 1rem;
margin: 0.5rem 1rem;
}
.headline-text {
padding: 1rem;
}
.testimonials-grid > div {
padding: 1rem;
margin: 0.4rem 1rem;
}
.solution-tile {
height: auto;
min-height: 5rem;
width: calc(50% - 1rem);
padding: 0.5rem 0.4rem;
}
.solution-tile h4 {
font-size: 0.8rem;
line-height: 1.15rem;
}
.article-block {
grid-template-columns: 12fr;
}
.article-body {
padding: 0.75rem 0.5rem;
margin-bottom: 0.75rem;
border-left: none;
border-right: none;
border-top: none;
}
.guide table {
min-width: 100px;
}
.comparison table {
min-width: 800px;
}
.calc {
padding: 0.3rem;
margin: 0.5rem 0;
}
.formula {
padding: 0.5rem;
}
.formula p {
font-size: 0.9rem;
}
.center-block {
padding: 0.5rem;
margin: 0.5rem 0;
}
.key-metric {
padding: 0.5rem;
font-size: 0.95rem;
line-height: 1.5rem;
}
.std-header {
margin: 0.75rem 0;
padding: 0;
}
.std-header h1 {
font-size: 1.5rem;
line-height: 2.0rem;
}
.article h2 {
font-size: 1.55rem;
margin: 1.1rem 0 0.3rem 0;
}
.article h3 {
font-size: 1.25rem;
margin: 0.9rem 0 0.25rem 0;
}
.article h4 {
font-size: 1.1rem;
margin: 0.75rem 0 0.2rem 0;
}
.section-header {
margin: 0.5rem 1rem;
}
.section-header h2,
.section-header h3 {
padding: 0.65rem 0.75rem;
}
.customer-long-list {
grid-template-columns: repeat(3, 1fr);
}
}
/* -- PRICING PAGE STYLES --*/
/* ===========================================================*/
/* ── Outer wrapper ─────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
PRICING TABLE — Option C: named sub-containers
═══════════════════════════════════════════════════════════
Desktop grid areas per product-block:
[ pt-name ] [ pt-standard-block ] [ pt-enterprise-block ]
Mobile (480px) stacks:
[ pt-name ] ← product name + chevron
[ pt-standard-block ] ← Standard header label + price + detail
[ pt-enterprise-block] ← Enterprise header label + price + detail
═══════════════════════════════════════════════════════════ */
/* ── Outer wrap ────────────────────────────────────────────── */
.pt-wrap {
width: 100%;
box-sizing: border-box;
margin: .5rem auto 1.5rem auto;
max-width: 1440px;
padding: 0;
}
/* ── Column header row (desktop only) ──────────────────────── */
.pt-header-row {
display: grid;
grid-template-columns: 4fr 4fr 4fr;
column-gap: 1.5rem;
margin-bottom: 1rem;
}
.pt-cell-name-empty {
background: transparent;
border: 1px solid transparent;
}
/* ── Product block ──────────────────────────────────────────── */
.pt-product-block {
display: grid;
grid-template-columns: 4fr 4fr 4fr;
grid-template-areas: "name std ent";
column-gap: 1.5rem;
margin-bottom: 1rem;
align-items: start;
}
.pt-product-block:last-of-type {
margin-bottom: 0;
}
/* ── Named grid areas ───────────────────────────────────────── */
.pt-name {
grid-area: name;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.75rem 1.5rem;
cursor: pointer;
transition: background-color 0.15s ease;
border-radius: 0.2rem 0 0 0.2rem;
border: solid 1px var(--c-light-grey);
background-color: var(--c-white);
box-sizing: border-box;
min-height: 9rem;
}
.pt-name:hover {
filter: brightness(0.97);
}
.pt-name-qc { background-color: var(--c-pricing-qc); }
.pt-name-sc { background-color: var(--c-pricing-sc); }
.pt-name-qms { background-color: var(--c-pricing-qms); }
.pt-standard-block {
grid-area: std;
display: flex;
flex-direction: column;
min-width: 0;
}
.pt-enterprise-block {
grid-area: ent;
display: flex;
flex-direction: column;
min-width: 0;
}
/* ── Chevron ────────────────────────────────────────────────── */
.pt-chevron {
color: var(--c-logo-blue);
font-size: 2.2rem;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.pt-block-open .pt-chevron {
transform: rotate(180deg);
}
/* ── Summary hover ──────────────────────────────────────────── */
.pt-name:hover ~ .pt-standard-block .pt-cell-price,
.pt-name:hover ~ .pt-enterprise-block .pt-cell-price {
background-color: var(--c-hover-bg);
}
/* ── Price cell ─────────────────────────────────────────────── */
.pt-cell-price {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.75rem 1.5rem;
background-color: var(--c-white);
border: solid 1px var(--c-light-grey);
box-sizing: border-box;
flex-shrink: 0;
min-height: 9rem;
}
.pt-standard-block .pt-cell-price {
border-radius: 0;
}
.pt-enterprise-block .pt-cell-price {
border-radius: 0 0.2rem 0 0;
}
/* ── Detail panel ───────────────────────────────────────────── */
.pt-detail-panel {
display: none;
flex-direction: column;
border-top: none;
}
.pt-block-open .pt-detail-panel {
display: flex;
}
.pt-cell-detail {
padding: 1.5rem 1.75rem;
background-color: var(--c-blue-grey);
border: solid 1px var(--c-light-grey);
border-top: none;
box-sizing: border-box;
}
.pt-standard-block .pt-cell-detail {
border-radius: 0 0 0 0.2rem;
}
.pt-enterprise-block .pt-cell-detail {
border-radius: 0 0 0.2rem 0;
}
.pt-cell-detail-empty {
background-color: var(--c-white);
border: solid 1px transparent;
}
/* ── Price display ──────────────────────────────────────────── */
.pt-price-amount {
font-size: 2rem;
font-weight: 600;
color: var(--c-charcoal);
line-height: 1;
font-family: "Roboto", sans-serif;
}
.pt-price-call {
font-size: 1.8rem;
font-weight: 600;
color: var(--c-logo-blue);
line-height: 1;
font-family: "Roboto", sans-serif;
}
.pt-price-unit {
font-size: 1rem;
color: var(--c-slate);
line-height: 1.3rem;
margin-top: 0.2rem;
letter-spacing: -0.02em;
}
.pt-price-unit sup {
margin-left: 0.15em;
font-size: 0.65em; /* relative to parent font size */
vertical-align: super;
}
.pt-price-min {
font-size: var(--text-sm);
color: var(--c-dark-grey);
line-height: 1.3rem;
margin-top: 0.4rem;
letter-spacing: 0;
}
.pt-price-addon {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--c-white);
background-color: var(--c-border-mid);
padding: 0.1rem 0.35rem;
border-radius: 2px;
width: fit-content;
margin-bottom: 0.35rem;
}
.pt-price-half:has(.pt-price-addon) {
justify-content: flex-start;
padding-top: 0.75rem;
}
.pt-cell-price-split {
display: flex;
flex-direction: row;
padding: 0;
}
.pt-price-half {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem 1.1rem;
position: relative;
}
.pt-price-divider {
width: 1px;
background-color: var(--c-light-grey);
align-self: stretch;
}
/* ── Product name text ──────────────────────────────────────── */
.pt-product-name h3 {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 500;
color: var(--c-charcoal);
}
.pt-product-name p {
font-size: 1rem;
line-height: 1.5rem;
color: var(--c-slate);
margin-top: 0.1rem;
}
/* ── Column headers ─────────────────────────────────────────── */
.pt-cell-header {
padding: 1.75rem 1.5rem;
box-sizing: border-box;
border: solid 1px var(--c-light-grey);
}
.pt-cell-header-std {
background-color: var(--c-gray-blue);
border-radius: 0.2rem 0 0 0.2rem;
}
.pt-cell-header-ent {
background-color: var(--c-charcoal);
border-radius: 0 0.2rem 0.2rem 0;
}
.pt-cell-header-std h3,
.pt-cell-header-ent h3 {
color: var(--c-white);
font-size: 1.3rem;
line-height: 1.8rem;
}
.pt-hosting {
font-size: 1rem;
line-height: 1.4rem;
color: var(--c-white);
margin-top: 0.25rem;
padding-top: 0.4rem;
border-top: 1px solid rgba(255,255,255,0.25);
opacity: 0.9;
}
/* ── Tier label (inside detail) ─────────────────────────────── */
.pt-tier-label {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--c-dark-grey);
margin-bottom: .75rem;
}
/* ── Feature groups ─────────────────────────────────────────── */
.pt-feat-group {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--c-gray-blue);
margin: .4rem 0 0 0;
}
.pt-feat-group:first-of-type {
margin-top: 0;
}
.pt-feat-section {
margin-bottom: 0.25rem;
border-bottom: 1px solid var(--c-light-grey);
}
.pt-feat-section:last-of-type {
border-bottom: none;
}
.pt-ent-includes {
font-size: 1rem;
color: var(--c-gray-blue);
margin: 0 0 1rem 0;
padding: 0;
}
.pt-feat-group-hdr {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 0.6rem 0 0.4rem 0;
user-select: none;
}
.pt-feat-group-hdr:hover {
opacity: 0.75;
}
.pt-feat-group-hdr .pt-group-label {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--c-gray-blue);
}
.pt-feat-group-hdr .pt-group-toggle {
font-size: 1.1rem;
color: var(--c-border-mid);
transition: transform 0.15s ease;
flex-shrink: 0;
}
.pt-feat-section.pt-group-collapsed .pt-feat-group-hdr .pt-group-toggle {
transform: rotate(-90deg);
}
.pt-feat-section.pt-group-collapsed .pt-feat-list {
display: none;
}
.pt-feat-list {
list-style: none;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
}
.pt-feat-list li {
font-size: 0.95rem;
line-height: 1.7;
color: var(--c-charcoal);
padding: .25rem 0 .25rem 1.25rem;
margin-top: 0;
position: relative;
}
.pt-feat-list li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: .5rem;
height: .5rem;
border-radius: 50%;
background-color: var(--c-teal);
}
.pt-feat-list-ent li::before {
background-color: var(--c-logo-blue);
}
.pt-cta {
margin-top: 1.5rem;
}
.pt-cell-detail .btn {
min-width: 0;
max-width: 100%;
width: auto;
}
.pt-footnote {
margin-top: 1rem;
text-align: center;
padding: 0 1rem;
}
.pt-footnote {
margin-top: 1rem;
text-align: center;
padding: 0 1rem;
}
.pt-footnote.pt-cta-block {
padding: 1.5rem 1rem;
}
.pt-footnote.pt-cta-block .btn-default-trial {
padding: 1rem 4rem;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.02em;
display: inline-block;
}
/* ── Pricing footnote table ──────────────────────────────────── */
.pt-footnote-table {
margin: 2rem auto 1rem;
width: 100%;
max-width: 860px;
box-sizing: border-box;
}
.pt-footnote-table table {
border-collapse: collapse;
width: 100%;
border: 1px solid var(--c-light-grey);
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
table-layout: auto;
}
.pt-footnote-table th {
background-color: var(--c-silver-blue);
color: var(--c-deep-blue);
border: 1px solid var(--c-silver-blue);
font-size: var(--text-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
padding: 1rem 1rem;
text-align: left;
}
.pt-footnote-table td {
border: 1px solid var(--c-light-grey);
padding: 0.75rem 1rem;
font-size: var(--text-base);
line-height: var(--lh-body);
color: var(--c-charcoal);
vertical-align: top;
}
.pt-footnote-table td:first-child {
font-weight: 600;
color: var(--c-deep-blue);
white-space: nowrap;
width: 18%;
}
.pt-footnote-table tr:nth-child(even) td {
background-color: var(--c-blue-grey);
}
.pt-footnote-table tr:hover td {
background-color: var(--c-light-grey2);
}
.pt-footnote-table caption {
font-size: var(--text-xl); /* 1.4rem — same size as an h4 */
font-weight: 600;
color: var(--c-charcoal);
text-align: left;
padding: 0 0 0.6rem 0;
caption-side: top;
}
/* ── Responsive: 1024px ─────────────────────────────────────── */
@media all and (max-width: 1024px) {
.pt-product-name h3 { font-size: 1.1rem; line-height: 1.5rem; }
.pt-price-amount { font-size: 1.4rem; }
.pt-cell-detail { padding: 1rem 0.9rem; }
.pt-cell-header { padding: 0.8rem 1rem; }
.pt-cell-header h3 { font-size: 1.1rem; line-height: 1.6rem; }
.pt-hosting { font-size: 0.75rem; line-height: 1.1rem; }
.pt-name { padding: 0.8rem 1rem; }
.pt-cell-price { padding: 0.8rem 1rem; min-height: auto; }
.pt-price-half { padding: 0.8rem 1rem; }
}
/* ── Responsive: 768px ──────────────────────────────────────── */
@media all and (max-width: 768px) {
.pt-header-row { display: none; }
.pt-product-block {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"name name"
"std ent";
margin-bottom: 1.5rem;
}
.pt-name {
border-radius: 0.2rem 0.2rem 0 0;
min-height: auto;
}
/* Standard label bar — replaces hidden header row */
.pt-standard-block::before {
content: 'Standard';
display: block;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--c-slate);
background-color: transparent;
padding: 0.6rem 1.25rem 0.25rem;
}
/* Enterprise label bar — replaces hidden header row */
.pt-enterprise-block::before {
content: 'Enterprise';
display: block;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--c-slate);
background-color: transparent;
padding: 0.6rem 1.25rem 0.25rem;
}
.pt-cell-price-split { flex-direction: column; }
.pt-price-divider { width: auto; height: 1px; }
.pt-feat-list li { font-size: 0.95rem; }
/* Side padding so table doesn't touch screen edges */
.pt-wrap { padding: 0 1.5rem; }
.pt-footnote-table { padding: 0 1rem; }
/* Slate top border for visual separation between products */
.pt-product-block {
border-top: 2px solid var(--c-slate);
}
}
/* ── Responsive: 480px ──────────────────────────────────────── */
@media all and (max-width: 480px) {
.pt-wrap { padding: 0 1.5rem; }
.pt-footnote-table { padding: 0 1rem; }
.pt-product-block {
grid-template-columns: 1fr;
grid-template-areas:
"name"
"std"
"ent";
margin-bottom: 1.5rem;
border-left: 1px solid var(--c-light-grey);
border-right: 1px solid var(--c-light-grey);
border-bottom: 1px solid var(--c-light-grey);
border-radius: 0.2rem;
overflow: hidden;
}
.pt-name {
border-radius: 0;
min-height: auto;
padding: 0.85rem 1rem;
border: none;
border-bottom: 1px solid var(--c-light-grey);
}
.pt-standard-block,
.pt-enterprise-block {
display: flex;
flex-direction: column;
}
/* Standard label bar */
.pt-standard-block::before {
content: 'Standard';
display: block;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--c-slate);
background-color: transparent;
padding: 0.6rem 1rem 0.2rem;
}
/* Enterprise label bar */
.pt-enterprise-block::before {
content: 'Enterprise';
display: block;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--c-slate);
background-color: transparent;
padding: 0.6rem 1rem 0.2rem;
}
.pt-cell-price {
border-left: none;
border-right: none;
border-top: none;
padding: 0.35rem 1rem 0.6rem;
min-height: auto;
}
.pt-cell-detail {
border-left: none;
border-right: none;
}
.pt-cell-price-split { flex-direction: column; }
.pt-price-divider { display: none; }
.pt-chevron { font-size: 1.6rem; }
}
/* CSS FOR QUALITY ACADEMY LIST PAGE ---------------------------------*/
/* ================================================================*/
.container-courses{
display: grid;
grid-template-columns: 1fr 10fr 1fr;
grid-template-rows: auto;
grid-column-gap: 0;
grid-template-areas:
". headline ."
". courses .";
height: auto;
width: 100%;
}
.courses {
grid-area: courses;
margin: 2rem 0;
text-align: left;
}
.academy-intro{
border: solid 1px var(--c-border-mid);
border-radius: 0.3rem;
padding: 1.5rem;
margin-bottom: 2rem;
background-color: var(--c-blue-grey);
}
.academy-intro p {
font-size: 1.15rem;
line-height: 1.95rem;
color: var(--c-charcoal);
}
.chapter{
height: auto;
border: solid 1px var(--c-light-grey);
border-radius: 0.3rem;
padding: 1.25rem 1.5rem;
margin-bottom: 1.25rem;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-column-gap: 0;
grid-template-areas:
"title"
"content";
}
.title{
grid-area: title;
margin-bottom: 0.75rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--c-light-grey2);
}
.title h3{
font-size: 1.4rem;
line-height: 2rem;
font-weight: 500;
color: var(--c-deep-blue);
}
.title .feature-number {
margin-right: 0.4rem;
}
.content{
grid-area: content;
padding-top: 0.4rem;
padding-left: 3rem;
}
.content p{
line-height: 2rem;
font-size: 1.1rem;
margin: 0.25rem 0;
}
.content a{
font-size: 1.1rem;
color: var(--c-blue);
display: inline-block;
transition: color 0.2s ease;
}
.content a:hover {
color: var(--c-orange);
}
@media all and (max-width:768px){
.courses{
margin: 0 1rem;
}
.chapter {
padding: 1rem;
}
.content a {
font-size: 1.05rem;
line-height: 1.8rem;
}
}
@media all and (max-width:480px){
.courses{
margin: 0 0.5rem;
}
.title h3 {
font-size: 1.2rem;
line-height: 1.75rem;
}
}
/* CSS FOR SIGN-UP PAGE ---------------------------------*/
.container-sign-up{
display: grid;
grid-template-columns: .5fr 6fr 6fr .5fr;
grid-template-rows: auto;
grid-column-gap: 1rem;
grid-template-areas:
". headline headline ."
". reqd awards ."
". forms awards .";
height: auto;
}
.submit button {
grid-area: submit;
border: 2px solid var(--c-orange);
padding: 1rem 4rem; /* was 0.85rem 1.5rem */
background-color: var(--c-charcoal);
color: var(--c-white);
font-size: 1.1rem; /* was 1rem */
font-weight: 500;
text-decoration: none;
text-align: center;
margin: 1rem auto;
display: block;
border-radius: .2em;
cursor: pointer;
}
.captcha {
grid-area: captcha;
text-align: center;
margin:1rem auto;
display:block;
}
form {
grid-area: forms;
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 0.5rem;
grid-template-rows:auto;
grid-template-areas:
"fname lname"
"company company"
"phone phone"
"email email"
"message message"
"captcha captcha"
"submit submit";
max-width: 100%;
border: 2px solid var(--c-light-grey);
border-radius: 3px;
padding: 1rem 1rem;
margin: 1rem 0.5rem;
}
.awards{
grid-area: awards;
margin: auto auto;
padding: 2rem 2rem;
}
.awards img{
max-width: 100%;
}
.awards h3{
padding: .5rem .5rem;
}
.awards h4{
padding: .5rem .5rem;
}
.reqd{
margin-left:0.5rem;
margin-right: 0.5rem;
grid-area:reqd;
}
.reqd p{
display: block;
color: var(--c-red-dis);
}
p#message_error {
color: var(--c-red-dis);
font-weight: 500;
}
form label {
font-size: var(--text-lg);
line-height: var(--lh-ui);
font-weight: 400;
display: block;
padding-bottom: 0.3rem;
}
.fname{
grid-area:fname;
margin: 0.5rem 0.5rem;
}
.lname{
grid-area:lname;
margin: 0.5rem 0.5rem;
}
.company{
grid-area:company;
margin: 0.5rem 0.5rem;
}
.country{
grid-area:country;
margin: 0.5rem 0.5rem;
}
.phone{
grid-area:phone;
margin: 0.5rem 0.5rem;
}
.email{
grid-area:email;
margin: 0.5rem 0.5rem;
}
.captcha-check{
grid-area:captcha-check;
margin: 0.5rem 0.5rem;
}
.captcha-image{
grid-area:captcha-image;
margin: 0.5rem 0.5rem;
}
.submit{
grid-area:submit;
}
.message{
grid-area:message;
margin: 0.5rem 0.5rem;
}
/* Full-width input fields */
input[type=text] {
border: solid 1px var(--c-border-mid);
background: var(--c-input-bg);
display: block;
padding: .8rem;
box-sizing: border-box;
width: 100%;
border-radius: 4px;
}
input[type=text]:focus {
outline: 2px solid var(--c-logo-blue);
outline-offset: 0;
border-color: var(--c-logo-blue);
background: var(--c-white);
}
select {
flex-grow: 1;
border: solid 1px var(--c-border-mid);
background: var(--c-white);
display: block;
box-sizing: border-box;
height: 3.1rem;
font-size: 1.1rem;
line-height: 1.32em;
font-weight: 500;
border-radius: 4px;
}
/* Add a background color when the inputs get focus */
select:focus {
background: var(--c-white);
border: solid 01px var(--c-light-grey);
display: block;
box-sizing: border-box;
}
input{
font-size: 1rem;
line-height: 1.32em;
font-weight: 500
}
textarea {
display: block;
width: 100%;
font-size: var(--text-base);
line-height: var(--lh-ui);
font-weight: 400;
background: var(--c-input-bg);
border: solid 1px var(--c-light-grey);
padding: .8rem;
border-radius: 4px;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
transform: translate(-50%, -50%);
z-index: 100;
width: 90%;
max-width: 540px;
background-color: var(--c-white);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,0.16);
}
/* Modal Content/Box */
.modal-content {
background-color: var(--c-white);
padding: 2rem;
border: solid 1px var(--c-dark-grey);
max-width: 100%;
}
.modal-content h3{
padding-bottom: 1rem;
}
.modal-content p{
padding-bottom: 1rem;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/*--- Sign-up: 1280px ------------------------------------*/
@media all and (max-width: 1280px){
.container-sign-up{
grid-template-columns: 3fr 3fr;
grid-column-gap: 0.5rem;
grid-template-areas:
"headline headline"
"reqd awards"
"forms awards";
}
.reqd{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
form {
margin: 1rem 0.5rem;
}
}
/*--- Sign-up: 768px ------------------------------------*/
@media all and (max-width:768px){
.container-sign-up{
grid-template-columns: 1fr;
grid-column-gap: 0;
grid-template-areas:
"headline"
"reqd"
"forms"
"awards";
}
form {
margin: 1rem 0.5rem;
padding: 0.75rem;
}
.awards {
padding: 1rem 1rem;
}
}
/*--- Sign-up: 480px ------------------------------------*/
@media all and (max-width:480px){
form {
grid-template-columns: 1fr;
grid-template-areas:
"fname"
"lname"
"company"
"phone"
"email"
"captcha"
"submit";
}
}
/*About Us Page CSS-------------------------------------------*/
.container-about-us{
display: grid;
grid-template-columns: .5fr 12fr .5fr;
grid-template-rows: auto;
grid-column-gap: 0;
grid-template-areas:
". headline ."
". leader-list ."
". resellers ."
". reseller-list ."
". advisors ."
". advisor-list ."
". story ."
". our-story .";
height: auto;
width: 100%;
}
/* Story Section */
.story{
grid-area: story;
}
.our-story{
grid-area: our-story;
margin: 2rem;
padding: 2rem;
border: solid 1px var(--c-light-grey);
border-radius: 4px;
}
.our-story h2{
font-size: 1.8rem;
font-weight: 600;
padding-bottom: 0.5rem;
color: var(--c-deep-blue);
}
.our-story h3{
font-size: 1.35rem;
padding-bottom: 0.4rem;
font-weight: 600;
color: var(--c-blue);
}
.our-story p{
font-size: 1.05rem;
line-height: 1.8rem;
padding-bottom: 0.5rem;
text-align: left;
color: var(--c-slate);
}
.our-story a{
display: inline-block;
font-size: 1.05rem;
}
.our-story li{
font-size: 1.05rem;
line-height: 1.75rem;
padding-bottom: 0.35rem;
text-align: left;
color: var(--c-slate);
}
.our-story img{
display: block;
margin: auto;
max-width: 100%;
padding-bottom: 1rem;
}
/* Section Headers - reusable for leaders, advisors, resellers */
.advisors,
.resellers {
grid-area: var(--grid-area);
}
.advisors {
--grid-area: advisors;
}
.resellers {
--grid-area: resellers;
}
/* Common card grid layout - works for all three lists */
.leader-list,
.advisor-list,
.reseller-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1.5rem;
row-gap: 1.5rem;
padding: 0 1rem;
}
.leader-list {
grid-area: leader-list;
}
.advisor-list {
grid-area: advisor-list;
}
.reseller-list {
grid-area: reseller-list;
}
/* Common card styling for all profile cards */
.bio {
padding: 1.25rem;
border: solid 1px var(--c-light-grey);
border-radius: 4px;
}
.bio h3 {
font-size: 1.1rem;
font-weight: 600;
padding-bottom: 0;
text-align: center;
color: var(--c-deep-blue);
}
.bio h4 {
font-size: 0.9rem;
font-weight: 400;
padding-bottom: 0.25rem;
text-align: center;
color: var(--c-slate);
}
.bio p {
font-size: 0.95rem;
line-height: 1.65rem;
padding-bottom: 0.4rem;
text-align: left;
color: var(--c-slate);
}
.bio img {
display: block;
width: 100%;
max-width: 200px;
height: auto;
margin: 0 auto 0.75rem auto;
border: 1px solid var(--c-border-mid);
border-radius: 3px;
}
/* Muted role title styling */
span.muted {
color: var(--c-slate);
font-weight: 400;
}
/*--- About Us: 1024px ------------------------------------*/
@media all and (max-width: 1024px) {
.leader-list,
.advisor-list,
.reseller-list {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1rem;
row-gap: 1rem;
}
.bio {
margin: 0;
}
}
/*--- About Us: 1280px ------------------------------------*/
@media all and (max-width: 1280px) {
.container-about-us {
grid-template-columns: 6fr;
}
.our-story {
margin: 2rem 1rem;
padding: 2rem 1rem;
}
.leader-list,
.advisor-list,
.reseller-list {
padding: 1rem 0.5rem;
}
}
/*--- About Us: 768px ------------------------------------*/
@media all and (max-width: 768px) {
.our-story {
margin: 1rem 0.5rem;
padding: 1.5rem 1rem;
}
.leader-list,
.advisor-list,
.reseller-list {
grid-template-columns: 1fr;
grid-column-gap: 0;
row-gap: 1rem;
padding: 0.5rem;
}
.bio {
padding: 1rem;
}
.bio h3 { font-size: 1rem; }
.bio h4 { font-size: 0.85rem; }
.bio p { font-size: 0.9rem; line-height: 1.55rem; }
}
/*--- About Us: 480px ------------------------------------*/
@media all and (max-width: 480px) {
.our-story {
margin: 1rem 0.25rem;
padding: 1rem 0.75rem;
}
.our-story h2 { font-size: 1.4rem; }
.our-story h3 { font-size: 1.1rem; }
.our-story p, .our-story li { font-size: 0.95rem; line-height: 1.6rem; }
}
.tier-link{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 1rem 1rem;
gap: .2rem;
}
.tier-link .btn-shortcut{
padding:0.5rem;
margin: 0.5rem;
}
.shortcuts{
grid-area: shortcuts;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
padding: 2rem 0;
margin: 0;
}
.btn-shortcut {
display: inline-block;
border-radius: .2em;
font-weight: 500;
min-width: 12rem;
max-width: 15rem;
width: auto;
height: auto;
white-space: normal;
line-height: 1.4;
text-align: center;
background-color: var(--c-white);
color: var(--c-blue);
padding: 0.75rem 1rem;
margin: 0;
border: 1px solid var(--c-blue);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
cursor: pointer;
}
.btn-shortcut::after {
content: " \2193";
font-size: 0.85em;
opacity: 0.7;
}
.btn-shortcut:hover {
background-color: var(--c-blue);
color: var(--c-white);
border-color: var(--c-blue);
text-decoration: none;
}
.btn-shortcut:hover::after {
opacity: 1;
}
.btn-shortcut:active {
background-color: var(--c-deep-blue);
color: var(--c-white);
border-color: var(--c-deep-blue);
}
/* --- FIX: MOBILE RESPONSIVENESS (Add to bottom of CSS) --- */
@media screen and (max-width: 768px) {
/* 1. FIX THE BUTTONS forcing page width */
/* Allow jump buttons to wrap onto multiple lines */
.tier-link {
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem 1rem;
}
/* Make buttons full width on mobile for easier tapping */
.btn-shortcut {
width: 100%;
max-width: 100%; /* Override the 15rem limit */
min-width: auto; /* Override the 12rem limit */
margin: 0.25rem 0;
}
/* 2. FIX THE GRID CONTAINERS */
/* Remove side columns that squish content */
.container-product {
display: block; /* Remove grid behavior */
padding: 0;
}
.article-block {
display: block; /* Remove the 3-column grid */
width: 100%;
}
.article {
padding: 0 1rem; /* Simple padding */
margin: 0;
width: auto;
}
.article-body {
padding: 1rem; /* Reduce padding from 2rem */
width: auto;
border: none; /* Optional: cleaner look on mobile */
}
/* 3. FIX THE COMPARISON TABLE (Card View) */
/* Force table to display as vertical cards */
.comparison table,
.comparison thead,
.comparison tbody,
.comparison th,
.comparison td,
.comparison tr {
display: block;
width: 100%;
box-sizing: border-box;
}
/* Hide the desktop header row */
.comparison thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Card styling for rows */
.comparison tr {
display: block;
margin-bottom: 2rem;
border: 2px solid var(--c-light-grey);
border-radius: 8px;
background: var(--c-white);
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
overflow: hidden;
/* NEW: Limit width and center the cards */
max-width: 450px; /* Prevents cards from becoming too wide */
margin-left: 0;
margin-right: 0;
}
/* Cell styling */
.comparison td {
display: block;
width: 100% !important; /* Override column widths */
border: none;
border-bottom: 1px solid var(--c-light-grey);
padding: 1rem;
text-align: left;
/* prevent long URLs/text from breaking layout */
word-wrap: break-word;
overflow-wrap: break-word;
}
.comparison td:last-child {
border-bottom: none;
}
/* --- INJECT LABELS for Context --- */
/* Blue Header for the Feature Name */
.comparison td:nth-of-type(1) {
background-color: var(--c-blue-grey);
color: var(--c-blue);
font-weight: 700;
font-size: 1.1rem;
}
/* "Traditional" Label */
.comparison td:nth-of-type(2)::before {
content: "Traditional Point Solutions:";
display: block;
font-weight: 700;
color: var(--c-red-dis);
margin-bottom: 0.5rem;
font-size: 0.85rem;
text-transform: uppercase;
}
/* "1factory" Label */
.comparison td:nth-of-type(3)::before {
content: "1factory Solution:";
display: block;
font-weight: 700;
color: var(--c-green-adv);
margin-bottom: 0.5rem;
font-size: 0.85rem;
text-transform: uppercase;
}
}
/* =========================================
Transcript Accordion Styles (Case Studies)
========================================= */
.transcript-container {
margin-top: 0.9375rem;
width: 100%;
background-color: var(--c-white);
}
details.transcript-details {
padding: 0.625rem 0;
cursor: pointer;
border-top: 1px solid var(--c-light-grey);
}
details.transcript-details summary {
font-weight: 600;
color: var(--c-blue); /* Using your primary blue variable */
list-style: none; /* Hide default triangle */
outline: none;
display: flex;
align-items: center;
font-family: "Roboto", sans-serif;
font-size: var(--text-sm);
}
/* Remove default marker in Webkit browsers */
details.transcript-details summary::-webkit-details-marker {
display: none;
}
/* Custom Plus/Minus Indicators */
details.transcript-details summary::after {
content: '+';
margin-left: 0.5rem;
font-weight: bold;
font-size: 1.2rem;
color: var(--c-charcoal);
}
details.transcript-details[open] summary::after {
content: '-';
}
.transcript-content {
margin-top: 0.625rem;
padding: 0.9375rem;
background-color: var(--c-blue-grey);
border-radius: 4px;
font-size: var(--text-sm);
line-height: var(--lh-body);
color: var(--c-charcoal);
max-height: 300px;
overflow-y: auto;
border: 1px solid var(--c-light-grey);
}
.transcript-content p {
font-size:.9rem;
margin-bottom: 0.625rem;
color: var(--c-slate);
}
.transcript-content strong {
color: var(--c-charcoal);
}
/* --- MARKET COMPARISON TABLE STYLES --- */
.market-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
margin-top: 1rem;
}
/* Header Styles - Replaces inline styles */
.th-feature {
width: 25%;
background-color: var(--c-deep-blue);
color: var(--c-white);
border: 1px solid var(--c-light-grey);
padding: 1rem;
font-weight: 600;
}
.th-1factory {
width: 25%;
background-color: var(--c-deep-blue);
color: var(--c-white);
padding: 1rem;
font-weight: 600;
/* Borders handled by col-highlight classes */
}
.th-competitor {
width: 25%;
background-color: var(--c-deep-blue);
color: var(--c-white);
border: 1px solid var(--c-light-grey);
padding: 1rem;
font-weight: 600;
}
.th-subtext {
font-size: 1rem;
color: var(--c-white);
font-weight: normal;
opacity: 0.8;
}
/* Row Backgrounds */
.tr-white {
background-color: var(--c-white);
}
.tr-blue {
background-color: var(--c-blue-grey);
}
/* Text & Labels */
.sub-label {
font-size: 1rem;
color: var(--c-slate);
}
.sub-text {
font-size: 1rem;
}
.table-footer {
font-size: 1rem;
text-align: center;
margin-top: 0.5rem;
color: var(--c-slate);
}
/* Rating Block: Number Above Stars */
.rating-block {
display: flex;
flex-direction: column; /* Stacks items vertically */
align-items: flex-start; /* Aligns to left (or center if preferred) */
margin-bottom: 0.2rem;
}
.rating-score {
font-weight: 700;
color: var(--c-charcoal);
font-size: 1.4rem; /* Made larger/bolder */
margin-bottom: 0.2rem;
}
.star-row {
line-height: 1;
}
/* Icon Colors */
.icon-check {
vertical-align: bottom;
color: var(--c-green-adv);
}
.icon-cancel {
vertical-align: bottom;
color: var(--c-red-dis);
}
/* Verify Reviews */
.verify-link {
display: block;
font-size: var(--text-xs);
margin-top: .2rem;
text-decoration: underline;
color: var(--c-blue);
line-height: 1.2rem;
}
.verify-link:hover {
color: var(--c-orange);
}
/* Verify Videos */
.verify-video {
display: block;
font-size: 1.0rem;
margin-top: .2rem;
text-decoration: underline;
color: var(--c-blue);
line-height: 1.2rem;
}
.verify-video:hover {
color: var(--c-green-adv);
}
/* 1factory Column Borders */
.col-highlight-left {
border-left: 3px solid var(--c-charcoal) !important;
}
.col-highlight-right {
border-right: 3px solid var(--c-charcoal) !important;
}
.col-highlight-top {
border-top: 3px solid var(--c-charcoal) !important;
}
.col-highlight-bottom {
border-bottom: 3px solid var(--c-charcoal) !important;
}
.key-competitor {
color: var(--c-charcoal);
background-color: var(--c-accent-warm);
padding: 1rem;
border-left: 2px solid var(--c-logo-blue);
display: block;
line-height: var(--lh-body);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-weight: 500;
margin: var(--space-sm);
}
/* --- MARKET COMPARISON TABLE - EMPHASIS STYLES --- */
/* 1. Reduce text size for Feature Column (1) and Competitor Columns (3 & 4) */
#market-comparison-transposed .th-feature,
#market-comparison-transposed .th-competitor,
#market-comparison-transposed .category,
#market-comparison-transposed td:nth-child(3),
#market-comparison-transposed td:nth-child(4) {
font-size: 1rem; /* Reduced from default 1.2rem */
line-height: 1.4rem;
}
/* 2. Reduce the sub-labels/descriptions in the first column to match */
#market-comparison-transposed .sub-label,
#market-comparison-transposed .th-competitor .th-subtext {
font-size: 0.85rem;
}
/* 3. Reduce the big Rating Number for competitors so 1factory's 4.9 looks bigger */
#market-comparison-transposed td:nth-child(3) .rating-score,
#market-comparison-transposed td:nth-child(4) .rating-score {
font-size: 1.1rem; /* Reduced from 1.4rem */
}
/* 4. Ensure 1factory column stays Large and Prominent */
#market-comparison-transposed .th-1factory,
#market-comparison-transposed .col-highlight-left {
font-size: 1.2rem; /* Kept larger for emphasis */
}
/* 5. Mobile Adjustment: Reset sizes on small screens so it's readable */
@media all and (max-width: 768px) {
#market-comparison-transposed .th-feature,
#market-comparison-transposed .th-competitor,
#market-comparison-transposed .category,
#market-comparison-transposed td:nth-child(3),
#market-comparison-transposed td:nth-child(4) {
font-size: 1rem; /* Keep readable on mobile */
}
}
.comparison-toc{
padding: .25rem .25rem;
}
.comparison-toc li{
padding: 0.25rem 0.25rem;
}
a.case-link{
display: block;
padding: 1rem .5rem 0 .5rem;
font-weight: 500;
margin: 0;
}