132 lines
8.7 KiB
CSS
132 lines
8.7 KiB
CSS
/* Third-round PSD, 2026-10-12. Measurements include text transforms.
|
|
Native 248px WeChat header is excluded. Fixed text sizes/line breaks are
|
|
intentional; flexible photo backgrounds and safe areas accommodate phones. */
|
|
.splash-slogan {
|
|
left: calc(50% - 1.041667px); right: auto;
|
|
width: 249.305556px; height: 75.347222px;
|
|
transform: translateX(-50%); text-shadow: none;
|
|
top: max(6.838833%, calc(env(safe-area-inset-top) + 48px));
|
|
}
|
|
#s-splash .splash-slogan { top: max(6.838833%, calc(env(safe-area-inset-top) + 48px)); }
|
|
.splash-bottom { bottom: max(5.882353%, env(safe-area-inset-bottom)); gap: calc(7.291667 * var(--u)); padding-bottom: 0; }
|
|
.brand-row { margin-bottom: calc(10.416667 * var(--u)); gap: 0; }
|
|
.brand-lockup { width: 179.513889px; height: 20.486111px; }
|
|
#s-splash .btn-primary { display: flex; align-items: center; justify-content: center; width: calc(181.25 * var(--u)); height: calc(38.888889 * var(--u)); line-height: calc(38.888889 * var(--u)); border-radius: calc(6.944444 * var(--u)); }
|
|
.splash-button-label { width: 55.902778px; height: 13.888889px; }
|
|
.btn-history .splash-button-label { width: 56.597222px; height: 13.541667px; }
|
|
|
|
/* These two fixed-content dialogs retain the PSD text column on every phone.
|
|
308px fits a 320px viewport without shrinking fonts or changing line breaks. */
|
|
#p-privacy .popup, #p-photoguide .popup {
|
|
width: 307.986111px; height: 313.194444px; min-height: 313.194444px;
|
|
padding: 0; top: -42.881944px; border-radius: 8.680556px;
|
|
text-rendering: geometricPrecision;
|
|
}
|
|
#p-privacy .popup-title, #p-photoguide .popup-title {
|
|
position: absolute; margin: 0; font-size: 23.148148px; line-height: 28.935185px;
|
|
letter-spacing: 0; white-space: nowrap;
|
|
}
|
|
#p-privacy .popup-title { left: 31.944444px; top: 35px; }
|
|
#p-photoguide .popup-title { left: 37.5px; top: 61.388889px; text-align: left; }
|
|
#p-privacy .popup-body, .guide-description {
|
|
position: absolute; margin: 0;
|
|
font-size: 11.574074px; line-height: 17.361111px; font-weight: 400; letter-spacing: 0;
|
|
}
|
|
#p-privacy .popup-body { left: 31.944444px; top: 109.027778px; width: 243.75px; }
|
|
/* Text-frame advance includes side bearings beyond the PSD visible-ink bbox. */
|
|
.guide-description { left: 37.847222px; top: 135.069444px; width: 237px; }
|
|
.guide-description span { white-space: nowrap; }
|
|
#p-privacy .privacy-row { position: absolute; left: 29.861111px; top: 184.375px; gap: 10.069444px; }
|
|
#p-privacy .privacy-text { font-size: 10.127315px; line-height: 18.807870px; white-space: nowrap; }
|
|
#p-privacy .privacy-link { font-family: "MiSans Demibold", var(--font); font-weight: 700; }
|
|
#p-privacy .checkbox { width: 11.805556px; height: 12.152778px; }
|
|
#p-privacy .popup-btn, #p-photoguide .popup-btn {
|
|
position: absolute; left: 63.194444px; margin: 0;
|
|
width: 181.25px; height: 38.888889px; line-height: 38.888889px;
|
|
font-family: "MiSans Demibold", var(--font); font-size: 14.467593px; font-weight: 700;
|
|
letter-spacing: 0; border-radius: 6.944444px;
|
|
}
|
|
#p-privacy .popup-btn { top: 239.930556px; }
|
|
#p-photoguide .popup-btn { top: 219.791667px; }
|
|
#p-privacy .popup-close, #p-photoguide .popup-close { top: 10.055556px; right: 10.055556px; width: 32px; height: 32px; }
|
|
#p-privacy .popup-close img, #p-photoguide .popup-close img { width: 17.708333px; height: 17.361111px; }
|
|
@media (max-height: 440px) {
|
|
#p-privacy .popup, #p-photoguide .popup { top: 0; }
|
|
}
|
|
|
|
/* PSD 984x503 card; text starts 77/78px in, image starts at x480.
|
|
Fixed typography is preserved even at 320px; never center-crop the artwork. */
|
|
.prod-title { font-size: 23.148148px; line-height: 31.828704px; margin-top: calc(19.583333 * var(--u)); letter-spacing: 0; }
|
|
.card-product { width: calc(341.666667 * var(--u)); margin-left: calc(-0.333333 * var(--u)); border-radius: calc(5.208333 * var(--u)); }
|
|
.prod-card { position: relative; height: calc(174.652778 * var(--u)); min-height: 0; text-rendering: geometricPrecision; }
|
|
.prod-info { flex: 0 0 48.780488%; padding: 0; }
|
|
#product-title {
|
|
position: absolute; left: 26.736111px; top: calc(34.027778 * var(--u));
|
|
margin: 0; font-size: 14.467593px; line-height: 15.071903px; font-weight: 600;
|
|
}
|
|
.prod-name {
|
|
position: absolute; left: 26.736111px; top: calc(57.638889 * var(--u));
|
|
margin: 0; font-size: 11.574074px; line-height: 17.361111px; font-weight: 600;
|
|
}
|
|
.prod-badge { position: absolute; left: 27.430556px; top: calc(115.277778 * var(--u)); width: calc(35.069444 * var(--u)); margin: 0; }
|
|
.prod-scroll { flex: 0 0 51.219512%; }
|
|
.prod-scroll img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: fill; }
|
|
|
|
/* Fourth feedback adds a fast one-second round trip to original PSD pixels.
|
|
The stage/mask share one contain transform, including short/landscape screens. */
|
|
#p-analyzing { background: #000; overflow: hidden; }
|
|
.scan-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100vw, 480px, calc(100dvh * 1080 / 2091)); height: min(100dvh, calc(min(100vw, 480px) * 2091 / 1080)); }
|
|
@supports not (height: 100dvh) { .scan-stage { width: min(100vw, 480px, calc(100vh * 1080 / 2091)); height: min(100vh, calc(min(100vw, 480px) * 2091 / 1080)); } }
|
|
.scan-artwork { width: 100%; height: 100%; object-fit: contain; }
|
|
.scan-face { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; overflow: hidden; }
|
|
.scan-beam { position: absolute; left: 0; right: 0; top: 20%; height: 18%; background: linear-gradient(to bottom, #F5F078 0%, #F5F078 35%, rgba(245,240,120,0) 100%); }
|
|
#p-analyzing:not(.scan-artwork-ready) .scan-stage { visibility: hidden; }
|
|
.scan-running .scan-beam { animation: report-scan var(--scan-cycle, 1000ms) ease-in-out infinite; }
|
|
@keyframes report-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(166%); } }
|
|
.scan-running:not(.scan-artwork-ready) .scan-status { animation: report-scan-fallback var(--scan-cycle, 1000ms) ease-in-out infinite; }
|
|
@keyframes report-scan-fallback { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.scan-running .scan-beam { animation-name: report-scan-reduced; }
|
|
@keyframes report-scan-reduced { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
|
|
}
|
|
/* A failed/stalled image must not leave an unexplained black screen. The live
|
|
status is visually hidden only once the exact PSD artwork has loaded. */
|
|
.scan-status { position: absolute; top: 10.5%; left: 0; right: 0; color: #fff; text-align: center; font: 700 23.148148px/1.4 "MiSans Demibold",var(--font); }
|
|
.scan-artwork-ready .scan-status { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
|
|
.scan-cancel {
|
|
position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom));
|
|
transform: translateX(-50%); padding: 10px 24px;
|
|
color: #bbb; font: 12px/1.5 "PingFang SC","Microsoft YaHei",sans-serif;
|
|
}
|
|
.scan-cancel:focus-visible { outline: 1px solid var(--yellow); border-radius: 4px; }
|
|
|
|
/* Restore only the requested focus area, not the older age-comparison pill. */
|
|
#dims-note { display: block !important; margin-top: 12px; padding: 10px 12px 10px 24px; text-align: left; }
|
|
#dims-note[hidden] { display: none !important; }
|
|
#dims-note::before { left: 12px; top: 10px; bottom: 10px; }
|
|
#dims-note .dims-note-l1 { font-size: 12px; line-height: 1.5; }
|
|
#dims-note .dims-note-l2 { font-size: 11px; line-height: 1.5; margin-top: 3px; }
|
|
|
|
/* Labels share a top baseline outside the dial; center the score digits, not
|
|
digits plus unit, inside the yellow ring. */
|
|
.sum-score, .sum-age { flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(6 * var(--u)); }
|
|
.sum-age { align-self: stretch; }
|
|
.sum-score > .stat-label, .sum-age > .stat-label { font-size: 12px; line-height: 1.5; }
|
|
.score-dial, .age-dial { position: relative; width: calc(108 * var(--u)); height: calc(108 * var(--u)); }
|
|
.age-dial { display: flex; align-items: center; justify-content: center; }
|
|
.age-dial .stat-age { margin-top: 0; }
|
|
#stat-score { position: relative; }
|
|
#stat-score b { display: block; letter-spacing: 0; }
|
|
#stat-score i { position: absolute; left: 100%; bottom: 3px; margin-left: 2px; }
|
|
.card-care .card-heading { text-align: left; }
|
|
|
|
.detail-viewport { overflow: hidden; touch-action: pan-y; transition: height .32s ease; }
|
|
.detail-viewport.dragging { transition: none; }
|
|
.detail-panels { display: flex; align-items: flex-start; transition: transform .32s cubic-bezier(.22,.61,.36,1); }
|
|
.detail-panels.dragging { transition: none; will-change: transform; }
|
|
.detail-panels .dpanel { display: block; flex: 0 0 100%; min-width: 0; padding-top: calc(10 * var(--u)); animation: none; }
|
|
.detail-panels .ditem-img { -webkit-user-drag: none; }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.detail-panels, .detail-viewport { transition-duration: .01ms; }
|
|
}
|