/* Halowin theme - spooky/retro-ish theme for nav, sidebar, buttons, borders */ :root{ --halo-bg:#0b0f1a; --halo-panel:#0f1724; --halo-accent:#ff8c00; /* primary pumpkin/orange */ --halo-accent-2:#ffb86b; /* secondary warm orange */ --halo-text:#f8fafc; --halo-muted:#94a3b8; --halo-border: rgba(255,140,0,0.12); } /* Force Halowin appearance when enabled on or body via class */ .halowin-active, html.halowin, html.halowin * { color: var(--halo-text) !important; } /* Ensure the page chrome and safe-area use the Halowin background on mobile This covers iOS notch/status bar and Android theme color areas. We use the provided background image with a dark gradient overlay so foreground text stays readable. The image path is /assets/img/background.png. */ html.halowin, .halowin-active, html.halowin body, .halowin-active body { /* fallback solid background color */ background-color: var(--halo-bg) !important; /* overlay gradient first, then the image so gradient tints the photo */ background-image: linear-gradient(180deg, rgba(29, 39, 68, 0.86), rgba(25, 35, 56, 0.86)), url('/assets/img/background.png') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; /* keep the background fixed like a hero wallpaper */ background-attachment: fixed !important; color: var(--halo-text) !important; /* Use viewport-relative min-height that accounts for mobile browser UI. Avoid forcing a fixed height (height:100%) which can prevent the page from growing and block scrolling on some mobile browsers. */ min-height: 100dvh !important; margin: 0 !important; /* Allow native scrolling and smooth mobile momentum scrolling */ overflow: auto; -webkit-overflow-scrolling: touch; } /* iOS safe-area padding — keep content away from the notch but don't expose white */ html.halowin body, .halowin-active body { padding-top: env(safe-area-inset-top) !important; padding-left: env(safe-area-inset-left) !important; padding-right: env(safe-area-inset-right) !important; padding-bottom: env(safe-area-inset-bottom) !important; } /* Ensure core layout elements inherit Halowin backgrounds */ .halowin-active header, html.halowin header, .halowin-active nav, html.halowin nav, .halowin-active aside, html.halowin aside, .halowin-active .card, html.halowin .card, .halowin-active .panel, html.halowin .panel { background: linear-gradient(180deg,var(--halo-panel), rgba(10,12,20,0.6)) !important; color: var(--halo-text) !important; border:1px solid var(--halo-border) !important; } /* Keep theme toggle visible but visually disabled when Halowin is active. This shows the control (so users can see theme is normally available) while preventing interaction because Halowin enforces its own appearance. */ .halowin-active #themeToggle, .halowin-active .theme-toggle, html.halowin #themeToggle, html.halowin .theme-toggle { display: none !important; } /* Announcement bar - solid background for halowin theme */ html.halowin .bg-announcement-bar, .halowin-active .bg-announcement-bar, html.halowin div.bg-announcement-bar, .halowin-active div.bg-announcement-bar { background: #0f172a !important; background-color: #0f172a !important; background-image: none !important; opacity: 1 !important; } /* Panels / cards */ .halowin-panel, .halowin-panel *{ background: linear-gradient(180deg,var(--halo-panel), rgba(10,12,20,0.6)) !important; color: var(--halo-text) !important; } .halowin-panel{ border:1px solid var(--halo-border) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important; } /* Nav and sidebar */ .halowin-nav, .halowin-sidebar{ background: linear-gradient(180deg,#071428, #0b1320) !important; border-right:1px solid rgba(255,255,255,0.03) !important } .halowin-nav { position: relative; overflow: hidden; } @keyframes rotate { 100% { transform: rotate(1turn); } } .halowin-nav::before { content: ""; position: absolute; z-index: -2; left: -50%; top: -50%; width: 200%; height: 200%; background-color: #1a233a; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(var(--halo-accent), var(--halo-accent-2)), linear-gradient(#00F, #00F), linear-gradient(#0FF, #0FF), linear-gradient(#F0F, #F0F); animation: rotate 4s linear infinite; } .halowin-nav::after { content: ""; position: absolute; z-index: -1; left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); background: linear-gradient(180deg,#071428, #0b1320); border-radius: 14px; /* Should be slightly less than the parent's border-radius */ } .halowin-nav a, .halowin-sidebar a, .halowin-nav .text, .halowin-sidebar .text{ color: var(--halo-text) !important } /* Buttons */ .halowin-btn{ background: linear-gradient(90deg,var(--halo-accent), var(--halo-accent-2)) !important; color: #fff !important; border: none !important; box-shadow: 0 8px 28px rgba(255,140,0,0.16) !important; } .halowin-btn-outline{ background: transparent !important; color: var(--halo-accent) !important; border:1px solid rgba(255,140,0,0.18) !important } /* Links and accents */ a.halowin-link{ color: var(--halo-accent) !important } /* Pumpkin / decorative icon helpers */ .halowin-icon::before, .halowin-brand::before { content: "🎃"; margin-right: .5rem; display: inline-block; transform: translateY(1px); font-size: 1.05em; } /* For places where the icon should be more subtle */ .halowin-icon.small::before { font-size: .9em; margin-right: .35rem } /* Orange text outline / stroke (approx) for headers or special labels */ .halowin-text-outline { color: var(--halo-text) !important; text-shadow: -1px -1px 0 var(--halo-accent), 1px -1px 0 var(--halo-accent), -1px 1px 0 var(--halo-accent), 1px 1px 0 var(--halo-accent); } /* Make SVGs adopt the accent color where possible, but let icons inherit color naturally */ html.halowin svg:not(.fi):not([class*="fi-"]), .halowin-active svg:not(.fi):not([class*="fi-"]) { color: var(--halo-accent) !important; fill: currentColor !important; stroke: currentColor !important; } /* Auth pages styling for Halowin theme - clear borders and better contrast */ html.halowin .auth-card, .halowin-active .auth-card { background: linear-gradient(180deg, var(--halo-panel), rgba(15, 23, 36, 0.95)) !important; border: 2px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 0 40px rgba(255, 255, 255, 0.15), 0 10px 60px rgba(0, 0, 0, 0.6) !important; } /* User icon container */ html.halowin .auth-card .inline-flex, .halowin-active .auth-card .inline-flex { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } /* Social login buttons - clear borders and better contrast */ html.halowin .auth-card .grid button, .halowin-active .auth-card .grid button { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: var(--halo-text) !important; } html.halowin .auth-card .grid button:hover, .halowin-active .auth-card .grid button:hover { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2) !important; } /* Divider line */ html.halowin .auth-card .border-t, .halowin-active .auth-card .border-t { border-color: rgba(255, 255, 255, 0.2) !important; } /* Input fields - clear borders */ html.halowin .auth-card input, .halowin-active .auth-card input { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: var(--halo-text) !important; } html.halowin .auth-card input:focus, .halowin-active .auth-card input:focus { border-color: rgba(255, 255, 255, 0.5) !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important; outline: none !important; } html.halowin .auth-card input::placeholder, .halowin-active .auth-card input::placeholder { color: var(--halo-muted) !important; } /* Submit button */ html.halowin .auth-card button[type="submit"], .halowin-active .auth-card button[type="submit"] { background: linear-gradient(90deg, var(--halo-accent), var(--halo-accent-2)) !important; border: none !important; color: #0b0f1a !important; font-weight: 600 !important; box-shadow: 0 0 30px rgba(255, 140, 0, 0.4) !important; } html.halowin .auth-card button[type="submit"]:hover, .halowin-active .auth-card button[type="submit"]:hover { box-shadow: 0 0 40px rgba(255, 140, 0, 0.6), 0 0 60px rgba(255, 140, 0, 0.3) !important; transform: translateY(-2px) !important; } /* Links */ html.halowin .auth-card a, .halowin-active .auth-card a { color: var(--halo-accent) !important; } html.halowin .auth-card a:hover, .halowin-active .auth-card a:hover { color: var(--halo-accent-2) !important; text-decoration: underline !important; } /* Password toggle button - make eye icon clear and visible */ html.halowin .auth-card button[onclick*="togglePassword"], .halowin-active .auth-card button[onclick*="togglePassword"] { background: rgba(255, 140, 0, 0.1) !important; border-radius: 0.375rem !important; padding: 0.25rem !important; } html.halowin .auth-card button[onclick*="togglePassword"]:hover, .halowin-active .auth-card button[onclick*="togglePassword"]:hover { background: rgba(255, 140, 0, 0.2) !important; } html.halowin .auth-card button[onclick*="togglePassword"] svg, .halowin-active .auth-card button[onclick*="togglePassword"] svg { color: var(--halo-text) !important; stroke: var(--halo-text) !important; fill: none !important; opacity: 1 !important; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)) !important; } html.halowin .auth-card button[onclick*="togglePassword"]:hover svg, .halowin-active .auth-card button[onclick*="togglePassword"]:hover svg { color: var(--halo-accent) !important; stroke: var(--halo-accent) !important; filter: drop-shadow(0 0 4px rgba(255, 140, 0, 0.6)) !important; } /* Success/error messages */ html.halowin .auth-card .bg-emerald-100, .halowin-active .auth-card .bg-emerald-100 { background: rgba(16, 185, 129, 0.15) !important; border-color: rgba(16, 185, 129, 0.4) !important; color: #6ee7b7 !important; } /* Inputs / selects */ .halowin-input, .halowin-select, .halowin-textarea{ background: rgba(255,255,255,0.02) !important; color: var(--halo-text) !important; border:1px solid rgba(255,255,255,0.04) !important } /* Stronger select styling for Halowin theme. Note: many mobile OS pickers render native UI that cannot be fully styled. These rules help desktop browsers and browsers that respect option/background styling. */ html.halowin select, .halowin-active select { background-color: var(--halo-panel) !important; background-image: none !important; color: var(--halo-text) !important; border:1px solid rgba(255,255,255,0.04) !important; box-shadow: none !important; outline: none !important; -webkit-appearance: menulist-button !important; appearance: menulist-button !important; color-scheme: dark !important; /* hint browsers to use dark UI */ accent-color: var(--halo-accent) !important; } html.halowin select:focus, .halowin-active select:focus { box-shadow: 0 0 0 3px rgba(255,140,0,0.12) !important; } html.halowin select option, .halowin-active select option { background-color: var(--halo-panel) !important; color: var(--halo-text) !important; color-scheme: dark !important; } /* Vendor-specific hints */ html.halowin select::-webkit-scrollbar, .halowin-active select::-webkit-scrollbar { background: transparent !important; } html.halowin select::-ms-expand { filter: invert(1) !important; } /* Utility class for select elements using appearance-none in templates */ .halowin-select.appearance-none.select-arrow { background-image: linear-gradient(45deg, transparent 50%, var(--halo-text) 50%), linear-gradient(135deg, var(--halo-text) 50%, transparent 50%); background-position: calc(100% - 1rem) calc(1em), calc(100% - .7rem) calc(1em); background-size: .45em .45em, .45em .45em; background-repeat: no-repeat; } /* Sidebar collapsed state fix */ #sidebar.halowin-sidebar, #adminSidebar.halowin-sidebar { background: linear-gradient(180deg,#000000,#1d0000) !important } /* small utility */ .halowin-border { border:1px solid rgba(255,255,255,0.04) !important } /* Ensure loader adapts */ #globalPageLoader.v2.halowin { background: transparent !important } /* Footer */ .halowin-footer{ background: transparent !important; color: var(--halo-muted) !important } /* Make sure high-specificity overrides base Tailwind colors for core elements */ header, nav, aside, .card, .panel { background: transparent !important } /* Strong global overrides to catch Tailwind utility classes and common button patterns These use html.halowin/.halowin-active scoping and !important to ensure Halowin wins. */ html.halowin, .halowin-active { --halo-bg: #0b0f1a; --halo-panel: #0f1724; --halo-sidebar: #000000; } html.halowin header, .halowin-active header, html.halowin nav, .halowin-active nav, html.halowin aside, .halowin-active aside, html.halowin .card, .halowin-active .card, html.halowin .panel, .halowin-active .panel { background: linear-gradient(180deg,var(--halo-sidebar), rgba(22, 0, 0, 0.6)) !important; color: var(--halo-text) !important; border-color: var(--halo-border) !important; } /* Buttons and elements with background utilities (e.g. bg-*) */ html.halowin button, .halowin-active button, html.halowin .btn, .halowin-active .btn, html.halowin a[class*="btn"], .halowin-active a[class*="btn"], html.halowin [class*="btn-"], .halowin-active [class*="btn-"] { /* background: linear-gradient(90deg,var(--halo-accent), var(--halo-accent-2)) !important; */ color: #fff !important; border: none !important; box-shadow: 0 6px 20px rgba(0,0,0,0.6) !important; } /* Catch elements using Tailwind bg-* utility classes and neutralize their bg to Halowin panel */ html.halowin [class*="bg-"], .halowin-active [class*="bg-"] { background-image: none !important; background-color: transparent !important; } /* Apply panel look to elements that still rely on utility classes */ html.halowin [class*="bg-"], .halowin-active [class*="bg-"] { background: linear-gradient(180deg,var(--halo-panel), rgba(10,12,20,0.6)) !important; color: var(--halo-text) !important; /* border:1px solid var(--halo-border) !important; */ } /* Links and accents */ html.halowin a, .halowin-active a { color: var(--halo-accent) !important } /* Halowin-specific appearance for auth links on login/register forms */ .halowin-active .auth-links .auth-link, html.halowin .auth-links .auth-link { color: #fff !important; background: linear-gradient(90deg, rgba(255,140,0,0.14), rgba(255,184,107,0.06)) !important; border: 1px solid rgba(255,140,0,0.12) !important; box-shadow: 0 6px 18px rgba(255,140,0,0.06) !important; } .halowin-active .auth-links .auth-link:hover, html.halowin .auth-links .auth-link:hover { background: linear-gradient(90deg, rgba(255,140,0,0.22), rgba(255,184,107,0.08)) !important; transform: translateY(-3px) !important; } /* Halowin checkbox overrides for remember-me */ .halowin-active .auth-checkbox, html.halowin .auth-checkbox { border: 1px solid rgba(255,140,0,0.14) !important; background: rgba(255,255,255,0.02) !important; } .halowin-active .auth-checkbox:focus, html.halowin .auth-checkbox:focus { box-shadow: 0 0 0 3px rgba(255,140,0,0.12) !important; } .halowin-active .auth-checkbox:checked, html.halowin .auth-checkbox:checked { border: none !important; background: linear-gradient(90deg,var(--halo-accent), var(--halo-accent-2)) !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: center !important; } /* Product card specific overrides: ensure product text is readable (white) under Halowin */ html.halowin .product-card-redesign, .halowin-active .product-card-redesign { background: linear-gradient(180deg,var(--halo-panel), rgba(10,12,20,0.6)) !important; border-color: var(--halo-border) !important; } html.halowin .product-card-redesign .product-name, .halowin-active .product-card-redesign .product-name, html.halowin .product-card-redesign .product-price, .halowin-active .product-card-redesign .product-price, html.halowin .product-card-redesign .product-stats-outside, .halowin-active .product-card-redesign .product-stats-outside, html.halowin .product-card-redesign .product-like-pill, .halowin-active .product-card-redesign .product-like-pill, html.halowin .product-card-redesign .product-stat-pill, .halowin-active .product-card-redesign .product-stat-pill { color: var(--halo-text) !important; } /* Ensure CTA button text stays white when Halowin is active (some CTA styles are utility-based) */ html.halowin .product-card-redesign .product-cta-btn, .halowin-active .product-card-redesign .product-cta-btn { color: #fff !important; } /* If price used gradient text or custom fill, ensure it's visible by setting fill/fill-color where applicable */ html.halowin .product-card-redesign .product-price, .halowin-active .product-card-redesign .product-price { -webkit-text-fill-color: var(--halo-text) !important; } /* Remove borders on common button patterns when Halowin is active (including Sera UI elements) */ html.halowin button, html.halowin input[type="button"], html.halowin input[type="submit"], html.halowin .btn, html.halowin [class*="btn-"], html.halowin [class*="sera-"], .halowin-active button, .halowin-active input[type="button"], .halowin-active input[type="submit"], .halowin-active .btn, .halowin-active [class*="btn-"], .halowin-active [class*="sera-"] { border: none !important; background-clip: padding-box !important; } /* keep a clear focus ring for keyboard users */ html.halowin button:focus, .halowin-active button:focus, html.halowin .btn:focus, .halowin-active .btn:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(255,140,0,0.12) !important; } /* Ensure the "new" product badge stays red in Halowin theme */ .product-badge-new { background-color: #dc2626 !important; /* red-600 */ color: #fff !important; box-shadow: 0 6px 18px rgba(0,0,0,0.45) !important; } html.halowin .product-badge-new, .halowin-active .product-badge-new { background-color: #dc2626 !important; color: #fff !important; }