diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index 43965fd..1d00132 100755 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -1,491 +1,574 @@ - /**************** Fonts ******************/ @font-face { - font-family: "MontserratVar"; - src: url( '../fonts/Montserrat-VariableFont_wght.ttf' ); + font-family: 'MontserratVar'; + src: url('../fonts/Montserrat-VariableFont_wght.ttf'); } @font-face { - font-family: "OpenSansVar"; - src: url( '../fonts/OpenSans-VariableFont_wdth_wght.ttf' ); + font-family: 'OpenSansVar'; + src: url('../fonts/OpenSans-VariableFont_wdth_wght.ttf'); } /**************** Typography ******************/ a { - color: #a9cd2e; - text-decoration: none; - transition: 0.3s ease-in-out; + color: #a9cd2e; + text-decoration: none; + transition: 0.3s ease-in-out; } -.nav-link.active, a.nav-dropdown-link.active { - color: #a9cd2e; +.nav-link.active, +a.nav-dropdown-link.active { + color: #a9cd2e; } -h1, h2, h3, h4, h5, h6 { - font-weight:normal; - margin-bottom: 16px; +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: normal; + margin-bottom: 16px; } -h1, h2, .content h1, .content h2{ - font-weight:bold; +h1, +h2, +.content h1, +.content h2 { + font-weight: bold; } h3 { - font-weight:500; + font-weight: 500; } -h4, .content h4 { - color: #a9cd2e; +h4, +.content h4 { + color: #a9cd2e; } p { - font-size: 18px; - margin-bottom:10px; - margin-top:10px; + font-size: 18px; + margin-bottom: 10px; + margin-top: 10px; } .navbar-nav .nav-item { - font-size: 18px; - color: grey!important; + font-size: 18px; + color: grey !important; } @media (max-width: 1200px) { - h1 { - font-size: 35px; - line-height: 1.2em; - margin-bottom: 16px; - } - h2 { - font-size:22px; - } - h3 { - font-size:18px; - } - h4 { - font-size:18px; - } - p { - font-size: 14px; - } - .navbar-nav .nav-item { - font-size: 14px; - } + h1 { + font-size: 35px; + line-height: 1.2em; + margin-bottom: 16px; + } + h2 { + font-size: 22px; + } + h3 { + font-size: 18px; + } + h4 { + font-size: 18px; + } + p { + font-size: 14px; + } + .navbar-nav .nav-item { + font-size: 14px; + } } - -footer, footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer p, footer a { - color: white!important; +footer, +footer h1, +footer h2, +footer h3, +footer h4, +footer h5, +footer h6, +footer p, +footer a { + color: white !important; } -.content .light-text h2 , .content .light-text h1 , .content .light-text h3, .content .light-text p { - color:white!important; +.content .light-text h2, +.content .light-text h1, +.content .light-text h3, +.content .light-text p { + color: white !important; } -.light-text, .light-text h1, .light-text h2, .light-text h3, .light-text h4, .light-text h5, .light-text h6, .light-text p, .light-text a { - color:white; +.light-text, +.light-text h1, +.light-text h2, +.light-text h3, +.light-text h4, +.light-text h5, +.light-text h6, +.light-text p, +.light-text a { + color: white; } ol { - list-style: decimal; - counter-reset: my-awesome-counter; - padding-left: 30px; - + list-style: decimal; + counter-reset: my-awesome-counter; + padding-left: 30px; } img { - margin-bottom:16px; + margin-bottom: 16px; } hr { - width: 12%; - height: 2px; - background-color: #a9cd2e; - margin: 0!important; - display: block; + width: 12%; + height: 2px; + background-color: #a9cd2e; + margin: 0 !important; + display: block; } .aligncenter hr { - width: 12%; - height: 2px; - background-color: #a9cd2e; - margin: 15px auto 0 auto !important; - display: block; + width: 12%; + height: 2px; + background-color: #a9cd2e; + margin: 15px auto 0 auto !important; + display: block; } .light-text hr { - width: 12%; - height: 2px; - background-color: #fff; - margin: 0!important; - display: block; + width: 12%; + height: 2px; + background-color: #fff; + margin: 0 !important; + display: block; } @media (max-width: 770px) { - .btn{ - display:block - } + .btn { + display: block; + } } .container { - max-width: 1750px; + max-width: 1750px; } @media (max-width: 1750px) { - .container { - padding-left:80px; - padding-right:80px; - } + .container:not(.navbar) { + padding-left: 80px; + padding-right: 80px; + } } @media (max-width: 1200px) { - .container { - max-width: 1200px; - padding-left:80px; - padding-right:80px; - } + .container:not(.navbar) { + max-width: 1200px; + padding-left: 80px; + padding-right: 80px; + } } +@media (max-width: 640px) { + .container:not(.navbar) { + padding: 15px !important; + } +} +@media (min-width: 640px) { + .hide-on-desktop { + display: none !important; + } +} +@media (max-width: 640px) { + .hide-on-mobile { + display: none !important; + } + .verua-slider h1 { + text-align: center; + } + h1:not(.verua-slider h1) { + font-size: 2em !important; + } + .alert { + width: 95% !important; + } + .alert > div:nth-child(2) { + margin: 5px 0; + } + section { + background: transparent !important; + padding: 10px 0 !important; + } + section h1:not(.verua-slider h1) { + color: black !important; + text-shadow: none !important; + } +} +@media (max-height: 770px) { + section { + padding-top: 50px !important; + padding-bottom: 10px !important; + } +} table .far { - color: #333!important; - font-size: 18px!important; - margin: 0!important; + color: #333 !important; + font-size: 18px !important; + margin: 0 !important; } -.content thead, .content tr, .content td, .content th { - background-color: #fafafa; - border:0; - font-size:1em; - // padding-left:0; +.content thead, +.content tr, +.content td, +.content th { + background-color: #fafafa; + border: 0; + font-size: 1em; + // padding-left:0; } -.content thead strong, .content tr strong, .content td strong, .content th strong { - font-weight:800; +.content thead strong, +.content tr strong, +.content td strong, +.content th strong { + font-weight: 800; } .content table { - font-size:1em; + font-size: 1em; } /* Formular */ form { - max-width: 64rem; - margin-left: auto; - margin-right: auto; - } - - form div { - margin-bottom: 1rem; - } - - form label { - margin-bottom: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - color: #4B5563; - } - - form select, form input:not([type="checkbox"]), form textarea { - width: 100%; - padding: 0.5rem 1rem; - border: 1px solid #D1D5DB; - border-radius: 0.375rem; - } - - form select:focus, - form input:focus, - form textarea:focus { - outline: none; - border-color: #3B82F6; - box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); - } - - form button, #notification { - width:400px; - padding: 0.5rem 1rem; - margin-bottom:10px!important; - margin-top:10px; - margin-left: auto; - margin-right: auto; - border-radius: 0.375rem; - text-align:center; - } + max-width: 64rem; + margin-left: auto; + margin-right: auto; +} + +form div { + margin-bottom: 1rem; +} + +form label { + margin-bottom: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + color: #4b5563; +} + +form select, +form input:not([type='checkbox']), +form textarea { + width: 100%; + padding: 0.5rem 1rem; + border: 1px solid #d1d5db; + border-radius: 0.375rem; +} + +form select:focus, +form input:focus, +form textarea:focus { + outline: none; + border-color: #3b82f6; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); +} + +form button, +#notification { + width: 400px; + padding: 0.5rem 1rem; + margin-bottom: 10px !important; + margin-top: 10px; + margin-left: auto; + margin-right: auto; + border-radius: 0.375rem; + text-align: center; +} form .submitbutton { - background-color: #a9cd2e; - align-self: center; + background-color: #a9cd2e; + align-self: center; } form button:hover { - background-color: #2563EB; + background-color: #2563eb; } form .submitbutton:hover { - background-color: #88a625; + background-color: #88a625; } form .submitbutton:disabled { - background-color: #ccc; - cursor: not-allowed; + background-color: #ccc; + cursor: not-allowed; +} +.captcha-container { + box-shadow: none !important; +} +#captcha-response { + display: none; +} +.captcha-refresh { + background-color: white !important; + color: black !important; +} +.captcha-verify { + background-color: white !important; + color: black !important; + border: 1px solid #000 !important; +} +.captcha-verify:hover, +.captcha-refresh:hover { + background-color: #ebebeb !important; + color: rgb(42, 42, 42) !important; +} + +.input-tooltip { + position: relative; +} + +.input-tooltip:before { + content: attr(data-tooltip); + position: absolute; + left: 0; // Adjust the left position here + transform: translateY(-50%); + color: #fff; + background: #333; + padding: 5px; + border-radius: 5px; + transition: opacity 0.3s ease-in-out; + pointer-events: none; + @apply px-4; } - .captcha-container { - box-shadow: none!important; - } - #captcha-response { display:none; } - .captcha-refresh { - background-color: white!important; - color:black!important; - } - .captcha-verify { - background-color: white!important; - color:black!important; - border: 1px solid #000!important; - } - .captcha-verify:hover, .captcha-refresh:hover { - background-color: #ebebeb!important; - color:rgb(42, 42, 42)!important; - } -.input-tooltip { - position: relative; - } - - .input-tooltip:before { - content: attr(data-tooltip); - position: absolute; - left: 0; // Adjust the left position here - transform: translateY(-50%); - color: #fff; - background: #333; - padding: 5px; - border-radius: 5px; - transition: opacity 0.3s ease-in-out; - pointer-events: none; - @apply px-4; - } - /**** Utility *****/ .aligncenter * { - text-align: center; - margin-left: auto; - margin-right: auto; + text-align: center; + margin-left: auto; + margin-right: auto; } .accordion-collapse { - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease; - } + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; +} .fadeOut { - @apply transition-opacity duration-500 ease-in-out opacity-0; - } - .fadeIn { - @apply transition-opacity duration-1000 ease-in-out opacity-100; - } + @apply transition-opacity duration-500 ease-in-out opacity-0; +} +.fadeIn { + @apply transition-opacity duration-1000 ease-in-out opacity-100; +} - // Honeypot- und Validierungsfelder im Bestellformular - #verify_email, #age, #hobbies { - display:none; +// Honeypot- und Validierungsfelder im Bestellformular +#verify_email, +#age, +#hobbies { + display: none; +} +@keyframes spin { + from { + transform: rotate(0deg); } - @keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - .spinner { - border: 2px solid transparent; /* Make spinner background transparent */ - border-top-color: currentColor; /* Use current text color for spinner */ - border-right-color: currentColor; /* Use current text color for spinner */ - border-radius: 99999px; /* Fully rounded edges */ - width: 1em; /* Relative to font size */ - height: 1em; /* Relative to font size */ - animation: spin 1s linear infinite; /* Apply the spin animation */ + to { + transform: rotate(360deg); } +} +.spinner { + border: 2px solid transparent; /* Make spinner background transparent */ + border-top-color: currentColor; /* Use current text color for spinner */ + border-right-color: currentColor; /* Use current text color for spinner */ + border-radius: 99999px; /* Fully rounded edges */ + width: 1em; /* Relative to font size */ + height: 1em; /* Relative to font size */ + animation: spin 1s linear infinite; /* Apply the spin animation */ +} - -/**************** Component Styles ******************/ +/**************** Component Styles ******************/ // Icons .verua-icon { - margin: 20px 0; + margin: 20px 0; } - - // Verua Slider @media (max-width: 1200px) { - .verua-slider-wrapper .verua-slider .slides h1 { - margin-top:0px; - } - .hero-slider { - margin-top:-200px; - } + .verua-slider-wrapper .verua-slider .slides h1 { + margin-top: 0px; + } + .hero-slider { + margin-top: -200px; + } } .verua-slider-wrapper { - position: relative; - width: 100%; - color: #fff; + position: relative; + width: 100%; + color: #fff; } .verua-slider-wrapper .verua-slider { - position: relative; - width: 100%; + position: relative; + width: 100%; } .verua-slider-wrapper .verua-slider .slides { - position: absolute; - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - overflow: hidden; - opacity: 0; - transition: 0.3s ease-in-out; + position: absolute; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + overflow: hidden; + opacity: 0; + transition: 0.3s ease-in-out; } .verua-slider-wrapper .verua-slider .slides.current { - // z-index: 1; - opacity: 1; + // z-index: 1; + opacity: 1; } .verua-slider-wrapper .verua-slider .slides:nth-child(1) { - background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2339009/pexels-photo-2339009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); - background-size: cover; - background-attachment: fixed; - background-position: center; - background-repeat: no-repeat; + background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), + url('https://images.pexels.com/photos/2339009/pexels-photo-2339009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); + background-size: cover; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; } .verua-slider-wrapper .verua-slider .slides:nth-child(2) { - background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2303337/pexels-photo-2303337.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); - background-size: cover; - background-attachment: fixed; - background-position: center; - background-repeat: no-repeat; + background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), + url('https://images.pexels.com/photos/2303337/pexels-photo-2303337.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); + background-size: cover; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; } .verua-slider-wrapper .verua-slider .slides:nth-child(3) { - background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2346091/pexels-photo-2346091.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); - background-size: cover; - background-attachment: fixed; - background-position: center; - background-repeat: no-repeat; + background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), + url('https://images.pexels.com/photos/2346091/pexels-photo-2346091.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); + background-size: cover; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; } .verua-slider-wrapper .verua-slider .slides:nth-child(4) { - background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/1168764/pexels-photo-1168764.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); - background-size: cover; - background-attachment: fixed; - background-position: center; - background-repeat: no-repeat; + background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), + url('https://images.pexels.com/photos/1168764/pexels-photo-1168764.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); + background-size: cover; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; } .verua-slider-wrapper .verua-slider .slides:nth-child(5) { - background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); - background-size: cover; - background-attachment: fixed; - background-position: center; - background-repeat: no-repeat; + background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), + url('https://images.pexels.com/photos/2693529/pexels-photo-2693529.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'); + background-size: cover; + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; } .verua-slider-wrapper .verua-slider .slides h1 { - font-family: "MontserratVar" !important; - font-weight:700; - color: white; - text-shadow: 0px 0.5px 12px rgba(0, 0, 0, 0.9); - transition: 0.3s linear; + font-family: 'MontserratVar' !important; + font-weight: 700; + color: white; + text-shadow: 0px 0.5px 12px rgba(0, 0, 0, 0.9); + transition: 0.3s linear; } .verua-slider-wrapper .verua-slider .slides.current h1 { - animation: animateHeading 0.3s linear forwards 1; - animation-delay: 0.2s; - opacity: 0; + animation: animateHeading 0.3s linear forwards 1; + animation-delay: 0.2s; + opacity: 0; } @keyframes animateHeading { - to { - opacity: 1; - } + to { + opacity: 1; + } } .verua-slider-wrapper .verua-slider .slides p { - text-shadow: 0px 0.5px 5px rgba(0, 0, 0, 0.5); - transition: 0.3s linear; - opacity: 0; + text-shadow: 0px 0.5px 5px rgba(0, 0, 0, 0.5); + transition: 0.3s linear; + opacity: 0; } .verua-slider-wrapper .verua-slider .slides.current p { - animation: animateparagraph 0.3s linear forwards 1; - animation-delay: 0.2s; + animation: animateparagraph 0.3s linear forwards 1; + animation-delay: 0.2s; } @keyframes animateparagraph { - to { - opacity: 1; - } + to { + opacity: 1; + } } .verua-slider-wrapper .prev { - position: fixed; - color: #fff; - top: 50%; - left: 5%; - transform: translateY(-50%); - // z-index: 99; - font-size: 1.5em; - font-weight: 600; - border: 2px solid #fff; - padding: 10px 17px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - transition: 0.2s ease-in-out; - cursor: pointer; - box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.9); + position: fixed; + color: #fff; + top: 50%; + left: 5%; + transform: translateY(-50%); + // z-index: 99; + font-size: 1.5em; + font-weight: 600; + border: 2px solid #fff; + padding: 10px 17px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: 0.2s ease-in-out; + cursor: pointer; + box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.9); } .verua-slider-wrapper .next { - position: fixed; - color: #fff; - top: 50%; - right: 5%; - transform: translateY(-50%); - // z-index: 99; - font-size: 1.5em; - font-weight: 600; - border: 2px solid #fff; - padding: 10px 17px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - transition: 0.2s ease-in-out; - cursor: pointer; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); + position: fixed; + color: #fff; + top: 50%; + right: 5%; + transform: translateY(-50%); + // z-index: 99; + font-size: 1.5em; + font-weight: 600; + border: 2px solid #fff; + padding: 10px 17px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + transition: 0.2s ease-in-out; + cursor: pointer; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } .verua-slider-wrapper .prev:hover, .verua-slider-wrapper .next:hover { - background: #16a085; - border-color: #16a085; + background: #16a085; + border-color: #16a085; } .verua-slider-wrapper a { - position: fixed; - color: #fff; - bottom: 15%; - left: 50%; - transform: translateX(-50%); - // z-index: 99; - font-size: 1em; - font-weight: 500; - border: 1px solid #16a; - padding: 10px 17px; - line-height: 1.2em; - display: flex; - align-items: center; - justify-content: center; - border-radius: 2px; - transition: 0.2s ease-in-out; - cursor: pointer; - text-decoration: none; - background: #16a; - box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); + position: fixed; + color: #fff; + bottom: 15%; + left: 50%; + transform: translateX(-50%); + // z-index: 99; + font-size: 1em; + font-weight: 500; + border: 1px solid #16a; + padding: 10px 17px; + line-height: 1.2em; + display: flex; + align-items: center; + justify-content: center; + border-radius: 2px; + transition: 0.2s ease-in-out; + cursor: pointer; + text-decoration: none; + background: #16a; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } .verua-slider-wrapper a:hover { - background: #017f -} \ No newline at end of file + background: #017f; +}