teaser v8: a 58 s story instead of a feature list (the game is done; the stores pile up; one missing line; hand it to your AI; a montage of builds, screenshots, products, forms, consoles; the scan turns green; one button is yours; Waiting for review; the end card), one short line per scene, cuts on the 120 BPM beat; music rewritten for the arc (calm, tension, near silence, a driving build, a stop, a resolve), mastered with one gain instead of dynamic loudnorm; the pile shows real console plan, Data safety CSV and price sheet lines, the builds beat real apple / play build dry runs; desktop.ts captures submit-ready (Send for review before the press); tests check every line, the beat-aligned cuts and the caption times; two unused teaser icons dropped
This commit is contained in:
parent
d5ffc159c0
commit
0b6c8cd7a0
11 changed files with 1117 additions and 1041 deletions
|
|
@ -22,18 +22,17 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
|
|||
-webkit-font-smoothing: antialiased; }
|
||||
#stage > * { position: absolute; }
|
||||
.scene { inset: 0; opacity: 0; visibility: hidden; overflow: hidden; }
|
||||
.scene > .cam { position: absolute; inset: 0; transform-origin: 50% 60%; }
|
||||
.scene > .cam { position: absolute; inset: 0; transform-origin: 50% 55%; }
|
||||
.abs { position: absolute; }
|
||||
|
||||
/* icons: Phosphor files in icons/ (tools/site-icons.ts), shown as masks in the element's colour */
|
||||
.pi { display: inline-block; width: 1em; height: 1em; background: currentColor; vertical-align: -0.14em; flex: none;
|
||||
-webkit-mask: var(--pi) center / contain no-repeat; mask: var(--pi) center / contain no-repeat; }
|
||||
.i-tray { --pi: url(icons/tray-bold.svg); } .i-x { --pi: url(icons/x-circle-fill.svg); }
|
||||
.i-ok { --pi: url(icons/check-circle-fill.svg); } .i-check { --pi: url(icons/check-bold.svg); }
|
||||
.i-stop { --pi: url(icons/warning-octagon-fill.svg); } .i-send { --pi: url(icons/paper-plane-tilt-fill.svg); }
|
||||
.i-term { --pi: url(icons/terminal-window-bold.svg); } .i-cursor { --pi: url(icons/navigation-arrow-fill.svg); }
|
||||
|
||||
/* ---------- background: a calm, slowly drifting glow ---------- */
|
||||
/* ---------- background: a calm, slowly drifting glow; the veil darkens the picture (rejection, request) ---------- */
|
||||
#bg { inset: 0; }
|
||||
#bg .glow { position: absolute; border-radius: 50%; }
|
||||
#bg .g1 { width: 1400px; height: 1400px; background: radial-gradient(circle, rgba(91,92,240,.30), rgba(91,92,240,0) 62%); }
|
||||
|
|
@ -41,147 +40,111 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
|
|||
#bg .grid { position: absolute; inset: -96px; opacity: .45;
|
||||
background-image: linear-gradient(rgba(148,163,184,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.05) 1px, transparent 1px);
|
||||
background-size: 96px 96px; }
|
||||
#veil { inset: 0; pointer-events: none; opacity: 0; background: #020308; }
|
||||
#vig { inset: 0; pointer-events: none; z-index: 40; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%); }
|
||||
|
||||
/* ---------- caption: top, big, clean ---------- */
|
||||
#capband { left: 0; right: 0; top: 0; height: 250px; z-index: 45; pointer-events: none;
|
||||
background: linear-gradient(rgba(7,11,22,.9) 0%, rgba(7,11,22,.7) 60%, rgba(7,11,22,0) 100%); }
|
||||
#cap { z-index: 50; left: 100px; right: 100px; top: 58px; text-align: center; font-family: var(--display); font-weight: 750;
|
||||
font-size: 72px; letter-spacing: -0.025em; line-height: 1.12; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.5); }
|
||||
#cap .line { display: block; white-space: nowrap; }
|
||||
/* ---------- captions: the story line at the top (big, calm); the montage word at the bottom left edge ---------- */
|
||||
#capband { left: 0; right: 0; top: 0; height: 260px; z-index: 45; pointer-events: none; opacity: 0;
|
||||
background: linear-gradient(rgba(7,11,22,.88) 0%, rgba(7,11,22,.65) 60%, rgba(7,11,22,0) 100%); }
|
||||
#cap { z-index: 50; left: 80px; right: 80px; top: 64px; text-align: center; font-family: var(--display); font-weight: 750;
|
||||
font-size: 88px; letter-spacing: -0.03em; line-height: 1.1; color: #fff; white-space: nowrap; text-shadow: 0 4px 30px rgba(0,0,0,.55); opacity: 0; }
|
||||
#cap .hl { color: var(--accent); } #cap.red .hl { color: var(--red); } #cap.green .hl { color: var(--green); }
|
||||
#edgeband { left: 0; right: 0; bottom: 0; height: 300px; z-index: 45; pointer-events: none; opacity: 0;
|
||||
background: linear-gradient(rgba(7,11,22,0) 0%, rgba(7,11,22,.75) 55%, rgba(7,11,22,.92) 100%); }
|
||||
#edge { z-index: 50; left: 96px; bottom: 70px; font-family: var(--display); font-weight: 850; font-size: 108px; letter-spacing: -0.035em;
|
||||
line-height: 1; color: #fff; white-space: nowrap; text-shadow: 0 6px 30px rgba(0,0,0,.6); opacity: 0; }
|
||||
|
||||
/* ---------- shared: cards, terminal, pills ---------- */
|
||||
/* ---------- shared: cards, terminal ---------- */
|
||||
.card { position: absolute; background: var(--surface); border: 2px solid var(--line); border-radius: 24px; overflow: hidden;
|
||||
box-shadow: 0 30px 80px rgba(0,0,0,.45); }
|
||||
.card .ch { display: flex; align-items: center; gap: 14px; padding: 18px 26px; border-bottom: 2px solid var(--line);
|
||||
font: 700 26px/1.2 var(--mono); color: #fff; background: rgba(255,255,255,.02); }
|
||||
font: 700 26px/1.2 var(--mono); color: #fff; background: rgba(255,255,255,.02); white-space: nowrap; }
|
||||
.card .ch .dots { display: flex; gap: 9px; margin-right: 8px; } .card .ch .dots i { width: 14px; height: 14px; border-radius: 50%; background: #3a4255; display: block; }
|
||||
.card .ch .sub { margin-left: auto; font: 600 22px/1 var(--text); color: var(--muted); }
|
||||
.term { font-family: var(--mono); color: var(--ink-2); }
|
||||
.term .ln { display: block; white-space: pre; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
|
||||
.ps { color: var(--green); font-weight: 700; } .cmd { color: #fff; font-weight: 700; }
|
||||
.caret { display: inline-block; width: .55em; height: 1.05em; background: #e5e7eb; vertical-align: -0.18em; margin-left: 3px; }
|
||||
.caret { display: inline-block; width: .5em; height: 1.05em; background: #e5e7eb; vertical-align: -0.18em; margin-left: 4px; }
|
||||
.tag { color: var(--dim); } .okk { color: var(--green); font-weight: 800; } .bad { color: var(--red); font-weight: 800; }
|
||||
.num { color: #fff; font-weight: 800; } .loc { color: var(--cyan); } .warnk { color: var(--yellow); font-weight: 800; }
|
||||
.pill { position: absolute; display: inline-flex; align-items: center; gap: 12px; border-radius: 99px; background: rgba(13,20,38,.94);
|
||||
border: 2px solid var(--line-2); box-shadow: 0 20px 50px rgba(0,0,0,.45); font: 800 40px/1 var(--display); color: #fff;
|
||||
padding: 18px 34px; letter-spacing: -0.015em; white-space: nowrap; opacity: 0; }
|
||||
.pill b { color: var(--accent); font-weight: 900; } .pill.green b { color: var(--green); }
|
||||
|
||||
/* ---------- 1 hook ---------- */
|
||||
#appcard { left: 230px; top: 330px; width: 520px; text-align: center; }
|
||||
#appcard img { width: 300px; height: 300px; border-radius: 66px; display: block; margin: 0 auto;
|
||||
box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 2px rgba(255,255,255,.08); }
|
||||
#appcard .nm { margin-top: 30px; font: 800 46px/1 var(--display); letter-spacing: -0.02em; }
|
||||
#appcard .done { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font: 800 30px/1 var(--display); color: #052e16;
|
||||
background: var(--green); border-radius: 99px; padding: 12px 26px; }
|
||||
#todo { left: 870px; top: 320px; width: 820px; }
|
||||
#todo .ch { font-family: var(--display); font-size: 30px; }
|
||||
#todo .row { display: flex; align-items: center; gap: 24px; padding: 20px 30px; border-bottom: 1px solid var(--line); font: 700 40px/1.1 var(--display);
|
||||
color: var(--ink); opacity: 0; letter-spacing: -0.01em; }
|
||||
#todo .row:last-child { border-bottom: 0; }
|
||||
#todo .box { width: 38px; height: 38px; border-radius: 10px; border: 3px solid var(--line-2); flex: none; }
|
||||
#mail { left: 230px; width: 1460px; top: 806px; height: 156px; background: #fff; color: #16181d; border-radius: 22px; opacity: 0;
|
||||
display: grid; grid-template-columns: 50px 1fr auto; column-gap: 8px; padding: 24px 40px 24px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
|
||||
#mail .dot { width: 18px; height: 18px; border-radius: 50%; background: #2563eb; margin: 12px 0 0 14px; }
|
||||
#mail .from { font: 800 32px/1.2 var(--text); color: #101216; }
|
||||
#mail .date { font: 500 26px/1.3 var(--text); color: #6b7280; text-align: right; }
|
||||
#mail .subj { grid-column: 2 / 4; font: 700 30px/1.35 var(--text); color: #1d5fe0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
#mail .prev { grid-column: 2 / 4; font: 400 26px/1.35 var(--text); color: #5d6575; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
#mail .prev b { color: #b91c1c; font-weight: 800; }
|
||||
/* ---------- 1 game: the game's own screens ---------- */
|
||||
.phone { position: absolute; top: 290px; width: 330px; height: 676px; border-radius: 46px; overflow: hidden; opacity: 0;
|
||||
background: #000 center / cover no-repeat; box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 6px #0b0e16, 0 0 0 8px rgba(255,255,255,.12); }
|
||||
|
||||
/* ---------- 2 init ---------- */
|
||||
#folder { left: 150px; top: 300px; width: 540px; height: 680px; }
|
||||
#folder .ch { font-family: var(--display); }
|
||||
#folder .empty { position: absolute; left: 0; right: 0; top: 300px; text-align: center; font: 600 30px/1 var(--text); color: var(--dim); }
|
||||
#folder .files { padding: 18px 0; }
|
||||
#folder .f { display: flex; align-items: center; gap: 16px; padding: 9px 30px; font: 600 27px/1.2 var(--mono); color: var(--ink); opacity: 0; }
|
||||
#folder .f .ic { width: 26px; height: 32px; border-radius: 5px; background: var(--surface-2); border: 2px solid var(--line-2); flex: none; }
|
||||
#folder .f .d { color: var(--dim); }
|
||||
#initterm { left: 750px; top: 300px; width: 1030px; height: 680px; }
|
||||
#initterm .body { padding: 22px 30px; font-size: 27px; line-height: 1.55; }
|
||||
/* ---------- 2 pile ---------- */
|
||||
.pcard { opacity: 0; transform-origin: 50% 50%; }
|
||||
.pcard .body { position: relative; height: 330px; overflow: hidden; }
|
||||
.pcard .rows { position: absolute; left: 0; right: 0; top: 0; padding: 14px 26px; font: 500 21px/1.6 var(--mono); color: var(--ink-2); }
|
||||
.pcard .rows div { white-space: pre; overflow: hidden; text-overflow: ellipsis; }
|
||||
.pcard .rows .okk { font-weight: 800; }
|
||||
.pcard .shade { position: absolute; inset: 0; background: #04060c; opacity: 0; pointer-events: none; }
|
||||
.pcard .grid { position: absolute; inset: 16px 22px; }
|
||||
.pcard .tile { position: absolute; border-radius: 6px; background: center / cover no-repeat; box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
|
||||
|
||||
/* ---------- 3 plan ---------- */
|
||||
#prompt { left: 210px; top: 270px; width: 1500px; padding: 24px 32px; display: flex; align-items: center; gap: 22px;
|
||||
background: var(--surface-2); border: 2px solid var(--accent-2); border-radius: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 6px rgba(91,92,240,.12); opacity: 0; }
|
||||
#prompt .who { font: 800 22px/1 var(--text); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .08em; flex: none; }
|
||||
#prompt .txt { font: 700 40px/1.2 var(--display); color: #fff; letter-spacing: -0.01em; }
|
||||
#planterm { left: 210px; top: 392px; width: 1500px; opacity: 0; }
|
||||
#planterm .body { padding: 16px 30px 20px; font-size: 24px; line-height: 1.5; }
|
||||
#plan-pill { left: 50%; top: 940px; }
|
||||
/* ---------- 3 reject: the finding ---------- */
|
||||
#finding { left: 50%; top: 52%; width: max-content; padding: 34px 44px 38px; border-radius: 26px; background: #1a0d12;
|
||||
border: 3px solid rgba(255,90,95,.65); box-shadow: 0 0 0 10px rgba(229,72,77,.12), 0 0 160px rgba(229,72,77,.35), 0 50px 120px rgba(0,0,0,.7);
|
||||
font-family: var(--mono); opacity: 0; transform-origin: 50% 50%; }
|
||||
#finding .l1 { display: flex; align-items: center; gap: 18px; white-space: nowrap; font-size: 31px; font-weight: 700; color: #ffd6d7; }
|
||||
#finding .sev { color: #fff; background: var(--red-2); border-radius: 9px; padding: 3px 14px; font-weight: 800; }
|
||||
#finding .gl { color: #fff; font-weight: 800; }
|
||||
#finding .l2 { margin-top: 18px; white-space: nowrap; font-size: 26px; color: var(--ink-2); }
|
||||
#finding .l2 .loc { font-weight: 700; }
|
||||
|
||||
/* ---------- 4 store ---------- */
|
||||
#copy { left: 110px; top: 300px; width: 640px; }
|
||||
#copy .row { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 18px; padding: 22px 28px; border-bottom: 1px solid var(--line); opacity: 0; }
|
||||
#copy .row:last-child { border-bottom: 0; }
|
||||
#copy .lg { font: 800 26px/1 var(--mono); color: var(--accent-ink); background: rgba(91,92,240,.18); border-radius: 10px; padding: 10px 0; text-align: center; }
|
||||
#copy .tt { font: 800 33px/1.2 var(--display); white-space: nowrap; color: #fff; letter-spacing: -0.01em; }
|
||||
#copy .tt.rtl { direction: rtl; text-align: right; }
|
||||
#shots { left: 800px; top: 300px; width: 1020px; height: 700px; }
|
||||
#shots .lab { position: absolute; font: 700 17px/1.15 var(--text); color: var(--muted); text-align: center; white-space: pre; opacity: 0; }
|
||||
#shots .lang { position: absolute; font: 800 20px/1 var(--mono); color: var(--accent-ink); opacity: 0; }
|
||||
/* ---------- 4 ask: the request ---------- */
|
||||
#prompt { left: 260px; top: 470px; width: 1400px; padding: 30px 38px; display: flex; flex-direction: column; gap: 16px;
|
||||
background: rgba(21,31,54,.92); border: 2px solid var(--accent-2); border-radius: 26px; box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 8px rgba(91,92,240,.12); opacity: 0; }
|
||||
#prompt .who { display: flex; align-items: center; gap: 12px; font: 800 22px/1 var(--text); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .1em; }
|
||||
#prompt .txt { font: 700 50px/1.2 var(--display); color: #fff; letter-spacing: -0.015em; white-space: nowrap; }
|
||||
#prompt .sent { position: absolute; right: 30px; bottom: 30px; width: 58px; height: 58px; border-radius: 50%; background: var(--accent-2);
|
||||
display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; opacity: .35; }
|
||||
|
||||
/* ---------- 5 montage ---------- */
|
||||
.mterm { left: 120px; top: 110px; width: 1680px; }
|
||||
.mterm .body { padding: 22px 34px 26px; font-size: 30px; line-height: 1.6; }
|
||||
#shots { left: 110px; top: 90px; width: 1700px; height: 760px; }
|
||||
#shots .lab { position: absolute; font: 700 20px/1.15 var(--text); color: var(--muted); text-align: center; white-space: nowrap; opacity: 0; }
|
||||
#shots .lang { position: absolute; font: 800 22px/1 var(--mono); color: var(--accent-ink); opacity: 0; }
|
||||
#shots .tile { position: absolute; border-radius: 8px; background-size: cover; background-position: center; opacity: 0;
|
||||
box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
|
||||
#store-pill { left: 430px; top: 770px; }
|
||||
#shotcmd { left: 430px; top: 880px; transform: translateX(-50%); font: 700 26px/1 var(--mono); color: var(--ink-2); opacity: 0; white-space: nowrap; }
|
||||
|
||||
/* ---------- 5 products ---------- */
|
||||
#prodterm { left: 160px; top: 300px; width: 1600px; }
|
||||
#prodterm .body { padding: 20px 32px; font-size: 26px; line-height: 1.62; }
|
||||
#prod-pill { left: 50%; top: 900px; }
|
||||
|
||||
/* ---------- 6 forms ---------- */
|
||||
#prop { left: 110px; top: 300px; width: 1010px; }
|
||||
#prop { left: 110px; top: 110px; width: 1010px; }
|
||||
#prop .ln { display: block; font: 600 25px/1.45 var(--mono); padding: 8px 28px; opacity: 0; white-space: nowrap; position: relative; }
|
||||
#prop .ln .v1 { display: block; white-space: pre; } #prop .ln .v1 .loc { float: right; }
|
||||
#prop .ln .v2 { display: block; padding-left: 11ch; color: var(--muted); }
|
||||
#prop .ln .k { color: var(--green); font-weight: 800; } #prop .ln .w { color: #fff; font-weight: 800; }
|
||||
#prop .ln.ask { display: block; white-space: normal; margin: 10px 16px 14px; border-radius: 14px; padding: 14px 18px; }
|
||||
#prop .ln.ask { display: block; white-space: normal; margin: 10px 16px 18px; border-radius: 14px; padding: 14px 18px; }
|
||||
#prop .ln.ask .k { color: var(--yellow); }
|
||||
#prop .ln.ask .glow { position: absolute; inset: 0; border-radius: 14px; background: var(--yellow-bg); border: 3px solid var(--yellow); opacity: 0; }
|
||||
#prop .ln.ask > span:not(.glow) { position: relative; }
|
||||
#prop .askn { display: block; padding: 0 28px 22px; font: 700 26px/1.3 var(--display); color: var(--yellow); opacity: 0; }
|
||||
#form { left: 1170px; top: 300px; width: 640px; }
|
||||
#form .ch { font-family: var(--display); }
|
||||
#form { left: 1170px; top: 110px; width: 640px; }
|
||||
#form .row { display: flex; align-items: center; gap: 20px; padding: 0 28px; height: 64px; border-bottom: 1px solid var(--line); font: 700 30px/1 var(--text); color: var(--ink-2); }
|
||||
#form .row:last-child { border-bottom: 0; }
|
||||
#form .box { width: 38px; height: 38px; border-radius: 10px; border: 3px solid var(--line-2); position: relative; flex: none; }
|
||||
#form .box .pi { position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; color: #04150b; }
|
||||
#form .box .fill { position: absolute; inset: -3px; border-radius: 10px; background: var(--green); opacity: 0; }
|
||||
#form .row .tg { margin-left: auto; font: 700 21px/1 var(--mono); color: var(--green); opacity: 0; }
|
||||
#forms-pill { left: 1490px; top: 900px; }
|
||||
|
||||
/* ---------- 7 consoles ---------- */
|
||||
#cpterm { left: 160px; top: 290px; width: 1600px; }
|
||||
#cpterm .body { padding: 18px 30px 22px; font-size: 24px; line-height: 1.5; }
|
||||
#form .count { padding: 18px 28px 22px; font: 800 44px/1 var(--display); color: #fff; border-top: 2px solid var(--line); opacity: 0; }
|
||||
#form .count b { color: var(--green); }
|
||||
#cpterm .ln.fin { position: relative; display: inline-block; margin: 6px 0 0 -14px; padding: 6px 14px; border-radius: 12px; }
|
||||
#cpterm .ln.fin .glow { position: absolute; inset: 0; border-radius: 12px; background: var(--yellow-bg); border: 3px solid var(--yellow); opacity: 0; }
|
||||
#cpterm .ln.fin > span:not(.glow) { position: relative; }
|
||||
#cpterm .ln.fin .k { color: var(--yellow); font-weight: 800; } #cpterm .ln.fin .w { color: #fff; font-weight: 800; }
|
||||
#cp-pill { left: 50%; top: 930px; }
|
||||
#cpterm .body { font-size: 26px; line-height: 1.55; }
|
||||
.dhost { position: absolute; inset: 0; }
|
||||
|
||||
/* ---------- 8 rejections ---------- */
|
||||
#scanterm { left: 160px; top: 290px; width: 1600px; }
|
||||
#scanterm .body { padding: 18px 30px 24px; font-size: 26px; line-height: 1.45; }
|
||||
.fd { position: relative; margin: 10px 0; padding: 14px 22px 16px; border-radius: 16px; opacity: 0; }
|
||||
.fd .tint { position: absolute; inset: 0; border-radius: 16px; }
|
||||
/* ---------- 6 scan ---------- */
|
||||
#scanterm { left: 120px; top: 290px; width: 1680px; }
|
||||
#scanterm .body { padding: 20px 32px 26px; font-size: 27px; line-height: 1.5; }
|
||||
.fd { position: relative; display: flex; align-items: center; gap: 16px; margin: 8px 0; padding: 10px 18px; border-radius: 14px; white-space: nowrap; opacity: 0; }
|
||||
.fd .tint { position: absolute; inset: 0; border-radius: 14px; }
|
||||
.fd .tint.b { background: var(--red-bg); border: 2px solid rgba(255,90,95,.4); }
|
||||
.fd .tint.g { background: var(--green-bg); border: 2px solid rgba(61,220,132,.55); opacity: 0; }
|
||||
.fd > *:not(.tint) { position: relative; }
|
||||
.fd .l1 { display: flex; align-items: center; gap: 14px; white-space: nowrap; overflow: hidden; }
|
||||
.fd .sev { display: inline-block; font-weight: 800; color: #fff; background: var(--red-2); border-radius: 8px; padding: 1px 12px; }
|
||||
.fd .sev.high { background: #c2410c; }
|
||||
.fd .gl { color: #fff; font-weight: 800; } .fd .ttl { color: #ffd6d7; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
|
||||
.fd .why { display: flex; align-items: center; gap: 12px; margin-top: 8px; font: 700 31px/1.2 var(--display); color: #fff; letter-spacing: -0.005em; }
|
||||
.fd .why .pi { color: var(--red); font-size: 30px; }
|
||||
.fd .why .at { margin-left: auto; font: 600 24px/1 var(--mono); }
|
||||
.fd .why .fixed { margin-left: 18px; }
|
||||
.fd .fixed { font: 800 22px/1 var(--mono); color: #052e16; background: var(--green); border-radius: 8px; padding: 6px 12px; opacity: 0; }
|
||||
#rescan .ln { display: block; opacity: 0; }
|
||||
.fd .pi { font-size: 30px; }
|
||||
.fd .tx { overflow: hidden; text-overflow: ellipsis; color: #ffd6d7; font-weight: 600; }
|
||||
.fd .sev { font-weight: 800; color: #fff; }
|
||||
|
||||
/* ---------- 7, 9-13 desktop window ---------- */
|
||||
/* ---------- desktop window ---------- */
|
||||
.win { position: absolute; border-radius: 20px; overflow: hidden; background: #0b0f19; border: 1.5px solid rgba(255,255,255,.12);
|
||||
box-shadow: 0 50px 120px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.6); }
|
||||
.win .bar { position: absolute; left: 0; right: 0; top: 0; height: 40px; background: #161b27; border-bottom: 1px solid #222a3a;
|
||||
|
|
@ -192,92 +155,71 @@ html, body { margin: 0; padding: 0; background: #000; overflow: hidden; }
|
|||
.win .view .cam2 { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; }
|
||||
.win .view .grp { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; }
|
||||
.win .view img { position: absolute; left: 0; top: 0; display: block; width: 1280px; height: 800px; }
|
||||
/* the pointer (Phosphor navigation-arrow, fill): a chart's hover sweep, or resting on a button (it never clicks) */
|
||||
.dcur { position: absolute; z-index: 6; width: 52px; height: 52px; left: 0; top: 0; opacity: 0;
|
||||
/* the pointer (Phosphor navigation-arrow, fill) */
|
||||
.dcur { position: absolute; z-index: 6; width: 56px; height: 56px; left: 0; top: 0; opacity: 0;
|
||||
filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1.5px #000) drop-shadow(0 8px 12px rgba(0,0,0,.55)); }
|
||||
.dcur .pi { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; }
|
||||
.callout { position: absolute; z-index: 5; font: 800 32px/1 var(--display); color: #fff; background: var(--accent-2);
|
||||
padding: 16px 26px; border-radius: 16px; white-space: nowrap; box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 0 3px rgba(255,255,255,.12);
|
||||
transform-origin: 50% 100%; opacity: 0; }
|
||||
.callout.green { background: #15803d; }
|
||||
.ring { position: absolute; z-index: 4; border: 4px solid var(--accent); border-radius: 14px; opacity: 0;
|
||||
box-shadow: 0 0 0 6px rgba(139,147,255,.22), 0 0 40px rgba(139,147,255,.45); }
|
||||
.ring.green { border-color: var(--green); box-shadow: 0 0 0 6px rgba(61,220,132,.22), 0 0 40px rgba(61,220,132,.45); }
|
||||
|
||||
/* ---------- 13 submit: the end card ---------- */
|
||||
#brand { left: 0; right: 0; top: 330px; text-align: center; }
|
||||
/* ---------- 9 end card ---------- */
|
||||
#brand { left: 0; right: 0; top: 250px; text-align: center; }
|
||||
#brand > * { opacity: 0; }
|
||||
#brand .mark { width: 190px; height: 190px; display: block; margin: 0 auto; filter: drop-shadow(0 30px 70px rgba(91,92,240,.6)); }
|
||||
#brand .word { margin-top: 30px; font: 900 118px/1 var(--display); letter-spacing: -0.05em; color: #fff; }
|
||||
#brand .url { margin-top: 26px; font: 800 56px/1 var(--display); color: var(--accent); letter-spacing: -0.02em; }
|
||||
#brand .plat { margin-top: 26px; font: 600 34px/1.3 var(--text); color: var(--ink-2); }
|
||||
#brand .mark { width: 200px; height: 200px; display: block; margin: 0 auto; filter: drop-shadow(0 30px 70px rgba(91,92,240,.6)); }
|
||||
#brand .word { margin-top: 26px; font: 900 120px/1 var(--display); letter-spacing: -0.05em; color: #fff; }
|
||||
#brand .line { margin-top: 40px; font: 750 64px/1.1 var(--display); letter-spacing: -0.025em; color: #fff; }
|
||||
#brand .url { margin-top: 28px; font: 700 42px/1 var(--display); color: var(--accent); letter-spacing: -0.01em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="stage">
|
||||
<div id="bg"><div class="grid"></div><div class="glow g1"></div><div class="glow g2"></div></div>
|
||||
<div id="veil"></div>
|
||||
|
||||
<div class="scene" id="s-hook"><div class="cam">
|
||||
<div id="appcard" class="abs"><img id="appicon" src="examples/demo-game/store/icon/icon.png" alt=""><div class="nm"></div><span class="done"><span class="pi i-check"></span>Done</span></div>
|
||||
<div class="card" id="todo"><div class="ch">Still to do on the stores</div><div class="rows"></div></div>
|
||||
<div id="mail" class="abs"><span class="dot"></span><span class="from"></span><span class="date"></span><span class="subj"></span><span class="prev"></span></div>
|
||||
<div class="scene" id="s-game"><div class="cam" id="game"></div></div>
|
||||
<div class="scene" id="s-pile"><div class="cam" id="pile"></div></div>
|
||||
<div class="scene" id="s-reject"><div class="cam">
|
||||
<div id="finding" class="abs"><div class="l1"></div><div class="l2"></div></div>
|
||||
</div></div>
|
||||
<div class="scene" id="s-ask"><div class="cam">
|
||||
<div id="prompt" class="abs"><span class="who"><span class="pi i-term"></span>You, to your AI agent</span><span class="txt"></span><span class="sent"><span class="pi i-send"></span></span></div>
|
||||
</div></div>
|
||||
|
||||
<div class="scene" id="s-init"><div class="cam">
|
||||
<div class="card" id="folder"><div class="ch"><span class="dots"><i></i><i></i><i></i></span><span class="fname"></span></div><div class="empty">empty folder</div><div class="files"></div></div>
|
||||
<div class="card term" id="initterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal</div><div class="body"></div></div>
|
||||
<div class="scene" id="s-builds"><div class="cam">
|
||||
<div class="card term mterm" id="buildterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal</div><div class="body"></div></div>
|
||||
</div></div>
|
||||
|
||||
<div class="scene" id="s-plan"><div class="cam">
|
||||
<div id="prompt" class="abs"><span class="who">You, to your agent</span><span class="txt"></span></div>
|
||||
<div class="card term" id="planterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal<span class="sub">read-only</span></div><div class="body"></div></div>
|
||||
<div class="pill" id="plan-pill"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="scene" id="s-store"><div class="cam">
|
||||
<div class="card" id="copy"><div class="ch"><span class="dots"><i></i><i></i><i></i></span><span class="fname"></span></div><div class="rows"></div></div>
|
||||
<div id="shots" class="abs"></div>
|
||||
<div class="pill" id="store-pill"></div>
|
||||
<div id="shotcmd" class="abs"><span class="ps">$</span> <span class="cmd"></span></div>
|
||||
</div></div>
|
||||
|
||||
<div class="scene" id="s-shots"><div class="cam"><div id="shots" class="abs"></div></div></div>
|
||||
<div class="scene" id="s-products"><div class="cam">
|
||||
<div class="card term" id="prodterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal<span class="sub">App Store Connect · Google Play</span></div><div class="body"></div></div>
|
||||
<div class="pill green" id="prod-pill"></div>
|
||||
<div class="card term mterm" id="prodterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal<span class="sub">App Store Connect · Google Play</span></div><div class="body"></div></div>
|
||||
</div></div>
|
||||
|
||||
<div class="scene" id="s-forms"><div class="cam">
|
||||
<div class="card" id="prop"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>storebound scan<span class="sub">declarations proposal</span></div><div class="body"></div></div>
|
||||
<div class="card" id="form"><div class="ch">Data safety<span class="sub">Google Play</span></div><div class="body"></div></div>
|
||||
<div class="pill green" id="forms-pill"></div>
|
||||
<div class="card" id="form"><div class="ch">Data safety<span class="sub">Google Play</span></div><div class="body"></div><div class="count"></div></div>
|
||||
</div></div>
|
||||
|
||||
<div class="scene" id="s-consoles"><div class="cam">
|
||||
<div class="card term" id="cpterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal<span class="sub">offline · no store access</span></div><div class="body"></div></div>
|
||||
<div class="pill" id="cp-pill"></div>
|
||||
<div class="card term mterm" id="cpterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal<span class="sub">offline · no store access</span></div><div class="body"></div></div>
|
||||
<div class="dhost"></div>
|
||||
</div></div>
|
||||
|
||||
<div class="scene" id="s-rejections"><div class="cam">
|
||||
<div class="scene" id="s-scan"><div class="cam">
|
||||
<div class="card term" id="scanterm"><div class="ch"><span class="dots"><i></i><i></i><i></i></span>Terminal</div><div class="body"></div></div>
|
||||
</div></div>
|
||||
|
||||
<div class="scene" id="s-portfolio"><div class="cam"></div></div>
|
||||
<div class="scene" id="s-charts"><div class="cam"></div></div>
|
||||
<div class="scene" id="s-catalog"><div class="cam"></div></div>
|
||||
<div class="scene" id="s-resubmit"><div class="cam"></div></div>
|
||||
|
||||
<div class="scene" id="s-submit"><div class="cam">
|
||||
<div class="scene" id="s-button"><div class="cam"></div></div>
|
||||
<div class="scene" id="s-waiting"><div class="cam"></div></div>
|
||||
<div class="scene" id="s-end"><div class="cam">
|
||||
<div id="brand" class="abs">
|
||||
<img class="mark" src="brand/logo-mark-256.png" alt="">
|
||||
<div class="word">storebound</div>
|
||||
<div class="line"></div>
|
||||
<div class="url"></div>
|
||||
<div class="plat"></div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<div id="capband"></div>
|
||||
<div id="cap"></div>
|
||||
<div id="edgeband"></div>
|
||||
<div id="edge"></div>
|
||||
<div id="vig"></div>
|
||||
</div>
|
||||
<script type="module" src="teaser.js"></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue