:root {
--frightNight-black: #090909;
--frightNight-red: #dc1e2d;
--frightNight-dark-red: #bb1421;
} .seasonalPromoHeader {
width: 100%;
min-height: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
text-decoration: none;
position: relative;
transition-duration: 0.1s;
&:hover {
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.4);
}
&:active {
& > div:nth-of-type(2) {
transform: scale(0.95);
}
}
& > div.seasonalBgLeft,
& > div.seasonalBgRight {
background-size: cover;
}
& > div.seasonalBgLeft {
grid-area: 1 / 1 / 1 / 2;
background-position: 40% 50%;
}
& > div.seasonalBgRight {
grid-area: 1 / 2 / 1 / 3;
background-position: 15% 50%;
transform: scaleY(-1);
}
& > div:nth-of-type(2) {
display: flex;
justify-content: center;
align-items: center;
font-family: "Cormorant Garamond", serif;
font-weight: 600;
font-size: clamp(0.9rem, 4vw, 1.2rem);
padding: 10px;
transition-duration: 0.1s;
text-align: center;
grid-area: 1 / 1 / 1 / 3;
z-index: 2;
width: 100%;
line-height: 120%;
button {
display: block;
text-decoration: none;
padding: 6px;
margin: 0px 0px 0px 15px;
border-radius: 5px;
transition-duration: 0.1s;
}
}
@media (min-width: 1024px) {
& {
grid-template-columns: 1fr 1fr 1fr;
& > div {
grid-area: unset !important;
}
& > div.seasonalBgLeft,
& > div.seasonalBgRight {
height: unset;
}
& > div.seasonalBgLeft {
background-position: right;
}
& > div.seasonalBgRight {
background-position: left;
transform: none;
}
& > div:nth-of-type(2) {
order: unset;
grid-column: unset;
font-size: clamp(0.9rem, 1.4vw, 1.4rem);
br {
display: none;
}
}
}
}
&.frightPromoHeader {
background-color: var(--frightNight-black);
border-bottom: 2px solid var(--frightNight-red);
& > div.seasonalBgLeft,
& > div.seasonalBgRight {
background-blend-mode: multiply;
background-color: rgba(0, 0, 0, 0.5);
}
& > div.seasonalBgLeft {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/halloween-hands-left.webp);
}
& > div.seasonalBgRight {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/halloween-hands-right.webp);
}
& > div:nth-of-type(2) {
background: linear-gradient(
to right,
transparent,
transparent 10%,
rgba(0, 0, 0, 0.8) 50%,
transparent 90%
);
-webkit-animation: neon 1.5s ease-in-out infinite alternate;
animation: neon 1.5s ease-in-out infinite alternate;
color: var(--frightNight-red) !important;
span {
animation-name: glitch-anim-text;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
button {
background-color: var(--frightNight-red);
color: white;
border: none;
&:hover,
&:active,
&:focus {
background-color: var(--frightNight-dark-red);
}
}
}
@media (min-width: 768px) {
& > div:nth-of-type(2) {
background: var(--frightNight-black);
}
}
}
&.halloAdventurePromoHeader {
position: relative;
background: #ff7518;
&::before {
content: "";
position: absolute;
top: 0;
left: -5px;
width: 15px;
height: 100%;
background: #181818;
transform: skew(-10deg);
clip-path: polygon(
0 0,
calc(100% - 10px) 0,
100% 10%,
calc(100% - 10px) 20%,
100% 30%,
calc(100% - 10px) 40%,
100% 50%,
calc(100% - 10px) 60%,
100% 70%,
calc(100% - 10px) 80%,
100% 90%,
calc(100% - 10px) 100%
);
}
& > div.seasonalBgLeft,
& > div.seasonalBgRight {
background-image: url('data:image/svg+xml,<svg fill="rgba(0,0,0,0.1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M267.5 82.2L252.5 142.2C253.7 142.8 254.9 143.4 256 144C275.4 134 297 128.1 320 128.1C343 128.1 364.6 134 384 144C385.2 143.4 386.3 142.8 387.5 142.2L372.5 82.2C369.9 71.5 360.3 64 349.3 64L290.7 64C279.7 64 270.1 71.5 267.4 82.2zM239.2 546.5C249.5 540.4 262.6 540.4 272.9 546.5C287.5 555.2 303.4 560 320.1 560C336.8 560 352.7 555.2 367.3 546.5C377.6 540.4 390.7 540.4 401 546.5C415.6 555.2 431.5 560 448.2 560C518.9 560 576.2 474 576.2 368C576.2 262 518.7 176 448 176C431.3 176 415.4 180.8 400.8 189.5C390.5 195.6 377.4 195.6 367.1 189.5C352.5 180.8 336.6 176 319.9 176C303.2 176 287.3 180.8 272.7 189.5C262.4 195.6 249.3 195.6 239 189.5C224.4 180.8 208.5 176 191.8 176C121.1 176 63.8 262 63.8 368C63.8 474 121.3 560 192 560C208.7 560 224.6 555.2 239.2 546.5zM241.6 256C245.9 256 249.9 258.1 252.3 261.7L277.9 300.1C280.5 304 280.8 309.1 278.5 313.2C276.2 317.3 271.9 320 267.2 320L216 320C211.3 320 206.9 317.4 204.7 313.2C202.5 309 202.7 304 205.3 300.1L230.9 261.7C233.3 258.1 237.3 256 241.6 256zM409 261.7L434.6 300.1C437.2 304 437.5 309.1 435.2 313.2C432.9 317.3 428.7 320 424 320L372.8 320C368.1 320 363.7 317.4 361.5 313.2C359.3 309 359.5 304 362.1 300.1L387.7 261.7C390.1 258.1 394.1 256 398.3 256C402.5 256 406.6 258.1 408.9 261.7zM179.5 365C214.6 374.6 254 380.7 296 382.4L296 400C296 408.8 303.2 416 312 416L328 416C336.8 416 344 408.8 344 400L344 382.4C385.9 380.7 425.2 374.6 460.3 365C472 361.8 483.3 371.7 478.7 383C467 412 444.8 436.9 416 454.2L416 448.1C416 439.3 408.8 432.1 400 432.1L384 432.1C375.2 432.1 368 439.3 368 448.1L368 474.1C352.8 478 336.6 480.1 319.9 480.1C303.3 480.1 287.2 478 272 474.2L272 448.1C272 439.3 264.8 432.1 256 432.1L240 432.1C231.2 432.1 224 439.3 224 448.1L224 454.3C195.1 437 172.8 412.2 161.1 383.1C156.6 371.8 167.8 361.9 179.5 365.1z"/></svg>');
background-size: contain;
background-repeat: repeat;
}
& > div.seasonalBgLeft {
background-position: right;
}
& > div:nth-of-type(2) {
span {
color: #080808;
}
}
& > div.seasonalBgRight {
background-position: left;
transform: none;
}
}
&.christmasPromoHeader {
background-color: #d21f23;
border-bottom: 2px solid #e3e3e3;
& > div.seasonalBgLeft {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/christmas24/santa-left.jpg);
}
& > div.seasonalBgRight {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/christmas24/santa-right.jpg);
}
& > div:nth-of-type(2) {
color: #fff;
button {
color: #fff;
background: transparent;
border: 2px solid white;
&:hover,
&:active,
&:focus {
color: #d21f23;
background: white;
}
}
}
@media (min-width: 768px) {
& {
}
}
}
}
header:has(.seasonalPromoHeader) {
& > .header-container.top {
margin-top: 60px;
}
}
.halloweenPromoHeaders {
display: grid;
grid-template-columns: 1fr 1fr;
}  @-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 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%);
}
}