:root { --th-primary: #1F4D3A;
--th-primary-dark: #163A2C;
--th-primary-light: #2E6B50;
--th-secondary: #1C1B18;
--th-secondary-dark: #000000;
--th-secondary-light: #44403C;
--th-accent: #2E6B50;
--th-action: #1F4D3A;
--th-action-dark: #163A2C;
--th-action-light: #2E6B50;
--th-reward: #E8590C;
--th-reward-dark: #C74A08;
--th-reward-light: #FF7A2E;
--th-dark: #FAFAF8;
--th-dark-light: #F0F3EE;
--th-text: #1C1B18;
--th-text-muted: #57534E;
--th-card-bg: #FFFFFF;
--th-border: rgba(28, 27, 24, 0.08);
--th-radius: 14px;
--th-shadow: 0 2px 12px rgba(22, 42, 32, 0.07); --color-primary: #D9A441;
--color-primary-dark: #1F4D3A;
--color-bg-light: #FAFAF8;
--color-bg-warm: #F0F3EE;
--color-cta: #1F4D3A;
--color-cta-hover: #163A2C;
--color-dark: #1C1B18;
--color-text-primary: #1C1B18;
--color-text-secondary: #57534E;
--color-gold-glow: rgba(232, 89, 12, 0.25); --mh-ink: #1C1B18;
--mh-green: #1F4D3A;
--mh-green-deep: #12281F;
--mh-orange: #E8590C;
--mh-paper: #FAFAF8;
--mh-mist: #F0F3EE;
--mh-line: rgba(28, 27, 24, 0.08);
--mh-radius: 14px;
--mh-shadow-sm: 0 2px 10px rgba(22, 42, 32, 0.06);
--mh-shadow-md: 0 12px 28px rgba(22, 42, 32, 0.13);
--mh-display: 'Smiley Sans Oblique', 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
--mh-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Consolas, monospace;
} .treasure-home {
background: var(--mh-paper) !important;
color: var(--mh-ink);
}
.treasure-home .th-treasures,
.treasure-home .th-routes,
.treasure-home .th-more-features,
.treasure-home .th-social-proof,
.treasure-home .th-premium-section,
.treasure-home .th-cooperation-simple {
background: transparent !important;
}
.treasure-home .th-routes,
.treasure-home .th-social-proof {
background: var(--mh-mist) !important;
padding-top: 48px;
padding-bottom: 48px;
}
.treasure-home section { margin-bottom: 56px; }
.treasure-home .th-routes, .treasure-home .th-social-proof { margin-bottom: 56px; } .treasure-home .th-section-title,
.treasure-home .th-section-title-v2 {
font-family: var(--mh-display);
font-size: clamp(1.6rem, 3.4vw, 2.3rem) !important;
font-weight: 700;
color: var(--mh-ink) !important;
text-shadow: none !important;
letter-spacing: 0.01em;
line-height: 1.2;
}
.treasure-home .th-section-title-v2 .title-icon,
.treasure-home .th-section-title-v2 .title-badge { display: none !important; }
.treasure-home .th-section-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mh-mono);
font-size: 12px !important;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--mh-green) !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin-bottom: 10px;
text-transform: uppercase;
}
.treasure-home .th-section-tag::before {
content: '';
width: 22px;
height: 2px;
background: var(--mh-orange);
display: inline-block;
}
.treasure-home .th-section-subtitle { color: var(--th-text-muted) !important; } .mh-hero {
position: relative;
margin: 0 0 64px !important; padding: 150px 24px 64px !important;
background:
radial-gradient(1100px 500px at 85% -10%, rgba(46, 107, 80, 0.55), transparent 60%),
linear-gradient(160deg, var(--mh-green-deep) 0%, #17352A 55%, var(--mh-green) 100%);
overflow: hidden;
} .mh-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.4'%3E%3Cpath d='M20 170c30-60 90-80 150-60s130 10 150-30'/%3E%3Cpath d='M0 240c50-40 120-50 180-30s130 30 160 0'/%3E%3Cpath d='M-10 100C40 60 110 70 170 95s140 15 180-25'/%3E%3Ccircle cx='250' cy='250' r='36'/%3E%3Ccircle cx='250' cy='250' r='58'/%3E%3Ccircle cx='250' cy='250' r='82'/%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.mh-hero-inner {
position: relative;
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
gap: 48px;
align-items: center;
}
.mh-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mh-mono);
font-size: 13px;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.82);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
padding: 6px 14px;
margin: 0 0 22px;
}
.mh-live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mh-orange);
box-shadow: 0 0 0 0 rgba(232, 89, 12, 0.55);
animation: mh-pulse 2.2s ease-out infinite;
}
@keyframes mh-pulse {
0% { box-shadow: 0 0 0 0 rgba(232, 89, 12, 0.55); }
70% { box-shadow: 0 0 0 9px rgba(232, 89, 12, 0); }
100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, 0); }
}
.mh-hero-title {
font-family: var(--mh-display);
font-size: clamp(2.1rem, 4.6vw, 3.4rem);
line-height: 1.16;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 24px;
text-wrap: balance;
}
.mh-hero-steps {
list-style: none;
margin: 0 0 30px;
padding: 0;
display: grid;
gap: 12px;
}
.mh-hero-steps li {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.88);
font-size: 1.02rem;
}
.mh-hero-steps li .fa {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #FFC69B;
font-size: 14px;
}
.mh-hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.mh-btn {
display: inline-flex;
align-items: center;
gap: 10px;
border-radius: 12px;
padding: 14px 26px;
font-size: 1rem;
font-weight: 700;
text-decoration: none !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mh-btn-accent {
background: var(--mh-orange);
color: #FFFFFF !important;
box-shadow: 0 10px 24px rgba(232, 89, 12, 0.35);
}
.mh-btn-accent:hover {
background: #C74A08;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(232, 89, 12, 0.4);
color: #FFFFFF !important;
}
.mh-btn-ghost {
background: transparent;
color: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(255, 255, 255, 0.32);
}
.mh-btn-ghost:hover {
background: rgba(255, 255, 255, 0.1);
color: #FFFFFF !important;
transform: translateY(-2px);
}
.mh-btn-ghost .fa { font-size: 13px; }
.mh-hero-subtext {
color: rgba(255, 255, 255, 0.62);
font-size: 0.92rem;
margin: 0 0 26px;
}
.mh-hero-coords {
font-family: var(--mh-mono);
font-size: 12px;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.4);
margin: 0;
border-top: 1px dashed rgba(255, 255, 255, 0.18);
padding-top: 14px;
} .mh-hero-map { position: relative; }
.mh-map-frame {
position: relative;
height: clamp(420px, 54vh, 560px) !important;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42);
background: #DDE6DF;
}
.mh-map-frame #map8 { width: 100%; height: 100% !important; min-height: 0 !important; } .mh-hero-path {
position: absolute;
left: -120px;
bottom: -30px;
width: 200px;
height: 240px;
color: var(--mh-orange);
opacity: 0.9;
pointer-events: none;
z-index: 2;
}
.mh-hero-path #mhTrailPath { animation: mh-trail 14s linear infinite; }
@keyframes mh-trail { to { stroke-dashoffset: -160; } } .mh-hero #th-strip-wrap {
max-width: 1240px;
margin: 26px auto 0;
position: relative;
}
.mh-hero .th-strip-label, .mh-hero .th-strip-more { color: rgba(255, 255, 255, 0.85) !important; } .treasure-home .th-premium-card,
.treasure-home .th-treasure-card,
.treasure-home .th-route-card,
.treasure-home .th-story-card,
.treasure-home .th-entrance-card {
background: #FFFFFF !important;
border: 1px solid var(--mh-line) !important;
border-radius: var(--mh-radius) !important;
box-shadow: var(--mh-shadow-sm) !important;
overflow: hidden;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.treasure-home .th-premium-card:hover,
.treasure-home .th-treasure-card:hover,
.treasure-home .th-route-card:hover,
.treasure-home .th-story-card:hover,
.treasure-home .th-entrance-card:hover {
transform: translateY(-4px) !important;
box-shadow: var(--mh-shadow-md) !important;
border-color: rgba(31, 77, 58, 0.35) !important;
} .th-premium-section { max-width: 1240px; margin: 0 auto 56px; padding: 0 16px; }
.th-premium-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.th-premium-card { display: block; text-decoration: none; color: var(--mh-ink); }
.th-premium-img { position: relative; width: 100%; aspect-ratio: 16/10; background-size: cover; background-position: center; background-repeat: no-repeat; }
.th-premium-body { padding: 14px 16px 16px; }
.th-premium-name { font-size: 16px; font-weight: 700; margin: 0 0 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.th-premium-metaline { font-size: 13px; color: var(--th-text-muted); margin-bottom: 10px; }
.th-premium-metaline .fa { color: var(--mh-green); margin-right: 4px; }
.th-premium-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.th-premium-price { font-size: 18px; font-weight: 800; color: var(--mh-orange); font-family: var(--mh-mono); }
.th-premium-price s { font-size: 13px; color: #A8A29E; font-weight: 400; }
.th-premium-sold { font-size: 12px; color: var(--th-text-muted); }
.th-premium-sold .fa { color: var(--mh-orange); }
@media (max-width: 768px) { .th-premium-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 480px) { .th-premium-name { font-size: 14px; } } .mh-img-fallback {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--mh-mist) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%231F4D3A' stroke-opacity='0.1' stroke-width='1.2'%3E%3Cpath d='M10 110c25-40 60-52 100-40s85 8 100-20'/%3E%3Cpath d='M0 160c35-28 80-34 120-20s85 20 105 0'/%3E%3Ccircle cx='165' cy='165' r='24'/%3E%3Ccircle cx='165' cy='165' r='40'/%3E%3C/g%3E%3C/svg%3E") !important;
}
.mh-img-fallback .fa { font-size: 34px; color: rgba(31, 77, 58, 0.35); } .mh-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
background: rgba(255, 255, 255, 0.94) !important;
color: var(--mh-ink) !important;
border: 0 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
text-shadow: none !important;
}
.mh-badge-accent { background: var(--mh-orange) !important; color: #FFFFFF !important; }
.mh-badge-green, .mh-badge.status-ongoing { background: var(--mh-green) !important; color: #FFFFFF !important; }
.mh-badge.status-planning { background: rgba(255, 255, 255, 0.94) !important; color: var(--mh-green) !important; }
.mh-badge.status-completed { background: rgba(28, 27, 24, 0.62) !important; color: #FFFFFF !important; } .mh-difficulty {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 11px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 600 !important;
background: rgba(255, 255, 255, 0.94) !important;
color: var(--mh-ink) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
text-shadow: none !important;
}
.mh-diff-dots { display: inline-flex; gap: 3px; }
.mh-diff-dots i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mh-green);
display: inline-block;
}
.mh-level-3 .mh-diff-dots i { background: #D9A441; }
.mh-level-4 .mh-diff-dots i { background: var(--mh-orange); } .treasure-home .th-treasure-location .fa,
.treasure-home .th-route-meta .fa { color: var(--mh-green); margin-right: 3px; }
.treasure-home .th-treasure-cta { color: var(--mh-green) !important; font-weight: 600; } .treasure-home .th-btn.th-btn-outline {
color: var(--mh-green) !important;
border: 2px solid var(--mh-green) !important;
background: transparent !important;
}
.treasure-home .th-btn.th-btn-outline:hover {
background: var(--mh-green) !important;
color: #FFFFFF !important;
}
.treasure-home .th-btn.th-btn-primary {
background: var(--mh-green) !important;
border-color: var(--mh-green) !important;
color: #FFFFFF !important;
box-shadow: 0 6px 18px rgba(31, 77, 58, 0.28) !important;
text-shadow: none !important;
}
.treasure-home .th-btn.th-btn-primary:hover { background: var(--th-action-dark) !important; }
.treasure-home .th-btn.th-btn-secondary {
background: #FFFFFF !important;
color: var(--mh-green) !important;
border: 2px solid rgba(31, 77, 58, 0.4) !important;
text-shadow: none !important;
}
.treasure-home .th-btn.th-btn-secondary:hover { border-color: var(--mh-green) !important; }
.treasure-home .th-btn-mini-action {
background: var(--mh-mist) !important;
color: var(--mh-green) !important;
border: 1px solid rgba(31, 77, 58, 0.25) !important;
border-radius: 9px !important;
font-weight: 600;
}
.treasure-home .th-btn-text-action { color: var(--mh-green) !important; font-weight: 600; } .welcome-toast {
background: #FFFFFF !important;
color: var(--mh-ink) !important;
border: 1px solid var(--mh-line) !important;
border-top: 3px solid var(--mh-orange) !important;
border-radius: var(--mh-radius) !important;
box-shadow: var(--mh-shadow-md) !important;
max-width: 280px !important;
padding: 16px !important;
}
.welcome-toast .toast-icon {
background: var(--mh-mist) !important;
color: var(--mh-orange) !important;
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 18px !important;
}
.welcome-toast h4 { color: var(--mh-ink) !important; text-shadow: none !important; }
.welcome-toast p, .welcome-toast small { color: var(--th-text-muted) !important; }
.welcome-toast p strong { color: var(--mh-orange) !important; }
.welcome-toast .toast-btn {
background: var(--mh-orange) !important;
color: #FFFFFF !important;
border-radius: 10px !important;
font-weight: 700 !important;
text-shadow: none !important;
}
.welcome-toast .toast-close { color: var(--th-text-muted) !important; } .home .cdwmg-fab-stack {
opacity: 0.45;
transform: scale(0.9);
transform-origin: right center;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.home .cdwmg-fab-stack:hover { opacity: 1; transform: scale(1); }
.treasure-home .th-fab {
background: var(--mh-green) !important;
color: #FFFFFF !important;
box-shadow: 0 10px 26px rgba(31, 77, 58, 0.4) !important;
font-size: 20px !important;
text-shadow: none !important;
}
.treasure-home .th-fab:hover { background: var(--th-action-dark) !important; } .treasure-home .th-app-section {
background:
radial-gradient(900px 400px at 15% 110%, rgba(46, 107, 80, 0.5), transparent 60%),
var(--mh-green-deep) !important;
position: relative;
overflow: hidden;
}
.treasure-home .th-app-section .th-app-title { color: #FFFFFF !important; font-family: var(--mh-display); }
.treasure-home .th-app-section .th-app-desc { color: rgba(255, 255, 255, 0.72) !important; }
.treasure-home .th-qr-code img { border-radius: var(--mh-radius); } .treasure-home .th-coop-banner {
background: #FFFFFF !important;
border: 1px solid var(--mh-line) !important;
border-radius: var(--mh-radius) !important;
box-shadow: var(--mh-shadow-sm) !important;
} .treasure-home .th-story-img-placeholder {
background: var(--mh-mist) !important;
color: rgba(31, 77, 58, 0.4) !important;
}
.treasure-home .th-avatar { border: 2px solid var(--mh-mist); }
.treasure-home .th-story-author strong { color: var(--mh-ink) !important; text-shadow: none !important; }
.treasure-home .th-story-author span { color: var(--th-text-muted) !important; }
.treasure-home .th-story-text { color: var(--mh-ink) !important; } .treasure-home .th-entrance-card .fa { color: var(--mh-green) !important; }
.treasure-home .th-entrance-card h3 { color: var(--mh-ink) !important; }
.treasure-home .th-entrance-card p { color: var(--th-text-muted) !important; } .mh-map-demo-card {
position: absolute;
top: 16px;
right: 16px;
z-index: 1100; display: flex;
flex-direction: column;
gap: 7px;
width: 235px;
padding: 14px 16px;
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%),
#F7EFDC;
border: 1.5px dashed rgba(139, 105, 20, 0.55);
border-radius: 13px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
color: #4A3A1A;
text-decoration: none !important;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mh-map-demo-card:hover {
transform: translateY(-3px) rotate(-0.5deg);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
color: #4A3A1A;
}
.mh-demo-badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--mh-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: #8B6914;
text-transform: uppercase;
}
.mh-demo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mh-orange);
box-shadow: 0 0 0 0 rgba(232, 89, 12, 0.5);
animation: mh-pulse 2.2s ease-out infinite;
}
.mh-demo-title {
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: #2C1F0E;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mh-demo-coords {
font-family: var(--mh-mono);
font-size: 11px;
color: rgba(74, 58, 26, 0.65);
letter-spacing: 0.04em;
}
.mh-demo-cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 3px;
padding-top: 9px;
border-top: 1px dashed rgba(139, 105, 20, 0.35);
font-size: 13px;
font-weight: 700;
color: var(--mh-green);
}
@media (max-width: 768px) { .mh-map-demo-card {
top: auto;
bottom: 12px;
left: 12px;
right: 12px;
width: auto;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 6px 12px;
padding: 10px 14px;
}
.mh-demo-title { font-size: 13px; -webkit-line-clamp: 1; flex: 1 1 100%; }
.mh-demo-coords { display: none; }
.mh-demo-cta { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
.mh-demo-dot { animation: none !important; }
.mh-map-demo-card { transition: none !important; }
} .mh-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.mh-reveal.mh-in { opacity: 1; transform: none; } :focus-visible { outline: 2px solid var(--mh-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.mh-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.mh-live-dot, .mh-hero-path #mhTrailPath { animation: none !important; }
.treasure-home .th-premium-card, .treasure-home .th-treasure-card,
.treasure-home .th-route-card, .treasure-home .th-story-card,
.treasure-home .th-entrance-card, .mh-btn { transition: none !important; }
} @media (max-width: 980px) {
.mh-hero { padding: 40px 16px 48px !important; }
.mh-hero-inner { grid-template-columns: 1fr; gap: 30px; }
.mh-map-frame { height: 400px !important; }
.mh-hero-path { display: none; }
.mh-hero-title { font-size: clamp(1.8rem, 6.4vw, 2.4rem); }
}
@media (max-width: 560px) {
.mh-hero-actions .mh-btn { width: 100%; justify-content: center; }
.mh-map-frame { height: 330px !important; }
.welcome-toast { max-width: calc(100vw - 32px) !important; }
}