/* GeoIntel Atlas premium command-center layer. This is intentionally loaded last: it unifies the preserved workflows without changing their data or interaction contracts. */ :root { --atlas-950: #082a26; --atlas-900: #0a3731; --atlas-800: #0d4a42; --atlas-700: #0d665b; --atlas-600: #0b7f71; --atlas-500: #159889; --atlas-100: #dff3ef; --atlas-50: #eef8f6; --ink-950: #10211d; --ink-700: #334c46; --ink-500: #647b75; --canvas: #f2f6f4; --paper: #ffffff; --paper-muted: #f8faf9; --atlas-line: #d9e4e0; --atlas-line-strong: #c2d2cd; --atlas-shadow-xs: 0 1px 2px rgba(8, 42, 38, 0.05); --atlas-shadow-sm: 0 8px 24px rgba(8, 42, 38, 0.07); --atlas-shadow-md: 0 18px 44px rgba(8, 42, 38, 0.1); --atlas-shadow-floating: 0 24px 70px rgba(8, 42, 38, 0.17); --atlas-radius-sm: 0.625rem; --atlas-radius-md: 0.875rem; --atlas-radius-lg: 1.125rem; --atlas-radius-xl: 1.5rem; --bg: var(--canvas); --panel: var(--paper); --panel-soft: var(--paper-muted); --surface-raised: var(--paper); --surface-sunken: #edf3f0; --text: var(--ink-950); --muted: var(--ink-500); --line: var(--atlas-line); --line-strong: var(--atlas-line-strong); --accent: var(--atlas-600); --accent-strong: var(--atlas-800); --accent-soft: var(--atlas-50); --shadow: var(--atlas-shadow-md); --shadow-soft: var(--atlas-shadow-sm); } body { color: var(--ink-950); background: var(--canvas); } .workbench-shell { font-family: "Public Sans", "Segoe UI", sans-serif; background: radial-gradient( circle at 78% -12%, rgba(21, 152, 137, 0.09), transparent 28rem ), linear-gradient(rgba(13, 102, 91, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 102, 91, 0.022) 1px, transparent 1px), var(--canvas); background-size: auto, 32px 32px, 32px 32px, auto; } .workbench-layout { grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100dvh; } /* Brand rail */ .workbench-sidebar { display: flex; flex-direction: column; border: 0; padding: 1rem 0.85rem 1.25rem; color: rgba(255, 255, 255, 0.76); background: radial-gradient( circle at 20% 4%, rgba(85, 205, 187, 0.16), transparent 15rem ), linear-gradient(180deg, var(--atlas-900), var(--atlas-950)); box-shadow: 12px 0 36px rgba(8, 42, 38, 0.12); } .sidebar-brand { min-height: 4.75rem; gap: 0.75rem; margin: 0 0 1.15rem; border-bottom: 1px solid rgba(255, 255, 255, 0.11); padding: 0.35rem 0.45rem 1.15rem; } .sidebar-brand .brand-mark { width: 2.65rem; height: 2.65rem; border: 1px solid rgba(173, 238, 227, 0.44); border-radius: 0.8rem; object-fit: cover; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(0, 0, 0, 0.16); } .workbench-sidebar > nav { flex: 1 1 auto; } .itworx-signature { display: grid; gap: 0.38rem; } .itworx-signature > span { color: rgba(223, 250, 245, 0.48); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .itworx-signature img { display: block; width: 7.4rem; height: auto; } .workbench-sidebar > .itworx-signature { margin: 1.25rem 0.45rem 0; border-top: 1px solid rgba(255, 255, 255, 0.09); padding-top: 1rem; opacity: 0.88; } .sidebar-brand-copy { display: grid; gap: 0.12rem; } .sidebar-brand-copy strong { color: #ffffff; font-family: "Manrope", sans-serif; font-size: 1.02rem; letter-spacing: -0.025em; } .sidebar-brand-copy small { color: rgba(223, 250, 245, 0.58); font-size: 0.72rem; } .nav-group { margin-top: 1.15rem; } .workbench-shell .nav-section-label { margin: 0 0 0.42rem; padding: 0 0.7rem; color: rgba(220, 246, 240, 0.46); font-size: 0.68rem; letter-spacing: 0.08em; } .workbench-sidebar .nav-item { position: relative; min-height: 3rem; gap: 0.75rem; margin: 0.2rem 0; border: 1px solid transparent; border-radius: 0.75rem; padding: 0.68rem 0.72rem; color: rgba(239, 252, 249, 0.7); background: transparent; font-size: 0.82rem; font-weight: 650; box-shadow: none; } .workbench-sidebar .nav-item:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.1); color: #ffffff; background: rgba(255, 255, 255, 0.075); box-shadow: none; } .workbench-sidebar .nav-item-active, .workbench-sidebar .nav-item-active:hover:not(:disabled) { border-color: rgba(134, 224, 208, 0.22); color: #ffffff; background: linear-gradient( 135deg, rgba(39, 169, 151, 0.3), rgba(255, 255, 255, 0.09) ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 22px rgba(0, 0, 0, 0.14); } .workbench-sidebar .nav-item-active::before { position: absolute; top: 0.68rem; bottom: 0.68rem; left: -0.86rem; width: 0.22rem; border-radius: 0 999px 999px 0; background: #69d5c2; box-shadow: 0 0 14px rgba(105, 213, 194, 0.72); content: ""; } .workbench-sidebar .nav-item-icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: rgba(211, 244, 237, 0.72); } .workbench-sidebar .nav-item-active .nav-item-icon { color: #9be7da; } /* Context command bar */ .workbench-topbar { min-height: 5rem; gap: 1rem; border-bottom: 1px solid rgba(194, 210, 205, 0.72); padding: 0.72rem 1.35rem; background: rgba(250, 252, 251, 0.9); box-shadow: 0 8px 24px rgba(8, 42, 38, 0.055); backdrop-filter: blur(18px) saturate(135%); } .context-bar { gap: 0.48rem; } .context-bar > div { position: relative; min-width: 0; border: 1px solid transparent; border-radius: 0.72rem; padding: 0.48rem 0.72rem 0.52rem; background: rgba(238, 248, 246, 0.62); transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease; } .context-bar > div:first-child { border-color: #c7ded8; background: #eaf6f3; } .workbench-shell .context-bar span { margin-bottom: 0.16rem; color: #6d827c; font-size: 0.66rem; letter-spacing: 0.055em; } .context-bar strong { color: var(--ink-950); font-size: 0.78rem; font-weight: 650; } .context-health { min-height: 2.45rem; border: 1px solid #cfe0dc; border-radius: 999px; padding: 0.45rem 0.78rem; color: var(--atlas-800); background: #f4faf8; font-size: 0.75rem; } .context-health > span { width: 0.5rem; height: 0.5rem; background: #26a68f; box-shadow: 0 0 0 4px rgba(38, 166, 143, 0.12); } .context-account { min-height: 2.55rem; border: 1px solid var(--atlas-line); border-radius: 999px; padding: 0.22rem 0.28rem 0.22rem 0.68rem; background: var(--paper); box-shadow: var(--atlas-shadow-xs); } .context-account button { border-radius: 999px; } /* Calm, singular operational notice */ .workspace-notice { position: fixed; top: 5.75rem; right: 1.25rem; z-index: 80; display: grid; grid-template-columns: auto minmax(0, 1fr); width: min(26rem, calc(100vw - 2rem)); gap: 0.7rem; align-items: start; border: 1px solid #e6c9b2; border-radius: 0.9rem; padding: 0.82rem 0.95rem; color: #6f3b1c; background: rgba(255, 250, 244, 0.96); box-shadow: var(--atlas-shadow-floating); backdrop-filter: blur(18px); } .workspace-notice > svg { width: 1.08rem; margin-top: 0.08rem; color: #b26530; } .workspace-notice > div { display: grid; gap: 0.18rem; } .workspace-notice strong { font-size: 0.78rem; } .workspace-notice span { color: #865337; font-size: 0.74rem; line-height: 1.45; } /* Page composition */ .workbench-main { padding: 1.6rem 1.75rem 2.75rem; } .workspace-heading { min-height: 5.6rem; margin: -0.15rem 0 1.2rem; border: 0; padding: 0.5rem 0 1rem; } .workspace-heading-copy { gap: 0.12rem; } .workbench-shell .workspace-heading .eyebrow { color: var(--atlas-700); font-size: 0.7rem; letter-spacing: 0.075em; } .workspace-heading h2 { color: var(--ink-950); font-family: "Manrope", sans-serif; font-size: clamp(1.65rem, 2vw, 2.25rem); font-weight: 700; letter-spacing: -0.045em; } .workspace-heading-actions > p { max-width: 31rem; color: var(--ink-500); font-size: 0.84rem; line-height: 1.5; } .inspector-toggle, .secondary-action, .primary-action, .quick-action-button { min-height: 2.65rem; border-radius: 0.68rem; padding-inline: 1rem; font-size: 0.78rem; font-weight: 700; } .workbench-shell .primary-action { border-color: var(--atlas-700); background: linear-gradient(135deg, var(--atlas-700), var(--atlas-600)); box-shadow: 0 8px 20px rgba(13, 102, 91, 0.16); } .workbench-shell .primary-action:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(13, 102, 91, 0.22); } /* Shared premium surfaces */ .workspace-panel, .panel, .workbench-status-strip, .source-freshness-panel, .workspace-grid-data > section, .source-catalog-panel, .secondary-analysis-disclosure, .status-details-disclosure, .export-history-disclosure { border: 1px solid rgba(194, 210, 205, 0.78); border-radius: var(--atlas-radius-lg); background: rgba(255, 255, 255, 0.94); box-shadow: var(--atlas-shadow-sm); } .panel-title-row h2, .workspace-panel h2, .source-catalog-panel h2 { font-family: "Manrope", sans-serif; letter-spacing: -0.025em; } .workbench-shell .eyebrow, .workbench-shell .section-kicker { color: var(--atlas-700); font-size: 0.69rem; letter-spacing: 0.06em; } .muted, .panel-title-row .muted, .result-state p, .empty-state p { color: var(--ink-500); font-size: 0.78rem; line-height: 1.5; } .status-badge, .count-pill, .status-pill { border-radius: 999px; padding: 0.28rem 0.52rem; font-size: 0.66rem; font-weight: 750; letter-spacing: 0.015em; } .result-state, .empty-state { min-height: 9rem; border: 1px dashed #bfd0cb; border-radius: var(--atlas-radius-md); padding: 1.2rem; background: radial-gradient( circle at 50% 0%, rgba(21, 152, 137, 0.08), transparent 8rem ), #fbfdfc; } .result-state-error { border-style: solid; border-color: #ebc7bf; background: #fff8f6; } /* Status becomes an executive health overview */ .workbench-status-strip { overflow: hidden; } .status-strip-header { min-height: 10rem; border-bottom: 1px solid var(--atlas-line); padding: 1.55rem 1.65rem; background: radial-gradient( circle at 92% 12%, rgba(91, 204, 184, 0.22), transparent 14rem ), linear-gradient(135deg, #f8fcfb, #eef7f4); } .status-strip-header h2 { margin-top: 0.15rem; color: var(--atlas-950); font-family: "Manrope", sans-serif; font-size: clamp(1.3rem, 1.55vw, 1.8rem); letter-spacing: -0.035em; } .status-next-action { max-width: 42rem; margin-top: 0.45rem; color: var(--ink-500); font-size: 0.84rem; } .status-readiness { position: relative; display: grid; width: 7.2rem; height: 7.2rem; place-items: center; border: 0; border-radius: 50%; padding: 0; background: var(--paper); box-shadow: 0 12px 30px rgba(8, 42, 38, 0.13); } .status-readiness-orbit { position: absolute; inset: 0.42rem; border-radius: inherit; background: conic-gradient(var(--atlas-500) 60deg, #dce8e4 0); mask: radial-gradient(circle, transparent 57%, #000 58%); } .status-readiness[data-ready="0"] .status-readiness-orbit { background: conic-gradient(var(--atlas-500) 0deg, #dce8e4 0); } .status-readiness[data-ready="1"] .status-readiness-orbit { background: conic-gradient(var(--atlas-500) 60deg, #dce8e4 0); } .status-readiness[data-ready="2"] .status-readiness-orbit { background: conic-gradient(var(--atlas-500) 120deg, #dce8e4 0); } .status-readiness[data-ready="3"] .status-readiness-orbit { background: conic-gradient(var(--atlas-500) 180deg, #dce8e4 0); } .status-readiness[data-ready="4"] .status-readiness-orbit { background: conic-gradient(var(--atlas-500) 240deg, #dce8e4 0); } .status-readiness[data-ready="5"] .status-readiness-orbit { background: conic-gradient(var(--atlas-500) 300deg, #dce8e4 0); } .status-readiness[data-ready="6"] .status-readiness-orbit { background: conic-gradient(var(--atlas-500) 360deg, #dce8e4 0); } .status-readiness-copy { position: relative; z-index: 1; display: grid; max-width: 5rem; gap: 0.08rem; text-align: center; } .status-readiness-copy strong { color: var(--atlas-900); font-family: "Manrope", sans-serif; font-size: 1.5rem; letter-spacing: -0.05em; } .status-readiness-copy > span { color: var(--ink-500); font-size: 0.62rem; line-height: 1.25; } .status-strip-grid { gap: 0.65rem; padding: 0.75rem; background: #f7faf9; } .status-tile, .status-tile:nth-child(n) { position: relative; min-height: 8rem; overflow: hidden; border: 1px solid var(--atlas-line); border-radius: 0.8rem; padding: 0.9rem; background: var(--paper); } .status-tile::after { position: absolute; right: -1.3rem; bottom: -1.7rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: rgba(13, 102, 91, 0.055); content: ""; } .status-tile-ready { border-color: #c6dfd8; box-shadow: inset 0 3px 0 #45a996; } .status-tile-warning { box-shadow: inset 0 3px 0 #d69b48; } .status-tile > strong { margin-top: 0.7rem; color: var(--ink-950); font-family: "Manrope", sans-serif; font-size: 0.88rem; } .status-tile p { margin-top: 0.28rem; color: var(--ink-500); font-size: 0.7rem; line-height: 1.45; } /* Source workspace: distinct choose / understand / act planes */ .workspace-grid-data { gap: 1rem; } .workbench-shell .workspace-grid-data > section { border-radius: var(--atlas-radius-lg); box-shadow: var(--atlas-shadow-sm); } .workbench-shell .workspace-grid-data > section.source-catalog-panel { border-color: #c5dcd6; background: linear-gradient( 135deg, rgba(238, 248, 246, 0.72), rgba(255, 255, 255, 0.95) 28% ), var(--paper); } .source-catalog-panel > .panel-title-row { padding: 1.25rem 1.35rem; } .source-domain-card, .source-catalog-domain, .entity-card, .dataset-card, .data-selection-summary { border-radius: var(--atlas-radius-md); } .workspace-grid-data .entity-card, .workspace-grid-data .dataset-card { border-color: var(--atlas-line); padding: 0.9rem; background: #fcfdfd; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .workspace-grid-data .entity-card:hover, .workspace-grid-data .dataset-card:hover { transform: translateY(-1px); border-color: #9fc8be; box-shadow: var(--atlas-shadow-sm); } /* Map command center */ .geo-explorer { overflow: hidden; border: 1px solid rgba(170, 195, 188, 0.84); border-radius: var(--atlas-radius-xl); background: var(--paper); box-shadow: var(--atlas-shadow-md); } .geo-explorer-header { min-height: 6rem; border-bottom: 1px solid var(--atlas-line); padding: 1rem 1.25rem; background: radial-gradient( circle at 90% 0%, rgba(84, 196, 176, 0.14), transparent 16rem ), linear-gradient(135deg, #fbfdfc, #f3f9f7); } .geo-explorer-header h2 { font-family: "Manrope", sans-serif; font-size: 1.45rem; letter-spacing: -0.04em; } .geo-explorer-header p:last-child { color: var(--ink-500); font-size: 0.8rem; } .geo-explorer-layout { gap: 0; background: #eef3f1; } .geo-theme-panel, .geo-insight-panel { border: 0; background: rgba(255, 255, 255, 0.97); } .geo-theme-panel { border-right: 1px solid var(--atlas-line); } .geo-insight-panel { border-left: 1px solid var(--atlas-line); } .geo-theme-panel > .geo-panel-heading, .geo-insight-panel > .geo-panel-heading { min-height: 5rem; padding: 1rem; background: #fbfdfc; } .geo-theme-list { gap: 0.45rem; padding: 0.7rem; } .geo-theme-option { min-height: 3.65rem; border: 1px solid transparent; border-radius: 0.75rem; padding: 0.65rem 0.72rem; background: transparent; } .geo-theme-option:hover:not(:disabled) { border-color: #c4d9d4; background: #f5faf8; } .geo-theme-option-active, .geo-theme-option-active:hover:not(:disabled) { border-color: #9bc9be; background: linear-gradient(135deg, #e7f5f1, #f4faf8); box-shadow: inset 3px 0 0 var(--atlas-600), 0 6px 16px rgba(8, 42, 38, 0.07); } .geo-theme-option strong { font-size: 0.82rem; } .geo-theme-option small, .geo-theme-option i { font-size: 0.69rem; } .geo-map-panel, .geo-map-stage, .map-frame-surface { background: #dce7e3; } .geo-explorer .map-container, .map-frame-surface .map-container { border-radius: 0; } .geo-explorer .maplibregl-ctrl-group, .map-frame-surface .maplibregl-ctrl-group { overflow: hidden; border: 1px solid rgba(171, 192, 186, 0.78); border-radius: 0.65rem; box-shadow: var(--atlas-shadow-md); } .geo-explorer .maplibregl-ctrl button, .map-frame-surface .maplibregl-ctrl button { width: 2.4rem; height: 2.4rem; } .geo-map-toolbar, .map-toolbar { border: 1px solid rgba(172, 194, 188, 0.82); border-radius: 0.78rem; background: rgba(255, 255, 255, 0.94); box-shadow: var(--atlas-shadow-floating); backdrop-filter: blur(16px); } .geo-explorer-footer { min-height: 3rem; border-top: 1px solid var(--atlas-line); background: #fbfdfc; color: var(--ink-500); font-size: 0.7rem; } /* Disclosures and forms */ .technical-run-list, .area-catalog-disclosure, .dataset-history-disclosure, .dataset-technical-details, .quality-advanced-disclosure, .provider-technical-details, .secondary-analysis-disclosure, .status-details-disclosure, .export-history-disclosure { border-color: var(--atlas-line); border-radius: var(--atlas-radius-md); background: rgba(255, 255, 255, 0.9); } .technical-run-list > summary, .area-catalog-disclosure > summary, .dataset-history-disclosure > summary, .dataset-technical-details > summary, .quality-advanced-disclosure > summary, .provider-technical-details > summary, .secondary-analysis-disclosure > summary, .status-details-disclosure > summary, .export-history-disclosure > summary { min-height: 3.15rem; padding: 0.75rem 0.95rem; color: var(--ink-700); font-size: 0.78rem; } .workbench-shell input, .workbench-shell select, .workbench-shell textarea { min-height: 2.65rem; border-color: var(--atlas-line-strong); border-radius: 0.62rem; background: #fcfdfd; } .workbench-shell input:focus, .workbench-shell select:focus, .workbench-shell textarea:focus { border-color: var(--atlas-600); background: #ffffff; box-shadow: 0 0 0 4px rgba(21, 152, 137, 0.12); } @media (min-width: 1800px) { .workbench-layout { grid-template-columns: 16rem minmax(0, 1fr); } .workbench-main { padding: 1.9rem 2.25rem 3rem; } .workspace-grid-data { grid-template-columns: minmax(18rem, 0.78fr) minmax(28rem, 1.5fr) minmax( 20rem, 0.9fr ); } } @media (max-width: 1360px) and (min-width: 921px) { .workbench-layout { grid-template-columns: 5.75rem minmax(0, 1fr); } .workbench-sidebar { padding-inline: 0.55rem; } .sidebar-brand { justify-content: center; padding-inline: 0; } .sidebar-brand-copy, .nav-section-label, .workbench-sidebar .nav-item > span { display: none; } .workbench-sidebar .nav-item { justify-content: center; padding-inline: 0; } .workbench-sidebar .nav-item-icon { width: 1.25rem; height: 1.25rem; } } @media (max-width: 920px) { .workbench-sidebar { color: var(--ink-700); background: rgba(255, 255, 255, 0.97); box-shadow: 0 8px 24px rgba(8, 42, 38, 0.08); } .workbench-sidebar .nav-item { color: var(--ink-500); background: transparent; } .workbench-sidebar .nav-item-active, .workbench-sidebar .nav-item-active:hover:not(:disabled) { border-color: #acd2c9; color: var(--atlas-800); background: var(--atlas-50); box-shadow: none; } .workbench-sidebar .nav-item-active::before { display: none; } .workbench-sidebar .nav-item-icon, .workbench-sidebar .nav-item-active .nav-item-icon { color: currentColor; } .workspace-notice { top: 0.75rem; right: 0.75rem; } .status-strip-header { min-height: auto; } .status-readiness { width: 5.8rem; height: 5.8rem; } } @media (max-width: 620px) { .workbench-main { padding: 1rem 0.8rem 1.6rem; } .workspace-heading h2 { font-size: 1.55rem; } .status-strip-header { padding: 1.15rem; } .status-readiness { width: 5.2rem; height: 5.2rem; } .status-readiness-copy strong { font-size: 1.15rem; } .geo-explorer { border-radius: var(--atlas-radius-lg); } .geo-explorer-header { padding: 0.9rem; } } @media (prefers-reduced-motion: reduce) { .workbench-shell *, .workbench-shell *::before, .workbench-shell *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } /* Senior UX audit: compact navigation, safe text containment and task-first map flow. */ @media (min-width: 1361px) { .workbench-layout { grid-template-columns: 11.5rem minmax(0, 1fr); } } .workbench-shell :where(.entity-card, .dataset-card, .quality-check-card, .system-provider-card, .data-selection-summary) { min-width: 0; } .workbench-shell :where(.entity-card, .dataset-card, .quality-check-card, .system-provider-card, .data-selection-summary) :where(strong, span, p, small), .workspace-heading-actions > p, .geo-source-summary :where(strong, small) { max-width: 100%; overflow-wrap: anywhere; } .context-bar > div { flex: 1 1 0; } .context-bar strong { max-width: 100%; } .geo-explorer-header { grid-template-columns: minmax(0, 1fr) auto; } .geo-explorer-header-tools { display: flex; gap: 0.55rem; align-items: center; } .geo-analysis-mode { align-items: stretch; grid-template-columns: repeat(2, minmax(6.5rem, 1fr)); } .geo-analysis-mode button { display: grid; place-items: center; white-space: nowrap; } .geo-explorer { grid-template-rows: auto auto minmax(0, 1fr) auto; } .geo-explorer-layout { grid-template-columns: 14rem minmax(28rem, 1fr) 19rem; } .municipality-search { position: relative; display: grid; min-width: 0; grid-template-columns: minmax(16rem, 0.85fr) minmax(18rem, 1.15fr) minmax(10rem, auto); gap: 0.75rem; align-items: center; border-bottom: 1px solid var(--atlas-line); padding: 0.65rem 1rem; background: #f4fbf9; } .municipality-search-copy { display: flex; min-width: 0; gap: 0.7rem; align-items: center; } .municipality-search-copy > div { display: grid; min-width: 0; gap: 0.12rem; } .municipality-search-copy strong { font-size: 0.78rem; } .municipality-search-copy strong small { margin-left: 0.35rem; color: var(--atlas-600); font-size: 0.56rem; font-weight: 750; text-transform: uppercase; } .municipality-search-copy p { margin: 0; color: var(--atlas-muted); font-size: 0.62rem; overflow-wrap: anywhere; } .municipality-shortcut { display: inline-flex; flex: 0 0 auto; gap: 0.3rem; align-items: center; border-radius: 999px; padding: 0.35rem 0.52rem; background: #e0f3ee; color: var(--atlas-800); font-size: 0.57rem; font-weight: 750; text-transform: uppercase; } .municipality-shortcut svg { width: 0.8rem; height: 0.8rem; } .municipality-search-control { position: relative; min-width: 0; } .municipality-search-control label { position: relative; display: block; min-width: 0; } .municipality-search-control label > svg { position: absolute; top: 50%; left: 0.72rem; width: 0.95rem; height: 0.95rem; color: var(--atlas-muted); transform: translateY(-50%); pointer-events: none; } .municipality-search input { width: 100%; min-width: 0; padding-left: 2.15rem; } .municipality-search-clear { position: absolute; top: 50%; right: 0.35rem; display: grid; width: 1.8rem; height: 1.8rem; min-height: 0; place-items: center; border: 0; border-radius: 50%; padding: 0; background: transparent; color: var(--atlas-muted); transform: translateY(-50%); } .municipality-search-clear svg { width: 0.9rem; height: 0.9rem; } .municipality-search-results { position: absolute; z-index: 70; top: calc(100% + 0.35rem); right: 0; left: 0; max-height: 18rem; overflow: auto; border: 1px solid var(--atlas-line-strong); border-radius: 0.75rem; padding: 0.35rem; background: #fff; box-shadow: var(--atlas-shadow-floating); } .municipality-search-results > p { margin: 0; padding: 0.75rem; color: var(--atlas-muted); font-size: 0.7rem; } .municipality-search-results > button { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; border: 0; border-radius: 0.55rem; padding: 0.65rem 0.7rem; background: transparent; text-align: left; } .municipality-search-results > button:hover { background: var(--atlas-50); } .municipality-search-results > button span { display: grid; min-width: 0; gap: 0.12rem; } .municipality-search-results > button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .municipality-search-results > button small { color: var(--atlas-muted); font-size: 0.58rem; } .municipality-search-results > button em { flex: 0 0 auto; color: var(--atlas-700); font-size: 0.6rem; font-style: normal; font-weight: 750; } .municipality-search-status { display: grid; min-width: 0; gap: 0.15rem; border-left: 1px solid var(--atlas-line); padding-left: 0.85rem; } .municipality-search-status span { color: var(--atlas-muted); font-size: 0.56rem; text-transform: uppercase; } .municipality-search-status strong { overflow: hidden; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; } .geo-panel-heading h3 small { margin-left: 0.35rem; color: var(--atlas-600); font-size: 0.54rem; font-weight: 750; text-transform: uppercase; } .geo-theme-option { height: auto; min-height: 4.35rem; align-items: start; } .geo-theme-option > span:nth-child(2) { min-width: 0; align-self: start; } .geo-theme-option small { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; } .geo-theme-option i { align-self: center; white-space: nowrap; } .quality-user-empty-state .button-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; } .system-command-surface { display: grid; grid-template-columns: repeat(2, minmax(10rem, 0.5fr)) minmax(22rem, 1.4fr); gap: 0.75rem; align-items: center; margin-bottom: 0.9rem; border: 1px solid var(--atlas-line); border-radius: var(--atlas-radius-md); padding: 0.9rem; background: var(--atlas-50); } .system-command-surface > div:not(.system-command-actions) { display: grid; gap: 0.2rem; } .system-command-surface span { color: var(--atlas-muted); font-size: 0.62rem; } .system-command-surface strong { font-size: 0.78rem; overflow-wrap: anywhere; } .system-command-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; } @media (max-width: 1180px) and (min-width: 921px) { .municipality-search { grid-template-columns: minmax(13rem, 0.8fr) minmax(15rem, 1fr); } .municipality-search-status { display: none; } } @media (max-width: 920px) { .municipality-search { grid-template-columns: minmax(0, 1fr) auto; } .municipality-search-copy { grid-column: 1 / -1; } .municipality-search-status { display: none; } .system-command-surface { grid-template-columns: 1fr 1fr; } .system-command-actions { grid-column: 1 / -1; justify-content: flex-start; } } @media (max-width: 620px) { .geo-explorer-header { grid-template-columns: 1fr; } .geo-explorer-header-tools { justify-content: space-between; } .geo-analysis-mode { flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); } .municipality-search { grid-template-columns: 1fr; } .municipality-search-copy { grid-column: auto; } .municipality-search button { width: 100%; } .municipality-search-clear { width: 1.8rem; } .geo-theme-option { grid-template-columns: 0.3rem minmax(0, 1fr); min-height: 4rem; } .geo-theme-option i { grid-column: 2; justify-self: start; margin-top: 0.2rem; } .system-command-surface { grid-template-columns: 1fr; } .system-command-actions { grid-column: auto; } } /* Workspace identity illustrations */ .workspace-heading { position: relative; display: grid; grid-template-columns: minmax(12rem, auto) 8.5rem minmax(18rem, 1fr); gap: 1.25rem; align-items: center; overflow: hidden; min-height: 7.25rem; padding: 0.9rem 1.15rem; border: 1px solid rgba(194, 210, 205, 0.72); border-radius: var(--atlas-radius-lg); background: radial-gradient(circle at 45% 0%, rgba(44, 163, 141, 0.09), transparent 12rem), rgba(255, 255, 255, 0.76); box-shadow: var(--atlas-shadow-xs); } .workspace-heading::after { position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(13, 102, 91, 0.35), transparent); content: ""; } .workspace-heading-copy, .workspace-heading-actions { position: relative; z-index: 2; } .workspace-heading-actions { justify-self: end; } .workspace-signal { --signal-accent: #2b9a86; position: relative; justify-self: center; width: 7.25rem; height: 5.25rem; overflow: hidden; border: 1px solid rgba(13, 102, 91, 0.14); border-radius: 1.1rem; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--signal-accent) 18%, transparent), transparent 2.6rem), linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(235, 245, 242, 0.82)); box-shadow: inset 0 1px 0 #fff, 0 12px 25px rgba(8, 42, 38, 0.08); } .workspace-signal-data { --signal-accent: #298873; } .workspace-signal-assistant { --signal-accent: #7467bd; } .workspace-signal-analysis { --signal-accent: #c18031; } .workspace-signal-ai { --signal-accent: #397dae; } .workspace-signal-exports { --signal-accent: #ad6d43; } .workspace-signal-system { --signal-accent: #62766f; } .workspace-signal-grid { position: absolute; inset: 0; opacity: 0.5; background-image: linear-gradient(rgba(18, 79, 70, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 79, 70, 0.08) 1px, transparent 1px); background-size: 15px 15px; mask-image: linear-gradient(to bottom, black, transparent 92%); } .workspace-signal-icon { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid color-mix(in srgb, var(--signal-accent) 28%, white); border-radius: 0.8rem; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--signal-accent) 85%, white), var(--signal-accent)); box-shadow: 0 8px 20px color-mix(in srgb, var(--signal-accent) 25%, transparent); transform: translate(-50%, -50%); } .workspace-signal-icon svg { width: 1.18rem; height: 1.18rem; } .workspace-signal-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid color-mix(in srgb, var(--signal-accent) 24%, transparent); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); } .workspace-signal-orbit::after { position: absolute; top: -0.2rem; left: 50%; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--signal-accent); box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--signal-accent) 12%, transparent); content: ""; } .workspace-signal-orbit-a { width: 5.4rem; height: 2.35rem; animation: workspace-orbit 8s linear infinite; } .workspace-signal-orbit-b { width: 3.8rem; height: 4.4rem; animation: workspace-orbit-reverse 11s linear infinite; } .workspace-signal-beam { position: absolute; z-index: 1; top: -1rem; left: 50%; width: 1px; height: 7rem; background: linear-gradient(transparent, color-mix(in srgb, var(--signal-accent) 50%, transparent), transparent); transform: rotate(28deg); animation: workspace-beam 5s ease-in-out infinite; } .result-state-empty, .map-empty-state, .empty-state { position: relative; isolation: isolate; overflow: hidden; } .result-state-empty::after, .map-empty-state::after, .empty-state::after { position: absolute; z-index: -1; right: -1.25rem; bottom: -1.35rem; width: 7.5rem; height: 7.5rem; border: 1px solid rgba(13, 102, 91, 0.11); border-radius: 50%; background: radial-gradient(circle, rgba(13, 102, 91, 0.16) 0 3px, transparent 4px), repeating-radial-gradient(circle, transparent 0 12px, rgba(13, 102, 91, 0.075) 13px 14px); content: ""; transform: rotate(-14deg); transition: transform 400ms ease; } .result-state-empty:hover::after, .map-empty-state:hover::after, .empty-state:hover::after { transform: rotate(-4deg) scale(1.06); } @keyframes workspace-orbit { to { transform: translate(-50%, -50%) rotate(342deg); } } @keyframes workspace-orbit-reverse { to { transform: translate(-50%, -50%) rotate(-378deg); } } @keyframes workspace-beam { 0%, 100% { opacity: 0.15; transform: translateX(-2.4rem) rotate(28deg); } 50% { opacity: 0.65; transform: translateX(2.4rem) rotate(28deg); } } @media (max-width: 1040px) { .workspace-heading { grid-template-columns: minmax(12rem, 1fr) 7.25rem; } .workspace-heading-actions { grid-column: 1 / -1; justify-self: stretch; } } @media (max-width: 680px) { .workspace-heading { grid-template-columns: minmax(0, 1fr) 4.75rem; gap: 0.75rem; min-height: 6rem; padding: 0.8rem; } .workspace-signal { width: 4.7rem; height: 4.1rem; border-radius: 0.85rem; } .workspace-signal-icon { width: 2.1rem; height: 2.1rem; } .workspace-heading-actions { display: flex; align-items: center; } } @media (prefers-reduced-motion: reduce) { .workspace-signal-orbit, .workspace-signal-beam { animation: none !important; } } /* Interactive project atlas */ .project-atlas { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(17rem, 0.78fr) minmax(26rem, 1.32fr); gap: clamp(1.5rem, 3vw, 3.5rem); overflow: hidden; padding: clamp(1.35rem, 2.4vw, 2.35rem); border: 1px solid rgba(111, 190, 169, 0.26); border-radius: var(--atlas-radius-xl); color: #fff; background: radial-gradient(circle at 18% 0%, rgba(64, 190, 164, 0.18), transparent 25rem), linear-gradient(135deg, #092f2b 0%, #0b3f39 48%, #082c34 100%); box-shadow: var(--atlas-shadow-floating); } .project-atlas::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.045) 49%, transparent 68%); content: ""; transform: translateX(-80%); animation: atlas-surface-glint 12s ease-in-out infinite; } .project-atlas-copy { align-self: center; max-width: 34rem; } .project-atlas-copy .eyebrow { color: #82d7c3; } .project-atlas-copy h2 { max-width: 14ch; margin: 0.35rem 0 0.85rem; color: #fff; font-family: "Manrope", "Public Sans", sans-serif; font-size: clamp(1.65rem, 2.2vw, 2.65rem); line-height: 1.05; letter-spacing: -0.045em; } .project-atlas-copy > p:not(.eyebrow) { margin: 0; color: rgba(230, 247, 242, 0.72); font-size: 0.9rem; line-height: 1.7; } .project-atlas-copy > p strong { color: #fff; font-weight: 650; } .project-atlas-metrics { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.35rem; } .project-atlas-metrics span { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.55rem 0.7rem; border: 1px solid rgba(178, 230, 216, 0.16); border-radius: 999px; color: rgba(230, 247, 242, 0.7); background: rgba(255, 255, 255, 0.055); font-size: 0.7rem; backdrop-filter: blur(10px); } .project-atlas-metrics strong { color: #fff; font-size: 0.82rem; } .project-atlas-visual { position: relative; align-self: center; min-width: 0; perspective: 900px; } .project-atlas-visual svg { display: block; width: 100%; height: auto; overflow: visible; border: 1px solid rgba(157, 222, 205, 0.18); border-radius: 1.75rem; box-shadow: 0 30px 70px rgba(1, 19, 23, 0.36); transform: rotateX(2deg) rotateY(-3deg); transform-origin: center; transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 500ms ease; } .project-atlas:hover .project-atlas-visual svg, .project-atlas:focus-within .project-atlas-visual svg { box-shadow: 0 35px 82px rgba(1, 19, 23, 0.46); transform: rotateX(0) rotateY(0) translateY(-0.2rem); } .atlas-grid-lines path { fill: none; stroke: rgba(193, 233, 223, 0.075); stroke-width: 1; } .atlas-coast-halo { fill: rgba(87, 229, 196, 0.28); filter: blur(16px); } .atlas-land-shape { fill: url(#atlas-land); stroke: rgba(225, 250, 243, 0.48); stroke-width: 1.2; } .atlas-contours path { fill: none; stroke: rgba(230, 251, 244, 0.23); stroke-width: 1.5; stroke-dasharray: 4 7; } .atlas-route { fill: none; stroke: #edc86c; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.72 0.28; animation: atlas-route-draw 5.5s ease-in-out infinite alternate; } .atlas-signal-glow { fill: #5fe0c2; opacity: 0.75; animation: atlas-signal-pulse 2.8s ease-out infinite; } .atlas-signal-ring { fill: rgba(8, 47, 43, 0.72); stroke: #a3eddb; stroke-width: 2; } .atlas-signal-core { fill: #fff; } .atlas-signal-2 .atlas-signal-glow { animation-delay: 0.65s; } .atlas-signal-3 .atlas-signal-glow { animation-delay: 1.3s; } .atlas-signal-4 .atlas-signal-glow { animation-delay: 1.95s; } .atlas-scan path { stroke: rgba(179, 242, 226, 0.76); stroke-width: 1; } .atlas-scan rect { fill: rgba(105, 224, 198, 0.1); } .atlas-scan { animation: atlas-scan-pass 7s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .project-atlas-live { position: absolute; top: 0.85rem; right: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border: 1px solid rgba(190, 236, 224, 0.16); border-radius: 999px; color: rgba(238, 252, 248, 0.78); background: rgba(5, 35, 37, 0.7); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(12px); } .project-atlas-live i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #62dfbd; box-shadow: 0 0 0 0 rgba(98, 223, 189, 0.55); animation: atlas-live-pulse 2.2s ease-out infinite; } .project-atlas-stages { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; margin-top: -0.3rem; } .project-atlas-stage { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.65rem; align-items: center; min-width: 0; padding: 0.68rem; border: 1px solid rgba(178, 230, 216, 0.14); border-radius: 0.8rem; color: rgba(230, 247, 242, 0.7); background: rgba(255, 255, 255, 0.045); text-align: left; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; } .project-atlas-stage:hover, .project-atlas-stage:focus-visible { border-color: rgba(142, 225, 205, 0.55); color: #fff; background: rgba(255, 255, 255, 0.1); transform: translateY(-0.18rem); } .project-atlas-stage > span { grid-row: 1 / 3; display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 0.58rem; background: rgba(255, 255, 255, 0.08); } .project-atlas-stage svg { width: 1rem; height: 1rem; } .project-atlas-stage strong, .project-atlas-stage small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-atlas-stage strong { color: currentColor; font-size: 0.75rem; } .project-atlas-stage small { color: rgba(213, 238, 232, 0.48); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; } .project-atlas-stage-ready > span { color: #092f2b; background: #79d7bd; } .project-atlas-stage-active { border-color: rgba(237, 200, 108, 0.5); color: #fff; background: rgba(237, 200, 108, 0.1); } .project-atlas-stage-active > span { color: #3a2b09; background: #edc86c; box-shadow: 0 0 0 0.25rem rgba(237, 200, 108, 0.1); } .data-selection-summary-project { position: relative; overflow: hidden; } .data-selection-summary-project::after { position: absolute; right: -1.25rem; bottom: -1.6rem; width: 7rem; height: 5rem; border: 1px solid rgba(13, 102, 91, 0.1); border-radius: 48% 52% 35% 65%; background: repeating-radial-gradient(ellipse at 40% 45%, transparent 0 7px, rgba(13, 102, 91, 0.07) 8px 9px); content: ""; transform: rotate(-12deg); transition: transform 400ms ease; } .data-selection-summary-project:hover::after { transform: rotate(-4deg) scale(1.08); } @keyframes atlas-surface-glint { 0%, 18% { transform: translateX(-80%); } 48%, 100% { transform: translateX(90%); } } @keyframes atlas-route-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes atlas-signal-pulse { 0% { opacity: 0.72; transform: scale(0.45); transform-origin: center; } 70%, 100% { opacity: 0; transform: scale(1.65); transform-origin: center; } } @keyframes atlas-scan-pass { 0%, 12% { opacity: 0; transform: translateY(-28px); } 20% { opacity: 1; } 75% { opacity: 0.7; } 88%, 100% { opacity: 0; transform: translateY(230px); } } @keyframes atlas-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(98, 223, 189, 0.55); } 70%, 100% { box-shadow: 0 0 0 0.45rem rgba(98, 223, 189, 0); } } @media (max-width: 1100px) { .project-atlas { grid-template-columns: 1fr; } .project-atlas-copy h2 { max-width: 20ch; } .project-atlas-visual { max-width: 46rem; } } @media (max-width: 720px) { .project-atlas { gap: 1.15rem; padding: 1rem; border-radius: var(--atlas-radius-lg); } .project-atlas-copy h2 { font-size: 1.55rem; } .project-atlas-metrics { margin-top: 0.9rem; } .project-atlas-stages { grid-template-columns: repeat(5, minmax(3.15rem, 1fr)); gap: 0.3rem; overflow-x: auto; padding-bottom: 0.2rem; } .project-atlas-stage { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.55rem 0.25rem; text-align: center; } .project-atlas-stage > span { width: 1.75rem; height: 1.75rem; } .project-atlas-stage strong { width: 100%; font-size: 0.62rem; } .project-atlas-stage small { display: none; } } @media (prefers-reduced-motion: reduce) { .project-atlas::before, .atlas-route, .atlas-signal-glow, .atlas-scan, .project-atlas-live i { animation: none !important; } }