/* build/hive_layout.css * --------------------------------------------------------------- * HIVE layout overrides for tuning_basic.html. * Scoped to body[data-tune-mode="basic"] so other modes keep the * original ARC-TUNING chrome until we propagate later. * * 2026-05-13 pass: * - HIVE wordmark removed entirely (the H.I.V.E. neon is baked * into basic-bg.png so the floating wordmark is redundant). * - Throwaway scrolling marquee removed (real estate goes to * the bottom-row mode buttons; a red-neon WARNING marquee * comes back later as a layer above these buttons during * scarecrow-operating mode). * - Bottom-row two long buttons: * LEFT = PASSENGER LOG MODE -> orange bg, blue letters * RIGHT = DATA ENTRY MODE -> neon purple bg, bright green letters * - Right-column 6 buttons breathe in a top->bottom->top wave * (5s cycle, ~0.5s per step, ping-pong). * - Bottom-row 2 buttons breathe in sync (~3.5s). * --------------------------------------------------------------- */ /* ============================ ACTION COLUMN -> TOP ============== */ body[data-tune-mode="basic"] .tune-actions { top: 24px; } /* ============================ CAL / LOG GROUP SPLIT ============= */ /* Main-screen only: extend the right column down to viewport_height - 50px so the bottom of the column sits just below DATA ENTRY MODE's top edge. The .action-spacer (a flex:1 filler between button #4 ANALYZE BASE CAL and button #5 CURRENT LOG) eats the remaining space and pushes the bottom 2 log buttons down. Result: ANALYZE CURRENT LOG's TOP edge lines up with DATA ENTRY MODE's TOP edge at the bottom row. Picker / upload / tune-upload screens keep auto height so their compact button stacks sit at the top of the column. */ body[data-tune-mode="basic"] .tune-actions[data-screen="main"] { /* Reduced by one button-height (~62px) on 2026-05-13 so the bottom 2 log buttons sit one button-height above the bottom row. */ height: calc(100vh - 136px); } .action-spacer { flex: 1 1 0; min-height: 0; pointer-events: none; } /* ============================ LIBRARIES -> HALF WIDTH =========== */ body[data-tune-mode="basic"] .log-library { max-width: 290px; } /* ============================ CANVAS PADDING ==================== */ /* Clear space at the bottom of the canvas so chat / library content doesn't scroll under the fixed bottom-row mode buttons. */ body[data-tune-mode="basic"] .canvas { padding-bottom: 132px; } /* ============================ BOTTOM-ROW MODE BUTTONS =========== */ /* Two long buttons across the bottom of the viewport, same height as the (to-be-replaced) marquee strip. Both breathe slowly in sync via the hive-bottom-breathe keyframe below. */ .hive-bottom-buttons { position: fixed; bottom: 16px; left: 0; right: 200px; /* clear the AI-status pill on the right */ display: flex; align-items: center; gap: 24px; padding: 0 24px; z-index: 5; } .hive-bottom-btn { width: 220px; padding: 18px 24px; display: flex; align-items: center; justify-content: center; border-radius: 30px; border: 2px solid; font-family: var(--font-mono); font-size: 16px; font-weight: 800; letter-spacing: 0.30em; text-transform: uppercase; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms, background 200ms, color 200ms; animation: hive-bottom-breathe 3.5s ease-in-out infinite; } .hive-bottom-btn:hover { transform: translateY(-2px); animation-play-state: paused; } .hive-bottom-btn:active { transform: translateY(1px) scale(0.99); } /* LEFT: PASSENGER LOG MODE -> neon-blue border, hot-white-neon text (cyan). 2026-05-15: unified with action buttons + DATA ENTRY MODE per Bud's request. */ .hive-bottom-btn[data-action="passenger-mode"] { border-color: #00d6ff; background: linear-gradient(180deg, rgba(0, 214, 255, 0.16) 0%, rgba(0, 214, 255, 0.04) 100%); color: #f0fbff; text-shadow: 0 0 2px #ffffff, 0 0 10px rgba(0, 214, 255, 1.00), 0 0 22px rgba(0, 214, 255, 0.85), 0 0 40px rgba(0, 214, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 0 0 1px #00d6ff, 0 0 22px rgba(0, 214, 255, 0.55), 0 8px 22px rgba(0, 0, 0, 0.60); } .hive-bottom-btn[data-action="passenger-mode"]:hover { background: linear-gradient(180deg, rgba(0, 214, 255, 0.28) 0%, rgba(0, 214, 255, 0.08) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px #00d6ff, 0 0 34px rgba(0, 214, 255, 0.85), 0 12px 28px rgba(0, 0, 0, 0.70); } /* RIGHT: DATA ENTRY MODE -> neon-blue border, hot-white-neon text (cyan). 2026-05-15: matched shape + color with PASSENGER LOG MODE. */ .hive-bottom-btn[data-action="entry-mode"] { border-color: #00d6ff; background: linear-gradient(180deg, rgba(0, 214, 255, 0.16) 0%, rgba(0, 214, 255, 0.04) 100%); color: #f0fbff; text-shadow: 0 0 2px #ffffff, 0 0 10px rgba(0, 214, 255, 1.00), 0 0 22px rgba(0, 214, 255, 0.85), 0 0 40px rgba(0, 214, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 0 0 1px #00d6ff, 0 0 22px rgba(0, 214, 255, 0.55), 0 8px 22px rgba(0, 0, 0, 0.60); } .hive-bottom-btn[data-action="entry-mode"]:hover { background: linear-gradient(180deg, rgba(0, 214, 255, 0.28) 0%, rgba(0, 214, 255, 0.08) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px #00d6ff, 0 0 34px rgba(0, 214, 255, 0.85), 0 12px 28px rgba(0, 0, 0, 0.70); } /* Synchronised breathing for the bottom row. */ @keyframes hive-bottom-breathe { 0%, 100% { filter: brightness(0.88); } 50% { filter: brightness(1.18); } } /* ============================ RIGHT-COLUMN BUTTON WAVE ========== */ /* Slow breathing wave that crests through the 6 buttons top->bottom then bottom->top, ping-pong. 5s cycle, 10 steps of 0.5s each. Buttons 1 and 6 (turnaround points) peak once per cycle; buttons 2-5 peak twice per cycle. The pulse rides on `filter: brightness()` so it doesn't fight the per-button color or the hover transform. */ @keyframes wave-pos-1 { 0%, 100% { filter: brightness(1.28); } 10%, 90% { filter: brightness(1.10); } 20%, 80% { filter: brightness(0.96); } 30%, 70% { filter: brightness(0.88); } 40%, 60% { filter: brightness(0.84); } 50% { filter: brightness(0.82); } } @keyframes wave-pos-2 { 0%, 100% { filter: brightness(1.10); } 10%, 90% { filter: brightness(1.28); } 20%, 80% { filter: brightness(1.10); } 30%, 70% { filter: brightness(0.96); } 40%, 60% { filter: brightness(0.88); } 50% { filter: brightness(0.84); } } @keyframes wave-pos-3 { 0%, 100% { filter: brightness(0.96); } 10%, 90% { filter: brightness(1.10); } 20%, 80% { filter: brightness(1.28); } 30%, 70% { filter: brightness(1.10); } 40%, 60% { filter: brightness(0.96); } 50% { filter: brightness(0.88); } } @keyframes wave-pos-4 { 0%, 100% { filter: brightness(0.88); } 10%, 90% { filter: brightness(0.96); } 20%, 80% { filter: brightness(1.10); } 30%, 70% { filter: brightness(1.28); } 40%, 60% { filter: brightness(1.10); } 50% { filter: brightness(0.96); } } @keyframes wave-pos-5 { 0%, 100% { filter: brightness(0.84); } 10%, 90% { filter: brightness(0.88); } 20%, 80% { filter: brightness(0.96); } 30%, 70% { filter: brightness(1.10); } 40%, 60% { filter: brightness(1.28); } 50% { filter: brightness(1.10); } } @keyframes wave-pos-6 { 0%, 100% { filter: brightness(0.82); } 10%, 90% { filter: brightness(0.84); } 20%, 80% { filter: brightness(0.88); } 30%, 70% { filter: brightness(0.96); } 40%, 60% { filter: brightness(1.10); } 50% { filter: brightness(1.28); } } body[data-tune-mode="basic"] .action-btn[data-action="analyze-current"] { animation: wave-pos-1 5s ease-in-out infinite; } body[data-tune-mode="basic"] .action-btn[data-action="tune-current"] { animation: wave-pos-2 5s ease-in-out infinite; } body[data-tune-mode="basic"] .action-btn[data-action="tune-base"] { animation: wave-pos-3 5s ease-in-out infinite; } body[data-tune-mode="basic"] .action-btn[data-action="analyze-base"] { animation: wave-pos-4 5s ease-in-out infinite; } body[data-tune-mode="basic"] .action-btn[data-action="logs"] { animation: wave-pos-5 5s ease-in-out infinite; } body[data-tune-mode="basic"] .action-btn[data-action="analyze-log"] { animation: wave-pos-6 5s ease-in-out infinite; } body[data-tune-mode="basic"] .action-btn:hover { animation-play-state: paused; } /* ============================ UNIVERSAL BUTTON BOUNCE =========== */ /* Every