/* ========================================================================== Sierra Leone Trade Portal — Seller portal national theme Activated by data-qboat="theme-SierraLeone" on . The tokens match FrontEnd/wwwroot/assets/css/sierra-leone-theme.css; keep the two in sync. ========================================================================== */ :root { --sl-flag-green: #1EB53A; --sl-flag-white: #FFFFFF; --sl-flag-blue: #0072C6; --sl-primary: #0E7A35; --sl-primary-dark: #0A5C28; --sl-primary-rgb: 14, 122, 53; --sl-primary-soft: #E3F2E7; --sl-secondary: #0072C6; --sl-secondary-dark: #005A9E; --sl-ink: #0D2436; --sl-gold: #E8B730; --sl-flag-gradient: linear-gradient(90deg, var(--sl-flag-green) 0 33.33%, var(--sl-flag-white) 33.33% 66.66%, var(--sl-flag-blue) 66.66% 100%); } [data-qboat=theme-SierraLeone] { --primary-rgb: 14, 122, 53; --primary-color: #0E7A35; --accent-color: #0072C6; --secondary-color: #0D2436; --theme-color1: #1EB53A; --theme-color2: #0E7A35; --theme-color3: #0072C6; --theme-color4: #005A9E; --theme-color5: #9FD3AE; --theme-color6: #0D2436; --primary-gradient: linear-gradient(-45deg, #0A5C28, #0E7A35 50%, #0072C6); } /* Tricolour ribbon pinned to the top of every Seller page */ .sl-flagbar { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 1100; background: var(--sl-flag-gradient); box-shadow: 0 1px 0 rgba(13, 36, 54, .12); } /* Sidebar brand block */ .sl-brand { display: flex; align-items: center; gap: 10px; padding: 4px 4px 14px; margin-bottom: 10px; border-bottom: 1px solid rgba(13, 36, 54, .1); text-decoration: none; } .sl-brand img { width: 40px; height: 40px; flex: none; } .sl-brand__text { line-height: 1.2; } .sl-brand__text small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sl-primary); } .sl-brand__text strong { display: block; font-size: 15px; color: var(--sl-ink); } /* Login / auth pages */ .sl-auth-title { color: var(--sl-ink); } .sl-auth-title small { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sl-primary); margin-bottom: .25rem; } .sl-auth-motto { margin-top: 1.25rem; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: #5A6B78; } .sl-auth-motto b { color: var(--sl-gold); padding: 0 .4rem; } /* Auth pages: centre the card vertically so spare height is shared above and below (overrides the fixed "margin: 5% auto" in Views/Shared/_AuthLayout.cshtml) */ body.qboat.auth { min-height: 100vh; align-items: center; } body.qboat.auth .page.order-2 { margin: 2rem auto; max-width: 1200px; } /* Header band scales with the window so the card always straddles it */ .qboat.auth .body-bg::after { height: 42vh; } /* -------------------------------------------------------------------------- Seller sign-in brand panel (Views/Account/_SlLoginPanel.cshtml) Full-bleed photograph of Freetown harbour with a brand-green grade. -------------------------------------------------------------------------- */ .sl-login-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 620px; padding: 24px; border-radius: 24px; text-align: left; background: #0A3E20; box-shadow: 0 30px 60px -24px rgba(6, 51, 26, .5); } /* The photo and its colour grade sit behind the content */ #login-img .sl-login-panel img.sl-login-panel__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: 28% 50%; } .sl-login-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 30, 16, .28) 0%, rgba(4, 30, 16, 0) 20%), linear-gradient(0deg, rgba(4, 34, 18, .88) 0%, rgba(4, 34, 18, .45) 24%, rgba(4, 34, 18, 0) 46%); } .sl-login-panel::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--sl-flag-gradient); } #login-img .sl-login-panel__brand img { width: 36px; height: 36px; max-width: none; margin: 0; padding: 0; border: 0; display: block; flex: none; border-radius: 10px; } .sl-login-panel__brand { align-self: flex-start; display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 7px 16px 7px 7px; border-radius: 999px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35); } .sl-login-panel__brand small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sl-primary); line-height: 1.2; } .sl-login-panel__brand strong { display: block; font-size: .98rem; line-height: 1.2; color: var(--sl-ink); } .sl-login-panel__caption { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .sl-login-panel__title { margin: 0; color: #fff; font-size: clamp(2rem, 2.8vw, 2.7rem); line-height: 1.08; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); } @media (max-width: 1199.98px) { .sl-login-panel { min-height: 380px; } } @media (max-width: 575.98px) { .sl-login-panel { min-height: 300px; padding: 16px; border-radius: 18px; } .sl-login-panel__title { font-size: 1.75rem; } }