howone 0.1.28 → 0.1.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (224) hide show
  1. package/package.json +1 -1
  2. package/templates/vite/.howone/skills/hallmark/SKILL.md +48 -42
  3. package/templates/vite/.howone/skills/hallmark/references/anti-patterns.md +12 -6
  4. package/templates/vite/.howone/skills/hallmark/references/assets.md +7 -0
  5. package/templates/vite/.howone/skills/hallmark/references/component-cookbook.md +19 -10
  6. package/templates/vite/.howone/skills/hallmark/references/components/f2-sticky-scroll-stack.md +1 -1
  7. package/templates/vite/.howone/skills/hallmark/references/components/ft6-letter-close.md +1 -1
  8. package/templates/vite/.howone/skills/hallmark/references/components/h7-demo-video-clipped-by-viewport-edge.md +1 -1
  9. package/templates/vite/.howone/skills/hallmark/references/components/h9-custom-illustration-centerpiece.md +1 -1
  10. package/templates/vite/.howone/skills/hallmark/references/components/n10-floating-on-scroll-morph.md +1 -1
  11. package/templates/vite/.howone/skills/hallmark/references/components/n11-mega-menu.md +40 -0
  12. package/templates/vite/.howone/skills/hallmark/references/components/n12-banner-retract.md +34 -0
  13. package/templates/vite/.howone/skills/hallmark/references/components/n13-inline-cmdk-pill.md +39 -0
  14. package/templates/vite/.howone/skills/hallmark/references/components/n1b-saas-three-section.md +35 -0
  15. package/templates/vite/.howone/skills/hallmark/references/components/n9-edge-aligned-minimal.md +1 -1
  16. package/templates/vite/.howone/skills/hallmark/references/components/s3-sticky-pinned.md +2 -2
  17. package/templates/vite/.howone/skills/hallmark/references/copy.md +8 -8
  18. package/templates/vite/.howone/skills/hallmark/references/custom-craft.md +2 -2
  19. package/templates/vite/.howone/skills/hallmark/references/custom-theme.md +50 -12
  20. package/templates/vite/.howone/skills/hallmark/references/export-formats.md +1 -1
  21. package/templates/vite/.howone/skills/hallmark/references/genres/atmospheric.md +11 -7
  22. package/templates/vite/.howone/skills/hallmark/references/genres/editorial.md +6 -4
  23. package/templates/vite/.howone/skills/hallmark/references/genres/modern-minimal.md +10 -6
  24. package/templates/vite/.howone/skills/hallmark/references/genres/playful.md +15 -10
  25. package/templates/vite/.howone/skills/hallmark/references/hero-enrichment.md +13 -12
  26. package/templates/vite/.howone/skills/hallmark/references/interaction-and-states.md +2 -1
  27. package/templates/vite/.howone/skills/hallmark/references/layout-and-space.md +4 -3
  28. package/templates/vite/.howone/skills/hallmark/references/macrostructures/04-stat-led.md +3 -1
  29. package/templates/vite/.howone/skills/hallmark/references/macrostructures/12-letter.md +1 -1
  30. package/templates/vite/.howone/skills/hallmark/references/macrostructures.md +1 -1
  31. package/templates/vite/.howone/skills/hallmark/references/microinteractions.md +1 -3
  32. package/templates/vite/.howone/skills/hallmark/references/preview-examples.md +12 -12
  33. package/templates/vite/.howone/skills/hallmark/references/responsive.md +8 -8
  34. package/templates/vite/.howone/skills/hallmark/references/slop-test.md +72 -85
  35. package/templates/vite/.howone/skills/hallmark/references/structure.md +9 -13
  36. package/templates/vite/.howone/skills/hallmark/references/study.md +40 -17
  37. package/templates/vite/.howone/skills/hallmark/references/themes/carnival.md +301 -0
  38. package/templates/vite/.howone/skills/hallmark/references/themes/cobalt.md +146 -0
  39. package/templates/vite/.howone/skills/hallmark/references/themes/hum.md +403 -0
  40. package/templates/vite/.howone/skills/hallmark/references/themes/lumen.md +478 -0
  41. package/templates/vite/.howone/skills/hallmark/references/typography.md +3 -3
  42. package/templates/vite/.howone/skills/hallmark/references/verbs/redesign.md +1 -1
  43. package/templates/vite/.howone/skills/howone/03-sdk/07-ai-action-calls.md +28 -86
  44. package/templates/vite/.howone/skills/howone/03-sdk/09-workflow-execute-sse.md +105 -0
  45. package/templates/vite/.howone/skills/howone/04-ai/03-ai-sdk-handoff.md +15 -13
  46. package/templates/vite/.howone/skills/howone/SKILL.md +2 -2
  47. package/templates/vite/package.json +1 -1
  48. package/templates/vite/.howone/skills/hallmark/LICENSE +0 -21
  49. package/templates/vite/.howone/skills/hallmark/README.md +0 -147
  50. package/templates/vite/.howone/skills/hallmark/ROADMAP.md +0 -201
  51. package/templates/vite/.howone/skills/hallmark/docs/recipes.md +0 -186
  52. package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-anya.jpg +0 -0
  53. package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-bananastudio.jpg +0 -0
  54. package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-hyperlane.jpg +0 -0
  55. package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-najm.jpg +0 -0
  56. package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-slow-pour.jpg +0 -0
  57. package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-soroe.jpg +0 -0
  58. package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-tally.jpg +0 -0
  59. package/templates/vite/.howone/skills/hallmark/docs/screenshots/hero-wayfare.jpg +0 -0
  60. package/templates/vite/.howone/skills/hallmark/docs/study-examples.md +0 -176
  61. package/templates/vite/.howone/skills/hallmark/docs/talk-slides.md +0 -364
  62. package/templates/vite/.howone/skills/hallmark/package.json +0 -36
  63. package/templates/vite/.howone/skills/hallmark/site/OG-hallmark.png +0 -0
  64. package/templates/vite/.howone/skills/hallmark/site/_tests/01-tide-podcast/brief.md +0 -71
  65. package/templates/vite/.howone/skills/hallmark/site/_tests/01-tide-podcast/index.html +0 -64
  66. package/templates/vite/.howone/skills/hallmark/site/_tests/01-tide-podcast/style.css +0 -240
  67. package/templates/vite/.howone/skills/hallmark/site/_tests/02-streampipe-cli/brief.md +0 -65
  68. package/templates/vite/.howone/skills/hallmark/site/_tests/02-streampipe-cli/index.html +0 -105
  69. package/templates/vite/.howone/skills/hallmark/site/_tests/02-streampipe-cli/style.css +0 -250
  70. package/templates/vite/.howone/skills/hallmark/site/_tests/03-maple-bakery/brief.md +0 -64
  71. package/templates/vite/.howone/skills/hallmark/site/_tests/03-maple-bakery/index.html +0 -131
  72. package/templates/vite/.howone/skills/hallmark/site/_tests/03-maple-bakery/style.css +0 -240
  73. package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/brief.md +0 -67
  74. package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/index.html +0 -86
  75. package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/style.css +0 -262
  76. package/templates/vite/.howone/skills/hallmark/site/_tests/05-tracejam-saas/brief.md +0 -63
  77. package/templates/vite/.howone/skills/hallmark/site/_tests/05-tracejam-saas/index.html +0 -167
  78. package/templates/vite/.howone/skills/hallmark/site/_tests/05-tracejam-saas/style.css +0 -457
  79. package/templates/vite/.howone/skills/hallmark/site/_tests/06-anya-portfolio/brief.md +0 -65
  80. package/templates/vite/.howone/skills/hallmark/site/_tests/06-anya-portfolio/index.html +0 -159
  81. package/templates/vite/.howone/skills/hallmark/site/_tests/06-anya-portfolio/style.css +0 -288
  82. package/templates/vite/.howone/skills/hallmark/site/_tests/07-foundry-compliance/brief.md +0 -64
  83. package/templates/vite/.howone/skills/hallmark/site/_tests/07-foundry-compliance/index.html +0 -146
  84. package/templates/vite/.howone/skills/hallmark/site/_tests/07-foundry-compliance/style.css +0 -484
  85. package/templates/vite/.howone/skills/hallmark/site/_tests/08-cohort-courses/brief.md +0 -64
  86. package/templates/vite/.howone/skills/hallmark/site/_tests/08-cohort-courses/index.html +0 -116
  87. package/templates/vite/.howone/skills/hallmark/site/_tests/08-cohort-courses/style.css +0 -354
  88. package/templates/vite/.howone/skills/hallmark/site/_tests/09-slow-pour/index.html +0 -638
  89. package/templates/vite/.howone/skills/hallmark/site/_tests/10-owl-hours/index.html +0 -515
  90. package/templates/vite/.howone/skills/hallmark/site/_tests/11-soroe-ceramics/index.html +0 -515
  91. package/templates/vite/.howone/skills/hallmark/site/_tests/12-loafer/index.html +0 -608
  92. package/templates/vite/.howone/skills/hallmark/site/_tests/13-alma/index.html +0 -587
  93. package/templates/vite/.howone/skills/hallmark/site/_tests/README.md +0 -157
  94. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/BananaStudio-loop.mp4 +0 -0
  95. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/BananaStudio-still.jpg +0 -0
  96. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Hyperlane-example.mp4 +0 -0
  97. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Hyperlane-still.jpg +0 -0
  98. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Najm-loop.mp4 +0 -0
  99. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Najm-still.jpg +0 -0
  100. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Podcast-loop.mp4 +0 -0
  101. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/SaaS-loop.mp4 +0 -0
  102. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/SaaS-still.jpg +0 -0
  103. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Soroe-loop.mp4 +0 -0
  104. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/Soroe-still.jpg +0 -0
  105. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/after-quiet-hour.png +0 -0
  106. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/anya-loop.mp4 +0 -0
  107. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/anya-still.jpg +0 -0
  108. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/audit-example.png +0 -0
  109. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/before-quiet-hour.png +0 -0
  110. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/example-redesign-uractivation.png +0 -0
  111. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/slow-pour-loop.mp4 +0 -0
  112. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/slow-pour-still.jpg +0 -0
  113. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/study-example.png +0 -0
  114. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/uractivation-after-loop.mp4 +0 -0
  115. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/wayfare-loop.mp4 +0 -0
  116. package/templates/vite/.howone/skills/hallmark/site/_tests/_thumbs/wayfare-still.jpg +0 -0
  117. package/templates/vite/.howone/skills/hallmark/site/_tests/custom/01-coffeebox/index.html +0 -77
  118. package/templates/vite/.howone/skills/hallmark/site/_tests/custom/01-coffeebox/style.css +0 -238
  119. package/templates/vite/.howone/skills/hallmark/site/_tests/custom/02-loop/index.html +0 -110
  120. package/templates/vite/.howone/skills/hallmark/site/_tests/custom/02-loop/style.css +0 -326
  121. package/templates/vite/.howone/skills/hallmark/site/_tests/custom/03-mossroot/index.html +0 -134
  122. package/templates/vite/.howone/skills/hallmark/site/_tests/custom/03-mossroot/style.css +0 -262
  123. package/templates/vite/.howone/skills/hallmark/site/_tests/custom/README.md +0 -30
  124. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/README.md +0 -17
  125. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/audit/audit-report.md +0 -56
  126. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/audit/input.html +0 -160
  127. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/audit/notes.md +0 -29
  128. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/redesign/input.html +0 -63
  129. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/redesign/notes.md +0 -72
  130. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/redesign/output.html +0 -374
  131. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/diagnosis.md +0 -52
  132. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/input-description.md +0 -29
  133. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/notes.md +0 -61
  134. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/output.css +0 -193
  135. package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/output.html +0 -66
  136. package/templates/vite/.howone/skills/hallmark/site/css/base.css +0 -194
  137. package/templates/vite/.howone/skills/hallmark/site/css/components.css +0 -4886
  138. package/templates/vite/.howone/skills/hallmark/site/css/sections.css +0 -2072
  139. package/templates/vite/.howone/skills/hallmark/site/css/tokens.css +0 -1129
  140. package/templates/vite/.howone/skills/hallmark/site/examples/bananastudio/index.html +0 -475
  141. package/templates/vite/.howone/skills/hallmark/site/examples/bananastudio/styles.css +0 -1584
  142. package/templates/vite/.howone/skills/hallmark/site/examples/bananastudio/tokens.css +0 -96
  143. package/templates/vite/.howone/skills/hallmark/site/examples/hyperlane/index.html +0 -344
  144. package/templates/vite/.howone/skills/hallmark/site/examples/hyperlane/script.js +0 -103
  145. package/templates/vite/.howone/skills/hallmark/site/examples/hyperlane/styles.css +0 -1103
  146. package/templates/vite/.howone/skills/hallmark/site/examples/hyperlane/tokens.css +0 -83
  147. package/templates/vite/.howone/skills/hallmark/site/examples/najm/index.html +0 -368
  148. package/templates/vite/.howone/skills/hallmark/site/examples/najm/script.js +0 -133
  149. package/templates/vite/.howone/skills/hallmark/site/examples/najm/styles.css +0 -1062
  150. package/templates/vite/.howone/skills/hallmark/site/examples/najm/tokens.css +0 -97
  151. package/templates/vite/.howone/skills/hallmark/site/examples/tally/app.js +0 -84
  152. package/templates/vite/.howone/skills/hallmark/site/examples/tally/index.html +0 -446
  153. package/templates/vite/.howone/skills/hallmark/site/examples/tally/styles.css +0 -1087
  154. package/templates/vite/.howone/skills/hallmark/site/examples/tally/tokens.css +0 -101
  155. package/templates/vite/.howone/skills/hallmark/site/examples/wayfare/index.html +0 -359
  156. package/templates/vite/.howone/skills/hallmark/site/examples/wayfare/style.css +0 -1168
  157. package/templates/vite/.howone/skills/hallmark/site/examples/wayfare/tokens.css +0 -81
  158. package/templates/vite/.howone/skills/hallmark/site/favicon-dark.svg +0 -5
  159. package/templates/vite/.howone/skills/hallmark/site/favicon-light.svg +0 -5
  160. package/templates/vite/.howone/skills/hallmark/site/index.html +0 -1043
  161. package/templates/vite/.howone/skills/hallmark/site/js/main.js +0 -1175
  162. package/templates/vite/.howone/skills/hallmark/vercel.json +0 -6
  163. package/templates/vite/.howone/skills/impeccable/SKILL.md +0 -168
  164. package/templates/vite/.howone/skills/impeccable/agents/impeccable-asset-producer.md +0 -101
  165. package/templates/vite/.howone/skills/impeccable/reference/adapt.md +0 -190
  166. package/templates/vite/.howone/skills/impeccable/reference/animate.md +0 -175
  167. package/templates/vite/.howone/skills/impeccable/reference/audit.md +0 -133
  168. package/templates/vite/.howone/skills/impeccable/reference/bolder.md +0 -113
  169. package/templates/vite/.howone/skills/impeccable/reference/brand.md +0 -118
  170. package/templates/vite/.howone/skills/impeccable/reference/clarify.md +0 -174
  171. package/templates/vite/.howone/skills/impeccable/reference/codex.md +0 -105
  172. package/templates/vite/.howone/skills/impeccable/reference/cognitive-load.md +0 -106
  173. package/templates/vite/.howone/skills/impeccable/reference/color-and-contrast.md +0 -105
  174. package/templates/vite/.howone/skills/impeccable/reference/colorize.md +0 -154
  175. package/templates/vite/.howone/skills/impeccable/reference/craft.md +0 -123
  176. package/templates/vite/.howone/skills/impeccable/reference/critique.md +0 -273
  177. package/templates/vite/.howone/skills/impeccable/reference/delight.md +0 -302
  178. package/templates/vite/.howone/skills/impeccable/reference/distill.md +0 -111
  179. package/templates/vite/.howone/skills/impeccable/reference/document.md +0 -427
  180. package/templates/vite/.howone/skills/impeccable/reference/extract.md +0 -69
  181. package/templates/vite/.howone/skills/impeccable/reference/harden.md +0 -347
  182. package/templates/vite/.howone/skills/impeccable/reference/heuristics-scoring.md +0 -234
  183. package/templates/vite/.howone/skills/impeccable/reference/interaction-design.md +0 -195
  184. package/templates/vite/.howone/skills/impeccable/reference/layout.md +0 -141
  185. package/templates/vite/.howone/skills/impeccable/reference/live.md +0 -622
  186. package/templates/vite/.howone/skills/impeccable/reference/motion-design.md +0 -109
  187. package/templates/vite/.howone/skills/impeccable/reference/onboard.md +0 -234
  188. package/templates/vite/.howone/skills/impeccable/reference/optimize.md +0 -258
  189. package/templates/vite/.howone/skills/impeccable/reference/overdrive.md +0 -130
  190. package/templates/vite/.howone/skills/impeccable/reference/personas.md +0 -179
  191. package/templates/vite/.howone/skills/impeccable/reference/polish.md +0 -242
  192. package/templates/vite/.howone/skills/impeccable/reference/product.md +0 -62
  193. package/templates/vite/.howone/skills/impeccable/reference/quieter.md +0 -99
  194. package/templates/vite/.howone/skills/impeccable/reference/responsive-design.md +0 -114
  195. package/templates/vite/.howone/skills/impeccable/reference/shape.md +0 -165
  196. package/templates/vite/.howone/skills/impeccable/reference/spatial-design.md +0 -100
  197. package/templates/vite/.howone/skills/impeccable/reference/teach.md +0 -156
  198. package/templates/vite/.howone/skills/impeccable/reference/typeset.md +0 -124
  199. package/templates/vite/.howone/skills/impeccable/reference/typography.md +0 -159
  200. package/templates/vite/.howone/skills/impeccable/reference/ux-writing.md +0 -107
  201. package/templates/vite/.howone/skills/impeccable/scripts/cleanup-deprecated.mjs +0 -284
  202. package/templates/vite/.howone/skills/impeccable/scripts/command-metadata.json +0 -94
  203. package/templates/vite/.howone/skills/impeccable/scripts/critique-storage.mjs +0 -242
  204. package/templates/vite/.howone/skills/impeccable/scripts/design-parser.mjs +0 -820
  205. package/templates/vite/.howone/skills/impeccable/scripts/detect-csp.mjs +0 -198
  206. package/templates/vite/.howone/skills/impeccable/scripts/detect.mjs +0 -21
  207. package/templates/vite/.howone/skills/impeccable/scripts/impeccable-paths.mjs +0 -110
  208. package/templates/vite/.howone/skills/impeccable/scripts/is-generated.mjs +0 -69
  209. package/templates/vite/.howone/skills/impeccable/scripts/live-accept.mjs +0 -595
  210. package/templates/vite/.howone/skills/impeccable/scripts/live-browser-session.js +0 -123
  211. package/templates/vite/.howone/skills/impeccable/scripts/live-browser.js +0 -4860
  212. package/templates/vite/.howone/skills/impeccable/scripts/live-complete.mjs +0 -75
  213. package/templates/vite/.howone/skills/impeccable/scripts/live-completion.mjs +0 -18
  214. package/templates/vite/.howone/skills/impeccable/scripts/live-inject.mjs +0 -446
  215. package/templates/vite/.howone/skills/impeccable/scripts/live-poll.mjs +0 -200
  216. package/templates/vite/.howone/skills/impeccable/scripts/live-resume.mjs +0 -48
  217. package/templates/vite/.howone/skills/impeccable/scripts/live-server.mjs +0 -838
  218. package/templates/vite/.howone/skills/impeccable/scripts/live-session-store.mjs +0 -254
  219. package/templates/vite/.howone/skills/impeccable/scripts/live-status.mjs +0 -47
  220. package/templates/vite/.howone/skills/impeccable/scripts/live-wrap.mjs +0 -632
  221. package/templates/vite/.howone/skills/impeccable/scripts/live.mjs +0 -247
  222. package/templates/vite/.howone/skills/impeccable/scripts/load-context.mjs +0 -141
  223. package/templates/vite/.howone/skills/impeccable/scripts/modern-screenshot.umd.js +0 -14
  224. package/templates/vite/.howone/skills/impeccable/scripts/pin.mjs +0 -214
