/**
* Ruppert – ThemeVolty megamenu (header layer 3 + desktop dropdown only).
* Figma reference: cream bar, teal serif nav, coral promo, mega panel #FDF8F0.
*/
/* -------------------------------------------------------------------------- */
/* Layer 3 – bar */
/* -------------------------------------------------------------------------- */
@font-face {
font-family: 'TT-Commons-Pro-Regular';
src: url('../fonts/tt-common/TT_Commons_Pro_Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Commons-Pro-Medium';
src: url('../fonts/tt-common/TT_Commons_Pro_Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Commons-Pro-Bold';
src: url('../fonts/tt-common/TT_Commons_Pro_Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Rationalist-demibold';
src: url('../fonts/tt-rationalist/TT-Rationalist-DemiBold-BF66bdc80b46a61.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Rationalist-regular';
src: url('../fonts/tt-rationalist/TT-Rationalist-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Rationalist-Medium-italic';
src: url('../fonts/tt-rationalist/TT-Rationalist-Medium-Italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TT-Rationalist-Medium';
src: url('../fonts/tt-rationalist/TT-Rationalist-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#header .header-nav.ruppert-mm {
background-color: #fdf8f0;
border-bottom: 1px solid rgba(0, 61, 61, 0.08);
}
/* ===== 1) TOP BAR – LANG SWITCHER ===== */
.ruppert-header-top,
.ruppert-topbar {
background-color: #004f4b;
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
font-size: 12px;
}
.ruppert-topbar.d-none.d-md-flex {
display: flex !important;
}
.ruppert-topbar__inner {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 32px;
gap: 24px;
}
.ruppert-topbar__left {
margin-right: auto;
font-size: 12px;
opacity: 0.85;
}
.ruppert-topbar__right {
display: inline-flex;
align-items: center;
gap: 20px;
}
.ps-mainmenu__tree-item-wrapper{
height:73px;
}
.ruppert-topbar a,
.ruppert-topbar .header-block__action-btn {
color: #ffffff;
text-decoration: none;
}
.ruppert-topbar .ps-languageselector .form-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
border: 0;
padding: 0;
color: #ffffff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
}
.ruppert-topbar .ps-languageselector .form-select::-ms-expand {
display: none;
}
/* ===== 2) MIDDLE ROW – LOGO / SEARCH / ICONS ===== */
.ruppert-header-middle {
background-color: #f9f1e4;
border-bottom: 1px solid #e4dccd;
padding-block: 14px;
}
.ruppert-header-middle__inner {
display: grid;
grid-template-columns: auto minmax(320px, 620px) auto;
align-items: center;
gap: 24px;
}
.ruppert-header-middle__logo img {
max-height: 40px;
width: auto;
}
.ruppert-header-middle__search {
display: flex;
justify-content: center;
min-width: 0;
}
.ruppert-header-middle__search #_desktop_ps_searchbar {
display: flex !important;
width: 100%;
max-width: 620px;
margin: 0 !important;
}
.ruppert-header-middle__search .ps-searchbar {
width: 100%;
margin: 0;
}
.ruppert-header-middle__search .ps-searchbar__input {
height: 44px;
border-radius: 999px;
border: 1px solid #d5cdc0;
padding-left: 44px;
padding-right: 44px;
font-size: 14px;
color: #3a3a3a;
background-color: #ffffff;
}
.ruppert-header-middle__search .ps-searchbar__magnifier {
left: 16px;
color: #6c757d;
}
.ruppert-header-middle__search .ps-searchbar__clear {
right: 16px;
}
.ruppert-header-middle__actions {
display: inline-flex;
align-items: center;
gap: 24px;
}
.ruppert-header-action__btn {
display: inline-flex;
align-items: center;
gap: 6px;
color: #004f4b;
font-size: 13px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: color .2s ease;
}
.ruppert-header-action__btn .material-icons {
font-size: 20px;
}
.ruppert-header-action__btn:hover,
.ruppert-header-action__btn:focus-visible {
color: #e65a3a;
}
@media (max-width: 767.98px) {
.ruppert-header-middle__inner {
display: flex;
justify-content: space-between;
}
.ruppert-header-middle__search {
display: none;
}
}
/* ===== 3) BOTTOM ROW – MAIN MENU ===== */
.ruppert-nav-bar {
background-color: #f9f1e4;
border-bottom: 2px solid #004f4b;
}
.ruppert-nav-bar .ps-mainmenu--desktop {
width: 100%;
}
.ruppert-nav-bar .ps-mainmenu__desktop {
display: block !important;
}
.ruppert-nav-bar .ps-mainmenu__tree {
display: flex;
align-items: center;
gap: 28px;
margin: 0;
padding-block: 0;
flex-wrap: nowrap;
overflow-x: auto;
}
.ruppert-nav-bar .ps-mainmenu__tree-link {
padding-block: 16px;
color: #004f4b;
font-size: 14px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
letter-spacing: 0.02em;
}
.ruppert-nav-bar .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link,
.ruppert-nav-bar .ps-mainmenu__tree-link:hover,
.ruppert-nav-bar .ps-mainmenu__tree-link:focus-visible {
color: #e65a3a;
}
.ruppert-nav-bar .ps-mainmenu__tree-item:first-child .ps-mainmenu__tree-link {
color: #e65a3a;
}
/* -------------------------------------------------------------------------- */
/* Desktop layout: left-aligned top links + correct dropdown anchor */
/* -------------------------------------------------------------------------- */
@media (min-width: 992px) {
#header .header-nav.ruppert-mm > .container,
#header .header-nav.ruppert-mm > .container-md {
position: relative;
}
/* DropdownCB must be the header container — not ul.menu-content (module default). */
#header .header-nav.ruppert-mm #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content {
position: static;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 0.25rem 1.5rem;
width: 100%;
max-width: 100%;
text-align: left;
}
#header .header-nav.ruppert-mm .container_tv_megamenu {
display: block;
width: 100%;
max-width: 100%;
text-align: left;
padding: 16px 24px 0px;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal {
width: 100%;
text-align: left;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 {
float: none;
display: inline-flex;
align-items: center;
position: static;
flex: 0 0 auto;
}
/* Full-width mega panel under the bar, inside the same container as the logo row. */
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown.ruppert-mm-dropdown {
left: 0 !important;
right: 0 !important;
top: 100%;
width: auto;
min-width: 0 !important;
max-width: none;
margin: 0;
box-sizing: border-box;
transform-origin: top center;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown.tv-sub-left,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown.tv-sub-center {
left: 0 !important;
right: 0 !important;
margin-left: 0;
margin-right: 0;
}
}
/* -------------------------------------------------------------------------- */
/* Top-level links (Figma: bold serif teal; first item coral “Promo”) */
/* -------------------------------------------------------------------------- */
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a {
font-family: TT-Rationalist-demibold !important;
font-weight:600;
font-size: 16px;
color : #40807E;
}
#header .header-nav.ruppert-mm .menu-dropdown ul li.item-header > a {
font-family: TT-Rationalist-demibold !important;
font-weight:600;
font-size: 14px;
}
#header .header-nav.ruppert-mm .menu-dropdown ul li.item-line > a {
font-family: TT-Commons-Pro-Regular !important;
font-weight:400;
font-size: 14px;
line-height : 100%;
line-spacing: 0%;
}
@media (min-width: 992px) {
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a {
letter-spacing: 0.02em;
line-height: 1.25;
padding: 1rem 0.75rem !important;
text-transform: none;
text-decoration: none;
text-shadow: none;
white-space: nowrap;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a:hover,
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a:focus-visible {
opacity: 0.85;
}
/* Promo (Figma): first top-level item after the hidden mobile title, or class promo / menu-promo in megamenu BO. */
#header .header-nav.ruppert-mm .menu-content > li.level-1.promo > a,
#header .header-nav.ruppert-mm .menu-content > li.level-1.menu-promo > a,
#header .header-nav.ruppert-mm .menu-content > li.tvmega-menu-title + li.level-1 > a {
color: #e07a5f;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1.parent > a::after {
color: #003d3d;
font-size: 1.125rem;
top: 0.125rem;
display:none;
}
}
/* -------------------------------------------------------------------------- */
/* Dropdown panel */
/* -------------------------------------------------------------------------- */
@media (min-width: 992px) {
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown.ruppert-mm-dropdown,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu.menu-dropdown {
background: #fdf8f0;
border: none;
border-bottom: 1px solid rgba(0, 61, 61, 0.12);
border-radius: 0;
box-shadow: 0 0.5rem 1.5rem rgba(0, 61, 61, 0.08);
padding: 1.5rem 1.25rem 1.75rem;
overflow-x: hidden;
}
/* Masthead (Figma: category title + full-width divider) */
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown .ruppert-mm-masthead {
padding: 0 0 0.875rem;
margin: 0 0 1.25rem;
border-bottom: 1px solid rgba(0, 61, 61, 0.15);
max-width: 100%;
background: transparent;
border-top: none;
border-left: none;
border-right: none;
}
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown .ruppert-mm-masthead__title {
font-family: TT-Commons-Pro-Medium !important;
font-weight: 500;
margin: 0;
padding: 0;
font-size: 14px !important;
line-height: 100%;
text-transform: uppercase;
color: #01454A !important;
line-spacing:0%;
}
/* Remove BO-only duplicate masthead rows (single full-width header, no links) */
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown > .tv-menu-row.row:first-child:has(> .tv-menu-col:only-child):has(
> .tv-menu-col > .ul-column > li.menu-item.item-header:only-child
) {
display: none !important;
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
/* Row # “empty” in BO still renders a bare .tv-menu-row */
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown > .tv-menu-row.row:not(:has(.tv-menu-col)) {
display: none !important;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal .menu-dropdown .tv-menu-row.row {
--ruppert-mm-gap: clamp(14px, 1.85vw, 26px);
margin-left: 0 !important;
margin-right: 0 !important;
--bs-gutter-x: var(--ruppert-mm-gap);
row-gap: 1rem;
align-items: flex-start;
}
/* Link columns row(s): tighter Bootstrap gutter alignment with Figma */
#header .header-nav.ruppert-mm .tv-menu-horizontal .menu-dropdown:not(.ruppert-mm-dropdown) .tv-menu-row.row > [class*="col-"],
#header .header-nav.ruppert-mm .tv-menu-horizontal .menu-dropdown.ruppert-mm-dropdown .tv-menu-row.row > [class*="col-"] {
padding-left: calc(var(--ruppert-mm-gap) * 0.5);
padding-right: calc(var(--ruppert-mm-gap) * 0.5);
}
/*
* Image/card strip — ThemeVolty uses col-xs-12 (= width 100% each) so rows stack.
* Bootstrap .row>* also implies width 100%; we neutralize gutters and use gap.
*/
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.row.ruppert-mm-card-strip,
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img) {
display: flex !important;
flex-flow: row nowrap !important;
align-items: stretch !important;
gap: clamp(12px, 1.65vw, 22px) !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0.25rem !important;
padding-top: 1.625rem !important;
padding-left: 0 !important;
padding-right: 0 !important;
/* border-top: 1px solid rgba(0, 61, 61, 0.12); */
--bs-gutter-x: 0 !important;
--bs-gutter-y: 0 !important;
}
#header .header-nav.ruppert-mm
.tv-menu-horizontal li.level-1 > .tv-sub-menu
.tv-menu-row.row > .tv-menu-col,
#header .header-nav.ruppert-mm
.tv-menu-horizontal li.level-1 > .tv-sub-menu
.tv-menu-row.row > [class*="col-"] {
min-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Respect Bootstrap column widths */
#header .header-nav.ruppert-mm
.ruppert-mm-card-strip > .col-sm-2 {
flex: 0 0 16.666666% !important;
max-width: 16.666666% !important;
width: 16.666666% !important;
}
/* Large image column */
#header .header-nav.ruppert-mm
.ruppert-mm-card-strip > .col-sm-6 {
flex: 1 1 auto !important;
max-width: calc(50% - 40px) !important;
width: calc(50% - 40px) !important;
}
/* col-sm-3 */
#header .header-nav.ruppert-mm
.ruppert-mm-card-strip > .col-sm-3 {
flex: 0 0 260px !important;
max-width: 260px !important;
width: 260px !important;
min-width: 260px !important;
}
/* col-sm-4 */
#header .header-nav.ruppert-mm
.ruppert-mm-card-strip > .col-sm-4 {
flex: 0 0 340px !important;
max-width: 340px !important;
width: 340px !important;
min-width: 340px !important;
}
/* 2-column menu list */
#header .header-nav.ruppert-mm
.spirit-column .ul-column {
column-count: 2;
column-gap: 32px;
}
/* Keep header full width */
#header .header-nav.ruppert-mm
.spirit-column .item-header {
column-span: all;
break-inside: avoid;
}
/* Prevent item breaking */
#header .header-nav.ruppert-mm
.spirit-column .item-line {
break-inside: avoid;
margin-bottom: 6px;
}
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img) > .tv-menu-col .ul-column,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip > .tv-menu-col .ul-column {
padding: 0;
margin: 0;
list-style: none;
height: 100%;
}
/* Image card tiles — fill frame edge-to-edge (no gray pillarboxing from max-width:100%/height:auto) */
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img),
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip li.menu-item:has(.html-block img) {
position: relative;
isolation: isolate;
overflow: hidden;
margin: 0;
padding: 0 !important;
border-radius: 10px !important;
width: 100%;
aspect-ratio: 16 / 10;
min-height: 128px;
max-height: 128px;
background-color: #003d3d;
list-style: none;
}
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img)::after,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip li.menu-item:has(.html-block img)::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
/* Legibility only near top; avoids muddy gray cast over whole photo */
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.38) 0%,
rgba(0, 0, 0, 0.08) 45%,
transparent 72%
);
}
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) .html-block,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip li.menu-item:has(.html-block img) .html-block {
padding: 0 !important;
margin: 0 !important;
display: block;
line-height: 0;
position: absolute;
inset: 0;
overflow: hidden !important;
border-radius: inherit;
}
/* BO often wraps ![]()
in — resets width:auto / centers image and exposes “gray” sides */
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) .html-block p,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip li.menu-item:has(.html-block img) .html-block p,
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) .html-block figure,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip li.menu-item:has(.html-block img) .html-block figure {
margin: 0 !important;
padding: 0 !important;
border: none;
height: 100%;
width: 100%;
display: contents;
line-height: 0;
}
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) img,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip li.menu-item:has(.html-block img) img {
position: absolute !important;
inset: 0 !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
display: block;
vertical-align: bottom;
border-radius: 0 !important;
object-fit: cover !important;
object-position: center center;
transform: none !important;
}
/* Label on imagery: ThemeVolty renders before .html-block in HTML-type items */
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) > a,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip li.menu-item:has(.html-block img) > a {
position: absolute;
left: 12px;
top: 12px;
z-index: 2;
max-width: 50%;
color: #fff !important;
font-family:
TT-Commons-Pro-Medium !important;
font-size: 14px;
font-weight: 500;
line-height: 100% !important;
text-decoration: none !important;
padding: 0 !important;
margin: 0 !important;
pointer-events: auto;
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
text-transform: none;
}
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) > a:hover,
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img) li.menu-item:has(.html-block img) > a:focus-visible,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip li.menu-item:has(.html-block img) > a:hover,
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 > .tv-sub-menu .tv-menu-row.ruppert-mm-card-strip li.menu-item:has(.html-block img) > a:focus-visible {
color: #fdf8f0 !important;
}
/*
* Figma teal promo pill (card 1): first column without an image-only HTML block —
* add promo copy as first column HTML/text in mega menu BO, or omit for image-only grids.
*/
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img)
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column,
#header
.header-nav.ruppert-mm
.tv-menu-horizontal
li.level-1
> .tv-sub-menu
.tv-menu-row.ruppert-mm-card-strip
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column {
height: 100%;
}
/* #header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img)
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column
> li.menu-item:first-child
> a,
#header
.header-nav.ruppert-mm
.tv-menu-horizontal
li.level-1
> .tv-sub-menu
.tv-menu-row.ruppert-mm-card-strip
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column
> li.menu-item:first-child
> a {
box-sizing: border-box;
display: flex !important;
align-items: center !important;
min-height: 10.5rem;
padding: clamp(14px, 1.75vw, 22px) !important;
background-color: #003d3d !important;
color: #fff !important;
border-radius: 10px !important;
font-family:
TT-Commons-Pro-Medium,
system-ui,
-apple-system,
sans-serif !important;
font-size: clamp(14px, 1.08vw, 16px);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: none;
align-self: stretch;
line-height: 1.35 !important;
text-decoration: none !important;
} */
#header .header-nav.ruppert-mm .tv-sub-menu.menu-dropdown .tv-menu-row.row:has(> .tv-menu-col li .html-block img)
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column
> li.menu-item:first-child
> a:hover,
#header
.header-nav.ruppert-mm
.tv-menu-horizontal
li.level-1
> .tv-sub-menu
.tv-menu-row.ruppert-mm-card-strip
> .tv-menu-col:first-child:not(:has(li .html-block img))
ul.ul-column
> li.menu-item:first-child
> a:hover {
filter: brightness(1.06);
color: #fff !important;
}
/* Section title rows — skip card row labels (often item-header + html-block image) */
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown ul li.item-header:not(:has(.html-block img)) > a {
display: block;
text-align: left !important;
line-height: 1.3;
color: #F07855 !important;
margin: 0 0 0.625rem;
padding: 0 !important;
border: none !important;
}
/* Link lists */
#header .header-nav.ruppert-mm .menu-dropdown ul li.item-line > a {
text-align: left !important;
color: #01454A;
padding: 0.35rem 0 !important;
}
#header .header-nav.ruppert-mm .menu-dropdown ul li.item-line > a:hover,
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown ul li.item-header:not(:has(.html-block img)) > a:hover {
color: #F07855 !important;
}
/* Remove default ThemeVolty bullets in this theme */
#header .header-nav.ruppert-mm .menu-dropdown ul li.item-line.tvmega-menu-link a::before {
display: none !important;
}
#header .header-nav.ruppert-mm .container_tv_megamenu .tv-sub-menu {
padding: 0;
}
/* Non-card megamenu HTML blocks (if used in link rows) */
#header .header-nav.ruppert-mm .menu-dropdown.ruppert-mm-dropdown .tv-menu-row.row:not(:last-of-type) .html-block:not(:has(img)) {
padding-top: 0.25rem;
}
}
/* -------------------------------------------------------------------------- */
/* Mobile: leave module behaviour; soften title bar only */
/* -------------------------------------------------------------------------- */
@media (max-width: 991px) {
#header .header-nav.ruppert-mm #tvmobile-megamenu .tv-menu-horizontal ul li.level-1 > a,
#header .header-nav.ruppert-mm #tvdesktop-megamenu .tv-menu-horizontal ul li.level-1 > a {
color: #003d3d;
}
.tvmega-menu-link img{
width:90vw;
}
#header .offcanvas-header .btn-close{
font-family: 'TT-Commons-Pro-Regular', sans-serif;
color: #40807E;
}
}
/* RUPPERT HEADER REVAMP (migrated from ruppert-custom.css) */
/* ============================================
RUPPERT THEME - Header Revamp (Figma aligned)
============================================ */
/* Row 1 - Top bar */
.ruppert-header-top {
background-color: #01454a;
color: #ffffff;
height:36px;
}
.ruppert-header-top__inner {
/* min-height: 26px; */
display: flex;
justify-content: flex-end;
align-items: center;
padding-right : 32px;
}
.ruppert-header-top__right {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.ruppert-header-top a {
color: #ffffff;
text-decoration: none;
}
.ruppert-header-top #_desktop_ps_languageselector {
display: flex;
align-items: center;
}
.ruppert-language-switcher {
display: inline-flex;
align-items: center;
gap: 0;
}
.ruppert-language-switcher__link {
display: inline-flex;
align-items: center;
font-size: 11px;
line-height: 1;
letter-spacing: 0.04em;
color: #ffffff;
text-transform: uppercase;
padding: 0 6px;
opacity: 0.88;
}
.ruppert-language-switcher__link:first-child {
padding-left: 0;
}
.ruppert-language-switcher__link:last-child {
padding-right: 0;
}
.ruppert-language-switcher__link + .ruppert-language-switcher__link {
border-left: 1px solid rgba(255, 255, 255, 0.45);
}
.ruppert-language-switcher__link.is-current,
.ruppert-language-switcher__link:hover,
.ruppert-language-switcher__link:focus {
opacity: 1;
}
/* Row 2 - Main header */
.ruppert-header-main {
background-color: #ffffff;
/* border-bottom: 1px solid #dce3e5; */
}
.ruppert-header-main__inner {
min-height: 78px;
display: grid;
grid-template-columns: auto minmax(320px, 560px) auto;
align-items: center;
gap: 18px;
padding: 16px 32px 16px 24px;
}
.ruppert-header-main__logo .logo {
display: inline-flex;
}
.ruppert-header-main__logo img {
max-height: 46px;
width: auto;
}
.ruppert-header-main__search {
width: 100%;
max-width: 576px;
justify-self: center;
}
.ruppert-header-main__search #_desktop_ps_searchbar {
display: flex !important;
width: 100%;
}
.ruppert-header-main__search .ps-searchbar,
.ruppert-header-main__search .ps-searchbar__form {
width: 100%;
}
.ruppert-header-main__search .ps-searchbar__form {
position: relative;
}
.ruppert-header-main__search .ps-searchbar__magnifier {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #01454a;
font-size: 20px;
}
.ruppert-header-main__search .ps-searchbar__input.form-control {
height: 42px;
border: 1px solid #40807E;
border-radius: 6px;
padding: 9px 40px 9px 14px;
font-size: 13px;
color: #2e3e40;
box-shadow: none;
background-color: #ffffff;
}
.ruppert-header-main__search .ps-searchbar__input.form-control:focus {
border-color: #01454a;
}
.ruppert-header-main__search .ps-searchbar__clear {
right: 40px;
}
.ruppert-header-main__search .ps-searchbar--mobile {
display: none !important;
}
.ruppert-header-main__actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
}
.ruppert-header-action .ruppert-header-action__btn,
.ruppert-header-action .header-block__action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
color: #01454a;
text-decoration: none;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.ruppert-header-action .material-icons,
.ruppert-header-action .header-block__icon {
font-size: 18px;
line-height: 1;
color: #01454a;
}
.ruppert-header-action .ruppert-header-action__btn:hover,
.ruppert-header-action .header-block__action-btn:hover {
color: #0b676f;
}
.ruppert-header-action--cart #_desktop_ps_shoppingcart,
.ruppert-header-action--cart .ps-shoppingcart,
.ruppert-header-action--cart .header-block {
display: inline-flex;
align-items: center;
}
.ruppert-header-action--cart .header-block__title {
display: inline-flex !important;
font-size: 14px;
font-weight: 500;
}
.ruppert-header-action--cart .header-block__badge {
margin-left: 6px;
}
/* Row 3 - Main navigation */
.ruppert-header-nav {
background-color: #FCF6ED;
/* border-bottom: 1px solid #dce3e5; */
}
.ruppert-header-nav .ps-mainmenu--desktop {
display: block;
width: 100%;
}
.ruppert-header-nav .ps-mainmenu__desktop {
display: block !important;
}
.ruppert-header-nav .ps-mainmenu__tree {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: nowrap;
overflow-x: auto;
padding: 0;
margin: 0;
}
.ruppert-header-nav .ps-mainmenu__tree-link {
display: inline-flex;
align-items: center;
padding: 14px 0;
color: #40807E;
font-size: 16px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
font-family: 'TT-Rationalist-demibold' !important;
}
.ruppert-header-nav .ps-mainmenu__tree-item:first-child .ps-mainmenu__tree-link {
color: #d94a4a;
}
.ruppert-header-nav .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link,
.ruppert-header-nav .ps-mainmenu__tree-link:hover,
.ruppert-header-nav .ps-mainmenu__tree-link:focus {
color: #0d747c;
}
.NEU-section,
.NEU-section .ul-column,
.NEU-section .tvmega-menu-link,
.NEU-section a {
height: 50px !important;
min-height: auto !important;
max-height: 100px !important;
background-color: #01454A !important;
color: #FCF6ED !important;
padding: 0 10px !important;
align-items: center !important;
display: flex !important;
border-radius: 8px !important;
font-size : 14px !important;
font-weight: 500 !important;
line-height: 100% !important;
font-family: 'TT-Rationalist-Medium' !important;
}
/* Responsive behavior */
@media (max-width: 1199.98px) {
.ruppert-header-main__inner {
grid-template-columns: auto minmax(240px, 1fr) auto;
gap: 12px;
}
.ruppert-header-main__actions {
gap: 14px;
}
.ruppert-header-nav .ps-mainmenu__tree {
gap: 20px;
}
}
@media (max-width: 991.98px) {
.ruppert-header-main__inner {
display: flex;
min-height: 64px;
gap: 10px 8px;
row-gap: 10px;
padding:10px;
}
.ruppert-header-main__logo {
margin-right: 0;
}
.ruppert-header-main__search {
width: auto;
max-width: none;
margin-left: 0;
}
.ruppert-header-main__search #_desktop_ps_searchbar {
display: none !important;
}
.ruppert-header-main__search .ps-searchbar--mobile {
display: inline-flex !important;
}
.ruppert-header-main__actions {
display: none !important;
}
.ruppert-header-nav .ps-mainmenu__desktop {
display: none !important;
}
.ruppert-header-nav .ps-mainmenu__mobile-toggle {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 48px;
}
}
@media (max-width: 767.98px) {
.ruppert-header-top {
display: none;
}
.ruppert-header-main__logo img {
max-height: 38px;
}
}
/* RUPPERT FINAL HEADER OVERRIDES */
.ruppert-header-top {
background: #01454a !important;
color: #fff !important;
}
.ruppert-header-top__inner {
min-height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
.ruppert-header-top__right {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
.ruppert-header-top .ps-currencyselector,
.ruppert-header-top .ps-customersignin,
.ruppert-header-top .ps-shoppingcart,
.ruppert-header-top .ps-contactinfo {
display: none !important;
}
.ruppert-header-top .ruppert-language-switcher {
display: inline-flex !important;
}
.ruppert-header-top .ruppert-language-switcher__link {
color: #fff !important;
font-size: 12px !important;
font-family: 'TT-Commons-Pro-Regular' !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
line-height: 1 !important;
opacity: .85;
padding: 0 6px !important;
}
.ruppert-header-top .ruppert-language-switcher__link + .ruppert-language-switcher__link {
border-left: 1px solid rgba(255,255,255,.45);
}
.ruppert-header-top .ruppert-language-switcher__link.is-current {
opacity: 1;
}
.ruppert-header-main {
background: #FCF6ED !important;
/* border-bottom: 1px solid #d7dfdf !important; */
}
.ruppert-header-main__inner {
min-height: 96px !important;
display: grid !important;
grid-template-columns: auto minmax(360px, 520px) auto !important;
align-items: center !important;
gap: 20px !important;
}
.ruppert-header-main__logo img {
max-height: 64px !important;
width: auto !important;
}
.ruppert-header-main__search {
width: 100% !important;
max-width: 520px !important;
justify-self: center !important;
}
.ruppert-header-main__search #_desktop_ps_searchbar {
display: flex !important;
width: 100% !important;
}
.ruppert-header-main__search .ps-searchbar,
.ruppert-header-main__search .ps-searchbar__form {
width: 100% !important;
}
.ruppert-header-main__search .ps-searchbar__magnifier {
right: 10px !important;
left: auto !important;
color: #0f5257 !important;
}
.ruppert-header-main__search .ps-searchbar__input,
.ruppert-header-main__search .ps-searchbar__input.form-control {
height: 42px !important;
border: 1px solid #40807E !important;
border-radius: 6px !important;
background: #fff !important;
padding: 8px 34px 8px 12px !important;
font-size: 16px !important;
}
.ruppert-header-main__actions {
display: inline-flex !important;
align-items: center !important;
gap: 20px !important;
}
.ruppert-header-main__actions .ruppert-header-action__btn,
.ruppert-header-main__actions .header-block__action-btn {
color: #0f5257 !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-family: 'TT-Commons-Pro-Regular' !important;
}
.ruppert-header-main__actions .material-icons,
.ruppert-header-main__actions .header-block__icon {
font-size: 17px !important;
}
@media (min-width: 992px) {
.ruppert-header-action--wishlist .header-block__action-btn {
position: relative;
}
.ruppert-header-main__actions .header-block__badge {
position: absolute !important;
margin-left: 4px !important;
right: 65px;
background: #F07855;
top: -4px;
}
/* Wishlist badge only: keep cart at top-right, move wishlist to top-left (desktop layout hack) */
.ruppert-header-action--wishlist .header-block__badge {
right: 254px !important;
top: 60px !important;
}
}
.ruppert-header-nav {
background: #FCF6ED !important;
/* border-bottom: 1px solid #d7dfdf !important; */
}
.ruppert-header-nav .ps-mainmenu__desktop {
display: block !important;
}
.ruppert-header-nav .ps-mainmenu__tree {
display: flex !important;
align-items: center !important;
gap: 28px !important;
padding: 0 !important;
margin: 0 !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
}
.ruppert-header-nav .ps-mainmenu__tree-link {
color: #40807E !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 12px 0 !important;
font-family: 'TT-Rationalist-demibold' !important;
}
.ruppert-header-nav .ps-mainmenu__tree-item:first-child .ps-mainmenu__tree-link {
color: #de6c63 !important;
}
.ruppert-header-nav .ps-mainmenu__tree-link:hover,
.ruppert-header-nav .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link {
color: #0f5257 !important;
}
@media (max-width: 991.98px) {
.ruppert-header-top {
display: none !important;
}
.ruppert-header-main__inner {
min-height: 64px !important;
display: flex !important;
align-items: center !important;
gap: 10px 8px !important;
row-gap: 10px !important;
}
.ruppert-header-main__logo {
margin-right: 0 !important;
}
.ruppert-header-main__search #_desktop_ps_searchbar {
display: none !important;
}
.ruppert-header-main__search .ps-searchbar--mobile {
display: inline-flex !important;
}
.ruppert-header-main__actions {
display: none !important;
}
.ruppert-header-nav .ps-mainmenu__desktop {
display: none !important;
}
/* Megamenu SSR lives in #tvdesktop-megamenu; below 992px it stacks as a full list — hide it (overlay uses #tvmobile-megamenu). */
#header .header-nav.ruppert-mm #tvdesktop-megamenu {
display: none !important;
}
/* ThemeVolty mobile menu trigger (theme-provided; class name required by module JS). */
.ruppert-mm-mobile-bar {
width: 100%;
border-bottom: 1px solid rgba(0, 61, 61, 0.1);
background: #fcf6ed;
padding-left:10px;
}
.ruppert-mm-mobile-bar .tvmobile-sliderbar-btn {
margin: 0;
}
.ruppert-mm-mobile-bar__link {
width: 2.75rem;
height: 2.75rem;
border-radius: 8px;
border: 1px solid #40807e;
color: #01454a;
background: #fff;
}
.ruppert-mm-mobile-bar__link:focus-visible {
outline: 2px solid #01454a;
outline-offset: 2px;
}
.ruppert-mm-mobile-bar__icon {
display: block;
width: 1.15rem;
height: 2px;
background: currentColor;
box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}
/* Cart / wishlist badges: reset desktop pixel hacks when blocks appear in mobile drawer or clones */
#header .ruppert-header-action__btn,
#header .ruppert-header-action .header-block__action-btn,
#header .header-block {
position: relative;
}
#header .header-block__badge,
#header .ruppert-header-main .js-wishlist-count-badge {
position: absolute !important;
top: -0.25rem !important;
right: -0.2rem !important;
left: auto !important;
bottom: auto !important;
margin: 0 !important;
transform: none !important;
min-width: 1.125rem;
min-height: 1.125rem;
padding: 0 4px;
font-size: 0.65rem;
line-height: 1.125rem;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #f07855 !important;
color: #fff !important;
z-index: 3;
}
#header .ruppert-header-main .js-wishlist-count-badge:empty {
display: none !important;
}
/* Bootstrap mobile menu / search offcanvas: keep close control usable above TV layers */
#header .offcanvas,
#mobileMenu,
#searchCanvas {
z-index: 1055;
}
#header .offcanvas-header .btn-close,
#header .offcanvas-header [data-bs-dismiss="offcanvas"] {
z-index: 2;
position: relative;
pointer-events: auto;
color: #40807E !important;;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
}
.header-block__action-btn[href]:focus, .header-block__action-btn[href]:hover{
color: #40807E !important;;
font-family: 'TT-Commons-Pro-Regular', sans-serif;
}
.offcanvas-backdrop.show {
z-index: 1050;
}
/* ThemeVolty megamenu mobile: injected close row */
#tvmobile-megamenu .ruppert-mm-mobile-closebar {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0.5rem 0.25rem 0.75rem;
position: sticky;
top: 0;
z-index: 5;
background: #fdf8f0;
border-bottom: 1px solid rgba(0, 61, 61, 0.12);
}
#tvmobile-megamenu .ruppert-mm-mobile-closebar .ruppert-mm-mobile-close {
width: 2.5rem;
height: 2.5rem;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
background: #01454a;
color: #fff;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
#tvmobile-megamenu .ruppert-mm-mobile-closebar .ruppert-mm-mobile-close:hover,
#tvmobile-megamenu .ruppert-mm-mobile-closebar .ruppert-mm-mobile-close:focus-visible {
opacity: 0.9;
}
#tvmobile-megamenu .container_tv_megamenu {
max-height: calc(100vh - 3.5rem);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Hide empty-cart badge on mobile (avoids duplicate “0” next to live cart widget) */
#header .header-block.inactive .header-block__badge {
display: none !important;
}
/* TV megamenu overlay: controlled by body.ruppert-mm-panel-open + ruppert-header-mobile.js */
#tvmobile-megamenu.ruppert-mm-closed {
display: none !important;
}
body.ruppert-mm-panel-open {
overflow: hidden;
}
body.ruppert-mm-panel-open #tvmobile-megamenu {
display: block !important;
position: fixed;
inset: 0;
z-index: 1056;
background: #fdf8f0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: max(0.5rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
box-sizing: border-box;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .container_tv_megamenu {
max-height: none;
}
/* Mobile overlay: expand chevron + tap target (ThemeVolty .icon-drop-mobile) */
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent {
position: relative;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent > a {
padding-right: 3rem;
pointer-events: auto;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent > .icon-drop-mobile {
display: block !important;
position: absolute;
right: 0;
top: 0;
z-index: 3;
width: 3rem;
height: 2.75rem;
margin: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent > .icon-drop-mobile::after {
font-family: 'Material Icons';
content: '\e313';
display: block;
position: absolute;
top: 50%;
right: 0.5rem;
transform: translateY(-50%);
font-size: 1.5rem;
line-height: 1;
color: #003d3d;
pointer-events: none;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.parent > .icon-drop-mobile.opened::after,
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.ruppert-mm-sub-open > .icon-drop-mobile::after {
content: '\e316';
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal .menu-dropdown {
display: none !important;
position: relative;
z-index: 1;
}
body.ruppert-mm-panel-open #tvmobile-megamenu .tv-menu-horizontal li.level-1.ruppert-mm-sub-open > .tv-sub-menu.menu-dropdown {
display: block !important;
}
.ruppert-mm-backdrop {
position: fixed;
inset: 0;
z-index: 1055;
background: none;
cursor: pointer;
display: none;
}
}
/* RUPPERT FALLBACK: FORCE 3-ROW HEADER ON Hummingbird hook layout */
.header-top {
background: #01454a !important;
}
.header-top__left,
.header-top__right #_desktop_ps_customersignin,
.header-top__right #_desktop_ps_shoppingcart,
.header-top__right #_desktop_ps_currencyselector {
display: none !important;
}
.header-top__right {
display: flex !important;
justify-content: flex-end !important;
}
.header-top__right #_desktop_ps_languageselector {
display: inline-flex !important;
}
.header-bottom {
background: #f4f2ec !important;
border-bottom: 1px solid #d7dfdf !important;
}
.header-bottom__row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
row-gap: 10px !important;
}
.header-bottom__row > .header-bottom__logo {
order: 1;
}
.header-bottom__row > #_desktop_ps_searchbar,
.header-bottom__row > .ps-searchbar {
order: 2;
flex: 1 1 380px;
max-width: 520px;
margin-left: auto !important;
margin-right: auto !important;
}
.header-bottom__row > #_desktop_ps_customersignin,
.header-bottom__row > #_desktop_ps_shoppingcart,
.header-bottom__row > .ps-customersignin,
.header-bottom__row > .ps-shoppingcart {
order: 3;
}
/* If menu is injected into displayTop, force it to row 3 */
.header-bottom__row > .ps-mainmenu,
.header-bottom__row > .ps-mainmenu--desktop,
.header-bottom__row > nav.ps-mainmenu__desktop,
.header-bottom__row .ps-mainmenu--desktop {
order: 4 !important;
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
margin-top: 8px !important;
background: #f4f2ec !important;
border-top: 1px solid #d7dfdf !important;
}
.header-bottom__row .ps-mainmenu__desktop {
display: block !important;
}
.header-bottom__row .ps-mainmenu__tree {
display: flex !important;
align-items: center !important;
gap: 28px !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
margin: 0 !important;
padding: 0 !important;
}
.header-bottom__row .ps-mainmenu__tree-link {
color: #40807E !important;
font-size: 12px !important;
font-weight: 500 !important;
padding: 12px 0 !important;
white-space: nowrap !important;
}
@media (max-width: 991.98px) {
.header-top {
display: none !important;
}
.header-bottom__row > .ps-mainmenu,
.header-bottom__row > .ps-mainmenu--desktop,
.header-bottom__row > nav.ps-mainmenu__desktop,
.header-bottom__row .ps-mainmenu--desktop,
.header-bottom__row .ps-mainmenu__desktop {
display: none !important;
}
}
/* Header action icons (Figma exports in themes/ruppert/assets/img/header/) */
.ruppert-header-action__icon,
#_desktop_ps_shoppingcart .header-block__icon.ruppert-header-action__icon {
width: 20px;
height: 20px;
object-fit: contain;
display: block;
flex-shrink: 0;
margin-right: 5px;
}
.ruppert-header-action__btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Ruppert mega menu layout to match Figma columns */
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu {
border-top: 1px solid #0b8ad1;
background: #FCF6ED;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__row {
display: block;
margin: 0;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__left {
display: none !important;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__main-header {
padding: 14px 22px 10px;
border-bottom: 1px solid #cfd8d8;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__main-title {
display: inline-block;
font-size: 14px;
line-height: 1.1;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.01em;
color: #1f5e63;
text-decoration: none;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right {
width: 100%;
max-width: 100%;
padding: 18px 22px 18px;
display: grid;
grid-template-columns: repeat(6, minmax(140px, 1fr));
gap: 26px;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items,
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items.active,
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items.not-active {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__section-title {
display: block;
margin: 0 0 8px;
font-size: 14px;
font-weight: 600;
color: #de6c63;
text-decoration: none;
font-family: 'TT-Rationalist-demibold' !important;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items ul,
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items li {
list-style: none;
margin: 0;
padding: 0;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item {
display: block;
padding: 0;
margin: 0 0 5px;
font-size: 14px;
line-height: 1.35;
color: #01454A;
text-decoration: none;
font-weight: 400;
font-family: 'TT-Commons-Pro-Regular' !important;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right-items .menu-item__group-main-item {
font-weight: 500;
margin-bottom: 6px;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__media {
display: grid;
grid-template-columns: 1.05fr repeat(4, 1fr);
gap: 8px;
padding: 6px 22px 18px;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__media-feature {
min-height: 62px;
border-radius: 6px;
background: #005764;
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
padding: 0 16px;
font-size: 14px;
font-weight: 500;
font-family: 'TT-Commons-Pro-Medium' !important;
height: 62px;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__media-card {
position: relative;
display: block;
min-height: 62px;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: #fff;
background: #9aa;
font-family: 'TT-Commons-Pro-Medium' !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__media-card img {
width: 100%;
height: 100%;
min-height: 62px;
object-fit: cover;
display: block;
}
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__media-card span {
position: absolute;
top: 8px;
left: 10px;
font-size: 11px;
line-height: 1;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
font-family: 'TT-Commons-Pro-Medium' !important;
font-size: 14px !important;
font-weight: 500 !important;
}
/* Ruppert homepage carousel revamp (ps_imageslider only) */
.ps-imageslider #ps_imageslider {
overflow: hidden;
}
.ps-imageslider #ps_imageslider .ps-imageslider__figure {
position: relative;
margin: 0;
min-height: 560px;
}
.ps-imageslider #ps_imageslider .ps-imageslider__figure > img {
width: 100%;
height: 75vh;
object-fit: cover;
}
.ps-imageslider #ps_imageslider .ps-imageslider__figcaption {
position: absolute;
inset: 0;
padding: 18px 36px 34px;
background: linear-gradient(180deg, rgba(4, 43, 50, 0) 62%, rgba(210, 241, 242, 0.52) 100%);
color: #fff;
display: flex !important;
flex-direction: column;
justify-content: space-between;
text-align: initial;
}
.ps-imageslider__promo {
position: relative;
width: 400px;
margin-left: auto;
min-height: 210px;
top:23px;
}
.ps-imageslider__promo-chip {
width: fit-content;
background: #cceff0;
color: #01454a;
border-radius: 8px;
transform: rotate(7deg);
font-family: 'TT-Rationalist-demibold' !important;
}
.ps-imageslider__promo-chip--main {
font-size: 36px;
line-height: 1;
padding: 5px 10px 5px;
position: absolute;
right: 116px;
top: 0;
z-index:1000;
font-family: 'TT-Rationalist-demibold' !important;
font-weight: 600 !important;
}
.ps-imageslider__promo-chip--sub {
font-size: 24px;
line-height: 1;
padding: 10px 18px 8px;
position: absolute;
right: 86px;
top: 43px;
z-index:1000;
font-family: 'TT-Commons-Pro-Medium' !important;
font-weight: 500 !important;
}
.ps-imageslider__promo-badge {
width: 220px;
height: 220px;
border-radius: 50%;
background: #F07855;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
line-height: 1.25;
font-weight: 600;
padding: 26px;
position: absolute;
right: 0;
top: 30px;
transform: rotate(7deg);
}
.ps-imageslider__bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
bottom: 90px;
position: absolute;
width:96%;
}
.ps-imageslider__brand-wrap {
display: inline-flex;
align-items: center;
gap: 14px;
}
.ps-imageslider__brand-icon {
width: 58px;
height: 58px;
border-radius: 50%;
background: #01454a;
display: inline-block;
position: relative;
}
.ps-imageslider__brand-icon::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 28px;
height: 28px;
background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M8.5 8.5v11M13.8 8.5v11M19.1 8.5v11M6.5 8.5h15M6.5 19.5h15M10.2 8.5l1-3h5.6l1 3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ps-imageslider__brand {
color: #01454a;
font-size: 50px;
line-height: 1;
font-family: 'TT-Rationalist-Medium' !important;
font-weight: 400 !important;
}
.ps-imageslider__cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: #01454a;
color: #FCF6ED;
border-radius: 12px;
padding: 16px 32px;
font-size: 24px;
line-height: 1;
font-family: 'TT-Rationalist-Medium-italic' !important;
white-space: nowrap;
font-weight: 500 !important;
}
.ps-imageslider__cta-arrow {
font-size: 16px;
line-height: 1;
color: #FCF6ED;
}
/* Featured promotions section (homepage) */
.ps-featuredproducts {
background: #01454a;
padding: 64px 80px 34px;
}
.ps-featuredproducts .module-products.container {
max-width: 100%;
}
.ps-featuredproducts__header {
text-align: center;
margin-bottom: 26px;
}
.ps-featuredproducts .section-title {
color: #fff;
margin-bottom: 10px;
font-size: 36px;
line-height: 40px;
font-family: 'TT-Rationalist-Medium' !important;
font-weight: 500 !important;
}
.ps-featuredproducts__subtitle {
margin: 0 auto;
color: #d6ecee;
max-width: 760px;
font-size: 16px;
line-height: 1.45;
font-weight:400;
font-family: 'TT-Commons-Pro-Regular' !important;
margin-bottom : 50px;
}
.ps-featuredproducts .products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.ps-featuredproducts .product-miniature__inner {
background: #ffffff;
border-radius: 14px;
overflow: hidden;
}
.ps-featuredproducts .product-miniature__top,
.ps-featuredproducts .product-miniature__image-container,
.ps-featuredproducts .product-miniature__image-link {
margin: 0 !important;
padding: 0 !important;
}
.ps-featuredproducts .product-miniature__top {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.ps-featuredproducts .product-miniature__image-link picture {
display: block;
width: 100%;
height: 100%;
}
.ps-featuredproducts .product-miniature__image {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.ps-featuredproducts .product-miniature__bottom {
padding: 24px 24px 18px;
gap: 12px;
}
.ps-featuredproducts .product-miniature__title {
color: #01454a;
font-size: 20px;
font-weight: 600;
line-height: 28px;
font-family: 'TT-Rationalist-demibold' !important;
margin-bottom : 10px;
}
.ps-featuredproducts .product-miniature__desc {
color: #6a8f93;
font-size: 14px;
line-height: 1.3;
font-family: 'TT-Commons-Pro-Regular' !important;
font-weight: 400;
margin-bottom : 15px;
}
.ps-featuredproducts .product-miniature__regular-price {
color: #8aa3a6;
font-size: 14px;
}
.ps-featuredproducts .product-miniature__price {
color: #144f55;
font-size: 20px;
line-height: 1;
font-family: 'TT-Rationalist-demibold' !important;
}
.ps-featuredproducts .product-miniature .product-flags {
top: 10px;
right: 10px;
left: auto;
width: auto;
padding: 0;
}
.ps-featuredproducts .product-flags .badge:not(.discount) {
display: none;
}
.ps-featuredproducts .product-flags .badge.discount {
width: 58px;
height: 58px;
border-radius: 50%;
border: 0;
background: #F07855;
color: #fff;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.ps-featuredproducts .product-miniature__form {
display: grid;
grid-template-columns: 125px 1fr;
gap: 8px;
}
.ps-featuredproducts .quantity-button {
border: 1px solid #d8e3e5;
border-radius: 8px;
overflow: hidden;
}
.ps-featuredproducts .quantity-button input,
.ps-featuredproducts .quantity-button button {
min-height: 42px;
background: #f5f8f9;
}
.ps-featuredproducts .product-miniature__add.btn {
border: 0;
border-radius: 8px;
background: #F07855;
min-height: 42px;
}
.ps-featuredproducts .product-miniature__add .material-icons {
color: #fff;
}
.module-products{
background-color: #01454A !important;
}
.ps-featuredproducts .module-products__buttons {
margin-top: 50px;
margin-bottom: 50px;
}
.ps-featuredproducts__footer-btn {
background: #F07855;
color: #fff;
border: 0;
border-radius: 12px;
padding: 12px 30px;
font-size: 24px;
line-height: 1;
font-family: 'TT-Rationalist-Medium-italic' !important;
font-weight: 500;
}
/* Featured products: responsive grid (avoids 4 narrow columns on tablet / phone) */
@media (max-width: 1199.98px) {
.ps-featuredproducts .products {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.ps-featuredproducts .product-miniature {
min-width: 0;
}
.ps-featuredproducts .module-products.container {
max-width: 100%;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
.ps-featuredproducts .section-title {
font-size: clamp(1.5rem, 4.2vw, 2rem);
line-height: 1.15;
}
.ps-featuredproducts__subtitle {
font-size: 15px;
padding-inline: 10px;
}
.ps-featuredproducts .product-miniature__bottom {
padding: 18px 16px 14px;
}
.ps-featuredproducts .product-miniature__title {
font-size: clamp(1rem, 2.6vw, 1.125rem);
line-height: 1.3;
}
.ps-featuredproducts .product-miniature__price {
font-size: clamp(1.05rem, 2.8vw, 1.2rem);
}
.ps-featuredproducts .product-flags .badge.discount {
width: 52px;
height: 52px;
font-size: 16px;
}
}
@media (max-width: 575.98px) {
.ps-featuredproducts {
padding: 28px 0 26px;
}
.ps-featuredproducts__header {
margin-bottom: 18px;
}
.ps-featuredproducts .products {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
max-width: 400px;
margin-inline: auto;
}
.ps-featuredproducts .product-miniature__bottom {
padding: 16px 18px 14px;
}
.ps-featuredproducts .product-miniature__title {
font-size: 1.125rem;
}
.ps-featuredproducts .product-miniature__desc {
font-size: 13px;
}
.ps-featuredproducts .product-miniature__form {
grid-template-columns: 1fr;
gap: 10px;
}
.ps-featuredproducts .product-flags .badge.discount {
width: 46px;
height: 46px;
font-size: 14px;
}
.ps-featuredproducts__footer-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
font-size: clamp(1rem, 4.2vw, 1.2rem);
padding: 14px 18px;
white-space: normal;
text-align: center;
}
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
.ps-featuredproducts .products {
gap: 16px;
}
.ps-featuredproducts .module-products.container {
max-width: 100%;
}
}
.service-section{
max-width:100%;
margin:auto;
padding:180px 180px 250px;
background:#F5F1EB;
position : relative;
}
@media (max-width: 1399.98px) {
.service-section {
padding: 150px 100px 250px;
}
.service-card {
padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 7vw, 4rem);
}
.service-title {
font-size: clamp(1.5rem, 3vw, 2rem);
}
}
@media (max-width: 1199.98px) {
.service-section {
padding-top: clamp(2.5rem, 7vw, 5rem);
padding-bottom: clamp(3rem, 9vw, 7rem);
}
.service-card {
padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 5vw, 2.5rem);
}
.service-card h3 {
font-size: clamp(1.5rem, 3.2vw, 2rem);
}
.service-card p {
font-size: clamp(1rem, 2.2vw, 1.15rem);
line-height: 1.45;
}
.service-row {
gap: clamp(0.75rem, 2vw, 1.25rem);
}
.image-left .service-image {
grid-column: 1 / 6;
}
.image-left .service-card {
grid-column: 6 / 13;
}
.image-right .service-card {
grid-column: 1 / 8;
}
.image-right .service-image {
grid-column: 8 / 13;
}
}
.service-title{
font-size:36px;
margin-bottom:30px;
color:#00454A;
font-family: 'TT-Rationalist-demibold' !important;
font-weight:600 !important;
}
.service-row{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:20px;
margin-bottom:20px;
}
.service-image{
max-height:592px;
}
.service-image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:8px;
display:block;
}
/* ROW TYPE 1 */
/* IMAGE LEFT + CARD RIGHT */
.image-left .service-image{
grid-column:1/5;
}
.image-left .service-card{
grid-column:5/13;
}
/* ROW TYPE 2 */
/* CARD LEFT + IMAGE RIGHT */
.image-right .service-card{
grid-column:1/9;
}
.image-right .service-image{
grid-column:9/13;
}
.service-image img{
width:100%;
height:100%;
object-fit:cover;
border-radius:8px;
display:block;
}
.service-card{
background:#BED8D5;
border-radius:8px;
padding:70px 140px;
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
z-index : 1000;
}
.service-card h3{
font-size:40px;
color:#00454A;
margin-bottom:20px;
font-family: 'TT-Rationalist-Medium' !important;
font-weight:500 !important;
line-height:100%;
letter-spacing:0;
}
.service-card p{
font-size:20px;
color:#00454A;
font-family: 'TT-Commons-Pro-Medium' !important;
font-weight:500 !important;
line-height:30px;
letter-spacing:0;
}
.service-btn{
margin-top:30px;
background:#004E57;
color:white !important;
text-decoration:none;
padding:16px 28px;
border-radius:8px;
width:fit-content;
margin-left: auto;
font-family: 'TT-Rationalist-Medium-italic' !important;
font-size:24px;
}
.service-icon{
position:absolute;
left:-75px;
top:50%;
transform:translateY(-50%);
width:129px;
height:129px;
background:#F5F1EB;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.service-icon img{
width:70px;
}
.icon-right{
left:auto;
right:-75px;
}
.opening-hours-box{
position:static;
bottom:40px;
left:60px;
width:80%;
background:#f7f2eb;
border-radius:12px;
padding:30px;
box-sizing:border-box;
z-index:10;
margin-top : 20px;
}
.hours-title{
font-family:'TT-Rationalist-Medium-italic' !important;
font-size:16px;
margin-bottom:30px;
font-weight:500 !important;
line-height:100%;
letter-spacing:0;
color : #01454A;
}
.hours-row{
display:flex;
justify-content:space-between;
margin-bottom:18px;
font-size:14px;
font-family: 'TT-Commons-Pro-Regular' !important;
font-weight:400 !important;
line-height:100%;
letter-spacing:0;
color : #01454A;
}
.hours-location{
margin-top:0px;
font-size:14px;
font-family: 'TT-Commons-Pro-Regular' !important;
font-weight:400 !important;
line-height:100%;
letter-spacing:0;
color : #01454A;
}
.bg-img{
width: 100%;
position: absolute;
bottom: -84px;
left: 0px;
}
@media (max-width: 991.98px) {
.service-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.bg-img{
display: none;
}
/* Reset desktop column spans so stacked layout does not overflow */
.image-left .service-image,
.image-left .service-card,
.image-right .service-card,
.image-right .service-image {
grid-column: 1 / -1;
max-width: 100%;
}
.image-right .service-image {
order: -1;
}
.service-image {
max-height: min(380px, 58vh);
}
.service-card {
padding: clamp(1.25rem, 5vw, 2.5rem) clamp(1rem, 4vw, 1.5rem);
}
.service-card h3 {
font-size: clamp(1.35rem, 5vw, 1.85rem);
}
.service-card p {
font-size: clamp(0.95rem, 3.5vw, 1.1rem);
line-height: 1.45;
}
.service-btn {
margin-left: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: clamp(1rem, 3.5vw, 1.25rem);
padding: 0.85rem 1.25rem;
}
.service-icon {
position: relative;
left: auto;
right: auto;
top: -21%;
transform: none;
margin: -2.5rem auto 1rem;
width: clamp(88px, 22vw, 112px);
height: clamp(88px, 22vw, 112px);
}
.service-icon img {
width: clamp(44px, 11vw, 56px);
}
.icon-right {
left: auto;
right: auto;
transform: none;
}
.opening-hours-box {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
padding: 1.25rem;
box-sizing: border-box;
}
.service-title {
font-size: clamp(1.35rem, 4.5vw, 1.75rem);
margin-bottom: 1.25rem;
}
.ps-featuredproducts {
padding: 50px 30px 34px;
}
}
.promo-newsletter-section {
position: relative;
font-family: 'Montserrat', sans-serif; /* Example font */
/* top:-70px; */
}
.promo-top-row {
background-color: #BED8D5; /* Light blue/green top */
padding: 60px 150px 100px 150px;
height: 283px;
}
.newsletter-bottom-row {
background-color: #4a817e; /* Darker teal bottom */
padding: 80px 0 60px 0;
color: #ffffff;
position: relative;
}
.promo-card-wrapper {
display: flex;
justify-content: center;
margin-bottom: -150px; /* Overlap into the dark section */
margin-top: 30px;
z-index: 10;
}
.promo-card {
background: #fff;
border-radius: 8px;
padding: 40px 20px;
text-align: center;
width: 90%;
position: relative;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.promo-badge {
position: absolute;
top: -57px;
left: 50%;
transform: translateX(-50%);
background: #fff;
border-radius: 50%;
padding: 10px;
width: 130px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
}
.promo-badge img {
max-width: 90%;
}
.promo-card h3 {
color: #00454A;
font-size: 24px;
font-weight: 600;
margin-top: 30px;
font-family: 'TT-Rationalist-Demibold' !important;
line-height: 100%;
letter-spacing: 0;
}
.newsletter-bottom-row h2 {
font-size: 36px;
margin-bottom: 20px;
font-family: 'TT-Rationalist-Demibold' !important;
font-weight: 600 !important;
line-height: 100%;
letter-spacing: 0;
color: #FCF6ED;
}
.newsletter-bottom-row p {
font-size: 22px;
font-family: 'TT-Commons-Pro-Medium' !important;
font-weight: 500 !important;
line-height: 32px;
letter-spacing: 0;
color: #FCF6ED;
margin-bottom: 50px;
}
.newsletter-btn {
background-color: #00454A;
border: none;
border-radius: 12px;
padding: 16px 32px;
text-transform: none;
font-family: 'TT-Rationalist-Medium-italic' !important;
font-size: 24px;
font-weight: 500 !important;
line-height: 100%;
letter-spacing: 0;
color: #FCF6ED;
}
.promo-circle {
position: absolute;
right: 6%;
top: -50px;
background: #F07855; /* Orange circle */
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(15deg);
font-weight: 700;
font-size: 21.6px;
line-height: 28px;
color: #FCF6ED;
font-family: 'TT-Commons-Pro-Bold' !important;
letter-spacing: 0;
z-index: 100;
}
/* Promo + newsletter: tablet & mobile — stack cards, drop overlap / absolute badge */
@media (max-width: 1199.98px) {
.promo-newsletter-section {
top: 0;
overflow-x: clip;
}
.service-card{
padding:70px 70px;
}
.promo-top-row {
height: auto;
min-height: 0;
padding: clamp(4rem, 5vw, 3rem) clamp(1rem, 6vw, 1.5rem) clamp(2.5rem, 7vw, 4rem);
}
.promo-newsletter-section .promo-top-row .row > [class*='col-'] {
flex: 0 0 100%;
max-width: 100%;
}
.promo-card-wrapper {
margin-bottom: 0;
margin-top: 0.75rem;
z-index: 1;
}
.promo-card-wrapper:first-child {
margin-top: 0;
}
.promo-card {
width: 100%;
max-width: 560px;
margin-inline: auto;
padding: clamp(2.75rem, 6vw, 3.25rem) clamp(1.25rem, 4vw, 1.75rem) clamp(1.5rem, 4vw, 2rem);
}
.promo-newsletter-section .promo-top-row .row {
row-gap: 4.5rem;
}
.promo-badge {
width: 112px;
height: 112px;
top: -50px;
}
.promo-card h3 {
font-size: clamp(1.05rem, 2.8vw, 1.35rem);
line-height: 1.3;
margin-top: 1.25rem;
}
.newsletter-bottom-row {
padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 3.5rem);
}
.newsletter-bottom-row .container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
.newsletter-bottom-row h2 {
font-size: clamp(1.5rem, 4vw, 2rem);
line-height: 1.2;
}
.newsletter-bottom-row p {
font-size: clamp(1rem, 2.5vw, 1.2rem);
line-height: 1.45;
margin-bottom: 1.5rem;
max-width: 38rem;
margin-left: auto;
margin-right: auto;
}
.newsletter-btn {
font-size: clamp(1rem, 2.6vw, 1.15rem);
padding: 0.875rem 1.35rem;
white-space: normal;
max-width: 100%;
}
.promo-circle {
position: relative;
right: auto;
top: auto;
left: auto;
transform: rotate(12deg);
margin: 1.75rem auto 0;
width: clamp(148px, 38vw, 190px);
height: clamp(148px, 38vw, 190px);
font-size: clamp(0.9rem, 2.3vw, 1.05rem);
line-height: 1.25;
z-index: 2;
}
}
@media (max-width: 575.98px) {
.promo-badge {
width: 96px;
height: 96px;
top: -44px;
padding: 8px;
}
.promo-card h3 {
font-size: 1.05rem;
}
.newsletter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
max-width: min(22rem, 100%);
}
.promo-circle span {
display: block;
text-align: center;
padding: 0 0.35rem;
}
.service-section{
padding: 50px 23px;
}
.service-card{
padding: 30px 30px;
}
.service-icon{
top: -10%;
}
.ps-featuredproducts {
padding: 28px 23px 26px;
}
.module-products.container {
padding-left:0px !important;
padding-right:0px !important;
}
}
/* -------------------------------------------------------------------------- */
/* Ruppert footer (Figma-aligned) */
/* -------------------------------------------------------------------------- */
.footer--ruppert.footer__main {
--ruppert-footer-bg: #003d3d;
--ruppert-footer-card: #0a5555;
--ruppert-footer-accent: #1ba8d9;
--ruppert-footer-text: #ffffff;
--ruppert-footer-muted: rgba(255, 255, 255, 0.82);
background: var(--ruppert-footer-bg);
color: var(--ruppert-footer-text);
padding: 63px 80px;
}
.footer--ruppert .footer__main-top.ruppert-footer__columns {
--bs-gutter-x: 1.75rem;
--bs-gutter-y: 1.5rem;
margin-top: 2rem;
align-items: flex-start;
}
.footer--ruppert .ruppert-footer__brand {
padding-bottom: 0.25rem;
}
.footer--ruppert .ruppert-footer__logo-link img {
filter: brightness(0) invert(1);
max-height: 65px;
width: auto;
}
.footer--ruppert .ruppert-footer__tagline {
font-family: 'TT-Rationalist-Medium-italic', Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 1rem;
color: var(--ruppert-footer-muted);
margin: 0;
}
.footer--ruppert .ruppert-footer__social .ruppert-footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: #ffffff;
color: var(--ruppert-footer-bg);
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.footer--ruppert .ruppert-footer__social .ruppert-footer__social-link:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
color: var(--ruppert-footer-bg);
}
.footer--ruppert .ruppert-footer__social .ruppert-footer__social-link svg {
display: block;
}
.footer--ruppert .footer-block {
margin-block-end: 0;
margin-top:0px;
}
.footer--ruppert .footer-block__title,
.footer--ruppert .ruppert-footer__contact-title {
font-family: 'TT-Rationalist-Demibold';
font-weight: 600;
font-size: 20px;
color: #FCF6ED;
line-height: 100%;
letter-spacing: 0;
margin-block-end: 1.25rem;
}
.footer--ruppert .ps-customeraccountlinks .footer-block__title {
margin-block-end: 1.25rem;
}
.footer--ruppert .footer-block__list a {
font-family: 'TT-Commons-Pro-Medium';
font-size: 14px;
color: #FCF6ED;
font-weight: 400 !important;
line-height: 100%;
letter-spacing: 0;
padding-block: 10px;
}
.footer--ruppert .footer-block__list a:hover {
color: #ffffff;
text-decoration: underline;
}
.footer--ruppert .ruppert-footer__contact-card {
background: var(--ruppert-footer-card);
border-radius: 16px;
padding: 1.5rem 1.25rem 1.35rem;
height: 100%;
margin-top: -28px;
}
.footer--ruppert .ruppert-footer__contact-body {
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer--ruppert .ruppert-footer__contact-row {
display: flex;
gap: 0.65rem;
align-items: flex-start;
font-family: 'TT-Commons-Pro-Medium', system-ui, sans-serif;
font-size: 0.9375rem;
line-height: 1.45;
}
.footer--ruppert .ruppert-footer__contact-icon {
flex-shrink: 0;
line-height: 1;
}
.footer--ruppert .ruppert-footer__contact-icon .material-icons {
font-size: 1.25rem;
color: var(--ruppert-footer-text);
}
.footer--ruppert .ruppert-footer__contact-address,
.footer--ruppert .ruppert-footer__contact-row a {
font-family: 'TT-Commons-Pro-Medium';
font-size: 14px;
color: #FCF6ED;
font-weight: 400 !important;
line-height: 17px;
letter-spacing: 0;
padding-block: 10px;
margin-bottom: 3px;
padding: 5px 0px 12px;
}
.footer--ruppert .ruppert-footer__contact-row a:hover {
text-decoration: underline;
}
.footer--ruppert .ruppert-footer__bottom {
margin-top: 2.5rem;
padding-top: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: none;
}
.footer--ruppert .ruppert-footer__bottom-inner {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
@media (min-width: 768px) {
.footer--ruppert .ruppert-footer__bottom-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.footer--ruppert .ruppert-footer__copyright {
font-family: 'TT-Rationalist-Medium-italic';
font-size: 16px;
color: #FCF6ED;
line-height: 100%;
letter-spacing: 0;
font-weight: 500 !important;
}
.footer--ruppert .ruppert-footer__legal-list a {
font-family: 'TT-Commons-Pro-Medium', system-ui, sans-serif;
font-size: 0.875rem;
color: var(--ruppert-footer-text);
text-decoration: none;
}
.footer--ruppert .ruppert-footer__legal-list a:hover {
text-decoration: underline;
}
.footer--ruppert .footer-block__title--toggle .material-icons {
color: var(--ruppert-footer-text);
}
.footer--ruppert .footer-block__title--toggle .stretched-link {
color: inherit;
}
@media (max-width: 991.98px) {
.footer--ruppert.footer__main {
padding: clamp(2rem, 5vw, 2.75rem) max(16px, env(safe-area-inset-left)) 2.25rem
max(16px, env(safe-area-inset-right));
}
.footer--ruppert .ruppert-footer__columns {
margin-top: 1.5rem;
}
.footer--ruppert .ruppert-footer__contact-card {
margin-top: 0;
height: auto;
max-width: 100%;
}
.footer--ruppert .footer__main-top.ruppert-footer__columns {
--bs-gutter-y: 1.35rem;
}
.footer--ruppert .ruppert-footer__brand.row {
text-align: center;
}
.footer--ruppert .ruppert-footer__brand .d-flex.flex-wrap {
justify-content: center;
}
.footer--ruppert .ruppert-footer__brand .text-lg-end {
text-align: center !important;
}
.footer--ruppert .ruppert-footer__bottom {
margin-top: 2rem;
padding-top: 1.25rem;
}
.footer--ruppert .ruppert-footer__copyright,
.footer--ruppert .ruppert-footer__legal-list {
text-align: center;
width: 100%;
}
.footer--ruppert .ruppert-footer__bottom-inner {
align-items: center;
}
}
/* -------------------------------------------------------------------------- */
/* Ruppert header: 992px–1399px (megamenu wrap + main row fit) */
/* Above 1400px keeps single-line nav; below, wrap links instead of overflow */
/* -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1399.98px) {
#header .header-nav.ruppert-mm {
overflow-x: clip;
}
#header .header-nav.ruppert-mm > .container-md {
max-width: 100%;
box-sizing: border-box;
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
#header .header-nav.ruppert-mm #tvdesktop-megamenu .tv-menu-horizontal ul.menu-content {
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: center;
row-gap: 0.15rem;
column-gap: 0.25rem 0.65rem;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal li.level-1 {
flex: 0 1 auto;
}
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a {
padding: 0.5rem 0.4rem !important;
font-size: clamp(12.5px, 0.95vw, 15px) !important;
line-height: 1.2 !important;
}
#header .header-nav.ruppert-mm .container_tv_megamenu {
padding: 10px 8px 0px !important;
}
/* Main header row: let search shrink; avoid horizontal page overflow */
.ruppert-header-main__inner {
grid-template-columns: auto minmax(140px, 1fr) auto !important;
gap: 10px 12px !important;
padding-left: 12px !important;
padding-right: 12px !important;
min-height: 78px !important;
max-width: 100%;
box-sizing: border-box;
}
.ruppert-header-main__logo {
flex-shrink: 0;
min-width: 0;
}
.ruppert-header-main__logo img {
max-height: clamp(44px, 5vw, 56px) !important;
}
.ruppert-header-main__search {
max-width: none !important;
min-width: 0 !important;
width: 100% !important;
justify-self: stretch !important;
}
.ruppert-header-main__search .ps-searchbar__input,
.ruppert-header-main__search .ps-searchbar__input.form-control {
font-size: clamp(13px, 1.1vw, 15px) !important;
padding-left: 10px !important;
padding-right: 36px !important;
}
.ruppert-header-main__actions {
gap: 8px 12px !important;
flex-shrink: 0;
min-width: 0;
}
.ruppert-header-main__actions .ruppert-header-action__btn,
.ruppert-header-main__actions .header-block__action-btn {
font-size: clamp(11px, 1vw, 13px) !important;
gap: 3px !important;
white-space: nowrap;
}
.ruppert-header-action--cart .header-block__title {
font-size: clamp(11px, 1vw, 13px) !important;
}
/* Wishlist / hook badge: reset fixed pixel offsets that break <1400 layouts */
.ruppert-header-action--wishlist {
position: relative;
}
.ruppert-header-action--wishlist .header-block__badge {
position: absolute !important;
top: -4px !important;
right: -2px !important;
left: auto !important;
margin-left: 0 !important;
}
.ruppert-header-action--wishlist .ruppert-header-action__btn {
position: relative;
}
.ruppert-header-action--wishlist .js-wishlist-count-badge {
position: absolute;
top: -4px;
right: -2px;
left: auto;
}
.ruppert-header-top__inner {
padding-right: 16px !important;
}
}
/* Tighter band for “medium-wide” desktops (tablets landscape / small laptops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
#header .header-nav.ruppert-mm .tv-menu-horizontal ul li.level-1 > a {
padding: 0.45rem 0.3rem !important;
font-size: clamp(12px, 1.5vw, 14px) !important;
}
.ruppert-header-main__inner {
grid-template-columns: auto minmax(120px, 1fr) auto !important;
gap: 8px !important;
}
}
/* -------------------------------------------------------------------------- */
/* Ruppert responsive <1400px: header logo, ps_mainmenu submenu, hero slider */
/* -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1399.98px) {
#header .ruppert-header-main__logo {
max-width: min(240px, 28vw);
min-width: 0;
}
#header .ruppert-header-main__logo .logo,
#header .ruppert-header-main__logo a {
display: inline-flex !important;
align-items: center;
max-width: 100%;
}
#header .ruppert-header-main__logo img {
display: block !important;
max-width: 100%;
height: auto;
object-fit: contain;
}
.ps-imageslider__bottom{
margin-bottom: 50px;
}
}
@media (max-width: 991.98px) {
#header .ruppert-header-main__inner,
.ruppert-header-main__inner {
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 10px 12px;
row-gap: 12px;
box-sizing: border-box;
}
#header .ruppert-header-main__logo,
.ruppert-header-main__logo {
flex: 0 0 auto;
max-width: min(210px, 50vw);
margin-right: 0 !important;
align-self: center;
}
#header .ruppert-header-main__logo .logo,
#header .ruppert-header-main__logo .navbar-brand,
#header .ruppert-header-main__logo a {
display: inline-flex !important;
align-items: center;
max-width: 100%;
}
#header .ruppert-header-main__logo img {
display: block !important;
max-width: 100%;
width: auto;
height: auto;
max-height: clamp(32px, 9vw, 44px);
object-fit: contain;
}
#header .ruppert-header-main__search,
.ruppert-header-main__search {
flex: 1 1 100%;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
min-width: 0;
}
}
@media (max-width: 767.98px) {
#header .ruppert-header-main__logo {
order: 1;
}
#header #_mobile_ps_customersignin {
order: 2;
margin-left: auto;
}
#header #_ruppert_mobile_wishlist {
order: 3;
}
#header #_mobile_ps_shoppingcart {
order: 4;
}
#header .ruppert-header-main__search {
order: 5;
}
/* Tight icon row: account + wishlist + cart */
#header .ruppert-header-main__mobile-icon .header-block__action-btn {
min-width: 2.5rem;
min-height: 2.5rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
#header .ruppert-header-main__mobile-wishlist .header-block__action-btn {
position: relative;
}
#header .ruppert-mobile-wishlist-badge {
position: absolute;
top: -0.2rem;
right: -0.15rem;
z-index: 2;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
#header .ruppert-header-main__logo {
order: 1;
}
#header .ruppert-header-main__actions {
order: 2;
margin-left: auto !important;
}
#header .ruppert-header-main__search {
order: 3;
}
}
@media (max-width: 1199.98px) {
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
padding: 1rem 1.1rem 1.25rem;
}
}
@media (max-width: 767.98px) {
.ruppert-header-nav .ps-mainmenu:is(.ps-mainmenu--desktop) .submenu__right {
grid-template-columns: 1fr;
gap: 0.75rem;
padding: 0.85rem 1rem 1rem;
}
}
@media (max-width: 991.98px) {
.ps-imageslider #ps_imageslider .ps-imageslider__figure {
min-height: 0;
height: auto;
}
.ps-imageslider #ps_imageslider .ps-imageslider__figure > img {
height: 75vh;
}
/* Smooth overlay (no hard mid-band); anchor content to bottom */
.ps-imageslider #ps_imageslider .ps-imageslider__figcaption {
justify-content: flex-end;
align-items: stretch;
padding: 1rem 1.1rem 2.75rem;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-radius: 0;
/* background: linear-gradient(
180deg,
rgba(4, 43, 50, 0) 0%,
rgba(4, 43, 50, 0.08) 32%,
rgba(1, 52, 58, 0.55) 68%,
rgba(1, 45, 50, 0.88) 100%
); */
color: #fff;
}
/* Replace overlapping absolutes with a simple grid: chips (left) + badge (right) */
.ps-imageslider__promo {
width: 100%;
max-width: none;
margin: 0;
min-height: 0;
top: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 6px;
align-items: center;
}
.ps-imageslider__promo-chip--main,
.ps-imageslider__promo-chip--sub {
position: static;
transform: none;
z-index: 1;
}
.ps-imageslider__promo-chip--main {
grid-column: 1;
grid-row: 1;
align-self: end;
font-size: clamp(1.2rem, 3.8vw, 1.85rem);
padding: 6px 12px;
}
.ps-imageslider__promo-chip--sub {
grid-column: 1;
grid-row: 2;
align-self: start;
font-size: clamp(0.9rem, 2.9vw, 1.2rem);
padding: 6px 14px 8px;
}
.ps-imageslider__promo-badge {
grid-column: 2;
grid-row: 1 / span 2;
position: static;
justify-self: end;
align-self: center;
width: min(138px, 31vw);
height: min(138px, 31vw);
font-size: clamp(0.68rem, 2.5vw, 0.95rem);
line-height: 1.2;
padding: 12px 14px;
transform: none;
}
.ps-imageslider__bottom {
position: relative;
bottom: auto;
left: auto;
right: auto;
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-top: 6px;
}
.ps-imageslider__brand-wrap {
width: 100%;
}
.ps-imageslider__brand {
color: #fcf6ed;
font-size: clamp(1.5rem, 4.6vw, 2.35rem);
}
.ps-imageslider__brand-wrap img {
width: clamp(40px, 10vw, 56px) !important;
height: auto !important;
}
.ps-imageslider__cta {
align-self: flex-start;
max-width: 100%;
font-size: clamp(1rem, 3.2vw, 1.35rem);
padding: 12px 20px;
white-space: normal;
text-align: center;
}
}
@media (max-width: 575.98px) {
.ps-imageslider #ps_imageslider .ps-imageslider__figure > img {
height: 75vh;
}
.ps-imageslider #ps_imageslider .ps-imageslider__figcaption {
padding: 0.65rem 0.85rem 2.85rem;
}
.ps-imageslider__promo {
column-gap: 8px;
row-gap: 4px;
}
.ps-imageslider__promo-badge {
width: min(112px, 30vw);
height: min(112px, 30vw);
font-size: 10px;
padding: 10px;
}
.ps-imageslider__bottom {
gap: 10px;
margin-top: 4px;
}
.ps-imageslider__cta {
width: 100%;
justify-content: center;
padding: 11px 16px;
}
}