lanre-ds 0.0.0-stage → 0.2.0

package/tokens/ui.css

@@ -0,0 +1,432 @@
+/* Small interface pieces: a heading with its plate, a sticker, a notice and error text, the autosave pill and alert, an avatar
+   button with a pencil, segmented tabs, the voice recorder card and the portrait medallion. Used by Heading, Sticker, Notice,
+   ErrorText, SavePill, SaveAlert, AvatarButton, SegmentedTabs, RecorderPanel and PortraitMedallion. */
+
+/* The friend's avatar in the HUD, with a small pencil to say it can be changed. */
+.mp-avatar-button {
+  appearance: none;
+  position: relative;
+  flex: none;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: transform var(--dur-fast) var(--ease-out);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mp-avatar-button:active {
+  transform: translateY(2px) scale(0.97);
+}
+
+.mp-avatar-badge {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  width: 22px;
+  height: 22px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(180deg, var(--wood-300), var(--wood-500) 55%);
+  box-shadow: 0 2px 0 var(--wood-700);
+  color: #fff;
+  font-size: 11px;
+}
+
+.mp-save-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  margin-top: 6px;
+  padding: 0 12px 0 8px;
+  border-radius: 999px;
+  background: var(--surface-hud);
+  box-shadow: inset 0 2px 0 oklch(1 0 0 / 0.12), 0 3px 0 oklch(0.2 0.05 60 / 0.35);
+  font-family: var(--font-display);
+  font-size: 12px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #fff;
+  white-space: nowrap;
+  flex: none;
+}
+
+.mp-save-pill i {
+  font-size: 20px;
+  color: var(--green-300);
+}
+
+/* Tappable: the same pill, as a button */
+.mp-save-pill[type='button'] {
+  appearance: none;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  font-family: var(--font-display);
+  font-size: 12px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  -webkit-tap-highlight-color: transparent;
+  transition: padding var(--dur-fast) var(--ease-out);
+}
+
+.mp-save-pill-icon {
+  padding: 0 8px;
+}
+
+.mp-save-word {
+  animation: mp-word-in var(--dur-base) var(--ease-out) both;
+}
+
+.mp-save-pill-busy i {
+  color: var(--blue-300);
+}
+
+.mp-save-pill-warn {
+  background: var(--coral-700);
+}
+
+.mp-save-pill-warn i {
+  color: var(--coral-100);
+}
+
+/* ---------- Headings and copy ---------- */
+.mp-heading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+}
+
+.mp-heading-title {
+  margin: 0;
+  max-width: 340px;
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: 34px;
+  line-height: 1.05;
+  letter-spacing: var(--tracking-display);
+  text-transform: uppercase;
+  color: #fff;
+  -webkit-text-stroke: 0.16em var(--world-stroke);
+  paint-order: stroke fill;
+  text-shadow: 0 3px 0 oklch(0 0 0 / 0.22);
+  text-wrap: balance;
+}
+
+.mp-plate {
+  margin: 0;
+  max-width: 340px;
+  padding: 10px 16px;
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  background: var(--cream-50);
+  box-shadow: 0 3px 0 var(--cream-300), 0 8px 16px oklch(0.2 0.05 60 / 0.18);
+  font-size: 15px;
+  line-height: 1.4;
+  font-weight: 700;
+  color: var(--ink-700);
+  text-wrap: pretty;
+}
+
+.mp-sticker {
+  width: 40px;
+  height: 40px;
+  flex: none;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(180deg, var(--tone-hi), var(--tone-face) 50%);
+  box-shadow: 0 3px 0 var(--tone-side), inset 0 2px 0 oklch(1 0 0 / 0.45);
+  color: #fff;
+  font-size: 20px;
+  text-shadow: 0 1px 0 var(--tone-side);
+}
+
+.mp-notice {
+  /* Above a celebration glow on the Sent and quiz result screens. */
+  position: relative;
+  animation: mp-arrive var(--dur-base) var(--ease-out) both;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  gap: var(--space-3);
+  align-items: center;
+  padding: 12px 16px;
+  border-radius: var(--radius-md);
+  background: var(--cream-50);
+  box-shadow: 0 3px 0 var(--cream-300), 0 8px 16px oklch(0.2 0.05 60 / 0.18);
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--ink-700);
+}
+
+.mp-notice-warn {
+  background: var(--coral-100);
+  border: 3px solid var(--coral-500);
+  box-shadow: 0 4px 0 var(--coral-700);
+  color: var(--coral-900);
+}
+
+.mp-notice-gold {
+  background: linear-gradient(180deg, var(--gold-100), var(--cream-50));
+  border: 4px solid var(--gold-500);
+  box-shadow: 0 5px 0 var(--gold-700), 0 14px 24px oklch(0.22 0.05 60 / 0.3);
+  color: var(--gold-900);
+}
+
+.mp-error-text {
+  margin: 0;
+  justify-self: center;
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--coral-100);
+  color: var(--coral-900);
+  font-size: 13px;
+  line-height: 1.45;
+  font-weight: 700;
+}
+
+.mp-save-alert {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--coral-100);
+  color: var(--coral-900);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+/* The save pill: bobs while saving, pops when saved. */
+.mp-save-pill-busy i {
+  animation: mp-float 1.2s ease-in-out infinite;
+}
+
+.mp-save-pill-pop i {
+  animation: mp-pop var(--dur-base) var(--ease-bounce) both;
+}
+
+/* ---- Link button (inside the save alert) ---- */
+
+.mp-link-button {
+  appearance: none;
+  border: 0;
+  background: none;
+  padding: 8px 4px;
+  min-height: 44px;
+  font-weight: 700;
+  font-size: 15px;
+  color: var(--blue-700);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+
+.mp-save-alert .mp-link-button {
+  min-height: 32px;
+  padding: 0 4px;
+  font-size: 13px;
+  color: var(--coral-900);
+}
+
+/* ---- Segmented tabs ---- */
+
+.mp-seg {
+  display: flex;
+  gap: 6px;
+  padding: 5px;
+  margin: 0 auto 18px;
+  width: max-content;
+  max-width: 100%;
+  border-radius: 999px;
+  background: var(--cream-200);
+  box-shadow: inset 0 2px 6px oklch(0.3 0.05 60 / 0.12);
+}
+
+.mp-seg-tab {
+  appearance: none;
+  border: 0;
+  height: 44px;
+  padding: 0 18px;
+  border-radius: 999px;
+  background: transparent;
+  font-family: var(--font-display);
+  font-size: 14px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-700);
+  cursor: pointer;
+  transition: background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
+}
+
+.mp-seg-on {
+  background: #fff;
+  box-shadow: 0 3px 0 var(--cream-300);
+  color: var(--ink-900);
+}
+
+@keyframes mp-word-in {
+  from {
+    opacity: 0;
+    translate: -6px 0;
+  }
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes mp-arrive {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-save-pill-busy i,
+  .mp-save-pill-pop i,
+  .mp-save-word,
+  .mp-notice {
+    animation: none;
+  }
+}
+
+/* ---------- Voice recorder ---------- */
+
+/* A cream card that holds the recorder's steps, centred in a column. */
+.mp-recorder {
+  background: linear-gradient(180deg, var(--cream-50), var(--cream-100));
+  border: var(--border-panel) solid var(--cream-300);
+  border-radius: var(--radius-xl);
+  padding: var(--space-4);
+  box-shadow: 0 5px 0 var(--cream-300), 0 14px 24px oklch(0.22 0.05 60 / 0.3);
+  transition: border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
+  display: grid;
+  gap: var(--space-3);
+  justify-items: center;
+  text-align: center;
+}
+
+.mp-recorder-lede {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.45;
+  color: var(--ink-700);
+}
+
+.mp-recorder-small {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--ink-500);
+}
+
+.mp-recorder-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+/* The red dot that blinks while recording. */
+.mp-rec-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--coral-500);
+  animation: mp-sparkle 1.2s infinite;
+}
+
+/* ---------- Portrait medallion ---------- */
+
+/* The tappable wrapper: it takes the press, the hover and the keyboard focus for the medallion inside it. */
+.mp-medallion-button {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Every tap answers back: the medallion presses down like a bevelled button. */
+.mp-medallion-button:hover .mp-medallion-ring {
+  filter: brightness(1.06);
+}
+
+.mp-medallion-button:active .mp-medallion-ring {
+  transform: translateY(5px);
+  box-shadow: 0 2px 0 var(--gold-900), 0 6px 10px oklch(0.2 0.05 60 / 0.3), inset 0 3px 0 oklch(1 0 0 / 0.6);
+}
+
+.mp-medallion-button:active .mp-medallion-number {
+  transform: translateY(4px);
+}
+
+.mp-medallion-button:focus-visible {
+  outline: 4px solid #fff;
+  outline-offset: 4px;
+  border-radius: 999px;
+}
+
+/* Set --m to the medallion's size. The shadow and the number plate stay the same at every size. */
+.mp-medallion {
+  position: relative;
+  display: inline-grid;
+  justify-items: center;
+  width: var(--m);
+}
+
+.mp-medallion-ring {
+  display: grid;
+  place-items: center;
+  width: var(--m);
+  height: var(--m);
+  border-radius: 50%;
+  background: radial-gradient(circle at 50% 30%, var(--gold-300), var(--gold-500) 60%, var(--gold-700));
+  box-shadow: 0 7px 0 var(--gold-900), 0 14px 18px oklch(0.2 0.05 60 / 0.35), inset 0 3px 0 oklch(1 0 0 / 0.6);
+  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast);
+}
+
+.mp-medallion-number {
+  margin-top: -14px;
+  min-width: 36px;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #fff, var(--cream-100));
+  box-shadow: 0 3px 0 var(--cream-300), 0 6px 10px oklch(0 0 0 / 0.2);
+  font-family: var(--font-display);
+  font-size: 17px;
+  line-height: 30px;
+  color: var(--ink-900);
+  text-align: center;
+  z-index: 1;
+  transition: transform var(--dur-fast) var(--ease-out);
+}
+
+.mp-medallion-pop {
+  animation: mp-medallion-pop 900ms var(--ease-out) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-medallion-pop {
+    animation: none;
+  }
+}

