Spaces:
Running
Running
| /* Design tokens (CSS variables) live in shared/tokens.css so the mobile | |
| surface can pick up the same palette. CSS @import must be the first | |
| rule in a stylesheet, so it goes above everything else here. */ | |
| @import url("./shared/tokens.css"); | |
| * { | |
| box-sizing: border-box; | |
| } | |
| /* Force the HTML `hidden` attribute to win over class-level display rules. | |
| The user-agent `[hidden]` rule is `display: none` at attribute specificity | |
| (0,0,1,0), which loses to any class rule. We use `!important` because that's | |
| the only way to beat author-level display declarations across the codebase. */ | |
| [hidden] { | |
| display: none ; | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| color: var(--ink); | |
| background: radial-gradient(circle at 10% 20%, var(--bg-3), transparent 55%), | |
| radial-gradient(circle at 80% 10%, var(--bg-2), transparent 50%), | |
| linear-gradient(140deg, var(--bg-1), #fff8f2 60%, #f0e2d8 100%); | |
| font-family: "Iowan Old Style", "Palatino", "Book Antiqua", "Times New Roman", serif; | |
| } | |
| .background-orbit { | |
| position: fixed; | |
| inset: -30% 10% auto auto; | |
| width: 60vw; | |
| height: 60vw; | |
| background: conic-gradient(from 120deg, rgba(191, 58, 43, 0.2), transparent, rgba(91, 44, 120, 0.18)); | |
| border-radius: 50%; | |
| filter: blur(10px); | |
| opacity: 0.6; | |
| z-index: 0; | |
| animation: slow-spin 40s linear infinite; | |
| } | |
| .background-glow { | |
| position: fixed; | |
| inset: auto auto -15% -10%; | |
| width: 55vw; | |
| height: 55vw; | |
| background: radial-gradient(circle, rgba(191, 58, 43, 0.18), transparent 70%); | |
| border-radius: 50%; | |
| filter: blur(20px); | |
| z-index: 0; | |
| } | |
| @keyframes slow-spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .hero { | |
| position: relative; | |
| z-index: 1; | |
| display: grid; | |
| grid-template-columns: minmax(280px, 1.2fr) minmax(280px, 0.9fr); | |
| gap: 32px; | |
| padding: 72px 8vw 48px; | |
| align-items: center; | |
| } | |
| .hero-copy h1 { | |
| font-family: "Futura", "Gill Sans", "Optima", "Trebuchet MS", sans-serif; | |
| font-size: clamp(2.2rem, 4vw, 3.4rem); | |
| margin: 0 0 12px; | |
| letter-spacing: 0.02em; | |
| } | |
| .hero-kicker { | |
| text-transform: uppercase; | |
| letter-spacing: 0.18em; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| color: var(--accent-dark); | |
| margin: 0 0 12px; | |
| } | |
| .hero-sub { | |
| font-size: 1.05rem; | |
| line-height: 1.7; | |
| color: var(--ink-soft); | |
| max-width: 36ch; | |
| } | |
| .hero-card { | |
| background: rgba(255, 255, 255, 0.75); | |
| border: 1px solid var(--border); | |
| border-radius: 24px; | |
| padding: 28px; | |
| box-shadow: 0 24px 60px var(--shadow); | |
| backdrop-filter: blur(8px); | |
| animation: rise-in 0.8s ease; | |
| } | |
| @keyframes rise-in { | |
| from { transform: translateY(16px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .file-drop { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| padding: 24px; | |
| border: 1.5px dashed var(--accent); | |
| border-radius: 18px; | |
| background: var(--sand); | |
| cursor: pointer; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .file-drop:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(191, 58, 43, 0.15); | |
| } | |
| .file-drop input { | |
| display: none; | |
| } | |
| .file-title { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| } | |
| .file-hint { | |
| font-size: 0.9rem; | |
| color: var(--ink-soft); | |
| } | |
| .capture-tips { | |
| margin: 14px 0 0; | |
| padding: 12px 16px 12px 30px; | |
| list-style: disc; | |
| background: rgba(191, 58, 43, 0.06); | |
| border-left: 3px solid rgba(191, 58, 43, 0.55); | |
| border-radius: 8px; | |
| font-size: 1.0rem; | |
| color: var(--ink-soft); | |
| line-height: 1.5; | |
| } | |
| .capture-tips li + li { | |
| margin-top: 4px; | |
| } | |
| .capture-tips strong { | |
| color: var(--ink); | |
| } | |
| .controls { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); | |
| gap: 16px; | |
| margin: 20px 0; | |
| } | |
| .controls label { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| font-size: 0.9rem; | |
| color: var(--ink-soft); | |
| } | |
| select, | |
| .controls input[type="text"], | |
| .controls input[type="email"] { | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 10px 12px; | |
| /* iOS Safari auto-zooms the page when an input's computed font-size | |
| is below 16px. The zoom doesn't always restore cleanly when the | |
| keyboard dismisses, leaving the layout viewport offset. 16px | |
| (= 1rem at default html font-size) keeps Safari hands-off. */ | |
| font-size: 1rem; | |
| background: white; | |
| color: var(--ink); | |
| width: 100%; | |
| } | |
| .primary { | |
| width: 100%; | |
| border: none; | |
| border-radius: 14px; | |
| padding: 12px 16px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: white; | |
| background: linear-gradient(120deg, var(--accent), #e25f4f); | |
| cursor: pointer; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .primary:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 12px 24px rgba(191, 58, 43, 0.25); | |
| } | |
| .primary:disabled { | |
| opacity: 0.55; | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| .status { | |
| margin-top: 12px; | |
| font-size: 0.9rem; | |
| color: var(--ink-soft); | |
| } | |
| .status.error { | |
| color: #c0271b; | |
| font-weight: 600; | |
| } | |
| .content { | |
| position: relative; | |
| z-index: 1; | |
| padding: 0 8vw 80px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 28px; | |
| } | |
| .preview, | |
| .result { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 24px; | |
| } | |
| .panel { | |
| background: rgba(255, 255, 255, 0.78); | |
| border-radius: 20px; | |
| border: 1px solid var(--border); | |
| padding: 20px; | |
| box-shadow: 0 18px 40px rgba(43, 31, 31, 0.08); | |
| backdrop-filter: blur(6px); | |
| } | |
| .panel h2 { | |
| margin: 0 0 12px; | |
| font-family: "Futura", "Gill Sans", "Optima", "Trebuchet MS", sans-serif; | |
| } | |
| .panel-head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .ghost { | |
| text-decoration: none; | |
| font-size: 0.85rem; | |
| color: var(--accent-dark); | |
| border: 1px solid var(--border); | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| background: white; | |
| } | |
| .image-frame { | |
| position: relative; | |
| border-radius: 16px; | |
| overflow: hidden; | |
| background: #f6efea; | |
| min-height: 260px; | |
| display: grid; | |
| place-items: center; | |
| } | |
| .image-frame img { | |
| width: 100%; | |
| height: auto; | |
| display: none; | |
| } | |
| .image-frame.show img { | |
| display: block; | |
| } | |
| .placeholder { | |
| color: var(--ink-soft); | |
| font-size: 0.95rem; | |
| } | |
| pre { | |
| background: #1f1717; | |
| color: #f7ece8; | |
| padding: 16px; | |
| border-radius: 16px; | |
| min-height: 240px; | |
| overflow: auto; | |
| font-size: 0.85rem; | |
| line-height: 1.6; | |
| } | |
| .tips ul { | |
| margin: 0; | |
| padding-left: 0; | |
| list-style: none; | |
| color: var(--ink-soft); | |
| line-height: 1.7; | |
| } | |
| .tips li + li { | |
| margin-top: 4px; | |
| } | |
| @media (max-width: 960px) { | |
| .hero { | |
| grid-template-columns: 1fr; | |
| padding: 56px 6vw 36px; | |
| } | |
| .hero-copy h1 { | |
| font-size: 2.4rem; | |
| } | |
| } | |
| /* Feedback panel — sits inside .content, so it inherits the 8vw | |
| horizontal padding from there. No extra padding here, otherwise the | |
| panel ends up narrower than its sibling result panels above it. */ | |
| .feedback-section { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .feedback-hint { | |
| margin: 0 0 12px; | |
| color: var(--ink-soft); | |
| font-size: 0.95rem; | |
| } | |
| .feedback-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .feedback-rating { | |
| display: flex; | |
| gap: 4px; | |
| } | |
| .star-btn { | |
| background: none; | |
| border: none; | |
| padding: 2px 4px; | |
| font-size: 1.7rem; | |
| line-height: 1; | |
| color: rgba(45, 33, 33, 0.25); | |
| cursor: pointer; | |
| transition: color 0.15s ease, transform 0.1s ease; | |
| } | |
| .star-btn:hover { transform: translateY(-1px); } | |
| .star-btn.star-filled { color: #e3a73b; } | |
| .feedback-form textarea { | |
| width: 100%; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 10px 12px; | |
| font-size: 1rem; | |
| font-family: inherit; | |
| background: white; | |
| color: var(--ink); | |
| resize: vertical; | |
| min-height: 80px; | |
| } | |
| .feedback-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| flex-direction: row-reverse; | |
| justify-content: flex-start; | |
| } | |
| .feedback-submit { | |
| width: auto; | |
| padding: 10px 22px; | |
| } | |
| .feedback-status { | |
| font-size: 0.9rem; | |
| color: var(--ink-soft); | |
| } | |
| .feedback-status-ok { color: #2f7a3d; } | |
| .feedback-status-error { color: var(--accent); font-weight: 600; } | |
| /* Multi-finger result styles */ | |
| .multi-result { | |
| padding: 8px 0; | |
| } | |
| .size-hero { | |
| text-align: center; | |
| padding: 20px 0 16px; | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 16px; | |
| } | |
| .size-hero .size-label { | |
| display: block; | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--ink-soft); | |
| margin-bottom: 4px; | |
| } | |
| .size-hero .size-number { | |
| display: block; | |
| font-size: 3.2rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| line-height: 1.1; | |
| } | |
| .size-hero .size-range { | |
| display: block; | |
| font-size: 1rem; | |
| color: var(--ink-soft); | |
| margin-top: 4px; | |
| } | |
| .finger-cards { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 12px; | |
| margin-bottom: 12px; | |
| } | |
| .finger-card { | |
| position: relative; | |
| background: var(--sand); | |
| border-radius: 8px; | |
| padding: 12px; | |
| text-align: center; | |
| box-shadow: 0 1px 4px var(--shadow); | |
| } | |
| .finger-card .finger-badge { | |
| position: absolute; | |
| top: -10px; | |
| right: 10px; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| background: var(--accent); | |
| color: #fff; | |
| line-height: 1; | |
| box-shadow: 0 1px 3px var(--shadow); | |
| } | |
| .finger-card .finger-name { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| margin-bottom: 6px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .finger-card .finger-width { | |
| font-size: 0.85rem; | |
| color: var(--ink-soft); | |
| margin-top: 6px; | |
| } | |
| .finger-card .finger-size-label { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--ink-soft); | |
| margin-top: 6px; | |
| } | |
| .finger-card .finger-size { | |
| font-size: 1.6rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| line-height: 1.1; | |
| } | |
| .finger-card .finger-range { | |
| font-size: 0.85rem; | |
| color: var(--ink-soft); | |
| margin-top: 2px; | |
| } | |
| .ai-reason { | |
| font-size: 0.9rem; | |
| color: var(--ink-soft); | |
| margin: 12px auto 0; | |
| max-width: 40ch; | |
| line-height: 1.5; | |
| font-style: italic; | |
| } | |
| .finger-card .finger-failed { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: #721c24; | |
| margin: 8px 0 4px; | |
| } | |
| .finger-card .finger-fail-reason { | |
| font-size: 0.75rem; | |
| color: var(--ink-soft); | |
| word-break: break-word; | |
| } | |
| .finger-count { | |
| text-align: left; | |
| font-size: 0.95rem; | |
| color: var(--ink-soft); | |
| } | |
| .size-ref-table { | |
| margin-top: 20px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .size-ref-title { | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--ink-soft); | |
| text-align: center; | |
| margin: 0 0 10px; | |
| } | |
| .size-ref-table table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.85rem; | |
| } | |
| .size-ref-table th { | |
| font-weight: 600; | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--ink-soft); | |
| padding: 6px 8px; | |
| border-bottom: 1px solid var(--border); | |
| text-align: center; | |
| } | |
| .size-ref-table td { | |
| padding: 5px 8px; | |
| text-align: center; | |
| color: var(--ink); | |
| } | |
| .size-ref-table tbody tr:nth-child(even) { | |
| background: var(--sand); | |
| } | |
| @media (max-width: 600px) { | |
| .finger-cards { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .toggle-label { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| font-size: 0.9rem; | |
| color: var(--ink-soft); | |
| } | |
| .toggle-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| height: 42px; | |
| } | |
| .toggle-row input[type="checkbox"] { | |
| width: 18px; | |
| height: 18px; | |
| accent-color: var(--accent); | |
| cursor: pointer; | |
| } | |
| .toggle-hint { | |
| font-size: 0.75rem; | |
| color: var(--ink-soft); | |
| opacity: 0.7; | |
| } | |