explewd/retur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
31a6770dfdb4e5f3cb9bd1de79482b653f15c429
retur/src/style.css

109 lines
11 KiB
CSS
Raw Normal View History

Build Retur dead-letter sorting game
2026-07-20 19:45:59 +02:00
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Special+Elite&display=swap');
:root {
--bg: #0d0d1a; --panel: #12121f; --paper: #d8d0b8; --paper-ink: #25221d;
--border: #2a2a42; --text: #e2e2f0; --dim: #8888aa; --accent: #aa66dd;
--stamp: #d95462; --archive: #c49a45; --safe: #44bb66; --danger: #ee4444;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--text); font: 13px/1.55 'JetBrains Mono', monospace; }
button { font: inherit; }
#app { min-height: 100vh; max-width: 1280px; margin: auto; border-inline: 1px solid var(--border); position: relative; }
#header { min-height: 62px; padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; gap: 18px; background: rgba(13,13,26,.94); }
.brand { color: var(--stamp); font-size: 22px; font-weight: 700; letter-spacing: 5px; text-shadow: 0 0 18px rgba(217,84,98,.35); }
.brand-sub { margin-left: 18px; color: var(--dim); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.text-button { border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 10px; text-transform: uppercase; }
.text-button:hover { color: var(--text); }
.panel { padding: 16px; overflow-y: auto; background: var(--panel); }
.panel-title { color: var(--dim); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 12px; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.desk { display: grid; grid-template-columns: 275px minmax(360px, 1fr) 275px; min-height: calc(100vh - 62px); }
.status-panel { border-right: 1px solid var(--border); }
.route-panel { border-left: 1px solid var(--border); }
.day-number { color: var(--accent); font-size: 48px; line-height: 1; font-weight: 700; }
.briefing { min-height: 76px; color: var(--dim); font-size: 11px; }
.meter { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 12px 0; color: var(--dim); font-size: 10px; text-transform: uppercase; position: relative; }
.meter b { color: var(--text); letter-spacing: 2px; }
.meter.suspicion { padding-bottom: 7px; }
.meter.suspicion::after, .meter.suspicion i { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border); }
.meter.suspicion i { right: auto; background: var(--danger); z-index: 1; transition: width .25s; }
.regulations-title { margin-top: 24px; }
Expand letters and decision consequences
2026-07-20 19:56:58 +02:00
.incidents-title { margin-top: 24px; }
.incident-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.incident-log li { padding-left: 10px; border-left: 2px solid var(--safe); color: var(--dim); font-size: 9px; line-height: 1.45; }
.incident-log li.bad { border-left-color: var(--danger); }
.incident-log b { display: block; color: var(--text); font-size: 8px; }
Build Retur dead-letter sorting game
2026-07-20 19:45:59 +02:00
.regulations { padding: 0; margin: 0; list-style: none; display: grid; gap: 9px; }
.regulations li { padding-left: 36px; color: #aaaacc; font-size: 10px; position: relative; }
.regulations b { position: absolute; left: 0; color: var(--accent); }
.regulations em { display: block; color: var(--archive); font-style: normal; margin-top: 2px; }
.regulations .new-rule { padding-block: 5px; border-block: 1px dashed rgba(217,84,98,.35); }
.regulations .new-rule::after { content: 'NY'; position: absolute; right: 0; top: -7px; color: var(--stamp); font-size: 8px; }
.work-area { padding: clamp(18px, 4vw, 42px); background: radial-gradient(circle at 50% 38%, #1c1a27 0%, #0b0b15 72%); position: relative; overflow: hidden; }
.work-area::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: repeating-linear-gradient(93deg, transparent 0 47px, rgba(255,255,255,.015) 48px); }
.queue-meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; color: var(--dim); font-size: 9px; letter-spacing: .08em; }
.letter { min-height: 440px; padding: clamp(22px, 4vw, 42px); background-color: var(--paper); color: var(--paper-ink); box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 0 80px rgba(87,63,31,.12); transform: rotate(-.35deg); position: relative; font-family: 'Special Elite', 'Courier New', monospace; }
.letter::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(72,56,34,.035) 5px); }
.postmark { position: absolute; top: 24px; right: 28px; padding: 8px 10px; border: 2px solid rgba(120,38,45,.65); border-radius: 50%; color: rgba(120,38,45,.78); transform: rotate(8deg); font-size: 10px; }
.letter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-right: 100px; }
.letter-grid div { display: grid; gap: 3px; }
.letter-grid span { color: #766b58; font-size: 9px; text-transform: uppercase; }
.letter-grid strong { font-size: 14px; }
.letter-grid .address { grid-column: 1 / -1; }
.letter-body { max-width: 580px; margin: 52px auto 40px; font-size: clamp(15px, 2vw, 18px); line-height: 1.85; white-space: pre-line; }
.marks { display: flex; flex-wrap: wrap; gap: 9px; position: absolute; left: 28px; right: 28px; bottom: 25px; }
.marks span { padding: 5px 8px; border: 2px solid rgba(120,38,45,.55); color: rgba(120,38,45,.75); font-size: 9px; font-weight: 700; transform: rotate(-2deg); }
.routes { display: grid; gap: 9px; }
.route-button { width: 100%; padding: 10px; border: 1px solid var(--border); background: #0e0e1a; color: var(--text); text-align: left; cursor: pointer; position: relative; }
.route-button:hover:not(:disabled), .route-button.selected { border-color: var(--accent); }
.route-button.selected { box-shadow: inset 3px 0 var(--accent); }
.route-button .key { position: absolute; right: 7px; top: 6px; color: var(--dim); font-size: 9px; }
.route-button strong { display: block; color: var(--accent); font-size: 11px; }
.route-button small { display: block; margin-top: 3px; color: var(--dim); font-size: 9px; line-height: 1.45; }
.route-button:disabled { opacity: .45; cursor: default; }
.stamp-button, .primary { width: 100%; margin-top: 16px; padding: 13px; border: 2px solid var(--stamp); background: rgba(217,84,98,.08); color: var(--stamp); font-weight: 700; letter-spacing: .15em; cursor: pointer; }
.stamp-button:hover:not(:disabled), .primary:hover { background: var(--stamp); color: #fff; }
.stamp-button:disabled { opacity: .25; cursor: not-allowed; }
.desk-note { margin-top: 24px; color: #57576f; font-size: 9px; text-align: center; }
.result { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; padding: 30px; background: rgba(8,8,16,.93); text-align: center; }
.result strong { font-size: clamp(22px, 4vw, 38px); letter-spacing: .12em; }
.result.correct strong { color: var(--safe); } .result.wrong strong { color: var(--danger); }
.result p { max-width: 540px; color: var(--dim); }
Expand letters and decision consequences
2026-07-20 19:56:58 +02:00
.consequence { max-width: 540px; margin: 10px auto 14px; padding: 12px; border: 1px solid var(--border); color: var(--text); font-size: 11px; }
.consequence span { display: block; margin-bottom: 4px; color: var(--archive); font-size: 8px; letter-spacing: .12em; }
.penalty { margin-bottom: 12px; color: var(--danger); font-size: 10px; text-transform: uppercase; }
Build Retur dead-letter sorting game
2026-07-20 19:45:59 +02:00
.result button { border: 0; background: none; color: var(--text); cursor: pointer; }
.intro-screen, .end-screen { min-height: calc(100vh - 62px); display: grid; place-items: center; padding: 30px; background: radial-gradient(circle, #20192c 0, var(--bg) 66%); }
Add a real intro background image A generated desk/lamp/stamp photo (converted PNG -> WebP, 1.7MB -> 65KB, negligible quality loss at the size it's actually displayed) now sits behind the intro screen, with the existing red "R" seal stamped on top as an overlay — the seal already existed as a plain CSS circle, just needed a photo worth stamping over. Gave it a subtle dark backdrop + slightly stronger glow so it stays legible against the busier background. Raw source PNG gitignored — only the optimized derivative that actually ships belongs in the repo. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-26 19:43:18 +02:00
.intro-screen {
grid-template-columns: auto minmax(280px, 540px);
gap: clamp(30px, 7vw, 90px);
background:
linear-gradient(rgba(13, 13, 26, 0.6), rgba(13, 13, 26, 0.88)),
url('/intro.webp') center / cover no-repeat;
}
Add a real background image to the ending screen Same treatment as the intro: generated desk photo (empty chair, a single closed box where the stamp used to be, one dark pigeonhole slot) converted PNG -> WebP, 1.7MB -> 45KB. Used for both win and loss endings, since the image itself is mood-neutral rather than victory- or failure-specific — the audit-stamp overlay (TILLSVIDARE in green, OMPLACERAD/AVFÖRD in red) still carries the actual outcome. .end-card switched from an opaque panel to a translucent one with a backdrop blur so the photo is actually visible around and through the card instead of fully hidden behind it — same fix .seal already needed on the intro screen. Verified by injecting all three real end states (clean win, composure-driven loss, suspicion-maxed loss) and screenshotting each. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-26 19:57:24 +02:00
.end-screen {
background:
linear-gradient(rgba(13, 13, 26, 0.55), rgba(13, 13, 26, 0.85)),
url('/gameover.webp') center / cover no-repeat;
}
Add a real intro background image A generated desk/lamp/stamp photo (converted PNG -> WebP, 1.7MB -> 65KB, negligible quality loss at the size it's actually displayed) now sits behind the intro screen, with the existing red "R" seal stamped on top as an overlay — the seal already existed as a plain CSS circle, just needed a photo worth stamping over. Gave it a subtle dark backdrop + slightly stronger glow so it stays legible against the busier background. Raw source PNG gitignored — only the optimized derivative that actually ships belongs in the repo. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-26 19:43:18 +02:00
.seal { width: clamp(160px, 25vw, 260px); aspect-ratio: 1; display: grid; place-items: center; border: 8px double var(--stamp); border-radius: 50%; color: var(--stamp); font: 700 clamp(90px, 16vw, 160px)/1 'Special Elite'; transform: rotate(-8deg); opacity: .85; box-shadow: 0 0 60px rgba(217,84,98,.25); background: rgba(13, 13, 26, 0.35); backdrop-filter: blur(1px); }
Build Retur dead-letter sorting game
2026-07-20 19:45:59 +02:00
.intro-copy h1 { margin: 0; color: var(--stamp); font-size: clamp(52px, 10vw, 92px); letter-spacing: .15em; line-height: 1; }
.intro-sub { color: var(--dim); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.intro-copy > p:not(.intro-sub) { color: #b0b0c4; }
Add a real background image to the ending screen Same treatment as the intro: generated desk photo (empty chair, a single closed box where the stamp used to be, one dark pigeonhole slot) converted PNG -> WebP, 1.7MB -> 45KB. Used for both win and loss endings, since the image itself is mood-neutral rather than victory- or failure-specific — the audit-stamp overlay (TILLSVIDARE in green, OMPLACERAD/AVFÖRD in red) still carries the actual outcome. .end-card switched from an opaque panel to a translucent one with a backdrop blur so the photo is actually visible around and through the card instead of fully hidden behind it — same fix .seal already needed on the intro screen. Verified by injecting all three real end states (clean win, composure-driven loss, suspicion-maxed loss) and screenshotting each. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-26 19:57:24 +02:00
.end-card { width: min(620px, 100%); padding: clamp(24px, 5vw, 50px); border: 1px solid var(--border); background: rgba(18, 18, 31, 0.82); backdrop-filter: blur(2px); text-align: center; position: relative; }
Build Retur dead-letter sorting game
2026-07-20 19:45:59 +02:00
.end-card h1 { color: var(--text); }
.end-card > p { color: var(--dim); }
Add a real background image to the ending screen Same treatment as the intro: generated desk photo (empty chair, a single closed box where the stamp used to be, one dark pigeonhole slot) converted PNG -> WebP, 1.7MB -> 45KB. Used for both win and loss endings, since the image itself is mood-neutral rather than victory- or failure-specific — the audit-stamp overlay (TILLSVIDARE in green, OMPLACERAD/AVFÖRD in red) still carries the actual outcome. .end-card switched from an opaque panel to a translucent one with a backdrop blur so the photo is actually visible around and through the card instead of fully hidden behind it — same fix .seal already needed on the intro screen. Verified by injecting all three real end states (clean win, composure-driven loss, suspicion-maxed loss) and screenshotting each. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-26 19:57:24 +02:00
.audit-stamp { display: inline-block; padding: 8px 16px; border: 3px solid var(--safe); color: var(--safe); font-size: 18px; font-weight: 700; letter-spacing: .12em; transform: rotate(-4deg); background: rgba(13, 13, 26, 0.3); }
Build Retur dead-letter sorting game
2026-07-20 19:45:59 +02:00
.failure .audit-stamp { border-color: var(--danger); color: var(--danger); }
.final-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 25px 0; }
.final-stats div { padding: 12px; border: 1px solid var(--border); }
.final-stats dt { color: var(--dim); font-size: 9px; text-transform: uppercase; }.final-stats dd { margin: 4px 0 0; font-size: 20px; }
.dim { color: var(--dim); font-size: 11px; }
#danger-vignette { position: fixed; inset: 0; z-index: 10; pointer-events: none; background: radial-gradient(ellipse, transparent 55%, var(--danger) 150%); opacity: calc(var(--suspicion, 0) * .32); transition: opacity .5s; }
dialog { width: min(560px, calc(100% - 30px)); padding: 25px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: 12px/1.7 'JetBrains Mono', monospace; }
dialog::backdrop { background: rgba(0,0,0,.8); }
.dialog-close { position: absolute; right: 12px; top: 8px; border: 0; background: none; color: var(--dim); font-size: 24px; cursor: pointer; }
@media (max-width: 980px) { .desk { grid-template-columns: 220px 1fr; }.route-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); }.routes { grid-template-columns: repeat(4, 1fr); }.route-panel .stamp-button { max-width: 280px; }.desk-note { display: none; } }
@media (max-width: 700px) { #app { border: 0; }.brand-sub { display: block; margin: 2px 0 0; }.desk { display: block; }.status-panel { border-right: 0; border-bottom: 1px solid var(--border); }.regulations { max-height: 180px; overflow-y: auto; }.work-area { min-height: 560px; padding: 18px 12px; }.letter { min-height: 500px; padding: 24px 18px; }.letter-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding-right: 80px; }.letter-grid .address { grid-column: auto; }.letter-body { margin-top: 36px; }.routes { grid-template-columns: 1fr 1fr; }.intro-screen { grid-template-columns: 1fr; text-align: center; }.seal { width: 130px; margin: auto; }.final-stats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
Reference in New Issue Copy Permalink