/* Shared ground for the SnackNotes website mockups. Tokens mirrored from packages/tokens/src/tokens.css so the mockups can be opened as plain files with no build step. */ :root { --coral:#FF6B6B; --yellow:#FFD93D; --green:#6BCB77; --blue:#4D96FF; --purple:#A78BFA; --coral-light:#FFE0E0; --yellow-light:#FFF8DC; --green-light:#E8F8EA; --blue-light:#E0EDFF; --purple-light:#EFE4FF; --coral-ink:#c62828; --yellow-ink:#f57f17; --green-ink:#2e7d32; --blue-ink:#1565c0; --purple-ink:#7b1fa2; --bg:#FAFAFA; --warm-white:#FFF9F0; --paper-card:#FFFFFF; --photo-paper:#F1EDE3; --text:#2D2A26; --text-muted:#5C5650; --text-faint:#8B8680; --line:#E5E7EB; --line-warm:#f0ece4; --page-cream:#F6EFE0; --shadow:rgba(0,0,0,0.10); --shadow-deep:rgba(0,0,0,0.20); --font-display:'Playpen Sans', cursive; --font-body:'Literata', serif; --font-mono:'JetBrains Mono', ui-monospace, monospace; --r-sm:6px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:100px; --site-max:1200px; --content-max:720px; --gutter:clamp(1rem, 4vw, 3rem); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font-body);color:var(--text);line-height:1.6; font-size:17px;-webkit-font-smoothing:antialiased; /* clip, not hidden: hidden on breaks position:sticky */ overflow-x:clip} img{max-width:100%;display:block} /* a class that sets display beats the UA rule for [hidden], so pin it */ [hidden]{display:none !important} a{color:inherit} h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;margin:0;font-weight:700} p{margin:0} button,input{font:inherit} .shell{max-width:var(--site-max);margin:0 auto;padding-inline:var(--gutter)} .narrow{max-width:var(--content-max)} /* ---- shared bits ---- */ .eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--text-faint)} .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display); font-weight:700;font-size:1rem;border:2.5px solid var(--text);border-radius:var(--r-pill); padding:.7rem 1.4rem;background:var(--yellow);color:var(--text);cursor:pointer; box-shadow:3px 4px 0 var(--text);text-decoration:none; transition:transform .12s ease, box-shadow .12s ease} .btn:hover{transform:translate(-2px,-3px);box-shadow:5px 7px 0 var(--text)} .btn--coral{background:var(--coral);color:#fff} .btn--white{background:#fff} .btn--sm{font-size:.85rem;padding:.45rem 1rem;box-shadow:2px 3px 0 var(--text)} .chip{display:inline-block;font-family:var(--font-mono);font-size:.66rem; letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:var(--r-pill)} .chip--website{background:var(--blue-light);color:var(--blue-ink)} .chip--video{background:var(--coral-light);color:var(--coral-ink)} .chip--make{background:var(--green-light);color:var(--green-ink)} .chip--game{background:var(--purple-light);color:var(--purple-ink)} .chip--book{background:var(--yellow-light);color:var(--yellow-ink)} .chip--app,.chip--interactive{background:var(--yellow-light);color:var(--yellow-ink)} .mark{background:linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 94%, transparent 94%); padding-inline:.1em} .mark--green{background:linear-gradient(transparent 58%, var(--green) 58%, var(--green) 94%, transparent 94%)} .mark--coral{background:linear-gradient(transparent 58%, var(--coral) 58%, var(--coral) 94%, transparent 94%)} .mark--blue{background:linear-gradient(transparent 58%, var(--blue-light) 58%, var(--blue-light) 94%, transparent 94%)} /* email capture, shared skeleton, skinned per direction */ .capture{display:flex;gap:.5rem;flex-wrap:wrap} .capture input{flex:1 1 15rem;min-width:0;border:2.5px solid var(--text);border-radius:var(--r-pill); padding:.7rem 1.1rem;background:#fff;font-family:var(--font-body)} .capture input:focus{outline:3px solid var(--blue);outline-offset:1px} .fineprint{font-size:.85rem;color:var(--text-muted);margin-top:.6rem} /* mockup chrome: a small label so we always know which direction we're in */ .mockup-flag{position:fixed;left:12px;bottom:12px;z-index:99;font-family:var(--font-mono); font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;background:var(--text); color:#fff;padding:.4rem .7rem;border-radius:var(--r-pill);text-decoration:none;opacity:.75} .mockup-flag:hover{opacity:1}