- Static HTML hotel website with Bootstrap 5 - i18next-based client-side internationalization - Language switcher (DE/EN) in navbar - German and English translation JSON files - Translated: navigation, content, forms, FAQ, legal pages (AGB) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
132 lines
No EOL
2.1 KiB
SCSS
132 lines
No EOL
2.1 KiB
SCSS
body {
|
|
font-family: $font-family-sans-serif;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
overflow-x: hidden;
|
|
@extend .text-black-50;
|
|
}
|
|
h1, h2, h3, h4, h5, .logo {
|
|
font-family: $font-family-sans-serif-secondary;
|
|
color: $black;
|
|
}
|
|
a, .btn {
|
|
transition: .3s all ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn {
|
|
padding: 15px 30px;
|
|
border-radius: 30px;
|
|
border-color: none;
|
|
font-size: 14px;
|
|
&.active, &:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
&.btn-primary {
|
|
color: $white;
|
|
background-color: $primary;
|
|
&:hover {
|
|
}
|
|
}
|
|
&.btn-outline-white {
|
|
border-color: $white;
|
|
color: $white;
|
|
&:hover {
|
|
background-color: $white;
|
|
color: $black;
|
|
}
|
|
}
|
|
&.btn-black {
|
|
background: $black;
|
|
color: $white;
|
|
border-color: $black;
|
|
&:hover {
|
|
border-color: lighten($black, 5%);
|
|
background: lighten($black, 5%);
|
|
color: $white;
|
|
}
|
|
}
|
|
&.has-arrow {
|
|
padding-right: 50px;
|
|
position: relative;
|
|
[class^="icon-"] {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.form-control {
|
|
height: 54px;
|
|
border-color: rgba($black, .1);
|
|
background-color: transparent!important;
|
|
margin-bottom: 10px;
|
|
&:active, &:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
border-color: rgba($black, .2)!important;
|
|
}
|
|
&::-webkit-input-placeholder {
|
|
color: rgba($black, .7);
|
|
}
|
|
|
|
&::-moz-placeholder {
|
|
color: rgba($black, .7);
|
|
}
|
|
&:-ms-input-placeholder {
|
|
color: rgba($black, .7);
|
|
}
|
|
&:-moz-placeholder {
|
|
color: rgba($black, .7);
|
|
}
|
|
}
|
|
textarea {
|
|
height: auto!important;
|
|
}
|
|
|
|
// PRELOADER STYLE
|
|
#overlayer {
|
|
width:100%;
|
|
height:100%;
|
|
position:fixed;
|
|
z-index:7100;
|
|
background: $white;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.loader {
|
|
z-index:7700;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
.form-control {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
border-radius: 30px;
|
|
border-color: transparent;
|
|
height: 52px;
|
|
background: $light!important;
|
|
&:focus, &:active {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
textarea {
|
|
height: auto!important;
|
|
border-radius: 7px!important;
|
|
} |