/* ============================================================ PREMIUM BOXES — "Signature" · Option D (gold edge), BACKGROUND-PRESERVING. The gold gradient EDGE defines the box; each card KEEPS ITS NATIVE FILL, so text contrast can never break (dark cards stay dark, light cards stay light — across homepage AND subpages, no per-class theming needed). The edge is an injected .pb-edge ring (independent of cinematic-fx's ::before/::after cursor layers). Additive: only under body.fx-premium . ============================================================ */ :root { --pb-radius: 14px; } /* ---- the cards this variant touches ---- */ body.fx-premium .service-card, body.fx-premium .event-card, body.fx-premium .sp-card, body.fx-premium .sp-included-item, body.fx-premium .testi-card, body.fx-premium .advisors-members, body.fx-premium .fleet-tab--card, body.fx-premium .ac-tier, body.fx-premium .lux-card, body.fx-premium .lux-vcard, body.fx-premium .lux-occasion, body.fx-premium .why-item, body.fx-premium .hb-vehicle, body.fx-premium .card, body.fx-premium .tier, body.fx-premium .contact-form-card, body.fx-premium .cities-ledger, body.fx-premium .cities-map { position: relative; border-color: rgba(217, 174, 116, 0.34) !important; /* static gold border on every premium box (hover gold-ring layers on top) */ border-radius: var(--pb-radius) !important; -webkit-backdrop-filter: blur(8px) saturate(1.08); backdrop-filter: blur(8px) saturate(1.08); box-shadow: inset 0 1px 0 rgba(255, 248, 232, 0.06), 0 2px 6px rgba(0, 0, 0, 0.26), 0 26px 56px -28px rgba(0, 0, 0, 0.60) !important; transition: box-shadow .55s cubic-bezier(.16,1,.3,1) !important; } /* ---- the gold gradient EDGE (injected child; follows border-radius) ---- */ .pb-edge { display: none; } /* zero layout impact in Classic mode */ .fx-premium .pb-edge { display: block; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; padding: 1.5px; background: linear-gradient(135deg, rgba(236,197,143,0.92) 0%, rgba(217,174,116,0.20) 48%, rgba(236,197,143,0.84) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: background .4s ease; } /* ---- hover — edge brightens + a soft gold halo blooms (no transform: keeps tilt) ---- */ body.fx-premium .service-card:hover, body.fx-premium .event-card:hover, body.fx-premium .sp-card:hover, body.fx-premium .sp-included-item:hover, body.fx-premium .testi-card:hover, body.fx-premium .advisors-members:hover, body.fx-premium .fleet-tab--card:hover, body.fx-premium .ac-tier:hover, body.fx-premium .lux-card:hover, body.fx-premium .lux-occasion:hover, body.fx-premium .why-item:hover, body.fx-premium .hb-vehicle:hover, body.fx-premium .card:hover, body.fx-premium .tier:hover, body.fx-premium .contact-form-card:hover, body.fx-premium .cities-ledger:hover, body.fx-premium .cities-map:hover { box-shadow: inset 0 1px 0 rgba(255, 248, 232, 0.10), 0 3px 8px rgba(0, 0, 0, 0.30), 0 34px 66px -30px rgba(0, 0, 0, 0.70), 0 0 26px -8px rgba(217, 174, 116, 0.40) !important; } body.fx-premium .service-card:hover .pb-edge, body.fx-premium .event-card:hover .pb-edge, body.fx-premium .sp-card:hover .pb-edge, body.fx-premium .sp-included-item:hover .pb-edge, body.fx-premium .testi-card:hover .pb-edge, body.fx-premium .advisors-members:hover .pb-edge, body.fx-premium .fleet-tab--card:hover .pb-edge, body.fx-premium .ac-tier:hover .pb-edge, body.fx-premium .lux-card:hover .pb-edge, body.fx-premium .lux-occasion:hover .pb-edge, body.fx-premium .why-item:hover .pb-edge, body.fx-premium .hb-vehicle:hover .pb-edge, body.fx-premium .card:hover .pb-edge, body.fx-premium .tier:hover .pb-edge, body.fx-premium .contact-form-card:hover .pb-edge, body.fx-premium .cities-ledger:hover .pb-edge, body.fx-premium .cities-map:hover .pb-edge { background: linear-gradient(135deg, rgba(245,221,182,1) 0%, rgba(217,174,116,0.4) 48%, rgba(245,221,182,0.95) 100%); } /* ---- numbers / stats — gold gradient text for the "expensive" data look ---- */ body.fx-premium .tier-price, body.fx-premium .sp-stat .v, body.fx-premium .why-item .num, body.fx-premium .lux-hero__stat .v, body.fx-premium .event-day { background: linear-gradient(180deg, #FCEAC6 0%, #D9AE74 55%, #B8894E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---- photo-led cards — gold edge only (image stays fully opaque) ---- */ body.fx-premium .fd-gallery__item, body.fx-premium .moment-frame, body.fx-premium .fleet-stage { position: relative; border-color: transparent !important; border-radius: var(--pb-radius) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 26px 56px -28px rgba(0,0,0,0.66) !important; } /* ---- guards ---- */ @media (prefers-reduced-motion: reduce) { body.fx-premium .service-card, body.fx-premium .event-card, body.fx-premium .card, body.fx-premium .sp-card, body.fx-premium .tier { transition: none !important; } } @media (max-width: 768px) { /* drop heavy blur on phones (perf) */ body.fx-premium .service-card, body.fx-premium .event-card, body.fx-premium .sp-card, body.fx-premium .sp-included-item, body.fx-premium .testi-card, body.fx-premium .advisors-members, body.fx-premium .fleet-tab--card, body.fx-premium .ac-tier, body.fx-premium .lux-card, body.fx-premium .lux-occasion, body.fx-premium .why-item, body.fx-premium .hb-vehicle, body.fx-premium .card, body.fx-premium .tier, body.fx-premium .contact-form-card, body.fx-premium .cities-ledger, body.fx-premium .cities-map { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ---- compare toggle (discreet pill, bottom-left) ---- */ .pb-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 100px; cursor: pointer; font-family: 'Outfit', system-ui, sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #FFFFFF; background: rgba(42, 30, 18, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(217, 174, 116, 0.32); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6); transition: border-color .3s ease; } .pb-toggle:hover { border-color: rgba(236,197,143,0.6); } .pb-toggle__dot { width: 7px; height: 7px; border-radius: 50%; background: #D9AE74; box-shadow: 0 0 8px #D9AE74; } body:not(.fx-premium) .pb-toggle__dot { background: #6b5640; box-shadow: none; } .pb-toggle__label::before { content: 'Signature'; } body:not(.fx-premium) .pb-toggle__label::before { content: 'Classic'; } @media (max-width: 768px) { .pb-toggle { left: 12px; bottom: 84px; padding: 8px 12px; } } /* ============================================================ CITIES — espresso/gold conversion (was a flat white "intermission" block that clashed with the unified homepage). Loads after dark-overrides.css so these re-assert the dark treatment, plus a few premium touches: warm-depth surfaces, glowing champagne map, gold pins. ============================================================ */ /* --- LEDGER surface: Espresso Atlas (Option A) --- */ body.fx-premium .cities-ledger { background: radial-gradient(120% 140% at 50% -10%, #56402C 0%, rgba(86,64,44,0) 60%), linear-gradient(180deg, #4D3826 0%, #432F1F 100%) !important; color: #FFFFFF !important; } /* ============================================================ MAP — Ivory Atlas (Option B): warm parchment surface, sepia map, burnt-gold accents. Pairs the chosen light map with the dark ledger. ============================================================ */ body.fx-premium .cities-map { background: linear-gradient(180deg, #FBF4E6 0%, #F1E4C9 100%) !important; color: #3A2A18 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), 0 2px 6px rgba(80,50,20,0.14), 0 30px 60px -30px rgba(80,50,20,0.34) !important; } /* dotted world map: sepia landmass + faint ink grid */ body.fx-premium .cities-map .land { fill: #B98A4E !important; opacity: 0.50 !important; } body.fx-premium .cities-map .graticule line { stroke: #3A2A18 !important; opacity: 0.07 !important; } /* routes + pins in burnt gold on the paper surface */ body.fx-premium .cities-map .route { stroke: #9A5A1E !important; opacity: 0.40 !important; } body.fx-premium .cities-map .pin { fill: #9A5A1E !important; } body.fx-premium .cities-map .pin-ring { stroke: #9A5A1E !important; } body.fx-premium .cities-map .pin-group.is-hq .pin { fill: #7A4416 !important; filter: none; } body.fx-premium .cities-map .label { fill: #6E5132 !important; } body.fx-premium .cities-map .label.hq { fill: #8A5A1E !important; } /* --- live world-clock ribbon (on ivory) --- */ body.fx-premium .cities-map .world-clock { background: linear-gradient(180deg, rgba(120,80,30,0.06), transparent) !important; border-bottom-color: rgba(120,80,30,0.18) !important; } body.fx-premium .cities-map .world-clock-label { color: #8A5A1E !important; border-right-color: rgba(120,80,30,0.14) !important; } body.fx-premium .cities-map .wc-cell { border-right-color: rgba(120,80,30,0.12) !important; } body.fx-premium .cities-map .wc-cell:hover { background: rgba(138,90,30,0.06) !important; } body.fx-premium .cities-map .wc-time { color: #2B1C0E !important; } body.fx-premium .cities-map .wc-cell.is-hq .wc-time { color: #8A5A1E !important; } body.fx-premium .cities-map .wc-cell.is-night .wc-time { color: #6E5132 !important; } body.fx-premium .cities-map .wc-city { color: #6E5132 !important; } body.fx-premium .cities-map .wc-code { color: #8A6B45 !important; } body.fx-premium .cities-map .wc-cell.is-hq .wc-code { color: #8A5A1E !important; } body.fx-premium .cities-map .wc-offset { color: #9A7B52 !important; } /* --- legend: ivory pill --- */ body.fx-premium .cities-map-legend { color: #6E5132 !important; background: rgba(255,252,244,0.86) !important; border-color: rgba(120,80,30,0.16) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } body.fx-premium .cities-map-legend .dot { background: #9A5A1E !important; } body.fx-premium .cities-map-legend .dot--out { background: #B89B6A !important; } body.fx-premium .cities-map-legend .dot--out.is-night { background: transparent !important; border-color: #8A6B45 !important; } /* --- the 3-column network ledger --- */ body.fx-premium .cities-ledger { border-top-color: rgba(250,241,221,0.12) !important; } body.fx-premium .cities-col { border-right-color: rgba(250,241,221,0.10) !important; } body.fx-premium .cities-col h4 { color: #ECC58F !important; } body.fx-premium .cities-col li { color: #FFFFFF !important; padding: 4px 6px; margin: -4px -6px; border-radius: 7px; transition: background .3s ease; } body.fx-premium .cities-col li:hover { background: rgba(236,197,143,0.06) !important; } body.fx-premium .cities-col li .code { color: #E6DCCB !important; } body.fx-premium .cities-col li.is-hq { color: #ECC58F !important; }