Polo Exchange
[8/14/2026 3:56 PM] Edrah: polo-search-box input::placeholder {
color:
#697583;
}
/* =========================
TABLE
========================= */
.polo-table-card {
overflow: hidden;
border-radius:
24px;
border:
1px solid rgba(255,255,255,.075);
background:
rgba(255,255,255,.025);
box-shadow:
0 25px 70px rgba(0,0,0,.33);
backdrop-filter:
blur(14px);
}
.polo-table-head {
display: grid;
grid-template-columns:
2fr 1fr 1fr .4fr;
gap: 15px;
align-items: center;
padding:
17px 24px;
background:
rgba(217,177,67,.075);
border-bottom:
1px solid rgba(255,255,255,.07);
color:
#9ca6b0;
font-size:
12px;
}
.polo-row {
display: grid;
grid-template-columns:
2fr 1fr 1fr .4fr;
gap: 15px;
align-items: center;
padding:
18px 24px;
border-bottom:
1px solid rgba(255,255,255,.055);
transition:
.25s ease;
}
.polo-row:last-child {
border-bottom: none;
}
.polo-row:hover {
background:
rgba(215,176,66,.055);
transform:
translateX(-3px);
}
.polo-currency {
display: flex;
align-items: center;
gap: 13px;
}
.polo-flag {
width: 46px;
height: 46px;
border-radius:
14px;
display: flex;
align-items: center;
justify-content: center;
background:
rgba(255,255,255,.055);
font-size:
26px;
}
.polo-currency strong {
display: block;
direction: ltr;
text-align: right;
font-size:
16px;
letter-spacing:
.4px;
}
.polo-currency span {
display: block;
color:
#76828e;
font-size:
11px;
margin-top:
5px;
}
.polo-price {
direction: ltr;
font-weight: 800;
font-size:
17px;
}
.polo-buy {
color:
#55d99e;
}
.polo-sell {
color:
#efcc66;
}
.polo-up,
.polo-down {
display:
inline-flex;
width:
31px;
height:
31px;
align-items:
center;
justify-content:
center;
border-radius:
10px;
font-size:
11px;
}
.polo-up {
color:
#48da9c;
background:
rgba(72,218,156,.08);
}
.polo-down {
color:
#ff6b76;
background:
rgba(255,107,118,.08);
}
/* =========================
INFO
========================= */
.polo-info {
display:
flex;
align-items:
flex-start;
gap:
14px;
margin-top:
20px;
padding:
18px;
border-radius:
17px;
border:
1px solid rgba(255,255,255,.07);
background:
rgba(255,255,255,.025);
}
.polo-info-icon {
min-width:
34px;
height:
34px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
10px;
color:
#dabb5b;
border:
1px solid rgba(218,187,91,.3);
}
.polo-info strong {
font-size:
13px;
}
.polo-info p {
margin:
5px 0 0;
color:
#77838f;
font-size:
11px;
line-height:
1.9;
}
/* =========================
FOOTER
========================= */
.polo-footer {
display:
flex;
justify-content:
space-between;
align-items:
center;
gap:
20px;
margin-top:
35px;
padding:
25px 5px;
border-top:
1px solid rgba(255,255,255,.065);
}
.polo-footer div {
display:
flex;
flex-direction:
column;
}
.polo-footer strong {
color:
#dabc5c;
font-size:
14px;
letter-spacing:
1.5px;
}
.polo-footer span,
.polo-footer p {
color:
#66717d;
font-size:
10px;
margin:
4px 0 0;
}
/* =========================
MOBILE
========================= */
@media(max-width: 700px) {
#polo-xchange-v2 {
padding: 15px;
}
.polo-header {
flex-direction:
column;
align-items:
stretch;
}
.polo-brand {
justify-content:
center;
}
.polo-brand-text h1 {
font-size:
23px;
}
.polo-clock-card {
width:
100%;
}
.polo-hero {
align-items:
flex-start;
flex-direction:
column;
padding-top:
35px;
}
.polo-last-update {
text-align:
right;
}
.polo-table-head {
display:
none;
}
.polo-row {
[8/14/2026 3:56 PM] Edrah: grid-template-columns:
1fr 1fr;
padding:
18px;
gap:
18px;
}
.polo-currency {
grid-column:
1 / -1;
}
.polo-price {
padding:
12px;
border-radius:
12px;
background:
rgba(0,0,0,.20);
}
.polo-row > div:last-child {
position:
absolute;
left:
25px;
}
.polo-row {
position:
relative;
}
.polo-footer {
flex-direction:
column;
align-items:
flex-start;
}
}
Leave a Reply