112 lines
9.4 KiB
CSS
112 lines
9.4 KiB
CSS
/* 10.09 PSD: exclude the native WeChat header; retain flexible H5 viewport. */
|
|
/* Font faces are registered lazily by app.js on entering profile/camera/report.
|
|
Hidden wheel-picker text can otherwise trigger font downloads at startup. */
|
|
:root { --font: "MiSans","PingFang SC","Microsoft YaHei",sans-serif; }
|
|
[hidden] { display: none !important; }
|
|
/* Keep the original licensed font intact. Entry/account screens use system fonts
|
|
so login never competes with the two full Chinese font downloads (~9.5 MB). */
|
|
#s-login, #s-splash, #s-history, #p-login-success, #toast { --font: "PingFang SC","Microsoft YaHei",system-ui,sans-serif; font-family: var(--font); }
|
|
#s-login { background: #142632 url(../assets/img/ui-20261009/bg-login-h5.webp) center/cover no-repeat; }
|
|
.login-brand { position: absolute; width: calc(145 * var(--u)); left: 50%; top: 14%; transform: translateX(-50%); }
|
|
.login-bottom { position: absolute; left: 0; right: 0; bottom: max(5%, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); }
|
|
.login-button { width: calc(270 * var(--u)); height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); border-radius: calc(5 * var(--u)); font-size: 14px; }
|
|
.login-button img { width: calc(23 * var(--u)); height: calc(20 * var(--u)); object-fit: contain; }
|
|
.login-wechat { background: var(--yellow); color: #000; }
|
|
.login-browser { color: #fff; border: 1px solid #ffffff80; }
|
|
.login-consent { display: flex; align-items: center; gap: calc(8 * var(--u)); max-width: 90%; color: #eee; font-size: 10px; margin-top: calc(9 * var(--u)); }
|
|
.login-consent input { accent-color: var(--yellow); width: 13px; height: 13px; }
|
|
.login-consent button { color: var(--yellow); text-decoration: underline; font-size: inherit; }
|
|
.login-message { min-height: calc(28 * var(--u)); max-width: 84%; color: #eee; text-align: center; font-size: 10px; line-height: 1.5; }
|
|
.splash-bg, .guide-bg { background-image: url(../assets/img/ui-20261009/bg-splash-h5.webp); }
|
|
.splash-slogan { top: 7.2%; font-size: 23px; line-height: 1.16; letter-spacing: 0; font-weight: 400; }
|
|
.splash-slogan-en { font-weight: 400; }
|
|
.splash-slogan-zh { font-weight: 700; white-space: nowrap; }
|
|
.splash-bottom { bottom: 6.5%; gap: calc(9 * var(--u)); }
|
|
.brand-row { margin-bottom: calc(7 * var(--u)); gap: calc(5 * var(--u)); }
|
|
/* Match visible CJK glyph height to the logo, not the font's line box.
|
|
Both stay fixed in CSS px so narrow screens retain the same proportions. */
|
|
.brand-logo { width: auto; height: 26px; flex-shrink: 0; }
|
|
.brand-text { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
|
|
.btn-history { background: #fff; }
|
|
.profile-bg { background: url(../assets/img/ui-20261009/bg-profile-h5.webp) center/cover no-repeat; }
|
|
.skin-desc { max-width: calc(150 * var(--u)); font-size: 11.5px; }
|
|
#s-history { background: #efefef url(../assets/img/ui-20261009/bg-history-h5.webp) center/cover fixed; }
|
|
.history-content { padding: calc(28 * var(--u)) calc(17 * var(--u)) calc(36 * var(--u)); }
|
|
.history-count { text-align: center; padding: calc(16 * var(--u)) calc(12 * var(--u)) calc(21 * var(--u)); }
|
|
.history-count > span { color: #888; font-size: 12px; }
|
|
.history-count > span::after { content: ''; display: block; width: calc(45 * var(--u)); margin: calc(12 * var(--u)) auto; border-bottom: 1px solid #eee; }
|
|
.history-count p { font-size: 12px; }
|
|
.identity-note { color: #888; font-size: 10px; line-height: 1.6; margin: calc(12 * var(--u)) calc(4 * var(--u)) calc(20 * var(--u)); }
|
|
.history-item { padding: calc(13 * var(--u)) calc(19 * var(--u)) calc(10 * var(--u)); overflow: hidden; margin-top: calc(6 * var(--u)); }
|
|
.history-item p { font-size: 12px; padding-bottom: calc(7 * var(--u)); border-bottom: 1px solid #eee; }
|
|
.history-item p span { color: #888; margin-right: calc(8 * var(--u)); }
|
|
.history-detail { display: block; margin: calc(7 * var(--u)) 0 0 auto; background: var(--yellow); border-radius: calc(5 * var(--u)); width: calc(80 * var(--u)); font-size: 12px; min-height: calc(23 * var(--u)); }
|
|
.history-retry { display: block; margin: 20px auto; color: #707070; text-decoration: underline; font-size: 12px; }
|
|
#s-report { background: #efefef url(../assets/img/ui-20261009/bg-report-h5.webp) center top/100% auto; }
|
|
.report-body { padding: calc(28 * var(--u)) calc(17 * var(--u)) calc(42 * var(--u)); }
|
|
.report-title { font-size: 23px; padding: 0; margin-bottom: calc(23 * var(--u)); }
|
|
.card { border-radius: calc(7 * var(--u)); }
|
|
.card-summary { display: grid; grid-template-columns: 1fr 1fr; gap: calc(15 * var(--u)) 0; padding: calc(16 * var(--u)) calc(14 * var(--u)); }
|
|
.sum-score { width: auto; flex: none; }
|
|
.sum-age { min-width: 0; padding-left: calc(16 * var(--u)); align-items: center; }
|
|
.sum-age .stat-label { font-size: 12px; }
|
|
.stat-age b { font-size: 54px; }
|
|
.card-dims { grid-column: 1 / -1; padding: 0; }
|
|
.dims-row { margin: 0; }
|
|
.dim-name { font-size: 11px; }
|
|
.dim-score { font-size: 27px; }
|
|
.dim-score b { font-size: 36px; }
|
|
.dim-flag { font-size: 8px; }
|
|
.age-pill, .dims-note { display: none !important; }
|
|
.dimension-title { font-size: 23px; text-align: center; margin: calc(24 * var(--u)) 0 calc(12 * var(--u)); }
|
|
.card-detail { margin-top: 0; padding: calc(4 * var(--u)) calc(39 * var(--u)) calc(19 * var(--u)); }
|
|
.detail-tabs { border: none; }
|
|
.dtab-tx { font-size: 12px; padding-bottom: calc(10 * var(--u)); }
|
|
.dtab.active .dtab-tx::after { width: calc(76 * var(--u)); height: calc(7 * var(--u)); }
|
|
.dpanel.active { padding-top: calc(10 * var(--u)); }
|
|
.ditem { display: block; }
|
|
.viz-frame { position: relative; width: calc(215 * var(--u)); height: calc(278 * var(--u)); margin: 0 auto calc(12 * var(--u)); background: #f6f6f6; border-radius: calc(5 * var(--u)); overflow: hidden; }
|
|
.ditem-img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; position: relative; z-index: 1; }
|
|
.viz-missing { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #888; font-size: 12px; }
|
|
.ditem-img:not([hidden]) + .viz-missing { display: none; }
|
|
.ditem-text { border-top: 1px solid #eee; padding-top: calc(10 * var(--u)); }
|
|
.ditem-para { font-size: 12px; line-height: 1.55; white-space: pre-line; }
|
|
.card-detail { touch-action: pan-y; }
|
|
.viz-caption { color: #707070; font-size: 11px; line-height: 1.6; margin-top: 10px; }
|
|
.card-care { padding: calc(20 * var(--u)) calc(25 * var(--u)); }
|
|
.card-heading { font-size: 23px; text-align: center; margin-bottom: calc(18 * var(--u)); }
|
|
.care-item, .care-summary { font-size: 12px; }
|
|
.prod-card { min-height: calc(175 * var(--u)); }
|
|
.prod-info { padding: calc(32 * var(--u)) calc(15 * var(--u)) calc(20 * var(--u)); }
|
|
#product-title { font-size: 14px; font-weight: 600; white-space: nowrap; }
|
|
.prod-info { min-width: 0; padding-left: clamp(8px, 2.5vw, 15px); padding-right: clamp(8px, 2.5vw, 15px); }
|
|
.product-line { display: block; white-space: nowrap; }
|
|
.prod-name { font-size: 12px; font-weight: 400; margin-top: calc(6 * var(--u)); }
|
|
.prod-badge { width: calc(36 * var(--u)); margin-top: calc(20 * var(--u)); }
|
|
.prod-scroll { flex-basis: 50%; }
|
|
.prod-scroll img { object-fit: cover; aspect-ratio: 1 / 1; }
|
|
#p-privacy { background: linear-gradient(#0008,#0008),url(../assets/img/ui-20261009/bg-splash-h5.webp) center/cover; }
|
|
#p-photoguide .popup { padding: calc(62 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u)); }
|
|
.popup-title-center { text-align: left; margin: 0 0 calc(18 * var(--u)); }
|
|
/* PSD uses Semibold for report headings, Demibold for capture/consent/numbers. */
|
|
.report-title, .dimension-title, .card-heading, .prod-title, .page-title { font-weight: 600; }
|
|
.popup-title, .cam-step, .stat-value b, .stat-value i, .dim-score, .dim-score b, .care-summary {
|
|
font-family: "MiSans Demibold", var(--font); font-weight: 700;
|
|
}
|
|
.guide-description { font-size: 12px; line-height: 1.6; margin-bottom: calc(35 * var(--u)); }
|
|
.cam-feature-lines { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 5 5; filter: drop-shadow(0 1px 1px #000); }
|
|
#s-cam:not(.cam-live):not(.cam-switching) .cam-feature-lines { stroke: #111; filter: none; }
|
|
.font-credit { display: block; text-align: center; color: #888; font-size: 10px; margin: 24px auto 0; }
|
|
.account-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 8px; font-size: 12px; }
|
|
.account-status span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #b7bac0; }
|
|
.account-status[data-kind="wechat"] span::before { background: #34ca7b; }
|
|
.account-status small { font-size: 11px; opacity: .8; }
|
|
.account-status-home { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 2; background: #0008; color: #fff; }
|
|
#s-splash .splash-slogan { top: max(7.2%, calc(env(safe-area-inset-top) + 52px)); }
|
|
.account-status-history { width: 100%; background: #fff; margin-bottom: 14px; text-align: left; }
|
|
.login-success-popup { min-height: 0; text-align: center; gap: 18px; align-items: center; padding: 30px 24px; }
|
|
.login-success-icon { width: 48px; height: 48px; border-radius: 50%; background: #e9f8ef; color: #17994f; font-size: 30px; line-height: 48px; }
|
|
.login-success-popup h2 { font-size: 20px; font-weight: 600; }
|
|
.login-success-popup p { font-size: 14px; line-height: 1.7; color: #666; white-space: pre-line; }
|
|
@media (max-height: 560px) { .login-brand { top: 8%; } .login-bottom { bottom: 2%; } }
|