/* ============================================================
Rejuvena PREMIUM home — "Editorial-monochrome with sparing gold"
Augustinus Bader × Tatcha DNA — cream main, ink moments, ≤10% navy+gold.
Loaded AFTER home.css; overrides the dark cinematic palette without
touching markup. Scoped to .rj-home for the body content + .rj-home-steel
on for the chrome (header / footer / form) overrides.
Palette density target (the hard constraint):
cream (#F5F4F1) ~60% main bg, most sections
paper (#FAFAF7) ~5% alt-rhythm sections (trust, partners)
ink (#0F0F0F) ~25% hero, Dr Nick section, CTA, footer
graphite (#1A1A1A) ~5% body type
gold (#C8A96B) ~4% hairlines, kickers, primary CTA, italic accents
navy (#062033) <1% one type-shadow + one gradient endpoint only
============================================================ */
.rj-home{
--navy:#062033;
--navy2:#0F0F0F; /* repurposed: was deep navy — now ink */
--gold:#C8A96B;
--gold-soft:#d8c193;
--gold-deep:#9a8048;
--cream:#F5F4F1; /* still cream */
--paper:#FAFAF7;
--ink:#0F0F0F;
--ink-2:#1A1A1A;
--ink-3:#6E6E73;
--rule:rgba(15,15,15,.08);
--rule-strong:rgba(15,15,15,.14);
--shadow-soft:0 1px 2px rgba(15,15,15,.04), 0 14px 32px rgba(15,15,15,.06);
--shadow-card:0 1px 2px rgba(15,15,15,.04), 0 20px 50px rgba(15,15,15,.08);
--r-sm:6px; --r-md:12px; --r-lg:20px;
/* the page itself */
background:var(--cream) !important;
color:var(--ink-2) !important;
font-family:'Inter',system-ui,-apple-system,sans-serif;
font-weight:300;
line-height:1.7;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* universal overflow guard */
.rj-home, .rj-home *{ box-sizing:border-box; min-width:0 }
/* layout ----------------------------------------------------- */
.rj-home .rj-wrap{ max-width:1280px; margin:0 auto; padding:0 48px }
@media(max-width:760px){ .rj-home .rj-wrap{ padding:0 22px } }
/* typography ------------------------------------------------- */
.rj-home h1,
.rj-home h2,
.rj-home h3{
font-family:'Cormorant Garamond',Georgia,serif !important;
font-weight:400 !important;
line-height:1.04 !important;
letter-spacing:-.008em !important;
color:var(--ink) !important;
}
.rj-home h1 em, .rj-home h2 em, .rj-home h3 em{
font-style:italic; font-weight:400; color:var(--gold) !important;
}
.rj-home p{ color:var(--ink-2); margin:0 0 18px }
.rj-home a{ color:inherit }
/* kickers + rules - kept Inter for the .36em tracking to hold */
.rj-home .rj-kicker{
font-family:'Inter',sans-serif !important;
font-weight:600 !important;
font-size:.7rem !important;
letter-spacing:.36em !important;
text-transform:uppercase !important;
color:var(--ink) !important;
display:inline-flex !important;
align-items:center !important;
gap:14px !important;
}
.rj-home .rj-kicker::before{
content:""; display:inline-block; width:44px; height:1px;
background:var(--gold);
}
.rj-home .rj-rule{
width:54px; height:1px; background:var(--gold) !important;
margin-bottom:22px; opacity:1 !important;
}
/* buttons --------------------------------------------------- */
.rj-home .rj-btn{
display:inline-flex !important; align-items:center !important; gap:.5em !important;
padding:16px 32px !important;
border-radius:980px !important; /* premium pill */
font-family:'Inter',sans-serif !important;
font-size:.74rem !important; font-weight:600 !important;
letter-spacing:.18em !important; text-transform:uppercase !important;
text-decoration:none !important;
border:1px solid var(--ink) !important;
background:transparent !important;
color:var(--ink) !important;
transition:background .35s ease, color .35s ease, border-color .35s ease !important;
overflow:visible !important;
}
.rj-home .rj-btn::after{ display:none !important } /* kill the gold-sweep */
.rj-home .rj-btn:hover{
background:var(--ink) !important; color:var(--cream) !important; border-color:var(--ink) !important;
}
.rj-home .rj-btn--solid{
background:var(--gold) !important; color:var(--ink) !important; border-color:var(--gold) !important;
}
.rj-home .rj-btn--solid:hover{
background:var(--ink) !important; color:var(--gold) !important; border-color:var(--ink) !important;
}
.rj-home .rj-link{
color:var(--ink) !important;
border-bottom:1px solid var(--gold) !important;
padding-bottom:4px !important;
font-size:.78rem !important; font-weight:500 !important;
letter-spacing:.04em !important; text-transform:none !important;
}
.rj-home .rj-link:hover{ color:var(--gold) !important; border-color:var(--gold) !important }
/* reveals --------------------------------------------------- */
/* Reveal animations are handled by home.js via a GSAP timeline + ScrollTrigger.
* We deliberately do NOT redeclare opacity:0 on [data-rj] here — home.js sets the
* initial state with gsap.fromTo() and gracefully falls back to visible if GSAP
* doesn't load (its revealStatic() path).
*
* Safety net: if anything inadvertently picks up [data-pr-split] from a previous
* build, force its chars to stay visible. */
.rj-home [data-pr-split] .char{ opacity:1 !important; transform:none !important; display:inline !important }
/* ============================================================
01 - HERO (the one ink moment - cream of the page reads against it)
============================================================ */
.rj-home .rj-hero{
background:var(--ink) !important;
color:var(--cream) !important;
min-height:100vh; min-height:100dvh;
}
.rj-home .rj-hero__bg::after{
background:
linear-gradient(180deg, rgba(15,15,15,.55), rgba(15,15,15,.32) 38%, rgba(15,15,15,.88) 96%),
radial-gradient(circle at 76% 38%, rgba(6,32,51,.30), transparent 60%) !important; /* THIS is the only navy in the layout */
}
.rj-home .rj-hero__bg img{
filter:contrast(1.04) saturate(.94) brightness(.66) !important;
}
.rj-home .rj-hero h1{
color:var(--cream) !important;
font-size:clamp(2.6rem,6vw,5.4rem) !important;
max-width:18ch; text-shadow:0 2px 36px rgba(0,0,0,.45);
}
.rj-home .rj-hero h1 em{ color:var(--gold) !important; font-style:italic }
.rj-home .rj-hero__sub{
color:rgba(245,244,241,.84) !important;
font-size:clamp(1rem,1.3vw,1.16rem) !important;
max-width:54ch !important;
}
.rj-home .rj-hero .rj-kicker{ color:var(--gold) !important }
.rj-home .rj-hero .rj-kicker::before{ background:var(--gold) }
.rj-home .rj-hero .rj-btn{ border-color:rgba(245,244,241,.7) !important; color:#fff !important }
.rj-home .rj-hero .rj-btn:hover{ background:#fff !important; color:var(--ink) !important; border-color:#fff !important }
.rj-home .rj-hero .rj-btn--solid{ background:var(--gold) !important; color:var(--ink) !important; border-color:var(--gold) !important }
.rj-home .rj-hero .rj-btn--solid:hover{ background:#fff !important; color:var(--ink) !important; border-color:#fff !important }
.rj-home .rj-hero .rj-link{ color:rgba(245,244,241,.9) !important; border-bottom-color:rgba(200,169,107,.6) !important }
.rj-home .rj-hero .rj-link:hover{ color:var(--gold) !important; border-bottom-color:var(--gold) !important }
.rj-home .rj-scroll{ color:rgba(245,244,241,.55) !important }
.rj-home .rj-scroll i{ background:linear-gradient(rgba(245,244,241,.8),transparent) !important }
/* --- mobile/fold header clearance --------------------------------------------
On short real-device viewports (Samsung Note 10+, folds, any phone where the
browser URL bar shrinks the visible height) the full-height hero CENTRED its
content, so the top of the heading tucked under the fixed .rj-phd header.
Top-align the hero content below the LIVE header height (--rjc-hdr-h, kept
current by rj-chrome.js incl. when the offers bar wraps) with breathing room.
Desktop keeps the centred full-screen treatment. --------------------------- */
@media(max-width:1024px){
body.rj-home-steel .rj-home .rj-hero{
align-items:flex-start !important;
padding-top:calc(var(--rjc-hdr-h,104px) + 28px) !important;
padding-bottom:clamp(40px,8vh,72px) !important;
}
}
/* ============================================================
02 - TRUST STRIP (paper, hairline, no boxes)
============================================================ */
/* TRUST MARQUEE — auto-scrolling premium ticker (paper band, gold-diamond separators).
Two identical .rj-trust__set in the track; the animation slides the track -50%
(= exactly one set) so the loop is seamless. Pauses on hover; stops + wraps for
prefers-reduced-motion. */
.rj-home .rj-trust{
background:var(--paper) !important;
border-top:1px solid var(--rule) !important;
border-bottom:1px solid var(--rule) !important;
overflow:hidden !important;
padding:0 !important;
}
.rj-home .rj-trust__track{
display:flex; width:max-content;
animation:rj-trust-marquee 52s linear infinite;
will-change:transform;
}
.rj-home .rj-trust:hover .rj-trust__track{ animation-play-state:paused }
.rj-home .rj-trust__set{ display:flex; align-items:center; flex:0 0 auto }
.rj-home .rj-trust__i{
display:inline-flex !important; flex-direction:row !important; align-items:center !important;
gap:9px !important; padding:24px 0 !important; white-space:nowrap !important;
font-size:.7rem !important; font-weight:500 !important;
letter-spacing:.2em !important; text-transform:uppercase !important;
color:var(--ink-3) !important;
}
.rj-home .rj-trust__i::after{ /* gold diamond divider after every item */
content:"\2726"; color:var(--gold); opacity:.5;
margin:0 40px; font-size:.66rem; letter-spacing:0;
}
.rj-home .rj-trust__i b{
font-family:'Cormorant Garamond',Georgia,serif !important;
font-style:italic !important; font-weight:500 !important;
font-size:1.35rem !important; color:var(--ink) !important; letter-spacing:.01em !important;
}
.rj-home .rj-trust__i .stars{
color:var(--gold) !important; letter-spacing:2px !important;
font-size:.82rem !important; font-family:'Inter',sans-serif !important;
}
@keyframes rj-trust-marquee{
from{ transform:translateX(0) }
to{ transform:translateX(-50%) }
}
@media(prefers-reduced-motion:reduce){
.rj-home .rj-trust__track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center }
.rj-home .rj-trust__set[aria-hidden="true"]{ display:none }
.rj-home .rj-trust__set{ flex-wrap:wrap; justify-content:center }
.rj-home .rj-trust__i{ padding:18px 0 !important }
.rj-home .rj-trust__i:last-child::after{ display:none }
}
/* ============================================================
03 - INTRO / WHY split (cream, large editorial portrait)
============================================================ */
.rj-home .rj-sec{ padding:clamp(96px,12vh,150px) 0 !important }
.rj-home .rj-sec--cream{
background:var(--cream) !important; color:var(--ink-2) !important;
}
.rj-home .rj-sec--cream h1, .rj-home .rj-sec--cream h2, .rj-home .rj-sec--cream h3{ color:var(--ink) !important }
.rj-home .rj-sec--cream h2{ font-size:clamp(2.1rem,4.6vw,3.6rem) !important; margin-top:14px !important }
.rj-home .rj-sec--cream .rj-split p{ color:var(--ink-2) !important }
.rj-home .rj-split{ gap:90px !important }
@media(max-width:880px){ .rj-home .rj-split{ gap:48px !important } }
.rj-home .rj-why{ margin-top:32px !important }
.rj-home .rj-why li{
border-top-color:var(--rule) !important;
padding:18px 0 18px 32px !important;
font-size:.96rem !important; color:var(--ink-2) !important;
}
.rj-home .rj-why li::before{
background:var(--gold) !important; width:8px !important; height:8px !important;
top:26px !important;
}
.rj-home .rj-why li b{ color:var(--ink) !important; font-weight:600 !important }
.rj-home .rj-figure{ border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-soft) }
.rj-home .rj-figure img{ filter:contrast(1.02) saturate(.96) !important }
.rj-home .rj-figure::after{ background:linear-gradient(160deg, transparent, rgba(15,15,15,.16)) !important }
/* ============================================================
04 - TREATMENTS (Aesthetics + Dermatology)
============================================================ */
.rj-home .rj-cat__head{
border-bottom:1px solid var(--rule-strong) !important;
padding-bottom:24px !important; margin-bottom:36px !important;
}
.rj-home .rj-cat__head h3{
color:var(--ink) !important;
font-size:clamp(1.7rem,3vw,2.4rem) !important;
margin:12px 0 10px !important;
}
.rj-home .rj-cat__head p{ color:var(--ink-3) !important; max-width:54ch !important }
.rj-home .rj-grid{ gap:24px !important }
.rj-home .rj-grid--4{ gap:24px !important }
@media(max-width:880px){ .rj-home .rj-grid, .rj-home .rj-grid--4{ gap:16px !important } }
.rj-home .rj-card{
border-radius:var(--r-md) !important;
box-shadow:var(--shadow-soft) !important;
background:#fff !important;
transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1) !important;
}
.rj-home .rj-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card) }
.rj-home .rj-card img{ filter:contrast(1.02) saturate(.96) brightness(.84) !important }
.rj-home .rj-card:hover img{ filter:contrast(1.02) saturate(1) brightness(.92) !important }
.rj-home .rj-card::after{
background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.78) 96%) !important;
}
.rj-home .rj-card__b h3{ color:#fff !important; font-size:1.45rem !important; font-weight:500 !important }
.rj-home .rj-card__b span{ color:var(--gold) !important }
.rj-home .rj-more{ margin-top:64px !important }
/* ============================================================
05 - MEET DR NICK (full-bleed deep ink — second ink moment)
============================================================ */
.rj-home .rj-doc{
background:var(--ink) !important;
color:var(--cream) !important;
position:relative;
}
.rj-home .rj-doc::before{
content:""; position:absolute; left:0; right:0; top:0; height:1px;
background:linear-gradient(90deg, transparent, rgba(200,169,107,.6), transparent);
}
.rj-home .rj-doc::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
background:linear-gradient(90deg, transparent, rgba(200,169,107,.5), transparent);
}
.rj-home .rj-doc .rj-split{ gap:80px !important }
.rj-home .rj-doc h2{
color:var(--cream) !important;
font-size:clamp(2.2rem,5vw,3.8rem) !important;
}
.rj-home .rj-doc h2 em{ color:var(--gold) !important; font-style:italic }
.rj-home .rj-doc p{ color:rgba(245,244,241,.78) !important; max-width:54ch !important }
.rj-home .rj-doc .sub{
font-family:'Inter',sans-serif !important;
color:var(--gold) !important;
font-size:.78rem !important; font-weight:500 !important;
letter-spacing:.2em !important; text-transform:uppercase !important;
margin-bottom:24px !important;
}
.rj-home .rj-doc .rj-kicker{ color:var(--gold) !important }
.rj-home .rj-doc .rj-kicker::before{ background:var(--gold) }
.rj-home .rj-doc__img{
border-radius:var(--r-md);
overflow:hidden;
box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.rj-home .rj-doc__img img{ filter:contrast(1.06) saturate(.94) brightness(.96) !important }
.rj-home .rj-doc__img .rj-tag{
background:rgba(15,15,15,.78) !important;
backdrop-filter:blur(10px);
border:1px solid rgba(200,169,107,.4) !important;
border-radius:2px;
}
.rj-home .rj-doc__img .rj-tag .n{
font-family:'Cormorant Garamond',Georgia,serif !important;
font-style:italic;
color:var(--cream) !important; font-size:1.25rem !important;
}
.rj-home .rj-doc__img .rj-tag .t{
font-family:'Inter',sans-serif !important;
color:var(--gold) !important;
font-size:.62rem !important; letter-spacing:.22em !important;
}
.rj-home .rj-doc .rj-btn{ border-color:rgba(245,244,241,.6) !important; color:#fff !important }
.rj-home .rj-doc .rj-btn:hover{ background:var(--cream) !important; color:var(--ink) !important; border-color:var(--cream) !important }
/* ============================================================
06 - TREATMENT JOURNEY (cream, sticky left, editorial right)
============================================================ */
.rj-home .rj-journey{ background:var(--cream) !important; color:var(--ink-2) !important }
.rj-home .rj-journey__sticky h2{
color:var(--ink) !important;
font-size:clamp(2rem,3.8vw,3.2rem) !important;
}
.rj-home .rj-journey__sticky h2 em{ color:var(--gold) !important }
.rj-home .rj-journey__sticky p{ color:var(--ink-3) !important }
.rj-home .rj-step{
border-top:1px solid var(--rule) !important;
padding:42px 0 !important;
}
.rj-home .rj-step:last-child{ border-bottom:1px solid var(--rule) !important }
.rj-home .rj-step .num{
font-family:'Cormorant Garamond',Georgia,serif !important;
font-style:italic; font-size:1.05rem !important;
color:var(--gold) !important; letter-spacing:.06em !important;
}
.rj-home .rj-step h3{
color:var(--ink) !important;
font-size:1.7rem !important;
font-weight:500 !important;
margin:6px 0 8px !important;
}
.rj-home .rj-step p{ color:var(--ink-3) !important; max-width:48ch !important }
/* ============================================================
07 - PARTNERS (paper alt-rhythm)
============================================================ */
.rj-home .rj-partners{
background:var(--paper) !important;
color:var(--ink-2) !important;
padding:80px 0 !important;
}
.rj-home .rj-partners .rj-kicker{ color:var(--ink) !important }
.rj-home .rj-partners .rj-kicker::before{ background:var(--gold) }
.rj-home .rj-partners__row{ gap:48px !important; margin-top:40px !important }
.rj-home .rj-partners__row img{
filter:grayscale(1) contrast(.9) !important;
opacity:.55 !important;
transition:.4s ease !important;
}
.rj-home .rj-partners__row img:hover{ filter:grayscale(0) !important; opacity:1 !important }
/* ============================================================
08 - REVIEWS (cream, oversized gold serif numeral, white cards)
============================================================ */
.rj-home .rj-reviews{
background:var(--cream) !important; color:var(--ink-2) !important;
text-align:center;
}
.rj-home .rj-reviews h2{ color:var(--ink) !important }
.rj-home .rj-reviews__score{
font-family:'Cormorant Garamond',Georgia,serif !important;
font-size:clamp(4rem,9vw,7rem) !important;
font-weight:300 !important;
color:var(--gold) !important;
line-height:1 !important;
}
.rj-home .rj-reviews__stars{
color:var(--gold) !important;
letter-spacing:4px !important;
font-size:1.2rem !important;
margin:6px 0 8px !important;
}
.rj-home .rj-reviews__cards{ gap:24px !important; margin-top:54px !important }
.rj-home .rj-reviews__cards .rj-quote, .rj-home .rj-quote{
background:#fff !important;
border:1px solid var(--rule) !important;
border-radius:var(--r-md) !important;
padding:30px 28px !important;
box-shadow:var(--shadow-soft) !important;
position:relative;
}
.rj-home .rj-quote::before{
content:"\201C"; position:absolute; top:6px; left:18px;
font-family:'Cormorant Garamond',Georgia,serif;
font-size:5rem; line-height:1; color:var(--gold); opacity:.45;
}
.rj-home .rj-quote p{
color:var(--ink-2) !important;
font-size:1rem !important;
margin:24px 0 18px !important;
text-align:left;
}
.rj-home .rj-quote .who{
font-family:'Cormorant Garamond',Georgia,serif !important;
font-size:1.2rem !important;
color:var(--ink) !important; font-style:italic;
}
.rj-home .rj-quote .g{
color:var(--gold) !important; font-size:.66rem !important; letter-spacing:.18em !important;
}
/* ============================================================
09 - CALL-BACK FORM
============================================================ */
.rj-home .rj-cbform-wrap{
max-width:780px !important; margin:0 auto !important;
background:#fff !important;
border:1px solid var(--rule) !important;
border-radius:var(--r-lg) !important;
padding:22px !important;
box-shadow:var(--shadow-card) !important;
}
/* keep the chrome's duplicate footer band hidden — inherits from home.css */
/* ============================================================
10 - CTA BAND (third ink moment)
============================================================ */
.rj-home .rj-cta{
background:var(--ink) !important;
color:var(--cream) !important;
padding:clamp(120px,16vh,180px) 0 !important;
position:relative; overflow:hidden;
}
.rj-home .rj-cta::before{
background:
radial-gradient(circle at 50% 45%, rgba(200,169,107,.20), transparent 55%),
radial-gradient(circle at 30% 85%, rgba(6,32,51,.45), transparent 55%) !important; /* the single gradient navy endpoint */
}
.rj-home .rj-cta h2{
color:var(--cream) !important;
font-size:clamp(2.4rem,5.6vw,4.4rem) !important;
}
.rj-home .rj-cta h2 em{ color:var(--gold) !important; font-style:italic }
.rj-home .rj-cta p{ color:rgba(245,244,241,.78) !important; max-width:50ch !important }
.rj-home .rj-cta .rj-kicker{ color:var(--gold) !important }
.rj-home .rj-cta .rj-kicker::before{ background:var(--gold) }
.rj-home .rj-cta .rj-btn{ border-color:rgba(245,244,241,.6) !important; color:#fff !important }
.rj-home .rj-cta .rj-btn:hover{ background:#fff !important; color:var(--ink) !important; border-color:#fff !important }
.rj-home .rj-cta .rj-btn--solid{ background:var(--gold) !important; color:var(--ink) !important; border-color:var(--gold) !important }
.rj-home .rj-cta .rj-btn--solid:hover{ background:#fff !important; color:var(--ink) !important; border-color:#fff !important }
/* ============================================================
PREMIUM HEADER — BESPOKE (`.rj-phd`, defined in home-body.html)
The chrome header (`#masthead` / `.rjc-hdr`) carries a hard-coded NAVY
(#062033) on its inner `.rjc-hdr__bar` from the cross-origin chrome CSS we
cannot edit — it bled through every container-level ink override (and drove
the navy mobile menu too). So we HIDE the chrome header on the front page
and render a header we 100% control. Built straight from the footer .rj-pft
DNA: ink ground, gold hairline on the lower edge, Cormorant wordmark +
Cormorant-italic gold column headings, cream Inter links w/ gold hover,
gold CTA pill. No navy anywhere, desktop or mobile.
============================================================ */
/* hide the old chrome header + its utility/sticky bars on the front page */
body.rj-home-steel #masthead,
body.rj-home-steel header.rjc-hdr,
body.rj-home-steel .elementor-location-header,
body.rj-home-steel .rjc-offers,
body.rj-home-steel .rjc-offer-bar,
body.rj-home-steel .rjc-stickybar{ display:none !important }
/* ---- shell ---------------------------------------------------------- */
.rj-home .rj-phd{
position:fixed; top:0; left:0; right:0; z-index:200;
background:var(--ink);
font-family:'Inter',sans-serif;
transition:box-shadow .5s ease;
}
.rj-home .rj-phd::after{ /* gold hairline, lower edge (footer carries it on top → bookend) */
content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
background:linear-gradient(90deg, transparent, rgba(200,169,107,.5), transparent);
}
body.rj-home-steel.is-scrolled .rj-phd{ box-shadow:0 12px 40px rgba(15,15,15,.30) }
/* announcement strip */
.rj-home .rj-phd__ann{
text-align:center; padding:7px 16px;
border-bottom:1px solid rgba(200,169,107,.16);
}
.rj-home .rj-phd__ann a{
color:var(--gold); text-decoration:none;
font-size:.64rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
}
/* bar */
.rj-home .rj-phd__bar{
position:relative;
display:flex; align-items:center; gap:26px;
max-width:1400px; margin:0 auto; padding:0 48px; height:66px;
}
@media(max-width:1280px){ .rj-home .rj-phd__bar{ padding:0 24px; gap:16px } }
/* brand wordmark — the footer's .rj-pft__mark, scaled to the bar */
.rj-home .rj-phd__brand{
font-family:'Cormorant Garamond',Georgia,serif;
font-style:italic; font-weight:500;
font-size:1.7rem; line-height:1; letter-spacing:-.01em;
color:var(--cream); text-decoration:none; white-space:nowrap;
transition:color .25s ease;
}
.rj-home .rj-phd__brand:hover{ color:var(--gold) }
/* real logo (black-on-transparent PNG) inverted to read on the ink ground */
.rj-home .rj-phd__brand{ display:inline-flex; align-items:center }
.rj-home .rj-phd__brand img{
display:block; height:38px; width:auto;
filter:brightness(0) invert(1); opacity:.95; transition:opacity .25s ease;
}
.rj-home .rj-phd__brand:hover img{ opacity:1 }
@media(max-width:1024px){ .rj-home .rj-phd__brand img{ height:30px } }
/* nav + menu */
.rj-home .rj-phd__nav{ margin-left:auto; display:flex; align-items:center }
.rj-home .rj-phd__menu{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0 }
.rj-home .rj-phd__menu > li{ position:static; margin:0 }
.rj-home .rj-phd__menu > li::before{ display:none }
.rj-home .rj-phd__menu a,
.rj-home .rj-phd__top{
display:inline-flex; align-items:center; gap:7px;
font-family:'Inter',sans-serif; font-size:.8rem; font-weight:400; letter-spacing:.05em;
color:rgba(245,244,241,.88); text-decoration:none;
padding:10px 12px; margin:0; background:none; border:0; cursor:pointer;
transition:color .25s ease;
}
.rj-home .rj-phd__menu > li > a:hover,
.rj-home .rj-phd__top:hover,
.rj-home .rj-phd__has:hover .rj-phd__top,
.rj-home .rj-phd__has.is-open .rj-phd__top{ color:var(--gold) }
.rj-home .rj-phd__car{
width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translateY(-1px); transition:transform .3s ease;
}
.rj-home .rj-phd__has:hover .rj-phd__car,
.rj-home .rj-phd__has.is-open .rj-phd__car{ transform:rotate(-135deg) translateY(2px) }
/* mega dropdown — wide ink panel, footer column DNA */
.rj-home .rj-mega{
position:absolute; left:0; right:0; top:100%;
background:var(--ink);
border-top:1px solid rgba(200,169,107,.22);
box-shadow:0 28px 60px rgba(0,0,0,.5);
opacity:0; visibility:hidden; transform:translateY(8px);
transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.rj-home .rj-phd__has:hover > .rj-mega,
.rj-home .rj-phd__has:focus-within > .rj-mega,
.rj-home .rj-phd__has.is-open > .rj-mega{ opacity:1; visibility:visible; transform:none }
.rj-home .rj-mega__grid{
display:grid; grid-template-columns:repeat(5,1fr); gap:34px;
max-width:1400px; margin:0 auto; padding:38px 48px;
}
.rj-home .rj-mega--sm .rj-mega__grid{ grid-template-columns:repeat(3,minmax(0,260px)); max-width:1400px }
.rj-home .rj-mega__col h4{
font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:400;
font-size:1.3rem; color:var(--gold); margin:0 0 18px; padding-bottom:12px;
border-bottom:1px solid rgba(200,169,107,.22); letter-spacing:-.004em;
}
.rj-home .rj-mega__col h4 a{ color:var(--gold); text-decoration:none }
.rj-home .rj-mega__col h4 a:hover{ color:var(--gold-soft) }
.rj-home .rj-mega__col ul{ list-style:none; margin:0; padding:0 }
.rj-home .rj-mega__col li{ margin:0 0 11px; padding:0 }
.rj-home .rj-mega__col li::before{ display:none }
.rj-home .rj-mega__col ul a{
display:inline; padding:0; color:rgba(245,244,241,.82); text-decoration:none;
font-size:.86rem; font-weight:300; letter-spacing:.01em; transition:color .2s ease;
}
.rj-home .rj-mega__col ul a:hover{ color:var(--gold) }
.rj-home .rj-mega__all{
display:inline-block; margin-top:16px; padding:0; color:var(--gold);
font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
/* phone (bar) — Cormorant italic, like the footer phone */
.rj-home .rj-phd__tel{
font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:500;
font-size:1.18rem; letter-spacing:.01em; color:var(--cream); text-decoration:none; white-space:nowrap;
transition:color .25s ease;
}
.rj-home .rj-phd__tel:hover{ color:var(--gold) }
/* CTA pill — gold, ink text (same as the footer/form submit) */
.rj-home .rj-phd__cta{
background:var(--gold); color:var(--ink); border:1px solid var(--gold); border-radius:980px;
padding:11px 24px; white-space:nowrap;
font-family:'Inter',sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
text-decoration:none; transition:background .35s ease, color .35s ease;
}
.rj-home .rj-phd__cta:hover{ background:transparent; color:var(--gold) }
/* KILL the theme's navy button :focus/:active background (rgb(14,49,71)) inside the
header — it was the last navy hiding on the focused accordion/dropdown toggles.
Everything stays transparent in every state EXCEPT the gold CTA pill. */
.rj-home .rj-phd a:not(.rj-phd__cta),
.rj-home .rj-phd a:not(.rj-phd__cta):hover,
.rj-home .rj-phd a:not(.rj-phd__cta):focus,
.rj-home .rj-phd a:not(.rj-phd__cta):active,
.rj-home .rj-phd button,
.rj-home .rj-phd button:hover,
.rj-home .rj-phd button:focus,
.rj-home .rj-phd button:active{ background-color:transparent !important; box-shadow:none !important }
/* visible, on-brand keyboard focus ring */
.rj-home .rj-phd a:focus-visible,
.rj-home .rj-phd button:focus-visible{ outline:1px solid rgba(200,169,107,.65); outline-offset:3px }
/* drawer-only bits hidden on desktop */
.rj-home .rj-phd__navfoot{ display:none }
.rj-home .rj-phd__burger{ display:none }
/* the fixed header overlays the hero (hero stays full-bleed behind it) */
body.rj-home-steel .rj-home .rj-hero{ margin-top:0 }
/* ---- mobile / tablet ------------------------------------------------ */
@media(max-width:1024px){
.rj-home .rj-phd__bar{ height:58px }
.rj-home .rj-phd__burger{
display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
margin-left:auto; width:34px; height:34px; padding:6px; background:none; border:0; cursor:pointer;
}
.rj-home .rj-phd__burger span{ display:block; height:1.5px; width:100%; background:var(--cream); transition:transform .3s ease, opacity .3s ease }
.rj-home .rj-phd.is-open .rj-phd__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.rj-home .rj-phd.is-open .rj-phd__burger span:nth-child(2){ opacity:0 }
.rj-home .rj-phd.is-open .rj-phd__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }
.rj-home .rj-phd__bar > .rj-phd__tel,
.rj-home .rj-phd__bar > .rj-phd__cta{ display:none }
.rj-home .rj-phd__nav{
position:fixed; top:0; right:0; margin:0;
width:min(400px,88vw); height:100vh; height:100dvh;
background:var(--ink); border-left:1px solid rgba(200,169,107,.22);
flex-direction:column; align-items:stretch;
padding:84px 30px 40px; overflow-y:auto;
transform:translateX(100%); transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.rj-home .rj-phd.is-open .rj-phd__nav{ transform:none }
.rj-home .rj-phd__menu{ flex-direction:column; align-items:stretch; gap:0; width:100% }
.rj-home .rj-phd__menu > li{ border-bottom:1px solid rgba(245,244,241,.08) }
.rj-home .rj-phd__menu > li > a,
.rj-home .rj-phd__top{ width:100%; justify-content:space-between; padding:15px 2px; font-size:.95rem; color:var(--cream) }
.rj-home .rj-mega{
position:static; opacity:1; visibility:visible; transform:none;
background:none; border:0; box-shadow:none;
max-height:0; overflow:hidden; transition:max-height .4s ease;
}
.rj-home .rj-phd__has.is-open > .rj-mega{ max-height:6000px }
.rj-home .rj-mega__grid,
.rj-home .rj-mega--sm .rj-mega__grid{ grid-template-columns:1fr; gap:4px; max-width:none; margin:0; padding:4px 0 8px }
.rj-home .rj-mega__col{ display:flex; flex-direction:column }
/* second-level category accordion: each category collapses to its heading */
.rj-home .rj-mega__col h4{ font-size:1.02rem; margin:0; padding:14px 2px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; cursor:pointer; border-bottom:1px solid rgba(245,244,241,.08) }
.rj-home .rj-mega__col h4::after{ content:""; flex:0 0 auto; width:8px; height:8px; margin:5px 2px 0 0; border-right:1.7px solid var(--gold); border-bottom:1.7px solid var(--gold); transform:rotate(45deg); transition:transform .3s ease; opacity:.8 }
.rj-home .rj-mega__col h4.rj-cat-open::after{ transform:rotate(-135deg) }
.rj-home .rj-mega__col > ul{ max-height:0; overflow:hidden; transition:max-height .4s ease; margin:0; padding:0 }
.rj-home .rj-mega__col h4.rj-cat-open + ul{ max-height:1600px; padding:6px 0 14px }
.rj-home .rj-mega__col li{ margin:0 0 11px }
.rj-home .rj-mega__col ul a{ font-size:.92rem }
.rj-home .rj-mega__all{ margin-top:10px }
.rj-home .rj-phd__navfoot{
display:flex; flex-direction:column; gap:18px; align-items:flex-start;
margin-top:26px; padding-top:24px; border-top:1px solid rgba(200,169,107,.2);
}
.rj-home .rj-phd__tel--drawer{ display:inline-block; font-size:1.45rem }
.rj-home .rj-phd__cta--drawer{ display:inline-block }
.rj-home .rj-phd::before{ /* scrim behind the drawer */
content:""; position:fixed; inset:0; background:rgba(15,15,15,.55);
opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s; z-index:-1;
}
.rj-home .rj-phd.is-open::before{ opacity:1; visibility:visible }
}
/* ============================================================
CHROME — FOOTER (deep ink, cream type, gold hairline)
============================================================ */
body.rj-home-steel footer#colophon,
body.rj-home-steel .elementor-location-footer,
body.rj-home-steel footer.rjc-ftr{
background:#0F0F0F !important;
color:#F5F4F1 !important;
font-family:'Inter',sans-serif;
position:relative;
padding-top:64px; padding-bottom:48px;
}
body.rj-home-steel footer#colophon::before,
body.rj-home-steel footer.rjc-ftr::before{
content:""; position:absolute; left:0; right:0; top:0; height:1px;
background:linear-gradient(90deg, transparent, rgba(200,169,107,.55), transparent);
}
body.rj-home-steel footer#colophon *,
body.rj-home-steel .elementor-location-footer *,
body.rj-home-steel footer.rjc-ftr *{ color:#F5F4F1 !important; border-color:rgba(245,244,241,.12) !important }
body.rj-home-steel footer#colophon h2,
body.rj-home-steel footer#colophon h3,
body.rj-home-steel footer#colophon h4,
body.rj-home-steel footer.rjc-ftr h2,
body.rj-home-steel footer.rjc-ftr h3,
body.rj-home-steel footer.rjc-ftr h4{
font-family:'Cormorant Garamond',Georgia,serif !important;
font-weight:400 !important; letter-spacing:-.008em !important;
}
body.rj-home-steel footer#colophon a:hover,
body.rj-home-steel footer.rjc-ftr a:hover{ color:#C8A96B !important }
body.rj-home-steel footer#colophon svg,
body.rj-home-steel footer#colophon svg path,
body.rj-home-steel footer.rjc-ftr svg,
body.rj-home-steel footer.rjc-ftr svg path{ fill:#C8A96B !important; stroke:#C8A96B !important }
body.rj-home-steel .rjc-ftr__band{ display:none !important }
/* ============================================================
CHROME — CF7 13818 form (editorial hairline inputs, gold submit)
============================================================ */
.rj-home .rj-cbform-wrap .wpcf7-form{
background:transparent !important; padding:24px !important;
}
.rj-home .rj-cbform-wrap .wpcf7-form *{
font-family:'Inter',sans-serif !important; color:var(--ink) !important;
}
.rj-home .rj-cbform-wrap .wpcf7-form label{
display:block; margin-bottom:18px;
font-family:'Inter',sans-serif !important;
font-size:.7rem !important; font-weight:600 !important;
letter-spacing:.22em !important; text-transform:uppercase !important;
color:var(--ink-3) !important;
}
.rj-home .rj-cbform-wrap .wpcf7-form input[type=text],
.rj-home .rj-cbform-wrap .wpcf7-form input[type=tel],
.rj-home .rj-cbform-wrap .wpcf7-form input[type=email],
.rj-home .rj-cbform-wrap .wpcf7-form select,
.rj-home .rj-cbform-wrap .wpcf7-form textarea{
width:100% !important; max-width:none !important;
background:transparent !important;
border:0 !important; border-bottom:1px solid rgba(15,15,15,.18) !important;
border-radius:0 !important;
padding:14px 0 12px !important;
font-family:'Inter',sans-serif !important; font-size:1rem !important; font-weight:400 !important;
color:var(--ink) !important;
outline:none !important;
margin-top:8px !important;
box-shadow:none !important;
transition:border-color .3s ease;
}
.rj-home .rj-cbform-wrap .wpcf7-form input:focus,
.rj-home .rj-cbform-wrap .wpcf7-form select:focus,
.rj-home .rj-cbform-wrap .wpcf7-form textarea:focus{
border-bottom-color:var(--gold) !important;
}
.rj-home .rj-cbform-wrap .wpcf7-form input::placeholder,
.rj-home .rj-cbform-wrap .wpcf7-form textarea::placeholder{ color:rgba(15,15,15,.35) !important }
.rj-home .rj-cbform-wrap .wpcf7-form select{
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,` inside a `.column-full` grid cell that keeps leftover margin,
so the `
` is narrower than the card at every width — the 248px pill overflowed it and
couldn't centre. Force the submit's wrapper chain to full card width at ALL widths so the
pill (fit-content + min-width + margin:auto) centres correctly. */
body.rj-home-steel .rj-cbform-wrap form.wpcf7-form .form-row,
body.rj-home-steel .rj-cbform-wrap form.wpcf7-form .column-full,
body.rj-home-steel .rj-cbform-wrap form.wpcf7-form .column-full > p{
width:100% !important; max-width:100% !important;
margin-left:0 !important; margin-right:0 !important;
padding-left:0 !important; padding-right:0 !important;
}
/* narrow / foldable screens (e.g. a 280px fold): the form card is too small for a 248px pill,
so the submit goes full-width with tighter padding/tracking and the label may WRAP rather
than clip. */
@media(max-width:380px){
body.rj-home-steel .rj-cbform-wrap form.wpcf7-form input.wpcf7-submit,
body.rj-home-steel .rj-cbform-wrap form.wpcf7-form input[type="submit"]{
width:100% !important; min-width:0 !important; max-width:100% !important;
white-space:normal !important;
padding:14px 12px !important; line-height:1.3 !important;
font-size:.66rem !important; letter-spacing:.06em !important;
}
}
.rj-home .rj-cbform-wrap .wpcf7-response-output{
margin:16px 0 0 !important; padding:14px 18px !important;
border:1px solid var(--rule) !important; border-radius:4px !important;
font-size:.85rem !important; color:var(--ink) !important;
background:rgba(200,169,107,.08) !important;
}
.rj-home .rj-cbform-wrap .wpcf7-not-valid-tip{
font-family:'Inter',sans-serif !important;
font-size:.7rem !important; letter-spacing:.18em !important; text-transform:uppercase !important;
color:#8a1f1f !important; padding-top:6px !important;
}
/* multi-row layout collapse for the legacy float-based CF7 markup */
.rj-home .rj-cbform-wrap .form-row{ display:grid !important; grid-template-columns:1fr 1fr; gap:22px !important; float:none !important }
.rj-home .rj-cbform-wrap .column-half, .rj-home .rj-cbform-wrap .column-full{ float:none !important; width:auto !important }
.rj-home .rj-cbform-wrap .column-full{ grid-column:1 / -1 }
@media(max-width:640px){ .rj-home .rj-cbform-wrap .form-row{ grid-template-columns:1fr } }
/* ============================================================
HEADER — DO NOT hide .rjc-hdr.
It looked like two stacked headers but they are NESTED, not stacked:
the WP