/* Valent brand palette. Confirmed against Valent-KeyPages.sketch (Home,
Product Page/Category/Category-ERVs, All-Products, Resources, Resources
list view artboards) via Inspect-equivalent values extracted from the
Sketch document JSON.
rgb(51,51,51), rgb(13,13,13) and rgb(255,255,255) already exist as shared
tokens (--color-near-black, --color-near-black-2, --color-white in
common.css) and are reused as-is. Only the colors below are new. */
:root {
--valent-gray: 153, 153, 153; /* #999999 - muted/secondary text (breadcrumb arrows, meta labels) */
--valent-warm-dark: 61, 57, 53; /* #3D3935 - warm dark gray/brown (footer bg) */
--valent-light-gray: 238, 238, 238; /* #EEEEEE - section bg / header base */
--valent-border-gray: 214, 214, 214; /* #D6D6D6 - card/button borders */
--valent-divider-gray: 229, 229, 229;/* #E5E5E5 - hairline dividers */
/* Re-theme shared accent tokens for every widget under Mvc/Views that
reads var(--color-dark-blue) / var(--color-sky-blue) (product listing,
resource library, cards, blog, etc. - ~50 stylesheets). This file is
only loaded by Valent_BasePageLayout.cshtml, so Greenheck pages
(GreenheckV2_Base*.cshtml) keep the original blue untouched. Do not
rename or remove --color-dark-blue/--color-sky-blue here - overriding
the existing token is what lets every widget stay unmodified. */
--color-dark-blue: #751A15; /* was #005596 */
--color-sky-blue: #81312F; /* was #34a8f6 (hover/tint, confirmed via Sketch) */
--color-secondary-blue: #751A15; /* was #34a8f6 (same value as dark-blue) - hover state for
.btn-primary/.btn-secondary and its transparent/small variants across common.css (~20 uses) */
/* Second independent accent-token family used by product-details.css,
category-product.css, product-listing.css, modal-docs.css, share-modal.css
(buttons, focus outlines, active states, thumbnail borders, gradients).
NOTE: unlike the --color-dark-blue/--color-sky-blue family above, this
family is COLOR-format (full CSS colors, not bare RGB triples) - see
common.css. Its consumers write `var(--primary-color)` directly, NOT
`rgb(var(--primary-color))`, so these overrides must stay real colors.
Declaring them as `117, 26, 21` makes every consuming declaration
invalid at computed-value time and the accent silently disappears. */
--primary-color: #751A15; /* was #075697 */
--primary-color-dark: #751A15; /* was #054070 - darker shade of the accent */
--primary-hover: #BD4D01; /* was rgba(7, 86, 151, 0.9) */
--color-primary: #751A15; /* was #075697 */
--color-primary-light: #81312F; /* was #34a8f6 */
/* Valent_BasePageLayout.cshtml has no .site-header__top-bar (the eCAPS/
search/login strip is Greenheck-only) so the shared
--site-header-height-default in common.css (195px, includes that bar's
65px) overshoots here and leaves a gap above page content. Override to
just .site-header__logo-nav-bar (122.25px) + --site-header-bottom-gap
(7px) = 129.25px, rounded up to 130 for the same safety-cushion
convention as the shared value. */
/* ------------------------------------------------------------------
Canonical colour tokens (--color-valent-*)
------------------------------------------------------------------
CANONICAL colour-format family. Prefer these at every call site:
color: var(--color-dark-blue);
background: color-mix(in srgb, var(--color-dark-blue) 10%, transparent);
Each is DERIVED from the legacy triple above it, so the triple stays
the single source of truth - there is no second copy of any colour to
drift, and a :root re-theme (Valent) propagates automatically.
Caveat: substitution happens on the element that DECLARES these, i.e.
:root. If you ever override a legacy triple in a descendant scope, you
must redeclare the matching --color-* token in that same scope or it will
keep the :root value.
------------------------------------------------------------------ */
--color-valent-border-gray: rgb(var(--valent-border-gray));
--color-valent-divider-gray: rgb(var(--valent-divider-gray));
--color-valent-gray: rgb(var(--valent-gray));
--color-valent-light-gray: rgb(var(--valent-light-gray));
--color-valent-warm-dark: rgb(var(--valent-warm-dark));
--site-header-height-default: 130px;
}
/* Section wrapper for a .grid-row-3-cols (common.css) feature-card row -
e.g. the "Reliable Products / Reliable People / Rely on Valent" section.
.grid-row-3-cols itself already has the right 32px gap; this only adds
the outer section padding + background, per spec (1417px reference).
Kept in this Valent-only file (not common.css) since it uses
--valent-light-gray, which only exists on Valent pages. */
.valent-card-grid-section {
background-color: var(--color-valent-light-gray);
padding: 85px 85px 94px;
display: flex;
gap: 32px;
justify-content: center;
flex-wrap: wrap;
}
.valent-card-grid-section > div {
width: 100%;
max-width: 395px;
flex: 0 1 395px;
}
/* Unify the two independently-tuned breadcrumb header patterns (product
category pages use .breadcrumb from common.css, other pages use the
shared Sitefinity .site-breadcrumb widget) to the same nav-to-crumb and
crumb-to-title spacing, per design redline feedback that the two read
as inconsistent. */
.site-breadcrumb {
margin-top: 58px;
margin-bottom: 20px !important;
}
.breadcrumb {
margin-top: 58px;
margin-bottom: 20px;
}
.gray-bg-container {
background-color: var(--color-valent-light-gray);
padding: 70px 0;
}
.gray-bg-container > div {
display: flex;
gap: 32px;
flex-direction: column;
}
/* Bottom margin is re-declared per breakpoint on purpose: common.css sets the
`margin` shorthand on bold-h1 at every step (`0 auto`, then `0 auto 8px`,
then `0 auto 8px !important` below 878px), so a single unqualified
margin-bottom would be wiped out on tablet and mobile. Longhand keeps the
`auto` side margins that center the heading in --max-width-container. */
.text-content.bold-h1{
font-family: var(--font-family-bold);
font-size: 34px;
font-weight: 700;
margin-bottom: 24px;
}
.h2_products{
font-family: var(--font-family-bold) !important;
font-size: 24px !important;
font-weight: 700 !important;
}
.dropdown-item span{
font-family: var(--font-family-semi-bold) !important;
font-size: 16px !important;
font-weight: 600 !important;
}
.dropdown-item{
justify-content: flex-start;
width: 100%;
height: auto;
max-width: 221px;
font-family: var(--font-family-semi-bold) !important;
font-size: 16px !important;
font-weight: 600 !important;
}
.btn-primary:hover{
color: var(--color-white) !important;
background-color: var(--primary-hover) !important;
}
.site-header--scrolled .site-header__dropdown-panel {
padding: 13px 0 24px 0 !important;
}
@media (min-width: 1024px) {
body:not(.valentair):not(.header-gradient-mode) > main, body.valentair:not(.header-overlay-hero) > main {
padding-top: 151px !important;
}
}
@media (max-width: 1023px) {
.text-content.bold-h1{
font-size: 30px;
margin-bottom: 20px;
}
}
@media (max-width: 877px) {
.text-content.bold-h1{
font-size: 28px;
margin-bottom: 16px !important;
}
}
/* Inside .gray-bg-container the flex `gap` above already owns vertical
rhythm, so the heading's own margin would stack on top of it. Scoped to
direct flex children only - a heading nested deeper is not gap-spaced and
keeps the ramp. !important is needed to beat the mobile rule above. */
.gray-bg-container > div > .text-content.bold-h1 {
margin-bottom: 0 !important;
}
@media (min-width: 1024px) and (max-width: 1296px){
.p-0.my-0.mx-auto.max-width-1248.w-full, .contact-cards__row,
.locations-by-state__container,
.grid-d-3-9.max-width-1248.m-auto.w-full{
padding-left: var(--container-padding-desktop) !important;
padding-right: var(--container-padding-desktop) !important;
}
}
/* Desktop-only header sizing. Below 1024px header.css collapses
.site-header__logo-nav-bar to height 0 - its children are hidden there and
the real mobile header is the fixed .mobile-header-bar. Unscoped, these
!important heights beat that collapse (header.css does not use !important),
so the bar kept reserving 151px and showed as a white band under the mobile
header. */
@media (min-width: 1024px) {
.p-0.my-0.mx-auto.max-width-1248.w-full{
/* padding-left: var(--container-padding-desktop) !important;
padding-right: var(--container-padding-desktop) !important; */
max-width: 1248px !important;
}
.site-header--scrolled .site-header__container{
height: 151px !important;
}
/* .header-logo{
margin-left: var(--container-padding-desktop) !important;
}
.site-header__navigation-container{
margin-right: var(--container-padding-desktop) !important;
}
.site-header--scrolled .site-header__logo-nav-bar{
padding-left:0 !important;
padding-right:0 !important;
} */
body > main{
padding-left:0 !important;
padding-right:0 !important;
}
.site-header__logo-nav-bar {
height: 151px !important;
}
.site-header__navigation {
height: 52px !important;
}
/* Valent's bar is a fixed 151px in BOTH scroll states, so it opts out of
the shared compact geometry entirely — including the 54.25px
padding-top header.css uses to centre-align Greenheck's resting bar
without an align-items flip. */
.site-header__logo-nav-bar{
padding-top: 0 !important;
padding-bottom: 0 !important;
align-items: center !important;
}
/* Sticky scrolled state: leave SearchBox stacked above FIND MY REP at the
same spot as the resting header. Shared header.css would otherwise drop
.header-logo margin-right, shrink the logo, and change nav gaps — which
shifts links left/right. Height stays 151px via the rule above. */
.site-header--scrolled .site-header__logo-nav-bar {
align-items: center !important;
}
.site-header--scrolled .header-logo {
width: 287px !important;
max-width: 287px !important;
}
.site-header--scrolled .header-logo img {
height: 46px !important;
}
.site-header--scrolled .site-header__navigation {
gap: 60px !important;
}
.site-header--scrolled .site-header__nav-list {
gap: 10px !important;
}
/* 19px = the old 12px + the 7px baseline descender that used to pad the
bottom of this while the logo ![]()
was still an inline element.
header.css now sets `.header-logo img { display: block }` (it had to —
the phantom 7px vanished the instant the compact state made this a
flex container, dropping the bottom-aligned Valent logo 7px on every
scroll). The wrapper is bottom-aligned, so the removed descender has to
come back as margin or the resting logo sits 7px lower than signed off. */
.header-logo > a{
margin-bottom: 19px !important;
}
.header-logo{
height: 100% !important;
min-height: 46px !important;
display: flex !important;
align-items: flex-end !important;
}
/* Comp groups the nav links tight against FIND MY REP on the right,
not spread edge-to-edge. header.css's shared `.site-header__nav-list`
uses `flex: 1; justify-content: space-between` so it stretches to
fill the row - fine for Greenheck's longer nav, but on Valent's
shorter one it spreads links across nearly the whole header width.
Let the list size to content and push the list+button pair to the
right instead. */
.site-header__navigation {
justify-content: flex-end;
}
.site-header__nav-list {
flex: 0 1 auto;
justify-content: flex-start;
}
}
/* 1024-1296px: header.css caps the resting `.header-logo` at 200px + 32px
margin-right so the nav keeps its room. The unconditional 287px above
therefore only took effect in the compact state, which kicked the whole
nav 55px sideways on the first scroll frame (neither width nor margin is
transitioned). Match the resting box so scrolling moves nothing; the
Valent mark is 180.7px wide at 46px tall, so it still fits. */
@media (min-width: 1024px) and (max-width: 1296px) {
.site-header--scrolled .header-logo {
width: 200px !important;
max-width: 200px !important;
margin-right: 32px !important;
}
/* Same reasoning for the nav gaps. The 60px/10px overrides above restore
the roomy resting spacing that header.css drops on scroll — but in this
band header.css never uses that spacing at rest either (32px/8px), so
re-widening it on scroll overflowed the row at 1024px and the logo, a
shrinkable flex item, gave up 19px. Keep the band's resting gaps. */
.site-header--scrolled .site-header__navigation {
gap: 32px !important;
}
.site-header--scrolled .site-header__nav-list {
gap: 8px !important;
}
}
@media (max-width: 1023px){
body > main{
max-width: 100% !important;
}
.grid-d3-t2-m1-cols > div{
padding: 0 !important;
}
}
/* Tablet: full-width stacked cards (text left / image right via card-tdib CSS).
Do not reuse the old 224px cap — it forced a narrow mobile-like column. */
@media (min-width: 878px) and (max-width: 1023px) {
.valent-card-grid-section {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 60px 40px;
gap: 24px;
}
.valent-card-grid-section > div,
.gray-bg-container > div > .card-tdib,
.grid-d3-t2-m1-cols > div {
max-width: 100%;
flex: 1 1 100%;
width: 100%;
}
.card-tdib {
max-width: 100%;
}
.contact-cards__row, .locations-by-state__container{
max-width: 736px !important;
width: 100%;
}
}
@media (max-width: 877px) {
.valent-card-grid-section {
padding: 40px 20px 48px;
flex-direction: column;
align-items: center;
}
.footer-bottom-main{
flex-direction: column !important;
align-items: center !important;
}
.footer-info-links, .footer-copyright{
font-size: 10px !important;
}
.footer-copyright{
flex-wrap: wrap !important;
justify-content: center !important;
}
.footer-logo{
order: 1 !important;
width: 100% !important;
text-align: center !important;
}
.footer-info-links{
order: 2 !important;
width: 100% !important;
display: inline-block !important;
}
.footer-copyright{
order: 3 !important;
width: 100% !important;
text-align: center !important;
}
.footer-social-container{
margin-top: 6px !important;
}
.footer-info-links a:after{
margin-left: 4px;
margin-right: 4px;
}
.footer-copyright{
display: inline-block !important;
}
.footer-bottom-main--valent .footer-social-container{
margin-left: auto !important;
margin-right: auto !important;
}
.footer-bottom-left{
align-items: center !important;
}
.card-tdib, .grid-d3-t2-m1-cols > div{
max-width: 100% !important;
}
footer{
border-top: 0 !important;
}
.text-content.regular-p1{
font-size: 13px !important;
}
}
@media (min-width: 878px) and (max-width: 1023px){
.footer-logo{
order: 1 !important;
width: 100% !important;
text-align: left !important;
}
.footer-info-links{
order: 2 !important;
width: 100% !important;
display: inline-block !important;
}
.footer-copyright{
order: 3 !important;
width: 100% !important;
text-align: left !important;
display: flex !important;
justify-content: flex-start !important;
text-wrap-mode: nowrap;
align-items: center !important;
}
/* Pipe separators between Copyright Statement / Address1 / Address2 /
Phone come from the base rule in valent-footer.css (all breakpoints,
not just tablet) - do not reset margin/padding here, it would wipe
that rule's spacing back to 0. */
.footer-social-container{
margin-left: 0 !important;
}
.footer-bottom-main{
padding-bottom: 30px !important;
}
}