:root {
--fright-font-cinzil: "Cinzel", serif;
--fright-font-itNorms: "TT Norms Pro", sans-serif;
--frightNight-black: #090909;
--frightNight-light-grey: #d7d7d7;
--frightNight-red: #dc1e2d;
--frightNight-dark-red: #bb1421;
} header.frightHeader {
background-color: var(--frightNight-black);
& > div.frightHeaderContent {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 15px 15px 50px 15px;
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/fright-header-bg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 30vh;
background-color: rgba(0, 0, 0, 0.6);
background-blend-mode: multiply;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: flex-end;
gap: 10px;
a.exitFrightNightBtn {
position: absolute;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 15px;
border: none;
top: 0;
right: 0;
border-radius: 0 0 5px 5px;
border: 2px solid var(--frightNight-dark-red);
border-top: none;
transition-duration: 0.1s;
text-decoration: none;
svg {
width: 18px;
fill: var(--frightNight-red);
}
&:hover {
background-color: var(--frightNight-dark-red);
svg {
fill: var(--frightNight-black);
}
}
span {
font-size: clamp(0.8rem, 1vw, 0.9rem);
color: white;
}
}
a {
& > img {
max-width: 100%;
width: 100%;
}
}
& > span {
color: var(--frightNight-red);
font-family: var(--fright-font-cinzil);
font-weight: 600;
text-align: center;
font-size: clamp(1.1rem, 5vw, 2rem);
line-height: 110%;
}
}
} .frightNightContainer {
& > * {
letter-spacing: -0.5px;
line-height: 140%;
}
} div.frightNightContainer.frightNightPageContent {
& {
background-color: var(--frightNight-black);
}
& * {
color: var(--frightNight-light-grey);
font-family: var(--fright-font-cinzil);
}
.innerFrightContainer {
max-width: 1400px;
margin: 0 auto;
position: relative;
&::before,
&::after {
content: "";
width: clamp(15px, 5vw, 100px);
height: 100%;
position: absolute;
top: 0;
z-index: 1;
}
&::before {
background: linear-gradient(
to right,
var(--frightNight-black),
var(--frightNight-black),
transparent
);
left: 0;
}
&::after {
background: linear-gradient(
to left,
var(--frightNight-black),
var(--frightNight-black),
transparent
);
right: 0;
}
& > section {
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: top;
background-color: rgba(0, 0, 0, 0.6);
background-blend-mode: multiply;
padding: 15px 25px;
position: relative;
&::after {
content: "";
width: 100%;
height: 200px;
position: absolute;
bottom: -50px;
z-index: 1;
background: linear-gradient(
to bottom,
transparent,
var(--frightNight-black) 20%,
var(--frightNight-black) 80%,
transparent 100%
);
left: 0;
}
h1,
p,
span {
margin: 0;
}
p,
span {
font-weight: 600;
letter-spacing: -0.5px;
line-height: 140%;
text-transform: uppercase;
}
sup {
font-size: clamp(0.9rem, 2vw, 1.2rem);
}
& > div,
p {
position: relative;
z-index: 2;
}
&.frightSection1 {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/fright-section-1-img.webp);
padding-top: clamp(0px, 6vw, 50px);
&::before {
content: "";
width: 100%;
height: clamp(15px, 6vw, 30px);
position: absolute;
top: 0;
z-index: 1;
background: linear-gradient(
to bottom,
var(--frightNight-black),
var(--frightNight-black),
transparent
);
left: 0;
}
& > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
& > * {
text-align: center;
}
.neonRedTitle {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
span {
font-size: 5.6rem;
text-align: center;
line-height: 1;
color: #d82e2f; -webkit-animation: neon 1.5s ease-in-out infinite alternate;
animation: neon 1.5s ease-in-out infinite alternate;
color: var(--frightNight-red) !important;
font-weight: 800 !important;
font-size: clamp(2.26rem, 9vw, 5rem) !important;
}
}
span,
p {
font-size: clamp(1.3rem, 5vw, 2.5rem);
animation-name: glitch-anim-text;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
p {
animation-delay: 0.5s;
}
}
}
&.frightSection2 {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/fright-section-2.webp);
& > div {
display: flex;
justify-content: center;
position: relative;
top: -150px;
& > p {
text-align: center;
max-width: 30ch;
font-size: clamp(1.3rem, 4vw, 2.5rem);
}
}
}
&.frightSection3 {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/fright-section-3.webp);
& > div {
position: relative;
top: -400px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
& > p {
max-width: 38ch;
text-align: center;
font-size: clamp(1.2rem, 3vw, 2rem);
}
}
}
&.frightSection4 {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/fright-section-4.webp);
min-height: 160vh;
padding: 0;
background-color: rgba(0, 0, 0, 0.7);
&::after {
background: linear-gradient(
to top,
var(--frightNight-black),
var(--frightNight-black),
transparent
);
}
& > div {
padding: 15px 25px;
display: flex;
flex-direction: column;
align-items: center;
gap: 80px;
position: relative;
top: -250px;
& > p {
font-size: clamp(1.2rem, 3vw, 2rem);
max-width: 35ch;
text-align: center;
}
& > div.frightImportantInfo {
background-color: #363636;
padding: 50px 15px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
position: relative;
border-radius: 10px;
& > * {
font-family: var(--fright-font-itNorms);
font-weight: 500;
text-transform: unset;
}
h4 {
width: fit-content;
background-color: var(--frightNight-red);
padding: 10px 20px;
border-radius: 10px;
position: absolute;
top: -20px;
font-weight: 600;
font-size: clamp(1.2rem, 2vw, 1.4rem);
}
p {
font-size: clamp(0.9rem, 2vw, 1.3rem);
text-align: center;
max-width: 50ch;
}
a.frightRedBtn {
font-size: clamp(1rem, 3vw, 1.2rem);
padding: 10px 20px;
font-weight: 600;
margin-top: 10px;
display: none;
}
}
}
& > div.bookYourPlace {
position: relative;
top: -125px;
padding: 150px 10px 0 10px;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: clip;
& > div,
& > a {
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
& > div {
position: absolute;
background-size: contain;
&.lantern {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/lantern-black-and-white.webp);
width: 200px;
height: 350px;
top: -100px;
animation-name: lanternFlash;
}
&.lightGlow {
background-image: none;
width: 500px;
height: 100%;
top: 20px;
animation-name: lightGlowFlash;
}
}
& > a {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/fright-btn-bg-dark.webp);
background-color: #800c16 !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background-color: unset;
border-radius: 5px;
padding: 20px 40px;
font-size: clamp(1.3rem, 3vw, 1.6rem);
font-weight: 600;
text-decoration: none;
animation-name: buttonFlash;
transition-duration: 0.1s;
&:hover {
animation-fill-mode: forwards;
transform: scale(1.03);
}
&:active {
transform: scale(0.9);
}
& > span {
font-size: clamp(1.2rem, 2.6vw, 1.4rem);
}
}
}
@media (max-width: 767px) {
&::after {
height: 100px;
}
}
}
@media (min-width: 768px) {
& {
min-height: 130vh;
}
}
}
@media (min-width: 768px) {
&::before,
&::after {
content: "";
width: clamp(15px, 10vw, 200px);
height: 100%;
position: absolute;
top: 0;
z-index: 1;
}
}
}
}  @-webkit-keyframes neon {
from {
text-shadow: 0 0 8px rgba(216, 46, 47, 0.7), 0 0 20px rgba(216, 46, 47, 0.3),
0 0 10px rgba(255, 0, 0, 0.5), 0 0 18px rgba(255, 0, 0, 0.7),
0 0 25px rgba(255, 0, 0, 0.6), 0 0 35px rgba(255, 0, 0, 0.7);
}
to {
text-shadow: 0 0 10px rgba(216, 46, 47, 0.85),
0 0 25px rgba(216, 46, 47, 0.45), 0 0 12px rgba(139, 0, 0, 0.7),
0 0 20px rgba(139, 0, 0, 0.8), 0 0 30px rgba(139, 0, 0, 0.85),
0 0 45px rgba(139, 0, 0, 0.9);
}
}
@keyframes neon {
from {
text-shadow: 0 0 8px rgba(216, 46, 47, 0.5), 0 0 20px rgba(216, 46, 47, 0.3),
0 0 10px rgba(255, 0, 0, 0.3), 0 0 18px rgba(255, 0, 0, 0.7),
0 0 25px rgba(255, 0, 0, 0.6), 0 0 35px rgba(255, 0, 0, 0.3);
}
to {
text-shadow: 0 0 10px rgba(216, 46, 47, 0.65),
0 0 25px rgba(216, 46, 47, 0.25), 0 0 12px rgba(139, 0, 0, 0.55),
0 0 20px rgba(139, 0, 0, 0.65), 0 0 30px rgba(139, 0, 0, 0.55),
0 0 45px rgba(139, 0, 0, 0.7);
}
} @keyframes lanternFlash {
0% {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/lantern-black-and-white.webp);
}
5% {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/lantern.webp);
}
10% {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/lantern-black-and-white.webp);
}
50% {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/lantern.webp);
}
100% {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/lantern.webp);
}
}
@keyframes lightGlowFlash {
0% {
background-image: none;
}
5% {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/light-glow.webp);
}
10% {
background-image: none;
}
50% {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/light-glow.webp);
}
100% {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/light-glow.webp);
}
}
@keyframes buttonFlash {
0% {
background-image: none;
}
5% {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/fright-btn-bg-light.webp);
}
10% {
background-image: none;
}
50% {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/fright-btn-bg-light.webp);
}
100% {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/fright-btn-bg-light.webp);
}
}
@keyframes glitch-anim-text {
0% {
transform: translate3d(10px, 0, 0) scale3d(-1, -1, 1);
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
}
2% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
4% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
5% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
6% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
7% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
8% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
9% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
9.9% {
transform: translate3d(10px, 0, 0) scale3d(-1, -1, 1);
}
10%,
100% {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
} .frightRedBtn {
background-color: var(--frightNight-red);
border: none;
color: white;
font-size: 1rem;
border-radius: 5px;
padding: 10px;
transition-duration: 0.1s;
border: 2px solid var(--frightNight-red);
&:hover {
background-color: var(--frightNight-dark-red);
}
&.selected {
background-color: var(--frightNight-dark-red);
border-color: #ffffff;
}
}
.frightGreenBtn {
background-color: #198754;
border: none;
color: white;
font-size: 1rem;
border-radius: 5px;
padding: 10px;
transition-duration: 0.1s;
&:hover {
background-color: #157347;
color: white;
}
}
.errorMsg {
background: transparent;
border: 2px solid #f87171;
padding: 10px 15px !important;
color: var(--frightNight-light-grey);
font-size: 0.9rem;
border-radius: 5px;
& > span {
color: #f87171 !important;
margin-right: 5px;
}
}
.frightNightContainer {
background-color: var(--frightNight-black);
min-height: 70vh;
padding-bottom: clamp(50px, 10vw, 100px);
div.containerInner {
max-width: 500px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: clamp(25px, 4vw, 50px);
padding: clamp(25px, 4vw, 50px) 15px;
& > div.frightNightHeader {
display: flex;
justify-content: center;
align-items: center;
& > h2 {
color: var(--frightNight-red);
font-weight: 800;
font-size: clamp(2.5rem, 7vw, 4rem);
text-align: center;
}
}
section.frightNightForm {
width: 100%;
& > div.steps {
div.step-container {
position: relative;
background-color: #363636;
border-radius: 5px;
padding: clamp(15px, 3vw, 30px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 30px;
&:not(:first-of-type) {
top: -10px;
}
h3,
span,
p {
color: var(--frightNight-light-grey);
}
h3 {
font-size: clamp(1.4rem, 3vw, 1.6rem);
}
button.prevStep {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
& > span {
font-size: 0.9rem;
}
}
.frightInput {
background-color: white;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.4);
border-radius: 5px;
padding: 10px;
font-size: 1rem;
}
&[step="1"] {
div.frightTermsNotice {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
& > p {
font-size: clamp(0.9rem, 2vw, 1rem);
line-height: 140% !important;
border: 2px solid #f87171;
border-radius: 5px;
padding: 10px;
color: white;
display: flex;
align-items: center;
gap: 10px;
& > svg {
width: 40px;
fill: #f87171;
height: 40px;
}
}
& > div.termsReadInput {
display: grid;
grid-template-columns: 1fr auto;
background-color: var(--frightNight-light-grey);
border-radius: 5px;
width: fit-content;
label {
color: #f2f2f2;
font-size: 1rem;
background-color: #8a8a8a;
padding: 10px;
border-radius: 5px 0 0 5px;
}
input {
width: 26px;
height: 26px;
margin: auto 10px;
}
}
}
&:not(:has(input#frightTermsRead:checked)) {
.selectYourDate {
display: none;
}
}
}
&[step="1"],
&[step="2"] {
div.dates,
div.times {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
width: 100%;
button.frightRedBtn {
font-size: 0.9rem;
}
}
div.dates {
grid-template-columns: repeat(1, 1fr);
}
div.times {
grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 481px) {
& {
div.dates {
grid-template-columns: repeat(2, 1fr);
}
div.times {
grid-template-columns: repeat(5, 1fr);
}
}
}
}
&[step="2"] {
div.attendees {
& > div {
display: flex;
input.frightInput {
text-align: center;
max-width: 125px;
width: 100%;
padding: 15px;
border-radius: 5px 0 0 5px;
}
button.frightGreenBtn {
border-radius: 0 5px 5px 0;
padding: 10px 40px;
max-width: 125px;
width: 100%;
}
}
}
}
&[step="3"] {
div.customer-details {
& > div.nameNumEmail,
& > div.billingAddress {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
& > div.nameNumEmail {
& > div.input-container:nth-of-type(3),
& > div.input-container:nth-of-type(4) {
grid-column: span 2;
}
}
& > div.billingAddress {
padding: 10px;
background-color: #5e5e5e;
border-radius: 5px;
}
& > h4 {
font-size: 1.1rem;
color: var(--frightNight-light-grey);
}
div.input-container {
&:last-of-type {
grid-column: span 2;
}
&,
input,
select {
width: 100%;
}
label {
width: fit-content;
}
label {
color: white;
font-size: 0.9rem;
display: block;
margin-bottom: 5px;
}
}
}
button.makePaymentBtn {
padding: 15px 50px;
font-size: clamp(1.1rem, 4vw, 1.2rem);
width: 100%;
}
}
&[step="4"] {
& > div.msg-container {
display: flex;
flex-direction: column;
align-items: start;
gap: 20px;
}
}
div.selectOptionsTable {
display: grid;
grid-template-columns: auto 1fr;
max-width: fit-content;
&:not(:has(div.tableRow:nth-of-type(2))) {
div.tableRow {
& > div:nth-of-type(1) {
border-radius: 5px 0 0 5px;
}
& > div:nth-of-type(2) {
border-radius: 0 5px 5px 0;
}
}
}
&:has(div.tableRow:nth-of-type(2)) {
div.tableRow:first-of-type {
& > div:nth-of-type(1) {
border-radius: 5px 0 0 0;
}
& > div:nth-of-type(2) {
border-radius: 0 5px 0 0;
}
}
div.tableRow:last-of-type {
& > div:nth-of-type(1) {
border-radius: 0 0 0 5px;
}
& > div:nth-of-type(2) {
border-radius: 0 0 5px 0;
}
}
}
div.tableRow {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
&:not(:first-of-type) {
border-top: 1px solid rgba(255, 255, 255, 0.6);
}
& > div {
padding: 10px 15px;
font-size: 0.9rem;
}
& > div:nth-of-type(1) {
background-color: #8a8a8a;
color: white;
}
& > div:nth-of-type(2) {
background-color: var(--frightNight-light-grey);
color: var(--frightNight-black);
text-align: right;
}
}
}
}
}
}
}
} div.frightNightContainer.frightNight-termsAndConditions {
padding: 15px;
& > div.innerFrightContainer {
background-color: #363636;
padding: clamp(15px, 3vw, 30px);
gap: 20px;
margin: 0 auto;
max-width: 55ch;
display: flex;
flex-direction: column;
border-radius: 5px;
& *:not(h1, h2, h3, h4, h5) {
color: #f2f2f2;
}
h1 {
font-family: "TT Norms Pro", sans-serif;
color: #f2f2f2;
margin: 0 0 10px 0;
font-weight: 600;
font-size: clamp(1.4rem, 3vw, 1.6rem);
}
h3 {
color: #f2f2f2;
font-weight: 600;
background: var(--frightNight-red);
padding: 10px;
border-radius: 5px;
font-size: clamp(1.2rem, 3vw, 1.4rem);
}
ul,
ol {
display: flex;
flex-direction: column;
gap: 20px;
}
a.frightGreenBtn {
max-width: 300px;
padding: 15px;
font-size: clamp(1rem, 3vw, 1.2rem);
display: flex;
justify-content: center;
gap: 10px;
svg {
width: 16px;
fill: white;
}
}
}
}
.disabled-time-slot {
opacity: 0.6;
pointer-events: none;
text-decoration: line-through;
}