/** Shopify CDN: Minification failed
Line 45:0 All "@import" rules must come first
Line 294:53 Unexpected bad string token
Line 294:60 Unterminated string token
**/
/* ============================================================
LUXURY REFINEMENTS — load AFTER luxury.css
Purpose: shift the theme from "loud deal site" to "fragrance house".
Strategy: lighter type weights, more whitespace, a calmer champagne
palette, restrained motion, and softer light-on-light shadows.
This file is purely additive — it overrides, never deletes.
============================================================ */
/* ---- 1. REFINED PALETTE ----------------------------------
The stock gold (#c2a14d / #e6c97a) reads bright and brassy.
Luxury gold is desaturated, closer to champagne and old brass.
We also introduce a true ivory/paper tone and a warmer ink. */
:root {
/* BLACK + GOLD — single luxury palette (whole theme dark). */
--lux-gold: #c9a14e;
--lux-gold-light: #e8cd92;
--lux-gold-deep: #d8b765; /* lighter bronze so it reads on black */
--lux-black: #0c0c0c;
--lux-brown: #171717; /* charcoal (secondary dark) */
--lux-ivory: #f3ead9; /* warm cream — now used as LIGHT TEXT */
--lux-ink: #f3ead9; /* text colour: light, for dark sections */
--lux-line: rgba(232, 205, 146, 0.16);
--lux-shadow-soft: 0 24px 70px -34px rgba(0, 0, 0, 0.7);
--lux-shadow-gold: 0 14px 50px -22px rgba(201, 161, 78, 0.40);
--lux-shadow-card: 0 1px 0 rgba(232,205,146,0.10) inset,
0 30px 60px -40px rgba(0, 0, 0, 0.6);
}
/* ---- 2. TYPOGRAPHY ---------------------------------------
The single biggest "cheap" signal in the current theme is
font-weight:800 on every heading. Heavy black weight = shouting.
Luxury houses set headings in lighter weights with open tracking
and generous line-height. We dial the whole system back. */
/* Optional elegant serif for Latin glyphs / numerals / the logo.
Arabic copy stays on Cairo (set in luxury.css); this only affects
Latin characters, which inherit the serif where we opt in. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cairo:wght@300;400;500;600;700&display=swap');
h1, h2, h3, .h0, .h1, .h2, .lux-heading,
.lux-title, .lux-hero__headline {
font-weight: 600 !important; /* was 800 */
letter-spacing: 0.005em !important;
line-height: 1.25 !important;
}
/* Hero headline: the marquee moment — lighter still, more air. */
.lux-hero__headline {
font-weight: 500 !important;
font-size: clamp(3rem, 4.6vw, 5.2rem) !important; /* slightly calmer */
line-height: 1.22 !important;
letter-spacing: 0 !important;
/* COLOR FIX — Dawn's base.css forces `h1 { color: var(--color-foreground) }`,
which is dark and made the headline vanish on the wine hero. We override it
with a warm champagne sheen that reads cleanly on the dark background. */
color: var(--lux-ivory) !important; /* solid fallback */
background: linear-gradient(118deg,
#fcf6ea 0%,
#f3e3bd 46%,
var(--lux-gold-light) 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.35)); /* depth on dark bg */
}
/* Eyebrows: the luxury tell is wide tracking + small size, not weight. */
.lux-eyebrow {
font-weight: 600 !important;
font-size: 1.15rem !important;
letter-spacing: 0.32em !important; /* was 0.18em */
color: var(--lux-gold-deep) !important;
}
html[dir='rtl'] .lux-eyebrow { letter-spacing: 0.12em !important; } /* Arabic doesn't tolerate huge tracking */
/* Body copy: lift readability, soften the contrast. */
.lux-sub, .lux-hero__subtitle, p {
font-weight: 400 !important;
line-height: 1.95;
}
.lux-hero__subtitle { opacity: 0.82 !important; font-size: 1.7rem !important; }
/* Buttons: weight down from 800 to a confident 600, wider tracking. */
.lux-btn, .button {
font-weight: 600 !important;
letter-spacing: 0.04em !important;
border-radius: 4px !important; /* tighter, more couture than 8px */
}
/* Latin numerals (prices, "100ml", "4.9") in elegant serif. */
.lux-hero__badge strong,
.lux-social__score,
.lux-price, .price__regular .price-item {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 500 !important;
letter-spacing: 0.01em;
}
/* ---- 3. CALM THE MOTION ----------------------------------
Five competing animations (floating bottle, pulsing badges,
particles, shine sweeps) read as a tech demo, not a maison.
Keep ONE quiet drift; retire the rest. */
/* Stop the bottle from rotating/bouncing like a toy — let it breathe. */
.lux-hero__media img,
.lux-hero__media .lux-placeholder {
animation: luxBottleBreath 9s ease-in-out infinite !important;
filter: drop-shadow(0 50px 80px rgba(0,0,0,0.55)) !important;
}
@keyframes luxBottleBreath {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* Kill the pulsing on the gold badges — luxury is still, not throbbing. */
.lux-hero__badge { animation: none !important; }
/* The price badge as a pulsing gold coin is a discount-store move.
Demote it to a quiet, glassy capsule (still visible, not shouting). */
.lux-hero__badge--2 {
width: auto !important;
height: auto !important;
min-width: 9rem;
padding: 1rem 1.6rem !important;
border-radius: 6px !important;
background: rgba(11,10,8,0.55) !important;
backdrop-filter: blur(8px);
color: var(--lux-ivory) !important;
border: 1px solid rgba(216,199,154,0.45);
box-shadow: var(--lux-shadow-soft) !important;
}
.lux-hero__badge--2 strong { color: var(--lux-gold-light) !important; }
/* Remove the white shine sweep across every button (very "app store"). */
.button::after, .lux-btn::after { display: none !important; }
/* Reduce particle noise to a whisper. */
.lux-hero__particle { opacity: 0.25 !important; }
/* ---- 4. WHITESPACE & RHYTHM ------------------------------
Premium = air. Open up section padding and the content max-width. */
.lux-section { padding-block: clamp(5rem, 9vw, 9rem); }
.lux-wrap, .lux-hero__inner, .lux-header__inner { max-width: 124rem; }
.lux-title { margin-block: 1.6rem 1rem; }
.lux-divider {
width: 5rem;
background: linear-gradient(90deg, transparent, var(--lux-gold), transparent);
opacity: 0.7;
}
/* ---- 5. CARDS & SHADOWS ----------------------------------
Replace heavy drop-shadows with hairline borders + faint lift.
This is the difference between a SaaS card and a boutique card. */
.lux-value-card,
.lux-offer__card,
.product-card-wrapper .card,
.card-wrapper .card {
border: 1px solid var(--lux-line) !important;
border-radius: 6px !important;
box-shadow: var(--lux-shadow-card) !important;
transition: transform .6s var(--lux-ease), box-shadow .6s var(--lux-ease) !important;
}
.lux-value-card:hover,
.product-card-wrapper .card:hover,
.card-wrapper .card:hover {
transform: translateY(-4px);
box-shadow: var(--lux-shadow-soft) !important;
}
/* ---- 6. GOLD-ON-GOLD GRADIENT BUTTON → solid, refined --- */
.lux-btn--gold {
background: var(--lux-gold) !important; /* solid champagne-brass */
color: #16120a !important;
box-shadow: var(--lux-shadow-gold) !important;
}
.lux-btn--gold:hover {
background: var(--lux-gold-deep) !important;
color: var(--lux-ivory) !important;
transform: translateY(-2px);
}
/* ---- 7. PRODUCT IMAGE PRESENTATION ----------------------
Give the main product media a quiet pedestal instead of a flat box. */
.product__media-wrapper .product__media,
.product-media-container {
background:
radial-gradient(120% 90% at 50% 0%, rgba(179,153,91,0.06), transparent 60%),
var(--lux-ivory);
border-radius: 8px;
}
/* ---- 8. STICKY BUY BAR — refine ------------------------- */
.lux-buybar {
background: rgba(11,10,8,0.92) !important;
backdrop-filter: blur(14px);
border-top: 1px solid rgba(216,199,154,0.30) !important;
}
.lux-buybar__price { font-family: 'Cormorant Garamond', serif; font-size: 2rem; color: var(--lux-gold-light); }
/* ---- 9. ACCESSIBILITY: honour reduced-motion ------------- */
/* ---- 10. PHOTO-MATCHED WARMTH ----------------------------
Echo the amber studio light of the product photo: warm glow
at top, deep cognac-espresso at the base. Replaces the cold
near-black radial gradient from luxury.css. */
.lux-hero {
background:
radial-gradient(120% 90% at 50% -10%, #2a2a2a 0%, #161616 38%, var(--lux-black) 78%, #000 100%) !important;
}
.lux-hero__glow {
background: radial-gradient(circle, rgba(179,128,63,0.28), transparent 65%) !important;
}
/* Warm the product pedestal to sit on cream like the photo. */
.product__media-wrapper .product__media,
.product-media-container {
background:
radial-gradient(120% 90% at 50% 0%, rgba(179,128,63,0.10), transparent 60%),
var(--lux-ivory) !important;
}
/* Dark sections (value bar, footer) inherit the warm espresso now,
so re-tint any hard blacks toward sandalwood for cohesion. */
.lux-valuebar { background: var(--lux-black) !important; }
@media (prefers-reduced-motion: reduce) {
.lux-hero__media img,
.lux-hero__media .lux-placeholder { animation: none !important; }
.lux-hero__particle { display: none !important; }
}
/* ---- 12. PRICE — green now / red was, bold, pro layout ----
Current price: emerald + bold. Old/compare price: red + bold +
strikethrough. Layout: current price on the left, old beside it. */
:root {
--lux-price: #1f7d4c; /* emerald — current price */
--lux-price-light: #58c98a; /* lighter emerald for dark backgrounds */
--lux-price-old: #c0392b; /* refined red — old / compare price */
}
/* Current / sale price → emerald, bold */
.price .price__sale .price-item--sale,
.price .price__regular .price-item--regular,
.lux-price,
.product__price,
.lux-offer__new {
color: var(--lux-price) !important;
-webkit-text-fill-color: var(--lux-price) !important;
font-weight: 700 !important;
}
/* Old / compare-at price → red, bold, struck */
.price .price__sale s.price-item--regular,
.price__sale s,
.lux-offer__old {
color: var(--lux-price-old) !important;
-webkit-text-fill-color: var(--lux-price-old) !important;
font-weight: 700 !important;
text-decoration: line-through !important;
opacity: 1 !important;
}
/* Layout: numbers read LTR; current price left, old price to its right. */
.price__container { display: flex !important; align-items: baseline !important; gap: 1rem !important; }
.price__sale {
display: flex !important;
direction: ltr !important;
align-items: baseline !important;
gap: 1rem !important;
justify-content: flex-start !important;
}
.price__sale .price-item--sale { order: 1 !important; font-size: 1.1em; }
.price__sale span:has(> s) { order: 2 !important; }
/* Special-offer card: same left-to-right, current then old. */
.lux-offer__prices { direction: ltr !important; justify-content: flex-start !important; gap: 1.2rem !important; }
.lux-offer__new { order: 1 !important; }
.lux-offer__old { order: 2 !important; }
/* On dark backgrounds (sticky buy bar, hero) use the lighter emerald. */
.lux-buybar__price,
.lux-hero__badge--2 strong {
color: var(--lux-price-light) !important;
-webkit-text-fill-color: var(--lux-price-light) !important;
font-weight: 700 !important;
}
On dark backgrounds the card titles inherited Dawn's dark
foreground colour and became almost invisible. Force a light,
on-brand champagne for titles and a clean ivory for body text. */
.lux-valuebar .lux-value-card h3,
.lux-valuebar h2,
.lux-valuebar h3 {
color: var(--lux-gold-light) !important; /* champagne — clearly visible */
-webkit-text-fill-color: var(--lux-gold-light) !important; /* defeat any gradient-text */
background: none !important;
opacity: 1 !important;
}
.lux-valuebar .lux-value-card p {
color: var(--lux-ivory) !important;
opacity: 0.85 !important;
}
/* Keep the icons crisp and bright too. */
.lux-valuebar .lux-value-card__icon {
color: var(--lux-gold-light) !important;
background: rgba(179, 128, 63, 0.16) !important;
border-color: rgba(227, 200, 154, 0.45) !important;
}
/* ----------------------------------------------------------
STICKY HEADER FIX
The header has `position:sticky`, but Dawn wraps every section
in its own `.shopify-section` box that is only as tall as the
header — so the sticky bar scrolled away with its own wrapper.
We promote the wrapper itself to sticky so the bar stays pinned
to the top on scroll. The announcement bar above it scrolls away.
---------------------------------------------------------- */
#shopify-section-luxury-header,
.shopify-section-group-header-group:has(.lux-header) {
position: sticky !important;
top: 0 !important;
z-index: 60 !important;
}
/* keep the inner header filling the (now sticky) wrapper */
#shopify-section-luxury-header .lux-header,
.shopify-section-group-header-group:has(.lux-header) .lux-header {
position: relative !important; /* wrapper now does the sticking */
}
/* ----------------------------------------------------------
SECTION TITLE VISIBILITY FIX (+ bolder, pro look)
Dawn's base.css forces h2,h3 { color: rgb(var(--color-foreground)) }
which is the dark wine ink — so every section title (.lux-title) and
value-card disappeared on the dark sections (value bar, reviews,
offer, newsletter). Subtitles survived because
/ simply
inherit the section's own colour.
Fix: let the titles INHERIT their section colour too. That means:
• dark sections (ivory text) -> titles become cream (now visible)
• light sections (dark text) -> titles stay dark (still visible)
No per-section guesswork, and it stays correct if a scheme changes.
---------------------------------------------------------- */
.lux-title,
.lux-value-card h3,
.lux-features .lux-feature-row__body h3,
.lux-how__steps h3 {
color: inherit !important;
font-weight: 700 !important; /* bolder, requested — still refined */
letter-spacing: 0 !important;
}
/* Value-bar card titles: a touch more presence on the dark base. */
.lux-value-card h3 {
font-size: 1.85rem !important;
line-height: 1.4 !important;
}
/* ----------------------------------------------------------
FRAGRANCE PYRAMID — readable text on the cream background
Season names / labels were inheriting a washed-out colour and
vanished (only the season dots were visible). Force the intended
ink + gold palette so everything reads on the ivory section.
---------------------------------------------------------- */
.fp,
.fp__season,
.fp__season-name,
.fp__metric-label,
.fp__metric-top,
.fp__chip,
.fp__guide-title,
.fp .lux-title {
color: var(--lux-ink) !important;
}
.fp__metric-text,
.fp__tier-label span {
color: var(--lux-gold-deep) !important; /* gold accent labels */
}
.fp__pill {
color: var(--lux-ivory) !important; /* light text on dark pill */
}
.fp__dot { background: rgba(43, 15, 20, 0.18) !important; } /* visible "off" dot */
.fp__dot.is-on { background: var(--lux-gold) !important; } /* gold "on" dot */
/* ----------------------------------------------------------
FLOATING BUTTONS clear the sticky order bar (COD app)
The green "order now" bar is fixed to the bottom and was sitting
on top of the WhatsApp / back-to-top buttons and the last bit of
page content. Lift the floating buttons above it and reserve a
little space at the bottom of the page on mobile.
---------------------------------------------------------- */
@media (max-width: 749px) {
.lux-whatsapp { bottom: 9rem !important; }
.lux-totop { bottom: 9rem !important; }
body { padding-bottom: 7rem; } /* content no longer hidden */
}
/* ==========================================================
FULL BLACK + GOLD — every section dark (whole theme)
Flip the former cream sections to black, convert white cards
to charcoal with gold borders, and lift all dark text to light.
========================================================== */
/* --- section backgrounds: cream -> black --- */
.lux-features,
.lux-how,
.lux-compare,
.lux-faq,
.fp,
.pr,
section[id^="shopify-section"] .lux-section[style*="ivory"] {
background: var(--lux-black) !important;
color: var(--lux-ivory) !important;
}
/* product-trust uses an inline ivory background */
.lux-section[style*="--lux-ivory"] { background: var(--lux-black) !important; color: var(--lux-ivory) !important; }
/* --- warm/brown gradients -> black --- */
.lux-offer { background: radial-gradient(circle at 50% 0%, #1c1c1c, var(--lux-black) 70%) !important; }
.lux-offer__card { background: linear-gradient(160deg, rgba(34,34,34,.85), rgba(12,12,12,.6)) !important; border-color: rgba(201,161,78,.38) !important; }
.lux-hero__glow { background: radial-gradient(circle, rgba(201,161,78,.26), transparent 65%) !important; }
.lux-placeholder { background: linear-gradient(160deg, #1c1c1c, #0c0c0c) !important; }
.lux-hero__headline {
background-image: linear-gradient(118deg, #fbf3e2 0%, #ecd6a3 46%, var(--lux-gold-light)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* --- FEATURES: light text on black --- */
.lux-feature-row__body h3 { color: var(--lux-ivory) !important; }
.lux-feature-row__body p { color: rgba(243,234,217,.78) !important; }
/* --- HOW IT WORKS --- */
.lux-how .lux-step h3 { color: var(--lux-ivory) !important; }
.lux-how .lux-step p { color: rgba(243,234,217,.75) !important; }
.lux-step__num { border-color: #0c0c0c !important; }
/* --- COMPARISON TABLE: dark cells, light text --- */
.lux-compare__table { box-shadow: 0 24px 70px -34px rgba(0,0,0,.8) !important; }
.lux-compare__table th, .lux-compare__table td { border-bottom: 1px solid rgba(232,205,146,.12) !important; }
.lux-compare__table tbody th { background: #161616 !important; color: var(--lux-ivory) !important; }
.lux-compare__col-other { background: #161616 !important; color: rgba(243,234,217,.6) !important; }
.lux-compare__col-ours { background: rgba(201,161,78,.12) !important; color: var(--lux-ivory) !important; }
.lux-compare__yes { color: #45c08a !important; }
.lux-compare__no { color: #e07a7a !important; }
/* --- FAQ: charcoal items --- */
.lux-faq__item { background: #161616 !important; border-color: rgba(232,205,146,.16) !important; }
.lux-faq__item.is-open { border-color: var(--lux-gold) !important; }
.lux-faq__q { color: var(--lux-ivory) !important; }
.lux-faq__a-inner { color: rgba(243,234,217,.78) !important; }
/* --- FRAGRANCE PYRAMID --- */
.fp__tier { background: linear-gradient(180deg, rgba(34,34,34,.9), rgba(18,18,18,.7)) !important; border-color: rgba(201,161,78,.28) !important; }
.fp__chip { background: #1c1c1c !important; border-color: rgba(232,205,146,.18) !important; color: var(--lux-ivory) !important; }
.fp__bar { background: rgba(232,205,146,.12) !important; }
.fp__dot { background: rgba(232,205,146,.20) !important; }
.fp__dot.is-on { background: var(--lux-gold) !important; }
.fp__pill { background: var(--lux-gold) !important; color: #0c0c0c !important; }
.fp, .fp__season, .fp__season-name, .fp__metric-label, .fp__metric-top,
.fp__chip, .fp__guide-title, .fp .lux-title { color: var(--lux-ivory) !important; }
/* --- PHOTO REVIEWS: charcoal cards --- */
.pr__card { background: #161616 !important; border-color: rgba(201,161,78,.35) !important; }
.pr__name, .pr__title { color: var(--lux-ivory) !important; }
.pr__text { color: rgba(243,234,217,.78) !important; }
.pr__sub { color: rgba(243,234,217,.65) !important; }
.pr__media { background: #1c1c1c !important; }
/* --- PRODUCT TRUST: cards & COD panel to charcoal --- */
.lux-section[style*="--lux-ivory"] .lux-value-card { color: var(--lux-ivory) !important; border-color: rgba(232,205,146,.16) !important; }
.lux-section[style*="--lux-ivory"] .lux-value-card h3 { color: var(--lux-ivory) !important; }
.lux-section[style*="--lux-ivory"] .lux-value-card p { color: rgba(243,234,217,.72) !important; }
.lux-section[style*="--lux-ivory"] .lux-offer__card { background: #161616 !important; border-color: rgba(201,161,78,.4) !important; color: var(--lux-ivory) !important; }
.lux-section[style*="--lux-ivory"] .lux-offer__card strong { color: var(--lux-ivory) !important; }
.lux-section[style*="--lux-ivory"] .lux-offer__card p { color: rgba(243,234,217,.75) !important; }
.lux-section[style*="--lux-ivory"] .lux-offer__card hr { border-top-color: rgba(232,205,146,.14) !important; }
/* --- eyebrows: keep gold, readable on black --- */
.lux-eyebrow { color: var(--lux-gold-light) !important; }