117 lines
2.1 KiB

.home-search-box{
width : 100%;
font-family: numeralLight;
margin: 0px auto;
form{
button{
background-color : #39383D;
margin-right: 3px;
border-top-left-radius: 9px;
border-bottom-left-radius: 9px;
border: 0px;
}
input{
width : 100%;
background-color: #46454A;
border: 0px;
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
color: #ddd;
&::placeholder{
padding-right: 0px;
color: #ddd;
opacity: 0.4;
}
}
}
}
@media screen and (min-width: 1441px){
.home-search-box{
width : 100%;
max-width: 1250px;
padding: 80px 0px 30px;
form{
width : 850px;
input{
font-size: 20px;
padding-right: 20px;
&::placeholder{
font-size: 20px;
}
}
button{
width : 100px;
height: 80px;
}
}
}
}
@media screen and (min-width: 1008px) and (max-width: 1440px){
.home-search-box{
max-width: 1250px;
padding: 80px 0px 10px;
form{
width : 850px;
input{
font-size: calc(100vw / 65);
padding-right: 20px;
&::placeholder{
font-size: calc(100vw / 75);
}
}
button{
width : 100px;
height: 80px;
}
}
}
}
@media screen and (min-width: 641px) and (max-width: 1007px){
.home-search-box{
max-width: 900px;
padding: 50px 0px 10px;
form{
width : 70%;
input{
font-size: calc(100vw / 40);
padding-right: 20px;
&::placeholder{
font-size: calc(100vw / 45);
}
}
button{
width : 80px;
height: 60px;
}
}
}
}
@media screen and (max-width: 640px){
.home-search-box{
max-width: 500px;
padding: 50px 0px 30px;
form{
width : 100%;
padding: 0px 10px;
input{
font-size: calc(100vw / 25);
padding-right: 20px;
&::placeholder{
font-size: calc(100vw / 25);
}
}
button{
width : 60px;
height: 50px;
}
}
}
}