/* ===== VARIABLES ===== */ :root { --bg-main: #f8f7f5; } /* ===== BASE ===== */ html { margin: 0 auto; background: var(--bg-main); font-size: 100PX; } * { max-width: 750px; margin: 0 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial, sans-serif; background: var(--bg-main); min-height: 100vh; margin: 0 auto; color: #333; } img { width: 100%; } /* ===== TOP BANNER (marquee) ===== */ .top-banner { background: linear-gradient(90deg, #4ce173, #2cbb86); color: var(--bg-main); font-size: .26rem; line-height: .56rem; height: .56rem; overflow: hidden; white-space: nowrap; display: flex; align-items: center; padding: 0 .2rem; } .banner-icon { width: .36rem; height: .36rem; margin-right: .14rem; flex-shrink: 0; filter: brightness(0) invert(1); } .marquee-wrap { width: 100%; overflow: hidden; white-space: nowrap; box-sizing: border-box; height: 100%; } .marquee-wrap p { display: inline-block; padding-left: 100%; animation: marquee-scroll 18s linear infinite; font-weight: 600; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* ===== HEADER / LOGO ===== */ .header { width: 100%; background: #fff; padding: .3rem 0; text-align: center; border-bottom: 1px solid #eee; } .logo { display: flex; justify-content: center; align-items: center; } .logo-img { width: 2.6rem; height: auto; display: block; } /* ===== HERO SECTION ===== */ .hero { background: linear-gradient(135deg, #fdfcfb 0%, #f5e6c8 100%); text-align: center; padding: .5rem .4rem .6rem; } .hero-banner { width: 100%; height: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: -3px; } .hero h1 { font-size: .44rem; font-weight: 800; color: #222; line-height: 1.35; margin-bottom: .2rem; } .hero-desc { font-size: .3rem; color: #666; line-height: 1.6; margin-bottom: .4rem; } .cta-main { display: inline-block; background: linear-gradient(135deg, #3bb58e, #e8b830); color: var(--bg-main); font-size: .36rem; font-weight: 700; padding: .22rem .7rem; border-radius: .12rem; text-decoration: none; box-shadow: 0 4px 16px rgba(212, 160, 23, 0.35); transition: transform .2s, box-shadow .2s; } .cta-main:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(212, 160, 23, 0.25); } /* ===== NAV BUTTONS ===== */ .nav-buttons { display: flex; align-items: stretch; gap: .2rem; padding: .4rem .3rem; background: var(--bg-main); } .nav-btn { display: flex; align-items: center; justify-content: center; font-size: .3rem; font-weight: 700; padding: .2rem .15rem; border-radius: .1rem; text-decoration: none; text-align: center; transition: transform .15s, box-shadow .15s; box-sizing: border-box; } .nav-btn:active { transform: scale(0.97); } .btn-login { flex: 1; background: #fff; color: #3bb58e; border: 2px solid #3bb58e; border-radius: .1rem; font-size: .32rem; } .btn-register { flex: 1; background: #3bb58e; color: #fff; border: none; border-radius: .1rem; font-size: .32rem; } .btn-app { flex-direction: column; background: transparent; color: #3bb58e; padding: .1rem .2rem; font-size: .24rem; line-height: 1.3; gap: .06rem; } .btn-app .app-icon { width: .52rem; height: .52rem; } /* ===== APP CARD (App Store style) ===== */ .app-card { background: var(--bg-main); padding: .3rem; margin: 0; } .app-card-top { display: flex; align-items: center; gap: .24rem; padding-bottom: .28rem; border-bottom: 1px solid #eee; } .app-card-icon { width: 2rem; height: 2rem; border-radius: .28rem; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .app-card-info { display: flex; flex-direction: column; gap: .08rem; flex: 1; margin-left: 20px; } .app-card-name { font-size: .46rem; font-weight: 800; color: #222; } .app-card-subtitle { font-size: .34rem; color: #888; } .app-card-btn { display: inline-block; background: #007aff; color: #fff; font-size: .26rem; font-weight: 700; padding: .1rem .4rem; border-radius: .36rem; text-decoration: none; text-align: center; width: fit-content; margin-top: .06rem; transition: transform .15s; } .app-card-btn:active { transform: scale(0.95); } .app-card-stats { display: flex; justify-content: space-around; padding-top: .24rem; } .app-card-stat { display: flex; flex-direction: column; align-items: center; gap: .04rem; position: relative; flex: 1; } .app-card-stat + .app-card-stat::before { content: ""; position: absolute; left: 0; top: 15%; height: 70%; width: 1px; background: #e0e0e0; } .app-card-stat-value { font-size: .34rem; font-weight: 800; color: #888; } .app-card-stat-label { font-size: .2rem; color: #aaa; } .app-card-stat:first-child .app-card-stat-label { color: #ff9500; font-size: .2rem; letter-spacing: .01rem; } /* ===== SECTION TITLE ===== */ .section-title { background: url(../img/title_bg.png) no-repeat center center; background-size: 100% 100%; color: var(--bg-main); font-size: .38rem; font-weight: 800; text-align: center; margin-bottom: .35rem; padding: .2rem .3rem; border-radius: .08rem; } .section-title::after { display: none; } /* ===== QUICK GUIDE ===== */ .quick-guide { padding: .5rem .3rem; background: var(--bg-main); } .guide-steps { display: flex; flex-direction: column; gap: .24rem; margin-bottom: .3rem; } .guide-step { display: flex; align-items: center; gap: .24rem; background: #fff; padding: .28rem .3rem; border-radius: .14rem; box-shadow: 0 2px 10px rgba(0,0,0,0.04); } .guide-step-num { width: .6rem; height: .6rem; background: #3bb58e; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .3rem; font-weight: 800; flex-shrink: 0; } .guide-step-text { font-size: .3rem; color: #333; font-weight: 600; } .guide-note { font-size: .26rem; color: #888; text-align: center; line-height: 1.5; } /* ===== QUICK INFO ===== */ .quick-info { padding: .5rem .3rem; background: var(--bg-main); } .info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .2rem; } .info-list-item { background: #fff; padding: .26rem .3rem; border-radius: .12rem; font-size: .28rem; color: #444; font-weight: 500; line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,0.03); position: relative; padding-left: .6rem; } .info-list-item::before { content: "\2713"; position: absolute; left: .24rem; color: #3bb58e; font-weight: 800; font-size: .3rem; } /* ===== SEO ARTICLE ===== */ .seo-article { padding: .5rem .3rem; background: var(--bg-main); } .article-body { margin-bottom: .4rem; } .article-body p, .article-intro { font-size: .28rem; color: #555; line-height: 1.7; margin-bottom: .2rem; } .article-highlights { list-style: none; padding: 0; margin: .2rem 0; display: flex; flex-direction: column; gap: .12rem; } .article-highlights li { font-size: .28rem; color: #444; padding-left: .4rem; position: relative; line-height: 1.5; } .article-highlights li::before { content: "\2713"; position: absolute; left: 0; color: #3bb58e; font-weight: 800; } .article-cta { font-size: .28rem; color: #3bb58e; font-weight: 700; margin-top: .16rem; } .article-heading { font-size: .34rem; font-weight: 800; color: #222; margin-bottom: .2rem; margin-top: .1rem; } .article-intro { margin-bottom: .3rem; } .feature-cards { display: flex; flex-direction: column; gap: .24rem; margin-bottom: .4rem; } .feature-card { background: #fff; padding: .3rem; border-radius: .14rem; box-shadow: 0 2px 10px rgba(0,0,0,0.04); } .feature-card h4 { font-size: .3rem; font-weight: 700; color: #222; margin-bottom: .16rem; } .feature-card ul { list-style: none; padding: 0; margin: 0 0 .12rem; display: flex; flex-direction: column; gap: .08rem; } .feature-card li { font-size: .26rem; color: #555; line-height: 1.5; padding-left: .32rem; position: relative; } .feature-card li::before { content: "\2022"; position: absolute; left: .1rem; color: #3bb58e; font-weight: 800; } .feature-note { font-size: .24rem; color: #3bb58e; font-weight: 600; margin: 0; } .article-conclusion { background: #fff; padding: .3rem; border-radius: .14rem; box-shadow: 0 2px 10px rgba(0,0,0,0.04); } .article-conclusion p { font-size: .28rem; color: #555; line-height: 1.7; margin-bottom: .12rem; } /* ===== SEO CONTENT / FAQ ===== */ .seo-content { padding: .5rem .3rem; background: var(--bg-main); } .faq-list { display: flex; flex-direction: column; gap: .2rem; } .faq-item { background: var(--bg-main); border-radius: .14rem; overflow: hidden; border: 1px solid #eee; } .faq-question { display: block; padding: .26rem .3rem; font-size: .32rem; font-weight: 700; color: #333; cursor: pointer; position: relative; padding-right: .6rem; } .faq-question::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-size: .4rem; color: #3bb58e; font-weight: 700; transition: transform .3s; } .faq-question.active::after { content: "−"; } .faq-answer { display: none; padding: 0 .3rem .26rem; } .faq-answer p { font-size: .28rem; color: #666; line-height: 1.65; } /* ===== TRUST BLOCK ===== */ .trust-block { padding: .5rem .3rem; background: var(--bg-main); } .trust-list { display: flex; flex-direction: column; gap: .24rem; } .trust-item { display: flex; align-items: flex-start; gap: .24rem; background: var(--bg-main); padding: .3rem; border-radius: .14rem; box-shadow: 0 2px 10px rgba(0,0,0,0.04); } .trust-img { width: 1.2rem; height: 1.2rem; border-radius: .12rem; object-fit: cover; flex-shrink: 0; } .trust-text strong { font-size: .32rem; color: #222; display: block; margin-bottom: .08rem; } .trust-text p { font-size: .26rem; color: #777; line-height: 1.55; } /* ===== STATS / SOCIAL PROOF ===== */ .stats-block { padding: .5rem .3rem; background: var(--bg-main); } .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; } .grid-item { display: flex; flex-direction: column; align-items: center; padding: .3rem .15rem; border-right: 1px solid #eee; border-bottom: 1px solid #eee; } .grid-item:nth-child(2n) { border-right: none; } .grid-item:nth-child(n+3) { border-bottom: none; } .grid-item .digt { color: #3bb58e; font-size: .44rem; font-weight: 800; } .grid-item .dest { color: #888; font-size: .26rem; margin-top: .06rem; } .stat-icon { width: .42rem; height: .42rem; margin-bottom: .06rem; filter: brightness(0) saturate(100%) invert(62%) sepia(52%) saturate(452%) hue-rotate(111deg) brightness(92%) contrast(87%); } /* ===== LIVE STATUS ===== */ .live-status { padding: .5rem .3rem; background: var(--bg-main); } .status-list { display: flex; flex-direction: column; gap: .16rem; } .status-row { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: .24rem .3rem; border-radius: .12rem; box-shadow: 0 2px 8px rgba(0,0,0,0.03); } .status-label { font-size: .28rem; color: #555; font-weight: 500; } .status-value { font-size: .28rem; color: #333; font-weight: 700; } .status-ok { color: #3bb58e; } /* ===== SOCIAL PROOF LIST ===== */ .social-proof-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .2rem; } .social-proof-item { display: flex; align-items: center; gap: .2rem; background: #fff; padding: .26rem .3rem; border-radius: .12rem; box-shadow: 0 2px 8px rgba(0,0,0,0.03); } .social-proof-value { font-size: .34rem; font-weight: 800; color: #3bb58e; min-width: 1.6rem; } .social-proof-text { font-size: .28rem; color: #555; font-weight: 500; } /* ===== FOOTER ===== */ .footer { background: var(--bg-main); border-top: 1px solid #eee; padding: .5rem .3rem 1.2rem; text-align: center; } .footer-links { display: flex; justify-content: center; gap: .3rem; margin-bottom: .4rem; } .footer-links a { display: block; } .footer-links img { width: 1rem; height: auto; border-radius: .12rem; transition: transform .15s; } .footer-links img:active { transform: scale(0.95); } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: .15rem; } .age-badge { display: inline-flex; align-items: center; justify-content: center; width: .7rem; height: .7rem; border-radius: 50%; border: 3px solid #3bb58e; font-size: .28rem; font-weight: 900; color: #3bb58e; } .footer-inner p { font-size: .24rem; color: #999; line-height: 1.5; } /* ===== FLOATING BAR MOBILE ===== */ .floating-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 10rem; display: flex; gap: 0; z-index: 1000; box-shadow: 0 -2px 12px rgba(0,0,0,0.1); } .floating-btn { flex: 1; text-align: center; padding: .26rem 0; font-size: .32rem; font-weight: 700; text-decoration: none; transition: opacity .15s; } .floating-btn:active { opacity: .85; } .floating-login { background: #fff; color: #3bb58e; border-top: 2px solid #3bb58e; } .floating-go { background: #3bb58e; color: #fff; } /* ===== BACK TO TOP ===== */ .goTop { position: fixed; bottom: 1.6rem; right: .2rem; width: .7rem; height: .7rem; background: #3bb58e; color: var(--bg-main); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .28rem; cursor: pointer; z-index: 999; box-shadow: 0 2px 10px rgba(212,160,23,0.3); opacity: 0; transition: opacity .3s; } .goTop.show { opacity: 1; } /* ===== DESKTOP CAP ===== */ @media screen and (min-width: 751px) { body, html, .main, .footer { max-width: 576PX !important; } }