Archived
139 lines
10 KiB
CSS
139 lines
10 KiB
CSS
/* MathBTI — 数学人格测试 独立页面 */
|
|
/* 移动端优先 · 卡片风 · 与数学脑主站统一 */
|
|
|
|
:root{--c-primary:#5B6AF0;--c-accent:#F97316;--c-text:#1E293B;--c-sub:#64748B;--c-muted:#94A3B8;--c-bg:#F8FAFC;--c-card:#FFF;--c-border:#E2E8F0;--shadow:0 4px 24px rgba(0,0,0,.06);--radius:16px;}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html{font-size:16px;-webkit-text-size-adjust:100%}
|
|
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--c-bg);color:var(--c-text);line-height:1.6;min-height:100dvh;overflow-x:hidden}
|
|
|
|
/* ---- App Container ---- */
|
|
.app{max-width:480px;margin:0 auto;padding:0 20px 40px;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center}
|
|
.screen{display:none;width:100%;flex-direction:column;align-items:center;animation:fadeIn .35s ease}
|
|
.screen.active{display:flex}
|
|
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
|
|
|
|
/* ---- Intro Screen ---- */
|
|
.intro-header{text-align:center;margin-bottom:28px}
|
|
.intro-logo{width:72px;height:72px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:linear-gradient(135deg,var(--c-primary),#818CF8);color:#fff;font-size:36px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 8px 32px rgba(91,106,240,.25),inset 0 -3px 0 rgba(0,0,0,.08)}
|
|
.intro-title{font-size:28px;font-weight:800;color:var(--c-text);margin-bottom:8px}
|
|
.intro-sub{font-size:15px;color:var(--c-sub);margin-bottom:12px}
|
|
.intro-meta{font-size:13px;color:var(--c-muted);background:var(--c-bg);display:inline-block;padding:6px 14px;border-radius:20px}
|
|
|
|
.intro-desc{display:flex;flex-direction:column;gap:8px;align-items:center;margin-bottom:24px;font-size:14px;color:var(--c-sub)}
|
|
.intro-desc span{background:var(--c-card);border:1px solid var(--c-border);border-radius:8px;padding:8px 16px;width:100%;text-align:center;max-width:320px}
|
|
|
|
.intro-axes{display:flex;flex-direction:column;gap:8px;margin-bottom:28px;width:100%;max-width:360px}
|
|
.intro-axis-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--c-card);border-radius:10px;border:1px solid var(--c-border)}
|
|
.axis-label{font-size:13px;color:var(--c-sub);flex:1;text-align:center}
|
|
.axis-emoji{font-size:18px}
|
|
|
|
.btn-start{width:100%;max-width:360px;padding:16px 0;background:linear-gradient(135deg,var(--c-primary),#818CF8);color:#fff;border:none;border-radius:14px;font-size:17px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(91,106,240,.3)}
|
|
.btn-start:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(91,106,240,.4)}
|
|
.btn-start:active{transform:scale(.98)}
|
|
|
|
/* ---- Quiz Screen ---- */
|
|
.quiz-progress-wrap{width:100%;max-width:400px;margin-bottom:24px}
|
|
.quiz-progress-bar{width:100%;height:6px;background:var(--c-border);border-radius:3px;overflow:hidden;margin-bottom:8px}
|
|
.quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--c-primary),#818CF8);border-radius:3px;transition:width .3s ease}
|
|
.quiz-progress-text{text-align:right;font-size:13px;color:var(--c-muted)}
|
|
|
|
.quiz-question{width:100%;max-width:400px;font-size:18px;font-weight:700;color:var(--c-text);margin-bottom:20px;line-height:1.5;text-align:center}
|
|
|
|
.quiz-options{width:100%;max-width:400px;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
|
|
.quiz-option{display:flex;align-items:center;padding:14px 16px;background:var(--c-card);border:2px solid var(--c-border);border-radius:12px;cursor:pointer;transition:all .2s}
|
|
.quiz-option input[type=radio]{display:none}
|
|
.quiz-option:hover{border-color:var(--c-primary)30;background:#F5F7FF}
|
|
.quiz-option.selected{border-color:var(--c-primary);background:#EEF0FF}
|
|
.opt-text{font-size:15px;color:var(--c-text);line-height:1.4}
|
|
|
|
.btn-next{width:100%;max-width:400px;padding:14px 0;background:var(--c-primary);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}
|
|
.btn-next:disabled{background:var(--c-border);color:var(--c-muted);cursor:not-allowed;box-shadow:none}
|
|
.btn-next:not(:disabled):hover{background:#4F5EE0;transform:translateY(-1px)}
|
|
|
|
/* ---- Result Screen ---- */
|
|
.result-header{text-align:center;margin-bottom:24px}
|
|
.result-portrait-wrap{margin-bottom:16px}
|
|
.result-portrait{width:96px;height:96px;border-radius:50%;margin:0 auto;box-shadow:0 4px 16px rgba(0,0,0,.08);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
|
|
.result-icon-fallback{display:flex}
|
|
.result-type-name{font-size:26px;font-weight:800;color:var(--c-text);margin-bottom:6px}
|
|
.result-tagline{font-size:14px;color:var(--c-sub);font-style:italic;margin-bottom:10px}
|
|
|
|
.result-mathematician{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:4px}
|
|
.clan-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600}
|
|
.mathematician-name{font-size:12px;color:var(--c-muted)}
|
|
|
|
.result-keywords{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:20px}
|
|
.kw-tag{padding:4px 12px;background:#EEF0FF;color:var(--c-primary);border-radius:20px;font-size:12px;font-weight:600}
|
|
|
|
.result-card{width:100%;max-width:400px;background:var(--c-card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
|
|
.result-card-title{font-size:14px;font-weight:700;color:var(--c-sub);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
|
|
.result-card-desc{font-size:14px;color:var(--c-text);line-height:1.7;margin-bottom:8px}
|
|
.result-card-short{font-size:13px;color:var(--c-sub);font-weight:500}
|
|
|
|
/* Bio Expander */
|
|
.bio-expander{width:100%;max-width:400px;background:var(--c-card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
|
|
.bio-expander-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;transition:background .15s}
|
|
.bio-expander-header:hover{background:#FAFBFC}
|
|
.bio-expander-left{display:flex;align-items:center;gap:8px}
|
|
.bio-expander-icon{font-size:16px}
|
|
.bio-expander-title{font-size:14px;font-weight:600;color:var(--c-text)}
|
|
.bio-arrow{font-size:12px;color:var(--c-muted);transition:transform .2s}
|
|
.bio-expander-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
|
|
.bio-inner{padding:0 18px 16px}
|
|
.bio-text{font-size:13px;color:var(--c-sub);line-height:1.7;margin-bottom:12px}
|
|
.bio-fact-box{display:flex;align-items:flex-start;gap:8px;background:#FEF9E7;border-radius:10px;padding:10px 14px}
|
|
.bio-fact-emoji{font-size:14px;flex-shrink:0}
|
|
.bio-fact-text{font-size:12px;color:#B45309;line-height:1.5}
|
|
|
|
/* Axes Bars */
|
|
.result-axes{width:100%;max-width:400px;margin-bottom:20px;display:none}
|
|
.axis-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
|
|
.axis-bar-label{font-size:12px;color:var(--c-sub);white-space:nowrap;min-width:56px;text-align:center}
|
|
.axis-bar-track{flex:1;height:6px;background:var(--c-border);border-radius:3px;overflow:hidden}
|
|
.axis-bar-fill{height:100%;background:linear-gradient(90deg,var(--c-primary),#818CF8);border-radius:3px;transition:width .5s ease}
|
|
|
|
/* Adopt */
|
|
.result-adopt{width:100%;max-width:400px;text-align:center;margin-bottom:20px}
|
|
.btn-adopt{width:100%;padding:14px 0;background:linear-gradient(135deg,#F97316,#FB923C);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(249,115,22,.3)}
|
|
.btn-adopt:hover{transform:translateY(-1px)}
|
|
.btn-adopt:active{transform:scale(.98)}
|
|
.btn-adopt.adopted{background:var(--c-border);color:var(--c-muted);box-shadow:none;cursor:default}
|
|
.adopt-hint{font-size:12px;color:var(--c-muted);margin-top:8px;line-height:1.5}
|
|
|
|
/* Share */
|
|
.result-share{width:100%;max-width:400px;display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
|
|
.btn-share{width:100%;padding:12px 0;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
|
|
.btn-share.secondary{background:var(--c-bg);color:var(--c-sub);border:1px solid var(--c-border)}
|
|
.btn-share.primary{background:var(--c-primary);color:#fff}
|
|
.btn-share:active{transform:scale(.98)}
|
|
|
|
.share-card-preview{width:100%;max-width:400px;text-align:center;margin-bottom:12px}
|
|
|
|
.btn-retry{width:100%;max-width:400px;padding:12px 0;background:transparent;color:var(--c-muted);border:1px solid var(--c-border);border-radius:10px;font-size:14px;cursor:pointer;margin-top:8px;transition:all .2s}
|
|
.btn-retry:hover{color:var(--c-sub);border-color:var(--c-sub)}
|
|
|
|
.result-stats5{width:100%;max-width:400px;background:var(--c-card);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
|
|
.result-stats5-title{font-size:13px;font-weight:700;color:var(--c-sub);margin-bottom:10px;letter-spacing:.5px}
|
|
|
|
/* ---- Toast ---- */
|
|
.toast{position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(20px);background:#1E293B;color:#fff;padding:10px 24px;border-radius:24px;font-size:14px;font-weight:600;z-index:99;opacity:0;transition:all .3s ease;pointer-events:none;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.2)}
|
|
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
|
|
|
|
/* ---- Desktop Tweaks ---- */
|
|
@media(min-width:768px){
|
|
.app{max-width:520px;padding:40px 0 60px}
|
|
.intro-logo{width:88px;height:88px;font-size:42px}
|
|
.intro-title{font-size:32px}
|
|
.quiz-question{font-size:20px}
|
|
}
|
|
/* 进度条葫芦终点 */
|
|
.quiz-progress-fill{position:relative}
|
|
.quiz-progress-fill::after{content:"🏮";position:absolute;right:-10px;top:50%;transform:translateY(-50%);font-size:14px;display:var(--is-last, none)}
|
|
|
|
/* ========== 卡片领取通知 ========== */
|
|
.result-card-notice{background:linear-gradient(135deg,#FDF4EC,#FDF8F4);border:1px solid #C47F3A;border-radius:12px;padding:16px;text-align:center;margin-bottom:16px;animation:gourd-bounce .5s ease-out}
|
|
.rcn-icon{font-size:28px;margin-bottom:6px}
|
|
.rcn-text{font-size:14px;font-weight:600;color:#3A3632;margin-bottom:4px}
|
|
.rcn-hint{font-size:12px;color:#8A8580}
|
|
@keyframes gourd-bounce{0%{transform:scale(1.2)}50%{transform:scale(.9)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
|