/* Rogue — base + homepage. Hand-written, token-driven. */
*, *::before, *::after { box-sizing: border-box; }
/* Kill the grey tap-highlight box on every tap/click + make the whole site's text
UN-COPIABLE / non-selectable (headlines and body copy included). Form inputs and
textareas stay editable/selectable so users can still fill them in. */
* { -webkit-tap-highlight-color: transparent; }
html { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* re-enable selection ONLY inside fields the user must type in */
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img, svg { -webkit-user-drag: none; }
/* The global `user-select: none` above makes iOS treat a press-and-move on an image as
a long-press/drag instead of a scroll, which swallows swipe gestures inside carousels.
Suppress the callout on horizontal scrollers so the swipe reaches them. */
.rg-pdp__stage-track, .rg-pdp__stage-track *,
.rg-pdp__thumbs, .rg-pdp__thumbs *,
.mp13-cart__related-list, .mp13-cart__related-list * {
-webkit-touch-callout: none;
-webkit-user-drag: none;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* ---- Brand scrollbars everywhere: purple track + volt-green thumb ---- */
/* Firefox */
* { scrollbar-color: var(--rg-volt) var(--rg-violet); scrollbar-width: thin; }
/* WebKit / Blink (Chrome, Edge, Safari) — page + any scrollable container */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--rg-violet); }
::-webkit-scrollbar-thumb {
background: var(--rg-volt);
border-radius: 999px;
border: 2px solid var(--rg-violet); /* padding so the green thumb sits on the purple track */
}
::-webkit-scrollbar-thumb:hover { background: #bfe05a; }
::-webkit-scrollbar-corner { background: var(--rg-violet); }
/* Lenis smooth scroll (required base styles) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
margin: 0;
background: var(--rg-bg);
color: var(--rg-ink);
font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* `clip` (not `hidden`) prevents horizontal scroll WITHOUT making body a scroll
container — `overflow-x:hidden` forces overflow-y:auto, which breaks every
position:sticky on the page (e.g. the FAQ girl, detail tabs). */
overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
/* Headings — Montserrat 900 Black, uppercase, brand colors (H1 volt / H2 violet / H3 volt) */
h1, h2, h3, h4, h5, h6 {
font-family: "Montserrat", sans-serif;
font-weight: 900;
text-transform: uppercase;
line-height: 1.05;
letter-spacing: -0.02em;
text-wrap: balance;
margin: 0 0 0.4em;
}
h1 { color: var(--rg-h1); }
h2 { color: var(--rg-h2); }
h3 { color: var(--rg-h3); }
h4, h5, h6 { color: var(--rg-ink); }
p { text-wrap: pretty; }
.rg-container { width: min(var(--rg-container), 92vw); margin-inline: auto; }
.rg-section { padding-block: clamp(3rem, 8vw, 7rem); }
.rg-skip-link {
position: absolute; left: -9999px; top: 0; z-index: var(--rg-z-tooltip);
background: var(--rg-accent); color: var(--rg-accent-ink);
padding: 0.6em 1em; border-radius: var(--rg-r-sm);
}
.rg-skip-link:focus { left: 1rem; top: 1rem; }
/* ================================================================
HEADER — viewport-driven, roomy (no cramping)
================================================================ */
.rg-site-header {
position: sticky; top: 0; z-index: var(--rg-z-sticky);
background: var(--rg-glass-bg);
-webkit-backdrop-filter: var(--rg-blur);
backdrop-filter: var(--rg-blur);
border-bottom: 0; /* no white/glass line under the header */
transition: transform var(--rg-dur) var(--rg-ease-out), background var(--rg-dur) var(--rg-ease-out);
}
/* Homepage header: FIXED, transparent over the hero, → glassmorphism on scroll */
.rg-site-header--overlay {
position: fixed; left: 0; right: 0; top: 0;
background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
border-bottom: 1px solid transparent; /* transparent (not 0) so it fades to the glass border with no white flash */
}
/* Glassmorphism once scrolled past the hero (JS toggles .is-scrolled) */
.rg-site-header--overlay.is-scrolled {
background: rgba(18, 18, 18, 0.55);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
border-bottom: 0; /* no bottom line */
box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.35);
}
/* All headers: keep the glass transition smooth */
.rg-site-header { transition: transform var(--rg-dur) var(--rg-ease-out), background var(--rg-dur) var(--rg-ease-out), backdrop-filter var(--rg-dur) var(--rg-ease-out), border-color var(--rg-dur) var(--rg-ease-out); }
.rg-site-header__inner {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
column-gap: 3vw;
height: 11vh; min-height: 64px;
padding-inline: 3vw;
width: 100%; max-width: 100%; margin: 0; /* full-bleed header, not container-clamped */
}
.rg-header-left { display: flex; align-items: center; gap: 1.6vw; justify-self: start; }
.rg-brand { justify-self: center; display: flex; align-items: center; position: relative; }
.rg-header-actions { display: flex; align-items: center; gap: 1.8vw; justify-self: end; }
.rg-brand__text { font-weight: 900; font-size: 2vw; letter-spacing: -0.04em; text-transform: uppercase; }
/* ===== Logo → "Rogue Supplements" text crossfade on hover (single source, no dupes) ===== */
.rg-brand .custom-logo-link { display: inline-flex; line-height: 0; }
.rg-brand .custom-logo {
height: 4.5vh; min-height: 30px; width: auto;
/* opacity driven by GSAP (see main.js) — CSS :hover didn't animate reliably */
}
.rg-brand__hover {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
white-space: nowrap; opacity: 0;
font-family: "Montserrat", sans-serif; font-weight: 900; text-transform: uppercase;
font-size: 1.5vw; letter-spacing: -0.02em; line-height: 1;
color: var(--rg-volt);
}
/* no-JS fallback: show logo, hide text (GSAP takes over when JS runs) */
.no-js .rg-brand__hover { display: none; }
@media (max-width: 780px) { .rg-brand__hover { font-size: 4vw; } }
/* Hamburger — volt green bars */
/* Two elegant lines → morph to an X on open. Lines are absolutely centered in a
fixed box so they cross exactly; each rotates around the box center. */
.rg-burger {
position: relative; display: inline-block;
width: 2.6vw; min-width: 28px; height: 2.6vw; min-height: 28px;
background: none; border: 0; cursor: pointer; padding: 0;
}
.rg-burger span {
position: absolute; left: 50%; top: 50%;
width: 100%; height: 2px; border-radius: 2px;
background: var(--rg-volt);
transform-origin: center;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
}
.rg-burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); } /* top line */
.rg-burger span:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); } /* bottom line */
/* Active (menu open) → cross into an X */
.rg-burger.is-active span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.rg-burger.is-active span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
/* language switcher — dark-glass dropdown (reuses data-rg-dropdown JS) */
.rg-lang-wrap { position: relative; display: inline-flex; }
.rg-lang {
color: var(--rg-volt); font-weight: 800; font-size: 0.82rem; display: inline-flex; align-items: center; gap: 0.4em;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--rg-r-pill);
padding: 0.4em 0.7em; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em;
transition: border-color 0.3s var(--rg-ease-out), background 0.3s var(--rg-ease-out);
}
.rg-lang:hover, .rg-lang-wrap.is-open .rg-lang { border-color: rgba(169,207,63,0.4); background: rgba(255,255,255,0.08); }
.rg-lang__flag { font-size: 1.05em; line-height: 1; }
/* Mobile-only header pieces, hidden by default so desktop is untouched:
- the switcher slot rendered inside .rg-header-actions (header.php)
- the RS monogram that replaces the wordmark on phones
Both are switched on inside the ≤600px block. */
.rg-lang-slot--mobile { display: none; }
.rg-brand__mono { display: none; }
.rg-lang__chev { transition: transform 0.3s var(--rg-ease-out); }
.rg-lang-wrap.is-open .rg-lang__chev { transform: rotate(180deg); }
.rg-lang__menu {
position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: var(--rg-z-dropdown, 700);
list-style: none; margin: 0; padding: 0.4rem; min-width: 11rem;
background: rgba(14,14,16,0.85); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--rg-r-md, 14px);
-webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%);
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s var(--rg-ease-out), transform 0.25s var(--rg-ease-out), visibility 0.25s;
}
.rg-lang-wrap.is-open .rg-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.rg-lang__opt {
display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0.7em; border-radius: 10px;
color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 600; font-size: 0.9rem;
transition: background 0.2s, color 0.2s;
}
.rg-lang__opt:hover { background: rgba(169,207,63,0.1); color: var(--rg-volt); }
.rg-lang__opt.is-current { color: var(--rg-volt); }
.rg-lang__opt .rg-lang__flag { font-size: 1.2em; }
.rg-lang__name { margin-right: auto; }
.rg-lang__tick { color: var(--rg-volt); }
/* The button already renders an SVG chevron (.rg-lang__chev); this ::after triangle was
a second one stacked next to it. Removed — one chevron only. */
/* Mobile: the switcher sits at the far LEFT of the header, so a right-anchored
dropdown (min-width 11rem) hangs off the screen edge — measured at left:-44px on a
393px viewport. Anchor it to the left there and cap the width to the viewport. */
@media (max-width: 780px) {
.rg-lang__menu {
right: auto;
left: 0;
min-width: 10rem;
max-width: calc(100vw - 1.5rem);
}
}
/* Header icons — volt green line icons with badges */
.rg-icon { position: relative; display: inline-flex; color: var(--rg-volt); background: none; border: 0; cursor: pointer; padding: 0; transition: transform var(--rg-dur-fast) var(--rg-ease-out); }
.rg-icon:hover { transform: translateY(-0.4vh); }
.rg-icon svg { display: block; width: 2.4vw; height: 2.4vw; min-width: 22px; min-height: 22px; }
.rg-badge {
/* bigger + closer to the icon */
position: absolute; top: -0.6vh; right: -0.5vw; min-width: 2vh; height: 2vh; min-height: 20px; min-width: 20px;
display: grid; place-items: center; padding: 0 0.4vh;
font-size: 1.3vh; font-weight: 800; line-height: 1;
/* FILLED circle (volt bg, black number) — identical to the wishlist badge. */
color: var(--rg-black); background: var(--rg-volt);
border: 2px solid var(--rg-charcoal); border-radius: var(--rg-r-pill);
}
/* Cart badge is identical to the wishlist badge (filled volt circle, above).
.rg-badge sets display:grid, which overrides the [hidden] attribute — force
hidden badges (empty cart) to actually stay hidden. */
.rg-badge[hidden] { display: none !important; }
/* Kill the plugins' Yammy fly-to-header ghosts (flying cart / flying hearts).
We replace them with a direct pop/flash on the header icon (below). */
.mp13c-cart-fly, .mp13w-heart-fly { display: none !important; }
/* Add-to-cart / add-to-wishlist feedback: pop + volt flash on the header icon. */
@keyframes rg-icon-pop {
0% { transform: scale(1); }
35% { transform: scale(1.35); }
70% { transform: scale(0.94); }
100% { transform: scale(1); }
}
@keyframes rg-icon-flash {
0%, 100% { filter: none; }
40% { filter: drop-shadow(0 0 10px rgba(169, 207, 63, 0.9)) drop-shadow(0 0 4px rgba(169, 207, 63, 0.8)); }
}
.rg-icon-pop { animation: rg-icon-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rg-icon-pop svg { animation: rg-icon-flash 0.45s ease; }
/* also pop the count badge itself */
.rg-icon-pop .rg-badge,
.rg-icon-pop .mp13-wishlist-trigger__badge { animation: rg-icon-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (prefers-reduced-motion: reduce) {
.rg-icon-pop, .rg-icon-pop svg, .rg-icon-pop .rg-badge { animation: none; }
}
/* ---- Header icon dropdowns (account; wishlist uses its plugin's own) ---- */
.rg-icon-wrap { position: relative; display: inline-flex; }
.rg-dropdown {
position: absolute;
top: calc(100% + 1.2vh);
right: 0;
z-index: var(--rg-z-dropdown, 700);
width: min(20rem, 78vw);
padding: 1.1rem;
border-radius: var(--rg-r-lg);
background: rgba(18, 18, 18, 0.92);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgba(169, 207, 63, 0.28);
box-shadow: 0 2vh 5vh rgba(0, 0, 0, 0.5), 0 0 30px rgba(123, 74, 168, 0.25);
/* hidden state */
opacity: 0; visibility: hidden;
transform: translateY(-0.6vh);
transition: opacity var(--rg-dur) var(--rg-ease-out), transform var(--rg-dur) var(--rg-ease-out), visibility var(--rg-dur);
}
.rg-account.is-open .rg-dropdown {
opacity: 1; visibility: visible; transform: translateY(0);
}
/* hover-bridge so the panel doesn't close while crossing the gap */
.rg-account::after {
content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: 1.4vh;
}
.rg-dropdown__head { margin: 0 0 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; }
.rg-dropdown__hi { color: var(--rg-ink-muted); font-size: 0.82rem; }
.rg-dropdown__name { color: var(--rg-white); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1rem; }
/* Rogue Points pill in the account dropdown — volt green, black text + black monogram */
.rg-dropdown__points {
display: inline-flex; align-items: center; gap: 0.4em; margin: 0 0 0.9rem;
padding: 0.4em 0.9em; border-radius: var(--rg-r-pill); text-decoration: none; align-self: flex-start;
background: var(--rg-volt); color: #000;
transition: transform 0.25s var(--rg-ease-out), box-shadow 0.25s var(--rg-ease-out);
}
.rg-dropdown__points:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(169,207,63,0.5); }
.rg-dropdown__points-mark { width: 1em; height: 1em; object-fit: contain; display: block; }
.rg-dropdown__points-num { font-weight: 900; font-size: 0.9rem; color: #000; }
.rg-dropdown__points-label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; color: #000; }
.rg-dropdown__list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.15rem; }
.rg-dropdown__list a,
.rg-dropdown__link {
display: block; padding: 0.6rem 0.7rem; border-radius: 10px;
color: var(--rg-white); text-decoration: none;
font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em;
transition: background var(--rg-dur) var(--rg-ease-out), color var(--rg-dur) var(--rg-ease-out);
}
.rg-dropdown__list a:hover,
.rg-dropdown__link:hover { background: rgba(169, 207, 63, 0.12); color: var(--rg-volt); }
.rg-dropdown__cta {
display: block; text-align: center;
padding: 0.75rem 1rem; border-radius: var(--rg-r-pill);
background: var(--rg-volt); color: var(--rg-black);
font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem;
text-decoration: none;
transition: box-shadow var(--rg-dur) var(--rg-ease-out), transform var(--rg-dur-fast) var(--rg-ease-out);
}
.rg-dropdown__cta:hover { box-shadow: 0 0 26px rgba(169, 207, 63, 0.55); transform: translateY(-1px); }
.rg-dropdown__link { text-align: center; margin-top: 0.4rem; color: var(--rg-ink-muted); }
.rg-nav { display: none; } /* primary nav lives in the glass menu on this design */
/* Header cramping fix on narrow viewports: bump min sizes, tighten to edges */
@media (max-width: 780px) {
.rg-site-header__inner { height: 9vh; column-gap: 4vw; }
.rg-brand__text { font-size: 5vw; }
.rg-lang { font-size: 3.4vw; }
}
/* ---- Buttons ---- */
.rg-btn {
display: inline-flex; align-items: center; gap: 0.5em;
padding: 1.4vh 2.4vw; border-radius: var(--rg-r-pill);
font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
border: 0; cursor: pointer;
transition: transform var(--rg-dur-fast) var(--rg-ease-out), box-shadow var(--rg-dur) var(--rg-ease-out);
}
.rg-btn--primary { background: var(--rg-volt); color: var(--rg-primary-ink); box-shadow: var(--rg-shadow-glow); }
.rg-btn--accent { background: var(--rg-grad-accent); color: var(--rg-accent-ink); }
.rg-btn:hover { transform: translateY(-2px); }
.rg-btn:active { transform: translateY(0); }
/* ================================================================
HERO — exactly one viewport tall; figure overlaps & spills below
================================================================ */
.rg-hero {
position: relative;
height: 100vh; height: 100svh; /* exactly one viewport */
display: grid; place-items: center;
/* NOTE: not clipped — the cut-out figure must spill past the bottom edge */
/* radius on ONE corner only: bottom-left (TL TR BR BL) — viewport-scaled, larger */
border-radius: 0 0 0 6vw;
background: var(--rg-black); /* black canvas so the ambient glows read */
/* subtle purple brand glow (restored — this is what makes the radius read) */
box-shadow: 0 3vh 7vh rgba(123, 74, 168, 0.30);
z-index: 2; /* above section 2 (z:0), below the girl (z:3) — woman (z:3) stays overlapping */
}
/* media + scrim are clipped to the curved hero; the figure is NOT */
.rg-hero__media {
position: absolute; inset: 0; z-index: 0; overflow: hidden;
border-radius: inherit;
}
/* video toned down to ambient texture — visible but calm, sitting behind the glows. */
.rg-hero__video {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: brightness(0.72) saturate(0.85) blur(1px);
transform: scale(1.04); /* hide blur edges */
opacity: 1;
}
.rg-hero__scrim {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at center, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%),
linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.05) 40%, var(--rg-black) 100%);
}
.rg-hero__content { position: relative; z-index: 2; text-align: center; padding: 0 4vw; max-width: 90vw; margin-inline: auto; }
/* ============================================================================
HERO — SPLIT variant (copy left, framed contained figure right) — mirrors the
About page hero the user loved.
========================================================================== */
.rg-hero--split { height: auto; min-height: 92vh; min-height: 92svh; display: flex; align-items: center; place-items: initial; overflow: hidden; }
/* video bg on the split hero: HEAVILY blurred + edge-masked → ambient texture only */
.rg-hero--split .rg-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.rg-hero--split .rg-hero__video {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: brightness(0.95) saturate(0.95) blur(22px); /* much brighter than before */
transform: scale(1.15); /* hide the blur bleed at the edges */
opacity: 0.9;
/* soft radial mask so it dissolves into the black canvas at the edges */
-webkit-mask-image: radial-gradient(130% 100% at 55% 40%, #000 40%, transparent 92%);
mask-image: radial-gradient(130% 100% at 55% 40%, #000 40%, transparent 92%);
}
.rg-hero--split .rg-hero__scrim {
position: absolute; inset: 0;
/* lighter scrim — just enough to keep text legible, not a black-out */
background:
linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.05) 100%),
linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 40%, rgba(0,0,0,0.35) 100%);
}
.rg-hero--split .rg-hero__inner {
position: relative; z-index: 2;
/* 78vw is for wide screens (it stops the figure panel freezing at 1200px and the
figures bursting out). On a phone 78vw leaves only ~342px of 438, which cropped
the headline — so mobile keeps the full-bleed 92vw it had before. */
width: 92vw; margin-inline: auto;
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem);
align-items: center; padding-block: clamp(4rem, 10vh, 8rem);
}
/* Desktop only: narrow the hero so the figure panel keeps scaling with the viewport. */
@media (min-width: 901px) {
.rg-hero--split .rg-hero__inner { width: 78vw; }
}
/* Phones: the grid column resolved ~3px wider than the container, so the title, the
sub-copy and the figure all ran past the right edge. Pin the column to the container
and let long words wrap instead of pushing the track wider. */
@media (max-width: 900px) {
.rg-hero--split .rg-hero__inner { grid-template-columns: minmax(0, 1fr); }
.rg-hero--split .rg-hero__inner > * { min-width: 0; max-width: 100%; }
.rg-hero--split .rg-hero__title { overflow-wrap: anywhere; }
}
.rg-hero--split .rg-hero__copy { max-width: 60ch; text-align: left; }
.rg-hero__eyebrow { margin: 0 0 1em; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; font-size: clamp(0.72rem, 1vw, 0.85rem); color: var(--rg-volt); }
/* left-align the rotating title in the split layout */
/* 8vw made the longest word ("SUPPLEMENTS") run past the copy column and overlap the
glass figure panel. 6.4vw keeps the same scaling behaviour, one notch smaller. */
.rg-hero--split .rg-hero__title { font-size: clamp(3rem, 6vw, 7rem); display: grid; place-items: start; justify-content: start; text-align: left; min-height: 1.1em; margin: 0 0 0.5em; }
.rg-hero--split .rg-hero__title .rg-word { justify-self: start; }
.rg-hero--split .rg-hero__lead { text-align: left; margin: 0 0 1.6em; max-width: 46ch; padding-inline: 0; }
/* split hero: SOLID WHITE lead (kill the silver background-clip shine) */
.rg-hero--split .rg-hero__lead,
.rg-hero--split .rg-hero__lead.is-in {
background: none !important;
-webkit-text-fill-color: #fff !important; color: #fff !important;
animation: none !important;
}
.rg-hero__cta { display: inline-flex; }
/* framed figure — same glass panel + dropshadow as the About hero */
/* the panel starts LOWER (top:22%) so the figures' heads rise above its top edge */
.rg-hero__figure { position: relative; display: flex; align-items: flex-end; justify-content: center; align-self: stretch; min-height: 60vh; padding-top: clamp(3rem, 8vh, 6rem); }
.rg-hero__figure::before {
content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; top: 22%; z-index: 0;
border-radius: var(--rg-r-xl);
background: radial-gradient(120% 90% at 50% 15%, rgba(123,74,168,0.16), transparent 62%), rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.10);
box-shadow: 0 40px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.rg-hero__figure-glow { position: absolute; inset: 18% 6% 0; z-index: 0; background: radial-gradient(circle at 50% 55%, rgba(169,207,63,0.20), rgba(123,74,168,0.20) 52%, transparent 74%); filter: blur(50px); }
.rg-hero__figure-img { position: relative; z-index: 1; width: auto; max-width: 100%; max-height: clamp(50vh, 66vh, 76vh); object-fit: contain; object-position: bottom center; margin-inline: auto; filter: drop-shadow(0 30px 45px rgba(0,0,0,0.6)); }
/* DUO: two athletes stacked on the panel — woman IN FRONT, man behind. They overlap
and BOTH heads rise above the panel's top edge. Bottom-anchored. */
.rg-hero__figure--duo .rg-hero__figure-stage {
position: relative; z-index: 1;
display: flex; align-items: flex-end; justify-content: center;
width: 100%; height: 100%;
}
/* Woman (--a) on the LEFT, man (--b) on the RIGHT, standing side by side with a
SLIGHT overlap at the join — both fully visible. The woman is in front at the seam
(higher z) so she isn't hidden behind him. */
.rg-hero__figure--duo .rg-hero__figure-stage { gap: 0; justify-content: center; }
/* woman shifted RIGHT (positive left margin) + a negative right margin so she moves
toward and overlaps the man */
.rg-hero__figure--duo .rg-hero__figure-img--a { z-index: 2; margin: 0 -22% 0 12%; max-height: clamp(48vh, 62vh, 72vh); object-position: bottom center; }
/* man ~5% bigger than the woman */
.rg-hero__figure--duo .rg-hero__figure-img--b { z-index: 1; margin: 0; max-height: clamp(50vh, 65vh, 76vh); object-position: bottom center; filter: drop-shadow(0 30px 45px rgba(0,0,0,0.6)) brightness(0.92); }
/* Pull the pair back inside the container's rounded edge — her 2vw right, him 2vw
left. vw (not %) so the shift scales with the viewport instead of with each image's
own width. Heights are untouched, so he stays ~5% taller than her. */
.rg-hero__figure--duo .rg-hero__figure-img--a { margin-right: -2vw; }
.rg-hero__figure--duo .rg-hero__figure-img--b { margin-left: -2vw; }
@media (max-width: 900px) {
.rg-hero--split .rg-hero__inner { grid-template-columns: 1fr; text-align: center; }
/* Push the eyebrow + rotating heading down 4vw. Applied to the COPY column only, so
the figure panel below keeps its current position. */
.rg-hero--split .rg-hero__copy { max-width: 100%; margin-inline: auto; text-align: center; padding-top: 4vw; }
.rg-hero--split .rg-hero__title { place-items: center; justify-content: center; text-align: center; }
.rg-hero--split .rg-hero__title .rg-word { justify-self: center; }
.rg-hero--split .rg-hero__lead { text-align: center; margin-inline: auto; }
.rg-hero__figure { min-height: 44vh; order: 2; }
.rg-hero__figure-img { max-height: 48vh; }
.rg-hero__figure--duo .rg-hero__figure-img { max-height: 40vh; }
}
@media (max-width: 520px) {
/* Both figures stay on phones (the man used to be dropped here "to avoid
crowding"). They share the stage instead: a tighter overlap in vw plus a smaller
height cap keeps the pair inside the panel without either one shrinking away. */
.rg-hero__figure--duo .rg-hero__figure-img--a {
margin: 0 -3vw 0 0;
max-height: 37.8vh; /* 36vh + 5% */
}
.rg-hero__figure--duo .rg-hero__figure-img--b {
margin: 0 -3vw 0 0;
max-height: 39.9vh; /* 38vh + 5%; stays ~5% taller than her */
}
}
.rg-hero__title {
font-size: 7.5vw; /* ~half the old size; fits within the viewport */
line-height: 0.9; margin: 0 0 2.5vh;
/* rotator: stack words in one slot, centered */
position: relative; display: grid; place-items: center; justify-content: center;
width: 100%; /* span the content block so absolutely-positioned words center on screen */
min-height: 7.5vw;
}
.rg-hero__title .rg-word {
grid-area: 1 / 1; /* grid stack in one cell → place-items:center centers them */
justify-self: center; /* center within the cell */
white-space: nowrap;
opacity: 0; /* JS (GSAP) drives the opacity crossfade */
will-change: opacity;
/* gradient + travelling gleam (matches the shop title). SEAMLESS: starts and ends
on the SAME colour (volt) so the 200%-tile loop has no hard join line. */
background: linear-gradient(100deg,
var(--rg-volt) 0%,
var(--rg-violet) 25%,
#ffffff 50%,
var(--rg-violet) 75%,
var(--rg-volt) 100%);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 0.5vh 4vh rgba(0,0,0,0.5)) drop-shadow(0 0 30px rgba(169,207,63,0.2));
animation: rg-title-gleam 5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.rg-hero__title .rg-word { animation: none; background-position: 50% 0; }
}
/* no-JS / reduced-motion: just show the first word */
.no-js .rg-hero__title .rg-word:first-child,
.rg-hero__title .rg-word:first-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.rg-hero__title .rg-word { transition: none; }
.rg-hero__title .rg-word:not(.is-active) { opacity: 0; }
.rg-hero__title .rg-word.is-active { opacity: 1; }
}
.rg-hero__lead {
color: var(--rg-white);
font-weight: 800; text-transform: uppercase;
font-size: 2vw; line-height: 1.25; letter-spacing: 0.01em;
max-width: 26ch; margin-inline: auto;
text-shadow: 0 0.2vh 2vh rgba(0,0,0,0.6);
/* fade-up reveal on load */
opacity: 0; transform: translateY(1.2em); filter: blur(4px);
transition: opacity 1s var(--rg-ease-out), transform 1s var(--rg-ease-out), filter 1s var(--rg-ease-out);
}
.rg-hero__lead.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }
/* subtle WHITE shine sweeping across the lead (no brand colours — just a soft
silver highlight gliding through). Kicks in only after the reveal finishes. */
.rg-hero__lead.is-in {
background: linear-gradient(100deg,
rgba(255,255,255,0.78) 0%,
rgba(255,255,255,0.78) 38%,
#ffffff 50%, /* soft bright shine peak (no hard band) */
rgba(255,255,255,0.78) 62%,
rgba(255,255,255,0.78) 100%);
background-size: 220% 100%;
background-position: 100% 0;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: rg-lead-shine 6s linear infinite;
}
@keyframes rg-lead-shine { to { background-position: -120% 0; } }
.no-js .rg-hero__lead { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
.rg-hero__lead { opacity: 1; transform: none; filter: none; transition: none; }
.rg-hero__lead.is-in { animation: none; background-position: 50% 0; }
}
/* Vertical SCROLL indicator, bottom-left — label + animated line drawing down */
.rg-hero__scroll {
position: absolute; left: 3vw; bottom: 5vh; z-index: 4;
display: flex; flex-direction: column; align-items: center; gap: 1.4vh;
color: var(--rg-white);
}
.rg-hero__scroll-label {
font-size: max(0.8vw, 11px); font-weight: 700; letter-spacing: 0.3em;
writing-mode: vertical-rl; text-orientation: mixed;
}
/* the track is a thin line; a dot travels down it on a smooth loop */
.rg-hero__scroll-track {
position: relative; width: 2px; height: 8vh; border-radius: 2px;
background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.35));
overflow: hidden;
}
.rg-hero__scroll-dot {
position: absolute; left: 50%; top: 0; transform: translateX(-50%);
width: 4px; height: 40%; border-radius: 2px;
background: var(--rg-volt); box-shadow: 0 0 10px var(--rg-volt);
animation: rg-scroll-run 1.8s var(--rg-ease-out) infinite;
}
@keyframes rg-scroll-run {
0% { top: -40%; opacity: 0; }
25% { opacity: 1; }
75% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rg-hero__scroll-dot { animation: none; top: 30%; } }
@media (max-width: 780px) {
.rg-hero__title { font-size: 13vw; }
.rg-hero__lead { font-size: 4vw; }
.rg-hero__scroll { font-size: 2.6vw; }
}
/* ================================================================
SECTION 2 — "FOR THE REBELS AT HEART". The WOMAN lives in this section,
top-right, spilling PAST its bottom edge. Section 3 covers her feet slightly.
================================================================ */
.rg-rebels {
position: relative; z-index: auto; /* no stacking context → the girl child can rise above the hero */
background: var(--rg-black);
padding: 16vh 4vw 18vh; /* more breathing room above + below the title */
min-height: 60vh;
overflow: visible; /* she must spill past the bottom */
/* same trick as section 3 (reversed): overlap the seam so the hero's shadow
projects down cleanly with no hard clip line. §3 pulls up over §2; here §2
pulls up under the hero. */
margin-top: -8vh;
}
.rg-rebels__inner { position: relative; z-index: 2; max-width: 74vw; }
.rg-rebels__lead {
color: var(--rg-violet);
font-weight: 900; text-transform: uppercase;
font-size: 6vw; line-height: 1; letter-spacing: -0.02em;
margin: 0;
}
/* The woman — top-right of section 2, spilling below into section 3's overlap */
.rg-rebels__figure {
position: absolute; right: 5vw; top: -42vh; z-index: 3; /* above hero (z:2), below section 3 (z:4) */
height: 98vh; width: auto;
will-change: transform; /* bobbing target */
pointer-events: none;
}
.rg-rebels__figure-img { height: 100%; width: auto; display: block; filter: drop-shadow(0 1.5vh 3vh rgba(0,0,0,0.55)); }
/* ================================================================
SECTION 3 — next section (Break the rules later). Sits ABOVE section 2,
pulled up to cover the woman's feet SLIGHTLY. Rounded top-left + dropshadow.
================================================================ */
.rg-next {
position: relative; z-index: 4;
background: var(--rg-black);
/* section 2 is now a marquee (no spilling figure), so the old -8vh overlap would
clip the marquee's bottom row. Neutralised. */
margin-top: 0;
min-height: 90vh;
border-radius: 4vw 0 0 0; /* rounded top-left corner */
/* volt-green glow ONLY on the top (rising) edge — negative spread pulls the blur
in so it can't bleed out the bottom/sides of the section. */
box-shadow: 0 -1.5vh 4vh -1.5vh rgba(169, 207, 63, 0.30);
overflow: hidden; /* clip the full-bleed image to the rounded corner */
/* two columns: image (left, full-bleed) | statement (right) */
display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
}
/* Left: B&W image sized to 90vh, pinned to the BOTTOM of the section */
.rg-next__media {
position: relative;
display: flex; align-items: flex-end; justify-content: center; /* bottom-anchored */
}
.rg-next__img {
height: 100vh; width: 100%; max-width: 100%;
object-fit: cover; object-position: center top; /* bigger; crops from the LEGS (bottom), keeps the head */
display: block;
filter: grayscale(1) contrast(1.05); /* clean, true B&W — refined + minimal */
}
/* Black→transparent overlays fading the image into black on ALL sides.
The right-edge fade is strongest — it hides the vertical seam between image + text.
Sized to the image box (not the whole column) via the wrapper below. */
.rg-next__media::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
background:
linear-gradient(to right, #000 0%, transparent 32%, transparent 60%, #000 88%), /* stronger black on BOTH sides */
linear-gradient(to bottom, #000 0%, transparent 15%, transparent 82%, #000 100%); /* top + bottom */
}
/* Right: the statement block */
.rg-next__content {
position: relative;
display: flex; flex-direction: column; justify-content: center;
gap: 3.5vh; padding: 12vh 6vw 12vh 5vw; /* a touch more breathing room */
}
/* faint violet undertone behind the statement (ties into the ambient palette) */
.rg-next__content::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
left: 2vw; top: 30%; width: 60%; height: 50%;
background: radial-gradient(circle, rgba(123,74,168,0.22), transparent 70%);
filter: blur(50px);
}
.rg-next__content > * { position: relative; z-index: 1; }
.rg-next__title {
font-size: 5.5vw; line-height: 0.98; margin: 0;
text-transform: uppercase; letter-spacing: -0.02em;
/* SCROLL-FILL in VOLT: dim volt → bright volt, top-to-bottom as it scrolls in. */
--fill: 0%;
background: linear-gradient(180deg,
var(--rg-volt) 0%,
var(--rg-volt) var(--fill),
rgba(169,207,63,0.22) calc(var(--fill) + 8%),
rgba(169,207,63,0.22) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: reduce) { .rg-next__title { --fill: 100%; } }
.rg-next__sub {
color: var(--rg-white);
font-weight: 800; text-transform: uppercase;
font-size: 1.4vw; line-height: 1.3; letter-spacing: 0.01em;
max-width: 32ch; margin: 0;
}
.rg-next__cta { align-self: flex-start; margin-top: 1vh; }
/* gradient pill button (pink → purple) with magnetic follow + arrow slide-in */
.rg-btn--grad {
background: linear-gradient(120deg, var(--rg-pink) 0%, var(--rg-violet) 100%);
color: #fff; box-shadow: 0 1vh 3vh rgba(219, 30, 121, 0.35);
position: relative; overflow: hidden;
transition: box-shadow 0.4s var(--rg-ease-out); /* transform handled by GSAP (magnetic) */
will-change: transform;
}
.rg-btn--grad .rg-btn__label { position: relative; z-index: 1; transition: transform 0.4s var(--rg-ease-out); }
.rg-btn--grad .rg-btn__arrow {
position: relative; z-index: 1; display: inline-flex; align-items: center;
width: 0; overflow: hidden; opacity: 0;
transform: translateX(-6px);
transition: width 0.4s var(--rg-ease-out), opacity 0.4s var(--rg-ease-out), transform 0.4s var(--rg-ease-out);
}
.rg-btn--grad:hover {
box-shadow: 0 1.5vh 4vh rgba(219, 30, 121, 0.55), 0 0 24px rgba(123, 74, 168, 0.5);
}
.rg-btn--grad:hover .rg-btn__label { transform: translateX(-4px); }
.rg-btn--grad:hover .rg-btn__arrow { width: 1.5em; opacity: 1; transform: translateX(0); margin-left: 0.35em; }
@media (max-width: 860px) {
.rg-next { grid-template-columns: 1fr; min-height: auto; }
/* .rg-next__img is height:100vh, which ignored the 60vh wrapper and ate a whole
phone screen before the heading appeared. Constrain the image itself and keep it
anchored to the top so the torso — not the legs — is what you see. */
.rg-next__media { height: 60vh; }
.rg-next__img { height: 60vh; object-position: center top; }
.rg-next__content { padding: 8vh 6vw; text-align: left; }
.rg-next__title { font-size: 11vw; }
.rg-next__sub { font-size: 4vw; }
}
/* Scroll reveal: visible by default (no-JS/SEO safe). GSAP's from() hides then
reveals it on scroll — so no opacity:0 default that could flash or stick. */
[data-rg-scroll-fade] {
will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) { [data-rg-scroll-fade] { opacity: 1 !important; transform: none !important; } }
@media (max-width: 780px) {
.rg-rebels__inner { max-width: 100%; }
.rg-rebels__lead { font-size: 10vw; }
.rg-rebels__figure { height: 80vh; right: 0; top: -8vh; opacity: 0.95; }
.rg-next { border-radius: 8vw 0 0 0; margin-top: -4vh; }
}
/* ================================================================
SECTION 4 — manifesto box (left) + product grid (right)
================================================================ */
.rg-manifesto {
background: transparent; /* let the ambient glows show through */
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 4vw, 4vw); align-items: center;
padding: clamp(4rem, 10vh, 8rem) 4vw;
}
/* NO grey box — manifesto sits on black with a faint violet undertone behind it */
.rg-manifesto__box {
position: relative;
background: transparent;
padding: clamp(1rem, 3vh, 2rem) clamp(0.5rem, 1.5vw, 1.5rem);
}
.rg-manifesto__box::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
left: -2vw; top: 20%; width: 70%; height: 60%;
background: radial-gradient(circle, rgba(123,74,168,0.20), transparent 70%);
filter: blur(55px);
}
.rg-manifesto__text {
position: relative; z-index: 1;
font-weight: 900; text-transform: uppercase;
font-size: clamp(1.5rem, 2.6vw, 2.8rem); line-height: 1.28; letter-spacing: -0.01em;
margin: 0;
/* SCROLL-FILL: dim → white, filling TOP-TO-BOTTOM as you scroll through the block.
JS sets --fill (0→100%) from the element's scroll progress. Soft edge on the
fill front reads as an ink-fill wipe. */
--fill: 0%;
background: linear-gradient(180deg,
var(--rg-white) 0%,
var(--rg-white) var(--fill),
rgba(255,255,255,0.18) calc(var(--fill) + 8%),
rgba(255,255,255,0.18) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: reduce) {
.rg-manifesto__text { --fill: 100%; }
}
/* Right: 2-col product grid, split volt/violet cards */
.rg-manifesto__grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 2vw;
}
.rg-pcard {
position: relative; display: flex; flex-direction: column;
border-radius: var(--rg-r-lg);
background: #111; text-decoration: none;
transition: transform 0.8s var(--rg-ease-out), box-shadow 0.8s var(--rg-ease-out); /* slower lift */
will-change: transform;
}
/* dispersed glow BELOW the card, revealed on hover */
.rg-pcard::after {
content: ""; position: absolute; left: 8%; right: 8%; bottom: -4vh; height: 6vh;
border-radius: 50%; z-index: -1; opacity: 0; pointer-events: none;
filter: blur(22px);
transition: opacity 0.45s var(--rg-ease-out);
}
.rg-pcard--volt::after { background: var(--rg-volt); }
.rg-pcard--violet::after { background: var(--rg-violet); }
/* split background: top half brand color, bottom half its partner */
.rg-pcard--volt { background: linear-gradient(180deg, var(--rg-black) 0% 50%, var(--rg-volt) 50% 100%); box-shadow: 0 0 0 1px rgba(169,207,63,0.4), 0 1vh 3vh rgba(0,0,0,0.5); }
.rg-pcard--violet { background: linear-gradient(180deg, #e9e9ea 0% 50%, var(--rg-violet) 50% 100%); box-shadow: 0 0 0 1px rgba(123,74,168,0.4), 0 1vh 3vh rgba(0,0,0,0.5); }
.rg-pcard__media { position: relative; display: grid; place-items: center; padding: 4vh 1vw; min-height: 30vh; overflow: hidden; border-radius: inherit; }
/* Product name — BLACK title below the bottle, on the colored bottom band */
.rg-pcard__name {
position: absolute; left: 0; right: 0; bottom: 2vh; text-align: center;
color: var(--rg-black);
font-weight: 900; text-transform: uppercase;
font-size: 1.1vw; letter-spacing: 0.03em; line-height: 1.1;
padding: 0 0.5vw;
}
@media (max-width: 980px) { .rg-pcard__name { font-size: 3vw; } }
.rg-pcard__img {
max-height: 28vh; width: auto; object-fit: contain;
filter: drop-shadow(0 1vh 2vh rgba(0,0,0,0.5));
transition: transform 0.9s var(--rg-ease-out), filter 0.9s var(--rg-ease-out); /* slower bottle */
will-change: transform;
}
/* HOVER: card lifts, glow disperses below, bottle pops up + bigger */
.rg-pcard:hover {
transform: translateY(-1.2vh); /* smaller, gentler lift */
box-shadow: 0 0 0 1px var(--rg-volt), 0 3vh 6vh rgba(0,0,0,0.6);
}
.rg-pcard:hover::after { opacity: 0.55; }
.rg-pcard:hover .rg-pcard__img {
transform: translateY(-1vh) scale(1.06);
filter: drop-shadow(0 2vh 3vh rgba(0,0,0,0.6));
}
@media (prefers-reduced-motion: reduce) {
.rg-pcard, .rg-pcard__img { transition: none; }
.rg-pcard:hover { transform: none; }
.rg-pcard:hover .rg-pcard__img { transform: none; }
}
@media (max-width: 980px) {
.rg-manifesto { grid-template-columns: 1fr; gap: 6vh; }
.rg-manifesto__text { font-size: 5vw; }
}
/* ================================================================
SECTION 5 — bento continuation: pack cards + trending + green CTA
================================================================ */
.rg-bento {
background: var(--rg-black);
display: grid;
/* 4 columns. Top row: col 1 EMPTY, cols 2-4 = pack | pack | trending.
Bottom row: CTA spans all 4 columns full-width. The woman overflows UP
from the CTA into the empty top-left cell. */
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
". pack1 pack2 trend"
"cta cta cta .";
gap: 2vw;
padding: 0 4vw 10vh;
align-items: stretch;
}
.rg-bento__pack:nth-of-type(1) { grid-area: pack1; }
.rg-bento__pack:nth-of-type(2) { grid-area: pack2; }
.rg-bento__trending { grid-area: trend; }
.rg-bento__cta { grid-area: cta; }
/* Trending tile — purple, heading + pack image */
.rg-bento__trending {
position: relative; display: flex; flex-direction: column; justify-content: space-between;
background: var(--rg-violet); border-radius: var(--rg-r-lg);
padding: 4vh 2.5vw; text-decoration: none; overflow: hidden;
transition: transform 0.8s var(--rg-ease-out), box-shadow 0.8s var(--rg-ease-out);
}
.rg-bento__trending-title {
color: var(--rg-black); font-weight: 900; text-transform: uppercase;
font-size: 2.6vw; line-height: 1.02; margin: 0; letter-spacing: -0.01em;
}
.rg-bento__trending-img { max-height: 24vh; width: auto; align-self: center; margin-top: 2vh;
filter: drop-shadow(0 1.5vh 3vh rgba(0,0,0,0.4)); transition: transform 0.8s var(--rg-ease-out); }
.rg-bento__trending:hover { transform: translateY(-1.2vh); box-shadow: 0 3vh 6vh rgba(0,0,0,0.5); }
.rg-bento__trending:hover .rg-bento__trending-img { transform: translateY(-0.8vh) scale(1.05); }
/* Green CTA tile — full-width. Woman pinned bottom-left, overflows UP into the
empty top-left cell. Headline + button sit to the right of her. */
.rg-bento__cta {
position: relative;
background: var(--rg-volt); border-radius: var(--rg-r-lg);
overflow: visible; /* let the woman rise above the box */
min-height: 42vh;
display: flex; align-items: center;
padding: 5vh 4vw 5vh 26vw; /* left padding clears the woman's column */
}
/* The figure: absolutely pinned to the box's bottom-left, tall enough to peek up */
.rg-bento__cta-figure {
position: absolute; left: 2vw; bottom: 0; z-index: 2;
width: auto; height: 62vh; /* taller than the box → torso/head peek above */
object-fit: contain; object-position: bottom;
pointer-events: none;
}
.rg-bento__cta-body { display: flex; flex-direction: column; gap: 3.5vh; max-width: 60ch; }
.rg-bento__cta-title {
color: var(--rg-black); font-weight: 900; text-transform: uppercase;
font-size: 3vw; line-height: 1.05; margin: 0; letter-spacing: -0.01em;
}
.rg-bento__cta-btn { align-self: flex-start; }
@media (max-width: 980px) {
.rg-bento {
grid-template-columns: 1fr 1fr;
grid-template-areas: "pack1 pack2" "trend trend" "cta cta";
}
.rg-bento__cta {
flex-direction: column; align-items: stretch; padding: 5vh 6vw;
min-height: auto; overflow: hidden;
}
.rg-bento__cta-figure { position: relative; left: auto; height: 40vh; align-self: center; }
.rg-bento__cta-body { max-width: 100%; }
.rg-bento__trending-title, .rg-bento__cta-title { font-size: 6vw; }
}
/* ================================================================
SECTION 6 — Products in Detail (vertical tabs)
================================================================ */
.rg-detail { background: var(--rg-black); padding: 8vh 0 12vh; }
.rg-detail__title {
color: var(--rg-violet); font-weight: 900; text-transform: uppercase;
font-size: 6vw; line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 6vh;
}
.rg-detail__wrap { display: grid; grid-template-columns: 22vw 1fr; gap: 4vw; align-items: start; }
/* vertical tab buttons — sticky while scrolling the content, releases at section end */
.rg-detail__tabs {
display: flex; flex-direction: column; gap: 2vh;
position: sticky; top: 14vh; /* top offset (clears the header) = padding on scroll */
align-self: start; /* required so sticky works inside the grid track */
}
.rg-detail__tab {
appearance: none; cursor: pointer; text-align: left;
padding: 1.8vh 1.4vw; border-radius: var(--rg-r-pill);
font-family: "Montserrat", sans-serif; font-weight: 800; text-transform: uppercase;
font-size: clamp(0.85rem, 1vw, 1rem); letter-spacing: 0.02em;
background: rgba(255,255,255,0.04); color: var(--rg-ink-muted);
border: 1px solid rgba(255,255,255,0.08);
transition: background var(--rg-dur) var(--rg-ease-out), color var(--rg-dur) var(--rg-ease-out), border-color var(--rg-dur) var(--rg-ease-out);
}
.rg-detail__tab:hover { color: var(--rg-white); border-color: rgba(169,207,63,0.4); }
.rg-detail__tab.is-active {
background: var(--rg-volt); color: var(--rg-black); border-color: var(--rg-volt);
}
/* panels */
.rg-detail__panel { display: block; }
.rg-detail__panel[hidden] { display: none; }
.rg-detail__heading {
color: var(--rg-volt); font-weight: 900; text-transform: uppercase;
font-size: 2vw; letter-spacing: 0.01em; margin: 0 0 4vh;
}
.rg-detail__media { margin: 0 0 4vh; }
.rg-detail__img { max-width: 30vw; height: auto; border-radius: var(--rg-r-md); }
/* body copy: sentence case, lighter weight, more line-height → readable + calm */
.rg-detail__copy { color: var(--rg-ink-muted); font-weight: 500; }
.rg-detail__copy p { font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.65; letter-spacing: 0; margin: 0 0 3.5vh; max-width: 60ch; }
.rg-detail__copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8vh; }
.rg-detail__copy li { position: relative; padding-left: 1.8rem; font-size: clamp(0.95rem, 1.05vw, 1.1rem); line-height: 1.5; color: var(--rg-white); font-weight: 600; }
.rg-detail__copy li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--rg-volt); }
/* crossfade when switching panels (JS toggles hidden + is-active) */
.rg-detail__panel.is-active { animation: rg-detail-in 0.5s var(--rg-ease-out); }
@keyframes rg-detail-in { from { opacity: 0; transform: translateY(2vh); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rg-detail__panel.is-active { animation: none; } }
@media (max-width: 900px) {
.rg-detail__title { font-size: 11vw; }
.rg-detail__wrap { grid-template-columns: 1fr; gap: 5vh; }
.rg-detail__tabs { flex-direction: row; flex-wrap: wrap; position: static; }
.rg-detail__tab { font-size: 3.4vw; padding: 1.6vh 4vw; }
.rg-detail__heading { font-size: 6vw; }
.rg-detail__img { max-width: 80vw; }
.rg-detail__copy p, .rg-detail__copy li { font-size: 4vw; }
.rg-detail__copy li { padding-left: 6vw; }
}
/* ================================================================
SECTION 7 — "Top of the Range" product carousel
================================================================ */
.rg-carousel { background: transparent; padding: 8vh 0 16vh; overflow: hidden; } /* glows show through */
.rg-carousel__head {
display: flex; align-items: flex-end; justify-content: space-between;
padding: 0 4vw; margin-bottom: 5vh; gap: 2vw;
}
.rg-carousel__title {
color: var(--rg-volt); font-weight: 900; text-transform: uppercase;
font-size: 5vw; line-height: 0.95; letter-spacing: -0.02em; margin: 0;
}
.rg-carousel__nav { display: flex; gap: 1vw; flex: 0 0 auto; }
.rg-carousel__arrow {
width: 3.4vw; height: 3.4vw; min-width: 44px; min-height: 44px;
display: grid; place-items: center; cursor: pointer;
border-radius: var(--rg-r-pill); border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.04);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
color: var(--rg-volt);
transition: transform var(--rg-dur) var(--rg-ease-out), background var(--rg-dur) var(--rg-ease-out), color var(--rg-dur) var(--rg-ease-out), border-color var(--rg-dur) var(--rg-ease-out);
}
.rg-carousel__arrow:hover { background: var(--rg-volt); color: var(--rg-black); transform: translateY(-0.4vh); }
/* Viewport: clips the infinite track. Left offset aligns to gutter; the loop
itself provides the endless peek so a card is always partly visible at the edge. */
/* Splide manages the track/list; give it vertical room for the card glow + lift */
.rg-carousel__splide { padding: 3vh 0 9vh; cursor: grab; }
.rg-carousel__splide.is-dragging, .rg-carousel__splide .splide__track:active { cursor: grabbing; }
.rg-carousel__splide .splide__track { overflow: visible; } /* let glow/lift show, not clipped */
.rg-carousel__splide .splide__list { align-items: stretch; }
.rg-carousel__splide .splide__slide { height: auto; display: flex; }
.rg-carousel__splide .splide__slide .rg-pcarousel-card { width: 100%; }
.rg-pcarousel-card { scroll-snap-align: start; }
/* Streamlined e-commerce card */
.rg-pcarousel-card {
width: 100%; /* Splide's slide controls the outer width */
background: rgba(255,255,255,0.04); /* dark glass (was solid #141414) */
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border-radius: var(--rg-r-lg);
border: 1px solid rgba(255,255,255,0.08);
display: flex; flex-direction: column; overflow: visible; position: relative;
transition: transform 0.5s var(--rg-ease-out), box-shadow 0.5s var(--rg-ease-out), border-color 0.5s var(--rg-ease-out);
will-change: transform;
}
.rg-pcarousel-card:hover { border-color: rgba(169,207,63,0.4); }
/* EQUAL-HEIGHT cards: body fills remaining height so price + button align across
the row even when one title wraps to more lines. */
.rg-pcarousel-card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.rg-pcarousel-card__name { min-height: 2.6em; } /* room for up to 2 title lines */
.rg-pcarousel-card__price { margin-top: auto; } /* push price + CTA to the bottom */
/* dispersed glow beneath */
.rg-pcarousel-card::after {
content: ""; position: absolute; left: 10%; right: 10%; bottom: -3vh; height: 5vh;
border-radius: 50%; z-index: -1; opacity: 0; filter: blur(24px);
background: var(--rg-volt); transition: opacity 0.5s var(--rg-ease-out);
}
/* whole card floats up on hover (matches the bento tiles) */
.rg-pcarousel-card:hover { transform: translateY(-1.6vh); box-shadow: 0 3vh 6vh rgba(0,0,0,0.6); }
.rg-pcarousel-card:hover::after { opacity: 0.55; }
.rg-pcarousel-card__media {
position: relative; border-radius: var(--rg-r-lg) var(--rg-r-lg) 0 0; overflow: hidden;
aspect-ratio: 1 / 1;
/* FROSTED LIGHT-GLASS shelf: a soft luminous light panel (brighter top → cooler
bottom) so white-background product photos melt INTO it as a lit glass surface
rather than reading as a pasted-in white rectangle. */
background:
radial-gradient(80% 65% at 50% 38%, #ffffff 0%, #f4f5f7 55%, #e7e9ee 100%);
}
/* feather the edges + a soft floor shadow so the product sits ON the shelf */
.rg-pcarousel-card__media::before {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 -2.2rem 2.5rem -1.5rem rgba(120,120,140,0.35), /* soft floor */
inset 0 0 0 1px rgba(255,255,255,0.5); /* glassy rim */
background: radial-gradient(70% 55% at 50% 42%, transparent 60%, rgba(200,202,212,0.25) 100%);
}
.rg-pcarousel-card__imglink { display: block; width: 100%; height: 100%; }
/* STRETCHED LINK: the NAME anchor (which lives in __body, OUTSIDE the media's
overflow:hidden) covers the WHOLE card so clicking anywhere goes to the product.
The old approach used __imglink::after, but __imglink sits inside __media
(overflow:hidden) which CLIPPED the hit-area to just the image. Using the name
anchor — a child of the card, not the clipped media — spans the full card.
Interactive controls (wishlist, add-to-cart, view-cart) are raised above it. */
/* The anchor + __name stay STATIC (unpositioned) so the ::after's containing block
resolves UP to .rg-pcarousel-card (the only positioned ancestor) → covers the
whole card, not just the name. */
.rg-pcarousel-card__name, .rg-pcarousel-card__name a { position: static; }
.rg-pcarousel-card__name a::after {
content: ""; position: absolute; inset: 0; z-index: 1;
}
/* interactive controls raised ABOVE the stretched link so they stay clickable */
.rg-pcarousel-card__wish,
.rg-pcarousel-card__cta,
.rg-pcarousel-card .added_to_cart { position: relative; z-index: 3; }
.rg-pcarousel-card__img {
position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 12%;
transition: opacity 0.5s var(--rg-ease-out), transform 0.6s var(--rg-ease-out);
}
.rg-pcarousel-card__img--hover { opacity: 0; }
/* hover: zoom the main + crossfade to the gallery image */
.rg-pcarousel-card:hover .rg-pcarousel-card__img--main { opacity: 0; transform: scale(1.12); }
.rg-pcarousel-card:hover .rg-pcarousel-card__img--hover { opacity: 1; transform: scale(1.08); }
/* if no hover image, the main just zooms (stays visible) */
.rg-pcarousel-card__media:not(:has(.rg-pcarousel-card__img--hover)):hover .rg-pcarousel-card__img--main,
.rg-pcarousel-card:hover .rg-pcarousel-card__img--main:only-child { opacity: 1; transform: scale(1.12); }
/* wishlist heart, top-right */
.rg-pcarousel-card__wish {
position: absolute; top: 1vh; right: 1vh; z-index: 3; /* above the media overlay */
width: 2.4vw; height: 2.4vw; min-width: 38px; min-height: 38px;
display: grid; place-items: center; cursor: pointer;
border-radius: var(--rg-r-pill); border: 0;
background: rgba(255,255,255,0.85); color: var(--rg-violet); backdrop-filter: blur(6px);
transition: background var(--rg-dur) var(--rg-ease-out), color var(--rg-dur) var(--rg-ease-out), transform var(--rg-dur) var(--rg-ease-out);
}
.rg-pcarousel-card__wish:hover { background: var(--rg-violet); color: #fff; transform: scale(1.1); }
.rg-pcarousel-card__wish.is-active { color: var(--rg-violet); }
.rg-pcarousel-card__wish.is-active svg { fill: var(--rg-violet); stroke: var(--rg-violet); }
.rg-pcarousel-card__body { padding: 2.4vh 1.4vw 2.4vh; display: flex; flex-direction: column; gap: 1.4vh; flex: 1 1 auto; }
.rg-pcarousel-card__name { margin: 0; font-size: 1.15vw; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
.rg-pcarousel-card__name a { color: #fff; }
.rg-pcarousel-card__name a:hover { color: var(--rg-volt); }
.rg-pcarousel-card__price { color: var(--rg-volt); font-weight: 900; font-size: 1.4vw; }
.rg-pcarousel-card__price del { color: var(--rg-ink-muted); font-weight: 600; margin-right: 0.4em; font-size: 0.8em; }
.rg-pcarousel-card__price ins { text-decoration: none; }
/* add-to-cart button — volt pill, our style */
.rg-pcarousel-card__cta.button {
margin-top: 0.6vh; align-self: stretch; text-align: center;
background: var(--rg-volt) !important; color: var(--rg-black) !important;
font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.02em;
border-radius: var(--rg-r-pill) !important; padding: 1.4vh 1.5vw !important; border: 0 !important;
transition: transform var(--rg-dur-fast) var(--rg-ease-out), box-shadow var(--rg-dur) var(--rg-ease-out) !important;
}
.rg-pcarousel-card__cta.button:hover { transform: translateY(-2px); box-shadow: var(--rg-shadow-glow); }
.rg-pcarousel-card__cta.loading { opacity: 0.7; }
.rg-pcarousel-card__cta.added::after { content: " ✓"; }
/* WC "View cart" link (appears after AJAX add) → styled as a proper Rogue button.
Applies to ALL product cards (carousels, shop grid, related). */
.rg-pcarousel-card__body .added_to_cart,
.products .added_to_cart {
display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
margin-top: 0.6vh; align-self: stretch; text-align: center; width: 100%;
background: transparent; color: var(--rg-white);
border: 1px solid rgba(255,255,255,0.25); border-radius: var(--rg-r-pill);
padding: 1.1vh 1.5vw; text-decoration: none;
font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8rem;
transition: background var(--rg-dur) var(--rg-ease-out), color var(--rg-dur) var(--rg-ease-out), border-color var(--rg-dur) var(--rg-ease-out), transform var(--rg-dur-fast) var(--rg-ease-out);
animation: rg-viewcart-in 0.4s var(--rg-ease-out) both;
}
.rg-pcarousel-card__body .added_to_cart:hover,
.products .added_to_cart:hover { background: var(--rg-violet); color: #fff; border-color: var(--rg-violet); transform: translateY(-2px); }
@keyframes rg-viewcart-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
.rg-carousel__title { font-size: 10vw; }
.rg-pcarousel-card { flex-basis: 70vw; }
.rg-pcarousel-card__name { font-size: 4.4vw; }
.rg-pcarousel-card__price { font-size: 5.4vw; }
.rg-carousel__arrow { width: 12vw; height: 12vw; }
}
/* ---- Generic panels / cards (used sparingly per design rules) ---- */
.rg-panel {
background: var(--rg-glass-bg);
-webkit-backdrop-filter: var(--rg-blur); backdrop-filter: var(--rg-blur);
border: 1px solid var(--rg-glass-brd);
border-radius: var(--rg-r-lg); padding: clamp(1.25rem, 3vw, 2rem);
box-shadow: var(--rg-shadow-1);
}
/* ---- Footer — 4 columns: brand+socials+newsletter | policies | links | contacts ---- */
.rg-site-footer {
position: relative;
/* DARK GLASS panel — frosted translucent over the ambient glows (was solid black) */
background: rgba(255, 255, 255, 0.025);
-webkit-backdrop-filter: blur(14px) saturate(120%);
backdrop-filter: blur(14px) saturate(120%);
/* almost full-width with a small inset gutter each side */
margin: clamp(2rem, 6vh, 5rem) clamp(0.75rem, 1.5vw, 1.5rem) 0;
/* curved top corners + soft violet glow along the rising edge */
border-radius: clamp(2rem, 4vw, 4vw) clamp(2rem, 4vw, 4vw) 0 0;
box-shadow: 0 -1.5vh 5vh -1.5vh rgba(123, 74, 168, 0.55); /* top-only violet glow */
}
/* thin lit line tracing the curved top edge for extra definition */
.rg-site-footer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: clamp(2rem, 4vw, 4vw);
border-radius: inherit;
border-top: 1px solid rgba(123, 74, 168, 0.5);
border-left: 1px solid rgba(123, 74, 168, 0.25);
border-right: 1px solid rgba(123, 74, 168, 0.25);
pointer-events: none;
}
.rg-site-footer__inner {
display: grid;
grid-template-columns: 1.2fr 1fr 0.85fr 1.4fr; /* wider Contacts col so the email fits on one line */
gap: clamp(1.5rem, 4vw, 4rem);
padding-block: clamp(3rem, 8vh, 6rem) clamp(2rem, 5vh, 4rem);
}
.rg-footer-col { min-width: 0; }
/* brand column */
.rg-footer-logo { display: inline-block; }
.rg-footer-logo__img { display: block; width: clamp(160px, 14vw, 240px); height: auto; }
.rg-footer-follow {
margin: clamp(1.2rem, 3vh, 2rem) 0 1rem;
font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
font-size: clamp(0.85rem, 1vw, 1rem); color: var(--rg-white);
}
.rg-footer-socials { list-style: none; display: flex; gap: 0.7rem; margin: 0 0 clamp(1.5rem, 4vh, 2.5rem); padding: 0; }
.rg-footer-social {
width: 2.8rem; height: 2.8rem;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 12px;
/* glass tile with a violet accent (was a solid violet block) */
background: rgba(255, 255, 255, 0.05); color: var(--rg-white);
border: 1px solid rgba(123, 74, 168, 0.4);
transition: background var(--rg-dur) var(--rg-ease-out), color var(--rg-dur) var(--rg-ease-out), border-color var(--rg-dur) var(--rg-ease-out), transform var(--rg-dur) var(--rg-ease-out);
}
.rg-footer-social:hover { background: var(--rg-violet); color: #fff; border-color: var(--rg-violet); transform: translateY(-2px); }
/* newsletter — dark glass (was a light-grey input + solid violet button) */
.rg-footer-news {
display: flex; flex-direction: column;
max-width: 22rem; overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.10);
}
.rg-footer-news__input {
border: 0; padding: 0.9rem 1rem;
background: rgba(255, 255, 255, 0.05); color: var(--rg-white);
font: inherit; font-size: 0.95rem;
}
.rg-footer-news__input::placeholder { color: var(--rg-ink-muted); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.85rem; }
.rg-footer-news__btn {
border: 0; cursor: pointer;
padding: 0.85rem 1rem;
background: var(--rg-volt); color: var(--rg-black);
font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
transition: background var(--rg-dur) var(--rg-ease-out), color var(--rg-dur) var(--rg-ease-out);
}
.rg-footer-news__btn:hover { background: var(--rg-violet); color: #fff; }
/* column headings + lists */
.rg-footer-heading {
margin: 0 0 clamp(1rem, 2.5vh, 1.6rem);
font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
font-size: clamp(1rem, 1.25vw, 1.3rem);
color: var(--rg-violet);
}
.rg-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.6rem, 1.6vh, 1rem); }
.rg-footer-list a {
color: var(--rg-white); text-decoration: none;
font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em;
font-size: clamp(0.85rem, 1vw, 1rem);
transition: color var(--rg-dur) var(--rg-ease-out);
}
.rg-footer-list a:hover { color: var(--rg-volt); }
/* contacts */
.rg-footer-contacts .rg-footer-email { white-space: nowrap; } /* keep email on one line */
@media (max-width: 1200px) {
.rg-footer-contacts .rg-footer-email { white-space: normal; word-break: break-word; }
}
.rg-footer-address {
color: var(--rg-white);
font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em;
font-size: clamp(0.85rem, 1vw, 1rem); line-height: 1.4;
}
.rg-site-footer__legal {
padding-block: clamp(1.5rem, 4vh, 2.5rem);
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: var(--rg-ink-muted); font-size: 0.9rem;
}
/* responsive */
@media (max-width: 960px) {
.rg-site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.rg-site-footer__inner { grid-template-columns: 1fr; }
}
/* ---- Test-mode banner (matches reference: violet bar, volt-green uppercase) ---- */
.rg-testbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--rg-z-toast);
/* dark glass */
background: rgba(14, 14, 16, 0.55);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
overflow: hidden; /* clip the scrolling track */
padding: 0.7em 0; line-height: 1.2;
/* subtle volt edge-glow bleeding up from the bottom */
background-image: radial-gradient(120% 140% at 50% 120%, rgba(169,207,63,0.10), transparent 60%);
}
/* the moving belt — two full copies scroll left, seamless loop */
.rg-testbar__track {
display: flex; align-items: center; width: max-content;
white-space: nowrap;
animation: rg-marquee 28s linear infinite;
}
.rg-testbar:hover .rg-testbar__track { animation-play-state: paused; } /* pause on hover */
.rg-testbar__item {
color: var(--rg-volt);
font-weight: 800; text-transform: uppercase;
letter-spacing: 0.08em; font-size: clamp(0.72rem, 1.5vw, 0.9rem);
padding: 0 1.4rem;
}
.rg-testbar__sep {
color: rgba(255, 255, 255, 0.35);
font-size: 0.7em; transform: translateY(-1px);
}
@keyframes rg-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* 4 items = 2 logical copies → -50% is one full loop */
}
@media (prefers-reduced-motion: reduce) {
.rg-testbar__track { animation: none; justify-content: center; width: 100%; }
.rg-testbar__item:nth-child(n+3), .rg-testbar__sep { display: none; }
}
/* ---- Custom cursor: dot + soft blurred volt glow ---- */
.rg-cursor {
position: fixed; top: 0; left: 0; z-index: 10000; /* above drawers/overlays */
pointer-events: none; opacity: 0;
transition: opacity 0.3s ease;
will-change: transform;
}
.rg-cursor.is-active { opacity: 1; }
.rg-cursor__dot {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 8px; height: 8px; border-radius: 50%;
background: var(--rg-volt); /* volt green by default */
transition: width 0.25s var(--rg-ease-out), height 0.25s var(--rg-ease-out), background 0.25s ease;
}
/* Over a volt-green element → dot + glow flip to PURPLE (stays visible) */
.rg-cursor.is-on-volt .rg-cursor__dot { background: var(--rg-violet); }
.rg-cursor.is-on-volt .rg-cursor__glow {
background: radial-gradient(circle, rgba(123,74,168,0.5) 0%, rgba(123,74,168,0.2) 36%, rgba(123,74,168,0) 73%);
}
.rg-cursor__glow {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 120px; height: 120px; border-radius: 50%; /* big, dispersed glow */
background: radial-gradient(circle, rgba(169,207,63,0.45) 0%, rgba(169,207,63,0.18) 35%, rgba(169,207,63,0) 72%);
filter: blur(22px); /* heavily blurred / soft */
transition: width 0.35s var(--rg-ease-out), height 0.35s var(--rg-ease-out), opacity 0.3s ease;
}
/* Hover over clickable things → dot grows + glow intensifies + spreads (keeps its current color) */
.rg-cursor.is-hover .rg-cursor__dot { width: 14px; height: 14px; }
.rg-cursor.is-hover .rg-cursor__glow {
width: 190px; height: 190px;
background: radial-gradient(circle, rgba(169,207,63,0.6) 0%, rgba(169,207,63,0.22) 38%, rgba(169,207,63,0) 74%);
filter: blur(28px);
}
/* Hide the custom cursor on touch / coarse pointers (no mouse) */
@media (hover: none), (pointer: coarse) {
.rg-cursor { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .rg-cursor { display: none !important; } }
/* On fine-pointer devices, hide the native arrow cursor everywhere so only ours shows */
@media (hover: hover) and (pointer: fine) {
html.rg-cursor-on, html.rg-cursor-on * { cursor: none !important; }
}
/* ---- Reveal (progressive-enhancement: visible by default) ---- */
.rg-reveal { opacity: 1; }
.js .rg-reveal { opacity: 0; transform: translateY(24px); }
/* ============================================================
SECTION 8: FAQ — accordion (left) + "Why choose Rogue" (right)
============================================================ */
.rg-faq {
padding-block: clamp(4rem, 10vh, 9rem);
/* Match the black carousel section directly above — was --rg-charcoal (#121212),
which read as a lighter band next to the pure-black section. */
background: var(--rg-black);
/* NO overflow:hidden here — it would kill position:sticky on the media column.
The girl's overflow is already clipped by .rg-faq__col--media's own overflow. */
}
.rg-faq__wrap {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: clamp(2rem, 6vw, 6vw);
align-items: start; /* required so the media column can be sticky */
}
/* REVERSED variant (PDP "Why Choose Rogue"): media is col 1 (left), accordion col 2
(right). The media is DOM-first here, so no order-swap needed — just give the
accordion the wider share so the copy has room. */
.rg-faq--reverse .rg-faq__wrap { grid-template-columns: 0.95fr 1.05fr; }
/* ---- left: accordion ---- */
.rg-faq__eyebrow {
margin: 0 0 0.6em;
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
font-size: clamp(0.72rem, 0.9vw, 0.85rem);
color: var(--rg-volt);
}
.rg-faq__title {
margin: 0 0 clamp(1.6rem, 4vh, 3rem);
font-weight: 900;
line-height: 0.98;
letter-spacing: -0.01em;
text-transform: uppercase;
font-size: clamp(2rem, 4.4vw, 3.4rem);
color: var(--rg-white);
}
.rg-faq__list { display: flex; flex-direction: column; gap: 1.1vh; }
.rg-faq__item {
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--rg-r-lg);
background: rgba(255, 255, 255, 0.03);
overflow: hidden;
transition: border-color var(--rg-dur) var(--rg-ease-out),
background var(--rg-dur) var(--rg-ease-out);
}
.rg-faq__item.is-open {
border-color: rgba(169, 207, 63, 0.45);
background: rgba(169, 207, 63, 0.06);
}
.rg-faq__q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
padding: clamp(1rem, 2.4vh, 1.6rem) clamp(1.2rem, 2.6vw, 2rem);
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
color: var(--rg-white);
font: inherit;
}
.rg-faq__q-text {
font-weight: 800;
letter-spacing: 0.01em;
font-size: clamp(1rem, 1.35vw, 1.22rem);
line-height: 1.25;
text-transform: uppercase;
}
.rg-faq__item.is-open .rg-faq__q-text { color: var(--rg-volt); }
/* plus/minus morph icon */
.rg-faq__icon {
position: relative;
flex: 0 0 auto;
width: 2.6vh; height: 2.6vh;
min-width: 22px; min-height: 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
transition: background var(--rg-dur) var(--rg-ease-out);
}
.rg-faq__item.is-open .rg-faq__icon { background: var(--rg-volt); }
.rg-faq__icon span {
position: absolute;
top: 50%; left: 50%;
width: 44%; height: 2px;
background: var(--rg-white);
border-radius: 2px;
transform: translate(-50%, -50%);
transition: transform var(--rg-dur) var(--rg-ease-out),
background var(--rg-dur) var(--rg-ease-out);
}
.rg-faq__icon span:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.rg-faq__item.is-open .rg-faq__icon span { background: var(--rg-black); }
.rg-faq__item.is-open .rg-faq__icon span:last-child { transform: translate(-50%, -50%) rotate(0deg); }
/* answer panel — height animates via max-height */
.rg-faq__a {
max-height: 0;
overflow: hidden;
transition: max-height var(--rg-dur) var(--rg-ease-out);
}
.rg-faq__a[hidden] { display: block; } /* keep in flow so it can animate */
.rg-faq__item.is-open .rg-faq__a { max-height: 40vh; }
.rg-faq__a-inner {
margin: 0;
padding: 0 clamp(1.2rem, 2.6vw, 2rem) clamp(1.1rem, 2.4vh, 1.6rem);
color: var(--rg-ink-muted);
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
line-height: 1.6;
}
/* ---- right: image with glow + faded wordmark ----
She sits RIGHT-aligned (pushed off to the right, clear of the wordmark/text
beneath her) inside a soft glowing container so she doesn't read as cut-off. */
.rg-faq__col--media {
position: relative;
display: flex;
align-items: flex-end;
justify-content: flex-end; /* push her to the RIGHT edge */
/* STICKY — scrolls with the page but sticks in view while the accordion content
scrolls past on the left, releasing at the section end. Same as Products-in-Detail.
Fixed height (not accordion-tracking) so it never jumps. */
position: sticky;
top: 14vh; /* clears the fixed header */
align-self: start; /* required for sticky inside the grid track */
height: 58vh;
padding: clamp(1.5rem, 3vw, 3rem); /* breathing room inside the box */
/* Rounded DARK container with a soft volt-green OUTER GLOW — no crisp border. */
background: var(--rg-black);
border-radius: var(--rg-r-xl);
box-shadow:
0 0 70px 6px rgba(169, 207, 63, 0.35), /* volt outer glow */
0 3vh 7vh rgba(0, 0, 0, 0.55); /* depth drop-shadow */
overflow: hidden; /* clip her to the rounded container */
}
/* Soft radial glow behind her — this is the "container glow" so she isn't cut off */
.rg-faq__blob {
position: absolute;
z-index: 0;
/* anchored to the RIGHT, roughly where she stands */
right: -6%;
bottom: -4%;
width: 78%;
height: 92%;
background:
radial-gradient(52% 50% at 62% 50%, rgba(169, 207, 63, 0.20), rgba(169, 207, 63, 0) 68%),
radial-gradient(58% 58% at 55% 46%, rgba(123, 74, 168, 0.55), rgba(123, 74, 168, 0) 72%);
filter: blur(10px);
border-radius: 46% 54% 52% 48% / 54% 48% 52% 46%;
}
.rg-faq__wordmark {
position: absolute;
top: clamp(1.5rem, 3vw, 3rem); /* clear the container padding — not cramped */
left: clamp(1.5rem, 3vw, 3rem);
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.02em;
font-weight: 900;
line-height: 0.86;
letter-spacing: -0.01em;
text-transform: uppercase;
font-size: clamp(2.4rem, 6vw, 5.4rem);
color: rgba(123, 74, 168, 0.85);
pointer-events: none;
user-select: none;
}
.rg-faq__wordmark-brand {
font-family: inherit;
text-transform: none;
font-style: italic;
color: var(--rg-violet);
}
.rg-faq__img {
position: relative;
z-index: 2;
display: block;
width: auto;
/* Break past the container padding so she stands full-height edge-to-edge;
the padding is only there to give the wordmark breathing room. */
margin: 0 calc(-1 * clamp(1.5rem, 3vw, 3rem)) calc(-1 * clamp(1.5rem, 3vw, 3rem)) 0;
max-width: calc(100% + clamp(1.5rem, 3vw, 3rem));
max-height: 100%; /* fill the container, whatever height it tracks to */
height: auto;
object-fit: contain;
filter: drop-shadow(0 3vh 5vh rgba(0, 0, 0, 0.5));
will-change: transform;
/* horizontal bob is driven by GSAP (data-rg-faq-bob) — see main.js */
}
/* ---- responsive ---- */
@media (max-width: 900px) {
/* `.rg-faq--reverse .rg-faq__wrap` (two columns) out-specifies a bare
`.rg-faq__wrap`, so the reversed variant — "Why choose Rogue" on the PDP — stayed
side-by-side on phones and squeezed the figure into a sliver. Match specificity. */
.rg-faq__wrap,
.rg-faq--reverse .rg-faq__wrap { grid-template-columns: 1fr; }
.rg-faq__col--media {
order: -1;
min-height: 46vh;
justify-content: center; /* re-center on mobile */
margin-right: 0;
}
.rg-faq__img { max-width: 100%; margin-right: 0; max-height: 56vh; }
.rg-faq__blob { right: 0; width: 90%; }
.rg-faq__wordmark { inset: 3% auto auto 4%; font-size: clamp(2rem, 12vw, 3.4rem); }
}
/* ============================================================
SECTION 9: "Simple & Secure" — glowing gradient panel + 2x2 grid
============================================================ */
.rg-ss {
padding-block: clamp(4rem, 10vh, 9rem);
background: transparent;
}
/* ---- ONE glowing gradient panel: heading + intro + icon grid ----
Volt glow lives near the TOP and blends into black over a FIXED distance
(not a % of height), so it stays consistent no matter how tall the panel is. */
.rg-ss__panel {
position: relative;
border-radius: var(--rg-r-xl);
padding: clamp(2.5rem, 7vh, 6rem) clamp(1.8rem, 5vw, 5rem) clamp(3rem, 8vh, 6rem);
background: rgba(255, 255, 255, 0.03);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.rg-ss__panel::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
left: 50%; top: -20%; transform: translateX(-50%);
width: 70%; height: 60%;
background: radial-gradient(circle, rgba(169,207,63,0.18), transparent 70%);
filter: blur(40px);
}
.rg-ss__panel > * { position: relative; z-index: 1; }
.rg-ss__title {
margin: 0 0 clamp(1.2rem, 3vh, 2rem);
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.01em;
text-transform: uppercase;
font-size: clamp(2.6rem, 7vw, 6rem);
color: var(--rg-volt);
text-align: center;
}
.rg-ss__intro {
max-width: 62ch;
margin: 0 auto; /* centered block */
font-weight: 600;
text-transform: none; /* sentence case — lighter, more readable */
letter-spacing: 0;
line-height: 1.6;
font-size: clamp(0.85rem, 1vw, 1rem);
color: rgba(255,255,255,0.85);
text-align: center;
}
.rg-ss__intro-accent { color: var(--rg-volt); font-weight: 700; }
.rg-ss__intro-accent { color: var(--rg-volt); }
/* ---- 2x2 feature grid ---- */
.rg-ss__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(0.8rem, 1.5vw, 1.5rem);
margin-top: clamp(2rem, 5vh, 3.5rem);
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 0.5rem;
}
.rg-ss__grid::-webkit-scrollbar { display: none; }
.rg-ss__card {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
gap: 0.8rem;
min-width: 12rem;
padding: clamp(0.9rem, 1.6vh, 1.3rem) clamp(0.9rem, 1.4vw, 1.3rem);
border-radius: var(--rg-r-lg);
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
transition: border-color var(--rg-dur) var(--rg-ease-out);
}
.rg-ss__card:hover { border-color: rgba(169,207,63,0.4); }
.rg-ss__card-txt { display: flex; flex-direction: column; min-width: 0; }
.rg-ss__icon {
display: inline-flex;
width: clamp(28px, 2.4vw, 36px);
height: clamp(28px, 2.4vw, 36px);
color: var(--rg-volt);
transition: transform var(--rg-dur) var(--rg-ease-out),
filter var(--rg-dur) var(--rg-ease-out);
}
.rg-ss__icon svg { width: 100%; height: 100%; display: block; }
.rg-ss__card:hover .rg-ss__icon {
transform: translateY(-0.6vh) scale(1.05);
filter: drop-shadow(0 0 14px rgba(169, 207, 63, 0.6));
}
.rg-ss__card-title {
margin: 0.2rem 0 0;
font-weight: 800;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: 0.01em;
font-size: clamp(0.78rem, 0.95vw, 0.95rem);
color: var(--rg-violet);
}
.rg-ss__card-body {
margin: 0;
max-width: 22ch;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
line-height: 1.45;
font-size: clamp(0.72rem, 0.85vw, 0.85rem);
color: var(--rg-ink-muted);
}
/* ---- responsive ---- */
@media (max-width: 760px) {
/* keep the compact cards in a horizontal scroll row (don't stack to 1 col) */
.rg-ss__grid { grid-template-columns: repeat(4, minmax(13rem, 1fr)); }
}
/* ============================================================
SECTION 10: "Our Reviews" — violet panel (left) + testimonial slider (right)
============================================================ */
.rg-reviews {
position: relative;
display: grid;
grid-template-columns: 34% 1fr;
gap: 0;
background: transparent;
min-height: 70vh;
align-items: stretch;
padding-bottom: clamp(3rem, 9vh, 7rem); /* breathing room above the footer */
overflow: hidden; /* nothing leaves the section */
}
/* ---- left: violet panel, heading anchored bottom-left ---- */
.rg-reviews__panel {
position: relative;
z-index: 1;
background: transparent;
display: flex;
align-items: flex-end;
padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 3vw, 3rem);
}
.rg-reviews__panel::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
left: -4vw; top: 25%; width: 85%; height: 55%;
background: radial-gradient(circle, rgba(123,74,168,0.28), transparent 70%);
filter: blur(55px);
}
.rg-reviews__title {
margin: 0;
font-weight: 900;
line-height: 0.9;
letter-spacing: -0.01em;
text-transform: uppercase;
font-size: clamp(2.6rem, 7vw, 7rem);
color: var(--rg-white);
}
/* ---- right: slider stage on black ---- */
.rg-reviews__stage {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0; /* let the slider shrink, not overflow */
padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 4vw, 4rem) 0;
}
/* card bleeds further LEFT over the violet edge, contained on the right */
.rg-reviews__splide {
position: relative;
z-index: 2;
width: 100%;
max-width: 60vw;
margin-left: 0; /* no violet panel to overlap anymore */
}
/* autoHeight (JS) makes the track match the CURRENT slide's height, so shorter
reviews no longer leave a dark empty block below (the "shadow" was taller slides
showing through a fixed-height track). Track clips horizontally as usual. */
.rg-reviews__splide .splide__slide { display: flex; }
.rg-review-card {
margin: 0;
width: 100%;
background: rgba(255,255,255,0.04);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--rg-r-xl);
padding: clamp(1.8rem, 4vw, 3.5rem);
/* No box-shadow: on a pure-black section a dark drop-shadow adds nothing but a
hard clipped rectangle (the autoHeight track clips it). The border defines the
card edge cleanly. */
min-height: 30vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.rg-review-card__quote {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(3rem, 6vw, 5rem);
line-height: 0.6;
color: var(--rg-volt);
margin-bottom: clamp(1rem, 2.5vh, 2rem);
}
.rg-review-card__text {
margin: 0 0 clamp(1rem, 2.5vh, 1.8rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.01em;
line-height: 1.35;
font-size: clamp(1.05rem, 1.5vw, 1.6rem);
color: var(--rg-white);
}
.rg-review-card__meta {
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: clamp(0.85rem, 1.05vw, 1.05rem);
color: var(--rg-volt);
}
/* ---- controls row: arrows & CTA (left) + dots (right, prominent) ---- */
.rg-reviews__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: clamp(1.5rem, 4vh, 3rem);
max-width: none;
margin-left: 0;
}
/* dots on the LEFT, arrows + CTA on the far RIGHT */
.rg-reviews__dots {
order: 1;
display: flex;
gap: 0.9rem;
align-items: center;
}
.rg-reviews__nav {
order: 2;
margin-left: auto; /* shove nav + CTA to the right edge */
}
.rg-reviews__dot {
width: 1.15rem; height: 1.15rem; /* bigger / more visible */
padding: 0; border: 0; border-radius: 50%;
background: rgba(123, 74, 168, 0.7); /* brighter dim violet */
cursor: pointer;
transition: background var(--rg-dur) var(--rg-ease-out), transform var(--rg-dur) var(--rg-ease-out);
}
.rg-reviews__dot:hover { background: rgba(123, 74, 168, 1); }
.rg-reviews__dot.is-active { background: var(--rg-volt); transform: scale(1.3); box-shadow: 0 0 12px rgba(169, 207, 63, 0.6); }
.rg-reviews__nav { display: flex; align-items: center; gap: 0.8rem; }
.rg-reviews__arrow {
width: 2.8rem; height: 2.8rem;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(169, 207, 63, 0.35);
color: var(--rg-white);
cursor: pointer;
transition: background var(--rg-dur) var(--rg-ease-out), color var(--rg-dur) var(--rg-ease-out), transform var(--rg-dur) var(--rg-ease-out);
}
.rg-reviews__arrow:hover { background: var(--rg-volt); color: var(--rg-black); transform: translateY(-2px); }
/* CTA: solid VOLT-GREEN with BLACK font (override the gradient base; keep magnetic + arrow) */
.rg-reviews__cta.rg-btn--grad {
margin-left: 0.4rem;
background: var(--rg-volt);
color: var(--rg-black);
box-shadow: 0 0 30px rgba(169, 207, 63, 0.45);
}
.rg-reviews__cta.rg-btn--grad .rg-btn__label,
.rg-reviews__cta.rg-btn--grad .rg-btn__arrow { color: var(--rg-black); }
.rg-reviews__cta.rg-btn--grad:hover { box-shadow: 0 0 44px rgba(169, 207, 63, 0.7); }
/* ---- responsive ---- */
@media (max-width: 860px) {
.rg-reviews { grid-template-columns: 1fr; min-height: auto; }
.rg-reviews__panel { border-radius: 0; padding-block: clamp(2.5rem, 8vh, 5rem); }
.rg-reviews__stage { padding: clamp(2rem, 6vh, 4rem) 6vw 0; }
.rg-reviews__splide,
.rg-reviews__controls { margin-left: 0; max-width: 100%; }
.rg-reviews__controls { justify-content: center; }
/* Both children measured 400px inside a 393px viewport (padding + track width
escaping the grid column). border-box + an explicit cap keeps them contained. */
.rg-reviews__panel,
.rg-reviews__stage {
box-sizing: border-box;
max-width: 100%;
min-width: 0;
}
}
/* ============================================================
MOBILE SYSTEM — consolidated responsive rules (single source of truth).
Breakpoints (the standard for this theme + inner pages):
• tablet: max-width 900px
• phone: max-width 600px (primary target ~390px)
Sizing rule: header icons + fine details switch from vw → fixed px on phone so
they don't shrink to nothing. Layouts collapse to single column.
============================================================ */
/* ---- Header: fixed icon sizes so vw doesn't shrink them on phones ---- */
@media (max-width: 900px) {
.rg-header-left { gap: 3vw; }
.rg-header-actions { gap: 4vw; }
.rg-icon svg,
.mp13-wishlist-trigger__btn svg { width: 24px !important; height: 24px !important; }
/* Tap targets: the icons themselves stay 24px, but the hit area must reach the
44px iOS/WCAG minimum — measured 24–28px, which is fiddly to hit on a phone.
A flex centre + min-height grows the target without moving the glyph. */
.rg-icon,
.rg-burger,
.rg-lang,
.mp13-wishlist-trigger__btn,
.mp13-search-trigger {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* The switcher keeps its pill shape; only the height grows. */
.rg-lang { min-width: 0; padding-inline: 0.6rem; }
/* iOS Safari auto-zooms the page when a focused field's text is under 16px, and
does NOT zoom back out — the layout is left shifted and the user has to pinch.
16px on every text-entry control is the documented way to prevent it. Applied
to real inputs only, so the custom sort/filter controls keep their own sizing. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
select,
textarea {
font-size: 16px;
}
}
/* ---- Phone (≤600px, targets ~390px) ---- */
@media (max-width: 600px) {
/* HEADER: collapse to burger + cart only. Account/wishlist/search move into
the glass menu (still reachable there); the bar stays clean. */
.rg-icon--collapse { display: none !important; }
.rg-header-actions { gap: 0; }
.rg-header-left { gap: 4vw; }
/* HERO: keep the rotating title readable, never overflow.
18vw → 16vw: the longest word ("SUPPLEMENTS") ran past the screen edge. */
.rg-hero__title { font-size: clamp(3rem, 16vw, 5rem); }
/* The homepage hero is `.rg-hero--split`, and its base rule
(`.rg-hero--split .rg-hero__title`, two classes) outranks the single-class
mobile rule above — which is why editing that one changed nothing.
Matching the specificity here is what makes a mobile size apply at all.
Note the size on a phone comes from the clamp FLOOR, not the vw term:
6vw at 390px is only 23px, so `clamp(3rem, 6vw, 7rem)` rendered at its
3rem = 48px floor. Lowering the vw value alone would change nothing.
Floor dropped 3rem -> 2.7rem (48px -> 43.2px) so the longest rotating
word ("SUPPLEMENTS") stops clipping at the right edge. */
.rg-hero--split .rg-hero__title { font-size: clamp(2.7rem, 6vw, 5rem); }
.rg-hero__lead { font-size: clamp(0.95rem, 4.4vw, 1.15rem); padding-inline: 6vw; }
/* REBELS + NEXT: single column, comfortable type */
.rg-next__title { font-size: 13vw; }
/* MANIFESTO: box + product grid stack; grid to 2-up */
.rg-manifesto { grid-template-columns: 1fr; }
.rg-manifesto__text { font-size: 6.5vw; }
/* BENTO on phones: the two packs (Starter / Advanced) sit SIDE BY SIDE in two
columns, then Trending and the CTA each take the full width below.
The ≤980px block sets grid-template-areas, so those are cleared here — leaving
them assigned produced the half-overlapping, staggered cards.
The gap matches the product grid above it — clamp(1.5rem, 3vw, 2.5rem) — so the
two sections read as one rhythm rather than two different spacings. */
.rg-bento {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: none;
gap: 2vw; /* same gap as .rg-manifesto__grid above */
align-items: stretch;
}
.rg-bento > * { min-width: 0; width: auto; }
/* `.rg-bento__trending { grid-area: trend }` and `__cta { grid-area: cta }` are set
globally (no media query). grid-area is a SHORTHAND, so it resets grid-column —
which is why these two kept landing in named cells and rendering half-width.
Clear the area on each element at the same specificity, then place them. */
.rg-bento__pack,
.rg-bento__trending,
.rg-bento__cta { grid-area: auto !important; }
/* the two pack cards share a row */
.rg-bento__pack { grid-column: span 1 !important; }
/* trending + CTA each take a full row of their own */
.rg-bento__trending { grid-column: 1 / -1 !important; }
.rg-bento__cta { grid-column: 1 / -1 !important; }
/* The CTA is a flex row (figure beside copy) — inside a full-width cell that read
as two columns again. Stack it on phones: figure above, copy below. */
.rg-bento__cta {
flex-direction: column;
align-items: stretch;
padding: 4vh 6vw;
min-height: auto;
overflow: hidden;
}
/* On phones the figure sits in normal flow (not pinned to the box's bottom edge),
so her legs end mid-air. A black gradient veils the bottom of the image so she
grounds into shadow instead of being cut off. Scoped to this ≤600px block, so
desktop — where she is bottom-anchored and overflows the box by design — keeps
no overlay at all. */
.rg-bento__cta-figure {
position: relative;
left: auto;
height: 34vh;
align-self: center;
}
/* The figure is a bare ![]()
, which cannot carry a pseudo-element, so the veil is
drawn by the CTA card itself: a black gradient pinned to the top of the card,
exactly as tall as the image, sitting above it (z-index 3 > figure's 2). */
.rg-bento__cta { position: relative; }
.rg-bento__cta::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc(4vh + 34vh - 9vh); /* padding-top + figure height − veil height */
height: 9vh;
z-index: 3;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.92) 100%);
}
.rg-bento__cta-body { max-width: 100%; }
/* Read as ONE grid with the section above: the manifesto's bottom padding plus the
bento's own top padding created a seam much larger than the grid gap. Drop the
manifesto's bottom padding to the gap value and zero the bento's top, so the
vertical rhythm between the two sections equals the gap between the cards. */
.rg-manifesto { padding-bottom: 2vw; }
.rg-bento {
padding-top: 0;
margin-top: 0;
padding-inline: 4vw; /* same side gutters as the manifesto above */
}
/* PRODUCTS-IN-DETAIL: tabs become a horizontal scroll row above the panel */
.rg-detail__wrap { grid-template-columns: 1fr; }
.rg-detail__tabs {
position: static; flex-direction: row; flex-wrap: nowrap;
overflow-x: auto; gap: 2vw; padding-bottom: 1vh;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rg-detail__tabs::-webkit-scrollbar { display: none; }
.rg-detail__tab { flex: 0 0 auto; font-size: 3.6vw; padding: 1.4vh 4vw; }
/* FAQ: image on top, accordion below; kill sticky (no room on phone) */
.rg-faq__wrap { grid-template-columns: 1fr; }
.rg-faq__col--media { position: static; height: 44vh; order: -1; }
.rg-faq__q-text { font-size: 4.2vw; }
/* SIMPLE & SECURE: keep compact cards scrolling horizontally */
.rg-ss__grid { grid-template-columns: repeat(4, minmax(13rem, 1fr)); }
.rg-ss__title { font-size: clamp(2.4rem, 12vw, 3.4rem); }
/* OUR REVIEWS: stack panel over slider; card full width.
Dots are hidden on phones — one dot per review is far too many at this width to
read as navigation; the prev/next arrows stay. */
.rg-reviews__dots { display: none !important; }
.rg-reviews { grid-template-columns: 1fr; }
.rg-reviews__splide, .rg-reviews__controls { margin-left: 0; max-width: 100%; }
.rg-reviews__title { font-size: clamp(3rem, 18vw, 5rem); }
.rg-reviews__controls { flex-direction: column-reverse; align-items: stretch; gap: 1.2rem; }
.rg-reviews__nav { justify-content: center; margin-left: 0; }
.rg-reviews__dots { justify-content: center; }
/* FOOTER: single column, logo + newsletter full width */
.rg-site-footer__inner { grid-template-columns: 1fr; }
.rg-footer-news { max-width: none; }
/* Section vertical rhythm — a touch tighter on phone */
.rg-ss, .rg-faq, .rg-carousel { padding-block: clamp(3rem, 8vh, 5rem); }
/* HEADER (phone): burger alone on the left, logo truly centred, language pill moved
to the right of the logo so it sits with the action icons instead of crowding the
burger. The pill also loses its vertical padding — it was taller than the icons. */
.rg-site-header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.5rem;
}
.rg-header-left { gap: 0; }
.rg-brand { justify-self: center; }
/* Monogram replaces the wordmark: frees ~70px so every icon can reach a 44px tap
target instead of the 24–31px they were squeezed to. */
.rg-brand__mono { display: inline-flex; align-items: center; }
/* height drives it; width follows the 412:331 ratio so the mark is not squashed */
.rg-brand__mono { position: relative; }
.rg-brand__mono-img { height: 30px; width: auto; display: block; transition: opacity 0.32s var(--rg-ease-out, ease); }
/* purple sits exactly on top of green and fades in while green fades out */
.rg-brand__mono-img--purple { position: absolute; inset: 0; opacity: 0; }
.rg-brand__mono:active .rg-brand__mono-img--purple,
.rg-brand__mono.is-pressed .rg-brand__mono-img--purple { opacity: 1; }
.rg-brand__mono:active .rg-brand__mono-img--green,
.rg-brand__mono.is-pressed .rg-brand__mono-img--green { opacity: 0; }
.rg-brand .custom-logo-link,
.rg-brand .custom-logo,
.rg-brand__hover,
.rg-brand__text { display: none !important; }
/* `.rg-icon--collapse` is set on BOTH account and wishlist, and the ≤600px block
hides everything carrying it. Both belong in the bar — the monogram and the
chrome-less switcher freed enough room for the full set. */
.rg-icon-wrap--wishlist.rg-icon--collapse,
.rg-account.rg-icon--collapse,
button.rg-icon--collapse[data-y-search-open] { display: inline-flex !important; }
/* Account dropdown: `right: 0` anchors a 20rem panel to an icon sitting near the
right edge, so it ran off the LEFT of a phone screen. Centre it on the viewport
instead and cap the width. */
/* Centre the panel on the viewport instead of anchoring it to an icon at the right
edge (a 20rem panel with `right: 0` ran off-screen). `left: 12px; right: 12px`
is used rather than left:50% + translateX, because `.rg-account.is-open
.rg-dropdown` sets `transform: translateY(0)` and would wipe out the centring. */
.rg-account .rg-dropdown,
.rg-account.is-open .rg-dropdown {
position: fixed;
top: 4.6rem; /* just under the header bar */
left: 12px;
right: 12px;
width: auto;
max-width: none;
}
/* swap which switcher is visible: hide the left one, show the one rendered inside
the action group (see header.php) */
.rg-header-left > .rg-lang-wrap { display: none; }
.rg-lang-slot--mobile { display: inline-flex; align-items: center; }
/* Switcher on phones: bare "EN ▾" — no pill chrome, no flag. The pill's border and
background made it read as a button competing with the icons, and the flag added
~18px for no information the code doesn't already give. */
.rg-lang {
padding: 0;
font-size: 0.78rem;
gap: 0.2em;
background: none;
border: 0;
min-width: 0;
}
.rg-lang .rg-lang__flag { display: none; }
/* keep flags inside the OPEN dropdown — there they aid recognition */
.rg-lang__menu .rg-lang__flag { display: inline; }
}
/* ============================================================
SHOP / PRODUCT ARCHIVE — Rogue toolbar + off-canvas filters
(product cards reuse .rg-pcarousel-card)
============================================================ */
.rg-shop { padding-block: clamp(7rem, 14vh, 11rem) clamp(4rem, 10vh, 8rem); background: var(--rg-black); }
/* hero */
/* Shop hero: clean CENTERED title on black, with subtle glow + a gleam sweeping the
gradient text. No purple panel. */
.rg-shop__hero {
position: relative; text-align: center;
margin-bottom: clamp(2.5rem, 6vh, 4rem);
padding-block: clamp(1rem, 3vh, 2.5rem);
}
/* soft glow blobs behind the title (violet core + volt halo) */
.rg-shop__hero::before,
.rg-shop__hero::after {
content: ""; position: absolute; z-index: 0; pointer-events: none;
left: 50%; border-radius: 50%; filter: blur(70px);
}
.rg-shop__hero::before {
width: 42vw; max-width: 620px; aspect-ratio: 1.7/1; top: 34%; transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(123,74,168,0.42), transparent 68%);
}
.rg-shop__hero::after {
width: 30vw; max-width: 440px; aspect-ratio: 2/1; top: 24%; transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(169,207,63,0.22), transparent 66%);
}
.rg-shop__hero > * { position: relative; z-index: 1; }
.rg-shop__eyebrow {
display: inline-block; margin: 0 0 1em;
padding: 0.45em 1.3em; border-radius: var(--rg-r-pill);
background: rgba(169,207,63,0.12); border: 1px solid rgba(169,207,63,0.4);
font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; font-size: clamp(0.72rem, 0.9vw, 0.85rem); color: var(--rg-volt);
}
.rg-shop__title {
margin: 0 0 0.4em; font-weight: 900; line-height: 0.95; letter-spacing: -0.015em;
text-transform: uppercase; font-size: clamp(3rem, 8vw, 7rem);
/* SEAMLESS travelling gleam — starts & ends on volt so the 200%-tile loop has no
hard vertical join line sweeping through. */
background: linear-gradient(100deg,
var(--rg-volt) 0%,
var(--rg-violet) 25%,
#ffffff 50%,
var(--rg-violet) 75%,
var(--rg-volt) 100%);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
text-wrap: balance;
filter: drop-shadow(0 0 30px rgba(169,207,63,0.25));
animation: rg-title-gleam 5s linear infinite;
}
@keyframes rg-title-gleam {
to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.rg-shop__title { animation: none; background-position: 50% 0; }
}
.rg-shop__sub { margin: 0 auto; max-width: 52ch; color: var(--rg-ink-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(0.9rem, 1.1vw, 1.05rem); line-height: 1.5; }
/* toolbar: sort | chips | more-filters */
.rg-shop__toolbar {
display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap;
margin-bottom: 1.4rem;
}
.rg-shop__sort { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
.rg-shop__sort-label { color: var(--rg-ink-muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
.rg-shop__sort .woocommerce-ordering { margin: 0; }
.rg-shop__sort select, .woocommerce-ordering select {
appearance: none; -webkit-appearance: none;
background: rgba(255,255,255,0.05); color: var(--rg-white);
border: 1px solid rgba(169,207,63,0.35); border-radius: var(--rg-r-pill);
padding: 0.7rem 2.4rem 0.7rem 1.1rem; font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.8rem; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 0.9rem center;
}
.rg-shop__sort select option { background: #121212; color: #fff; }
/* category chips — horizontal scroll with arrows */
.rg-shop__chips-wrap { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; }
.rg-shop__chip-arrow {
flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); color: var(--rg-white); cursor: pointer;
transition: background var(--rg-dur) var(--rg-ease-out), color var(--rg-dur) var(--rg-ease-out);
}
.rg-shop__chip-arrow:hover { background: var(--rg-volt); color: var(--rg-black); }
.rg-shop__chips {
display: flex; gap: 0.6rem; overflow-x: auto; scroll-behavior: smooth; min-width: 0;
scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0.2rem 0;
}
.rg-shop__chips::-webkit-scrollbar { display: none; }
.rg-shop__chip {
flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0.7rem 1.4rem;
border-radius: var(--rg-r-pill); text-decoration: none; white-space: nowrap;
background: rgba(255,255,255,0.05); color: var(--rg-white); border: 1px solid rgba(255,255,255,0.10);
font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(0.72rem, 0.85vw, 0.85rem);
transition: background var(--rg-dur) var(--rg-ease-out), color var(--rg-dur) var(--rg-ease-out), border-color var(--rg-dur) var(--rg-ease-out);
}
.rg-shop__chip:hover { border-color: rgba(169,207,63,0.5); }
.rg-shop__chip.is-active { background: var(--rg-volt); color: var(--rg-black); border-color: var(--rg-volt); }
/* more-filters button */
.rg-shop__more-filters {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;
padding: 0.75rem 1.4rem; border-radius: var(--rg-r-pill);
background: var(--rg-violet); color: #fff; border: 0;
font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem;
transition: background var(--rg-dur) var(--rg-ease-out), box-shadow var(--rg-dur) var(--rg-ease-out);
}
.rg-shop__more-filters:hover { background: var(--rg-volt); color: var(--rg-black); box-shadow: 0 0 24px rgba(169,207,63,0.4); }
.rg-shop__more-count {
display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem;
border-radius: var(--rg-r-pill); background: var(--rg-volt); color: var(--rg-black); font-size: 0.72rem; font-weight: 900;
}
.rg-shop__count { margin: 0 0 clamp(1.5rem, 4vh, 2.5rem); color: var(--rg-ink-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.85rem; }
.rg-shop__count .woocommerce-result-count { margin: 0; }
/* grid */
/* Row gap is larger than the column gap: cards are much taller than they are
wide, so equal gaps read as cramped vertically. */
.rg-shop__grid.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); row-gap: clamp(2.5rem, 5vw, 4rem); }
.rg-shop__grid.products::before, .rg-shop__grid.products::after { content: none !important; }
.rg-shop-cell { margin: 0 !important; width: auto !important; float: none !important; }
/* ---- PAGINATION ------------------------------------------------------------
Woo ships its own look for this and it is the "connected grey squares" box:
`.woocommerce-pagination ul` gets `border:1px solid #cfc8d8; border-right:0`
and every `li` a right border. Those rules are more specific than a bare
`.page-numbers` selector, so they must be explicitly unset — styling only the
inner links (what we did before) left Woo's box drawn around them.
NOTE: `.page-numbers` is BOTH the