/* build/tune_button_colors.css * --------------------------------------------------------------- * Per-button text colors for the six right-column action buttons. * * 2026-05-15 NEON pass (bud): * - Every button uses the same shape (defined in tuning.css). * - Every button uses the SAME neon-blue border (#00d6ff). * - Each button uses a unique text color with the hot-white-neon * effect: near-white text, tight white core shadow, two layers * of colored halo bloom, plus a dark drop shadow for legibility. * - Backgrounds carry a faint tint of the text color for personality * without overpowering the gauges/heatmaps on the rest of the page. * * Color mapping: * #1 ANALYZE CURRENT CAL (analyze-current) -> magenta #ff2bd6 * #2 CURRENT CAL (tune-current) -> lime #3fff60 * #3 BASE CAL (tune-base) -> amber #ffb020 * #4 ANALYZE BASE CAL (analyze-base) -> violet #a07fff * #5 CURRENT LOG / LOGS (logs) -> cyan #00d6ff * #6 ANALYZE CURRENT LOG (analyze-log) -> hot pink #ff5ea0 * * Loaded AFTER tuning.css so these overrides win. * --------------------------------------------------------------- */ /* All six action buttons share this neon-blue border + chrome. */ /* Tinted backgrounds + per-button text color come in the rules below.*/ .action-btn { border-color: #00d6ff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px #00d6ff, 0 0 18px rgba(0, 214, 255, 0.45), 0 6px 18px rgba(0, 0, 0, 0.55) !important; } .action-btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 0 0 1px #00d6ff, 0 0 28px rgba(0, 214, 255, 0.75), 0 10px 24px rgba(0, 0, 0, 0.65) !important; } /* ============================ #1 ANALYZE CURRENT CAL =========== */ /* magenta neon */ .action-btn[data-action="analyze-current"] { background: linear-gradient(180deg, rgba(255, 43, 214, 0.18) 0%, rgba(255, 43, 214, 0.04) 100%); color: #fff6fb; text-shadow: 0 0 2px #ffffff, 0 0 8px rgba(255, 43, 214, 1.00), 0 0 18px rgba(255, 43, 214, 0.85), 0 0 32px rgba(255, 43, 214, 0.45), 0 2px 4px rgba(0, 0, 0, 0.75); } .action-btn[data-action="analyze-current"]:hover { background: linear-gradient(180deg, rgba(255, 43, 214, 0.30) 0%, rgba(255, 43, 214, 0.08) 100%); } /* ============================ #2 CURRENT CAL =================== */ /* lime neon */ .action-btn[data-action="tune-current"] { background: linear-gradient(180deg, rgba(63, 255, 96, 0.18) 0%, rgba(63, 255, 96, 0.04) 100%); color: #f4fff5; text-shadow: 0 0 2px #ffffff, 0 0 8px rgba(63, 255, 96, 1.00), 0 0 18px rgba(63, 255, 96, 0.85), 0 0 32px rgba(63, 255, 96, 0.45), 0 2px 4px rgba(0, 0, 0, 0.75); } .action-btn[data-action="tune-current"]:hover { background: linear-gradient(180deg, rgba(63, 255, 96, 0.30) 0%, rgba(63, 255, 96, 0.08) 100%); } /* ============================ #3 BASE CAL ====================== */ /* amber neon */ .action-btn[data-action="tune-base"] { background: linear-gradient(180deg, rgba(255, 176, 32, 0.18) 0%, rgba(255, 176, 32, 0.04) 100%); color: #fff8eb; text-shadow: 0 0 2px #ffffff, 0 0 8px rgba(255, 176, 32, 1.00), 0 0 18px rgba(255, 176, 32, 0.85), 0 0 32px rgba(255, 176, 32, 0.45), 0 2px 4px rgba(0, 0, 0, 0.75); } .action-btn[data-action="tune-base"]:hover { background: linear-gradient(180deg, rgba(255, 176, 32, 0.30) 0%, rgba(255, 176, 32, 0.08) 100%); } /* ============================ #4 ANALYZE BASE CAL ============== */ /* violet neon */ .action-btn[data-action="analyze-base"] { background: linear-gradient(180deg, rgba(160, 127, 255, 0.18) 0%, rgba(160, 127, 255, 0.04) 100%); color: #f6f3ff; text-shadow: 0 0 2px #ffffff, 0 0 8px rgba(160, 127, 255, 1.00), 0 0 18px rgba(160, 127, 255, 0.85), 0 0 32px rgba(160, 127, 255, 0.45), 0 2px 4px rgba(0, 0, 0, 0.75); } .action-btn[data-action="analyze-base"]:hover { background: linear-gradient(180deg, rgba(160, 127, 255, 0.30) 0%, rgba(160, 127, 255, 0.08) 100%); } /* ============================ #5 CURRENT LOG / LOGS ============ */ /* cyan neon */ .action-btn[data-action="logs"] { background: linear-gradient(180deg, rgba(0, 214, 255, 0.18) 0%, rgba(0, 214, 255, 0.04) 100%); color: #f0fbff; text-shadow: 0 0 2px #ffffff, 0 0 8px rgba(0, 214, 255, 1.00), 0 0 18px rgba(0, 214, 255, 0.85), 0 0 32px rgba(0, 214, 255, 0.45), 0 2px 4px rgba(0, 0, 0, 0.75); } .action-btn[data-action="logs"]:hover { background: linear-gradient(180deg, rgba(0, 214, 255, 0.30) 0%, rgba(0, 214, 255, 0.08) 100%); } /* ============================ #6 ANALYZE CURRENT LOG =========== */ /* hot pink neon */ .action-btn[data-action="analyze-log"] { background: linear-gradient(180deg, rgba(255, 94, 160, 0.18) 0%, rgba(255, 94, 160, 0.04) 100%); color: #fff4f8; text-shadow: 0 0 2px #ffffff, 0 0 8px rgba(255, 94, 160, 1.00), 0 0 18px rgba(255, 94, 160, 0.85), 0 0 32px rgba(255, 94, 160, 0.45), 0 2px 4px rgba(0, 0, 0, 0.75); } .action-btn[data-action="analyze-log"]:hover { background: linear-gradient(180deg, rgba(255, 94, 160, 0.30) 0%, rgba(255, 94, 160, 0.08) 100%); } /* "I don't have one" link below the BASE/CURRENT CAL drop zones. Looks like a quiet text link, not another big action button. */ .action-btn.no-cal-link[data-action="no-cal"] { margin-top: 10px; padding: 8px 12px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; border: none !important; background: transparent !important; color: rgba(0, 214, 255, 0.75) !important; box-shadow: none !important; text-shadow: 0 0 4px rgba(0, 214, 255, 0.45) !important; text-decoration: underline; } .action-btn.no-cal-link[data-action="no-cal"]:hover { color: #ffffff !important; text-shadow: 0 0 4px #00d6ff, 0 0 10px rgba(0, 214, 255, 0.65) !important; } /* BACK pill -- quieter, all-neon-blue, small. */ .action-btn.back { color: #cfeaff !important; text-shadow: 0 0 2px #ffffff, 0 0 8px rgba(0, 214, 255, 0.85), 0 0 16px rgba(0, 214, 255, 0.55), 0 2px 4px rgba(0, 0, 0, 0.75) !important; background: transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 1px #00d6ff, 0 0 10px rgba(0, 214, 255, 0.35), 0 3px 10px rgba(0, 0, 0, 0.40) !important; }