/* Halloween Theme Pack - October 2024 */
/* Apply by adding: to your HTML files */
/* Halloween Color Variables */
:root {
--halloween-orange: #ff6b35;
--halloween-purple: #8b5cf6;
--halloween-green: #10b981;
--halloween-black: #1f2937;
--halloween-gold: #f59e0b;
--halloween-red: #ef4444;
}
/* Halloween Banner Overlay */
.halloween-banner {
background: linear-gradient(135deg, var(--halloween-orange), var(--halloween-purple));
padding: 1rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.halloween-banner::before {
content: "🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️";
position: absolute;
top: 0;
left: 0;
width: 200%;
animation: halloween-scroll 20s linear infinite;
font-size: 1.5rem;
opacity: 0.3;
}
@keyframes halloween-scroll {
0% { transform: translateX(-50%); }
100% { transform: translateX(0%); }
}
.halloween-banner-text {
color: white;
font-weight: 700;
font-size: 1.2rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
position: relative;
z-index: 2;
}
/* Halloween Button Styles */
.btn-halloween {
background: linear-gradient(135deg, var(--halloween-orange), var(--halloween-red));
color: white;
border: 2px solid var(--halloween-black);
position: relative;
overflow: hidden;
}
.btn-halloween::before {
content: "🎃";
position: absolute;
top: -5px;
right: -5px;
font-size: 1.2rem;
animation: halloween-bounce 2s ease-in-out infinite;
}
@keyframes halloween-bounce {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
.btn-halloween:hover {
background: linear-gradient(135deg, var(--halloween-red), var(--halloween-orange));
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}
/* Halloween Package Cards */
.package-card.halloween {
border: 3px solid var(--halloween-orange);
background: linear-gradient(135deg, #fef3c7, #fde68a);
position: relative;
overflow: hidden;
}
.package-card.halloween::before {
content: "👻";
position: absolute;
top: 10px;
right: 10px;
font-size: 1.5rem;
animation: halloween-float 3s ease-in-out infinite;
}
@keyframes halloween-float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
}
.package-card.halloween:hover {
border-color: var(--halloween-purple);
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(139, 92, 246, 0.3);
}
/* Halloween Badge Styles */
.package-badge.halloween {
background: linear-gradient(135deg, var(--halloween-purple), var(--halloween-black));
color: white;
border: 2px solid var(--halloween-orange);
position: relative;
}
.package-badge.halloween::after {
content: "🦇";
position: absolute;
right: -15px;
top: -5px;
font-size: 1rem;
animation: halloween-fly 4s ease-in-out infinite;
}
@keyframes halloween-fly {
0%, 100% { transform: translateX(0px) rotate(0deg); }
50% { transform: translateX(10px) rotate(10deg); }
}
/* Halloween Guarantee Badge */
.guarantee-badge.halloween {
background: linear-gradient(135deg, var(--halloween-green), var(--halloween-black));
border: 2px solid var(--halloween-orange);
position: relative;
}
.guarantee-badge.halloween::before {
content: "🕷️";
position: absolute;
left: -15px;
top: -5px;
font-size: 1rem;
animation: halloween-crawl 3s ease-in-out infinite;
}
@keyframes halloween-crawl {
0%, 100% { transform: translateX(0px) rotate(0deg); }
50% { transform: translateX(-10px) rotate(-10deg); }
}
/* Halloween Navigation */
.top-nav.halloween {
background: linear-gradient(135deg, var(--halloween-black), var(--halloween-purple));
border-bottom: 3px solid var(--halloween-orange);
}
.top-nav-link.halloween:hover {
color: var(--halloween-orange);
text-shadow: 0 0 10px var(--halloween-orange);
}
/* Halloween Hero Section */
.hero-section.halloween {
background: linear-gradient(135deg, #1f2937, #8b5cf6, #ff6b35);
background-size: 200% 200%;
animation: halloween-gradient 8s ease infinite;
position: relative;
}
@keyframes halloween-gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-section.halloween::before {
content: "🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️ 🎃 👻 🦇 🕷️";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
font-size: 2rem;
animation: halloween-bg-scroll 30s linear infinite;
pointer-events: none;
}
@keyframes halloween-bg-scroll {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Halloween Floating Elements */
.halloween-float {
position: fixed;
pointer-events: none;
z-index: 1000;
animation: halloween-drift 15s linear infinite;
}
.halloween-float:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.halloween-float:nth-child(2) { top: 20%; left: 80%; animation-delay: 3s; }
.halloween-float:nth-child(3) { top: 60%; left: 20%; animation-delay: 6s; }
.halloween-float:nth-child(4) { top: 80%; left: 70%; animation-delay: 9s; }
.halloween-float:nth-child(5) { top: 40%; left: 90%; animation-delay: 12s; }
@keyframes halloween-drift {
0% { transform: translateY(0px) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}
/* Halloween Cursor */
body.halloween-cursor {
cursor: url('data:image/svg+xml;utf8,'), auto;
}
/* Halloween Responsive Design */
@media (max-width: 768px) {
.halloween-banner-text {
font-size: 1rem;
}
.halloween-float {
font-size: 1.5rem;
}
.package-card.halloween::before {
font-size: 1.2rem;
}
}
/* Halloween Utility Classes */
.halloween-text-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.halloween-glow {
box-shadow: 0 0 20px var(--halloween-orange);
}
.halloween-pulse {
animation: halloween-pulse 2s ease-in-out infinite;
}
@keyframes halloween-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Halloween Special Effects */
.halloween-sparkle {
position: relative;
overflow: hidden;
}
.halloween-sparkle::after {
content: "✨";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: halloween-sparkle-effect 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes halloween-sparkle-effect {
0%, 100% { opacity: 0; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
/ * F l y i n g W i t c h E f f e c t * /
. f l y i n g - w i t c h {
p o s i t i o n : f i x e d ;
f o n t - s i z e : 3 r e m ;
z - i n d e x : 9 9 9 9 ;
p o i n t e r - e v e n t s : n o n e ;
u s e r - s e l e c t : n o n e ;
a n i m a t i o n : w i t c h - f l y 8 s l i n e a r f o r w a r d s ;
}
@ k e y f r a m e s w i t c h - f l y {
0 % {
l e f t : - 2 0 0 p x ;
t r a n s f o r m : t r a n s l a t e Y ( 0 p x ) r o t a t e ( 0 d e g ) ;
}
2 5 % {
t r a n s f o r m : t r a n s l a t e Y ( - 2 0 p x ) r o t a t e ( 5 d e g ) ;
}
5 0 % {
t r a n s f o r m : t r a n s l a t e Y ( 1 0 p x ) r o t a t e ( - 3 d e g ) ;
}
7 5 % {
t r a n s f o r m : t r a n s l a t e Y ( - 1 5 p x ) r o t a t e ( 4 d e g ) ;
}
1 0 0 % {
l e f t : c a l c ( 1 0 0 v w + 2 0 0 p x ) ;
t r a n s f o r m : t r a n s l a t e Y ( 0 p x ) r o t a t e ( 0 d e g ) ;
}
}
/ * W i t c h t r a i l e f f e c t * /
. w i t c h - t r a i l {
p o s i t i o n : a b s o l u t e ;
w i d t h : 1 0 0 p x ;
h e i g h t : 4 p x ;
b a c k g r o u n d : l i n e a r - g r a d i e n t ( 9 0 d e g , t r a n s p a r e n t , r g b a ( 1 3 9 , 9 2 , 2 4 6 , 0 . 6 ) , t r a n s p a r e n t ) ;
b o r d e r - r a d i u s : 2 p x ;
a n i m a t i o n : t r a i l - f a d e 2 s e a s e - o u t f o r w a r d s ;
}
@ k e y f r a m e s t r a i l - f a d e {
0 % {
o p a c i t y : 1 ;
t r a n s f o r m : s c a l e X ( 1 ) ;
}
1 0 0 % {
o p a c i t y : 0 ;
t r a n s f o r m : s c a l e X ( 0 ) ;
}
}
/ * F e a t u r e d V i d e o s S e c t i o n f o r M e m b e r s * /
. f e a t u r e d - v i d e o s - s e c t i o n {
b a c k g r o u n d : w h i t e ;
p a d d i n g : 3 r e m ;
b o r d e r - r a d i u s : 1 2 p x ;
b o x - s h a d o w : 0 4 p x 2 0 p x r g b a ( 0 , 0 , 0 , 0 . 1 ) ;
m a r g i n : 3 r e m 0 ;
}
. f e a t u r e d - v i d e o s - s e c t i o n h 3 {
c o l o r : # 1 e 2 9 3 b ;
m a r g i n - b o t t o m : 1 r e m ;
f o n t - s i z e : 1 . 5 r e m ;
f o n t - w e i g h t : 6 0 0 ;
t e x t - a l i g n : c e n t e r ;
}
. f e a t u r e d - v i d e o s - s e c t i o n . s e c t i o n - s u b t i t l e {
c o l o r : # 6 4 7 4 8 b ;
m a r g i n - b o t t o m : 2 r e m ;
t e x t - a l i g n : c e n t e r ;
}
. f e a t u r e d - g r i d {
d i s p l a y : g r i d ;
g r i d - t e m p l a t e - c o l u m n s : r e p e a t ( a u t o - f i t , m i n m a x ( 2 5 0 p x , 1 f r ) ) ;
g a p : 2 r e m ;
m a r g i n - t o p : 2 r e m ;
}
. f e a t u r e d - i t e m {
b a c k g r o u n d : # f 8 f a f c ;
p a d d i n g : 2 r e m ;
b o r d e r - r a d i u s : 1 2 p x ;
t e x t - a l i g n : c e n t e r ;
t r a n s i t i o n : t r a n s f o r m 0 . 3 s e a s e ;
b o r d e r : 2 p x s o l i d # e 2 e 8 f 0 ;
}
. f e a t u r e d - i t e m : h o v e r {
t r a n s f o r m : t r a n s l a t e Y ( - 5 p x ) ;
b o r d e r - c o l o r : # F F 8 C 0 0 ;
}
. f e a t u r e d - i m a g e {
f o n t - s i z e : 3 r e m ;
c o l o r : # F F 8 C 0 0 ;
m a r g i n - b o t t o m : 1 r e m ;
}
. f e a t u r e d - i t e m h 4 {
c o l o r : # 1 e 2 9 3 b ;
m a r g i n - b o t t o m : 1 r e m ;
f o n t - s i z e : 1 . 2 5 r e m ;
f o n t - w e i g h t : 6 0 0 ;
}
. f e a t u r e d - i t e m p {
c o l o r : # 6 4 7 4 8 b ;
m a r g i n - b o t t o m : 1 . 5 r e m ;
l i n e - h e i g h t : 1 . 6 ;
}
@ m e d i a ( m a x - w i d t h : 7 6 8 p x ) {
. f e a t u r e d - v i d e o s - s e c t i o n {
p a d d i n g : 2 r e m ;
}
. f e a t u r e d - g r i d {
g r i d - t e m p l a t e - c o l u m n s : 1 f r ;
}
}
/ * F i x G u a r a n t e e B a n n e r S p a c i n g * /
. g u a r a n t e e - b a n n e r {
b a c k g r o u n d : l i n e a r - g r a d i e n t ( 1 3 5 d e g , # 1 0 b 9 8 1 , # 0 5 9 6 6 9 ) ;
p a d d i n g : 4 r e m 0 ;
m a r g i n : 3 r e m 0 ;
p o s i t i o n : r e l a t i v e ;
z - i n d e x : 1 0 ;
}
. g u a r a n t e e - c o n t e n t {
d i s p l a y : f l e x ;
a l i g n - i t e m s : c e n t e r ;
j u s t i f y - c o n t e n t : c e n t e r ;
g a p : 2 r e m ;
t e x t - a l i g n : c e n t e r ;
m a x - w i d t h : 1 0 0 0 p x ;
m a r g i n : 0 a u t o ;
}
. g u a r a n t e e - t e x t h 2 {
c o l o r : w h i t e ;
f o n t - s i z e : 2 . 5 r e m ;
m a r g i n - b o t t o m : 1 r e m ;
f o n t - w e i g h t : 7 0 0 ;
}
. g u a r a n t e e - t e x t p {
c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 9 ) ;
f o n t - s i z e : 1 . 2 r e m ;
m a r g i n : 0 ;
f o n t - w e i g h t : 5 0 0 ;
}
@ m e d i a ( m a x - w i d t h : 7 6 8 p x ) {
. g u a r a n t e e - b a n n e r {
p a d d i n g : 3 r e m 0 ;
}
. g u a r a n t e e - c o n t e n t {
f l e x - d i r e c t i o n : c o l u m n ;
g a p : 1 r e m ;
}
. g u a r a n t e e - t e x t h 2 {
f o n t - s i z e : 2 r e m ;
}
. g u a r a n t e e - t e x t p {
f o n t - s i z e : 1 r e m ;
}
}