/* ========================================================= 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; } /* ========================================================= MODERN VISUAL LAYER Ambient gradient blobs, glass header, hero, gradient buttons/pills, and richer card hovers — layered on top of the design tokens above without touching the core keycap mechanics. ========================================================= */ :root { --grad-1: #7c5cff; --grad-2: #ff5cb3; --grad-3: #ffb347; --grad-4: #34d0ba; } /* Ambient background blobs — fixed, decorative, never intercept clicks */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38rem 30rem at 8% -6%, color-mix(in srgb, var(--grad-1) 22%, transparent), transparent 60%), radial-gradient(34rem 28rem at 108% 8%, color-mix(in srgb, var(--grad-2) 18%, transparent), transparent 60%), radial-gradient(30rem 26rem at 50% 118%, color-mix(in srgb, var(--grad-3) 14%, transparent), transparent 60%); opacity: 0.9; } html.dark body::before { opacity: 0.55; } @media (prefers-reduced-motion: no-preference) { body::before { animation: drift-blobs 26s ease-in-out infinite alternate; } } @keyframes drift-blobs { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.04); } } /* Glass header — keeps content legible on scroll while feeling lighter */ .app-header { background-color: color-mix(in srgb, var(--header-bg) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); } /* Gradient wordmark accent under the logo */ .brand-mark { background: linear-gradient(120deg, var(--grad-1), var(--grad-2) 55%, var(--grad-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Hero ---------- */ .hero-gradient-text { background: linear-gradient(120deg, var(--grad-1) 0%, var(--grad-2) 45%, var(--grad-3) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-badge { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--accent); font-weight: 600; } .hero-float { position: absolute; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12)); animation: hero-bob 5s ease-in-out infinite; pointer-events: none; user-select: none; } .hero-float.d2 { animation-delay: 0.6s; } .hero-float.d3 { animation-delay: 1.2s; } .hero-float.d4 { animation-delay: 1.8s; } @keyframes hero-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(6deg); } } @media (prefers-reduced-motion: reduce) { .hero-float { animation: none; } } .stat-chip { background-color: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); } .stat-chip strong { font-family: "Space Grotesk", sans-serif; } /* ---------- Gradient buttons (upgrade of .btn-accent) ---------- */ .btn-accent { background-image: linear-gradient(120deg, var(--grad-1), var(--grad-2) 100%); background-color: var(--accent); color: #fff; box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--grad-2) 60%, transparent); } .btn-accent:hover { filter: brightness(1.06) saturate(1.05); box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--grad-2) 70%, transparent); } /* ---------- Category pill active state gets the gradient too ---------- */ .cat-pill.active { background-image: linear-gradient(120deg, var(--grad-1), var(--grad-2) 100%); background-color: var(--accent); border-color: transparent; color: #fff; } /* ---------- Blog / content cards ---------- */ .blog-card, .content-card { background-color: var(--surface); border: 1px solid var(--border); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .blog-card:hover, .content-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.28); } /* ---------- Section divider glow ---------- */ .section-glow { position: relative; } .section-glow::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent); }