/* ========================================================================== Halloween seasonal skin — active only while . Overlay only: swaps the color system (gold → pumpkin, noir → midnight plum) and adds light decorations. No layout changes. See src/data/season.json. ========================================================================== */ html[data-season="halloween"] { --noir: #130a1c; --charcoal: #1c1027; --char-2: #261636; --ivory: #f7efe3; --ivory-2: #f0e3d0; --bone: #fbf5ea; --ink: #1f1522; --ink-soft: #5c4a5e; --ink-mute: #78667b; --gold: #e07b2c; --gold-deep: #9b4b12; --gold-soft: #f3a55f; --gold-pale: #f9dcc1; --on-dark: #f7efe3; --on-dark-soft: rgba(247,239,227,0.7); --line: rgba(31,21,34,0.13); --line-gold: rgba(224,123,44,0.38); --line-gold-dark: rgba(224,123,44,0.26); } /* Dark surfaces that hard-code the old noir tint */ html[data-season="halloween"] #nav { background: linear-gradient(180deg, rgba(19,10,28,0.7), rgba(19,10,28,0)); } html[data-season="halloween"] #nav.scrolled { background: rgba(19,10,28,0.9); } html[data-season="halloween"] .hero-photo .hero-bg::after { background: linear-gradient(90deg, rgba(19,10,28,0.95) 0%, rgba(24,12,36,0.84) 38%, rgba(24,12,36,0.5) 70%, rgba(19,10,28,0.35) 100%), linear-gradient(to top, rgba(19,10,28,0.65) 0%, transparent 40%); } html[data-season="halloween"] .foot-top { border-bottom-color: rgba(224,123,44,0.2); } html[data-season="halloween"] .rp-card { border-color: rgba(224,123,44,0.45); } html[data-season="halloween"] .btn-gold, html[data-season="halloween"] .promo-strip, html[data-season="halloween"] .rp-cta { color: #130a1c; } html[data-season="halloween"] .promo-strip:hover, html[data-season="halloween"] .rp-cta:hover { background: var(--gold-soft); } /* Moon glow + web corners on the hero / page headers */ html[data-season="halloween"] .hero, html[data-season="halloween"] .page-header { position: relative; overflow: hidden; } html[data-season="halloween"] .hero::before, html[data-season="halloween"] .page-header::before { content: ''; position: absolute; z-index: 1; pointer-events: none; right: -8vw; top: -10vw; width: 44vw; height: 44vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle at center, rgba(243,165,95,0.28) 0%, rgba(224,123,44,0.12) 32%, rgba(224,123,44,0) 68%); } html[data-season="halloween"] .hero::after, html[data-season="halloween"] .page-header::after { content: ''; position: absolute; z-index: 1; pointer-events: none; left: 0; top: 0; width: 210px; height: 210px; opacity: 0.32; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml;utf8,"); } html[data-season="halloween"] .hero .hero-inner, html[data-season="halloween"] .page-header .page-header-inner { position: relative; z-index: 2; } /* Greeting pill (inserted by SeasonTheme.astro) */ html[data-season="halloween"] .hw-pill { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.4rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(243,165,95,0.5); color: var(--gold-soft); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; background: rgba(19,10,28,0.35); backdrop-filter: blur(4px); } /* ---- Haunted FX layer (inserted by SeasonTheme.astro into .hero / .page-header) ---- */ html[data-season="halloween"] .hw-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } html[data-season="halloween"] .hw-haunted h1.display { text-shadow: 0 0 18px rgba(243,165,95,.3); } /* Fog: two textured layers (SVG turbulence, seamless tile) rolling in opposite directions */ html[data-season="halloween"] .hw-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background-repeat: repeat-x; background-size: 1400px 100%; background-image: url("data:image/svg+xml;utf8,"); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,0) 100%); mix-blend-mode: screen; opacity: .9; will-change: background-position; } html[data-season="halloween"] .hw-fog-1 { animation: hw-fog-scroll 70s linear infinite; } html[data-season="halloween"] .hw-fog-2 { height: 40%; opacity: .7; background-size: 1000px 100%; animation: hw-fog-scroll-rev 45s linear infinite; } @keyframes hw-fog-scroll { from { background-position-x: 0 } to { background-position-x: 1400px } } @keyframes hw-fog-scroll-rev { from { background-position-x: 1000px } to { background-position-x: 0 } } /* Spider: big, glowing eyes, drops into the middle of the header and hangs there */ html[data-season="halloween"] .hw-spider { position: absolute; left: 58%; top: 0; width: 64px; color: #0b0510; animation: hw-spider 14s ease-in-out infinite; transform-origin: top center; z-index: 3; } html[data-season="halloween"] .hw-spider .hw-thread { position: absolute; left: 50%; bottom: 100%; width: 2px; height: 120vh; background: linear-gradient(to top, rgba(243,165,95,.95), rgba(243,165,95,.25)); box-shadow: 0 0 6px rgba(243,165,95,.6); } html[data-season="halloween"] .hw-spider svg { width: 100%; display: block; fill: currentColor; filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)) drop-shadow(0 0 2px rgba(243,165,95,.6)); animation: hw-sway 2.8s ease-in-out infinite alternate; } html[data-season="halloween"] .hw-spider svg .hw-eye { fill: #ff8a2a; animation: hw-eyes 3.5s steps(1,end) infinite; filter: drop-shadow(0 0 3px #ff8a2a); } @keyframes hw-eyes { 0%,100% { opacity: 1 } 46% { opacity: 1 } 48% { opacity: 0 } 50% { opacity: 1 } 81% { opacity: 1 } 83% { opacity: 0 } 85% { opacity: 1 } } @keyframes hw-spider { 0% { transform: translateY(-90px) } 30% { transform: translateY(330px) } 38% { transform: translateY(290px) } 46% { transform: translateY(345px) } 72% { transform: translateY(335px) } 100% { transform: translateY(-90px) } } @keyframes hw-sway { from { transform: rotate(-7deg) } to { transform: rotate(7deg) } } @media (max-width: 760px) { html[data-season="halloween"] .hw-spider { left: 72%; width: 46px; } } @media (prefers-reduced-motion: reduce) { html[data-season="halloween"] .hw-fx { display: none; } } @media (max-width: 640px) { html[data-season="halloween"] .hero::after, html[data-season="halloween"] .page-header::after { width: 140px; height: 140px; opacity: .26; } }