/* Add this file to your main HTML file's section: */ /* --- [NEW] Info Panel Content Styles --- */ /* (This is your existing content) */ .info-panel-content { padding: 20px; color: #e8eaf6; font-size: 0.95rem; line-height: 1.6; } .info-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 12px; } .info-panel-header h3 { margin: 0; font-size: 1.3rem; font-weight: 600; color: #fff; } .beta-badge { background-color: #f39c12; color: #1a1a1a; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; animation: pulse-beta 2s infinite; } @keyframes pulse-beta { 0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); } 100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); } } .welcome-text { color: #c5cae9; font-size: 0.9rem; margin-bottom: 20px; } .info-panel-content h4 { font-size: 1rem; font-weight: 600; color: #00a8ff; text-transform: uppercase; margin-top: 24px; margin-bottom: 12px; } .features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .features-list li { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; } .features-list li .fa-solid { width: 20px; text-align: center; color: #9fa8da; } .beta-note { margin-top: 24px; padding: 12px; background: rgba(243, 156, 18, 0.1); border: 1px solid rgba(243, 156, 18, 0.3); border-radius: 8px; font-size: 0.85rem; color: #f39c12; display: flex; align-items: center; gap: 10px; } .beta-note .fa-solid { font-size: 1.1rem; } /* --- [MODIFIED] Old tab UI elements --- */ /* This section is NOW USED to style the tabs */ .panel-tabs { display: flex; /* <-- MODIFIED: Was 'none' */ background-color: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* This will remove the padding from the wrapper */ .panel-content-wrapper { padding: 0; height: 100%; /* Ensure it fills the panel */ } /* --- [NEW] Add custom scrollbar to the side panel --- */ /* (This is your existing content) */ .panel-content::-webkit-scrollbar { width: 8px; } .panel-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); } .panel-content::-webkit-scrollbar-thumb { background-color: #00a8ff; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } .panel-content::-webkit-scrollbar-thumb:hover { background-color: #33c1ff; } /* --- [NEW] Styles for Welcome Panel Additions --- */ /* (This is your existing content) */ .pro-feature-note { font-size: 0.85rem; line-height: 1.5; margin-bottom: 16px; color: #c5cae9; /* Matches .welcome-text color */ } .features-list .pro-icon { width: 20px; text-align: center; color: #00a8ff; /* Theme blue from scrollbar */ } .panel-footer-links { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; font-size: 0.85rem; } .panel-footer-links a { color: #9fa8da; /* Matches feature icon color */ text-decoration: none; margin: 0 8px; transition: color 0.2s ease; } .panel-footer-links a:hover { color: #fff; text-decoration: underline; } .panel-footer-links span { color: #5c6a9c; /* A muted separator color */ } /* ===================================================== --- [NEW] TAB AND FLIGHT PLAN FORM STYLES --- ===================================================== */ /* --- Tab Buttons --- */ .panel-tab-btn { flex: 1; padding: 14px 10px; background: transparent; border: none; border-bottom: 3px solid transparent; color: #9fa8da; font-size: 0.9rem; font-weight: 600; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; align-items: center; justify-content: center; gap: 8px; } .panel-tab-btn:hover { background: rgba(255, 255, 255, 0.05); color: #fff; } .panel-tab-btn.active { color: #fff; border-bottom-color: #00a8ff; } /* --- Tab Content --- */ .tab-content { display: none; /* Hide all tabs by default */ height: 100%; overflow-y: auto; } .tab-content.active { display: block; /* Show the active tab */ } /* Scrollbar for tab content */ .tab-content::-webkit-scrollbar { width: 8px; } .tab-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); } .tab-content::-webkit-scrollbar-thumb { background-color: #00a8ff; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } .tab-content::-webkit-scrollbar-thumb:hover { background-color: #33c1ff; } /* --- Flight Plan Form Styles --- */ /* Add padding to the flight plan tab */ .flight-plan-content { padding: 20px; } .fp-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group-row { display: flex; gap: 12px; } .form-group-row .form-group { flex: 1; } .form-group label { font-size: 0.85rem; font-weight: 600; color: #9fa8da; text-transform: uppercase; } .form-group input[type="text"] { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 12px; color: #e8eaf6; font-size: 0.95rem; transition: all 0.2s ease; } .form-group input[type="text"]::placeholder { color: #5c6a9c; } .form-group input[type="text"]:focus { outline: none; border-color: #00a8ff; box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.2); } .sb-generate-btn { background-color: #00a8ff; color: #fff; font-size: 1rem; font-weight: 600; padding: 14px; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; } .sb-generate-btn:hover { background-color: #33c1ff; } .sb-generate-btn:disabled { background-color: #5c6a9c; cursor: not-allowed; } /* --- [FIX] Utility class to hide elements --- */ /* (This ensures the old SimBrief form is hidden) */ .hidden { display: none; } /* --- [FIX] Style the