/* ===== Fonts: served from frontend/fonts (variable fonts: one file per family covers every weight) ===== font-display: block = never paint a stand-in font first; the files are preloaded in each page's . */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: block; src: url('../fonts/nunito-latin.woff2') format('woff2'); } @font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: block; src: url('../fonts/baloo2-latin.woff2') format('woff2'); } /* ===== Design tokens — PLAN.md Section 5 ke colors ===== */ :root { --bg: #FBF7F0; /* page background: warm cream */ --ink: #2D2A3E; /* main text */ --muted: #6E6884; /* halka text (descriptions) */ --card: #FFFFFF; /* cards ka white */ --line: #EDE6DA; /* borders */ --brand: #6A5AE0; /* violet accent */ --brand-soft: #EFE9FB; /* violet ka pastel */ /* Sidebar palette (deep navy-violet). Change these five to restyle the whole sidebar. */ --side-bg: #26214A; --side-ink: #EDEAF7; --side-muted: #B9B3D6; --side-line: rgba(255, 255, 255, 0.12); --side-hover: rgba(255, 255, 255, 0.08); } * { box-sizing: border-box; } body { margin: 0; color: var(--ink); font-family: 'Nunito', 'Segoe UI', sans-serif; background: radial-gradient(900px 550px at 85% -10%, #E4D9FA 0%, transparent 60%), radial-gradient(800px 500px at -10% 25%, #FDDCD4 0%, transparent 55%), radial-gradient(750px 480px at 50% 115%, #CDEFE9 0%, transparent 55%), radial-gradient(650px 420px at 110% 70%, #FAEBBC 0%, transparent 55%), var(--bg); background-attachment: fixed; min-height: 100vh; } /* ===== Header bar ===== */ .topbar { display: flex; align-items: center; gap: 14px; padding: 16px 40px; background: var(--card); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 12px; } .nav { display: flex; gap: 8px; margin: 0 auto; } /* centred between brand and avatar */ .nav-link { padding: 8px 18px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: 14px; } .nav-link:hover { background: #F1EBE1; } .nav-link.active { background: var(--brand-soft); color: var(--brand); font-weight: 800; } .brand-logo { width: 38px; height: 38px; border-radius: 12px; background: var(--brand); display: flex; align-items: center; justify-content: center; } .brand-name { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: #FDE8E4; color: #E8604C; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; } /* ===== Top bar profile menu ===== */ .avatar-menu { position: relative; } /* dropdown is positioned against this box */ /* The top-bar avatar is a