: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 {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/halloween-hands-left.webp);
grid-area: 1 / 1 / 1 / 2;
background-position: 40% 50%;
}
& > div.seasonalBgRight {
background-image: url(//www.theforbiddencorner.co.uk/wp-content/themes/fc/images/halloween-hands-right.webp);
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);
}
}
}
&.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;
}
}  @-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%);
}
}