html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
.fl-page {
min-height: 100vh;
}
a:focus,
button:focus {
outline: none;
}
.page-id-14 .fl-page{
background-color: rgba(0, 0, 0, 0.5);
}
button:hover, input[type=button]:hover, input[type=submit]:hover {
border: none;
}
@font-face {
font-family: "Krasz Black";
src:  url(//noxfestival.de/wp-content/themes/bb-theme-child/fonts/Krasz-BlackItalic.woff2) format("woff2");
font-weight: 200 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Krasz Bold";
src:  url(//noxfestival.de/wp-content/themes/bb-theme-child/fonts/Krasz-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Krasz Bold";
src:  url(//noxfestival.de/wp-content/themes/bb-theme-child/fonts/Krasz-BoldItalic.woff2) format("woff2");
font-weight: 700;
font-style: italic;
font-display: swap;
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: 1.5px;
} .nox-header {
position: fixed;
top: 24px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 48px);
max-width: 1200px;
z-index: 1000;
}
body.admin-bar .nox-header {
top: calc(24px + 32px);
}
.nox-header--scroll-reveal {
transform: translateX(-50%) translateY(-200px);
transition: transform 0.4s ease;
}
.nox-header--scroll-reveal.is-visible {
transform: translateX(-50%) translateY(0);
}
.nox-header__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
body.nox-menu-open .nox-header__bar {
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
box-shadow: none;
}
.nox-header__logo {
display: block;
line-height: 0;
position: relative;
}
.nox-header__logo::after,
.nox-glitch::after {
content: "";
position: absolute;
inset: 0;
background: #000;
-webkit-mask-image: url(//noxfestival.de/wp-content/themes/bb-theme-child/images/nox-logo-white.svg);
mask-image: url(//noxfestival.de/wp-content/themes/bb-theme-child/images/nox-logo-white.svg);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
opacity: 0;
pointer-events: none;
animation: nox-glitch-black 10s steps(1, end) infinite;
}
.nox-header__logo img {
display: block;
height: 32px;
width: auto;
}
.nox-header__toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 32px;
height: 32px;
padding: 0;
background: none;
border: none;
cursor: pointer;
}
.nox-header__toggle span {
display: block;
width: 100%;
height: 2px;
background: #fff;
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.nox-header__toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nox-header__toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nox-header__toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.nox-header button:hover, .nox-header button:active, .nox-header button:focus {
background: none !important;
border: none;
} .nox-overlay-menu {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.nox-overlay-menu.is-open {
opacity: 1;
visibility: visible;
}
.nox-overlay-menu__list {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nox-overlay-menu__list a {
display: inline-block;
padding: 16px 0;
color: #fff;
font-family: "Krasz Bold", Verdana, Arial, sans-serif;
font-size: 48px;
font-weight: 700;
font-style: normal;
text-decoration: none;
transition: opacity 0.2s ease;
}
.nox-overlay-menu__list a:hover,
.nox-overlay-menu__list a:focus {
opacity: 0.6;
}
body.nox-menu-open {
overflow: hidden;
}
.nox-glitch-replace img,
img.nox-glitch-replace {
transition: transform 0.1s ease;
}
.nox-glitch-overlay {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.15s ease, transform 0.1s ease;
pointer-events: none;
}
.nox-glitch-overlay.is-visible {
opacity: 1;
}
.nox-glitch {
position: relative;
-webkit-mask-image: repeating-linear-gradient(to bottom, #000 0, #000 7px, transparent 7px, transparent 8px);
mask-image: repeating-linear-gradient(to bottom, #000 0, #000 7px, transparent 7px, transparent 8px);
-webkit-mask-size: 100% 200%;
mask-size: 100% 200%;
animation: nox-glitch-stripes 8s steps(16) infinite;
}
@media (prefers-reduced-motion: reduce) {
.nox-glitch {
animation: none;
-webkit-mask-image: none;
mask-image: none;
}
.nox-header__logo::after,
.nox-glitch::after {
animation: none;
opacity: 0;
}
}
@keyframes nox-glitch-stripes {
to {
-webkit-mask-position: 0 -100%;
mask-position: 0 -100%;
}
}
@keyframes nox-glitch-black {
0%, 17.9%, 18.8%, 41.9%, 42.6%, 43.1%, 43.8%, 76.9%, 77.5%, 100% {
opacity: 0;
clip-path: inset(0 0 100% 0);
}
18% {
opacity: 1;
clip-path: inset(10% 0 65% 0);
}
42% {
opacity: 1;
clip-path: inset(55% 0 15% 0);
}
43.2% {
opacity: 1;
clip-path: inset(35% 0 40% 0);
}
77% {
opacity: 1;
clip-path: inset(0% 0 80% 0);
}
}
@media (max-width: 768px) {
.nox-header {
top: 12px;
width: calc(100% - 24px);
}
body.admin-bar .nox-header {
top: calc(12px + 46px);
}
.nox-header__bar {
padding: 10px 16px;
}
.nox-overlay-menu__list a {
font-size: 32px;
}
}
.nox-sticky-player {
position: fixed; bottom: 30px; left: 30px; z-index: 9999; } @media (max-width: 768px) {
.nox-sticky-player {
bottom: 15px;
left: 15px;
padding: 8px 12px;
}
} .wpcf7-form {
background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); padding: 50px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1); max-width: 800px;
margin: 40px auto;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); } .wpcf7-form label {
display: block;
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.9); font-weight: 500;
font-size: 14px;
}
.wpcf7-form h3 {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 12px;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.3rem;
color: #fff;
}
.wpcf7-form p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
} .wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap input[type="tel"],
.wpcf7-form-control-wrap input[type="date"],
.wpcf7-form-control-wrap textarea {
width: 100%;
background-color: rgba(255, 255, 255, 0.08); color: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 18px 25px;
box-sizing: border-box;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap input[type="tel"],
.wpcf7-form-control-wrap input[type="date"] {
border-radius: 100px; }
.wpcf7-form-control-wrap textarea {
border-radius: 20px; } .wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 0 15px rgba(236, 64, 122, 0.6); } .wpcf7-form-control-wrap .wpcf7-checkbox,
.wpcf7-form-control-wrap .wpcf7-radio {
display: grid;
grid-template-columns: repeat(2, 1fr); gap: 15px;
margin-top: 15px;
margin-bottom: 25px;
} @media (max-width: 600px) {
.wpcf7-form-control-wrap .wpcf7-checkbox,
.wpcf7-form-control-wrap .wpcf7-radio {
grid-template-columns: 1fr;
}
}
.wpcf7-list-item {
margin: 0;
display: flex;
align-items: center;
}
.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
margin-top: 0;
margin-right: 12px;
} .wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px; cursor: pointer;
transition: all 0.2s ease;
}
.wpcf7-list-item input[type="radio"] {
border-radius: 50%; } .wpcf7-list-item input[type="checkbox"]:checked,
.wpcf7-list-item input[type="radio"]:checked {
background-color: #ec407a; border-color: #ec407a;
box-shadow: 0 0 10px rgba(236, 64, 122, 0.5);
} .wpcf7-form input[type="submit"] {
background: linear-gradient(45deg, #7b1fa2, #ec407a); color: #fff;
border-radius: 100px;
border: none;
padding: 18px 50px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
display: block;
width: 100%;
margin-top: 40px;
font-size: 1.1rem;
letter-spacing: 1px;
}
.wpcf7-form input[type="submit"]:hover {
box-shadow: 0 0 25px rgba(236, 64, 122, 0.6); transform: translateY(-3px); } .wpcf7-form hr {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin: 40px 0;
} .nox-artists {
display: flex;
flex-direction: column;
gap: 24px;
}
.nox-artist-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
min-height: 600px;
}
.nox-artist-card__visual {
position: relative;
display: flex;
flex-direction: column;
padding: 32px;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
color: #fff;
}
.nox-artist-card__time {
min-height: 1.3em;
font-family: "Krasz Bold", Verdana, Arial, sans-serif;
font-weight: 700;
font-size: 24px;
}
.nox-artist-card__photo {
position: relative;
margin: 24px 0;
}
.nox-artist-card__photo img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
filter: grayscale(1);
}
.nox-artist-card__name {
position: absolute;
left: -20px;
bottom: 0;
margin: 0;
padding: 20px 20px 20px 0;
scroll-margin-top: 120px;
font-family: "Krasz Black", Verdana, Arial, sans-serif;
font-style: italic;
font-weight: 800;
font-size: 36px;
line-height: 1.05;
text-transform: uppercase;
}
.nox-artist-card__category {
margin-top: auto;
padding-top: 24px;
font-family: "Krasz Bold", Verdana, Arial, sans-serif;
font-weight: 700;
font-size: 24px;
text-transform: uppercase;
text-align: right;
}
.nox-artist-card__info {
display: flex;
flex-direction: column;
padding: 48px;
background: #ff5f29;
color: #000;
}
.nox-artist-card--rot .nox-artist-card__info {
background: #ff5f29;
}
.nox-artist-card--blau .nox-artist-card__info {
background: #2f3f55;
color: #fff;
}
.nox-artist-card--lila .nox-artist-card__info {
background: #d08cea;
}
.nox-artist-card--gruen .nox-artist-card__info {
background: #426155;
color: #fff;
}
.nox-artist-card__info-heading {
margin: 0 0 24px;
font-family: "Krasz Bold", Verdana, Arial, sans-serif;
font-weight: 700;
font-size: 32px;
text-transform: uppercase;
color: #fff;
}
.nox-artist-card__content {
font-size: 16px;
line-height: 1.6;
}
.nox-artist-card__links {
margin-top: auto;
padding-top: 32px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.nox-artist-card__links a {
font-family: "Krasz Bold", Verdana, Arial, sans-serif;
font-weight: 700;
font-size: 28px;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.nox-artist-card__links a:hover,
.nox-artist-card__links a:focus {
opacity: 0.7;
}
@media (max-width: 900px) {
.nox-artist-card {
grid-template-columns: 1fr;
}
.nox-artist-card__name {
font-size: 36px;
}
}
.wpcf7-list-item {
margin: 0;
display: flex;
align-items: center;
}
.wpcf7-list-item label {
display: flex;
align-items: center;
}
@media (max-width: 768px) {
.wpcf7-form  {
padding: 50px 20px;
border-radius: 0px;
}
}