/* ==========================================================================
EXECUTIVE PR V3 — luxury-v3.css
The "V3 upgrade layer." Loads LAST so it refines V2 without breaking it.
Adds: real metallic crest integration, richer gold treatments, animated
borders, premium dividers, card glows, brand lockups, refined CTAs.
All colors consume the existing theme variables (theme-one / theme-two).
========================================================================== */
/* --------------------------------------------------------------------------
1. METALLIC CREST — replaces the placeholder "E" letter-marks everywhere
The real crest PNG is layered as a background on the existing mark elements.
-------------------------------------------------------------------------- */
.brand-mark,
.gate-crest,
.loader-crest,
.chat-head .av,
.footer-brand .brand-mark {
color: transparent !important; /* hide the placeholder letter */
background-image: url("../assets/brand/crest.png") !important;
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
border: 0 !important;
}
/* Header brand mark — slightly larger, with a soft gold halo */
.brand-mark {
width: 46px; height: 46px;
filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
.site-header .brand:hover .brand-mark { filter: drop-shadow(0 6px 16px rgba(201,162,75,.45)); }
/* Footer crest a touch bigger for presence */
.footer-brand .brand-mark { width: 52px; height: 52px; }
/* Chat avatar crest */
.chat-head .av { width: 40px; height: 40px; background-color: transparent; }
/* Gate crest — large, with halo + gentle float */
.gate-crest {
width: 132px; height: 132px; margin-bottom: 1.4rem;
background-color: transparent;
filter: drop-shadow(0 10px 30px rgba(0,0,0,.6));
animation: floaty 6s ease-in-out infinite;
}
.gate-crest::after {
content: ""; position: absolute; inset: -26%;
background: radial-gradient(circle, rgba(201,162,75,.22), transparent 62%);
z-index: -1; pointer-events: none;
}
.gate-crest { position: relative; }
/* Loader crest — replaces letter, ring spins around the real crest */
.loader-crest {
width: 96px; height: 96px;
background-color: transparent;
animation: crestPulse 2.4s ease-in-out infinite;
}
.loader-ring { width: 132px; height: 132px; }
@media (prefers-reduced-motion: reduce){
.gate-crest, .loader-crest { animation: none; }
}
/* --------------------------------------------------------------------------
2. GOLD METAL TREATMENTS — elevate headings, accents, dividers
-------------------------------------------------------------------------- */
:root,
body.theme-one, body.theme-two {
--metal-gold: linear-gradient(135deg,#8a5a10 0%,#d4af37 30%,#f6e7b0 50%,#b9851b 72%,#fff3c4 100%);
--metal-edge: 0 1px 0 rgba(255,247,210,.35), 0 0 22px rgba(201,162,75,.18);
}
/* Eyebrow gets a tiny metallic dot lead-in + brighter tracking */
.eyebrow::before { background: var(--metal-gold); opacity: 1; height: 1.5px; }
/* Optional metallic heading accent — apply class .metal to any h1/h2 */
.metal {
background: var(--metal-gold);
-webkit-background-clip: text; background-clip: text; color: transparent;
text-shadow: none;
}
/* Refined gold divider with center diamond (upgrades .filigree dot) */
.filigree .dot {
background: var(--metal-gold);
border: 0; width: 9px; height: 9px;
box-shadow: 0 0 12px rgba(201,162,75,.5);
}
.filigree .line, .filigree .line.r { height: 1px; opacity: .9; }
/* Animated gold rule used between major sections —
*/
.rule-gold {
border: 0; height: 1px; margin-block: clamp(2rem,5vw,3.5rem);
background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-soft) 50%, var(--gold) 80%, transparent);
position: relative; overflow: visible;
}
.rule-gold::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 8px; height: 8px; transform: translate(-50%,-50%) rotate(45deg);
background: var(--metal-gold); box-shadow: 0 0 14px rgba(201,162,75,.6);
}
/* --------------------------------------------------------------------------
3. BUTTONS — add a metallic sheen + shimmer sweep on primary CTAs
-------------------------------------------------------------------------- */
.btn-primary {
position: relative; overflow: hidden;
background: var(--metal-gold); background-size: 200% auto;
box-shadow: 0 10px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
transition: transform .25s ease, box-shadow .3s ease, background-position .6s ease;
}
.btn-primary:hover { background-position: right center; }
.btn-primary::before {
content: ""; position: absolute; top: 0; left: -75%;
width: 50%; height: 100%; transform: skewX(-22deg);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
transition: left .6s ease; pointer-events: none;
}
.btn-primary:hover::before { left: 130%; }
@media (prefers-reduced-motion: reduce){ .btn-primary::before { display:none; } }
/* Outline buttons get a subtle inner gold glow on hover */
.btn-outline:hover { box-shadow: inset 0 0 0 1px rgba(201,162,75,.5), 0 8px 24px rgba(0,0,0,.25); }
/* --------------------------------------------------------------------------
4. CARDS — luxury frame, corner brackets, hover glow
-------------------------------------------------------------------------- */
.card {
position: relative;
background:
linear-gradient(180deg, rgba(201,162,75,.04), transparent 40%),
var(--card-bg);
}
.card::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
pointer-events: none; opacity: 0; transition: opacity .4s ease;
box-shadow: inset 0 0 0 1px rgba(201,162,75,.5), 0 0 40px rgba(201,162,75,.12);
}
.card:hover::after { opacity: 1; }
/* Card media gets a faint gold gradient veil at the bottom */
.card-media::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
background: linear-gradient(0deg, rgba(8,7,5,.55), transparent);
pointer-events: none;
}
/* Service cards — left gold accent bar on hover */
.svc-card { position: relative; overflow: hidden; }
.svc-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: var(--metal-gold); transform: scaleY(0); transform-origin: top;
transition: transform .35s ease;
}
.svc-card:hover::before { transform: scaleY(1); }
/* --------------------------------------------------------------------------
5. HERO — deeper cinematic vignette + brand crest watermark option
-------------------------------------------------------------------------- */
.hero-media::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(8,7,5,.45) 100%),
radial-gradient(90% 60% at 50% 120%, rgba(126,20,32,.18), transparent 60%);
}
.hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,.5); }
/* Hero crest watermark (optional) — add in hero */
.hero-crest {
position: absolute; right: -4%; bottom: -6%; width: min(46vw, 560px); aspect-ratio: 1;
background: url("../assets/brand/crest.png") center/contain no-repeat;
opacity: .06; z-index: 1; pointer-events: none; filter: grayscale(.2);
}
@media (max-width: 860px){ .hero-crest { display: none; } }
/* --------------------------------------------------------------------------
6. LA STATUS WIDGET — metallic edge + glow
-------------------------------------------------------------------------- */
.la-status {
background: linear-gradient(180deg, rgba(201,162,75,.06), rgba(8,7,5,.4));
box-shadow: inset 0 0 0 1px rgba(201,162,75,.18), 0 14px 40px rgba(0,0,0,.35);
}
.la-status .seg .v { background: none; }
/* --------------------------------------------------------------------------
7. SECTION CORNER BRACKETS — opt-in via .has-brackets on a .section
-------------------------------------------------------------------------- */
.has-brackets { position: relative; }
.has-brackets::before, .has-brackets::after {
content: ""; position: absolute; width: 38px; height: 38px; pointer-events: none;
border: 1px solid rgba(201,162,75,.45);
}
.has-brackets::before { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.has-brackets::after { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
@media (max-width: 860px){ .has-brackets::before, .has-brackets::after { display: none; } }
/* --------------------------------------------------------------------------
8. LUX PAGE FRAME — make the fixed frame a touch more luxurious
-------------------------------------------------------------------------- */
.lux-frame {
border-color: rgba(201,162,75,.16);
box-shadow: inset 0 0 60px rgba(201,162,75,.04);
}
.lux-corner { opacity: .85; filter: drop-shadow(0 0 6px rgba(201,162,75,.3)); }
/* --------------------------------------------------------------------------
9. NAV — sticky glass refinement + brand wordmark legibility
-------------------------------------------------------------------------- */
.site-header { box-shadow: 0 1px 0 rgba(201,162,75,.08), 0 10px 30px rgba(0,0,0,.18); }
.site-header.scrolled { background: rgba(6,5,4,.94); }
.brand-name { letter-spacing: .06em; }
.brand-sub { color: var(--gold-soft); }
/* Mega menu — metallic top edge */
.mega { border-top: 2px solid transparent; border-image: var(--metal-gold) 1; }
/* --------------------------------------------------------------------------
10. COUNTDOWN — metallic numerals + soft pulse
-------------------------------------------------------------------------- */
.cd-unit .num {
background: linear-gradient(180deg, rgba(201,162,75,.10), rgba(8,7,5,.5));
box-shadow: inset 0 0 0 1px rgba(201,162,75,.3), 0 12px 30px rgba(0,0,0,.4);
color: transparent; background-clip: text; -webkit-background-clip: text;
/* keep numerals readable: layer a metallic text fill */
}
.cd-unit .num {
background-image: var(--metal-gold);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* restore the card backing behind the metallic numerals */
.cd-unit { position: relative; }
.cd-unit::before {
content: ""; position: absolute; inset: 0 0 1.8rem 0; border-radius: 6px;
background: linear-gradient(180deg, rgba(201,162,75,.08), rgba(8,7,5,.55));
box-shadow: inset 0 0 0 1px rgba(201,162,75,.3); z-index: -1;
}
/* --------------------------------------------------------------------------
11. FOOTER — metallic top hairline + crest presence
-------------------------------------------------------------------------- */
.site-footer { position: relative; }
.site-footer::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-soft) 50%, var(--gold) 70%, transparent);
}
/* --------------------------------------------------------------------------
12. CHATBOT LAUNCHER — metallic pill + crest avatar polish
-------------------------------------------------------------------------- */
.chat-launch { background: var(--metal-gold); background-size: 200% auto; transition: background-position .6s, transform .25s; }
.chat-launch:hover { background-position: right center; transform: translateY(-2px); }
/* --------------------------------------------------------------------------
13. CTA RAIL — metallic hover
-------------------------------------------------------------------------- */
.cta-rail a:hover { background: var(--metal-gold); }
/* --------------------------------------------------------------------------
14. BRAND LOCKUP UTILITY — drop-in horizontal logo (e.g. about/contact)
-------------------------------------------------------------------------- */
.brand-lockup { display:block; max-width: min(440px, 84vw); margin-inline:auto; }
.brand-lockup img { width:100%; height:auto; filter: drop-shadow(0 14px 30px rgba(0,0,0,.5)); }
/* --------------------------------------------------------------------------
15. SCROLLBAR — metallic thumb (refines existing)
-------------------------------------------------------------------------- */
::-webkit-scrollbar-thumb { background: var(--metal-gold); }
/* --------------------------------------------------------------------------
16. SELECTION + focus polish
-------------------------------------------------------------------------- */
::selection { background: var(--gold-soft); color: #1a1404; }
/* --------------------------------------------------------------------------
17. Theme-two (Editorial) crest tweak — keep crest readable on light
-------------------------------------------------------------------------- */
body.theme-two .hero-crest { opacity: .05; }