/* ============================================================ CMC / BPG — Customer Portal Brand: loaded from JS via data-brand attribute on BPG: --accent #E63323 | CMC: --accent #4E7A52 ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #1A1440; --accent: #E63323; --accent-hover: #c52a1a; --bg: #f0f2f5; --card-bg: #fff; --border: #e2e5ea; --text: #1a1a2e; --muted: #6b7280; --success: #16a34a; --warning: #d97706; --paid-bg: #f0fdf4; } /* CMC brand override */ html[data-brand="cmc"] { --accent: #4E7A52; --accent-hover: #3d6140; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; background: var(--bg); min-height: 100vh; color: var(--text); line-height: 1.5; } /* ── Header ── */ .site-header { background: var(--primary); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .site-header .brand { color: #fff; } .site-header .brand h1 { font-size: 17px; font-weight: 800; letter-spacing: -.3px; } .site-header .brand p { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 1px; } .header-accent { height: 3px; background: var(--accent); } .header-user { display: flex; align-items: center; gap: 10px; } .header-email { font-size: 12px; color: rgba(255,255,255,.7); } .btn-logout { font-size: 12px; color: rgba(255,255,255,.6); background: none; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 5px 10px; cursor: pointer; transition: all .2s; } .btn-logout:hover { background: rgba(255,255,255,.1); color: #fff; } /* ── Container ── */ .container { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; } /* ── Card ── */ .card { background: var(--card-bg); border-radius: 14px; box-shadow: 0 2px 16px rgba(0,0,0,.07); overflow: hidden; margin-bottom: 20px; } .card-header { padding: 18px 24px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-header h2 { font-size: 15px; font-weight: 700; color: var(--primary); } .card-header p { font-size: 13px; color: var(--muted); margin-top: 2px; } .card-body { padding: 20px 24px; } /* ── Spinner / Loading ── */ .loading { text-align: center; padding: 40px 24px; color: var(--muted); } .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 12px; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Login form ── */ .login-wrap { max-width: 440px; margin: 48px auto 0; } .login-icon { font-size: 40px; text-align: center; margin-bottom: 20px; } .login-title { font-size: 22px; font-weight: 800; color: var(--primary); text-align: center; margin-bottom: 6px; } .login-sub { font-size: 14px; color: var(--muted); text-align: center; margin-bottom: 28px; } .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; } .form-input { width: 100%; border: 1.5px solid var(--border); border-radius: 9px; padding: 13px 16px; font-size: 15px; outline: none; color: var(--text); transition: border-color .2s; } .form-input:focus { border-color: var(--accent); } .form-hint { font-size: 12px; color: var(--muted); margin-top: 5px; } .form-select { width: 100%; border: 1.5px solid var(--border); border-radius: 9px; padding: 13px 16px; font-size: 15px; background: #fff; outline: none; color: var(--text); transition: border-color .2s; } .form-select:focus { border-color: var(--accent); } .form-textarea { width: 100%; border: 1.5px solid var(--border); border-radius: 9px; padding: 13px 16px; font-size: 14px; outline: none; color: var(--text); resize: vertical; min-height: 90px; transition: border-color .2s; font-family: inherit; } .form-textarea:focus { border-color: var(--accent); } /* ── Buttons ── */ .btn-primary { display: block; width: 100%; padding: 15px; background: var(--accent); color: #fff; border: none; border-radius: 9px; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: .3px; transition: background .2s; text-align: center; text-decoration: none; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { background: #ccc; cursor: not-allowed; } .btn-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: transparent; color: var(--muted); border: 1.5px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; } .btn-secondary:hover { border-color: var(--primary); color: var(--primary); } .btn-accent { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s; text-decoration: none; } .btn-accent:hover { background: var(--accent-hover); } .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 20px; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: background .2s; text-decoration: none; } .back-link:hover { background: rgba(0,0,0,.04); } /* ── Quick Actions ── */ .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } .qa-btn { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: all .2s; text-decoration: none; color: var(--text); } .qa-btn:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(0,0,0,.06); } .qa-icon { font-size: 24px; } .qa-label { font-size: 13px; font-weight: 700; } .qa-sub { font-size: 11px; color: var(--muted); margin-top: 1px; } /* ── Proposal / Invoice items ── */ .item-list { } .item-card { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: background .15s; } .item-card:last-child { border-bottom: none; } .item-card:hover { background: #fafafa; } .item-left { flex: 1; min-width: 0; } .item-name { font-size: 14px; font-weight: 600; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .item-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .item-amount { font-size: 15px; font-weight: 700; color: var(--primary); } /* ── Status badges ── */ .badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; } .badge-open { background: #fef3c7; color: #92400e; } .badge-partial { background: #dbeafe; color: #1e40af; } .badge-paid { background: #dcfce7; color: #166534; } .badge-draft { background: #f3f4f6; color: #6b7280; } .badge-sent { background: #eff6ff; color: #1d4ed8; } .badge-approved { background: #dcfce7; color: #166534; } .badge-new { background: #fef3c7; color: #92400e; } /* ── Empty / Error ── */ .empty-state { text-align: center; padding: 36px 24px; } .empty-state .es-icon { font-size: 36px; margin-bottom: 10px; } .empty-state h3 { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 6px; } .empty-state p { font-size: 13px; color: var(--muted); line-height: 1.6; } /* ── Alert banner ── */ .alert { padding: 14px 20px; border-radius: 10px; font-size: 14px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 10px; } .alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; } .alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; } .alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; } /* ── Proposal iframe ── */ .proposal-frame { width: 100%; border: none; height: 600px; display: block; } /* ── Drag-drop zone ── */ .drop-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all .2s; background: #fafafa; } .drop-zone.drag-over { border-color: var(--accent); background: #fff8f7; } .drop-zone .dz-icon { font-size: 36px; margin-bottom: 10px; } .drop-zone .dz-text { font-size: 14px; color: var(--muted); } .drop-zone .dz-sub { font-size: 12px; color: #9ca3af; margin-top: 4px; } .dz-filename { font-size: 13px; font-weight: 600; color: var(--primary); margin-top: 10px; } /* ── Accepted stamp ── */ .accepted-stamp { display: inline-flex; align-items: center; gap: 6px; background: #dcfce7; color: #166534; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 8px; border: 1px solid #bbf7d0; } /* ── Footer ── */ .site-footer { background: #f8f9fb; border-top: 1px solid var(--border); padding: 14px 24px; text-align: center; font-size: 11px; color: var(--muted); line-height: 1.8; } /* ── Secure note ── */ .secure-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); background: #f8f9fb; border-radius: 8px; padding: 10px 14px; margin-top: 20px; } /* ── Responsive ── */ @media (max-width: 540px) { .quick-actions { grid-template-columns: 1fr; } .item-right { flex-direction: column; align-items: flex-end; gap: 6px; } .container { padding: 16px 12px 48px; } }