/* ============================================================ mobile.css -- Haunted Halloween Ball 2026 redesign Loaded after styles.css. Fixes mobile nav + hero layout. NOTE:

is a direct child of (not inside #hero-video-wrap), so position:fixed works correctly in all browsers including Chrome mobile. ============================================================ */ /* ============================================================ DESKTOP OVERRIDES (min-width: 861px) ============================================================ */ @media (min-width: 861px) { /* --- Hide mobile-only nav extras on desktop --- */ #nav-top-extras { display: none !important; } } /* ============================================================ MOBILE NAV (max-width: 860px) - matches styles.css breakpoint ============================================================ */ @media (max-width: 860px) { /* --- Hide desktop top bar on mobile --- */ .top-bar { display: none !important; } /* --- Pin the nav bar to top of viewport --- */ body > nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9000 !important; background: rgba(10, 6, 4, 0.97) !important; border-bottom: 1px solid rgba(232, 119, 34, 0.35) !important; min-height: auto !important; } /* --- Solid black when open --- */ body > nav.mobile-open { background: #0a0604 !important; border-bottom-color: rgba(232, 119, 34, 0.5) !important; } /* --- Nav top extras bar (logo + buy btn + phone) --- */ #nav-top-extras { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 0 0 0 !important; height: 70px !important; position: relative !important; background: #0a0604 !important; border-bottom: 1px solid rgba(232, 119, 34, 0.35) !important; box-sizing: border-box !important; } /* --- Logo at 20% of original (80% smaller = 52px) --- */ .nav-logo { height: 52px !important; width: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; margin-right: auto !important; } /* --- Right group: button + phone stacked --- */ .nav-right-group { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; padding-right: 0 !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; } /* --- Buy tickets button --- */ .nav-buy-btn { background: #e87722 !important; color: #000 !important; padding: 4.8px 9.6px !important; border-radius: 4px !important; font-weight: 700 !important; font-size: 10.8px !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-decoration: none !important; font-family: 'Cinzel', serif !important; white-space: nowrap !important; } /* --- Phone number below button --- */ .nav-phone { font-size: 10px !important; color: #e87722 !important; font-family: 'Cinzel', serif !important; white-space: nowrap !important; } /* --- Hamburger button position --- */ body > nav .mobile-toggle { position: absolute !important; top: 14px !important; right: 14px !important; z-index: 9100 !important; pointer-events: auto !important; } /* --- Drawer: solid black background --- */ body > nav > ul { z-index: 8999 !important; background: #0a0604 !important; } body > nav.mobile-open > ul { background: #0a0604 !important; } /* --- Backdrop below everything nav-related --- */ body.nav-locked::after { background: rgba(0, 0, 0, 0.75) !important; z-index: 8900 !important; } /* --- Push hero section down so content is not hidden under fixed nav (64px) --- */ #hero-video-wrap { padding-top: 64px !important; } } /* ============================================================ HERO LAYOUT: 2026 above buttons, buttons side-by-side (max-width: 768px) ============================================================ */ @media (max-width: 768px) { .hero-year-row { flex-wrap: wrap !important; justify-content: center !important; gap: 12px 8px !important; } .hero-year-row .hero-subtitle { order: -1 !important; flex: 0 0 100% !important; width: 100% !important; text-align: center !important; margin-bottom: 0 !important; } .hero-year-row .btn-primary, .hero-year-row .btn-outline { display: inline-block !important; width: calc(50% - 8px) !important; box-sizing: border-box !important; text-align: center !important; padding: 12px 8px !important; font-size: 0.72rem !important; white-space: nowrap !important; flex: none !important; min-width: 0 !important; max-width: none !important; } } /* === Body paragraph typography (Grenze Gotisch) === */ .about-text p:not(.section-label), .about-section > .container > p:not(.section-label), .ent-item p, .tickets-section p:not(.section-label), .newsletter p { font-family: 'Grenze Gotisch', serif !important; font-size: 23px !important; color: #c8c0b4 !important; line-height: 1.6 !important; } /* === Fluid countdown sizing (single line on all screen widths) === */ .hero-countdown { flex-wrap: nowrap !important; gap: clamp(4px, 1.5vw, 16px) !important; justify-content: center !important; align-items: center !important; } .cdown-block { min-width: 0 !important; flex: 0 1 auto !important; } .cdown-num { font-size: clamp(20px, 7vw, 48px) !important; line-height: 1.1 !important; } .cdown-label { font-size: clamp(8px, 2.5vw, 14px) !important; line-height: 1.1 !important; white-space: nowrap !important; } .cdown-sep { font-size: clamp(18px, 6vw, 40px) !important; line-height: 1 !important; align-self: flex-start !important; margin-top: clamp(0px, 1vw, 6px) !important; } /* === Early Bird Special block === */ .early-bird-block { max-width: 800px; margin: 30px auto 50px auto; padding: 28px 32px; background: linear-gradient(135deg, rgba(35,18,8,0.85) 0%, rgba(15,8,4,0.95) 100%); border: 1px solid rgba(232, 119, 34, 0.45); border-radius: 8px; text-align: center; box-shadow: 0 6px 30px rgba(232, 119, 34, 0.15), inset 0 0 40px rgba(232,119,34,0.05); position: relative; overflow: hidden; } .early-bird-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #ff8c1a, transparent); animation: eb-shimmer 3s ease-in-out infinite; } @keyframes eb-shimmer { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .early-bird-block h3 { font-family: 'Cinzel Decorative', 'Cinzel', serif; font-size: clamp(22px, 3.4vw, 32px); font-weight: 700; color: #ff8c1a; margin: 0 0 14px 0; letter-spacing: 1px; text-shadow: 0 2px 8px rgba(255, 140, 26, 0.4); line-height: 1.25; } .early-bird-block .eb-limited { display: inline-block; font-family: 'Cinzel', serif; font-size: 15.6px; font-weight: 400; color: rgb(232, 119, 34); letter-spacing: 5px; text-transform: uppercase; font-style: normal; margin-left: 8px; } .early-bird-block .eb-price { font-family: 'Grenze Gotisch', serif; font-size: clamp(20px, 2.6vw, 26px); color: #f3e5c4; margin: 0 0 22px 0; line-height: 1.4; } .early-bird-block .eb-price .price-amt { color: #ffb84d; font-weight: 700; } .early-bird-block .eb-price .price-warn { display: block; font-size: 0.7em; color: #d9b88f; font-style: italic; margin-top: 4px; } .bat-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 32px; background: linear-gradient(180deg, #c75a14 0%, #8a3a0a 100%); color: #fff8e5; text-decoration: none; font-family: 'Cinzel', serif; font-size: clamp(15px, 1.6vw, 18px); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid #ffb84d; border-radius: 4px; box-shadow: 0 4px 0 #5c2806, 0 6px 20px rgba(255, 140, 26, 0.35); transition: all 0.2s ease; cursor: pointer; position: relative; } .bat-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #5c2806, 0 8px 24px rgba(255, 140, 26, 0.5); background: linear-gradient(180deg, #e06a1f 0%, #a04a14 100%); color: #fff8e5; } .bat-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #5c2806, 0 3px 10px rgba(255, 140, 26, 0.3); } .bat-btn .bat-icon { width: 28px; height: 20px; fill: #ffe8b8; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } .bat-btn .spider-icon { width: 24px; height: 24px; vertical-align: middle; margin-left: -4px; margin-right: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } /* === Inline link styling in about paragraphs === */ .about-text p a, .about-text p a:visited, .about-section > .container > p a, .about-section > .container > p a:visited { color: #ff8c1a !important; text-decoration: underline !important; font-weight: 600 !important; transition: color 0.2s ease; } .about-text p a:hover, .about-section > .container > p a:hover { color: #ffb84d !important; } .about-text p strong, .about-section > .container > p strong { color: #ffb84d !important; font-weight: 700 !important; } /* === 2026 subtitle: inline between buttons on desktop, hidden on mobile === */ @media (min-width: 861px) { .hero-year-row { flex-wrap: nowrap !important; gap: 24px !important; } .hero-year-row .hero-subtitle { order: 0 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; text-align: center !important; } } @media (max-width: 860px) { .hero-year-row .hero-subtitle { display: none !important; } } /* === 2026 subtitle override (higher specificity to beat inline rules) === */ @media (min-width: 861px) { body .hero-year-row { flex-wrap: nowrap !important; gap: 24px !important; } body .hero-year-row .hero-subtitle { order: 0 !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; text-align: center !important; } } @media (max-width: 860px) { body .hero-year-row .hero-subtitle { display: none !important; } } /* === Mobile: contract orange details strip === */ @media (max-width: 860px) { body .details-strip { padding: 22px 20px !important; } body .details-strip .container { gap: 14px !important; } body .details-strip .detail-label { margin-bottom: 2px !important; font-size: 9px !important; letter-spacing: 2.2px !important; } body .details-strip .detail-value { font-size: 0.85rem !important; line-height: 1.15 !important; } } /* ============================================================ GET YOUR TICKETS - package card styling - All 3 cards use the same font as

(Cinzel, serif) - 2nd card (VIP) gets a yellow/gold border + glow - 3rd card (GROUP) gets a green border + glow ============================================================ */ .tickets-section .ticket-card { font-family: 'Cinzel', serif !important; } .tickets-section .ticket-cards .ticket-card:nth-child(2) { border-color: var(--gold-light, #f0c040) !important; box-shadow: 0 0 40px rgba(240, 192, 64, 0.15) !important; } .tickets-section .ticket-cards .ticket-card:nth-child(3) { border-color: #88cc88 !important; box-shadow: 0 0 40px rgba(136, 204, 136, 0.15) !important; } /* ============================================================ GROUP package button - green to match GROUP title ============================================================ */ .tickets-section .ticket-cards .ticket-card:nth-child(3) .btn-outline { background: #88cc88 !important; color: #000 !important; border-color: #88cc88 !important; box-shadow: 0 0 20px rgba(136, 204, 136, 0.4) !important; } .tickets-section .ticket-cards .ticket-card:nth-child(3) .btn-outline:hover { background: #6fbf6f !important; border-color: #6fbf6f !important; color: #000 !important; } /* ============================================================ Replace "?" bullets in ticket feature lists with a spider icon Spider is inlined as an SVG data URI, colored to match the original "?" color (#e87722 = var(--orange)) ============================================================ */ .tickets-section .ticket-features li::before { content: "" !important; width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: contain; display: inline-block; flex-shrink: 0; } /* ============================================================ Package titles styled like the "Our Sponsors" eyebrow: centered, blood-orange, with horizontal lines on both sides, font 30% larger than original (12px -> 15.6px) ============================================================ */ .tickets-section .ticket-tier { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; text-align: center !important; font-size: 15.6px !important; color: var(--orange) !important; } .tickets-section .ticket-tier::before, .tickets-section .ticket-tier::after { content: "" !important; flex: 1 1 0% !important; max-width: 60px !important; height: 1px !important; background: var(--orange) !important; opacity: 0.5 !important; display: block !important; } /* ============================================================ Mobile only: reduce horizontal padding around ticket packages by 50% (40px -> 20px each side) so cards aren't too narrow ============================================================ */ @media (max-width: 860px) { .tickets-section { padding-left: 20px !important; padding-right: 20px !important; } } /* ============================================================ Mobile only: lay out the 4 sponsor banners as 2-per-row, matching the 20px side spacing of the ticket packages. Desktop layout is unaffected. ============================================================ */ @media (max-width: 860px) { .sponsors-section .sponsors-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .sponsors-section .sponsor-card { padding: 12px !important; } .sponsors-section .sponsor-card img { width: 100% !important; height: auto !important; max-width: 100% !important; } } /* ============================================================ Newsletter form: green thank-you message after successful submission. Shown by script.js after fetch() resolves. ============================================================ */ .newsletter-thankyou { color: #88cc88 !important; text-align: center !important; font-family: 'Cinzel Decorative', cursive !important; font-size: clamp(1.4rem, 3vw, 2.2rem) !important; margin: 24px auto !important; text-shadow: 0 0 20px rgba(136, 204, 136, 0.4) !important; } /* ============================================ ADDED: orange info bar labels + nav tweaks ============================================ */ body .details-strip .detail-label { font-size: 15px !important; color: #990000 !important; font-weight: 700 !important; } @media (max-width: 860px) { #nav-top-extras { height: 84px !important; } #nav-top-extras .nav-logo { height: 62px !important; } #nav-top-extras .nav-phone { font-size: 14.4px !important; } nav button.mobile-toggle { right: 12px !important; } } /* ============================================ ADDED: details-strip left-align, two columns (mobile) ============================================ */ @media (max-width: 860px) { .details-strip .container { display: grid !important; grid-template-columns: 1fr 1fr !important; justify-content: start !important; text-align: left !important; } .details-strip .container > div { text-align: left !important; } body .details-strip .detail-label, body .details-strip .detail-value { text-align: left !important; } } /* ============================================ ADDED: footer 3-column layout ============================================ */ @media (min-width: 861px) { .footer-grid { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1fr !important; gap: 40px !important; align-items: start !important; } } @media (max-width: 860px) { .footer-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 24px !important; } .footer-grid .footer-brand { grid-column: 1 / -1 !important; } } /* ============================================ ADDED: footer social icons row ============================================ */ .footer-social { display: flex !important; justify-content: center !important; gap: 18px !important; margin: 8px 0 24px !important; } .footer-social .social-icon-link { width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(232,119,34,0.5) !important; border-radius: 50% !important; color: #e87722 !important; } .footer-social .social-icon-link svg { width: 18px !important; height: 18px !important; } /* ============================================================ Responsive rules moved from index.html inline