jl-frontend/css/details.css

233 lines
4.2 KiB
CSS

/*
Divide the Details page into 3 main sections:
- Head (Picture, Title, Picture gallery & Videos, Price, Details)
*/
.details-container {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: start;
padding: 0px 15px;
margin-top: 30px;
}
.details-head {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: center;
width: 100%;
gap: 20px;
margin-bottom: 15px;
}
.details-head-title {
font-size: 21px;
font-family: Inter;
font-weight: bold;
text-transform: uppercase;
}
.details-head-agent-container {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 20px;
width: 100%;
margin: 10px 0px;
}
.details-head-agent-profile-picture {
width: 75px;
height: 75px;
background-color: gray;
border-radius: 100%;
object-fit: cover;
}
.details-head-agent-text-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
font-family: Inter;
}
.details-head-agent-heading {
font-size: 18px;
font-weight: 600;
}
.details-head-agent-subheading {
font-size: 15px;
font-weight: 400;
color: rgb(113, 113, 113);
}
.details-body {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: center;
width: 100%;
gap: 15px;
margin-top: -10px;
margin-bottom: 30px;
}
.details-body-description {
font-size: 14px;
font-family: Inter;
line-height: 30px;
white-space: pre-line;
color: rgba(34, 34, 34, 0.873);
}
.details-body-divider {
width: 100%;
height: 1px;
background-color: rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.details-body-features {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: start;
gap: 25px;
width: 100%;
height: 200px;
margin-bottom: 60px;
}
.details-body-feature-item {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 20px;
font-family: Inter;
font-size: 24px;
}
.details-body-feature-item-icon-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
}
.details-body-feature-item-text-container {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
}
.details-body-feature-item-text-title {
font-size: 16px;
font-weight: 600;
}
.details-body-feature-item-text-subtitle {
font-size: 14px;
font-weight: 400;
color: rgb(113, 113, 113);
}
.details-body-units {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
gap: 30px;
width: 100%;
}
.details-body-units-title {
font-size: 24px;
font-family: Inter;
font-weight: bold;
}
.details-body-units-selection-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 30px;
width: 100%;
}
.details-body-units-selection-container:hover {
cursor: pointer;
}
.details-body-units-selection-item-selected {
display: flex;
flex-direction: row;
gap: 10px;
font-family: Inter;
font-size: 15px;
padding-bottom: 6px;
border-bottom: 3px solid #04B2D9;
}
.details-body-units-selection-item-unselected {
display: flex;
flex-direction: row;
gap: 10px;
font-family: Inter;
font-size: 15px;
}
.details-body-units-media-slideshow-frame {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 360px;
background-color: rgba(128, 128, 128, 0.151);
border-radius: 20px;
}
.details-body-units-description {
width: 100%;
font-size: 14px;
font-family: Inter;
line-height: 30px;
white-space: pre-line;
color: rgba(34, 34, 34, 0.873);
}
.details-body-unit-features {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: start;
gap: 25px;
width: 100%;
height: 200px;
margin-bottom: 60px;
}
.details-body-disclaimer {
width: 100%;
font-size: 13px;
font-family: Inter;
}