/* * abatools activity theme: the Find It / Word Match look, shared by every * other activity. Link after /fonts/activity-fonts.css. See * docs/visual-style-guide.md before adding tokens or changing values. */ :root { /* core (same values as src/find-it/style.css and src/word-match/style.css) */ --ink: #34454a; --ivory: #fff9ef; --paper: #ffffff; --muted: #8a979b; --line: #e6dccb; --correct: #4fa66a; --prompt: #4c9f9b; --gold: #e8b94f; /* derived surfaces */ --glow: #fffdf8; --prompt-deep: #357370; --correct-deep: #3b8052; --card-line: #eadfcd; --card-ledge: #e5d8c2; --panel-line: #f0e6d6; --panel-ledge: #eee3d0; --track: #ece2d2; --selected: #f1e6d4; --selected-line: #cdbfa8; --hold-fill: #f1e3cf; --row-line: #f1eadf; --text-correct: #2f7d47; --text-incorrect: #b4553c; --correct-wash: #e6f2e9; --incorrect-wash: #f7e7e0; --backdrop: rgb(52 69 74 / 28%); --drop: rgb(92 72 40 / 10%); /* illustration palette (docs/word-match-art/ART_DIRECTION.md) */ --art-terracotta: #e98267; --art-denim: #678eb5; --art-plum: #9278a0; --art-cream: #fff6de; --art-leaf: #8db87a; --art-pink: #f4b6b0; --art-brown: #a87354; --art-gray: #b9c1c4; --art-ground: #e7e1d2; --on-prompt: #ffffff; --prompt-text: #357370; --prompt-ledge: #cfe3e1; --prompt-wash: #e7f3f2; --correct-ledge: #bfdcc6; --control-fill: rgb(255 255 255 / 60%); --art-card: #fff9ef; --font: Nunito, ui-rounded, "Avenir Next", system-ui, sans-serif; --pad: max(16px, 2.4vmin); --radius-control: 12px; --ease-press: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-spring: cubic-bezier(0.3, 1.6, 0.5, 1); } /* * Dark theme, set on by /theme.js: it follows the system setting on * desktop and stays light on touch devices. Same roles, warm charcoal paper. * Illustrations keep a light card (--art-card) so their ink outlines read. */ :root[data-theme="dark"] { --ink: #efe7da; --ivory: #1c1a17; --paper: #27241f; --muted: #a39b8e; --line: #3d372f; --correct: #5bb275; --prompt: #4a9e99; --gold: #e8b94f; --glow: #24211c; --prompt-deep: #2c5f5c; --correct-deep: #2f6a42; --card-line: #3b352d; --card-ledge: #12110e; --panel-line: #35302a; --panel-ledge: #12110e; --track: #3a342c; --selected: #3d372f; --selected-line: #5d554a; --hold-fill: #473e31; --row-line: #302b25; --text-correct: #85d09b; --text-incorrect: #ee9f88; --correct-wash: #1f3326; --incorrect-wash: #3c251e; --backdrop: rgb(0 0 0 / 55%); --drop: rgb(0 0 0 / 35%); --on-prompt: #ffffff; --prompt-text: #72c7c1; --prompt-ledge: #1d3f3d; --prompt-wash: #1c3533; --correct-ledge: #1d3a26; --control-fill: rgb(255 255 255 / 5%); --art-card: #f6efe2; --art-cream: #3a3325; --art-ground: #2e2a23; } @keyframes aba-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } } @keyframes aba-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } } @keyframes aba-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(76 159 155 / 35%), 0 8px 0 var(--prompt-ledge); } 50% { transform: scale(1.04); box-shadow: 0 0 0 14px rgb(76 159 155 / 20%), 0 8px 0 var(--prompt-ledge); } } @keyframes aba-pop { from { opacity: 0; transform: scale(0.3) rotate(-20deg); } to { opacity: 1; transform: none; } } @keyframes aba-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes aba-slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }