145 lines
3.2 KiB
CSS
145 lines
3.2 KiB
CSS
/**
|
|
* How to claim — steps grid (shared by new-user-promotion & landing pages).
|
|
* Wrap section with class .clain-section
|
|
*/
|
|
.clain-section .claim-grid {
|
|
margin: 20px auto 0;
|
|
max-width: 800px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 80px;
|
|
}
|
|
|
|
.clain-section .claim-item {
|
|
position: relative;
|
|
border-radius: 12px;
|
|
|
|
min-height: 190px;
|
|
padding: 18px;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
/* background-position: center; */
|
|
display: flex;
|
|
}
|
|
|
|
.clain-section .claim-item:nth-child(1) {
|
|
background-image: url("../../images/leading-v2/Frame.png");
|
|
}
|
|
|
|
.clain-section .claim-item:nth-child(2) {
|
|
background-image: url("../../images/leading-v2/Frame-1.png");
|
|
}
|
|
|
|
.clain-section .claim-item:nth-child(3) {
|
|
background-image: url("../../images/leading-v2/Frame-2.png");
|
|
}
|
|
|
|
.clain-section .claim-item:not(:last-child)::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -50px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 20px;
|
|
height: 50px;
|
|
background: url("../../images/backgrounds/new-user-claim-arrow.png") no-repeat center / contain;
|
|
}
|
|
|
|
.clain-section .claim-text {
|
|
margin: 0;
|
|
padding-top: 90px;
|
|
font-size: 16px;
|
|
line-height: 1.45;
|
|
color: #bc9467;
|
|
}
|
|
|
|
.clain-section .claim-text strong {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
color: #d4a574;
|
|
}
|
|
|
|
/* Desktop: step number is in card background; mobile uses claim-step-mark img */
|
|
.clain-section .claim-step-mark {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.clain-section .claim-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.clain-section .claim-item:not(:last-child)::after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.clain-section {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.clain-section .claim-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 28px;
|
|
max-width: min(360px, 92vw);
|
|
margin: 8px auto 0;
|
|
}
|
|
|
|
.clain-section .claim-item:nth-child(1),
|
|
.clain-section .claim-item:nth-child(2),
|
|
.clain-section .claim-item:nth-child(3) {
|
|
background-image: url("../../images/backgrounds/new-user-claim-card-bg-mobile.png");
|
|
}
|
|
|
|
.clain-section .claim-item {
|
|
width: 100%;
|
|
min-height: 152px;
|
|
padding: 20px 18px 22px 22px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(180, 110, 45, 0.28);
|
|
box-shadow:
|
|
inset 0 2px 0 rgba(249, 135, 21, 0.55),
|
|
inset 2px 0 0 rgba(249, 135, 21, 0.42),
|
|
0 10px 28px rgba(0, 0, 0, 0.35);
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.clain-section .claim-step-mark {
|
|
display: block;
|
|
width: clamp(76px, 22vw, 112px);
|
|
height: auto;
|
|
margin: 0 0 10px;
|
|
align-self: flex-start;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.clain-section .claim-text {
|
|
padding-top: 0;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
color: #d4a574;
|
|
text-align: left;
|
|
}
|
|
|
|
.clain-section .claim-item:not(:last-child)::after {
|
|
display: block;
|
|
left: 50%;
|
|
right: auto;
|
|
top: auto;
|
|
bottom: -28px;
|
|
transform: translateX(-50%);
|
|
width: 28px;
|
|
height: 22px;
|
|
background: url("../../images/backgrounds/new-user-claim-arrow-down.png") no-repeat center / contain;
|
|
}
|
|
}
|