:root {
--headerHeight: 120px;
--headerHeightScrolled: 84px;
--headerHeightMobile: 120px; }  @font-face {
font-display: swap; font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: url(https://www.huespectives.de/wp-content/themes/huespectives2024/fonts/lato-v24-latin-300.woff2) format("woff2"); } @font-face {
font-display: swap; font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url(https://www.huespectives.de/wp-content/themes/huespectives2024/fonts/lato-v24-latin-regular.woff2) format("woff2"); } @font-face {
font-display: swap; font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url(https://www.huespectives.de/wp-content/themes/huespectives2024/fonts/lato-v24-latin-700.woff2) format("woff2"); }
@font-face {
font-family: 'Radiate Sans';
src: url(//www.huespectives.de/wp-content/themes/huespectives2024/fonts/RadiateSans-SemiBold.woff2) format("woff2"), url(//www.huespectives.de/wp-content/themes/huespectives2024/fonts/RadiateSans-SemiBold.woff) format("woff");
font-weight: 600;
font-style: normal;
font-display: swap; }
@font-face {
font-family: 'Radiate Sans Light Sm Expanded';
src: url(//www.huespectives.de/wp-content/themes/huespectives2024/fonts/RadiateSans-LightSemiExpandedItalic.woff2) format("woff2"), url(//www.huespectives.de/wp-content/themes/huespectives2024/fonts/RadiateSans-LightSemiExpandedItalic.woff) format("woff");
font-weight: 300;
font-style: italic;
font-display: swap; }
@font-face {
font-family: 'Radiate Sans Semi Expanded';
src: url(//www.huespectives.de/wp-content/themes/huespectives2024/fonts/RadiateSans-RegularSemiExpandedItalic.woff2) format("woff2"), url(//www.huespectives.de/wp-content/themes/huespectives2024/fonts/RadiateSans-RegularSemiExpandedItalic.woff) format("woff");
font-weight: normal;
font-style: italic;
font-display: swap; }
html {
scroll-behavior: smooth;
scroll-padding-top: var(--headerHeightScrolled); }
@media screen and (max-width: 767px) {
html {
scroll-padding-top: calc( var(--headerHeightMobile) + 30px ); } }
body, body.block-editor-page .editor-styles-wrapper {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
line-height: 140%;
letter-spacing: 0.025em;
color: #000000; background: #ffffff; }
@media screen and (max-width: 767px) {
body {
font-size: 18px; } } body:not(.wp-admin) a, body:not(.wp-admin) a:hover, body:not(.wp-admin) a:visited, body:not(.wp-admin) a:focus {
position: relative;
color: currentColor;
text-decoration: none;
text-underline-offset: 3px;
transition: opacity 0.5s ease-out, transform 0.3s ease-out; } body:not(.wp-admin) a:not(.wp-block-button__link):before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 1px;
bottom: -5px;
left: 0;
background-color: currentColor;
transform: scaleX(0);
transform-origin: center bottom;
opacity: 0;
transition: opacity 0.5s ease-out, transform 0.3s ease-out; }
body:not(.wp-admin) nav a:hover::before, body:not(.wp-admin) main a:hover::before, body:not(.wp-admin) footer a:hover::before, body:not(.home):not(.wp-admin) li.current-menu-item a::before, body:not(.wp-admin) li.emvy-active-item a::before {
transform: scaleX(1);
opacity: 1; } a.wp-block-button__link {
position: relative;
transform: scale(1);
transition: all 0.4s; }
a.wp-block-button__link:hover {
color: #ffffff !important;
transform: scale(1.05);
border: 2px solid #000000; }
a.wp-block-button__link:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 9999px;
background-color: #000000;
z-index: -1;
opacity: 0;
clip-path: inset(0% 0% 100% 0%);
transition: clip-path 0.6s, opacity 0.6s 0.6s; }
a.wp-block-button__link:hover:after {
opacity: 1;
clip-path: inset(0% 0% 0% 0%);
transition: all 0.3s ease-in-out; } p {
text-align: justify; }
* > p:first-child {
margin-block-start: 0; }
* > p:last-child {
margin-bottom: 0; } h1, .h1 {
font-family: "Radiate Sans Semi Expanded";
font-weight: normal;
font-style: italic;
font-size: 78px;
line-height: 120%;
text-transform: uppercase;
margin-bottom: 84px; }
@media screen and (max-width: 767px) {
h1, .h1 {
font-size: 40px;
margin-bottom: 60px; } }
h2, .h2 {
font-family: "Radiate Sans";
font-weight: 600;
font-size: 24px;
line-height: 120%;
text-transform: uppercase;
margin-bottom: 30px; }
@media screen and (max-width: 767px) {
h2, .h2 {
font-size: 21px; } }
h3, .h3 {
font-family: "Radiate Sans";
font-weight: 600;
font-size: 20px;
line-height: 120%;
margin-bottom: 21px; }
@media screen and (max-width: 767px) {
h3, .h3 {
font-size: 20px; } } body:not(.wp-admin) p, body:not(.wp-admin) h1, body:not(.wp-admin) .h1, body:not(.wp-admin) h2, body:not(.wp-admin) .h2, body:not(.wp-admin) h3, body:not(.wp-admin) .h3, body:not(.wp-admin) h4, body:not(.wp-admin) .h4, body:not(.wp-admin) h5, body:not(.wp-admin) .h5 {
transform: translateY(calc(0px - (1em / 4.5))); }
.has-large-font-size {
font-size: 38px;
line-height: 141%;
transform: translateY(calc(0px - (1em / 4.5) - 0.12em)); }
@media screen and (max-width: 500px) {
.has-large-font-size {
font-size: 7.5vw !important; } }
.zitat .has-large-font-size em {
font-family: "Radiate Sans Semi Expanded";
font-weight: normal;
font-style: italic; }
.zitat p em {
font-family: "Radiate Sans Light Sm Expanded";
font-weight: 300; } body:not(.wp-admin) header { position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: var(--headerHeight);
padding-left: 42px;
padding-right: 42px;
z-index: 2;
background-color: #ffffff;
font-weight: 400;
font-size: 20px;
line-height: 100%;
text-transform: uppercase;
transition: height 0.6s ease-in-out, box-shadow 0.0s 0.0s ease-in-out; }
@media screen and (max-width: 767px) {
body:not(.wp-admin) header {
height: var(--headerHeightMobile);
padding-left: 5vw;
padding-right: 5vw;
position: fixed;
z-index: 102;
width: 100vw; } }
body.scrolled:not(.wp-admin) header {
height: var(--headerHeightScrolled);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
transition: height 0.6s ease-in-out, box-shadow 0.6s ease-in-out; }
header .logo-wrapper img {
width: 374px;
max-width: 62.4vw;
height: auto;
border: none;
outline: none; }
header .logo-wrapper img {
width: 374px;
height: auto;
border: none;
outline: none;
opacity: 1;
transition: opacity 0.6s ease-in-out; }
body.scrolled header .logo-wrapper img {
opacity: 0; }
header .logo-wrapper a {
display: block;
position: relative; }
header .logo-wrapper a:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(//www.huespectives.de/wp-content/themes/huespectives2024/img/logo-icon.png) no-repeat left center;
background-size: contain;
z-index: -1;
opacity: 0;
transform: translateX(30px) scale(0.87);
transition: all 0.6s ease-in-out; }
body.scrolled header .logo-wrapper a:after {
opacity: 1;
transform: translateX(0px) scale(1); }
@media screen and (max-width: 1023px) {
header nav {
display: flex;
flex-direction: column;
justify-content: center;
position: fixed;
width: 100vw;
height: calc(100vh - var(--headerHeight));
left: 0;
top: var(--headerHeight);
padding-bottom: 60px;
background: rgba(255, 255, 255, 0.95);
opacity: 0;
pointer-events: none;
transition: all 500ms; }
body.scrolled header nav {
height: calc(100vh - var(--headerHeightScrolled));
top: var(--headerHeightScrolled); }
body.menu-active header nav {
opacity: 1;
pointer-events: all; } }
header nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex; }
@media screen and (max-width: 1023px) {
header nav ul {
flex-direction: column; } }
@media screen and (max-width: 1023px) {
header nav ul li {
font-size: 28px;
text-align: center;
margin-bottom: 42px; } }
header nav ul li:not(:first-child) {
margin-left: 30px; }
@media screen and (max-width: 1023px) {
header nav ul li:not(:first-child) {
margin-left: 0; } }
header nav ul li.current-menu-item a:after {
background: linear-gradient(0deg, currentColor, currentColor);
background-size: 100% 3px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: all 400ms; } @media screen and (max-width: 1023px) {
.menu_icon_wrapper {
display: flex;
height: 20px;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
cursor: pointer;
transition: 0.5s; }
.menu_icon_wrapper .bar {
width: 36px;
height: 3px;
border-radius: 1px;
background: #000000;
margin-left: auto;
margin-right: auto;
transition: 0.4s; }
.menu_icon_wrapper:hover .bar {
background: #999; } body.menu-active .menu_icon_wrapper .bar1 {
transform: translateY(8.5px) rotate(45deg); } body.menu-active .menu_icon_wrapper .bar2 {
opacity: 0; } body.menu-active .menu_icon_wrapper .bar3 {
transform: translateY(-8.5px) rotate(-45deg); } } ul.menu > li.wpml-ls-item *:before {
display: none !important; }
@media screen and (min-width: 1024px) {
header nav ul.menu > li.wpml-ls-item {
font-size: 0.62em;
font-weight: 300;
cursor: pointer; }
ul.menu > li.wpml-ls-item > a {
border: 1px solid #000000;
border-radius: 9999px;
padding-left: 11px;
padding-right: 11px;
pointer-events: none; }
ul.menu > li.wpml-ls-item > a:after {
content: ">";
transform: rotate(90deg);
margin-left: 3px; }
ul.menu > li.wpml-ls-item > ul.sub-menu {
background-color: #ffffff;
padding-left: 11px;
padding-right: 11px;
opacity: 0;
transform: translateY(-4px);
transition: all 0.25s; }
ul.menu > li.wpml-ls-item.expanded > ul.sub-menu {
opacity: 1;
transform: translateY(0px); } }
@media screen and (max-width: 1023px) {
header nav ul.menu > li.wpml-ls-item {
display: flex;
flex-direction: row;
justify-content: center; }
header nav ul.menu li.wpml-ls-item a {
font-size: 0.62em;
font-weight: 300;
cursor: pointer;
align-items: flex-start;
padding-left: 5px;
padding-right: 5px; } }
main {
padding-top: var(--headerHeight); }
@media screen and (max-width: 767px) {
main {
padding-left: 5vw;
padding-right: 5vw; } }
body:not(.home) main {
background-color: #f6f6f6;
padding-top: calc(var(--headerHeight) + 120px); padding-bottom: calc(237px - 168px); } footer {
margin-left: 42px;
margin-right: 42px;
padding-top: 60px;
padding-bottom: 60px; }
@media screen and (max-width: 767px) {
footer {
margin-left: 5vw;
margin-right: 5vw;
padding-top: 84px;
padding-bottom: 84px; } }
body.home footer {
border-top: 1px solid #000000; }
figure video {
max-width: 100%; }