655 lines
16 KiB
SCSS
655 lines
16 KiB
SCSS
$white-btn: linear-gradient(92deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
$green-btn: radial-gradient(100% 1392.89% at 100% 100%, #00923a 0%, #34e97c 100%);
|
|
$blur-btn: blur(1.25vh);
|
|
|
|
.main-container {
|
|
background: rgba(8, 11, 16, 0.92);
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.buy-container {
|
|
position: absolute;
|
|
margin-top: 5vh;
|
|
width: 100.1vh;
|
|
height: 50.4vh;
|
|
background: var(
|
|
--Linear-Clean-White,
|
|
linear-gradient(92deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%)
|
|
);
|
|
.buy-information-container {
|
|
gap: 0.5vh;
|
|
.buy-info-element {
|
|
p.description-text {
|
|
margin-top: .5vh;
|
|
color: rgba(255, 255, 255, 0.45);
|
|
font-family: Akrobat;
|
|
font-size: 1.6vh;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .5vh;
|
|
.resell-element,
|
|
.salary-element {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 4vh;
|
|
background: linear-gradient(92.27deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
backdrop-filter: $blur-btn;
|
|
border-radius: 2.4vh;
|
|
|
|
p {
|
|
position: absolute;
|
|
left: 2vh;
|
|
font-weight: 600;
|
|
font-size: 1.25vh;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
right: 2vh;
|
|
font-weight: 600;
|
|
font-size: 1.25vh;
|
|
background: radial-gradient(100% 1392.89% at 100% 100%, #00923a 0%, #34e97c 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
.purchase-btn {
|
|
background: $green-btn;
|
|
height: 6.5vh;
|
|
border-radius: 2.4vh;
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
p {
|
|
font-weight: 600;
|
|
font-size: 2vh;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
position: absolute;
|
|
width: 25%;
|
|
height: 90%;
|
|
right: 3vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
// align-items: center;
|
|
.information-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1vh;
|
|
position: relative;
|
|
p {
|
|
font-weight: 700;
|
|
font-size: 1.35vh;
|
|
color: white;
|
|
}
|
|
img {
|
|
width: 2vh;
|
|
height: 2vh;
|
|
}
|
|
}
|
|
}
|
|
backdrop-filter: $blur-btn;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 1.5vh;
|
|
.buy-preview {
|
|
flex-shrink: 0;
|
|
border-radius: 1.5vh;
|
|
position: relative;
|
|
width: 69.3vh;
|
|
height: 100%;
|
|
border: 0.1vh solid #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.buy-preview-img {
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
.img-overlay {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, rgba(23, 29, 50, 0) 50%, rgba(23, 29, 50, 0.9) 99.86%);
|
|
border-radius: 1.5vh;
|
|
}
|
|
.preview-btn {
|
|
position: absolute;
|
|
// height: 5.1vh;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 2vh 2.5vh;
|
|
border-radius: 50vh;
|
|
right: 4.5vh;
|
|
bottom: 3.5vh;
|
|
background: $white-btn;
|
|
backdrop-filter: $blur-btn;
|
|
p {
|
|
color: #fff;
|
|
font-family: Akrobat;
|
|
font-size: 1.45vh;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.information {
|
|
position: absolute;
|
|
bottom: 3.5vh;
|
|
left: 4.5vh;
|
|
.dealership-label {
|
|
color: #fff;
|
|
font-family: Akrobat;
|
|
font-size: 2.8vh;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: normal;
|
|
}
|
|
.dealership-street {
|
|
color: #fff;
|
|
font-family: Akrobat;
|
|
font-size: 2.4vh;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.selection-page {
|
|
position: relative;
|
|
width: 90%;
|
|
height: 100%;
|
|
margin: 15vh;
|
|
margin-bottom: 5vh;
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: center;
|
|
ul.vehicle-list {
|
|
width: 100%;
|
|
max-height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1.5vh;
|
|
li.vehicle-element {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 22.285vh;
|
|
height: 20vh;
|
|
border-radius: 1.5vh;
|
|
background: $white-btn;
|
|
backdrop-filter: $blur-btn;
|
|
.vehicle-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
gap: 0.5vh;
|
|
width: 100%;
|
|
height: 5vh;
|
|
top: 0;
|
|
.vehicle-category {
|
|
padding: 0.25vh 0.65vh;
|
|
border-radius: 50vh;
|
|
margin-left: 1.5vh;
|
|
border: 0.1vh solid rgba(255, 255, 255, 0.15);
|
|
p {
|
|
color: #fff;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
font-size: 1.4vh;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: normal;
|
|
}
|
|
}
|
|
}
|
|
.vehicle-preview-btn {
|
|
border-radius: 0vh 1.5vh;
|
|
img {
|
|
transition: transform 350ms ease;
|
|
transition-duration: 350ms;
|
|
&:hover {
|
|
transform: rotateY(180deg);
|
|
}
|
|
}
|
|
}
|
|
.vehicle-preview-btn,
|
|
.vehicle-info-btn {
|
|
&:hover {
|
|
background: linear-gradient(92deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.04) 100%);
|
|
}
|
|
position: relative;
|
|
width: 5vh;
|
|
height: 5vh;
|
|
background: linear-gradient(92deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
|
|
backdrop-filter: $blur-btn;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.vehicle-info-btn {
|
|
border-radius: 1.5vh 0vh;
|
|
}
|
|
|
|
.vehicle-img {
|
|
width: 15vh;
|
|
transition: transform 150ms ease;
|
|
&:hover {
|
|
transform: scale(1.15) rotate(5deg);
|
|
}
|
|
}
|
|
|
|
.vehicle-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
gap: 0.5vh;
|
|
width: 100%;
|
|
height: 5vh;
|
|
bottom: 0;
|
|
.vehicle-info {
|
|
display: flex;
|
|
gap: 0.5vh;
|
|
align-items: center;
|
|
margin-left: 1.5vh;
|
|
justify-content: center;
|
|
.vehicle-name {
|
|
font-weight: 600;
|
|
font-size: 1.8vh;
|
|
color: white;
|
|
}
|
|
.vehicle-price {
|
|
padding: 0.25vh 0.65vh;
|
|
border-radius: 0.5vh;
|
|
background: var(
|
|
--Diamond-Green-Radial,
|
|
radial-gradient(1396.47% 141.42% at 100% 100%, #00923a 0%, #34e97c 100%)
|
|
);
|
|
color: white;
|
|
font-size: 1.35vh;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.05vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rotate-vehicle {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
bottom: 8vh;
|
|
gap: 1.25vh;
|
|
.rotate-img {
|
|
position: absolute;
|
|
width: 3vh;
|
|
height: 3.1vh;
|
|
transition: transform 1500ms ease-in-out;
|
|
}
|
|
.rotate-btn {
|
|
width: 2vh;
|
|
height: 2vh;
|
|
background: linear-gradient(92.27deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
border-radius: 0.2vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: transform 100ms ease;
|
|
img {
|
|
width: 0.485vh;
|
|
height: 0.7vh;
|
|
}
|
|
}
|
|
.rotate-btn:hover {
|
|
transform: scale(1.125);
|
|
}
|
|
p {
|
|
font-weight: 600;
|
|
font-size: 1.35vh;
|
|
color: rgba(255, 255, 255, 0.65);
|
|
}
|
|
.rotate-btn#right {
|
|
img {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.rotate-vehicle:hover {
|
|
.rotate-img {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.dealership-notification {
|
|
max-width: 27.6vh;
|
|
height: auto;
|
|
gap: 2.5vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: absolute;
|
|
z-index: 10000;
|
|
.notification-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: blur(7.5vh);
|
|
background: #232A43;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
h2.dollar-sign {
|
|
font-weight: 900;
|
|
font-size: 35vh;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
color: #ffffff;
|
|
opacity: 0.25;
|
|
position: absolute;
|
|
}
|
|
p.close-notification {
|
|
font-weight: 600;
|
|
font-size: 1.15vh;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
opacity: 0.35;
|
|
position: absolute;
|
|
bottom: -12vh;
|
|
}
|
|
p.notify-text {
|
|
font-weight: 600;
|
|
font-size: 1.85vh;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
.notify-confirm-btn {
|
|
transition: transform 150ms ease;
|
|
background: $green-btn;
|
|
backdrop-filter: $blur-btn;
|
|
border-radius: 2.4vh;
|
|
min-width: 15vh;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 2vh;
|
|
p {
|
|
font-weight: 700;
|
|
font-size: 1.45vh;
|
|
leading-trim: both;
|
|
text-edge: cap;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.notify-confirm-btn:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
ul.left-side-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
left: 7vh;
|
|
gap: 1.5vh;
|
|
|
|
.left-side-element-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1vh;
|
|
position: relative;
|
|
p {
|
|
font-weight: 700;
|
|
font-size: 1.35vh;
|
|
color: white;
|
|
}
|
|
img {
|
|
width: 2vh;
|
|
height: 2vh;
|
|
}
|
|
}
|
|
ul.left-side-element {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow-x: hidden;
|
|
width: 22.8vh;
|
|
height: auto;
|
|
// flex-direction: column;
|
|
gap: 0.5vh;
|
|
|
|
li.price-btn {
|
|
background: $green-btn;
|
|
height: 6.5vh;
|
|
border-radius: 2.4vh;
|
|
align-items: center;
|
|
justify-content: center;
|
|
display: flex;
|
|
p {
|
|
font-weight: 600;
|
|
font-size: 2vh;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
li {
|
|
background: linear-gradient(92.27deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
backdrop-filter: $blur-btn;
|
|
border-radius: 2.4vh;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
ul.vehicle-color-list {
|
|
display: flex;
|
|
background: linear-gradient(92.27deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
backdrop-filter: $blur-btn;
|
|
border-radius: 2.4vh;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1vh;
|
|
max-width: 100%;
|
|
height: auto;
|
|
padding: 2.5vh;
|
|
li {
|
|
display: block;
|
|
width: 1.5vh;
|
|
height: 1.5vh;
|
|
background: radial-gradient(50% 50% at 50% 50%, #ffffff59 0%, #ffffff 100%);
|
|
border-radius: 0.3vh;
|
|
}
|
|
}
|
|
|
|
li.vehicle-stat-element,
|
|
.test-drive-btn,
|
|
.loan-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 4vh;
|
|
background: linear-gradient(92.27deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
backdrop-filter: $blur-btn;
|
|
border-radius: 2.4vh;
|
|
|
|
p {
|
|
position: absolute;
|
|
left: 2vh;
|
|
font-weight: 600;
|
|
font-size: 1.25vh;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
right: 2vh;
|
|
font-weight: 600;
|
|
font-size: 1.25vh;
|
|
background: radial-gradient(100% 1392.89% at 100% 100%, #00923a 0%, #34e97c 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
}
|
|
|
|
ul.rating {
|
|
position: absolute;
|
|
right: 2vh;
|
|
display: flex;
|
|
gap: 1vh;
|
|
.rating-point.active {
|
|
background: radial-gradient(50% 50% at 50% 50%, #bdff69 0%, #bdff69 100%);
|
|
}
|
|
li.rating-point {
|
|
display: block;
|
|
width: 0.8vh;
|
|
height: 0.8vh;
|
|
border-radius: 50%;
|
|
background: radial-gradient(50% 50% at 50% 50%, rgba(60, 60, 60, 0.35) 0%, #3c3c3c 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.vehicle-stats {
|
|
max-height: 31vh;
|
|
overflow-y: scroll;
|
|
}
|
|
.hrec {
|
|
height: 0.1vh;
|
|
width: 100%;
|
|
margin: 1vh;
|
|
position: relative;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
flex: 1;
|
|
}
|
|
.hrec-s {
|
|
flex: 1;
|
|
height: 0.1vh;
|
|
max-width: 3%;
|
|
width: 100%;
|
|
position: relative;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 6.5vh;
|
|
width: 100%;
|
|
gap: 1.5vh;
|
|
|
|
// WHITE BLUR ELEMENTS
|
|
ul.categories,
|
|
.selected-vehicle,
|
|
.exit-btn {
|
|
width: auto;
|
|
background: $white-btn;
|
|
backdrop-filter: $blur-btn;
|
|
border-radius: 2.5vh;
|
|
height: 5.1vh;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-left: 2vh;
|
|
padding-right: 2vh;
|
|
}
|
|
|
|
.exit-btn:hover {
|
|
p {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.exit-btn p {
|
|
font-weight: 500;
|
|
font-size: 1.25vh;
|
|
color: white;
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.active {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.selected-vehicle {
|
|
p {
|
|
font-weight: 600;
|
|
font-size: 1.5vh;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
}
|
|
}
|
|
|
|
ul.categories {
|
|
display: flex;
|
|
gap: 0.5vh;
|
|
align-items: center;
|
|
justify-content: center;
|
|
li {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
li.category {
|
|
font-weight: 500;
|
|
font-size: 1.25vh;
|
|
color: rgba(255, 255, 255, 1);
|
|
opacity: 0.25;
|
|
// transition: opacity 150ms ease;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
li.category-switch {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|