/* ========================================================= Emoji Keyboard — Design tokens Palette: warm paper / deep ink base with an indigo accent and an amber "key press" spark. Grid cells are styled as physical keycaps — literal to the "keyboard" concept. ========================================================= */ :root { --bg: #faf9f6; --surface: #ffffff; --keycap: #f4f2ec; --keycap-hover: #ffffff; --keycap-shadow: #ded9cc; --border: #e6e2d8; --text: #1b1b23; --text-muted: #6b6a72; --accent: #5b5fef; --accent-ink: #ffffff; --spark: #f5a623; --header-bg: #fffdf9; --ring: rgba(91, 95, 239, 0.35); } html.dark { --bg: #101014; --surface: #191922; --keycap: #1f1f29; --keycap-hover: #262631; --keycap-shadow: #08080b; --border: #2b2b38; --text: #edecf2; --text-muted: #9a99a6; --accent: #7c80ff; --accent-ink: #101014; --spark: #ffb84d; --header-bg: #14141b; --ring: rgba(124, 128, 255, 0.35); } /* Prevent FOUC: html gets .dark or .light synchronously before paint via an inline script in , so this file never needs to guess. */ * { scrollbar-color: var(--border) transparent; } body { background-color: var(--bg); color: var(--text); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; transition: background-color 0.25s ease, color 0.25s ease; } .font-display { font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; } .font-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } /* ---------- Custom sleek scrollbars ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background-color: var(--accent); } .cat-scroll { scrollbar-width: thin; } .cat-scroll::-webkit-scrollbar { height: 6px; } /* ---------- Header ---------- */ .app-header { background-color: var(--header-bg); border-bottom: 1px solid var(--border); } /* ---------- Sticky typing bar ---------- */ .type-bar { background-color: var(--surface); border-bottom: 1px solid var(--border); } #composer { background: transparent; color: var(--text); caret-color: var(--accent); } #composer::placeholder { color: var(--text-muted); } /* ---------- Category pills ---------- */ .cat-pill { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--text-muted); background-color: var(--keycap); border: 1px solid var(--border); transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .cat-pill:hover { transform: translateY(-1px); color: var(--text); } .cat-pill.active { background-color: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* ========================================================= Keycaps — the signature element. Each emoji sits on a raised "key" with a solid bottom edge that reads as key-body thickness. Pressing it visually depresses the key (translateY + shadow collapse). ========================================================= */ .keycap { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 0.85rem; background-color: var(--keycap); box-shadow: 0 3px 0 var(--keycap-shadow), 0 3px 6px rgba(0, 0, 0, 0.06); border: 1px solid var(--border); font-size: clamp(1.35rem, 2.4vw, 1.9rem); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease; transform: translateY(0); -webkit-tap-highlight-color: transparent; user-select: none; } .keycap:hover { background-color: var(--keycap-hover); transform: translateY(-2px) scale(1.08); box-shadow: 0 6px 0 var(--keycap-shadow), 0 10px 16px rgba(0, 0, 0, 0.12); z-index: 2; } .keycap:focus-visible { outline: none; box-shadow: 0 3px 0 var(--keycap-shadow), 0 0 0 3px var(--ring); } .keycap:active, .keycap.pressed { transform: translateY(2px) scale(0.96); box-shadow: 0 0 0 var(--keycap-shadow), 0 2px 4px rgba(0, 0, 0, 0.1); background-color: var(--keycap-hover); } /* Twemoji images — sized to match the keycap's font-size so flags and every other emoji render identically across all platforms. */ .keycap img.twemoji-icon { width: 1em; height: 1em; vertical-align: -0.1em; pointer-events: none; } /* little spark pop on successful copy */ .keycap.pressed::after { content: ""; position: absolute; inset: -6px; border-radius: 1rem; border: 2px solid var(--spark); opacity: 0; animation: spark-pop 0.45s ease-out; pointer-events: none; } @keyframes spark-pop { 0% { opacity: 0.9; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.25); } } @media (prefers-reduced-motion: reduce) { .keycap, .keycap:hover, .keycap:active { transition: none; transform: none; } .keycap.pressed::after { animation: none; display: none; } } /* ---------- Section headings ---------- */ .section-eyebrow { color: var(--text-muted); font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.08em; } /* ---------- Toast ---------- */ #toast-root { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; pointer-events: none; } .toast { pointer-events: auto; background-color: var(--text); color: var(--bg); font-family: "Space Grotesk", ui-sans-serif, sans-serif; font-weight: 600; font-size: 0.9rem; padding: 0.65rem 1.1rem; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); display: flex; align-items: center; gap: 0.5rem; animation: toast-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards; } .toast.leaving { animation: toast-out 0.22s ease-in forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(10px) scale(0.92); } } /* ---------- Dark mode toggle ---------- */ .theme-toggle { background-color: var(--keycap); border: 1px solid var(--border); color: var(--text); transition: background-color 0.15s ease, transform 0.15s ease; } .theme-toggle:hover { transform: translateY(-1px); } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: inline-flex; } html.dark .theme-toggle .sun { display: inline-flex; } html.dark .theme-toggle .moon { display: none; } /* ---------- Buttons ---------- */ .btn-accent { background-color: var(--accent); color: var(--accent-ink); font-family: "Space Grotesk", sans-serif; font-weight: 600; transition: transform 0.12s ease, filter 0.12s ease; } .btn-accent:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn-accent:active { transform: translateY(0); } .btn-ghost { background-color: transparent; border: 1px solid var(--border); color: var(--text-muted); font-family: "Space Grotesk", sans-serif; font-weight: 600; transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease; } .btn-ghost:hover { background-color: var(--keycap); color: var(--text); transform: translateY(-1px); } /* ---------- Empty state ---------- */ .empty-state { color: var(--text-muted); } /* ---------- Cookie consent banner ---------- */ #cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; background-color: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12); padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; animation: cookie-in 0.3s ease-out both; } /* The base rule above sets display: flex with #id specificity, which beats the browser's built-in "[hidden] { display: none }" rule (an attribute selector has lower specificity than an ID). Without this override, toggling the hidden attribute in JS has no visual effect and the banner stays fixed over the footer forever. #cookie-banner[hidden] has higher specificity than #cookie-banner alone, so this correctly wins and the banner disappears. */ #cookie-banner[hidden] { display: none !important; } #cookie-banner p { color: var(--text-muted); font-size: 0.85rem; max-width: 46rem; line-height: 1.5; margin: 0; } #cookie-banner a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } @keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Fade-in for grid sections ---------- */ @keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fade-up 0.35s ease both; }