/* ===========================================================================
LANDING COMPANY · DISCOVER MEN'S JEWELRY (mens.css · v7.3.0 · CORE · FAQ accordion + journey cross-links)
---------------------------------------------------------------------------
All styles for the /discover-mens-jewelry/ page, "Iconic / In Motion".
Loaded ONLY on that page by lc-mens.php (filemtime-versioned — saving
this file busts WP Engine + Autoptimize caches automatically).
Scoped to .lc-mens-page. Nothing leaks.
=========================================================================== */
/* ================================================================
DISCOVER MEN'S JEWELRY — v4 "ICONIC / IN MOTION" (FINAL ASSEMBLY)
v4: + Scrub Manifesto (G) + Sidelong (I) + Gram Index (J)
+ Deck (H) + Gifting Price Index (A); overflow clip fix.
Oswald 400 / -1px tracking. Sun-bleached shell, warm sand,
deep palm, gold. Signature: monumental type overlapping
photography + a choreographed, weightless motion system.
================================================================ */
.lc-mens-page {
--mj-shell: #FBF8F2;
--mj-sand: #F1EBDF;
--mj-palm: #4a4541;
--mj-palm-soft: #5a544f;
--mj-ink: #23282D;
--mj-ink-soft: #6d7275;
--mj-gold: #79716B;
--mj-stone: #79716B;
--mj-line: rgba(35, 40, 45, 0.14);
--mj-aqua: #12CFCA;
--mj-head: 'Oswald', 'Helvetica Neue', sans-serif;
--mj-body: 'Lora', Georgia, serif;
--mj-accent: 'Unna', Georgia, serif;
--mj-ease: cubic-bezier(0.22, 1, 0.36, 1); /* fast out, silk landing */
font-family: var(--mj-body);
color: var(--mj-ink);
background: var(--mj-shell);
font-size: 16px;
line-height: 1.8;
margin: 0 -15px;
overflow: clip;
-webkit-font-smoothing: antialiased;
}
.lc-mens-page *, .lc-mens-page *::before, .lc-mens-page *::after { box-sizing: border-box; }
.lc-mens-page img { max-width: 100%; display: block; }
.lc-mens-page a,
.lc-mens-page a:visited,
.lc-mens-page a:hover,
.lc-mens-page a:focus {
text-decoration: none !important; /* beats theme/style.css link underlines */
box-shadow: none !important; /* and box-shadow "underline" tricks */
color: inherit;
}
/* ---- shared ---- */
.lc-mens-page .mj-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.lc-mens-page .mj-bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
position: relative;
}
.lc-mens-page .mj-display {
font-family: var(--mj-head);
font-weight: 445;
letter-spacing: -1px;
text-transform: uppercase;
line-height: 0.96;
margin: 0;
color: var(--mj-ink);
}
.lc-mens-page .mj-eyebrow {
font-family: var(--mj-head);
font-weight: 400;
font-size: 12px;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--mj-gold);
display: block;
margin: 0 0 22px;
}
.lc-mens-page .mj-accent {
font-family: var(--mj-accent);
font-style: italic;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
/* Unna inside headlines sits at 445 — matches the homepage headline weight */
.lc-mens-page .mj-display .mj-accent,
.lc-mens-page h1 .mj-accent,
.lc-mens-page h2 .mj-accent,
.lc-mens-page h3 .mj-accent { font-weight: 445; }
.lc-mens-page .mj-copy {
font-size: 16.5px;
line-height: 1.9;
color: var(--mj-ink-soft);
margin: 26px 0 0;
}
/* Buttons — sweep fill, GPU only. Lora, consistent with the homepage. */
.lc-mens-page .mj-btn {
font-family: var(--mj-body);
font-weight: 400;
font-size: 12.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
display: inline-block;
position: relative;
overflow: hidden;
padding: 12px 28px;
border: 1px solid var(--mj-ink);
color: var(--mj-ink);
transition: color .4s var(--mj-ease), border-color .4s var(--mj-ease);
z-index: 1;
}
.lc-mens-page .mj-btn::before {
content: '';
position: absolute; inset: 0; z-index: -1;
background: var(--mj-ink);
transform: scaleX(0);
transform-origin: left center;
transition: transform .5s var(--mj-ease);
}
.lc-mens-page .mj-btn:hover { color: var(--mj-shell); }
.lc-mens-page .mj-btn:hover::before { transform: scaleX(1); }
.lc-mens-page .mj-btn-solid { background: var(--mj-palm); border-color: var(--mj-palm); color: var(--mj-shell) }
.lc-mens-page .mj-btn-solid::before { background: #CBC4BC; }
.lc-mens-page .mj-btn-solid:hover { color: var(--mj-shell); border-color: var(--mj-palm); }
/* Links — underline draws left→right, exits right→left */
.lc-mens-page .mj-link {
font-family: var(--mj-head);
font-weight: 400;
font-size: 12px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--mj-ink);
display: inline-block;
position: relative;
padding-bottom: 9px;
}
.lc-mens-page .mj-link::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: var(--mj-gold);
transform: scaleX(1);
transform-origin: left center;
transition: transform .45s var(--mj-ease);
}
.lc-mens-page .mj-link:hover::after {
transform: scaleX(0);
transform-origin: right center;
/* single wipe — the redraw pass is retired (v5.2.1) */
}
@keyframes mj-underline-redraw {
from { transform: scaleX(0); transform-origin: left center; }
to { transform: scaleX(1); transform-origin: left center; }
}
/* Placeholder figures — discover.css convention */
.lc-mens-page figure { margin: 0; position: relative; overflow: hidden; }
.lc-mens-page figure[data-placeholder="true"] {
background:
radial-gradient(ellipse at 25% 30%, rgba(241, 235, 223, 0.85) 0%, transparent 55%),
radial-gradient(ellipse at 80% 75%, rgba(74, 69, 65, 0.35) 0%, transparent 60%),
linear-gradient(155deg, #d9d0c0 0%, #9a9186 48%, #5f5953 100%);
}
.lc-mens-page figure[data-placeholder="true"] img { opacity: 0; visibility: hidden; }
.lc-mens-page figure[data-placeholder="true"]::after {
content: 'Image';
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-family: var(--mj-head); font-size: 10px; letter-spacing: 0.3em;
text-transform: uppercase; color: #fff; opacity: 0.7;
}
.lc-mens-page figure[data-placeholder="true"] figcaption {
position: absolute; bottom: 14px; left: 14px;
font-family: var(--mj-head); font-size: 9px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--mj-ink-soft);
background: rgba(255,255,255,0.92); padding: 5px 9px; z-index: 3;
}
.lc-mens-page figure:not([data-placeholder="true"]) figcaption { display: none; }
/* ================================================================
MOTION SYSTEM
================================================================ */
/* 1 — Entrance choreography (page load, hero only) */
@keyframes mj-hero-media-in {
from { opacity: 0; transform: scale(1.02); }
to { opacity: 1; transform: scale(1); }
}
@keyframes mj-rise {
from { transform: translateY(110%); }
to { transform: translateY(0); }
}
@keyframes mj-fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.lc-mens-page .mj-hero-media figure {
animation:
mj-hero-media-in 1.8s var(--mj-ease) both,
mj-ambient 30s ease-in-out 1.8s infinite alternate;
}
@keyframes mj-ambient {
from { transform: scale(1) translateY(0); }
to { transform: scale(1.02) translateY(-0.5%); }
}
/* masked line rise — type lifts out of an invisible slot */
.lc-mens-page .mj-mask { display: block; overflow: hidden; }
.lc-mens-page .mj-mask-inline { display: inline-block; overflow: hidden; vertical-align: bottom; }
.lc-mens-page .mj-mask-inline > span {
display: inline-block;
transform: translateY(112%);
animation: mj-rise 1.15s var(--mj-ease) both;
}
.lc-mens-page .mj-hero-type .mj-mask-inline:nth-of-type(1) > span { animation-delay: .45s; }
.lc-mens-page .mj-hero-type .mj-mask-inline:nth-of-type(2) > span { animation-delay: .62s; }
.lc-mens-page .mj-mask > span {
display: block;
transform: translateY(110%);
animation: mj-rise 1s var(--mj-ease) both;
}
.lc-mens-page .mj-hero-type .mj-mask > span { animation-delay: .45s; }
.lc-mens-page .mj-hero-sub { opacity: 0; animation: mj-fade-up .9s var(--mj-ease) 1s both; }
/* 2 — Scroll reveals (IntersectionObserver toggles .mj-in) */
.lc-mens-page .mj-reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 1s var(--mj-ease), transform 1s var(--mj-ease);
}
.lc-mens-page .mj-reveal.mj-in { opacity: 1; transform: translateY(0); }
/* stagger children when a group reveals */
.lc-mens-page .mj-stagger > * {
opacity: 0;
transform: translateY(10px);
transition: opacity .8s var(--mj-ease), transform .8s var(--mj-ease);
}
.lc-mens-page .mj-stagger.mj-in > * { opacity: 1; transform: translateY(0); }
.lc-mens-page .mj-stagger.mj-in > *:nth-child(1) { transition-delay: 0s; }
.lc-mens-page .mj-stagger.mj-in > *:nth-child(2) { transition-delay: .09s; }
.lc-mens-page .mj-stagger.mj-in > *:nth-child(3) { transition-delay: .18s; }
.lc-mens-page .mj-stagger.mj-in > *:nth-child(4) { transition-delay: .27s; }
/* 3 — Image reveals: a quiet fade-and-settle (the old bottom-to-top
curtain wipe read as theatrical at scale — retired) */
.lc-mens-page .mj-curtain {
opacity: 0;
transition: opacity 1.2s var(--mj-ease);
}
.lc-mens-page .mj-curtain img { transform: scale(1.04); transition: transform 1.8s var(--mj-ease); }
.lc-mens-page .mj-in .mj-curtain,
.lc-mens-page .mj-curtain.mj-in { opacity: 1; }
.lc-mens-page .mj-in .mj-curtain img,
.lc-mens-page .mj-curtain.mj-in img { transform: scale(1); }
/* 4 — Scroll-driven parallax (native, zero JS, Chrome/Edge/Safari 26+)
Where unsupported, nothing runs — page is simply calm. */
@supports (animation-timeline: view()) {
@keyframes mj-parallax-drift { from { transform: translateY(1.5vh); } to { transform: translateY(-1.5vh); } }
@keyframes mj-parallax-media { from { transform: translateY(-2.5%) scale(1.06); } to { transform: translateY(2.5%) scale(1.06); } }
.lc-mens-page .mj-hero-type h1 {
animation: mj-parallax-drift linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
.lc-mens-page .mj-visit figure img,
.lc-mens-page .mj-hero-media figure img {
animation: mj-parallax-media linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
/* editorial images breathe: 1.06 → 1.0 as they travel the viewport */
@keyframes mj-scale-settle { from { transform: scale(1.025); } to { transform: scale(1); } }
.lc-mens-page .mj-cat figure.mj-in img,
.lc-mens-page .mj-weave figure.mj-in img {
animation: mj-scale-settle linear both;
animation-timeline: view();
animation-range: entry 0% cover 60%;
}
}
/* 5 — Marquee: infinite category ticker, pure transform */
.lc-mens-page .mj-marquee {
border-top: 1px solid var(--mj-line);
border-bottom: 1px solid var(--mj-line);
padding: 26px 0;
overflow: hidden;
white-space: nowrap;
}
.lc-mens-page .mj-marquee-track {
display: inline-block;
animation: mj-marquee 38s linear infinite;
will-change: transform;
}
.lc-mens-page .mj-marquee span {
font-family: var(--mj-head);
font-weight: 400;
letter-spacing: -1px;
text-transform: uppercase;
font-size: clamp(22px, 2.6vw, 34px);
color: var(--mj-ink);
padding: 0 28px;
display: inline-block;
}
.lc-mens-page .mj-marquee .mj-dot { color: var(--mj-gold); padding: 0; }
@keyframes mj-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.lc-mens-page .mj-marquee:hover .mj-marquee-track { animation-play-state: paused; }
/* Reduced motion: everything settles instantly */
@media (prefers-reduced-motion: reduce) {
.lc-mens-page .mj-hero-media figure,
.lc-mens-page .mj-mask > span,
.lc-mens-page .mj-hero-sub,
.lc-mens-page .mj-marquee-track,
.lc-mens-page .mj-mask-inline > span,
.lc-mens-page .mj-visit .mj-xfade-b { animation: none !important; transform: none; opacity: 1; }
.lc-mens-page .mj-visit .mj-xfade-b { opacity: 0; }
.lc-mens-page .mj-reveal,
.lc-mens-page .mj-stagger > * { opacity: 1; transform: none; transition: none; }
.lc-mens-page .mj-curtain { opacity: 1; transition: none; }
.lc-mens-page .mj-curtain img { transform: none; transition: none; }
.lc-mens-page .mj-cat img { transition: none; }
@supports (animation-timeline: view()) {
.lc-mens-page .mj-hero-type h1,
.lc-mens-page .mj-visit figure img,
.lc-mens-page .mj-hero-media figure img { animation: none !important; }
}
}
/* ================================================================
SECTIONS
================================================================ */
/* ---- 1. HERO ---- */
.lc-mens-page .mj-hero { padding-top: 0; }
.lc-mens-page .mj-hero-media { height: 78vh; min-height: 520px; position: relative; overflow: hidden; }
.lc-mens-page .mj-hero-media figure { position: absolute; inset: 0; }
.lc-mens-page .mj-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.lc-mens-page .mj-hero-media::after {
content: '';
position: absolute; inset: 0; z-index: 2;
background: linear-gradient(180deg, rgba(74,69,65,0.08) 0%, rgba(74,69,65,0) 40%, rgba(251,248,242,0) 78%, rgba(251,248,242,0.55) 100%);
}
.lc-mens-page .mj-hero-type {
position: relative; z-index: 3;
margin-top: -0.62em;
padding: 0 24px;
text-align: center;
}
.lc-mens-page .mj-hero-type h1 { font-size: clamp(64px, 11.5vw, 168px); }
.lc-mens-page .mj-hero-sub { text-align: center; max-width: 560px; margin: 0 auto; padding: 34px 24px 0; }
.lc-mens-page .mj-hero-sub .mj-accent { font-size: clamp(19px, 2vw, 23px); color: var(--mj-ink-soft); display: block; line-height: 1.6; }
.lc-mens-page .mj-hero-sub .mj-btn { margin-top: 40px; }
/* ---- 2. MANIFESTO ---- */
.lc-mens-page .mj-manifesto { background: var(--mj-sand); padding: 148px 24px; }
.lc-mens-page .mj-manifesto-inner { max-width: 980px; margin: 0 auto; text-align: center; }
.lc-mens-page .mj-manifesto .mj-display { font-size: clamp(34px, 5vw, 64px); line-height: 1.08; }
.lc-mens-page .mj-manifesto .mj-display .mj-accent { color: var(--mj-gold); font-size: 0.94em; }
/* ---- 3. CATEGORY EDITORIALS ---- */
.lc-mens-page .mj-cats { padding: 128px 0 60px; }
.lc-mens-page .mj-cats-head { text-align: center; margin-bottom: 96px; padding: 0 24px; }
.lc-mens-page .mj-cats-head .mj-display { font-size: clamp(38px, 5.4vw, 60px); }
.lc-mens-page .mj-cat {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
margin-bottom: 120px;
}
.lc-mens-page .mj-cat figure { aspect-ratio: 4 / 5; }
.lc-mens-page .mj-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--mj-ease); }
.lc-mens-page .mj-cat:hover img { transform: scale(1.04); }
.lc-mens-page .mj-cat-text { padding: 0 8vw; position: relative; }
.lc-mens-page .mj-cat-text .mj-index {
font-family: var(--mj-head); font-weight: 300; font-size: 13px;
letter-spacing: 0.4em; color: var(--mj-stone); display: block; margin-bottom: 18px;
}
.lc-mens-page .mj-cat-text h3 {
font-family: var(--mj-head); font-weight: 400; letter-spacing: -1px;
text-transform: uppercase; font-size: clamp(40px, 5vw, 68px);
line-height: 0.98; margin: 0; color: var(--mj-ink);
}
.lc-mens-page .mj-cat-text.mj-pull-left h3 { margin-left: -18vw; position: relative; z-index: 2; }
.lc-mens-page .mj-cat-text.mj-pull-right h3 { margin-right: -18vw; position: relative; z-index: 2; }
.lc-mens-page .mj-cat-text .mj-accent { display: block; font-size: 19px; color: var(--mj-ink-soft); margin: 20px 0 0; }
.lc-mens-page .mj-cat-text .mj-link { margin-top: 34px; }
.lc-mens-page .mj-cat.mj-flip figure { order: 2; }
.lc-mens-page .mj-cat.mj-flip .mj-cat-text { order: 1; text-align: right; }
/* ---- 4. MARINER'S WEAVE — sticky luxury feature ---- */
.lc-mens-page .mj-weave { background: var(--mj-palm); padding: 160px 24px; color: #F3EFE6; }
.lc-mens-page .mj-weave-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 5fr 6fr; gap: 88px;
align-items: start;
}
.lc-mens-page .mj-weave-text { position: sticky; top: 120px; }
.lc-mens-page .mj-weave figure { aspect-ratio: 4 / 5; }
.lc-mens-page .mj-weave figure + figure { margin-top: 40px; }
.lc-mens-page .mj-weave .mj-eyebrow { color: #CBC4BC; }
.lc-mens-page .mj-weave .mj-display { color: #F3EFE6; font-size: clamp(40px, 5.4vw, 76px); }
.lc-mens-page .mj-weave .mj-copy { color: rgba(243, 239, 230, 0.72); }
.lc-mens-page .mj-weave .mj-btn { border-color: #CBC4BC; color: #F3EFE6; margin-top: 44px; }
.lc-mens-page .mj-weave .mj-btn::before { background: #CBC4BC; }
.lc-mens-page .mj-weave .mj-btn:hover { color: var(--mj-palm); }
/* ---- 5. MATERIALS ---- */
.lc-mens-page .mj-materials { padding: 148px 24px 132px; }
.lc-mens-page .mj-materials-head { text-align: center; margin-bottom: 88px; }
.lc-mens-page .mj-materials-head .mj-display { font-size: clamp(38px, 5.4vw, 72px); }
.lc-mens-page .mj-mat-row {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr);
}
.lc-mens-page .mj-mat {
padding: 8px 36px 12px;
border-left: 1px solid var(--mj-line);
transition: background .4s var(--mj-ease);
}
.lc-mens-page .mj-mat:last-child { border-right: 1px solid var(--mj-line); }
.lc-mens-page .mj-mat:hover { background: var(--mj-sand); }
.lc-mens-page .mj-mat h3 {
font-family: var(--mj-head); font-weight: 400; letter-spacing: -1px;
text-transform: uppercase; font-size: 27px; margin: 0 0 10px; color: var(--mj-ink);
}
.lc-mens-page .mj-mat .mj-mat-tag {
font-family: var(--mj-head); font-weight: 400; font-size: 10.5px;
letter-spacing: 0.34em; text-transform: uppercase; color: var(--mj-gold);
display: block; margin-bottom: 20px;
}
.lc-mens-page .mj-mat p { font-size: 14.5px; line-height: 1.75; color: var(--mj-ink-soft); margin: 0 0 26px; }
.lc-mens-page .mj-mat .mj-link { font-size: 10.5px; }
/* ---- 6. GALLERY BAND ---- */
.lc-mens-page .mj-visit { min-height: 60vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lc-mens-page .mj-visit figure { position: absolute; inset: -8% 0; }
.lc-mens-page .mj-visit .mj-xfade-b {
z-index: 1;
opacity: 0;
animation: mj-xfade 18s ease-in-out infinite;
}
@keyframes mj-xfade {
0% { opacity: 0; }
42% { opacity: 0; }
52% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
.lc-mens-page .mj-visit img { width: 100%; height: 100%; object-fit: cover; }
.lc-mens-page .mj-visit::after {
content: ''; position: absolute; inset: 0; z-index: 2;
background: rgba(74, 69, 65, 0.44);
}
.lc-mens-page .mj-visit-inner { position: relative; z-index: 3; text-align: center; padding: 120px 24px; max-width: 760px; }
.lc-mens-page .mj-visit .mj-eyebrow { color: #CBC4BC; }
.lc-mens-page .mj-visit .mj-display { color: #FBF8F2; font-size: clamp(44px, 6.4vw, 92px); }
.lc-mens-page .mj-visit .mj-accent { display: block; color: rgba(251,248,242,0.85); font-size: 20px; margin-top: 24px; }
.lc-mens-page .mj-visit .mj-btn { border-color: #FBF8F2; color: #FBF8F2; margin-top: 46px; }
.lc-mens-page .mj-visit .mj-btn::before { background: #FBF8F2; }
.lc-mens-page .mj-visit .mj-btn:hover { color: var(--mj-palm); }
/* ---- 7. CLOSING ---- */
.lc-mens-page .mj-closing { padding: 168px 24px 184px; text-align: center; }
.lc-mens-page .mj-closing .mj-display { font-size: clamp(44px, 6.4vw, 64px); }
.lc-mens-page .mj-closing .mj-accent { color: var(--mj-gold); }
.lc-mens-page .mj-closing .mj-btn { margin-top: 52px; color: var(--mj-shell); }
.lc-mens-page .mj-closing .mj-btn:hover {background: var(--mj-ink); border-color: var(--mj-ink); color: var(--mj-shell);}
/* ---- responsive ---- */
@media (max-width: 1000px) {
.lc-mens-page .mj-cat { grid-template-columns: 1fr; margin-bottom: 88px; }
.lc-mens-page .mj-cat.mj-flip figure { order: 1; }
.lc-mens-page .mj-cat.mj-flip .mj-cat-text { order: 2; text-align: left; }
.lc-mens-page .mj-cat-text { padding: 40px 24px 0; }
.lc-mens-page .mj-cat-text.mj-pull-left h3,
.lc-mens-page .mj-cat-text.mj-pull-right h3 { margin: 0; }
.lc-mens-page .mj-weave-grid { grid-template-columns: 1fr; gap: 56px; }
.lc-mens-page .mj-weave-text { position: static; }
.lc-mens-page .mj-mat-row { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
.lc-mens-page .mj-mat:nth-child(2) { border-right: 1px solid var(--mj-line); }
}
@media (max-width: 560px) {
.lc-mens-page .mj-hero-media { height: 62vh; min-height: 420px; }
.lc-mens-page .mj-mat-row { grid-template-columns: 1fr; }
.lc-mens-page .mj-mat { border-right: 1px solid var(--mj-line); }
.lc-mens-page .mj-manifesto { padding: 96px 24px; }
.lc-mens-page .mj-weave { padding: 104px 24px; }
.lc-mens-page .mj-closing { padding: 112px 24px; }
}
/* ================================================================
HERO OPTIONS (v4.7.0) — three interchangeable openers.
Replace the existing
with ONE of these (markup in hero-options-PASTE.html).
1 · THE PORTRAIT — the David Yurman frame: contained dark
atmospheric portrait, text block left, white button.
2 · THE SLAB — 5/7 split: solid warm-gray type panel beside a
full-height portrait. Type never touches the photo.
3 · THE FULL FRAME — 100vh cinema, type anchored lower-left.
All: near-still (2% ambient breath only), LCP-first image.
================================================================ */
/* ── shared ── */
.lc-mens-page .mj-hero2 { position: relative; }
.lc-mens-page .mj-hero2 figure { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.lc-mens-page .mj-hero2 figure picture { display: block; width: 100%; height: 100%; }
.lc-mens-page .mj-deck-panel figure picture { display: block; width: 100%; height: 100%; } /* art-directed deck crops */
.lc-mens-page .mj-hero2 figure img {
width: 100%; height: 100%; object-fit: cover;
animation: mj-ambient 30s ease-in-out 1.2s infinite alternate;
}
/* art-directed hero: object-position lets each crop sit where it should.
Override per breakpoint if a particular file needs a different anchor. */
.lc-mens-page .mj-hero2--full figure img { object-position: 60% center; }
.lc-mens-page .mj-hero2-eyebrow {
font-family: var(--mj-head); font-weight: 400; font-size: 16px;
letter-spacing: 0.5em; text-transform: uppercase; color: #ffffff;
display: block; margin: 0 2px 8px;
}
.lc-mens-page .mj-hero2 .mj-btn--paper {
background: #FBF8F2; border-color: #FBF8F2; color: var(--mj-ink);
}
.lc-mens-page .mj-hero2 .mj-btn--paper::before { background: var(--mj-ink); }
.lc-mens-page .mj-hero2 .mj-btn--paper:hover { color: #FBF8F2; }
/* ── 1 · THE PORTRAIT (the Yurman frame) ── */
.lc-mens-page .mj-hero2--portrait {
max-width: 1720px;
margin: 0 auto;
padding: clamp(16px, 2vw, 32px) 24px 0;
}
.lc-mens-page .mj-hero2--portrait .mj-hero2-stage {
position: relative;
height: min(92vh, 980px);
min-height: 560px;
overflow: hidden;
background: radial-gradient(ellipse at 62% 30%, #8a8178 0%, #57514C 48%, #3a3532 100%);
}
.lc-mens-page .mj-hero2--portrait .mj-hero2-stage::after {
/* legibility veil, left side only — the type's atmosphere */
content: '';
position: absolute; inset: 0; z-index: 2;
background: linear-gradient(90deg, rgba(35, 40, 45, 0.5) 0%, rgba(35, 40, 45, 0.18) 34%, transparent 55%);
}
.lc-mens-page .mj-hero2--portrait .mj-hero2-panel {
position: absolute; z-index: 3;
left: clamp(28px, 5vw, 88px);
top: 50%; transform: translateY(-50%);
max-width: 400px;
}
.lc-mens-page .mj-hero2--portrait h1 {
font-family: var(--mj-head); font-weight: 400;
letter-spacing: 0.02em; text-transform: uppercase;
font-size: clamp(26px, 2.6vw, 42px); /* the DY restraint: modest headline */
line-height: 1.1; margin: 0 0 18px; color: #FBF8F2;
}
.lc-mens-page .mj-hero2--portrait .mj-hero2-copy {
font-family: var(--mj-body); font-size: 14px; line-height: 1.75;
color: rgba(251, 248, 242, 0.78); margin: 0 0 10px; max-width: 34ch;
}
.lc-mens-page .mj-hero2--portrait .mj-hero2-credit {
font-family: var(--mj-head); font-weight: 400; font-size: 10.5px;
letter-spacing: 0.3em; text-transform: uppercase;
color: rgba(203, 196, 188, 0.9); display: block; margin: 0 0 30px;
}
@media (max-width: 800px) {
.lc-mens-page .mj-hero2--portrait { padding: 12px 14px 0; }
.lc-mens-page .mj-hero2--portrait .mj-hero2-stage { height: 78vh; min-height: 480px; }
.lc-mens-page .mj-hero2--portrait .mj-hero2-stage::after {
background: linear-gradient(0deg, rgba(35, 40, 45, 0.62) 0%, rgba(35, 40, 45, 0.12) 45%, transparent 65%);
}
.lc-mens-page .mj-hero2--portrait .mj-hero2-panel {
left: 22px; right: 22px; top: auto; bottom: 34px; transform: none; max-width: none;
}
}
/* ── 2 · THE SLAB (type panel beside full-height portrait) ── */
.lc-mens-page .mj-hero2--split {
display: grid;
grid-template-columns: 5fr 7fr;
min-height: min(94vh, 1020px);
}
.lc-mens-page .mj-hero2--split .mj-hero2-slab {
background: var(--mj-palm);
display: flex; align-items: center;
padding: clamp(40px, 6vw, 104px) clamp(28px, 5vw, 88px);
}
.lc-mens-page .mj-hero2--split h1 {
font-family: var(--mj-head); font-weight: 400;
letter-spacing: -1px; text-transform: uppercase;
font-size: clamp(44px, 5.4vw, 92px);
line-height: 0.98; margin: 0 0 22px; color: #FBF8F2;
text-wrap: balance;
}
.lc-mens-page .mj-hero2--split h1 .mj-accent { color: #CBC4BC; }
.lc-mens-page .mj-hero2--split .mj-hero2-copy {
font-family: var(--mj-accent); font-style: italic;
font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6;
color: rgba(251, 248, 242, 0.75); margin: 0 0 36px; max-width: 40ch;
}
.lc-mens-page .mj-hero2--split .mj-hero2-media { position: relative; min-height: 420px; }
@media (max-width: 900px) {
.lc-mens-page .mj-hero2--split { grid-template-columns: 1fr; min-height: 0; }
.lc-mens-page .mj-hero2--split .mj-hero2-media { order: 1; height: 58vh; min-height: 380px; }
.lc-mens-page .mj-hero2--split .mj-hero2-slab { order: 2; padding: 44px 24px 56px; }
}
/* ── 3 · THE FULL FRAME — BOUNDED EDITORIAL BANNER ──
Matches the Discover / gift-guide heroes: the IMAGE sets the height
with a hard floor + hard ceiling. NO viewport-height math, so it can
never tower on a tall window or feel unconstrained when resized.
To make it shorter/taller, move the three clamp numbers only.
floor 480px · scales at 68vh · ceiling 760px */
.lc-mens-page .mj-hero2--full {
height: clamp(900px, 55vh, 980px);
min-height: 480px;
overflow: hidden;
}
/* ultra-wide (2560px+): a modest bump so it stays proportional, not huge */
@media (min-width: 2561px) {
.lc-mens-page .mj-hero2--full { height: clamp(700px, 55vw, 1200px); }
}
.lc-mens-page .mj-hero2--full::after {
content: '';
position: absolute; inset: 0; z-index: 2;
background:
linear-gradient(0deg, rgba(35, 40, 45, 0.55) 0%, transparent 42%),
linear-gradient(90deg, rgba(35, 40, 45, 0.3) 0%, transparent 45%);
}
.lc-mens-page .mj-hero2--full .mj-hero2-anchor {
position: absolute; z-index: 3;
left: clamp(24px, 6vw, 96px);
bottom: clamp(40px, 7vh, 88px);
max-width: 600px;
}
/* Responsive type — a real curve: small on phones, capped on desktop.
5vw is the driver; the floor keeps it readable, the ceiling keeps it
from ever shouting. */
.lc-mens-page .mj-hero2--full h1 {
font-family: var(--mj-head); font-weight: 445;
letter-spacing: -0.5px; text-transform: uppercase;
font-size: clamp(30px, 5vw, 66px);
line-height: 0.98; margin: 0 0 18px; color: #FBF8F2;
}
.lc-mens-page .mj-hero2--full .mj-hero2-copy {
font-family: var(--mj-accent); font-style: italic;
font-size: clamp(15px, 1.5vw, 19px);
line-height: 1.45;
color: rgba(251, 248, 242, 0.85); margin: 0 0 30px;
max-width: 42ch;
}
.lc-mens-page .mj-hero2--full .mj-hero2-cue {
position: absolute; z-index: 3;
left: 50%; bottom: 22px; transform: translateX(-50%);
width: 1px; height: 40px;
background: linear-gradient(180deg, transparent, rgba(251, 248, 242, 0.7));
}
/* ── mobile: a 3:4 PORTRAIT banner (locks proportions to the width, like
the Discover pages) — pairs with the mens-hero-mobile.jpg 3:4 crop.
Type shrinks further and the eyebrow stays legible. ── */
@media (max-width: 768px) {
.lc-mens-page .mj-hero2--full {
height: auto; min-height: 0;
aspect-ratio: 3 / 4;
}
.lc-mens-page .mj-hero2--full .mj-hero2-anchor {
left: 24px; right: 24px; bottom: clamp(28px, 7vh, 56px);
max-width: none;
}
.lc-mens-page .mj-hero2--full h1 { font-size: clamp(30px, 8.5vw, 46px); }
.lc-mens-page .mj-hero2--full .mj-hero2-eyebrow { font-size: 12px; margin-bottom: 18px; }
.lc-mens-page .mj-hero2--full .mj-hero2-copy { font-size: 15px; max-width: 34ch; }
.lc-mens-page .mj-hero2--full .mj-hero2-cue { display: none; }
}
/* motion preference */
@media (prefers-reduced-motion: reduce) {
.lc-mens-page .mj-hero2 figure img { animation: none !important; }
}
/* ================================================================
THE DUO (v4.10.0) — the Tiffany gift-guide pattern.
Centered introduction, then two images side by side, each with
its own coordinated text beneath (title · italic line · copy ·
link). Replaces the old Weave text-beside-stack layout.
.mj-duo--dark for the warm-gray band; default is shell.
================================================================ */
.lc-mens-page .mj-duo { padding: clamp(88px, 11vw, 152px) 24px; }
.lc-mens-page .mj-duo--dark { background: var(--mj-palm); color: #F3EFE6; }
.lc-mens-page .mj-duo-head {
max-width: 760px; margin: 0 auto clamp(48px, 6vw, 88px);
text-align: center;
}
.lc-mens-page .mj-duo-head .mj-display { font-size: clamp(36px, 4.8vw, 68px); }
.lc-mens-page .mj-duo--dark .mj-duo-head .mj-display { color: #F3EFE6; }
.lc-mens-page .mj-duo--dark .mj-duo-head .mj-display .mj-accent { color: #CBC4BC; }
.lc-mens-page .mj-duo--dark .mj-duo-head .mj-eyebrow { color: #CBC4BC; }
.lc-mens-page .mj-duo-head .mj-copy { max-width: 54ch; margin-left: auto; margin-right: auto; }
.lc-mens-page .mj-duo--dark .mj-duo-head .mj-copy { color: rgba(243, 239, 230, 0.72); }
.lc-mens-page .mj-duo-grid {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 64px);
}
.lc-mens-page .mj-duo-tile figure { aspect-ratio: 4 / 5; margin: 0; overflow: hidden; }
.lc-mens-page .mj-duo-tile figure img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.1s var(--mj-ease);
}
.lc-mens-page .mj-duo-tile a:hover figure img { transform: scale(1.03); }
.lc-mens-page .mj-duo-tile-body { padding-top: clamp(20px, 2.4vw, 32px); max-width: 46ch; }
.lc-mens-page .mj-duo-tile h3 {
font-family: var(--mj-head); font-weight: 400;
letter-spacing: 0.02em; text-transform: uppercase;
font-size: clamp(19px, 1.8vw, 25px);
line-height: 1.1; margin: 0 0 8px; color: var(--mj-ink);
}
.lc-mens-page .mj-duo--dark .mj-duo-tile h3 { color: #F3EFE6; }
.lc-mens-page .mj-duo-tile .mj-accent { display: block; font-size: 17px; color: var(--mj-ink-soft); margin: 0 0 14px; }
.lc-mens-page .mj-duo--dark .mj-duo-tile .mj-accent { color: #CBC4BC; }
.lc-mens-page .mj-duo-tile p { font-size: 15px; line-height: 1.8; color: var(--mj-ink-soft); margin: 0 0 22px; text-wrap: pretty; }
.lc-mens-page .mj-duo--dark .mj-duo-tile p { color: rgba(243, 239, 230, 0.66); }
.lc-mens-page .mj-duo--dark .mj-duo-tile .mj-link { color: #F3EFE6; }
.lc-mens-page .mj-duo--dark .mj-duo-tile .mj-link::after { background: #CBC4BC; }
@media (max-width: 800px) {
.lc-mens-page .mj-duo { padding: 72px 24px; }
.lc-mens-page .mj-duo-grid { grid-template-columns: 1fr; gap: 48px; }
.lc-mens-page .mj-duo-tile-body { max-width: none; }
}
@media (hover: none) {
.lc-mens-page .mj-duo-tile a:hover figure img { transform: none; }
}
/* ================================================================
THE CATEGORY ROW (v4.11.0) — centered "Shop by Category".
The DY pattern: one centered label, one tight row of product-on-
seamless tiles, one small underlined link centered under each.
Replaces (or complements) the alternating category editorials.
================================================================ */
.lc-mens-page .mj-catrow { padding: clamp(80px, 10vw, 96px) 24px; }
.lc-mens-page .mj-catrow-head {
text-align: center; max-width: 760px;
margin: 0 auto clamp(40px, 5vw, 68px);
}
.lc-mens-page .mj-catrow-head .mj-display { font-size: clamp(34px, 4.6vw, 48px); }
.lc-mens-page .mj-catrow-grid {
max-width: 1400px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 2.2vw, 40px); /* breathes open on larger screens */
}
.lc-mens-page a.mj-catrow-tile {
display: block; text-align: center;
text-decoration: none !important;
color: var(--mj-ink);
}
.lc-mens-page .mj-catrow-tile figure {
margin: 0; position: relative; overflow: hidden;
aspect-ratio: 3 / 4; background: var(--mj-sand);
}
.lc-mens-page .mj-catrow-tile figure img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 1.1s var(--mj-ease);
}
.lc-mens-page .mj-catrow-tile:hover figure img { transform: scale(1.03); }
.lc-mens-page .mj-catrow-link {
display: inline-block; margin-top: 18px; padding-bottom: 4px;
font-family: var(--mj-body); font-size: 11px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase;
border-bottom: 1px solid rgba(35, 40, 45, 0.35);
transition: border-color 0.35s ease, color 0.35s ease;
}
.lc-mens-page .mj-catrow-tile:hover .mj-catrow-link {
border-color: var(--mj-ink);
}
@media (max-width: 1000px) {
.lc-mens-page .mj-catrow-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.lc-mens-page .mj-catrow-link { margin-top: 14px; margin-bottom: 10px; }
}
@media (hover: none) {
.lc-mens-page .mj-catrow-tile:hover figure img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.lc-mens-page .mj-catrow-tile figure img { transition: none !important; }
}
/* ================================================================
HARDENING LAYER — mobile + desktop. Kept last so it wins.
================================================================ */
.lc-mens-page { overflow-x: clip; overflow-wrap: break-word; }
/* overflow:clip on (from an earlier body_class) freezes scroll.
Tokens can stay; the document must remain a normal scroll root. */
html body.lc-mens-page,
html body.lc-mens-body {
overflow: visible;
overflow-x: clip;
margin: 0;
}
.lc-mens-page :where(a, button, [tabindex]):focus-visible {
outline: 2px solid var(--mj-gold);
outline-offset: 4px;
border-radius: 1px;
}
.lc-mens-page :where(a, button) { -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) {
.lc-mens-page .mj-link { padding-top: 14px; padding-bottom: 14px; }
}
@media (hover: none) {
.lc-mens-page .mj-cat:hover img { transform: none; }
.lc-mens-page .mj-mat:hover { background: transparent; }
}
.lc-mens-page .mj-btn:active { transform: scale(0.98); }
.lc-mens-page .mj-cat a:active figure { opacity: 0.92; }
/* content-visibility:auto REMOVED (v6.8.1). It told the browser to
skip rendering off-screen sections; Safari skipped the product
sliders' contents — the layout box stayed but nothing painted
(the blank rails), and every JS measurement inside read 0×0.
Correctness over the micro-optimization. */
.lc-mens-page .mj-display { text-wrap: balance; }
.lc-mens-page .mj-copy { text-wrap: pretty; }
.lc-mens-page img { height: auto; }
@media (forced-colors: active) {
.lc-mens-page .mj-btn { border: 1px solid ButtonText; }
.lc-mens-page .mj-link::after { background: LinkText; }
}
/* ================================================================
BUTTON REFINEMENT (v4.9.0)
The scaleX wipe fill and the magnetic cursor-follow are retired.
Hover is now a single confident crossfade — background, color,
border. Nothing moves. (Press gives a 92% opacity touch.)
================================================================ */
.lc-mens-page .mj-btn::before { content: none !important; }
.lc-mens-page .mj-btn {
overflow: visible;
transform: none !important;
transition: background-color .35s var(--mj-ease), color .35s var(--mj-ease), border-color .35s var(--mj-ease), opacity .2s var(--mj-ease) !important;
}
.lc-mens-page .mj-btn:hover {
background: var(--mj-ink);
border-color: var(--mj-ink);
color: var(--mj-shell);
}
.lc-mens-page .mj-btn-solid:hover {
background: #3a3532;
border-color: #3a3532;
color: #F3EFE6;
}
.lc-mens-page .mj-weave .mj-btn:hover,
.lc-mens-page .mj-viewing .mj-btn:hover {
background: #CBC4BC;
border-color: #CBC4BC;
color: var(--mj-ink);
}
.lc-mens-page .mj-visit .mj-btn:hover {
background: #FBF8F2;
border-color: #FBF8F2;
color: var(--mj-ink);
}
.lc-mens-page .mj-hero2 .mj-btn--paper:hover {
background: var(--mj-ink);
border-color: var(--mj-ink);
color: #FBF8F2;
}
.lc-mens-page .mj-btn:active { transform: none !important; opacity: 0.92; }
/* ── 1 · THE FEATURE SPLIT ─────────────────────────────────────── */
.lc-mens-page .mj-feature {
display: grid;
grid-template-columns: 7fr 5fr;
align-items: center;
max-width: 1760px;
margin: 0 auto;
padding: clamp(56px, 6vw, 104px) 24px;
gap: clamp(32px, 5vw, 88px);
}
.lc-mens-page .mj-feature--flip { grid-template-columns: 5fr 7fr; } /* image keeps the wide column */
.lc-mens-page .mj-feature--flip .mj-feature-media { order: 2; }
.lc-mens-page .mj-feature--flip .mj-feature-text { order: 1; }
.lc-mens-page .mj-feature-media { position: relative; }
.lc-mens-page .mj-feature-media figure {
aspect-ratio: 4 / 3;
margin: 0; overflow: hidden; position: relative;
}
.lc-mens-page .mj-feature-media img,
.lc-mens-page .mj-feature-media video {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.lc-mens-page .mj-feature-text { text-align: center; padding: 0 clamp(0px, 2vw, 32px); }
.lc-mens-page .mj-feature-text h2 {
font-family: var(--mj-head); font-weight: 445;
letter-spacing: -0.5px; text-transform: uppercase;
font-size: clamp(24px, 2.2vw, 34px);
line-height: 1.1; margin: 0 0 22px; color: var(--mj-ink);
}
.lc-mens-page .mj-feature-text h2 .mj-accent { color: var(--mj-gold); }
.lc-mens-page .mj-feature-text p {
font-size: 15.5px; line-height: 1.85; color: var(--mj-ink-soft);
max-width: 44ch; margin: 0 auto 30px;
}
@media (max-width: 900px) {
.lc-mens-page .mj-feature { grid-template-columns: 1fr; gap: 36px; padding: 56px 24px; }
.lc-mens-page .mj-feature--flip .mj-feature-media { order: 1; }
.lc-mens-page .mj-feature--flip .mj-feature-text { order: 2; }
}
/* ── 2 · THE ICON CAROUSEL ─────────────────────────────────────── */
.lc-mens-page .mj-icons { padding: clamp(64px, 7vw, 112px) 0; }
.lc-mens-page .mj-icons-title {
text-align: center;
margin: 0 auto clamp(36px, 4vw, 60px);
padding: 0 24px;
}
.lc-mens-page .mj-icons-rail { position: relative; }
.lc-mens-page .mj-icons-scroller {
display: flex;
gap: clamp(16px, 2vw, 32px);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* side padding centers the first/last slide with peeking neighbors */
padding: 0 max(24px, calc((100vw - min(76vw, 1140px)) / 2));
scroll-padding: 0 max(24px, calc((100vw - min(76vw, 1140px)) / 2));
}
.lc-mens-page .mj-icons-scroller::-webkit-scrollbar { display: none; }
.lc-mens-page .mj-icons-slide {
flex: 0 0 min(76vw, 1140px);
scroll-snap-align: center;
}
.lc-mens-page .mj-icons-slide figure {
aspect-ratio: 16 / 10;
margin: 0; overflow: hidden; position: relative;
}
.lc-mens-page .mj-icons-slide img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.lc-mens-page .mj-icons-story {
text-align: center;
max-width: 620px;
margin: clamp(36px, 4vw, 56px) auto 0;
padding: 0 24px;
}
.lc-mens-page .mj-icons-story h3 {
font-family: var(--mj-head); font-weight: 445;
letter-spacing: -0.5px; text-transform: uppercase;
font-size: clamp(22px, 2vw, 30px);
margin: 0 0 16px; color: var(--mj-ink);
}
.lc-mens-page .mj-icons-story h3 .mj-accent { color: var(--mj-gold); }
.lc-mens-page .mj-icons-story p {
font-size: 15px; line-height: 1.8; color: var(--mj-ink-soft);
margin: 0 0 26px;
}
@media (max-width: 700px) {
.lc-mens-page .mj-icons-slide { flex-basis: 86vw; }
.lc-mens-page .mj-icons-slide figure { aspect-ratio: 4 / 5; }
}
/* ── carousel chrome shared by 2 & 3: arrows + progress line ───── */
.lc-mens-page .mj-car-nav {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 4;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(251, 248, 242, 0.92);
border: 1px solid var(--mj-line);
color: var(--mj-ink);
cursor: pointer;
font-size: 22px; line-height: 1;
transition: background-color .3s ease, color .3s ease;
}
.lc-mens-page .mj-car-nav:hover { background: var(--mj-ink); color: var(--mj-shell); }
.lc-mens-page .mj-car-prev { left: clamp(12px, 2vw, 40px); }
.lc-mens-page .mj-car-next { right: clamp(12px, 2vw, 40px); }
.lc-mens-page .mj-car-progress {
position: relative;
width: min(280px, 50vw);
height: 2px;
margin: 28px auto 0;
background: var(--mj-line);
}
.lc-mens-page .mj-car-progress span {
position: absolute; left: 0; top: 0; bottom: 0;
width: 25%;
background: var(--mj-ink);
transition: transform .2s linear;
transform-origin: left center;
}
@media (hover: none) {
.lc-mens-page .mj-car-nav { display: none; } /* touch scrolls natively */
}
/* ── 3 · MOST POPULAR — the house Woo product slider ───────────── */
.lc-mens-page .mj-popular { padding: clamp(64px, 7vw, 112px) 0; }
.lc-mens-page .mj-popular-title { text-align: center; margin: 0 auto clamp(36px, 4vw, 64px); padding: 0 24px; }
.lc-mens-page .mj-popular-rail { position: relative; max-width: 1560px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 72px); }
.lc-mens-page .mj-popular-scroller {
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.lc-mens-page .mj-popular-scroller::-webkit-scrollbar { display: none; }
/* Force the Woo grid into a single scrolling row (the shortcode
renders ul.products) and restyle cards to the quiet Tiffany read:
product on plain ground, centered name + line, nothing else. */
.lc-mens-page .mj-popular-scroller ul.products {
display: flex !important;
flex-wrap: nowrap !important;
gap: clamp(20px, 2.4vw, 40px);
margin: 0 !important; padding: 0 !important;
list-style: none;
width: max-content;
}
.lc-mens-page .mj-popular-scroller ul.products li.product {
flex: 0 0 clamp(210px, 19vw, 264px);
width: auto !important;
margin: 0 !important; padding: 0 !important;
float: none !important;
scroll-snap-align: start;
text-align: center;
}
.lc-mens-page .mj-popular-scroller ul.products li.product img {
width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
background: var(--mj-sand);
margin: 0 0 18px;
}
.lc-mens-page .mj-popular-scroller ul.products li.product .woocommerce-loop-product__title,
.lc-mens-page .mj-popular-scroller ul.products li.product h2 {
font-family: var(--mj-body); font-weight: 500;
font-size: 14.5px; letter-spacing: 0.01em;
text-transform: none; color: var(--mj-ink);
margin: 0 0 6px; padding: 0;
line-height: 1.4;
}
.lc-mens-page .mj-popular-scroller ul.products li.product .price {
font-family: var(--mj-body); font-size: 13px;
color: var(--mj-ink-soft); display: block;
}
.lc-mens-page .mj-popular-scroller ul.products li.product .price del { opacity: 0.55; margin-right: 6px; }
.lc-mens-page .mj-popular-scroller ul.products li.product .button,
.lc-mens-page .mj-popular-scroller ul.products li.product .add_to_cart_button,
.lc-mens-page .mj-popular-scroller ul.products li.product .onsale,
.lc-mens-page .mj-popular-scroller ul.products li.product .star-rating {
display: none !important; /* slider is editorial — the PDP sells */
}
.lc-mens-page .mj-popular-cta { text-align: center; margin-top: clamp(36px, 4vw, 56px); }
/* ── 4 · THE FILM BAND ─────────────────────────────────────────── */
.lc-mens-page .mj-film {
display: grid;
grid-template-columns: 5fr 7fr;
align-items: center;
max-width: 1760px;
margin: 0 auto;
padding: clamp(56px, 6vw, 104px) 24px;
gap: clamp(32px, 5vw, 80px);
}
.lc-mens-page .mj-film--flip { grid-template-columns: 7fr 5fr; } /* film keeps the wide column */
.lc-mens-page .mj-film--flip .mj-film-media { order: 1; }
.lc-mens-page .mj-film--flip .mj-film-text { order: 2; }
.lc-mens-page .mj-film-text { text-align: center; }
.lc-mens-page .mj-film-text h2 {
font-family: var(--mj-head); font-weight: 445;
letter-spacing: -0.5px; text-transform: uppercase;
font-size: clamp(24px, 2.2vw, 34px);
line-height: 1.1; margin: 0 0 22px; color: var(--mj-ink);
}
.lc-mens-page .mj-film-text h2 .mj-accent { color: var(--mj-gold); }
.lc-mens-page .mj-film-text p {
font-size: 15.5px; line-height: 1.85; color: var(--mj-ink-soft);
max-width: 44ch; margin: 0 auto 30px;
}
.lc-mens-page .mj-film-media figure {
aspect-ratio: 16 / 9;
margin: 0; overflow: hidden; position: relative;
}
.lc-mens-page .mj-film-media video,
.lc-mens-page .mj-film-media img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 900px) {
.lc-mens-page .mj-film { grid-template-columns: 1fr; gap: 36px; padding: 56px 24px; }
.lc-mens-page .mj-film-media { order: 1; }
.lc-mens-page .mj-film-text { order: 2; }
}
/* ── reduced motion / touch coverage for the set ───────────────── */
@media (prefers-reduced-motion: reduce) {
.lc-mens-page .mj-icons-scroller,
.lc-mens-page .mj-popular-scroller { scroll-behavior: auto !important; }
.lc-mens-page .mj-car-progress span { transition: none; }
}
/* ================================================================
BUTTON ORDER (v5.3.0) — TWO VARIANTS ONLY. Appended last: wins
the cascade over every legacy button rule above without editing
them.
A · INK OUTLINE (light grounds) — transparent, 1px ink border,
ink text; hover crossfades to ink fill, shell text.
B · PAPER OUTLINE (dark grounds) — the .mj-visit button,
UNTOUCHED, now the standard: transparent, 1px #FBF8F2
border, paper text; hover crossfades to paper fill, ink.
================================================================ */
/* ── collapse into A: solid palm + custom closing → ink outline ── */
.lc-mens-page .mj-btn-solid,
.lc-mens-page .mj-closing .mj-btn {
background: transparent;
border-color: var(--mj-ink);
color: var(--mj-ink);
}
.lc-mens-page .mj-btn-solid:hover,
.lc-mens-page .mj-closing .mj-btn:hover {
background: var(--mj-ink);
border-color: var(--mj-ink);
color: var(--mj-shell);
}
/* ── collapse into B: hero paper-fill, weave warm-gray, viewing,
dark duo → the paper outline (identical to .mj-visit) ── */
.lc-mens-page .mj-hero2 .mj-btn--paper,
.lc-mens-page .mj-weave .mj-btn,
.lc-mens-page .mj-viewing .mj-btn,
.lc-mens-page .mj-duo--dark .mj-btn {
background: transparent;
border-color: #FBF8F2;
color: #FBF8F2;
}
.lc-mens-page .mj-hero2 .mj-btn--paper:hover,
.lc-mens-page .mj-weave .mj-btn:hover,
.lc-mens-page .mj-viewing .mj-btn:hover,
.lc-mens-page .mj-duo--dark .mj-btn:hover {
background: #FBF8F2;
border-color: #FBF8F2;
color: var(--mj-ink);
}
/* ================================================================
STORY · BAND · PAIR (v5.4.0) — three additions + one fix.
Appended to mens.css. All scoped .lc-mens-page, purely additive
except the first fix, which wins by cascade.
FIX · category editorial headline no longer overlaps the photo
1 · .mj-story — "About Men's Jewelry": the readable editorial
2 · .mj-band — full-width statement band (hero-like, not the hero)
3 · .mj-pair — the James Perse 50/50: full-bleed, two images,
quiet caption lower-left
================================================================ */
/* ── FIX · the pulled headline (CHAINS over the image) sits back
in its own column ── */
.lc-mens-page .mj-cat-text.mj-pull-left h3 { margin-left: 0; }
.lc-mens-page .mj-cat-text.mj-pull-right h3 { margin-right: 0; }
/* ── 1 · THE STORY — About Men's Jewelry ───────────────────────── */
.lc-mens-page .mj-story {
max-width: 680px;
margin: 0 auto;
padding: clamp(80px, 10vw, 148px) 24px;
text-align: center;
}
.lc-mens-page .mj-story .mj-display { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 30px; }
.lc-mens-page .mj-story-lead {
font-family: var(--mj-accent); font-style: italic; font-weight: 400;
font-size: clamp(19px, 1.9vw, 23px); line-height: 1.65;
color: var(--mj-ink); margin: 0 0 28px;
}
.lc-mens-page .mj-story p:not(.mj-story-lead) {
font-size: 16px; line-height: 1.95; color: var(--mj-ink-soft);
margin: 0 0 24px; text-align: left; text-wrap: pretty;
}
.lc-mens-page .mj-story-rule {
width: 56px; height: 1px; background: var(--mj-gold);
border: 0; margin: 36px auto;
}
.lc-mens-page .mj-story .mj-link { margin-top: 8px; }
/* ── 2 · THE BAND — full-width statement (not the hero) ────────── */
.lc-mens-page .mj-band {
position: relative;
height: clamp(380px, 52vh, 560px);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
text-align: center;
}
.lc-mens-page .mj-band figure { position: absolute; inset: 0; margin: 0; }
.lc-mens-page .mj-band figure picture { display: block; width: 100%; height: 100%; }
.lc-mens-page .mj-band figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-mens-page .mj-band::after {
content: ''; position: absolute; inset: 0; z-index: 2;
background: rgba(35, 40, 45, 0.32); /* quiet legibility veil */
}
.lc-mens-page .mj-band-inner { position: relative; z-index: 3; max-width: 720px; padding: 0 24px; }
.lc-mens-page .mj-band .mj-eyebrow { color: #CBC4BC; }
.lc-mens-page .mj-band h2 {
font-family: var(--mj-head); font-weight: 445;
letter-spacing: -0.5px; text-transform: uppercase;
font-size: clamp(28px, 3.4vw, 50px);
line-height: 1.04; margin: 0; color: #FBF8F2;
}
.lc-mens-page .mj-band h2 .mj-accent { color: #CBC4BC; }
.lc-mens-page .mj-band .mj-btn { margin-top: 36px; } /* Variant B applies via .mj-band below */
.lc-mens-page .mj-band .mj-btn {
background: transparent; border-color: #FBF8F2; color: #FBF8F2;
}
.lc-mens-page .mj-band .mj-btn:hover {
background: #FBF8F2; border-color: #FBF8F2; color: var(--mj-ink);
}
@media (max-width: 768px) {
.lc-mens-page .mj-band { height: clamp(320px, 48vh, 440px); }
}
/* ── 3 · THE PAIR — James Perse 50/50 full-bleed ───────────────── */
.lc-mens-page .mj-pair {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0; /* JP: the two frames touch */
height: clamp(520px, 78vh, 860px);
overflow: hidden;
}
.lc-mens-page .mj-pair figure {
margin: 0; position: relative; overflow: hidden;
height: 100%;
}
.lc-mens-page .mj-pair figure img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.lc-mens-page .mj-pair-caption {
position: absolute; z-index: 3;
left: clamp(24px, 4vw, 56px); bottom: clamp(28px, 5vh, 56px);
}
.lc-mens-page .mj-pair-caption h3 {
font-family: var(--mj-head); font-weight: 445;
letter-spacing: 0.08em; text-transform: uppercase;
font-size: clamp(16px, 1.4vw, 21px);
margin: 0 0 10px; color: #FBF8F2;
text-shadow: 0 1px 14px rgba(35, 40, 45, 0.35);
}
.lc-mens-page .mj-pair-link {
font-family: var(--mj-body); font-weight: 500;
font-size: 11.5px; letter-spacing: 0.24em; text-transform: uppercase;
color: #FBF8F2; display: inline-block; padding-bottom: 4px;
border-bottom: 1px solid rgba(251, 248, 242, 0.75);
transition: border-color .35s ease;
text-shadow: 0 1px 14px rgba(35, 40, 45, 0.35);
}
.lc-mens-page .mj-pair-link:hover { border-color: #FBF8F2; }
@media (max-width: 768px) {
.lc-mens-page .mj-pair {
grid-template-columns: 1fr; /* stack: one over the other */
height: auto;
}
.lc-mens-page .mj-pair figure { aspect-ratio: 4 / 5; height: auto; }
}
/* ================================================================
ATMOSPHERE GRADIENTS (v5.5.0) — two photographic set grounds.
Use as a background on any section: add the class next to the
section's own (e.g. )
or on the try-out blocks in the paste file.
.mj-bg-water — the hero's cool water: silver light upper-left,
slate falling away below
.mj-bg-stone — the DY set: warm sand raked by one hard light
from upper-left, shadow pooling low
Add .mj-bg-grain alongside either for a whisper of film grain
(pure CSS, no image file).
================================================================ */
.lc-mens-page .mj-bg-water {
background:
radial-gradient(ellipse 62% 46% at 30% 20%, rgba(238, 243, 245, 0.88) 0%, transparent 62%),
radial-gradient(ellipse 50% 34% at 58% 42%, rgba(206, 217, 221, 0.5) 0%, transparent 60%),
radial-gradient(ellipse 85% 62% at 74% 88%, rgba(43, 54, 61, 0.6) 0%, transparent 72%),
linear-gradient(168deg, #b3bec4 0%, #8b9ca5 36%, #64747d 70%, #414d55 100%);
}
.lc-mens-page .mj-bg-stone {
background:
radial-gradient(ellipse 56% 40% at 64% 16%, rgba(240, 234, 224, 0.92) 0%, transparent 58%),
radial-gradient(ellipse 42% 30% at 30% 38%, rgba(216, 208, 194, 0.55) 0%, transparent 62%),
radial-gradient(ellipse 72% 58% at 10% 88%, rgba(69, 63, 57, 0.48) 0%, transparent 66%),
linear-gradient(155deg, #dbd4c8 0%, #bdb3a4 44%, #948b7e 76%, #6f675d 100%);
}
/* optional: film grain over either ground (keeps gradients from
reading flat/banded on big screens) */
.lc-mens-page .mj-bg-grain { position: relative; }
.lc-mens-page .mj-bg-grain::before {
content: '';
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lc-mens-page .mj-bg-grain > * { position: relative; z-index: 2; }
/* light text helpers when sitting content on these grounds */
.lc-mens-page .mj-bg-water .mj-eyebrow,
.lc-mens-page .mj-bg-stone .mj-eyebrow { color: #F1EDE6; }
.lc-mens-page .mj-bg-water .mj-display,
.lc-mens-page .mj-bg-stone .mj-display { color: #FBF8F2; }
.lc-mens-page .mj-bg-water .mj-display .mj-accent,
.lc-mens-page .mj-bg-stone .mj-display .mj-accent { color: #E4E0DA; }
/* ================================================================
BAND — DECK-THREE READ (v5.5.1). The Relax & Enjoy break now
mirrors the third Deck chapter — same warm veil, same centered
stack (eyebrow · headline · italic line · underlined link) —
but smaller, quieter, and height-bounded: a page break, not a
hero. Appended last; wins over the v5.4 band rules above.
================================================================ */
.lc-mens-page .mj-band {
height: clamp(340px, 46vh, 500px);
}
.lc-mens-page .mj-band::after {
background: rgba(94, 87, 80, 0.44); /* the deck-3 warm stone veil */
}
.lc-mens-page .mj-band h2 {
font-size: clamp(22px, 2.4vw, 36px); /* smaller, less important */
letter-spacing: 0;
}
.lc-mens-page .mj-band .mj-accent {
display: block;
font-size: clamp(15px, 1.4vw, 18px);
color: rgba(251, 248, 242, 0.85);
margin-top: 14px;
}
.lc-mens-page .mj-band h2 .mj-accent { display: inline; margin: 0; font-size: inherit; }
.lc-mens-page .mj-band .mj-eyebrow { font-size: 11px; margin-bottom: 18px; }
.lc-mens-page .mj-band .mj-link {
color: #FBF8F2;
margin-top: 26px;
}
.lc-mens-page .mj-band .mj-link::after { background: #CBC4BC; }
@media (max-width: 768px) {
.lc-mens-page .mj-band { height: clamp(280px, 40vh, 380px); }
}
/* ================================================================
BAND — CORNER READ (v5.6.0) — the hero's lower-left anchor
language as a mid-page break. Same full-bleed image + corner
text stack, but DEMOTED: no heading tag at all (a styled span),
smaller type, bounded height. Never competes with the hero.
Use:
================================================================ */
.lc-mens-page .mj-band--corner {
display: block;
text-align: left;
height: clamp(380px, 52vh, 560px);
}
.lc-mens-page .mj-band--corner::after {
/* the hero's own corner veil — dark pooling low-left */
background:
linear-gradient(0deg, rgba(35, 40, 45, 0.5) 0%, transparent 46%),
linear-gradient(90deg, rgba(35, 40, 45, 0.28) 0%, transparent 45%);
}
.lc-mens-page .mj-band--corner .mj-band-inner {
position: absolute; z-index: 3;
left: clamp(24px, 5vw, 80px);
bottom: clamp(28px, 6vh, 64px);
max-width: 520px;
padding: 0;
}
.lc-mens-page .mj-band--corner .mj-eyebrow {
font-size: 11px; letter-spacing: 0.42em;
color: #CBC4BC; margin-bottom: 14px;
}
.lc-mens-page .mj-band--corner .mj-band-title {
/* NOT a heading element — a styled span; the hero keeps the h1 */
display: block;
font-family: var(--mj-head); font-weight: 445;
letter-spacing: 0; text-transform: uppercase;
font-size: clamp(20px, 2vw, 30px);
line-height: 1.08; margin: 0 0 12px; color: #FBF8F2;
}
.lc-mens-page .mj-band--corner .mj-band-copy {
font-family: var(--mj-accent); font-style: italic;
font-size: clamp(14px, 1.3vw, 17px); line-height: 1.6;
color: rgba(251, 248, 242, 0.85);
margin: 0 0 22px; max-width: 42ch;
}
.lc-mens-page .mj-band--corner .mj-link { color: #FBF8F2; margin: 0; }
.lc-mens-page .mj-band--corner .mj-link::after { background: #CBC4BC; }
@media (max-width: 768px) {
.lc-mens-page .mj-band--corner { height: clamp(320px, 46vh, 420px); }
.lc-mens-page .mj-band--corner .mj-band-inner { left: 24px; right: 24px; bottom: 28px; max-width: none; }
}
/* ================================================================
CORNER BAND — HERO CLONE (v5.6.1). The corner band now carries
the full hero language — identical veil recipe, the same 30s
ambient breath on the image, crop support — on its own
classes only. NOTHING here touches .mj-hero2; adjust either
freely. Proportions step DOWN from the hero (yours: 55vw/1200px
ultra-wide) so the top hero stays the page's one big statement.
================================================================ */
.lc-mens-page .mj-band--corner {
height: clamp(460px, 60vh, 680px);
}
@media (min-width: 2561px) {
/* your hero runs clamp(700px, 55vw, 1200px) — the break sits a
clear step below it */
.lc-mens-page .mj-band--corner { height: clamp(600px, 32vw, 900px); }
}
.lc-mens-page .mj-band--corner::after {
/* the hero's exact veil */
background:
linear-gradient(0deg, rgba(35, 40, 45, 0.55) 0%, transparent 42%),
linear-gradient(90deg, rgba(35, 40, 45, 0.3) 0%, transparent 45%);
}
.lc-mens-page .mj-band--corner figure img {
animation: mj-ambient 30s ease-in-out 1.2s infinite alternate; /* the hero's breath */
object-position: 60% center;
}
.lc-mens-page .mj-band--corner .mj-band-title {
font-size: clamp(24px, 2.6vw, 42px); /* hero is clamp(30px, 5vw, 66px) — one step down */
letter-spacing: -0.5px;
line-height: 1.02;
}
.lc-mens-page .mj-band--corner .mj-band-copy {
font-size: clamp(15px, 1.5vw, 19px); /* matches the hero copy scale */
line-height: 1.45;
}
.lc-mens-page .mj-band--corner .mj-eyebrow { font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
.lc-mens-page .mj-band--corner figure img { animation: none !important; }
}
@media (max-width: 768px) {
.lc-mens-page .mj-band--corner { height: auto; min-height: 0; aspect-ratio: 3 / 4; }
.lc-mens-page .mj-band--corner .mj-band-title { font-size: clamp(24px, 7vw, 38px); }
}
/* ================================================================
DECK — LEFT-CORNER VARIANT (v5.7.0). Add class mj-deck--left to
the SECTION and the chapter text anchors lower-left (the hero /
corner-band language) instead of centered. The centered deck is
untouched — both variants can sit on the same page.
================================================================ */
.lc-mens-page .mj-deck--left .mj-deck-panel {
justify-content: flex-start;
align-items: flex-end;
text-align: left;
padding: clamp(32px, 7vh, 80px) clamp(24px, 5vw, 80px);
}
.lc-mens-page .mj-deck--left .mj-deck-content { max-width: 560px; }
.lc-mens-page .mj-deck--left .mj-deck-veil {
/* corner-weighted veil (the hero's), instead of the flat wash */
background:
linear-gradient(0deg, rgba(35, 40, 45, 0.55) 0%, transparent 46%),
linear-gradient(90deg, rgba(35, 40, 45, 0.3) 0%, transparent 45%);
}
.lc-mens-page .mj-deck--left .mj-deck-content .mj-display {
font-size: clamp(30px, 4.2vw, 58px); /* a touch smaller than centered */
}
.lc-mens-page .mj-deck--left .mj-deck-content .mj-accent {
max-width: 46ch; margin-top: 16px;
font-size: 18px; /* this area only — base .mj-accent untouched */
}
@media (max-width: 768px) {
.lc-mens-page .mj-deck--left .mj-deck-panel { padding: 32px 24px; }
.lc-mens-page .mj-deck--left .mj-deck-content { max-width: none; }
}
/* ================================================================
DECK LEFT — REFINEMENTS (v5.7.1)
1 · eyebrow hugs the headline (14px, was 26)
2 · the hero's paper-outline button works inside the deck
3 · veil: feathered corner scrim (no more smoky diagonal slab);
and for LIGHT images (marble, sand, bright metal) add
mj-deck--ink to the section — veil OFF, text in ink, the
Van Cleef read your Discover pages already use.
================================================================ */
/* 1 — eyebrow gap */
.lc-mens-page .mj-deck--left .mj-deck-content .mj-eyebrow { margin-bottom: 14px; }
/* 2 — hero button inside any deck panel (Variant B, paper outline) */
.lc-mens-page .mj-deck .mj-btn--paper {
background: transparent; border-color: #FBF8F2; color: #FBF8F2;
margin-top: 28px;
}
.lc-mens-page .mj-deck .mj-btn--paper:hover {
background: #FBF8F2; border-color: #FBF8F2; color: var(--mj-ink);
}
/* 3a — refined veil: a soft elliptical scrim feathered around the
text corner only; the rest of the photograph stays clean */
.lc-mens-page .mj-deck--left .mj-deck-veil {
background:
radial-gradient(ellipse 48% 56% at 10% 90%,
rgba(35, 40, 45, 0.46) 0%,
rgba(35, 40, 45, 0.24) 44%,
transparent 72%);
}
/* 3b — LIGHT-IMAGE MODE: add mj-deck--ink beside mj-deck--left.
No veil at all; the stack sets in ink against the bright photo. */
.lc-mens-page .mj-deck--ink .mj-deck-veil { display: none; }
.lc-mens-page .mj-deck--ink .mj-deck-content .mj-eyebrow { color: var(--mj-gold) !important; }
.lc-mens-page .mj-deck--ink .mj-deck-content .mj-display { color: var(--mj-ink); }
.lc-mens-page .mj-deck--ink .mj-deck-content .mj-accent { color: var(--mj-ink-soft); }
.lc-mens-page .mj-deck--ink .mj-deck-content .mj-link { color: var(--mj-ink); }
.lc-mens-page .mj-deck--ink .mj-btn--paper {
border-color: var(--mj-ink); color: var(--mj-ink); background: transparent;
}
.lc-mens-page .mj-deck--ink .mj-btn--paper:hover {
background: var(--mj-ink); border-color: var(--mj-ink); color: var(--mj-shell);
}
/* ================================================================
STORY — IMAGE GROUND (v5.8.0). The About section over a black &
white photograph, the deck treatment inverted for prose: the
image ghosts through a warm shell wash (heavier at the top and
bottom so the page melts in, lighter mid so the photo breathes),
and the text stays ink for long-copy legibility.
Use:
The plain centered .mj-story is untouched.
================================================================ */
.lc-mens-page .mj-story--image {
position: relative;
max-width: none; /* full-bleed; inner keeps the column */
padding: clamp(96px, 12vw, 180px) 24px;
overflow: hidden;
min-height: 80vh;
min-height: 80dvh;
display: flex; align-items: center; /* text column centers in the taller band */
}
.lc-mens-page .mj-story--image .mj-story-figure {
position: absolute; inset: 0; margin: 0; z-index: 0;
}
.lc-mens-page .mj-story--image .mj-story-figure img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1) sepia(0.15) contrast(1.02); /* b/w, warmed — sepia 0→0.3 is the warmth dial */
}
.lc-mens-page .mj-story--image::after {
/* the warm wash — page shell melting in at the edges */
content: '';
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg,
rgba(251, 248, 242, 0.88) 0%,
rgba(251, 248, 242, 0.55) 26%,
rgba(251, 248, 242, 0.48) 72%,
rgba(251, 248, 242, 0.88) 100%);
}
.lc-mens-page .mj-story--image .mj-story-inner {
position: relative; z-index: 2;
width: 100%;
max-width: 680px; margin: 0 auto;
text-align: center;
}
@media (max-width: 768px) {
.lc-mens-page .mj-story--image { padding: 88px 24px; }
}
/* ================================================================
DUO DARK — ATMOSPHERE (v5.8.1). The flat warm-gray band gets a
whisper of light: a soft bloom behind the headline, a gentle
fall-off toward the base. Same palm family, no color change —
just air. Appended last; wins over the flat background above.
================================================================ */
.lc-mens-page .mj-duo--dark {
background:
radial-gradient(ellipse 72% 48% at 50% 0%,
rgba(140, 131, 121, 0.32) 0%, transparent 62%),
radial-gradient(ellipse 90% 55% at 50% 100%,
rgba(30, 34, 38, 0.35) 0%, transparent 68%),
linear-gradient(180deg, #544f4a 0%, #4a4541 52%, #413c38 100%);
}
/* ================================================================
STORY — PAPER MODE (v5.9.0). Add mj-story--paper next to
mj-story--image and the About reads like the Galleon deck:
white text over the b/w photograph with the deck's dark veil,
instead of ink on the cream wash. The wash version still works
without this class; the centered deck itself is untouched.
================================================================ */
.lc-mens-page .mj-story--paper::after {
/* the deck's veil, not the shell wash */
background: rgba(74, 69, 65, 0.38);
}
.lc-mens-page .mj-story--paper .mj-eyebrow { color: #F3EFE6; }
.lc-mens-page .mj-story--paper .mj-display { color: #FBF8F2; }
.lc-mens-page .mj-story--paper .mj-display .mj-accent { color: #E4E0DA !important; }
.lc-mens-page .mj-story--paper .mj-story-lead { color: #FBF8F2; }
.lc-mens-page .mj-story--paper p:not(.mj-story-lead) { color: rgba(251, 248, 242, 0.85); }
.lc-mens-page .mj-story--paper .mj-story-rule { background: #CBC4BC; }
.lc-mens-page .mj-story--paper .mj-link { color: #FBF8F2; }
.lc-mens-page .mj-story--paper .mj-link::after { background: #CBC4BC; }
/* ================================================================
PAIR — FRAME TEXT BLOCKS (v6.0.0), the DY read. Each frame of
the 50/50 gets its own centered text stack at the bottom —
eyebrow · wide-tracked title · copy · underlined link — over a
soft bottom scrim, with art-directed crops per frame.
New markup wraps each figure in .mj-pair-cell; the old corner
caption (.mj-pair-caption) still works if a section uses it.
================================================================ */
.lc-mens-page .mj-pair-cell {
position: relative; overflow: hidden; height: 100%;
}
.lc-mens-page .mj-pair-cell figure { height: 100%; margin: 0; overflow: hidden; }
.lc-mens-page .mj-pair-cell figure picture { display: block; width: 100%; height: 100%; }
.lc-mens-page .mj-pair-cell figure img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.lc-mens-page .mj-pair-cell::after {
/* legibility scrim, bottom third only */
content: ''; position: absolute; inset: 0; z-index: 2;
background: linear-gradient(0deg, rgba(35, 40, 45, 0.48) 0%, rgba(35, 40, 45, 0.18) 26%, transparent 44%);
pointer-events: none;
}
.lc-mens-page .mj-pair-text {
position: absolute; z-index: 3;
left: 24px; right: 24px;
bottom: clamp(28px, 5vh, 60px);
text-align: center;
}
.lc-mens-page .mj-pair-text .mj-pair-eyebrow {
display: block;
font-family: var(--mj-head); font-weight: 400;
font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
color: #E4E0DA; margin: 0 0 10px;
}
.lc-mens-page .mj-pair-text .mj-pair-title {
display: block;
font-family: var(--mj-head); font-weight: 445;
font-size: clamp(32px, 1.7vw, 36px);
letter-spacing: 0em; text-transform: uppercase; /* Mark's sizing */
line-height: 1.1; color: #FBF8F2; margin: 0 0 12px;
}
.lc-mens-page .mj-pair-text p {
font-family: var(--mj-body);
font-size: 14.5px; line-height: 1.6;
color: rgba(251, 248, 242, 0.88);
max-width: 40ch; margin: 0 auto 18px;
}
/* the underlined link style already exists (.mj-pair-link) */
@media (max-width: 768px) {
.lc-mens-page .mj-pair-cell { aspect-ratio: 4 / 5; height: auto; }
.lc-mens-page .mj-pair-text { bottom: 32px; }
.lc-mens-page .mj-pair-text .mj-pair-title { font-size: clamp(22px, 6.4vw, 30px); }
}
/* ── pair link color hardened (v6.0.1) — beats the theme's
.hentry .entry-content a link color, same fix as the vault ── */
.lc-mens-page .mj-pair-text .mj-pair-link,
.lc-mens-page .mj-pair-caption .mj-pair-link {
color: #FBF8F2 !important;
border-bottom-color: rgba(251, 248, 242, 0.75);
}
.lc-mens-page .mj-pair-text .mj-pair-link:hover,
.lc-mens-page .mj-pair-caption .mj-pair-link:hover {
color: #FBF8F2 !important;
border-bottom-color: #FBF8F2;
}
/* ================================================================
CAROUSEL FIXES (v6.1.0)
1 · Woo wrapper: the [products] shortcode nests its output in a
div.woocommerce inside the scroller — forcing that wrapper
to max-content makes the scroller's scrollWidth honest, so
the arrows and the loop math work.
2 · ARROWS — LOW PROFILE: bare thin chevrons, 36px, no box, no
background. The !importants beat theme button styling.
================================================================ */
.lc-mens-page .mj-popular-scroller > .woocommerce,
.lc-mens-page .mj-popular-scroller > div { width: max-content; }
.lc-mens-page .mj-car-nav {
width: 36px !important; height: 36px !important;
min-width: 0 !important; min-height: 0 !important;
padding: 0 !important; margin: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--mj-ink) !important;
font-size: 30px; font-weight: 300; line-height: 1;
opacity: 0.55;
transition: opacity .3s ease !important;
}
.lc-mens-page .mj-car-nav:hover {
background: transparent !important;
color: var(--mj-ink) !important;
opacity: 1;
}
.lc-mens-page .mj-car-nav:focus { outline-offset: 2px; }
/* ── pair text left-justified above iPad size (v6.1.1) — on
desktop the frame text sits lower-LEFT; iPad and phone keep
the centered stack ── */
@media (min-width: 1100px) {
.lc-mens-page .mj-pair-text {
left: clamp(28px, 4vw, 64px);
right: auto;
max-width: 480px;
text-align: left;
}
.lc-mens-page .mj-pair-text p { margin-left: 0; margin-right: 0; }
}
/* ================================================================
RAIL REFINEMENTS (v6.2.1)
1 · Arrows get their own gutter — rail side padding widens so
the chevrons never crowd the product cards.
2 · STATIC RAILS: when a slider's products all fit (no overflow),
the script adds .mj-rail-static — arrows + progress hide and
the row centers. No more scrolling into empty space.
================================================================ */
.lc-mens-page .mj-popular-rail {
padding: 0 clamp(60px, 5.5vw, 104px); /* the arrows' own lane */
}
.lc-mens-page .mj-popular-rail .mj-car-prev { left: clamp(10px, 1.4vw, 28px); }
.lc-mens-page .mj-popular-rail .mj-car-next { right: clamp(10px, 1.4vw, 28px); }
.lc-mens-page .mj-rail-static .mj-car-nav,
.lc-mens-page .mj-rail-static .mj-car-progress { display: none; }
.lc-mens-page .mj-rail-static .mj-popular-scroller > .woocommerce,
.lc-mens-page .mj-rail-static .mj-popular-scroller > div { width: 100%; }
.lc-mens-page .mj-rail-static .mj-popular-scroller {
display: flex; justify-content: center; /* few products sit centered */
}
.lc-mens-page .mj-rail-static .mj-popular-scroller ul.products {
margin: 0 auto !important;
}
/* ================================================================
CLOSING — DARK VARIANT (v6.5.0). Add mj-closing--dark to the
closing section: the Mariner's Weave brown with the same
atmosphere gradient (bloom up top, gentle fall-off below), text
in the dark-ground palette, button in Variant B paper outline.
Without the class, the light closing is unchanged.
================================================================ */
.lc-mens-page .mj-closing--dark {
background:
radial-gradient(ellipse 72% 48% at 50% 0%,
rgba(140, 131, 121, 0.32) 0%, transparent 62%),
radial-gradient(ellipse 90% 55% at 50% 100%,
rgba(30, 34, 38, 0.35) 0%, transparent 68%),
linear-gradient(180deg, #544f4a 0%, #4a4541 52%, #413c38 100%);
}
.lc-mens-page .mj-closing--dark .mj-eyebrow { color: #CBC4BC; }
.lc-mens-page .mj-closing--dark .mj-display { color: #F3EFE6; }
.lc-mens-page .mj-closing--dark .mj-display .mj-accent { color: #CBC4BC; }
.lc-mens-page .mj-closing--dark .mj-tagline { color: #CBC4BC !important; }
.lc-mens-page .mj-closing--dark .mj-btn {
background: transparent; border-color: #FBF8F2; color: #FBF8F2;
}
.lc-mens-page .mj-closing--dark .mj-btn:hover {
background: #FBF8F2; border-color: #FBF8F2; color: var(--mj-ink);
}
/* ================================================================
QUIET SPREAD — DARK VARIANT (v6.6.0). Add mj-gift-spread--dark
to the section: the Mariner's Weave brown with the atmosphere
gradient, text flipped to the dark-ground palette. Without the
class, the sand version is unchanged. (Lives here in mens.css so
it cascades after mens-gifting.css regardless of load order —
the appendix loads last.)
================================================================ */
.lc-mens-page .mj-gift-spread.mj-gift-spread--dark {
/* doubled class beats mens-gifting.css's sand bg (it loads AFTER
this file — same specificity would lose on order) */
background:
radial-gradient(ellipse 72% 48% at 50% 0%,
rgba(140, 131, 121, 0.32) 0%, transparent 62%),
radial-gradient(ellipse 90% 55% at 50% 100%,
rgba(30, 34, 38, 0.35) 0%, transparent 68%),
linear-gradient(180deg, #544f4a 0%, #4a4541 52%, #413c38 100%);
}
.lc-mens-page .mj-gift-spread--dark .mj-eyebrow { color: #CBC4BC; }
.lc-mens-page .mj-gift-spread--dark .mj-display { color: #F3EFE6; }
.lc-mens-page .mj-gift-spread--dark .mj-display .mj-accent { color: #CBC4BC; }
.lc-mens-page .mj-gift-spread--dark .mj-copy,
.lc-mens-page .mj-gift-spread--dark p { color: rgba(243, 239, 230, 0.72); }
.lc-mens-page .mj-gift-spread--dark .mj-link { color: #F3EFE6 !important; }
.lc-mens-page .mj-gift-spread--dark .mj-link::after { background: #CBC4BC; }
.lc-mens-page .mj-gift-spread--dark .mj-btn {
background: transparent; border-color: #FBF8F2; color: #FBF8F2;
}
.lc-mens-page .mj-gift-spread--dark .mj-btn:hover {
background: #FBF8F2; border-color: #FBF8F2; color: var(--mj-ink);
}
/* =================================================================
THE FLAVOR (v6.7.0) — full-width image, nothing else.
A pure photographic page break: no headline, no veil, no button.
Use it between sections to let the page breathe.
MODIFIERS (add next to mj-flavor):
.mj-flavor--tall a bigger, more cinematic break
.mj-flavor--short a slim ribbon of image
.mj-flavor--warm the CSS warm-up (sepia touch) with no re-shoot
================================================================ */
.lc-mens-page .mj-flavor {
position: relative;
height: clamp(400px, 52vh, 620px);
overflow: hidden;
}
.lc-mens-page .mj-flavor--tall { height: clamp(520px, 72vh, 840px); }
.lc-mens-page .mj-flavor--short { height: clamp(260px, 34vh, 420px); }
.lc-mens-page .mj-flavor figure { position: absolute; inset: 0; margin: 0; }
.lc-mens-page .mj-flavor figure picture { display: block; width: 100%; height: 100%; }
.lc-mens-page .mj-flavor figure img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* the Galleon deck's treatment (Forged From Legend): the image runs
as shot under the flat palm-brown veil from mens-elements.css
(.mj-deck-veil). ON by default; .mj-flavor--plain removes it. */
.lc-mens-page .mj-flavor::after {
content: ''; position: absolute; inset: 0; z-index: 1;
background: rgba(74, 69, 65, 0.38);
pointer-events: none;
}
.lc-mens-page .mj-flavor--plain::after { display: none; }
.lc-mens-page .mj-flavor--warm figure img {
filter: sepia(0.14) saturate(1.06) brightness(1.01);
}
@media (max-width: 768px) {
.lc-mens-page .mj-flavor { height: clamp(300px, 42vh, 460px); }
.lc-mens-page .mj-flavor--tall { height: clamp(380px, 56vh, 560px); }
.lc-mens-page .mj-flavor--short { height: clamp(200px, 28vh, 320px); }
}
/* ── THE FLAVOR · caption (v6.7.1) — the quiet place-note ─────────
Optional. One italic line + a small label, lower-right corner,
like the Laguna Key place evocation. Omit the div entirely for a
pure image. Add .mj-flavor--cap-left to the section to move it
to the lower-left instead. */
.lc-mens-page .mj-flavor-caption {
position: absolute; z-index: 2;
right: clamp(24px, 4vw, 56px); bottom: clamp(22px, 4.5vh, 48px);
text-align: right;
pointer-events: none;
}
.lc-mens-page .mj-flavor--cap-left .mj-flavor-caption {
right: auto; left: clamp(24px, 4vw, 56px); text-align: left;
}
.lc-mens-page .mj-flavor-title {
font-family: var(--mj-accent); font-style: italic; font-weight: 400;
font-size: clamp(18px, 1.7vw, 25px); line-height: 1.3;
/* !important: the theme's .hentry .entry-content p outranks us */
color: #FBF8F2 !important; margin: 0 0 7px;
text-shadow: 0 1px 16px rgba(35, 40, 45, 0.4);
}
.lc-mens-page .mj-flavor-label {
font-family: var(--mj-body); font-weight: 500;
font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase;
color: rgba(251, 248, 242, 0.85) !important; margin: 0;
text-shadow: 0 1px 12px rgba(35, 40, 45, 0.4);
}
/* ── RAIL SAFETY NET (v6.8.0) — contentless Woo items (no product
link inside) never take a slot, even before mens.js runs.
Browsers without :has() skip this; the JS prune covers them. */
.lc-mens-page .mj-popular-scroller li.product:not(:has(a)) { display: none; }
/* ── RAIL HARD CAP (v6.8.2) — no product rail ever shows more than
12 items, even if a shortcode's limit attribute gets eaten by
the editor (smart-quote corruption renders the whole catalog). */
.lc-mens-page .mj-popular-scroller li.product:nth-child(n+13) { display: none !important; }
/* ── GHOST CARDS REMOVED AT STYLE TIME (v6.9.0) — a product card
with no image inside renders as a blank slot; hide it before
anything paints. Pure CSS, no timing, no JS involved. */
.lc-mens-page .mj-popular-scroller li.product:not(:has(img)) { display: none !important; }
/* ================================================================
THE SHELF (v7.0.0) — the reset. Both product areas rebuilt as a
plain editorial grid: the Woo shortcode renders straight into a
4-column grid (2 on mobile). NO scroller, NO arrows, NO ids,
NO scripts — nothing to time, heal, or fight over.
Ghost cards (products with no image) are hidden at style time;
a hard cap keeps any shelf at 12 items even if a shortcode's
attributes get eaten. Replaces the mj-popular slider sections.
================================================================ */
.lc-mens-page .mjx-shelf {
max-width: 1400px; /* matches the category row grid (v7.2.2) */
margin: 0 auto;
padding: clamp(72px, 9vw, 128px) 24px;
}
.lc-mens-page .mjx-shelf-head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
/* the grid — outranks the gifting sheet's generic ul.products rules
by specificity, so load order is irrelevant */
.lc-mens-page .mjx-shelf ul.products {
list-style: none !important; margin: 0 !important; padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: clamp(24px, 3vw, 44px) clamp(18px, 2.2vw, 32px);
width: 100% !important;
}
.lc-mens-page .mjx-shelf ul.products::before,
.lc-mens-page .mjx-shelf ul.products::after { display: none !important; }
.lc-mens-page .mjx-shelf ul.products li.product {
width: 100% !important; margin: 0 !important; padding: 0 !important;
float: none !important; text-align: center;
}
.lc-mens-page .mjx-shelf ul.products li.product img {
width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
background: var(--mj-sand);
margin: 0 0 16px !important;
}
.lc-mens-page .mjx-shelf ul.products li.product .woocommerce-loop-product__title,
.lc-mens-page .mjx-shelf ul.products li.product h2 {
font-family: var(--mj-body) !important; font-size: 14.5px !important;
font-weight: 500 !important; color: var(--mj-ink) !important;
text-transform: none; letter-spacing: 0.01em;
margin: 0 0 6px !important; padding: 0 !important; line-height: 1.45;
}
.lc-mens-page .mjx-shelf ul.products li.product .price {
font-family: var(--mj-body) !important; font-size: 13px !important;
letter-spacing: 0.02em; color: var(--mj-ink-soft) !important; display: block;
}
.lc-mens-page .mjx-shelf ul.products li.product .button,
.lc-mens-page .mjx-shelf ul.products li.product .add_to_cart_button,
.lc-mens-page .mjx-shelf ul.products li.product .onsale,
.lc-mens-page .mjx-shelf ul.products li.product .star-rating { display: none !important; }
/* protections — pure CSS, no timing */
.lc-mens-page .mjx-shelf li.product:not(:has(img)) { display: none !important; }
.lc-mens-page .mjx-shelf li.product:nth-child(n+13) { display: none !important; }
.lc-mens-page .mjx-shelf-cta { text-align: center; margin-top: clamp(44px, 5vw, 64px); }
@media (max-width: 900px) {
.lc-mens-page .mjx-shelf ul.products { grid-template-columns: repeat(2, 1fr); }
}
/* ================================================================
THE SHELF · SLIDER LAYER (v7.1.0) — add class mjx-shelf--slider
to a shelf section to turn its grid into a scrolling rail with
arrows + progress line. The working grid stays the fallback:
remove the modifier class and it's a grid again.
NO ids anywhere — each arrow finds its own rail via the section
it sits in, so two sliders can never cross wires. Ghost cards
are already gone at style time; nothing is measured or healed.
================================================================ */
.lc-mens-page .mjx-shelf--slider .mjx-rail { position: relative; }
.lc-mens-page .mjx-shelf--slider .mjx-track {
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.lc-mens-page .mjx-shelf--slider .mjx-track::-webkit-scrollbar { display: none; }
.lc-mens-page .mjx-shelf--slider ul.products {
display: flex !important;
flex-wrap: nowrap !important;
width: max-content !important;
gap: clamp(20px, 2.4vw, 40px);
}
.lc-mens-page .mjx-shelf--slider ul.products li.product {
/* longhand on purpose: Safari drops the whole `flex: 0 0 clamp(...)`
shorthand (clamp-in-shorthand parse bug) and cards blow up to
their raw 600px image width */
flex-grow: 0;
flex-shrink: 0;
/* card width tracks the category tiles: ~320px at the 1400px grid */
flex-basis: clamp(220px, 20vw, 320px);
max-width: clamp(220px, 20vw, 320px);
width: auto !important;
scroll-snap-align: start;
}
/* arrows — the quiet 36px chevrons, in the section's side gutters */
.lc-mens-page .mjx-shelf--slider { padding-left: clamp(48px, 5vw, 84px); padding-right: clamp(48px, 5vw, 84px); }
.lc-mens-page .mjx-arrow {
position: absolute; z-index: 2;
top: clamp(96px, 10vw, 132px); /* beside the product image */
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: none !important; border: 0 !important; padding: 0 !important;
font-family: var(--mj-body); font-size: 30px; line-height: 1;
color: var(--mj-ink); opacity: 0.5;
cursor: pointer; transition: opacity .3s ease;
}
.lc-mens-page .mjx-arrow:hover { opacity: 1; background: none !important; }
.lc-mens-page .mjx-prev { left: clamp(-64px, -4vw, -40px); }
.lc-mens-page .mjx-next { right: clamp(-64px, -4vw, -40px); }
/* progress line */
.lc-mens-page .mjx-progress {
position: relative; overflow: hidden;
width: min(200px, 40vw); height: 2px;
background: rgba(35, 40, 45, 0.12);
margin: clamp(28px, 3vw, 40px) auto 0;
}
.lc-mens-page .mjx-progress span {
position: absolute; left: 0; top: 0; height: 100%; width: 56px;
background: var(--mj-ink);
transition: transform .15s linear;
}
@media (max-width: 768px) {
/* phones swipe — arrows off, gutters back to normal */
.lc-mens-page .mjx-arrow { display: none; }
.lc-mens-page .mjx-shelf--slider { padding-left: 24px; padding-right: 24px; }
.lc-mens-page .mjx-shelf--slider ul.products li.product { flex-basis: clamp(180px, 42vw, 220px); }
}
/* ── SHELF FIT MODE (v7.1.1) — when everything left fits the rail,
the row centers and the arrows + progress hide (the JS adds
.mjx-fits after dropping broken-image cards). */
.lc-mens-page .mjx-shelf.mjx-fits .mjx-arrow,
.lc-mens-page .mjx-shelf.mjx-fits .mjx-progress { display: none; }
.lc-mens-page .mjx-shelf.mjx-fits ul.products { margin-left: auto !important; margin-right: auto !important; }
/* ── PROGRESS SCRUBBER (v7.2.0) — the line is clickable/draggable:
click jumps, drag scrubs. Generous invisible hit band so the
2px line is easy to grab. */
.lc-mens-page .mjx-progress {
cursor: grab; touch-action: none;
border-radius: 99px;
transition: height .18s ease;
}
/* grows into a grabbable bar on hover — and STAYS grown while
dragging (.mjx-scrubbing is added by the JS for the whole drag,
so it doesn't shrink when the cursor drifts off the line) */
.lc-mens-page .mjx-progress:hover,
.lc-mens-page .mjx-progress.mjx-scrubbing { height: 9px; }
.lc-mens-page .mjx-progress:active,
.lc-mens-page .mjx-progress.mjx-scrubbing { cursor: grabbing; }
.lc-mens-page .mjx-progress span { border-radius: 99px; }
.lc-mens-page .mjx-progress:hover span,
.lc-mens-page .mjx-progress.mjx-scrubbing span { background: var(--mj-palm); }
.lc-mens-page .mjx-progress::after {
content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px;
}
/* ── LINK TYPE UNIFIED (v7.2.3) — every text link on the page runs
in Oswald, matching the .mj-link standard (400 · 12px · 0.3em
caps). Buttons (.mj-btn) untouched. Overrides the two Lora
holdouts by cascade order: catrow tiles + pair frame links. */
.lc-mens-page .mj-catrow-link {
font-family: var(--mj-head);
font-weight: 400;
font-size: 12px;
letter-spacing: 0.3em;
}
.lc-mens-page .mj-pair-link,
.lc-mens-page .mj-pair-caption .mj-pair-link,
.lc-mens-page .mj-pair-text .mj-pair-link {
font-family: var(--mj-head);
font-weight: 400;
font-size: 12px;
letter-spacing: 0.3em;
}
/* ================================================================
THE FAQ (v7.3.0) — common questions, mens vocabulary. Same
accordion mechanic as the other Discover pages (inline onclick
toggles .lc-open; no engine involved). Answer opens with a soft
grid-rows ease. Pair with the FAQPage JSON-LD in the paste file.
================================================================ */
.lc-mens-page .mj-faq {
max-width: 760px;
margin: 0 auto;
padding: clamp(72px, 9vw, 128px) 24px;
}
.lc-mens-page .mj-faq-head { text-align: center; margin-bottom: clamp(36px, 4.5vw, 56px); }
.lc-mens-page .mj-faq-list { border-top: 1px solid rgba(35, 40, 45, 0.14); }
.lc-mens-page .mj-faq-item { border-bottom: 1px solid rgba(35, 40, 45, 0.14); }
.lc-mens-page .mj-faq-q {
width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
background: none !important; border: 0 !important; padding: 22px 2px !important;
cursor: pointer; text-align: left;
font-family: var(--mj-body); font-weight: 500;
font-size: 16.5px; line-height: 1.45; color: var(--mj-ink);
letter-spacing: 0.01em; text-transform: none;
}
.lc-mens-page .mj-faq-q:hover { color: var(--mj-palm); background: none !important; }
.lc-mens-page .mj-faq-mark {
flex: 0 0 auto; width: 22px; height: 22px; position: relative;
}
.lc-mens-page .mj-faq-mark::before,
.lc-mens-page .mj-faq-mark::after {
content: ''; position: absolute; background: var(--mj-ink-soft);
transition: transform 0.35s var(--mj-ease);
}
.lc-mens-page .mj-faq-mark::before { left: 3px; right: 3px; top: 10px; height: 1px; }
.lc-mens-page .mj-faq-mark::after { top: 3px; bottom: 3px; left: 10px; width: 1px; }
.lc-mens-page .mj-faq-item.lc-open .mj-faq-mark::after { transform: scaleY(0); }
.lc-mens-page .mj-faq-a {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows 0.4s var(--mj-ease);
}
.lc-mens-page .mj-faq-item.lc-open .mj-faq-a { grid-template-rows: 1fr; }
.lc-mens-page .mj-faq-a-inner {
overflow: hidden;
font-size: 15.5px; line-height: 1.85; color: var(--mj-ink-soft);
}
.lc-mens-page .mj-faq-item.lc-open .mj-faq-a-inner { padding-bottom: 26px; }
.lc-mens-page .mj-faq-a-inner a { color: var(--mj-ink); text-decoration: underline; text-underline-offset: 3px; }