package/tokens/utilities.css

@@ -0,0 +1,34 @@
+/* Tiny helper classes for hand-written HTML. Components inline the same rules. */
+.mp-display { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+.mp-ui { font-family: var(--font-ui); font-weight: var(--weight-ui); line-height: var(--leading-normal); }
+.mp-label { font-family: var(--font-ui); font-weight: var(--weight-ui-bold); font-size: var(--text-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
+/* Outlined display text: white fill, dark stroke painted behind the fill */
+.mp-outline { color: var(--white); -webkit-text-stroke: var(--stroke-display) var(--text-outline); paint-order: stroke fill; text-shadow: 0 0.12em 0 oklch(0 0 0 / 0.22); }
+.mp-outline-stone { -webkit-text-stroke-color: var(--text-outline-stone); }
+.mp-outline-blue { -webkit-text-stroke-color: var(--text-outline-blue); }
+@keyframes mp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
+@keyframes mp-pulse-ring { 0% { box-shadow: 0 0 0 0 oklch(0.68 0.17 240 / 0.7); } 100% { box-shadow: 0 0 0 16px oklch(0.68 0.17 240 / 0); } }
+@keyframes mp-pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
+@keyframes mp-sparkle { 0%, 100% { opacity: 0.4; transform: scale(0.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
+@keyframes mp-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
+@keyframes mp-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
+/* PortraitMedallion arriving on the road, and Modal coming and going */
+@keyframes mp-medallion-pop { 0% { transform: scale(0.3) rotate(-20deg); opacity: 0; } 55% { transform: scale(1.18) rotate(6deg); opacity: 1; } 75% { transform: scale(0.95) rotate(-2deg); } 100% { transform: scale(1) rotate(0); } }
+@keyframes mp-sheet-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
+@keyframes mp-sheet-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.97); } }
+/* StepBar: the green fill grows to the new marker (set --from and --to). RadioCard: the tick pops in. */
+@keyframes mp-trail-grow { from { width: var(--from); } to { width: var(--to); } }
+@keyframes mp-radio-pop { 0% { scale: 0.6; } 70% { scale: 1.15; } 100% { scale: 1; } }
+/* Accessibility: keyboard focus ring (outline, so bevels keep their box-shadows), screen-reader-only text, reduced motion */
+:focus-visible { outline: 4px solid var(--gold-300); outline-offset: 3px; }
+.mp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.mp-world { background: var(--world-bg); }
+/* Step marker: a small numbered marker built from --step-* (colors.css). Add -done or -current for the state, -lg for memory blocks. */
+.mp-step { --step-highlight: var(--step-ahead-highlight); --step-fill: var(--step-ahead-fill); --step-edge: var(--step-ahead-edge); --step-outline: var(--step-ahead-outline); position: relative; width: 34px; height: 21px; flex: none; display: grid; place-items: center; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--step-fill); background: radial-gradient(ellipse at 50% 30%, var(--step-highlight), var(--step-fill) 80%); box-shadow: 0 4px 0 var(--step-edge), 0 8px 10px oklch(0.2 0.05 60 / 0.3), inset 0 3px 0 oklch(1 0 0 / 0.55); font-family: var(--font-display); font-size: 15px; line-height: 1; color: #fff; -webkit-text-stroke: 2.5px var(--step-outline); paint-order: stroke fill; }
+.mp-step i { font-size: 14px; -webkit-text-stroke: 1px var(--step-outline); }
+.mp-step-done { --step-highlight: var(--step-done-highlight); --step-fill: var(--step-done-fill); --step-edge: var(--step-done-edge); --step-outline: var(--step-done-outline); }
+.mp-step-current { --step-highlight: var(--step-current-highlight); --step-fill: var(--step-current-fill); --step-edge: var(--step-current-edge); --step-outline: var(--step-current-outline); transform: translateY(-3px); }
+.mp-step-lg { width: 40px; height: 25px; font-size: 17px; transform: none; }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
+}