@@ -1,101 +0,0 @@
1
- /* Hallmark · macrostructure: Marquee Hero · genre: modern-minimal · theme: Pastel
2
- * paper-band: light · display-style: geometric-sans · accent-hue: cool-indigo
3
- * nav: N5 Floating pill · footer: Ft5 Statement
4
- */
5
-
6
- :root {
7
- /* Paper / ink — cool-pastel band */
8
- --color-paper-0: oklch(98.4% 0.005 258);
9
- /* page paper */
10
- --color-paper-1: oklch(96.2% 0.010 258);
11
- /* card */
12
- --color-paper-2: oklch(93.0% 0.015 258);
13
- /* elevated card */
14
- --color-paper-3: oklch(89.0% 0.020 258);
15
- /* hairline tint */
16
- --color-ink-0: oklch(18.0% 0.030 258);
17
- /* primary ink */
18
- --color-ink-1: oklch(35.0% 0.025 258);
19
- /* body */
20
- --color-ink-2: oklch(52.0% 0.018 258);
21
- /* secondary */
22
- --color-ink-3: oklch(70.0% 0.012 258);
23
- /* mute */
24
-
25
- /* Accent — indigo with companion lime */
26
- --color-accent: oklch(54.0% 0.220 268);
27
- /* primary indigo */
28
- --color-accent-soft: oklch(72.0% 0.140 268);
29
- --color-accent-tint: oklch(94.0% 0.040 268);
30
- --color-companion: oklch(82.0% 0.180 130);
31
- /* lime — sparingly */
32
- --color-warning: oklch(74.0% 0.180 50);
33
- /* amber */
34
- --color-success: oklch(68.0% 0.150 145);
35
- /* green */
36
-
37
- /* Focus ring — distinct from accent so contrast holds */
38
- --color-focus: oklch(46.0% 0.220 268);
39
-
40
- /* Typography — Geist + Geist Mono via Google Fonts */
41
- --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
42
- --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
43
- --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
44
- --font-italic: "Instrument Serif", "Times New Roman", serif;
45
- /* italic accent */
46
-
47
- /* Type scale — modular, tight */
48
- --text-xs: 0.75rem;
49
- --text-sm: 0.875rem;
50
- --text-base: 1rem;
51
- --text-md: 1.125rem;
52
- --text-lg: 1.375rem;
53
- --text-xl: 1.75rem;
54
- --text-2xl: 2.5rem;
55
- --text-3xl: 3.5rem;
56
- --text-4xl: clamp(2rem, 7vw, 4rem);
57
- --text-5xl: clamp(2rem, 10vw, 5rem);
58
-
59
- /* Spacing — 4pt scale */
60
- --space-2xs: 0.25rem;
61
- --space-xs: 0.5rem;
62
- --space-sm: 0.75rem;
63
- --space-md: 1rem;
64
- --space-lg: 1.5rem;
65
- --space-xl: 2rem;
66
- --space-2xl: 3rem;
67
- --space-3xl: 5rem;
68
- --space-4xl: 8rem;
69
-
70
- /* Radius */
71
- --radius-sm: 6px;
72
- --radius-md: 12px;
73
- --radius-lg: 20px;
74
- --radius-xl: 28px;
75
- --radius-pill: 999px;
76
-
77
- /* Lines */
78
- --rule-hair: 1px solid color-mix(in oklch, var(--color-ink-0) 8%, transparent);
79
- --rule-soft: 1px solid color-mix(in oklch, var(--color-ink-0) 14%, transparent);
80
-
81
- /* Easings + durations */
82
- --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
83
- --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
84
- --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
85
-
86
- --dur-fast: 140ms;
87
- --dur-mid: 240ms;
88
- --dur-slow: 420ms;
89
- }
90
-
91
- @media (prefers-reduced-motion: reduce) {
92
-
93
- *,
94
- *::before,
95
- *::after {
96
- animation-duration: 0.01ms !important;
97
- animation-iteration-count: 1 !important;
98
- transition-duration: 140ms !important;
99
- scroll-behavior: auto !important;
100
- }
101
- }
@@ -1,359 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Wayfare — Trips, set in motion.</title>
7
- <meta name="description" content="A small booking studio for slow trips. Six departures every Tuesday, hand-set by a person who has been there." />
8
-
9
- <link rel="preconnect" href="https://fonts.googleapis.com" />
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11
- <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700;12..96,800;12..96,900&family=JetBrains+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&display=swap" rel="stylesheet" />
12
-
13
- <link rel="stylesheet" href="./style.css" />
14
- </head>
15
- <body>
16
-
17
- <!-- ───── Top ticker — IATA marquee ───── -->
18
- <div class="ticker" aria-hidden="true">
19
- <div class="ticker-track">
20
- <span><strong>LIS</strong> Lisbon 06:42</span>
21
- <span><strong>MEX</strong> Mexico City 09:15</span>
22
- <span><strong>RAK</strong> Marrakech 11:30</span>
23
- <span><strong>HND</strong> Tokyo 14:08</span>
24
- <span><strong>KEF</strong> Reykjavik 17:55</span>
25
- <span><strong>EZE</strong> Buenos Aires 21:20</span>
26
- <span><strong>CPH</strong> Copenhagen — next week</span>
27
- <span><strong>BKK</strong> Bangkok — next week</span>
28
- <span><strong>OAX</strong> Oaxaca — week 16</span>
29
- <span><strong>FCO</strong> Rome — week 17</span>
30
- <!-- duplicated track for seamless loop -->
31
- <span><strong>LIS</strong> Lisbon 06:42</span>
32
- <span><strong>MEX</strong> Mexico City 09:15</span>
33
- <span><strong>RAK</strong> Marrakech 11:30</span>
34
- <span><strong>HND</strong> Tokyo 14:08</span>
35
- <span><strong>KEF</strong> Reykjavik 17:55</span>
36
- <span><strong>EZE</strong> Buenos Aires 21:20</span>
37
- <span><strong>CPH</strong> Copenhagen — next week</span>
38
- <span><strong>BKK</strong> Bangkok — next week</span>
39
- <span><strong>OAX</strong> Oaxaca — week 16</span>
40
- <span><strong>FCO</strong> Rome — week 17</span>
41
- </div>
42
- </div>
43
-
44
- <!-- ───── Nav · N9 edge-aligned minimal ───── -->
45
- <header class="shell">
46
- <nav class="masthead" aria-label="Primary">
47
- <a href="#" class="wordmark" aria-label="Wayfare, home">WAYFARE</a>
48
- <span class="masthead-meta">Issue Nº 14 · Spring &rsquo;26</span>
49
- <div class="masthead-links">
50
- <a href="#picks">Trips</a>
51
- <a href="#process">How</a>
52
- <a href="#note">About</a>
53
- <a href="#book">Sign in</a>
54
- </div>
55
- </nav>
56
- </header>
57
-
58
- <!-- ───── Hero · Marquee with departure board ───── -->
59
- <main>
60
- <section class="shell hero" aria-labelledby="hero-title">
61
-
62
- <div class="hero-strip" aria-hidden="false">
63
- <span class="live">LIVE &middot; departures board</span>
64
- <span>Updated Tue 06:00 UTC</span>
65
- <span>06 picks &middot; this week</span>
66
- </div>
67
-
68
- <div class="hero-composition">
69
- <div>
70
- <h1 id="hero-title" class="hero-title">
71
- Pick a city.<br />
72
- <em>We&rsquo;ll pack the rest.</em><span class="tonk">↗ vol.14</span>
73
- </h1>
74
- <p class="hero-sub">
75
- Wayfare is a small booking studio for slow trips. Every Tuesday we publish a board of six places
76
- we&rsquo;d go ourselves &mdash; with the flights, beds, and the one good restaurant already lined up.
77
- </p>
78
- </div>
79
-
80
- <aside class="hero-stamp" aria-label="Departure stamp">
81
- <span class="sm">Departing</span>
82
- <span class="lg">TUESDAY</span>
83
- <span class="sm">Stamped in Lisbon</span>
84
- <span class="num">VOL. 14 &middot; 06.MAY.26</span>
85
- </aside>
86
- </div>
87
-
88
- <!-- Departure board -->
89
- <div class="board" role="table" aria-label="This week's departures">
90
- <div class="board-head" role="row">
91
- <span role="columnheader" aria-label="Local time of day"></span>
92
- <span role="columnheader">Departs</span>
93
- <span role="columnheader">Destination</span>
94
- <span role="columnheader">Code</span>
95
- <span role="columnheader">Status</span>
96
- <span role="columnheader" style="text-align:right">Fare from</span>
97
- </div>
98
-
99
- <a href="#book" class="board-row" data-status="boarding" role="row">
100
- <svg class="board-glyph" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">
101
- <circle cx="8" cy="8" r="3" />
102
- <path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.2 3.2l1.4 1.4M11.4 11.4l1.4 1.4M12.8 3.2l-1.4 1.4M4.6 11.4l-1.4 1.4" stroke-linecap="round" />
103
- </svg>
104
- <span class="board-time" role="cell">06:42</span>
105
- <span class="board-dest" role="cell">LISBON <small>&middot; seven days, two coasts</small></span>
106
- <span class="board-code" role="cell">LIS</span>
107
- <span class="board-status" role="cell">Boarding</span>
108
- <span class="board-fare" role="cell">&euro;387 <small>per person</small></span>
109
- </a>
110
-
111
- <a href="#book" class="board-row" data-status="ontime" role="row">
112
- <svg class="board-glyph" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">
113
- <circle cx="8" cy="8" r="3" />
114
- <path d="M8 1v2M8 13v2M1 8h2M13 8h2" stroke-linecap="round" />
115
- </svg>
116
- <span class="board-time" role="cell">09:15</span>
117
- <span class="board-dest" role="cell">MEXICO CITY <small>&middot; markets, mezcal, mole</small></span>
118
- <span class="board-code" role="cell">MEX</span>
119
- <span class="board-status" role="cell">On time</span>
120
- <span class="board-fare" role="cell">$612 <small>per person</small></span>
121
- </a>
122
-
123
- <a href="#book" class="board-row" data-status="ontime" role="row">
124
- <svg class="board-glyph" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">
125
- <circle cx="8" cy="8" r="4" fill="currentColor" />
126
- </svg>
127
- <span class="board-time" role="cell">11:30</span>
128
- <span class="board-dest" role="cell">MARRAKECH <small>&middot; five nights in the Medina</small></span>
129
- <span class="board-code" role="cell">RAK</span>
130
- <span class="board-status" role="cell">On time</span>
131
- <span class="board-fare" role="cell">&euro;298 <small>per person</small></span>
132
- </a>
133
-
134
- <a href="#book" class="board-row" data-status="ontime" role="row">
135
- <svg class="board-glyph" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">
136
- <circle cx="8" cy="8" r="4" fill="currentColor" />
137
- <line x1="2" y1="14" x2="14" y2="14" stroke-linecap="round" />
138
- </svg>
139
- <span class="board-time" role="cell">14:08</span>
140
- <span class="board-dest" role="cell">TOKYO <small>&middot; nine days, late spring</small></span>
141
- <span class="board-code" role="cell">HND</span>
142
- <span class="board-status" role="cell">On time</span>
143
- <span class="board-fare" role="cell">&yen;84,500 <small>per person</small></span>
144
- </a>
145
-
146
- <a href="#book" class="board-row" data-status="open" role="row">
147
- <svg class="board-glyph" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">
148
- <path d="M11 2.5A5.5 5.5 0 1 0 13.5 11 4.5 4.5 0 0 1 11 2.5Z" fill="currentColor" stroke="none" />
149
- </svg>
150
- <span class="board-time" role="cell">17:55</span>
151
- <span class="board-dest" role="cell">REYKJAVIK <small>&middot; glacier week, room with a hot pool</small></span>
152
- <span class="board-code" role="cell">KEF</span>
153
- <span class="board-status" role="cell">Open</span>
154
- <span class="board-fare" role="cell">&euro;445 <small>per person</small></span>
155
- </a>
156
-
157
- <a href="#book" class="board-row" data-status="open" role="row">
158
- <svg class="board-glyph" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" aria-hidden="true">
159
- <path d="M11 2.5A5.5 5.5 0 1 0 13.5 11 4.5 4.5 0 0 1 11 2.5Z" fill="currentColor" stroke="none" />
160
- </svg>
161
- <span class="board-time" role="cell">21:20</span>
162
- <span class="board-dest" role="cell">BUENOS AIRES <small>&middot; tango month, October &rsquo;26</small></span>
163
- <span class="board-code" role="cell">EZE</span>
164
- <span class="board-status" role="cell">Open</span>
165
- <span class="board-fare" role="cell">$898 <small>per person</small></span>
166
- </a>
167
- </div>
168
-
169
- <p class="board-foot">
170
- <span>Fares are placeholders until you tell us your dates and your budget.</span>
171
- <span>Press <kbd>/</kbd> to filter.</span>
172
- </p>
173
-
174
- <div class="hero-cta">
175
- <a href="#book" class="btn">Book a chair &middot; 15 min</a>
176
- <a href="#picks" class="btn-ghost">See the next eight weeks</a>
177
- </div>
178
-
179
- </section>
180
-
181
- <!-- ───── Pitch ───── -->
182
- <section class="shell pitch" aria-labelledby="pitch-label">
183
- <div class="pitch-grid">
184
- <p id="pitch-label" class="pitch-label">01 &mdash; What this is</p>
185
- <div class="pitch-body">
186
- <p>
187
- Most travel sites ask you what you want and then sell you what they have. We do the opposite.
188
- Each Tuesday a board goes up. <em>Six places.</em> Six trips someone here has actually taken
189
- in the last twelve months.
190
- </p>
191
- <p>
192
- You pick the row that calls. We do the rest &mdash; flights, the bed, the one restaurant
193
- that justifies the flight. No upsells, no loyalty tier, no <em>plus members save</em>.
194
- One flat planning fee, paid once you say go.
195
- </p>
196
- </div>
197
- </div>
198
- </section>
199
-
200
- <!-- ───── Three picks ───── -->
201
- <section class="shell picks" id="picks" aria-labelledby="picks-title">
202
- <div class="picks-head">
203
- <h2 id="picks-title">Recently <em>set in motion.</em></h2>
204
- <span class="count">Three of forty &mdash; spring &rsquo;26</span>
205
- </div>
206
-
207
- <div class="picks-grid">
208
-
209
- <article class="pick">
210
- <p class="pick-num"><span>Nº 037</span><span>4 nights</span></p>
211
- <div class="pick-figure pick-figure-1" aria-hidden="true">
212
- <svg viewBox="0 0 200 250" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.2">
213
- <path d="M20 200 Q60 140 100 180 T180 160" />
214
- <path d="M20 220 Q60 170 100 200 T180 190" stroke-dasharray="3 4" />
215
- <circle cx="148" cy="172" r="4" fill="currentColor" />
216
- <text x="100" y="60" text-anchor="middle" font-family="serif" font-style="italic" font-size="14" fill="currentColor">Bay of</text>
217
- <text x="100" y="80" text-anchor="middle" font-family="serif" font-style="italic" font-size="14" fill="currentColor">Cascais</text>
218
- <line x1="40" y1="100" x2="160" y2="100" stroke="currentColor" stroke-width="0.5" />
219
- <text x="40" y="115" font-family="monospace" font-size="7" fill="currentColor">38&deg;41&prime;N</text>
220
- <text x="120" y="115" font-family="monospace" font-size="7" fill="currentColor">9&deg;25&prime;W</text>
221
- </svg>
222
- </div>
223
- <h3 class="pick-title">LISBON <small>+ Cascais</small></h3>
224
- <p class="pick-body">A coast-side hotel on a Tuesday, a tram into Alfama on Wednesday, fado on Friday, and a quiet drive west. The room has a kettle.</p>
225
- <p class="pick-meta"><span>Apr &mdash; Jun</span><strong>From &euro;387</strong></p>
226
- </article>
227
-
228
- <article class="pick">
229
- <p class="pick-num"><span>Nº 038</span><span>9 days</span></p>
230
- <div class="pick-figure pick-figure-2" aria-hidden="true">
231
- <svg viewBox="0 0 200 250" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.2">
232
- <rect x="40" y="60" width="120" height="120" stroke-dasharray="2 4" />
233
- <circle cx="100" cy="120" r="22" fill="currentColor" opacity="0.85" />
234
- <line x1="100" y1="60" x2="100" y2="180" stroke-width="0.5" />
235
- <line x1="40" y1="120" x2="160" y2="120" stroke-width="0.5" />
236
- <text x="100" y="200" text-anchor="middle" font-family="serif" font-style="italic" font-size="13" fill="currentColor">Late spring,</text>
237
- <text x="100" y="218" text-anchor="middle" font-family="serif" font-style="italic" font-size="13" fill="currentColor">cherry season</text>
238
- <text x="100" y="40" text-anchor="middle" font-family="monospace" font-size="7" fill="currentColor">35&deg;41&prime;N &middot; 139&deg;41&prime;E</text>
239
- </svg>
240
- </div>
241
- <h3 class="pick-title">TOKYO <small>+ a hot-spring detour</small></h3>
242
- <p class="pick-body">Nine days. A small inn in Yanaka, two nights in Hakone with the windows wide open, a bullet train back for one last izakaya.</p>
243
- <p class="pick-meta"><span>May &mdash; Jul</span><strong>From &yen;84,500</strong></p>
244
- </article>
245
-
246
- <article class="pick">
247
- <p class="pick-num"><span>Nº 039</span><span>7 nights</span></p>
248
- <div class="pick-figure pick-figure-3" aria-hidden="true">
249
- <svg viewBox="0 0 200 250" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="1.2">
250
- <path d="M30 180 L60 130 L90 160 L120 100 L150 150 L180 90" />
251
- <path d="M30 180 L180 180" stroke-dasharray="2 3" />
252
- <text x="100" y="40" text-anchor="middle" font-family="serif" font-style="italic" font-size="14" fill="currentColor">Volcanic</text>
253
- <text x="100" y="60" text-anchor="middle" font-family="serif" font-style="italic" font-size="14" fill="currentColor">interior</text>
254
- <text x="100" y="220" text-anchor="middle" font-family="monospace" font-size="7" fill="currentColor">64&deg;08&prime;N &middot; 21&deg;56&prime;W</text>
255
- <circle cx="120" cy="100" r="3" fill="currentColor" />
256
- </svg>
257
- </div>
258
- <h3 class="pick-title">REYKJAVIK <small>+ the south coast</small></h3>
259
- <p class="pick-body">A car, a glacier, a small wooden cabin with a hot pool around the back. Aurora season runs late but the days are long.</p>
260
- <p class="pick-meta"><span>Sep &mdash; Mar</span><strong>From &euro;445</strong></p>
261
- </article>
262
-
263
- </div>
264
- </section>
265
-
266
- <!-- ───── How it works ───── -->
267
- <section class="process" id="process" aria-labelledby="process-head">
268
- <div class="process-shell">
269
- <p id="process-head" class="process-head">02 &mdash; How it works</p>
270
-
271
- <div class="process-grid">
272
- <div class="stage">
273
- <p class="stage-num">01<small>· Tue 06:00</small></p>
274
- <h3>The board goes up.</h3>
275
- <p>Six rows, six places, one a week. We pick what we&rsquo;d book ourselves, never what pays best.</p>
276
- </div>
277
- <div class="stage">
278
- <p class="stage-num">02<small>· 15 min call</small></p>
279
- <h3>You pick the row that calls.</h3>
280
- <p>We talk dates, budget, and the one weird thing you want (a kettle, a left-handed surfboard, a quiet room).</p>
281
- </div>
282
- <div class="stage">
283
- <p class="stage-num">03<small>· Within 48h</small></p>
284
- <h3>We send the dossier.</h3>
285
- <p>Flights, beds, a hand-typed itinerary, restaurants you can ignore. Pay once. Go when you&rsquo;re ready.</p>
286
- </div>
287
- </div>
288
- </div>
289
- </section>
290
-
291
- <!-- ───── A note ───── -->
292
- <section class="shell note" id="note" aria-labelledby="note-label">
293
- <p id="note-label" class="note-label">03 &mdash; A note</p>
294
- <p class="note-body">
295
- We started this because we were tired of <em>filtering</em> our way to a holiday.
296
- A good trip is closer to a good record &mdash; someone has to choose the order of the songs.
297
- <span class="note-sig">&mdash; Marta &amp; Idris &middot; Lisbon, est. 2024</span>
298
- </p>
299
- </section>
300
-
301
- <!-- ───── Final CTA ───── -->
302
- <section class="shell final-cta" id="book">
303
- <h2>
304
- Tuesday&rsquo;s board goes up <em>in 47 hours.</em>
305
- </h2>
306
- <a href="#" class="btn">Book a chair &middot; 15 min</a>
307
- </section>
308
- </main>
309
-
310
- <!-- ───── Footer · Ft4 dense colophon ───── -->
311
- <footer class="shell colophon">
312
- <div class="colophon-head">
313
- <a href="#" class="wordmark">WAYFARE</a>
314
- <em>Trips, set in motion. &mdash; Lisbon &amp; Mexico City.</em>
315
- </div>
316
-
317
- <dl class="colophon-grid">
318
- <div class="col-block">
319
- <dt>The studio</dt>
320
- <dd><a href="#">About us</a></dd>
321
- <dd><a href="#">The Tuesday letter</a></dd>
322
- <dd><a href="#">Working with us</a></dd>
323
- <dd><a href="#">Press &amp; archive</a></dd>
324
- </div>
325
-
326
- <div class="col-block">
327
- <dt>The board</dt>
328
- <dd><a href="#">This week (06)</a></dd>
329
- <dd><a href="#">Next eight weeks</a></dd>
330
- <dd><a href="#">Past trips, archived</a></dd>
331
- <dd><a href="#">Submit a city</a></dd>
332
- </div>
333
-
334
- <div class="col-block">
335
- <dt>The fine print</dt>
336
- <dd><a href="#">Booking terms</a></dd>
337
- <dd><a href="#">Refund policy</a></dd>
338
- <dd><a href="#">Privacy</a></dd>
339
- <dd><a href="#">Cookies (we use two)</a></dd>
340
- </div>
341
-
342
- <div class="col-block">
343
- <dt>Find us</dt>
344
- <dd>Rua das Flores 47</dd>
345
- <dd>1200&ndash;195 Lisbon</dd>
346
- <dd><a href="mailto:hello@wayfare.studio">hello@wayfare.studio</a></dd>
347
- <dd><a href="#">@wayfare.studio</a></dd>
348
- </div>
349
- </dl>
350
-
351
- <div class="colophon-foot">
352
- <span class="lead">&copy; 2026 Wayfare Studio, Lda.</span>
353
- <span>Set in Bricolage Grotesque &amp; Newsreader. Built by hand.</span>
354
- <span>v1.0 &middot; Spring &rsquo;26</span>
355
- </div>
356
- </footer>
357
-
358
- </body>
359
- </html>