/* ============================================================
AlvarCreations Premium Theme, theme.css
============================================================ */
/* ----- Global smooth scroll + sticky-header anchor offset -----
scroll-padding-top applies to ALL scroll-into-view operations
(anchor links, JS scrollIntoView, browser restore-on-back). Without
it, jumps to in-page sections land BEHIND the sticky announcement
bar + nav, clipping the section heading. --header-announce-height
is kept live by announcement-bar JS; 68px is the nav height
(.header__inner height in this file), plus a small breathing gap.
When adding new in-page anchors anywhere in the theme, you do NOT
need to repeat this per-section — this single rule handles it. */
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-announce-height, 0px) + 88px);
}
/* The Alvar homepage sections carry their own ~110px top padding, so the 88px
above lands the jump a header-and-a-half short of the heading. Cancel just
that 88 (keeping the announcement-bar part, which is real chrome): the
section's own padding then provides the gap under the sticky nav. */
#features, #pricing, #calculator, #wall, #faq { scroll-margin-top: -88px; }
/* ----- Prevent horizontal overflow on mobile ----- */
@media (max-width: 768px) {
body { overflow-x: hidden; max-width: 100%; }
/* Hide the middle stat (100M+ media views) on mobile, 2 cards look cleaner than 3 */
.stats-grid .stats-item:nth-child(2) { display: none; }
/* Hide pack comparison table on mobile, too wide to display usefully */
.pack-comparison { display: none; }
}
/* ----- Reset & Base (supplements inline critical CSS) ----- */
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
::selection { background: #c5a028; color: #1a1200; }
/* Ensure [hidden] always wins over display:flex/grid set by component classes */
[hidden] { display: none !important; }
/* ----- Scroll Reveal System ----- */
.reveal {
opacity: 0;
transform: translateY(12px);
transition:
opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
opacity: 1;
transform: none;
}
/* Blur only on desktop, filter:blur creates compositing layers that drain mobile GPU.
Applied via theme.css (not inline critical CSS) so the blur shader is only created
after the stylesheet loads, not during first paint when the elements are invisible. */
@media (min-width: 769px) {
.reveal {
filter: blur(3px);
transition:
opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed { filter: blur(0px); }
}
@media (prefers-reduced-motion: reduce) {
.reveal { transform: none; filter: none !important; transition: opacity 0.3s ease; }
}
/* ----- Gradient Divider ----- */
.divider-luxury {
height: 1px;
border: none;
background: linear-gradient(90deg, transparent, rgba(201,162,39,0.3) 20%, #c5a028 50%, rgba(201,162,39,0.3) 80%, transparent);
}
/* ----- Global gold accent text gradient ----- */
.accent, .text-accent {
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Prices shown in gold gradient */
.product-card__price-amount,
.sc-price,
.price--current,
.price-item--sale {
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ----- Utility ----- */
.section-header:not(.shopify-section) { text-align: center; margin-bottom: 56px; }
/* Utility used by sections that don't have their own padding rule */
.section-padding { padding-top: 80px; padding-bottom: 80px; }
.section-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 0.67rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 18px;
}
.section-badge svg {
flex-shrink: 0;
-webkit-text-fill-color: initial;
color: var(--color-accent);
}
.section-heading {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
text-align: center;
color: var(--color-text);
}
.section-subheading {
color: var(--color-text-secondary);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
margin-top: 14px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 1.7;
}
.rte h2, .rte h3, .rte h4 { margin-top: 1.5em; margin-bottom: 0.5em; font-weight: 600; }
.rte p { margin-bottom: 0.75em; color: var(--color-text-secondary); }
.rte ul, .rte ol { margin-bottom: 0.75em; padding-left: 1.25em; }
.rte ul { list-style: disc; }
.rte ol { list-style: decimal; }
.rte li { margin-bottom: 0.35em; color: var(--color-text-secondary); }
.rte a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.rte a:hover { color: var(--color-accent-hover); }
.rte strong { color: var(--color-text); font-weight: 600; }
.rte em { font-style: italic; }
/* ----- Buttons ----- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 500;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: var(--radius-sm);
padding: 14px 36px;
transition:
background-position 0.4s var(--ease-out-expo),
box-shadow 0.4s var(--ease-out-expo),
transform 0.4s var(--ease-out-expo),
color 0.4s var(--ease-out-expo),
border-color 0.4s var(--ease-out-expo),
opacity 0.4s var(--ease-out-expo);
white-space: nowrap;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
}
.btn--primary {
/* Two-stop gradient: bright hover gold on the left half, normal gold on the
right. Sliding background-position reveals the left half on hover, so no
::before overlay is needed. Restored 2026-08-25: a pass had replaced this
with a lit-from-above vertical ramp, which read as glossy and metallic. */
background: linear-gradient(to right,
#e8c84a 0%, #f0d060 49.9%,
#b8860b 50%, #d4af37 75%, #c9a227 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
transition:
background-position 0.55s var(--ease-out-expo),
box-shadow 0.3s ease,
transform 0.3s ease;
color: #1a1200;
border: 1px solid rgba(201,162,39,0.6);
text-shadow: none;
}
.btn--primary:hover {
background-position: 0% 0;
box-shadow: 0 8px 40px rgba(201,162,39,0.35), 0 2px 8px rgba(201,162,39,0.2);
transform: translateY(-1px);
}
.btn--buy {
/* Two-stop gradient: bright hover gold on the left half, normal gold on the
right. Sliding background-position reveals the left half on hover, so no
::before overlay is needed. Restored 2026-08-25: a pass had replaced this
with a lit-from-above vertical ramp, which read as glossy and metallic. */
background: linear-gradient(to right,
#e8c84a 0%, #f0d060 49.9%,
#b8860b 50%, #d4af37 75%, #c9a227 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
transition:
background-position 0.55s var(--ease-out-expo),
box-shadow 0.3s ease,
transform 0.3s ease;
color: #1a1200;
font-size: 0.82rem;
font-weight: 600;
width: 100%;
letter-spacing: 0.1em;
border: 1px solid rgba(201,162,39,0.5);
}
.btn--buy:hover {
background-position: 0% 0;
transform: translateY(-1px);
box-shadow: 0 8px 40px rgba(201,162,39,0.35);
}
.btn--buy:disabled {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.08);
color: var(--color-text-tertiary);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn--large { padding: 16px 44px; font-size: 0.82rem; }
.btn--full { width: 100%; justify-content: center; }
/* ----- Buttons on narrow phones -------------------------------------------
`.btn` sets `white-space: nowrap` at every width. A nowrap flex item has no
smaller minimum content size to shrink to, so `max-width: 100%` cannot save
it: a long enough label makes the button set its own width and push straight
past the viewport. Two live examples, both measured 2026-08-24 on Chromium
AND WebKit:
/pages/about a.btn--discord.btn--large "Join 1,500+ Editors on Discord"
intrinsic width 386.5px. Overflows at 320px (33px each side)
and at 375px (document 381px). At 390px it clears the
viewport by 1.8px, so the next copy edit reintroduces it on
the flagship width.
/download the OS switcher, handled separately at .kd-os below.
375px is the width that matters: every iPhone SE, every mini, and the 6/7/8.
A Chromium-only pass scores it clean, which is how this survived.
Letting the label wrap is the fix, not shrinking the type: the button keeps
its size and weight, it just occupies two lines when the copy is long. Scoped
to 480px so nothing about the desktop button changes. */
@media (max-width: 480px) {
.btn {
white-space: normal;
text-align: center;
max-width: 100%;
}
.btn--large { padding: 14px 20px; }
}
.btn--outline {
background: linear-gradient(to right,
#e8c84a 0%, #f0d060 49.9%,
transparent 50%, transparent 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
transition:
background-position 0.55s var(--ease-out-expo),
color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
border: 1px solid var(--color-text-secondary);
color: var(--color-text);
}
.btn--outline:hover {
background-position: 0% 0;
border-color: rgba(201,162,39,0.7);
color: #1a1200;
box-shadow: 0 8px 40px rgba(201,162,39,0.35), 0 2px 8px rgba(201,162,39,0.2);
transform: translateY(-1px);
}
/* =============================================================
HEADER
============================================================= */
/* ── Sticky header group ────────────────────────────────────────────────────
Both the announcement bar section and the nav header section are direct
children of with no shared wrapper. We make each one individually
sticky, stacking them vertically:
1. section.shopify-section-group-header-group → announcement bar, top: 0
2. div.shopify-section-group-header-group.section-header → nav, top below bar
JS in announcement-bar.liquid sets --header-announce-height on :root so the
nav knows exactly where to stick as the bar resizes or is dismissed.
─────────────────────────────────────────────────────────────────────────── */
section.shopify-section-group-header-group {
position: sticky;
top: 0;
z-index: 101;
}
/* Target only the nav wrapper (has both classes), not generic .section-header
heading containers used elsewhere on the page. */
.shopify-section-group-header-group.section-header {
position: sticky;
top: var(--header-announce-height, 0px);
z-index: 100;
}
/* ── The header floats ─────────────────────────────────────────────────────
It was a full-bleed bar welded to the top of the viewport with a hairline
under it. It is now a capsule inset from all three edges, over the page
rather than above it.
Why that reads as more expensive: a full-bleed bar with a border is a piece
of CHROME, and chrome is the part of a page nobody chose. A floating capsule
is an OBJECT sitting on the page, so it belongs to the same world as the
product shot and the glass below it, and the dark hero shows through and
around it. It is also the single cheapest premium move available here,
because it is pure CSS: the markup on all 39 pages is untouched.
It stays SEMI-transparent with a backdrop blur, so the hero's light shows
through it and it changes as you scroll. An opaque capsule is just a smaller
bar. */
.site-header {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: min(1200px, calc(100% - 28px));
z-index: 100;
border-radius: 999px;
background: linear-gradient(180deg, rgba(23, 18, 12, 0.81) 0%, rgba(17, 13, 9, 0.79) 100%);
backdrop-filter: blur(18px) saturate(170%);
-webkit-backdrop-filter: blur(18px) saturate(170%);
border: 1px solid rgba(226, 197, 116, 0.24);
/* Lit from above, the same logic as the gold buttons: a hairline of light on
the top inside edge, a soft drop below so it sits ABOVE the page. Without
the drop it reads as a hole cut in the page rather than a thing on it. */
box-shadow:
inset 0 1px 0 rgba(255, 243, 221, 0.20),
inset 0 -1px 0 rgba(0, 0, 0, 0.34),
inset 0 14px 26px -16px rgba(255, 232, 190, 0.13),
/* A soft dark keyline, kept from the bright version because it sharpens the
silhouette without adding any brightness. At .42 it read as a hard ring;
.26 just seats the capsule against the hero. */
0 0 0 1px rgba(0, 0, 0, 0.26),
0 10px 34px rgba(0, 0, 0, 0.46);
transition: background 0.4s var(--ease-smooth), border-color 0.4s var(--ease-smooth);
}
/* The page must start below the floating capsule, which no longer occupies any
layout space. 68px bar + 12px top inset + 12px breathing room. */
body { padding-top: 92px; }
/* ...except the hero, which is pulled back UP under the capsule and given the
same amount as internal padding. Net layout is identical; what changes is
WHICH element paints behind the header. Before this the capsule floated over
92px of flat body background, so at scroll 0 there was a dead strip above the
hero and the header looked stuck to the top of nothing. Now the hero's own
lit background runs behind and around it, which is the entire reason to float
a header in the first place. */
.hero { margin-top: -92px; padding-top: 92px; }
@media (max-width: 768px) { .hero { margin-top: -84px; padding-top: 84px; } }
@media (max-width: 768px) {
.site-header { top: 8px; width: calc(100% - 16px); border-radius: 22px; }
body { padding-top: 84px; }
}
/* Inside the capsule the row needs its own side padding, because .container's
gutter was sized for a full-bleed bar. */
.site-header .container { padding-left: 22px; padding-right: 22px; }
@media (max-width: 768px) { .site-header .container { padding-left: 16px; padding-right: 16px; } }
/* ── Header buttons become pills ────────────────────────────────────────────
ONLY in the header. Alvar's rectangular CTAs are brand, and they stay
rectangular everywhere they carry weight: the hero, the pricing cards, the
closing CTA. In a rounded capsule a rectangular button is the one square
thing in a round container, which reads as an oversight rather than a
choice, so the two header buttons follow their container's shape. That is
the narrowest possible version of the change: two buttons, one component. */
.site-header .btn { border-radius: 999px; }
.site-header .header__cta { padding: 10px 22px; font-size: 0.74rem; }
/* The ghost twin. Deliberately NOT a second gold button: two gold pills side by
side means neither is the primary, and the paid one has to win. */
.header__login {
display: none;
padding: 10px 20px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
color: var(--color-text);
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.10);
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.header__login:hover {
background: rgba(255, 255, 255, 0.085);
border-color: rgba(212, 184, 106, 0.34);
color: #fff;
}
@media (min-width: 769px) { .header__login { display: inline-flex; align-items: center; } }
/* ── The header shows ONE identity state, never both ────────────────────────
Signed out, the account icon is a link to a sign-in page that the "Log in"
pill already offers, so it was a second door to the same room taking up
space in a crowded row. Signed in, "Log in" is nonsense and the icon is the
useful control. So each state gets exactly the controls that do something.
Default is SIGNED OUT, because that is what an uncached first paint should
assume: showing the account icon and then hiding it would be a visible
flicker on every load for every visitor, and showing "Log in" briefly to
someone who is signed in is both rarer and quieter. theme.js adds
.kn-signed-in once the session resolves.
The currency picker STAYS in both states. It was the other candidate for
removal, but it is how a buyer checks the price in their own currency, and
the people who need it most are exactly the signed-out ones deciding whether
to buy. Hiding the account icon when signed out already buys back the room. */
/* Same specificity as the .header__account block further down this file, which
sets display:inline-flex and would otherwise win on source order. Stated as
html:not(...) to lift these above it without !important, so the rule below
stays readable and overridable. */
html:not(.kn-signed-in) .header__account { display: none; }
html.kn-signed-in .header__account { display: inline-flex; }
.kn-signed-in .header__login { display: none !important; }
/* The logo TEXT overflowed its own box once the capsule narrowed the row: at
375px the logo box and the actions cluster sit edge to edge with no gap, so
"AlvarCreations" ran straight into the currency picker. The boxes never
overlapped, which is why this reads as a font-size problem and not a layout
one. Shrinking the wordmark on small screens is the fix that keeps every
control: hiding the currency picker would have been easier and would have
taken a feature away from every phone. */
@media (max-width: 480px) {
.header__logo-text { font-size: 1.08rem; letter-spacing: 0.02em; }
.site-header .header__actions { gap: 10px; }
.site-header .container { padding-left: 13px; padding-right: 13px; }
}
/* ⚠️ THE RULE ABOVE NEVER APPLIED TO THE HEADER. `.header__logo-text` occurs
ZERO times in the shipping HTML (checked against site-astro/dist on every
page, 2026-08-24). The header's wordmark is `.header__logo-wordmark`, a
two-tone pair of spans. So the diagnosis in the comment above was right and
the selector was wrong, which is why the collision it describes was still
happening a breakpoint further down.
`.header__logo-text` is left in place rather than deleted: it is harmless, and
nothing here proves another surface does not use it.
The real numbers at 320px, before this rule:
.header__logo clientWidth 160px, scrollWidth 175px, overflow-x visible
wordmark paints out to x=197
.hdr-picker__trigger starts at x=182
so "Creations" rendered underneath the globe icon. Confirmed on Chromium AND
WebKit, on all 16 pages. Clean at 360px and up, which is how it survived.
Shrinking the wordmark is still the right fix, for the reason the original
comment gives: hiding the currency picker would take a feature away from every
phone. min-width:0 lets the logo actually yield in the flex row instead of
overflowing its box, and the actions cluster is pinned so the logo is what
gives way.
SELECTORS ARE DELIBERATELY DOUBLED (`.site-header .header__logo-wordmark`
rather than the bare class). Every page carries the wordmark's base rule in
its own inline critical CSS in , which sits AFTER the theme.css ,
so at equal specificity the inline copy wins on document order and a bare
`.header__logo-wordmark` here does nothing at all. Measured: with the bare
selector the computed font-size stayed 18.4px and the collision survived.
Descendant selectors take this to (0,2,0) and it lands. This is the same trap
already documented for the header's background; the alternative was editing
the inline block on 39 pages. */
@media (max-width: 400px) {
.site-header .header__logo { min-width: 0; }
.site-header .header__logo-wordmark {
font-size: 0.98rem;
letter-spacing: 0;
white-space: nowrap;
}
.site-header .header__actions { flex: 0 0 auto; gap: 8px; }
}
/* One more step for the 320px class of device. At 0.98rem the wordmark clears
the picker there by a single pixel, which is not clearance, it is luck. */
@media (max-width: 340px) {
.site-header .header__logo-wordmark { font-size: 0.9rem; }
.site-header .header__logo { gap: 6px; }
}
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 68px;
}
.header__logo-text {
font-family: var(--font-heading);
font-weight: 400;
font-size: 1.4rem;
letter-spacing: 0.04em;
color: var(--color-text);
}
/* Two-tone wordmark logo */
.header__logo {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo);
}
.header__logo:hover {
opacity: 1;
transform: translateY(-1px);
}
.header__logo-mark {
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
flex-shrink: 0;
transition: color 0.35s ease, filter 0.35s ease;
}
.header__logo:hover .header__logo-mark {
color: rgba(255, 255, 255, 0.85);
filter: drop-shadow(0 0 10px rgba(197, 160, 40, 0.7));
}
.header__logo-img {
transition: filter 0.35s ease;
}
.header__logo:hover .header__logo-img {
filter:
drop-shadow(0 0 10px rgba(197, 160, 40, 0.65))
drop-shadow(0 0 24px rgba(197, 160, 40, 0.35));
}
.header__logo-wordmark {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 400;
letter-spacing: 0.01em;
line-height: 1;
}
.header__logo-brand {
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
}
.header__logo-sub {
color: var(--color-text-secondary);
font-weight: 300;
}
.header__logo-img {
height: 40px;
width: auto;
display: block;
flex-shrink: 0;
}
.header__nav { display: none; }
@media (min-width: 769px) {
.header__nav { display: block; }
}
.header__menu {
display: flex;
gap: 32px;
}
.header__menu-item {
position: relative;
}
/* --- Slide-in underline hover animation --- */
.header__link {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-secondary);
transition: color 0.3s var(--ease-smooth);
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 0;
}
.header__link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s var(--ease-smooth);
}
.header__link:hover,
.header__menu-item.is-open > .header__link {
color: var(--color-text);
}
.header__link:hover::after,
.header__link--active::after,
.header__menu-item.is-open > .header__link::after {
transform: scaleX(1);
transform-origin: left;
}
.header__link--active {
color: var(--color-text);
}
/* Chevron icon for dropdown parents */
.header__chevron {
transition: transform 0.3s ease;
margin-left: 2px;
flex-shrink: 0;
}
.header__menu-item.is-open > .header__link .header__chevron {
transform: rotate(180deg);
}
/* --- Dropdown menus, premium glass panel --- */
.header__dropdown {
position: absolute;
top: calc(100% + 18px);
left: 50%;
min-width: 216px;
background: rgba(16, 12, 8, 0.97);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-lg);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(10px) scale(0.96);
transform-origin: top center;
transition:
opacity 0.3s var(--ease-out-expo),
transform 0.3s var(--ease-out-expo),
visibility 0.3s;
box-shadow:
0 32px 72px rgba(0, 0, 0, 0.75),
0 6px 20px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(201, 162, 39, 0.2),
inset 0 0 0 1px rgba(255, 255, 255, 0.03);
z-index: 200;
}
/* Invisible bridge so hover doesn't break between trigger and dropdown */
.header__dropdown::before {
content: '';
position: absolute;
top: -20px;
left: 0;
right: 0;
height: 20px;
}
.header__menu-item.is-open > .header__dropdown,
.header__menu-item:hover > .header__dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
}
.header__dropdown-list {
display: flex;
flex-direction: column;
gap: 1px;
}
.header__dropdown-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px 10px 16px;
font-size: 0.8rem;
font-weight: 400;
color: var(--color-text-secondary);
border-radius: var(--radius-md);
transition: color 0.3s var(--ease-smooth), background 0.3s var(--ease-smooth);
position: relative;
white-space: nowrap;
overflow: hidden;
}
/* Crimson left accent bar */
.header__dropdown-link::before {
content: '';
position: absolute;
left: 0;
top: 18%;
bottom: 18%;
width: 2px;
border-radius: 2px;
background: var(--color-accent);
opacity: 0;
transform: scaleY(0.4);
transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-out-expo);
}
/* Chevron arrow that slides in on hover */
.header__dropdown-link::after {
content: '';
display: block;
width: 13px;
height: 13px;
margin-left: auto;
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a028' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
transform: translateX(-5px);
transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-out-expo);
}
.header__dropdown-link:hover {
color: var(--color-text);
background: rgba(255, 255, 255, 0.04);
}
.header__dropdown-link:hover::before {
opacity: 1;
transform: scaleY(1);
}
.header__dropdown-link:hover::after {
opacity: 1;
transform: translateX(0);
}
.header__dropdown-link--active {
color: var(--color-accent);
}
.header__dropdown-link--active::before {
opacity: 1;
transform: scaleY(1);
}
/* First dropdown item (e.g. "ALL PRODUCTS"), separated from the rest */
.header__dropdown-item--hero {
border-bottom: 1px solid rgba(201,162,39,0.18);
margin-bottom: 5px;
padding-bottom: 4px;
}
.header__dropdown-item--hero .header__dropdown-link {
color: var(--color-text);
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.1em;
}
.header__dropdown-item--hero .header__dropdown-link:hover {
color: var(--color-accent);
}
/* --- Header actions --- */
.header__actions {
display: flex;
align-items: center;
gap: 16px;
}
/* ── Currency picker (header) ── */
.header__currency-form { margin: 0; }
@media (max-width: 768px) {
.header__currency-form { display: none; }
}
.hdr-picker { position: relative; }
/* Invisible bridge covering the gap between trigger and panel (below) */
.hdr-picker::after {
content: '';
position: absolute;
top: 100%;
left: -12px;
right: -12px;
height: 24px;
}
/* Footer picker, panel opens upward */
.ftr-picker .hdr-picker__panel {
top: auto;
bottom: calc(100% + 8px);
transform: translateY(6px);
}
.ftr-picker:hover .hdr-picker__panel,
.ftr-picker:focus-within .hdr-picker__panel,
.ftr-picker.is-open .hdr-picker__panel {
transform: translateY(0);
}
/* Bridge gap above the trigger for the footer picker */
.ftr-picker::after {
top: auto;
bottom: 100%;
}
.hdr-picker__trigger {
display: flex;
align-items: center;
gap: 5px;
background: transparent;
border: none;
color: var(--color-text-secondary);
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
transition: color 0.2s ease, background 0.2s ease;
white-space: nowrap;
}
.hdr-picker__trigger:hover,
.hdr-picker__trigger[aria-expanded="true"] {
color: var(--color-text);
background: rgba(255,255,255,0.06);
}
.hdr-picker__chevron {
transition: transform 0.2s ease;
opacity: 0.5;
}
.hdr-picker__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 260px;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: 12px;
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
z-index: 200;
overflow: hidden;
display: flex;
flex-direction: column;
/* Hidden by default, shown on hover or .is-open (mobile tap) */
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.hdr-picker:hover .hdr-picker__panel,
.hdr-picker:focus-within .hdr-picker__panel,
.hdr-picker.is-open .hdr-picker__panel {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.hdr-picker:hover .hdr-picker__chevron,
.hdr-picker:focus-within .hdr-picker__chevron,
.hdr-picker.is-open .hdr-picker__chevron {
transform: rotate(180deg);
}
.hdr-picker__search-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
.hdr-picker__search {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.8rem;
}
.hdr-picker__search::placeholder { color: var(--color-text-secondary); opacity: 0.6; }
/* The global :focus-visible rule (2px gold, 2px offset) is defined LATER at the
same specificity, so it beat the `outline: none` above and drew a gold
rectangle across the search row. Removing it here rather than weakening the
global rule, which is a real accessibility affordance everywhere else.
The focus cue does not disappear, it moves to the row's own divider and icon:
the panel is already the focused context, so a box around the field inside it
is noise rather than information. */
.hdr-picker__search:focus,
.hdr-picker__search:focus-visible { outline: none; box-shadow: none; }
.hdr-picker__search-wrap:focus-within {
border-bottom-color: var(--color-accent);
color: var(--color-text);
}
.hdr-picker__list {
list-style: none;
margin: 0;
padding: 6px 0;
max-height: 280px;
overflow-y: auto;
overscroll-behavior: contain;
/* Filtering hides rows, which changes this list's height on every keystroke.
Chrome's scroll anchoring then "helpfully" compensates by moving the page.
Nothing above the panel should ever move because a dropdown got shorter. */
overflow-anchor: none;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.hdr-picker__list::-webkit-scrollbar { width: 4px; }
.hdr-picker__list::-webkit-scrollbar-track { background: transparent; }
.hdr-picker__list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
.hdr-picker__opt {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 14px;
cursor: pointer;
transition: background 0.15s ease;
font-size: 0.82rem;
}
.hdr-picker__opt:hover { background: rgba(255,255,255,0.05); }
.hdr-picker__opt.is-selected { background: rgba(212,175,55,0.08); }
.hdr-picker__opt-country { color: var(--color-text); }
.hdr-picker__opt-currency {
color: var(--color-text-secondary);
font-size: 0.75rem;
letter-spacing: 0.04em;
}
.hdr-picker__opt.is-selected .hdr-picker__opt-currency { color: var(--color-accent); }
.hdr-picker__empty {
padding: 16px 14px;
font-size: 0.8rem;
color: var(--color-text-secondary);
text-align: center;
}
.header__cart,
.header__account {
position: relative;
color: var(--color-text-secondary);
transition: color var(--transition-fast);
display: inline-flex;
align-items: center;
justify-content: center;
}
.header__cart:hover,
.header__account:hover { color: var(--color-text); }
.header__cart-count {
position: absolute;
top: -6px;
right: -8px;
background: var(--color-accent);
color: var(--color-text);
font-size: 0.6rem;
font-weight: 600;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* Small green "signed in" indicator on the account icon. Lives in the same
top-right corner the cart's count badge lives in, so the two read as a
consistent pair. */
.header__account-dot {
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
background: #4ade80;
border-radius: 50%;
border: 2px solid var(--color-bg, #000);
}
/* Composited pulse ring, uses transform+opacity so it runs on the GPU compositor */
.header__account-dot::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
background: rgba(74, 222, 128, 0.55);
animation: header-account-pulse 2.6s ease-out infinite;
will-change: transform, opacity;
}
@keyframes header-account-pulse {
0% { transform: scale(1); opacity: 0.7; }
60% { transform: scale(2.5); opacity: 0; }
100% { transform: scale(2.5); opacity: 0; }
}
.header__menu-toggle {
color: var(--color-text);
display: flex;
align-items: center;
}
@media (min-width: 769px) {
.header__menu-toggle { display: none; }
}
/* --- Mobile menu --- */
.mobile-menu {
position: fixed;
top: 68px;
left: 0;
right: 0;
bottom: 0;
background: rgba(16, 12, 8, 0.97);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
z-index: 99;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
overflow-y: auto;
}
.mobile-menu.is-open {
opacity: 1;
pointer-events: auto;
}
.mobile-menu__inner {
padding: 40px 24px;
display: flex;
flex-direction: column;
gap: 0;
}
.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__item { border-bottom: 1px solid var(--color-border); }
.mobile-menu__parent {
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-menu__link {
display: block;
font-size: 1.5rem;
font-weight: 600;
padding: 16px 0;
color: var(--color-text);
transition: color 0.25s ease;
position: relative;
flex: 1;
}
/* Slide-in underline on mobile links */
.mobile-menu__link::after {
content: '';
position: absolute;
bottom: 12px;
left: 0;
width: 100%;
height: 1.5px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.mobile-menu__link:hover { color: var(--color-accent); }
.mobile-menu__link:hover::after { transform: scaleX(1); }
.mobile-menu__expand {
padding: 16px 4px;
color: var(--color-text-secondary);
transition: color 0.2s ease;
}
.mobile-menu__expand:hover { color: var(--color-accent); }
.mobile-menu__expand svg {
transition: transform 0.3s ease;
}
.mobile-menu__expand[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.mobile-menu__expand[aria-expanded="true"] {
color: var(--color-accent);
}
.mobile-menu__submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease, padding 0.35s ease;
padding: 0 0 0 16px;
}
.mobile-menu__submenu.is-open {
max-height: 500px;
padding-bottom: 8px;
}
.mobile-menu__sublink {
display: block;
padding: 10px 0;
font-size: 1.1rem;
font-weight: 500;
color: var(--color-text-secondary);
transition: color 0.25s ease;
position: relative;
}
.mobile-menu__sublink::after {
content: '';
position: absolute;
bottom: 6px;
left: 0;
width: 100%;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.mobile-menu__sublink:hover { color: var(--color-accent); }
.mobile-menu__sublink:hover::after { transform: scaleX(1); }
.mobile-menu__cart-link {
display: inline-block;
margin-top: 24px;
font-size: 1.1rem;
color: var(--color-accent);
font-weight: 600;
}
.mobile-menu__account-link {
display: block;
margin-top: 24px;
font-size: 1.1rem;
color: var(--color-text);
font-weight: 600;
text-decoration: none;
}
.mobile-menu__account-link + .mobile-menu__cart-link { margin-top: 12px; }
.mobile-menu__account-link:hover { color: var(--color-accent); }
/* Menu toggle animation */
.menu-line { transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; }
.header__menu-toggle[aria-expanded="true"] .menu-line--top { transform: translateY(5px) rotate(45deg); }
.header__menu-toggle[aria-expanded="true"] .menu-line--mid { opacity: 0; }
.header__menu-toggle[aria-expanded="true"] .menu-line--bot { transform: translateY(-5px) rotate(-45deg); }
/* =============================================================
HERO
============================================================= */
.hero {
position: relative;
min-height: 80vh;
display: flex;
align-items: center;
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__gradient {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 90% 70% at 50% 55%, var(--color-accent-glow) 0%, transparent 70%),
radial-gradient(ellipse 50% 40% at 70% 60%, rgba(201,162,39,0.06) 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 20% 50%, rgba(201,169,110,0.03) 0%, transparent 60%);
animation: heroGradientShift 12s ease-in-out infinite alternate;
}
@keyframes heroGradientShift {
0% { opacity: 0.7; transform: scale(1); }
100% { opacity: 1; transform: scale(1.04); }
}
/* Smooth bottom fade into next section */
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 45%;
background: linear-gradient(to bottom, transparent, var(--color-bg));
pointer-events: none;
z-index: 0;
}
.hero__waves {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* ── Hero section (video on desktop, gradient on mobile) ── */
.hero-video {
position: relative;
width: 100%;
overflow: hidden;
/* Desktop height driven by the section setting */
height: 560px;
}
/* Fallback gradient layer, always in DOM */
.hero-video__fallback {
position: absolute;
inset: 0;
z-index: 0;
transition: opacity 0.6s ease;
}
/* Reuse existing hero gradient/wave/noise styles which are already defined */
/* Video layer, sits on top, starts invisible, fades in via JS */
.hero-video__player {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transition: opacity 0.6s ease;
z-index: 1;
}
/* Mobile: hide the entire hero section, product grid is the first thing seen */
@media (max-width: 767px) {
.section-hero-video {
display: none;
}
}
.hero__noise {
position: absolute;
inset: 0;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 128px 128px;
}
.hero__inner {
position: relative;
z-index: 1;
text-align: center;
padding: 120px 0 100px;
}
.hero__content {
max-width: 720px;
margin: 0 auto;
}
.hero__heading {
font-family: var(--font-heading);
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 24px;
color: var(--color-text);
}
.hero__subheading {
font-family: var(--font-body);
font-size: clamp(0.95rem, 2vw, 1.1rem);
font-weight: 300;
color: var(--color-text-secondary);
line-height: 1.7;
margin-bottom: 40px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 600px) {
.hero__subheading {
font-size: 0.875rem;
padding-left: 20px;
padding-right: 20px;
line-height: 1.65;
}
}
/* Hero dual CTAs */
.hero__ctas {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.hero__ctas {
flex-direction: column;
gap: 10px;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.hero__ctas .btn--primary,
.hero__ctas .btn--outline {
width: 100%;
padding: 14px 24px;
}
}
/* Social proof bar */
.hero__proof {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 24px;
text-decoration: none;
position: relative;
}
.hero__proof::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 1px;
background: var(--color-text-tertiary);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
.hero__proof:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.hero__proof-stars {
color: var(--color-accent);
font-size: 0.72rem;
letter-spacing: 2px;
}
.hero__proof-text {
font-size: 0.78rem;
color: var(--color-text-tertiary);
letter-spacing: 0.03em;
}
/* Hero CTA button, premium shimmer + ambient glow */
.hero .btn--primary,
.hero .btn--outline {
padding: 18px 52px;
}
.hero .btn--primary {
font-size: 0.85rem;
padding: 18px 52px;
letter-spacing: 0.18em;
position: relative;
box-shadow:
0 0 0 1px rgba(201,162,39,0.35),
0 8px 40px rgba(201,162,39,0.2);
}
/* Travelling shimmer line across the button, uses transform instead of left
so the animation runs on the GPU compositor (no main-thread layout work). */
.hero .btn--primary::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(
to right,
transparent 0%,
rgba(255,255,255,0.22) 50%,
transparent 100%
);
transform: translateX(-150%) skewX(-20deg);
animation: heroButtonShimmer 3.5s ease-in-out infinite;
pointer-events: none;
will-change: transform;
}
@keyframes heroButtonShimmer {
0% { transform: translateX(-150%) skewX(-20deg); }
60% { transform: translateX(250%) skewX(-20deg); }
100% { transform: translateX(250%) skewX(-20deg); }
}
/* =============================================================
TRUST BAR
============================================================= */
.trust-bar {
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 24px 0;
background: var(--color-bg);
}
.trust-bar__grid {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.trust-bar__item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: border-color 0.4s var(--ease-smooth), transform 0.4s var(--ease-out-expo);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(201, 162, 39, 0.1),
inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.trust-bar__item:hover {
border-color: var(--color-border-hover);
transform: translateY(-2px);
}
.trust-bar__icon {
color: var(--color-accent);
display: flex;
align-items: center;
}
.trust-bar__text {
font-size: 0.85rem;
font-weight: 500;
color: var(--color-text-secondary);
}
@media (max-width: 640px) {
.trust-bar__grid { gap: 20px; }
.trust-bar__text { font-size: 0.78rem; }
}
/* =============================================================
PRODUCT GRID & CARDS
============================================================= */
.featured-products,
.collection-main {
padding: 80px 0;
}
.product-grid {
display: grid;
/* auto-fill (not auto-fit) preserves empty tracks when items are hidden by
the search filter, without this, a single matching product stretches
to fill the entire row width. */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
align-items: stretch;
justify-content: start;
}
/* Homepage featured products: 3-up on desktop, single column below 768px.
Stacks straight from 3 to 1 (skipping the 2-up step) so a curated row of
3 products never leaves an orphan card on tablet. */
.section-featured-products .product-grid {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
.section-featured-products .product-grid {
grid-template-columns: 1fr;
}
}
/* Collection-page variant: force 3 per row (set via section "products_per_row"
= "3"). Used on flagship/premium collection pages where each card should
feel larger and more featured rather than packed into a 4-up grid. */
.product-grid--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
.product-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.product-grid--3col { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.section-featured-products .product-grid {
grid-template-columns: 1fr;
}
}
/* Ensure the wrapper div in collection-main propagates height to the card inside */
.product-grid__item {
display: flex;
flex-direction: column;
}
/* Ensure both product-card and product-card-link custom elements fill their grid cell */
product-card,
product-card-link {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
/* ── Featured products hero mode ── */
.featured-products--hero {
padding-top: 88px;
}
.featured-products--hero .section-header {
margin-bottom: 64px;
}
.featured-products--hero .section-heading {
font-size: clamp(2.4rem, 5vw, 3.8rem);
letter-spacing: -0.03em;
}
.featured-products--hero .section-subheading {
font-size: 0.95rem;
max-width: 420px;
letter-spacing: 0.01em;
margin-top: 16px;
}
@media (max-width: 768px) {
.featured-products--hero {
padding-top: 52px;
}
.featured-products--hero .section-heading {
font-size: clamp(2rem, 8vw, 2.6rem);
}
}
/* ── Featured products bottom CTAs ── */
.fp-cta-wrap {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 48px;
flex-wrap: wrap;
}
.fp-cta-btn {
min-width: 220px;
text-align: center;
flex: 0 1 220px;
box-sizing: border-box;
}
@media (max-width: 480px) {
.fp-cta-wrap { flex-direction: column; width: 100%; padding: 0 12px; }
.fp-cta-btn { width: 100%; flex: none; min-width: 0; }
}
.fp-free-link {
font-size: 0.88rem;
color: var(--color-text-secondary);
text-decoration: none;
position: relative;
display: inline-block;
transition: color 0.3s var(--ease-smooth);
}
.fp-free-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s var(--ease-smooth);
}
.fp-free-link:hover {
color: var(--color-text);
}
.fp-free-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.product-grid--compact {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (max-width: 640px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
/* Ensure card content fills the full card height so all cards are equal */
.product-card__content {
flex: 1;
height: 100%;
}
/* Project-file card: "Watch the edit" pill overlaid on the image */
.product-card { position: relative; }
.product-card__watch {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 14px;
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
color: #1a1200;
text-decoration: none;
border: 1px solid rgba(201, 162, 39, 0.6);
/* Same gold gradient + slide-on-hover as the primary store buttons */
background: linear-gradient(to right,
#e8c84a 0%, #f0d060 49.9%,
#b8860b 50%, #d4af37 75%, #c9a227 100%);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
transition:
background-position 0.55s var(--ease-out-expo),
box-shadow 0.3s ease,
transform 0.3s ease;
}
.product-card__watch:hover {
background-position: 0% 0;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(201, 162, 39, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Project-file: "Watch the edit" text link under the product title */
.product-main__watch-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 8px 0 2px;
padding: 0;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-accent);
transition: color 0.2s ease;
}
.product-main__watch-link svg { flex-shrink: 0; }
.product-main__watch-link:hover {
color: var(--color-accent-hover);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Product Card */
.product-card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition:
opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.48s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.45s var(--ease-out-expo),
border-color 0.45s var(--ease-out-expo),
transform 0.45s var(--ease-out-expo);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.5),
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(201, 162, 39, 0.12),
inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.product-card:hover {
border-color: rgba(201,162,39,0.35);
transform: translateY(-4px);
box-shadow:
0 24px 56px rgba(0, 0, 0, 0.65),
0 6px 18px rgba(0, 0, 0, 0.4),
0 0 40px rgba(201,162,39,0.08),
inset 0 1px 0 rgba(201, 162, 39, 0.3),
inset 0 0 0 1px rgba(201, 162, 39, 0.06);
}
.product-card__link {
display: flex;
flex-direction: column;
height: 100%;
}
.product-card__media {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--color-bg-elevated);
}
.product-card__image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Hover image: sits on top, crossfades in, same timing as card lift */
.product-card__image--hover {
position: absolute;
inset: 0;
opacity: 0;
will-change: opacity;
transition: opacity 0.45s var(--ease-out-expo);
}
.product-card:hover .product-card__image--hover {
opacity: 1;
}
/* On touch devices, disable hover crossfade so first tap navigates directly */
@media (hover: none) {
.product-card__image--hover { display: none; }
}
.product-card__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-elevated);
}
.product-card__badge {
position: absolute;
top: 12px;
left: 12px;
background: var(--color-accent-muted);
color: var(--color-accent);
font-family: var(--font-body);
font-size: 0.6rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 5px 12px;
border-radius: 2px;
border: 1px solid rgba(201,162,39,0.3);
backdrop-filter: blur(10px);
}
.product-card__badge--free {
background: var(--color-success);
}
.product-card__info {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.product-card__title {
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 400;
letter-spacing: 0.03em;
margin-bottom: 8px;
line-height: 1.3;
color: var(--color-text);
}
.product-card__excerpt {
font-size: 0.8rem;
font-weight: 300;
color: var(--color-text-secondary);
line-height: 1.6;
margin-bottom: 16px;
flex: 1;
}
.product-card__footer {
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.product-card__price {
display: flex;
align-items: baseline;
gap: 6px;
}
.product-card__price-amount {
font-weight: 500;
font-size: 1rem;
color: var(--color-text);
letter-spacing: 0.02em;
}
.product-card__price-amount--free {
color: var(--color-success);
}
.product-card__price-compare {
font-size: 0.82rem;
color: var(--color-text-tertiary);
text-decoration: line-through;
margin-right: 8px;
}
.product-card__cta {
display: block;
width: 100%;
text-align: center;
padding: 11px 16px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #1a1200;
background: linear-gradient(to right, #e8c84a 0%, #f0d060 49.9%, #b8860b 50%, #d4af37 75%, #c9a227 100%);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
border: 1px solid rgba(201, 162, 39, 0.6);
transition:
background-position 0.4s var(--ease-smooth),
box-shadow 0.3s var(--ease-smooth);
position: static;
box-sizing: border-box;
}
.product-card__cta::after { display: none; }
.product-card:hover .product-card__cta {
background-position: 0% 0;
color: #1a1200;
box-shadow: 0 0 24px rgba(201, 162, 39, 0.3);
}
@media (max-width: 640px) {
.product-card__info { padding: 14px; }
.product-card__title { font-size: 0.88rem; }
.product-card__excerpt { display: none; }
.product-card__cta { padding: 10px 12px; font-size: 0.68rem; }
}
/* =============================================================
BENEFITS
============================================================= */
.benefits {
padding: 80px 0;
background: var(--color-bg-card);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.benefits__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
@media (max-width: 768px) {
.benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
.benefits__grid { grid-template-columns: 1fr; }
}
.benefits__item {
text-align: center;
padding: 32px 20px;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: border-color 0.4s var(--ease-smooth), transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.45),
0 2px 8px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(201, 162, 39, 0.12),
inset 0 0 0 1px rgba(255, 255, 255, 0.03);
transition: box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.benefits__item:hover {
border-color: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
box-shadow:
0 16px 44px rgba(0, 0, 0, 0.55),
0 4px 12px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(201, 162, 39, 0.2),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.benefits__icon {
margin-bottom: 16px;
display: flex;
justify-content: center;
}
.benefits__title {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 600;
margin-bottom: 8px;
}
.benefits__text {
font-size: 0.88rem;
color: var(--color-text-secondary);
line-height: 1.5;
}
/* =============================================================
REVIEWS
============================================================= */
.reviews-section {
padding: 80px 0;
}
.reviews-section__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (min-width: 580px) and (max-width: 900px) {
.reviews-section__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 579px) {
.reviews-section__grid { grid-template-columns: 1fr; }
}
.review-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 28px;
display: flex;
flex-direction: column;
min-width: 0;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.45),
0 2px 8px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(201, 162, 39, 0.1);
transition:
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.review-card--skeleton {
min-height: 200px;
animation: rs-pulse 1.4s ease-in-out infinite;
}
@keyframes rs-pulse {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.4; }
}
.review-card:not(.review-card--skeleton):hover {
border-color: rgba(201, 162, 39, 0.3);
transform: translateY(-5px);
box-shadow:
0 24px 56px rgba(0, 0, 0, 0.55),
0 6px 16px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(201, 162, 39, 0.12),
inset 0 1px 0 rgba(201, 162, 39, 0.3);
}
.review-card__stars {
display: flex;
gap: 2px;
margin-bottom: 16px;
}
.review-card__text {
font-size: 0.92rem;
color: var(--color-text-secondary);
line-height: 1.65;
margin-bottom: 20px;
font-style: italic;
flex: 1;
overflow-wrap: anywhere;
word-break: break-word;
}
.review-card__author {
display: flex;
flex-direction: column;
gap: 3px;
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 16px;
margin-top: auto;
}
.review-card__name {
font-weight: 600;
font-size: 0.88rem;
color: var(--color-text);
}
.review-card__product {
font-size: 0.78rem;
color: var(--color-accent);
opacity: 0.8;
}
.review-card[data-product-url] {
cursor: pointer;
}
.review-card__read-more {
display: inline;
font-size: 0.82rem;
font-style: normal;
font-weight: 500;
color: var(--color-accent);
text-decoration: none;
white-space: nowrap;
position: relative;
transition: color 0.3s var(--ease-smooth);
}
.review-card__read-more::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s var(--ease-smooth);
}
.review-card__read-more:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* Product reviews grid (product page) */
.product-reviews { padding: 60px 0; }
.product-reviews__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
/* =============================================================
DISCORD CTA
============================================================= */
.discord-cta {
position: relative;
padding: 100px 0;
text-align: center;
overflow: hidden;
}
.discord-cta__bg {
position: absolute;
inset: 0;
}
.discord-cta__glow {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 80% at 50% 50%, rgba(88, 101, 242, 0.1) 0%, transparent 70%);
}
.discord-cta__inner {
position: relative;
z-index: 1;
}
.discord-cta__icon {
color: #5865F2;
margin-bottom: 24px;
}
.discord-cta__heading {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
margin-bottom: 16px;
color: var(--color-text);
}
.discord-cta__text {
color: var(--color-text-secondary);
font-size: 1.05rem;
max-width: 480px;
margin: 0 auto 32px;
line-height: 1.6;
}
/* =============================================================
SHOP CTA
============================================================= */
/* ── The closing CTA, rebuilt against the reference ────────────────────────
The previous pass was a dark box with a rim, and the read was right: too
black, too wide, and welded to the footer. Theirs differs in four specific
ways, and all four are here.
1. IT FLOATS. Theirs has real dark space above AND below it, so it reads as
an object resting on the page. Ours ran straight into the footer, which
made it look like a section that had been given rounded corners.
2. IT IS BRIGHT. This is the big one. Theirs is mostly LIT — a broad warm
wash filling much of the card with the copy sitting inside the light.
Ours was black with a glow at the bottom edge, which is the hero's recipe
(a light behind an object) applied where it does not belong. A card has
nothing behind it; the card IS the lit thing.
3. THE LIGHT IS DIRECTIONAL. It enters low and from the left and rakes
across, so the top-right falls away to black. An evenly lit card is a
button; an unevenly lit one is a surface.
4. IT IS NARROWER. 1240 was full page width, so it never read as inset.
*/
.shop-cta {
position: relative;
margin: clamp(40px, 6vw, 88px) auto clamp(64px, 8vw, 112px);
max-width: 1080px;
padding: clamp(72px, 9vw, 116px) 0;
text-align: center;
overflow: hidden;
border-radius: 26px;
border: 1px solid rgba(212, 184, 106, 0.16);
background: #0b0805;
box-shadow:
inset 0 1px 0 rgba(255, 248, 238, 0.44),
0 -4px 22px -6px rgba(var(--hero-light), .20),
0 30px 80px rgba(0, 0, 0, 0.6);
}
@media (max-width: 1140px) { .shop-cta { margin-left: 20px; margin-right: 20px; } }
/* The hot centre of the top rim, fading before the corners. */
.shop-cta::after {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
pointer-events: none;
z-index: 3;
background: linear-gradient(90deg,
transparent 14%,
rgba(var(--hero-light), .32) 30%,
rgba(255, 253, 249, .95) 50%,
rgba(var(--hero-light), .32) 70%,
transparent 86%);
}
.shop-cta__bg {
position: absolute;
inset: 0;
}
/* The ribs, raked by the same light that lights the card. --f is larger than
the hero's because this box is narrower: keeping the RIB COUNT comparable is
what keeps the two surfaces reading as the same material. */
.shop-cta__glow {
position: absolute;
inset: 0;
--f: 4.4%;
/* theme.js measures --flute to pick the rib count. It is a LENGTH, unlike --f
above, because the engine sizes a probe element with it. */
--flute: 3.4vw;
background:
repeating-linear-gradient(90deg,
rgba(var(--hero-light), .26) 0,
rgba(var(--hero-light), .085) calc(var(--f) * .15),
rgba(0, 0, 0, 0) calc(var(--f) * .40),
rgba(0, 0, 0, .30) calc(var(--f) * .78),
rgba(0, 0, 0, .42) calc(var(--f) * .94),
rgba(var(--hero-light), .26) var(--f));
-webkit-mask-image: radial-gradient(ellipse 86% 96% at 26% 92%, #000 0%, rgba(0,0,0,.55) 44%, transparent 82%);
mask-image: radial-gradient(ellipse 86% 96% at 26% 92%, #000 0%, rgba(0,0,0,.55) 44%, transparent 82%);
}
/* ── Fewer, wider flutes on a phone ──────────────────────────────────────────
Measured 2026-08-25 at 390px: this card was building 27 ribs at 13px each,
against the hero's 6 at 65px. The hero has had a phone rule since it was
built (--flute:17vw); this card never got one, so it kept the desktop rib
pitch on a screen a third of the width and read as a dense stack of narrow
slats rather than as glass.
The two variables MUST describe the same rib, or the painted grooves and the
lit ribs drift out of step. --f is a percentage of THIS element; --flute is a
length that theme.js measures with a probe to choose the count. At 390px the
card is 350px wide, so:
--flute: 15vw -> 58.5px probe -> round(350 / 58.5) = 6 ribs
--f: 16.667% -> 58.3px painted, and JS lays ribs out at 100/6 = 16.667%
They agree to within a fifth of a pixel. Before this they did not: 4.4%
painted against 3.7% laid out, a 16% drift that is part of why the mobile
card looked muddy rather than ribbed. */
@media (max-width: 760px) {
.shop-cta__glow {
--f: 16.667%;
--flute: 15vw;
}
}
/* NO WASH. There was a broad radial bloom here filling the lower left, and it
read as exactly what it was: a big static ball of light sitting on the card.
The ribs are the effect. They already carry the light, they move, and which
of them are lit is the interesting part; a fixed glow underneath them adds
nothing the ribs were not already saying and reads as a gradient someone
forgot to remove. What lights the card now is the rib layer plus the edge,
both of which have a reason to be there.
If it ever needs more brightness, raise the rib alphas or AMBIENT in
theme.js, not this. */
/* ...and the dark it rakes into. Unmasked, so the far corner really does go
black rather than to a dim gold. */
.shop-cta__bg::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(108deg, transparent 30%, rgba(0, 0, 0, .30) 58%, rgba(0, 0, 0, .72) 100%);
}
.shop-cta__inner {
position: relative;
z-index: 1;
}
.shop-cta__heading {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
margin-bottom: 16px;
color: var(--color-text);
}
.shop-cta__text {
color: var(--color-text-secondary);
font-size: 1.05rem;
max-width: 480px;
margin: 0 auto 32px;
line-height: 1.6;
}
/* On a phone 1.05rem is 16.8px, which put this three lines deep and gave the
supporting sentence almost the same weight as the heading above it. Measured
2026-08-26: 316px wide, 81px tall. Down to 15px with a tighter leading, so it
reads as the subheading it is. */
@media (max-width: 560px) {
.shop-cta__text { font-size: 0.94rem; line-height: 1.55; margin-bottom: 26px; }
}
.shop-cta__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
/* On a phone these wrap onto their own lines, and because .btn sizes to its
label they came out 209px and 188px: two stacked buttons, centred, 21px
different in width. That reads as a mistake rather than as a hierarchy.
Measured 2026-08-25.
Matching the hero, where the same pair is already full-width and even. Equal
width also means the primary is not quietly the smaller of the two, which is
the wrong way round for the button you want pressed. */
@media (max-width: 560px) {
.shop-cta__actions { flex-direction: column; gap: 12px; width: 100%; }
.shop-cta__actions .btn { width: 100%; padding-left: 20px; padding-right: 20px; }
}
/* =============================================================
FOOTER
============================================================= */
.site-footer {
border-top: 1px solid var(--color-border);
padding: 80px 0 40px;
background: var(--color-bg);
}
.footer__grid {
display: grid;
/* brand + three link columns. This declared FIVE tracks, the last a 1.6fr
for the newsletter signup, which has since been removed. The track stayed,
so every page was laying four children into five columns and leaving a dead
1.6fr gap on the right, which read as the whole footer being shoved left.
Named tracks rather than auto-fit so the brand keeps its wider column. */
grid-template-columns: 1.8fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 48px;
align-items: start;
}
@media (max-width: 1024px) {
.footer__grid {
/* Same correction as above: the trailing 1.5fr belonged to the newsletter. */
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 32px;
}
.footer__grid > .footer__newsletter {
grid-column: 1 / -1;
}
}
@media (max-width: 768px) {
.footer__grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.footer__grid > .footer__brand,
.footer__grid > .footer__newsletter {
grid-column: 1 / -1;
}
/* Reorder: brand → newsletter → link columns */
.footer__grid > .footer__brand { order: 1; }
.footer__grid > .footer__newsletter { order: 2; }
.footer__grid > .footer__links { order: 3; }
}
@media (max-width: 480px) {
.footer__grid { grid-template-columns: 1fr; }
.footer__grid > .footer__brand,
.footer__grid > .footer__newsletter { grid-column: 1; }
}
.footer__logo {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
text-decoration: none;
transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo);
}
.footer__tagline {
font-size: 0.88rem;
color: var(--color-text-secondary);
line-height: 1.5;
margin-bottom: 20px;
}
.footer__social {
display: flex;
gap: 12px;
}
.footer__social-link {
color: var(--color-text-secondary);
transition: color var(--transition-fast);
display: flex;
align-items: center;
}
.footer__social-link:hover { color: var(--color-accent); }
.footer__heading {
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-text-secondary);
margin-bottom: 20px;
}
.footer__list { display: flex; flex-direction: column; gap: 10px; }
.footer__list a {
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-tertiary);
transition: color 0.3s var(--ease-smooth);
position: relative;
display: inline-block;
}
.footer__list a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s var(--ease-smooth);
}
.footer__list a:hover { color: var(--color-text); }
.footer__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer__affiliate-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer__affiliate-badge {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--color-accent);
background: rgba(201,162,39,0.12);
border: 1px solid rgba(201,162,39,0.25);
border-radius: 100px;
padding: 2px 7px;
white-space: nowrap;
line-height: 1.6;
}
.footer__newsletter-text {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin-bottom: 12px;
line-height: 1.5;
}
.footer__newsletter-field {
display: flex;
gap: 0;
}
.footer__newsletter-input {
width: 100%;
padding: 12px 14px 12px 38px;
font-size: 0.88rem;
font-family: inherit;
color: var(--color-text);
background: rgba(255,255,255,0.05);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.footer__newsletter-input:focus {
border-color: rgba(201,162,39,0.55);
box-shadow: 0 0 0 3px rgba(201,162,39,0.1);
}
.footer__newsletter-input::placeholder { color: var(--color-text-tertiary); }
.footer__newsletter-btn {
width: 100%;
margin-top: 10px;
}
.footer__bottom {
border-top: 1px solid var(--color-border);
padding-top: 24px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.footer__copyright {
font-size: 0.72rem;
color: var(--color-text-tertiary);
letter-spacing: 0.05em;
}
/* ── Currency selector (footer) ── */
.footer__currency-form { margin: 0; }
.footer__currency {
display: flex;
align-items: center;
gap: 5px;
color: var(--color-text-tertiary);
transition: color 0.2s ease;
}
.footer__currency:focus-within { color: var(--color-text-secondary); }
.footer__currency-select {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
color: inherit;
font-family: var(--font-body);
font-size: 0.72rem;
cursor: pointer;
padding: 0;
outline: none;
max-width: 180px;
}
.footer__currency-select:hover { color: var(--color-text-secondary); }
.footer__currency-select option { background: var(--color-bg-elevated); color: var(--color-text); }
/* =============================================================
PRODUCT PAGE
============================================================= */
.product-main {
padding: 40px 0 60px;
}
.product-main__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: start;
}
/* Direct grid children must allow shrinking below their content min-width.
Without this, products with the B/A sidebar (which has flex-shrink:0)
force the grid column to 474px+ even on 390px mobile viewports. */
.product-main__media,
.product-main__info {
min-width: 0;
}
@media (max-width: 768px) {
.product-main__grid {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
}
}
/* Media / Gallery */
.product-main__media-wrapper {
position: sticky;
top: 80px;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 10px;
}
.product-main__gallery-wrap { flex: 1; min-width: 0; }
.product-main__gallery { position: relative; }
/* Custom navigation cursor, desktop only */
@media (hover: hover) and (pointer: fine) {
.product-main__gallery { cursor: none; }
/* BA sidebar always gets pointer cursor */
.pg-ba-sidebar { cursor: default !important; }
.pg-ba-sub-thumb { cursor: pointer !important; }
}
.gallery-cursor {
position: absolute;
top: 0;
left: 0;
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(10, 8, 5, 0.52);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%);
z-index: 15;
will-change: transform;
transition: opacity 0.18s ease;
}
.gallery-cursor.is-visible { opacity: 1; }
.gallery-cursor.is-dim { opacity: 0.22 !important; }
.gallery-cursor svg {
width: 18px;
height: 18px;
stroke: rgba(255, 255, 255, 0.88);
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
display: none;
flex-shrink: 0;
}
.gallery-cursor svg.is-active { display: block; }
.product-main__image-slide {
display: none;
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-bg-elevated);
aspect-ratio: 1;
}
.product-main__image-slide.is-active { display: block; }
.product-main__image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-md);
display: block;
}
.product-main__video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-md);
display: block;
}
/* ── Horizon product-section overrides ─────────────────────────────
Products use the built-in Horizon product section (product-information).
The compiled base.css rule:
.slideshow--content-below-media slideshow-slide {
grid-template-rows: var(--grid-template-rows);
}
…reads an inline var set to "50dvh 1fr" on each slide. On mobile
50dvh ≈ 426 px, which is taller than the ~390 px viewport width,
making the image look oversized.
Fix: override the CSS variable to cap the image row at 100vw
(viewport width), keeping it square at most. */
@media (max-width: 749px) {
.product-information slideshow-slide.product-media-container {
--grid-template-rows: min(50dvh, 100vw) 1fr !important;
}
}
.product-main__thumbnails {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.product-main__thumb {
width: 64px;
height: 64px;
border-radius: var(--radius-sm);
overflow: hidden;
border: 2px solid transparent;
opacity: 0.5;
transition: opacity var(--transition-fast), border-color var(--transition-fast);
padding: 0;
}
.product-main__thumb.is-active,
.product-main__thumb:hover {
opacity: 1;
border-color: var(--color-accent);
}
.product-main__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-main__placeholder {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-elevated);
border-radius: var(--radius-md);
}
/* Video thumbnail play badge */
.product-main__thumb--video { position: relative; }
.video-thumb-badge {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.32);
border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.9);
pointer-events: none;
transition: background var(--transition-fast);
}
.product-main__thumb--video:hover .video-thumb-badge,
.product-main__thumb--video.is-active .video-thumb-badge {
background: rgba(0, 0, 0, 0.18);
}
/* Before/After Thumbnail Badge */
.product-main__thumb--ba { position: relative; }
.ba-thumb-badge {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
font-size: 0.5rem;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--color-text);
background: var(--color-accent);
border-radius: 2px;
padding: 2px 6px;
pointer-events: none;
white-space: nowrap;
}
/* Before/After Slider */
/* Product Gallery, Before/After Slider (pg-ba-* namespace) */
.pg-ba-slider {
position: relative;
width: 100%;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius-md);
user-select: none;
-webkit-user-select: none;
background: var(--color-bg-elevated);
}
/* Both images: fill the full container */
.pg-ba-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
/* Before mask: top layer, clipped from the right */
.pg-ba-before-mask {
position: absolute;
inset: 0;
clip-path: inset(0 50% 0 0);
}
.pg-ba-divider {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
transform: translateX(-50%);
pointer-events: none;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 18px rgba(255, 255, 255, 0.35);
}
.pg-ba-labels {
position: absolute;
bottom: 14px;
left: 14px;
right: 14px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.pg-ba-label {
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.92);
background: rgba(0, 0, 0, 0.48);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 4px 12px;
border-radius: 2px;
}
.pg-ba-label--after { color: var(--color-accent); }
/* BA Sidebar, pair-switcher left column */
/* Desktop: vertical column to the left of the main gallery */
.pg-ba-sidebar {
flex-shrink: 0;
width: 58px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 4px 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
opacity: 0;
pointer-events: none;
transform: translateX(-8px);
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
justify-content: flex-start;
align-self: stretch;
}
.pg-ba-sidebar::-webkit-scrollbar { display: none; }
.pg-ba-sidebar.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
/* Counter label, sits below the thumbnails */
.pg-ba-sub-counter {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
line-height: 1;
margin-top: 4px;
margin-bottom: 0;
flex-shrink: 0;
order: 10;
}
.pg-ba-sub-thumb {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 6px;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.12);
cursor: pointer;
background: none;
padding: 0;
transition: border-color 0.28s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}
/* Pagination control buttons */
.pg-ba-page-btn {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
border: 1px dashed rgba(255, 255, 255, 0.22);
color: rgba(255, 255, 255, 0.6);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.24s ease, border-color 0.24s ease, color 0.24s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pg-ba-page-btn:hover {
background: rgba(255, 255, 255, 0.11);
border-color: rgba(255, 255, 255, 0.38);
color: #fff;
transform: scale(1.03);
}
.pg-ba-sub-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pg-ba-sub-thumb:hover {
border-color: rgba(255, 255, 255, 0.45);
transform: scale(1.07);
}
.pg-ba-sub-thumb.is-active {
border-color: var(--color-accent);
box-shadow: 0 0 0 1px var(--color-accent), 0 0 14px rgba(196, 160, 80, 0.35);
transform: scale(1.05);
}
/* Mobile: default, sidebar hidden below gallery as horizontal strip */
@media (max-width: 749px) {
.product-main__media-wrapper {
flex-direction: column;
min-width: 0; /* prevent flex container from overflowing grid cell */
max-width: 100%;
}
.pg-ba-sidebar {
order: 2;
width: 100%;
min-width: 0; /* allow sidebar to shrink within the grid cell */
flex-direction: row;
height: 52px;
padding: 0 10px;
align-self: auto;
transform: translateY(-6px);
overflow-y: hidden;
overflow-x: auto;
justify-content: flex-start;
}
.pg-ba-sidebar.is-visible {
transform: translateY(0);
}
.product-main__gallery-wrap { order: 1; }
.pg-ba-sub-counter { display: none; }
.pg-ba-sub-thumb { width: 40px; height: 40px; }
.pg-ba-page-btn { width: 40px; height: 40px; }
/* ── B/A active on mobile: sidebar becomes a vertical column on the left ── */
/* :has() is supported in Chrome 105+, Safari 15.4+, Firefox 121+ */
.product-main__media-wrapper:has(.pg-ba-sidebar.is-visible) {
flex-direction: row;
align-items: stretch;
gap: 8px;
}
.product-main__media-wrapper:has(.pg-ba-sidebar.is-visible) .pg-ba-sidebar {
order: 0; /* left column */
width: 48px;
flex-direction: column;
height: auto;
align-self: stretch;
overflow-y: auto;
overflow-x: hidden;
padding: 4px 0;
transform: translateX(0); /* reset translate, sidebar slides in from left */
}
.product-main__media-wrapper:has(.pg-ba-sidebar.is-visible) .pg-ba-sub-thumb {
width: 40px;
height: 40px;
flex-shrink: 0;
}
.product-main__media-wrapper:has(.pg-ba-sidebar.is-visible) .pg-ba-page-btn {
width: 40px;
height: 40px;
flex-shrink: 0;
}
.product-main__media-wrapper:has(.pg-ba-sidebar.is-visible) .product-main__gallery-wrap {
order: 1;
flex: 1;
min-width: 0; /* allow it to shrink below its content width */
}
}
/* Product Info */
.product-main__info-inner { margin-bottom: 32px; }
/* Reviews row, left-aligned, below title, above price */
.product-main__reviews-row {
display: flex;
align-items: center;
gap: 7px;
margin-top: -6px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--color-border);
text-decoration: none;
cursor: pointer;
width: fit-content;
transition: opacity 0.2s ease;
}
.product-main__reviews-row:hover {
opacity: 0.75;
}
.product-main__reviews-row:not(.product-main__reviews-row--loaded) {
display: none;
}
.product-main__stars {
display: flex;
align-items: center;
gap: 2px;
line-height: 1;
}
.product-main__review-meta {
font-size: 0.8rem;
color: var(--color-text-secondary);
line-height: 1;
display: flex;
align-items: center;
gap: 0;
}
.pm-review-avg {
color: var(--color-text);
font-weight: 500;
}
.pm-review-sep {
color: var(--color-border);
padding: 0 1px;
}
.pm-review-count {
color: var(--color-text-secondary);
}
/* Product subtitle (e.g. ultra-editing-pack) */
.product-main__subtitle {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--color-accent);
margin-top: -10px;
margin-bottom: 20px;
text-transform: uppercase;
}
.product-main__type {
display: inline-block;
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-accent);
margin-bottom: 14px;
}
.product-main__title {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 18px;
color: var(--color-text);
}
.product-main__price {
margin-bottom: 24px;
}
.product-main__price-amount {
font-size: 1.6rem;
font-weight: 500;
color: var(--color-text);
}
.product-main__price-amount--free {
color: var(--color-success);
}
.product-main__price-compare {
font-size: 1.1rem;
color: var(--color-text-secondary);
text-decoration: line-through;
margin-right: 12px;
}
/* Trust signals */
.product-main__trust {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 24px;
}
.product-main__trust-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
color: var(--color-text-secondary);
}
.product-main__trust-item svg { flex-shrink: 0; }
/* Variants */
.product-main__variants { margin-bottom: 16px; }
.product-main__label {
display: block;
font-size: 0.82rem;
font-weight: 500;
margin-bottom: 6px;
color: var(--color-text-secondary);
}
.product-main__select {
width: 100%;
padding: 12px 14px;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-size: 0.92rem;
appearance: auto;
}
/* Buy button */
.product-main__actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.product-main__buy { width: 100%; }
.product-main__add-to-cart { width: 100%; }
/* Project-file: primary ULTRA upsell + secondary buy share identical width and height.
The upsell label is long and wraps to two lines, so a shared min-height keeps the
single-line secondary buy button exactly the same height. */
.product-main__pf-ultra,
.product-main__pf-buy {
width: 100%;
white-space: normal;
line-height: 1.25;
text-align: center;
padding-top: 13px;
padding-bottom: 13px;
min-height: 58px;
}
/* Project-file: gold gradient divider separating the upsell note from the description */
.product-main__pf-divider {
border: 0;
height: 1px;
width: 100%;
margin: 22px 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(212, 184, 106, 0.45) 50%,
transparent 100%
);
}
/* Project-file: subtle "read about ULTRA first" link under the upsell */
.product-main__pf-learn {
display: block;
margin: 10px 0 0;
text-align: center;
font-size: 0.8rem;
line-height: 1.4;
color: var(--color-text-secondary);
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.2s ease;
}
.product-main__pf-learn:hover { color: var(--color-accent); }
/* Hide the "free with ULTRA" project-file offer while a flash sale is active
(ULTRA loses its flash price inside the bundle, so the offer is a worse deal
during a flash). The .flash-active class is set synchronously before paint by
the announcement-bar script, so there is no flash-of-content. The standalone
"Buy the project file only" button stays visible. */
.flash-active .product-main__pf-ultra,
.flash-active .product-main__pf-ultra-note,
.flash-active .product-main__pf-learn,
.flash-active .product-main__pf-divider {
display: none !important;
}
/* ULTRA page: free-project-file bundle banner (shown only via the special link) */
.pm-pf-bundle-banner {
margin: 14px 0 4px;
padding: 12px 16px;
border-radius: var(--radius-md);
font-size: 0.9rem;
line-height: 1.45;
color: var(--color-text);
background: linear-gradient(135deg, rgba(212,184,106,0.12), rgba(212,184,106,0.04));
border: 1px solid rgba(212,184,106,0.4);
}
.pm-pf-bundle-banner strong { color: var(--color-accent); }
/* Product gallery: external (YouTube/Vimeo) video, click to play */
.product-main__extvideo {
position: relative;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
cursor: pointer;
}
.product-main__extposter { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-main__extplay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 74px;
height: 74px;
border-radius: 50%;
border: none;
background: linear-gradient(180deg, #d4b86a 0%, #b89441 100%);
color: #1a1200;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding-left: 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(212, 184, 106, 0.18);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product-main__extvideo:hover .product-main__extplay {
transform: translate(-50%, -50%) scale(1.06);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 10px rgba(212, 184, 106, 0.22);
}
/* Iframe fills the square slide and is cropped on the sides (cover behaviour),
matching the square product images. A 16:9 iframe is scaled so its height
fills the square; the overflowing left/right is clipped by the slide. */
.product-main__extframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 177.78%;
height: 100%;
border: 0;
display: block;
}
/* Compatibility */
.product-main__compat {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
color: var(--color-text-secondary);
margin-bottom: 12px;
}
/* Refund note */
.product-main__refund {
font-size: 0.82rem;
color: var(--color-text-secondary);
line-height: 1.5;
padding: 14px 18px;
background: var(--color-bg-card);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(201, 162, 39, 0.1),
inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
.product-main__refund a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Questions before you buy?, subtle link under Buy button with nav-style hover */
.product-main__questions-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 4px 0;
font-size: 0.8rem;
color: var(--color-text-secondary);
text-decoration: none;
transition: color 0.3s var(--ease-smooth), text-shadow 0.3s var(--ease-smooth);
}
.product-main__questions-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s var(--ease-smooth);
}
.product-main__questions-link svg {
flex-shrink: 0;
transition: color 0.3s var(--ease-smooth), filter 0.3s var(--ease-smooth);
}
.product-main__questions-link:hover {
color: var(--color-accent);
text-shadow: 0 0 10px rgba(197, 160, 40, 0.45);
}
.product-main__questions-link:hover svg {
color: var(--color-accent);
filter: drop-shadow(0 0 6px rgba(197, 160, 40, 0.55));
}
.product-main__questions-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* Accordions */
.product-main__details { margin-top: 8px; }
.product-main__accordion {
border-bottom: 1px solid var(--color-border);
}
.product-main__accordion-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text);
text-align: left;
}
.product-main__accordion-trigger svg {
transition: transform var(--transition-fast);
flex-shrink: 0;
}
.product-main__accordion-trigger.is-open svg {
transform: rotate(180deg);
}
.product-main__accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.product-main__accordion-content.is-open {
max-height: 2000px;
}
.product-main__description {
padding-bottom: 20px;
}
/* Sticky mobile buy bar */
.product-main__sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
background: rgba(16, 12, 8, 0.95);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid var(--color-border);
padding: 12px 0;
transform: translateY(100%);
transition: transform 0.3s ease;
display: none;
}
.product-main__sticky-bar.is-visible {
transform: translateY(0);
}
@media (max-width: 768px) {
.product-main__sticky-bar { display: block; }
}
.product-main__sticky-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.product-main__sticky-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.product-main__sticky-title {
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-main__sticky-price {
font-size: 0.82rem;
color: var(--color-accent);
font-weight: 600;
}
.product-main__sticky-btn {
flex-shrink: 0;
padding: 12px 24px;
width: auto;
}
/* =============================================================
PRODUCT DETAIL TABS
============================================================= */
.product-tabs {
padding: 48px 0 64px;
border-top: 1px solid var(--color-border);
}
/* Tab navigation pills */
.product-tabs__nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 32px;
}
.product-tabs__tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 30px;
border-radius: 3px;
border: 1px solid rgba(201,162,39,0.3);
background: linear-gradient(to right,
rgba(201,162,39,0.18) 0%, rgba(212,175,55,0.12) 49.9%,
rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.04) 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text);
cursor: pointer;
transition:
background-position 0.55s var(--ease-out-expo),
box-shadow 0.3s ease,
border-color 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
white-space: nowrap;
}
.product-tabs__tab:hover {
background-position: 0% 0;
border-color: rgba(201,162,39,0.5);
color: var(--color-text);
box-shadow: 0 6px 28px rgba(201,162,39,0.25), 0 2px 8px rgba(201,162,39,0.15);
transform: translateY(-1px);
}
.product-tabs__tab.is-active {
background: linear-gradient(to right,
#e8c84a 0%, #f0d060 49.9%,
#c9a227 50%, #b8860b 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
border-color: rgba(201,162,39,0.6);
color: #1a1200;
font-weight: 500;
box-shadow: 0 4px 20px rgba(201,162,39,0.3), 0 2px 8px rgba(201,162,39,0.15);
}
.product-tabs__tab.is-active:hover {
background-position: 0% 0;
box-shadow: 0 8px 36px rgba(201,162,39,0.45), 0 2px 8px rgba(201,162,39,0.2);
transform: translateY(-1px);
}
.product-tabs__tab svg {
flex-shrink: 0;
}
/* Tab panels */
.product-tabs__panel {
display: none;
animation: ptFadeIn 0.3s ease;
}
.product-tabs__panel.is-active {
display: block;
}
@keyframes ptFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Card wrapper */
.product-tabs__card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 32px;
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.55),
0 4px 14px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(201, 162, 39, 0.20),
inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.product-tabs__heading {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 24px;
color: var(--color-text);
}
/* ── Overview Tab ── */
.pt-overview__grid {
display: flex;
flex-direction: column;
gap: 0;
}
.pt-overview__row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--color-border);
}
.pt-overview__row:last-child {
border-bottom: none;
}
.pt-overview__label {
font-size: 0.88rem;
color: var(--color-text-secondary);
font-weight: 500;
}
.pt-overview__label--hint {
display: inline-flex;
align-items: center;
gap: 5px;
position: relative;
cursor: help;
}
.pt-overview__hint-icon {
color: var(--color-text-tertiary);
opacity: 0.65;
transition: opacity 0.2s ease;
flex-shrink: 0;
}
.pt-overview__label--hint:hover .pt-overview__hint-icon,
.pt-overview__label--hint:focus-visible .pt-overview__hint-icon {
opacity: 1;
color: var(--color-accent);
}
.pt-overview__hint {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
z-index: 20;
width: max-content;
max-width: 260px;
padding: 9px 12px;
border-radius: 8px;
background: var(--color-bg-card, #1a1a1a);
color: var(--color-text, #fff);
border: 1px solid var(--color-border, rgba(255,255,255,0.1));
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
font-size: 0.78rem;
font-weight: 400;
line-height: 1.45;
text-align: left;
white-space: normal;
opacity: 0;
pointer-events: none;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.pt-overview__label--hint:hover .pt-overview__hint,
.pt-overview__label--hint:focus-visible .pt-overview__hint {
opacity: 1;
transform: translateY(0);
}
.pt-files__disclaimer {
display: flex;
align-items: flex-start;
gap: 7px;
margin: 14px 4px 0;
font-size: 0.76rem;
font-style: italic;
line-height: 1.45;
color: var(--color-text-tertiary);
}
.pt-files__disclaimer svg {
flex-shrink: 0;
margin-top: 2px;
opacity: 0.7;
}
.pt-overview__value {
font-size: 0.88rem;
color: var(--color-text);
font-weight: 500;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.pt-overview__formats {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
.pt-overview__format-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
background: rgba(201, 162, 39, 0.1);
color: var(--color-accent);
font-size: 0.78rem;
font-weight: 600;
font-family: monospace;
letter-spacing: 0.02em;
}
.pt-overview__link {
color: var(--color-accent);
text-decoration: none;
transition: color var(--transition-fast);
}
.pt-overview__link:hover {
color: var(--color-accent-hover);
text-decoration: underline;
}
/* CTA cards */
.pt-overview__ctas {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 24px;
border-top: 1px solid var(--color-border);
}
.pt-overview__cta {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-bg-elevated);
color: var(--color-text);
text-align: left;
text-decoration: none;
cursor: pointer;
transition: border-color 0.25s ease, background 0.25s ease;
}
.pt-overview__cta:hover {
border-color: var(--color-accent);
background: rgba(201, 162, 39, 0.04);
}
.pt-overview__cta > svg:first-child {
flex-shrink: 0;
color: var(--color-accent);
}
.pt-overview__cta > span {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.pt-overview__cta strong {
font-size: 0.9rem;
font-weight: 600;
}
.pt-overview__cta small {
font-size: 0.78rem;
color: var(--color-text-secondary);
}
.pt-overview__cta > svg:last-child {
flex-shrink: 0;
color: var(--color-text-secondary);
}
/* ── Files Tab ── */
.pt-files__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.pt-files__summary {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.88rem;
color: var(--color-text-secondary);
font-weight: 500;
}
.pt-files__search-wrap {
position: relative;
flex: 1;
max-width: 320px;
min-width: 180px;
}
.pt-files__search-wrap svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-secondary);
pointer-events: none;
}
.pt-files__search {
width: 100%;
padding: 9px 12px 9px 36px;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text);
font-size: 0.85rem;
outline: none;
transition: border-color var(--transition-fast);
}
.pt-files__search:focus {
border-color: var(--color-accent);
}
.pt-files__search::placeholder {
color: var(--color-text-secondary);
opacity: 0.6;
}
/* Breadcrumbs */
.pt-files__breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 12px;
font-size: 0.82rem;
}
.pt-files__crumb {
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 4px 6px;
border-radius: var(--radius-sm);
transition: color var(--transition-fast), background var(--transition-fast);
font-size: 0.82rem;
}
.pt-files__crumb:hover {
color: var(--color-accent);
background: rgba(201, 162, 39, 0.06);
}
.pt-files__crumb.is-active {
color: var(--color-text);
font-weight: 600;
cursor: default;
}
.pt-files__crumb.is-active:hover {
background: none;
color: var(--color-text);
}
.pt-files__crumb-sep {
color: var(--color-text-secondary);
opacity: 0.4;
font-size: 0.75rem;
user-select: none;
}
/* File list */
.pt-files__list {
display: flex;
flex-direction: column;
gap: 2px;
}
.pt-files__item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
cursor: default;
}
.pt-files__item:hover {
background: rgba(255, 255, 255, 0.03);
}
.pt-files__item--folder {
cursor: pointer;
}
.pt-files__item--folder:hover {
background: rgba(201, 162, 39, 0.05);
}
.pt-files__item-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Icon color variants */
.pt-files__item-icon--folder { background: rgba(201, 162, 39, 0.12); color: var(--color-accent); }
.pt-files__item-icon--preset { background: rgba(201, 162, 39, 0.12); color: var(--color-accent); }
.pt-files__item-icon--video { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
.pt-files__item-icon--audio { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.pt-files__item-icon--image { background: rgba(192, 132, 252, 0.12); color: #c084fc; }
.pt-files__item-icon--doc { background: rgba(248, 113, 113, 0.12); color: #f87171; }
.pt-files__item-icon--project { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
.pt-files__item-icon--lut { background: rgba(45, 212, 191, 0.12); color: #2dd4bf; }
.pt-files__item-icon--default { background: rgba(255, 255, 255, 0.06); color: var(--color-text-secondary); }
.pt-files__item-name {
flex: 1;
font-size: 0.88rem;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pt-files__item-meta {
font-size: 0.78rem;
color: var(--color-text-secondary);
white-space: nowrap;
}
.pt-files__item-badge {
padding: 2px 8px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.05);
color: var(--color-text-secondary);
}
.pt-files__item-chevron {
flex-shrink: 0;
color: var(--color-text-secondary);
opacity: 0.5;
}
.pt-files__empty {
text-align: center;
padding: 32px 16px;
color: var(--color-text-secondary);
font-size: 0.88rem;
}
/* ── Plugins Tab ── */
.pt-plugins__info {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 16px;
border-radius: var(--radius-md);
background: rgba(201, 162, 39, 0.05);
border: 1px solid rgba(201, 162, 39, 0.12);
margin-bottom: 20px;
font-size: 0.82rem;
color: var(--color-text-secondary);
line-height: 1.5;
}
.pt-plugins__info svg {
flex-shrink: 0;
color: var(--color-accent);
margin-top: 1px;
}
.pt-plugins__list {
display: flex;
flex-direction: column;
gap: 2px;
}
.pt-plugins__item {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
}
.pt-plugins__item:hover {
background: rgba(255, 255, 255, 0.03);
}
.pt-plugins__icon {
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: rgba(201, 162, 39, 0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--color-accent);
}
.pt-plugins__details {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.pt-plugins__name {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-text);
}
.pt-plugins__desc {
font-size: 0.78rem;
color: var(--color-text-secondary);
}
.pt-plugins__link {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--color-border);
font-size: 0.78rem;
font-weight: 500;
color: var(--color-text-secondary);
text-decoration: none;
white-space: nowrap;
transition: border-color var(--transition-fast), color var(--transition-fast);
flex-shrink: 0;
}
.pt-plugins__link:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.pt-plugins__footer {
padding-top: 16px;
margin-top: 8px;
border-top: 1px solid var(--color-border);
font-size: 0.82rem;
color: var(--color-text-secondary);
text-align: center;
}
/* ── Product Tabs Mobile ── */
@media (max-width: 768px) {
.product-tabs {
padding: 32px 0 48px;
}
.product-tabs__card {
padding: 20px 16px;
}
.product-tabs__nav {
gap: 8px;
margin-bottom: 24px;
}
.product-tabs__tab {
padding: 10px 20px;
font-size: 0.78rem;
}
.pt-overview__row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 12px 0;
}
.pt-overview__value {
text-align: left;
}
.pt-overview__formats {
justify-content: flex-start;
}
.pt-files__header {
flex-direction: column;
align-items: stretch;
}
.pt-files__search-wrap {
max-width: none;
}
.pt-plugins__item {
padding: 12px 8px;
gap: 10px;
}
}
/* =============================================================
SHOP / COLLECTION PAGE
============================================================= */
/* --- Shop Hero --- */
.shop-hero {
position: relative;
padding: 72px 0 56px;
text-align: center;
overflow: hidden;
}
.shop-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.shop-hero__gradient {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(201, 162, 39, 0.06) 0%, transparent 70%);
}
.shop-hero__inner {
position: relative;
z-index: 1;
}
.shop-hero__badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
border: 1px solid var(--color-accent);
border-radius: 999px;
padding: 6px 18px;
margin-bottom: 24px;
}
.shop-hero__heading {
font-family: var(--font-heading);
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 16px;
color: var(--color-text);
}
/* accent gradient handled globally */
.shop-hero__subheading {
font-size: 1.05rem;
color: var(--color-text-secondary);
line-height: 1.6;
max-width: 560px;
margin: 0 auto;
}
/* --- Collection Filter Tabs --- */
.shop-tabs {
padding: 32px 0;
}
.shop-tabs__list {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.shop-tabs__tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
border-radius: 999px;
border: 1px solid var(--color-border);
font-size: 0.88rem;
font-weight: 500;
color: var(--color-text-secondary);
background: linear-gradient(to right,
#e8c84a 0%, #f0d060 49.9%,
transparent 50%, transparent 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
transition:
background-position 0.55s var(--ease-out-expo),
color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
white-space: nowrap;
cursor: pointer;
}
.shop-tabs__tab:hover {
background-position: 0% 0;
border-color: rgba(201,162,39,0.7);
color: #1a1200;
transform: translateY(-1px);
box-shadow: 0 6px 28px rgba(201,162,39,0.3), 0 2px 8px rgba(201,162,39,0.15);
}
.shop-tabs__tab.is-active {
background: linear-gradient(to right, #e8c84a 0%, #f0d060 50%, #d4af37 100%);
background-size: 100% 100%;
border-color: var(--color-accent);
color: #1a1200;
font-weight: 600;
}
.shop-tabs__count {
font-size: 0.75rem;
opacity: 0.7;
}
.shop-tabs__tab.is-active .shop-tabs__count {
opacity: 0.8;
}
@media (max-width: 480px) {
.shop-tabs__tab {
padding: 8px 16px;
font-size: 0.82rem;
}
}
/* --- Search & Sort Toolbar --- */
.shop-toolbar {
padding: 0 0 32px;
}
.shop-toolbar__inner {
display: flex;
gap: 16px;
align-items: center;
max-width: 780px;
margin: 0 auto;
}
.shop-toolbar__search {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
transition: border-color 0.25s ease;
}
.shop-toolbar__search:focus-within {
border-color: var(--color-accent);
}
.shop-toolbar__search-icon {
color: var(--color-text-secondary);
flex-shrink: 0;
}
.shop-toolbar__search-input {
flex: 1;
font-size: 0.92rem;
color: var(--color-text);
background: transparent;
border: none;
outline: none;
}
.shop-toolbar__search-input::placeholder {
color: var(--color-text-tertiary);
}
.shop-toolbar__sort {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
transition: border-color 0.25s ease;
flex-shrink: 0;
}
.shop-toolbar__sort:focus-within {
border-color: var(--color-accent);
}
.shop-toolbar__sort-select {
font-size: 0.92rem;
color: var(--color-text);
background: transparent;
border: none;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
padding-right: 4px;
}
.shop-toolbar__sort-select option {
background: var(--color-bg-card);
color: var(--color-text);
}
@media (max-width: 640px) {
.shop-toolbar__inner {
flex-direction: column;
}
.shop-toolbar__sort {
width: 100%;
}
.shop-toolbar__sort-select { flex: 1; }
}
/* --- Shop Products Grid --- */
.shop-products {
padding: 0 0 80px;
}
/* All-packs page: more compact + scrollable tabs on mobile */
@media (max-width: 768px) {
.shop-hero { padding: 40px 0 26px; }
.shop-hero__heading { margin-bottom: 12px; }
.shop-hero__subheading { font-size: 0.95rem; }
.shop-tabs { padding: 16px 0; }
.shop-toolbar { padding: 0 0 18px; }
.shop-products { padding: 0 0 48px; }
}
@media (max-width: 640px) {
/* Filter tabs become one horizontal scroll row instead of wrapping to multiple lines */
.shop-tabs__list {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.shop-tabs__list::-webkit-scrollbar { display: none; }
.shop-tabs__tab { flex: 0 0 auto; }
}
.product-grid__item {
transition: opacity 0.2s ease;
}
.shop-products__no-results {
text-align: center;
color: var(--color-text-secondary);
padding: 60px 0;
font-size: 1.05rem;
}
.shop-products__empty {
text-align: center;
padding: 80px 0;
color: var(--color-text-secondary);
}
.shop-products__empty svg { margin: 0 auto 16px; display: block; }
.shop-products__empty p { font-size: 1.1rem; margin-bottom: 8px; }
/* --- Pagination --- */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 48px;
}
.pagination__link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-size: 0.88rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.pagination__link:hover {
border-color: var(--color-accent);
color: var(--color-text);
}
.pagination__link--current {
background: var(--color-accent);
color: var(--color-text);
border-color: var(--color-accent);
font-weight: 600;
}
/* =============================================================
GENERIC PAGE
============================================================= */
.page-main {
padding: 60px 0 80px;
}
.page-main__inner {
max-width: 720px;
margin: 0 auto;
}
.page-main__title {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 32px;
text-align: center;
}
/* =============================================================
PRODUCT RECOMMENDATIONS
============================================================= */
.product-recs {
padding: 60px 0 80px;
border-top: 1px solid var(--color-border);
}
/* =============================================================
FOCUS STYLES
============================================================= */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
outline: none;
}
/* =============================================================
SKIP LINK
============================================================= */
.skip-link:focus {
position: fixed;
top: 8px;
left: 8px;
z-index: 9999;
width: auto;
height: auto;
padding: 12px 20px;
clip: auto;
overflow: visible;
white-space: normal;
background: var(--color-accent);
color: var(--color-text);
border-radius: var(--radius-sm);
font-weight: 600;
}
/* =============================================================
BEFORE / AFTER COMPARISON SLIDER
============================================================= */
.before-after {
background: var(--color-bg);
}
.ba-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 3rem;
}
@media (min-width: 700px) {
.ba-grid--2,
.ba-grid--3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.ba-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
}
/* Container */
.ba-item {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.ba-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 12px;
cursor: ew-resize;
user-select: none;
background: #111;
border: 1px solid rgba(255, 255, 255, 0.06);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.ba-container.is-hovered {
border-color: rgba(201, 162, 39, 0.3);
box-shadow: 0 0 40px rgba(201, 162, 39, 0.08);
}
/* Layers */
.ba-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.ba-after {
clip-path: inset(0 50% 0 0);
will-change: clip-path;
}
/* Media */
.ba-media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
/* Empty state */
.ba-empty {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
background: #141414;
color: var(--color-muted);
font-size: 0.8rem;
}
.ba-empty--after {
background: #1a1608;
color: rgba(201, 162, 39, 0.5);
}
/* Labels */
.ba-label {
position: absolute;
bottom: 12px;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(6px);
color: #fff;
pointer-events: none;
}
.ba-label--before {
left: 12px;
}
.ba-label--after {
right: 12px;
left: auto;
color: var(--color-accent);
}
/* Divider line, bare, no handle */
.ba-divider {
position: absolute;
top: 0;
left: 50%;
width: 1.5px;
height: 100%;
background: rgba(255, 255, 255, 0.85);
transform: translateX(-50%);
pointer-events: none;
will-change: left;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
z-index: 10;
}
/* Mobile play button (hidden once videos autoplay) */
.ba-play-btn {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 15;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
border: none;
cursor: pointer;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.ba-play-btn svg {
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
transition: transform 0.2s ease;
}
.ba-play-btn:active svg {
transform: scale(0.92);
}
/* Only show on touch devices when videos are paused */
@media (hover: none) and (pointer: coarse) {
.ba-play-btn.is-visible { display: flex; }
}
/* Caption */
.ba-caption {
font-size: 0.8rem;
color: var(--color-muted);
text-align: center;
line-height: 1.5;
}
/* CTA */
.ba-cta-wrap {
margin-top: 3rem;
text-align: center;
}
.ba-cta-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.88rem;
font-weight: 600;
color: var(--color-text-secondary);
text-decoration: none;
position: relative;
transition: color 0.3s var(--ease-smooth);
}
.ba-cta-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s var(--ease-smooth);
}
.ba-cta-link:hover {
color: var(--color-text);
}
.ba-cta-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* ============================================================
ANNOUNCEMENT BAR
============================================================ */
/* =============================================================
ANNOUNCEMENT BAR, flash-sale countdown strip
============================================================= */
/* ── Outer bar ── */
.ab-bar {
position: relative;
width: 100%;
background: linear-gradient(135deg, #150f00 0%, #0a0700 40%, #150f00 100%);
border-bottom: 1px solid rgba(197, 160, 40, 0.25);
z-index: 200;
overflow: hidden;
}
/* Animated gold sweep */
.ab-bar::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(197,160,40,0.08) 50%, transparent 100%);
animation: abSweep 3.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes abSweep {
0%, 100% { opacity: 0; transform: translateX(-40%); }
50% { opacity: 1; transform: translateX(40%); }
}
/* Gold top accent line */
.ab-bar__accent {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
to right,
transparent 0%,
#b8860b 20%,
#f0d060 50%,
#b8860b 80%,
transparent 100%
);
}
/* ── Inner layout ── */
.ab-bar__inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 48px 0 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
min-height: 56px;
flex-wrap: wrap;
}
/* ── Left promo group ── */
.ab-bar__promo {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ab-bar__label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text);
animation: abBoltPulse 1.8s ease-in-out infinite;
}
@keyframes abBoltPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
/* Thin vertical separator */
.ab-bar__sep {
display: inline-block;
width: 1px;
height: 11px;
background: rgba(255, 255, 255, 0.15);
flex-shrink: 0;
}
.ab-bar__discount {
display: inline-block;
background: var(--gradient-gold);
color: #120d00;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
padding: 3px 9px;
border-radius: 2px;
line-height: 1.5;
}
.ab-bar__sale-name {
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text-secondary);
opacity: 0.8;
}
/* ── Countdown group ── */
.ab-bar__countdown {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.ab-bar__ends-in {
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--color-text-secondary);
opacity: 0.7;
margin-right: 2px;
}
.ab-bar__units {
display: flex;
align-items: center;
gap: 3px;
}
.ab-bar__unit {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.ab-bar__digit-box {
background: transparent;
border: none;
box-shadow: none;
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.ab-bar__digit {
font-size: 1.05rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
font-family: var(--font-body);
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.15;
letter-spacing: 0;
}
.ab-bar__unit-label {
font-size: 0.5rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-secondary);
opacity: 0.45;
line-height: 1;
}
.ab-bar__colon {
font-size: 0.95rem;
font-weight: 700;
color: var(--color-accent);
opacity: 0.6;
align-self: flex-start;
margin-top: 3px;
line-height: 1;
}
/* ── Dismiss button ── */
.ab-bar__dismiss {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: transparent;
border: none;
cursor: pointer;
color: var(--color-text-secondary);
opacity: 0.45;
transition: opacity 0.2s ease;
padding: 0;
}
.ab-bar__dismiss:hover {
opacity: 0.9;
}
/* ── Mobile ── */
@media (max-width: 640px) {
.ab-bar__inner {
gap: 12px;
padding: 6px 38px 6px 12px;
min-height: 44px;
}
.ab-bar__sale-name { display: none; }
.ab-bar__digit { font-size: 0.85rem; }
}
/* ============================================================
STATS COUNTER SECTION
============================================================ */
.stats-section {
padding: 64px 0;
background: var(--color-bg);
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
.stats-item {
padding: 32px 24px;
text-align: center;
position: relative;
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.45),
0 2px 6px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(201, 162, 39, 0.12),
inset 0 0 0 1px rgba(255, 255, 255, 0.03);
transition: box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.stats-item:hover {
border-color: rgba(255, 255, 255, 0.12);
transform: translateY(-2px);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.55),
0 4px 12px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(201, 162, 39, 0.2),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Remove the old pseudo-element dividers, now using gap+cards */
.stats-item + .stats-item::before { display: none; }
.stats-number {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--color-accent);
line-height: 1;
display: block;
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.stats-label {
font-size: 0.875rem;
color: var(--color-text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ============================================================
FAQ SECTION
============================================================ */
.faq-section {
padding: 80px 0;
}
.faq-section .section-heading {
margin-bottom: 48px;
}
.faq-list {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.faq-item {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-card);
transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.4),
0 1px 4px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(201, 162, 39, 0.10),
inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
.faq-item:hover {
border-color: rgba(255,255,255,0.12);
transform: translateY(-3px);
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.5),
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(201, 162, 39, 0.12),
inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.faq-item.is-open {
border-color: rgba(201, 162, 39, 0.22);
background: rgba(201, 162, 39, 0.025);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.55),
0 3px 10px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(201, 162, 39, 0.30),
inset 0 0 0 1px rgba(201, 162, 39, 0.06);
}
.faq-question {
width: 100%;
background: none;
border: none;
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.94rem;
font-weight: 500;
text-align: left;
padding: 18px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
transition: color 0.2s ease;
}
.faq-question:hover {
color: var(--color-accent);
}
.faq-item.is-open .faq-question {
color: var(--color-accent);
}
.faq-chevron {
flex-shrink: 0;
color: var(--color-text-secondary);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), color 0.2s ease;
}
.faq-item.is-open .faq-chevron {
transform: rotate(180deg);
color: var(--color-accent);
}
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s cubic-bezier(0.4,0,0.2,1);
}
.faq-item.is-open .faq-answer {
grid-template-rows: 1fr;
}
.faq-answer > div {
overflow: hidden;
color: var(--color-text-secondary);
font-size: 0.91rem;
line-height: 1.75;
}
.faq-answer p { margin: 0 0 0.6em; padding: 0 20px; }
.faq-answer p:empty { display: none; }
.faq-answer p:first-of-type:not(:empty) { padding-top: 4px; }
.faq-answer p:last-of-type:not(:empty) { padding-bottom: 20px; margin-bottom: 0; }
.faq-answer strong, .faq-answer b { color: var(--color-text); font-weight: 600; }
.faq-answer em, .faq-answer i { font-style: italic; }
.faq-answer a { color: var(--color-accent); text-decoration: underline; text-decoration-color: rgba(200,164,78,0.4); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.faq-answer a:hover { text-decoration-color: var(--color-accent); }
.faq-answer ul, .faq-answer ol { padding: 0 20px 0 calc(20px + 1.4em); margin: 0.4em 0 0.6em; }
.faq-answer ul:last-child, .faq-answer ol:last-child { padding-bottom: 20px; margin-bottom: 0; }
.faq-answer ul { list-style: disc; }
.faq-answer ol { list-style: decimal; }
.faq-answer li { margin-bottom: 0.25em; }
.faq-answer li:last-child { margin-bottom: 0; }
/* =============================================================
PACK COMPARISON TABLE
============================================================= */
.pack-comparison {
padding: 100px 0 80px;
}
/* ── Scroll wrapper ── */
.pc-wrap {
overflow: visible;
padding: 20px 20px 0;
margin: 0 -20px;
}
@media (max-width: 767px) {
.pc-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.pc-wrap::-webkit-scrollbar { display: none; }
}
/* ── Table ── */
.pc-table {
width: 100%;
min-width: 680px;
display: block; /* was: table, table formatting context breaks sticky z-index */
overflow: visible;
}
/* ── Rows ── */
.pc-row {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr 1fr;
align-items: stretch;
}
/* ── Base cell ── */
.pc-cell {
padding: 0 12px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* label column, left-aligned */
.pc-cell--label {
justify-content: flex-start;
text-align: left;
color: var(--color-text-secondary);
font-size: 0.875rem;
padding-left: 0;
}
/* ── ULTRA column, gold highlight strip ── */
.pc-cell--featured-col {
background: rgba(201, 162, 39, 0.045);
border-left: 1px solid rgba(201, 162, 39, 0.20);
border-right: 1px solid rgba(201, 162, 39, 0.20);
transition: background 0.28s ease, border-color 0.28s ease;
}
/* ── Body panel, glass card wrapping all feature rows ── */
.pc-body {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.6),
0 6px 20px rgba(0, 0, 0, 0.38),
inset 0 1px 0 rgba(201, 162, 39, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.03);
overflow: clip;
margin-top: 10px;
/* No position/z-index/isolation, keeping pc-body as a plain block
element means it never creates a stacking context that could compete
with the sticky pc-row--heads above it. */
}
/* Column strips for packs 1 & 2 inside the body panel */
.pc-body .pc-row > .pc-cell:nth-child(2) {
background: rgba(255, 255, 255, 0.018);
border-right: 1px solid rgba(255, 255, 255, 0.055);
}
.pc-body .pc-row > .pc-cell:nth-child(3) {
background: rgba(255, 255, 255, 0.018);
border-right: 1px solid rgba(255, 255, 255, 0.055);
}
/* Label column separator */
.pc-body .pc-row .pc-cell--label {
border-right: 1px solid rgba(255, 255, 255, 0.055);
}
/* header cell, transparent container, same structure as other pack cells */
.pc-cell--featured {
flex-direction: column;
align-items: center;
justify-content: flex-end;
position: relative;
overflow: visible;
}
/* ── Pack header row ── */
.pc-row--heads {
align-items: stretch;
overflow: visible;
}
/* Pack card cells, solid background blocks scrolling rows from bleeding through.
The first column fades in from the left; the last fades out to the right;
a top gradient softens the entry just below the sticky navbar. */
.pc-row--heads .pc-cell--pack {
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 56px 8px 20px;
overflow: visible;
/* Default: solid fill + subtle top fade so the dark area
doesn't hard-start right below the navbar */
background:
linear-gradient(to bottom, transparent 0px, var(--color-bg) 18px) top / 100% 18px no-repeat,
var(--color-bg);
}
/* Soft left fade: first pack column */
.pc-row--heads .pc-cell--pack:nth-child(2) {
background:
linear-gradient(to right, transparent 0px, var(--color-bg) 28px) left / 28px 100% no-repeat,
linear-gradient(to bottom, transparent 0px, var(--color-bg) 18px) top / 100% 18px no-repeat,
var(--color-bg);
}
/* Soft right fade: last pack column (ULTRA) */
.pc-row--heads .pc-cell--pack:last-child {
background:
linear-gradient(to left, transparent 0px, var(--color-bg) 28px) right / 28px 100% no-repeat,
linear-gradient(to bottom, transparent 0px, var(--color-bg) 18px) top / 100% 18px no-repeat,
var(--color-bg);
}
.pc-row--heads .pc-cell--featured {
padding: 56px 8px 20px;
}
/* ── Feature group label (above table) ── */
.pc-section-label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-text-secondary);
opacity: 0.45;
margin-bottom: 14px;
}
/* ── Pack card, interactive link wrapping each pack header ── */
.pc-pack-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
width: 100%;
padding: 18px 14px 14px;
border-radius: 12px;
border: 1px solid var(--color-border);
background: var(--color-bg-card);
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.45),
0 2px 6px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(201, 162, 39, 0.1),
inset 0 0 0 1px rgba(255, 255, 255, 0.03);
transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.28s ease,
background 0.28s ease;
}
.pc-pack-card:hover {
transform: scale(1.02) translateY(-3px);
border-color: rgba(255, 255, 255, 0.16);
box-shadow:
0 24px 56px rgba(0, 0, 0, 0.65),
0 6px 16px rgba(0, 0, 0, 0.38),
inset 0 1px 0 rgba(201, 162, 39, 0.26),
inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Featured inner card, carries all amber styling, same structure as other pack cards */
.pc-pack-card--featured {
border: 1px solid rgba(201, 162, 39, 0.32);
background: rgba(201, 162, 39, 0.08);
border-radius: 16px;
pointer-events: none;
position: relative;
overflow: visible;
padding-top: 26px;
transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.28s ease,
background 0.28s ease,
box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cell is the hover zone (captures badge hover too), scales the inner card */
.pc-cell--featured {
cursor: pointer;
}
.pc-cell--featured:hover .pc-pack-card--featured {
transform: scale(1.02) translateY(-3px);
border-color: rgba(201, 162, 39, 0.7);
background: rgba(201, 162, 39, 0.14);
box-shadow: 0 0 50px rgba(201, 162, 39, 0.2),
0 20px 50px rgba(0, 0, 0, 0.4);
}
.pc-cell--featured:hover .pc-pack-name {
color: #fff;
}
.pc-cell--featured:hover .pc-pack-price {
text-shadow: 0 0 40px rgba(201, 162, 39, 0.5);
}
/* ── Full ULTRA column glow on any row hover ── */
.pc-table:has(.pc-row--feature:hover) .pc-cell--featured-col {
background: rgba(201, 162, 39, 0.09);
border-color: rgba(201, 162, 39, 0.38);
}
.pc-table:has(.pc-row--feature:hover) .pc-pack-card--featured {
background: rgba(201, 162, 39, 0.14);
border-color: rgba(201, 162, 39, 0.55);
}
/* The specifically hovered row's featured cell gets a stronger highlight */
.pc-row--feature:hover .pc-cell--featured-col {
background: rgba(201, 162, 39, 0.16) !important;
}
/* Pack typography */
.pc-pack-name {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 5px;
color: var(--color-text);
transition: color 0.2s ease;
}
.pc-pack-card:hover .pc-pack-name {
color: var(--color-accent);
}
.pc-pack-tagline {
font-size: 0.76rem;
color: var(--color-text-secondary);
margin-bottom: 14px;
line-height: 1.45;
max-width: 180px;
margin-left: auto;
margin-right: auto;
opacity: 0.8;
}
.pc-pack-price {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 2.5vw, 1.9rem);
font-weight: 800;
color: var(--color-text);
letter-spacing: -0.03em;
display: inline-block;
}
.pc-pack-card--featured .pc-pack-price {
color: var(--color-accent);
text-shadow: 0 0 30px rgba(201, 162, 39, 0.25);
}
.pc-price-compare {
display: block;
font-size: 0.75em;
font-weight: 400;
text-decoration: line-through;
opacity: 0.45;
letter-spacing: 0;
margin-bottom: 2px;
}
.pc-price-sale {
display: block;
color: var(--color-accent);
text-shadow: 0 0 30px rgba(201, 162, 39, 0.25);
}
.pc-pack-card:not(.pc-pack-card--featured) .pc-price-sale {
color: var(--color-text);
text-shadow: none;
}
.pc-price-badge {
display: inline-block;
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--color-accent-muted);
color: var(--color-accent);
border: 1px solid rgba(201, 162, 39, 0.3);
border-radius: 2px;
padding: 3px 8px;
margin-top: 6px;
vertical-align: middle;
}
.pc-pack-card--featured .pc-pack-name {
color: var(--color-accent);
}
/* ── Featured badge, sits half in / half out of the card top edge ── */
.pc-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-accent), #d4a832);
color: #000;
padding: 6px 14px;
border-radius: 20px;
box-shadow: 0 4px 16px rgba(201, 162, 39, 0.4);
white-space: nowrap;
}
/* ── Feature rows ── */
.pc-row--feature {
border-top: 1px solid rgba(255,255,255,0.045);
min-height: 56px;
transition: background 0.2s ease;
cursor: default;
position: relative;
z-index: 0; /* keep inside pc-body's stacking context; never above sticky header */
}
/* Left amber accent line, slides in on hover */
.pc-row--feature::before {
content: '';
position: absolute;
left: 0;
top: 1px;
bottom: 0;
width: 2px;
background: var(--color-accent);
transform: scaleY(0);
transform-origin: center;
transition: transform 0.18s ease;
border-radius: 0 1px 1px 0;
}
.pc-row--feature:hover::before {
transform: scaleY(1);
}
/* No vertical padding, let align-items:center do the work cleanly */
.pc-row--feature .pc-cell {
padding-top: 0;
padding-bottom: 0;
min-height: 56px;
}
.pc-row--feature:hover {
background: rgba(201, 162, 39, 0.06);
}
.pc-row--feature .pc-cell--label {
font-size: 0.86rem;
color: var(--color-text-secondary);
transition: color 0.2s ease;
letter-spacing: 0.01em;
padding-left: 10px;
}
.pc-row--feature:hover .pc-cell--label {
color: var(--color-text);
}
/* Value types */
.pc-val {
font-weight: 600;
font-size: 0.92rem;
color: var(--color-text);
}
.pc-val--gold {
color: var(--color-accent);
font-weight: 700;
}
/* X mark */
.pc-x {
color: rgba(255,255,255,0.14);
display: flex;
align-items: center;
justify-content: center;
}
/* Checkmark */
.pc-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.45);
}
.pc-check--gold {
background: rgba(201, 162, 39, 0.15);
color: var(--color-accent);
box-shadow: 0 0 12px rgba(201, 162, 39, 0.2);
}
/* ── CTA row ── */
.pc-row--cta {
border-top: 1px solid rgba(255,255,255,0.055);
overflow: visible;
}
.pc-cell--cta {
padding: 28px 12px;
}
.pc-row--cta .pc-cell--featured-col {
background: rgba(201, 162, 39, 0.07);
}
.pc-cta-link {
color: var(--color-text-secondary);
font-size: 0.88rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
opacity: 0.7;
position: relative;
transition: opacity 0.3s ease, color 0.3s var(--ease-smooth);
}
.pc-cta-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s var(--ease-smooth);
}
.pc-cta-link:hover {
opacity: 1;
color: var(--color-text);
}
.pc-cta-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.pc-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
white-space: nowrap;
background: linear-gradient(to right,
#e8c84a 0%, #f0d060 49.9%,
#b8860b 50%, #d4af37 75%, #c9a227 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
color: #1a1200;
font-weight: 800;
font-size: 0.82rem;
padding: 13px 22px;
border-radius: 10px;
text-decoration: none;
letter-spacing: 0.04em;
text-transform: uppercase;
transition:
background-position 0.55s var(--ease-out-expo),
transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1);
width: 100%;
max-width: 260px;
}
.pc-cta-btn:hover {
background-position: 0% 0;
transform: translateY(-3px) scale(1.01);
box-shadow: 0 12px 32px rgba(201, 162, 39, 0.45);
}
/* ── Mobile ── */
@media (max-width: 767px) {
.pc-row--heads { top: auto; }
.pc-row { grid-template-columns: 130px 1fr 1fr 1fr; }
.pc-pack-tagline { display: none; }
.pc-pack-name { font-size: 0.85rem; }
.pc-pack-price { font-size: 1.25rem; }
.pc-cell--label { font-size: 0.78rem; padding-right: 6px; }
.pc-cell--cta { padding: 18px 6px; }
.pc-cta-btn { font-size: 0.72rem; padding: 10px 10px; }
.pc-body { border-radius: 10px; margin-top: 8px; }
.pc-pack-card { padding: 12px 8px 10px; border-radius: 8px; }
.pc-pack-card:hover { transform: scale(1.015) translateY(-2px); }
}
/* =============================================================
FAQ & CONTACT PAGE
============================================================= */
.faq-contact {
padding: 80px 0 100px;
}
/* ── Hero ── */
.fc-hero {
text-align: center;
max-width: 680px;
margin: 0 auto 56px;
}
.fc-hero__heading {
font-family: var(--font-heading);
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 800;
margin: 16px 0 14px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-text);
}
.fc-hero__sub {
color: var(--color-text-secondary);
font-size: 1rem;
margin-bottom: 32px;
}
/* Search */
.fc-search-wrap {
position: relative;
max-width: 520px;
margin: 0 auto 28px;
}
.fc-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-secondary);
pointer-events: none;
}
.fc-search {
width: 100%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 12px;
padding: 14px 16px 14px 48px;
color: var(--color-text);
font-size: 0.95rem;
outline: none;
transition: border-color 0.2s ease, background 0.2s ease;
font-family: inherit;
}
.fc-search::placeholder { color: var(--color-text-secondary); opacity: 0.55; }
.fc-search:focus {
border-color: rgba(201, 162, 39, 0.5);
background: rgba(255,255,255,0.07);
}
/* Category tabs */
.fc-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 22px;
}
.fc-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.1);
background: linear-gradient(to right,
#e8c84a 0%, #f0d060 49.9%,
transparent 50%, transparent 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
color: var(--color-text-secondary);
font-size: 0.84rem;
font-weight: 500;
cursor: pointer;
transition:
background-position 0.55s var(--ease-out-expo),
color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
font-family: inherit;
}
.fc-tab:hover {
background-position: 0% 0;
border-color: rgba(201,162,39,0.7);
color: #1a1200;
transform: translateY(-1px);
box-shadow: 0 6px 28px rgba(201,162,39,0.3), 0 2px 8px rgba(201,162,39,0.15);
}
.fc-tab--active,
.fc-tab--active:hover {
background: linear-gradient(to right, #e8c84a 0%, #f0d060 50%, #d4af37 100%);
background-size: 100% 100%;
border-color: var(--color-accent);
color: #1a1200;
font-weight: 700;
transform: none;
}
/* Get in touch hint */
.fc-get-touch {
font-size: 0.88rem;
color: var(--color-text-secondary);
margin-top: 4px;
}
.fc-get-touch__link {
color: var(--color-accent);
text-decoration: none;
font-weight: 600;
transition: opacity 0.2s;
}
.fc-get-touch__link:hover { opacity: 0.75; }
/* ── FAQ Area ── */
.fc-faq-area {
max-width: 780px;
margin: 0 auto 80px;
}
.fc-category {
margin-bottom: 40px;
}
.fc-cat-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.fc-cat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(201, 162, 39, 0.1);
border: 1px solid rgba(201, 162, 39, 0.18);
color: var(--color-accent);
flex-shrink: 0;
}
.fc-cat-name {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text);
margin: 0;
}
/* FAQ accordion items */
.fc-items {
display: flex;
flex-direction: column;
gap: 8px;
}
.fc-item {
/* The same warm ramp lit from above that the plugin cards use, so a stack of
questions reads as the same material as everything else. The drop shadow is
deliberately softer than a standalone card's: eight of these sit in a
column, and a full shadow on each turns the stack muddy. */
position: relative;
/* The shared card surface. This row was missed when every other card moved to
it, because the CSS here is .fc-item while a leftover .kfaq__item rule
elsewhere looked like it was the one doing the work. It kept the exact
recipe that made everything else read as plastic: a fill well above the
page (33,29,22 on #070503) and a COOL white hairline on a warm page.
The drop shadow stays softer than a standalone card's on purpose: eight of
these sit in a column and a full shadow on each turns the stack muddy. */
border: 1px solid var(--surface-border);
border-radius: 12px;
background: var(--surface-fill);
box-shadow: var(--surface-bevel), 0 6px 16px -12px rgba(0,0,0,.7);
overflow: hidden;
transition:
border-color 0.2s ease,
background 0.2s ease,
box-shadow 0.26s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Gold filament along the top edge, lit on hover and held while open. Inset so
it never crosses the corner radius. */
.fc-item::before {
content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
opacity: 0; z-index: 1; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(240,208,113,.7), transparent);
transition: opacity .2s ease;
}
.fc-item:hover::before, .fc-item--open::before { opacity: 1; }
/* The lift. Small on purpose: these are rows in a stack, not cards you pick up,
and anything past ~2px makes a long list feel like it is rippling.
The lift is tied to HOVER ALONE, deliberately, and not to whether the row is
open. Scoping it to closed rows was the first attempt and it put a 2px DROP
at the exact instant of the click: opening removed the lift while the panel
was expanding, so the row sank as its content grew. Movement at the moment
you click is the worst place to put it. Now the click changes only one thing,
the panel, and the row holds still under the pointer. */
.fc-item:hover {
transform: translateY(-2px);
border-color: var(--surface-hover-border);
box-shadow: var(--surface-bevel), 0 14px 28px -16px rgba(0,0,0,.8);
}
/* OPEN is a state, not a hover. A row holding an answer should read as the
active one in the stack without pretending the pointer is on it, so it warms
its edge and keeps its position. Alvar's read was that an open row looked
better than a closed one, which is the wrong way round: the closed row is
what someone sees eight of. */
.fc-item--open {
border-color: rgba(212, 184, 106, .2);
box-shadow: var(--surface-bevel), 0 10px 24px -14px rgba(0,0,0,.8);
}
/* The chevron changes COLOUR on hover and nothing else.
It briefly also leaned 2px toward where the answer would appear, and that was
the second half of the bad click: on open, the lean had to unwind from 2px
back to 0 WHILE the arrow rotated 180 degrees, so the tip travelled an arc
instead of turning in place. Matching the transform function lists fixed the
worst of it (mismatched lists make the browser interpolate composed matrices,
which spirals) but the translate still had to animate, because its value
genuinely changed between the two states.
The row's own lift already says "this is clickable", so the lean was paying
for that twice. Without it the click is one clean rotation. */
.fc-item:hover .fc-chevron {
color: var(--color-accent);
}
@media (prefers-reduced-motion: reduce) {
.fc-item:hover { transform: none; }
}
.fc-item--open {
border-color: rgba(201, 162, 39, 0.3);
background: linear-gradient(180deg,rgba(42,36,24,.99) 0%,rgba(23,20,15,1) 100%);
}
.fc-item__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
background: none;
border: none;
color: var(--color-text);
font-size: 0.94rem;
font-weight: 500;
text-align: left;
cursor: pointer;
font-family: inherit;
transition: color 0.2s ease;
}
.fc-item--open .fc-item__trigger {
color: var(--color-accent);
}
.fc-chevron {
flex-shrink: 0;
color: var(--color-text-secondary);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), color 0.2s ease;
}
.fc-item--open .fc-chevron {
transform: rotate(180deg);
color: var(--color-accent);
}
/* Smooth accordion body, grid-template-rows technique */
.fc-item__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s cubic-bezier(0.4,0,0.2,1);
}
.fc-item--open .fc-item__body {
grid-template-rows: 1fr;
}
.fc-item__body > div {
overflow: hidden;
}
.fc-item__answer {
padding: 2px 20px 20px;
color: var(--color-text-secondary);
font-size: 0.91rem;
line-height: 1.75;
margin: 0;
}
.fc-item__answer--rte { padding: 0; }
.fc-item__answer--rte p { padding: 0 20px; margin: 0 0 0.6em; }
.fc-item__answer--rte p:empty { display: none; }
.fc-item__answer--rte p:first-of-type:not(:empty) { padding-top: 4px; }
.fc-item__answer--rte p:last-of-type:not(:empty) { padding-bottom: 20px; margin-bottom: 0; }
.fc-item__answer--rte strong, .fc-item__answer--rte b { color: var(--color-text); font-weight: 600; }
.fc-item__answer--rte em, .fc-item__answer--rte i { font-style: italic; }
.fc-item__answer--rte a { color: var(--color-accent); text-decoration: underline; text-decoration-color: rgba(200,164,78,0.4); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.fc-item__answer--rte a:hover { text-decoration-color: var(--color-accent); }
.fc-item__answer--rte ul, .fc-item__answer--rte ol { padding: 0 20px 0 calc(20px + 1.4em); margin: 0 0 0.6em; }
.fc-item__answer--rte ul:last-child, .fc-item__answer--rte ol:last-child { padding-bottom: 20px; margin-bottom: 0; }
.fc-item__answer--rte ul { list-style: disc; }
.fc-item__answer--rte ol { list-style: decimal; }
.fc-item__answer--rte li { margin-bottom: 0.25em; }
.fc-item__answer--rte li:last-child { margin-bottom: 0; }
.fc-item__link {
display: inline-block;
padding: 0 20px 18px;
color: var(--color-accent);
font-size: 0.87rem;
font-weight: 600;
text-decoration: none;
transition: opacity 0.2s;
}
.fc-item__link:hover { opacity: 0.75; }
.fc-no-results {
text-align: center;
color: var(--color-text-secondary);
padding: 48px 0;
font-size: 0.95rem;
}
/* ── Contact section ── */
.fc-contact-divider {
height: 1px;
background: rgba(255,255,255,0.06);
max-width: 780px;
margin: 0 auto 72px;
}
.fc-contact-head {
text-align: center;
max-width: 580px;
margin: 0 auto 44px;
}
.fc-contact-heading {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 800;
margin: 14px 0 10px;
letter-spacing: -0.02em;
}
.fc-contact-sub {
color: var(--color-text-secondary);
font-size: 0.98rem;
}
.fc-contact-grid {
display: grid;
grid-template-columns: 1fr 1.9fr;
gap: 20px;
max-width: 960px;
margin: 0 auto;
align-items: start;
}
.fc-contact-cards {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Same treatment as the Required plugins card on /download: a warm vertical
ramp instead of a flat wash, a hairline top highlight so the card reads as
lit from above, and a gold filament that only appears on hover.
The shadow is deliberately shallower than the big panels use. These stack in
a column, and a full-depth shadow repeated down a list stops looking like
depth and starts looking like grime. */
.fc-contact-card {
position: relative;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 14px;
background: linear-gradient(180deg, rgba(33,29,22,0.985) 0%, rgba(21,18,14,1) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 10px 26px -20px rgba(0,0,0,0.7);
padding: 20px;
overflow: hidden;
transition:
border-color 0.28s var(--ease-out-expo),
transform 0.28s var(--ease-out-expo),
box-shadow 0.28s var(--ease-out-expo);
}
.fc-contact-card::before {
content: "";
position: absolute;
left: 16px;
right: 16px;
top: 0;
height: 1px;
opacity: 0;
background: linear-gradient(90deg, transparent, rgba(240,208,113,0.7), transparent);
transition: opacity 0.28s var(--ease-out-expo);
}
.fc-contact-card:hover {
border-color: rgba(255,255,255,0.12);
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 16px 34px -20px rgba(0,0,0,0.8);
}
.fc-contact-card:hover::before { opacity: 0.6; }
.fc-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(201, 162, 39, 0.1);
border: 1px solid rgba(201, 162, 39, 0.18);
color: var(--color-accent);
margin-bottom: 12px;
}
.fc-card-icon--discord {
background: rgba(88, 101, 242, 0.15);
border-color: rgba(88, 101, 242, 0.25);
color: #7289da;
}
.fc-card-title {
font-weight: 700;
font-size: 0.92rem;
color: var(--color-text);
margin: 0 0 4px;
}
.fc-card-desc {
font-size: 0.82rem;
color: var(--color-text-secondary);
margin: 0 0 10px;
line-height: 1.45;
}
.fc-card-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.fc-card-link {
color: var(--color-accent);
font-size: 0.87rem;
font-weight: 600;
text-decoration: none;
transition: opacity 0.2s;
}
.fc-card-link:hover { opacity: 0.75; }
.fc-card-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
border-radius: 8px;
background: #5865f2;
color: #fff;
font-size: 0.83rem;
font-weight: 700;
text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
}
.fc-card-btn:hover {
background: #4752c4;
transform: translateY(-1px);
}
/* Contact form */
/* The big panel of the pair, so it keeps the filament lit rather than waiting
for a hover: nobody hovers a form wrapper, they hover the fields inside it. */
.fc-form-wrap {
position: relative;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
background: linear-gradient(180deg, rgba(33,29,22,0.985) 0%, rgba(21,18,14,1) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 16px 40px -22px rgba(0,0,0,0.7);
padding: 28px;
overflow: hidden;
}
.fc-form-wrap::before {
content: "";
position: absolute;
left: 18px;
right: 18px;
top: 0;
height: 1px;
opacity: 0.6;
background: linear-gradient(90deg, transparent, rgba(240,208,113,0.7), transparent);
}
.fc-form-heading {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
margin: 0 0 22px;
color: var(--color-text);
}
.fc-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.fc-field {
margin-bottom: 14px;
}
.fc-label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-secondary);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.fc-input {
width: 100%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 8px;
padding: 11px 14px;
color: var(--color-text);
font-size: 0.92rem;
outline: none;
transition: border-color 0.2s ease, background 0.2s ease;
font-family: inherit;
}
.fc-input::placeholder { color: var(--color-text-secondary); opacity: 0.5; }
.fc-input:focus {
border-color: rgba(201, 162, 39, 0.5);
background: rgba(255,255,255,0.07);
}
.fc-textarea {
resize: vertical;
min-height: 140px;
line-height: 1.6;
}
/* The submit button carries `btn btn--primary` in the markup, so everything
about how it LOOKS comes from those two classes and it stays in step with
every other primary CTA on the site for free. This rule is layout only.
It used to set `background: var(--color-accent)` — a flat gold fill — plus
its own hover. Both had to go rather than be overridden: `.fc-submit` and
`.btn--primary` have equal specificity (0,1,0), and this rule sits ~5100
lines later, so anything declared here silently beats the shared button and
the sliding-gradient hover would never have been seen. */
.fc-submit {
width: 100%;
margin-top: 4px;
/* The one deviation from .btn--primary, and only because this button lives
inside a form: every field beside it is 8px, and the shared 3px read as a
different family of control. The gradient and the hover slide, which are
what makes it a primary button, are untouched. */
border-radius: 8px;
}
/* No :hover here on purpose. `.btn--primary:hover` owns it: it slides the
two-stop gradient across, lifts 1px and throws a gold halo. A local hover
would win on source order and flatten it back to a solid colour. */
.fc-submit[disabled] {
opacity: 0.6;
cursor: default;
transform: none;
}
.fc-form-success {
display: flex;
align-items: center;
gap: 10px;
background: rgba(201, 162, 39, 0.08);
border: 1px solid rgba(201, 162, 39, 0.22);
border-radius: 10px;
padding: 16px 20px;
color: var(--color-accent);
font-weight: 600;
font-size: 0.92rem;
}
/* Mobile */
@media (max-width: 767px) {
.fc-contact-grid { grid-template-columns: 1fr; }
.fc-field-row { grid-template-columns: 1fr; }
.fc-tab { font-size: 0.8rem; padding: 7px 13px; }
.fc-form-wrap { padding: 20px; }
}
/* =====================================================
LICENSE TERMS PAGE
===================================================== */
.lt-section {
padding: 80px 0 120px;
}
.lt-hero {
text-align: center;
max-width: 640px;
margin: 0 auto 64px;
}
.lt-hero__heading {
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 16px;
color: var(--color-text);
}
.lt-hero__sub {
font-size: 1.05rem;
color: var(--color-text-muted);
margin: 0;
line-height: 1.6;
}
/* ── Can / Cannot cards ── */
.lt-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.lt-card {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 32px 28px;
}
.lt-card__head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
}
.lt-card__icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lt-card__icon--can {
background: rgba(201, 162, 39, 0.15);
color: var(--color-accent);
}
.lt-card__icon--cannot {
background: rgba(220, 60, 60, 0.12);
color: #e05555;
}
.lt-card__title {
font-size: 1.15rem;
font-weight: 700;
margin: 0;
color: var(--color-text);
}
.lt-cannot-accent {
color: #e05555;
}
/* ── List items ── */
.lt-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.lt-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.93rem;
color: var(--color-text-muted);
line-height: 1.5;
}
.lt-list li svg {
flex-shrink: 0;
margin-top: 2px;
color: var(--color-accent);
}
.lt-list--cannot li svg {
color: #e05555;
}
/* ── Info boxes ── */
.lt-info-boxes {
display: flex;
flex-direction: column;
gap: 16px;
}
.lt-info-box {
background: var(--color-card-bg);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 32px 36px;
}
.lt-info-box__title {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 16px;
color: var(--color-text);
}
.lt-info-box p {
font-size: 0.95rem;
color: var(--color-text-muted);
line-height: 1.7;
margin: 0 0 12px;
}
.lt-info-box p:last-child {
margin-bottom: 0;
}
.lt-info-box strong {
color: var(--color-text);
font-weight: 600;
}
.lt-info-box--policy {
border-color: rgba(201, 162, 39, 0.3);
background: linear-gradient(135deg, var(--color-card-bg) 0%, rgba(201, 162, 39, 0.04) 100%);
}
.lt-info-box--policy .lt-info-box__title {
color: var(--color-accent);
}
.lt-link {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
transition: opacity var(--transition-fast);
}
.lt-link:hover {
opacity: 0.75;
}
/* ── No-results link ── */
.fc-no-results__link {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.fc-no-results__link:hover {
opacity: 0.75;
}
/* ── Mobile ── */
@media (max-width: 767px) {
.lt-cards { grid-template-columns: 1fr; }
.lt-card { padding: 24px 20px; }
.lt-info-box { padding: 24px 20px; }
.lt-section { padding: 48px 0 80px; }
}
/* ============================================================
SHOWCASE SECTIONS (sc-*)
============================================================ */
/* ── Shared scroll-reveal animation ── */
.sc-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.sc-reveal.sc-visible {
opacity: 1;
transform: none;
}
/* ── sc-hero ── */
.sc-hero {
position: relative;
padding: 80px 24px 60px;
text-align: center;
overflow: hidden;
}
.sc-hero__glow {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(201,162,39,0.1) 0%, transparent 70%);
pointer-events: none;
}
.sc-hero__inner {
position: relative;
max-width: 720px;
margin: 0 auto;
}
.sc-hero__badge {
/* inherits .section-badge styles */
}
.sc-hero__heading {
font-family: var(--font-heading);
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 20px;
color: var(--color-text);
}
.sc-hero__sub {
font-size: clamp(1rem, 2vw, 1.2rem);
color: var(--color-text-muted);
max-width: 560px;
margin: 0 auto 0;
line-height: 1.6;
}
.sc-hero__scroll {
margin-top: 48px;
color: var(--color-text-muted);
animation: sc-bounce 2s ease-in-out infinite;
}
@keyframes sc-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }
}
/* ── sc-before-after ── */
.sc-ba {
padding: 80px 0;
}
.sc-ba__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.sc-ba__item {
display: flex;
flex-direction: column;
gap: 12px;
}
.sc-ba__reveal {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
cursor: ew-resize;
background: var(--color-surface);
}
.sc-ba__side {
position: absolute;
inset: 0;
}
.sc-ba__side img,
.sc-ba__side video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sc-ba__after {
clip-path: inset(0 50% 0 0);
}
.sc-ba__label {
position: absolute;
bottom: 10px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
background: rgba(0, 0, 0, 0.55);
border-radius: 4px;
padding: 3px 8px;
pointer-events: none;
}
.sc-ba__label--before { left: 10px; }
.sc-ba__label--after { right: 10px; }
.sc-ba__handle {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.sc-ba__handle-line {
width: 2px;
flex: 1;
background: var(--color-accent);
}
.sc-ba__handle-grip {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.sc-ba__caption {
font-size: 0.85rem;
color: var(--color-text-muted);
text-align: center;
}
@media (max-width: 767px) {
.sc-ba__grid { grid-template-columns: 1fr; }
.sc-ba { padding: 48px 0; }
}
/* ── sc-pack-videos ── */
.sc-pv {
padding: 80px 0;
}
.sc-pv__grid {
display: flex;
flex-wrap: wrap;
gap: 28px;
max-width: 960px;
margin: 0 auto;
justify-content: center;
}
.sc-pv__grid--2col .sc-pv__card {
flex: 0 0 calc(50% - 14px);
}
.sc-pv__grid--3col .sc-pv__card {
flex: 0 0 calc(33.333% - 18.667px);
}
.sc-pv__break {
flex-basis: 100%;
height: 0;
}
.sc-pv__card {
display: flex;
flex-direction: column;
gap: 20px;
}
.sc-pv__media {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
background: var(--color-surface);
}
.sc-pv__video,
.sc-pv__iframe {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: none;
}
.sc-pv__yt {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
}
.sc-pv__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.sc-pv__yt:hover .sc-pv__thumb {
transform: scale(1.03);
}
.sc-pv__play {
position: absolute;
inset: 0;
margin: auto;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sc-pv__play:hover {
transform: scale(1.08);
box-shadow: 0 6px 32px rgba(0, 0, 0, 0.5);
}
.sc-pv__info {
display: flex;
flex-direction: column;
gap: 10px;
}
.sc-pv__title {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
margin: 0;
}
.sc-pv__desc {
font-size: 0.9rem;
color: var(--color-text-muted);
margin: 0;
line-height: 1.6;
}
.sc-pv__cta {
align-self: flex-start;
font-size: 0.85rem;
}
@media (max-width: 767px) {
.sc-pv__grid--2col .sc-pv__card,
.sc-pv__grid--3col .sc-pv__card {
flex: 0 0 100%;
}
.sc-pv { padding: 48px 0; }
}
/* ── sc-tutorial ── */
.sc-tut {
padding: 80px 0;
}
.sc-tut__wrap {
max-width: 880px;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--color-surface);
position: relative;
box-shadow: 0 8px 48px rgba(0, 0, 0, 0.35);
}
.sc-tut__video,
.sc-tut__iframe {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: none;
}
.sc-tut__yt {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
}
.sc-tut__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.sc-tut__yt:hover .sc-tut__thumb {
transform: scale(1.02);
}
.sc-tut__play {
position: absolute;
inset: 0;
margin: auto;
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sc-tut__play:hover {
transform: scale(1.08);
box-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}
@media (max-width: 767px) {
.sc-tut { padding: 48px 0; }
}
/* ── sc-creator-videos ── */
.sc-cv {
padding: 80px 0;
}
.sc-cv__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.sc-cv__card {
display: flex;
flex-direction: column;
gap: 12px;
}
.sc-cv__media {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
background: var(--color-surface);
}
.sc-cv__player {
position: relative;
width: 100%;
height: 100%;
}
.sc-cv__video,
.sc-cv__iframe {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: none;
cursor: pointer;
}
/* Big centered play button */
.sc-cv__play-big {
position: absolute;
inset: 0;
margin: auto;
width: 44px; height: 44px;
background: var(--color-accent);
border: none;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
color: var(--color-bg);
box-shadow: 0 4px 20px rgba(0,0,0,.4);
transition: opacity .2s, transform .2s;
pointer-events: auto;
}
.sc-cv__play-big:hover { transform: scale(1.1); }
/* Bottom control bar */
.sc-cv__controls {
position: absolute;
bottom: 0; left: 0; right: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: linear-gradient(transparent, rgba(0,0,0,.75));
border-radius: 0 0 12px 12px;
}
.sc-cv__pp {
flex-shrink: 0;
background: none; border: none;
color: #fff; cursor: pointer;
padding: 2px; display: flex; align-items: center;
}
.sc-cv__timeline {
flex: 1;
height: 4px;
background: rgba(255,255,255,.3);
border-radius: 2px;
cursor: pointer;
position: relative;
}
.sc-cv__progress {
height: 100%;
background: var(--color-accent);
border-radius: 2px;
width: 0%;
pointer-events: none;
}
.sc-cv__time {
flex-shrink: 0;
font-size: 0.68rem;
color: rgba(255,255,255,.85);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.sc-cv__yt {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
}
.sc-cv__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.sc-cv__yt:hover .sc-cv__thumb {
transform: scale(1.04);
}
.sc-cv__play {
position: absolute;
inset: 0;
margin: auto;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-accent);
color: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
transition: transform 0.2s ease;
}
.sc-cv__play:hover {
transform: scale(1.1);
}
.sc-cv__info {
display: flex;
flex-direction: column;
gap: 2px;
}
.sc-cv__creator-link {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 2px;
}
.sc-cv__creator-link:hover .sc-cv__name {
color: var(--color-accent);
}
.sc-cv__name {
font-weight: 600;
font-size: 0.9rem;
transition: color 0.2s;
}
.sc-cv__handle {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.sc-cv__footer {
margin-top: 40px;
text-align: center;
}
@media (max-width: 1023px) {
.sc-cv__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.sc-cv__grid { grid-template-columns: 1fr; }
.sc-cv { padding: 48px 0; }
}
/* ============ REVIEWS PAGE ============ */
/* ── Reviews page ───────────────────────────────────────────────────── */
.rv-page { background: var(--color-bg); }
/* Hero */
.rv-hero { padding: 80px 0 64px; text-align: center; }
.rv-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 16px 0 0; color: var(--color-text); }
.rv-hero__sub { color: rgba(255,255,255,.55); max-width: 580px; margin: 16px auto 48px; font-size: 1.05rem; line-height: 1.6; }
.rv-hero__stats { display: flex; align-items: flex-end; justify-content: center; }
.rv-stat { text-align: center; padding: 0 32px; }
.rv-stat__star { color: var(--color-accent); font-size: 1rem; margin-right: 5px; vertical-align: baseline; }
.rv-stat__num {
display: flex;
align-items: baseline;
justify-content: center;
font-size: 1.3rem;
font-weight: 700;
line-height: 1;
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.rv-stat__label { font-size: 0.6rem; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 5px; }
.rv-stat__divider { width: 1px; height: 36px; background: var(--color-border); flex-shrink: 0; }
@media (max-width: 480px) {
.rv-stat { padding: 0 20px; }
.rv-stat__num { font-size: 1.1rem; }
}
/* All Reviews */
.rv-all { padding: 80px 0 100px; }
.rv-all > .section-container > h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 800; margin-bottom: 8px; text-align: center; color: var(--color-text); }
.rv-all__sub { text-align: center; color: rgba(255,255,255,.5); margin-bottom: 24px; }
.rv-write-btn { display: flex; margin: 0 auto 40px; }
/* Filters */
.rv-filters {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 32px;
padding: 14px 18px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 10px;
}
.rv-filters__label { color: rgba(255,255,255,.4); font-size: 0.88rem; display: flex; align-items: center; gap: 6px; margin-right: 2px; }
.rv-filter-sel {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
color: var(--color-text);
border-radius: 8px;
padding: 8px 34px 8px 14px;
font-size: 0.88rem;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='rgba(255,255,255,.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
transition: border-color .2s;
}
.rv-filter-sel:focus { outline: none; border-color: var(--color-accent); }
.rv-filter-sel option { background: #1a1a1a; }
.rv-count { margin-left: auto; font-size: 0.85rem; color: rgba(255,255,255,.55); white-space: nowrap; }
/* Masonry grid */
.rv-grid { columns: 3 320px; column-gap: 20px; }
@media (max-width: 700px) { .rv-grid { columns: 1; } }
/* Review card */
.rv-card {
break-inside: avoid;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
padding: 22px 24px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color .2s;
}
.rv-card:hover { border-color: rgba(245,158,11,.18); }
.rv-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rv-card__name { font-weight: 700; font-size: 0.97rem; color: var(--color-text); }
.rv-card__stars { color: var(--color-accent); font-size: 0.9rem; letter-spacing: 1px; white-space: nowrap; flex-shrink: 0; }
.rv-card__content { color: rgba(255,255,255,.72); font-size: 0.9rem; line-height: 1.65; }
.rv-card__product { font-size: 0.8rem; color: var(--color-accent); margin-top: 2px; }
/* States */
.rv-state { text-align: center; padding: 64px 0; color: rgba(255,255,255,.3); font-size: 0.95rem; }
/* ── Review Modal ─────────────────────────────────────────────────── */
.rv-modal {
position: fixed; inset: 0; z-index: 10000;
display: none; align-items: center; justify-content: center;
padding: 16px;
}
.rv-modal.is-open { display: flex; }
.rv-modal__backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.82);
backdrop-filter: blur(4px);
}
.rv-modal__box {
position: relative;
background: #111;
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
padding: 40px;
width: 100%; max-width: 540px;
max-height: 92vh; overflow-y: auto;
}
@media (max-width: 560px) { .rv-modal__box { padding: 28px 20px; } }
.rv-modal__close {
position: absolute; top: 14px; right: 18px;
background: none; border: none;
color: rgba(255,255,255,.4); font-size: 1.6rem;
cursor: pointer; line-height: 1; padding: 4px 8px;
transition: color .15s;
}
.rv-modal__close:hover { color: #fff; }
.rv-modal__box h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 28px; }
/* Form fields */
.rv-field { margin-bottom: 18px; }
.rv-field label {
display: block; font-size: 0.78rem;
color: rgba(255,255,255,.5);
text-transform: uppercase; letter-spacing: .6px;
margin-bottom: 7px;
}
.rv-field input,
.rv-field textarea,
.rv-field select {
width: 100%; box-sizing: border-box;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
padding: 11px 14px;
color: #fff; font-size: 0.93rem;
font-family: inherit;
outline: none;
transition: border-color .2s;
}
.rv-field input:focus,
.rv-field textarea:focus,
.rv-field select:focus { border-color: var(--color-accent); }
.rv-field input::placeholder,
.rv-field textarea::placeholder { color: rgba(255,255,255,.25); }
.rv-field textarea { resize: vertical; min-height: 110px; }
.rv-field select option { background: #1a1a1a; }
.rv-field__hint { font-size: 0.75rem; color: rgba(255,255,255,.28); margin-top: 5px; }
/* Star rating input */
.rv-stars-input { display: flex; gap: 4px; }
.rv-star-btn {
background: none; border: none;
font-size: 2rem; cursor: pointer;
color: rgba(255,255,255,.18);
padding: 0; line-height: 1;
transition: color .1s, transform .1s;
}
.rv-star-btn.lit,
.rv-star-btn:hover { color: var(--color-accent); }
.rv-star-btn:hover { transform: scale(1.15); }
/* Form messages */
.rv-msg { padding: 12px 16px; border-radius: 8px; font-size: 0.88rem; margin-top: 14px; line-height: 1.5; }
.rv-msg--ok { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); color: #10b981; }
.rv-msg--err { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: #ef4444; }
/* ============ REVIEW ADMIN ============ */
/* ── Admin dashboard ─────────────────────────────────────────────── */
.ra { min-height: 80vh; padding: 60px 0 100px; }
/* Auth screen */
.ra-auth {
display: flex; align-items: center; justify-content: center;
min-height: 60vh;
}
.ra-auth__card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
padding: 48px;
width: 100%; max-width: 400px;
text-align: center;
}
.ra-auth__card h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 8px; }
.ra-auth__card p { color: rgba(255,255,255,.45); margin: 0 0 28px; font-size: 0.9rem; }
.ra-auth__input {
width: 100%; box-sizing: border-box;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px; padding: 12px 16px;
color: #fff; font-size: 1rem; font-family: inherit;
outline: none; text-align: center; letter-spacing: 2px;
margin-bottom: 16px;
transition: border-color .2s;
}
.ra-auth__input:focus { border-color: var(--color-accent); }
.ra-auth__err { color: #ef4444; font-size: 0.85rem; margin-top: 8px; min-height: 20px; }
/* Dashboard */
.ra-dash { display: none; }
/* Header */
.ra-header {
display: flex; align-items: flex-start;
justify-content: space-between; gap: 20px;
margin-bottom: 32px; flex-wrap: wrap;
}
.ra-header__title { font-size: 1.8rem; font-weight: 800; margin: 0 0 4px; }
.ra-header__sub { color: rgba(255,255,255,.4); font-size: .85rem; margin: 0; }
.ra-header__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ra-action-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 18px; border-radius: 6px; font-size: .83rem;
font-family: inherit; font-weight: 600; cursor: pointer;
border: 1px solid transparent; transition: background .15s, opacity .15s;
text-decoration: none;
}
.ra-action-btn--primary {
background: linear-gradient(to right,
#e8c84a 0%, #f0d060 49.9%,
#b8860b 50%, #d4af37 75%, #c9a227 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
color: #1a1200;
border-color: rgba(201,162,39,0.5);
transition: background-position 0.5s var(--ease-out-expo), opacity .15s;
}
.ra-action-btn--primary:hover { background-position: 0% 0; }
.ra-action-btn--secondary {
background: linear-gradient(to right,
rgba(201,162,39,.28) 0%, rgba(201,162,39,.28) 49.9%,
rgba(201,162,39,.10) 50%, rgba(201,162,39,.10) 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
color: var(--color-accent);
border-color: rgba(201,162,39,.3);
transition: background-position 0.5s var(--ease-out-expo), opacity .15s;
}
.ra-action-btn--secondary:hover { background-position: 0% 0; }
.ra-action-btn--ghost {
background: transparent; color: rgba(255,255,255,.4);
border-color: rgba(255,255,255,.1);
}
.ra-action-btn--ghost:hover { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.2); }
/* Stats bar */
.ra-stats {
display: flex; gap: 12px; flex-wrap: wrap;
margin-bottom: 32px;
}
.ra-stat-card {
flex: 1; min-width: 110px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.07);
border-radius: 10px; padding: 18px 20px;
text-align: center;
}
.ra-stat-card__num { font-size: 1.8rem; font-weight: 800; }
.ra-stat-card__label{ font-size: 0.72rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .6px; margin-top: 2px; }
.ra-stat-card--pending .ra-stat-card__num { color: #f59e0b; }
.ra-stat-card--approved .ra-stat-card__num { color: #10b981; }
.ra-stat-card--rejected .ra-stat-card__num { color: #ef4444; }
.ra-stat-card--requests .ra-stat-card__num { color: rgba(201,162,39,.9); }
/* Tabs */
.ra-tabs { display: flex; gap: 4px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.07); overflow-x: auto; }
.ra-tab {
background: none; border: none; cursor: pointer;
padding: 10px 18px; font-size: 0.875rem; font-family: inherit;
color: rgba(255,255,255,.4); white-space: nowrap;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color .15s, border-color .15s;
}
.ra-tab:hover { color: rgba(255,255,255,.8); }
.ra-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 600; }
/* Review card */
.ra-card {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 10px;
padding: 20px 22px;
margin-bottom: 14px;
transition: border-color .2s;
}
.ra-card:hover { border-color: rgba(255,255,255,.12); }
.ra-card__top {
display: flex; align-items: flex-start;
justify-content: space-between; gap: 16px; flex-wrap: wrap;
margin-bottom: 10px;
}
.ra-card__info {}
.ra-card__name { font-weight: 700; font-size: 0.97rem; }
.ra-card__email { font-size: 0.78rem; color: rgba(255,255,255,.35); margin-top: 2px; }
.ra-card__meta {
display: flex; align-items: center; gap: 10px;
flex-shrink: 0; flex-wrap: wrap;
}
.ra-card__stars { color: var(--color-accent); font-size: 0.9rem; letter-spacing: 1px; }
.ra-card__product{ font-size: 0.78rem; color: rgba(255,255,255,.35); }
.ra-card__date { font-size: 0.75rem; color: rgba(255,255,255,.25); }
.ra-badge {
font-size: 0.7rem; font-weight: 700;
padding: 3px 8px; border-radius: 20px;
text-transform: uppercase; letter-spacing: .4px;
}
.ra-badge--pending { background: rgba(245,158,11,.12); color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
.ra-badge--approved { background: rgba(16,185,129,.1); color: #10b981; border: 1px solid rgba(16,185,129,.2); }
.ra-badge--rejected { background: rgba(239,68,68,.1); color: #ef4444; border: 1px solid rgba(239,68,68,.2); }
.ra-card__content {
color: rgba(255,255,255,.65);
font-size: 0.88rem;
line-height: 1.6;
margin-bottom: 14px;
}
.ra-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ra-btn {
padding: 6px 14px; border-radius: 6px; font-size: 0.8rem;
font-family: inherit; cursor: pointer; font-weight: 600;
border: 1px solid transparent; transition: background .15s, opacity .15s;
}
.ra-btn:disabled { opacity: .4; cursor: default; }
.ra-btn--approve { background: rgba(16,185,129,.12); color: #10b981; border-color: rgba(16,185,129,.25); }
.ra-btn--approve:hover:not(:disabled) { background: rgba(16,185,129,.22); }
.ra-btn--reject { background: rgba(239,68,68,.1); color: #ef4444; border-color: rgba(239,68,68,.2); }
.ra-btn--reject:hover:not(:disabled) { background: rgba(239,68,68,.2); }
.ra-btn--pending { background: rgba(245,158,11,.1); color: #f59e0b; border-color: rgba(245,158,11,.2); }
.ra-btn--pending:hover:not(:disabled) { background: rgba(245,158,11,.2); }
.ra-btn--delete { background: rgba(255,255,255,.05); color: rgba(255,255,255,.4); border-color: rgba(255,255,255,.1); margin-left: auto; }
.ra-btn--delete:hover:not(:disabled) { background: rgba(239,68,68,.1); color: #ef4444; border-color: rgba(239,68,68,.2); }
/* States */
.ra-empty { text-align: center; padding: 48px 24px; color: rgba(255,255,255,.25); line-height: 1.8; }
.ra-loading { text-align: center; padding: 48px; color: rgba(255,255,255,.3); }
/* Toast */
.ra-toast {
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
background: #1a1a1a; border: 1px solid rgba(255,255,255,.1);
border-radius: 10px; padding: 14px 20px; font-size: 0.9rem;
opacity: 0; transform: translateY(10px);
transition: opacity .25s, transform .25s;
pointer-events: none;
}
.ra-toast.show { opacity: 1; transform: translateY(0); }
.ra-toast--ok { border-color: rgba(16,185,129,.3); color: #10b981; }
.ra-toast--err { border-color: rgba(239,68,68,.3); color: #ef4444; }
/* ── Modals ───────────────────────────────────────────────────────── */
.ra-modal {
position: fixed; inset: 0; z-index: 10000;
background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
display: none; align-items: center; justify-content: center;
padding: 20px;
}
.ra-modal.open { display: flex; }
.ra-modal__box {
background: #1a1410;
border: 1px solid rgba(255,255,255,.1);
border-radius: 12px;
width: 100%; max-width: 540px;
max-height: 90vh;
overflow-y: auto;
padding: 28px 32px;
}
.ra-modal__header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px;
}
.ra-modal__header h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.ra-modal__close {
background: none; border: none; cursor: pointer;
color: rgba(255,255,255,.4); padding: 4px;
transition: color .15s;
}
.ra-modal__close:hover { color: #fff; }
.ra-modal__desc { font-size: .85rem; color: rgba(255,255,255,.4); margin: -10px 0 20px; line-height: 1.5; }
.ra-modal__err { color: #ef4444; font-size: .83rem; min-height: 18px; margin-top: 4px; }
.ra-modal__footer {
display: flex; gap: 10px; justify-content: flex-end;
margin-top: 24px; padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.07);
}
/* Modal form elements */
.ra-modal__form { display: flex; flex-direction: column; gap: 16px; }
.ra-form-row { display: flex; gap: 14px; }
.ra-form-row--2 > * { flex: 1; min-width: 0; }
.ra-field { display: flex; flex-direction: column; gap: 6px; }
.ra-label { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .05em; }
.ra-req { color: var(--color-accent); }
.ra-input {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 6px; padding: 10px 14px;
color: #f5f0eb; font-size: .9rem; font-family: inherit;
outline: none; transition: border-color .2s; width: 100%; box-sizing: border-box;
}
.ra-input:focus { border-color: rgba(201,162,39,.6); }
.ra-input--textarea { resize: vertical; min-height: 90px; }
.ra-select { appearance: none; cursor: pointer; }
/* Star picker */
.ra-star-picker { display: flex; gap: 4px; }
.ra-star {
background: none; border: none; cursor: pointer;
font-size: 1.4rem; color: rgba(255,255,255,.2);
padding: 0 2px; transition: color .1s;
line-height: 1;
}
.ra-star:hover,
.ra-star.active { color: var(--color-accent); }
/* Modal buttons */
.ra-btn-modal {
padding: 9px 22px; border-radius: 6px;
font-size: .875rem; font-family: inherit; font-weight: 600;
cursor: pointer; border: 1px solid transparent;
transition: background .15s, opacity .15s;
}
.ra-btn-modal:disabled { opacity: .5; cursor: default; }
.ra-btn-modal--cancel {
background: transparent; color: rgba(255,255,255,.5);
border-color: rgba(255,255,255,.12);
}
.ra-btn-modal--cancel:hover:not(:disabled) { color: #fff; border-color: rgba(255,255,255,.25); }
.ra-btn-modal--primary {
background: linear-gradient(to right,
#e8c84a 0%, #f0d060 49.9%,
#b8860b 50%, #d4af37 75%, #c9a227 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
color: #1a1200;
transition: background-position 0.5s var(--ease-out-expo), opacity .15s;
}
.ra-btn-modal--primary:hover:not(:disabled) { background-position: 0% 0; }
/* Mobile */
@media (max-width: 600px) {
.ra-form-row--2 { flex-direction: column; }
.ra-modal__box { padding: 20px; }
.ra-header__actions { width: 100%; }
}
/* ============ PRODUCT FAQ ============ */
.pf { padding: 80px 0; border-top: 1px solid var(--color-border); }
.pf__inner { max-width: 760px; margin: 0 auto; }
.pf__header { margin-bottom: 48px; text-align: center; }
/* Card list, identical layout to home FAQ */
.pf__list {
display: flex;
flex-direction: column;
gap: 2px;
}
.pf__item {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-card);
transition:
border-color 0.28s ease,
background 0.28s ease,
box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.4),
0 1px 4px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(201, 162, 39, 0.10),
inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
.pf__item:hover {
border-color: rgba(255,255,255,0.12);
transform: translateY(-3px);
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.5),
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(201, 162, 39, 0.12),
inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.pf__item.is-open {
border-color: rgba(201, 162, 39, 0.22);
background: rgba(201, 162, 39, 0.025);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.55),
0 3px 10px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(201, 162, 39, 0.30),
inset 0 0 0 1px rgba(201, 162, 39, 0.06);
}
.pf__trigger {
width: 100%;
background: none;
border: none;
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.94rem;
font-weight: 500;
text-align: left;
padding: 18px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
transition: color 0.2s ease;
}
.pf__trigger:hover { color: var(--color-accent); }
.pf__item.is-open .pf__trigger { color: var(--color-accent); }
.pf__chevron {
flex-shrink: 0;
color: var(--color-text-secondary);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
}
.pf__item.is-open .pf__chevron {
transform: rotate(180deg);
color: var(--color-accent);
}
/* Grid-row animation, identical to home FAQ */
.pf__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pf__item.is-open .pf__body {
grid-template-rows: 1fr;
}
.pf__body > div {
overflow: hidden;
}
.pf__answer {
color: var(--color-text-secondary);
font-size: 0.91rem;
line-height: 1.75;
padding: 0 20px;
}
.pf__answer p { margin: 0 0 0.6em; }
.pf__answer p:empty { display: none; }
.pf__answer p:first-of-type:not(:empty) { padding-top: 4px; }
.pf__answer p:last-of-type:not(:empty) { padding-bottom: 20px; margin-bottom: 0; }
.pf__answer strong, .pf__answer b { color: var(--color-text); font-weight: 600; }
.pf__answer a { color: var(--color-accent); text-decoration: underline; text-decoration-color: rgba(200,164,78,0.4); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.pf__answer a:hover { text-decoration-color: var(--color-accent); }
.pf__footer {
text-align: center;
margin-top: 36px;
font-size: 0.88rem;
color: var(--color-text-tertiary);
}
.pf__footer-link,
.faq-footer-link {
position: relative;
color: var(--color-accent);
text-decoration: none;
transition: color .2s;
}
.pf__footer-link::after,
.faq-footer-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s var(--ease-smooth);
}
.pf__footer-link:hover,
.faq-footer-link:hover { color: var(--color-accent-hover); }
.pf__footer-link:hover::after,
.faq-footer-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* ============ PRODUCT REVIEWS ============ */
/* ── Product Reviews section ─────────────────────────────────────── */
.pr-section {
padding: 80px 0;
border-top: 1px solid rgba(255,255,255,.07);
}
/* Header row */
.pr-header {
text-align: center;
margin-bottom: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.pr-header h2 {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 800;
margin: 0;
}
.pr-write-btn {
margin-top: 8px;
}
.pr-summary {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,.55);
font-size: 0.9rem;
}
.pr-summary__stars { color: var(--color-accent); font-size: 1.1rem; letter-spacing: 2px; }
.pr-summary__avg { font-weight: 700; color: var(--color-text); font-size: 1rem; }
/* Cards grid */
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .pr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pr-grid { grid-template-columns: 1fr; } }
/* Card */
.pr-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 28px;
display: flex;
flex-direction: column;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.45),
0 2px 8px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(201, 162, 39, 0.1);
transition:
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pr-card:hover {
border-color: rgba(201, 162, 39, 0.3);
transform: translateY(-5px);
box-shadow:
0 24px 56px rgba(0, 0, 0, 0.55),
0 6px 16px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(201, 162, 39, 0.12),
inset 0 1px 0 rgba(201, 162, 39, 0.3);
}
.pr-card__quote { color: var(--color-accent); font-size: 2rem; line-height: 1; opacity: .5; font-family: Georgia, serif; margin-bottom: 4px; }
.pr-card__content {
color: var(--color-text-secondary);
font-size: 0.92rem;
line-height: 1.65;
font-style: italic;
flex: 1;
margin-bottom: 20px;
}
.pr-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 16px;
margin-top: auto;
}
.pr-card__name { font-weight: 700; font-size: 0.88rem; color: var(--color-text); }
.pr-card__stars { color: var(--color-accent); font-size: 0.85rem; letter-spacing: 1px; }
/* Actions */
.pr-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 32px;
flex-wrap: wrap;
}
/* States */
.pr-state {
text-align: center;
padding: 48px;
color: rgba(255,255,255,.3);
font-size: 0.95rem;
}
/* ── Modal (same style as reviews-page, prefixed pr-) ─────────────── */
.prm-modal {
position: fixed; inset: 0; z-index: 10000;
display: none; align-items: center; justify-content: center; padding: 16px;
}
.prm-modal.is-open { display: flex; }
.prm-modal__backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.82);
backdrop-filter: blur(4px);
}
.prm-modal__box {
position: relative;
background: #111;
border: 1px solid rgba(255,255,255,.1);
border-radius: 16px;
padding: 40px;
width: 100%; max-width: 540px;
max-height: 92vh; overflow-y: auto;
}
@media (max-width: 560px) { .prm-modal__box { padding: 28px 20px; } }
.prm-close {
position: absolute; top: 14px; right: 18px;
background: none; border: none;
color: rgba(255,255,255,.4); font-size: 1.6rem;
cursor: pointer; line-height: 1; padding: 4px 8px; transition: color .15s;
}
.prm-close:hover { color: #fff; }
.prm-modal__box h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 28px; }
.prm-field { margin-bottom: 18px; }
.prm-field label {
display: block; font-size: 0.78rem;
color: rgba(255,255,255,.5);
text-transform: uppercase; letter-spacing: .6px; margin-bottom: 7px;
}
.prm-field input,
.prm-field textarea,
.prm-field select {
width: 100%; box-sizing: border-box;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px; padding: 11px 14px;
color: #fff; font-size: 0.93rem; font-family: inherit; outline: none;
transition: border-color .2s;
}
.prm-field input:focus,
.prm-field textarea:focus { border-color: var(--color-accent); }
.prm-field input::placeholder,
.prm-field textarea::placeholder { color: rgba(255,255,255,.25); }
.prm-field textarea { resize: vertical; min-height: 110px; }
.prm-field__hint { font-size: 0.75rem; color: rgba(255,255,255,.28); margin-top: 5px; }
.prm-field--product-label {
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.07);
border-radius: 8px;
padding: 10px 14px;
font-size: .85rem;
color: rgba(255,255,255,.5);
}
.prm-stars { display: flex; gap: 4px; }
.prm-star {
background: none; border: none; font-size: 2rem;
cursor: pointer; color: rgba(255,255,255,.18);
padding: 0; line-height: 1; transition: color .1s, transform .1s;
}
.prm-star.lit, .prm-star:hover { color: var(--color-accent); }
.prm-star:hover { transform: scale(1.15); }
.prm-msg { padding: 12px 16px; border-radius: 8px; font-size: 0.88rem; margin-top: 14px; }
.prm-msg--ok { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); color: #10b981; }
.prm-msg--err { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: #ef4444; }
/* ── Stats Counter ─────────────────────────────────────────────────────── */
.stats-section {
padding: 64px 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
}
.stats-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 36px 20px 32px;
background: var(--color-bg-card);
border: 1px solid rgba(201,162,39,0.22);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
box-shadow:
0 4px 24px rgba(0,0,0,0.45),
0 0 0 1px rgba(201,162,39,0.06),
inset 0 1px 0 rgba(201,162,39,0.15);
transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-smooth), border-color 0.4s var(--ease-smooth);
}
.stats-item:hover {
transform: translateY(-4px);
border-color: rgba(201,162,39,0.45);
box-shadow:
0 16px 48px rgba(0,0,0,0.55),
0 0 36px rgba(201,162,39,0.18),
inset 0 1px 0 rgba(201,162,39,0.3);
}
/* Travelling shimmer sweep, uses transform instead of left for GPU compositing */
.stats-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 55%;
height: 100%;
background: linear-gradient(
to right,
transparent 0%,
rgba(255,255,255,0.05) 50%,
transparent 100%
);
transform: translateX(-145%) skewX(-18deg);
animation: statShimmer 5s ease-in-out infinite;
pointer-events: none;
will-change: transform;
}
.stats-item:nth-child(2)::before { animation-delay: 1.25s; }
.stats-item:nth-child(3)::before { animation-delay: 2.5s; }
.stats-item:nth-child(4)::before { animation-delay: 3.75s; }
@keyframes statShimmer {
0% { transform: translateX(-145%) skewX(-18deg); }
55% { transform: translateX(236%) skewX(-18deg); }
100% { transform: translateX(236%) skewX(-18deg); }
}
.stats-number {
font-family: var(--font-heading);
font-size: clamp(2.2rem, 4vw, 3rem);
font-weight: 700;
line-height: 1;
margin-bottom: 12px;
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 14px rgba(201,162,39,0.45));
}
.stats-label {
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-text-secondary);
}
@media (max-width: 640px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stats-item { padding: 28px 16px 24px; }
.stats-number { font-size: 1.9rem; }
}
/* ══════════════════════════════════════════════════════════════
EMAIL SIGNUP SYSTEM
- Newsletter popup (.nlp-*)
- Free pack gate (.fpg-*)
- Footer newsletter updates
══════════════════════════════════════════════════════════════ */
/* ── Shared: code button + copy hint + free link ─────────────── */
.nlp-code-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
background: rgba(201,162,39,0.1);
border: 1px solid rgba(201,162,39,0.4);
border-radius: var(--radius-md);
font-family: monospace;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-accent);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.nlp-code-btn:hover { background: rgba(201,162,39,0.18); border-color: rgba(201,162,39,0.6); }
.nlp-copy-hint {
font-size: 0.72rem;
color: var(--color-text-secondary);
margin-top: 6px;
margin-bottom: 0;
}
.nlp-free-link {
display: inline-block;
color: var(--color-accent);
font-size: 0.88rem;
font-weight: 500;
text-decoration: none;
transition: opacity 0.2s ease;
}
.nlp-free-link:hover { opacity: 0.75; }
/* ── Newsletter popup overlay ────────────────────────────────── */
.nlp-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 9999;
display: none; /* hidden from render tree by default, no GPU layer on page load */
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.nlp-overlay.is-visible {
opacity: 1;
pointer-events: all;
}
.nlp-modal {
position: relative;
background: var(--color-bg-card);
border: 1px solid rgba(201,162,39,0.28);
border-radius: var(--radius-lg);
padding: 52px 44px 44px;
max-width: 480px;
width: 100%;
box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 48px rgba(201,162,39,0.1);
transform: scale(0.94) translateY(12px);
transition: transform 0.4s var(--ease-out-expo);
text-align: center;
}
.nlp-overlay.is-visible .nlp-modal {
transform: scale(1) translateY(0);
}
.nlp-close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: color 0.2s ease, background 0.2s ease;
}
.nlp-close:hover { color: var(--color-text); background: rgba(255,255,255,0.06); }
.nlp-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(201,162,39,0.1);
border: 1px solid rgba(201,162,39,0.2);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: var(--color-accent);
}
.nlp-title {
font-family: var(--font-heading);
font-size: clamp(1.25rem, 3vw, 1.65rem);
font-weight: 700;
line-height: 1.25;
margin-bottom: 14px;
color: var(--color-text);
}
.nlp-desc {
color: var(--color-text-secondary);
font-size: 0.92rem;
line-height: 1.65;
margin-bottom: 28px;
}
.nlp-mystery { color: var(--color-accent); font-weight: 500; }
.nlp-desc strong { color: var(--color-text); }
.nlp-input-wrap {
position: relative;
margin-bottom: 6px;
}
.nlp-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-secondary);
pointer-events: none;
}
.nlp-input {
width: 100%;
padding: 14px 14px 14px 42px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.95rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nlp-input:focus { outline: none; border-color: rgba(201,162,39,0.55); box-shadow: 0 0 0 3px rgba(201,162,39,0.1); }
.nlp-input::placeholder { color: var(--color-text-secondary); }
.nlp-error {
color: #ef4444;
font-size: 0.78rem;
min-height: 18px;
text-align: left;
margin-bottom: 4px;
}
.nlp-btn { width: 100%; margin-top: 6px; }
.nlp-footer-note {
font-size: 0.71rem;
color: var(--color-text-secondary);
margin-top: 16px;
opacity: 0.65;
}
/* Success */
.nlp-check {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(16,185,129,0.12);
border: 1px solid rgba(16,185,129,0.35);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.4rem;
color: #10b981;
}
@media (max-width: 480px) {
.nlp-modal { padding: 44px 24px 36px; }
.nlp-title { font-size: 1.2rem; }
}
/* ── Free pack email gate ─────────────────────────────────────── */
.fpg-card {
background: var(--color-bg-card);
border: 1px solid rgba(201,162,39,0.22);
border-radius: var(--radius-lg);
padding: 28px 24px;
text-align: center;
box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.fpg-card-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(201,162,39,0.1);
border: 1px solid rgba(201,162,39,0.2);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: var(--color-accent);
}
.fpg-card-title {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 6px;
}
.fpg-card-sub {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin-bottom: 20px;
}
.fpg-input-wrap {
position: relative;
margin-bottom: 6px;
}
.fpg-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-secondary);
pointer-events: none;
}
.fpg-input {
width: 100%;
padding: 14px 14px 14px 42px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.95rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fpg-input:focus { outline: none; border-color: rgba(201,162,39,0.55); box-shadow: 0 0 0 3px rgba(201,162,39,0.1); }
.fpg-input::placeholder { color: var(--color-text-secondary); }
.fpg-error {
color: #ef4444;
font-size: 0.78rem;
min-height: 16px;
text-align: left;
margin-bottom: 4px;
}
.fpg-btn {
gap: 8px;
margin-bottom: 12px;
margin-top: 4px;
}
.fpg-note {
font-size: 0.71rem;
color: var(--color-text-secondary);
line-height: 1.55;
opacity: 0.7;
margin-top: 4px;
}
/* State B: success */
.fpg-success {
background: rgba(16,185,129,0.06);
border: 1px solid rgba(16,185,129,0.22);
border-radius: var(--radius-lg);
padding: 28px 24px;
text-align: center;
}
.fpg-success-header {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 1rem;
font-weight: 600;
color: #10b981;
margin-bottom: 12px;
}
.fpg-success-check {
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(16,185,129,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
flex-shrink: 0;
}
.fpg-success-sub {
color: var(--color-text-secondary);
font-size: 0.85rem;
margin-bottom: 14px;
}
.fpg-code-wrap { margin-bottom: 20px; }
.fpg-code-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
background: rgba(201,162,39,0.1);
border: 1px solid rgba(201,162,39,0.4);
border-radius: var(--radius-md);
font-family: monospace;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--color-accent);
cursor: pointer;
transition: background 0.2s ease;
}
.fpg-code-btn:hover { background: rgba(201,162,39,0.18); }
.fpg-download-btn { margin-top: 0; }
/* State C: returning */
.fpg-returning { text-align: center; }
.fpg-returning-verified {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--color-accent);
font-weight: 500;
font-size: 0.92rem;
margin-bottom: 16px;
padding: 12px 16px;
background: rgba(201,162,39,0.06);
border: 1px solid rgba(201,162,39,0.18);
border-radius: var(--radius-md);
}
/* ── Footer newsletter updates ───────────────────────────────── */
.footer__nl-pack-link {
color: var(--color-accent);
text-decoration: none;
font-weight: 500;
}
.footer__nl-pack-link:hover { text-decoration: underline; }
.footer__nl-input-wrap {
position: relative;
flex: 1;
}
.footer__nl-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-secondary);
pointer-events: none;
}
.footer__newsletter-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.footer__nl-error {
color: #ef4444;
font-size: 0.75rem;
min-height: 16px;
margin-top: 4px;
}
.footer__nl-success-check {
font-weight: 700;
color: #10b981;
font-size: 1rem;
margin-bottom: 10px;
}
.footer__nl-code-wrap {
margin: 12px 0 8px;
}
.footer__nl-code-wrap .nlp-code-btn {
font-size: 0.88rem;
padding: 10px 16px;
}
/* footer btn is already full-width; no responsive override needed */
/* ============================================================
Cart Drawer
============================================================ */
.cart-drawer {
position: fixed;
inset: 0;
z-index: 9000;
pointer-events: none;
}
.cart-drawer.is-open {
pointer-events: auto;
}
/* Overlay */
.cart-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
opacity: 0;
transition: opacity 0.35s var(--ease-smooth);
}
.cart-drawer.is-open .cart-drawer__overlay {
opacity: 1;
}
/* Panel */
.cart-drawer__panel {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 420px;
max-width: 100vw;
background: var(--color-bg-card);
border-left: 1px solid var(--color-border);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.4s var(--ease-out-expo);
overflow: hidden;
}
.cart-drawer.is-open .cart-drawer__panel {
transform: translateX(0);
}
/* Header */
.cart-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.cart-drawer__header-left {
display: flex;
align-items: center;
gap: 10px;
color: var(--color-text);
}
.cart-drawer__title {
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cart-drawer__close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
color: var(--color-text-secondary);
transition: color 0.2s, background 0.2s;
}
.cart-drawer__close:hover {
color: var(--color-text);
background: var(--color-bg-elevated);
}
/* Body */
.cart-drawer__body {
flex: 1;
overflow-y: auto;
padding: 0;
}
.cart-drawer__body::-webkit-scrollbar { width: 4px; }
.cart-drawer__body::-webkit-scrollbar-track { background: transparent; }
.cart-drawer__body::-webkit-scrollbar-thumb { background: var(--color-border-hover); border-radius: 2px; }
/* Loading spinner */
.cart-drawer__loading {
display: flex;
align-items: center;
justify-content: center;
padding: 60px 24px;
}
.cart-drawer__spinner {
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Empty state */
.cart-drawer__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 60px 24px;
text-align: center;
color: var(--color-text-secondary);
}
.cart-drawer__empty svg {
opacity: 0.4;
}
.cart-drawer__empty-title {
font-size: 1rem;
font-weight: 500;
color: var(--color-text);
}
.cart-drawer__empty-text {
font-size: 0.85rem;
margin-top: 4px;
}
.cart-drawer__empty-cta {
margin-top: 8px;
padding: 10px 20px;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: 0.82rem;
font-weight: 500;
color: var(--color-text);
transition: border-color 0.2s, background 0.2s;
}
.cart-drawer__empty-cta:hover {
border-color: var(--color-accent);
background: var(--color-accent-muted);
}
/* Items list */
.cart-drawer__items {
list-style: none;
padding: 0;
margin: 0;
}
.cart-drawer__item {
display: flex;
gap: 14px;
padding: 18px 24px;
border-bottom: 1px solid var(--color-border);
transition: background 0.2s;
}
.cart-drawer__item:hover {
background: var(--color-bg-elevated);
}
.cart-drawer__item-image {
width: 64px;
height: 64px;
flex-shrink: 0;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
}
.cart-drawer__item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-drawer__item-image--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-tertiary);
}
.cart-drawer__item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.cart-drawer__item-title {
font-size: 0.88rem;
font-weight: 500;
color: var(--color-text);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cart-drawer__item-price {
font-size: 0.82rem;
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.cart-drawer__price-original {
font-size: 0.75rem;
font-weight: 400;
text-decoration: line-through;
background: none;
-webkit-text-fill-color: var(--color-text-tertiary);
color: var(--color-text-tertiary);
opacity: 0.7;
}
.cart-drawer__price-sale {
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.cart-drawer__item-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: auto;
}
.cart-drawer__item-qty {
display: flex;
align-items: center;
gap: 2px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.cart-drawer__qty-btn {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
color: var(--color-text-secondary);
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.cart-drawer__qty-btn:hover {
background: var(--color-bg-elevated);
color: var(--color-text);
}
.cart-drawer__qty-value {
font-size: 0.78rem;
font-weight: 500;
color: var(--color-text);
min-width: 22px;
text-align: center;
}
.cart-drawer__item-remove {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: var(--radius-sm);
color: var(--color-text-tertiary);
transition: color 0.15s, background 0.15s;
margin-left: 2px;
}
.cart-drawer__item-remove:hover {
color: #ef4444;
background: rgba(239,68,68,0.08);
}
/* Footer */
.cart-drawer__footer {
padding: 20px 24px;
border-top: 1px solid var(--color-border);
flex-shrink: 0;
background: var(--color-bg-card);
}
.cart-drawer__subtotal {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.cart-drawer__subtotal-label {
font-size: 0.82rem;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.cart-drawer__subtotal-value {
font-size: 1rem;
font-weight: 700;
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: flex;
align-items: baseline;
gap: 7px;
}
.cart-drawer__total-original {
font-size: 0.8rem;
font-weight: 400;
text-decoration: line-through;
background: none;
-webkit-text-fill-color: var(--color-text-tertiary);
color: var(--color-text-tertiary);
opacity: 0.7;
}
.cart-drawer__total-sale {
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cart-drawer__savings {
font-size: 0.67rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 5px 0 18px;
display: block;
}
.cart-drawer__savings-badge {
background: none;
color: inherit;
font-size: inherit;
font-weight: 600;
letter-spacing: inherit;
padding: 0;
border-radius: 0;
border: none;
}
.cart-drawer__subtotal-note {
font-size: 0.72rem;
color: var(--color-text-tertiary);
margin-bottom: 16px;
}
.cart-drawer__checkout {
display: block;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.cart-drawer__view-cart {
display: block;
text-align: center;
font-size: 0.78rem;
color: var(--color-text-secondary);
transition: color 0.2s;
}
.cart-drawer__view-cart:hover {
color: var(--color-text);
}
/* Cart count badge, always present, hidden when 0 */
.header__cart-count[hidden] { display: none; }
@media (max-width: 768px) {
.cart-drawer__panel { width: 100vw; }
.cart-drawer__item { padding: 14px 16px; }
.cart-drawer__footer { padding: 16px; }
.cart-drawer__header { padding: 16px; }
}
/* ============================================================
Flash Sale Banner
============================================================ */
.flash-sale-banner {
position: relative;
background: linear-gradient(135deg, #150f00 0%, #0a0700 40%, #150f00 100%);
border-bottom: 1px solid rgba(197,160,40,0.25);
overflow: hidden;
z-index: 90;
}
/* Animated gold sweep */
.flash-sale-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(197,160,40,0.07) 50%, transparent 100%);
animation: fsb-sweep 3.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes fsb-sweep {
0%, 100% { opacity: 0; transform: translateX(-30%); }
50% { opacity: 1; transform: translateX(30%); }
}
.flash-sale-banner__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 9px 24px;
max-width: var(--max-width);
margin: 0 auto;
}
/* Left, name + badge */
.flash-sale-banner__left {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.flash-sale-banner__bolt {
font-size: 0.95rem;
animation: fsb-pulse 1.8s ease-in-out infinite;
display: inline-block;
}
@keyframes fsb-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.65; transform: scale(0.9); }
}
.flash-sale-banner__name {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text);
}
.flash-sale-banner__pct-badge {
display: inline-block;
background: var(--gradient-gold);
color: #120d00;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
padding: 3px 9px;
border-radius: 2px;
line-height: 1.5;
}
/* Center, countdown */
.flash-sale-banner__countdown {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.fsc-unit {
display: flex;
flex-direction: column;
align-items: center;
min-width: 34px;
}
.fsc-num {
font-size: 1.05rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.15;
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.fsc-lbl {
font-size: 0.56rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-tertiary);
line-height: 1;
margin-top: 1px;
}
.fsc-sep {
font-size: 0.95rem;
font-weight: 700;
color: var(--color-accent);
opacity: 0.6;
margin-bottom: 10px;
line-height: 1;
}
/* Right, auto-apply note */
.flash-sale-banner__right {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
color: var(--color-text-secondary);
letter-spacing: 0.03em;
flex-shrink: 0;
}
.flash-sale-banner__right svg {
color: var(--color-success);
flex-shrink: 0;
}
/* Product page flash sale overrides */
.product-main__price-compare {
text-decoration: line-through;
color: var(--color-text-tertiary);
font-size: 0.9em;
margin-right: 6px;
}
.fs-sale-badge {
display: inline-block;
background: var(--gradient-gold);
color: #120d00;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
padding: 3px 9px;
border-radius: 2px;
vertical-align: middle;
margin-left: 8px;
}
.product-main__price-note {
font-size: 0.74rem;
color: var(--color-accent);
margin-top: 8px;
opacity: 0.85;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.flash-sale-banner__inner {
flex-wrap: wrap;
gap: 8px 14px;
padding: 8px 16px;
justify-content: center;
}
.flash-sale-banner__right { display: none; }
.fsc-num { font-size: 0.9rem; }
.fsc-unit { min-width: 28px; }
}
@media (max-width: 480px) {
.flash-sale-banner__name { font-size: 0.72rem; }
}
/* ============================================================
Cart Upgrade Upsell Card
============================================================ */
.cart-upsell {
position: relative;
margin: 16px 16px 4px;
background: linear-gradient(135deg, #1a1200 0%, #110d00 60%, #1a1200 100%);
border: 1px solid rgba(197, 160, 40, 0.2);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 0 28px rgba(197, 160, 40, 0.07);
}
/* Gold top accent line */
.cart-upsell__accent-bar {
height: 2px;
background: linear-gradient(
to right,
transparent 0%,
#b8860b 20%,
#f0d060 50%,
#b8860b 80%,
transparent 100%
);
}
.cart-upsell__inner {
padding: 14px 14px 14px;
display: flex;
flex-direction: column;
gap: 11px;
}
/* Header row, sparkle + label */
.cart-upsell__heading {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent);
}
/* Product row */
.cart-upsell__product {
display: flex;
align-items: center;
gap: 11px;
}
/* Thumbnail */
.cart-upsell__thumb {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: var(--radius-sm);
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.cart-upsell__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cart-upsell__img-placeholder {
width: 100%;
height: 100%;
}
/* Product info */
.cart-upsell__details {
flex: 1;
min-width: 0;
}
.cart-upsell__title {
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text);
line-height: 1.3;
margin: 0 0 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cart-upsell__prices {
display: flex;
align-items: baseline;
gap: 7px;
}
.cart-upsell__price--original {
font-size: 0.72rem;
color: var(--color-text-tertiary);
text-decoration: line-through;
}
.cart-upsell__price--sale {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-accent);
}
.cart-upsell__disclaimer {
font-size: 0.6rem;
color: var(--color-text-tertiary);
opacity: 0.7;
margin: 5px 0 0;
line-height: 1.4;
}
/* Upgrade button */
.cart-upsell__btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 16px;
font-size: 0.78rem;
letter-spacing: 0.06em;
}
.cart-upsell__btn:disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
/* =============================================================
PRODUCT HIGHLIGHTS
============================================================= */
.product-highlights {
padding: 32px 0;
border-top: 1px solid var(--color-border);
}
/* Inside Overview tab: sits above the card, no top border */
.product-highlights--overview {
padding: 0 0 20px;
border-top: none;
}
/* Inside Files tab: sits below the card, border acts as divider */
.product-highlights--files {
padding: 20px 0 0;
border-top: 1px solid var(--color-border);
}
.product-highlights__inner {
display: flex;
flex-direction: column;
gap: 28px;
}
/* ── Number stats row ──────────────────────────────────────── */
.ph-stats {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
flex-wrap: wrap;
}
.ph-stat {
flex: 1 1 120px;
max-width: 180px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 16px;
position: relative;
}
.ph-stat + .ph-stat::before {
content: '';
position: absolute;
left: 0;
top: 20%;
height: 60%;
width: 1px;
background: var(--color-border);
}
.ph-stat__value {
font-size: clamp(1.8rem, 4vw, 2.4rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
background: var(--gradient-gold-text, linear-gradient(135deg, #d4af37 0%, #f5e27a 50%, #c5a028 100%));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 6px;
}
.ph-stat__label {
font-size: 0.75rem;
color: var(--color-text-secondary);
letter-spacing: 0.06em;
text-transform: uppercase;
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
}
/* ── Check / trust-badge row ───────────────────────────────── */
.ph-checks {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 16px;
}
.ph-check {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
background: var(--color-bg-card, #1a1410);
border: 1px solid var(--color-border);
border-radius: 100px;
font-size: 0.8rem;
color: var(--color-text-secondary);
cursor: default;
position: relative;
text-decoration: none;
transition:
border-color 0.35s var(--ease-out-expo),
background 0.35s var(--ease-out-expo),
box-shadow 0.35s var(--ease-out-expo),
transform 0.35s var(--ease-out-expo),
color 0.2s ease;
}
.ph-check--link,
button.ph-check {
cursor: pointer;
}
/* Identical hover on every badge, link, button, and static div */
.ph-check:hover {
border-color: rgba(197, 160, 40, 0.55);
background: rgba(197, 160, 40, 0.07);
box-shadow:
0 0 0 1px rgba(197, 160, 40, 0.18),
0 6px 24px rgba(197, 160, 40, 0.18);
transform: translateY(-2px);
color: rgba(255, 255, 255, 0.9);
}
.ph-check__icon {
color: var(--color-accent, #c5a028);
font-size: 0.75rem;
font-weight: 700;
flex-shrink: 0;
}
/* ── Tooltip trigger icon ──────────────────────────────────── */
.ph-stat__tip-icon,
.ph-check__tip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
color: var(--color-text-secondary);
font-size: 0.6rem;
font-weight: 700;
font-style: normal;
flex-shrink: 0;
cursor: help;
}
/* ── Floating tooltip ──────────────────────────────────────── */
.ph-tooltip {
position: absolute;
z-index: 9000;
max-width: 260px;
padding: 8px 12px;
background: #2a211a;
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: 0.75rem;
line-height: 1.45;
color: var(--color-text-secondary);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
text-align: center;
}
.ph-tooltip:not([aria-hidden="true"]) {
opacity: 1;
}
/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 600px) {
.ph-stats {
gap: 0;
}
.ph-stat {
flex: 1 1 80px;
padding: 16px 10px;
}
.ph-stat__value {
font-size: 1.6rem;
}
.ph-checks {
display: none;
}
}
/* =============================================================
PRODUCT CARD, REVIEW STARS
============================================================= */
.product-card__reviews {
padding: 3px 0 8px;
min-height: 22px; /* Reserves space for the star-rating row injected by JS,
preventing a layout shift when ratings load from cache
or from the Supabase fetch. 22px = padding (11px) +
star icons line-height (11px). */
}
.pcr {
display: flex;
align-items: center;
gap: 5px;
}
.pcr__stars {
display: flex;
gap: 1px;
align-items: center;
}
.pcr__avg {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-accent);
line-height: 1;
}
.pcr__count {
font-size: 0.7rem;
color: var(--color-text-tertiary);
line-height: 1;
}
/* ── FOMO Recent-Order Popup ── */
@keyframes fomo-slide-in {
from { opacity: 0; transform: translateX(calc(-100% - 32px)); }
to { opacity: 1; transform: translateX(0); }
}
/* ══════════════════════════════════════════════════════════════════════════
ABOUT PAGE
══════════════════════════════════════════════════════════════════════════ */
/* 1, Hero */
.about-hero {
padding: 80px 0 60px;
text-align: center;
}
/* 2, Story + Stats */
.about-story {
padding: 60px 0 80px;
}
.about-story__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
/* The story is now a proper narrative and runs roughly twice the height of the
stats card beside it, which left a large dead area in the right column. Above
the stacking breakpoint the card rides along with the story instead of sitting
at the top of an empty column, so the numbers stay in view exactly while the
story is making the case for them. The grid is already align-items:start,
which is what sticky needs to work here. */
@media (min-width: 769px) {
.about-stats-card {
position: sticky;
top: 104px;
}
}
.about-story__heading {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
margin-bottom: 24px;
color: var(--color-text);
}
.about-story__text p {
color: var(--color-text-secondary);
line-height: 1.75;
margin-bottom: 16px;
}
.about-story__text p:last-child { margin-bottom: 0; }
/* The story's closing beat: "Meet the Alvar Suite." It is the line the whole
page has been walking towards, so it steps up out of body copy into the
heading face, with a hairline above it to give it room. Restrained on
purpose — the gold is already carried by .text-accent inside it, and the
page's authority comes from space, not decoration. */
/* "Complete" inside a tagline is a PRODUCT, not an adjective. Weight plus a
step up the text ramp is enough to say so; colouring it gold would put it in
competition with the plan name above it. */
.kpz__tagname {
font-weight: 650;
color: var(--color-text);
}
.about-story__payoff {
font-family: var(--font-heading);
font-size: clamp(1.25rem, 2.4vw, 1.65rem);
font-weight: 700;
line-height: 1.3;
color: var(--color-text) !important;
margin-top: 28px !important;
padding-top: 24px;
border-top: 1px solid var(--color-border, rgba(255, 255, 255, .08));
letter-spacing: -0.01em;
}
/* Stats card */
.about-stats-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: var(--color-border);
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--color-border);
}
.about-stats-card__item {
background: rgba(255,255,255,0.03);
padding: 32px 28px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
transition: background 0.35s ease;
cursor: default;
}
.about-stats-card__item:hover {
background: rgba(201,162,39,0.07);
}
.about-stats-card__num,
.about-stats-card__num [data-countup] {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-weight: 700;
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.about-stats-card__num {
display: flex;
align-items: center;
gap: 4px;
}
.about-stats-card__label {
font-size: 0.78rem;
color: var(--color-text-secondary);
letter-spacing: 0.02em;
}
/* 3, Core Values */
.about-values {
padding: 80px 0;
border-top: 1px solid var(--color-border);
}
.about-values__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.about-value-card {
background: rgba(255,255,255,0.03);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: 36px 28px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
transition:
border-color 0.35s ease,
box-shadow 0.35s ease,
transform 0.35s var(--ease-out-expo),
background 0.35s ease;
}
.about-value-card:hover {
border-color: rgba(201,162,39,0.4);
background: rgba(201,162,39,0.05);
box-shadow: 0 8px 40px rgba(201,162,39,0.12), 0 2px 12px rgba(0,0,0,0.3);
transform: translateY(-5px);
}
.about-value-card:hover .about-value-card__icon {
background: rgba(201,162,39,0.22);
}
.about-value-card__icon {
width: 60px;
height: 60px;
border-radius: 12px;
background: rgba(201,162,39,0.12);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.35s ease;
}
.about-value-card h3 {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 600;
color: var(--color-text);
}
.about-value-card p {
font-size: 0.88rem;
color: var(--color-text-secondary);
line-height: 1.7;
}
/* 4, Why Trust */
.about-trust {
padding: 80px 0;
border-top: 1px solid var(--color-border);
}
/* Metrics bar */
.about-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: rgba(255,255,255,0.03);
border: 1px solid var(--color-border);
border-radius: 16px;
overflow: hidden;
margin-bottom: 40px;
}
.about-metrics__item {
padding: 32px 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
border-right: 1px solid var(--color-border);
}
.about-metrics__item:last-child { border-right: none; }
.about-metrics__num {
font-family: var(--font-heading);
font-size: clamp(1.6rem, 2.8vw, 2.2rem);
font-weight: 700;
background: var(--gradient-gold-text);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
}
.about-metrics__label {
font-size: 0.78rem;
color: var(--color-text-secondary);
}
/* Trust cards grid */
.about-trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 40px;
}
.about-trust-card {
background: rgba(255,255,255,0.03);
border: 1px solid var(--color-border);
border-radius: 14px;
padding: 28px 22px;
display: flex;
flex-direction: column;
gap: 14px;
transition:
border-color 0.35s ease,
box-shadow 0.35s ease,
transform 0.35s var(--ease-out-expo),
background 0.35s ease;
}
.about-trust-card:hover {
border-color: rgba(201,162,39,0.4);
background: rgba(201,162,39,0.05);
box-shadow: 0 8px 40px rgba(201,162,39,0.12), 0 2px 12px rgba(0,0,0,0.3);
transform: translateY(-4px);
}
.about-trust-card:hover .about-trust-card__icon {
background: rgba(201,162,39,0.22);
}
.about-trust-card__icon {
width: 48px;
height: 48px;
border-radius: 10px;
background: rgba(201,162,39,0.12);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.35s ease;
}
.about-trust-card h3 {
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text);
}
.about-trust-card p {
font-size: 0.84rem;
color: var(--color-text-secondary);
line-height: 1.65;
}
.about-trust-card__link {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
transition: opacity 0.2s ease;
}
.about-trust-card__link:hover { opacity: 0.75; }
/* Social pills */
.about-social-pills {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.about-social-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: rgba(255,255,255,0.04);
font-size: 0.82rem;
color: var(--color-text-secondary);
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.about-social-pill:hover {
border-color: rgba(201,162,39,0.4);
color: var(--color-text);
background: rgba(201,162,39,0.06);
}
/* 5, Community */
.about-community {
padding: 80px 0 100px;
border-top: 1px solid var(--color-border);
}
.about-community__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
}
.about-community__icon {
width: 72px;
height: 72px;
border-radius: 18px;
background: rgba(201,162,39,0.12);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.about-community__inner .section-heading { margin-bottom: 12px; }
.about-community__inner .section-subheading { margin-bottom: 32px; max-width: 520px; }
/* Discord button */
.btn--discord {
/* Same sweep mechanic as .btn--primary and .btn--outline, in Discord blurple
rather than gold: a 210%-wide two-stop ramp parked at 100% so the resting
half shows, sliding to 0% on hover so the bright half wipes across.
The right half is the resting face and stays recognisably #5865F2. The
left half is a lighter blurple, so the button brightens on hover the way
the gold ones do. Discord's own convention is to go DARKER on hover, which
is what this used to do, but matching the rest of the page was the point.
Do NOT restate `background` in the :hover rule. The shorthand resets
background-size and background-position and kills the slide, which is
exactly how the gold buttons lost this animation once already. */
background: linear-gradient(to right,
#7a86f7 0%, #8e98f9 49.9%,
#4752c4 50%, #5865f2 78%, #5865f2 100%
);
background-size: 210% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
color: #fff;
border-color: transparent;
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
transition:
background-position 0.55s var(--ease-out-expo),
box-shadow 0.3s ease,
transform 0.3s ease;
}
.btn--discord:hover {
background-position: 0% 0;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(88,101,242,0.4);
}
.about-community__socials {
display: flex;
gap: 12px;
}
.about-community__social-btn {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.about-community__social-btn:hover {
background: rgba(255,255,255,0.1);
color: var(--color-text);
border-color: rgba(255,255,255,0.2);
}
/* Responsive */
@media (max-width: 1024px) {
.about-trust-grid { grid-template-columns: repeat(2, 1fr); }
.about-metrics { grid-template-columns: repeat(2, 1fr); }
.about-metrics__item:nth-child(2) { border-right: none; }
.about-metrics__item:nth-child(3),
.about-metrics__item:nth-child(4) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 768px) {
.about-story__grid { grid-template-columns: 1fr; }
.about-values__grid { grid-template-columns: 1fr; }
.about-trust-grid { grid-template-columns: 1fr 1fr; }
.about-metrics { grid-template-columns: 1fr 1fr; }
.about-hero { padding: 56px 0 40px; }
.about-story,
.about-values,
.about-trust,
.about-community { padding: 56px 0; }
}
@media (max-width: 480px) {
.about-trust-grid { grid-template-columns: 1fr; }
}
/* ── Product page, See It In Action demo section ─────────────────────── */
.pm-demo {
padding: 80px 0;
border-top: 1px solid var(--color-border);
}
.pm-demo__header {
margin-bottom: 48px;
}
.pm-demo__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
.pm-demo__card {
display: flex;
flex-direction: column;
gap: 14px;
}
/* YouTube thumbnail */
.pm-demo__yt {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #000;
aspect-ratio: 16/9;
cursor: pointer;
}
.pm-demo__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s var(--ease-out-expo), opacity 0.3s ease;
}
.pm-demo__yt:hover .pm-demo__thumb {
transform: scale(1.03);
opacity: 0.85;
}
.pm-demo__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
}
.pm-demo__play-ring {
width: 68px;
height: 68px;
border-radius: 50%;
background: var(--color-accent);
color: #1a1200;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 28px rgba(0,0,0,0.5), 0 0 0 6px rgba(201,162,39,0.25);
transition: transform 0.25s ease, box-shadow 0.25s ease;
padding-left: 4px; /* optical centering of play icon */
}
.pm-demo__yt:hover .pm-demo__play-ring {
transform: scale(1.1);
box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 10px rgba(201,162,39,0.2);
}
.pm-demo__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 12px;
}
/* Before / After */
.pm-demo__ba {
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16/9;
cursor: ew-resize;
background: #000;
}
.pm-demo__ba-before,
.pm-demo__ba-after {
position: absolute;
inset: 0;
}
.pm-demo__ba-before video,
.pm-demo__ba-after video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.pm-demo__ba-after {
clip-path: inset(0 50% 0 0);
}
.pm-demo__ba-divider {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background: rgba(255,255,255,0.9);
pointer-events: none;
transform: translateX(-50%);
}
.pm-demo__ba-handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
color: #111;
box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.pm-demo__ba-label {
position: absolute;
top: 12px;
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
padding: 4px 10px;
border-radius: 4px;
background: rgba(0,0,0,0.55);
color: #fff;
backdrop-filter: blur(4px);
pointer-events: none;
}
.pm-demo__ba-label--before { right: 12px; }
.pm-demo__ba-label--after { left: 12px; }
/* Caption row */
.pm-demo__caption {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.78rem;
color: var(--color-text-secondary);
padding: 0 2px;
}
@media (max-width: 680px) {
.pm-demo__grid { grid-template-columns: 1fr; }
.pm-demo { padding: 56px 0; }
}
@keyframes fomo-slide-out {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(calc(-100% - 32px)); }
}
.fomo-popup {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 9999;
width: 320px;
max-width: calc(100vw - 48px);
background: rgba(16, 14, 10, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
overflow: hidden;
display: flex;
align-items: center;
gap: 13px;
padding: 13px 36px 13px 13px;
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: translateX(calc(-100% - 32px));
transition: opacity 0.45s var(--ease-out-expo), transform 0.45s var(--ease-out-expo), border-color 0.3s ease;
will-change: transform, opacity;
}
.fomo-popup--visible {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.fomo-popup:hover {
border-color: rgba(197, 160, 40, 0.28);
}
.fomo-popup__accent {
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(197, 160, 40, 0.55) 50%, transparent 100%);
}
.fomo-popup__img-wrap {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 10px;
overflow: hidden;
position: relative;
background: rgba(197, 160, 40, 0.08);
border: 1px solid rgba(197, 160, 40, 0.15);
}
.fomo-popup__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fomo-popup__img-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(197, 160, 40, 0.5);
}
.fomo-popup__body {
flex: 1;
min-width: 0;
}
.fomo-popup__line1 {
font-size: 0.75rem;
color: var(--color-text-secondary);
margin: 0 0 3px;
line-height: 1.35;
}
.fomo-popup__location {
color: rgba(245, 240, 235, 0.9);
font-weight: 600;
}
.fomo-popup__title {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text);
margin: 0 0 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s ease;
line-height: 1.3;
}
.fomo-popup:hover .fomo-popup__title {
color: var(--color-accent);
}
.fomo-popup__time {
font-size: 0.68rem;
color: rgba(245, 240, 235, 0.35);
margin: 0;
line-height: 1;
}
.fomo-popup__close {
position: absolute;
top: 9px;
right: 9px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: 50%;
color: var(--color-text-secondary);
cursor: pointer;
padding: 0;
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}
.fomo-popup:hover .fomo-popup__close {
opacity: 1;
}
.fomo-popup__close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--color-text);
}
/* FOMO popup: never show on mobile */
@media (max-width: 767px) {
.fomo-popup {
display: none !important;
}
}
/* =============================================================
MOBILE PERFORMANCE, eliminate GPU-heavy effects on phones
============================================================= */
@media (max-width: 768px) {
/* backdrop-filter: blur() is extremely expensive on mobile GPUs -
runs on every scroll frame for every blurred element.
Replace with a near-opaque solid background; visually identical
on small screens and eliminates the GPU bottleneck entirely. */
.site-header {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(19, 15, 10, 0.97) !important;
}
.mobile-menu {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(16, 12, 8, 0.99) !important;
}
/* Dropdown menus on mobile are handled via mobile-menu, not these */
.header__dropdown {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(16, 12, 8, 0.99) !important;
}
/* Newsletter popup */
.nlp-overlay, .nlp-modal {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Cart drawer */
.cart-drawer {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Reduce hero canvas area to nothing on mobile, canvas is already
disabled in JS, hide the element so it takes no layout space */
.hero__waves { display: none; }
}
/* =============================================================
MOBILE SPACING, reduce section padding on small screens
Desktop sections use 80-100px padding which looks great at
1200px+ but occupies 10-25% of a phone screen as empty space.
Target: ~48px top/bottom on mobile (≤640px).
============================================================= */
@media (max-width: 640px) {
/* Generic section-padding utility (used on before-after, hp-aff, etc.) */
.section-padding {
padding-top: 52px;
padding-bottom: 52px;
}
/* Section header spacing */
.section-header:not(.shopify-section) {
margin-bottom: 36px;
}
/* Show only 3 products on mobile, 6 are rendered but 4-6 hidden */
.product-grid .product-card:nth-child(n+4) {
display: none;
}
/* Featured products (hero + normal) */
.featured-products,
.collection-main {
padding: 52px 0;
}
.featured-products--hero {
padding-top: 60px;
}
.featured-products--hero .section-header {
margin-bottom: 40px;
}
/* Before/After */
.before-after {
padding: 52px 0;
}
/* Reviews */
.reviews-section {
padding: 52px 0;
}
/* Pack comparison */
.pack-comparison {
padding: 52px 0;
}
/* FAQ */
.faq-section {
padding: 52px 0;
}
/* Stats bar */
.stats-section {
padding: 44px 0;
}
/* Discord CTA */
.discord-cta {
padding: 52px 0;
}
/* Shop CTA */
.shop-cta {
padding: 52px 0;
}
/* Creator videos (sc-cv already has 48px at 767px, keep consistent) */
.sc-cv {
padding: 48px 0;
}
}
/* =============================================================
PREFERS-REDUCED-MOTION, honour OS accessibility setting
"Reduce" is not "remove all motion". WCAG 2.3.3 is about movement large
or continuous enough to disorient (parallax, ambient loops, big
translates), not the small transform/opacity/background changes that are
a control's ONLY visible sign it responded. The universal `*, *::before,
*::after { animation-duration:0.01ms; transition-duration:0.01ms }` this
block used to end with nuked every transition on the page, hover lifts,
the FAQ chevron, card rim-lights, the accordion, the primary-button
sweep, the nav underline, right along with the ambient loops.
That matters beyond the small number of visitors who deliberately turned
reduced motion on: a lot of Windows installs report prefers-reduced-motion
whenever Settings > Accessibility > Visual effects > "Animation effects"
is off, which is off by default on plenty of machines and has nothing to
do with vestibular sensitivity. So the old block was quietly flattening
the whole site's interactivity for a large slice of Windows traffic,
which is what made the site look broken on Windows rather than merely
calmer.
New policy: stop the continuous/ambient decoration outright (real
candidates for discomfort, never load-bearing), collapse the two
effects that are pure movement (button sweep, nav underline) to an
instant-but-still-visible state instead of deleting them, and leave
every ordinary transition (hover color/opacity/background, card lifts,
the accordion, form focus states) alone. Those are exactly what
prefers-reduced-motion is NOT asking to stop. */
@media (prefers-reduced-motion: reduce) {
/* Continuous/ambient loops: run forever, carry no information, are the
actual disorientation risk. Each gets an explicit `animation: none`
rather than relying on animation-duration:0.01ms, which for these
shapes (opacity/transform keyframes with fill:none) can freeze the
element mid-cycle on some engines instead of cleanly resetting it. */
.hero__gradient { animation: none !important; } /* heroGradientShift, hero background drift */
.hero .btn--primary::after { animation: none !important; } /* heroButtonShimmer, hero CTA light sweep */
.header__account-dot::after { animation: none !important; } /* header-account-pulse, signed-in status ring */
.review-card--skeleton { animation: none !important; } /* rs-pulse, review-card loading skeleton */
.ab-bar::before { animation: none !important; } /* abSweep, announcement-bar gold sweep */
.ab-bar__label { animation: none !important; } /* abBoltPulse, announcement-bar label pulse */
.sc-hero__scroll { animation: none !important; } /* sc-bounce, "scroll down" cue bounce */
.stats-item::before { animation: none !important; } /* statShimmer, stats-card light sweep */
.flash-sale-banner::before { animation: none !important; } /* fsb-sweep, flash-sale banner gold sweep */
.flash-sale-banner__bolt { animation: none !important; } /* fsb-pulse, flash-sale bolt-emoji pulse */
/* NOT touched, on purpose: `.cart-drawer__spinner` (keyframe `spin`) is an
indeterminate-progress spinner, functional feedback that something is
loading, not decoration, so it keeps running under reduced motion. */
/* Scroll-reveal: unchanged from before, still instant instead of animated.
(The separate .reveal rule near the top of this file, in the desktop
min-width:769px block, additionally zeroes the `filter: blur()` GPU
effect reveal uses on desktop; that one stays too, it is not covered
by anything here.) */
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Deliberately NOT collapsed: the gold sweep on .btn--primary/.btn--buy
hover and the header nav underline. A first fix (2026-08-30, briefly
live) snapped these to 0.01ms under reduced motion; Alvar overruled it
the same evening after seeing it on a real Windows machine, and the
call stands on the merits: both are brief, hover-triggered, sub-second,
travel inside the control's own bounds, and are the brand's signature
feedback. They are nothing like the ambient loops above, and most
machines reporting reduce here are Windows installs with "Animation
effects" off by default, not people who chose it. If a real
vestibular-safety pass is ever wanted, revisit BOTH together. */
}
/* ── Nav CTA (Alvar revamp): gold "Get started free" in the header, in the
house button style (uppercase gradient slab), sized for the header row. ── */
.header__actions .header__cta{display:none;padding:10px 18px;font-size:.66rem;margin-left:2px}
@media(min-width:769px){.header__actions .header__cta{display:inline-flex}}
.mobile-menu__cta{width:100%;justify-content:center;margin:18px 0 4px}
/* External-link glyph on a footer link. Sized and nudged to sit on the text
baseline; inherits colour so it dims with the link like the rest of the row. */
.fl-ext{display:inline-block;margin-left:5px;vertical-align:-1px;opacity:.55;transition:opacity .2s ease}
.footer__list a:hover .fl-ext{opacity:1}
/* ══ FLUTED GLASS RIBS ═══════════════════════════════════════════════════════
Lives here, not in a page, because two surfaces use it: the homepage hero and
the sign-in art panel. It was duplicated once and that was one time too many.
theme.js builds the ribs and drives --lit (how brightly lit) and --vis
(whether the rib is there at all) per element. Everything here only reads
those two numbers, and only through opacity and transform, so the whole
effect stays on the compositor. */
:root {
/* Also declared in index.html's critical CSS so the hero's first paint has it
before this file loads. Two copies, deliberately, and they must agree. */
--hero-light: 255, 148, 51;
}
.has-ribs { background: none !important; }
.rib {
position: absolute;
top: 0;
bottom: 0;
width: var(--rw);
opacity: var(--vis, 0);
transform-origin: 50% 100%;
transform: scaleX(calc(1 + var(--lit, 0) * .06)) translateX(calc(var(--lean, 0) * var(--lit, 0) * 2px));
will-change: transform, opacity;
}
/* The resting rib: light edge, body, dark seam. Identical to the painted
fallback, so turning JS off changes nothing you can see. */
.rib::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(var(--hero-light), .26) 0%,
rgba(var(--hero-light), .085) 15%,
rgba(0, 0, 0, 0) 40%,
rgba(0, 0, 0, .34) 78%,
rgba(0, 0, 0, .46) 94%,
rgba(var(--hero-light), .26) 100%);
}
/* The lit rib, cross-faded in by --lit. A second static layer rather than
brightening the first, because cross-fading two gradients is one compositor
op and animating colour stops is a repaint. */
.rib::after {
content: "";
position: absolute;
inset: 0;
opacity: var(--lit, 0);
background: linear-gradient(90deg,
rgba(var(--hero-light), .62) 0%,
rgba(var(--hero-light), .22) 15%,
rgba(0, 0, 0, 0) 40%,
rgba(0, 0, 0, .16) 78%,
rgba(0, 0, 0, .22) 94%,
rgba(var(--hero-light), .62) 100%);
}
/* ══ ONE CARD SURFACE ════════════════════════════════════════════════════════
Every card on the site is built from these four tokens. They existed as five
different hand-tuned recipes before, which is why the page read as a set of
parts rather than a system: the review cards and the plan cards looked right,
the features grid and the AI cards looked like plastic, and nothing agreed.
The recipe is taken FROM the two that already worked (.rvw-card and
.kpz__inner), not invented, then given the two things they were missing:
1. GLOSS. A single top hairline says "edge". A short sheen falling from the
top says "polished surface", and that is the whole difference between a
flat panel and something that looks made. It is the first gradient below,
and it dies by 38% so it never becomes a highlight sitting in the middle
of the card.
2. LESS CONTRAST WITH THE PAGE. The old fills sat well above a #070503 page
and shouted. A premium card is barely lighter than what it sits on and is
read by its EDGE, not by its brightness. So the fill drops close to the
page and the hairline does the work of separating it.
The gold card, the closing CTA and the review cards' own gold ring keep their
own treatments on top of this: those are deliberate exceptions, not drift. */
:root {
--surface-fill:
linear-gradient(180deg, rgba(255, 246, 230, .045) 0%, rgba(255, 246, 230, .012) 16%, rgba(255, 246, 230, 0) 38%),
linear-gradient(180deg, rgba(19, 16, 11, .985) 0%, rgba(11, 9, 6, 1) 100%);
--surface-border: rgba(212, 184, 106, .11);
/* Lit from above, the same logic as the gold buttons: highlight on the top
inside edge, a dark line along the bottom. One without the other is a
sticker. */
--surface-bevel: inset 0 1px 0 rgba(255, 240, 214, .085), inset 0 -1px 0 rgba(0, 0, 0, .72);
--surface-lift: 0 18px 44px -26px rgba(0, 0, 0, .85);
--surface-hover-border: rgba(212, 184, 106, .3);
}
/* The features grid ("A suite of tools in one plugin"). Was the worst offender:
rgba(33,29,22) on a near-black page with a cool white hairline. */
.kmore__card {
background: var(--surface-fill) !important;
border: 1px solid var(--surface-border) !important;
box-shadow: var(--surface-bevel), var(--surface-lift) !important;
}
.kmore__card:hover { border-color: var(--surface-hover-border) !important; }
/* The two AI cards, inside their spinning gold rings. */
.kp-addon-in,
.kp-credits-inner {
background: var(--surface-fill) !important;
box-shadow: var(--surface-bevel) !important;
}
/* Reviews. Already close; this is what the tokens were derived from, so the
change here is the gloss and a warm hairline in place of a cool one. */
.rvw-card {
background: var(--surface-fill) !important;
border: 1px solid var(--surface-border) !important;
box-shadow: var(--surface-bevel), 0 20px 44px rgba(0, 0, 0, .5) !important;
}
/* Plan cards. The ring and the gold card keep their own rules; this is the
surface inside the ring only. */
.kpz__inner {
background: var(--surface-fill) !important;
box-shadow: var(--surface-bevel) !important;
}
.kpz__card--gold .kpz__inner {
/* The gold card stays warmer than its neighbours on purpose: it is the one
being recommended and the tint is how that reads without a badge. */
background:
linear-gradient(180deg, rgba(255, 246, 230, .05) 0%, rgba(255, 246, 230, .013) 16%, rgba(255, 246, 230, 0) 38%),
linear-gradient(180deg, rgba(26, 21, 9, .985) 0%, rgba(12, 10, 5, 1) 100%) !important;
}
/* The FAQ rows are styled at .fc-item, further up this file. A rule was added
here for .kfaq__item, which is the SECTION's class prefix and not the row's:
it matched no element on any page, so it looked applied and did nothing.
Verified against the markup before removing it. */
/* ══ THE DOWNLOAD HERO ═══════════════════════════════════════════════════════
A site-wide pass at making every inner-page hero consistent was tried twice
and reverted twice; it is being redone from scratch with the whole picture in
view rather than patched from here.
What survives is the DOWNLOAD hero, kept exactly as it looked after that
attempt, because Alvar picked it as the reference the next pass should match.
So this is not leftover styling: it is the specimen. Three declarations, and
between them they are the whole of what "consistent" was meant to mean.
the glow ellipse 90% 70% at 50% 45%, in the hero's own light colour.
The two pages that already had a glow agreed on the ellipse and
differed only in the vertical anchor (55% and 40%); 45% splits
them.
the heading clamp(2rem, 4.5vw, 3rem) at 800, the pricing hero's size, which
sits below the homepage's without looking like a different site.
the sub 1rem / 1.65 in the secondary text colour.
Nothing structural: no padding, no alignment, no widths, no margins. Those
are the page's own, and normalising them is what made the first attempt
wrong. */
.kd-hero__gradient {
background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(var(--hero-light), .10) 0%, transparent 70%) !important;
}
.kd-hero h1 {
font-family: var(--font-heading) !important;
font-size: clamp(2rem, 4.5vw, 3rem) !important;
font-weight: 800 !important;
letter-spacing: -.02em !important;
line-height: 1.12 !important;
color: var(--color-text) !important;
}
.kd-hero > .container > p {
font-size: 1rem !important;
line-height: 1.65 !important;
color: var(--color-text-secondary) !important;
}
/* ══════════════════════════════════════════════════════════════════════════
MOBILE CORRECTNESS PASS, 2026-08-24
Everything below fixes a defect measured on a real phone viewport, on both
Chromium and WebKit. Each block records the measurement that motivated it so
a later reader can tell an intentional rule from an accident.
These rules live at the END of the file on purpose. Most of the values they
correct are set in each page's INLINE critical CSS, which sits after the
theme.css in and therefore wins any equal-specificity contest
on document order. Selectors here are doubled (an ancestor added) wherever
they must beat an inline rule, and the comment says so where that applies.
══════════════════════════════════════════════════════════════════════════ */
/* ----- iOS zooms the page on any input under 16px, and never zooms back -----
Safari force-zooms the viewport when a focused field computes below 16px, and
there is no zoom-out on blur, so the page stays magnified for the rest of the
session. Measured 2026-08-24 across the site, 10 fields in 6 rules:
.hdr-picker__search 12.8px header AND footer, so every page
(a .footer__newsletter-input was reported too; it occurs ZERO times in the
shipping HTML, same as .header__logo-text above, so it is not listed)
.fc-input / .fc-textarea 14.72px contact form, 4 fields
.kp-custom input 14.72px credit top-up on /pricing and /download
.rv-filter-sel 14.1px reviews rating filter
.ka input 15px sign-in
.fc-search 15.2px FAQ search
Applied to the elements rather than the classes so a field added later is
covered by default. 16px is the threshold, not a preference: 15.9px zooms.
Visual density is held with padding, which is what should have been carrying
it in the first place. */
@media (max-width: 768px) {
/* !important is load-bearing, not laziness. These fields are sized by each
page's own inline critical CSS with CLASS selectors (.fc-input,
.rv-filter-sel, .ka input), so a bare element selector here loses on
specificity, not just on order. Verified: without it, #ContactFormMessage
stayed at 14.72px, #rv-filter-rating at 14.08px and #rv-content at 14.88px.
The declaration can drop back to normal weight once each source rule is
corrected individually. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea {
font-size: 16px !important;
}
.hdr-picker__search { padding-top: 9px; padding-bottom: 9px; }
.fc-input, .fc-textarea, .fc-search { padding-top: 11px; padding-bottom: 11px; }
}
/* ----- Tap targets -----
Nothing in this codebase declared a minimum control size, so each control
ended up whatever its icon or its text-plus-padding happened to produce.
Measured 2026-08-24 at 390px:
.header__menu-toggle 24x24 the ONLY way into navigation on a phone
.footer__social-link 20x20 zero padding, the smallest target on the site
.sc-cv__pp 18x18 showcase play/pause
.fc-card-link 23.7px zero padding
.hdr-picker__trigger 27.6px
.fc-tab 37.8px
Scoped to coarse pointers so desktop density is untouched. The visible art
does not change size; the hit area grows around it. Where growing the box
would disturb the layout the padding is negative-compensated with margin. */
@media (hover: none) and (pointer: coarse) {
.site-header .header__menu-toggle,
.footer__social-link,
.sc-cv__pp,
.hdr-picker__trigger,
.fc-tab {
min-width: 44px;
min-height: 44px;
}
.site-header .header__menu-toggle,
.footer__social-link,
.sc-cv__pp {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* The social row is laid out with gap, so growing each link to 44px would
space them out. Pull the extra back with a negative margin: the hit area
grows, the visual rhythm does not move. */
.footer__social-link { margin: -12px; padding: 12px; }
.footer__social { gap: 4px; }
/* An inline text link inside a card, so it gets vertical padding only. */
.fc-card-link { display: inline-block; padding: 10px 0; }
}
/* ----- Safe areas -----
`env(safe-area-inset-*)` appeared nowhere in the codebase (0 matches across
assets/, site/ and site-astro/), while several fixed, full-bleed elements
sit exactly where the notch and the home-indicator live. The chat composer
anchors to the very bottom and could sit under the gesture bar; in landscape
the header had no inset for the sensor housing.
max() rather than a bare addition so the existing padding is the floor on a
device with no inset. */
@supports (padding: max(0px)) {
.site-header .container {
padding-left: max(13px, env(safe-area-inset-left));
padding-right: max(13px, env(safe-area-inset-right));
}
.mobile-menu {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.alv-cc { margin-bottom: env(safe-area-inset-bottom); }
}
/* ----- The cookie banner -----
Two measured problems, one rule.
1. It ate half a small phone. At 320x568 the banner was 300x283 at top 275,
so it spanned 275..558 of 568 and covered the second half of the hero
headline AND both calls to action. The first thing a visitor on an SE
could read was a cookie notice.
2. Its buttons were 332x26. 26px is not a tap target, and the pair sat close
enough to the chat bubble to fight it (see the z-index note below).
Capping the height in svh and letting the body scroll keeps the banner honest
on a short screen without truncating the text. */
@media (max-width: 480px) {
/* Cap the whole banner at roughly half a short screen and let the EXPLANATION
scroll inside it, while the buttons stay pinned and always reachable. At
320x568 the banner was 283px, 50% of the viewport, and it covered both hero
CTAs. Left uncapped, making the buttons a legal 44px would have pushed it to
319px and made that worse.
The text is scrolled rather than truncated on purpose: consent has to stay
fully readable, so nothing here removes information from the notice. */
.alv-cc {
display: flex;
flex-direction: column;
max-height: 48svh;
padding: 14px 16px 12px;
}
.alv-cc h2 { margin-bottom: 6px; flex: 0 0 auto; }
.alv-cc p {
margin-bottom: 10px;
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
/* Fade the last line so a cut-off sentence reads as "there is more, scroll"
rather than as broken text. Without it the notice looks truncated, which
is the wrong impression for a consent message. */
-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
}
.alv-cc-row { flex: 0 0 auto; }
.alv-cc-row .btn {
min-height: 44px;
padding: 12px 16px;
font-size: 0.72rem;
}
}
/* ----- Bottom-right stacking: chat bubble vs cookie banner vs mobile menu -----
All three lived at the bottom-right or on top of it, and the tie-breaks were
accidental:
#alvar-chat-root z-index 9999
.alv-cc z-index 9999 appended to LATER, so it won
.mobile-menu z-index 99 so the chat bubble floated over the menu
Measured consequence: a real click on the chat bubble timed out after 30s
because elementFromPoint at its centre returned the banner's Decline button.
Chat was unreachable to every first-time visitor.
The codebase already solves this twice for other competing elements
(.ac-cart-open and .ac-hidden-by-stn both hide the widget), so this follows
the same pattern rather than inventing a third. :has() is progressive
enhancement here: on a browser without it the bubble simply stays visible,
which is today's behaviour, so nothing regresses. */
body:has(.alv-cc) #alvar-chat-root,
body:has(.mobile-menu.is-open) #alvar-chat-root {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* ----- Tap targets, second pass -----
The first pass above covered the shared chrome. These are the ones the
re-measurement still showed short at 390px. Same coarse-pointer scoping.
Deliberately NOT included: a.skip-link, which measures 1x1 because it is
visually hidden until it takes keyboard focus. That is what a skip link is
supposed to do, and padding it out would put a 44px invisible target over the
top-left of every page. */
@media (hover: none) and (pointer: coarse) {
/* The pricing carousel dots, at the WCAG 2.5.8 minimum of 24x24 rather than
Apple's 44x44, and that is a deliberate ceiling rather than a shortfall.
The dots are 7px wide with 7px gaps, a 14px pitch. Three 44px hit areas in
that row cannot help overlapping each other, and an overlapping target is
WORSE than a small one: measured with elementFromPoint, a 44px pseudo-
element on dot 1 was covered by dot 2's, so a tap aimed at the first card
would have selected the second. Reaching 44px honestly would need ~36px
gaps, which turns a compact position indicator into a sparse row of buttons.
24px targets with a matching 17px gap give a 24px pitch: at the AA minimum,
no overlap, and the dots still look like an indicator. The carousel is also
swipeable, which was verified working, so these are a secondary affordance
rather than the only way through the cards.
The visible dot MUST stay 7px, so the hit area is grown with a pseudo-
element and the dot itself is untouched. */
.kpz__dots { gap: 17px; padding: 9px 0; }
.kpz__dots button { position: relative; }
.kpz__dots button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
transform: translate(-50%, -50%);
}
/* Segmented controls: Monthly/Annual and the All Access pair. Growing the
button grows the track around it, which is the correct look here. */
.kpz__bill button,
.kpz__plan button { min-height: 44px; }
.kpz__bill, .kpz__plan { align-items: stretch; }
/* Standalone links and buttons that read as buttons. */
.rvw-write,
.kshot__sound,
.mobile-menu__account-link { min-height: 44px; display: inline-flex; align-items: center; }
.mobile-menu__account-link { width: 100%; }
/* The logo is a link on every page and sat 4px short. */
.header__logo, .footer__logo { min-height: 44px; }
/* Proof rows are links to the reviews page. */
.kpz__proof, .hero__proof { min-height: 44px; display: flex; align-items: center; }
}
/* ----- Tap targets, final stragglers -----
Everything the third re-measurement still showed short. */
@media (hover: none) and (pointer: coarse) {
.fc-card-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.fc-card-link { padding: 12px 0; }
/* The FAQ search field and any bare input that escaped the sizing rule.
Doubled selectors: both are sized by the page's inline critical CSS. */
.fc-searchbar .fc-search, .fc-form .fc-input,
input.fc-search, input.fc-input, textarea.fc-input { min-height: 44px; }
/* "Get Alvar Suite free" on the sign-in page. It is an inline link inside a
sentence, which WCAG exempts, but it is also the only route to the plugin
for someone who has not installed it yet, so it gets a real target. */
.ka a[href*="download"], .ka-sub a { display: inline-block; padding: 12px 0; }
}
/* ----- Policy page contents -----
Terms is 26,514px tall on a phone and Privacy 16,785px, and until 2026-08-24
neither had a single in-page anchor: the only in either
document was the visually hidden skip link. A reader who wanted clause 13 had
to scroll roughly thirty screen heights and then scroll back.
A rather than a JS widget: it collapses by default, needs no script,
and works before any stylesheet or bundle has loaded, which is the right
quality bar for a legally required disclosure. */
.pol-toc {
margin: 20px 0 28px;
border: 1px solid var(--color-border, rgba(255,255,255,.12));
border-radius: 10px;
background: rgba(255,255,255,.02);
}
.pol-toc > summary {
cursor: pointer;
padding: 14px 16px;
font-family: var(--font-heading);
font-size: 0.95rem;
color: var(--color-text);
list-style: none;
min-height: 44px;
display: flex;
align-items: center;
gap: 8px;
}
.pol-toc > summary::-webkit-details-marker { display: none; }
.pol-toc > summary::before {
content: "";
width: 0; height: 0;
border-left: 5px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transition: transform 0.2s ease;
flex: 0 0 auto;
opacity: 0.7;
}
.pol-toc[open] > summary::before { transform: rotate(90deg); }
.pol-toc nav { padding: 0 16px 12px; }
.pol-toc ol {
margin: 0;
padding-left: 0;
/* No list markers. The Terms headings already start with their own number
("1. Parties and scope"), so an marker rendered "1. 1. Parties and
scope". is still the right ELEMENT, because the order is meaningful
and screen readers should announce it as a numbered list; only the visible
marker is suppressed. */
list-style: none;
}
.pol-toc li { margin: 0; }
.pol-toc a {
display: block;
padding: 10px 0;
color: var(--color-text-secondary);
text-decoration: none;
font-size: 0.9rem;
line-height: 1.35;
}
.pol-toc a:hover, .pol-toc a:focus-visible { color: var(--color-accent); }
.pol-top { margin: 32px 0 0; text-align: center; }
.pol-top a {
display: inline-block;
padding: 12px 20px;
min-height: 44px;
color: var(--color-text-secondary);
font-size: 0.85rem;
text-decoration: none;
}
.pol-top a:hover, .pol-top a:focus-visible { color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) {
.pol-toc > summary::before { transition: none; }
}
/* ----- 404 quick links -----
Four inline recovery links at 0.9rem with no padding, measured 24.5px tall.
They are the page's only navigation aid besides the footer, so on a touch
device they get a real target. The row already wraps, so growing the height
costs nothing. */
@media (hover: none) and (pointer: coarse) {
.nf-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
}
/* ----- Reviews: Load more -----
Paired with the batching in reviews.html. Centred, generous target, and it
sits between the grid and the footer so the footer stays reachable, which is
the reason this is a button rather than infinite scroll. */
.rv-more-wrap { display: flex; justify-content: center; margin: 28px 0 8px; }
.rv-more { min-height: 44px; padding: 12px 28px; }