/* === NEO Albiceleste brand theme (#1446) === Palette (NEO brand style guide): Navy #12365C — primary brand / headers / dark text Marine #173E69 — secondary brand / dark surfaces Celeste #43A1D5 — accent, links, focus rings, active state Gold #D5B048 — highlights / brand-badges Gold-dk #9C7414 — deep gold (text-on-light gold, borders) Tint #E9F3FB — light surfaces / subtle backgrounds The custom --cyan* / --bg-* / --text* vars below drive every app component (sidebar, cards, forms, buttons, dashboard tiles). The --cyan* names are kept as the historical "accent" channel but now carry Celeste so existing rules don't need renaming. Each theme block ALSO overrides the relevant Bootstrap 5.3 CSS vars so stock components (btn-primary, links, badges, focus rings) pick up the brand. Theme is applied to by the toggle in base.html, which also drives Bootstrap's own light/dark component theming. */ /* --- Dark mode (default) — deep Navy/Marine surfaces, light text, Celeste accent (reads well on dark), Gold highlight. --- */ :root { --navy: #12365C; --marine: #173E69; --celeste: #43A1D5; --celeste-light: #6dbbe4; --celeste-deep: #2a7fb3; --gold: #D5B048; --gold-deep: #9C7414; --tint: #E9F3FB; --bg-primary: #0c1f33; /* deep navy page background */ --bg-secondary: #12365C; /* Navy sidebar / panels */ --bg-card: #143b66; /* slightly lifted Marine-ish card */ --bg-input: #0f2c4a; --border: #245080; --text: #e7f1fb; --text-muted: #9bb6d2; --cyan: #43A1D5; /* accent channel = Celeste */ --cyan-dark: #2a7fb3; --cyan-light: #6dbbe4; --success: #4CAF50; --danger: #f0625a; --bg-code: #081a2c; /* log / code blocks */ --code-text: #9bb6d2; /* Bootstrap 5.3 component vars → brand */ --bs-primary: #43A1D5; --bs-primary-rgb: 67, 161, 213; --bs-link-color: #6dbbe4; --bs-link-color-rgb: 109, 187, 228; --bs-link-hover-color: #9fd2ef; --bs-link-hover-color-rgb: 159, 210, 239; --bs-warning: #D5B048; --bs-warning-rgb: 213, 176, 72; --bs-body-bg: #0c1f33; --bs-body-color: #e7f1fb; --bs-border-color: #245080; } /* --- Light mode (#1375/#1446) — Tint surfaces, Navy brand/text, Celeste accent, Gold highlight. Flips the same variables so every var-driven component switches together. --- */ [data-bs-theme="light"] { --navy: #12365C; --marine: #173E69; --celeste: #43A1D5; --celeste-light: #6dbbe4; --celeste-deep: #2a7fb3; --gold: #D5B048; --gold-deep: #9C7414; --tint: #E9F3FB; --bg-primary: #E9F3FB; /* Tint page background */ --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-input: #ffffff; --border: #c3d8ec; --text: #12365C; /* Navy body text */ --text-muted: #50698a; --cyan: #2a7fb3; /* deepened Celeste so accent text reads on white */ --cyan-dark: #173E69; /* Marine for filled-dark accents */ --cyan-light: #43A1D5; --success: #2e7d32; --danger: #d32f2f; --bg-code: #dcebf8; --code-text: #335072; /* Bootstrap 5.3 component vars → brand */ --bs-primary: #12365C; /* Navy filled buttons on light */ --bs-primary-rgb: 18, 54, 92; --bs-link-color: #2a7fb3; /* deepened Celeste link for contrast */ --bs-link-color-rgb: 42, 127, 179; --bs-link-hover-color: #173E69; --bs-link-hover-color-rgb: 23, 62, 105; --bs-warning: #9C7414; /* deep gold reads on white */ --bs-warning-rgb: 156, 116, 20; --bs-body-bg: #E9F3FB; --bs-body-color: #12365C; --bs-border-color: #c3d8ec; } body { background: var(--bg-primary); color: var(--text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } /* Sidebar */ .sidebar { width: 260px; min-width: 260px; background: var(--bg-secondary); border-right: 1px solid var(--border); } .sidebar-brand { font-size: 14.4px; /* 10% smaller than 16px so the longer 'Neo-Deliverables-Generator' name fits the 260px sidebar without spilling over (#845) */ font-weight: 700; color: var(--cyan); padding: 8px 0; white-space: nowrap; text-align: center; } .sidebar .nav-link { color: var(--text-muted); padding: 10px 12px; border-radius: 6px; margin-bottom: 2px; font-size: 14px; } .sidebar .nav-link:hover { color: var(--text); background: rgba(67, 161, 213, 0.10); } .sidebar .nav-link.active { color: var(--cyan); background: rgba(67, 161, 213, 0.16); } .sidebar-footer { padding: 12px 0; border-top: 1px solid var(--border); font-size: 11px; text-align: center; } /* Cards */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; } .card-title { color: var(--text); } .pid-card { cursor: pointer; transition: border-color 0.2s, transform 0.15s; } .pid-card:hover { border-color: var(--cyan); transform: translateY(-2px); } /* Step progress dots */ .step-progress { display: flex; align-items: center; } .step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-input); border: 2px solid var(--border); color: var(--text-muted); font-size: 13px; flex-shrink: 0; } .step-dot.done { background: var(--cyan-dark); border-color: var(--cyan); color: #fff; } .step-line { flex: 1; height: 2px; background: var(--border); margin: 0 4px; } .step-line.done { background: var(--cyan); } /* Step cards on detail page */ .step-card { border-left: 3px solid var(--border); transition: border-color 0.2s; } .step-card:hover { border-left-color: var(--cyan); } .step-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-input); border: 2px solid var(--border); color: var(--text-muted); font-size: 13px; font-weight: 600; margin-right: 10px; } .step-badge.done { background: var(--cyan-dark); border-color: var(--cyan); color: #fff; } .step-log { background: var(--bg-code); border: 1px solid var(--border); border-radius: 6px; padding: 12px; font-family: 'Consolas', 'Courier New', monospace; font-size: 12px; max-height: 300px; overflow-y: auto; color: var(--code-text); } .step-log pre { margin: 0; white-space: pre-wrap; word-break: break-all; color: var(--code-text); } /* Forms */ .form-control, .form-select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); } .form-control:focus, .form-select:focus { background: var(--bg-input); border-color: var(--cyan); color: var(--text); box-shadow: 0 0 0 0.2rem rgba(67, 161, 213, 0.25); } .form-control::placeholder { color: var(--text-muted); opacity: 0.7; } .form-label { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; } /* Buttons */ .btn-cyan { background: var(--cyan); border-color: var(--cyan); color: #0a1f33; font-weight: 600; } .btn-cyan:hover { background: var(--cyan-light); border-color: var(--cyan-light); color: #0a1f33; } .btn-cyan:disabled { background: var(--cyan-dark); border-color: var(--cyan-dark); color: #333; opacity: 0.5; } .btn-outline-cyan { border-color: var(--cyan); color: var(--cyan); } .btn-outline-cyan:hover { background: var(--cyan); color: #000; } .btn-outline-secondary { border-color: var(--border); color: var(--text-muted); } .btn-outline-secondary:hover { background: var(--bg-input); border-color: var(--text-muted); color: var(--text); } /* Badges */ .badge.bg-success { background: var(--success) !important; } .badge.bg-info { background: var(--cyan) !important; color: #0a1f33 !important; } .badge.bg-warning { background: var(--gold) !important; color: #0a1f33 !important; } .badge.bg-primary { background: var(--navy) !important; color: #fff !important; } .badge.bg-secondary { background: var(--marine) !important; color: #fff !important; } /* Welcome page */ .welcome-body { background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); min-height: 100vh; } .welcome-card { max-width: 600px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 40px; } .welcome-icon { font-size: 48px; color: var(--cyan); } .section-header { color: var(--cyan); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--cyan-dark); } /* Spinner */ .spinner-border.text-cyan { color: var(--cyan) !important; } /* Alert */ .alert-danger { background: rgba(244, 67, 54, 0.1); border-color: rgba(244, 67, 54, 0.3); color: var(--danger); }