/* CrimeIncCodeRed.css (ADMIN / STAFF) - consolidated */ /* CrimeIncCodeRed.css (MASTER) Auto-generated: 2026-01-11T05:35:46.391609 Includes: secure.css, secure_tools.css, ci_patch.css, ci_legal.css */ @import url('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'); /* ---- functions/css/secure.css ---- */ /* secure.css * BUILD: 20251231_028-css-split-secure * Purpose: styles for /secure/ pages (copy of legacy style.css) */ body { color: #D4AF37; background-color: #DDD; margin: 0; padding: 0; min-height: 100vh; } /* ============================== INDEX PAGE: Gold/Black Glass + Cycling Glow Scoped to .page-index so dashboard/secure pages are unaffected ============================== */ .page-index{ --glowDur: 7.5s; /* Deep black backdrop with subtle gold/teal hints */ background: radial-gradient(1200px 600px at 10% -10%, rgba(0,229,255,0.08), transparent 40%), radial-gradient(900px 500px at 90% 0%, rgba(57,255,20,0.06), transparent 45%), radial-gradient(900px 700px at 50% 110%, rgba(212,175,55,0.10), transparent 50%), #000; } /* Glass panel base (used on index containers) */ .page-index .glass{ background: rgba(0,0,0,0.55); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); border: 2px solid rgba(212,175,55,0.55); } /* Cycling glow animation (blue → green → gold) */ @keyframes glowCycle{ 0%{ box-shadow: 0 0 16px rgba(0,229,255,0.85), 0 0 36px rgba(0,229,255,0.35); border-color: rgba(0,229,255,0.9); } 33%{ box-shadow: 0 0 16px rgba(57,255,20,0.85), 0 0 36px rgba(57,255,20,0.35); border-color: rgba(57,255,20,0.9); } 66%{ box-shadow: 0 0 16px rgba(212,175,55,0.9), 0 0 36px rgba(212,175,55,0.45); border-color: rgba(212,175,55,0.95); } 100%{ box-shadow: 0 0 16px rgba(0,229,255,0.85), 0 0 36px rgba(0,229,255,0.35); border-color: rgba(0,229,255,0.9); } } /* Apply glass + glow to index key elements */ .page-index #CrimeIncRepresentation, .page-index #pinEntrySystem, .page-index #Terms-of-Service-and-Privacy-Policy, .page-index #advertisementListingSystem{ background: rgba(0,0,0,0.55); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); animation: glowCycle var(--glowDur) linear infinite; } /* Accent controls (buttons/links/hr) should follow the same glow cycle as panels */ @keyframes glowCycleSoft{ 0%{ box-shadow: 0 0 10px rgba(0,229,255,0.65), 0 0 18px rgba(0,229,255,0.25); border-color: rgba(0,229,255,0.95); } 33%{ box-shadow: 0 0 10px rgba(57,255,20,0.65), 0 0 18px rgba(57,255,20,0.25); border-color: rgba(57,255,20,0.95); } 66%{ box-shadow: 0 0 10px rgba(212,175,55,0.75), 0 0 20px rgba(212,175,55,0.32); border-color: rgba(212,175,55,0.98); } 100%{ box-shadow: 0 0 10px rgba(0,229,255,0.65), 0 0 18px rgba(0,229,255,0.25); border-color: rgba(0,229,255,0.95); } } @keyframes glowCycleLine{ 0%{ box-shadow: 0 0 10px rgba(0,229,255,0.45); border-color: rgba(0,229,255,0.95); } 33%{ box-shadow: 0 0 10px rgba(57,255,20,0.45); border-color: rgba(57,255,20,0.95); } 66%{ box-shadow: 0 0 12px rgba(212,175,55,0.50); border-color: rgba(212,175,55,0.98); } 100%{ box-shadow: 0 0 10px rgba(0,229,255,0.45); border-color: rgba(0,229,255,0.95); } } /* Make top controls + legal buttons match the glass look */ .page-index .pinIconBtn, .page-index .navOpenBtn, .page-index .pinLegalLink{ background: rgba(255,215,0,0.14); color: #D4AF37; border: 2px solid rgba(212,175,55,0.85); filter: none; animation: glowCycleSoft var(--glowDur) linear infinite; transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .page-index .pinIconBtn:hover, .page-index .navOpenBtn:hover, .page-index .pinLegalLink:hover{ background: rgba(255,215,0,0.22); transform: translateY(-1px); } /* PIN entry HR lines should glow-cycle too */ .page-index #pinEntrySystem #divInput hr{ border: 0; border-top: 4px solid rgba(212,175,55,0.85); width: 55%; animation: fadeIn 0.8s ease, glowCycleLine var(--glowDur) linear infinite; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce){ .page-index #CrimeIncRepresentation, .page-index #pinEntrySystem, .page-index #Terms-of-Service-and-Privacy-Policy, .page-index #advertisementListingSystem{ animation: none; box-shadow: 0 0 20px rgba(212,175,55,0.45); border-color: rgba(212,175,55,0.85); } } /* ===================================== Pack 021: Logo swap (logo.png -> logo2.png) - Before PIN: show logo.png - After PIN: fade in logo2.png smaller ===================================== */ .page-index #CrimeIncRepresentation{ /* Pack 023: show the FULL hero logo before unlock (no cropping), then shrink after unlock */ height: auto; overflow: hidden; transition: height 0.85s ease; } .page-index.pin-unlocked #CrimeIncRepresentation{ height: clamp(120px, 18vw, 170px); } .page-index .brandLogoStack{ position: relative; width: 100%; height: 100%; } .page-index .siteLogo{ transition: opacity 0.85s ease, transform 0.85s ease, filter 0.85s ease; } /* Locked/guest logo shows FULL image (no crop) */ .page-index .siteLogoLocked{ width: 100%; height: auto; display: block; opacity: 1; transform: scale(1); } /* Unlocked logo is smaller + centered (fades in) */ .page-index .siteLogoUnlocked{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92); /* Keep the unlocked logo compact inside the (smaller) header */ width: auto; height: auto; max-width: min(560px, 82%); max-height: calc(100% - 24px); opacity: 0; display: block; filter: drop-shadow(0 0 10px rgba(0,229,255,0.35)) drop-shadow(0 0 16px rgba(212,175,55,0.35)); } .page-index.pin-unlocked .siteLogoLocked{ /* After unlock we shrink the header, so the old hero logo must not affect layout */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; opacity: 0; transform: scale(1.03); filter: blur(2px); } .page-index.pin-unlocked .siteLogoUnlocked{ opacity: 1; transform: translate(-50%, -50%) scale(1); } #CrimeIncRepresentation { border: 3px solid #FDD700; width: min(800px, 95vw); margin: 10px auto 0; position: relative; } #CrimeIncRepresentation img { width: 100%; height: auto; display: block; } .navOpenBtn{ position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 10px; border: 2px solid #D4AF37; background: rgba(255,215,0,0.14); color: #D4AF37; cursor: pointer; z-index: 6000; font-size: 22px; line-height: 1; display: none; /* shown after PIN unlock */ } .navOpenBtn:hover{ background: rgba(255,215,0,0.22); color: #D4AF37; } /* ============================== PIN ENTRY SYSTEM (pre-unlock) ============================== */ #pinEntrySystem { color: #D4AF37; background-color: black; font-family: 'Audiowide'; width: min(800px, 95vw); min-height: 325px; border: 3px solid #FFD700; box-shadow: 0 0 20px 1px #FFD700; position: relative; margin: 14px auto 0; } /* ============================== TERMS / PRIVACY FOOTER (always visible) ============================== */ #Terms-of-Service-and-Privacy-Policy{ color: #D4AF37; background-color: black; font-family: 'Audiowide'; width: min(800px, 95vw); border: 3px solid #FFD700; box-shadow: 0 0 20px 1px #FFD700; position: relative; margin: 14px auto 18px; padding: 14px 0 14px; } /* Keep everything scoped to pinEntrySystem so it won't affect your merch sections */ #pinEntrySystem #divInput { text-align: center; width: 100%; position: relative; padding-top: 0px; } /* Pack 027: Give the PIN gate headline (and message) the same synced glow feel */ .page-index #pinEntrySystem h2, .page-index #pinEntrySystem #pinMsg{ animation: glowCycleText var(--glowDur) linear infinite; } /* HR styling stays the same */ #pinEntrySystem #divInput hr { animation: fadeIn 6s; width: 55%; margin: 16px auto; border: 0; border-top: 4px solid #D4AF37; } /* NEW: row that holds input + buttons */ #pinEntrySystem .pinControlsRow { display: flex; justify-content: center; align-items: center; gap: 10px; /* Keep the controls visually centered between the HR dividers */ margin: 0 auto; padding: 10px 0; } /* Input styling (no absolute positioning) */ #pinEntrySystem #pinInput { color: #D4AF37; background: rgba(255,215,0,0.14); height: 30px; width: 180px; border: 2px solid #D4AF37; padding: 0 10px; outline: none; } /* Pack 023: PIN input should glow in-sync with the PIN control buttons */ .page-index #pinEntrySystem #pinInput{ animation: glowCycleSoft var(--glowDur) linear infinite; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* Keep the PIN input glow cycle consistent (no special focus border styling) */ /* Button styling (scoped) */ #pinEntrySystem .pinIconBtn { color: #D4AF37; background: rgba(255,215,0,0.14); height: 34px; width: 34px; border: 2px solid #D4AF37; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; } /* Optional: message spacing */ #pinEntrySystem #pinMsg { min-height: 22px; margin: 8px 0 8px; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* ============================== ADVERTISEMENT LISTING SYSTEM (post-unlock) ============================== */ #advertisementListingSystem { display: none; color: #D4AF37; background-color: black; font-family: 'Audiowide'; width: min(800px, 95vw); border: 3px solid #FFD700; box-shadow: 0 0 20px 1px #FFD700; position: relative; margin: 14px auto 0; } #merchSections{ padding: 16px 18px 22px; } /* Navigation Popup Box */ .navigationPopup { font-family: 'Audiowide'; height: 100%; width: 0; position: fixed; z-index: 5000; top: 0; right: 0; left: auto; background-color: #111; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; transition: 0.2s; padding-top: 40px; padding-bottom: 22px; /* allow bottom section to stick to bottom */ display: flex; flex-direction: column; } /* Links (kept from your original) */ .navigationPopup a { color: #818181; padding: 10px 14px 10px 28px; line-height: 1.25; text-decoration: none; font-size: 20px; display: block; transition: 0.3s; } .navigationPopup a:hover { color: #f1f1f1; } /* Close button */ .navigationPopup .navigationClose { position: absolute; top: 0; left: 12px; right: auto; font-size: 36px; margin-left: 0; } /* Menu button: changed to CLASS to match your HTML */ .navigationButton { color: #000; text-align: center; font-size: 20px; cursor: pointer; width: 28px; background-color: #FFD700; border: 1px solid #D4AF37; position: absolute; top: 205px; left: 50%; margin-left: 78px; transition: margin-left .5s; } /* NEW: nav sections */ .navSection { padding: 8px 0; } .navHeader { color: #f1f1f1; padding: 6px 32px; font-size: 16px; opacity: 0.9; } /* NEW: pin bottom section to bottom */ .navBottom { margin-top: auto; padding-bottom: 26px; } /* NEW: ordered lists styled cleanly (still easy to turn into buttons) */ .navList { list-style: decimal; padding-left: 50px; /* keep numbers visible */ margin: 0; } .navList li { margin: 6px 0; } /* Make list items feel like “buttons” without fighting your existing link padding */ .navList li a { border: 1px solid #333; border-radius: 6px; margin-right: 16px; background: rgba(255,255,255,0.02); } .navList li a:hover { border-color: #555; } @media screen and (max-height: 450px) { .navigationPopup { padding-top: 15px; } .navigationPopup a { font-size: 18px; } } /* Highlight PIN alerts when active */ .pinAlertActive { color: #ff4d4d !important; border-color: #ff4d4d !important; background: rgba(255, 77, 77, 0.08); font-weight: bold; } /* Login Box Style */ .login-input-container { padding: 16px; } /* -------------Login Inputs------------- */ .login-input-container input[type=text], .login-input-container input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* -------------Login Buttons------------- */ .login-exit { position: absolute; top: 0px; right: 25px; background: transparent; border: none; font: inherit; color: inherit; cursor: pointer; padding: 6px 10px; } .login-submit-button { font-size: 20px; width: 100%; padding: 14px 20px; background-color: #FFD700; } .login-submit-button:hover { color: white; background-color: #D4AF37; border: 2px solid black; box-shadow: 0 0 2px 2px white; } .login-input-container input:hover { border: 2px solid black; box-shadow: 0 0 2px 2px white; } .login-image-container { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; } /* -------------Login Content------------- */ .login-popup-box { font-family: 'Audiowide'; display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 9000; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ padding-top: 60px; } .login-popup-content { color: #FDD700; background-color: #6E6C53; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 3px solid #FFD700; width: 525px; /* Could be more or less, depending on screen size */ } .login-popup-content label { font-size: 20px; } /* -------------Login Animation------------- */ .animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s; } @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} } /* --- Merch grid + modal (added 2025-12-25) --- */ .merchGrid{ display:grid; grid-template-columns: repeat(3, 1fr); justify-content: center; gap:12px; margin: 10px auto 20px; max-width: 100%; } @media (max-width: 760px){ .merchGrid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px){ .merchGrid{ grid-template-columns: repeat(2, 1fr); } } /* Mobile: use a floating menu button + centered nav popup */ @media (max-width: 760px){ /* show the floating menu button even before unlock */ .navOpenBtn{ display: block; } /* reduce duplicate hamburger inside the PIN row */ #pinEntrySystem #navigationButton{ display: none; } /* make the nav behave like a popup rather than a full side panel */ .navigationPopup{ left: 50%; right: auto; transform: translateX(-50%); top: 76px; height: auto; max-height: calc(100vh - 110px); border-radius: 14px; border: 2px solid rgba(212,175,55,0.85); box-shadow: 0 0 22px rgba(212,175,55,0.55); } /* Mobile nav: simple list (no numbers, tighter padding) */ .navHeader{ padding: 6px 18px; } .navList{ list-style: none; padding-left: 18px; } .navList li a{ margin-right: 18px; } .navigationPopup a{ padding: 10px 14px; font-size: 18px; } } .merchCard{ border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; overflow: hidden; cursor: pointer; background: rgba(0,0,0,0.25); } .merchImgWrap{ width: 100%; aspect-ratio: 1 / 1; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.4); } .merchImgWrap img{ width:100%; height:100%; object-fit: cover; display:block; } .merchNoImg{ color: rgba(255,255,255,0.7); font-size: 14px; } .merchMeta{ padding: 10px 12px 12px; } .merchTitle{ font-weight: 700; margin-bottom: 6px; } .merchPrice{ font-size: 18px; margin-bottom: 6px; } .merchTag{ font-size: 13px; opacity: 0.9; } .merchModalOverlay{ position: fixed; inset: 0; background: rgba(0,0,0,0.72); display:flex; align-items:center; justify-content:center; padding: 18px; z-index: 9999; } .merchModal{ width: min(1100px, 96vw); max-height: 92vh; overflow: auto; border-radius: 12px; background: rgba(15,15,15,0.98); border: 1px solid rgba(255,255,255,0.15); padding: 14px 14px 18px; position: relative; } .merchModalClose{ position:absolute; right: 10px; top: 6px; font-size: 34px; line-height: 34px; background: transparent; border: none; color: rgba(255,255,255,0.85); cursor:pointer; } .merchModalBody{ display:block; } .merchModalMain{ width: 100%; display:flex; justify-content:center; margin-bottom: 10px; } .merchModalMainImg{ width: 100%; max-height: 60vh; object-fit: contain; background: rgba(0,0,0,0.25); border-radius: 8px; } .merchModalThumbs{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 14px; } .merchThumb{ background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 0; cursor: pointer; overflow:hidden; width: 86px; height: 86px; } .merchThumb img{ width:100%; height:100%; object-fit: cover; display:block; } .merchDetailGrid .row{ display:grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.10); } .merchDetailGrid .k{ opacity: 0.85; } .merchDetailGrid .v{ opacity: 0.95; } .merchModalActions{ display:flex; gap: 10px; margin-bottom: 12px; } .merchModalActions .btn{ display:inline-block; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); text-decoration:none; cursor:pointer; } .merchModalActions .btn-danger{ background: rgba(255,0,0,0.18); border-color: rgba(255,0,0,0.35); } /* --- Merch section controls + role sections (added 2025-12-27 patch-002) --- */ .merchControls{ display:flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 10px 0 14px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; background: rgba(255,255,255,0.04); } .merchControlsLeft, .merchControlsRight{ display:flex; flex-wrap: wrap; gap: 10px; align-items:center; } .merchControlsTitle{ font-size: 13px; opacity: 0.9; margin-right: 4px; } .merchToggle{ display:flex; align-items:center; gap: 6px; font-size: 13px; cursor:pointer; user-select:none; } .merchToggle input{ accent-color: #FFD700; } .merchCount{ font-size: 12px; opacity: 0.85; } .merchControls select{ padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.92); font-family: inherit; } .merchRoleSection{ margin: 18px 0; padding-top: 4px; } .merchRoleHeader{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .merchRoleHeader h2{ margin: 0; font-size: 18px; } .merchRoleMeta{ font-size: 12px; opacity: 0.85; } .merchEmpty{ font-size: 14px; opacity: 0.85; padding: 8px 0 4px; } .merchHidden{ display:none !important; } /* List view mode: keep the same cards, but 1 per row for easy scanning */ #merchGridHost.merchViewList .merchGrid{ grid-template-columns: 1fr; } /* Nav alert badge */ .navBadge { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: #ff3b30; color: #ffffff; font-size: 12px; font-weight: 700; text-align: center; vertical-align: middle; } /* ================================ TERMS / PRIVACY footer links (always visible below PIN + merch) ================================ */ #Terms-of-Service-and-Privacy-Policy{ display:flex; gap: 10px; justify-content: center; /* Pack 027: footer felt oversized; keep links centered + slightly tighter */ align-items: center; padding: 12px 14px; } #Terms-of-Service-and-Privacy-Policy .pinLegalLink{ flex: 1; display:flex; align-items:center; justify-content:center; padding: 10px 12px; border-radius: 12px; text-decoration: none; } @media (max-width: 520px){ #Terms-of-Service-and-Privacy-Policy{ /* Mobile: keep side-by-side, just smaller */ gap: 8px; padding: 10px 10px; } #Terms-of-Service-and-Privacy-Policy .pinLegalLink{ padding: 8px 6px; font-size: 12px; } } /* ================================ Pack 024: Transparent tagline overlay (logo slogan) - Transparent cut-out text with synced glow (blue → green → gold) - Intended to replace "baked-in" slogan text on the image ================================ */ @keyframes glowCycleText{ 0%{ text-shadow: 0 0 10px rgba(0,229,255,0.85), 0 0 22px rgba(0,229,255,0.35); } 33%{ text-shadow: 0 0 10px rgba(57,255,20,0.85), 0 0 22px rgba(57,255,20,0.35); } 66%{ text-shadow: 0 0 12px rgba(212,175,55,0.95), 0 0 26px rgba(212,175,55,0.45); } 100%{ text-shadow: 0 0 10px rgba(0,229,255,0.85), 0 0 22px rgba(0,229,255,0.35); } } .page-index .logoTagline{ position: absolute; left: 50%; bottom: clamp(6px, 1.1vw, 10px); transform: translateX(-50%) skew(-10deg); /* Make the slogan span the full logo width */ width: 100%; text-align: center; font-family: 'Audiowide', sans-serif; font-size: clamp(12px, 2.15vw, 19px); line-height: 1.05; letter-spacing: 0.07em; /* Transparent fill (cut-out) with a gold outline */ color: transparent; -webkit-text-stroke: 1.4px rgba(212,175,55,0.78); opacity: 0.98; pointer-events: none; z-index: 6; isolation: isolate; animation: glowCycleText var(--glowDur) linear infinite; } /* Blurred glow behind the outline */ .page-index .logoTagline::before{ content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 0; z-index: -1; opacity: 0.7; filter: blur(6px); animation: glowCycleText var(--glowDur) linear infinite; } /* Once unlocked, hide the tagline (keeps the unlocked header clean) */ .page-index.pin-unlocked .logoTagline{ opacity: 0; transform: translateX(-50%) skew(-10deg) translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; } @media (max-width: 520px){ .page-index .logoTagline{ font-size: 12px; letter-spacing: 0.04em; } } /* ---- functions/css/secure_tools.css ---- */ /* css/secure_tools.css * BUILD: 2025-12-28-patch-006-blacktext-statuscolors-1 * Purpose: make /secure tools easy to read (black text on light panels) * Status colors: Active=GREEN, Suspended=RED, Review=YELLOW */ /* Main readable wrapper for secure tools. */ .securePage{ max-width: 1200px; margin: 26px auto; padding: 18px 18px 50px; background: #ffffff; border: 3px solid #FFD700; border-radius: 12px; box-shadow: 0 0 16px rgba(0,0,0,0.18); color: #000; } /* Ensure readable defaults inside secure pages even if global site theme is gold. */ .securePage *{ color: inherit; } .securePage a{ color: #000; text-decoration: underline; } .securePage a:hover{ text-decoration: none; } .securePage h1, .securePage h2{ color: #000; } .securePage .muted{ color: rgba(0,0,0,0.70); } .secureHeaderRow{ display:flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; } .secureHeaderRow h1{ margin: 0; font-size: 26px; } .secureBreadcrumbs{ font-size: 14px; color: rgba(0,0,0,0.70); } /* Cards */ .secureCard{ border: 1px solid rgba(0,0,0,0.18); background: rgba(0,0,0,0.03); border-radius: 12px; padding: 12px; } .secureGrid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 980px){ .secureGrid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .secureGrid{ grid-template-columns: 1fr; } } .secureCard h2{ margin: 0 0 8px 0; font-size: 18px; } .secureCard p{ margin: 6px 0; } /* Header action links/buttons */ .secureLinks{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .secureLinks a, .secureLinks button{ display:inline-block; padding: 8px 10px; border-radius: 10px; border: 2px solid rgba(0,0,0,0.80); background: #FFD700; color: #000; text-decoration: none; cursor: pointer; } .secureLinks a:hover, .secureLinks button:hover{ background: #D4AF37; } /* Two column form layout */ .secureTwoCol{ display:flex; gap: 14px; align-items: flex-start; } .secureTwoCol > .col{ flex: 1; min-width: 0; } @media (max-width: 980px){ .secureTwoCol{ flex-direction: column; } } /* Forms */ .secureForm label{ display:block; margin: 10px 0 4px; font-weight: 700; color: #000; } .secureForm input[type="text"], .secureForm input[type="number"], .secureForm input[type="datetime-local"], .secureForm input[type="password"], .secureForm select, .secureForm textarea{ width: 100%; max-width: 100%; padding: 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.35); background: #ffffff; color: #000; } .secureForm input:focus, .secureForm select:focus, .secureForm textarea:focus{ outline: none; border-color: rgba(0,0,0,0.75); box-shadow: 0 0 0 3px rgba(255,215,0,0.25); } .secureForm textarea{ min-height: 140px; resize: vertical; } .secureForm .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 720px){ .secureForm .row2{ grid-template-columns: 1fr; } } .secureForm .divider{ height: 1px; background: rgba(0,0,0,0.12); margin: 14px 0; } /* Preview column */ .previewWrap{ position: sticky; top: 14px; } .previewWrap h2{ margin: 0 0 10px; font-size: 18px; } /* Tables */ .secureTable{ width:100%; border-collapse: collapse; } .secureTable th, .secureTable td{ border-bottom: 1px solid rgba(0,0,0,0.12); padding: 10px 8px; vertical-align: top; color: #000; } .secureTable th{ text-align:left; font-size: 13px; background: rgba(0,0,0,0.04); } /* Badges: default + status color variants */ .badge{ display:inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.25); font-size: 12px; background: rgba(0,0,0,0.06); color: #000; } /* Active (GREEN) */ .badge.good, .badge.active{ background: #c8f7c5; border-color: #1b5e20; } /* Review / Pending (YELLOW) */ .badge.warn, .badge.review{ background: #fff1b8; border-color: #ff8f00; } /* Suspended / Disabled (RED) */ .badge.bad, .badge.suspended{ background: #ffc9c9; border-color: #b71c1c; } /* Small buttons (table action buttons) */ .btnSmall{ display:inline-block; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.70); background: #ffffff; color: #000; cursor: pointer; text-decoration:none; } .btnSmall:hover{ background: rgba(0,0,0,0.06); } /* Notices */ .notice{ padding: 10px 12px; border-radius: 12px; margin: 12px 0; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); } .notice.good{ border-color: rgba(0, 255, 140, .35); background: rgba(0, 255, 140, .10); } .notice.bad{ border-color: rgba(255, 70, 70, .35); background: rgba(255, 70, 70, .10); } /* --- Pack 046: log health + small layout helpers --- */ .grid2{display:grid;grid-template-columns:1fr;gap:12px;} @media(min-width:900px){.grid2{grid-template-columns:1fr 1fr;}} .kv{display:grid;grid-template-columns:180px 1fr;gap:6px 12px;align-items:start;} .ok{font-weight:700;} .bad{font-weight:700;} .logBox{max-height:420px;overflow:auto;padding:10px;border:1px solid rgba(0,0,0,0.15);border-radius:6px;white-space:pre-wrap;} /* ---- functions/css/ci_patch.css ---- */ /* ci_patch.css * Supplemental overrides for CrimeInc without modifying your main CSS files. * Keep this file small and intentional. */ /* Navigation: ensure hidden state truly hides (prevents accidental focus/aria warnings) */ #navigationInterface[aria-hidden="true"] { display: none !important; width: 0 !important; } body.nav-open #navigationInterface[aria-hidden="false"] { display: block !important; } /* If you add your own loader in index.php later, you can style it here. */ /* Nav open fallback button ----------------------- The PIN AJAX-swap can replace the root content where the original nav open button lives. navtoggle.js injects #ciNavOpenFallback as an always-available nav trigger. We only show it when the page no longer has a native trigger. */ #ciNavOpenFallback { display: none; position: fixed; top: 12px; right: 12px; z-index: 2147483000; /* stay above modals */ } body.ci-needs-menu-btn #ciNavOpenFallback { display: block; } @media (max-width: 640px) { body.ci-needs-menu-btn #ciNavOpenFallback { display: none; } } /* ---- functions/css/ci_legal.css ---- */ /* ci_legal.css Scoped legal-page styling for Crime Incorporated. Keep selectors under .ciLegal to avoid impacting the rest of the site. */ .ciLegal { --ci-legal-bg: rgba(0, 0, 0, 0.78); --ci-legal-panel: rgba(15, 15, 15, 0.88); --ci-legal-border: rgba(255, 215, 0, 0.35); --ci-legal-border-strong: rgba(255, 215, 0, 0.55); --ci-legal-text: rgba(255, 255, 255, 0.92); --ci-legal-muted: rgba(255, 255, 255, 0.72); --ci-legal-link: #FFD700; --ci-legal-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); color: var(--ci-legal-text); max-width: 1120px; margin: 0 auto; padding: 14px 12px 28px; box-sizing: border-box; } .ciLegal a { color: var(--ci-legal-link); text-decoration: none; } .ciLegal a:hover, .ciLegal a:focus { text-decoration: underline; } .ciLegalCard { background: var(--ci-legal-bg); border: 1px solid var(--ci-legal-border); border-radius: 14px; box-shadow: var(--ci-legal-shadow); padding: 16px 16px; } .ciLegalHeader { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; } .ciLegalHeaderMain h1 { margin: 0; padding: 0; font-size: 24px; line-height: 1.1; letter-spacing: 0.5px; font-family: "Audiowide", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } .ciLegalMeta { margin-top: 6px; font-size: 12.5px; color: var(--ci-legal-muted); } .ciLegalActions { display: flex; gap: 8px; flex-wrap: wrap; } .ciLegalBtn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--ci-legal-border); background: rgba(0, 0, 0, 0.35); color: var(--ci-legal-text); font-size: 12.5px; line-height: 1; cursor: pointer; } .ciLegalBtn:hover, .ciLegalBtn:focus { border-color: var(--ci-legal-border-strong); background: rgba(255, 215, 0, 0.10); text-decoration: none; } .ciLegalLayout { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; } @media (min-width: 980px) { .ciLegalLayout { grid-template-columns: 300px 1fr; } .ciLegalToc { position: sticky; top: 14px; align-self: start; } } .ciLegalTocTitle { font-family: "Audiowide", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 14px; margin-bottom: 10px; letter-spacing: 0.4px; } .ciLegalToc ol { margin: 0; padding-left: 18px; } .ciLegalToc li { margin: 7px 0; } .ciLegalToc a { font-size: 13px; color: rgba(255, 255, 255, 0.88); } .ciLegalToc a:hover, .ciLegalToc a:focus { color: var(--ci-legal-link); } .ciLegalNote { border-left: 3px solid var(--ci-legal-border-strong); padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); } .ciLegalNote strong { font-family: "Audiowide", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing: 0.35px; } .ciLegalNote ul { margin: 10px 0 0 18px; padding: 0; } .ciLegalDoc { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.65; } .ciLegalDoc h2, .ciLegalDoc h3, .ciLegalDoc h4 { scroll-margin-top: 16px; } .ciLegalDoc h2 { margin: 22px 0 10px; font-size: 18px; line-height: 1.25; font-family: "Audiowide", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing: 0.35px; border-left: 3px solid rgba(255, 215, 0, 0.45); padding-left: 10px; } .ciLegalDoc h3 { margin: 16px 0 8px; font-size: 15.5px; line-height: 1.25; font-weight: 700; color: rgba(255, 255, 255, 0.92); } .ciLegalDoc h4 { margin: 12px 0 8px; font-size: 14px; line-height: 1.25; font-weight: 700; color: rgba(255, 255, 255, 0.88); } .ciLegalDoc p { margin: 10px 0; } .ciLegalDoc ul { margin: 10px 0 10px 22px; } .ciLegalDoc li { margin: 6px 0; } .ciLegalDoc hr { border: 0; border-top: 1px solid rgba(255, 215, 0, 0.18); margin: 18px 0; } .ciLegalFooter .ciLegalMeta { margin-top: 0; } @media (prefers-reduced-motion: reduce) { .ciLegal * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } @media print { .ciLegal { padding: 0; max-width: none; } .ciLegalCard { box-shadow: none; border-color: #ccc; background: #fff; color: #111; } .ciLegalActions, .ciLegalToc { display: none !important; } .ciLegal a { color: #111; text-decoration: underline; } } /* --- merged: secure.css --- */ /* secure.css * BUILD: 20251231_028-css-split-secure * Purpose: styles for /secure/ pages (copy of legacy style.css) */ body { color: #D4AF37; background-color: #DDD; margin: 0; padding: 0; min-height: 100vh; } /* ============================== INDEX PAGE: Gold/Black Glass + Cycling Glow Scoped to .page-index so dashboard/secure pages are unaffected ============================== */ .page-index{ --glowDur: 7.5s; /* Deep black backdrop with subtle gold/teal hints */ background: radial-gradient(1200px 600px at 10% -10%, rgba(0,229,255,0.08), transparent 40%), radial-gradient(900px 500px at 90% 0%, rgba(57,255,20,0.06), transparent 45%), radial-gradient(900px 700px at 50% 110%, rgba(212,175,55,0.10), transparent 50%), #000; } /* Glass panel base (used on index containers) */ .page-index .glass{ background: rgba(0,0,0,0.55); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); border: 2px solid rgba(212,175,55,0.55); } /* Cycling glow animation (blue → green → gold) */ @keyframes glowCycle{ 0%{ box-shadow: 0 0 16px rgba(0,229,255,0.85), 0 0 36px rgba(0,229,255,0.35); border-color: rgba(0,229,255,0.9); } 33%{ box-shadow: 0 0 16px rgba(57,255,20,0.85), 0 0 36px rgba(57,255,20,0.35); border-color: rgba(57,255,20,0.9); } 66%{ box-shadow: 0 0 16px rgba(212,175,55,0.9), 0 0 36px rgba(212,175,55,0.45); border-color: rgba(212,175,55,0.95); } 100%{ box-shadow: 0 0 16px rgba(0,229,255,0.85), 0 0 36px rgba(0,229,255,0.35); border-color: rgba(0,229,255,0.9); } } /* Apply glass + glow to index key elements */ .page-index #CrimeIncRepresentation, .page-index #pinEntrySystem, .page-index #Terms-of-Service-and-Privacy-Policy, .page-index #advertisementListingSystem{ background: rgba(0,0,0,0.55); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); animation: glowCycle var(--glowDur) linear infinite; } /* Accent controls (buttons/links/hr) should follow the same glow cycle as panels */ @keyframes glowCycleSoft{ 0%{ box-shadow: 0 0 10px rgba(0,229,255,0.65), 0 0 18px rgba(0,229,255,0.25); border-color: rgba(0,229,255,0.95); } 33%{ box-shadow: 0 0 10px rgba(57,255,20,0.65), 0 0 18px rgba(57,255,20,0.25); border-color: rgba(57,255,20,0.95); } 66%{ box-shadow: 0 0 10px rgba(212,175,55,0.75), 0 0 20px rgba(212,175,55,0.32); border-color: rgba(212,175,55,0.98); } 100%{ box-shadow: 0 0 10px rgba(0,229,255,0.65), 0 0 18px rgba(0,229,255,0.25); border-color: rgba(0,229,255,0.95); } } @keyframes glowCycleLine{ 0%{ box-shadow: 0 0 10px rgba(0,229,255,0.45); border-color: rgba(0,229,255,0.95); } 33%{ box-shadow: 0 0 10px rgba(57,255,20,0.45); border-color: rgba(57,255,20,0.95); } 66%{ box-shadow: 0 0 12px rgba(212,175,55,0.50); border-color: rgba(212,175,55,0.98); } 100%{ box-shadow: 0 0 10px rgba(0,229,255,0.45); border-color: rgba(0,229,255,0.95); } } /* Make top controls + legal buttons match the glass look */ .page-index .pinIconBtn, .page-index .navOpenBtn, .page-index .pinLegalLink{ background: rgba(255,215,0,0.14); color: #D4AF37; border: 2px solid rgba(212,175,55,0.85); filter: none; animation: glowCycleSoft var(--glowDur) linear infinite; transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .page-index .pinIconBtn:hover, .page-index .navOpenBtn:hover, .page-index .pinLegalLink:hover{ background: rgba(255,215,0,0.22); transform: translateY(-1px); } /* PIN entry HR lines should glow-cycle too */ .page-index #pinEntrySystem #divInput hr{ border: 0; border-top: 4px solid rgba(212,175,55,0.85); width: 55%; animation: fadeIn 0.8s ease, glowCycleLine var(--glowDur) linear infinite; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce){ .page-index #CrimeIncRepresentation, .page-index #pinEntrySystem, .page-index #Terms-of-Service-and-Privacy-Policy, .page-index #advertisementListingSystem{ animation: none; box-shadow: 0 0 20px rgba(212,175,55,0.45); border-color: rgba(212,175,55,0.85); } } /* ===================================== Pack 021: Logo swap (logo.png -> logo2.png) - Before PIN: show logo.png - After PIN: fade in logo2.png smaller ===================================== */ .page-index #CrimeIncRepresentation{ /* Pack 023: show the FULL hero logo before unlock (no cropping), then shrink after unlock */ height: auto; overflow: hidden; transition: height 0.85s ease; } .page-index.pin-unlocked #CrimeIncRepresentation{ height: clamp(120px, 18vw, 170px); } .page-index .brandLogoStack{ position: relative; width: 100%; height: 100%; } .page-index .siteLogo{ transition: opacity 0.85s ease, transform 0.85s ease, filter 0.85s ease; } /* Locked/guest logo shows FULL image (no crop) */ .page-index .siteLogoLocked{ width: 100%; height: auto; display: block; opacity: 1; transform: scale(1); } /* Unlocked logo is smaller + centered (fades in) */ .page-index .siteLogoUnlocked{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92); /* Keep the unlocked logo compact inside the (smaller) header */ width: auto; height: auto; max-width: min(560px, 82%); max-height: calc(100% - 24px); opacity: 0; display: block; filter: drop-shadow(0 0 10px rgba(0,229,255,0.35)) drop-shadow(0 0 16px rgba(212,175,55,0.35)); } .page-index.pin-unlocked .siteLogoLocked{ /* After unlock we shrink the header, so the old hero logo must not affect layout */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; opacity: 0; transform: scale(1.03); filter: blur(2px); } .page-index.pin-unlocked .siteLogoUnlocked{ opacity: 1; transform: translate(-50%, -50%) scale(1); } #CrimeIncRepresentation { border: 3px solid #FDD700; width: min(800px, 95vw); margin: 10px auto 0; position: relative; } #CrimeIncRepresentation img { width: 100%; height: auto; display: block; } .navOpenBtn{ position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 10px; border: 2px solid #D4AF37; background: rgba(255,215,0,0.14); color: #D4AF37; cursor: pointer; z-index: 6000; font-size: 22px; line-height: 1; display: none; /* shown after PIN unlock */ } .navOpenBtn:hover{ background: rgba(255,215,0,0.22); color: #D4AF37; } /* ============================== PIN ENTRY SYSTEM (pre-unlock) ============================== */ #pinEntrySystem { color: #D4AF37; background-color: black; font-family: 'Audiowide'; width: min(800px, 95vw); min-height: 325px; border: 3px solid #FFD700; box-shadow: 0 0 20px 1px #FFD700; position: relative; margin: 14px auto 0; } /* ============================== TERMS / PRIVACY FOOTER (always visible) ============================== */ #Terms-of-Service-and-Privacy-Policy{ color: #D4AF37; background-color: black; font-family: 'Audiowide'; width: min(800px, 95vw); border: 3px solid #FFD700; box-shadow: 0 0 20px 1px #FFD700; position: relative; margin: 14px auto 18px; padding: 14px 0 14px; } /* Keep everything scoped to pinEntrySystem so it won't affect your merch sections */ #pinEntrySystem #divInput { text-align: center; width: 100%; position: relative; padding-top: 0px; } /* Pack 027: Give the PIN gate headline (and message) the same synced glow feel */ .page-index #pinEntrySystem h2, .page-index #pinEntrySystem #pinMsg{ animation: glowCycleText var(--glowDur) linear infinite; } /* HR styling stays the same */ #pinEntrySystem #divInput hr { animation: fadeIn 6s; width: 55%; margin: 16px auto; border: 0; border-top: 4px solid #D4AF37; } /* NEW: row that holds input + buttons */ #pinEntrySystem .pinControlsRow { display: flex; justify-content: center; align-items: center; gap: 10px; /* Keep the controls visually centered between the HR dividers */ margin: 0 auto; padding: 10px 0; } /* Input styling (no absolute positioning) */ #pinEntrySystem #pinInput { color: #D4AF37; background: rgba(255,215,0,0.14); height: 30px; width: 180px; border: 2px solid #D4AF37; padding: 0 10px; outline: none; } /* Pack 023: PIN input should glow in-sync with the PIN control buttons */ .page-index #pinEntrySystem #pinInput{ animation: glowCycleSoft var(--glowDur) linear infinite; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* Keep the PIN input glow cycle consistent (no special focus border styling) */ /* Button styling (scoped) */ #pinEntrySystem .pinIconBtn { color: #D4AF37; background: rgba(255,215,0,0.14); height: 34px; width: 34px; border: 2px solid #D4AF37; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; } /* Optional: message spacing */ #pinEntrySystem #pinMsg { min-height: 22px; margin: 8px 0 8px; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* ============================== ADVERTISEMENT LISTING SYSTEM (post-unlock) ============================== */ #advertisementListingSystem { display: none; color: #D4AF37; background-color: black; font-family: 'Audiowide'; width: min(800px, 95vw); border: 3px solid #FFD700; box-shadow: 0 0 20px 1px #FFD700; position: relative; margin: 14px auto 0; } #merchSections{ padding: 16px 18px 22px; } /* Navigation Popup Box */ .navigationPopup { font-family: 'Audiowide'; height: 100%; width: 0; position: fixed; z-index: 5000; top: 0; right: 0; left: auto; background-color: #111; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; transition: 0.2s; padding-top: 40px; padding-bottom: 22px; /* allow bottom section to stick to bottom */ display: flex; flex-direction: column; } /* Links (kept from your original) */ .navigationPopup a { color: #818181; padding: 10px 14px 10px 28px; line-height: 1.25; text-decoration: none; font-size: 20px; display: block; transition: 0.3s; } .navigationPopup a:hover { color: #f1f1f1; } /* Close button */ .navigationPopup .navigationClose { position: absolute; top: 0; left: 12px; right: auto; font-size: 36px; margin-left: 0; } /* Menu button: changed to CLASS to match your HTML */ .navigationButton { color: #000; text-align: center; font-size: 20px; cursor: pointer; width: 28px; background-color: #FFD700; border: 1px solid #D4AF37; position: absolute; top: 205px; left: 50%; margin-left: 78px; transition: margin-left .5s; } /* NEW: nav sections */ .navSection { padding: 8px 0; } .navHeader { color: #f1f1f1; padding: 6px 32px; font-size: 16px; opacity: 0.9; } /* NEW: pin bottom section to bottom */ .navBottom { margin-top: auto; padding-bottom: 26px; } /* NEW: ordered lists styled cleanly (still easy to turn into buttons) */ .navList { list-style: decimal; padding-left: 50px; /* keep numbers visible */ margin: 0; } .navList li { margin: 6px 0; } /* Make list items feel like “buttons” without fighting your existing link padding */ .navList li a { border: 1px solid #333; border-radius: 6px; margin-right: 16px; background: rgba(255,255,255,0.02); } .navList li a:hover { border-color: #555; } @media screen and (max-height: 450px) { .navigationPopup { padding-top: 15px; } .navigationPopup a { font-size: 18px; } } /* Highlight PIN alerts when active */ .pinAlertActive { color: #ff4d4d !important; border-color: #ff4d4d !important; background: rgba(255, 77, 77, 0.08); font-weight: bold; } /* Login Box Style */ .login-input-container { padding: 16px; } /* -------------Login Inputs------------- */ .login-input-container input[type=text], .login-input-container input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* -------------Login Buttons------------- */ .login-exit { position: absolute; top: 0px; right: 25px; background: transparent; border: none; font: inherit; color: inherit; cursor: pointer; padding: 6px 10px; } .login-submit-button { font-size: 20px; width: 100%; padding: 14px 20px; background-color: #FFD700; } .login-submit-button:hover { color: white; background-color: #D4AF37; border: 2px solid black; box-shadow: 0 0 2px 2px white; } .login-input-container input:hover { border: 2px solid black; box-shadow: 0 0 2px 2px white; } .login-image-container { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; } /* -------------Login Content------------- */ .login-popup-box { font-family: 'Audiowide'; display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 9000; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ padding-top: 60px; } .login-popup-content { color: #FDD700; background-color: #6E6C53; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 3px solid #FFD700; width: 525px; /* Could be more or less, depending on screen size */ } .login-popup-content label { font-size: 20px; } /* -------------Login Animation------------- */ .animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s; } @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} } /* --- Merch grid + modal (added 2025-12-25) --- */ .merchGrid{ display:grid; grid-template-columns: repeat(3, 1fr); justify-content: center; gap:12px; margin: 10px auto 20px; max-width: 100%; } @media (max-width: 760px){ .merchGrid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px){ .merchGrid{ grid-template-columns: repeat(2, 1fr); } } /* Mobile: use a floating menu button + centered nav popup */ @media (max-width: 760px){ /* show the floating menu button even before unlock */ .navOpenBtn{ display: block; } /* reduce duplicate hamburger inside the PIN row */ #pinEntrySystem #navigationButton{ display: none; } /* make the nav behave like a popup rather than a full side panel */ .navigationPopup{ left: 50%; right: auto; transform: translateX(-50%); top: 76px; height: auto; max-height: calc(100vh - 110px); border-radius: 14px; border: 2px solid rgba(212,175,55,0.85); box-shadow: 0 0 22px rgba(212,175,55,0.55); } /* Mobile nav: simple list (no numbers, tighter padding) */ .navHeader{ padding: 6px 18px; } .navList{ list-style: none; padding-left: 18px; } .navList li a{ margin-right: 18px; } .navigationPopup a{ padding: 10px 14px; font-size: 18px; } } .merchCard{ border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; overflow: hidden; cursor: pointer; background: rgba(0,0,0,0.25); } .merchImgWrap{ width: 100%; aspect-ratio: 1 / 1; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.4); } .merchImgWrap img{ width:100%; height:100%; object-fit: cover; display:block; } .merchNoImg{ color: rgba(255,255,255,0.7); font-size: 14px; } .merchMeta{ padding: 10px 12px 12px; } .merchTitle{ font-weight: 700; margin-bottom: 6px; } .merchPrice{ font-size: 18px; margin-bottom: 6px; } .merchTag{ font-size: 13px; opacity: 0.9; } .merchModalOverlay{ position: fixed; inset: 0; background: rgba(0,0,0,0.72); display:flex; align-items:center; justify-content:center; padding: 18px; z-index: 9999; } .merchModal{ width: min(1100px, 96vw); max-height: 92vh; overflow: auto; border-radius: 12px; background: rgba(15,15,15,0.98); border: 1px solid rgba(255,255,255,0.15); padding: 14px 14px 18px; position: relative; } .merchModalClose{ position:absolute; right: 10px; top: 6px; font-size: 34px; line-height: 34px; background: transparent; border: none; color: rgba(255,255,255,0.85); cursor:pointer; } .merchModalBody{ display:block; } .merchModalMain{ width: 100%; display:flex; justify-content:center; margin-bottom: 10px; } .merchModalMainImg{ width: 100%; max-height: 60vh; object-fit: contain; background: rgba(0,0,0,0.25); border-radius: 8px; } .merchModalThumbs{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 14px; } .merchThumb{ background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 0; cursor: pointer; overflow:hidden; width: 86px; height: 86px; } .merchThumb img{ width:100%; height:100%; object-fit: cover; display:block; } .merchDetailGrid .row{ display:grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.10); } .merchDetailGrid .k{ opacity: 0.85; } .merchDetailGrid .v{ opacity: 0.95; } .merchModalActions{ display:flex; gap: 10px; margin-bottom: 12px; } .merchModalActions .btn{ display:inline-block; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92); text-decoration:none; cursor:pointer; } .merchModalActions .btn-danger{ background: rgba(255,0,0,0.18); border-color: rgba(255,0,0,0.35); } /* --- Merch section controls + role sections (added 2025-12-27 patch-002) --- */ .merchControls{ display:flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 10px 0 14px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; background: rgba(255,255,255,0.04); } .merchControlsLeft, .merchControlsRight{ display:flex; flex-wrap: wrap; gap: 10px; align-items:center; } .merchControlsTitle{ font-size: 13px; opacity: 0.9; margin-right: 4px; } .merchToggle{ display:flex; align-items:center; gap: 6px; font-size: 13px; cursor:pointer; user-select:none; } .merchToggle input{ accent-color: #FFD700; } .merchCount{ font-size: 12px; opacity: 0.85; } .merchControls select{ padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.92); font-family: inherit; } .merchRoleSection{ margin: 18px 0; padding-top: 4px; } .merchRoleHeader{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .merchRoleHeader h2{ margin: 0; font-size: 18px; } .merchRoleMeta{ font-size: 12px; opacity: 0.85; } .merchEmpty{ font-size: 14px; opacity: 0.85; padding: 8px 0 4px; } .merchHidden{ display:none !important; } /* List view mode: keep the same cards, but 1 per row for easy scanning */ #merchGridHost.merchViewList .merchGrid{ grid-template-columns: 1fr; } /* Nav alert badge */ .navBadge { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: #ff3b30; color: #ffffff; font-size: 12px; font-weight: 700; text-align: center; vertical-align: middle; } /* ================================ TERMS / PRIVACY footer links (always visible below PIN + merch) ================================ */ #Terms-of-Service-and-Privacy-Policy{ display:flex; gap: 10px; justify-content: center; /* Pack 027: footer felt oversized; keep links centered + slightly tighter */ align-items: center; padding: 12px 14px; } #Terms-of-Service-and-Privacy-Policy .pinLegalLink{ flex: 1; display:flex; align-items:center; justify-content:center; padding: 10px 12px; border-radius: 12px; text-decoration: none; } @media (max-width: 520px){ #Terms-of-Service-and-Privacy-Policy{ /* Mobile: keep side-by-side, just smaller */ gap: 8px; padding: 10px 10px; } #Terms-of-Service-and-Privacy-Policy .pinLegalLink{ padding: 8px 6px; font-size: 12px; } } /* ================================ Pack 024: Transparent tagline overlay (logo slogan) - Transparent cut-out text with synced glow (blue → green → gold) - Intended to replace "baked-in" slogan text on the image ================================ */ @keyframes glowCycleText{ 0%{ text-shadow: 0 0 10px rgba(0,229,255,0.85), 0 0 22px rgba(0,229,255,0.35); } 33%{ text-shadow: 0 0 10px rgba(57,255,20,0.85), 0 0 22px rgba(57,255,20,0.35); } 66%{ text-shadow: 0 0 12px rgba(212,175,55,0.95), 0 0 26px rgba(212,175,55,0.45); } 100%{ text-shadow: 0 0 10px rgba(0,229,255,0.85), 0 0 22px rgba(0,229,255,0.35); } } .page-index .logoTagline{ position: absolute; left: 50%; bottom: clamp(6px, 1.1vw, 10px); transform: translateX(-50%) skew(-10deg); /* Make the slogan span the full logo width */ width: 100%; text-align: center; font-family: 'Audiowide', sans-serif; font-size: clamp(12px, 2.15vw, 19px); line-height: 1.05; letter-spacing: 0.07em; /* Transparent fill (cut-out) with a gold outline */ color: transparent; -webkit-text-stroke: 1.4px rgba(212,175,55,0.78); opacity: 0.98; pointer-events: none; z-index: 6; isolation: isolate; animation: glowCycleText var(--glowDur) linear infinite; } /* Blurred glow behind the outline */ .page-index .logoTagline::before{ content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 0; z-index: -1; opacity: 0.7; filter: blur(6px); animation: glowCycleText var(--glowDur) linear infinite; } /* Once unlocked, hide the tagline (keeps the unlocked header clean) */ .page-index.pin-unlocked .logoTagline{ opacity: 0; transform: translateX(-50%) skew(-10deg) translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; } @media (max-width: 520px){ .page-index .logoTagline{ font-size: 12px; letter-spacing: 0.04em; } } /* --- merged: secure_tools.css --- */ /* css/secure_tools.css * BUILD: 2025-12-28-patch-006-blacktext-statuscolors-1 * Purpose: make /secure tools easy to read (black text on light panels) * Status colors: Active=GREEN, Suspended=RED, Review=YELLOW */ /* Main readable wrapper for secure tools. */ .securePage{ max-width: 1200px; margin: 26px auto; padding: 18px 18px 50px; background: #ffffff; border: 3px solid #FFD700; border-radius: 12px; box-shadow: 0 0 16px rgba(0,0,0,0.18); color: #000; } /* Ensure readable defaults inside secure pages even if global site theme is gold. */ .securePage *{ color: inherit; } .securePage a{ color: #000; text-decoration: underline; } .securePage a:hover{ text-decoration: none; } .securePage h1, .securePage h2{ color: #000; } .securePage .muted{ color: rgba(0,0,0,0.70); } .secureHeaderRow{ display:flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; } .secureHeaderRow h1{ margin: 0; font-size: 26px; } .secureBreadcrumbs{ font-size: 14px; color: rgba(0,0,0,0.70); } /* Cards */ .secureCard{ border: 1px solid rgba(0,0,0,0.18); background: rgba(0,0,0,0.03); border-radius: 12px; padding: 12px; } .secureGrid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 980px){ .secureGrid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .secureGrid{ grid-template-columns: 1fr; } } .secureCard h2{ margin: 0 0 8px 0; font-size: 18px; } .secureCard p{ margin: 6px 0; } /* Header action links/buttons */ .secureLinks{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .secureLinks a, .secureLinks button{ display:inline-block; padding: 8px 10px; border-radius: 10px; border: 2px solid rgba(0,0,0,0.80); background: #FFD700; color: #000; text-decoration: none; cursor: pointer; } .secureLinks a:hover, .secureLinks button:hover{ background: #D4AF37; } /* Two column form layout */ .secureTwoCol{ display:flex; gap: 14px; align-items: flex-start; } .secureTwoCol > .col{ flex: 1; min-width: 0; } @media (max-width: 980px){ .secureTwoCol{ flex-direction: column; } } /* Forms */ .secureForm label{ display:block; margin: 10px 0 4px; font-weight: 700; color: #000; } .secureForm input[type="text"], .secureForm input[type="number"], .secureForm input[type="datetime-local"], .secureForm input[type="password"], .secureForm select, .secureForm textarea{ width: 100%; max-width: 100%; padding: 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.35); background: #ffffff; color: #000; } .secureForm input:focus, .secureForm select:focus, .secureForm textarea:focus{ outline: none; border-color: rgba(0,0,0,0.75); box-shadow: 0 0 0 3px rgba(255,215,0,0.25); } .secureForm textarea{ min-height: 140px; resize: vertical; } .secureForm .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 720px){ .secureForm .row2{ grid-template-columns: 1fr; } } .secureForm .divider{ height: 1px; background: rgba(0,0,0,0.12); margin: 14px 0; } /* Preview column */ .previewWrap{ position: sticky; top: 14px; } .previewWrap h2{ margin: 0 0 10px; font-size: 18px; } /* Tables */ .secureTable{ width:100%; border-collapse: collapse; } .secureTable th, .secureTable td{ border-bottom: 1px solid rgba(0,0,0,0.12); padding: 10px 8px; vertical-align: top; color: #000; } .secureTable th{ text-align:left; font-size: 13px; background: rgba(0,0,0,0.04); } /* Badges: default + status color variants */ .badge{ display:inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.25); font-size: 12px; background: rgba(0,0,0,0.06); color: #000; } /* Active (GREEN) */ .badge.good, .badge.active{ background: #c8f7c5; border-color: #1b5e20; } /* Review / Pending (YELLOW) */ .badge.warn, .badge.review{ background: #fff1b8; border-color: #ff8f00; } /* Suspended / Disabled (RED) */ .badge.bad, .badge.suspended{ background: #ffc9c9; border-color: #b71c1c; } /* Small buttons (table action buttons) */ .btnSmall{ display:inline-block; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.70); background: #ffffff; color: #000; cursor: pointer; text-decoration:none; } .btnSmall:hover{ background: rgba(0,0,0,0.06); } /* Notices */ .notice{ padding: 10px 12px; border-radius: 12px; margin: 12px 0; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); } .notice.good{ border-color: rgba(0, 255, 140, .35); background: rgba(0, 255, 140, .10); } .notice.bad{ border-color: rgba(255, 70, 70, .35); background: rgba(255, 70, 70, .10); } /* --- Pack 046: log health + small layout helpers --- */ .grid2{display:grid;grid-template-columns:1fr;gap:12px;} @media(min-width:900px){.grid2{grid-template-columns:1fr 1fr;}} .kv{display:grid;grid-template-columns:180px 1fr;gap:6px 12px;align-items:start;} .ok{font-weight:700;} .bad{font-weight:700;} .logBox{max-height:420px;overflow:auto;padding:10px;border:1px solid rgba(0,0,0,0.15);border-radius:6px;white-space:pre-wrap;} /* --- merged: index_gate.css --- */ /* index_gate.css * BUILD: 20251231_028-css-split-gate * Purpose: styles loaded BEFORE PIN unlock (logo, PIN entry, nav/login, base glow) */ body { color: #D4AF37; background-color: #DDD; margin: 0; padding: 0; min-height: 100vh; } /* ============================== INDEX PAGE: Gold/Black Glass + Cycling Glow Scoped to .page-index so dashboard/secure pages are unaffected ============================== */ /* Overall container: 850 wide, one seamless stack */ #CrimeIncRepresentation{ max-width: 850px; width: calc(100% - 24px); margin: 0 auto; border-radius: 18px; overflow: hidden; /* makes it feel like one slab */ position: relative; /* If you're using a background image instead of */ background-position: center top; background-size: cover; background-repeat: no-repeat; /* Keep total height sane */ max-height: 1000px; } /* Optional: if you’re using inside this div */ #CrimeIncRepresentation > img{ width: 100%; height: auto; display: block; } /* Slogan divider (20–30px tall) */ #CrimeIncTaxation{ height: 30px; display: flex; align-items: center; justify-content: center; font-family: "Audiowide", system-ui, sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; /* glow-only text look */ color: transparent; text-shadow: 0 0 8px rgba(255,215,0,.70), 0 0 18px rgba(255,215,0,.45), 0 0 34px rgba(255,215,0,.25); /* seamless “beam” */ background: rgba(0,0,0,.50); backdrop-filter: blur(2px); border-top: 1px solid rgba(255,215,0,.15); border-bottom: 1px solid rgba(255,215,0,.15); } /* PIN entry block (small, centered, obvious) */ #pinEntrySystem{ padding: 16px 14px 18px; background: rgba(0,0,0,.60); backdrop-filter: blur(2px); } /* Title inside pin area */ #pinEntrySystem .pinTitle{ text-align: center; font-family: "Audiowide", system-ui, sans-serif; font-size: 14px; letter-spacing: .10em; text-transform: uppercase; color: #ffd966; text-shadow: 0 2px 0 rgba(0,0,0,.80), 0 0 14px rgba(255,215,0,.25); margin-bottom: 12px; } /* Row: input + check + menu */ #pinEntrySystem .pinRow{ display: flex; gap: 10px; justify-content: center; align-items: center; } /* Input */ #pinEntrySystem .pinInput{ width: min(460px, 62vw); height: 44px; padding: 0 14px; font-size: 14px; color: #ffe8a6; background: linear-gradient(#0b0b0b, #151515); border: 2px solid rgba(255,215,0,.60); border-radius: 12px; box-shadow: inset 0 2px 10px rgba(0,0,0,.85), 0 0 18px rgba(255,215,0,.12); outline: none; } #pinEntrySystem .pinInput:focus{ border-color: rgba(255,215,0,.95); box-shadow: inset 0 2px 10px rgba(0,0,0,.85), 0 0 22px rgba(255,215,0,.35); } /* Buttons */ #pinEntrySystem .pinBtn{ width: 44px; height: 44px; border-radius: 12px; border: 2px solid rgba(255,215,0,.60); background: linear-gradient(#111, #0b0b0b); color: #ffd966; font-size: 18px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(255,215,0,.10); } #pinEntrySystem .pinBtn:hover{ border-color: rgba(255,215,0,.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 22px rgba(255,215,0,.30); } /* Legal encouragement text */ #legalEncouragement{ padding: 12px 14px; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); color: #e6dcc7; font-size: 12.5px; line-height: 1.35; text-align: center; border-top: 1px solid rgba(255,215,0,.12); } #legalEncouragement .legalDivider{ margin: 0 6px; opacity: .75; } /* Legal documentation area (buttons/links row) */ #legalDocumentation{ padding: 12px 14px 16px; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); border-top: 1px solid rgba(255,215,0,.12); } /* Mobile: keep it clean */ @media (max-width: 520px){ #CrimeIncTaxation{ font-size: 11px; height: 28px; } #pinEntrySystem .pinRow{ gap: 8px; } #pinEntrySystem .pinInput{ width: 100%; } } .page-index{ --glowDur: 7.5s; /* Deep black backdrop with subtle gold/teal hints */ background: radial-gradient(1200px 600px at 10% -10%, rgba(0,229,255,0.08), transparent 40%), radial-gradient(900px 500px at 90% 0%, rgba(57,255,20,0.06), transparent 45%), radial-gradient(900px 700px at 50% 110%, rgba(212,175,55,0.10), transparent 50%), #000; } /* Fade-out / fade-in helper during PIN unlock. IMPORTANT: do not fade the itself (it would also hide #ciUnlockOverlay). Instead, fade the primary content panels. */ .page-index #CrimeIncRepresentation, .page-index #pinEntrySystem, .page-index #Terms-of-Service-and-Privacy-Policy, .page-index #advertisementListingSystem{ transition: opacity 0.42s ease; } .page-index.is-transitioning #CrimeIncRepresentation, .page-index.is-transitioning #pinEntrySystem, .page-index.is-transitioning #Terms-of-Service-and-Privacy-Policy, .page-index.is-transitioning #advertisementListingSystem{ opacity: 0; pointer-events: none; } /* After unlock: stop the color-cycling glow and switch to a gold-only backdrop */ .page-index.pin-unlocked{ background: radial-gradient(1200px 700px at 50% 0%, rgba(255,215,0,0.28), transparent 55%), radial-gradient(900px 650px at 50% 120%, rgba(255,215,0,0.18), transparent 55%), #000; } .page-index.pin-unlocked #CrimeIncRepresentation, .page-index.pin-unlocked #pinEntrySystem, .page-index.pin-unlocked #Terms-of-Service-and-Privacy-Policy, .page-index.pin-unlocked #advertisementListingSystem{ animation: none; border-color: rgba(255,215,0,0.98); box-shadow: 0 0 22px rgba(255,215,0,0.55); } /* Glass panel base (used on index containers) */ .page-index .glass{ background: rgba(0,0,0,0.55); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); border: 2px solid rgba(212,175,55,0.55); } /* Cycling glow animation (blue → green → gold) */ @keyframes glowCycle{ 0%{ box-shadow: 0 0 16px rgba(0,229,255,0.85), 0 0 36px rgba(0,229,255,0.35); border-color: rgba(0,229,255,0.9); } 33%{ box-shadow: 0 0 16px rgba(57,255,20,0.85), 0 0 36px rgba(57,255,20,0.35); border-color: rgba(57,255,20,0.9); } 66%{ box-shadow: 0 0 16px rgba(212,175,55,0.9), 0 0 36px rgba(212,175,55,0.45); border-color: rgba(212,175,55,0.95); } 100%{ box-shadow: 0 0 16px rgba(0,229,255,0.85), 0 0 36px rgba(0,229,255,0.35); border-color: rgba(0,229,255,0.9); } } /* Apply glass + glow to index key elements */ .page-index #CrimeIncRepresentation, .page-index #pinEntrySystem, .page-index #Terms-of-Service-and-Privacy-Policy, .page-index #advertisementListingSystem{ background: rgba(0,0,0,0.55); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); animation: glowCycle var(--glowDur) linear infinite; } /* Accent controls (buttons/links/hr) should follow the same glow cycle as panels */ @keyframes glowCycleSoft{ 0%{ box-shadow: 0 0 10px rgba(0,229,255,0.65), 0 0 18px rgba(0,229,255,0.25); border-color: rgba(0,229,255,0.95); } 33%{ box-shadow: 0 0 10px rgba(57,255,20,0.65), 0 0 18px rgba(57,255,20,0.25); border-color: rgba(57,255,20,0.95); } 66%{ box-shadow: 0 0 10px rgba(212,175,55,0.75), 0 0 20px rgba(212,175,55,0.32); border-color: rgba(212,175,55,0.98); } 100%{ box-shadow: 0 0 10px rgba(0,229,255,0.65), 0 0 18px rgba(0,229,255,0.25); border-color: rgba(0,229,255,0.95); } } @keyframes glowCycleLine{ 0%{ box-shadow: 0 0 10px rgba(0,229,255,0.45); border-color: rgba(0,229,255,0.95); } 33%{ box-shadow: 0 0 10px rgba(57,255,20,0.45); border-color: rgba(57,255,20,0.95); } 66%{ box-shadow: 0 0 12px rgba(212,175,55,0.50); border-color: rgba(212,175,55,0.98); } 100%{ box-shadow: 0 0 10px rgba(0,229,255,0.45); border-color: rgba(0,229,255,0.95); } } /* Make top controls + legal buttons match the glass look */ .page-index .pinIconBtn, .page-index .navOpenBtn, .page-index .pinLegalLink{ background: rgba(255,215,0,0.14); color: #D4AF37; border: 2px solid rgba(212,175,55,0.85); filter: none; animation: glowCycleSoft var(--glowDur) linear infinite; transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } /* After unlock: lock button/link glow to gold (no cycling) */ .page-index.pin-unlocked .pinIconBtn, .page-index.pin-unlocked .navOpenBtn, .page-index.pin-unlocked .pinLegalLink{ animation: none; border-color: rgba(255,215,0,0.95); box-shadow: 0 0 14px rgba(255,215,0,0.35), 0 0 22px rgba(255,215,0,0.18); } .page-index.pin-unlocked #pinEntrySystem #divInput hr{ animation: fadeIn 0.8s ease; border-top-color: rgba(255,215,0,0.95); box-shadow: 0 0 10px rgba(255,215,0,0.25); } .page-index .pinIconBtn:hover, .page-index .navOpenBtn:hover, .page-index .pinLegalLink:hover{ background: rgba(255,215,0,0.22); transform: translateY(-1px); } /* PIN entry HR lines should glow-cycle too */ .page-index #pinEntrySystem #divInput hr{ border: 0; border-top: 4px solid rgba(212,175,55,0.85); width: 55%; animation: fadeIn 0.8s ease, glowCycleLine var(--glowDur) linear infinite; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce){ .page-index #CrimeIncRepresentation, .page-index #pinEntrySystem, .page-index #Terms-of-Service-and-Privacy-Policy, .page-index #advertisementListingSystem{ animation: none; box-shadow: 0 0 20px rgba(212,175,55,0.45); border-color: rgba(212,175,55,0.85); } } /* ===================================== Pack 021: Logo swap (logo.png -> logo2.png) - Before PIN: show logo.png - After PIN: fade in logo2.png smaller ===================================== */ .page-index #CrimeIncRepresentation{ /* Show the full hero logo before unlock, then shrink after unlock */ height: 500px; overflow: hidden; transition: height 0.6s ease; } .page-index.pin-unlocked #CrimeIncRepresentation{ height: 200px; } .page-index .brandLogoStack{ position: relative; width: 100%; height: 100%; } .page-index .siteLogo{ transition: opacity 0.85s ease, transform 0.85s ease, filter 0.85s ease; } /* Locked/guest logo shows FULL image (no crop) */ .page-index .siteLogoLocked{ width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; opacity: 1; transform: scale(1); } /* Unlocked logo is smaller + centered (fades in) */ .page-index .siteLogoUnlocked{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92); /* Keep the unlocked logo compact inside the (smaller) header */ width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; display: block; filter: drop-shadow(0 0 16px rgba(255,215,0,0.35)); } .page-index.pin-unlocked .siteLogoLocked{ /* Hide the large hero logo after unlock */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; transform: scale(1.03); filter: blur(2px); } .page-index.pin-unlocked .siteLogoUnlocked{ opacity: 1; transform: translate(-50%, -50%) scale(1); } #CrimeIncRepresentation { border: 3px solid #FDD700; width: min(800px, 95vw); margin: 10px auto 0; position: relative; } #CrimeIncRepresentation img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; } /* Login popup logo (400x400 target; scales down on small screens) */ .loginLogo{ width: 400px; height: 400px; max-width: calc(100% - 40px); max-height: 400px; margin: 0 auto 8px; display: block; object-fit: contain; } .navOpenBtn{ position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 10px; border: 2px solid #D4AF37; background: rgba(255,215,0,0.14); color: #D4AF37; cursor: pointer; z-index: 6000; font-size: 22px; line-height: 1; display: none; /* shown after PIN unlock */ } .navOpenBtn:hover{ background: rgba(255,215,0,0.22); color: #D4AF37; } /* ============================== PIN ENTRY SYSTEM (pre-unlock) ============================== */ #pinEntrySystem { color: #D4AF37; background-color: black; font-family: 'Audiowide'; width: min(800px, 95vw); min-height: 325px; border: 3px solid #FFD700; box-shadow: 0 0 20px 1px #FFD700; position: relative; margin: 14px auto 0; } /* ============================== TERMS / PRIVACY FOOTER (always visible) ============================== */ #Terms-of-Service-and-Privacy-Policy { color: #D4AF37; background-image: none; /* removed missing footer.png */ font-family: 'Audiowide'; width: min(800px, 95vw); border: 3px solid #FFD700; box-shadow: 0 0 20px 1px #FFD700; position: relative; margin: 14px auto 18px; padding: 14px 0 14px; } /* Keep everything scoped to pinEntrySystem so it won't affect your merch sections */ /* LEGACY (disabled for index.php) #pinEntrySystem #divInput { text-align: center; width: 100%; position: relative; padding-top: 0px; } */ /* Pack 027: Give the PIN gate headline (and message) the same synced glow feel */ .page-index #pinEntrySystem h2, .page-index /* LEGACY (disabled for index.php) #pinEntrySystem #pinMsg{ animation: glowCycleText var(--glowDur) linear infinite; } */ /* HR styling stays the same */ #pinEntrySystem #divInput hr { animation: fadeIn 6s; width: 55%; margin: 16px auto; border: 0; border-top: 4px solid #D4AF37; } /* NEW: row that holds input + buttons */ /* LEGACY (disabled for index.php) #pinEntrySystem .pinControlsRow { display: flex; justify-content: center; align-items: center; gap: 10px; /* Keep the controls visually centered between the HR dividers */ margin: 0 auto; padding: 10px 0; } */ /* Input styling (no absolute positioning) */ #pinEntrySystem #pinInput { color: #D4AF37; background: rgba(255,215,0,0.14); height: 30px; width: 180px; border: 2px solid #D4AF37; padding: 0 10px; outline: none; } /* Pack 023: PIN input should glow in-sync with the PIN control buttons */ .page-index #pinEntrySystem #pinInput{ animation: glowCycleSoft var(--glowDur) linear infinite; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* Keep the PIN input glow cycle consistent (no special focus border styling) */ /* Button styling (scoped) */ #pinEntrySystem .pinIconBtn { color: #D4AF37; background: rgba(255,215,0,0.14); height: 34px; width: 34px; border: 2px solid #D4AF37; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; } /* Optional: message spacing */ /* LEGACY (disabled for index.php) #pinEntrySystem #pinMsg { min-height: 22px; margin: 8px 0 8px; } */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* ============================== ADVERTISEMENT LISTING SYSTEM (post-unlock) ============================== */ #advertisementListingSystem { display: none; color: #D4AF37; background-color: black; font-family: 'Audiowide'; width: min(800px, 95vw); border: 3px solid #FFD700; box-shadow: 0 0 20px 1px #FFD700; position: relative; margin: 14px auto 0; } #merchSections{ padding: 16px 18px 22px; } /* Navigation Popup Box */ .navigationPopup { font-family: 'Audiowide'; height: 100%; width: 0; position: fixed; z-index: 5000; top: 0; right: 0; left: auto; background-color: #111; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; box-sizing: border-box; transition: 0.2s; padding-top: 40px; padding-right: 12px; /* prevent scrollbar from covering button edges */ padding-bottom: 22px; /* allow bottom section to stick to bottom */ display: flex; flex-direction: column; } /* Links (kept from your original) */ .navigationPopup a { color: #818181; padding: 10px 14px 10px 28px; line-height: 1.25; text-decoration: none; font-size: 20px; display: block; transition: 0.3s; } .navigationPopup a:hover { color: #f1f1f1; } /* Close button */ .navigationPopup .navigationClose { position: absolute; top: 0; left: 12px; right: auto; font-size: 36px; margin-left: 0; } /* Menu button: changed to CLASS to match your HTML */ .navigationButton { color: #000; text-align: center; font-size: 20px; cursor: pointer; width: 28px; background-color: #FFD700; border: 1px solid #D4AF37; position: absolute; top: 205px; left: 50%; margin-left: 78px; transition: margin-left .5s; } /* NEW: nav sections */ .navSection { padding: 8px 0; } .navHeader { color: #f1f1f1; padding: 6px 16px; font-size: 16px; opacity: 0.9; text-align: center; } /* NEW: pin bottom section to bottom */ .navBottom { margin-top: auto; padding-bottom: 26px; } /* NEW: nav lists as full-width buttons (no numbering) */ .navList { list-style: none; padding: 0; margin: 0; } .navList li { margin: 6px 0; } .navList li a, .navList li button.navActionBtn { display: block; width: 95%; margin: 0 auto; box-sizing: border-box; border: 1px solid #333; border-radius: 6px; background: rgba(255,255,255,0.02); color: #818181; text-decoration: none; font-size: 20px; padding: 10px 12px; line-height: 1.25; text-align: center; cursor: pointer; } .navList li a:hover, .navList li button.navActionBtn:hover { color: #f1f1f1; border-color: #555; } /* Username line */ .navUserLine { display: block; width: 95%; margin: 0 auto; padding: 8px 12px; box-sizing: border-box; text-align: center; font-size: 14px; color: #bbb; opacity: 0.95; } /* Inline dropdown menus for Quick Tools */ .navInlineMenu { position: fixed; z-index: 6000; min-width: 240px; max-width: 280px; background: #111; border: 1px solid #333; border-radius: 10px; padding: 8px; display: none; box-shadow: 0 12px 28px rgba(0,0,0,0.65); } .navInlineMenu.open { display: block; } .navInlineMenu a { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; margin: 4px 0; border-radius: 8px; border: 1px solid #333; background: rgba(255,255,255,0.02); color: #818181; text-decoration: none; font-size: 18px; text-align: center; } .navInlineMenu a:hover { color: #f1f1f1; border-color: #555; } @media screen and (max-height: 450px) { .navigationPopup { padding-top: 15px; } .navigationPopup a { font-size: 18px; } } /* Highlight PIN alerts when active */ .pinAlertActive { color: #ff4d4d !important; border-color: #ff4d4d !important; background: rgba(255, 77, 77, 0.08); font-weight: bold; } /* Login Box Style */ .login-input-container { padding: 16px; } /* -------------Login Inputs------------- */ .login-input-container input[type=text], .login-input-container input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /* -------------Login Buttons------------- */ .login-exit { position: absolute; top: 0px; right: 25px; background: transparent; border: none; font: inherit; color: inherit; cursor: pointer; padding: 6px 10px; } .login-submit-button { font-size: 20px; width: 100%; padding: 14px 20px; background-color: #FFD700; } .login-submit-button:hover { color: white; background-color: #D4AF37; border: 2px solid black; box-shadow: 0 0 2px 2px white; } .login-input-container input:hover { border: 2px solid black; box-shadow: 0 0 2px 2px white; } .login-image-container { text-align: center; margin: 24px 0 12px 0; position: relative; } img.avatar { width: 40%; border-radius: 50%; } /* -------------Login Content------------- */ .login-popup-box { font-family: 'Audiowide'; display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 9000; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ padding-top: 60px; } .login-popup-content { color: #FDD700; background-color: #111; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 3px solid #FFD700; width: 525px; /* Could be more or less, depending on screen size */ } .login-popup-content label { font-size: 20px; } /* -------------Login Animation------------- */ .animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s; } @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} } /* Nav alert badge */ .navBadge { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: #ff3b30; color: #ffffff; font-size: 12px; font-weight: 700; text-align: center; vertical-align: middle; } /* ================================ TERMS / PRIVACY footer (always visible below PIN + merch) ================================ */ #Terms-of-Service-and-Privacy-Policy{ background-image: none; /* removed missing footer.png */ display:flex; justify-content: center; padding: 14px 14px 18px; } #Terms-of-Service-and-Privacy-Policy .legalFooterInner{ width: min(980px, 100%); display:flex; flex-direction: column; gap: 12px; align-items: center; } #Terms-of-Service-and-Privacy-Policy .legalFooterText{ text-align: center; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.82); max-width: 920px; } #Terms-of-Service-and-Privacy-Policy .legalFooterBtns{ width: 100%; display:flex; gap: 10px; justify-content: center; flex-wrap: wrap; } #Terms-of-Service-and-Privacy-Policy .pinLegalLink{ flex: 1 1 180px; max-width: 260px; display:flex; align-items:center; justify-content:center; padding: 10px 12px; border-radius: 12px; text-decoration: none; } @media (max-width: 520px){ #Terms-of-Service-and-Privacy-Policy{ padding: 12px 10px 16px; } #Terms-of-Service-and-Privacy-Policy .legalFooterText{ font-size: 12px; } #Terms-of-Service-and-Privacy-Policy .pinLegalLink{ padding: 9px 10px; font-size: 12px; max-width: none; } } /* ================================ Pack 024: Transparent tagline overlay (logo slogan) - Transparent cut-out text with synced glow (blue → green → gold) - Intended to replace "baked-in" slogan text on the image ================================ */ @keyframes glowCycleText{ 0%{ text-shadow: 0 0 10px rgba(0,229,255,0.85), 0 0 22px rgba(0,229,255,0.35); } 33%{ text-shadow: 0 0 10px rgba(57,255,20,0.85), 0 0 22px rgba(57,255,20,0.35); } 66%{ text-shadow: 0 0 12px rgba(212,175,55,0.95), 0 0 26px rgba(212,175,55,0.45); } 100%{ text-shadow: 0 0 10px rgba(0,229,255,0.85), 0 0 22px rgba(0,229,255,0.35); } } .page-index .logoTagline{ position: absolute; left: 50%; bottom: clamp(6px, 1.1vw, 10px); transform: translateX(-50%) skew(-10deg); /* Make the slogan span the full logo width */ width: 100%; text-align: center; font-family: 'Audiowide', sans-serif; font-size: clamp(12px, 2.15vw, 19px); line-height: 1.05; letter-spacing: 0.07em; /* Transparent fill (cut-out) with a gold outline */ color: transparent; -webkit-text-stroke: 1.4px rgba(212,175,55,0.78); opacity: 0.98; pointer-events: none; z-index: 6; isolation: isolate; animation: glowCycleText var(--glowDur) linear infinite; } /* Blurred glow behind the outline */ .page-index .logoTagline::before{ content: attr(data-text); position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 0; z-index: -1; opacity: 0.7; filter: blur(6px); animation: glowCycleText var(--glowDur) linear infinite; } /* Once unlocked, hide the tagline (keeps the unlocked header clean) */ .page-index.pin-unlocked .logoTagline{ opacity: 0; transform: translateX(-50%) skew(-10deg) translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; } @media (max-width: 520px){ .page-index .logoTagline{ font-size: 12px; letter-spacing: 0.04em; } } /* ============================== PIN ENTRY IMAGE UI (new) - Uses pin-entry.png as a full-image gate - Overlays real input/buttons/links (for functionality + accessibility) ============================== */ /* Visually hidden helper (accessible text) */ .srOnly{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } #pinEntrySystem.pinGateImageUi{ width: min(1100px, 98vw); aspect-ratio: 800 / 455; min-height: unset; padding: 0; overflow: hidden; /* Keep your glow, but remove the double frame (the image already has one) */ border-width: 0; box-shadow: 0 0 22px rgba(255,215,0,0.45); background: transparent; } #pinEntrySystem.pinGateImageUi .pinGateImageWrap{ position: relative; width: 100%; height: 100%; } #pinEntrySystem.pinGateImageUi .pinGateImage{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } /* Overlay input aligned to the art's input field */ #pinEntrySystem.pinGateImageUi #pinInput{ position: absolute; left: 34.0%; top: 21.7%; width: 32.5%; height: max(44px, 6.6%); background: transparent; border: none; outline: none; color: rgba(255, 255, 255, 0.88); text-align: left; font-family: 'Audiowide', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: clamp(14px, 2.0vw, 26px); letter-spacing: 0.08em; padding: 0 1.0%; } /* Provide a visible focus ring even though the input is transparent */ #pinEntrySystem.pinGateImageUi #pinInput:focus{ outline: 2px solid rgba(255,215,0,0.65); outline-offset: 2px; } /* Invisible overlay buttons (click the art's check + menu squares) */ #pinEntrySystem.pinGateImageUi .pinOverlayBtn{ position: absolute; top: 21.7%; height: max(44px, 6.6%); width: 5.2%; background: transparent; border: none; cursor: pointer; padding: 0; } #pinEntrySystem.pinGateImageUi #unlockBtn{ left: 68.1%; } #pinEntrySystem.pinGateImageUi #navigationButton{ left: 74.0%; } #pinEntrySystem.pinGateImageUi .pinOverlayBtn:focus{ outline: 2px solid rgba(255,215,0,0.65); outline-offset: 2px; } /* Clickable legal buttons on the image */ #pinEntrySystem.pinGateImageUi .pinOverlayLink{ position: absolute; top: 42.4%; height: 12.0%; background: transparent; display: block; cursor: pointer; text-decoration: none; } #pinEntrySystem.pinGateImageUi .pinOverlayAbout{ left: 16.0%; width: 26.5%; } #pinEntrySystem.pinGateImageUi .pinOverlayTerms{ left: 37.0%; width: 27.0%; } #pinEntrySystem.pinGateImageUi .pinOverlayPrivacy{ left: 60.0%; width: 27.0%; } #pinEntrySystem.pinGateImageUi .pinOverlayLink:hover, #pinEntrySystem.pinGateImageUi .pinOverlayLink:focus{ outline: 2px solid rgba(255,215,0,0.55); outline-offset: -2px; } /* PIN message: show it centered just below the input line */ #pinEntrySystem.pinGateImageUi #pinMsg.pinOverlayMsg{ position: absolute; left: 50%; top: 31.0%; transform: translateX(-50%); width: min(720px, 92%); margin: 0; padding: 6px 10px; font-size: clamp(12px, 1.35vw, 18px); color: rgba(255, 120, 120, 0.95); text-shadow: 0 0 12px rgba(0,0,0,0.85); } /* ============================== WOW PASS: Unlock overlay (preload + cinematic handoff) Created/controlled by pinscript.js ============================== */ #ciUnlockOverlay{ position: fixed; inset: 0; display: none; place-items: center; z-index: 10050; background: rgba(0,0,0,0.78); backdrop-filter: blur(3px); opacity: 0; transition: opacity 420ms ease; } #ciUnlockOverlay.on{ display: grid; opacity: 1; } #ciUnlockOverlay .panel{ width: min(520px, 92vw); border-radius: 18px; padding: 18px 18px 16px; text-align: center; background: linear-gradient(180deg, rgba(10,10,10,0.80), rgba(0,0,0,0.55)); border: 2px solid rgba(212,175,55,0.85); box-shadow: 0 18px 42px rgba(0,0,0,0.85), 0 0 28px rgba(212,175,55,0.28); } #ciUnlockOverlay .title{ color: #FFD700; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 18px rgba(255,215,0,0.35); margin-bottom: 8px; } #ciUnlockOverlay .sub{ color: rgba(230,220,199,0.92); font-size: 14px; line-height: 1.3; margin-bottom: 14px; text-shadow: 0 2px 8px rgba(0,0,0,0.85); } #ciUnlockOverlay .bar{ height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; border: 1px solid rgba(255,255,255,0.10); } #ciUnlockOverlay .bar > i{ display: block; height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(90deg, rgba(255,215,0,0.0), rgba(255,215,0,0.65), rgba(255,215,0,0.0)); animation: ciBarSweep 1.05s linear infinite; } @keyframes ciBarSweep{ from{ transform: translateX(-80%); } to{ transform: translateX(280%); } } /* === PIN UI EMPHASIS (800x455) === */ #pinEntrySystem.pinGateImageUi #pinInput{ border: 2px solid #FFD700; background: rgba(10,10,10,0.55); box-shadow: 0 0 12px rgba(255,215,0,.35), inset 0 0 6px rgba(0,0,0,.6); } #pinEntrySystem.pinGateImageUi #unlockBtn, #pinEntrySystem.pinGateImageUi #navigationButton{ border: 2px solid #FFD700; box-shadow: 0 0 14px rgba(255,215,0,.45); transition: transform .08s ease, box-shadow .12s ease, background .12s ease; } #pinEntrySystem.pinGateImageUi #unlockBtn:hover, #pinEntrySystem.pinGateImageUi #navigationButton:hover{ box-shadow: 0 0 22px rgba(255,215,0,.75); transform: translateY(-1px); } #pinEntrySystem.pinGateImageUi #unlockBtn:active, #pinEntrySystem.pinGateImageUi #navigationButton:active{ transform: translateY(0); box-shadow: 0 0 10px rgba(255,215,0,.45); } /* === HOTFIX: PIN ENTRY IMAGE (800x455) + UI EMPHASIS === */ #pinEntrySystem.pinGateImageUi{ width: min(800px, 98vw); aspect-ratio: 800 / 455; } /* PIN input */ #pinEntrySystem.pinGateImageUi #pinInput{ border: 2px solid #FFD700 !important; background: rgba(10,10,10,0.55) !important; box-shadow: 0 0 14px rgba(255,215,0,.45), inset 0 0 10px rgba(0,0,0,.75) !important; } /* Check + menu buttons */ #pinEntrySystem.pinGateImageUi #unlockBtn, #pinEntrySystem.pinGateImageUi #navigationButton{ min-width: 48px; min-height: 48px; border: 2px solid #FFD700 !important; box-shadow: 0 0 18px rgba(255,215,0,.55) !important; transition: transform .10s ease, box-shadow .14s ease; } #pinEntrySystem.pinGateImageUi #unlockBtn:hover, #pinEntrySystem.pinGateImageUi #navigationButton:hover{ transform: translateY(-1px); box-shadow: 0 0 26px rgba(255,215,0,.85) !important; } #pinEntrySystem.pinGateImageUi #unlockBtn:active, #pinEntrySystem.pinGateImageUi #navigationButton:active{ transform: translateY(0); box-shadow: 0 0 14px rgba(255,215,0,.55) !important; } /* Mobile */ @media (max-width: 520px){ #pinEntrySystem.pinGateImageUi #pinInput{ width: min(92vw, 420px) !important; } #pinEntrySystem.pinGateImageUi #unlockBtn, #pinEntrySystem.pinGateImageUi #navigationButton{ min-width: 52px; min-height: 52px; } }