/* ============================================================================ * Malak Prototype — custom styles * Tailwind (via CDN) does the heavy lifting; this file adds the bits Tailwind * can't: the Montserrat font, the "hint" annotation system, avatars and a few * animations — all mirroring the real malak-web look (blue #1F5FDD + amber). * ==========================================================================*/ :root { --malak-blue: #1f5fdd; --malak-amber: #fbae46; --harness-h: 52px; } * { font-family: "Montserrat", system-ui, sans-serif; } body { margin: 0; background: #f9fafb; color: #111827; } /* ─── Initials avatars (offline replacement for profile photos) ─────────── */ .avatar { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; flex-shrink: 0; line-height: 1; letter-spacing: 0.5px; } /* ─── Prototype harness bar (NOT part of the real app) ──────────────────── */ #harness { height: var(--harness-h); } /* App body offset so fixed harness doesn't cover content */ #app { min-height: calc(100vh - var(--harness-h)); } /* Sidebar / topbar made sticky (the real app uses fixed; sticky plays nicer under the prototype harness) */ .sticky-side { position: sticky; top: var(--harness-h); height: calc(100vh - var(--harness-h)); } .sticky-top { position: sticky; top: var(--harness-h); z-index: 20; } /* ─── HINT SYSTEM ─────────────────────────────────────────────────────── Every annotated region carries .hint-region + an info badge. When the has .hints-on, regions get a dashed outline and the badges appear. Hovering a badge reveals a tooltip explaining what that part does. */ .hint-badge { display: none; position: absolute; top: -10px; left: -10px; width: 22px; height: 22px; border-radius: 9999px; background: var(--malak-amber); color: #3b2300; font-size: 12px; font-weight: 800; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); cursor: help; z-index: 30; } .hint-badge::before { content: "i"; font-style: italic; } body.hints-on .hint-badge { display: inline-flex; } body.hints-on .hint-region { outline: 1.5px dashed rgba(31, 95, 221, 0.45); outline-offset: 3px; border-radius: 12px; } /* Tooltip bubble */ .hint-badge .hint-tip { display: none; position: absolute; top: 26px; left: 0; width: 240px; background: #0f172a; color: #f8fafc; font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: normal; text-align: left; padding: 10px 12px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); z-index: 40; } .hint-badge:hover .hint-tip { display: block; } .hint-badge .hint-tip::before { content: ""; position: absolute; top: -5px; left: 8px; width: 10px; height: 10px; background: #0f172a; transform: rotate(45deg); } /* Screen-level explainer note (shown at top of each app screen when hints on) */ .screen-note { display: none; align-items: flex-start; gap: 10px; background: #eff6ff; border: 1px dashed #93c5fd; color: #1e3a8a; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; margin-bottom: 18px; } body.hints-on .screen-note { display: flex; } /* ─── Misc animations / helpers ─────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 0.35s ease both; } @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); } 70% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .pulse-ring { animation: pulseRing 1.8s infinite; } /* Thin scrollbars to match the app's tidy look */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Toast */ #toast { position: fixed; top: calc(var(--harness-h) + 16px); right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .toast { background: #111827; color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 500; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); animation: fadeUp 0.25s ease both; max-width: 320px; }