style(web): simplify territorial profile layout

2026-09-11 10:34:42 -03:00
parent 143db53552
commit a9e300d6a4
1 changed files with 106 additions and 0 deletions
@@ -0,0 +1,106 @@
+.territory-page { display: grid; gap: 18px; }
+.territory-breadcrumb { margin-bottom: 0; }
+
+.territory-hero {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 4px 0 2px;
+}
+.territory-hero h1 { margin: 6px 0 5px; font-size: clamp(31px, 3.5vw, 44px); line-height: 1.02; letter-spacing: -.045em; }
+.territory-hero p { margin: 0; color: var(--muted); font-size: 13px; }
+.territory-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+
+.territory-purpose-note {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 11px 13px;
+  border: 1px solid #dbe4f2;
+  border-radius: 10px;
+  color: #536078;
+  background: #f7f9fd;
+  font-size: 11px;
+  line-height: 1.45;
+}
+.territory-purpose-note .icon { color: var(--blue); flex: 0 0 auto; }
+
+.territory-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow-x: auto;
+  padding: 0 0 1px;
+  border-bottom: 1px solid var(--line);
+}
+.territory-tabs button {
+  position: relative;
+  min-height: 43px;
+  padding: 9px 13px;
+  border: 0;
+  color: #566178;
+  background: transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 700;
+}
+.territory-tabs button:hover { color: var(--ink); }
+.territory-tabs button.active { color: var(--blue); }
+.territory-tabs button.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--blue); }
+
+.territory-stack { display: grid; gap: 15px; }
+.territory-card { padding: 22px; }
+.territory-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
+.territory-card-heading h2 { margin: 4px 0; }
+.territory-card-heading p { max-width: 680px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
+.territory-card-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
+
+.territory-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--line); }
+.territory-data-grid > div { min-height: 74px; padding: 15px 16px; background: #fff; }
+.territory-data-grid > div.wide { grid-column: 1 / -1; }
+.territory-data-grid small, .territory-data-grid strong { display: block; }
+.territory-data-grid small { margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
+.territory-data-grid strong { font-size: 13px; font-weight: 750; line-height: 1.45; }
+.territory-edit-form { display: grid; gap: 15px; }
+
+.territory-child-list, .territory-company-list { display: grid; gap: 8px; }
+.territory-child-row, .territory-company-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 60px;
+  padding: 11px 13px;
+  border: 1px solid #e2e7ef;
+  border-radius: 10px;
+  color: inherit;
+  background: #fbfcfd;
+  text-decoration: none;
+}
+.territory-child-row:hover, .territory-company-row:hover { border-color: #bfd0ee; background: #f7faff; }
+.territory-child-row > span:nth-child(2), .territory-company-row > span:first-child { flex: 1; min-width: 0; }
+.territory-child-row strong, .territory-child-row small, .territory-company-row strong, .territory-company-row small { display: block; }
+.territory-child-row strong, .territory-company-row strong { font-size: 12px; }
+.territory-child-row small, .territory-company-row small { margin-top: 4px; color: var(--muted); font-size: 10px; }
+.territory-child-row > .icon:last-child, .territory-company-row > .icon:last-child { color: #8b96aa; }
+
+.territory-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.territory-metrics > div { display: grid; gap: 6px; padding: 16px; border: 1px solid #e2e7ef; border-radius: 11px; background: #f8faff; }
+.territory-metrics small { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
+.territory-metrics strong { color: #173b7a; font-size: 25px; line-height: 1; letter-spacing: -.04em; }
+
+.territory-advanced-link { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 15px; border: 1px dashed #ccd4e2; border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.55); font-size: 11px; }
+.territory-advanced-link a { color: var(--blue); font-weight: 750; text-decoration: none; }
+
+@media (max-width: 760px) {
+  .territory-hero { align-items: flex-start; flex-direction: column; }
+  .territory-hero-actions { width: 100%; }
+  .territory-card { padding: 18px; }
+  .territory-card-heading { align-items: flex-start; flex-direction: column; }
+  .territory-data-grid, .territory-metrics { grid-template-columns: 1fr; }
+  .territory-data-grid > div.wide { grid-column: auto; }
+  .territory-child-row { align-items: flex-start; flex-wrap: wrap; }
+  .territory-child-row .status-badge { margin-left: 44px; }
+  .territory-advanced-link { align-items: flex-start; flex-direction: column; }
+}