{
    "componentChunkName": "component---src-templates-snippet-js",
    "path": "/snippets/von-restorff",
    "result": {"pageContext":{"snippet":{"slug":"von-restorff","title":"Make the Primary Action Stand Out","description":"Style the main CTA with contrast (color, weight, size) so it's the one that gets remembered and clicked.","tag":"contrast","code":".von-demo .btn.primary {\n  background: var(--mint);\n  border-color: var(--mint);\n  color: #ffffff;\n  font-weight: 700;\n  box-shadow: 0 0 24px rgba(29, 127, 83, 0.25);\n}\n\n.von-demo .btn:not(.primary) {\n  background: var(--surface-2);\n  border: 1px solid var(--border);\n  color: var(--text-2);\n}","codeLanguage":"css","sharedCss":"/* ============================================\n   SHARED STYLES — CSS Hacks & UX Laws\n   \n   Design: demo-first, fullscreen-feel\n   The page IS the demo. No title. No code block.\n   Just the tag chip + the live interactive demo.\n   \n   Reference: sorenblank.com/snippets\n   ============================================ */\n\n@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');\n\n/* ============================================\n   RESET\n   ============================================ */\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n/* ============================================\n   DESIGN TOKENS\n   ============================================ */\n\n:root {\n  /* palette */\n  --bg: #ffffff;\n  --surface: rgba(255, 255, 255, 0.72);\n  --surface-2: #eef4ef;\n  --surface-3: #f2f7f3;\n  --border: rgba(22, 51, 37, 0.1);\n  --border-light: rgba(22, 51, 37, 0.06);\n  --border-strong: rgba(22, 51, 37, 0.18);\n  --text: #163325;\n  --text-2: rgb(63, 72, 67);\n  --text-3: #7a8c81;\n\n  /* accent */\n  --mint: #1d7f53;\n  --mint-dim: rgba(29, 127, 83, 0.1);\n  --mint-bright: #249565;\n  --rose: #249565;\n  --rose-dim: rgba(29, 127, 83, 0.06);\n  --violet: #1d7f53;\n  --violet-dim: rgba(29, 127, 83, 0.08);\n  --amber: #2d9a6a;\n  --sky: #163325;\n\n  /* glow & selection */\n  --glow-color: rgba(29, 127, 83, 0.16);\n  --selection-bg: rgba(29, 127, 83, 0.16);\n  --selection-text: #102217;\n\n  /* structure */\n  --radius: 0px;\n  --radius-sm: 0px;\n  --easing: cubic-bezier(0.645, 0.045, 0.355, 1);\n  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);\n  --transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);\n\n  /* typography */\n  --font-display: 'Space Mono', 'Courier Prime', monospace;\n  --font-body: 'Space Mono', 'Courier Prime', monospace;\n  --font-mono: 'Space Mono', 'Courier Prime', monospace;\n\n  color-scheme: light;\n}\n\n/* ============================================\n   BASE — demo pages\n   ============================================ */\n\nhtml,\nbody {\n  height: 100%;\n  overflow: hidden;\n}\n\nbody {\n  font-family: var(--font-body);\n  font-size: 14px;\n  line-height: 1.6;\n  background: var(--bg);\n  color: var(--text-2);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n::-webkit-scrollbar {\n  display: none;\n}\n\n::selection {\n  background: var(--selection-bg);\n  color: var(--selection-text);\n}\n\n/* ─── noise overlay ─── */\nbody::after {\n  content: '';\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 9999;\n  opacity: 0.025;\n  background: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\");\n}\n\n/* ============================================\n   DEMO PAGE LAYOUT\n   The page is the demo. Centered. Full viewport.\n   ============================================ */\n\nmain {\n  width: 100%;\n  max-width: 720px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  position: relative;\n}\n\n/* ============================================\n   TAG CHIP — top-left overlay\n   The only identifier on the page\n   ============================================ */\n\n.tag {\n  position: fixed;\n  top: 20px;\n  left: 20px;\n  z-index: 50;\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--font-mono);\n  font-size: 12px;\n  font-weight: 400;\n  padding: 8px 14px;\n  border-radius: 0px;\n  letter-spacing: 0.05em;\n  text-transform: lowercase;\n  background: var(--bg);\n  color: var(--text-3);\n  border: 1px solid var(--border);\n  opacity: 0;\n  animation: chipIn 400ms var(--ease-out-quart) 200ms forwards;\n  transition: color 0.2s var(--easing), border-color 0.2s var(--easing),\n    background 0.2s var(--easing);\n  text-decoration: none;\n}\n\n.tag:hover {\n  color: var(--mint);\n  border-color: var(--border-strong);\n  background: var(--mint-dim);\n}\n\n@keyframes chipIn {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* back arrow inside the tag on demo pages */\n.tag-back-arrow {\n  display: inline-block;\n  margin-right: 8px;\n  transition: transform 0.2s var(--easing);\n}\n\n.tag:hover .tag-back-arrow {\n  transform: translateX(-3px);\n}\n\n/* tag color variants — all collapse to same green */\n.tag-mint,\n.tag-rose,\n.tag-violet {\n  /* no color override needed — all same */\n}\n\n/* ============================================\n   DEMO AREA\n   ============================================ */\n\n.demo {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  width: 100%;\n  flex: 1;\n  opacity: 0;\n  animation: demoIn 500ms var(--ease-out-quart) 100ms forwards;\n}\n\n@keyframes demoIn {\n  from {\n    opacity: 0;\n    transform: translateY(16px) scale(0.98);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* ============================================\n   COMPARISON LAYOUT (side by side)\n   ============================================ */\n\n.comparison {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0;\n  width: 100%;\n  flex: 1;\n  align-items: center;\n  opacity: 0;\n  animation: demoIn 500ms var(--ease-out-quart) 100ms forwards;\n}\n\n.side {\n  padding: 32px 28px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.side + .side {\n  border-left: 1px solid var(--border);\n}\n\n.side-label {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-size: 12px;\n  font-weight: 400;\n  text-transform: lowercase;\n  letter-spacing: 0.05em;\n  color: var(--text-3);\n}\n\n.dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n.dot-red {\n  background: var(--text-3);\n}\n.dot-green {\n  background: var(--mint);\n}\n\n/* ============================================\n   TOGGLE SWITCH\n   ============================================ */\n\n.toggle {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--text-2);\n  user-select: none;\n}\n\n.toggle input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.toggle-track {\n  position: relative;\n  width: 48px;\n  height: 26px;\n  background: var(--border-strong);\n  border-radius: 999px;\n  transition: background 0.25s var(--easing);\n  flex-shrink: 0;\n}\n\n.toggle-track::after {\n  content: '';\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 20px;\n  height: 20px;\n  background: var(--bg);\n  border-radius: 50%;\n  transition: translate 0.25s var(--easing);\n}\n\n.toggle input:checked + .toggle-track {\n  background: var(--mint);\n}\n\n.toggle input:checked + .toggle-track::after {\n  translate: 22px 0;\n}\n\n/* ============================================\n   SHARED UTILITIES\n   ============================================ */\n\n.demo-input {\n  width: 100%;\n  max-width: 300px;\n  padding: 12px 16px;\n  border-radius: 0px;\n  background: var(--surface-2);\n  border: 1px solid var(--border);\n  color: var(--text);\n  font-family: var(--font-body);\n  font-size: 14px;\n  outline: none;\n  transition: border-color 0.25s var(--easing), box-shadow 0.25s var(--easing);\n}\n\n.demo-input:focus {\n  border-color: var(--mint);\n  box-shadow: 0 0 0 3px var(--mint-dim);\n}\n\n/* ============================================\n   REDUCED MOTION\n   ============================================ */\n\n@media (prefers-reduced-motion: reduce) {\n  .tag,\n  .demo,\n  .comparison {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n/* ============================================\n   INDEX PAGE STYLES — Video Grid\n   ============================================ */\n\n/* ─── grid layout ─── */\n.snippet-grid {\n  display: grid;\n  grid-template-columns: repeat(1, 1fr);\n  gap: 8px;\n  width: 100%;\n  max-width: 2000px;\n  margin: 0 auto;\n}\n\n@media (min-width: 640px) {\n  .snippet-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (min-width: 1024px) {\n  .snippet-grid {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n/* ─── video card ─── */\n.snippet-card {\n  position: relative;\n  display: block;\n  overflow: hidden;\n  border-radius: 0px;\n  aspect-ratio: 16 / 10;\n  background: var(--surface-2);\n  border: 1px solid var(--border);\n  cursor: default;\n  text-decoration: none;\n}\n\n/* blurred placeholder (LQIP) */\n.snippet-card .placeholder {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  filter: blur(32px);\n  transform: scale(1.1) translateZ(0);\n}\n\n/* autoplay video */\n.snippet-card video {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  aspect-ratio: 16 / 10;\n  transition: transform 500ms var(--ease-out-quart);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .snippet-card video {\n    transition: none;\n  }\n}\n\n/* ─── hover overlay: \"view live\" button slides up ─── */\n.snippet-card .card-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 6px;\n  transform: translateY(100%);\n  opacity: 0;\n  filter: blur(4px);\n  transition: transform 300ms var(--ease-out-quart), opacity 300ms var(--ease-out-quart),\n    filter 300ms var(--ease-out-quart);\n}\n\n.snippet-card:hover .card-overlay {\n  transform: translateY(0);\n  opacity: 1;\n  filter: blur(0);\n}\n\n.card-overlay-inner {\n  width: 100%;\n  padding: 8px 0;\n  text-align: center;\n  background: var(--bg);\n  border: 1px solid var(--border);\n  border-radius: 0px;\n  cursor: pointer;\n}\n\n.card-overlay-inner span {\n  font-family: var(--font-mono);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--text);\n  letter-spacing: 0.02em;\n}\n\n/* ─── staggered card entrance ─── */\n@keyframes cardIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px) scale(0.97);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.snippet-card {\n  opacity: 0;\n  animation: cardIn 400ms var(--ease-out-quart) both;\n}\n\n/* stagger delays: 30ms increments per card */\n.snippet-card:nth-child(1) {\n  animation-delay: 60ms;\n}\n.snippet-card:nth-child(2) {\n  animation-delay: 90ms;\n}\n.snippet-card:nth-child(3) {\n  animation-delay: 120ms;\n}\n.snippet-card:nth-child(4) {\n  animation-delay: 150ms;\n}\n.snippet-card:nth-child(5) {\n  animation-delay: 180ms;\n}\n.snippet-card:nth-child(6) {\n  animation-delay: 210ms;\n}\n.snippet-card:nth-child(7) {\n  animation-delay: 240ms;\n}\n.snippet-card:nth-child(8) {\n  animation-delay: 270ms;\n}\n.snippet-card:nth-child(9) {\n  animation-delay: 300ms;\n}\n.snippet-card:nth-child(10) {\n  animation-delay: 330ms;\n}\n.snippet-card:nth-child(11) {\n  animation-delay: 360ms;\n}\n.snippet-card:nth-child(12) {\n  animation-delay: 390ms;\n}\n.snippet-card:nth-child(13) {\n  animation-delay: 420ms;\n}\n.snippet-card:nth-child(14) {\n  animation-delay: 450ms;\n}\n.snippet-card:nth-child(15) {\n  animation-delay: 480ms;\n}\n.snippet-card:nth-child(16) {\n  animation-delay: 510ms;\n}\n.snippet-card:nth-child(17) {\n  animation-delay: 540ms;\n}\n.snippet-card:nth-child(18) {\n  animation-delay: 570ms;\n}\n.snippet-card:nth-child(19) {\n  animation-delay: 600ms;\n}\n.snippet-card:nth-child(20) {\n  animation-delay: 630ms;\n}\n.snippet-card:nth-child(21) {\n  animation-delay: 660ms;\n}\n.snippet-card:nth-child(22) {\n  animation-delay: 690ms;\n}\n.snippet-card:nth-child(23) {\n  animation-delay: 720ms;\n}\n.snippet-card:nth-child(24) {\n  animation-delay: 750ms;\n}\n.snippet-card:nth-child(25) {\n  animation-delay: 780ms;\n}\n.snippet-card:nth-child(26) {\n  animation-delay: 810ms;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .snippet-card {\n    animation: none;\n    opacity: 1;\n  }\n}\n\n/* ─── section header ─── */\n.section-head {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  font-family: var(--font-mono);\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.05em;\n  text-transform: lowercase;\n  color: var(--text-3);\n  margin-bottom: 12px;\n}\n\n.section-head::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: var(--border);\n}\n","demoCss":".von-demo {\n        width: 100%;\n        max-width: 380px;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n      }\n\n      .von-demo .btn {\n        padding: 14px 20px;\n        border-radius: var(--radius-sm);\n        font-family: var(--font-mono);\n        font-size: 13px;\n        cursor: pointer;\n        text-align: center;\n        border: 1px solid var(--border);\n        background: var(--surface-2);\n        color: var(--text-2);\n        transition: background 0.25s, border-color 0.25s, color 0.25s;\n      }\n\n      .von-demo .btn:hover {\n        background: var(--surface-3);\n        border-color: var(--border-strong);\n        color: var(--text);\n      }\n\n      .von-demo .btn.primary {\n        background: var(--mint);\n        border-color: var(--mint);\n        color: #ffffff;\n        font-weight: 700;\n        box-shadow: 0 0 24px rgba(29, 127, 83, 0.25);\n      }\n\n      .von-demo .btn.primary:hover {\n        background: var(--mint-bright);\n        border-color: var(--mint-bright);\n        box-shadow: 0 0 32px rgba(29, 127, 83, 0.35);\n      }\n\n      .von-note {\n        font-size: 13px;\n        color: var(--text-2);\n        line-height: 1.6;\n        margin-top: 8px;\n      }","demoMarkup":"<div class=\"demo\">\n          <div class=\"von-demo\">\n            <button type=\"button\" class=\"btn primary\">save changes</button>\n            <button type=\"button\" class=\"btn\">cancel</button>\n            <button type=\"button\" class=\"btn\">reset to default</button>\n            <p class=\"von-note\">\n              one primary (color + weight + shadow); secondaries share the same subdued style. the\n              eye goes to \"save\" first.\n            </p>\n          </div>\n        </div>","whyItWorks":"Von Restorff Effect — the item that differs from the rest is most likely to be remembered; one primary button wins.","uxLaw":"Von Restorff Effect"}}},
    "staticQueryHashes": ["1737871322","1994492073","4117294525"]}