8e1a83ee7d
updated enter details header overlay to match design updated change room button to use new one for accessibility other minor fixes to match design
88 lines
1.3 KiB
CSS
88 lines
1.3 KiB
CSS
.header {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.wrapper {
|
|
position: relative;
|
|
background: linear-gradient(
|
|
60deg,
|
|
rgb(0 0 0 / 25%) 0%,
|
|
rgb(0 0 0 / 50%) 50%,
|
|
rgb(0 0 0 / 75%) 100%
|
|
);
|
|
width: 100dvw;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
max-width: var(--max-width-page);
|
|
gap: var(--Space-x05);
|
|
padding: var(--Space-x3) 0;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.titleContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--Space-x05);
|
|
}
|
|
|
|
.mobileTitle {
|
|
display: -webkit-box;
|
|
}
|
|
|
|
.mobileTitle,
|
|
.title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 2; /* number of lines to show */
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.title {
|
|
display: none;
|
|
}
|
|
|
|
.address {
|
|
display: none;
|
|
flex-wrap: wrap;
|
|
column-gap: var(--Space-x15);
|
|
font-style: normal;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.address {
|
|
display: flex;
|
|
}
|
|
.container {
|
|
padding: var(--Space-x3) 0;
|
|
}
|
|
.mobileTitle {
|
|
display: none;
|
|
}
|
|
.title {
|
|
display: -webkit-box;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1367px) {
|
|
.container {
|
|
padding: var(--Space-x6) 0;
|
|
}
|
|
}
|