/* * JumblED shared theme. Loaded last in on every page, so it sets the common palette, * type and focus styles that the per-page stylesheets build on. Page-specific layout stays in * each page's own stylesheet. */ :root { /* Brand teal and its tints/shades */ --jb-teal: #649A9F; --jb-teal-dark: #08727C; --jb-teal-deep: #3D7A80; --jb-teal-tint: #EEF6F6; /* Neutrals */ --jb-ink: #282828; --jb-muted: #6B6B6B; --jb-border: #DCDCDC; --jb-surface: #FFFFFF; --jb-surface-alt: #F7F7F7; --jb-radius: 8px; --jb-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } body { font-family: var(--jb-font); color: var(--jb-ink); -webkit-font-smoothing: antialiased; } /* Links that used the old light blue now match the brand teal */ a { color: var(--jb-teal-dark); } a:hover { color: var(--jb-teal-deep); } /* * Many stylesheets remove focus outlines (.btn:focus { outline: none }). Keep them off for mouse * clicks but show a clear ring for keyboard users. */ html .btn:focus-visible, html a:focus-visible, html [role="button"]:focus-visible, html input:focus-visible, html select:focus-visible, html textarea:focus-visible { outline: 2px solid var(--jb-teal-dark); outline-offset: 2px; box-shadow: none; } /* Bootstrap Icons sit on the text baseline by default, which makes icon + label pairs look uneven */ .bi::before { vertical-align: -0.125em; } /* * Shared page components (Landing, My Question Banks), matching the My Classes layout: * light gray page, white bordered cards, uppercase section labels, solid and outline teal buttons. */ .jb-page { background: #F4F7F7; min-height: calc(100vh - 58px); } .jb-card { background: #FFFFFF; border: 1px solid #E3E8E8; border-radius: 12px; } .jb-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; } .jb-page-title { color: #1F2933; font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin: 0; } .jb-page-subtitle { color: #6B6B6B; font-size: .9rem; margin: .35rem 0 0; } .jb-section-label { color: #6B6B6B; font-size: .75rem; font-weight: 700; letter-spacing: .06em; margin: 2rem 0 .75rem; text-transform: uppercase; } .jb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; background: #FFFFFF; border: 1.5px solid var(--jb-teal-dark); border-radius: 8px; color: var(--jb-teal-dark); cursor: pointer; font-size: .9rem; font-weight: 700; padding: .5rem 1rem; text-decoration: none; transition: background .12s, border-color .12s, color .12s; } .jb-btn:hover { background: var(--jb-teal-tint); color: var(--jb-teal-dark); } .jb-btn-primary { background: var(--jb-teal-dark); color: #FFFFFF; } .jb-btn-primary:hover { background: #06626B; border-color: #06626B; color: #FFFFFF; } @media (max-width: 767.98px) { .jb-page-header { padding: 1rem; } .jb-page-title { font-size: 1.3rem; } } /* * Navbar (views/partials/navbar.ejs and student-navbar.ejs). Selectors include the navbar's ids so * they outrank older inline #navbar-brand / #user-nav rules still in some page heads. */ .jb-navbar { background: #FFFFFF; border-bottom: 1px solid #E3E8E8; font-family: var(--jb-font); padding: .5rem 1.5rem; position: sticky; top: 0; z-index: 1030; } .jb-navbar #navbar-brand { display: inline-flex; align-items: center; gap: .6rem; color: #1F2933; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin: 0 1.5rem 0 0; padding: .25rem 0; text-decoration: none; } .jb-navbar #logo { margin: 0; } .jb-navbar #bold { color: var(--jb-teal-dark); } /* No display here: Bootstrap hides the toggler at desktop widths (navbar-expand-lg) */ .jb-navbar .navbar-toggler { align-items: center; border: 1px solid #DCE3E3; border-radius: 8px; color: #1F2933; font-size: 1.5rem; justify-content: center; height: 2.5rem; margin: 0; padding: 0; width: 2.75rem; } .jb-navbar .navbar-toggler:focus { box-shadow: none; } .jb-navbar .navbar-collapse { align-items: center; gap: 1rem; justify-content: flex-end; } .jb-navbar .nav-links { align-items: center; gap: .25rem; margin: 0; } .jb-navbar .link { align-items: center; border-radius: 8px; color: #4E4E4E; display: inline-flex; font-size: .92rem; font-weight: 600; gap: .5rem; padding: .5rem .8rem; text-decoration: none; transition: background .12s, color .12s; white-space: nowrap; } .jb-navbar .link .bi { font-size: 1.05rem; line-height: 1; } .jb-navbar .link .bi::before { vertical-align: 0; } .jb-navbar .link:hover { background: var(--jb-teal-tint); color: var(--jb-teal-dark); } .jb-navbar .link.active { background: var(--jb-teal-tint); color: var(--jb-teal-dark); } .jb-navbar .nav-user { border: none; margin: 0; } .jb-navbar .user-button { align-items: center; background: #FFFFFF; border: 1px solid #E3E8E8; border-radius: 999px; color: #1F2933; display: inline-flex; gap: .55rem; padding: .25rem .75rem .25rem .25rem; transition: border-color .12s, background .12s; } .jb-navbar .user-button:hover, .jb-navbar .user-button[aria-expanded="true"] { background: #FAFCFC; border-color: #CFDCDD; } .jb-navbar .user-avatar { align-items: center; background: var(--jb-teal-dark); border-radius: 50%; color: #FFFFFF; display: inline-flex; font-size: .75rem; font-weight: 700; height: 2rem; justify-content: center; letter-spacing: .02em; text-transform: uppercase; width: 2rem; } .jb-navbar #user-nav { color: #1F2933; font-size: .9rem; font-weight: 600; white-space: nowrap; } .jb-navbar .user-button .bi-chevron-down { color: #6B6B6B; font-size: .75rem; } .jb-navbar .dropdown-menu { border: 1px solid #E3E8E8; border-radius: 12px; box-shadow: 0 10px 30px rgba(31, 41, 51, .12); margin-top: .5rem; min-width: 15rem; padding: .4rem; } .jb-navbar .dropdown-header { color: #6B6B6B; font-size: .78rem; overflow: hidden; padding: .4rem .75rem .5rem; text-overflow: ellipsis; } .jb-navbar .dropdown-item { align-items: center; border-radius: 8px; color: #282828; display: flex; font-size: .9rem; gap: .6rem; padding: .5rem .75rem; } .jb-navbar .dropdown-item .bi { color: #6B6B6B; font-size: 1rem; } .jb-navbar .dropdown-item:hover { background: var(--jb-teal-tint); color: var(--jb-teal-dark); } .jb-navbar .dropdown-item:hover .bi { color: var(--jb-teal-dark); } .jb-navbar .dropdown-divider { margin: .35rem 0; } .jb-navbar .sign-out, .jb-navbar .sign-out .bi { color: #B3261E; } .jb-navbar .sign-out:hover, .jb-navbar .sign-out:hover .bi { background: #FBE9E7; color: #B3261E; } .jb-navbar .nav-actions { display: flex; gap: .5rem; } /* Phones and tablets: collapsed menu as a stacked list with the account section last */ @media (max-width: 991.98px) { .jb-navbar { flex-wrap: wrap; padding: .5rem 1rem; } .jb-navbar .navbar-toggler { display: inline-flex; } .jb-navbar .navbar-collapse { align-items: stretch; flex-direction: column; gap: .5rem; padding: .75rem 0 .25rem; } .jb-navbar .nav-links { align-items: stretch; gap: .15rem; } .jb-navbar .link { padding: .7rem .75rem; width: 100%; } .jb-navbar .nav-user { border-top: 1px solid #E3E8E8; padding-top: .5rem; } .jb-navbar .user-button { border: none; border-radius: 8px; padding: .4rem .5rem; width: 100%; } .jb-navbar .user-button .bi-chevron-down { margin-left: auto; } .jb-navbar .dropdown-menu { border: none; box-shadow: none; margin-top: 0; position: static !important; transform: none !important; } .jb-navbar .nav-actions .jb-btn { flex: 1; } } /* Tables never force the page to scroll sideways on phones */ @media (max-width: 767.98px) { .table-responsive-sm, .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } }