From 49059342c8f90195b60b7ecb66274f9e41bd74ab Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Tue, 21 Jul 2026 17:20:43 -0700 Subject: [PATCH] Question page: card flip for the board, framed stage, tighter re-roll Third polish pass with Paul live. The details collapsible is gone: the card media is now a 3D flip, hero on the front and the design-system board on the back, toggled by a small mono Board/Hero chip with a 600ms preserve-3d turn that reduced-motion collapses to an instant swap. The headline and question sit directly above the dealt hand inside the centered stage while the logo holds the top-left corner. Re-roll stretches to the steer input's height and says just Re-roll beside the five-pip die. Co-Authored-By: Claude Fable 5 --- skill/scripts/serve-question.mjs | 56 +++++++++++++++++++++++--------- 1 file changed, 40 insertions(+), 16 deletions(-) diff --git a/skill/scripts/serve-question.mjs b/skill/scripts/serve-question.mjs index 61d980d79..fdcbb05da 100644 --- a/skill/scripts/serve-question.mjs +++ b/skill/scripts/serve-question.mjs @@ -173,12 +173,17 @@ function page() { const cards = options.map((option, index) => `
${option.kicker ? `${esc(option.kicker)}` : ''} - ${option.heroSrc ? `` : '
'} +
+
+
${option.heroSrc ? `` : '
'}
+ ${option.boardSrc ? `
` : ''} +
+ ${option.boardSrc ? '' : ''} +
${option.lineage ? `

${esc(option.lineage)}

` : ''}

${esc(option.label)}

${option.body ? `

${esc(option.body)}

` : ''} - ${option.boardSrc ? `
design-system board
` : ''}
`).join('\n'); @@ -213,15 +218,16 @@ function page() { } * { box-sizing: border-box; margin: 0; } body { background: var(--ks-lacquer); color: var(--ks-text); font: 15px/1.55 var(--ks-font); padding: 1.8rem clamp(1rem, 5vw, 4rem) 2rem; min-height: 100dvh; display: flex; flex-direction: column; } - header { width: 100%; max-width: 90rem; margin: 0 auto 1.2rem; } + header { width: 100%; max-width: 90rem; margin: 0 auto; } .brand { display: flex; align-items: center; gap: .55rem; color: var(--ks-kinpaku); } .brand svg { width: 22px; height: 22px; } .wordmark { font-family: var(--ks-font-display); font-weight: 400; font-size: 1.125rem; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1; color: var(--ks-kinpaku); } - .headline { display: flex; align-items: center; gap: .9rem; margin-top: 1.7rem; } + .headline { display: flex; align-items: center; gap: .9rem; } .headline-die { flex: none; width: 34px; height: 34px; color: var(--ks-kinpaku); } h1 { font-family: var(--ks-font-display); font-weight: 300; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: 0; line-height: 1.04; color: var(--ks-champagne); } - .question { color: var(--ks-text-muted); margin-top: .85rem; max-width: 52rem; } + .question { color: var(--ks-text-muted); margin-top: .7rem; max-width: 52rem; } main { flex: 1; display: flex; align-items: center; width: 100%; max-width: 90rem; margin: 0 auto; } + .stage { width: 100%; display: flex; flex-direction: column; gap: 1.5rem; } .grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr)); width: 100%; } .card { position: relative; overflow: hidden; background: var(--ks-lacquer-raised); border: 1px solid var(--ks-rule); border-radius: 10px; box-shadow: 0 18px 40px oklch(0% 0 0 / 0.35); transform: rotate(var(--fan, 0deg)); display: flex; flex-direction: column; opacity: 0; animation: deal .5s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: var(--deal, 0ms); transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s; } .card:hover { transform: rotate(0deg) translateY(-4px); border-color: var(--ks-kinpaku-deep); } @@ -229,19 +235,27 @@ function page() { @keyframes deal { from { opacity: 0; transform: translateY(26px) rotate(calc(var(--fan, 0deg) + 2deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--fan, 0deg)); } } @media (prefers-reduced-motion: reduce) { .card { animation: none; opacity: 1; } } .kicker { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 4px 10px; background: var(--ks-kinpaku); color: var(--ks-dark-ink); font-family: var(--ks-mono); font-size: .625rem; letter-spacing: .24em; text-transform: uppercase; border-radius: 4px; } - img.hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: linear-gradient(100deg, var(--ks-graphite) 40%, var(--ks-graphite-2) 50%, var(--ks-graphite) 60%); } - .hero-blank { width: 100%; aspect-ratio: 16/9; background: linear-gradient(100deg, var(--ks-graphite) 40%, var(--ks-graphite-2) 50%, var(--ks-graphite) 60%); } + .media { position: relative; width: 100%; aspect-ratio: 16/9; perspective: 1200px; } + .faces { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.16, 1, .3, 1); } + .media.flipped .faces { transform: rotateY(180deg); } + .face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; } + .face.back { transform: rotateY(180deg); } + .face img { width: 100%; height: 100%; object-fit: cover; display: block; background: linear-gradient(100deg, var(--ks-graphite) 40%, var(--ks-graphite-2) 50%, var(--ks-graphite) 60%); } + .hero-blank { width: 100%; height: 100%; background: linear-gradient(100deg, var(--ks-graphite) 40%, var(--ks-graphite-2) 50%, var(--ks-graphite) 60%); } + @media (prefers-reduced-motion: reduce) { .faces { transition: none; } } + .flip { position: absolute; z-index: 1; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; font-family: var(--ks-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ks-text); background: oklch(7% 0.006 95 / 0.72); border: 1px solid var(--ks-rule); border-radius: 5px; cursor: pointer; backdrop-filter: blur(4px); transition: color .2s, border-color .2s; } + .flip:hover { color: var(--ks-kinpaku); border-color: var(--ks-kinpaku-deep); } + .flip svg { width: 12px; height: 12px; } .body { padding: .95rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .tier { font-family: var(--ks-mono); font-size: .625rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ks-text-faint); } h2 { font-family: var(--ks-font); font-size: 1.125rem; font-weight: 500; line-height: 1.35; color: var(--ks-champagne); } .detail { color: var(--ks-text-muted); font-size: .88rem; white-space: pre-wrap; } - details { font-size: .78rem; color: var(--ks-text-faint); } details summary { cursor: pointer; } details img { width: 100%; margin-top: .5rem; border-radius: 6px; border: 1px solid var(--ks-rule); } button.choose { margin-top: auto; align-self: start; background: var(--ks-kinpaku); color: var(--ks-dark-ink); border: 0; font-family: var(--ks-font); font-size: 1rem; font-weight: 500; line-height: 1.35; padding: 10px 38px; border-radius: 6px; cursor: pointer; transition: background .15s; } button.choose:hover { background: var(--ks-kinpaku-pale); } footer { width: 100%; max-width: 90rem; margin: 1.6rem auto 0; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } #steer { flex: 1; min-width: 16rem; background: var(--ks-lacquer-raised); color: var(--ks-text); border: 1px solid var(--ks-rule); border-radius: 7px; padding: .6rem .85rem; font: inherit; } #steer:focus { outline: none; border-color: var(--ks-patina); } - #reroll { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-family: var(--ks-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ks-kinpaku); background: transparent; border: 1px solid var(--ks-rule); border-radius: 6px; cursor: pointer; transition: border-color .2s ease, color .2s ease; } + #reroll { display: inline-flex; align-items: center; align-self: stretch; gap: 8px; padding: 0 16px; font-family: var(--ks-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ks-kinpaku); background: transparent; border: 1px solid var(--ks-rule); border-radius: 6px; cursor: pointer; transition: border-color .2s ease, color .2s ease; } #reroll:hover { color: var(--ks-kinpaku-pale); border-color: var(--ks-kinpaku-deep); } #reroll svg { width: 15px; height: 15px; } .done { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 7rem 1rem; font-family: var(--ks-font-display); font-size: 1.4rem; color: var(--ks-champagne); text-align: center; } @@ -251,16 +265,20 @@ function page() { Impeccable -
- -

${esc(payload.title || 'Choose a direction')}

-
- ${payload.question ? `

${esc(payload.question)}

` : ''} -
${cards}
+
+
+
+ +

${esc(payload.title || 'Choose a direction')}

+
+ ${payload.question ? `

${esc(payload.question)}

` : ''} +
${cards}
+
+
${payload.steer ? '' : ''} - ${payload.reroll ? '' : ''} + ${payload.reroll ? '' : ''}
`; }