glitch-university/gupi-osint-board
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add case adjudication cutscene

Browse Source
This commit is contained in:
gitprov
2026-08-23 23:21:24 +02:00
parent 0c4e0db118
commit 31a4b52832
13 changed files with 330 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+51 -1
View File
@@ -656,9 +656,59 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.cutscene-missing { color: #b56d30 !important; letter-spacing: .08em !important; }
.cutscene-begin { margin-top: 10px; background: #a2551f; border: 1px solid #d58a46; color: #f6ead9; padding: 11px 24px; font: 11px IBM Plex Mono; letter-spacing: .16em; cursor: pointer; }
.cutscene-begin:hover { background: #b8622a; }
.case-adjudication { position: fixed; z-index: 260; inset: 0; display: grid; place-items: center; padding: clamp(14px, 4vw, 46px); overflow: auto; cursor: default; }
.adjudication-veil { position: fixed; inset: 0; background: #020706bd; backdrop-filter: blur(2px) brightness(.54); animation: adjudication-veil-in .65s ease both; }
.adjudication-paper { position: relative; width: min(690px, 100%); min-height: min(760px, calc(100dvh - 40px)); padding: clamp(28px, 5vw, 54px); overflow: hidden; color: #25231e; background:
linear-gradient(90deg, transparent 46px, #aa66552c 47px, transparent 48px),
repeating-linear-gradient(#eee9da 0 31px, #9aacaa30 32px, #eee9da 33px);
border: 1px solid #a29b89; box-shadow: 0 2px 0 #fff9 inset, 14px 18px 32px #000a; transform-origin: 50% 85%; animation: adjudication-paper-in .72s cubic-bezier(.16,.8,.2,1) both; }
.adjudication-paper > header { display: grid; gap: 6px; padding: 0 0 17px; border-bottom: 3px double #4f514c; text-align: center; }
.adjudication-paper > header span { color: #745232; font: 600 9px IBM Plex Mono; letter-spacing: .28em; }
.adjudication-paper > header b { font: 28px/1.1 Special Elite; letter-spacing: .05em; }
.adjudication-paper > header small { color: #55564f; font: 9px IBM Plex Mono; letter-spacing: .08em; text-transform: uppercase; }
.adjudication-rule { height: 1px; margin: 4px 0 20px; background: #55564f; }
.adjudication-claim { margin-bottom: 20px; }
.adjudication-claim h2, .adjudication-claim h3 { margin: 0 0 7px; color: #5d4e3d; font: 600 8px IBM Plex Mono; letter-spacing: .14em; }
.adjudication-claim blockquote { margin: 0 0 18px; padding: 0; border: 0; font: 21px/1.45 Special Elite; }
.adjudication-evidence { display: grid; gap: 3px; margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid #527160; background: #f4f0e4b8; }
.adjudication-evidence b { color: #385546; font: 600 8px IBM Plex Mono; letter-spacing: .1em; }
.adjudication-evidence span { font: 12px/1.35 Special Elite; }
.adjudication-evidence small { color: #66655d; font: 8px/1.35 IBM Plex Mono; }
.adjudication-finding { min-height: 76px; margin-top: 25px; padding: 13px 14px; border: 1px solid #696a63; background: #e3dececc; display: grid; align-content: center; gap: 7px; }
.adjudication-finding span { color: #67513b; font: 600 8px IBM Plex Mono; letter-spacing: .15em; }
.adjudication-finding strong { min-height: 1.4em; font: 17px/1.35 Special Elite; letter-spacing: .035em; }
.phase-reviewing .adjudication-finding { opacity: .42; }
.adjudication-paper > footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 17px; color: #66645d; font: 7px IBM Plex Mono; letter-spacing: .07em; }
.adjudication-stamp { position: absolute; right: clamp(25px, 7vw, 74px); bottom: clamp(70px, 10vw, 102px); max-width: 235px; padding: 11px 14px 8px; transform: rotate(-7deg) scale(2.4); border: 5px double #9d2826; color: #9d2826; opacity: 0; font: 600 25px/1 Special Elite; letter-spacing: .08em; text-align: center; text-transform: uppercase; mix-blend-mode: multiply; }
.phase-stamped .adjudication-stamp { animation: adjudication-stamp .28s cubic-bezier(.1,.85,.2,1.15) forwards; }
.adjudication-paper > button { position: relative; z-index: 2; float: right; margin-top: 82px; padding: 11px 17px; border: 1px solid #694f37; background: #273f35; color: #f2eddf; box-shadow: 3px 4px #281f18; cursor: pointer; font: 600 9px IBM Plex Mono; letter-spacing: .12em; animation: adjudication-button-in .35s .25s ease both; }
.adjudication-paper > button:hover { background: #36594a; }
.desktop:has(.case-adjudication) .connections path, .desktop:has(.case-adjudication) .thread-lead-ins path { stroke-width: 3.8; animation: adjudication-thread-tighten .65s cubic-bezier(.2,.8,.2,1) both; }
@keyframes adjudication-veil-in { from { opacity: 0; } }
@keyframes adjudication-paper-in { from { opacity: 0; transform: translateY(42px) rotate(.7deg) scale(.96); } }
@keyframes adjudication-thread-tighten { from { stroke-dasharray: 2 8; opacity: .5; } to { stroke-dasharray: 1000 0; opacity: 1; } }
@keyframes adjudication-stamp { 0% { opacity: 0; transform: rotate(-7deg) scale(2.4); } 72% { opacity: .9; transform: rotate(-7deg) scale(.91); } 100% { opacity: .82; transform: rotate(-7deg) scale(1); } }
@keyframes adjudication-button-in { from { opacity: 0; transform: translateY(8px); } }
.menubar nav button.report-back { color: #f6ead9; background: #a2551f; }
.menubar nav button.report-back:hover { background: #b8622a; }
@media (max-width: 900px) { .title-card-inner h1 { font-size: 30px; } }
@media (max-width: 900px) {
.title-card-inner h1 { font-size: 30px; }
.case-adjudication { align-items: start; padding: 0; }
.adjudication-paper { width: 100%; min-height: 100dvh; padding: 28px 24px 38px; border: 0; }
.adjudication-paper > header b { font-size: 23px; }
.adjudication-claim blockquote { font-size: 19px; }
.adjudication-evidence span { font-size: 14px; }
.adjudication-finding strong { font-size: 16px; }
.adjudication-paper > footer { display: grid; }
.adjudication-stamp { right: 24px; bottom: 92px; max-width: 205px; font-size: 21px; }
.adjudication-paper > button { margin-top: 78px; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
.adjudication-veil, .adjudication-paper, .phase-stamped .adjudication-stamp, .adjudication-paper > button,
.desktop:has(.case-adjudication) .connections path, .desktop:has(.case-adjudication) .thread-lead-ins path { animation: none; }
.phase-stamped .adjudication-stamp { opacity: .82; transform: rotate(-7deg); }
}
/* Utterance cards: expand to full content, ports anchored to top, colour by speaker */
.ucard { height: auto; min-height: 58px; }