/* ========================================================================= GulfRabit · Luxe theme ========================================================================= THE CONTRACT WITH THE CLASSIC THEME ----------------------------------- Every rule in this file is scoped under [data-theme="luxe"]. Nothing here can reach a page that does not carry the attribute, so the shipped default renders byte-identical to what it rendered before this file existed. That is not a convention to be relaxed later: the switch in the admin panel is only trustworthy if the OFF position is genuinely untouched. This sheet is linked on every page and is inert until the attribute is set. Linking it conditionally would mean deciding the theme before the is written, and a wrong guess is a flash of the other theme. WHAT "LUXE" MEANS HERE ---------------------- Gold is TRIM, not paint. The brand's cyan and lime still carry every action — they are the logo, and a shop whose buttons stop looking like its brand has been redecorated, not designed. Gold takes the jewellery: hairlines, rules, the eyebrow above a heading, the sweep across a card as a pointer crosses it, the ring around a focused control. The canvas warms from paper white to ivory so the gold has something to sit on; pure white makes gold look like mustard. Restraint is the whole brief. "Ultra luxurious, yet minimal" resolves as: few effects, each slow, each low-contrast, none of them competing with a product photograph. Anything that would make a grid of twelve cards read as decoration rather than merchandise is not in this file. NOTHING HERE IS LOAD-BEARING ---------------------------- Every animation is decoration over content that is already visible and already in the HTML. No rule in this file starts an element at opacity 0, hides anything pending JavaScript, or gates a layout on a transition finishing. That rule exists because this codebase has twice shipped a decorative animation that hid the shop (see modules/home/home.css); a theme is exactly the kind of change that would do it a third time. Motion is gated on prefers-reduced-motion at the bottom of this file. ========================================================================= */ /* ---- Tokens ------------------------------------------------------------ Only ROLES are overridden — the same roles _variables.css defines — so every partial and module re-themes without knowing this file exists. Contrast was checked against the new ivory canvas, not the old white one: text-primary 17.1:1, text-secondary 8.6:1, text-muted 6.4:1, link 4.7:1, gold-ink 4.9:1. All AA or better, and muted actually improves on classic. */ [data-theme="luxe"] { /* The gold ramp. Deep is the only one ever used for text. */ --lux-gold: #C9A24B; --lux-gold-light: #E4CE92; --lux-gold-pale: #EFE3C4; --lux-gold-deep: #8A6D22; /* PARCHMENT, NOT NEARLY-WHITE. The first cut of this theme used #FCFBF7 — a warm white so close to the Classic canvas that the whole theme read as "the same site on a slightly dirty monitor". Gold trim on near-white is invisible; gold needs a ground with some body in it before it looks like metal rather than mustard. Cards stay PURE white, and that is what does the work: every card, menu and modal now lifts off the page because it is visibly cleaner than the paper behind it, not because a shadow says so. */ --surface-page: #F7F3E9; --surface-raised: #FFFFFF; --surface-sunken: #F1EADA; --surface-band: #F2ECDD; --surface-inverse: #0D0E0C; /* The hairline is where most of the luxury actually lives: a warm gold line reads as a bound edge, a cool grey line reads as a border. */ --border-hairline: #DCCFA8; --border-input: #9A8F73; --text-primary: #12191A; --text-secondary: #3D4A48; --text-muted: #5C584C; --text-on-accent: #04222b; --text-inverse: #FCFBF7; /* Darkened against the heavier canvas — #0E7C99 falls to 4.5:1 on parchment, which is the edge of AA rather than comfortably inside it. */ --link: #0B6A83; --link-hover: #084F63; --accent-ink: #0B6A83; --gold-ink: #7A5F1C; --wash-hover: rgba(138,109,34,.07); --wash-shimmer: rgba(201,162,75,.10); --scrim: rgba(13,14,12,.5); --glass-header: rgba(252,251,247,.78); --glass-overlay: rgba(252,251,247,.95); --scrollbar-thumb: #D6C79E; /* Shadows warm up. A neutral grey shadow on an ivory canvas looks like dirt; the same shadow mixed toward brown reads as depth. */ --shadow-sm: 0 1px 2px rgba(58,44,12,.05), 0 1px 3px rgba(58,44,12,.06); --shadow-md: 0 4px 16px rgba(58,44,12,.08), 0 2px 6px rgba(58,44,12,.05); --shadow-lg: 0 18px 48px rgba(58,44,12,.13), 0 6px 16px rgba(58,44,12,.07); --shadow-glow: 0 8px 28px rgba(201,162,75,.34); /* Luxe motion is slower than classic. Nothing snaps. */ --dur-base: 260ms; --dur-slow: 460ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Reused by several effects below. */ --lux-rule: linear-gradient(90deg, transparent, var(--lux-gold) 22%, var(--lux-gold-light) 50%, var(--lux-gold) 78%, transparent); --lux-sheen: linear-gradient(100deg, transparent 28%, rgba(228,206,146,.42) 50%, transparent 72%); } /* ---- The canvas -------------------------------------------------------- Two very large, very faint radial washes — one brand cyan, one gold — drifting against each other behind everything. At 4-6% opacity this is not a visible gradient; it is the difference between a flat page and a page that feels lit. Fixed, so it does not repaint on scroll, and pointer-events none so it can never intercept a tap. ::before on rather than a background-image on so the site's own backgrounds (bands, cards, the footer) still paint normally on top. */ /* The page colour moves UP to so the fixed layers between the two — the drifting wash below and the gold dust added with it — have somewhere to exist: with an opaque body they would render behind the paint and never be seen. Sections and bands with their own backgrounds still cover the dust locally, which is right — it belongs to the open canvas, not to a card. */ html[data-theme="luxe"] { background: var(--surface-page); } [data-theme="luxe"] body { position: relative; background: transparent; } [data-theme="luxe"] body::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; background: radial-gradient(46% 38% at 18% 12%, rgba(201,162,75,.13), transparent 62%), radial-gradient(42% 36% at 86% 24%, rgba(27,180,212,.09), transparent 64%), radial-gradient(50% 40% at 62% 88%, rgba(154,205,60,.07), transparent 66%); animation: lux-drift 34s var(--ease-inout) infinite alternate; } @keyframes lux-drift { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d( 1.5%, 1%, 0) scale(1.06); } } /* ---- Gold dust --------------------------------------------------------- Asked for by name: fine gold motes drifting up the page, the way dust hangs in a shaft of light. Two fixed layers, all CSS — every mote is a box-shadow on a 1px pseudo-element, each laid down twice, at its place and again one viewport lower, so when the layer has risen a full viewport the loop restarts on an identical frame and the seam is invisible. The layers rise at different speeds (slow parallax: near dust and far dust), and each breathes through a second opacity animation so motes seem to catch the light rather than merely travel. transform and opacity only — nothing here can cause layout, and the whole sky costs two composited elements. Dead under reduced motion, and hidden rather than frozen: stationary dust on a screen reads as dirt. */ /* The pseudo IS one mote — a couple of pixels, top-left — and every shadow is a copy of it placed somewhere in the two-viewport column. (The first cut sized the element to the viewport instead, which made each "mote" a hundred-metre golden ellipse: a bug promoted briefly to a sunrise.) */ html[data-theme="luxe"]::before, html[data-theme="luxe"]::after { content: ""; position: fixed; top: 0; left: 0; width: 2px; height: 2px; pointer-events: none; border-radius: 50%; } html[data-theme="luxe"]::after { width: 3px; height: 3px; } html[data-theme="luxe"]::before { box-shadow: 38.3vw 22.8vh 1px 1px rgba(232,207,142,0.32), 38.3vw 122.8vh 1px 1px rgba(232,207,142,0.32), 28.8vw 27.4vh 0px 0px rgba(201,162,75,0.34), 28.8vw 127.4vh 0px 0px rgba(201,162,75,0.34), 44.1vw 15.3vh 1px 1px rgba(232,207,142,0.22), 44.1vw 115.3vh 1px 1px rgba(232,207,142,0.22), 68.7vw 57.8vh 0px 0px rgba(228,206,146,0.28), 68.7vw 157.8vh 0px 0px rgba(228,206,146,0.28), 83.4vw 21.4vh 1px 1px rgba(232,207,142,0.21), 83.4vw 121.4vh 1px 1px rgba(232,207,142,0.21), 2.8vw 9.8vh 1px 0px rgba(228,206,146,0.19), 2.8vw 109.8vh 1px 0px rgba(228,206,146,0.19), 23.1vw 2.6vh 1px 1px rgba(201,162,75,0.39), 23.1vw 102.6vh 1px 1px rgba(201,162,75,0.39), 30.5vw 14.4vh 0px 1px rgba(232,207,142,0.19), 30.5vw 114.4vh 0px 1px rgba(232,207,142,0.19), 49.3vw 39.1vh 0px 0px rgba(228,206,146,0.21), 49.3vw 139.1vh 0px 0px rgba(228,206,146,0.21), 93.7vw 39.8vh 1px 0px rgba(232,207,142,0.39), 93.7vw 139.8vh 1px 0px rgba(232,207,142,0.39), 46.4vw 17.5vh 0px 0px rgba(232,207,142,0.35), 46.4vw 117.5vh 0px 0px rgba(232,207,142,0.35), 86.7vw 74.4vh 0px 0px rgba(228,206,146,0.39), 86.7vw 174.4vh 0px 0px rgba(228,206,146,0.39), 65.2vw 74.2vh 2px 0px rgba(201,162,75,0.41), 65.2vw 174.2vh 2px 0px rgba(201,162,75,0.41), 22.6vw 36.0vh 2px 1px rgba(201,162,75,0.37), 22.6vw 136.0vh 2px 1px rgba(201,162,75,0.37), 95.8vw 27.3vh 1px 0px rgba(232,207,142,0.25), 95.8vw 127.3vh 1px 0px rgba(232,207,142,0.25), 32.9vw 91.5vh 2px 1px rgba(232,207,142,0.36), 32.9vw 191.5vh 2px 1px rgba(232,207,142,0.36), 8.9vw 54.7vh 1px 0px rgba(228,206,146,0.23), 8.9vw 154.7vh 1px 0px rgba(228,206,146,0.23), 66.3vw 6.4vh 1px 0px rgba(201,162,75,0.3), 66.3vw 106.4vh 1px 0px rgba(201,162,75,0.3), 23.4vw 66.9vh 0px 1px rgba(232,207,142,0.32), 23.4vw 166.9vh 0px 1px rgba(232,207,142,0.32), 19.9vw 76.6vh 2px 1px rgba(228,206,146,0.39), 19.9vw 176.6vh 2px 1px rgba(228,206,146,0.39), 3.9vw 58.4vh 1px 0px rgba(232,207,142,0.3), 3.9vw 158.4vh 1px 0px rgba(232,207,142,0.3), 91.1vw 40.7vh 0px 0px rgba(232,207,142,0.3), 91.1vw 140.7vh 0px 0px rgba(232,207,142,0.3); animation: lux-rise 150s linear infinite, lux-breathe 9s ease-in-out infinite alternate; } html[data-theme="luxe"]::after { box-shadow: 69.0vw 21.2vh 2px 1px rgba(228,206,146,0.36), 69.0vw 121.2vh 2px 1px rgba(228,206,146,0.36), 84.7vw 60.6vh 0px 1px rgba(228,206,146,0.45), 84.7vw 160.6vh 0px 1px rgba(228,206,146,0.45), 30.7vw 79.0vh 1px 0px rgba(232,207,142,0.42), 30.7vw 179.0vh 1px 0px rgba(232,207,142,0.42), 44.2vw 47.9vh 2px 1px rgba(228,206,146,0.3), 44.2vw 147.9vh 2px 1px rgba(228,206,146,0.3), 47.2vw 56.4vh 2px 0px rgba(232,207,142,0.44), 47.2vw 156.4vh 2px 0px rgba(232,207,142,0.44), 81.1vw 53.0vh 1px 2px rgba(228,206,146,0.5), 81.1vw 153.0vh 1px 2px rgba(228,206,146,0.5), 91.0vw 57.4vh 2px 0px rgba(232,207,142,0.34), 91.0vw 157.4vh 2px 0px rgba(232,207,142,0.34), 51.4vw 14.7vh 2px 0px rgba(228,206,146,0.34), 51.4vw 114.7vh 2px 0px rgba(228,206,146,0.34), 62.0vw 55.1vh 1px 2px rgba(201,162,75,0.48), 62.0vw 155.1vh 1px 2px rgba(201,162,75,0.48), 52.6vw 58.1vh 1px 2px rgba(232,207,142,0.3), 52.6vw 158.1vh 1px 2px rgba(232,207,142,0.3), 71.6vw 18.8vh 1px 1px rgba(232,207,142,0.41), 71.6vw 118.8vh 1px 1px rgba(232,207,142,0.41); animation: lux-rise 95s linear infinite, lux-breathe 6s ease-in-out infinite alternate-reverse; } @keyframes lux-rise { to { transform: translateY(-100vh); } } @keyframes lux-breathe { from { opacity: .45; } to { opacity: 1; } } /* A single gold hairline pinned under the header, filling left-to-right with how far down the page you are. Pure CSS: scroll-driven animations need no JavaScript and no scroll listener, and where they are unsupported the bar simply never appears — which is why it is an empty decorative strip and carries no information a reader needs. */ @supports (animation-timeline: scroll()) { [data-theme="luxe"] body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: calc(var(--z-header) + 1); pointer-events: none; transform-origin: 0 50%; background: linear-gradient(90deg, var(--gr-cyan), var(--lux-gold) 60%, var(--gr-lime)); animation: lux-progress linear; animation-timeline: scroll(); } @keyframes lux-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* ---- Rules and eyebrows ----------------------------------------------- The overline above a section heading is the single most repeated element on the site, which makes it the cheapest place to say "luxury" once and have it said everywhere. Gold, letterspaced, with a short rule drawn beside it. */ [data-theme="luxe"] .overline { color: var(--gold-ink); display: inline-flex; align-items: center; gap: .6em; letter-spacing: .16em; } [data-theme="luxe"] .overline::after { content: ""; width: 2.25rem; height: 1px; background: linear-gradient(90deg, var(--lux-gold), transparent); } /* ---- Display headings: Cinzel, half brand, half gold ------------------- Modelled directly on saraalsalam.com — the merchant's other company — whose "READY TO PLACE / A BULK INQUIRY?" sets the sentence in a Trajan-style serif and gilds only its tail. Cinzel is that face. The lead half wears the logo's teal (--link, the 4.8:1 cut of the wordmark colour), and the tail is wrapped in .lux-gilt by theme.js and struck in metal. The gilt ramp keeps its endpoints deep — #7A5F1C and #8C6D1F, both past the 3:1 large-text bar — and puts one narrow bright glint at 52%, which is what reads as metal rather than mustard. A browser without background-clip:text gets solid --gold-ink at 4.9:1 and loses only the sheen. Headings the base excludes from display serifs (the product title, card titles) are excluded here by never being in this selector list. */ [data-theme="luxe"] .section-head__titles > h1, [data-theme="luxe"] .section-head__titles > h2, [data-theme="luxe"] .plp-head h1, [data-theme="luxe"] h1.page-head, [data-theme="luxe"] .express__head { font-family: 'Cinzel', 'Playfair Display', Georgia, serif; font-weight: 700; /* Cinzel's caps run wide and tight tracking knots them. */ letter-spacing: .015em; color: var(--link); } [data-theme="luxe"] .lux-gilt { color: var(--gold-ink); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { [data-theme="luxe"] .lux-gilt { /* Recut after the first ramp was judged pale on a real phone: shine is ALTERNATION, and the old ramp had one glint in a field of bronze, so at arm's length it averaged to khaki. Seven stops now, deep–bright– deep–bright, with the darks pushed darker so the brights can afford to be brighter — contrast against the parchment comes from the deep stops, the metal comes from the swing between them. */ background: linear-gradient(100deg, #6E5313 0%, #B8860B 18%, #F9E9A8 36%, #C9A24B 50%, #FFF3C4 64%, #A8842B 82%, #6E5313 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* The letter that lands on a bright band must still have an edge. With background-clip:text a text-shadow paints BEHIND the fill, so this bronze breath does not dull the metal — it underlines it, and it is what keeps 'PICKS' from dissolving where the glint crosses it. */ text-shadow: 0 1px 1px rgba(110,83,19,.38), 0 0 1px rgba(110,83,19,.30); } /* On a phone the whole word is a few letters wide, so each letter samples one narrow slice of the ramp — and a letter that samples the palest slice vanishes into the parchment, which is exactly what the merchant photographed. Small screens get the same alternation with the crowns held to a depth that can never disappear. */ @media (max-width: 767px) { [data-theme="luxe"] .lux-gilt { background: linear-gradient(100deg, #5C450F 0%, #A8842B 20%, #E4CE92 38%, #B8860B 52%, #EEDFAC 66%, #8C6D1F 84%, #5C450F 100%); -webkit-background-clip: text; background-clip: text; } } } /* And beneath the heading, the drawn gold rule stays. */ [data-theme="luxe"] .section-head__titles > h2, [data-theme="luxe"] .section-head__titles > h1 { position: relative; } [data-theme="luxe"] .section-head__titles > h2::after, [data-theme="luxe"] .section-head__titles > h1::after { content: ""; position: absolute; left: 0; bottom: -.4rem; height: 1px; width: min(100%, 5.5rem); background: var(--lux-rule); transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--ease-out) 120ms; } /* Drawn when the section arrives. .is-visible is scroll-reveal's own class, and it is already guaranteed to land (that module fails open), so nothing here can leave a rule half-drawn on a page whose observer never fired. */ [data-theme="luxe"] [data-reveal].is-visible .section-head__titles > h2::after, [data-theme="luxe"] [data-reveal].is-visible .section-head__titles > h1::after, [data-theme="luxe"] .section-head:not([data-reveal]) .section-head__titles > h2::after, [data-theme="luxe"] .section-head:not([data-reveal]) .section-head__titles > h1::after { transform: scaleX(1); } /* ---- Surfaces ---------------------------------------------------------- A card gains a gold top edge that brightens on hover, and a slow sheen that crosses it once. Both are ::after/::before on elements that already carry overflow:hidden, so nothing escapes the radius. */ /* THE BORDER IS THE METAL. The merchant pointed at saraalsalam.com's gold gradient buttons and asked for that finish on every card's edge — a full ring, not the corner ticks this file used to draw. A one-colour border cannot look metallic; metal is alternating light and dark, so the ring is a gradient with four reversals. border-image ignores border-radius, so it is painted the only way a rounded gradient border can be: the border is transparent, the card's own white paints the padding-box, and the gradient paints the border-box behind it. The warm top-wash rides along as the first padding-box layer. --lux-border is a hook, not decoration: hover swaps it for the brighter ramp below, which is how the ring can brighten when gradients cannot transition. */ /* html-prefixed: the home grid styles its tiles as .home-cat-grid .category-card — two classes, same weight as [data-theme] plus one, and later in the cascade, so it was winning the tie and the ring never painted. The html type selector adds the notch that settles it. */ html[data-theme="luxe"] .product-card, html[data-theme="luxe"] .category-card, html[data-theme="luxe"] .surface-gr { /* 2.5x on the merchant's instruction: at 1px the alternating stops blur into one average colour and the metal reads as beige thread. At 2.5px each band is wide enough to be seen as itself, which is where the shine actually comes from. The ramp is recut brighter to match the type. */ --lux-border: linear-gradient(135deg, #F9E9A8 0%, #B8860B 22%, #6E5313 40%, #FFF3C4 56%, #B8860B 74%, #E7CE8F 100%); border: 2.5px solid transparent; background: linear-gradient(180deg, rgba(201,162,75,.12), rgba(201,162,75,0) 38%) padding-box, linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, var(--lux-border) border-box; } /* The corner ticks this file used to draw are gone: a full metallic ring and a tick in one corner read as a border that failed to close. */ /* The price is the number the eye goes to, so it is the cheapest place to put real gold and be sure it is seen. Struck, not tinted: --gold-ink is 5.6:1 here and carries meaning, so it has to stay legible. */ [data-theme="luxe"] .product-card__price, [data-theme="luxe"] .bundle__total, [data-theme="luxe"] .summary-row--total { color: var(--gold-ink); } /* Stars go gold. They were lime, which is the success colour doing a second job — on this theme a five-star rating in gold says the same thing and says it in the theme's own voice. */ [data-theme="luxe"] .product-card__stars svg, [data-theme="luxe"] .rating-stars svg { color: var(--lux-gold); } [data-theme="luxe"] .product-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; /* The sheen sits off to the left until a pointer arrives. */ background: var(--lux-sheen); opacity: 0; transform: translateX(-60%); transition: opacity var(--dur-base) var(--ease-out); } @media (hover: hover) { html[data-theme="luxe"] .product-card:hover { --lux-border: linear-gradient(135deg, #FFF3C4 0%, #D9B45C 26%, #B8860B 46%, #FFF8DC 60%, #D9B45C 80%, #F4E5B4 100%); box-shadow: 0 20px 52px rgba(138,109,34,.16), 0 6px 18px rgba(58,44,12,.08); } [data-theme="luxe"] .product-card:hover::after { opacity: 1; animation: lux-sweep 1100ms var(--ease-out); } html[data-theme="luxe"] .category-card:hover { --lux-border: linear-gradient(135deg, #FFF3C4 0%, #D9B45C 26%, #B8860B 46%, #FFF8DC 60%, #D9B45C 80%, #F4E5B4 100%); box-shadow: 0 20px 52px rgba(138,109,34,.16); } } @keyframes lux-sweep { from { transform: translateX(-60%); } to { transform: translateX(160%); } } /* Every card wears the full metal ring now, so the premium card no longer needs its own border — the badge below is what still singles it out. (Setting background-image here would also knock out the ring's painted layers, which is the concrete reason this block shrank.) */ /* ---- The labels, struck in metal --------------------------------------- The merchant pointed at saraalsalam.com's gold pill buttons and asked for that finish on the LABELS — the PREMIUM tag and the pack-size chips — same size, different material. The fill is the SAS button's own move: bright crown, deep base, a hairline of white light along the top edge (that inset highlight is most of what makes a surface read as struck metal rather than painted yellow). Text stays dark bronze at 7:1. The selected chip is where the full metal goes; its unselected siblings wear pale gold with a gold ring, so the row still has one obvious answer. The cyan selection ring is replaced wholesale — teal on gold read as an error state. Sizes, padding and radii are untouched throughout. */ [data-theme="luxe"] .badge-premium { background: linear-gradient(170deg, #FFF3C4 0%, #E4CE92 34%, #C9A24B 72%, #B8860B 100%); border: 1px solid #8A6D22; color: #3A2C0C; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 1px 3px rgba(138,109,34,.3); text-shadow: 0 1px 0 rgba(255,248,230,.5); } [data-theme="luxe"] .size-chip, [data-theme="luxe"] .variant-opt { background: linear-gradient(180deg, #FBF3D8, #F1E3B6); border-color: rgba(184,134,11,.55); color: #6E5313; } @media (hover: hover) { [data-theme="luxe"] .size-chip:hover:not(:disabled), [data-theme="luxe"] .variant-opt:hover { border-color: #8A6D22; color: #3A2C0C; } } /* The chip's price line was still speaking teal on the gold — bronze, like everything else struck in the metal. */ [data-theme="luxe"] .variant-opt .variant-opt__price { color: #6E5313; } [data-theme="luxe"] .variant-opt.is-selected .variant-opt__price { color: #3A2C0C; } [data-theme="luxe"] .size-chip.is-on, [data-theme="luxe"] .variant-opt.is-selected { background: linear-gradient(170deg, #FFF3C4 0%, #E4CE92 30%, #C9A24B 68%, #B8860B 100%); border-color: #8A6D22; color: #3A2C0C; box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 1px 4px rgba(138,109,34,.35); } /* ---- The night panel --------------------------------------------------- saraalsalam.com's strongest moment is its closing call — pale serif on deep green with a gilded tail. Luxe gives its newsletter band the same treatment in this shop's own hue: deep sea-teal, gold hairlines above and below, the invitation set in Cinzel and struck gold. ONE dark panel on the page, which is exactly why it lands; a second would make it wallpaper. The !importants are aimed at inline style="" colours baked into the band's markup — a theme cannot reach inline styles any other way. The Subscribe button stays flat logo cyan by instruction, and nowhere does it pop harder than on this ground. */ [data-theme="luxe"] .newsletter-band { background: radial-gradient(90% 130% at 50% -20%, rgba(27,180,212,.16), transparent 55%), linear-gradient(180deg, #07242E 0%, #0A3641 58%, #072028 100%); border-top: 1px solid var(--lux-gold); border-bottom: 1px solid var(--lux-gold); border-radius: 0; box-shadow: inset 0 1px 0 rgba(232,207,142,.25), inset 0 -1px 0 rgba(232,207,142,.25); } [data-theme="luxe"] .newsletter-band .overline { color: var(--lux-gold-light) !important; } [data-theme="luxe"] .newsletter-band h2 { font-family: 'Cinzel', 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: .02em; color: var(--lux-gold-light) !important; } [data-theme="luxe"] .newsletter-band p:not(.overline) { color: rgba(239,227,196,.85) !important; } /* Dust where it shows best: gold motes on the deep teal, inside the panel. The page's own dust dies behind the band's background, so the band grows a local layer — same duplicated-column loop, shorter travel (the band is short, so the copies sit half a viewport apart and the loop runs -50vh). Brighter than the page motes: on the dark ground they can afford to be. */ [data-theme="luxe"] .newsletter-band { position: relative; overflow: hidden; } [data-theme="luxe"] .newsletter-band > * { position: relative; z-index: 1; } [data-theme="luxe"] .newsletter-band::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 3px; border-radius: 50%; pointer-events: none; z-index: 0; box-shadow: 33.1vw 6.9vh 0px 0 rgba(232,207,142,0.48), 33.1vw 56.9vh 0px 0 rgba(232,207,142,0.48), 37.1vw 2.7vh 1px 0 rgba(201,162,75,0.46), 37.1vw 52.7vh 1px 0 rgba(201,162,75,0.46), 42.1vw 11.1vh 2px 0 rgba(232,207,142,0.47), 42.1vw 61.1vh 2px 0 rgba(232,207,142,0.47), 93.0vw 29.0vh 0px 0 rgba(201,162,75,0.65), 93.0vw 79.0vh 0px 0 rgba(201,162,75,0.65), 6.8vw 10.2vh 1px 0 rgba(228,206,146,0.55), 6.8vw 60.2vh 1px 0 rgba(228,206,146,0.55), 53.9vw 26.3vh 1px 0 rgba(228,206,146,0.49), 53.9vw 76.3vh 1px 0 rgba(228,206,146,0.49), 37.8vw 25.2vh 0px 0 rgba(228,206,146,0.65), 37.8vw 75.2vh 0px 0 rgba(228,206,146,0.65), 49.7vw 24.5vh 1px 0 rgba(201,162,75,0.61), 49.7vw 74.5vh 1px 0 rgba(201,162,75,0.61), 36.7vw 11.4vh 1px 0 rgba(228,206,146,0.69), 36.7vw 61.4vh 1px 0 rgba(228,206,146,0.69), 9.9vw 13.8vh 2px 0 rgba(201,162,75,0.76), 9.9vw 63.8vh 2px 0 rgba(201,162,75,0.76), 29.6vw 45.1vh 0px 0 rgba(228,206,146,0.63), 29.6vw 95.1vh 0px 0 rgba(228,206,146,0.63), 74.7vw 7.0vh 2px 0 rgba(232,207,142,0.6), 74.7vw 57.0vh 2px 0 rgba(232,207,142,0.6), 75.4vw 26.4vh 1px 0 rgba(244,229,180,0.57), 75.4vw 76.4vh 1px 0 rgba(244,229,180,0.57), 59.1vw 26.7vh 2px 0 rgba(232,207,142,0.47), 59.1vw 76.7vh 2px 0 rgba(232,207,142,0.47), 92.7vw 21.8vh 0px 0 rgba(244,229,180,0.47), 92.7vw 71.8vh 0px 0 rgba(244,229,180,0.47); animation: lux-rise-band 60s linear infinite, lux-breathe 5s ease-in-out infinite alternate; } @keyframes lux-rise-band { to { transform: translateY(-50vh); } } /* ---- The glint --------------------------------------------------------- Metal is convincing when light MOVES on it. The ring's border-box layer is widened to two and a half times the card and parked off to one side; on hover its position sweeps across once, so a highlight travels around the frame — the card equivalent of tilting a ring under a lamp. Gradients cannot transition but background-position can, which is the whole trick. */ html[data-theme="luxe"] .product-card, html[data-theme="luxe"] .category-card { background-size: auto, auto, 240% 100%; background-position: 0 0, 0 0, 12% 50%; } /* Under a pointer the light does not cross once and stop — it keeps moving, easing back and forth through the metal like glaze tilted under a lamp. Alternate, not looped: a loop snaps back to its first frame, and the snap is what breaks the illusion. */ @media (hover: hover) { html[data-theme="luxe"] .product-card:hover, html[data-theme="luxe"] .category-card:hover { animation: lux-ring-flow 2400ms ease-in-out infinite alternate; } } @keyframes lux-ring-flow { from { background-position: 0 0, 0 0, 0% 50%; } to { background-position: 0 0, 0 0, 100% 50%; } } /* A phone has no hover — the scroll IS the pointer. theme.js watches the cards on touch screens and marks each as it crosses centre-screen; the mark runs one full pass of the same light and the brighter ring, then lifts itself on animationend. The card the thumb is passing glints. */ html[data-theme="luxe"] .product-card.lux-glance, html[data-theme="luxe"] .category-card.lux-glance { --lux-border: linear-gradient(135deg, #FFF3C4 0%, #D9B45C 26%, #B8860B 46%, #FFF8DC 60%, #D9B45C 80%, #F4E5B4 100%); animation: lux-ring-glint 1150ms var(--ease-out); } @keyframes lux-ring-glint { from { background-position: 0 0, 0 0, 0% 50%; } to { background-position: 0 0, 0 0, 130% 50%; } } /* ---- The engraved frame ------------------------------------------------ Summary panels — the order summary, account cards — get a second, finer hairline drawn just inside the metal ring: the double rule of an engraved plate. One inset shadow, no second element. */ html[data-theme="luxe"] .surface-gr { box-shadow: inset 0 0 0 4px rgba(201,162,75,0), inset 0 0 0 5px rgba(201,162,75,.28); } /* ---- The spoken word --------------------------------------------------- A testimonial is the one place the shop speaks in a customer's voice, so it earns the classical mark: an oversized gilded quotation mark floating behind the words, set in the display face. */ [data-theme="luxe"] .testi-card__inner { position: relative; } [data-theme="luxe"] .testi-card__inner::before { content: "\201C"; position: absolute; top: -0.18em; left: -0.05em; font-family: 'Cinzel', Georgia, serif; font-size: 5.5rem; line-height: 1; color: var(--lux-gold); opacity: .28; pointer-events: none; } [data-theme="luxe"] .testi-stars { color: var(--lux-gold); } /* Trust icons join the metalwork. */ [data-theme="luxe"] .trust-band svg { color: var(--gold-ink); } /* ---- The sale badge, recut -------------------------------------------- Lime on gold was the last survivor of the old palette still shouting on the cards. Under Luxe a discount dresses like everything else here: deep claret under gold type, ringed in the metal. The saving line joins the metalwork with it. */ [data-theme="luxe"] .badge-sale { background: linear-gradient(160deg, #7E2430, #5C1822); color: #F3DFA8; border: 1px solid rgba(201,162,75,.65); } [data-theme="luxe"] .price-saving { color: var(--gold-ink); } /* ---- The checkout stepper, as jewellery ------------------------------- The three step numbers become medallions: Cinzel digits in a gold ring on ivory. The active step fills deep sea-teal — the night panel's ground — with a pale gold digit; a finished step fills solid gold and keeps its dark digit. States and markup are checkout-page.js's own; this repaints. */ [data-theme="luxe"] .step__num { font-family: 'Cinzel', Georgia, serif; font-weight: 700; background: var(--surface-raised); border: 1px solid var(--lux-gold); color: var(--gold-ink); box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 1px 4px rgba(138,109,34,.18); } [data-theme="luxe"] .step.is-active .step__num { background: linear-gradient(180deg, #0A3641, #07242E); border-color: var(--lux-gold); color: var(--lux-gold-light); } [data-theme="luxe"] .step.is-done .step__num { background: linear-gradient(135deg, #E4CE92, #C9A24B 55%, #A8842B); border-color: transparent; color: #2F2A1C; } [data-theme="luxe"] .step.is-active { color: var(--gold-ink); } /* ---- The seal ----------------------------------------------------------- The confirmation is the moment a customer screenshots and sends to a friend, so under Luxe it is stamped rather than ticked: the check circle becomes a double-ringed gold seal that presses onto the page — one scale- and-settle, then still. Both confirmation marks are aria-hidden in the markup, which is what lets the caption ride in CSS without reaching a screen reader; the heading beside it says everything that matters. */ [data-theme="luxe"] .confirm-check, [data-theme="luxe"] .express-done__mark { position: relative; background: radial-gradient(circle at 34% 30%, #EFDFAF, #C9A24B 58%, #A8842B); color: #2F2A1C; border: 1px solid #8A6D22; box-shadow: inset 0 0 0 3px rgba(255,248,230,.55), inset 0 0 0 4px rgba(138,109,34,.6), 0 10px 26px rgba(138,109,34,.28); animation: lux-stamp 640ms var(--ease-out) both; } [data-theme="luxe"] .confirm-check::after, [data-theme="luxe"] .express-done__mark::after { content: "GULFRABIT"; position: absolute; left: 50%; bottom: -1.55rem; transform: translateX(-50%); font-family: 'Cinzel', Georgia, serif; font-size: .58rem; letter-spacing: .34em; text-indent: .34em; /* recentres tracked type */ color: var(--gold-ink); white-space: nowrap; } @keyframes lux-stamp { 0% { transform: scale(1.9) rotate(-7deg); opacity: 0; } 55% { transform: scale(.92) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } /* ---- The burst ---------------------------------------------------------- Spawned by theme.js when Add to Cart is pressed: a pinch of the page's own dust thrown from the button. Fixed, above every layer, gone on animationend. */ .lux-burst { position: fixed; z-index: 1200; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 30%, #F4E5B4, #C9A24B 70%); box-shadow: 0 0 6px rgba(201,162,75,.8); animation: lux-burst-fly 700ms cubic-bezier(.17,.67,.4,1) forwards; } @keyframes lux-burst-fly { from { transform: translate(0, 0) scale(1); opacity: .95; } to { transform: translate(var(--dx), var(--dy)) scale(.25); opacity: 0; } } /* ---- Buttons ----------------------------------------------------------- FLAT LOGO CYAN, EVERY ONE OF THEM — the merchant's direct instruction, pointing at the admin's own flat publish button as the reference. The earlier cut ran gold through the cyan-lime gradient; it is gone, and so is the classic gradient on the hero and checkout CTAs, because under this theme the gold lives on the type and the card edges, and a button fighting in a third voice made the page shout. Hover darkens to the wordmark's deep teal exactly as classic's primary does; the gold stays only in the shadow the button throws and the sheen that crosses it. */ [data-theme="luxe"] .btn-primary-gr, [data-theme="luxe"] .btn-gradient-gr { background: var(--gr-cyan); border-color: transparent; color: #04222b; } @media (hover: hover) { [data-theme="luxe"] .btn-primary-gr:hover, [data-theme="luxe"] .btn-gradient-gr:hover { background: var(--gr-cyan-dark); color: var(--text-inverse); box-shadow: 0 10px 30px rgba(201,162,75,.42); } } [data-theme="luxe"] .btn-primary-gr, [data-theme="luxe"] .btn-gradient-gr { position: relative; overflow: hidden; } [data-theme="luxe"] .btn-primary-gr::after, [data-theme="luxe"] .btn-gradient-gr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,248,230,.55) 50%, transparent 70%); transform: translateX(-100%); opacity: 0; } @media (hover: hover) { [data-theme="luxe"] .btn-primary-gr:hover::after, [data-theme="luxe"] .btn-gradient-gr:hover::after { opacity: 1; animation: lux-sweep 900ms var(--ease-out); } } [data-theme="luxe"] .btn-outline-gr { border-color: color-mix(in srgb, var(--lux-gold) 45%, var(--border-hairline)); } @media (hover: hover) { [data-theme="luxe"] .btn-outline-gr:hover { border-color: var(--lux-gold); background: rgba(201,162,75,.08); } } /* One focus style for the whole theme, gold, and never removed. */ [data-theme="luxe"] :focus-visible { outline: 2px solid var(--lux-gold); outline-offset: 2px; } /* ---- Links ------------------------------------------------------------- A gold underline that draws from the left rather than appearing whole. */ @media (hover: hover) { [data-theme="luxe"] .mega-menu__link, [data-theme="luxe"] .site-footer a { position: relative; } [data-theme="luxe"] .mega-menu__link::after, [data-theme="luxe"] .site-footer a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: linear-gradient(90deg, var(--lux-gold), var(--lux-gold-light)); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-base) var(--ease-out); } [data-theme="luxe"] .mega-menu__link:hover::after, [data-theme="luxe"] .site-footer a:hover::after { transform: scaleX(1); } } /* ---- Header ------------------------------------------------------------ */ [data-theme="luxe"] .site-header { border-bottom: 1px solid transparent; background-image: linear-gradient(var(--glass-header), var(--glass-header)), var(--lux-rule); background-position: 0 0, 0 100%; background-size: 100% 100%, 100% 1px; background-repeat: no-repeat; } /* ---- Media ------------------------------------------------------------- A gold inner hairline on every image well, and a slower, larger zoom than classic's — the difference between a product moving and a product being presented. */ [data-theme="luxe"] .product-card__media::after { box-shadow: inset 0 0 0 1px rgba(201,162,75,.20); } [data-theme="luxe"] .category-card__media { box-shadow: inset 0 0 0 1px rgba(201,162,75,.22); } @media (hover: hover) { [data-theme="luxe"] .product-card:hover .product-card__img { transform: scale(1.06); } } /* ---- Section bands ----------------------------------------------------- The alternating band gets a pair of faint vertical gold rules at the container's edges — the page equivalent of a ruled margin. Hidden below 1024px, where there is no margin to rule. */ @media (min-width: 1024px) { [data-theme="luxe"] .canvas-panel { position: relative; } [data-theme="luxe"] .canvas-panel::before { content: ""; position: absolute; inset-block: 0; left: 50%; transform: translateX(-50%); width: min(var(--container-max), 100%); pointer-events: none; border-inline: 1px solid rgba(201,162,75,.16); } } /* ---- Reveal ------------------------------------------------------------ Luxe lengthens the existing reveal and adds a whisper of scale. It does NOT change the start state, the class that ends it, or the failsafe — this only retimes a transition that already exists. */ [data-theme="luxe"] html:not(.no-js) [data-reveal] { transition-duration: 720ms; transition-timing-function: var(--ease-out); } /* ---- Chrome ------------------------------------------------------------ */ [data-theme="luxe"] ::selection { background: rgba(201,162,75,.28); color: var(--text-primary); } [data-theme="luxe"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); } [data-theme="luxe"] hr { border: 0; height: 1px; background: var(--lux-rule); } /* ---- Motion off -------------------------------------------------------- Everything above is decoration, so all of it can simply stop. The rules and hairlines stay — they are colour, not movement — but nothing drifts, sweeps or draws. */ @media (prefers-reduced-motion: reduce) { html[data-theme="luxe"] .product-card.lux-glance, html[data-theme="luxe"] .category-card.lux-glance, html[data-theme="luxe"] .product-card:hover, html[data-theme="luxe"] .category-card:hover { animation: none; } [data-theme="luxe"] .newsletter-band::before { display: none; } [data-theme="luxe"] .confirm-check, [data-theme="luxe"] .express-done__mark { animation: none; } .lux-burst { display: none; } /* Stationary dust reads as dirt on the glass — gone entirely, not paused. */ html[data-theme="luxe"]::before, html[data-theme="luxe"]::after { display: none; } html[data-theme="luxe"] .product-card:hover, html[data-theme="luxe"] .category-card:hover { animation: none; } [data-theme="luxe"] body::before { animation: none; } [data-theme="luxe"] body::after { animation: none; transform: scaleX(1); opacity: .5; } [data-theme="luxe"] .product-card::after, [data-theme="luxe"] .btn-primary-gr::after, [data-theme="luxe"] .btn-gradient-gr::after { display: none; } [data-theme="luxe"] .section-head__titles > h2::after, [data-theme="luxe"] .section-head__titles > h1::after { transform: scaleX(1); transition: none; } [data-theme="luxe"] .mega-menu__link::after, [data-theme="luxe"] .site-footer a::after { transition: none; } [data-theme="luxe"] html:not(.no-js) [data-reveal] { transition-duration: 1ms; } }