/* ========================================================================== stylesheet-halloween.css β€” TEMPORARY Halloween theme (load AFTER stylesheet-e-v1.css) -------------------------------------------------------------------------- How it works: it only overrides the #e colour tokens and adds a few decorations, so no template changes are needed. Switch on : set the attribute (e.g. PHP: >) and include this file only while $halloween is true (e.g. date('m-d') between 10-29 and 11-01). Switch off: remove the attribute / the . Nothing else depends on this file. Works with or without (the doubled attribute selector beats the dark token block). ========================================================================== */ :root[data-halloween][data-halloween] #e{ --page:#14091f; --card:#221436; --text:#e6dcf4; --head:#fff; --mute:#b7a6d3; --faint:#8a79a8; --line:#3d2a5c; --div:#2c1c46; --ctl:#5a4380; --zebra:#281a40; --hl:#3a2459; --link:#ff8a2a; --link-hi:#ffa24d; --btn-on:#1a0f00; --nav:#000; --plus:#ff8a2a; --pos:#7dff6a; --neg:#ff5c7a; --c-goal:#ff8a2a; --c-high:#7dff6a; --c-low:#ff5c7a; --c-diff:#46d9e6; --c-total:#ffc14d; color-scheme:dark} :root[data-halloween]{color-scheme:dark;background:#14091f} :root[data-halloween] body{background:radial-gradient(1200px 600px at 85% -10%,#40206a 0,rgba(64,32,106,0) 70%),radial-gradient(900px 500px at 0% 100%,#2a0f3d 0,rgba(42,15,61,0) 70%),#14091f !important;background-attachment:fixed} /* cards: thin purple rim + faint violet glow */ :root[data-halloween] #e .e-mod{position:relative;box-shadow:0 0 0 1px #3d2a5c,0 6px 22px rgba(130,50,210,.25)} :root[data-halloween] #e .e-mod h2,:root[data-halloween] #e .e-mod h3{text-shadow:0 0 14px rgba(255,138,42,.35)} /* orange accents */ :root[data-halloween] #e .e-btn:not(.e-out):not(.e-grey):not(.e-ghost){box-shadow:0 0 14px rgba(255,138,42,.35)} :root[data-halloween] #e .pick-card.pk-hero.pk-img .pk-lg, :root[data-halloween] #e .pick-card.pk-hero.pk-img .league-roi, :root[data-halloween] #e .pick-card.pk-hero.pk-img .pick-guaranteed, :root[data-halloween] #e .pick-card.pk-hero.pk-img .pk-free{outline:1px solid rgba(255,138,42,.55);outline-offset:-1px} :root[data-halloween] #e .ps-widget .ps-pip.ps-on{box-shadow:0 0 8px rgba(125,255,106,.55)} :root[data-halloween] #e .e-switch.e-on,:root[data-halloween] #e .pick-card.pk .pick-toggle:checked + .slider{box-shadow:0 0 10px rgba(255,138,42,.5)} /* cobweb in the top-left corner of the main panels */ :root[data-halloween] #e .ap-panel::before,:root[data-halloween] #e .ps-widget::before{ content:"";position:absolute;left:0;top:0;width:54px;height:54px;pointer-events:none;z-index:3;opacity:.4; background:url("data:image/svg+xml;utf8,") no-repeat 0 0/100% 100%} :root[data-halloween] #e .ap-panel{border-top-left-radius:10px;overflow:visible} /* floating bat across the top + pumpkin bottom-left (decor only, never blocks taps) */ :root[data-halloween] #e::after{content:"πŸ¦‡";position:fixed;top:64px;left:-40px;font-size:26px;pointer-events:none;z-index:3;filter:drop-shadow(0 0 6px rgba(255,138,42,.6));animation:hw-bat 16s linear infinite} :root[data-halloween] #e::before{content:"πŸŽƒ";position:fixed;left:12px;bottom:10px;font-size:30px;pointer-events:none;z-index:3;filter:drop-shadow(0 0 10px rgba(255,138,42,.7));animation:hw-pump 3.4s ease-in-out infinite} @keyframes hw-bat{0%{transform:translate(0,0) rotate(-6deg)}25%{transform:translate(28vw,26px) rotate(8deg)}50%{transform:translate(56vw,-6px) rotate(-8deg)}75%{transform:translate(84vw,22px) rotate(6deg)}100%{transform:translate(112vw,0) rotate(-6deg)}} @keyframes hw-pump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.06)}} @media (max-width:768px){:root[data-halloween] #e::before{display:none}} @media (prefers-reduced-motion:reduce){:root[data-halloween] #e::after,:root[data-halloween] #e::before{animation:none}:root[data-halloween] #e::after{display:none}} /* ---- header + footer (styled in stylesheet-v4.css, outside #e) ---- */ :root[data-halloween] .header-fixed-wrapper{background:linear-gradient(90deg,#1a0b2e 0%,#3a1666 50%,#1a0b2e 100%) !important;border-bottom:2px solid #ff8a2a;box-shadow:0 4px 18px rgba(255,138,42,.35) !important} :root[data-halloween] .header-inner .logo a{color:#ff8a2a !important;text-shadow:0 0 14px rgba(255,138,42,.6)} :root[data-halloween] .header-inner .logo a::after{content:"πŸŽƒ";display:inline-block;margin-left:7px;font-size:1.25em;position:relative;top:-2px} :root[data-halloween] .button-login{background-color:#1a0b2e !important;border-color:#ff8a2a !important;color:#ff8a2a !important} :root[data-halloween] .footer-card{position:relative;background:#221436 !important;box-shadow:0 0 0 1px #3d2a5c,0 -6px 24px rgba(130,50,210,.3) !important;border-top:2px solid #ff8a2a} :root[data-halloween] .footer-card::before{content:"πŸŽƒ πŸ¦‡ πŸ•ΈοΈ πŸ¦‡ πŸŽƒ";position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:0 10px;font-size:16px;letter-spacing:6px;background:#221436;border-radius:10px;white-space:nowrap} :root[data-halloween] .footer-top-row .logo{background:#14091f !important;color:#ff8a2a !important;text-shadow:0 0 12px rgba(255,138,42,.5)} :root[data-halloween] .footer-nav-links a{color:#e6dcf4 !important} :root[data-halloween] .footer-nav-links a:hover{color:#ff8a2a !important} :root[data-halloween] .footer-nav-links a:not(:last-child)::after{color:#5a4380} :root[data-halloween] .footer-contact,:root[data-halloween] .footer-copyright,:root[data-halloween] .footer-responsible-gambling,:root[data-halloween] .footer-help-line a{color:#b7a6d3 !important} /* ---- slide-out menu + header account area (outside #e: own token copies) ---- */ :root[data-halloween][data-halloween] #menu-desktop-div, :root[data-halloween][data-halloween] #auth-section, :root[data-halloween][data-halloween] #auth-section-mobile{--card:#221436; --text:#e6dcf4; --head:#fff; --mute:#b7a6d3; --faint:#8a79a8; --line:#3d2a5c; --div:#2c1c46; --zebra:#281a40; --hl:#3a2459; --ctl:#5a4380; --link:#ff8a2a; --link-hi:#ffa24d; --btn-on:#1a0f00} :root[data-halloween] #menu-desktop-div{box-shadow:0 0 0 1px #3d2a5c,4px 6px 28px rgba(0,0,0,.75),0 0 22px rgba(130,50,210,.35)} :root[data-halloween] #menu-desktop-div{margin-top:2px} @media (max-width:768px){:root[data-halloween] #menu-desktop-div{max-height:calc(100dvh - var(--header-height) - 2px)}} :root[data-halloween] #menu-desktop-div .site-menu-heading{color:#ff8a2a;background:#1a0f2c;border-bottom-color:#4a2d00} :root[data-halloween] #menu-desktop-div .site-menu-account{box-shadow:none;border:0} :root[data-halloween] #menu-desktop-div .site-menu-link:hover{text-shadow:0 0 8px rgba(255,138,42,.45)} :root[data-halloween] .hd-credits{background:#1a0b2e;box-shadow:inset 0 0 0 1px #ff8a2a;color:#ff8a2a} :root[data-halloween] .hd-credits .material-symbols-outlined{color:#ff8a2a} :root[data-halloween] .hd-credits:hover{background:#2a1248} :root[data-halloween] .hd-avatar{background:#ff8a2a;color:#1a0f00;box-shadow:0 0 10px rgba(255,138,42,.55)} :root[data-halloween] .hd-dd{box-shadow:0 0 0 1px #ff8a2a,4px 6px 24px rgba(0,0,0,.75),0 0 20px rgba(130,50,210,.4)} :root[data-halloween] .hd-dd-credits{box-shadow:inset 0 0 0 1px #5a3a00} /* live-bets promo button text (white pill: dark purple text instead of the faded lavender) */ :root[data-halloween] .ix-promo a,:root[data-halloween] .ix-promo button{color:#4a1a8c !important} /* weekly prediction-market popup: heading was turning white on its light box */ :root[data-halloween] .emp h2{color:#4a1a8c !important} /* my-account purchase streak: inline dark greys are unreadable on the dark card */ :root[data-halloween] #e #purchase-streak-section [style*="#555"],:root[data-halloween] #e #purchase-streak-section [style*="#333"],:root[data-halloween] #e #purchase-streak-section [style*="#444"],:root[data-halloween] #e #purchase-streak-section [style*="#666"],:root[data-halloween] #e #purchase-streak-section [style*="#777"],:root[data-halloween] #e #purchase-streak-section [style*="#888"],:root[data-halloween] #e #purchase-streak-section [style*="#999"]{color:var(--mute) !important} :root[data-halloween] #e #purchase-streak-section .streak-explainer,:root[data-halloween] #e #purchase-streak-section .streak-explainer li,:root[data-halloween] #e #purchase-streak-section .streak-explainer summary{color:var(--text) !important} /* moneyball league chips: hardcoded #fafafa background made the light text unreadable */ :root[data-halloween] #e .league-label{background:var(--zebra)} :root[data-halloween] #e .league-label:hover{background:var(--hl);border-color:var(--link)} :root[data-halloween] #e .league-label.active{background:var(--hl)} /* ---- page-load overlay (#overlay, shown by header_v3.php until the page is ready) ---- */ :root[data-halloween] #overlay{background:radial-gradient(ellipse at 50% 42%,#3a1666 0%,#1a0b2e 55%,#0f0619 100%) !important;flex-direction:column;gap:6px} :root[data-halloween] #overlay .logo{color:#ff8a2a !important;text-shadow:0 0 18px rgba(255,138,42,.65),0 0 40px rgba(130,50,210,.5)} :root[data-halloween] #overlay::after{content:"πŸŽƒ";font-size:44px;line-height:1;filter:drop-shadow(0 0 14px rgba(255,138,42,.8));animation:hw-pump 1.6s ease-in-out infinite} :root[data-halloween] #overlay::before{content:"πŸ¦‡ πŸ•ΈοΈ πŸ¦‡";position:absolute;top:18%;left:0;right:0;text-align:center;font-size:26px;letter-spacing:10px;opacity:.55;pointer-events:none} @media (prefers-reduced-motion:reduce){:root[data-halloween] #overlay::after{animation:none}}