/* =============================================================================
NOIRIX — Global Design System
Dark · Masculine · Refined · Premium
Usage:
Add before any page-level styles.
Requires Google Fonts (Cormorant Garamond + Inter) linked in .
Sections:
1. Fonts
2. Design Tokens (CSS custom properties)
3. Base Reset
4. Typography Scale
5. Buttons
6. Inputs & Forms
7. Cards
8. Motion Utilities
9. Layout Utilities
10. Scrollbar
11. Reduced-motion overrides
============================================================================= */
/* ─── 1. FONTS ─────────────────────────────────────────────────────────────── */
/* Import via Google Fonts in your :
*/
/* ─── 2. DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root {
/* ── Colors ── */
/* Backgrounds */
--nrx-bg: #050505; /* Page background */
--nrx-surface: #0D0D0D; /* Cards, panels, overlays */
--nrx-surface-2: #111111; /* Elevated surface (modals, drawers) */
/* Text */
--nrx-text: #F4F1EA; /* Primary body copy */
--nrx-text-2: rgba(244, 241, 234, 0.72); /* Secondary / muted text */
--nrx-text-3: rgba(244, 241, 234, 0.38); /* Disabled / placeholder */
/* Accent (warm gold) */
--nrx-accent: #B89B72;
--nrx-accent-dim: rgba(184, 155, 114, 0.16); /* Tinted fills */
--nrx-accent-glow: rgba(184, 155, 114, 0.28); /* Shadows on hover */
/* Borders */
--nrx-border: rgba(255, 255, 255, 0.08); /* Default hairline */
--nrx-border-2: rgba(255, 255, 255, 0.16); /* Emphasis border */
--nrx-border-accent: rgba(184, 155, 114, 0.40); /* Accent/focused border */
/* Shadows */
--nrx-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.30);
--nrx-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.40);
--nrx-shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.55);
/* State overlays */
--nrx-hover-fill: rgba(255, 255, 255, 0.04);
--nrx-active-fill: rgba(255, 255, 255, 0.08);
/* ── Typography ── */
--nrx-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--nrx-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
/* Type scale */
--nrx-text-xs: 11px;
--nrx-text-sm: 13px;
--nrx-text-base: 15px;
--nrx-text-md: 17px;
--nrx-text-lg: clamp(20px, 2.2vw, 26px);
--nrx-text-xl: clamp(28px, 3.8vw, 40px);
--nrx-text-2xl: clamp(36px, 5.2vw, 58px);
--nrx-text-3xl: clamp(48px, 7vw, 80px);
/* Line heights */
--nrx-lh-tight: 1.08;
--nrx-lh-heading: 1.18;
--nrx-lh-body: 1.65;
/* ── Spacing (8px base scale) ── */
--nrx-sp-1: 8px;
--nrx-sp-2: 16px;
--nrx-sp-3: 24px;
--nrx-sp-4: 32px;
--nrx-sp-5: 48px;
--nrx-sp-6: 72px;
--nrx-sp-7: 96px;
/* ── Border radii ── */
--nrx-radius-xs: 4px;
--nrx-radius-sm: 6px;
--nrx-radius-md: 10px;
--nrx-radius-lg: 16px;
--nrx-radius-xl: 24px;
--nrx-radius-pill: 9999px;
/* ── Layout ── */
--nrx-max-w: 1240px;
--nrx-nav-h: 72px;
/* ── Motion ── */
--nrx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--nrx-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
--nrx-ease-io: cubic-bezier(0.45, 0, 0.55, 1);
--nrx-dur-fast: 180ms;
--nrx-dur-base: 320ms;
--nrx-dur-slow: 560ms;
--nrx-t-fast: 180ms cubic-bezier(0.22, 1, 0.36, 1);
--nrx-t-base: 320ms cubic-bezier(0.22, 1, 0.36, 1);
--nrx-t-slow: 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Legacy alias bridge — keeps existing pages working while they migrate */
:root {
/* Map old --noir-* tokens to new system */
--noir-bg: var(--nrx-bg);
--noir-bg-soft: var(--nrx-surface);
--noir-bg-card: var(--nrx-surface);
--noir-text: var(--nrx-text);
--noir-text-muted: var(--nrx-text-3);
--noir-text-soft: var(--nrx-text-2);
--noir-accent: var(--nrx-accent);
--noir-accent-soft: var(--nrx-accent-dim);
--noir-border: var(--nrx-border);
--noir-border-strong: var(--nrx-border-2);
--noir-shadow: var(--nrx-shadow-lg);
--noir-shadow-soft: var(--nrx-shadow-md);
/* Map old inline-page tokens (index.html / home.html) */
--bg: var(--nrx-bg);
--bg-soft: var(--nrx-surface);
--bg-card: var(--nrx-surface);
--border: var(--nrx-border);
--border-md: var(--nrx-border-2);
--gold: var(--nrx-accent);
--gold-dim: var(--nrx-accent-dim);
--text: var(--nrx-text);
--muted: var(--nrx-text-3);
--muted-lt: var(--nrx-text-2);
--white: #ffffff;
--ff-display: var(--nrx-font-display);
--ff-body: var(--nrx-font-body);
/* Old spacing aliases */
--s1: var(--nrx-sp-1);
--s2: var(--nrx-sp-2);
--s3: var(--nrx-sp-3);
--s4: var(--nrx-sp-4);
--s5: var(--nrx-sp-5);
--s6: var(--nrx-sp-5); /* was 48px — now points to sp-5 */
--s7: 64px; /* kept as literal; not in new scale */
--s8: 80px; /* kept as literal; not in new scale */
--s9: var(--nrx-sp-7); /* was 96px */
--space-1: var(--nrx-sp-1);
--space-2: var(--nrx-sp-2);
--space-3: var(--nrx-sp-3);
--space-4: var(--nrx-sp-4);
--space-5: var(--nrx-sp-5);
--space-6: var(--nrx-sp-5);
--space-7: 64px;
--space-8: 80px;
--radius-sm: var(--nrx-radius-sm);
--radius-md: var(--nrx-radius-md);
--radius-lg: var(--nrx-radius-lg);
--radius-xl: var(--nrx-radius-xl);
--anim-fast: var(--nrx-t-fast);
--anim-base: var(--nrx-t-base);
--anim-slow: var(--nrx-t-slow);
--content-max: var(--nrx-max-w);
}
/* ─── 3. BASE RESET ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
background: var(--nrx-bg);
font-size: 15px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
background: var(--nrx-bg);
color: var(--nrx-text);
font-family: var(--nrx-font-body);
line-height: var(--nrx-lh-body);
overflow-x: hidden;
}
/* Film grain overlay — luxury tactile texture */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9990;
opacity: 0.024;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
/* ─── 4. TYPOGRAPHY SCALE ───────────────────────────────────────────────────── */
/* Display headings — Cormorant Garamond */
.nrx-display,
.nrx-h1,
h1.nrx,
.nrx-wordmark {
font-family: var(--nrx-font-display);
font-size: var(--nrx-text-3xl);
font-weight: 400;
line-height: var(--nrx-lh-tight);
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--nrx-text);
}
.nrx-h2,
h2.nrx {
font-family: var(--nrx-font-display);
font-size: var(--nrx-text-2xl);
font-weight: 400;
line-height: var(--nrx-lh-heading);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--nrx-text);
}
.nrx-h3,
h3.nrx {
font-family: var(--nrx-font-display);
font-size: var(--nrx-text-xl);
font-weight: 400;
line-height: var(--nrx-lh-heading);
letter-spacing: 0.06em;
color: var(--nrx-text);
}
.nrx-h4,
h4.nrx {
font-family: var(--nrx-font-display);
font-size: var(--nrx-text-lg);
font-weight: 500;
line-height: var(--nrx-lh-heading);
letter-spacing: 0.04em;
color: var(--nrx-text);
}
/* UI / body copy — Inter */
.nrx-body {
font-family: var(--nrx-font-body);
font-size: var(--nrx-text-base);
font-weight: 400;
line-height: var(--nrx-lh-body);
color: var(--nrx-text);
}
.nrx-body-sm {
font-family: var(--nrx-font-body);
font-size: var(--nrx-text-sm);
line-height: var(--nrx-lh-body);
color: var(--nrx-text-2);
}
.nrx-eyebrow {
font-family: var(--nrx-font-body);
font-size: var(--nrx-text-xs);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--nrx-accent);
}
.nrx-label {
font-family: var(--nrx-font-body);
font-size: var(--nrx-text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--nrx-text-2);
}
.nrx-price {
font-family: var(--nrx-font-body);
font-size: var(--nrx-text-md);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--nrx-text);
}
.nrx-price-accent {
color: var(--nrx-accent);
}
.nrx-muted {
color: var(--nrx-text-2);
}
/* ─── 5. BUTTONS ────────────────────────────────────────────────────────────── */
/* Shared button base */
.nrx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--nrx-font-body);
font-size: var(--nrx-text-sm);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
border: 1.5px solid transparent;
border-radius: var(--nrx-radius-sm);
padding: 14px 28px;
position: relative;
overflow: hidden;
cursor: pointer;
transition:
background var(--nrx-t-fast),
color var(--nrx-t-fast),
border-color var(--nrx-t-fast),
box-shadow var(--nrx-t-fast),
transform var(--nrx-t-fast);
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.nrx-btn:active {
transform: scale(0.97);
}
/* Shimmer sweep pseudo-element (activated on .nrx-btn-primary and .nrx-btn-accent) */
.nrx-btn::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: -70%;
width: 50%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 50%,
transparent 100%
);
transform: skewX(-15deg);
transition: left 0.65s var(--nrx-ease-out);
pointer-events: none;
opacity: 0;
}
.nrx-btn:hover::before {
left: 120%;
opacity: 1;
}
/* Primary CTA — warm gold fill */
.nrx-btn-primary {
background: var(--nrx-accent);
color: #0A0A0A;
border-color: var(--nrx-accent);
}
.nrx-btn-primary:hover {
background: #C9AB82;
border-color: #C9AB82;
box-shadow: 0 6px 22px var(--nrx-accent-glow);
}
.nrx-btn-primary:focus-visible {
outline: 2px solid var(--nrx-accent);
outline-offset: 3px;
}
.nrx-btn-primary:disabled {
opacity: 0.38;
cursor: not-allowed;
pointer-events: none;
}
/* Secondary ghost — outline only */
.nrx-btn-ghost {
background: transparent;
color: var(--nrx-text);
border-color: var(--nrx-border-2);
}
.nrx-btn-ghost:hover {
background: var(--nrx-hover-fill);
border-color: var(--nrx-accent);
color: var(--nrx-accent);
}
.nrx-btn-ghost:focus-visible {
outline: 2px solid var(--nrx-border-2);
outline-offset: 3px;
}
.nrx-btn-ghost:disabled {
opacity: 0.38;
cursor: not-allowed;
pointer-events: none;
}
/* Accent ghost — gold outline */
.nrx-btn-accent-ghost {
background: transparent;
color: var(--nrx-accent);
border-color: var(--nrx-accent);
}
.nrx-btn-accent-ghost:hover {
background: var(--nrx-accent-dim);
box-shadow: 0 4px 16px var(--nrx-accent-glow);
}
.nrx-btn-accent-ghost:focus-visible {
outline: 2px solid var(--nrx-accent);
outline-offset: 3px;
}
/* Icon button */
.nrx-btn-icon {
width: 40px;
height: 40px;
padding: 0;
border-radius: var(--nrx-radius-sm);
border-color: var(--nrx-border);
color: var(--nrx-text-2);
background: transparent;
}
.nrx-btn-icon:hover {
background: var(--nrx-hover-fill);
border-color: var(--nrx-border-2);
color: var(--nrx-text);
}
/* Size modifiers */
.nrx-btn-sm {
font-size: var(--nrx-text-xs);
padding: 10px 20px;
letter-spacing: 0.12em;
}
.nrx-btn-lg {
font-size: var(--nrx-text-base);
padding: 17px 36px;
letter-spacing: 0.16em;
}
.nrx-btn-full {
width: 100%;
}
/* ─── 6. INPUTS & FORMS ─────────────────────────────────────────────────────── */
.nrx-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.nrx-label-text {
font-family: var(--nrx-font-body);
font-size: var(--nrx-text-xs);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--nrx-text-2);
}
.nrx-input,
.nrx-textarea,
.nrx-select {
width: 100%;
background: var(--nrx-surface);
color: var(--nrx-text);
border: 1px solid var(--nrx-border-2);
border-radius: var(--nrx-radius-sm);
padding: 14px 16px;
font-family: var(--nrx-font-body);
font-size: var(--nrx-text-base);
line-height: 1.4;
outline: none;
transition:
border-color var(--nrx-t-fast),
box-shadow var(--nrx-t-fast),
background var(--nrx-t-fast);
-webkit-appearance: none;
appearance: none;
}
.nrx-input::placeholder,
.nrx-textarea::placeholder {
color: var(--nrx-text-3);
}
.nrx-input:focus,
.nrx-textarea:focus,
.nrx-select:focus {
border-color: var(--nrx-accent);
box-shadow: 0 0 0 3px var(--nrx-accent-dim);
}
.nrx-input:disabled,
.nrx-textarea:disabled,
.nrx-select:disabled {
opacity: 0.40;
cursor: not-allowed;
}
.nrx-textarea {
resize: vertical;
min-height: 120px;
}
/* Select chevron */
.nrx-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B89B72' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 42px;
cursor: pointer;
}
.nrx-select option {
background: var(--nrx-surface-2);
color: var(--nrx-text);
}
/* Form error state */
.nrx-input.is-error,
.nrx-textarea.is-error,
.nrx-select.is-error {
border-color: rgba(220, 80, 80, 0.70);
box-shadow: 0 0 0 3px rgba(220, 80, 80, 0.12);
}
.nrx-field-error {
font-size: var(--nrx-text-xs);
color: rgba(220, 80, 80, 0.90);
letter-spacing: 0.02em;
margin-top: 2px;
}
/* Checkbox / radio luxury style */
.nrx-checkbox-wrap {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
.nrx-checkbox-wrap input[type="checkbox"],
.nrx-checkbox-wrap input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1px solid var(--nrx-border-2);
border-radius: var(--nrx-radius-xs);
background: var(--nrx-surface);
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: border-color var(--nrx-t-fast), background var(--nrx-t-fast);
}
.nrx-checkbox-wrap input[type="radio"] {
border-radius: 50%;
}
.nrx-checkbox-wrap input[type="checkbox"]:checked,
.nrx-checkbox-wrap input[type="radio"]:checked {
background: var(--nrx-accent);
border-color: var(--nrx-accent);
}
.nrx-checkbox-wrap input[type="checkbox"]:checked::after {
content: "";
position: absolute;
inset: 3px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%230A0A0A' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.nrx-checkbox-wrap input[type="radio"]:checked::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
background: #0A0A0A;
}
/* ─── 7. CARDS ──────────────────────────────────────────────────────────────── */
/* Product card */
.nrx-product-card {
display: flex;
flex-direction: column;
background: var(--nrx-surface);
border: 1px solid var(--nrx-border);
border-radius: var(--nrx-radius-md);
overflow: hidden;
position: relative;
transition:
transform var(--nrx-t-base),
border-color var(--nrx-t-base),
box-shadow var(--nrx-t-base);
cursor: pointer;
text-decoration: none;
color: inherit;
}
.nrx-product-card:hover {
transform: translateY(-5px);
border-color: var(--nrx-border-accent);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--nrx-border-accent);
}
/* Card media — maintains 4:5 portrait ratio */
.nrx-card-media {
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--nrx-surface-2);
position: relative;
}
.nrx-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(6%) brightness(0.88);
transition:
transform var(--nrx-t-slow),
filter var(--nrx-t-base);
}
.nrx-product-card:hover .nrx-card-media img {
transform: scale(1.04);
filter: grayscale(0%) brightness(0.94);
}
/* Card badge */
.nrx-card-badge {
position: absolute;
top: var(--nrx-sp-2);
left: var(--nrx-sp-2);
font-family: var(--nrx-font-body);
font-size: var(--nrx-text-xs);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #0A0A0A;
background: var(--nrx-accent);
padding: 4px 10px;
border-radius: var(--nrx-radius-xs);
pointer-events: none;
z-index: 2;
}
/* Card quick-action overlay */
.nrx-card-overlay {
position: absolute;
inset: 0;
background: rgba(5, 5, 5, 0.48);
display: flex;
align-items: center;
justify-content: center;
gap: var(--nrx-sp-2);
opacity: 0;
transition: opacity var(--nrx-t-base);
pointer-events: none;
z-index: 3;
}
.nrx-product-card:hover .nrx-card-overlay {
opacity: 1;
pointer-events: auto;
}
/* Card body */
.nrx-card-body {
padding: var(--nrx-sp-2) var(--nrx-sp-2) var(--nrx-sp-3);
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.nrx-card-name {
font-family: var(--nrx-font-display);
font-size: 15px;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--nrx-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nrx-card-sub {
font-size: var(--nrx-text-xs);
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--nrx-text-2);
}
.nrx-card-price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: var(--nrx-sp-1);
border-top: 1px solid var(--nrx-border);
}
.nrx-card-price {
font-family: var(--nrx-font-body);
font-size: var(--nrx-text-sm);
font-weight: 500;
color: var(--nrx-text);
letter-spacing: 0.02em;
}
.nrx-card-price-was {
font-size: var(--nrx-text-xs);
color: var(--nrx-text-3);
text-decoration: line-through;
margin-left: 6px;
}
/* Content card (editorial / info) */
.nrx-content-card {
background: var(--nrx-surface);
border: 1px solid var(--nrx-border);
border-radius: var(--nrx-radius-md);
padding: var(--nrx-sp-4);
transition: border-color var(--nrx-t-base);
}
.nrx-content-card:hover {
border-color: var(--nrx-border-2);
}
/* Divider */
.nrx-divider {
width: 100%;
height: 1px;
background: var(--nrx-border);
border: none;
margin: 0;
}
.nrx-divider-accent {
height: 1px;
width: 48px;
background: linear-gradient(90deg, var(--nrx-accent), transparent);
border: none;
margin: 0;
}
/* ─── 8. MOTION UTILITIES ───────────────────────────────────────────────────── */
/* Fade + rise entrance — add .nrx-animate to trigger with JS
or use animation-delay for staggered sequences */
@keyframes nrxFadeRise {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes nrxFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes nrxSlideRight {
from { opacity: 0; transform: translateX(-14px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes nrxScaleIn {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
@keyframes nrxGoldSweep {
0% { transform: translateX(-100%); }
55% { transform: translateX(0); }
100% { transform: translateX(100%); }
}
/* Utility classes */
.nrx-fade-rise {
animation: nrxFadeRise var(--nrx-dur-base) var(--nrx-ease-out) both;
}
.nrx-fade-in {
animation: nrxFadeIn var(--nrx-dur-base) var(--nrx-ease-out) both;
}
.nrx-scale-in {
animation: nrxScaleIn var(--nrx-dur-base) var(--nrx-ease-out) both;
}
/* Stagger delay helpers */
.nrx-delay-1 { animation-delay: 80ms; }
.nrx-delay-2 { animation-delay: 160ms; }
.nrx-delay-3 { animation-delay: 240ms; }
.nrx-delay-4 { animation-delay: 320ms; }
.nrx-delay-5 { animation-delay: 400ms; }
/* Loading spinner */
@keyframes nrxSpin {
to { transform: rotate(360deg); }
}
.nrx-spinner {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--nrx-border);
border-top-color: var(--nrx-accent);
animation: nrxSpin 1.1s linear infinite;
}
.nrx-spinner-sm {
width: 20px;
height: 20px;
}
/* Progress bar sweep (for loaders) */
.nrx-progress-bar {
height: 1px;
overflow: hidden;
background: var(--nrx-border);
}
.nrx-progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, transparent, var(--nrx-accent), transparent);
animation: nrxGoldSweep 1.1s var(--nrx-ease-out) forwards;
transform: translateX(-100%);
}
/* ─── 9. LAYOUT UTILITIES ───────────────────────────────────────────────────── */
.nrx-container {
width: min(100%, var(--nrx-max-w));
margin-inline: auto;
padding-inline: var(--nrx-sp-4);
}
.nrx-container-sm {
width: min(100%, 760px);
margin-inline: auto;
padding-inline: var(--nrx-sp-3);
}
.nrx-section {
padding-top: var(--nrx-sp-6);
padding-bottom: var(--nrx-sp-6);
}
.nrx-section-sm {
padding-top: var(--nrx-sp-5);
padding-bottom: var(--nrx-sp-5);
}
/* Responsive product grid */
.nrx-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--nrx-sp-3);
}
@media (min-width: 640px) {
.nrx-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.nrx-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
.nrx-grid { grid-template-columns: repeat(4, 1fr); }
}
.nrx-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--nrx-sp-3);
}
.nrx-flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.nrx-flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Accent rule (decorative line before section eyebrows) */
.nrx-accent-rule {
display: flex;
align-items: center;
gap: var(--nrx-sp-2);
margin-bottom: var(--nrx-sp-2);
}
.nrx-accent-rule::before {
content: "";
display: block;
width: 28px;
height: 1px;
background: var(--nrx-accent);
flex-shrink: 0;
}
/* ─── 10. SCROLLBAR ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.10);
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(184, 155, 114, 0.30);
}
/* ─── 11. REDUCED-MOTION OVERRIDES ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.nrx-product-card:hover .nrx-card-media img {
transform: none;
}
.nrx-product-card:hover {
transform: none;
}
}
/* ─── RESPONSIVE BASE ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
:root {
--nrx-sp-5: 40px;
--nrx-sp-6: 56px;
--nrx-sp-7: 72px;
}
.nrx-container {
padding-inline: var(--nrx-sp-2);
}
.nrx-section {
padding-top: var(--nrx-sp-5);
padding-bottom: var(--nrx-sp-5);
}
}
@media (max-width: 480px) {
.nrx-btn {
padding: 13px 22px;
}
.nrx-btn-lg {
padding: 15px 28px;
font-size: var(--nrx-text-sm);
}
}