/* ==========================================================================
BetPlus Affiliates — sign-in and the partner portal
--------------------------------------------------------------------------
This file is a deliberate copy of the reference portal's own theme
(mostplayipl.club/page/affiliate), not of the BetPlus player site. A partner
who already works one of these should not have to relearn anything, so the
palette, the spacing scale and the component shapes are the reference's,
read off its stylesheet rather than eyeballed:
slate #465064 header, sidebar, primary button, table rule
teal #488286 secondary / links
page #e7ebee content behind the cards
card #fff radius .25rem, shadow 0 .25rem .25rem rgba(0,0,0,.1)
text #343434 borders #ddd, table head #e5e7e9 on #d3d5da
required #cc2936 verified #5fad56
THE ONE TRICK WORTH KNOWING
The reference writes every desktop value in `rem` and then repeats all 250
of its rules inside a portrait media query with each value converted to
`vw` — 1rem becomes 3.8647342995vw, which is 16/414: sixteen pixels at a
414px-wide phone. So its whole layout scales with the screen instead of
reflowing. The same result is one rule here: author in `rem`, and move the
root font-size to that vw figure on a phone. Every size below therefore
scales exactly the way the reference's does, and there is only one number
to change if that ever needs tuning.
The marketing site (landing, terms, FAQ) is a different product with a
different audience and keeps BetPlus's own dark-blue-and-gold theme — see
affiliate.css. The two files never meet.
========================================================================== */
/* --------------------------------------------------------------------------
Root scale
-------------------------------------------------------------------------- */
html {
font-size: 16px;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
/* Portrait phone: 1rem = 16px at 414px wide, and proportional either side of
it. The reference gates this on `hover:none` as well; we do not, so a narrow
desktop window shows exactly what a phone shows and can be reviewed there. */
@media screen and (max-aspect-ratio: 13/9) and (max-width: 767px) and (orientation: portrait) {
html { font-size: 3.8647342995vw; }
}
*, *::before, *::after { box-sizing: border-box; }
body {
width: 100%;
margin: 0;
color: #343434;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'Microsoft YaHei',
'WenQuanYi Micro Hei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
font-size: 1rem;
line-height: 1.25rem;
background: #e7ebee;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { margin: 0; font-size: 1rem; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
table { width: 100%; border-collapse: collapse; }
button {
margin: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
line-height: inherit;
cursor: pointer;
}
/* A partner filling in a KYC form with a keyboard should never have to guess
which field they are in. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
outline: 2px solid #488286;
outline-offset: 1px;
}
.align-center { text-align: center; }
.align-right { text-align: right; }
.float-left { float: left; }
.float-right { float: right; }
.bold { font-weight: 700; }
.text-nowrap { white-space: nowrap; }
.hidden { display: none !important; }
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.btn-primary, .btn-secondary, .btn-light,
.btn-outline-secondary, .btn-outline-white, .btn-outline-danger {
display: inline-block;
min-height: 2rem;
min-width: fit-content;
padding: .375rem 1rem;
border: 1px solid transparent;
border-radius: .25rem;
font-size: .875rem;
font-weight: 700;
line-height: 1.25rem;
text-align: center;
vertical-align: middle;
user-select: none;
transition: all .15s ease-in-out;
}
.btn-primary { background-color: #465064; border-color: #465064; color: #fff; }
.btn-primary:hover { background-color: #353d4c; border-color: #2f3643; color: #fff; }
.btn-primary:active { background-color: #2f3643; border-color: #292e3a; }
.btn-secondary { background-color: #488286; border-color: #488286; color: #fff; }
.btn-secondary:hover { background-color: #3a686b; border-color: #345f62; color: #fff; }
.btn-light { background-color: #ccc; border-color: #ccc; color: #212121; }
.btn-light:hover { background-color: #b8b8b8; border-color: #b0b0b0; color: #212121; }
.btn-outline-secondary { border-color: #488286; color: #488286; }
.btn-outline-secondary:hover { background-color: #488286; border-color: #488286; color: #fff; }
.btn-outline-danger { border-color: #cc2936; color: #cc2936; }
.btn-outline-danger:hover { background-color: #cc2936; border-color: #cc2936; color: #fff; }
.btn-outline-white { border-color: #fff; color: #fff; }
.btn-outline-white:hover { background-color: #fff; border-color: #fff; color: #465064; }
.btn-primary:disabled, .btn-secondary:disabled, .btn-light:disabled,
.btn-outline-secondary:disabled, .btn-outline-white:disabled,
.btn-primary.disabled { opacity: .6; pointer-events: none; }
/* Square icon buttons. `.btn-ic` is the light-on-dark one in the header;
`.btn-ic-grey` is the collapse chevron on a section head. */
.btn-ic, .btn-ic-grey {
display: inline-flex;
flex: 0 0 2rem;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
min-height: 2rem;
padding: 0;
border: 1px solid transparent;
border-radius: .25rem;
transition: all .15s ease-in-out;
}
/* `.btn-ic` is a shape and `.btn-outline-white` is a colour, so the shape must
not reset the colour's border — the sign-out button is both. */
.btn-ic.btn-outline-white { border-color: #fff; }
.btn-ic-grey .ic-down { width: 1.25rem; height: 1.25rem; }
/* The chevron starts pointing up because a section starts open. */
.btn-ic-grey.dropdown-toggle .ic-down { transform: rotate(180deg); transition: transform .2s ease; }
.btn-ic-grey.dropdown-toggle.collapsed .ic-down { transform: rotate(0deg); }
.btn-group { display: inline-flex; align-items: center; }
.btn-group > * + * { margin-left: .25rem; }
/* --------------------------------------------------------------------------
Icons — masked so one file serves every colour it is used in
-------------------------------------------------------------------------- */
.ic-link, .ic-copy {
display: block;
width: 1.5rem;
height: 1.5rem;
background-color: #fff;
-webkit-mask: url(../images/affiliate/icon-copy-w.svg) no-repeat center / 50%;
mask: url(../images/affiliate/icon-copy-w.svg) no-repeat center / 50%;
}
.ic-down {
display: inline-block;
width: 1rem;
height: 1rem;
background: no-repeat center / contain
url('data:image/svg+xml,');
}
.sidenav .ic-down, .menu-link .ic-down {
background-image: url('data:image/svg+xml,');
}
.ic-menu {
display: inline-block;
width: 1rem;
height: 1rem;
background: no-repeat center / contain
url('data:image/svg+xml,');
}
.ic-logout {
display: inline-block;
width: 1rem;
height: 1rem;
background: no-repeat center / contain
url('data:image/svg+xml,');
}
.btn-ic .ic-logout, .btn-ic .ic-menu { width: 70%; height: 70%; }
/* Sidebar glyphs, one per menu item, drawn white to sit on the slate. */
.ic-home, .ic-user-outline, .ic-wallet, .ic-multiple, .ic-report {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
margin-right: .5rem;
background: no-repeat center / contain;
flex: 0 0 auto;
}
.ic-home {
background-image: url('data:image/svg+xml,');
}
.ic-user-outline {
background-image: url('data:image/svg+xml,');
}
.ic-wallet {
background-image: url('data:image/svg+xml,');
}
.ic-multiple {
background-image: url('data:image/svg+xml,');
}
.ic-report {
background-image: url('data:image/svg+xml,');
}
/* --------------------------------------------------------------------------
Header — the two tracking links, the balance, the way out
-------------------------------------------------------------------------- */
.header {
display: flex;
position: fixed;
z-index: 2010;
top: 0;
right: 0;
left: 0;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
width: 100%;
height: 3rem;
font-size: .875rem;
background: #465064;
}
.header::after {
content: '';
display: block;
position: absolute;
bottom: -.625rem;
width: 100%;
height: .625rem;
background-image: linear-gradient(0deg, rgba(10, 16, 13, 0) 0%, #0a100d 100%);
opacity: .2;
}
/* Desktop: label, a readonly field holding the URL, a copy button. */
.referral-code {
display: flex;
align-items: center;
justify-content: center;
margin: 0 1rem 0 .75rem;
color: #fff;
}
.referral-code label {
margin-right: .75rem;
color: rgba(255, 255, 255, .6);
white-space: nowrap;
}
.referral-code .code-copy,
.referral-code-mobile .code-copy {
display: flex;
position: relative;
align-items: center;
justify-content: flex-start;
margin-bottom: 0;
}
.referral-code .code-copy [type=text] {
width: 18.75rem;
height: 2rem;
min-height: 2rem;
padding: 0 .25rem 0 2rem;
border: 0;
border-radius: .25rem 0 0 .25rem;
background: rgba(255, 255, 255, .1);
color: #fff;
font-size: .875rem;
font-family: inherit;
}
.referral-code .code-copy .ic-link {
position: absolute;
left: 0;
width: 2rem;
height: 2rem;
background-color: #fff;
-webkit-mask: url(../images/affiliate/icon-link.svg) no-repeat center / 40%;
mask: url(../images/affiliate/icon-link.svg) no-repeat center / 40%;
pointer-events: none;
}
.referral-code .btn-copy {
position: relative;
width: 2rem;
height: 2rem;
border-radius: 0 .25rem .25rem 0;
background-color: rgba(255, 255, 255, .4);
transition: .3s;
}
.referral-code .btn-copy::before {
content: '';
display: block;
width: 2rem;
height: 2rem;
background-color: #fff;
-webkit-mask: url(../images/affiliate/icon-copy-w.svg) no-repeat center / 50%;
mask: url(../images/affiliate/icon-copy-w.svg) no-repeat center / 50%;
}
.referral-code .btn-copy:hover { background-color: #fff; }
.referral-code .btn-copy:hover::before { background-color: #212121; }
/* "Copied" — a tooltip that slides out to the right and fades back. */
.referral-code .tips-txt {
display: none;
position: absolute;
z-index: 2;
top: 5%;
right: -24%;
padding: .25rem .5rem;
border-radius: .25rem;
background-color: #222832;
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .1);
color: #fff;
line-height: 1.5;
white-space: nowrap;
}
.referral-code .tips-txt::before {
content: '';
position: absolute;
top: 50%;
left: -10%;
width: 0;
height: 0;
transform: translate(-50%, -50%);
border-width: .5rem;
border-style: solid;
border-color: transparent #222832 transparent transparent;
}
.referral-code .tips-txt.show { display: block !important; animation: tips-txt-show .2s linear forwards; }
.referral-code .tips-txt.hide { display: block !important; animation: tips-txt-hide .2s linear forwards; }
@keyframes tips-txt-show { 0% { right: -15%; opacity: 0; } to { right: -24%; opacity: 1; } }
@keyframes tips-txt-hide { 0% { opacity: 1; } to { opacity: 0; } }
/* Phone: a chip you tap anywhere on. The label slides down out of the way and
"Copied" drops in from above, then both slide back — the same two-keyframe
pair the reference uses, so the timing reads identically. */
/* .6162rem is the reference's own chip type size — it writes it inline as
2.381643vw, which is the same figure once the root scale is applied. It has
to be this small: "Default Player Sign-up Link" is 27 characters and it has
to sit on two lines inside a 30px-tall chip. */
.referral-code-mobile { margin-left: .25rem; font-size: .6162rem; }
.referral-code-mobile .code-copy {
overflow: hidden;
border-radius: .25rem;
background: rgba(255, 255, 255, .2);
}
.referral-code-mobile .code-copy button {
display: inline-block;
width: 6.5625rem;
height: 1.875rem;
min-height: 0;
padding: 0;
border: 0;
color: #fff;
font-weight: 400;
text-align: center;
line-height: 1.1;
}
.referral-code-mobile .code-copy button.btn-copy {
display: flex;
align-items: center;
margin-bottom: 0;
}
.referral-code-mobile .code-copy button.btn-copy .ic-link {
flex: 0 0 auto;
width: 1.5rem;
height: 1.5rem;
background: #fff;
-webkit-mask: url(../images/affiliate/icon-copy-w.svg) no-repeat center / 50%;
mask: url(../images/affiliate/icon-copy-w.svg) no-repeat center / 50%;
}
.referral-code-mobile .code-copy button.btn-copy > span:last-child { flex: 1; }
.referral-code-mobile .code-copy button.btn-copy.hide-slide {
animation: hide-slide 2s cubic-bezier(1, -.5, 0, 1.5) forwards;
}
.referral-code-mobile .code-copy button.btn-copied {
position: absolute;
top: -2.25rem;
left: 0;
width: auto;
height: 100%;
padding: 0 1.625rem;
border-radius: .25rem;
background: #4d576a;
}
.referral-code-mobile .code-copy button.show {
animation: slide 2s cubic-bezier(1, -.5, 0, 1) forwards;
color: #f3f6f9;
}
@keyframes hide-slide { 0%, 12%, to { transform: translateY(0); } 25%, 37%, 87% { transform: translateY(36px); } }
@keyframes slide { 0%, 12%, to { top: -2.5rem; } 25%, 37%, 87% { top: 0; } }
/* Balance and sign-out. */
.topnav {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0 1rem 0 .75rem;
}
.topnav-item { display: flex; position: relative; align-items: center; height: 100%; }
.topnav-item:not(:last-of-type) { margin-right: .75rem; }
.user-info {
display: flex;
position: relative;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
width: 10rem;
color: #fff;
text-align: right;
}
.user-info:hover { color: #ebebeb; }
.user-info .money { flex: 0 0 auto; margin: .125rem 0 .125rem auto; font-size: .75rem; }
/* --------------------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------- */
.container-flex { display: flex; width: 100%; min-height: 100vh; padding-top: 3rem; }
.sidenav {
flex: 0 0 15rem;
min-height: calc(100vh - 3rem);
background: rgba(70, 80, 100, .8);
color: #fff;
transition: all .1s ease-in-out;
}
.sidenav-brand {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 1rem;
background: rgba(70, 80, 100, .6);
color: #fff;
}
.sidenav-brand .text { font-weight: 700; }
.btn-sidenav {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
background-color: rgba(70, 80, 100, .8);
}
.btn-sidenav .ic-menu { width: 1.5rem; height: 1.5rem; margin-right: 0; }
.menu-item { display: block; width: 100%; }
.menu-link {
display: flex;
align-items: center;
width: 100%;
min-height: 3.25rem;
padding-left: 1.5rem;
color: #fff;
text-align: left;
}
.menu-link.active, .menu-link:hover { background: rgba(70, 80, 100, .6); color: #fff; }
/* The chevron on a group, and the half-turn it makes when the group opens. */
.menu-link.dropdown-toggle { position: relative; padding-right: 2.5rem; }
.menu-link.dropdown-toggle::after {
content: '';
position: absolute;
top: 50%;
right: 1rem;
width: 1.25rem;
height: 1.25rem;
transform: translateY(-50%);
transition: transform .2s ease;
background: no-repeat center / contain
url('data:image/svg+xml,');
}
.menu-link.dropdown-toggle.active::after { transform: translateY(-50%) rotate(180deg); }
.submenu { display: none; padding: .5rem 0; background: #fff; }
.submenu.open { display: block; }
.submenu-item { display: block; }
.submenu-link {
display: block;
width: 100%;
padding: .75rem 2.5rem;
color: #666;
text-align: left;
}
.submenu-link:hover { color: #3e4d6d; }
.submenu-link.active { color: #3e4d6d; font-weight: 700; }
/* --------------------------------------------------------------------------
Content well
-------------------------------------------------------------------------- */
.main { width: 100%; min-height: calc(100vh - 3rem); overflow-x: hidden; background: #e7ebee; }
.main-inner { padding: 1rem 1rem 0; }
.page-foot {
padding: 1.5rem 1rem;
color: #747c8b;
font-size: .875rem;
text-align: center;
}
/* --------------------------------------------------------------------------
Sections — the white card everything lives in
-------------------------------------------------------------------------- */
.section {
margin: 0 auto 1rem;
border-radius: .25rem;
background: #fff;
box-shadow: 0 .25rem .25rem 0 rgba(0, 0, 0, .1);
}
.section-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: .75rem 1rem;
border-bottom: .0625rem solid #ddd;
}
.section-head h2, .section-head h1 { display: flex; align-items: center; font-size: 1.25rem; }
.section-head .title { margin: 0; }
.section-body { padding: 1.5rem 1rem; }
.section-body::after, .section-foot::after { content: ''; display: block; clear: both; }
.section-body.is-flush { padding: 0; }
.section-foot { padding: .75rem 1rem; border-top: .0625rem solid #ddd; }
.section-foot > * + * { margin-left: .5rem; }
.section.collapsed .section-body, .section.collapsed .section-foot { display: none; }
/* The title's short slate bar. It is the one piece of decoration in the whole
portal and it is what makes a stack of white cards readable. */
.title {
display: flex;
align-items: center;
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 700;
}
.title::before {
content: '';
width: .375rem;
height: 1.5rem;
margin: .25rem .5rem;
border-radius: .25rem;
background: #465064;
flex: 0 0 auto;
}
.main-inner .title { margin-left: .25rem; }
/* --------------------------------------------------------------------------
Columns
-------------------------------------------------------------------------- */
.col-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.col-wrap:not(:last-of-type) { margin-bottom: 1rem; }
.col-2, .col-3 { position: relative; margin: 0; }
.col-2 { flex: 0 0 calc(50% - .5%); max-width: calc(50% - .5%); }
.col-3 { flex: 0 0 calc(33% - .5%); max-width: calc(33% - .5%); }
/* The headline panels. Each takes a different tint and a slate strip on top,
in the reference's own order: teal, green, mauve, amber. */
.panel-group .section {
position: relative;
overflow: hidden;
border-radius: 0 0 .25rem .25rem;
box-shadow: none;
}
.panel-group .section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: rgba(70, 80, 100, .5);
}
.panel-group .section:nth-child(1) { background-color: rgba(72, 130, 134, .2); }
.panel-group .section:nth-child(2) { background-color: rgba(95, 173, 86, .2); }
.panel-group .section:nth-child(3) { background-color: rgba(156, 122, 151, .2); }
.panel-group .section:nth-child(4) { background-color: rgba(222, 166, 0, .2); }
/* A second row of headline panels takes the other two tints, so four panels
read as four rather than as two pairs. */
.panel-group.is-second .section:nth-child(1) { background-color: rgba(156, 122, 151, .2); }
.panel-group.is-second .section:nth-child(2) { background-color: rgba(222, 166, 0, .2); }
.panel-group .section-body { padding: 1rem; }
.panel-group h4 { font-size: 1rem; }
.panel-group .float-right { color: #747c8b; }
.panel-group .form-group { padding: .25rem .375rem; }
.panel-group .number {
flex: 2;
margin-left: .9375rem;
color: #465064;
font-size: 1.875rem;
font-weight: 300;
letter-spacing: -1px;
line-height: .8;
text-align: right;
}
/* --------------------------------------------------------------------------
Tables
-------------------------------------------------------------------------- */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; font-size: .875rem; }
.table thead th { padding: .5rem; vertical-align: middle; font-weight: 700; }
.table tbody tr { border-bottom: .0625rem solid #ddd; }
.table td { padding: .5rem; text-align: center; }
.table th { text-align: center; }
.table a { font-style: italic; font-weight: 700; text-decoration: underline; transition: .3s; }
.table a:hover { color: #488286; }
.thead-light th { background: #e5e7e9; border-bottom: .0625rem solid #d3d5da; color: #343434; }
.thead-light th:not(:last-of-type) { border-right: .0625rem solid #d3d5da; }
.thead-light tr:first-of-type { border-top: .125rem solid #465064; }
/* The reports' own head: white on slate, the way the reference's data tables
draw theirs. */
.thead-dark th { background: #465064; border-bottom: 0; color: #fff; }
.thead-dark th:not(:last-of-type) { border-right: .0625rem solid rgba(255, 255, 255, .15); }
.table-striped tbody tr:nth-child(even) { background: #efefef; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .neg { color: #cc2936; }
.table .pos { color: #3f8f3a; }
/* Empty state — the folder outline the reference draws when a report has
nothing in it. */
.no-records { padding: 2.5rem 1rem; color: #747c8b; text-align: center; }
.no-records::before {
content: '';
display: block;
width: 4.5rem;
height: 4.5rem;
margin: 0 auto .75rem;
background: no-repeat center / contain
url('data:image/svg+xml,');
}
/* --------------------------------------------------------------------------
Forms
-------------------------------------------------------------------------- */
.form-group { display: flex; flex: 0 0 100%; flex-wrap: wrap; padding: .75rem .5rem; position: relative; }
.form-group.form-column { flex-direction: column; }
.label {
display: flex;
width: 100%;
padding-top: .375rem;
font-size: .875rem;
font-weight: 700;
word-break: break-word;
}
.form-group.form-column .label { justify-content: flex-start; padding: 0; margin-bottom: .3125rem; }
.label > abbr[title] { margin-left: .125rem; text-decoration: none; cursor: help; }
.label > abbr[title=Required] { color: #cc2936; cursor: default; }
.form-control {
width: 100%;
min-width: 5rem;
height: 2rem;
min-height: 2rem;
padding: 0 .5rem;
border: 1px solid #ccc;
border-radius: .25rem;
background: #fff;
color: #343434;
font-family: inherit;
font-size: .875rem;
line-height: 2rem;
}
textarea.form-control { height: auto; min-height: 5rem; padding: .5rem; line-height: 1.4; }
.form-control:focus { border-color: #488286; outline: 0; }
.form-control:disabled, .form-control[readonly] { background-color: #ddd; cursor: not-allowed; }
select.form-control { cursor: pointer; }
.form-group.form-column input[type=date] { cursor: pointer; }
/* The value a field shows when it is not editable — profile rows are read-only
text, not disabled inputs, because a disabled input is harder to read. */
.form-text { margin: .1875rem 0; font-size: .9375rem; }
.form-text.is-empty { color: #9aa0ab; }
.invalid-feedback { display: block; margin-top: .25rem; color: #cc2936; font-size: .75rem; }
.form-hint { margin-top: .25rem; color: #747c8b; font-size: .75rem; }
.check-inline { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.check-inline input { width: 1rem; height: 1rem; accent-color: #465064; }
/* Two fields side by side inside one column — the phone row's dial code, the
"Others" row's app picker. */
.input-row { display: flex; gap: .3125rem; width: 100%; }
.input-row .dial { flex: 0 0 6rem; }
.input-row .grow { flex: 1; min-width: 0; }
/* Read-only rows two to a line — the profile's identity block, and every
other place a value is shown rather than edited. */
.form-grid { display: flex; flex-wrap: wrap; }
.form-grid > .form-group { flex: 0 0 50%; max-width: 50%; }
.form-grid > .form-group.is-wide { flex: 0 0 100%; max-width: 100%; }
/* A row that holds two controls side by side needs the whole line — half a
column leaves the phone number showing four of its digits. */
.form-grid > .form-group:has(.input-row) { flex: 0 0 100%; max-width: 100%; }
/* A tab strip inside a section head — Earnings against Total Revenue. */
.tabs { display: flex; border-bottom: .125rem solid #465064; }
.tab {
padding: .5rem 1.25rem;
border-radius: .25rem .25rem 0 0;
color: #465064;
font-size: .9375rem;
font-weight: 700;
}
.tab.on { background: #465064; color: #fff; }
/* The potential panel's arithmetic: a label over its figure, a rule where the
running total is struck. */
.calc-row { padding: .625rem .5rem; }
.calc-row .k { font-size: .875rem; font-weight: 700; }
.calc-row .v { font-size: .9375rem; }
.calc-row.is-minus .k { color: #cc2936; }
.calc-row.is-plus .k { color: #3f8f3a; }
.calc-row.is-ruled { border-top: 1px solid #ddd; }
.calc-row.is-total .k, .calc-row.is-total .v { color: #465064; font-weight: 700; }
.calc-row.is-total .v { font-size: 1.25rem; }
/* The filter strip above a report. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0; }
.filter-bar .form-group { flex: 0 0 25%; max-width: 25%; }
.filter-bar .actions { display: flex; align-items: center; gap: .5rem; padding: .75rem .5rem; }
/* --------------------------------------------------------------------------
Tags, alerts, chips
-------------------------------------------------------------------------- */
.tag, .tag-active, .tag-pending, .tag-suspend, .tag-danger, .tag-info, .tag-grey {
display: inline-block;
padding: .0625rem .5rem;
border-radius: 1rem;
font-size: .75rem;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
.tag-active { background: #5fad56; color: #fff; }
.tag-pending { background: #dea600; color: #fff; }
.tag-suspend, .tag-danger { background: #cc2936; color: #fff; }
.tag-info { background: #488286; color: #fff; }
.tag-grey { background: #ccc; color: #212121; }
/* A hollow chip with a coloured rule — how the reference shows which contact
details and which ID documents are on file. */
.chip {
display: inline-block;
margin: 0 .25rem .375rem 0;
padding: .125rem .625rem;
border: 1px solid #cc2936;
border-radius: 1rem;
color: #cc2936;
font-size: .75rem;
line-height: 1.5;
}
.chip.is-done { border-color: #5fad56; color: #5fad56; }
.alert {
display: flex;
align-items: center;
margin-bottom: 1rem;
padding: .75rem 1rem;
border-radius: .25rem;
font-size: .875rem;
}
.alert-success { background: #eaf4e9; border: 1px solid #c6e2c2; color: #2f6b2a; }
.alert-danger { background: #fdf1f1; border: 1px solid #f2c9cc; color: #a02029; }
.alert-danger ul { margin: .25rem 0 0; padding-left: 1rem; list-style: disc; }
/* Pagination under a report. */
.pager { display: flex; align-items: center; justify-content: center; gap: .25rem; padding: .75rem 0; }
.pager a, .pager span {
min-width: 2rem;
padding: .25rem .5rem;
border: 1px solid #ddd;
border-radius: .25rem;
background: #fff;
color: #465064;
font-size: .875rem;
text-align: center;
}
.pager .is-current { background: #465064; border-color: #465064; color: #fff; }
.pager .is-disabled { color: #bbb; }
/* --------------------------------------------------------------------------
Sign-in, sign-up and forgot-password
-------------------------------------------------------------------------- */
.bg-login {
height: 100%;
background: linear-gradient(30deg, #465064 0, #292e3a 100%) repeat-x;
}
.bg-login .modal {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
padding: .5rem;
overflow: hidden auto;
}
.modal-dialog {
display: flex;
flex-direction: column;
width: 28.125rem;
max-width: 100%;
overflow: hidden;
border-radius: 4px;
background: #fff;
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .6);
}
/* The sign-up form is wider than the sign-in one — it carries a phone row and
a captcha row, and both need the room. */
#registerModal { width: 38.75rem; }
.modal-dialog .main-inner { padding: 0; }
.modal-head { display: flex; align-items: center; padding: 1rem; border-bottom: 1px solid #ddd; }
.modal-head .title { margin: .5rem 0 0; }
.modal-body { flex: 1 1 auto; padding: 1.5rem; padding-top: 0; overflow: hidden auto; }
.modal-foot { padding: 1rem; border-top: 1px solid #ddd; }
.modal-foot.align-center { text-align: center; }
.modal-foot .btn-primary:not(:last-of-type), .modal-foot .btn-light:not(:last-of-type) { margin-right: .5rem; }
.modal-foot .form-group { justify-content: center; }
/* The sign-up wizard's steps. Only one is ever in the document flow. */
.step { display: none; }
.step.is-on { display: block; }
/* The captcha row: the drawn code, a refresh button, then the answer field. */
.captcha-row { display: flex; align-items: center; gap: .5rem; width: 100%; }
.captcha-row .img-validation {
width: 6.25rem;
height: 2rem;
border: 1px solid #ccc;
border-radius: .25rem;
background: #eef0f3;
color: #465064;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: .25rem;
line-height: 2rem;
text-align: center;
user-select: none;
}
.btn-refresh { width: 2rem; height: 2rem; border-radius: .25rem; background: #465064; }
.btn-refresh .ic-refresh {
display: block;
width: 100%;
height: 100%;
background: no-repeat center / 60%
url('data:image/svg+xml,');
}
/* --------------------------------------------------------------------------
Phone and small-window layout
--------------------------------------------------------------------------
Everything above is already scaling with the root font-size; what changes
here is the shape: the sidebar becomes a full-screen drawer under a fixed
bar, and the two-column grids stack.
-------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
.container-flex { display: block; padding-top: 0; }
/* The bar across the top is the sidenav's own brand strip; the header
floats on top of it, starting after the burger. */
.sidenav {
position: fixed;
z-index: 2000;
top: 0;
left: 0;
flex: 0 0 100%;
width: 100%;
min-height: 2.75rem;
background: 0 0;
}
.sidenav-brand { justify-content: flex-start; padding-left: 0; background: rgba(70, 80, 100, .8); }
.sidenav-brand .text { display: none; }
.btn-sidenav { position: relative; z-index: 2020; }
.menu { display: none; z-index: 2020; overflow-y: auto; }
.sidenav.toggle {
height: 100vh;
overflow-y: hidden;
background: #465064;
}
.sidenav.toggle .sidenav-brand { background: #3c4455; }
.sidenav.toggle .btn-sidenav { background: #313846; }
.sidenav.toggle .menu { display: block; height: 100%; overflow-y: auto; }
.menu-item { border-bottom: solid 1px rgba(255, 255, 255, .1); }
.sidenav.toggle .menu-link { padding: 1rem; font-size: 1.125rem; }
.sidenav.toggle .menu-link.dropdown-toggle { padding-right: 2.5rem; }
.header { width: calc(100% - 3rem); height: 3rem; margin-left: auto; background: 0 0; }
.header::after { display: none; }
.referral-code { display: none; }
.topnav { flex: 0 0 auto; justify-content: flex-end; margin-left: 0; }
/* A five-figure balance is wider than the reference's zero ever was, so
the width is the content's — the sign-out button has to stay on screen. */
.user-info { width: auto; min-width: 0; }
.main { margin-top: 3rem; min-height: calc(100vh - 2.5rem); }
.col-2, .col-3 { flex: 0 0 calc(100% - .5%); max-width: calc(100% - .5%); }
.col-2:not(:last-of-type), .col-3:not(:last-of-type) { margin-bottom: 1.5rem; }
/* The headline panels stack, one to a row.
This is the reference's own behaviour, read off its stylesheet: its only
`.col-wrap.panel-group .col-2 { 50% }` rules are gated on tablet sizes
(portrait ≥768/≥1024 with a max-height, landscape 1024/1366) — a phone
never gets one, so the plain `.col-2 { 100% }` above stands.
Keeping them side by side here was ours, and it was wrong: half a 414px
screen cannot hold `৳1,177.50` at 8vw beside its label, so the figure
wrapped under the label and the card read as noise. See the tablet
query further down for the two-up layout, where it belongs.
Nothing else in this block: the reference overrides only the two
properties below on a phone and leaves the float, the number's margin
and the form-group padding at their desktop values. */
.panel-group .section-body { padding: .69rem; }
.panel-group .number { font-size: 2.07rem; }
.filter-bar .form-group { flex: 0 0 50%; max-width: 50%; }
/* The card goes to the top of the screen and takes the full width, minus
the reference's 7px inset. Centring a form this tall on a phone only
pushes the first field under the fold. */
.bg-login .modal { justify-content: flex-start; padding: 7px; }
.modal-dialog, #registerModal { width: 100%; max-width: 100%; }
/* A phone cannot show eight report columns. Each one scrolls on its own
rather than the page scrolling sideways. */
.table-responsive { overflow-x: auto; }
.table-responsive .table { min-width: 40rem; }
.table-responsive .table.is-narrow { min-width: 0; }
}
/* --------------------------------------------------------------------------
Tablets
--------------------------------------------------------------------------
The one place the headline panels do sit two to a row below 769px. These
four queries are the reference's, verbatim apart from its `hover: none`
gate, which is dropped here for the same reason it is dropped on the phone
query: so the layout can be reviewed in a resized desktop window.
-------------------------------------------------------------------------- */
@media screen and (orientation: portrait) and (min-width: 768px) and (max-height: 1024px),
screen and (orientation: portrait) and (min-width: 1024px) and (max-height: 1366px),
screen and (orientation: landscape) and (min-width: 1024px) and (max-height: 768px),
screen and (orientation: landscape) and (min-width: 1366px) and (max-height: 1024px) {
.col-wrap.panel-group .col-2 {
flex: 0 0 calc(50% - .5%);
max-width: calc(50% - .5%);
margin-bottom: 0;
}
}
@media screen and (min-width: 769px) {
.referral-code-mobile { display: none; }
.menu { display: block !important; }
.sidenav-brand { min-height: 3rem; }
/* The burger collapses the sidebar to an icon rail rather than hiding it,
which is what the reference does on a desktop: the labels go, the icons
stay, and a group's submenu flies out beside the rail. */
.sidenav.toggle { flex: 0 0 3rem; }
.sidenav.toggle .sidenav-brand .text { display: none; }
.sidenav.toggle .menu-item { position: relative; }
.sidenav.toggle .menu-link {
justify-content: center;
padding: 1.25rem 0;
font-size: 0;
text-indent: -99999px;
}
.sidenav.toggle .menu-link.dropdown-toggle { padding-right: 0; }
.sidenav.toggle .menu-link.dropdown-toggle::after { display: none; }
.sidenav.toggle .menu-link [class^=ic-] { margin-right: 0; text-indent: 0; }
.sidenav.toggle .submenu {
position: absolute;
z-index: 1010;
top: .25rem;
left: 3.25rem;
width: 12.5rem;
background: #fff;
box-shadow: 0 .25rem .25rem 0 rgba(0, 0, 0, .6);
}
.sidenav.toggle .submenu-link { padding: .75rem 1.5rem; }
}