dev_agentandClaude Opus 5.5
612f4c7ad2
Add web/src/discover/motion.ts with the handoff Motion §2, §3, §5 and §6
values over the Web Animations API: the button and Quest log pill bump,
the "Try it!" stamp pop, wiggle and throw right, the Pass page fold with
its shade, the 300 ms deck promotion and the 200 ms reduced-motion fade.
Each exit takes an optional starting transform for the swipe gesture and
returns { finished, cancel }.
DiscoverPage now runs the exit, sends the decision once the card is gone
and keeps input locked until it settles; a refused decision cancels the
exit so the card comes back, and leaving the page mid-exit sends nothing.
The shade uses --color-text (#201e1d).
Maestro task cb7da499-ffda-441d-8574-82e57b332fb6.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
256 lines
4.5 KiB
CSS
256 lines
4.5 KiB
CSS
/* Discover · Side quests (mock 1a). */
|
|
.page {
|
|
box-sizing: border-box;
|
|
max-width: 440px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.kicker {
|
|
margin: 0;
|
|
font-family: var(--font-body);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent-700);
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
font-family: var(--font-heading);
|
|
font-size: 30px;
|
|
font-weight: 400;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
/* The Quest log count pill, in a 44 px tall hit box. */
|
|
.questLogButton {
|
|
flex: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: var(--radius-pill);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.questLog {
|
|
flex: none;
|
|
padding: 7px 12px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-accent-2-200);
|
|
color: var(--color-accent-2-800);
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* The Quest log's dinner names, under the header while the pill is open. */
|
|
.questLogList {
|
|
flex: 1 0 100%;
|
|
font-family: var(--font-body);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.questLogNames {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.questLogEmpty {
|
|
margin: 0;
|
|
color: var(--color-neutral-700);
|
|
}
|
|
|
|
/* The deck: three cards stacked in the same box, the top one in front. */
|
|
.deck {
|
|
position: relative;
|
|
height: 440px;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.card {
|
|
position: absolute;
|
|
inset: 0;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: var(--radius-card);
|
|
overflow: hidden;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.depth0 {
|
|
z-index: 3;
|
|
transform: none;
|
|
background: var(--color-neutral-100);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.depth1 {
|
|
z-index: 2;
|
|
transform: translateY(8px) scale(0.95);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.depth2 {
|
|
z-index: 1;
|
|
transform: translateY(16px) scale(0.9);
|
|
background: var(--color-neutral-300);
|
|
}
|
|
|
|
.photo {
|
|
flex: none;
|
|
width: calc(100% - 20px);
|
|
height: 220px;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 4px 20px 0;
|
|
}
|
|
|
|
.name {
|
|
margin: 0;
|
|
font-family: var(--font-heading);
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.difficulty {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 0;
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--color-neutral-700);
|
|
}
|
|
|
|
.dots {
|
|
display: flex;
|
|
gap: 3px;
|
|
}
|
|
|
|
.dot,
|
|
.dotFilled {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-neutral-300);
|
|
}
|
|
|
|
.dotFilled {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
/* The "Why this?" box. */
|
|
.why {
|
|
margin: 0;
|
|
padding: 12px 14px;
|
|
border-radius: 18px;
|
|
background: var(--color-accent-2-100);
|
|
color: var(--color-accent-2-900);
|
|
font-family: var(--font-body);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
/* The decision stamps, hidden until a decision shows them. */
|
|
.stamp {
|
|
position: absolute;
|
|
top: 26px;
|
|
padding: 6px 14px;
|
|
border: 3px solid;
|
|
border-radius: 14px;
|
|
font-family: var(--font-heading);
|
|
font-size: 24px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tryStamp {
|
|
left: 22px;
|
|
transform: rotate(-12deg);
|
|
border-color: var(--color-accent-2-700);
|
|
background: var(--color-accent-2-100);
|
|
color: var(--color-accent-2-800);
|
|
}
|
|
|
|
.passStamp {
|
|
right: 22px;
|
|
transform: rotate(12deg);
|
|
border-color: var(--color-neutral-800);
|
|
background: var(--color-neutral-100);
|
|
color: var(--color-neutral-900);
|
|
}
|
|
|
|
/* The shade Pass darkens the card with as it folds. */
|
|
.shade {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background: var(--color-text);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Pass and Try it: IconButtons with their 11 px labels shown. */
|
|
.actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 28px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Skeleton cards while the deck loads or a batch finds Side quests. */
|
|
.loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 22px;
|
|
}
|
|
|
|
.deck > .skeletonCard {
|
|
position: absolute;
|
|
inset: 0;
|
|
height: auto;
|
|
border-radius: var(--radius-card);
|
|
}
|
|
|
|
.skeletonCard.depth0,
|
|
.skeletonCard.depth1,
|
|
.skeletonCard.depth2 {
|
|
background: var(--color-surface);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.finding {
|
|
margin: 0;
|
|
text-align: center;
|
|
font-family: var(--font-body);
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--color-neutral-700);
|
|
}
|