Spaces:
Running
Running
| /* specimg slip — mobile only (iPhone / iPad). A white paper receipt on a dark | |
| desk. Always "paper": does not follow device light/dark theme. */ | |
| :root { | |
| --paper: #fbfbf7; | |
| --ink: #111; | |
| --ink-soft: #555; | |
| --desk: #2a2a2d; | |
| --slip-width: 384px; /* matches native freq-axis feel; scales down on small phones */ | |
| --mono: "SFMono-Regular", ui-monospace, "Menlo", "Consolas", monospace; | |
| } | |
| * { box-sizing: border-box; } | |
| /* links to the other tool pages */ | |
| .jump { | |
| position: fixed; | |
| top: calc(env(safe-area-inset-top) + 8px); | |
| right: 12px; | |
| display: flex; | |
| gap: 8px; | |
| z-index: 5; | |
| } | |
| .jump a { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 0.08em; | |
| color: #eee; | |
| text-decoration: none; | |
| background: rgba(0, 0, 0, 0.4); | |
| padding: 6px 10px; | |
| border-radius: 8px; | |
| } | |
| /* Make the `hidden` attribute win over our display:flex/grid rules. */ | |
| [hidden] { display: none ; } | |
| /* quality selector (on the desk, above the slip) */ | |
| .quality { | |
| width: 100%; | |
| max-width: var(--slip-width); | |
| margin: 52px auto 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .quality label { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.12em; | |
| color: #bbb; | |
| } | |
| .quality select { | |
| flex: 1; | |
| appearance: none; | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| color: #eee; | |
| background: rgba(0, 0, 0, 0.4); | |
| border: 1px solid #444; | |
| border-radius: 8px; | |
| padding: 8px 10px; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| background: var(--desk); | |
| color: var(--ink); | |
| font-family: var(--mono); | |
| -webkit-text-size-adjust: 100%; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: env(safe-area-inset-top) 12px calc(env(safe-area-inset-bottom) + 24px); | |
| min-height: 100vh; | |
| } | |
| /* ---- the slip ---------------------------------------------------------- */ | |
| .slip { | |
| width: 100%; | |
| max-width: var(--slip-width); | |
| background: var(--paper); | |
| color: var(--ink); | |
| margin-top: 16px; | |
| padding: 0; | |
| position: relative; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); | |
| } | |
| /* zig-zag tear edges */ | |
| .tear { | |
| height: 10px; | |
| background-size: 16px 16px; | |
| } | |
| .tear--top { | |
| background: | |
| linear-gradient(135deg, var(--paper) 50%, transparent 0) 0 0 / 16px 16px, | |
| linear-gradient(-135deg, var(--paper) 50%, transparent 0) 0 0 / 16px 16px; | |
| background-color: transparent; | |
| transform: translateY(-9px); | |
| } | |
| .tear--bottom { | |
| background: | |
| linear-gradient(45deg, var(--paper) 50%, transparent 0) 0 0 / 16px 16px, | |
| linear-gradient(-45deg, var(--paper) 50%, transparent 0) 0 0 / 16px 16px; | |
| background-color: transparent; | |
| transform: translateY(9px); | |
| } | |
| .slip__head { padding: 14px 18px 0; } | |
| .slip__title { | |
| font-size: 22px; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| text-align: center; | |
| text-transform: uppercase; | |
| line-height: 1.2; | |
| outline: none; | |
| word-break: break-word; | |
| min-height: 1.2em; | |
| } | |
| .slip__title:empty::before { | |
| content: attr(data-placeholder); | |
| color: #bbb; | |
| font-weight: 400; | |
| } | |
| .slip__title:focus { background: rgba(0, 0, 0, 0.04); } | |
| .slip__meta { | |
| text-align: center; | |
| font-size: 11px; | |
| letter-spacing: 0.12em; | |
| color: var(--ink-soft); | |
| margin-top: 6px; | |
| } | |
| .rule { | |
| border-top: 1px dashed #000; | |
| margin: 12px 0; | |
| opacity: 0.6; | |
| } | |
| /* ---- body -------------------------------------------------------------- */ | |
| .slip__body { padding: 0 18px; } | |
| .dropzone { | |
| width: 100%; | |
| appearance: none; | |
| background: transparent; | |
| border: 2px dashed #999; | |
| color: var(--ink-soft); | |
| font-family: var(--mono); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 48px 16px; | |
| cursor: pointer; | |
| } | |
| .dropzone:active { background: rgba(0, 0, 0, 0.04); } | |
| .dropzone__plus { font-size: 40px; line-height: 1; } | |
| .dropzone__label { font-size: 14px; letter-spacing: 0.1em; font-weight: 700; } | |
| .dropzone__hint { font-size: 11px; letter-spacing: 0.08em; opacity: 0.7; } | |
| .spectro { margin: 0; } | |
| .spectro__img { | |
| display: block; | |
| width: 100%; | |
| height: auto; | |
| /* crisp pixels: this is numeric data, not a photo */ | |
| image-rendering: pixelated; | |
| image-rendering: crisp-edges; | |
| } | |
| /* ---- status / spinner -------------------------------------------------- */ | |
| .status { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 48px 16px; | |
| } | |
| .spinner { | |
| width: 34px; | |
| height: 34px; | |
| border: 3px solid rgba(0, 0, 0, 0.15); | |
| border-top-color: var(--ink); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .status__text { | |
| font-size: 13px; | |
| letter-spacing: 0.18em; | |
| } | |
| .status.is-error .spinner { display: none; } | |
| .status.is-error .status__text { color: #b00020; } | |
| /* ---- footer ------------------------------------------------------------ */ | |
| .slip__foot { padding: 0 18px 16px; } | |
| .totals { | |
| font-size: 12px; | |
| letter-spacing: 0.04em; | |
| color: var(--ink); | |
| } | |
| .totals__row { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 2px 0; | |
| } | |
| .totals__row span:last-child { font-weight: 700; } | |
| .slip__thanks { | |
| text-align: center; | |
| font-size: 11px; | |
| letter-spacing: 0.14em; | |
| margin-top: 14px; | |
| color: var(--ink-soft); | |
| } | |
| /* Controls live on the "desk", not on the paper slip. */ | |
| .controls { | |
| width: 100%; | |
| max-width: var(--slip-width); | |
| margin: 20px auto 0; | |
| } | |
| .print-btn { | |
| width: 100%; | |
| padding: 16px; | |
| appearance: none; | |
| background: #f4f4f4; | |
| color: #111; | |
| border: none; | |
| border-radius: 10px; | |
| font-family: var(--mono); | |
| font-size: 15px; | |
| font-weight: 700; | |
| letter-spacing: 0.2em; | |
| cursor: pointer; | |
| } | |
| .print-btn:active { opacity: 0.85; } | |