/* ============================================================================
Rockstar Health — Glass Aesthetic Layer
Direct translation of ryleighnewman.github.io styles onto Horizon:
- Segoe UI Light 300 throughout
- rgb(18, 22, 24) base, #dddddd text, rgb(100, 150, 200) blue accent
- Floating-pill header in brand blue rgb(30, 80, 150), 22px radius
- Consistent --lg-radius (22px) and --lg-radius-inner (12px)
- Light-weight elegance — impact from size and color, not bold weights
============================================================================ */
@font-face {
font-family: 'Segoe UI';
src: url('segoeuil.ttf') format('truetype');
font-style: normal;
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'Segoe UI';
src: url('segoeuisl.ttf') format('truetype');
font-style: normal;
font-weight: 400;
font-display: swap;
}
:root {
/* Brand tokens — straight from ryleighnewman.github.io */
--rh-bg: 18 22 24;
--rh-bg-elevated: 20 30 40;
--rh-bg-deep: 15 18 22;
--rh-text: 221 221 221;
--rh-text-soft: 170 170 170;
--rh-heading: 255 255 255;
--rh-accent: 100 150 200;
--rh-accent-strong: 30 80 150;
--rh-accent-soft: 169 204 227;
--rh-border: 255 255 255;
--lg-radius: 22px;
--lg-radius-inner: 12px;
--lg-radius-deep: 4px;
--lg-blur: clamp(12px, 2.6vw, 22px);
--lg-saturation: 1.35;
--lg-brightness: 1.06;
--rh-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
--rh-shadow-card: 0 10px 30px rgb(0 0 0 / 0.45);
--rh-shadow-soft: 0 4px 20px rgb(0 0 0 / 0.35);
--rh-shadow-header: 0 4px 14px rgb(0 0 0 / 0.35);
}
/* ----------------------------------------------------------------------------
Global font + body
---------------------------------------------------------------------------- */
html, body,
input, button, textarea, select,
[class*="font-"] {
font-family: var(--rh-font) !important;
}
body {
background-color: rgb(var(--rh-bg)) !important;
/* Single subtle top-of-page tint — removed the bottom-right glow that
was creating the "broken outside corner" appearance. */
background-image:
radial-gradient(140% 70% at 50% -20%, rgb(var(--rh-accent-strong) / 0.10) 0%, transparent 60%);
background-attachment: fixed;
color: rgb(var(--rh-text)) !important;
font-weight: 300;
line-height: 1.6;
font-size: 1.2rem;
}
@media (max-width: 600px) {
body { font-size: 1.05rem; }
}
/* Header backdrop — slim dark gradient strip at top, behind floating header.
Height = header top margin + header height + a few px fade, no more. */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(
180deg,
rgb(var(--rh-bg) / 0.55) 0%,
rgb(var(--rh-bg) / 0.20) 60%,
rgb(var(--rh-bg) / 0) 100%
);
z-index: 9;
pointer-events: none;
}
/* Selection */
::selection {
background: rgb(var(--rh-accent) / 0.45);
color: #fff;
}
/* ----------------------------------------------------------------------------
Scrollbar
---------------------------------------------------------------------------- */
html {
scrollbar-width: thin;
scrollbar-color: rgb(var(--rh-accent) / 0.5) rgb(var(--rh-bg-deep));
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background-color: rgb(var(--rh-bg-deep)); }
::-webkit-scrollbar-thumb {
background-color: rgb(85 85 85);
border-radius: 10px;
border: 3px solid rgb(var(--rh-bg-deep));
}
::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--rh-accent)); }
/* ----------------------------------------------------------------------------
Focus ring — accessible blue
---------------------------------------------------------------------------- */
:focus-visible {
outline: 2px solid rgb(var(--rh-accent)) !important;
outline-offset: 3px;
border-radius: 4px;
}
/* ----------------------------------------------------------------------------
Typography — light weight 300 throughout. Impact = size + color, not weight.
---------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: rgb(var(--rh-heading)) !important;
font-family: var(--rh-font) !important;
font-weight: 300 !important;
letter-spacing: -0.005em;
line-height: 1.1;
text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2, .h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3, .h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
/* Section eyebrows — tracked-out blue caps (like .section-title-blue on her site) */
.section-eyebrow,
.section-header__eyebrow {
color: rgb(var(--rh-accent));
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 1rem;
font-weight: 300;
}
p, .rte p, .prose p {
color: rgb(var(--rh-text)) !important;
font-weight: 300;
hyphens: none;
-webkit-hyphens: none;
}
a {
color: rgb(var(--rh-accent));
transition: color 0.3s ease;
}
a:hover {
color: rgb(var(--rh-accent-soft));
}
/* ----------------------------------------------------------------------------
Header — direct port of ryleighnewman.github.io's signature pattern.
Floating blue pill, centered, max-width 1000px, 22px radius, glass border.
---------------------------------------------------------------------------- */
.shopify-section-group-header-group {
position: relative;
z-index: 1000;
/* No padding — header pill carries its own margin */
}
/* Announcement bar — slim glass band above the header (kept thin, full-width) */
.announcement-bar,
header-announcements-component {
background-color: rgb(var(--rh-bg-deep) / 0.78) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgb(var(--rh-border) / 0.06);
color: rgb(var(--rh-text)) !important;
padding-block: 8px !important;
text-align: center;
}
.announcement-bar *,
header-announcements-component * {
color: rgb(var(--rh-text)) !important;
font-family: var(--rh-font) !important;
font-weight: 400;
letter-spacing: 0.08em;
font-size: 0.72rem;
}
/* The pill — applied to the inner .header element (Horizon's grid container).
Outer section keeps its color-scheme background blank so the page bg shows. */
.header-section,
.shopify-section-header {
background: transparent !important;
}
.header-section > .section-background,
.shopify-section-header > .section-background {
display: none !important;
}
/* Universal header system — locked height 56px, ABSOLUTELY POSITIONED inner
row centered. Max-width 1500px with side margin that scales smoothly from
30px (wide) to 16px (narrow) using clamp() — no breakpoint snap. */
header-component,
.header-section > .header,
.shopify-section-header > .header {
height: 56px !important;
min-height: 56px !important;
max-height: 56px !important;
flex-shrink: 0;
margin: 6px auto 0 !important;
width: calc(100% - clamp(6px, 1vw, 20px)) !important;
max-width: 1500px !important;
z-index: 1000;
/* overflow: visible — must NOT be hidden, or the mobile drawer (a
position:fixed descendant) gets clipped to the 56px pill rectangle and
the drawer's overlay never reaches the rest of the viewport. The pill
border-radius works fine with background-clip:padding-box alone. */
overflow: visible;
display: flex !important;
align-items: center !important;
border-radius: var(--lg-radius);
isolation: isolate;
background-clip: padding-box;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
background:
radial-gradient(120% 100% at 50% -40%, hsl(0 0% 100%/0) 0%, hsl(0 0% 100%/0) 60%),
linear-gradient(180deg, hsl(0 0% 100%/0) 0%, hsl(0 0% 100%/0) 45%, hsl(0 0% 0%/0) 100%),
linear-gradient(90deg, hsl(var(--lg-accent)/0), hsl(var(--lg-accent)/0)) !important;
background-color: transparent !important;
backdrop-filter: blur(calc(var(--lg-blur) * 0.9)) saturate(var(--lg-saturation)) brightness(var(--lg-brightness));
-webkit-backdrop-filter: blur(calc(var(--lg-blur) * 0.9)) saturate(var(--lg-saturation)) brightness(var(--lg-brightness));
box-shadow:
inset 0 1px 0 hsl(0 0% 100%/0.45),
inset 0 -1px 0 hsl(0 0% 0%/0.35),
inset 0 0 0 0.5px hsl(0 0% 100%/0.08);
background-blend-mode: screen, soft-light;
position: relative;
/* No transitions at all — nothing ever animates on the header */
transition: none !important;
}
/* Horizon sets .header[data-sticky-state='idle'] { opacity:0 } to fade the
header in when the user first scrolls. We keep the header permanently
visible (opacity:1) in both idle and active states so it never disappears. */
header-component[data-sticky-state='idle'],
header-component[data-sticky-state='active'],
header-component[data-sticky-state],
.header[data-sticky-state='idle'],
.header[data-sticky-state='active'],
.header[data-sticky-state] {
opacity: 1 !important;
transition: none !important;
}
/* Kill Horizon's dark underlay — it's a solid rgb(18,22,24) layer behind the
transparent header body that creates the "header turns black" appearance AND
the hover-to-black state (triggered by Horizon's [:hover] underlay rules). */
header-component .header__underlay-closed,
header-component .header__underlay-open,
.header__underlay-closed,
.header__underlay-open {
display: none !important;
background: transparent !important;
--color-scheme-top-row: transparent !important;
--color-scheme-bottom-row: transparent !important;
}
/* Remove ALL hover effects on the header itself and its container */
header-component:hover,
header-component:focus-within,
.header-section > .header:hover,
.header-section > .header:focus-within,
.shopify-section-header > .header:hover {
background-color: transparent !important;
background-image:
radial-gradient(120% 100% at 50% -40%, hsl(0 0% 100%/0) 0%, hsl(0 0% 100%/0) 60%),
linear-gradient(180deg, hsl(0 0% 100%/0) 0%, hsl(0 0% 100%/0) 45%, hsl(0 0% 0%/0) 100%),
linear-gradient(90deg, hsl(var(--lg-accent)/0), hsl(var(--lg-accent)/0)) !important;
}
/* Force header to ignore Horizon's data-transparent-color-scheme hover swap */
header-component[data-transparent-color-scheme]:hover,
header-component[data-transparent-color-scheme]:focus-within {
--color-scheme-top-row: transparent !important;
--color-scheme-bottom-row: transparent !important;
}
/* Force header row + content to be vertically centered.
Horizon's .header__row is display:grid with 3 columns. All grid alignment
axes forced to center; every direct child also gets align-self:center to
override per-cell defaults; row collapsed to a single 64px row. */
header-component .header__row,
.header__row,
.header__row--top,
.header__row--bottom {
width: 100% !important;
height: 56px !important;
min-height: 56px !important;
max-height: 56px !important;
align-items: center !important;
align-content: center !important;
grid-template-rows: 56px !important;
padding-block: 0 !important;
padding-inline: 8px !important;
}
header-component .header__row > *,
.header__row > * {
align-self: center !important;
margin-block: 0 !important;
padding-block: 0 !important;
max-height: 56px !important;
}
.header-logo,
.header__heading-link,
.header-logo *,
.header__heading-link * {
line-height: 1 !important;
padding-block: 0 !important;
margin-block: 0 !important;
height: auto !important;
align-self: center !important;
display: inline-flex !important;
align-items: center !important;
}
header-component .header__menu,
header-component .header-actions {
display: flex !important;
align-items: center !important;
height: 100% !important;
margin-block: 0 !important;
padding-block: 0 !important;
}
/* .header__column intentionally NOT forced to flex — Horizon switches it to
`display: contents` in drawer mode so its children participate directly in
the 5-area mobile grid (leftA leftB center rightA rightB). Forcing flex
breaks that placement and bunches all icons in the middle. */
header-component .header__column {
align-items: center;
margin-block: 0 !important;
padding-block: 0 !important;
}
/* === The actual fix for "content sits too low in the header" ===
Horizon's .header__columns has --header-padding: 0.7rem applied as
padding-block, AND .spacing-style consumes that padding. The values
are symmetric but combine with other vertical offsets and add ~11px
top + 11px bottom on top of the 64px header, pushing content down. */
header-component .header__columns,
.header__columns,
.header__columns.spacing-style {
--header-padding: 0 !important;
--padding-block-start: 0 !important;
--padding-block-end: 0 !important;
--section-top-offset: 0 !important;
padding-block: 0 !important;
padding-inline: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 56px !important;
align-items: center !important;
}
.header__columns > * {
align-self: center !important;
padding-block: 0 !important;
margin-block: 0 !important;
height: auto !important;
}
/* ============================================================================
MOBILE DRAWER MENU — fully styled to match brand on narrow viewports.
Drawer DOM:
.menu-drawer-container > details > menu-drawer (with header + nav list)
============================================================================ */
.menu-drawer-container,
#Details-menu-drawer-container {
z-index: 9999 !important;
}
menu-drawer,
.menu-drawer,
.menu-drawer-container > details[open] > menu-drawer {
background-color: rgb(20 30 40 / 0.92) !important;
background-image:
radial-gradient(120% 100% at 50% 0%, rgb(255 255 255 / 0.06), transparent 60%),
linear-gradient(180deg, rgb(255 255 255 / 0.04), transparent 50%) !important;
backdrop-filter: blur(24px) saturate(1.3) brightness(1.05) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(1.05) !important;
border: 1px solid rgb(255 255 255 / 0.18) !important;
color: rgb(var(--rh-text)) !important;
padding: 24px 20px !important;
border-radius: 0 var(--lg-radius) var(--lg-radius) 0 !important;
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.18),
8px 0 32px rgb(0 0 0 / 0.5) !important;
/* Drawer hugs its content (close X + nav links) instead of stretching the
full viewport height. Cap at 100dvh so very tall menus still scroll. */
height: auto !important;
max-height: 100dvh !important;
overflow-y: auto !important;
}
.menu-drawer__close-button,
.menu-drawer .close-button {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
padding: 0 !important;
margin: 0 !important;
background: rgb(255 255 255 / 0.06) !important;
border-radius: 50% !important;
border: 1px solid rgb(255 255 255 / 0.18) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
position: relative !important;
inset: auto !important;
box-sizing: border-box !important;
line-height: 0 !important;
}
.menu-drawer__close-button .svg-wrapper,
.menu-drawer .close-button .svg-wrapper {
width: 14px !important;
height: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
.menu-drawer__close-button svg,
.menu-drawer .close-button svg {
width: 14px !important;
height: 14px !important;
display: block !important;
}
.menu-drawer__close-button:hover {
background: rgb(255 255 255 / 0.14) !important;
}
.menu-drawer__navigation,
.menu-drawer__menu {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.menu-drawer__menu li,
.menu-drawer__list-item--flat,
.menu-drawer__list-item--deep {
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid rgb(255 255 255 / 0.06) !important;
}
.menu-drawer__menu a,
.menu-drawer__menu .menu-drawer__menu-item,
.menu-drawer-menu-item,
.menu-drawer__menu-item {
display: flex !important;
align-items: center !important;
padding: 16px 8px !important;
color: #fff !important;
font-family: var(--rh-font) !important;
font-weight: 300 !important;
font-size: 1.1rem !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: color 0.2s ease, background-color 0.2s ease !important;
border-radius: 8px !important;
}
.menu-drawer__menu a:hover,
.menu-drawer__menu .menu-drawer__menu-item:hover {
color: rgb(var(--rh-accent-soft)) !important;
background-color: rgb(255 255 255 / 0.04) !important;
}
/* Mobile hamburger toggle — match icon button style */
.menu-drawer-container summary,
.header__menu-drawer-summary,
.menu-drawer-button {
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer;
}
.menu-drawer-container summary:hover {
background: rgb(255 255 255 / 0.10) !important;
}
.menu-drawer-container summary svg {
width: 20px !important;
height: 20px !important;
color: #fff !important;
}
/* Collapsed / drawer mode — items sit slightly low in the pill.
Hamburger (options) + search nudged up the most; logo a touch; cart is fine. */
#header-component[data-menu-style='drawer'] .header__icon--menu,
#header-component[data-menu-style='drawer'] .menu-drawer-container summary {
transform: translateY(-4px);
}
#header-component[data-menu-style='drawer'] .header-logo,
#header-component[data-menu-style='drawer'] .header__heading-link {
transform: translateY(-3px);
}
#header-component[data-menu-style='drawer'] .search-action {
transform: translateY(-3px);
}
#header-component[data-menu-style='drawer'] header-actions {
transform: translateY(-2px);
}
/* Drawer scrim/overlay */
.menu-drawer-container[open]::backdrop,
details[open] menu-drawer-component::before {
background-color: rgb(0 0 0 / 0.55) !important;
backdrop-filter: blur(6px);
}
/* Let Horizon's overflow-list JS handle desktop nav responsiveness — don't
hard-hide via @media because that conflicts with the resize-observer that
re-expands items when the viewport widens. */
/* ============================================================================
FINAL FALLBACK: absolute-position the row centered in the 56px header.
Guarantees vertical centering even if Horizon's grid/padding keeps fighting
the flex-align rules above. position:relative on header-component already.
============================================================================ */
header-component {
position: relative !important;
}
/* Center the top row inside the pill. NOTE: we deliberately do NOT use
`transform` here — transform on an ancestor of the mobile drawer (which
uses `position: fixed`) traps the drawer to this ancestor's coordinate
system, breaks its z-index stacking, and lets the hero render on top of
the drawer. Use absolute + top:50% with a negative margin-top instead.
IMPORTANT: this rule must only apply to `.header__row--top`. Applying it
to `.header__row--bottom` / `.header__navigation-bar-row` makes the empty
nav-bar row stack on top of the top row and intercept hamburger clicks. */
header-component .header__row--top,
.header-section > .header .header__row--top {
position: absolute !important;
top: 50% !important;
margin-top: -28px !important; /* half of 56px row height */
left: 0 !important;
right: 0 !important;
height: 56px !important;
min-height: 56px !important;
max-height: 56px !important;
}
/* The navigation-bar row only renders when a navigation_bar block is enabled.
When empty (no children other than a style tag) it still occupies space and
would visually overlap the main row inside the 56px pill. Hide if empty. */
header-component .header__navigation-bar-row:not(:has(*:not(style))) {
display: none !important;
}
:root {
--lg-accent: 210 80% 60%;
}
/* Header side margin now scales smoothly via clamp() in the main rule — no
discrete @media breakpoint that would snap layouts. */
/* Header row layout */
header-component .header__row,
.header__row {
padding: 0 8px !important;
}
/* Brand wordmark — white, light weight, tracked-out.
Hide the duplicate inverse logo container (Horizon renders BOTH original
and inverse when transparent_header_home + inverse scheme are on; both
fall back to shop.name as text, producing "Rockstar Health" twice). */
.header-logo,
.header__heading-logo,
.header__heading-link {
color: #fff !important;
font-family: var(--rh-font) !important;
font-weight: 300 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
font-size: 1rem !important;
text-decoration: none !important;
}
.header-logo__image-container--inverse {
display: none !important;
}
.header-logo__image-container--original {
display: inline-flex !important;
align-items: center !important;
}
/* Header nav links — tighter so all 7 menu items always fit before Horizon's
overflow-list collapses extras under a non-functional "More" button. */
.header__menu a,
.header__menu .menu-link,
.header__row .menu-link,
header-component nav a,
header-component a {
color: #fff !important;
font-family: var(--rh-font) !important;
font-weight: 300 !important;
font-size: 0.8rem !important;
letter-spacing: 0.02em;
text-decoration: none !important;
transition: color 0.3s ease;
padding-inline: 6px !important;
white-space: nowrap;
}
.header__menu a:hover,
.header__menu .menu-link:hover,
header-component a:hover {
color: rgb(var(--rh-accent-soft)) !important;
}
/* Header icon buttons (search/account/cart) — strip all backgrounds/borders.
The cart-drawer-component custom element wraps the cart button in-header;
it must stay invisible/transparent so we don't render a box around the cart. */
header-component .icon,
header-component svg,
header-component button {
color: #fff !important;
}
header-component cart-drawer-component,
header-component search-modal-component,
header-component predictive-search-component {
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
width: auto !important;
padding: 0 !important;
}
/* ALL header icon buttons: identical 32×32 circles, centered SVG inside.
Only targets action icons (search, account, cart) — NOT the More/nav button
or drawer back/close buttons which need different sizing. */
header-component .header-actions__action,
header-component .header-actions__cart-icon,
header-component header-actions button,
header-component header-actions .button-unstyled,
header-component cart-icon,
header-component .icon-button,
header-component a.header-actions__action,
header-component .account-link {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
max-width: 32px !important;
max-height: 32px !important;
padding: 0 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
/* Inner SVG wrapper + the SVG itself — uniform 18px icon centered.
Note: NOT overriding `display` here because the hamburger's open/close icon
toggle relies on `display: none` for the inactive state — forcing
inline-flex would show both =/X simultaneously. */
header-component .svg-wrapper,
header-component .svg-wrapper--small,
header-component cart-icon .svg-wrapper {
padding: 0 !important;
margin: 0 !important;
width: 18px !important;
height: 18px !important;
align-items: center;
justify-content: center;
}
/* Apply inline-flex only to icons we know should always render. */
header-component .header-actions__action .svg-wrapper,
header-component cart-icon .svg-wrapper,
header-component .header-actions__cart-icon .svg-wrapper,
header-component .search-action .svg-wrapper {
display: inline-flex !important;
}
header-component .svg-wrapper svg,
header-component .icon svg,
header-component cart-icon svg {
width: 18px !important;
height: 18px !important;
display: block !important;
}
header-component .header-actions__action:hover,
header-component header-actions button:hover,
header-component header-actions .button-unstyled:hover {
background-color: rgb(255 255 255 / 0.10) !important;
}
/* No blue tap-flash or default focus ring on header icon buttons. Keyboard
focus still gets a subtle neutral ring via :focus-visible. */
header-component .header-actions__action,
header-component .search-action,
header-component header-actions button,
header-component .menu-drawer-container summary {
-webkit-tap-highlight-color: transparent !important;
}
header-component .header-actions__action:focus,
header-component .search-action:focus,
header-component header-actions button:focus {
outline: none !important;
box-shadow: none !important;
}
header-component .header-actions__action:focus-visible,
header-component .search-action:focus-visible,
header-component header-actions button:focus-visible {
outline: none !important;
box-shadow: 0 0 0 2px rgb(255 255 255 / 0.30) !important;
}
/* Desktop: icon SVGs sit slightly high within their circles — nudge down 1px */
header-component .search-action svg,
header-component .search-action .svg-wrapper {
transform: translateY(-1px);
}
header-component cart-icon svg,
header-component .header-actions__cart-icon svg {
transform: translateY(1px);
}
/* Cart bubble: tiny badge sits OUTSIDE the 32px circle so it doesn't push
the parent taller. Position absolute over the corner. */
.header-actions__cart-icon {
position: relative !important;
}
.header-actions__cart-icon .cart-bubble,
.cart-bubble {
position: absolute !important;
top: -2px !important;
right: -2px !important;
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
font-size: 10px !important;
line-height: 1 !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: rgb(var(--rh-accent)) !important;
color: #fff !important;
}
/* Footer utilities row — Shopify ships this as a 3-column grid on desktop
(left / center / right). We want the social-links, terms, and copyright
stacked vertically, both centered, with the copyright at the very bottom.
Block order is set in sections/footer-group.json so social-links is first,
terms in the middle, copyright last. */
.utilities,
.utilities--blocks-1,
.utilities--blocks-2,
.utilities--blocks-3 {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
grid-template-columns: none !important;
gap: var(--gap, 16px) !important;
text-align: center !important;
}
.utilities > *,
.utilities--blocks-1 > *,
.utilities--blocks-2 > *,
.utilities--blocks-3 > *,
.utilities--blocks-3 > *:nth-child(2),
.utilities--blocks-3 > *:nth-child(3),
.utilities--blocks-2 > *:nth-child(2) {
justify-self: center !important;
text-align: center !important;
margin: 0 auto !important;
}
.footer-utilities__group-copyright,
.footer-utilities__group-copyright .footer-utilities__text {
text-align: center !important;
display: block !important;
width: 100% !important;
}
/* Empty-state card on the /search and /collections pages — the box was
running edge-to-edge on narrow viewports because the section wrapper has
no inline padding. Inset it to match the rest of the page content. */
.main-collection-grid__empty,
results-list .main-collection-grid__empty {
margin-inline: clamp(16px, 4vw, 32px) !important;
padding: clamp(32px, 8vw, 56px) clamp(20px, 5vw, 40px) !important;
border-radius: var(--lg-radius) !important;
border: 1px solid rgb(255 255 255 / 0.10) !important;
background-color: rgb(255 255 255 / 0.02) !important;
}
/* ============================================================================
/search RESULTS PAGE — input + filters infrastructure
The page is rendered by sections/search-results.liquid with a `filters`
block (enable_filtering: true, enable_sorting: true in templates/search.json).
When the store has products + storefront filters configured in Shopify
Admin > Online Store > Navigation > Search & discovery, Shopify renders
facets/sort/grid-density controls; the rules below pre-style them so they
match the glass aesthetic the moment they appear.
============================================================================ */
.search-page-input__parent {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
position: relative !important;
margin: 0 !important;
}
/* Row holding the input box + the explicit Search submit button, side by side.
Wider than the old 50% box — fills up to 760px, left-aligned with heading. */
.search-page-input__row {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
max-width: min(760px, 100%) !important;
margin: 20px 0 12px !important;
}
/* The custom element wrapping the input — let it fill the row (override the
inline 50% custom_width and the theme's centering margins). */
.search-page-input__row search-page-input-component {
flex: 1 1 auto !important;
max-width: none !important;
width: auto !important;
margin: 0 !important;
background-color: transparent !important;
}
.search-page-input {
flex: 1 1 auto !important;
/* Solid box — no page gradient bleeding through the translucent fill */
background: rgb(var(--rh-bg-elevated)) !important;
background-color: rgb(var(--rh-bg-elevated)) !important;
background-image: none !important;
border: 1px solid rgb(255 255 255 / 0.16) !important;
border-radius: 999px !important;
color: #fff !important;
/* left clears the search icon, right clears the clear/reset button */
padding: 0 48px 0 52px !important;
height: 50px !important;
min-height: 50px !important;
font-size: 1rem !important;
outline: none !important;
-webkit-tap-highlight-color: transparent !important;
}
.search-page-input::placeholder {
color: rgb(255 255 255 / 0.5) !important;
}
/* Neutral focus — subtle white edge, NO blue ring */
.search-page-input:focus,
.search-page-input:focus-visible {
outline: none !important;
border-color: rgb(255 255 255 / 0.45) !important;
box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18) !important;
}
.search-page-input::-webkit-search-cancel-button,
.search-page-input::-webkit-search-decoration {
-webkit-appearance: none !important;
appearance: none !important;
display: none !important;
}
/* Explicit Search submit button beside the box — accent pill, obvious action */
.search-page-submit {
flex: 0 0 auto !important;
height: 50px !important;
min-height: 50px !important;
padding: 0 26px !important;
border-radius: 999px !important;
border: 1px solid transparent !important;
background: rgb(var(--rh-accent) / 0.85) !important;
color: #fff !important;
font-family: var(--rh-font) !important;
font-size: 0.95rem !important;
font-weight: 400 !important;
letter-spacing: 0.04em !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
transition: background-color 0.2s ease, transform 0.2s ease !important;
-webkit-tap-highlight-color: transparent !important;
}
.search-page-submit:hover {
background: rgb(70 120 170 / 0.95) !important;
transform: translateY(-1px) !important;
}
.search-page-submit:focus,
.search-page-submit:focus-visible {
outline: none !important;
box-shadow: 0 0 0 2px rgb(255 255 255 / 0.25) !important;
}
@media (max-width: 600px) {
.search-page-submit { padding: 0 18px !important; }
}
/* Filter / sort / grid-density bars rendered by the `filters` block when
the store has facets configured. These selectors cover Horizon's facet
filter component and standard collection-style controls. */
facet-filters-form,
.facets,
.facets-container,
.filter-group,
.facets-vertical-form {
--color-background: rgb(20 30 40 / 0.6);
--color-foreground: #fff;
color: #fff !important;
}
.facets__heading,
.facets__summary,
.facet-checkbox,
.facets__price label,
.facets__price input {
color: #fff !important;
}
.facets__summary {
background: rgb(255 255 255 / 0.06) !important;
border: 1px solid rgb(255 255 255 / 0.16) !important;
border-radius: 999px !important;
padding: 8px 16px !important;
color: #fff !important;
}
.facets__summary:hover {
background: rgb(255 255 255 / 0.10) !important;
}
.facets__display,
.facets__menu {
background-color: rgb(20 30 40 / 0.95) !important;
backdrop-filter: blur(20px) saturate(1.2) !important;
border: 1px solid rgb(255 255 255 / 0.18) !important;
border-radius: var(--md-radius) !important;
color: #fff !important;
box-shadow: 0 16px 40px rgb(0 0 0 / 0.4) !important;
}
.facet-checkbox > input[type='checkbox'] + svg,
.facet-checkbox input[type='checkbox'] {
accent-color: rgb(var(--rh-accent)) !important;
}
.facets__price-range-min,
.facets__price-range-max {
background: rgb(255 255 255 / 0.06) !important;
border: 1px solid rgb(255 255 255 / 0.16) !important;
border-radius: 8px !important;
color: #fff !important;
}
/* Sort / grid-density selects */
.sort-by select,
select.facets__select,
.facets__sort,
.collection-tools select {
background: rgb(255 255 255 / 0.06) !important;
border: 1px solid rgb(255 255 255 / 0.16) !important;
border-radius: 999px !important;
color: #fff !important;
padding: 8px 32px 8px 16px !important;
height: 40px !important;
}
/* Active filter chips */
.active-facets__button,
.facets__pill {
background: rgb(255 255 255 / 0.10) !important;
border: 1px solid rgb(255 255 255 / 0.18) !important;
color: #fff !important;
border-radius: 999px !important;
padding: 6px 12px !important;
}
.active-facets__button-remove {
color: #fff !important;
}
/* ============================================================================
SEARCH MODAL — glass aesthetic for the predictive search dialog
============================================================================ */
#search-modal dialog,
.search-modal__content {
background-color: rgb(20 30 40 / 0.92) !important;
background-image:
radial-gradient(120% 100% at 50% 0%, rgb(255 255 255 / 0.06), transparent 60%) !important;
backdrop-filter: blur(24px) saturate(1.3) brightness(1.05) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(1.05) !important;
border: 1px solid rgb(255 255 255 / 0.18) !important;
border-radius: var(--lg-radius) !important;
color: #fff !important;
padding: 0 !important;
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.18),
0 24px 64px rgb(0 0 0 / 0.5) !important;
max-width: min(720px, calc(100vw - 32px)) !important;
/* Stop the modal from filling the entire viewport on mobile so the empty
space below View All is small and the button reads as balanced beneath
the results card. base.css forces 100dvh on .dialog-modal at ≤749px. */
width: auto !important;
height: auto !important;
max-height: calc(100dvh - 32px) !important;
margin: 16px auto !important;
}
#search-modal dialog::backdrop {
background-color: rgb(0 0 0 / 0.55) !important;
backdrop-filter: blur(6px) !important;
}
.predictive-search-form {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
.predictive-search-form__header {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 14px !important;
border-bottom: 1px solid rgb(255 255 255 / 0.12) !important;
width: 100% !important;
box-sizing: border-box !important;
}
.predictive-search-form__header-inner {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
position: relative !important;
width: auto !important;
max-width: none !important;
}
.predictive-search-form__header-inner .search-input {
flex: 1 1 auto !important;
width: 100% !important;
background: rgb(255 255 255 / 0.06) !important;
border: 1px solid rgb(255 255 255 / 0.16) !important;
border-radius: 999px !important;
color: #fff !important;
padding: 0 16px 0 40px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
font-size: 0.95rem !important;
line-height: 40px !important;
box-sizing: border-box !important;
-webkit-tap-highlight-color: transparent !important;
}
.predictive-search-form__header-inner .search-input::placeholder {
color: rgb(255 255 255 / 0.55) !important;
}
/* Hide the browser-native clear "×" that draws — we
already provide an explicit "Clear" pill, so the native one is duplicate. */
.predictive-search-form__header-inner .search-input::-webkit-search-cancel-button,
.predictive-search-form__header-inner .search-input::-webkit-search-decoration {
-webkit-appearance: none !important;
appearance: none !important;
display: none !important;
}
/* Neutral focus — subtle white edge, NO blue ring */
.predictive-search-form__header-inner .search-input:focus,
.predictive-search-form__header-inner .search-input:focus-visible {
outline: none !important;
border-color: rgb(255 255 255 / 0.45) !important;
box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18) !important;
}
.predictive-search-form__header-inner .predictive-search__icon {
position: absolute !important;
left: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
color: rgb(255 255 255 / 0.7) !important;
pointer-events: none !important;
}
/* Close (X) button — a 40px round icon button (matched to search input height) */
.predictive-search__close-modal-button,
.dialog-modal .predictive-search__close-modal-button,
button.predictive-search__close-modal-button.button {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
max-width: 40px !important;
max-height: 40px !important;
padding: 0 !important;
margin: 0 !important;
background: rgb(255 255 255 / 0.06) !important;
border: 1px solid rgb(255 255 255 / 0.18) !important;
border-radius: 50% !important;
color: #fff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
line-height: 0 !important;
box-sizing: border-box !important;
box-shadow: none !important;
}
.predictive-search__close-modal-button:hover {
background: rgb(255 255 255 / 0.14) !important;
}
.predictive-search__close-modal-button .svg-wrapper {
width: 14px !important;
height: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.predictive-search__close-modal-button svg {
width: 14px !important;
height: 14px !important;
display: block !important;
}
/* Clear button — TEXT pill (not a circle), matched to 40px height of search
input and close X for a uniform row. */
.predictive-search__reset-button,
button.predictive-search__reset-button {
width: auto !important;
height: 40px !important;
min-width: 0 !important;
min-height: 40px !important;
max-width: none !important;
max-height: 40px !important;
padding: 0 16px !important;
margin: 0 !important;
background: rgb(255 255 255 / 0.08) !important;
border: 1px solid rgb(255 255 255 / 0.16) !important;
border-radius: 999px !important;
color: #fff !important;
font-size: 0.82rem !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
line-height: 1 !important;
box-sizing: border-box !important;
opacity: 1 !important;
text-transform: none !important;
}
.predictive-search__reset-button:hover {
background: rgb(255 255 255 / 0.16) !important;
}
.predictive-search__reset-button[hidden] {
display: none !important;
}
/* Show the text label on mobile (theme already does this); make sure the
reset-button-text class doesn't get inherited transforms or weird sizing. */
.predictive-search__reset-button-text {
display: inline !important;
text-transform: none !important;
font-size: 0.78rem !important;
}
/* Remove the vertical divider line the theme injects via ::before whenever
the reset button is shown — it doesn't fit the glass look. */
.dialog-modal .predictive-search-form__header::before {
content: none !important;
display: none !important;
}
/* "View all" / search-submit button — make it a clean glass pill. */
.predictive-search__search-button,
button.predictive-search__search-button.button {
background: rgb(255 255 255 / 0.10) !important;
border: 1px solid rgb(255 255 255 / 0.22) !important;
color: #fff !important;
padding: 10px 22px !important;
border-radius: 999px !important;
font-size: 0.85rem !important;
letter-spacing: 0.04em !important;
min-height: 40px !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: auto !important;
box-shadow: none !important;
text-transform: none !important;
}
.predictive-search__search-button:hover {
background: rgb(255 255 255 / 0.18) !important;
transform: translateY(-1px) !important;
}
/* Footer (View all button) — sits right below the results card with
symmetric padding so it's visually balanced. The theme's content-wrapper
is `position:absolute; top:100%` which we leave alone (don't try to
restructure into a flex column — Horizon's slide animations depend on it). */
.predictive-search-form__footer {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
background-image: none !important;
padding: 24px 16px !important;
margin: 0 !important;
text-align: center !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
}
.predictive-search-form__content-wrapper,
.predictive-search-form__content {
width: 100% !important;
padding: 12px 16px !important;
color: #fff !important;
}
.predictive-search-dropdown,
.predictive-search-results__inner {
background: transparent !important;
color: #fff !important;
}
.predictive-search-results__no-results {
color: rgb(255 255 255 / 0.7) !important;
padding: 16px 4px !important;
text-align: center !important;
}
/* Resource cards in predictive search (Collections, Pages, Articles).
When a search matches e.g. the "Homepage" collection, the card shows
its title + "0 products" subtext. The default card box was sized for
product thumbnails and the text labels overflowed/got clipped. */
.predictive-search-results__resource-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin: 8px 4px !important;
}
.predictive-search-results__resource-header .predictive-search-results__title {
color: rgb(255 255 255 / 0.6) !important;
text-transform: uppercase !important;
font-size: 0.72rem !important;
letter-spacing: 0.08em !important;
font-weight: 500 !important;
margin: 0 !important;
}
.predictive-search-results .resource-card {
background: rgb(255 255 255 / 0.05) !important;
border: 1px solid rgb(255 255 255 / 0.10) !important;
border-radius: var(--md-radius, 14px) !important;
padding: 10px !important;
overflow: hidden !important;
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.predictive-search-results .resource-card:hover {
background: rgb(255 255 255 / 0.08) !important;
border-color: rgb(255 255 255 / 0.18) !important;
}
.predictive-search-results .resource-card__content {
padding: 4px 4px 2px !important;
min-width: 0 !important;
}
.predictive-search-results .resource-card__title {
color: #fff !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
margin: 0 !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
line-height: 1.3 !important;
}
.predictive-search-results .resource-card__subtext {
color: rgb(255 255 255 / 0.55) !important;
font-size: 0.78rem !important;
margin: 2px 0 0 !important;
line-height: 1.3 !important;
}
.predictive-search-results .resource-card__image-placeholder {
background: rgb(255 255 255 / 0.06) !important;
color: rgb(255 255 255 / 0.45) !important;
border-radius: 10px !important;
padding: 12px !important;
font-size: 0.85rem !important;
text-align: center !important;
}
.predictive-search-results h3,
.predictive-search-results__title,
.predictive-search-suggestions__title {
color: rgb(255 255 255 / 0.6) !important;
text-transform: uppercase !important;
font-size: 0.72rem !important;
letter-spacing: 0.08em !important;
margin: 6px 4px !important;
}
.predictive-search-results a,
.predictive-search-results li {
color: #fff !important;
}
.predictive-search-results__item:hover,
.predictive-search-results li:hover {
background: rgb(255 255 255 / 0.06) !important;
border-radius: 8px !important;
}
/* Hide the account/profile icon — design uses cart only on the right side. */
header-component .account-button,
header-component header-actions .account-button,
header-component shopify-account,
header-component header-actions > .account-button {
display: none !important;
}
/* On mobile/drawer-mode, the cart icon was butting up against the pill's
right edge (~9px). Add right padding to the columns grid so the cart sits
comfortably away from the edge. Desktop already gets natural spacing from
the nav width. */
#header-component[data-menu-style='drawer'] .header__columns,
#header-component[data-menu-style='drawer'] .header__columns.spacing-style {
padding-inline-end: 16px !important;
}
@media screen and (max-width: 749px) {
header-component .header__columns,
header-component .header__columns.spacing-style {
padding-inline-end: 16px !important;
}
}
/* Force header-actions to flex-center, all children locked.
Use uniform margin-inline-start on each action so spacing is identical
regardless of element type (gap doesn't always reach across element types).
.header__column--right is intentionally excluded — Horizon uses
display:contents on it in drawer mode and forcing flex breaks grid placement. */
header-component header-actions,
header-component .header-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
height: 56px !important;
gap: 0 !important;
}
/* Force the cart-drawer-component wrapper in the header to be the same
32×32 size as siblings — it was previously larger and stretching the cart. */
header-component cart-drawer-component {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
max-width: 32px !important;
max-height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
/* Explicit margin between adjacent header action elements — ensures even
spacing no matter the element type (cart-drawer-component, , button, etc.) */
header-component .header-actions > * + *,
header-component header-actions > * + * {
margin-inline-start: 12px !important;
}
/* Make icon hover state a visible circle so the buttons feel like targets */
header-component .header-actions__action:hover,
header-component cart-icon:hover,
header-component .header-actions__action:focus-visible {
background: rgb(255 255 255 / 0.10) !important;
}
/* Fix height chain — overflow-list JS reads getBoundingClientRect().height
to decide what overflows. All ancestors need an explicit height so
[part='list']{ height:100% } in the shadow DOM resolves to 56px, not 0. */
header-component .header-menu__inner {
height: 56px;
display: flex;
align-items: center;
}
header-component nav.menu-list {
height: 56px;
}
header-component overflow-list,
header-component .overflow-menu {
height: 56px;
}
/* DO NOT display:none the More slot or part — the overflow-list JS uses its
bounding rect to detect overflow; a zero-rect makes the JS think every item
overflows, empties the visible-list, trips minimum-reached, and forces the
entire header into drawer mode at every viewport width.
Two layout fixes that DO work:
1. flex-wrap:nowrap on [part='list'] — the JS sets flex-wrap:wrap inline
during reflow and never cleans it up, which makes the single-line items
sit at the top of the 56px container instead of centered (single flex
line at align-content:start). Forcing nowrap keeps align-items:center
working and prevents the broken wrap state.
2. The JS overflow detection (elementRect.top > moreSlotRect.top) compares
vertical positions; with nowrap forced, no item ever wraps below moreSlot,
so hasOverflow=false and the More button stays hidden naturally. */
header-component .overflow-menu::part(list),
header-component overflow-list::part(list) {
flex-wrap: nowrap !important;
}
/* The nav items use flex-direction:column with align-items:center, which
centers horizontally but leaves vertical alignment at flex-start — putting
the link text at the top of the 56px row. Need justify-content:center for
vertical centering in a column flex container. */
header-component .menu-list__list-item,
header-component .menu-list .menu-list__list-item {
justify-content: center !important;
}
/* More button — reset all icon-button overrides; let it look like a nav link */
header-component .menu-list__link,
header-component .menu-list__link.button-unstyled {
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
border-radius: 0 !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
color: #fff !important;
font-family: var(--rh-font) !important;
font-weight: 300 !important;
font-size: 0.8rem !important;
}
/* Drawer back button — full width, not a circle */
header-component .menu-drawer__back-button {
width: 100% !important;
height: auto !important;
min-height: 44px !important;
max-width: none !important;
border-radius: 0 !important;
padding: var(--padding-md) var(--padding-xl) !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
color: #fff !important;
}
/* Keep the cart-item-count bubble blue (the small badge) */
.cart-bubble__background,
.header-actions__cart-icon .cart-bubble {
background-color: rgb(var(--rh-accent)) !important;
color: #fff !important;
}
/* ----------------------------------------------------------------------------
Glass card surfaces
---------------------------------------------------------------------------- */
.product-card,
.collection-card,
.featured-blog-posts-card,
.card,
.card-wrapper,
.resource-card,
product-card {
background-color: rgb(var(--rh-bg-elevated) / 0.55) !important;
border: 1px solid rgb(var(--rh-border) / 0.12) !important;
border-radius: var(--lg-radius-inner) !important;
backdrop-filter: blur(10px) saturate(1.2);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
box-shadow: var(--rh-shadow-soft);
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease;
}
product-card:hover,
.product-card:hover,
.collection-card:hover,
.featured-blog-posts-card:hover,
.card:hover,
.card-wrapper:hover {
transform: translateY(-3px);
background-color: rgb(var(--rh-bg-elevated) / 0.7) !important;
border-color: rgb(var(--rh-border) / 0.22) !important;
box-shadow: var(--rh-shadow-card);
}
/* Product card image area */
.card-gallery {
position: relative;
border-radius: var(--lg-radius-inner);
overflow: hidden;
background-color: rgb(var(--rh-bg-deep)) !important;
}
.card-gallery::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background: linear-gradient(180deg, transparent 60%, rgb(var(--rh-bg) / 0.4) 100%);
opacity: 0.6;
}
/* Replace Horizon's light placeholder SVG with dark brand surface */
.card-gallery__placeholder {
background: linear-gradient(135deg, rgb(var(--rh-bg-elevated)) 0%, rgb(var(--rh-bg-deep)) 100%) !important;
position: relative;
}
.card-gallery__placeholder > svg { opacity: 0; }
.card-gallery__placeholder::before {
content: '';
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
width: 38%;
aspect-ratio: 1;
background-image: radial-gradient(circle, rgb(var(--rh-accent) / 0.22) 0%, transparent 70%);
pointer-events: none;
}
.card-gallery__placeholder::after {
content: 'ROCKSTAR HEALTH';
position: absolute;
inset: auto 0 auto 0;
top: 50%;
transform: translateY(-50%);
text-align: center;
color: rgb(var(--rh-accent) / 0.4);
font-family: var(--rh-font);
font-weight: 300;
font-size: 0.78rem;
letter-spacing: 0.32em;
pointer-events: none;
}
/* ----------------------------------------------------------------------------
Buttons — EXACT port of .btn from ryleighnewman.github.io
display:inline-block, padding 15px 20px, font-size 1.2rem, max-width 220px,
border-radius var(--lg-radius), centered, hover translate -2px
---------------------------------------------------------------------------- */
.button,
button.button,
a.button,
.button-primary,
.button-secondary,
.shopify-payment-button__button {
display: inline-block !important;
padding: 15px 20px !important;
font-family: var(--rh-font) !important;
font-size: 1.2rem !important;
font-weight: 300 !important;
color: #ffffff !important;
border-radius: var(--lg-radius) !important;
text-decoration: none !important;
text-align: center;
width: 100% !important;
max-width: 240px !important;
box-shadow: 0 4px 6px rgb(0 0 0 / 0.1) !important;
transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}
.button--primary,
.button-primary,
button[type="submit"],
.shopify-payment-button__button--unbranded {
background: rgb(100 150 200) !important;
background-image: none !important;
background-color: rgb(100 150 200) !important;
color: #ffffff !important;
border: 1px solid transparent !important;
}
.button--primary:hover,
.button-primary:hover,
button[type="submit"]:hover,
.shopify-payment-button__button--unbranded:hover {
background: rgb(70 120 170) !important;
background-color: rgb(70 120 170) !important;
color: #ffffff !important;
transform: translateY(-2px);
}
.button--secondary,
.button-secondary {
background: rgb(255 255 255 / 0.1) !important;
background-image: none !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgb(255 255 255 / 0.2) !important;
color: #ffffff !important;
}
.button--secondary:hover,
.button-secondary:hover {
background: rgb(255 255 255 / 0.18) !important;
border-color: rgb(100 150 200 / 0.5) !important;
transform: translateY(-2px);
}
/* ----------------------------------------------------------------------------
Inputs — pill shape (matches buttons), left padding extra for visual breathing
---------------------------------------------------------------------------- */
input[type='text'],
input[type='email'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='password'],
input[type='number'],
textarea,
select,
.field__input,
.field input {
background-color: rgb(var(--rh-bg-deep) / 0.5) !important;
color: rgb(var(--rh-text)) !important;
border: 1px solid rgb(var(--rh-border) / 0.18) !important;
border-radius: 999px !important; /* pill shape */
font-family: var(--rh-font) !important;
font-weight: 300 !important;
padding-inline: 1.4em !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
textarea {
border-radius: var(--lg-radius) !important; /* multiline → rounded rect, not pill */
padding: 1em 1.4em !important;
}
input:focus, textarea:focus, select:focus,
.field__input:focus, .field input:focus {
border-color: rgb(var(--rh-accent)) !important;
box-shadow: 0 0 0 2px rgb(var(--rh-accent) / 0.35) !important;
outline: none !important;
}
::placeholder {
color: rgb(var(--rh-text-soft)) !important;
opacity: 0.7;
}
/* Email-signup input group — make the whole pill row consistent */
.email-signup__input-group,
.field--with-button {
border-radius: 999px !important;
overflow: hidden;
}
/* ----------------------------------------------------------------------------
Cart drawer + modals — target the DIALOG element only, NOT the wrapping
custom element ( lives in the header and we don't
want a glass box wrapping the cart icon).
---------------------------------------------------------------------------- */
cart-drawer-component,
search-modal-component,
predictive-search-component {
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
dialog.cart-drawer__dialog,
dialog.dialog-modal,
.cart-drawer__dialog,
.dialog-modal,
.search-modal__content,
.quick-add-modal {
background-color: rgb(20 30 40 / 0.78) !important;
background-image:
radial-gradient(120% 100% at 50% 0%, rgb(255 255 255 / 0.06) 0%, transparent 60%),
linear-gradient(180deg, rgb(255 255 255 / 0.04) 0%, transparent 50%) !important;
backdrop-filter: blur(24px) saturate(1.3) brightness(1.05) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.3) brightness(1.05) !important;
border: 1px solid rgb(255 255 255 / 0.18) !important;
box-shadow:
inset 0 1px 0 rgb(255 255 255 / 0.18),
inset 0 -1px 0 rgb(0 0 0 / 0.25),
0 8px 32px rgb(0 0 0 / 0.55) !important;
color: rgb(var(--rh-text)) !important;
border-radius: var(--lg-radius) !important;
}
.cart-drawer__header,
.search-modal__header,
.quick-add-modal__header,
.dialog-modal > header,
.dialog-modal > .header {
background-color: transparent !important;
border-bottom: 1px solid rgb(255 255 255 / 0.1) !important;
}
.cart-drawer__title,
.search-modal__heading,
.quick-add-modal__title,
.dialog-modal__title {
color: rgb(var(--rh-heading)) !important;
font-weight: 300 !important;
font-family: var(--rh-font) !important;
}
/* Backdrop behind dialogs */
dialog::backdrop {
background-color: rgb(0 0 0 / 0.55) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* Cart drawer item rows */
.cart-drawer__item,
.cart-items__item {
border-bottom: 1px solid rgb(255 255 255 / 0.08) !important;
}
.cart-drawer__item:last-child { border-bottom: none !important; }
/* ----------------------------------------------------------------------------
Cart drawer cleanup — consistent glass surfaces, properly sized buttons,
X aligned inside the header padding (not jammed against the edge).
---------------------------------------------------------------------------- */
/* Scrolling middle shows the glass dialog through it; sticky header + summary
get a slightly tinted backing of the SAME hue so nothing scrolls through and
the whole drawer reads as one consistent surface. */
.cart-drawer__inner,
.cart-drawer__content {
background-color: transparent !important;
}
.cart-drawer__header,
.cart-drawer__summary {
background-color: rgb(18 24 30 / 0.85) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
.cart-drawer__summary {
border-top: 1px solid rgb(255 255 255 / 0.1) !important;
}
/* X close button — drop the theme's NEGATIVE right margin so the X sits inside
the header padding instead of hugging the very edge of the drawer. */
.cart-drawer__close-button,
button.close-button.cart-drawer__close-button {
margin-right: 0 !important;
margin-inline-end: 0 !important;
top: 0 !important;
}
.cart-drawer__header {
padding: 16px 20px !important;
align-items: center !important;
}
.cart-drawer--empty .cart-drawer__header {
padding: 14px 20px 0 !important;
}
/* Checkout — full-width primary accent (don't inherit the 220px .button cap) */
.cart__checkout-button,
button.cart__checkout-button.button,
.cart__ctas .button {
max-width: none !important;
width: 100% !important;
background: rgb(var(--rh-accent) / 0.85) !important;
background-color: rgb(var(--rh-accent) / 0.85) !important;
background-image: none !important;
border: 1px solid transparent !important;
color: #fff !important;
font-size: 1.05rem !important;
}
.cart__checkout-button:hover,
.cart__ctas .button:hover {
background: rgb(70 120 170 / 0.95) !important;
background-color: rgb(70 120 170 / 0.95) !important;
transform: translateY(-2px);
}
/* Continue shopping — sized to its label, glass secondary so it matches the
drawer instead of falling back to the theme's default button color. */
.cart-items__empty-button,
a.button.cart-items__empty-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: none !important;
min-width: 220px !important;
white-space: nowrap !important;
padding: 14px 30px !important;
font-size: 1rem !important;
background: rgb(255 255 255 / 0.1) !important;
background-color: rgb(255 255 255 / 0.1) !important;
background-image: none !important;
border: 1px solid rgb(255 255 255 / 0.2) !important;
color: #fff !important;
border-radius: var(--lg-radius) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.cart-items__empty-button:hover {
background: rgb(255 255 255 / 0.18) !important;
border-color: rgb(var(--rh-accent) / 0.5) !important;
transform: translateY(-2px);
}
.cart-items__empty-button .button-text {
font-size: 1rem !important;
}
/* "Have an account? Log in to check out faster." — readable size + accent link
so the prompt no longer looks tiny next to the rest of the cart text. */
.cart-items__wrapper > p {
font-size: 0.95rem !important;
font-weight: 300 !important;
color: rgb(var(--rh-text)) !important;
margin-bottom: 16px !important;
line-height: 1.5 !important;
}
.cart-items__wrapper > p a {
color: rgb(var(--rh-accent-soft)) !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
font-size: inherit !important;
font-weight: 400 !important;
}
/* ----------------------------------------------------------------------------
Close X buttons — circular, fixed-size, never inherit the .button max-width
---------------------------------------------------------------------------- */
.close-button,
.cart-drawer__close-button,
.quick-add-modal__close,
.predictive-search__close-modal-button,
.dialog-modal__close,
button.close-button {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
padding: 0 !important;
background: rgb(255 255 255 / 0.06) !important;
background-image: none !important;
border-radius: 50% !important;
border: 1px solid rgb(255 255 255 / 0.18) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: rgb(var(--rh-text)) !important;
box-shadow: none !important;
font-size: 0 !important; /* prevent button text-size from inflating */
cursor: pointer;
}
.close-button:hover,
.cart-drawer__close-button:hover,
.quick-add-modal__close:hover,
.predictive-search__close-modal-button:hover,
.dialog-modal__close:hover {
background: rgb(255 255 255 / 0.14) !important;
border-color: rgb(255 255 255 / 0.3) !important;
transform: none !important;
}
.close-button svg,
.close-button .svg-wrapper,
.close-button .icon {
width: 14px !important;
height: 14px !important;
display: block !important;
}
/* ----------------------------------------------------------------------------
Hero / banner overlay
---------------------------------------------------------------------------- */
.hero,
.banner,
.image-banner,
.video-banner,
.slideshow__slide {
position: relative;
}
.hero::after,
.banner::after,
.image-banner::after,
.video-banner::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgb(var(--rh-bg) / 0.85) 0%,
rgb(var(--rh-bg) / 0.25) 50%,
transparent 100%
);
pointer-events: none;
z-index: 1;
}
.hero > *,
.banner > *,
.image-banner > *,
.video-banner > * {
position: relative;
z-index: 2;
}
/* ----------------------------------------------------------------------------
Marquee — brand blue band, light weight, consistent radius
---------------------------------------------------------------------------- */
marquee-component {
border-radius: 0;
}
marquee-component .marquee__repeated-items * {
font-family: var(--rh-font) !important;
font-weight: 300 !important;
letter-spacing: 0.12em !important;
}
/* Vestigial .rh-mission* rules removed — replaced by the canonical
.rh-section / .rh-section__title / .rh-prose / .rh-cta-group kit below. */
/* ============================================================================
REUSABLE COMPONENT KIT — exact port of patterns from ryleighnewman.github.io
============================================================================ */
/* Section box — port of .section-box, continuously-scaling padding & margin */
.rh-section {
background-color: rgb(20 30 40 / 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: var(--lg-radius);
padding: clamp(22px, 3.5vw, 32px) clamp(16px, 2.8vw, 28px);
margin: clamp(28px, 5vw, 60px) auto;
max-width: 800px;
box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
text-align: center;
transition: background-color 0.3s ease;
}
/* Page-level inline padding scales smoothly — no @media breakpoint snap */
.shopify-section:has(.rh-section),
.shopify-section:has(.rh-page-hero) {
padding-inline: clamp(12px, 2vw, 24px);
}
/* Subtle alternating section bg — no decorative bars (user removed). */
.shopify-section:has(.rh-section):nth-of-type(even) .rh-section {
background-color: rgb(15 25 35 / 0.6);
border-color: rgb(255 255 255 / 0.15);
}
/* Sub-card — EXACT port of .sub-section-box */
.rh-subcard {
background-color: rgb(15 18 22 / 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: var(--lg-radius-inner);
padding: 8px;
margin-top: 15px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 1px 4px rgb(0 0 0 / 0.1);
transition: background-color 0.3s ease;
}
/* Section title — EXACT port of .section-title-blue
!important on color is required to beat the global h1-h6 color rule. */
.rh-section__title,
h2.rh-section__title,
h3.rh-section__title {
font-family: var(--rh-font) !important;
font-weight: 300 !important;
color: rgb(100, 150, 200) !important;
text-transform: uppercase !important;
font-size: 1.8rem !important;
margin-bottom: 20px;
margin-top: 0;
line-height: 1.2 !important;
letter-spacing: 0 !important;
}
/* Prose — paragraphs and lists match her body styles exactly */
.rh-prose {
color: rgb(var(--rh-text));
font-weight: 300;
font-size: 1.2rem;
line-height: 1.6;
}
.rh-prose p {
margin-bottom: 20px;
color: rgb(var(--rh-text));
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.rh-prose ul, .rh-prose ol {
max-width: 600px;
margin: 0 auto 20px;
padding-left: 0;
list-style: none; /* hide default browser bullets */
text-align: left;
font-size: 1.2rem;
}
.rh-prose li {
margin-bottom: 10px;
text-align: left;
position: relative;
padding-left: 1.4em;
}
/* Custom blue-dash bullets — matches her .activities-content li pattern
(-) */
.rh-prose ul li::before {
content: "-";
color: rgb(169, 204, 227);
font-weight: 700;
position: absolute;
left: 0.3em;
top: 0;
}
.rh-prose ol {
counter-reset: rh-counter;
}
.rh-prose ol li {
counter-increment: rh-counter;
}
.rh-prose ol li::before {
content: counter(rh-counter) ".";
color: rgb(169, 204, 227);
font-weight: 700;
position: absolute;
left: 0;
top: 0;
}
.rh-prose strong { color: rgb(var(--rh-text)); font-weight: 400; }
.rh-prose em { color: rgb(var(--rh-text)); font-style: italic; }
/* CTA button group — buttons ALWAYS stack vertically, never side-by-side.
The --row modifier is retained on existing markup but no longer goes
horizontal; it just inherits the stacked column layout. Individual
sections can opt into a different arrangement with their own class. */
.rh-cta-group,
.rh-cta-group--row {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
max-width: 260px;
margin: 24px auto 0;
}
/* Divider — EXACT port of her .divider */
.rh-divider {
border: none;
border-top: 1px solid rgb(169 169 169 / 0.3);
max-width: 800px;
margin: 40px auto;
}
/* FAQ pattern — Q/A pairs using for native expand/collapse */
.rh-faq summary {
cursor: pointer;
list-style: none;
padding: 1.1rem 1.25rem;
color: rgb(var(--rh-heading));
font-weight: 400;
letter-spacing: 0.01em;
position: relative;
}
.rh-faq summary::-webkit-details-marker { display: none; }
.rh-faq summary::after {
content: '+';
position: absolute;
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
color: rgb(var(--rh-accent));
font-size: 1.4rem;
font-weight: 300;
transition: transform 0.2s ease;
}
.rh-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.rh-faq + .rh-faq { border-top: 1px solid rgb(255 255 255 / 0.08); }
.rh-faq__body {
padding: 0 1.25rem 1.25rem;
color: rgb(var(--rh-text));
font-weight: 300;
line-height: 1.6;
}
/* Contact list — labels + values */
.rh-contact {
display: grid;
gap: 1rem;
text-align: center;
}
.rh-contact__label {
color: rgb(var(--rh-accent));
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.78rem;
margin-bottom: 0.25rem;
}
.rh-contact__value {
color: rgb(var(--rh-text));
font-size: 1.05rem;
}
.rh-contact__value a { color: rgb(var(--rh-accent-soft)); }
/* ----------------------------------------------------------------------------
Page hero — EXACT port of her .hero pattern.
Padding 120px top (clears the floating header) / 40px bottom, centered.
Mobile: tighter top padding.
---------------------------------------------------------------------------- */
.rh-page-hero {
width: 100%;
min-height: 200px;
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
text-shadow: 2px 2px 4px rgb(0 0 0 / 0.7);
padding: clamp(56px, 7vw, 84px) clamp(12px, 2vw, 20px) clamp(28px, 4vw, 40px);
box-shadow: 0 4px 8px rgb(0 0 0 / 0.1);
position: relative;
margin-top: 0;
}
/* Eyebrow label removed: each page now carries a single, larger title. */
.rh-page-hero__eyebrow {
display: none;
}
.rh-page-hero__heading {
font-family: var(--rh-font);
font-weight: 300;
color: #ffffff;
font-size: clamp(2.3rem, 5.5vw, 3.4rem);
line-height: 1.08;
margin: 0 0 14px 0;
text-align: center;
width: 100%;
}
.rh-page-hero__lede {
color: #ffffff;
font-weight: 300;
font-size: clamp(1.1rem, 2.5vw, 1.3rem);
line-height: 1.4;
max-width: 800px;
margin: 0 auto;
}
@media (max-width: 560px) {
.rh-page-hero { padding-left: 22px; padding-right: 22px; }
.rh-page-hero__heading { font-size: 2rem; }
.rh-page-hero__lede { font-size: 1.05rem; }
}
/* ============================================================================
IMAGE FORMATTING — consistent treatment for all content images.
============================================================================ */
.rh-image,
.rh-figure img,
.rh-prose img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--lg-radius-inner);
border: 1px solid rgb(255 255 255 / 0.18);
box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
background: rgb(var(--rh-bg-deep));
}
.rh-image--circle,
.rh-figure--circle img {
border-radius: 50%;
aspect-ratio: 1;
object-fit: cover;
}
.rh-image--portrait {
aspect-ratio: 3 / 4;
object-fit: cover;
}
.rh-image--landscape {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.rh-image--square {
aspect-ratio: 1;
object-fit: cover;
}
/* Figure with caption */
.rh-figure {
margin: 24px auto;
max-width: 600px;
text-align: center;
}
.rh-figure figcaption,
.rh-figure__caption {
margin-top: 12px;
color: rgb(var(--rh-text-soft));
font-size: 0.9rem;
font-style: italic;
line-height: 1.4;
}
/* Image placeholder (when no image is set yet) — visually communicates intent */
.rh-image-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
background: linear-gradient(135deg, rgb(var(--rh-bg-elevated)) 0%, rgb(var(--rh-bg-deep)) 100%);
border: 1px solid rgb(255 255 255 / 0.18);
border-radius: var(--lg-radius-inner);
color: rgb(var(--rh-accent));
text-align: center;
padding: 24px;
position: relative;
min-height: 200px;
}
.rh-image-placeholder--portrait { aspect-ratio: 3 / 4; min-height: 0; }
.rh-image-placeholder--landscape { aspect-ratio: 16 / 9; min-height: 0; }
.rh-image-placeholder--square { aspect-ratio: 1; min-height: 0; }
.rh-image-placeholder--circle { aspect-ratio: 1; min-height: 0; border-radius: 50%; }
.rh-image-placeholder__icon {
width: 48px;
height: 48px;
opacity: 0.4;
}
.rh-image-placeholder__label {
color: rgb(var(--rh-accent) / 0.7);
font-size: 0.78rem;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 400;
}
.rh-image-placeholder__desc {
color: rgb(var(--rh-text-soft));
font-size: 0.85rem;
font-style: italic;
max-width: 320px;
}
/* Image grid (for product galleries / multi-image pages) */
.rh-image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin: 24px auto;
max-width: 800px;
}
/* ============================================================================
OUR PRODUCTS — showcase grid of product cards (image + description + link).
The whole card is a single link to its product page.
============================================================================ */
/* Wider section so the product grid has room to breathe (default is 800px) */
.rh-section--wide {
max-width: 1000px !important; /* never wider than the header pill */
}
.rh-products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 0 auto;
width: 100%;
text-align: left;
}
.rh-product-card {
display: flex;
flex-direction: column;
background: rgb(var(--rh-bg-elevated) / 0.45);
border: 1px solid rgb(255 255 255 / 0.14);
border-radius: var(--lg-radius);
overflow: hidden;
text-decoration: none !important;
color: inherit !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.rh-product-card:hover {
transform: translateY(-4px);
border-color: rgb(var(--rh-accent) / 0.5);
box-shadow: 0 12px 30px rgb(0 0 0 / 0.4);
}
.rh-product-card:focus-visible {
outline: 2px solid rgb(var(--rh-accent));
outline-offset: 2px;
}
.rh-product-card__media {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, rgb(var(--rh-bg-elevated)) 0%, rgb(var(--rh-bg-deep)) 100%);
border-bottom: 1px solid rgb(255 255 255 / 0.1);
color: rgb(var(--rh-accent));
overflow: hidden;
}
.rh-product-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.rh-product-card__icon {
width: 44px;
height: 44px;
opacity: 0.4;
}
.rh-product-card__media-label {
color: rgb(var(--rh-accent) / 0.7);
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 400;
}
.rh-product-card__body {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1.25rem 1.35rem 1.5rem;
flex: 1 1 auto;
}
.rh-product-card__title {
font-family: var(--rh-font);
font-weight: 400;
font-size: 1.15rem;
color: rgb(var(--rh-heading)) !important;
margin: 0;
letter-spacing: 0.01em;
}
.rh-product-card__desc {
font-weight: 300;
font-size: 0.92rem;
line-height: 1.5;
color: rgb(var(--rh-text-soft)) !important;
margin: 0;
flex: 1 1 auto;
}
.rh-product-card__cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
color: rgb(var(--rh-accent-soft)) !important;
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0.03em;
}
.rh-product-card__cta::after {
content: "\2192"; /* → */
transition: transform 0.2s ease;
}
.rh-product-card:hover .rh-product-card__cta::after {
transform: translateX(4px);
}
/* ============================================================================
ACCESSIBILITY — WCAG AA-friendly defaults
============================================================================ */
/* Skip to main content — visible only when keyboard-focused */
.skip-to-content-link,
.skip-link {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
background: rgb(var(--rh-accent-strong)) !important;
color: #fff !important;
padding: 10px 24px;
border-radius: 0 0 var(--lg-radius) var(--lg-radius);
z-index: 10001;
text-decoration: none;
font-size: 1rem;
font-weight: 400;
transition: top 0.15s ease;
white-space: nowrap;
max-width: none !important;
width: auto !important;
}
.skip-to-content-link:focus,
.skip-link:focus,
.skip-to-content-link:focus-visible,
.skip-link:focus-visible {
top: 0;
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Visually hidden but accessible to screen readers */
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Stronger focus indicators on all interactive elements */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid rgb(var(--rh-accent)) !important;
outline-offset: 3px;
border-radius: 4px;
}
/* Minimum 44×44 touch target on all interactive controls */
a.button,
button.button,
.button,
.close-button {
min-height: 44px;
}
/* High contrast mode support */
@media (prefers-contrast: more) {
body { color: #fff !important; }
.rh-section { border-color: #fff !important; }
.rh-section__title { color: rgb(150, 200, 255) !important; }
}
/* Forced colors (Windows High Contrast) */
@media (forced-colors: active) {
.rh-section { border: 1px solid CanvasText; }
.button { border: 1px solid CanvasText !important; }
}
/* Single canonical .rh-prose lives at line ~812. Removed duplicate block. */
/* ----------------------------------------------------------------------------
Product page — wheelchair configurations need clear variant/image support
---------------------------------------------------------------------------- */
.product-information,
.product__media,
.product-media-gallery,
.product-gallery {
border-radius: var(--lg-radius-inner);
}
.product-information img,
.product-media-gallery img {
border-radius: var(--lg-radius-inner);
}
.product-information__title,
.product__title {
font-family: var(--rh-font);
font-weight: 300 !important;
color: rgb(var(--rh-heading)) !important;
letter-spacing: -0.005em;
}
.product-information__price,
.product__price {
font-weight: 400 !important;
font-size: 1.4rem !important;
color: rgb(var(--rh-heading)) !important;
}
.product-information__description,
.product__description {
color: rgb(var(--rh-text)) !important;
font-weight: 300;
line-height: 1.6;
}
/* Variant picker swatches/buttons */
.variant-picker__option label,
.variant-picker__button,
.product-form__option {
border-radius: var(--lg-radius) !important;
border: 1px solid rgb(var(--rh-border) / 0.22) !important;
color: rgb(var(--rh-text)) !important;
background: rgb(var(--rh-bg-elevated) / 0.5) !important;
}
.variant-picker__option input:checked + label,
.variant-picker__button[aria-checked="true"] {
background: rgb(var(--rh-accent) / 0.25) !important;
border-color: rgb(var(--rh-accent)) !important;
color: #fff !important;
}
/* Thumbnail strip — keep visible for multi-image products */
.product-media-gallery__thumbnails,
.product__media-thumbnails {
gap: 0.6rem;
}
.product-media-gallery__thumbnail,
.product__media-thumb {
border-radius: var(--lg-radius-inner);
border: 1px solid rgb(var(--rh-border) / 0.18);
overflow: hidden;
}
.product-media-gallery__thumbnail[aria-current="true"],
.product__media-thumb.is-active {
border-color: rgb(var(--rh-accent)) !important;
box-shadow: 0 0 0 2px rgb(var(--rh-accent) / 0.35);
}
/* ----------------------------------------------------------------------------
Marketplace / Storefront buttons — Amazon, eBay, Etsy
---------------------------------------------------------------------------- */
.rh-marketplaces__sub {
color: rgb(var(--rh-text-soft)) !important;
font-size: 0.95rem;
font-weight: 300;
margin-bottom: 2rem !important;
text-align: center;
}
.rh-marketplaces__links {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
}
.rh-marketplaces__btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.65rem 1.25rem;
font-size: 0.9rem;
font-weight: 400;
color: rgb(var(--rh-text)) !important;
text-decoration: none !important;
background: rgb(255 255 255 / 0.07) !important;
border: 1px solid rgb(255 255 255 / 0.18) !important;
border-radius: 999px !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
letter-spacing: 0.02em;
}
.rh-marketplaces__btn:hover {
background: rgb(255 255 255 / 0.13) !important;
color: rgb(var(--rh-text)) !important;
}
/* Per-platform hover accents */
.rh-marketplaces__btn--amazon:hover {
border-color: rgb(255 153 0 / 0.65) !important;
box-shadow: 0 0 0 1px rgb(255 153 0 / 0.22);
}
.rh-marketplaces__btn--ebay:hover {
border-color: rgb(50 120 220 / 0.55) !important;
box-shadow: 0 0 0 1px rgb(50 120 220 / 0.18);
}
.rh-marketplaces__btn--etsy:hover {
border-color: rgb(240 95 55 / 0.6) !important;
box-shadow: 0 0 0 1px rgb(240 95 55 / 0.2);
}
.rh-marketplaces__icon {
width: 22px;
height: 22px;
flex-shrink: 0;
fill: currentColor;
}
/* Larger variant used on the dedicated storefronts page */
.rh-marketplaces__links--large .rh-marketplaces__btn {
padding: 0.9rem 1.75rem;
font-size: 1rem;
}
.rh-marketplaces__links--large .rh-marketplaces__icon {
width: 26px;
height: 26px;
}
/* Narrow screens: stack marketplace buttons full-width so they never overflow. */
@media (max-width: 560px) {
.rh-marketplaces__links,
.rh-marketplaces__links--large {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
}
.rh-marketplaces__btn,
.rh-marketplaces__links--large .rh-marketplaces__btn {
width: 100%;
justify-content: center;
padding: 0.8rem 1.25rem;
font-size: 0.95rem;
}
}
.rh-marketplaces__support {
text-align: center;
font-size: 0.85rem;
color: rgb(var(--rh-text-soft)) !important;
font-weight: 300;
margin-top: 0.5rem !important;
}
.rh-marketplaces__support a {
color: rgb(var(--rh-accent-soft)) !important;
text-decoration: underline;
text-underline-offset: 3px;
}
.rh-marketplaces__support a:hover {
color: rgb(var(--rh-text)) !important;
}
/* ----------------------------------------------------------------------------
Custom Order form — rh-custom-order.liquid
---------------------------------------------------------------------------- */
/* Two-column grid, collapses to one at mobile */
.rh-co-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
.rh-co-grid { grid-template-columns: 1fr; }
}
.rh-co-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.rh-co-field--span {
grid-column: 1 / -1;
}
/* Labels */
.rh-co-label {
display: block;
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgb(var(--rh-text)) !important;
}
.rh-co-opt {
text-transform: none;
font-weight: 300;
font-size: 0.78rem;
letter-spacing: 0;
color: rgb(var(--rh-text-soft)) !important;
margin-left: 0.2rem;
}
.rh-co-req {
color: rgb(var(--rh-accent-soft)) !important;
margin-left: 0.15rem;
}
/* Text inputs, selects, textarea */
.rh-co-input,
.rh-co-select,
.rh-co-textarea {
width: 100%;
padding: 0.65rem 1rem;
font-family: inherit;
font-size: 0.95rem;
font-weight: 300;
line-height: 1.5;
color: rgb(var(--rh-text)) !important;
background-color: rgb(var(--rh-bg-deep) / 0.5) !important; /* match global input standard */
border: 1px solid rgb(255 255 255 / 0.18) !important;
border-radius: var(--lg-radius-inner) !important;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}
.rh-co-input::placeholder,
.rh-co-textarea::placeholder {
color: rgb(var(--rh-text-soft)) !important;
font-weight: 300;
}
.rh-co-input:focus,
.rh-co-select:focus,
.rh-co-textarea:focus {
border-color: rgb(var(--rh-accent) / 0.65) !important;
box-shadow: 0 0 0 2px rgb(var(--rh-accent) / 0.16);
}
/* Styled select with chevron */
.rh-co-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgb(160%2C175%2C190)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 0.85rem center !important;
background-size: 16px !important;
padding-right: 2.5rem !important;
cursor: pointer;
}
.rh-co-select option {
background: rgb(18 22 24);
color: rgb(var(--rh-text));
}
.rh-co-textarea {
resize: vertical;
min-height: 140px;
}
/* Hint text */
.rh-co-hint {
font-size: 0.78rem;
font-weight: 300;
color: rgb(var(--rh-text-soft)) !important;
margin-top: 0.35rem !important;
line-height: 1.5;
}
.rh-co-hint a {
color: rgb(var(--rh-accent-soft)) !important;
text-decoration: underline;
text-underline-offset: 2px;
}
/* File upload — dropzone */
.rh-co-upload-wrap {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.rh-co-dropzone {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 130px;
padding: 1.5rem 1.25rem;
background: rgb(255 255 255 / 0.04) !important;
border: 1.5px dashed rgb(255 255 255 / 0.2) !important;
border-radius: var(--lg-radius) !important;
cursor: pointer;
text-align: center;
transition: border-color 0.2s, background 0.2s;
overflow: hidden;
}
.rh-co-dropzone:hover,
.rh-co-dropzone.is-over {
border-color: rgb(var(--rh-accent) / 0.6) !important;
background: rgb(var(--rh-accent) / 0.05) !important;
}
.rh-co-dropzone__input {
/* Covers the entire zone so native click opens file dialog */
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.rh-co-dropzone__ph {
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
}
.rh-co-dropzone__icon {
width: 34px;
height: 34px;
color: rgb(var(--rh-text-soft));
margin-bottom: 0.25rem;
}
.rh-co-dropzone__text {
font-size: 0.9rem;
font-weight: 300;
color: rgb(var(--rh-text)) !important;
margin: 0 !important;
}
.rh-co-dropzone__cta {
color: rgb(var(--rh-accent-soft)) !important;
text-decoration: underline;
text-underline-offset: 2px;
}
.rh-co-dropzone__sub {
font-size: 0.75rem;
font-weight: 300;
color: rgb(var(--rh-text-soft)) !important;
margin: 0 !important;
}
/* Preview state */
.rh-co-dropzone__pv {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
position: relative; /* above the file input via pointer-events toggling in JS */
}
.rh-co-pv__img {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: calc(var(--lg-radius-inner) / 1.5);
border: 1px solid rgb(255 255 255 / 0.14);
flex-shrink: 0;
}
.rh-co-pv__meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
flex: 1;
text-align: left;
}
.rh-co-pv__name {
font-size: 0.9rem;
font-weight: 400;
color: rgb(var(--rh-text)) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rh-co-pv__size {
font-size: 0.75rem;
font-weight: 300;
color: rgb(var(--rh-text-soft)) !important;
}
.rh-co-pv__remove {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
background: rgb(255 255 255 / 0.08) !important;
border: 1px solid rgb(255 255 255 / 0.15) !important;
border-radius: 50% !important;
cursor: pointer;
color: rgb(var(--rh-text)) !important;
transition: background 0.15s, border-color 0.15s;
}
.rh-co-pv__remove:hover {
background: rgb(220 60 60 / 0.2) !important;
border-color: rgb(220 60 60 / 0.45) !important;
}
/* Pricing consent checkbox */
.rh-co-consent {
margin-bottom: 1.75rem;
}
.rh-co-check-label {
display: flex;
align-items: flex-start;
gap: 0.75rem;
cursor: pointer;
font-size: 0.88rem;
font-weight: 300;
line-height: 1.5;
color: rgb(var(--rh-text)) !important;
}
.rh-co-check {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 0.1em;
accent-color: rgb(var(--rh-accent));
cursor: pointer;
}
/* Error block */
.rh-co-errors {
margin-bottom: 1.5rem;
padding: 1rem 1.25rem;
background: rgb(200 50 50 / 0.12) !important;
border: 1px solid rgb(200 50 50 / 0.35) !important;
border-radius: var(--lg-radius-inner);
color: rgb(var(--rh-text)) !important;
font-size: 0.9rem;
font-weight: 300;
}
/* Success block */
.rh-co-success {
padding: 2rem;
background: rgb(var(--rh-accent) / 0.07) !important;
border: 1px solid rgb(var(--rh-accent) / 0.25) !important;
border-radius: var(--lg-radius);
text-align: center;
}
.rh-co-success__heading {
font-size: 1.25rem !important;
font-weight: 300 !important;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgb(var(--rh-heading)) !important;
margin: 0 0 0.75rem !important;
}
.rh-co-success p {
font-weight: 300;
color: rgb(var(--rh-text)) !important;
margin: 0 0 0.5rem !important;
}
.rh-co-success a {
color: rgb(var(--rh-accent-soft)) !important;
}
.rh-co-success__file-note {
padding: 0.75rem 1rem;
background: rgb(255 255 255 / 0.05) !important;
border: 1px solid rgb(255 255 255 / 0.14) !important;
border-radius: var(--lg-radius-inner);
font-size: 0.86rem !important;
margin-top: 0.75rem !important;
}
/* ----------------------------------------------------------------------------
Footer tagline — glass top-half of the footer pill, sits above utilities
---------------------------------------------------------------------------- */
.rh-footer-tagline {
text-align: center;
max-width: calc(100% - 2.4rem);
margin: 0 auto;
padding: 0.9rem 1.5rem 0.65rem;
background: rgb(255 255 255 / 0.05) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgb(255 255 255 / 0.18) !important;
border-bottom: none !important;
border-radius: var(--lg-radius) var(--lg-radius) 0 0 !important;
box-shadow: 0 -3px 14px rgb(0 0 0 / 0.45);
}
.rh-footer-tagline__line {
color: rgb(var(--rh-text)) !important;
font-weight: 300;
font-size: 0.9rem;
letter-spacing: 0.02em;
margin: 0 0 0.4rem !important;
}
.rh-footer-tagline__legal {
color: rgb(var(--rh-text-soft)) !important;
font-weight: 300;
font-size: 0.72rem;
letter-spacing: 0.02em;
margin: 0 !important;
line-height: 1.5;
hyphens: manual;
overflow-wrap: break-word;
}
/* ----------------------------------------------------------------------------
Footer — slim translucent strip at bottom of viewport.
Direct port of ryleighnewman.github.io footer-wrapper pattern.
Email signup has been removed from footer-group.json, so footer ONLY
contains .footer-utilities. Targeting THAT unique class — no shared
selectors, no corner conflicts.
---------------------------------------------------------------------------- */
footer:not(.password-footer) {
background: transparent !important;
margin-top: 0.75rem;
padding: 0 !important;
display: flex;
flex-direction: column;
align-items: stretch; /* let both sections span the full page width */
gap: 0;
}
footer:not(.password-footer) > * {
width: 100%;
display: block; /* do NOT flex-collapse sections to content width */
}
/* Strip Horizon's section-level padding-block so tagline and utilities sit flush */
footer:not(.password-footer) .shopify-section {
padding-block-start: 0 !important;
padding-block-end: 0 !important;
}
.footer-utilities {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
color: rgb(var(--rh-text)) !important;
position: relative;
}
.footer-utilities,
.footer-utilities * {
/* prevent inherited padding-block from inflating the bar */
padding-block-start: 0 !important;
padding-block-end: 0 !important;
}
.footer-utilities {
padding: 16px 20px !important; /* reassert after the wildcard reset */
}
/* Kill the inner solid dark .section-background.color-scheme-1 — it
creates the black middle behind the footer content. */
.footer-utilities .section-background,
.footer-utilities .section-background.color-scheme-1,
footer .section-background {
display: none !important;
}
/* Stack the footer .utilities row vertically (socials → terms → copyright),
each centered. Block order is controlled in sections/footer-group.json. */
.footer-utilities .utilities,
.footer-utilities [class*="utilities--blocks"] {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
grid-template-columns: none !important;
width: 100%;
margin-top: -1px; /* tuck flush against the pill above */
padding: 1rem clamp(1.75rem, 6vw, 5.5rem) 1.15rem !important;
background: rgb(255 255 255 / 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgb(255 255 255 / 0.18);
border-top: 1px solid rgb(255 255 255 / 0.10);
border-radius: 0 0 var(--lg-radius) var(--lg-radius);
box-shadow: 0 12px 24px rgb(0 0 0 / 0.45);
}
.footer-utilities .utilities > * {
width: auto !important;
margin: 0 auto !important;
text-align: center !important;
}
/* If a block is empty (e.g., no social links), hide it entirely so it
doesn't reserve column space. */
.footer-utilities .utilities > *:empty,
.footer-utilities .utilities .social-icons__wrapper:empty {
display: none !important;
}
.footer-utilities > * {
width: 100%;
margin: 0 auto;
}
.footer-utilities * {
color: rgb(var(--rh-text)) !important;
font-size: 0.8rem !important;
text-align: center;
}
.footer-utilities a:hover {
color: rgb(var(--rh-accent-soft)) !important;
}
@media (max-width: 600px) {
.footer-utilities { padding: 16px 16px !important; max-width: calc(100% - 1rem) !important; }
}
/* ----------------------------------------------------------------------------
Catalog empty state — glass card invitation rather than blunt "No products"
---------------------------------------------------------------------------- */
.main-collection-grid__empty,
.collection__empty {
max-width: 720px;
margin: 3rem auto !important;
padding: 3rem 2rem !important;
background: rgb(20 30 40 / 0.6) !important;
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: var(--lg-radius);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
text-align: center;
color: rgb(var(--rh-text)) !important;
}
.main-collection-grid__empty-title,
.main-collection-grid__empty h2 {
color: rgb(var(--rh-accent)) !important;
font-weight: 300 !important;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 1.4rem !important;
margin-bottom: 1rem;
}
.main-collection-grid__empty-link,
.main-collection-grid__empty a {
color: rgb(var(--rh-accent-soft)) !important;
}
/* ----------------------------------------------------------------------------
Product card title + price — centered, both on homepage cards and catalog
---------------------------------------------------------------------------- */
product-card .product-card__content,
.product-card .product-card__content {
text-align: center !important;
align-items: center !important;
}
product-card .product-title,
product-card [class*="product-title"],
product-card .price,
product-card [class*="price"],
.product-card .product-title,
.product-card .price {
text-align: center !important;
width: 100% !important;
}
/* ----------------------------------------------------------------------------
Hide all "Powered by Shopify" branding (main theme + password page)
---------------------------------------------------------------------------- */
.password-footer__powered-by,
[class*="powered-by"],
[class*="powered_by"],
.footer__powered-by,
a[href*="shopify.com"][aria-label="Shopify"] {
display: none !important;
}
/* ----------------------------------------------------------------------------
Misc surfaces
---------------------------------------------------------------------------- */
.price, .product__price, .price-item {
color: rgb(var(--rh-heading)) !important;
font-weight: 400;
}
.price__sale, .price-item--sale {
color: rgb(var(--rh-accent-soft)) !important;
}
.badge {
border-radius: 999px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 400;
font-size: 0.7rem;
}
/* ----------------------------------------------------------------------------
Reduced motion (WCAG 2.3.3)
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ----------------------------------------------------------------------------
Footer links panel — full site map; forms the rounded top of the footer pill,
with the utilities bar connecting flush below it.
---------------------------------------------------------------------------- */
.rh-footer-links {
width: 100%;
max-width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.9rem 2.5rem;
padding: 1.4rem clamp(1.5rem, 3vw, 2.75rem) 1.15rem;
background: rgb(255 255 255 / 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgb(255 255 255 / 0.18);
border-bottom: none;
border-radius: var(--lg-radius) var(--lg-radius) 0 0;
box-shadow: 0 -3px 14px rgb(0 0 0 / 0.45);
text-align: left;
box-sizing: border-box;
}
.rh-footer-links__col {
min-width: 0;
}
.rh-footer-links__title {
color: rgb(var(--rh-accent-soft)) !important;
font-family: var(--rh-font) !important;
font-weight: 400 !important;
font-size: 0.75rem !important;
text-transform: uppercase;
letter-spacing: 0.14em;
margin: 0 0 0.55rem !important;
}
.rh-footer-links__list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.rh-footer-links__list li {
margin: 0 !important;
padding: 0 !important;
}
.rh-footer-links__list li::before {
content: none !important;
}
.rh-footer-links__list a {
color: rgb(var(--rh-text)) !important;
font-weight: 300 !important;
font-size: 0.9rem !important;
text-decoration: none !important;
letter-spacing: 0.01em;
transition: color 0.2s ease;
}
.rh-footer-links__list a:hover {
color: rgb(var(--rh-accent-soft)) !important;
}
@media (max-width: 600px) {
.rh-footer-links {
max-width: calc(100% - 1rem);
grid-template-columns: 1fr 1fr;
gap: 1.1rem 1.25rem;
padding: 1.2rem 1.25rem 1rem;
}
}
/* ============================================================================
PRODUCT DETAIL PAGE (PDP) — joystick topper showcase
============================================================================ */
.rh-pdp__grid {
display: grid;
grid-template-columns: 1.02fr 0.98fr;
gap: clamp(20px, 3vw, 44px);
align-items: start;
text-align: left;
}
@media (max-width: 820px) { .rh-pdp__grid { grid-template-columns: 1fr; } }
.rh-pdp__main {
width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
border-radius: var(--lg-radius-inner);
border: 1px solid rgb(255 255 255 / 0.14);
box-shadow: var(--rh-shadow-card);
background: rgb(var(--rh-bg-deep));
}
.rh-pdp__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.rh-pdp__thumb {
padding: 0; cursor: pointer; aspect-ratio: 1; overflow: hidden;
border: 1px solid rgb(255 255 255 / 0.12);
background: rgb(var(--rh-bg-deep)); border-radius: var(--lg-radius-deep);
transition: border-color 0.2s ease, transform 0.2s ease;
}
.rh-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-pdp__thumb:hover { transform: translateY(-2px); border-color: rgb(var(--rh-accent) / 0.5); }
.rh-pdp__thumb.is-active { border-color: rgb(var(--rh-accent)); }
.rh-pdp__info { display: flex; flex-direction: column; gap: 15px; }
.rh-pdp__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-pdp__badge {
font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
color: rgb(var(--rh-accent-soft));
border: 1px solid rgb(var(--rh-accent) / 0.35); border-radius: 999px;
padding: 5px 12px; background: rgb(var(--rh-accent) / 0.08);
}
.rh-pdp__price { color: rgb(var(--rh-heading)); font-size: 1.9rem; font-weight: 300; }
.rh-pdp__price small { color: rgb(var(--rh-text-soft)); font-size: 0.9rem; margin-left: 8px; }
.rh-pdp__desc { color: rgb(var(--rh-text)); font-weight: 300; font-size: 1.05rem; line-height: 1.55; margin: 0; }
.rh-pdp__points { list-style: none; padding: 0; margin: 2px 0 0; display: grid; gap: 9px; }
.rh-pdp__points li { position: relative; padding-left: 1.6em; color: rgb(var(--rh-text)); font-size: 0.97rem; line-height: 1.45; }
.rh-pdp__points li::before { content: "\2713"; color: rgb(var(--rh-accent)); position: absolute; left: 0.1em; top: 0; font-weight: 700; }
.rh-pdp__buy { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.rh-pdp__buy .button { width: 100%; }
.rh-pdp__note { color: rgb(var(--rh-text-soft)); font-size: 0.86rem; line-height: 1.5; margin: 2px 0 0; }
.rh-specs {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px;
max-width: 760px; margin: 8px auto 0; text-align: left;
border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--lg-radius-inner);
overflow: hidden; background: rgb(255 255 255 / 0.07);
}
.rh-spec { background: rgb(var(--rh-bg-deep) / 0.85); padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; }
.rh-spec__k { color: rgb(var(--rh-accent)); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
.rh-spec__v { color: rgb(var(--rh-text)); font-size: 0.97rem; font-weight: 300; }
/* ============================================================================
HOMEPAGE FEATURED PRODUCT — image + details band
============================================================================ */
.rh-feature { text-align: left; }
.rh-feature__grid {
display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(20px, 3vw, 40px);
align-items: center; text-align: left;
}
@media (max-width: 760px) { .rh-feature__grid { grid-template-columns: 1fr; } }
.rh-feature__media img {
width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
border-radius: var(--lg-radius-inner); border: 1px solid rgb(255 255 255 / 0.14);
box-shadow: var(--rh-shadow-card);
}
.rh-feature__body { display: flex; flex-direction: column; gap: 14px; }
.rh-feature__eyebrow { color: rgb(var(--rh-accent)); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; }
.rh-feature__title {
color: rgb(var(--rh-heading)) !important; font-weight: 300 !important;
font-size: clamp(1.5rem, 3vw, 2rem) !important; margin: 0; line-height: 1.15;
text-transform: none !important; letter-spacing: -0.005em !important;
}
.rh-feature__desc { color: rgb(var(--rh-text)); font-weight: 300; font-size: 1.05rem; line-height: 1.55; margin: 0; }
.rh-feature__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rh-feature__price { color: rgb(var(--rh-heading)); font-size: 1.5rem; font-weight: 300; }
.rh-feature__tag {
font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--rh-accent-soft));
border: 1px solid rgb(var(--rh-accent) / 0.35); border-radius: 999px; padding: 4px 11px; background: rgb(var(--rh-accent) / 0.08);
}
.rh-feature__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.rh-feature__cta .button { flex: 0 0 auto; }
@media (max-width: 480px) { .rh-feature__cta .button { flex: 1 1 100%; } }
/* Marketplace button that is not live yet (renders as a dimmed, non-interactive chip) */
.rh-marketplaces__btn--soon { opacity: 0.45; pointer-events: none; cursor: default; }
.rh-marketplaces__btn--soon .rh-marketplaces__label { color: rgb(var(--rh-text-soft)); }
/* ============================================================================
PRODUCT PAGE EXTRAS — how-it-fits steps, FAQ list
============================================================================ */
.rh-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; max-width: 840px; margin: 8px auto 0; text-align: left; }
.rh-step { background: rgb(var(--rh-bg-deep) / 0.6); border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--lg-radius-inner); padding: 18px 20px; }
.rh-step__n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: rgb(var(--rh-accent) / 0.15); border: 1px solid rgb(var(--rh-accent) / 0.4); color: rgb(var(--rh-accent-soft)); font-size: 0.95rem; margin-bottom: 10px; }
.rh-step__t { color: rgb(var(--rh-heading)); font-size: 1.02rem; font-weight: 400; margin: 0 0 6px; }
.rh-step__d { color: rgb(var(--rh-text-soft)); font-size: 0.92rem; line-height: 1.5; margin: 0; }
.rh-faqs { max-width: 640px; margin: 8px auto 0; text-align: left; border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--lg-radius-inner); overflow: hidden; background: rgb(var(--rh-bg-deep) / 0.5); }
.rh-faqs .rh-faq { display: block; }
/* ============================================================================
HEADER LOGO — centered in its column (centered-logo header layout), and never
dimmed/blended by any overlay so it stays pure white.
============================================================================ */
header-component .header-logo,
.header-logo { justify-content: center !important; }
header-component .header-logo .header-logo__image,
.header-logo .header-logo__image,
.header-logo img {
opacity: 1 !important;
filter: none !important;
-webkit-filter: none !important;
mix-blend-mode: normal !important;
}
/* ============================================================================
AUDIT POLISH FIXES (2026-06-23) — from the parallel visual audit pass.
============================================================================ */
/* FAQ: reserve room for the + toggle so long questions never collide with it. */
.rh-faq summary { padding-right: 2.75rem !important; }
/* Custom-order dropzone: honor [hidden] so the chosen-file preview REPLACES the
"Drag and drop or browse" placeholder instead of rendering on top of it. */
.rh-co-dropzone__ph[hidden],
.rh-co-dropzone__pv[hidden] { display: none !important; }
/* Custom-order: left-align field labels (were centered over their inputs). */
.rh-co-label,
.rh-co-field > label { text-align: left !important; }
/* CTA buttons: size to their content and let groups span the card, instead of
being trapped in a 260px column with 220px fixed-width buttons (which forced
"How we are structured" onto two lines and left big empty side margins). */
.rh-cta-group { max-width: none !important; gap: 12px !important; }
/* Uniform button size everywhere: one fixed width, sized to the longest label */
.rh-cta-group .button {
width: 240px !important;
max-width: 100% !important;
}
/* Footer sitemap layout now lives in ONE place (the .rh-footer-links base rule
above): a 3-equal-column grid in a 760px pill, 2 columns on mobile. The old
conflicting !important override that lived here was removed. */
/* Header: more breathing room from the rounded pill edges (was a tight 8px). */
header-component .header__row,
header-component .header__row--top,
header-component .header__row--bottom,
.header__row { padding-inline: 18px !important; }
header-component .menu-list { gap: 4px !important; }
/* Our Products: roadmap cards that aren't real products yet — show as planned,
not as clickable/broken "View product" links to an empty collection. */
.rh-product-card--soon { cursor: default; opacity: 0.92; }
.rh-product-card--soon:hover { transform: none !important; box-shadow: var(--rh-shadow-card) !important; }
.rh-product-card__cta--soon { color: rgb(var(--rh-text-soft)) !important; }
.rh-product-card__cta--soon::after { content: "" !important; display: none !important; }