/* ═══════════════════════════════════════════════════════════════════ DESIGN TOKEN SYSTEM — IDENTICAL TO LANDING PAGE ═══════════════════════════════════════════════════════════════════ */ :root { --ink: #080604; --espresso: #120B08; --mocha: #1E1410; --cocoa: #4E3326; --taupe: #A8856A; --latte: #C7A58C; --almond: #E2D4C5; --ivory: #F4EDE6; --b-subtle: rgba(255,255,255,0.065); --b-warm: rgba(199,165,140,0.32); --b-glow: rgba(199,165,140,0.55); --shadow-card: 0 24px 64px rgba(0,0,0,0.6); --shadow-glow: 0 0 32px rgba(183,147,121,0.22); --r-pill: 9999px; --r-card: 1.5rem; --r-modal: 2rem; --lux-dark-bg: linear-gradient(150deg,#2E1F18 0%,#160E0A 60%,#0E0907 100%); --lux-dark-shadow: 0 0 0 1px rgba(199,165,140,0.42), 0 0 24px rgba(183,147,121,0.28), inset 0 1px 0 rgba(255,255,255,0.13), inset 0 -1px 0 rgba(0,0,0,0.4); --lux-primary-bg: linear-gradient(150deg,#EAD9C8 0%,#C9A88E 50%,#8E7260 100%); --lux-primary-shadow: inset 0 1px 2px rgba(255,255,255,0.7), 0 14px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.16), 0 0 32px rgba(199,165,140,0.30); --lux-ghost-bg: rgba(255,255,255,0.022); --lux-ghost-border: rgba(255,255,255,0.09); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:'Inter',sans-serif; background:radial-gradient(ellipse 100% 60% at 60% -10%,rgba(78,51,38,0.18) 0%,transparent 55%), linear-gradient(180deg,#060504 0%,#0d0a08 100%); color:var(--ivory); min-height:100vh; overflow-x:hidden; } .f-head {font-family:'Playfair Display',serif;} .f-edit {font-family:'Cormorant Garamond',serif;} .f-caps {font-family:'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:0.18em;} .f-script {font-family:'Pinyon Script',cursive;} .lang-zh{display:none;} body.zh .lang-en{display:none;} body.zh .lang-zh{display:inline;} body.zh div.lang-zh{display:block;} body.zh p.lang-zh{display:block;} body.zh span.lang-zh{display:inline;} /* ── LUX SYSTEM ── */ .lux{ display:inline-flex;align-items:center;justify-content:center; border:none;cursor:pointer;text-decoration:none; transition:transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s ease; position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent; } .lux::after{ content:'';position:absolute;inset:0;border-radius:inherit; background:linear-gradient(180deg,rgba(255,255,255,0.07) 0%,transparent 60%); pointer-events:none; } .lux-dark{ background:var(--lux-dark-bg);color:var(--almond); box-shadow:var(--lux-dark-shadow); } .lux-dark:hover{ transform:translateY(-2px) scale(1.035); box-shadow:0 0 0 1px rgba(199,165,140,0.68),0 0 38px rgba(183,147,121,0.45), inset 0 1px 0 rgba(255,255,255,0.22),inset 0 -1px 0 rgba(0,0,0,0.4); } .lux-dark:active{transform:translateY(0) scale(0.98);} .lux-primary{ background:var(--lux-primary-bg);color:#120B08;font-weight:800; box-shadow:var(--lux-primary-shadow); } .lux-primary:hover{ transform:translateY(-3px); box-shadow:inset 0 1px 3px rgba(255,255,255,0.9),0 20px 44px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.32),0 0 44px rgba(199,165,140,0.52); } .lux-primary:active{transform:translateY(0);} .lux-ghost{ background:var(--lux-ghost-bg);color:var(--taupe); box-shadow:inset 0 0 0 1px var(--lux-ghost-border),inset 0 1px 0 rgba(255,255,255,0.04); } .lux-ghost:hover{ color:var(--almond);background:rgba(255,255,255,0.045); box-shadow:inset 0 0 0 1px var(--b-warm),inset 0 1px 0 rgba(255,255,255,0.08); transform:translateY(-1px); } .lux-pill{border-radius:var(--r-pill);} .lux-card{border-radius:var(--r-card);} .lux-icon{width:48px;height:48px;border-radius:var(--r-pill);flex-shrink:0;} .lux-icon-active{ box-shadow:0 0 0 1px rgba(199,165,140,0.72),0 0 28px rgba(183,147,121,0.5), inset 0 1px 0 rgba(255,255,255,0.22),inset 0 -1px 0 rgba(0,0,0,0.4) !important; } .lux-cta{ font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase; letter-spacing:0.16em;font-size:0.7rem;padding:1.05rem 2.2rem;border-radius:var(--r-pill); } .lux-cta-lg{padding:1.2rem 2.8rem;font-size:0.76rem;} .nav-matrix{ background:linear-gradient(150deg,#1e1410 0%,#0e0a07 100%); border-radius:var(--r-pill);padding:0.32rem;display:inline-flex;gap:0.3rem; box-shadow:0 0 0 1px rgba(199,165,140,0.22),0 16px 44px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07); } .lang-pill{ display:inline-flex;align-items:center;gap:0.55rem; background:var(--lux-dark-bg);border-radius:var(--r-pill); padding:0.42rem 1rem 0.42rem 0.5rem;box-shadow:var(--lux-dark-shadow); cursor:pointer;user-select:none;transition:box-shadow 0.3s; } .lang-pill:hover{ box-shadow:0 0 0 1px rgba(199,165,140,0.68),0 0 28px rgba(183,147,121,0.38), inset 0 1px 0 rgba(255,255,255,0.18),inset 0 -1px 0 rgba(0,0,0,0.4); } .lang-pill__input{display:none;} .lang-pill__track{ position:relative;width:38px;height:20px; background:linear-gradient(180deg,#1a1210,#0d0907);border-radius:var(--r-pill); box-shadow:inset 0 2px 6px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.07); flex-shrink:0;transition:background 0.3s; } .lang-pill__knob{ position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%; background:linear-gradient(145deg,#ddd0c4,#967f6c); box-shadow:0 1px 4px rgba(0,0,0,0.55),0 0 6px rgba(199,165,140,0.3); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); } .lang-pill__input:checked ~ .lang-pill__track .lang-pill__knob{transform:translateX(18px);} .lang-pill__label{ font-family:'Montserrat',sans-serif;font-size:0.58rem;font-weight:700; text-transform:uppercase;letter-spacing:0.2em;color:var(--taupe);white-space:nowrap; } .card-smoked{ background:linear-gradient(145deg,#1e1410 0%,#130e0b 100%); border:1px solid var(--b-subtle);border-radius:var(--r-card); box-shadow:var(--shadow-card);transition:border-color 0.3s,box-shadow 0.3s; } .card-smoked:hover{border-color:var(--b-warm);box-shadow:var(--shadow-card),var(--shadow-glow);} .accordion-wrap{ background:linear-gradient(145deg,#1e1410 0%,#130e0b 100%); border:1px solid var(--b-subtle);border-radius:var(--r-card); box-shadow:var(--shadow-card);overflow:hidden;transition:border-color 0.3s,box-shadow 0.3s; } .accordion-wrap:hover{border-color:var(--b-warm);} .accordion-btn{ width:100%;padding:1.35rem 1.5rem;display:flex;justify-content:space-between;align-items:center; background:transparent;border:none;cursor:pointer;text-align:left;transition:background 0.25s; } .accordion-btn:hover{background:rgba(199,165,140,0.04);} .accordion-chevron{ width:20px;height:20px;flex-shrink:0;color:var(--taupe); transition:transform 0.42s cubic-bezier(0.4,0,0.2,1),color 0.25s; } .accordion-btn:hover .accordion-chevron{color:var(--almond);} .accordion-chevron.open{transform:rotate(180deg);} .accordion-body{max-height:0;overflow:hidden;transition:max-height 0.5s cubic-bezier(0.4,0,0.2,1);} .accordion-body.open{max-height:600px;} @keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}} .fade-up{animation:fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) forwards;opacity:0;} .d1{animation-delay:0.1s;}.d2{animation-delay:0.25s;}.d3{animation-delay:0.4s;}.d4{animation-delay:0.55s;} @keyframes drawCheck{to{stroke-dashoffset:0;}} .check-path{stroke-dasharray:100;stroke-dashoffset:100;animation:drawCheck 0.7s ease-out 0.5s forwards;} @keyframes ping{75%,100%{transform:scale(2.2);opacity:0;}} .ping{animation:ping 1.6s cubic-bezier(0,0,0.2,1) infinite;} @keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:0.35;}} .pulse-dot{animation:pulse-dot 2s ease-in-out infinite;} @keyframes spin-badge{to{transform:rotate(360deg);}} .badge-ring{animation:spin-badge 18s linear infinite;} .footer-bg{ background:linear-gradient(180deg,#0f0a07 0%,#1a1210 40%,#080604 100%); border-top:1px solid var(--b-warm); } ::-webkit-scrollbar{width:4px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--cocoa);border-radius:2px;} @media(max-width:768px){.hide-mobile{display:none!important;}} @media(min-width:769px){.hide-desktop{display:none!important;}} /* ── Map Popup Modal ── */ .map-overlay{ position:fixed;inset:0;z-index:3000; background:rgba(4,3,2,0.92); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); display:flex;align-items:center;justify-content:center; padding:1rem; opacity:0;pointer-events:none; transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1); } .map-overlay.open{opacity:1;pointer-events:all;} .map-box{ background:linear-gradient(160deg,#1e1410 0%,#140f0c 50%,#0e0a07 100%); box-shadow:0 0 0 1px var(--b-warm),0 30px 80px rgba(0,0,0,0.85),0 0 60px rgba(183,147,121,0.08); border-radius:var(--r-modal); width:100%;max-width:640px; max-height:90svh;overflow:hidden; transform:translateY(24px) scale(0.97); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); display:flex;flex-direction:column; } .map-overlay.open .map-box{transform:translateY(0) scale(1);} .map-header{ padding:1.5rem 2rem 1.25rem; border-bottom:1px solid var(--b-subtle); display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; } .map-close{ width:32px;height:32px;border-radius:9px;flex-shrink:0; background:var(--lux-dark-bg);box-shadow:var(--lux-dark-shadow); border:none;cursor:pointer;color:var(--almond); display:flex;align-items:center;justify-content:center; transition:all 0.2s; } .map-close:hover{box-shadow:0 0 0 1px rgba(199,165,140,0.68),0 0 28px rgba(183,147,121,0.45),inset 0 1px 0 rgba(255,255,255,0.22),inset 0 -1px 0 rgba(0,0,0,0.4);color:var(--ivory);} .map-embed-wrap{flex:1;min-height:0;position:relative;overflow:hidden;} .map-embed-wrap iframe{width:100%;height:380px;border:none;display:block;} .map-footer{ padding:1.25rem 2rem; border-top:1px solid var(--b-subtle); display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; } @media(max-width:600px){ .map-header{padding:1.25rem 1.25rem 1rem;} .map-footer{padding:1rem 1.25rem;flex-direction:column;align-items:stretch;} .map-embed-wrap iframe{height:280px;} }