/* PawPawCat marketing site. Tokens, the font-face and the button skin are lifted from the game's tokens.css so the two read as one product. The game is a fixed 1920x956 canvas; this is a normal fluid page, so the shared parts are the palette, the typeface and the button behaviour — not the layout system. */ @font-face { font-family: 'Squishy Blue'; src: url('/fonts/SquishyBlue.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } :root { --c-outline: #232842; --c-panel: #d6e8f2; --c-panel-inner: #cbdce6; --c-bg: #adc9dc; --c-ink: #131313; --c-muted: #5d7183; --f-pink: #ff66cc; --b-pink: #ff3cb8; --f-home: #cfeefb; --b-home: #98cce2; --f-mint: #7fd9d0; --b-mint: #4dafa8; --f-yellow: #fde170; --b-yellow: #e8b836; --font-game: 'Squishy Blue', system-ui, sans-serif; --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --paw-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 25'%3E%3Cellipse cx='14' cy='18.3' rx='7.2' ry='5.6'/%3E%3Cellipse cx='3.2' cy='9.2' rx='3.3' ry='4.1'/%3E%3Cellipse cx='10.3' cy='4.8' rx='3.35' ry='4.2'/%3E%3Cellipse cx='17.7' cy='4.8' rx='3.35' ry='4.2'/%3E%3Cellipse cx='24.8' cy='9.2' rx='3.3' ry='4.1'/%3E%3C/svg%3E"); } * { box-sizing: border-box; margin: 0; padding: 0; } /* The ground cats are positioned by percentage and are wider than their anchor point, so the outermost ones hang past the viewport. Clip at the root as well as on body — overflow-x on body alone still lets scroll. */ html { overflow-x: hidden; } body { font-family: var(--font-game); font-synthesis: none; color: var(--c-ink); background: var(--c-bg); /* The game's paw-tile backdrop, tiled rather than stretched. */ background-image: url('/assets/ui/bg-paw.webp'); background-size: 620px auto; background-position: center top; line-height: 1.35; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { -webkit-user-drag: none; user-select: none; } /* ── the game's button, verbatim ──────────────────────────────────────── */ .skin { position: relative; border-radius: var(--radius, 18px); background: var(--fill); box-shadow: 0 0 0 3px var(--c-outline); } .skin::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 calc(-1 * var(--bevel-h, 10px)) 0 0 var(--bevel); transition: box-shadow 160ms ease; } .btn { --radius: 18px; --bevel-h: 10px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; height: 68px; padding: 0 34px; font-family: var(--font-game); font-size: 29px; color: var(--c-ink); text-decoration: none; cursor: pointer; transition: transform 260ms var(--ease-pop), box-shadow 260ms ease; will-change: transform; } .btn-sm { height: 52px; padding: 0 24px; font-size: 22px; --bevel-h: 7px; --radius: 14px; } .btn[data-fill='pink'] { --fill: var(--f-pink); --bevel: var(--b-pink); --spark: #fff0fa; } .btn[data-fill='home'] { --fill: var(--f-home); --bevel: var(--b-home); --spark: #eaf8ff; } .btn[data-fill='mint'] { --fill: var(--f-mint); --bevel: var(--b-mint); --spark: #dffbf7; } .btn[data-fill='yellow'] { --fill: var(--f-yellow); --bevel: var(--b-yellow); --spark: #fff6cf; } .btn > .btn-label { position: relative; z-index: 3; margin-bottom: var(--bevel-h); white-space: nowrap; } .btn:hover { transform: scale(1.05); box-shadow: 0 0 0 3px var(--c-outline), 0 0 0 8px #fff; } /* The compact button lives inside a ~54px bar, so its hover ring is tightened to stop it spilling past the nav's top and bottom edges. */ .btn-sm:hover { transform: scale(1.04); box-shadow: 0 0 0 3px var(--c-outline), 0 0 0 4px #fff; } .btn:hover::after { box-shadow: inset 0 calc(-1 * var(--bevel-h) - 2px) 0 0 var(--bevel); } .btn:active { transform: scale(1); } .btn:active::after { box-shadow: inset 0 -3px 0 0 var(--bevel); } /* Paw particles drifting up out of the button on hover — same as the game. */ .btn-sparks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; border-radius: inherit; } .btn-sparks > i { position: absolute; bottom: -14px; width: 14px; height: 12px; background: var(--spark, #fff); -webkit-mask: var(--paw-mask) center/contain no-repeat; mask: var(--paw-mask) center/contain no-repeat; opacity: 0; } .btn:hover .btn-sparks > i { animation: paw-rise 1.5s linear infinite; } .btn-sparks > i:nth-child(1) { left: 12.5%; animation-delay: 0ms; } .btn-sparks > i:nth-child(2) { left: 25%; animation-delay: 140ms; } .btn-sparks > i:nth-child(3) { left: 37.5%; animation-delay: 280ms; } .btn-sparks > i:nth-child(4) { left: 50%; animation-delay: 420ms; } .btn-sparks > i:nth-child(5) { left: 62.5%; animation-delay: 560ms; } .btn-sparks > i:nth-child(6) { left: 75%; animation-delay: 700ms; } .btn-sparks > i:nth-child(7) { left: 87.5%; animation-delay: 840ms; } @keyframes paw-rise { 0% { transform: translateY(0) rotate(0deg) scale(0.7); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateY(-78px) rotate(24deg) scale(1); opacity: 0; } } /* ── sprite engine ─────────────────────────────────────────────────────── 64px art on a 68px pitch with a 2px gutter, 16x19 grid. Stepping background-position-x by the pitch walks the row; steps(n) lands each frame squarely. Identical maths to the game's CatSprite. */ .cat { width: 64px; height: 64px; background-repeat: no-repeat; background-position-x: -2px; image-rendering: pixelated; transform-origin: bottom center; } @keyframes pochi-strip { to { background-position-x: var(--end); } } /* ── nav ─────────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 26px; padding: 12px clamp(14px, 4vw, 46px); background: rgba(214, 232, 242, 0.86); backdrop-filter: blur(9px); box-shadow: 0 3px 0 rgba(35, 40, 66, 0.14); } .nav-brand { margin-right: auto; } .nav-brand img { height: 46px; width: auto; display: block; image-rendering: pixelated; } .nav-links { display: flex; gap: 24px; } .nav-links a { color: var(--c-outline); text-decoration: none; font-size: 21px; opacity: 0.8; transition: opacity 160ms, transform 200ms var(--ease-pop); } .nav-links a:hover { opacity: 1; transform: translateY(-2px); } /* ── hero ────────────────────────────────────────────────────────────── */ .hero { position: relative; text-align: center; padding: clamp(30px, 6vw, 62px) 18px 0; min-height: min(88vh, 780px); display: flex; flex-direction: column; align-items: center; } .hero-logo { width: min(620px, 86vw); height: auto; image-rendering: pixelated; } .hero-tag { margin-top: 18px; font-size: clamp(19px, 2.5vw, 27px); color: var(--c-outline); opacity: 0.86; line-height: 1.5; } .hero-cta { margin-top: 30px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .hero-chain { margin-top: 22px; display: flex; align-items: center; gap: 9px; font-size: 19px; color: var(--c-muted); } .hero-chain img { width: 22px; height: 22px; } /* The ground the cats stand on: a soft band across the bottom of the hero. */ .ground { position: relative; width: 100%; height: 232px; margin-top: auto; overflow: hidden; } .ground::after { content: ''; position: absolute; left: 0; right: 0; bottom: 46px; height: 3px; background: linear-gradient(90deg, transparent, rgba(35, 40, 66, 0.16) 12%, rgba(35, 40, 66, 0.16) 88%, transparent); } .actor { position: absolute; bottom: 46px; } /* The patrolling cat walks nearer the viewer than the seated cast, so crossing them reads as depth rather than as two sprites colliding. */ .walker { z-index: 5; bottom: 14px; } .walker .shadow { background: rgba(35, 40, 66, 0.22); } .actor .shadow { position: absolute; left: 50%; bottom: -7px; width: 62%; height: 13px; transform: translateX(-50%); border-radius: 50%; background: rgba(35, 40, 66, 0.17); filter: blur(2px); } /* ── bands ───────────────────────────────────────────────────────────── */ .band { padding: clamp(52px, 8vw, 96px) clamp(16px, 5vw, 60px); text-align: center; } .band.alt { background: rgba(214, 232, 242, 0.72); } .band h2 { font-size: clamp(30px, 4.6vw, 50px); color: var(--c-outline); } .band .sub { margin: 14px auto 0; max-width: 640px; font-size: clamp(17px, 2vw, 22px); color: var(--c-muted); line-height: 1.55; } .cards { margin-top: 122px; display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 26px; max-width: 1060px; margin-inline: auto; } .card { position: relative; padding: 46px 26px 30px; background: var(--c-panel); border: 4px solid var(--c-outline); border-radius: 22px; box-shadow: 0 7px 0 rgba(35, 40, 66, 0.28); transition: transform 280ms var(--ease-pop), box-shadow 280ms ease; } .card:hover { transform: translateY(-7px); box-shadow: 0 14px 0 rgba(35, 40, 66, 0.24); } .card h3 { font-size: 28px; color: var(--c-outline); } .card p { margin-top: 10px; font-size: 18px; color: var(--c-muted); line-height: 1.5; } /* Feet 24px inside the card's top edge; at scale 1.8 the art reaches 91px above it, which is what .cards' top margin is sized to clear. */ .card-cat { position: absolute; top: -40px; left: 50%; margin-left: -32px; height: 64px; } .roster { margin-top: 46px; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 3vw, 40px); } .pet { display: flex; flex-direction: column; align-items: center; gap: 10px; } .pet .plinth { width: 128px; height: 128px; display: grid; place-items: end center; background: var(--c-panel-inner); border: 4px solid var(--c-outline); border-radius: 20px; padding-bottom: 8px; transition: transform 260ms var(--ease-pop); } .pet:hover .plinth { transform: translateY(-6px) rotate(-2deg); } .pet span { font-size: 19px; color: var(--c-muted); text-transform: capitalize; } .steps { margin: 44px auto 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; max-width: 860px; } .step { display: flex; flex-direction: column; align-items: center; gap: 12px; } .step .num { width: 58px; height: 58px; display: grid; place-items: center; font-size: 28px; color: #fff; background: var(--f-pink); border: 4px solid var(--c-outline); border-radius: 50%; box-shadow: 0 5px 0 var(--b-pink); } .step p { font-size: 19px; color: var(--c-muted); } /* ── footer ──────────────────────────────────────────────────────────── */ .foot { position: relative; padding: 74px 20px 40px; text-align: center; background: var(--c-outline); color: #cddced; } .foot-cats { position: absolute; top: -64px; left: 0; right: 0; height: 64px; } .foot-logo { width: 260px; height: auto; image-rendering: pixelated; } .foot-chain { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 18px; opacity: 0.85; } .foot-chain img { width: 20px; height: 20px; } .foot-small { margin-top: 12px; font-size: 15px; opacity: 0.5; } /* ── entrances ───────────────────────────────────────────────────────── */ @keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes logo-in { from { opacity: 0; transform: translateY(-16px) scale(0.94); } to { opacity: 1; transform: none; } } .card-in { animation: card-in 420ms var(--ease-pop) both; } .logo-in { animation: logo-in 520ms var(--ease-pop) both; } .hero-tag { animation-delay: 90ms; } .hero-cta { animation-delay: 180ms; } .hero-chain { animation-delay: 260ms; } /* Reveal-on-scroll for the bands. */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 520ms ease, transform 520ms var(--ease-pop); } .reveal.in { opacity: 1; transform: none; } /* ── coming-soon dialog ─────────────────────────────────────────────── */ .soon-scrim[hidden] { display: none; } .soon-scrim { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(173, 201, 220, 0.66); } .soon-card { width: min(430px, 90vw); padding: 30px 26px 28px; text-align: center; background: var(--c-panel); border: 5px solid var(--c-outline); border-radius: 21px; box-shadow: 0 0 0 2px #000, 0 8px 0 rgba(0, 0, 0, 0.28); } .soon-card h3 { font-size: clamp(28px, 7vw, 40px); color: var(--c-outline); } .soon-card p { margin-top: 10px; font-size: clamp(15px, 4vw, 20px); color: var(--c-muted); line-height: 1.5; } .soon-card .btn { margin-top: 20px; height: 56px; padding: 0 30px; font-size: 23px; --bevel-h: 8px; } .soon-cat { height: 64px; display: flex; justify-content: center; } @media (max-width: 760px) { /* Section anchors are reachable by scrolling, so they hide; PawPaper is a separate page, so it must stay visible on mobile. */ .nav-links { display: flex; gap: 12px; } .nav-section { display: none; } .nav-paper { font-size: 17px; } .ground { height: 176px; } /* The desktop line-break lands mid-sentence once the column narrows. */ .br-lg { display: none; } /* :not(.btn-sm) matters — a bare .btn here ties with .btn-sm on specificity and, coming later in the sheet, was making the compact nav button LARGER on a phone than on desktop. */ .btn:not(.btn-sm) { height: 56px; padding: 0 20px; font-size: 22px; --bevel-h: 8px; } .btn-sm { height: 38px; padding: 0 15px; font-size: 16px; --bevel-h: 5px; --radius: 11px; } .nav { padding: 8px 12px; gap: 10px; } .nav-brand img { height: 32px; } .hero-cta { gap: 12px; } .hero-logo { width: 88vw; } .card { padding: 40px 20px 26px; } .cards { margin-top: 104px; } .pet .plinth { width: 104px; height: 104px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } }