/* Tamanna shared design system — mirrors the official platform (scraped from /css/app.css + the live UI). Loaded last in so it wins over any page-level inline styles. */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap'); :root { --primary: #6827A1; /* brand purple */ --primary-dark: #401863; --success: #38c172; /* add / save green */ --success-dark: #2fa360; --danger: #e3342f; --warn: #FFBC4C; --warn-dark: #D96F32; --info: #6cb2eb; --ink: #212529; --header-grad: linear-gradient(90deg, #1aa6c7, #1f8fb5); /* teal section header */ --page-grad: linear-gradient(180deg, #bfe6f7 0%, #daf1fb 40%, #eaf7fd 100%); } /* Poppins everywhere — overrides inline Segoe UI on standalone pages */ *, *::before, *::after { font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif !important; } /* ...but Font Awesome icons MUST keep their own font (the rule above is !important, so the exception must be too), otherwise every icon renders as a tofu box. */ .fa, .fas, .fa-solid, .far, .fa-regular, .fal, .fad, .fa-duotone, .fa-solid::before, .fas::before, .far::before, .fa-regular::before, [class^="fa-"]::before, [class*=" fa-"]::before { font-family: 'Font Awesome 6 Free' !important; } .fa-solid, .fas, .fa-solid::before, .fas::before { font-weight: 900 !important; } .fa-regular, .far, .fa-regular::before, .far::before { font-weight: 400 !important; } .fab, .fa-brands, .fab::before, .fa-brands::before { font-family: 'Font Awesome 6 Brands' !important; font-weight: 400 !important; } body { color: var(--ink); } a { color: var(--primary); } a:hover { color: var(--primary-dark); } /* brand-consistent buttons (where the base classes are used) */ .btn { border-radius: 6px; } .pagebar-ctrls .cur { background: var(--primary) !important; border-color: var(--primary) !important; } .pagebar-ctrls a { color: var(--primary) !important; } /* official logo lockup */ .t-logo { display: inline-flex; align-items: center; gap: .5rem; } .t-logo img { height: 38px; width: auto; } img { max-width: 100%; height: auto; } /* ---------- Responsive: tablets and phones ---------- */ @media (max-width: 992px) { /* stack the main two-column layouts (student, admin, test, profile) */ .layout, .wrap { flex-direction: column !important; } .sidebar, .side, .sub, .nav { width: 100% !important; max-width: 100% !important; min-height: auto !important; } main, .main { padding: 1rem !important; max-width: 100% !important; } /* top navbars wrap instead of overflowing */ .topbar { flex-direction: column; align-items: flex-start; gap: .5rem; } .topbar nav { display: flex; flex-wrap: wrap; gap: .3rem .9rem; } .topbar nav a { margin-left: 0 !important; } .top, .pill { flex-wrap: wrap; gap: .4rem; } /* card header rows stack */ .row-head { flex-direction: column; align-items: stretch; gap: .6rem; } /* test page: nav grid tighter, options single column, buttons stack */ .nav { display: grid; grid-template-columns: repeat(8, 1fr) !important; } .opts { grid-template-columns: 1fr !important; } .btns { grid-template-columns: 1fr !important; } /* profile / form grids collapse to one column */ .g2, .g3, .rgrid { grid-template-columns: 1fr !important; } /* wide data tables scroll horizontally instead of breaking layout */ .card table, main table, .panel table, .submissions table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 520px) { .nav { grid-template-columns: repeat(6, 1fr) !important; } h1 { font-size: 1.3rem !important; } .card { padding: 1rem !important; } .pagebar { flex-direction: column; align-items: flex-start; gap: .5rem; } }