Add 1280x800 store listing screenshots + composition harness

- store/store-1-dashboard.png: findings console with sample data
- store/store-2-popup.png: hero composition with popup UI
- store/store-3-empty.png: radar empty state
- preview/store.css + store-popup.html: composition page
- preview/results-preview-empty.html + preview-stub-empty.js: empty-state variant
This commit is contained in:
momenbasel
2026-07-18 13:06:49 +03:00
parent 882e298d85
commit 4d8e4df8fc
8 changed files with 367 additions and 1 deletions
+120
View File
@@ -0,0 +1,120 @@
/* Store-listing composition backdrop (preview only, not shipped) */
body.store {
width: auto;
min-width: 0;
background: #04060a;
overflow: hidden;
}
.stage {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 72px;
width: 1280px;
height: 800px;
padding: 0 64px;
}
/* ambient brand glows */
.stage::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(560px 420px at 12% 18%, rgba(245,165,36,.09) 0%, transparent 60%),
radial-gradient(620px 480px at 88% 82%, rgba(69,208,196,.07) 0%, transparent 60%);
pointer-events: none;
}
.copy { max-width: 560px; }
.kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: .22em;
color: var(--green);
border: 1px solid rgba(61,220,151,.32);
background: rgba(61,220,151,.06);
padding: 5px 9px;
border-radius: 2px;
margin-bottom: 26px;
}
.kicker::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 8px var(--green);
}
.copy h1 {
font-size: 46px;
font-weight: 700;
line-height: 1.08;
letter-spacing: .01em;
color: #fff;
margin-bottom: 20px;
}
.copy h1 em {
font-style: normal;
color: var(--amber);
}
.copy p {
font-size: 13px;
line-height: 1.7;
color: var(--text-dim);
margin-bottom: 26px;
max-width: 440px;
}
.spec {
list-style: none;
display: flex;
flex-direction: column;
gap: 9px;
}
.spec li {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
letter-spacing: .08em;
color: var(--text-faint);
text-transform: uppercase;
}
.spec li::before {
content: "▸";
color: var(--teal);
font-size: 10px;
}
/* floating popup frame */
.popup-frame {
position: relative;
flex: none;
width: 372px;
border: 1px solid var(--line-strong);
border-radius: 8px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(245,165,36,.08),
0 24px 80px rgba(0,0,0,.65),
0 0 120px rgba(245,165,36,.05);
}
.popup-frame::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(245,165,36,.6), transparent);
z-index: 2;
}