221 lines
17 KiB
CSS
221 lines
17 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. */
|
||
.account-logout { font-size: 11px; opacity: .8; white-space: nowrap; }
|
||
.cam-countdown { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); z-index:4; pointer-events:none; color:#fff; font:600 88px/1 Arial,sans-serif; text-shadow:0 2px 16px rgba(0,0,0,.5); }
|
||
.cam-countdown-tick { display:block; animation:camera-countdown-tick .6s ease-out both; }
|
||
@keyframes camera-countdown-tick { from { opacity:.3; transform:scale(1.25); } to { opacity:1; transform:scale(1); } }
|
||
@media (prefers-reduced-motion:reduce) { .cam-countdown-tick { animation:none; } }
|
||
.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)); }
|
||
/* Keep the PSD Chinese line; compensate the lowercase brand's smaller x-height. */
|
||
.splash-slogan-updated .splash-slogan-copy { width:100%; height:100%; clip-path:inset(68% 0 0); }
|
||
.splash-slogan-brand, .splash-slogan-english { position:absolute; top:0; left:50%; transform:translateX(-50%); font-family:Arial,sans-serif; font-size:23px; font-weight:400; line-height:1; white-space:nowrap; }
|
||
.splash-slogan-brand { top:-4px; font-size:28px; }
|
||
.splash-slogan-english { top:26.736111px; }
|
||
#s-splash [data-action="open-privacy"],
|
||
#s-splash [data-action="open-privacy"]:focus,
|
||
#s-splash [data-action="open-privacy"]:active { border:0; outline:none; box-shadow:none; -webkit-appearance:none; appearance:none; }
|
||
#s-splash [data-action="open-privacy"]:focus-visible { filter:brightness(.94); }
|
||
.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; }
|
||
|
||
/* Figma 1:65, 1080px canvas. One algorithm-selected product, not a catalogue. */
|
||
/* User-confirmed: both lines centered; use the same font size/line height
|
||
as the stability heading rather than scaling text on wide previews. */
|
||
.prod-title { width:calc(206.597222 * var(--u)); max-width:100%; text-align:center; margin:calc(18 * var(--u)) auto; padding:0; transform:translateX(calc(.347222 * var(--u))); font-size:22.106597px; line-height:28.738542px; font-weight:700; white-space:nowrap; }
|
||
.report-care-products { width:calc(340.625 * var(--u)); margin-left:auto; margin-right:auto; padding:calc(21.180556 * var(--u)) calc(24.652778 * var(--u)) calc(7.986111 * var(--u)); }
|
||
.report-care-products .card-heading,
|
||
.product-section-heading { font-size:13.888889px; line-height:19.444444px; font-weight:700; text-align:left; }
|
||
.report-care-products .card-heading { margin-bottom:calc(5.208333 * var(--u)); }
|
||
.report-care-products .care-item { font-size:11.574074px; line-height:14.467593px; margin-bottom:calc(14.467593 * var(--u)); }
|
||
.report-care-products .care-item:last-child { margin-bottom:0; }
|
||
.product-section-heading { position:relative; margin:calc(24.0625 * var(--u)) 0 calc(5.555556 * var(--u)); }
|
||
.report-care-products .product-section-heading::before { content:""; position:absolute; left:0; right:0; top:calc(-12.03125 * var(--u)); border-top:1px solid #DDD; }
|
||
.report-care-products .card-product { width:auto; margin:0 calc(-18.402778 * var(--u)); border-radius:calc(3.472222 * var(--u)); background:#F6F6F6; }
|
||
.report-care-products .prod-card { height:auto; aspect-ratio:945 / 511; }
|
||
.report-care-products .prod-info { flex-basis:49.100529%; }
|
||
.report-care-products .prod-scroll { flex-basis:50.899471%; }
|
||
.report-care-products #product-title { left:8.571429%; top:29.158513%; font-size:14.467593px; line-height:18.062790px; font-weight:700; white-space:nowrap; }
|
||
.report-care-products .prod-name { left:8.677249%; top:41.095890%; font-size:12.013166px; line-height:15.070408px; font-weight:700; color:#989898; white-space:nowrap; }
|
||
.report-care-products .prod-badge { left:8.783069%; top:56.751468%; width:10.687831%; }
|
||
.report-care-products + .report-disclaimer { margin:calc(12.152778 * var(--u)) calc(5.208333 * var(--u)) calc(20 * var(--u)); font-size:7.233681px; line-height:10.127431px; }
|
||
/* Equal whitespace above/below all three headings; keep the original total gap. */
|
||
.dimension-title { margin:calc(18 * var(--u)) 0; }
|
||
.dimension-stability-title { font-size:22.106597px; line-height:28.738542px; }
|
||
.stability-card .dtab-tx { font-size:11.055903px; }
|
||
.stability-card .ditem-para { font-size:11.574074px; line-height:14.467593px; }
|
||
|
||
/* 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; }
|
||
/* Cover the old flip icon baked into the PSD raster (843,1846–921,1924).
|
||
Share the camera's replacement asset; decorative only, never a control. */
|
||
.scan-flip-icon { position:absolute; left:77.314815%; top:87.900526%; width:8.888889%; height:4.591105%; background:#000; display:flex; align-items:center; justify-content:center; pointer-events:none; }
|
||
.scan-flip-icon img { width:83.333333%; height:83.333333%; 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; }
|
||
|
||
/* Center the complete score stack inside the ring and the gapless age stack
|
||
against the same vertical center. Center score digits and unit as one row. */
|
||
.sum-score, .sum-age { flex-direction: column; align-items: center; justify-content: center; gap: 0; }
|
||
.sum-age { align-self: stretch; gap: 0; }
|
||
.ring-center { gap: 0; }
|
||
.ring-center .stat-label, .sum-age > .stat-label { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink); }
|
||
.score-dial, .age-dial { position: relative; width: calc(108 * var(--u)); height: calc(108 * var(--u)); }
|
||
.age-dial { height: auto; display: flex; align-items: center; justify-content: center; }
|
||
.age-dial .stat-age { margin-top: 0; display: flex; align-items: baseline; }
|
||
.age-dial .stat-age b { display: block; line-height: 1; }
|
||
#stat-score { display: flex; align-items: baseline; justify-content: center; }
|
||
#stat-score b { display: block; letter-spacing: 0; }
|
||
#stat-score i { position: static; margin-left: 2px; }
|
||
.card-care:not(.report-care-products) .card-heading { text-align: left; margin-bottom: calc(9 * var(--u)); }
|
||
|
||
/* The profile is a fixed page, not a scroll container. Keep normal-height PSD
|
||
spacing; shrink only vertical whitespace/photo height on shorter viewports.
|
||
Wheel pickers are mounted outside this screen and retain their own gestures. */
|
||
#s-profile {
|
||
overflow: hidden; overscroll-behavior: none; touch-action: none;
|
||
--profile-space: min(var(--u), max(.3px, calc((100vh - 420px) / 306)));
|
||
}
|
||
@supports (height: 100dvh) {
|
||
#s-profile { --profile-space: min(var(--u), max(.3px, calc((100dvh - 420px) / 306))); }
|
||
}
|
||
#s-profile .profile-body {
|
||
height: 100%; min-height: 0; display: flex; flex-direction: column;
|
||
padding-top: max(env(safe-area-inset-top), calc(34 * var(--profile-space)));
|
||
padding-bottom: max(env(safe-area-inset-bottom), calc(40 * var(--profile-space)));
|
||
}
|
||
#s-profile .profile-body > * { flex-shrink: 0; }
|
||
#s-profile .page-title { margin-bottom: calc(22 * var(--profile-space)); }
|
||
#s-profile .field { margin-bottom: calc(19 * var(--profile-space)); }
|
||
#s-profile .field-label { margin-bottom: calc(9 * var(--profile-space)); }
|
||
#s-profile .profile-skin-field { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
|
||
#s-profile .skin-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: calc(21 * var(--profile-space)); padding-bottom: calc(24 * var(--profile-space)); }
|
||
#s-profile .skin-axis { flex-shrink: 0; margin-bottom: calc(18 * var(--profile-space)); }
|
||
#s-profile .skin-stage { flex: 1 1 auto; min-height: 0; display: flex; }
|
||
#s-profile .skin-carousel { flex: 1; min-width: 0; min-height: 0; display: flex; touch-action: none; }
|
||
#s-profile .skin-track { flex: 0 0 100%; min-width: 0; min-height: 0; }
|
||
#s-profile .skin-item img { flex-shrink: 1; min-height: 0; object-fit: contain; }
|
||
#s-profile .skin-name { flex-shrink: 0; margin-top: calc(16 * var(--profile-space)); }
|
||
#s-profile .skin-desc { flex-shrink: 0; width: calc(150 * var(--u)); min-height: calc(2 * 1.55 * 11.5px); }
|
||
#s-profile .skin-dots { flex-shrink: 0; margin-top: calc(22 * var(--profile-space)); }
|
||
#s-profile .btn-submit { margin-top: calc(25 * var(--profile-space)); }
|
||
|
||
.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; }
|
||
/* Keep the existing front-photo scale/top edge; clip only its bottom 10%.
|
||
The image source stays intact for the existing full-image zoom overlay. */
|
||
.contour-front-frame { height: calc(250.2 * var(--u)); margin-bottom: calc(7.56 * var(--u)); }
|
||
.contour-front-frame .ditem-img { height: calc(278 * var(--u)); }
|
||
.contour-sides { width: calc(215 * var(--u)); margin: 0 auto calc(12 * var(--u)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(6.3 * var(--u)); }
|
||
.contour-sides[hidden], .contour-sides figure[hidden] { display: none; }
|
||
.contour-sides figure { margin: 0; min-width: 0; }
|
||
.contour-sides figure[data-view="right"] { grid-column: 2; }
|
||
.contour-side-photo, .wrinkle-side-photo { display: block; position: relative; width: 100%; height: calc(92.25 * var(--u)); padding: 0; border: 0; border-radius: calc(5 * var(--u)); overflow: hidden; background: #f6f6f6; cursor: zoom-in; }
|
||
.contour-side-photo img, .wrinkle-side-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translateY(-25%) scale(2.8); transform-origin: center; -webkit-user-drag: none; }
|
||
.contour-side-photo:focus-visible, .wrinkle-side-photo:focus-visible { outline: 2px solid #333; outline-offset: 3px; }
|
||
.wrinkle-layer-note { width:calc(215 * var(--u)); margin:0 auto calc(12 * var(--u)); color:#888; font-size:10px; line-height:1.4; }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.detail-panels, .detail-viewport { transition-duration: .01ms; }
|
||
}
|