/* ========================================================= THEME: Base ========================================================= */ html, body { height: 100%; } body { background-color: #f8f9fa; font-family: sans-serif; margin: 0; } /* ========================================================= LAYOUT: App shell + sticky footer Use: ========================================================= */ body.eb-layout { min-height: 100vh; display: flex; flex-direction: column; } body.eb-layout #main-content { flex: 1 0 auto; } body.eb-layout footer { margin-top: auto; } .eb-flex-1 { flex: 1 0 auto; } .eb-main { flex: 1 0 auto; display: block; background: transparent; } body.page-login .eb-main, body.page-forgot-password .eb-main { display: flex; align-items: center; justify-content: center; background: #f6f7fb; } body.page-loading { pointer-events: none; cursor: wait; } li.error { color: red; font-size: 14px; margin-left: 20px; } label.error { color: red; font-size: 14px; } /* ========================================================= COMPONENT: Site Header / Navigation ========================================================= */ #supportMenuButton { font-size: 1.25em; padding: 0 8px; } .eb-nav { position: sticky; top: 0; z-index: 1000; transition: padding 0.25s ease, box-shadow 0.25s ease; } .eb-nav .container { transition: padding 0.25s ease; } .eb-nav__logo { height: 48px; width: auto; transition: height 0.25s ease; } .eb-nav.is-scrolled .eb-nav__logo { height: 32px; } .eb-nav.is-scrolled .container { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .eb-nav h6.dropdown-header { margin-top: 0; } .global-header { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .section-default, .global-header .section-default { background: transparent; } .global-header.fixed { position: fixed; } /* ========================================================= COMPONENT: Hero Section ========================================================= */ .eb-hero { position: relative; } .eb-hero__bg { min-height: 460px; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/images/backgrounds/Hero_BG-1.jpg") center/cover no-repeat; filter: saturate(1) contrast(1); } .eb-hero__content { padding-top: 65px; position: absolute; inset: 0; display: flex; align-items: center; } .eb-hero__card { max-width: 800px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } .eb-hero__title { font-size: clamp(2rem, 3vw, 3rem); font-weight: 600; margin: 0 0 0.5rem; } .eb-hero__subtitle { max-width: 58ch; margin: 0 0 1rem; font-weight: 600; } .eb-hero__logo { max-width: 220px; height: auto; } .eb-rc-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; margin-bottom: 0.75rem; background: rgba(255, 255, 255, 0.75); color: #1b1b1b; border-radius: 0.75rem; backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* ========================================================= COMPONENT: Base Card (Shared) NOTE: This is the single source of truth for .eb-card ========================================================= */ .eb-card { border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); overflow: hidden; background: #fff; } .eb-card__header { border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .eb-card__icon { font-size: 1.25rem; line-height: 1; } /* ========================================================= COMPONENT: Auth View (login) ========================================================= */ .eb-auth { position: relative; flex: 1; width: 100%; min-height: 100%; display: grid; overflow: hidden; background: #d9e5f1; } .eb-auth__bg { grid-area: 1 / 1; background: url("/images/backgrounds/Hero_BG-2.jpg") center/cover no-repeat; height: 100%; width: 100%; filter: brightness(0.7); } .eb-auth__content { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .eb-auth__card { width: 100%; max-width: 420px; border-radius: 12px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); } .eb-auth__rc-logo { max-width: 260px; height: auto; } @media (max-width: 480px) { .eb-auth__rc-logo { max-width: 220px; } } /* ========================================================= COMPONENT: Forgot Password View ========================================================= */ .eb-alert { max-width: 600px; margin: 0 auto; } .eb-forgot { position: relative; flex: 1; width: 100%; min-height: 100%; display: grid; overflow: hidden; } .eb-forgot__bg { grid-area: 1 / 1; background: url("/images/backgrounds/Hero_BG-2.jpg") center/cover no-repeat; filter: brightness(0.7); } .eb-forgot__content { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; padding: 2rem 1rem; } .eb-forgot__card { width: 100%; max-width: 520px; border-radius: 12px; background: rgba(255, 255, 255, 0.95); } .eb-forgot__rc-logo { max-width: 260px; height: auto; } @media (max-width: 480px) { .eb-forgot__rc-logo { max-width: 220px; } } .validation-box li { color: red; font-size: 14px; margin-left: 20px; } /* ========================================================= COMPONENT: System Status / Alerts Card ========================================================= */ .eb-card--alerts #alerts-title { font-weight: 700; padding-top: 8px; } .eb-alert-title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eb-card__scroll { max-height: 360px; overflow-y: auto; padding-right: 1rem; padding-top: 0; box-sizing: content-box; margin: 6px 6px 6px 0; } .eb-card__scroll::-webkit-scrollbar { width: 8px; } .eb-card__scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 999px; } .eb-card__scroll::-webkit-scrollbar-track { background: transparent; } .eb-card a.text-decoration-none:hover { text-decoration: underline !important; } /* ========================================================= COMPONENT: Announcements Card ========================================================= */ .eb-card--announce #announce-title { font-weight: 700; padding-top: 8px; } .card.eb-card--announce { margin-bottom: 0 !important; } .eb-announce-title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eb-card__scroll { max-height: 360px; overflow-y: auto; padding-right: 1rem; padding-top: 0; box-sizing: content-box; margin: 6px 6px 6px 0; } .eb-card__scroll::-webkit-scrollbar { width: 8px; } .eb-card__scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 999px; } .eb-card__scroll::-webkit-scrollbar-track { background: transparent; } .eb-card a.text-decoration-none:hover { text-decoration: underline !important; } /* ========================================================= COMPONENT: Welcome Block Card ========================================================= */ .eb-card--welcome { position: relative; min-height: 420px; border: 2px solid #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); } .eb-welcome__bg { position: absolute; inset: 0; background: url("/images/backgrounds/WorkingPair.png") no-repeat; background-size: cover; background-position: right center; z-index: 0; } .eb-welcome__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.55) 100%); } .eb-card--welcome .row { position: relative; z-index: 1; height: 100%; } .eb-card--welcome .card-body { padding: 0 !important; height: 100%; } .eb-welcome__content-col { display: flex; height: 100%; } .eb-welcome__content { display: flex; align-items: stretch; justify-content: flex-end; width: 100%; height: 100%; } .eb-card--welcome #welcome-title { font-weight: 700; color: #fff; font-size: 2rem; text-align: center; } .eb-welcome__panel { width: 100%; max-width: none; height: 100%; background: rgba(44, 44, 79, 0.7); border-left: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15); padding: 3rem 2.5rem; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 991.98px) { .eb-card--welcome { min-height: 380px; } } @media (max-width: 767.98px) { .eb-card--welcome { min-height: 340px; } .eb-welcome__panel { border-left: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); padding: 2rem; } .eb-welcome__bg::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.10) 55%, rgba(0, 0, 0, 0) 100%); } }