| @import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Nunito+Sans:wght@400;600;700&family=JetBrains+Mono:wght@500;700&display=swap"); |
|
|
| :root { |
| color-scheme: light; |
| font-family: "Nunito Sans", sans-serif; |
| --bg-0: #f4f6f8; |
| --bg-1: #edf2f6; |
| --bg-2: #ffffff; |
| --ink-0: #161c24; |
| --ink-1: #2f3b4a; |
| --ink-2: #5a6b7c; |
| --accent: #ff8c00; |
| --accent-strong: #e67900; |
| --accent-soft: #fff2df; |
| --support: #2f80cf; |
| --support-soft: #edf5ff; |
| --ok: #1e8e49; |
| --danger: #b42318; |
| --border: #d4dde6; |
| --border-soft: #e6edf3; |
| --shadow-sm: 0 3px 10px rgba(20, 28, 36, 0.06); |
| --shadow-md: 0 10px 26px rgba(20, 28, 36, 0.1); |
| --radius-lg: 16px; |
| --radius-md: 12px; |
| --radius-sm: 9px; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html, |
| body, |
| #root { |
| min-height: 100%; |
| } |
|
|
| body { |
| margin: 0; |
| min-width: 320px; |
| color: var(--ink-0); |
| background: |
| radial-gradient(1000px 430px at -8% -12%, #ffe8cf 0%, transparent 62%), |
| radial-gradient(860px 360px at 105% 10%, #dbeaf6 0%, transparent 60%), |
| linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 35%, #f8fafc 100%); |
| } |
|
|
| button, |
| input, |
| select, |
| textarea { |
| font: inherit; |
| } |
|
|
| .page { |
| width: min(1500px, 95vw); |
| margin: 18px auto 40px; |
| padding: 0; |
| } |
|
|
| .hero { |
| display: grid; |
| grid-template-columns: 1.65fr 0.95fr; |
| gap: 24px; |
| align-items: stretch; |
| margin-bottom: 24px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| background: linear-gradient(130deg, #fffdf9, #fff 55%, #f6fbff); |
| box-shadow: var(--shadow-md); |
| padding: 18px 22px; |
| } |
|
|
| .hero.hero-logo-only { |
| display: grid; |
| grid-template-columns: minmax(260px, 360px) 1fr; |
| justify-content: flex-start; |
| align-items: center; |
| gap: 22px; |
| padding: 8px 18px; |
| } |
|
|
| .hero-logo { |
| width: min(340px, 64vw); |
| height: auto; |
| object-fit: contain; |
| } |
|
|
| .hero-search { |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .hero-search-head { |
| display: grid; |
| gap: 4px; |
| } |
|
|
| .hero-search-head h2 { |
| margin: 0; |
| color: #2b4258; |
| font-family: "Sora", sans-serif; |
| font-size: 1rem; |
| } |
|
|
| .hero-search-help { |
| margin: -2px 2px 0; |
| color: #5f758a; |
| font-size: 0.82rem; |
| line-height: 1.35; |
| } |
|
|
| .eyebrow { |
| margin: 0 0 12px; |
| color: #7d4b12; |
| font-size: 12px; |
| font-weight: 800; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| } |
|
|
| .hero h1 { |
| margin: 0 0 14px; |
| color: var(--ink-0); |
| font-family: "Sora", sans-serif; |
| font-size: clamp(2rem, 3vw, 3.55rem); |
| line-height: 1.02; |
| letter-spacing: 0.01em; |
| } |
|
|
| .lead { |
| max-width: 72ch; |
| margin: 0; |
| color: var(--ink-2); |
| font-size: 1.02rem; |
| } |
|
|
| .hero-notes { |
| display: flex; |
| gap: 10px; |
| flex-wrap: wrap; |
| margin-top: 18px; |
| } |
|
|
| .hero-chip { |
| display: inline-flex; |
| align-items: center; |
| min-height: 32px; |
| padding: 6px 11px; |
| border: 1px solid #f2cb8f; |
| border-radius: 999px; |
| background: #fff6e8; |
| color: #8a5a15; |
| font-size: 0.78rem; |
| font-weight: 700; |
| } |
|
|
| .status-card, |
| .panel { |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| background: rgba(255, 255, 255, 0.92); |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .status-card { |
| display: grid; |
| gap: 8px; |
| align-content: center; |
| padding: 24px; |
| background: linear-gradient(180deg, #fff, #f8fbff); |
| } |
|
|
| .status-card span { |
| color: var(--ink-2); |
| font-size: 0.78rem; |
| font-weight: 800; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .status-card strong { |
| color: var(--ink-1); |
| font-family: "Sora", sans-serif; |
| font-size: 1.2rem; |
| } |
|
|
| .grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 24px; |
| } |
|
|
| .sequence { |
| display: grid; |
| gap: 24px; |
| } |
|
|
| .sequence-form { |
| display: grid; |
| gap: 24px; |
| } |
|
|
| .panel { |
| padding: 24px; |
| } |
|
|
| .panel h2 { |
| margin: 0 0 10px; |
| color: #2b4258; |
| font-family: "Sora", sans-serif; |
| font-size: 1.05rem; |
| } |
|
|
| .sequence-panel { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .sequence-panel::before { |
| content: ""; |
| position: absolute; |
| inset: 0 auto 0 0; |
| display: block; |
| width: 4px; |
| background: linear-gradient(180deg, var(--support), var(--accent)); |
| } |
|
|
| .sequence-panel > * { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .sequence-head { |
| position: relative; |
| z-index: 1; |
| display: grid; |
| grid-template-columns: 58px 1fr auto; |
| gap: 14px; |
| align-items: start; |
| margin-bottom: 18px; |
| } |
|
|
| .sequence-head h2 { |
| margin: 2px 0 0; |
| } |
|
|
| .sequence-index { |
| display: grid; |
| place-items: center; |
| width: 42px; |
| height: 42px; |
| border-radius: 999px; |
| border: 1px solid #f2cb8f; |
| background: linear-gradient(180deg, #ffb14d, #e67900); |
| color: #fff; |
| font-family: "Sora", sans-serif; |
| font-size: 0.9rem; |
| font-weight: 800; |
| box-shadow: 0 10px 22px rgba(230, 121, 0, 0.22); |
| } |
|
|
| .sequence-kicker { |
| margin: 0; |
| color: #7d4b12; |
| font-size: 0.76rem; |
| font-weight: 800; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .section-body { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .full-width, |
| .full { |
| grid-column: 1 / -1; |
| } |
|
|
| .form-grid { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 16px; |
| } |
|
|
| .cadastro-grid { |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| } |
|
|
| .text-half { |
| grid-column: span 1; |
| } |
|
|
| .offer-text-pair { |
| grid-column: span 1; |
| } |
|
|
| .offer-grid { |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| } |
|
|
| .offer-wide { |
| grid-column: span 2; |
| } |
|
|
| .search-bar { |
| display: grid; |
| grid-template-columns: 280px 1fr 140px; |
| gap: 12px; |
| align-items: center; |
| padding: 12px; |
| border: 1px solid #dbe6f1; |
| border-radius: 14px; |
| background: linear-gradient(180deg, #fff, #f9fbfe); |
| } |
|
|
| .result-list { |
| display: grid; |
| gap: 12px; |
| margin-top: 18px; |
| max-height: 360px; |
| overflow: auto; |
| padding-right: 2px; |
| } |
|
|
| .result-card { |
| border: 1px solid #d2deea; |
| border-radius: 10px; |
| background: linear-gradient(180deg, #f7fbff, #edf3fa); |
| color: #32475d; |
| text-align: left; |
| box-shadow: none; |
| } |
|
|
| .result-card strong { |
| font-family: "Sora", sans-serif; |
| font-size: 0.92rem; |
| } |
|
|
| .result-card span { |
| display: block; |
| margin-top: 6px; |
| color: #5f758a; |
| font-weight: 400; |
| } |
|
|
| .result-line { |
| font-size: 0.88rem; |
| } |
|
|
| .selected-cadastros { |
| margin-bottom: 18px; |
| padding: 14px; |
| border: 1px solid #dbe6f1; |
| border-radius: 10px; |
| background: #f8fbfe; |
| } |
|
|
| .selected-cadastros-head, |
| .selected-cadastro-item { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| } |
|
|
| .selected-cadastros-head { |
| margin-bottom: 10px; |
| color: #39536d; |
| } |
|
|
| .selected-cadastros-head span { |
| color: #66788a; |
| font-size: 0.86rem; |
| font-weight: 700; |
| } |
|
|
| .selected-cadastro-list { |
| display: grid; |
| gap: 10px; |
| } |
|
|
| .selected-cadastro-item { |
| padding: 10px 12px; |
| border: 1px solid #d6e2ec; |
| border-radius: 8px; |
| background: #fff; |
| } |
|
|
| .selected-cadastro-item div { |
| display: grid; |
| gap: 4px; |
| min-width: 0; |
| } |
|
|
| .selected-cadastro-item span { |
| color: #66788a; |
| font-size: 0.86rem; |
| overflow-wrap: anywhere; |
| } |
|
|
| .selected-cadastro-item button { |
| max-width: 120px; |
| flex: 0 0 120px; |
| } |
|
|
| label { |
| display: grid; |
| gap: 8px; |
| color: #39536d; |
| font-size: 0.9rem; |
| font-weight: 700; |
| } |
|
|
| input, |
| select, |
| textarea, |
| button { |
| width: 100%; |
| border-radius: 10px; |
| border: 1px solid #d6e2ec; |
| padding: 12px 14px; |
| background: #fff; |
| } |
|
|
| input, |
| select, |
| textarea { |
| color: #314b64; |
| } |
|
|
| input:focus, |
| select:focus, |
| textarea:focus { |
| outline: 2px solid rgba(255, 140, 0, 0.2); |
| border-color: #ffba66; |
| } |
|
|
| textarea { |
| resize: vertical; |
| min-height: 106px; |
| } |
|
|
| button { |
| cursor: pointer; |
| border: 1px solid var(--accent-strong); |
| background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); |
| color: #fff; |
| font-weight: 700; |
| box-shadow: |
| 0 8px 18px rgba(230, 121, 0, 0.22), |
| inset 0 0 0 1px rgba(255, 255, 255, 0.15); |
| transition: |
| transform 0.18s ease, |
| box-shadow 0.18s ease, |
| border-color 0.18s ease; |
| } |
|
|
| button:hover { |
| transform: translateY(-1px); |
| box-shadow: |
| 0 10px 22px rgba(230, 121, 0, 0.28), |
| inset 0 0 0 1px rgba(255, 255, 255, 0.18); |
| } |
|
|
| button.secondary { |
| width: auto; |
| border-color: #c8d8e8; |
| background: linear-gradient(180deg, #f7fbff, #edf3fa); |
| color: #355370; |
| box-shadow: |
| 0 5px 14px rgba(53, 83, 114, 0.1), |
| inset 0 0 0 1px rgba(255, 255, 255, 0.22); |
| } |
|
|
| .section-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| } |
|
|
| .search-help { |
| margin: 12px 2px 0; |
| color: #5f758a; |
| font-size: 0.83rem; |
| } |
|
|
| .collapse-btn { |
| min-width: 110px; |
| align-self: center; |
| justify-self: end; |
| } |
|
|
| .form-actions { |
| position: relative; |
| z-index: 1; |
| display: flex; |
| justify-content: flex-end; |
| } |
|
|
| .form-actions-outside { |
| margin-top: -6px; |
| } |
|
|
| .actions { |
| display: flex; |
| gap: 12px; |
| flex-wrap: wrap; |
| } |
|
|
| .muted { |
| color: var(--ink-2); |
| } |
|
|
| .success { |
| color: var(--ok); |
| font-weight: 700; |
| padding: 8px 10px; |
| border-radius: 10px; |
| background: #eefaf1; |
| border: 1px solid #cbead5; |
| } |
|
|
| .error { |
| color: var(--danger); |
| font-weight: 700; |
| padding: 8px 10px; |
| border-radius: 10px; |
| background: #fef0ef; |
| border: 1px solid #f7c0bc; |
| } |
|
|
| .empty-state, |
| .empty-cell { |
| color: var(--ink-2); |
| text-align: center; |
| padding: 24px; |
| border: 1px dashed var(--border); |
| border-radius: 10px; |
| background: linear-gradient(180deg, #fbfdff, #f5f9fd); |
| } |
|
|
| .form-banner { |
| margin-bottom: 16px; |
| padding: 10px 12px; |
| border: 1px solid #dbe6f0; |
| border-radius: 12px; |
| background: linear-gradient(180deg, #fff, #f8fbff); |
| color: #4d6379; |
| font-size: 0.88rem; |
| line-height: 1.45; |
| } |
|
|
| .criteria-panel { |
| padding: 14px; |
| border: 1px solid #dbe6f0; |
| border-radius: 14px; |
| background: linear-gradient(180deg, #fcfdff, #f5f9fd); |
| } |
|
|
| .classification-layout { |
| display: grid; |
| grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.45fr); |
| gap: 18px; |
| align-items: start; |
| } |
|
|
| .classification-controls { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .classification-row { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) 120px; |
| gap: 10px; |
| align-items: end; |
| } |
|
|
| .classify-btn { |
| min-height: 46px; |
| } |
|
|
| .criteria-head { |
| display: grid; |
| gap: 4px; |
| margin-bottom: 12px; |
| } |
|
|
| .criteria-head strong { |
| color: #2f4a63; |
| font-family: "Sora", sans-serif; |
| font-size: 0.95rem; |
| } |
|
|
| .criteria-head span { |
| color: #5f758a; |
| font-size: 0.84rem; |
| } |
|
|
| .criteria-status { |
| display: inline-flex; |
| width: fit-content; |
| padding: 4px 8px; |
| border-radius: 999px; |
| background: #eef5ff; |
| color: #45627f !important; |
| font-size: 0.74rem !important; |
| font-weight: 800; |
| text-transform: uppercase; |
| letter-spacing: 0.04em; |
| } |
|
|
| .criteria-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 12px; |
| } |
|
|
| .criteria-card { |
| border: 1px solid #d2deea; |
| border-radius: 12px; |
| background: linear-gradient(180deg, #f8fbff, #edf3fa); |
| color: #32475d; |
| text-align: left; |
| box-shadow: none; |
| } |
|
|
| .criteria-card strong { |
| display: flex; |
| gap: 12px; |
| align-items: baseline; |
| font-family: "Sora", sans-serif; |
| font-size: 0.92rem; |
| } |
|
|
| .criteria-card strong span { |
| color: #6a8096; |
| font-family: "Nunito Sans", sans-serif; |
| font-size: 0.78rem; |
| font-weight: 700; |
| } |
|
|
| .criteria-card ul { |
| margin: 10px 0 0; |
| padding-left: 18px; |
| color: #52687d; |
| } |
|
|
| .criteria-card li + li { |
| margin-top: 6px; |
| } |
|
|
| .criteria-card.is-selected { |
| border-color: #ffb14d; |
| background: linear-gradient(180deg, #fff6e8, #ffefda); |
| box-shadow: 0 8px 20px rgba(230, 121, 0, 0.14); |
| } |
|
|
| .table-wrap { |
| overflow: auto; |
| margin-top: 16px; |
| border: 1px solid var(--border-soft); |
| border-radius: 16px; |
| background: #fff; |
| } |
|
|
| table { |
| width: 100%; |
| min-width: 720px; |
| border-collapse: collapse; |
| } |
|
|
| th, |
| td { |
| padding: 12px 14px; |
| border-bottom: 1px solid #e1e9f1; |
| text-align: left; |
| } |
|
|
| th { |
| background: #f7fbff; |
| color: #48627a; |
| font-family: "Sora", sans-serif; |
| font-size: 0.78rem; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| } |
|
|
| td { |
| color: #30475e; |
| vertical-align: top; |
| } |
|
|
| .action-cell { |
| min-width: 170px; |
| } |
|
|
| .delete-confirm { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| } |
|
|
| .danger-soft { |
| border-color: #e3adb8 !important; |
| background: linear-gradient(180deg, #fff4f6, #fee9ed) !important; |
| color: #a63446 !important; |
| box-shadow: |
| 0 5px 14px rgba(178, 47, 64, 0.1), |
| inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important; |
| } |
|
|
| td:nth-child(1), |
| td:nth-child(3), |
| td:nth-child(4) { |
| font-family: "JetBrains Mono", monospace; |
| font-size: 0.82rem; |
| } |
|
|
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: #c7d4e2; |
| border-radius: 999px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: #eef3f8; |
| } |
|
|
| @media (max-width: 900px) { |
| .page { |
| width: 97vw; |
| margin-top: 10px; |
| } |
|
|
| .hero, |
| .grid, |
| .form-grid, |
| .search-bar { |
| grid-template-columns: 1fr; |
| } |
|
|
| .hero { |
| padding: 10px 14px; |
| } |
|
|
| .hero.hero-logo-only { |
| grid-template-columns: 1fr; |
| } |
|
|
| .section-head { |
| align-items: flex-start; |
| flex-wrap: wrap; |
| } |
|
|
| .sequence-head { |
| grid-template-columns: 42px 1fr; |
| } |
|
|
| .form-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .offer-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .offer-wide { |
| grid-column: span 1; |
| } |
|
|
| .classification-layout, |
| .classification-row, |
| .criteria-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .classify-btn { |
| width: 100%; |
| } |
| } |
|
|
