/* ============================================================ Catchi pixel-art theme — design tokens, pixel font, primitives. Loaded BEFORE base.css so tokens/primitives are available first. Palette sampled from textures/CatUserInterface/BONUSPastelUI.png. ============================================================ */ /* ---------- Pixel font: Pixelify Sans (self-hosted, Latin + Cyrillic) ---------- */ @font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/PixelifySans-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/PixelifySans-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/PixelifySans-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/PixelifySans-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/PixelifySans-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/PixelifySans-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* ---------- Design tokens (light) ---------- */ :root { /* unit = pixel-border thickness; everything scales off this */ --u: 3px; /* surfaces & ink */ --bg: #efe6d2; --bg-2: #e7dcc4; /* page gradient partner */ --panel: #f9f1e1; /* paper body of panels */ --panel-2: #fbf6ea; /* lighter panel (insets, cells) */ --stage: #f3ead6; /* cat stage backdrop (wall) */ --floor: #e7d8bd; /* cat stage floor band */ --line: #c9a87f; /* default frame outline (warm) */ --line-soft: #ddc9a6; /* faint divider */ --ink: #5b4a3f; /* primary text */ --ink-soft: #a08d79; /* secondary text */ --hi: rgba(255, 255, 255, 0.65); /* inner top highlight */ --lo: rgba(120, 92, 60, 0.10); /* inner bottom shade */ --drop: rgba(120, 92, 60, 0.18); /* hard pixel drop shadow */ /* accents (sampled from kit) */ --accent: #e89a8c; /* coral CTA body */ --accent-line: #c66f63; /* coral CTA outline */ --accent-ink: #ffffff; /* per-need hues: [body, outline] */ --hunger: #f0b074; --hunger-line: #c98a47; --thirst: #8cc4e6; --thirst-line: #5b95c2; --happy: #f0a0bd; --happy-line: #c66f93; --sleep: #b9a3e0; --sleep-line: #8e75bf; --clean: #99cf99; --clean-line: #6aa86a; /* per-view accent (header tab tint) */ --view-cat: #d7b98f; --view-cat-line: #b6915f; --view-cats: #8cc4e6; --view-cats-line: #5b95c2; --view-shop: #99cf99; --view-shop-line: #6aa86a; --view-planet: #b9a3e0; --view-planet-line: #8e75bf; --view-me: #f0a0bd; --view-me-line: #c66f93; --tab-h: 68px; } /* ---------- Dark variant (art-directed, not Telegram-driven) ---------- */ body.theme-dark { --bg: #2b2536; --bg-2: #221d2c; --panel: #3b3349; --panel-2: #463d56; --line: #6b5f86; --line-soft: #4d4460; --ink: #f1e9dd; --ink-soft: #b9aecb; --hi: rgba(255, 255, 255, 0.14); --lo: rgba(0, 0, 0, 0.22); --drop: rgba(0, 0, 0, 0.35); --stage: #463d56; --floor: #3a3248; --accent: #e89a8c; --accent-line: #b25e53; --accent-ink: #2b2536; /* need hues keep their identity in dark; outlines darken slightly */ --view-cat: #6b5f86; --view-cat-line: #574b70; } /* ============================================================ Pixel primitives — the box-shadow border trick. Four directional shadows draw the frame and leave the four corner pixels empty -> the signature notched pixel-frame look. Recolor by setting --line / background on the element. ============================================================ */ .pixel { position: relative; background: var(--panel); color: var(--ink); border-radius: 0; box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--line), /* top */ 0 var(--u) 0 0 var(--line), /* bottom */ calc(-1 * var(--u)) 0 0 0 var(--line), /* left */ var(--u) 0 0 0 var(--line), /* right */ inset 0 var(--u) 0 0 var(--hi), /* top inner highlight */ inset 0 calc(-1 * var(--u)) 0 0 var(--lo); /* bottom inner shade */ } /* Adds a hard offset drop-shadow for floating panels/cards. */ .pixel-raised { box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--line), 0 var(--u) 0 0 var(--line), calc(-1 * var(--u)) 0 0 0 var(--line), var(--u) 0 0 0 var(--line), inset 0 var(--u) 0 0 var(--hi), inset 0 calc(-1 * var(--u)) 0 0 var(--lo), calc(2 * var(--u)) calc(2 * var(--u)) 0 calc(-1 * var(--u)) var(--drop); } /* Pixel button: colored body + darker outline, presses down on tap. */ .pixel-btn { position: relative; appearance: none; border: none; cursor: pointer; font: inherit; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-ink); background: var(--accent); --line: var(--accent-line); border-radius: 0; padding: 12px 14px; transition: transform 60ms steps(2); box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--line), 0 var(--u) 0 0 var(--line), calc(-1 * var(--u)) 0 0 0 var(--line), var(--u) 0 0 0 var(--line), inset 0 var(--u) 0 0 rgba(255, 255, 255, 0.35), inset 0 calc(-2 * var(--u)) 0 0 rgba(0, 0, 0, 0.10), calc(1 * var(--u)) calc(2 * var(--u)) 0 calc(-1 * var(--u)) var(--drop); } .pixel-btn:active { transform: translateY(var(--u)); box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--line), 0 var(--u) 0 0 var(--line), calc(-1 * var(--u)) 0 0 0 var(--line), var(--u) 0 0 0 var(--line), inset 0 var(--u) 0 0 rgba(0, 0, 0, 0.10); } .pixel-btn[disabled], [data-busy] .pixel-btn { opacity: 0.5; pointer-events: none; } /* Neutral (paper) button variant. */ .pixel-btn.neutral { background: var(--panel); color: var(--ink); --line: var(--line-soft); } /* Pixel progress bar: notched track + colored fill. */ .pixel-bar { position: relative; height: 16px; background: var(--panel-2); --line: var(--line-soft); box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--line), 0 var(--u) 0 0 var(--line), calc(-1 * var(--u)) 0 0 0 var(--line), var(--u) 0 0 0 var(--line), inset 0 calc(-1 * var(--u)) 0 0 var(--lo); overflow: hidden; } .pixel-bar > .fill { height: 100%; background: var(--bar-color, var(--accent)); box-shadow: inset 0 var(--u) 0 0 rgba(255, 255, 255, 0.4); transition: width 220ms steps(8); } /* Pixel chip/badge — small notched tag. */ .pixel-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; font-size: 12px; line-height: 1; color: var(--ink); background: var(--panel-2); --line: var(--line-soft); box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--line), 0 var(--u) 0 0 var(--line), calc(-1 * var(--u)) 0 0 0 var(--line), var(--u) 0 0 0 var(--line); } /* Crisp scaling for all pixel-art raster imagery. */ .pixelated { image-rendering: pixelated; image-rendering: crisp-edges; } /* Recolorable pixel icon: monochrome PNG used as a mask, tinted by `color`. Source set per element via `--icon: url(...)`. */ .ico { display: inline-block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; flex: none; }