/* SpotCheck's window, drawn in HTML.
*
* Every colour and every string here was read out of the app's own source, not eyeballed
* from a screenshot:
* Sources/SpotCheckApp/Appearance.swift ground / readout / raised / hairline, pass /
* warn / fail, and the rule that a verdict
* differs in SHAPE as well as colour
* Sources/SpotCheckApp/ContentView.swift file list, report, verdict, measurements,
* platform rows, check rows, drop zone
* Sources/SpotCheckApp/PlayerView.swift picture well, transport
* Sources/SpotCheckApp/CompareView.swift compare grid and its transport
* Sources/SpotCheckApp/ReviewViews.swift the comments rail and the sign-off block
* Sources/SpotCheckKit/Guides.swift guide labels and geometry
* Sources/SpotCheckKit/PlatformZones.swift TikTok's measured zones
*
* It is a drawing, so it can drift. If the report layout changes in the app, this has to
* be checked against it — the same rule /desktop's mockups carry.
*
* Drawn rather than screenshotted because the only display here is 1x: a capture is soft
* for every retina visitor and soft again at any window width that is not exactly the
* capture width. Markup is sharp at every size and every pixel ratio.
*/
.sc {
/* The hero centres its text; the app does not. */
text-align: left;
width: 100%;
/* Theme.swift, exactly. */
--sc-ground: #17181C;
--sc-readout: #1C1E23; /* also Theme.pictureWell */
--sc-raised: #26282E;
--sc-hairline: #33363D;
--sc-pass: #4ADE80;
--sc-warn: #FCD34D;
--sc-fail: #F87171;
--sc-accent: #0A84FF; /* macOS accent, dark appearance */
--sc-text: #F2F3F5;
--sc-2nd: rgba(255,255,255,.62);
--sc-3rd: rgba(255,255,255,.36);
font: 12px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
color: var(--sc-text);
background: var(--sc-ground);
border: 1px solid var(--sc-hairline);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03);
-webkit-font-smoothing: antialiased;
}
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }
/* ── title bar ───────────────────────────────────────────────────────────── */
.sc-title {
display: flex; align-items: center; gap: 10px;
height: 44px; padding: 0 14px;
border-bottom: 1px solid rgba(255,255,255,.07);
background: var(--sc-ground);
}
.sc-lights { display: flex; gap: 8px; }
.sc-lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.sc-lights i:nth-child(1) { background: #FF5F57; }
.sc-lights i:nth-child(2) { background: #FEBC2E; }
.sc-lights i:nth-child(3) { background: #28C840; }
.sc-title .sc-app { font-weight: 600; font-size: 13px; margin-left: 8px; }
.sc-title .sc-sp { margin-left: auto; }
.sc-tools { display: flex; align-items: center; gap: 6px; color: var(--sc-2nd); }
.sc-tool {
display: inline-flex; align-items: center; gap: 5px;
height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px;
}
.sc-tool.sc-grp { background: rgba(255,255,255,.06); padding: 0 9px; gap: 11px; }
.sc-tool svg { width: 14px; height: 14px; }
/* ── body ────────────────────────────────────────────────────────────────── */
.sc-body { display: flex; height: 872px; }
.sc-files {
width: 214px; flex: none; padding: 8px;
border-right: 1px solid rgba(255,255,255,.07);
background: var(--sc-ground);
}
.sc-row {
display: flex; gap: 7px; align-items: flex-start;
padding: 5px 7px; border-radius: 6px; cursor: default;
}
.sc-row.on { background: var(--sc-raised); }
.sc-row .sc-gl { flex: none; width: 15px; margin-top: 1px; }
.sc-row .sc-nm {
font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sc-row .sc-st { font-size: 10px; margin-top: 1px; color: var(--sc-2nd); }
.sc-row .sc-st.bad { color: var(--sc-fail); }
.sc-drop-hint {
margin-top: 8px; padding: 9px 0; text-align: center;
border: 1px dashed rgba(255,255,255,.22); border-radius: 7px;
font-size: 10px; color: var(--sc-3rd);
}
/* ── report column ───────────────────────────────────────────────────────── */
.sc-detail { flex: 1 1 auto; min-width: 0; padding: 20px; overflow: hidden; background: var(--sc-ground); }
.sc-head h4 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.sc-head p { margin: 3px 0 0; font-size: 10px; color: var(--sc-2nd); }
/* the picture well */
.sc-well { margin-top: 18px; padding: 18px; background: var(--sc-readout); border-radius: 8px; }
.sc-pic { position: relative; margin: 0 auto; border-radius: 4px; overflow: hidden; background: #000; }
.sc-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Guides. 1px lines with a dark halo, as GuideRenderer draws them, and the labels in
monospace at 10pt with the same halo. */
.sc-guide { position: absolute; border: 1px solid #fff; filter: drop-shadow(0 0 2px rgba(0,0,0,.7)); }
.sc-guide.safe93 { left: 3.5%; top: 3.5%; right: 3.5%; bottom: 3.5%; }
.sc-guide.safe90 { left: 5%; top: 5%; right: 5%; bottom: 5%; }
.sc-glabel {
position: absolute; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 9px; font-weight: 500; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.9);
white-space: nowrap;
}
/* Exclusion zones are a scrim, not an outline: "this picture is covered". */
.sc-zone { position: absolute; background: rgba(0,0,0,.55); }
.sc-zlabel { color: rgba(255,255,255,.55); }
/* the arrow a reviewer drew */
.sc-mark { position: absolute; inset: 0; pointer-events: none; }
/* transport */
.sc-transport { display: flex; align-items: center; gap: 12px; margin-top: 10px; color: var(--sc-2nd); }
.sc-play { width: 16px; flex: none; }
.sc-track { position: relative; flex: 1 1 auto; height: 4px; border-radius: 2px; background: rgba(255,255,255,.16); }
.sc-track .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--sc-accent); }
.sc-track .knob {
position: absolute; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; margin-left: -6.5px;
border-radius: 50%; background: #E8E9EB; box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.sc-track .tick { position: absolute; top: 7px; width: 2px; height: 6px; border-radius: 1px; background: var(--sc-accent); }
.sc-tc { font-size: 11px; white-space: nowrap; }
.sc-tc b { color: var(--sc-text); font-weight: 400; }
.sc-tmenu { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; white-space: nowrap; }
.sc-tmenu svg { width: 12px; height: 12px; }
/* verdict */
.sc-verdict { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; }
.sc-verdict .sc-mk { flex: none; }
.sc-verdict h5 { margin: 0; font-size: 15px; font-weight: 600; }
.sc-verdict p { margin: 2px 0 0; font-size: 12px; color: var(--sc-2nd); }
/* measurements strip */
.sc-meas {
display: flex; gap: 24px; align-items: flex-start; margin-top: 18px;
padding: 11px 14px; background: var(--sc-readout); border-radius: 7px;
}
.sc-meter { flex: 1 1 auto; max-width: 420px; min-width: 0; }
.sc-meter .lbl { display: flex; justify-content: space-between; align-items: baseline; }
.sc-meter .k { font-size: 10px; letter-spacing: .06em; color: var(--sc-2nd); }
.sc-meter .v { font-size: 15px; font-weight: 600; }
.sc-meter .v small { font-size: 9.5px; font-weight: 500; color: var(--sc-2nd); margin-left: 3px; }
.sc-bar { position: relative; height: 5px; border-radius: 2.5px; background: rgba(255,255,255,.13); margin: 7px 0 4px; }
.sc-bar .band { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.22); }
.sc-bar .tgt { position: absolute; top: -1px; bottom: -1px; width: 1.5px; background: rgba(255,255,255,.5); }
.sc-bar .now { position: absolute; top: -2px; bottom: -2px; width: 2.5px; border-radius: 1px; }
.sc-scale { display: flex; justify-content: space-between; font-size: 9px; color: var(--sc-3rd); }
.sc-tile .k { font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--sc-2nd); }
.sc-tile .v { font-size: 15px; font-weight: 600; margin-top: 3px; }
.sc-tile .v small { font-size: 9.5px; color: var(--sc-2nd); margin-left: 3px; font-weight: 400; }
/* platform rows */
.sc-plats { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.09); }
.sc-plat { border-bottom: 1px solid rgba(255,255,255,.09); }
.sc-plat > .r { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.sc-plat .nm { font-size: 12px; font-weight: 500; }
.sc-plat .why { margin-left: auto; font-size: 10px; text-align: right; }
.sc-plat .chev { flex: none; width: 10px; color: var(--sc-3rd); }
/* the check rows inside an opened platform */
.sc-checks { padding: 0 14px 10px; }
.sc-check { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.sc-check:last-child { border-bottom: 0; }
.sc-check .top { display: flex; gap: 8px; align-items: baseline; }
.sc-check .ti { width: 150px; flex: none; font-size: 12px; }
.sc-check .mv { font-size: 11.5px; }
.sc-check .mv.dim { color: var(--sc-2nd); }
.sc-check .sub { padding-left: 26px; margin-top: 2px; }
.sc-check .sub .exp { font-size: 10px; color: var(--sc-2nd); }
.sc-check .sub .fix { font-size: 10px; margin-top: 1px; }
/* ── comments rail ───────────────────────────────────────────────────────── */
.sc-rail {
width: 214px; flex: none; display: flex; flex-direction: column;
border-left: 1px solid rgba(255,255,255,.07); background: var(--sc-ground);
}
.sc-sign { padding: 12px 14px; }
.sc-sign .btns { display: flex; gap: 7px; }
.sc-sign .btns span {
flex: 1; text-align: center; font-size: 11px; padding: 5px 0; border-radius: 6px;
background: var(--sc-raised); border: 1px solid var(--sc-hairline); color: var(--sc-2nd);
}
.sc-sign .note { margin-top: 9px; font-size: 10px; color: var(--sc-3rd); }
.sc-chead {
display: flex; align-items: center; padding: 11px 14px; font-size: 11px; font-weight: 600;
letter-spacing: .06em; color: var(--sc-2nd);
border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09);
}
.sc-chead .n { margin-left: auto; font-weight: 400; }
.sc-note { padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sc-note.on { background: rgba(10,132,255,.16); }
.sc-note .tc { font-size: 10px; color: var(--sc-2nd); display: flex; align-items: center; gap: 5px; }
.sc-note.on .tc { color: #7FB6FF; }
.sc-note p { margin: 3px 0 0; font-size: 11px; line-height: 1.4; }
.sc-composer {
margin-top: auto; padding: 10px 12px; display: flex; align-items: center; gap: 8px;
font-size: 11px; color: var(--sc-3rd);
border-top: 1px solid rgba(255,255,255,.09);
}
.sc-composer .fld {
flex: 1; background: var(--sc-raised); border: 1px solid var(--sc-hairline);
border-radius: 6px; padding: 6px 9px;
}
.sc-empty {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; text-align: center; padding: 0 16px;
}
.sc-empty .t { font-size: 12px; color: var(--sc-2nd); }
.sc-empty .s { font-size: 10px; color: var(--sc-3rd); }
/* ── compare grid ────────────────────────────────────────────────────────── */
.sc-compare { flex: 1; display: flex; flex-direction: column; background: var(--sc-readout); }
.sc-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; align-content: center; }
.sc-ctile .pic { position: relative; border-radius: 3px; overflow: hidden; background: #000; aspect-ratio: 16/9; }
.sc-ctile .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-ctile .cap { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 10px; color: var(--sc-2nd); }
.sc-ctile .cap .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-ctile .cap .tc { margin-left: auto; }
.sc-ctile .cap .tc.off { color: var(--sc-accent); }
.sc-ctransport {
display: flex; align-items: center; gap: 12px; padding: 10px 14px;
background: var(--sc-ground); border-top: 1px solid rgba(255,255,255,.09); color: var(--sc-2nd);
}
.sc-seg { display: flex; border: 1px solid var(--sc-hairline); border-radius: 6px; overflow: hidden; font-size: 11px; }
.sc-seg span { padding: 4px 10px; white-space: nowrap; }
.sc-seg span.on { background: var(--sc-raised); color: var(--sc-text); }
.sc-btn {
display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; white-space: nowrap;
}
/* ── drop zone ───────────────────────────────────────────────────────────── */
.sc-dropzone { flex: 1; padding: 28px; background: var(--sc-ground); }
.sc-dropzone .inner {
height: 100%; border: 1.5px dashed rgba(255,255,255,.4); border-radius: 12px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px;
text-align: center; padding: 40px;
}
.sc-dropzone .t { font-size: 15px; font-weight: 500; }
.sc-dropzone .s { font-size: 12px; color: var(--sc-2nd); margin-top: 4px; }
.sc-dropzone .pick {
display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
padding: 5px 11px; border-radius: 6px; font-size: 12px;
background: var(--sc-raised); border: 1px solid var(--sc-hairline);
}
.sc-dropzone .choose {
margin-top: 2px; padding: 4px 13px; border-radius: 6px; font-size: 12px;
background: var(--sc-raised); border: 1px solid var(--sc-hairline);
}
/* ── the slideshow around it ─────────────────────────────────────────────── */
/* 100, not 46: at a 56px headline the window was crowding the copy above it, sitting
about 57px under the requirement line. The hero needs the gap to read as two things. */
.stage { position: relative; max-width: 1180px; margin: 100px auto 0; }
.slide { display: none; }
.slide.on { display: block; }
.sc-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.sc-nav button {
width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
background: transparent; border: 1px solid var(--rule); color: var(--muted);
display: inline-flex; align-items: center; justify-content: center;
}
.sc-nav button:hover:not(:disabled) { color: #fff; border-color: rgba(255,255,255,.3); }
.sc-nav button:disabled { opacity: .35; cursor: default; }
.sc-nav svg { width: 14px; height: 14px; }
.sc-dots { display: flex; gap: 7px; }
.sc-dots button {
width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(255,255,255,.22);
}
.sc-dots button.on { background: rgba(255,255,255,.75); }
.sc-caption { text-align: center; font-size: 13px; color: var(--dim); margin-top: 14px; }
/* Touch: the slide controls are drawn at desktop sizes, and a 7px dot is not something
a thumb can hit. The dots keep their size on screen and grow only their hit area, via
padding the background is clipped out of — a bigger dot would read as a different
control, and the row would stop looking like dots. 44px is Apple's minimum target.
Pointer-coarse rather than a width breakpoint: it is the input that is imprecise, and a
touchscreen laptop deserves the same treatment as a phone. */
@media (pointer: coarse) {
.sc-nav button { width: 44px; height: 44px; }
/* The button becomes the target and stops drawing anything; the dot moves to a
pseudo-element so it stays a 7px circle inside a 28x44 box. (Painting the button
itself and clipping the background would inherit the 50% radius from a box that is
no longer square, and the dot would come out an oval.) */
.sc-dots { gap: 0; }
.sc-dots button {
width: 28px; height: 44px; padding: 0; border-radius: 0;
background: transparent;
display: inline-flex; align-items: center; justify-content: center;
}
/* `.sc-dots button.on` above is more specific than the reset, so the active dot would
otherwise keep painting its own background and render as a 28x44 light slab. */
.sc-dots button.on { background: transparent; }
.sc-dots button::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: rgba(255,255,255,.22);
}
.sc-dots button.on::before { background: rgba(255,255,255,.75); }
}
/* Narrow screens: the window is a fixed piece of furniture, so it is SHRUNK rather than
reflowed into a layout the app has never had. It used to scroll sideways instead, which
on a phone showed the file list and a sliver of the picture — the product was not
visible at all, and a third of a window reads as a broken page rather than as a bleed.
Small and whole beats large and cropped for something whose job is to show the shape of
the app.
`zoom` rather than `transform: scale()` on purpose: zoom shrinks the layout box with the
element, so the dots and the caption underneath ride up with it. A transform would leave
the full 1080px box behind and open a tall gap that has to be measured and corrected on
every slide change. The factor is set on .stage as --sc-zoom (see index.html); a browser
without zoom support ignores it and falls back to the scroll this replaced. */
@media (max-width: 1120px) {
.stage { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stage .sc { width: 1080px; zoom: var(--sc-zoom, 1); }
}