/* * portal-dark.css * Atlantic BidFlow — Subscriber Portal Dark Theme * * Design tokens aligned with the FedBids Command Center aesthetic. * Load Inter from Google Fonts in the before this file. * * All values live in :root so any future portal template can * inherit them with a single — no inline styles needed. */ /* ── Google Fonts: Inter ──────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ── Design Tokens ────────────────────────────────────────────── */ :root { /* Surfaces */ --bg: #121212; --surface: #1e1e1e; --surface-raised: #252525; --surface-hover: #2a2a2a; --border: #2c2c2e; --border-subtle: #1f1f21; /* Accents */ --blue: #007AFF; --blue-dim: rgba(0,122,255,.12); --blue-hover: #0066d6; --green: #34C759; --green-dim: rgba(52,199,89,.12); --amber: #FF9F0A; --amber-dim: rgba(255,159,10,.12); --red: #FF453A; --red-dim: rgba(255,69,58,.12); --purple: #BF5AF2; --purple-dim: rgba(191,90,242,.12); --orange: #FF6B35; --orange-dim: rgba(255,107,53,.12); /* Typography */ --text: #f2f2f7; --text-secondary: #aeaeb2; --text-muted: #636366; --text-link: #64a8ff; /* Navy header (matches CC) */ --navy: #0d1b2e; --navy-light: rgba(255,255,255,.08); /* Radius */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; /* Shadow */ --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); --shadow-sm: 0 1px 2px rgba(0,0,0,.35); } /* ── Reset ────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Base ─────────────────────────────────────────────────────── */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } /* ── Navigation ───────────────────────────────────────────────── */ nav { background: var(--navy); padding: 0 28px; height: 58px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.06); position: sticky; top: 0; z-index: 100; } .nav-brand { font-size: 16px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -.01em; } .nav-brand span { color: #60a5fa; } .nav-right { display: flex; align-items: center; gap: 18px; } .nav-right a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .15s; } .nav-right a:hover { color: #fff; } .nav-logout { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); padding: 5px 14px; border-radius: var(--r-sm); font-size: 13px; font-family: inherit; cursor: pointer; font-weight: 500; transition: background .15s; } .nav-logout:hover { background: rgba(255,255,255,.18); color: #fff; } /* ── Page layout ──────────────────────────────────────────────── */ .container { max-width: 920px; margin: 32px auto; padding: 0 24px 80px; } .page-header { margin-bottom: 28px; } .page-header h1 { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 4px; letter-spacing: -.02em; } .page-header p { font-size: 13px; color: var(--text-secondary); } /* ── Section labels ───────────────────────────────────────────── */ .section-label { font-size: 11px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: block; } /* ── Cards ────────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--r-lg); padding: 22px 24px; border: 1px solid var(--border); margin-bottom: 20px; } .card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; letter-spacing: -.01em; } .card-title a { font-size: 13px; font-weight: normal; color: var(--text-link); text-decoration: none; transition: opacity .15s; } .card-title a:hover { opacity: .8; } /* ── Stat cards ───────────────────────────────────────────────── */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 28px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); } .stat-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } .stat-value { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -.03em; } .stat-sub { font-size: 11px; color: var(--text-secondary); margin-top: 5px; } /* ── Status badges ────────────────────────────────────────────── */ .badge-active { display: inline-block; background: var(--green-dim); color: var(--green); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(52,199,89,.25); } .badge-paused { display: inline-block; background: var(--amber-dim); color: var(--amber); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(255,159,10,.25); } .badge-incomplete { display: inline-block; background: var(--amber-dim); color: var(--amber); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(255,159,10,.25); } .badge-complete { display: inline-block; background: var(--green-dim); color: var(--green); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(52,199,89,.25); } /* Plan badges */ .badge-plan-free { display: inline-block; background: var(--blue-dim); color: var(--text-link); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(0,122,255,.25); } .badge-plan-brief { display: inline-block; background: var(--green-dim); color: var(--green); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(52,199,89,.25); } .badge-plan-pro { display: inline-block; background: var(--purple-dim); color: var(--purple); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(191,90,242,.25); } .badge-expired { display: inline-block; background: var(--red-dim); color: var(--red); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(255,69,58,.25); } /* ── Go / No-Go badges ────────────────────────────────────────── */ .gng-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 100px; white-space: nowrap; margin-bottom: 5px; letter-spacing: .03em; } .gng-strong-go { background: var(--green-dim); color: var(--green); } .gng-lean-go { background: rgba(52,199,89,.07); color: #5dd889; } .gng-borderline { background: var(--amber-dim); color: var(--amber); } .gng-lean-nogo { background: rgba(255,159,10,.08); color: #ffb340; } .gng-strong-nogo { background: var(--red-dim); color: var(--red); } /* ── Opportunity type badges ──────────────────────────────────── */ .opp-type { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; margin-left: 6px; vertical-align: middle; white-space: nowrap; } .opp-type-sol { background: var(--blue-dim); color: var(--text-link); } .opp-type-rfi { background: var(--green-dim); color: #5eead4; } .opp-type-pre { background: rgba(255,255,255,.06); color: var(--text-secondary); } .opp-type-award { background: var(--green-dim); color: var(--green); } .opp-type-other { background: var(--purple-dim); color: var(--purple); } /* ── Deadline badges ──────────────────────────────────────────── */ .deadline-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 100px; margin-top: 5px; letter-spacing: .02em; } .deadline-urgent { background: rgba(255,69,58,.15); color: #ff6b6b; border: 1px solid rgba(255,69,58,.3); } .deadline-soon { background: rgba(255,159,10,.12); color: var(--amber); border: 1px solid rgba(255,159,10,.3); } .deadline-ok { background: var(--green-dim); color: var(--green); border: 1px solid rgba(52,199,89,.25); } .deadline-closed { background: rgba(255,255,255,.05); color: var(--text-muted); border: 1px solid var(--border); } /* ── Opportunity list ─────────────────────────────────────────── */ .opp-item { padding: 14px 0; border-bottom: 1px solid var(--border-subtle); } .opp-item:last-child { border-bottom: none; } .opp-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; line-height: 1.35; } .opp-meta { font-size: 12px; color: var(--text-secondary); } .opp-match-reason { font-size: 12px; color: var(--text-secondary); font-style: italic; margin: 3px 0 5px; line-height: 1.5; } .opp-summary { font-size: 13px; color: var(--text-secondary); margin-top: 7px; line-height: 1.6; } .opp-incumbent { font-size: 12px; color: var(--text-secondary); margin-top: 7px; padding: 7px 12px; background: var(--surface-raised); border-left: 3px solid #334155; border-radius: 0 var(--r-sm) var(--r-sm) 0; line-height: 1.6; } /* ── Opportunity actions ──────────────────────────────────────── */ .opp-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; } .opp-actions a, .opp-actions span, .opp-actions button { font-size: 13px; font-weight: 700; padding: 7px 15px; border-radius: var(--r-sm); text-decoration: none; white-space: nowrap; line-height: 1.2; display: inline-block; cursor: pointer; font-family: inherit; transition: opacity .15s, background .15s; } /* ── Buttons ──────────────────────────────────────────────────── */ .btn-primary { display: inline-block; padding: 10px 22px; background: var(--blue); color: #fff; border-radius: var(--r-md); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .15s; border: none; cursor: pointer; font-family: inherit; } .btn-primary:hover { background: var(--blue-hover); color: #fff; } .btn-secondary { display: inline-block; padding: 10px 22px; background: transparent; color: var(--blue); border: 1.5px solid var(--blue); border-radius: var(--r-md); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .15s; cursor: pointer; font-family: inherit; } .btn-secondary:hover { background: var(--blue-dim); color: var(--blue); } .btn-upgrade { display: inline-block; padding: 10px 22px; background: var(--purple); color: #fff; border-radius: var(--r-md); font-size: 14px; font-weight: 700; text-decoration: none; transition: opacity .15s; } .btn-upgrade:hover { opacity: .85; } .btn-view { background: var(--blue); color: #fff !important; border: none; border-radius: var(--r-sm); } .btn-view:hover { background: var(--blue-hover); } .btn-draft { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); border-radius: var(--r-sm); white-space: nowrap !important; min-width: max-content; } .btn-draft:hover { background: var(--blue-dim); } .btn-draft-locked { background: var(--surface-raised); color: var(--text-muted); border: 1.5px solid var(--border); cursor: not-allowed; border-radius: var(--r-sm); } .btn-draft-partial { background: rgba(255,159,10,.1); color: var(--amber); border: 1.5px solid rgba(255,159,10,.4); border-radius: var(--r-sm); white-space: nowrap !important; min-width: max-content; } .btn-draft-partial:hover { background: rgba(255,159,10,.18); } .btn-track { background: rgba(255,159,10,.08) !important; color: var(--amber) !important; border: 1.5px solid rgba(255,159,10,.35) !important; } .btn-track:hover { background: rgba(255,159,10,.15) !important; } .btn-pay { display: inline-block; margin-top: 10px; padding: 9px 22px; background: var(--orange); color: #fff; border-radius: var(--r-md); font-size: 13px; font-weight: 700; text-decoration: none; transition: opacity .15s; } .btn-pay:hover { opacity: .85; } /* ── Action bar ───────────────────────────────────────────────── */ .action-bar { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; } /* ── Helper text ──────────────────────────────────────────────── */ .helper-text { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; } /* ── Alert banners ────────────────────────────────────────────── */ .alert-banner { border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 20px; font-size: 14px; line-height: 1.6; border-left-style: solid; border-left-width: 4px; } .alert-banner a { font-weight: 700; text-decoration: underline; } .alert-warning { background: var(--amber-dim); border-left-color: var(--amber); color: #ffd07a; } .alert-warning a { color: var(--amber); } .alert-danger { background: var(--red-dim); border-left-color: var(--red); color: #ff8f8a; } .alert-danger a { color: var(--red); } .alert-info { background: var(--blue-dim); border-left-color: var(--blue); color: var(--text-link); } .alert-info a { color: var(--blue); } .alert-payment { background: var(--orange-dim); border-left-color: var(--orange); color: #ffb085; } .alert-payment a { color: var(--orange); } /* ── Upgrade card ─────────────────────────────────────────────── */ .upgrade-card { background: linear-gradient(135deg, #1a0d2e, #1d1535); border: 1.5px solid rgba(191,90,242,.3); border-radius: var(--r-lg); padding: 22px 26px; margin-bottom: 22px; } .upgrade-card h3 { font-size: 16px; color: var(--purple); margin-bottom: 10px; font-weight: 800; letter-spacing: -.01em; } .upgrade-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 16px; } .plan-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; } .tier-card { background: var(--surface-raised); border-radius: var(--r-md); padding: 18px; border: 1.5px solid var(--border); } .tier-card.highlighted { border-color: var(--purple); } .tier-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .tier-price { font-size: 22px; font-weight: 800; color: var(--blue); margin-bottom: 10px; letter-spacing: -.03em; } .tier-features { font-size: 12px; color: var(--text-secondary); line-height: 1.9; } /* ── Credit / progress bar ────────────────────────────────────── */ .credit-bar { height: 6px; background: var(--surface-hover); border-radius: 3px; margin-top: 8px; overflow: hidden; } .credit-fill { height: 100%; background: var(--blue); border-radius: 3px; transition: width .4s; } .credit-fill.warn { background: var(--amber); } .credit-fill.danger { background: var(--red); } /* ── Toast (success sync) ─────────────────────────────────────── */ .toast-sync { display: flex; align-items: flex-start; gap: 12px; background: rgba(52,199,89,.1); border-left: 4px solid var(--green); border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 22px; font-size: 14px; color: #86efac; line-height: 1.6; animation: toast-in .35s ease; } .toast-sync .toast-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; } .toast-sync .toast-body { flex: 1; } .toast-sync .toast-close { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--green); line-height: 1; padding: 0; flex-shrink: 0; opacity: .7; transition: opacity .15s; } .toast-sync .toast-close:hover { opacity: 1; } @keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ── BD Coach strip ───────────────────────────────────────────── */ .bd-coach-strip { background: var(--blue-dim); border-left: 4px solid var(--blue); border-radius: var(--r-md); padding: 10px 16px; margin-bottom: 20px; font-size: 13px; color: var(--text-link); line-height: 1.55; } .bd-coach-label { font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; margin-right: 8px; opacity: .7; } /* ── Opportunity filter bar ───────────────────────────────────── */ .opp-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .flt-btn { font-size: 12px; font-weight: 600; padding: 4px 13px; border-radius: 100px; border: 1.5px solid var(--border); background: var(--surface-raised); color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s; } .flt-btn:hover { background: var(--surface-hover); color: var(--text); } .flt-btn.flt-active { background: var(--blue); color: #fff; border-color: var(--blue); } /* ── Filter summary ───────────────────────────────────────────── */ .filter-summary { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 16px; font-size: 12px; color: var(--text-secondary); line-height: 1.8; } .filter-summary strong { color: var(--text); } .filter-summary a { color: var(--text-link); font-weight: 700; text-decoration: none; } .filter-summary a:hover { text-decoration: underline; } /* ── Profile rows ─────────────────────────────────────────────── */ .profile-rows { display: flex; flex-direction: column; gap: 0; } .profile-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); } .profile-row:last-child { border-bottom: none; } .profile-row .field { color: var(--text-muted); } .profile-row .value { color: var(--text); font-weight: 700; max-width: 340px; text-align: right; word-break: break-word; } /* Phase 3.1: Profile checklist */ .profile-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* ── Empty state ──────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 36px 20px; color: var(--text-muted); font-size: 14px; } /* ── Footer cards ─────────────────────────────────────────────── */ .footer-newsletter { background: linear-gradient(135deg, #0d1b2e, #0f2340); border: 1px solid rgba(96,165,250,.2); border-radius: var(--r-lg); padding: 22px 26px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .footer-newsletter .fn-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #60a5fa; margin-bottom: 3px; } .footer-newsletter .fn-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 5px; } .footer-newsletter .fn-sub { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.5; } .footer-newsletter a.fn-btn { display: inline-block; padding: 10px 22px; background: var(--blue); color: #fff; border-radius: var(--r-md); font-size: 13px; font-weight: 700; text-decoration: none; flex-shrink: 0; white-space: nowrap; transition: background .15s; } .footer-newsletter a.fn-btn:hover { background: var(--blue-hover); } .footer-legal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 20px; } .footer-legal a { color: var(--text-link); text-decoration: none; } .footer-legal a:hover { text-decoration: underline; } /* ── Inline stat-card actions ─────────────────────────────────── */ .stat-card form button { width: 100%; font-size: 12px; padding: 5px 14px; border-radius: var(--r-sm); cursor: pointer; font-family: inherit; font-weight: 600; transition: opacity .15s; border: 1px solid; } .btn-pause-digest { background: rgba(255,159,10,.1); color: var(--amber); border-color: rgba(255,159,10,.35); } .btn-pause-digest:hover { background: rgba(255,159,10,.18); } .btn-resume-digest { background: rgba(52,199,89,.1); color: var(--green); border-color: rgba(52,199,89,.3); } .btn-resume-digest:hover { background: rgba(52,199,89,.18); } /* ── Inline links inside content areas ───────────────────────── */ a { color: var(--text-link); } /* ═══════════════════════════════════════════════════════════════ PURSUITS PAGE COMPONENTS ═══════════════════════════════════════════════════════════════ */ /* ── Alert banners (pursuits uses .alert shorthand, not .alert-banner) ─ */ /* .alert-info / .alert-warning already defined above; only add new ones */ .alert { border-radius: var(--r-md); padding: 12px 18px; margin-bottom: 18px; font-size: 13px; border-left-style: solid; border-left-width: 4px; line-height: 1.55; } .alert-success { background: var(--green-dim); border-left-color: var(--green); color: #86efac; } /* ── Stat chips (clickable filter counters at page top) ──────── */ .stats-row-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; } .stat-chip { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 12px 18px; min-width: 100px; text-align: center; text-decoration: none; transition: border-color .15s, background .15s; display: block; } .stat-chip:hover { border-color: var(--blue); background: var(--surface-raised); } .stat-chip.active { border-color: var(--blue); background: var(--blue-dim); } .stat-chip-val { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -.03em; } .stat-chip-lbl { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } /* ── Page header (pursuits has header + back button side-by-side) */ .page-header-row { margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .page-header-row h1 { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.02em; } .page-header-row p { font-size: 13px; color: var(--text-secondary); margin-top: 3px; } /* ── Card with header ─────────────────────────────────────────── */ .card-header { padding: 14px 20px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-header h2 { font-size: 15px; color: var(--text); font-weight: 700; letter-spacing: -.01em; } /* ── Pursuit rows ─────────────────────────────────────────────── */ .pursuit-row { padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); transition: background .1s; } .pursuit-row:last-child { border-bottom: none; } .pursuit-row:hover { background: var(--surface-raised); } .pursuit-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pursuit-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } /* ── Status badge (colours injected via STATUS_COLORS Jinja var) */ .badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: .02em; } /* ── Deadline chips (.deadline-urgent/soon/ok already defined above) ─── */ .deadline-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; } .deadline-none { background: rgba(255,255,255,.05); color: var(--text-muted); border: 1px solid var(--border); } /* ── Small action buttons (.btn base) ────────────────────────── */ .btn { display: inline-block; padding: 5px 13px; border-radius: var(--r-sm); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; font-family: inherit; transition: opacity .15s, background .15s; line-height: 1.4; white-space: nowrap; } .btn-sam { background: var(--blue); color: #fff; border: none; } .btn-sam:hover { background: var(--blue-hover); color: #fff; } .btn-archive { background: var(--surface-raised); color: var(--text-secondary); border: 1px solid var(--border); } .btn-archive:hover { background: var(--surface-hover); color: var(--text); } .btn-save { background: var(--green); color: #fff; border: none; } .btn-save:hover { opacity: .85; } /* ── Inline edit form ─────────────────────────────────────────── */ .detail-form { margin-top: 14px; padding: 16px 18px; background: var(--surface-raised); border-radius: var(--r-md); border: 1px solid var(--border); display: none; } .detail-form.open { display: block; } .form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; } .form-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 160px; } .form-group label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; } .form-group select, .form-group input, .form-group textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text); transition: border-color .15s; -webkit-appearance: none; } .form-group select:focus, .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); } .form-group textarea { resize: vertical; min-height: 60px; } /* ── Notes block inside a pursuit row ────────────────────────── */ .pursuit-notes { margin-top: 8px; font-size: 13px; color: var(--text-secondary); background: var(--surface-raised); border-left: 3px solid var(--border); padding: 8px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0; line-height: 1.55; } /* ── Filter tabs ──────────────────────────────────────────────── */ .filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .filter-tab { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-decoration: none; color: var(--text-secondary); background: var(--surface); border: 1.5px solid var(--border); transition: background .15s, color .15s, border-color .15s; } .filter-tab:hover, .filter-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); } /* ═══════════════════════════════════════════════════════════════ PROFILE PAGE COMPONENTS ═══════════════════════════════════════════════════════════════ */ /* ── Section divider ─────────────────────────────────────────── */ .section-divider { border: none; border-top: 1px solid var(--border); margin: 32px 0; } /* ── Status / feedback messages ──────────────────────────────── */ .success-msg { background: var(--green-dim); color: #86efac; border-radius: var(--r-md); padding: 12px 16px; font-size: 13px; margin-bottom: 18px; border-left: 4px solid var(--green); } .error-msg { background: var(--red-dim); color: #ff8a8a; border-radius: var(--r-md); padding: 12px 16px; font-size: 13px; margin-bottom: 18px; border-left: 4px solid var(--red); } .info-msg { background: var(--blue-dim); color: var(--text-link); border-radius: var(--r-md); padding: 12px 16px; font-size: 13px; margin-bottom: 18px; border-left: 4px solid var(--blue); } .hint { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; } /* ── Checkbox grid (set-asides, opportunity types) ───────────── */ .checkbox-grid { display: flex; flex-wrap: wrap; gap: 10px 24px; } .cb-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary); cursor: pointer; } .cb-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; } /* ── Repeatable list items (past performance, key personnel) ─── */ .repeatable-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .repeatable-item { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 16px 6px; position: relative; } .remove-btn { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--red); font-size: 18px; cursor: pointer; line-height: 1; opacity: .7; transition: opacity .15s; } .remove-btn:hover { opacity: 1; } .add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--blue-dim); color: var(--text-link); border: 1.5px dashed var(--blue); border-radius: var(--r-sm); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: filter .15s; } .add-btn:hover { filter: brightness(1.2); } .diff-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .diff-item input { flex: 1; } .diff-item .remove-btn { position: static; font-size: 16px; } /* ── Profile action buttons ──────────────────────────────────── */ .actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; align-items: center; } .btn-cancel { padding: 10px 20px; background: var(--surface-raised); color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background .15s; font-family: inherit; } .btn-cancel:hover { background: var(--surface-hover); color: var(--text); } /* ── SAM.gov auto-fill widget ────────────────────────────────── */ .lookup-widget { background: var(--blue-dim); border: 1.5px solid rgba(0,122,255,.22); border-radius: var(--r-md); padding: 20px 22px; margin-bottom: 24px; } .lookup-widget h3 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .lookup-widget p { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; line-height: 1.55; } .lookup-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .lookup-input { flex: 1; min-width: 180px; padding: 9px 11px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: 13px; outline: none; font-family: inherit; background: var(--surface); color: var(--text); transition: border-color .15s; } .lookup-input:focus { border-color: var(--blue); } .lookup-btn { padding: 9px 20px; background: var(--blue); color: #fff; border: none; border-radius: var(--r-sm); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; transition: background .15s; } .lookup-btn:hover { background: var(--blue-hover); } .lookup-btn:disabled { background: var(--text-muted); cursor: not-allowed; } .lookup-status { font-size: 13px; margin-top: 10px; } .lookup-status.loading { color: var(--text-link); } .lookup-status.success { color: #86efac; background: var(--green-dim); padding: 10px 14px; border-radius: var(--r-sm); border-left: 3px solid var(--green); } .lookup-status.error { color: #ff8a8a; background: var(--red-dim); padding: 10px 14px; border-radius: var(--r-sm); border-left: 3px solid var(--red); } /* ── USA Spending / SAM badges ───────────────────────────────── */ .usa-badge { display: inline-block; background: var(--blue-dim); color: var(--text-link); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle; border: 1px solid rgba(0,122,255,.22); } .usa-note { font-size: 11px; color: var(--text-muted); margin: 10px 0 14px; line-height: 1.5; border-left: 3px solid var(--border); padding-left: 10px; } .sync-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; background: var(--green-dim); color: var(--green); border: 1.5px solid rgba(52,199,89,.3); border-radius: var(--r-sm); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: filter .15s; } .sync-btn:hover { filter: brightness(1.15); } /* ── NAICS lookup panel ──────────────────────────────────────── */ .naics-lookup-toggle { font-size: 12px; color: var(--text-link); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; text-decoration: underline; margin-top: 6px; display: inline-block; opacity: .85; transition: opacity .15s; } .naics-lookup-toggle:hover { opacity: 1; } .naics-panel { display: none; margin-top: 10px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface-raised); overflow: hidden; } .naics-panel-inner { padding: 12px 14px; } .naics-search-row { display: flex; gap: 8px; } .naics-search-row input { flex: 1; padding: 8px 11px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: 13px; color: var(--text); outline: none; font-family: inherit; background: var(--surface); transition: border-color .15s; } .naics-search-row input:focus { border-color: var(--blue); } .naics-results { margin-top: 8px; max-height: 210px; overflow-y: auto; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); } .naics-result-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .1s; } .naics-result-item:last-child { border-bottom: none; } .naics-result-item:hover { background: var(--surface-raised); } .naics-result-item.added { background: var(--green-dim); } .naics-result-code { font-size: 12px; font-weight: 700; color: var(--text-link); white-space: nowrap; margin-right: 10px; flex-shrink: 0; } .naics-result-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } .naics-result-add { font-size: 11px; color: var(--text-link); font-weight: 700; white-space: nowrap; margin-left: 8px; flex-shrink: 0; } .naics-result-item.added .naics-result-add { color: var(--green); } .naics-no-results { padding: 14px 12px; font-size: 12px; color: var(--text-muted); text-align: center; } .naics-footer { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); background: var(--surface-raised); } .naics-footer a { color: var(--text-link); } /* ── AI notice banner (profile page) ────────────────────────── */ .ai-notice-banner { background: var(--amber-dim); border-left: 4px solid var(--amber); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 10px 14px; font-size: 13px; color: #ffd07a; margin-bottom: 14px; } /* ═══════════════════════════════════════════════════════════════ DRAFTS PAGE COMPONENTS ═══════════════════════════════════════════════════════════════ */ /* ── Credits bar ─────────────────────────────────────────────── */ .credits-bar { background: var(--blue-dim); border: 1px solid rgba(0,122,255,.22); border-radius: var(--r-md); padding: 10px 16px; margin-bottom: 20px; font-size: 13px; color: var(--text-link); display: flex; align-items: center; gap: 10px; } .credits-bar strong { color: var(--text); } /* ── Table styles ────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; } th { background: var(--surface-raised); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--border); } td { padding: 13px 16px; font-size: 13px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; color: var(--text-secondary); } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--surface-raised); } /* ── Badge variants — draft confidence ───────────────────────── */ .conf-high { background: var(--green-dim); color: var(--green); } .conf-medium { background: var(--amber-dim); color: var(--amber); } .conf-low { background: var(--red-dim); color: var(--red); } .conf-unknown { background: var(--surface-raised); color: var(--text-muted); } /* ── Badge variants — Go/No-Go (defined in base section, extended here) ──── */ .gng-unknown { background: var(--surface-raised); color: var(--text-muted); } /* ── Draft status text ───────────────────────────────────────── */ .status-complete { color: var(--green); font-weight: 700; } .status-error { color: var(--red); font-weight: 700; } .status-running { color: var(--blue); font-weight: 700; } /* ── Review flag counts ──────────────────────────────────────── */ .flag-count { font-size: 12px; } .flag-none { color: var(--green); } .flag-some { color: var(--amber); } .flag-many { color: var(--red); } /* ── Draft action buttons ────────────────────────────────────── */ .btn-download { display: inline-block; padding: 5px 14px; background: var(--blue); color: #fff; border-radius: var(--r-sm); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s; } .btn-download:hover { background: var(--blue-hover); color: #fff; } .btn-status { display: inline-block; padding: 5px 14px; background: var(--surface-raised); color: var(--text-link); border: 1px solid rgba(0,122,255,.25); border-radius: var(--r-sm); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s; } .btn-status:hover { background: var(--blue-dim); } .btn-delete { display: inline-block; padding: 5px 14px; background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(255,159,10,.3); border-radius: var(--r-sm); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; font-family: inherit; transition: filter .15s; } .btn-delete:hover { filter: brightness(1.15); } .actions-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .date-col { white-space: nowrap; font-size: 12px; color: var(--text-muted); } .nogo-hint { font-size: 11px; color: var(--amber); margin-top: 3px; } /* ── Flash messages (.flash-* used by drafts) ────────────────── */ .flash { padding: 12px 18px; border-radius: var(--r-md); margin-bottom: 18px; font-size: 14px; border-left: 4px solid; } .flash-success { background: var(--green-dim); color: #86efac; border-left-color: var(--green); } .flash-error { background: var(--red-dim); color: #ff8a8a; border-left-color: var(--red); } .flash-warning { background: var(--amber-dim); color: #ffd07a; border-left-color: var(--amber); } .flash-info { background: var(--blue-dim); color: var(--text-link); border-left-color: var(--blue); } /* ═══════════════════════════════════════════════════════════════ PROGRAM PAGE COMPONENTS ═══════════════════════════════════════════════════════════════ */ /* ── Growth Partner badge ────────────────────────────────────── */ .gp-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-dim); color: var(--text-link); padding: 3px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; margin-left: 8px; border: 1px solid rgba(0,122,255,.28); } /* ── Fee cap progress bar ────────────────────────────────────── */ .cap-bar-wrap { margin-bottom: 6px; } .cap-bar { height: 14px; background: var(--surface-raised); border-radius: 7px; overflow: hidden; margin: 8px 0 6px; border: 1px solid var(--border); } .cap-fill { height: 100%; background: var(--green); border-radius: 7px; transition: width .4s; } .cap-fill.warn { background: var(--amber); } .cap-fill.maxed { background: var(--red); } .cap-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); } /* ── Program invoice badge variants ──────────────────────────── */ .badge-outstanding { background: var(--amber-dim); color: var(--amber); } .badge-paid { background: var(--green-dim); color: var(--green); } .badge-overdue { background: var(--red-dim); color: var(--red); } .badge-disputed { background: var(--blue-dim); color: var(--text-link); } .badge-waived { background: var(--surface-raised); color: var(--text-muted); } .badge-confirmed { background: var(--green-dim); color: var(--green); } .badge-pending { background: var(--amber-dim); color: var(--amber); } .badge-open { background: var(--red-dim); color: var(--red); } .badge-resolved { background: var(--green-dim); color: var(--green); } /* ── Small button variants (program page) ────────────────────── */ .btn-sm { padding: 5px 12px; border-radius: var(--r-sm); font-size: 12px; font-weight: 700; text-decoration: none; display: inline-block; cursor: pointer; font-family: inherit; transition: filter .15s; } .btn-outline { background: var(--surface-raised); color: var(--text-link); border: 1.5px solid rgba(0,122,255,.35); } .btn-outline:hover { background: var(--blue-dim); color: var(--text-link); } .btn-danger { background: var(--red-dim); color: var(--red); border: 1.5px solid rgba(255,69,58,.3); } .btn-danger:hover { filter: brightness(1.2); } .btn-dl { background: var(--surface-raised); color: var(--text-secondary); border: 1.5px solid var(--border); } .btn-dl:hover { background: var(--surface-hover); } .btn-submit { padding: 10px 22px; background: var(--red); color: #fff; border: none; border-radius: var(--r-sm); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 14px; transition: opacity .15s; } .btn-submit:hover { opacity: .85; } /* ── Dispute form ────────────────────────────────────────────── */ .dispute-form label { display: block; font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; margin-top: 16px; } .dispute-form select, .dispute-form textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text); transition: border-color .15s; -webkit-appearance: none; } .dispute-form textarea { min-height: 90px; resize: vertical; } .dispute-form select:focus, .dispute-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); } /* ── Success banner (program) ────────────────────────────────── */ .success-banner { background: var(--green-dim); border-left: 4px solid var(--green); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 12px 16px; font-size: 13px; color: #86efac; margin-bottom: 20px; } /* ═══════════════════════════════════════════════════════════════ LOGIN / VERIFY / REAGREE PAGE COMPONENTS ═══════════════════════════════════════════════════════════════ */ /* ── Centered-card pages (login, reagree, verify) ────────────── */ .centered-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .centered-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 4px 32px rgba(0,0,0,.5); width: 100%; max-width: 440px; overflow: hidden; } .centered-card-wide { max-width: 560px; padding: 40px 40px 36px; border-radius: 10px; } /* ── Login card header (gradient) ────────────────────────────── */ .login-card-header { background: linear-gradient(135deg, var(--blue), #004db3); color: #fff; padding: 32px 36px 28px; } .login-card-header h1 { font-size: 20px; font-weight: 700; margin-bottom: 6px; } .login-card-header p { font-size: 13px; opacity: .85; line-height: 1.5; } .portal-features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .portal-feature { font-size: 11px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 100px; padding: 4px 10px; white-space: nowrap; } .card-body { padding: 32px 36px; } /* ── Full-width submit button (login, verify, reagree) ───────── */ .btn-full { display: block; width: 100%; padding: 12px; background: var(--blue); color: #fff; border: none; border-radius: var(--r-md); font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s; font-family: inherit; text-align: center; text-decoration: none; } .btn-full:hover { background: var(--blue-hover); } .btn-full:disabled { background: var(--text-muted); cursor: not-allowed; } /* ── Login feedback boxes ────────────────────────────────────── */ .success-box { background: var(--green-dim); border-left: 4px solid var(--green); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 16px 18px; font-size: 14px; color: #86efac; line-height: 1.6; } .error-box { background: var(--red-dim); border-left: 4px solid var(--red); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 14px 18px; font-size: 13px; color: #ff8a8a; margin-bottom: 16px; } /* ── Login nav (fixed, dark) ─────────────────────────────────── */ nav.login-nav { background: var(--navy); border-bottom: 1px solid var(--border); padding: 0 32px; height: 60px; display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .nav-back { font-size: 14px; color: rgba(255,255,255,.75); text-decoration: none; transition: color .15s; } .nav-back:hover { color: #fff; } .nav-back.active { color: #fff; font-weight: 700; } /* ── Re-agree page elements ──────────────────────────────────── */ .brand-heading { font-size: 17px; font-weight: 700; color: var(--text-link); margin-bottom: 28px; } .subtext { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 24px; } .agreement-box { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 18px 20px; margin-bottom: 24px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; max-height: 200px; overflow-y: auto; } .checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .checkbox-row input { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--blue); } .error-inline { background: var(--red-dim); color: #ff8a8a; border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; border-left: 3px solid var(--red); } /* ── Verify confirm elements ─────────────────────────────────── */ .verify-card-header { background: var(--blue); padding: 28px 32px; } .verify-card-header h1 { font-size: 20px; color: #fff; font-weight: 700; } .verify-card-header p { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 4px; } .lock-icon { font-size: 48px; margin-bottom: 16px; } .note { margin-top: 18px; font-size: 12px; color: var(--text-muted); } /* ── Upgrade success elements ────────────────────────────────── */ .success-page-wrap { max-width: 620px; margin: 60px auto; padding: 0 24px; text-align: center; } .success-icon { font-size: 64px; margin-bottom: 24px; } .plan-badge { display: inline-block; padding: 6px 18px; border-radius: 100px; font-size: 14px; font-weight: 700; margin-bottom: 24px; } .plan-pro { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(191,90,242,.28); } .plan-growth { background: var(--green-dim); color: var(--green); border: 1px solid rgba(52,199,89,.28); } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 768px) { .stats-row { grid-template-columns: repeat(3, 1fr); } .profile-checklist { grid-template-columns: 1fr; } nav { padding: 0 16px; } .container { margin: 20px auto; padding: 0 16px 60px; } } @media (max-width: 500px) { .stats-row { grid-template-columns: repeat(2, 1fr); } .profile-checklist { grid-template-columns: 1fr; } .opp-actions { gap: 6px; } .opp-actions a, .opp-actions span, .opp-actions button { font-size: 13px; padding: 9px 16px; } nav { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 8px; } .nav-right { gap: 12px; } .stats-row-chips { gap: 8px; } .stat-chip { min-width: 80px; padding: 10px 12px; } }