Jens/geointel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Voer de visuele audit door: fundament, donkere werkstand, kaart en schil

Browse Source 
Achttien bevindingen uit de audit, met de metingen erbij in de betreffende
CSS-secties.

Fundament. Dertien tokens werden op 87 plaatsen aangeroepen zonder ooit
gedefinieerd te zijn; in de browser gaf getPropertyValue('--gi-text') een lege
string terug, dus die kleurregels vielen terug op overerving. Vorm en hoogte
zijn terug naar de schaal: radius via token van 17% naar 81%, unieke schaduwen
van 115 naar 71, losse kleurwaarden van 928 naar 352.

Typografie. De stylesheets declareerden negen gewichten terwijl er per familie
twee gezichten geladen werden, en font-synthesis-weight: none verbiedt
namaakvet. Alles van 650 tot 850 kwam dus als 600 op het scherm: 138 van de 148
declaraties rendereden identiek. Nu vier stappen die alle vier ook geladen
worden, en Manrope draagt de koppen zoals op de landingspagina.

Donkere werkstand. De werkbank staat tegen luchtbeelden aan; een lichte schil
daarnaast laat de kaart altijd verliezen. De landingspagina blijft licht.

Kaart. De ondergrond wordt ontkleurd en gedempt zodat alleen de eigen data nog
kleur draagt, en de symbologie staat niet langer als losse hexwaarden in
GeoMap. De zes zwevende vlakken zijn er drie: statuskaart, staprail en
resultaatchip bleken al één component te zijn die de opmaak over drie hoeken
van de kaart uiteentrok.

Schil. Eén kopbalk in plaats van drie (215px chroom naar 100px), het raster van
AI-vragen zonder botsingen, kapitalen op één niveau in plaats van 57
declaraties, en het leverancierslogo uit de navigatiebalk.

Van 47 echte !important naar 1, gemeten door telkens twee productiebuilds op
berekende stijlen te vergelijken. Contrast: nul tekstelementen onder AA op zes
werkbladen, in beide werkstanden.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Jens
2026-08-23 14:59:45 +02:00
co-authored by Claude Opus 5
parent 4ecec721b1
commit 438d0ec083
15 changed files with 2167 additions and 1202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/auth/LandingPage.tsx
+12 -6
View File
@@ -33,21 +33,18 @@ interface LandingPageProps {
const capabilityItems = [
{
icon: MapPinned,
number: '01',
title: 'Eén kaartgerichte werkruimte',
description:
'Selecteer een gebied in België of de Belgische Noordzee en werk verder vanuit dezelfde ruimtelijke context.',
},
{
icon: Database,
number: '02',
title: 'Bronnen blijven herkenbaar',
description:
'Autoriteit, meetmoment, dekking, CRS en beperkingen blijven zichtbaar in plaats van achter één generieke kaartlaag te verdwijnen.',
},
{
icon: ShieldCheck,
number: '03',
title: 'Kwaliteit vóór resultaat',
description:
'Vergelijk referentie- en kandidaatgegevens, controleer bewijs en exporteer pas wanneer de context klopt.',
@@ -70,6 +67,7 @@ export function LandingPage({
const [password, setPassword] = useState('')
const [pendingAction, setPendingAction] = useState<'operator' | 'guest' | null>(null)
const [authError, setAuthError] = useState<string | null>(null)
const [attempted, setAttempted] = useState(false)
const [showPassword, setShowPassword] = useState(false)
const [menuOpen, setMenuOpen] = useState(false)
const usernameRef = useRef<HTMLInputElement | null>(null)
@@ -84,6 +82,7 @@ export function LandingPage({
const submitLogin = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault()
setPendingAction('operator')
setAttempted(true)
setAuthError(null)
try {
const session = await login(username.trim(), password)
@@ -98,6 +97,7 @@ export function LandingPage({
const submitGuestLogin = async () => {
setMenuOpen(false)
setPendingAction('guest')
setAttempted(true)
setAuthError(null)
if (typeof accessPanelRef.current?.scrollIntoView === 'function') {
accessPanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' })
@@ -278,7 +278,7 @@ export function LandingPage({
</button>
</div>
{authError || serviceError ? (
{authError || (serviceError && attempted) ? (
<p className="landing-login-error" role="alert">{authError ?? serviceError}</p>
) : null}
@@ -290,6 +290,13 @@ export function LandingPage({
<LogIn aria-hidden="true" />
{pendingAction === 'operator' ? 'Veilig aanmelden…' : 'Inloggen als operator'}
</button>
{/* De storingsmelding stond als rood blok midden in de hero,
voordat de bezoeker iets gedaan had. Zolang er nog niets
geprobeerd is, is het een mededeling en geen fout. */}
{serviceError && !attempted && !authError ? (
<p className="landing-login-note">{serviceError}</p>
) : null}
</form>
{guestAccessEnabled ? (
@@ -326,11 +333,10 @@ export function LandingPage({
</div>
<div className="landing-capability-grid">
{capabilityItems.map(({ icon: Icon, number, title, description }) => (
{capabilityItems.map(({ icon: Icon, title, description }) => (
<article key={title} className="landing-capability">
<div className="landing-capability-topline">
<span className="landing-capability-icon" aria-hidden="true"><Icon /></span>
<small>{number}</small>
</div>
<h3>{title}</h3>
<p>{description}</p>
frontend/src/components/datasets/DatasetPanel.tsx
+1 -6
View File
@@ -172,28 +172,24 @@ export function DatasetPanel({
key: 'selected',
label: 'Geselecteerd',
count: selectedDatasetId ? 1 : 0,
hint: 'Actief',
className: 'dataset-role-selected',
},
{
key: 'reference',
label: 'Referentie',
count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'reference').length,
hint: 'Officieel',
className: 'dataset-role-reference',
},
{
key: 'candidate',
label: 'Resultaat',
count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'candidate').length,
hint: 'Afgeleid',
className: 'dataset-role-candidate',
},
{
key: 'source',
label: 'Basisbron',
count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'source').length,
hint: 'Ingeladen',
className: 'dataset-role-source',
},
]
@@ -277,9 +273,8 @@ export function DatasetPanel({
<div className="dataset-role-summary-grid" aria-label="Dataset role summary">
{roleSummaries.map((summary) => (
<div className={`dataset-role-summary ${summary.className}`} key={summary.key}>
<span>{summary.label}</span>
<strong>{summary.count}</strong>
<small>{summary.hint}</small>
<span>{summary.label}</span>
</div>
))}
</div>
frontend/src/components/detection/AiPipelineIllustration.test.tsx
+3 -3
View File
@@ -17,10 +17,10 @@ describe('AiPipelineIllustration', () => {
/>,
)
expect(screen.getByText('CUDA gereed')).toBeTruthy()
expect(screen.getByText('GPU gereed')).toBeTruthy()
expect(screen.getByRole('tab', { name: /Detecties/ }).textContent).toContain('volgende stap')
fireEvent.click(screen.getByRole('tab', { name: /NVIDIA GPU/ }))
expect(screen.getByRole('tabpanel').textContent).toContain('Lokale PyTorch-inferentie')
fireEvent.click(screen.getByRole('tab', { name: /Berekening/ }))
expect(screen.getByRole('tabpanel').textContent).toContain('De herkenning draait lokaal')
})
})
frontend/src/components/detection/AiPipelineIllustration.tsx
+5 -5
View File
@@ -12,8 +12,8 @@ interface AiPipelineIllustrationProps {
const pipelineStages = [
{ key: 'imagery', label: 'Orthofoto', title: 'Gegeorefereerd bronbeeld', detail: 'CRS, resolutie en ruimtelijke dekking blijven bij de dataset bewaard.', icon: Image },
{ key: 'tiles', label: 'Beeldtegels', title: 'Controleerbare tilevoorbereiding', detail: 'Overlap en tile-identiteit houden detecties herleidbaar naar hun bronpixel.', icon: Boxes },
{ key: 'gpu', label: 'NVIDIA GPU', title: 'Lokale PyTorch-inferentie', detail: 'GeoIntel gebruikt de server-GPU en faalt gesloten wanneer CUDA vereist maar niet beschikbaar is.', icon: Cpu },
{ key: 'tiles', label: 'Beeldtegels', title: 'Beeld opgedeeld in controleerbare tegels', detail: 'Elke tegel houdt zijn overlap en herkomst bij, zodat elke detectie terug te voeren is op de bronpixel.', icon: Boxes },
{ key: 'gpu', label: 'Berekening', title: 'De herkenning draait lokaal', detail: 'De analyse gebruikt de GPU van de server. Is die niet beschikbaar, dan stopt de analyse in plaats van een resultaat te maken waarop u niet kunt bouwen.', icon: Cpu },
{ key: 'detections', label: 'Detecties', title: 'Gegeorefereerde gebouwobjecten', detail: 'Confidence, modelversie, brontegel en geometrie worden als reproduceerbaar resultaat bewaard.', icon: ScanSearch },
{ key: 'quality', label: 'QA-bewijs', title: 'Controle vóór vrijgave', detail: 'Precision, recall, IoU en foutbewijs bepalen of een resultaat alleen verkennend of operationeel bruikbaar is.', icon: BadgeCheck },
] as const
@@ -36,15 +36,15 @@ export function AiPipelineIllustration({
<div className="ai-pipeline-heading">
<div>
<p className="eyebrow">Van pixel naar bewijs</p>
<h3 id="ai-pipeline-title">PyTorch-keten op de NVIDIA-server</h3>
<h3 id="ai-pipeline-title">Van luchtbeeld naar controleerbare detectie</h3>
<p>Open een schakel om te zien welke technische context GeoIntel door de volledige analyse bewaart.</p>
</div>
<span className={gpuReady ? 'ai-pipeline-gpu ai-pipeline-gpu-ready' : 'ai-pipeline-gpu'}>
<i /> {gpuReady ? 'CUDA gereed' : 'CUDA controleren'}
<i /> {gpuReady ? 'GPU gereed' : 'GPU controleren'}
</span>
</div>
<div className="ai-pipeline-track" role="tablist" aria-label="PyTorch-analysekten">
<div className="ai-pipeline-track" role="tablist" aria-label="Stappen in de analyseketen">
<span className="ai-pipeline-flow" aria-hidden="true" />
{pipelineStages.map(({ key, label, icon: Icon }, index) => (
<button
frontend/src/components/exports/ExportCenter.tsx
+4 -4
View File
@@ -275,8 +275,8 @@ export function ExportCenter({
})}
{availableLatestArtifacts.length === 0 ? (
<div className="result-state result-state-empty latest-download-empty">
<strong>Nog geen downloads gemaakt</strong>
<p>Kies hieronder een rapport of de actieve kaartlaag.</p>
<strong>Nog geen recente downloads</strong>
<p>De laatst bewaarde bestanden verschijnen hier.</p>
</div>
) : null}
</div>
@@ -377,8 +377,8 @@ export function ExportCenter({
) : null}
{exports.length === 0 ? (
<div className="result-state result-state-empty">
<strong>Nog geen downloads gemaakt.</strong>
<p>Kies hierboven een leesbaar rapport, projectoverzicht of kaartlaag.</p>
<strong>Nog niets bewaard</strong>
<p>Maak een leesbaar rapport, een projectoverzicht, of bewaar de actieve kaartlaag.</p>
</div>
) : null}
</div>
frontend/src/components/map/mapSymbology.ts
+91
View File
@@ -0,0 +1,91 @@
/**
* Kaartsymbologie.
*
* De kleuren van de kaartlagen stonden als losse hexwaarden door GeoMap.tsx
* heen. Het waren framework-standaardkleuren die bij geen enkel token uit het
* designsysteem hoorden, en op de donkere operationele ondergrond vielen de
* donkere varianten volledig weg.
*
* Deze waarden horen bij de donkere werkstand en zijn afgestemd op de tokens
* in geointel-system.css, sectie "Operationeel donker". Ze staan hier als
* letterlijke waarden omdat MapLibre paint-eigenschappen geen CSS-variabelen
* kunnen lezen; wijzigt een token, dan wijzigt zijn tegenhanger hier mee.
*/
export const mapSymbology = {
/** Officiële grenzen. Komt overeen met --gi-brand-500. */
boundary: '#45cfb4',
boundaryStrong: '#38c0a5',
/** Verandering tussen twee meetmomenten. */
added: '#4cc48d',
removed: '#ec7d76',
modified: '#dda45e',
unchanged: '#6fb0dd',
/** Eigen ingeladen data. Oranje blijft de tegenkleur van het teal-merk. */
dataFill: '#fb923c',
dataLine: '#f97316',
/** Actieve selectie. Geel leest op elke ondergrond. */
selectionFill: '#fde047',
selectionLine: '#fbbf24',
/** Water en bathymetrie. */
waterFill: '#38bdf8',
waterLine: '#7dd3fc',
/** Modelresultaten uit beeldanalyse. */
detectionFill: '#a78bfa',
detectionLine: '#c4b5fd',
/** Randen van puntsymbolen, tegen elke vulkleur. */
pointStroke: '#ffffff',
/** Terugvalkleur wanneer een feature geen bekende klasse heeft. */
fallback: '#94a3b8',
} as const
export type KaartWerkstand = 'dark' | 'light'
/**
* De verf van de ondergrond.
*
* De tegels zijn consumentenkaarten: rode snelwegen, groene bossen,
* POI-drukte. In beide werkstanden worden ze ontkleurd zodat alleen de eigen
* data nog kleur draagt; het verschil zit in hoe ver ze gedempt worden.
*
* De featurekleuren hierboven blijven in beide werkstanden gelijk. Het zijn
* middentonen die op een lichte én een donkere ondergrond leesbaar zijn, en
* één set houdt de betekenis van een kleur constant wanneer een gebruiker
* tussen de twee wisselt.
*/
export function basemapPaint(werkstand: KaartWerkstand): Record<string, number> {
if (werkstand === 'light') {
return {
'raster-saturation': -0.62,
'raster-brightness-min': 0.32,
'raster-brightness-max': 1,
'raster-contrast': -0.14,
'raster-hue-rotate': 140,
'raster-opacity': 0.92,
}
}
return {
'raster-saturation': -0.78,
'raster-brightness-min': 0.03,
'raster-brightness-max': 0.44,
'raster-contrast': -0.08,
'raster-hue-rotate': 140,
'raster-opacity': 0.9,
}
}
export function basemapGround(werkstand: KaartWerkstand): string {
return werkstand === 'light' ? '#eef2f0' : '#0a100e'
}
export function huidigeWerkstand(): KaartWerkstand {
if (typeof document === 'undefined') return 'dark'
return document.body.dataset.theme === 'light' ? 'light' : 'dark'
}
frontend/src/components/shell/WorkbenchNavigation.tsx
-2
View File
@@ -11,7 +11,6 @@ import {
} from 'lucide-react'
import type { WorkspaceKey } from '../overview/OverviewWorkspace'
import { GeoIntelMark } from '../brand/GeoIntelBrand'
import { ItWorxSignature } from '../brand/ItWorxSignature'
export interface WorkspaceNavigationItem {
key: WorkspaceKey
@@ -86,7 +85,6 @@ export function WorkbenchNavigation({
</div>
))}
</nav>
<ItWorxSignature />
</aside>
)
}
frontend/src/styles/app.css
+638 -634
View File
File diff suppressed because it is too large Load Diff
frontend/src/styles/atlas-premium-v2.css
+101 -104
View File
@@ -86,7 +86,7 @@ body {
transparent 15rem
),
linear-gradient(180deg, var(--atlas-900), var(--atlas-950));
box-shadow: 12px 0 36px rgba(8, 42, 38, 0.12);
box-shadow: var(--gi-shadow-lg);
}
.sidebar-brand {
@@ -101,7 +101,7 @@ body {
width: 2.65rem;
height: 2.65rem;
border: 1px solid rgba(173, 238, 227, 0.44);
border-radius: 0.8rem;
border-radius: var(--gi-radius-lg);
object-fit: cover;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
@@ -120,7 +120,7 @@ body {
.itworx-signature > span {
color: rgba(223, 250, 245, 0.48);
font-size: 0.58rem;
font-weight: 700;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@@ -173,12 +173,12 @@ body {
gap: 0.75rem;
margin: 0.2rem 0;
border: 1px solid transparent;
border-radius: 0.75rem;
border-radius: var(--gi-radius-md);
padding: 0.68rem 0.72rem;
color: rgba(239, 252, 249, 0.7);
background: transparent;
font-size: 0.82rem;
font-weight: 650;
font-weight: 600;
box-shadow: none;
}
@@ -209,9 +209,9 @@ body {
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);
border-radius: 0 var(--gi-radius-pill) var(--gi-radius-pill) 0;
background: var(--gi-brand-50);
box-shadow: var(--gi-shadow-md);
content: "";
}
@@ -234,7 +234,7 @@ body {
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);
box-shadow: var(--gi-shadow-md);
backdrop-filter: blur(18px) saturate(135%);
}
@@ -246,7 +246,7 @@ body {
position: relative;
min-width: 0;
border: 1px solid transparent;
border-radius: 0.72rem;
border-radius: var(--gi-radius-md);
padding: 0.48rem 0.72rem 0.52rem;
background: rgba(238, 248, 246, 0.62);
transition:
@@ -256,13 +256,13 @@ body {
}
.context-bar > div:first-child {
border-color: #c7ded8;
background: #eaf6f3;
border-color: var(--gi-brand-50);
background: var(--gi-brand-50);
}
.workbench-shell .context-bar span {
margin-bottom: 0.16rem;
color: #6d827c;
color: var(--gi-ink-600);
font-size: 0.66rem;
letter-spacing: 0.055em;
}
@@ -270,16 +270,16 @@ body {
.context-bar strong {
color: var(--ink-950);
font-size: 0.78rem;
font-weight: 650;
font-weight: 600;
}
.context-health {
min-height: 2.45rem;
border: 1px solid #cfe0dc;
border-radius: 999px;
border: 1px solid var(--gi-surface-sunken);
border-radius: var(--gi-radius-pill);
padding: 0.45rem 0.78rem;
color: var(--atlas-800);
background: #f4faf8;
background: var(--gi-brand-50);
font-size: 0.75rem;
}
@@ -293,14 +293,14 @@ body {
.context-account {
min-height: 2.55rem;
border: 1px solid var(--atlas-line);
border-radius: 999px;
border-radius: var(--gi-radius-pill);
padding: 0.22rem 0.28rem 0.22rem 0.68rem;
background: var(--paper);
box-shadow: var(--atlas-shadow-xs);
}
.context-account button {
border-radius: 999px;
border-radius: var(--gi-radius-pill);
}
/* Calm, singular operational notice */
@@ -315,10 +315,10 @@ body {
width: min(26rem, calc(100vw - 2rem));
gap: 0.7rem;
align-items: start;
border: 1px solid #e6c9b2;
border-radius: 0.9rem;
border: 1px solid var(--gi-warn-soft);
border-radius: var(--gi-radius-lg);
padding: 0.82rem 0.95rem;
color: #6f3b1c;
color: var(--gi-warn);
background: rgba(255, 250, 244, 0.96);
box-shadow: var(--atlas-shadow-floating);
backdrop-filter: blur(18px);
@@ -327,7 +327,7 @@ body {
.workspace-notice > svg {
width: 1.08rem;
margin-top: 0.08rem;
color: #b26530;
color: var(--gi-warn);
}
.workspace-notice > div {
@@ -340,7 +340,7 @@ body {
}
.workspace-notice span {
color: #865337;
color: var(--gi-warn);
font-size: 0.74rem;
line-height: 1.45;
}
@@ -372,7 +372,7 @@ body {
color: var(--ink-950);
font-family: "Manrope", sans-serif;
font-size: clamp(1.65rem, 2vw, 2.25rem);
font-weight: 700;
font-weight: 600;
letter-spacing: -0.045em;
}
@@ -388,21 +388,21 @@ body {
.primary-action,
.quick-action-button {
min-height: 2.65rem;
border-radius: 0.68rem;
border-radius: var(--gi-radius-md);
padding-inline: 1rem;
font-size: 0.78rem;
font-weight: 700;
font-weight: 600;
}
.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);
box-shadow: var(--gi-shadow-md);
}
.workbench-shell .primary-action:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(13, 102, 91, 0.22);
box-shadow: var(--gi-shadow-md);
}
/* Shared premium surfaces */
@@ -418,7 +418,7 @@ body {
.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);
background: color-mix(in srgb, var(--gi-surface) 94%, transparent);
box-shadow: var(--atlas-shadow-sm);
}
@@ -429,12 +429,9 @@ body {
letter-spacing: -0.025em;
}
.workbench-shell .eyebrow,
.workbench-shell .section-kicker {
color: var(--atlas-700);
font-size: 0.69rem;
letter-spacing: 0.06em;
}
/* De regel voor .eyebrow en .section-kicker die hier stond, was een tweede
definitie van wat atlas-workbench.css al zette, met afwijkende waarden. Ze
verplichtte die andere regel tot !important. Eén definitie is genoeg. */
.muted,
.panel-title-row .muted,
@@ -448,17 +445,17 @@ body {
.status-badge,
.count-pill,
.status-pill {
border-radius: 999px;
border-radius: var(--gi-radius-pill);
padding: 0.28rem 0.52rem;
font-size: 0.66rem;
font-weight: 750;
font-weight: 600;
letter-spacing: 0.015em;
}
.result-state,
.empty-state {
min-height: 9rem;
border: 1px dashed #bfd0cb;
border: 1px dashed var(--gi-line);
border-radius: var(--atlas-radius-md);
padding: 1.2rem;
background:
@@ -467,13 +464,13 @@ body {
rgba(21, 152, 137, 0.08),
transparent 8rem
),
#fbfdfc;
var(--gi-brand-50);
}
.result-state-error {
border-style: solid;
border-color: #ebc7bf;
background: #fff8f6;
border-color: var(--gi-danger-soft);
background: var(--gi-danger-soft);
}
/* Status becomes an executive health overview */
@@ -492,7 +489,7 @@ body {
rgba(91, 204, 184, 0.22),
transparent 14rem
),
linear-gradient(135deg, #f8fcfb, #eef7f4);
linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
}
.status-strip-header h2 {
@@ -520,7 +517,7 @@ body {
border-radius: 50%;
padding: 0;
background: var(--paper);
box-shadow: 0 12px 30px rgba(8, 42, 38, 0.13);
box-shadow: var(--gi-shadow-md);
}
.status-readiness-orbit {
@@ -578,7 +575,7 @@ body {
.status-strip-grid {
gap: 0.65rem;
padding: 0.75rem;
background: #f7faf9;
background: var(--gi-brand-50);
}
.status-tile,
@@ -587,7 +584,7 @@ body {
min-height: 8rem;
overflow: hidden;
border: 1px solid var(--atlas-line);
border-radius: 0.8rem;
border-radius: var(--gi-radius-lg);
padding: 0.9rem;
background: var(--paper);
}
@@ -604,7 +601,7 @@ body {
}
.status-tile-ready {
border-color: #c6dfd8;
border-color: var(--gi-brand-50);
box-shadow: inset 0 3px 0 #45a996;
}
@@ -638,12 +635,12 @@ body {
}
.workbench-shell .workspace-grid-data > section.source-catalog-panel {
border-color: #c5dcd6;
border-color: var(--gi-brand-50);
background:
linear-gradient(
135deg,
rgba(238, 248, 246, 0.72),
rgba(255, 255, 255, 0.95) 28%
color-mix(in srgb, var(--gi-surface) 95%, transparent) 28%
),
var(--paper);
}
@@ -664,7 +661,7 @@ body {
.workspace-grid-data .dataset-card {
border-color: var(--atlas-line);
padding: 0.9rem;
background: #fcfdfd;
background: var(--gi-surface);
transition:
transform 140ms ease,
border-color 140ms ease,
@@ -674,7 +671,7 @@ body {
.workspace-grid-data .entity-card:hover,
.workspace-grid-data .dataset-card:hover {
transform: translateY(-1px);
border-color: #9fc8be;
border-color: var(--gi-brand-50);
box-shadow: var(--atlas-shadow-sm);
}
@@ -698,7 +695,7 @@ body {
rgba(84, 196, 176, 0.14),
transparent 16rem
),
linear-gradient(135deg, #fbfdfc, #f3f9f7);
linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
}
.geo-explorer-header h2 {
@@ -714,13 +711,13 @@ body {
.geo-explorer-layout {
gap: 0;
background: #eef3f1;
background: var(--gi-surface-soft);
}
.geo-theme-panel,
.geo-insight-panel {
border: 0;
background: rgba(255, 255, 255, 0.97);
background: color-mix(in srgb, var(--gi-surface) 97%, transparent);
}
.geo-theme-panel {
@@ -735,7 +732,7 @@ body {
.geo-insight-panel > .geo-panel-heading {
min-height: 5rem;
padding: 1rem;
background: #fbfdfc;
background: var(--gi-brand-50);
}
.geo-theme-list {
@@ -746,20 +743,20 @@ body {
.geo-theme-option {
min-height: 3.65rem;
border: 1px solid transparent;
border-radius: 0.75rem;
border-radius: var(--gi-radius-md);
padding: 0.65rem 0.72rem;
background: transparent;
}
.geo-theme-option:hover:not(:disabled) {
border-color: #c4d9d4;
background: #f5faf8;
border-color: var(--gi-line);
background: var(--gi-brand-50);
}
.geo-theme-option-active,
.geo-theme-option-active:hover:not(:disabled) {
border-color: #9bc9be;
background: linear-gradient(135deg, #e7f5f1, #f4faf8);
border-color: var(--gi-brand-50);
background: linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
box-shadow:
inset 3px 0 0 var(--atlas-600),
0 6px 16px rgba(8, 42, 38, 0.07);
@@ -777,7 +774,7 @@ body {
.geo-map-panel,
.geo-map-stage,
.map-frame-surface {
background: #dce7e3;
background: var(--gi-surface-sunken);
}
.geo-explorer .map-container,
@@ -789,7 +786,7 @@ body {
.map-frame-surface .maplibregl-ctrl-group {
overflow: hidden;
border: 1px solid rgba(171, 192, 186, 0.78);
border-radius: 0.65rem;
border-radius: var(--gi-radius-md);
box-shadow: var(--atlas-shadow-md);
}
@@ -802,8 +799,8 @@ body {
.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);
border-radius: var(--gi-radius-lg);
background: color-mix(in srgb, var(--gi-surface) 94%, transparent);
box-shadow: var(--atlas-shadow-floating);
backdrop-filter: blur(16px);
}
@@ -811,7 +808,7 @@ body {
.geo-explorer-footer {
min-height: 3rem;
border-top: 1px solid var(--atlas-line);
background: #fbfdfc;
background: var(--gi-brand-50);
color: var(--ink-500);
font-size: 0.7rem;
}
@@ -829,7 +826,7 @@ body {
.export-history-disclosure {
border-color: var(--atlas-line);
border-radius: var(--atlas-radius-md);
background: rgba(255, 255, 255, 0.9);
background: color-mix(in srgb, var(--gi-surface) 90%, transparent);
}
.technical-run-list > summary,
@@ -852,15 +849,15 @@ body {
.workbench-shell textarea {
min-height: 2.65rem;
border-color: var(--atlas-line-strong);
border-radius: 0.62rem;
background: #fcfdfd;
border-radius: var(--gi-radius-md);
background: var(--gi-surface);
}
.workbench-shell input:focus,
.workbench-shell select:focus,
.workbench-shell textarea:focus {
border-color: var(--atlas-600);
background: #ffffff;
background: var(--gi-surface);
box-shadow: 0 0 0 4px rgba(21, 152, 137, 0.12);
}
@@ -915,8 +912,8 @@ body {
@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);
background: color-mix(in srgb, var(--gi-surface) 97%, transparent);
box-shadow: var(--gi-shadow-md);
}
.workbench-sidebar .nav-item {
@@ -926,7 +923,7 @@ body {
.workbench-sidebar .nav-item-active,
.workbench-sidebar .nav-item-active:hover:not(:disabled) {
border-color: #acd2c9;
border-color: var(--gi-brand-50);
color: var(--atlas-800);
background: var(--atlas-50);
box-shadow: none;
@@ -1024,14 +1021,14 @@ body {
align-items: center;
border-bottom: 1px solid var(--atlas-line);
padding: 0.65rem 1rem;
background: #f4fbf9;
background: var(--gi-brand-50);
}
.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 strong small { margin-left: 0.35rem; color: var(--atlas-600); font-size: 0.56rem; font-weight: 600; text-transform: none; }
.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 { display: inline-flex; flex: 0 0 auto; gap: 0.3rem; align-items: center; border-radius: var(--gi-radius-pill); padding: 0.35rem 0.52rem; background: var(--gi-brand-50); color: var(--atlas-800); font-size: 0.57rem; font-weight: 600; text-transform: none; }
.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; }
@@ -1039,19 +1036,19 @@ body {
.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 { 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: var(--gi-radius-md); padding: 0.35rem; background: var(--gi-surface); 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 { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; border: 0; border-radius: var(--gi-radius-md); 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-results > button em { flex: 0 0 auto; color: var(--atlas-700); font-size: 0.6rem; font-style: normal; font-weight: 600; }
.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 span { color: var(--atlas-muted); font-size: 0.56rem; text-transform: none; }
.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-panel-heading h3 small { margin-left: 0.35rem; color: var(--atlas-600); font-size: 0.54rem; font-weight: 600; text-transform: none; }
.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; }
@@ -1104,7 +1101,7 @@ body {
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);
color-mix(in srgb, var(--gi-surface) 76%, transparent);
box-shadow: var(--atlas-shadow-xs);
}
@@ -1134,10 +1131,10 @@ body {
height: 5.25rem;
overflow: hidden;
border: 1px solid rgba(13, 102, 91, 0.14);
border-radius: 1.1rem;
border-radius: var(--gi-radius-xl);
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));
linear-gradient(145deg, color-mix(in srgb, var(--gi-surface) 92%, transparent), rgba(235, 245, 242, 0.82));
box-shadow: inset 0 1px 0 #fff, 0 12px 25px rgba(8, 42, 38, 0.08);
}
@@ -1169,7 +1166,7 @@ body {
height: 2.5rem;
place-items: center;
border: 1px solid color-mix(in srgb, var(--signal-accent) 28%, white);
border-radius: 0.8rem;
border-radius: var(--gi-radius-lg);
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);
@@ -1294,7 +1291,7 @@ body {
.workspace-signal {
width: 4.7rem;
height: 4.1rem;
border-radius: 0.85rem;
border-radius: var(--gi-radius-lg);
}
.workspace-signal-icon {
@@ -1372,7 +1369,7 @@ body {
.project-atlas-copy > p strong {
color: #fff;
font-weight: 650;
font-weight: 600;
}
.project-atlas-metrics {
@@ -1388,7 +1385,7 @@ body {
gap: 0.35rem;
padding: 0.55rem 0.7rem;
border: 1px solid rgba(178, 230, 216, 0.16);
border-radius: 999px;
border-radius: var(--gi-radius-pill);
color: rgba(230, 247, 242, 0.7);
background: rgba(255, 255, 255, 0.055);
font-size: 0.7rem;
@@ -1413,8 +1410,8 @@ body {
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);
border-radius: var(--gi-radius-xl);
box-shadow: var(--gi-shadow-lg);
transform: rotateX(2deg) rotateY(-3deg);
transform-origin: center;
transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 500ms ease;
@@ -1422,7 +1419,7 @@ body {
.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);
box-shadow: var(--gi-shadow-lg);
transform: rotateX(0) rotateY(0) translateY(-0.2rem);
}
@@ -1501,13 +1498,13 @@ body {
gap: 0.4rem;
padding: 0.45rem 0.6rem;
border: 1px solid rgba(190, 236, 224, 0.16);
border-radius: 999px;
border-radius: var(--gi-radius-pill);
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;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
backdrop-filter: blur(12px);
}
@@ -1515,7 +1512,7 @@ body {
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
background: #62dfbd;
background: var(--gi-brand-50);
box-shadow: 0 0 0 0 rgba(98, 223, 189, 0.55);
animation: atlas-live-pulse 2.2s ease-out infinite;
}
@@ -1538,7 +1535,7 @@ body {
min-width: 0;
padding: 0.68rem;
border: 1px solid rgba(178, 230, 216, 0.14);
border-radius: 0.8rem;
border-radius: var(--gi-radius-lg);
color: rgba(230, 247, 242, 0.7);
background: rgba(255, 255, 255, 0.045);
text-align: left;
@@ -1559,7 +1556,7 @@ body {
width: 2rem;
height: 2rem;
place-items: center;
border-radius: 0.58rem;
border-radius: var(--gi-radius-md);
background: rgba(255, 255, 255, 0.08);
}
@@ -1581,15 +1578,15 @@ body {
}
.project-atlas-stage small {
color: rgba(213, 238, 232, 0.48);
color: rgba(213, 238, 232, 0.66);
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.08em;
text-transform: none;
letter-spacing: 0;
}
.project-atlas-stage-ready > span {
color: #092f2b;
background: #79d7bd;
color: var(--gi-brand-600);
background: var(--gi-brand-50);
}
.project-atlas-stage-active {
@@ -1599,8 +1596,8 @@ body {
}
.project-atlas-stage-active > span {
color: #3a2b09;
background: #edc86c;
color: var(--gi-warn);
background: var(--gi-warn-soft);
box-shadow: 0 0 0 0.25rem rgba(237, 200, 108, 0.1);
}
frontend/src/styles/atlas-workbench.css
+42 -42
View File
@@ -65,10 +65,10 @@ textarea {
right: 0.75rem;
width: min(30rem, calc(100vw - 1.5rem));
margin: 0;
border-color: #efc2bf;
border-color: var(--gi-danger-soft);
border-radius: var(--atlas-radius);
background: var(--atlas-danger-soft);
box-shadow: 0 8px 24px rgba(53, 31, 29, 0.12);
box-shadow: var(--gi-shadow-md);
}
.workbench-layout {
@@ -130,7 +130,7 @@ textarea {
color: var(--atlas-primary);
font-family: "Manrope", "Segoe UI", sans-serif;
font-size: 1.05rem;
font-weight: 800;
font-weight: 700;
}
.sidebar-brand-copy {
@@ -190,7 +190,7 @@ textarea {
.workbench-sidebar .nav-item-active {
border-left-color: var(--atlas-primary);
background: #eefaf7;
background: var(--gi-brand-50);
box-shadow: none;
color: var(--atlas-primary);
}
@@ -222,7 +222,7 @@ textarea {
min-height: var(--atlas-topbar-height);
align-items: stretch;
border-bottom: 1px solid var(--atlas-line);
background: #eefdf9;
background: var(--gi-brand-50);
}
.context-account {
@@ -277,8 +277,8 @@ textarea {
}
.context-bar span {
color: var(--atlas-muted) !important;
font-size: 0.58rem !important;
color: var(--atlas-muted);
font-size: 0.58rem;
font-weight: 500;
letter-spacing: 0;
line-height: 1.1;
@@ -368,7 +368,7 @@ textarea {
color: var(--atlas-ink);
font-family: "Manrope", "Segoe UI", sans-serif;
font-size: 1.08rem;
font-weight: 700;
font-weight: 600;
letter-spacing: 0;
}
@@ -482,24 +482,24 @@ textarea {
.section-kicker,
.eyebrow {
color: var(--atlas-secondary) !important;
font-size: 0.62rem !important;
font-weight: 760;
color: var(--atlas-secondary);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0;
}
.status-badge,
.count-pill {
border-color: var(--atlas-line-strong);
border-radius: 999px;
border-radius: var(--gi-radius-pill);
background: var(--atlas-surface-muted);
color: var(--atlas-ink-soft);
box-shadow: none;
}
.status-badge-ready {
border-color: #bddacf;
background: #edf7f3;
border-color: var(--gi-brand-50);
background: var(--gi-brand-50);
color: var(--atlas-primary-strong);
}
@@ -543,7 +543,7 @@ textarea {
color: var(--atlas-ink);
font-family: "Manrope", "Segoe UI", sans-serif;
font-size: 1.08rem;
font-weight: 700;
font-weight: 600;
letter-spacing: 0;
}
@@ -566,7 +566,7 @@ textarea {
.geo-analysis-mode button {
min-height: 1.65rem;
border: 0;
border-radius: 3px;
border-radius: var(--gi-radius-xs);
padding: 0.32rem 0.7rem;
background: transparent;
box-shadow: none;
@@ -577,7 +577,7 @@ textarea {
.geo-analysis-mode button.active {
background: var(--atlas-surface);
color: var(--atlas-primary-strong);
box-shadow: 0 1px 2px rgba(21, 37, 34, 0.08);
box-shadow: var(--gi-shadow-xs);
}
.geo-explorer-advanced {
@@ -645,7 +645,7 @@ textarea {
.geo-results-panel > .geo-panel-heading {
padding: 0.85rem 1rem 0.75rem;
border-bottom: 1px solid var(--atlas-line);
background: #fbfefd;
background: var(--gi-brand-50);
}
.geo-panel-heading {
@@ -677,10 +677,10 @@ textarea {
.geo-loaded-scope {
flex: 0 0 auto;
margin: 0.7rem 0.85rem 0;
border: 1px solid #c7ded8;
border: 1px solid var(--gi-brand-50);
border-radius: var(--atlas-radius);
padding: 0.58rem;
background: #eefaf7;
background: var(--gi-brand-50);
}
.geo-loaded-scope span,
@@ -728,9 +728,9 @@ textarea {
}
.geo-theme-option-active {
border-color: #bddbd4;
border-color: var(--gi-brand-50);
border-radius: var(--atlas-radius);
background: #f5fcfa;
background: var(--gi-brand-50);
box-shadow: inset 4px 0 0 var(--atlas-primary);
}
@@ -779,7 +779,7 @@ textarea {
position: relative;
display: block;
overflow: hidden;
background: #dce8e6;
background: var(--gi-surface-sunken);
}
.geo-map-toolbar {
@@ -798,7 +798,7 @@ textarea {
border-radius: var(--atlas-radius);
padding: 0.22rem;
background: var(--atlas-surface);
box-shadow: 0 2px 8px rgba(22, 38, 34, 0.1);
box-shadow: var(--gi-shadow-sm);
}
.geo-map-toolbar > .geo-panel-heading {
@@ -851,7 +851,7 @@ textarea {
width: 100%;
height: 100%;
min-height: 0;
background: #dce8e6;
background: var(--gi-surface-sunken);
}
.geo-map-canvas .map-container {
@@ -862,8 +862,8 @@ textarea {
.geo-map-legend {
border: 1px solid rgba(21, 37, 34, 0.22);
border-radius: var(--atlas-radius);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 2px 8px rgba(21, 37, 34, 0.1);
background: color-mix(in srgb, var(--gi-surface) 96%, transparent);
box-shadow: var(--gi-shadow-sm);
}
.geo-results-panel {
@@ -911,9 +911,9 @@ textarea {
.geo-result-next-actions {
margin: auto 0.85rem 0.85rem;
border-color: #bad7d1;
border-color: var(--gi-brand-50);
border-radius: var(--atlas-radius);
background: #f0f8f6;
background: var(--gi-brand-50);
}
.geo-explorer-footer {
@@ -935,7 +935,7 @@ textarea {
.source-catalog-panel > .panel-title-row {
border-bottom: 1px solid var(--atlas-line);
padding: 0.85rem 1rem;
background: #fbfefd;
background: var(--gi-brand-50);
}
.source-domain-grid {
@@ -1017,8 +1017,8 @@ textarea {
}
.workspace-grid-data .data-selection-summary {
border-color: #c7ded8;
background: #eefaf7;
border-color: var(--gi-brand-50);
background: var(--gi-brand-50);
}
.workspace-grid-data .entity-card,
@@ -1044,7 +1044,7 @@ textarea {
grid-column: 1 / -1;
border-bottom: 1px solid var(--atlas-line);
padding: 0.75rem 1rem;
background: #fbfefd;
background: var(--gi-brand-50);
}
.geo-assistant-panel > .panel-title-row h2 {
@@ -1069,7 +1069,7 @@ textarea {
border-right: 1px solid var(--atlas-line);
border-radius: 0;
padding: 0.9rem;
background: #eefaf7;
background: var(--gi-brand-50);
}
.assistant-context-strip > div {
@@ -1083,8 +1083,8 @@ textarea {
.assistant-context-strip label > span {
color: var(--atlas-muted);
font-size: 0.59rem;
font-weight: 700;
text-transform: uppercase;
font-weight: 600;
text-transform: none;
}
.assistant-context-strip > div strong {
@@ -1112,15 +1112,15 @@ textarea {
align-items: center;
border-top: 1px solid var(--atlas-line);
padding: 0.5rem 0.75rem;
background: #fbfefd;
background: var(--gi-brand-50);
}
.assistant-suggestions button {
min-height: 1.65rem;
border-color: #bddbd4;
border-color: var(--gi-brand-50);
border-radius: var(--atlas-radius);
padding: 0.3rem 0.55rem;
background: #f5fcfa;
background: var(--gi-brand-50);
color: var(--atlas-ink-soft);
font-size: 0.58rem;
line-height: 1.15;
@@ -1150,7 +1150,7 @@ textarea {
.assistant-message-assistant {
border-left-color: var(--atlas-primary);
background: #f2f8f6;
background: var(--gi-brand-50);
}
.assistant-composer {
@@ -1161,7 +1161,7 @@ textarea {
border-top: 1px solid var(--atlas-line);
border-radius: 0;
padding: 0.55rem 0.75rem;
background: #eefaf7;
background: var(--gi-brand-50);
}
.assistant-composer textarea {
@@ -1551,7 +1551,7 @@ textarea {
width: min(22rem, 34vw);
border-left: 1px solid var(--atlas-line);
background: var(--atlas-surface);
box-shadow: -8px 0 20px rgba(21, 37, 34, 0.06);
box-shadow: var(--gi-shadow-md);
}
/* Ultrawide keeps text rails stable and gives the map the additional width. */
frontend/src/styles/geointel-system.css
+1013 -161
View File
File diff suppressed because it is too large Load Diff
frontend/src/styles/landing-project-story.css
+24 -12
View File
@@ -40,7 +40,7 @@
justify-items: start;
min-width: 0;
border: 1px solid var(--landing-line);
border-radius: .8rem;
border-radius: var(--gi-radius-lg);
padding: .8rem;
background: rgba(255, 255, 255, .72);
color: var(--landing-muted);
@@ -54,7 +54,7 @@
bottom: 0;
left: .8rem;
height: 2px;
border-radius: 999px;
border-radius: var(--gi-radius-pill);
background: var(--landing-primary);
content: '';
opacity: 0;
@@ -69,7 +69,7 @@
color: var(--landing-primary-strong);
}
.landing-story-tabs button[aria-selected='true']::after { opacity: 1; transform: scaleX(1); }
.landing-story-tabs button > span { font-size: .54rem; font-weight: 800; letter-spacing: .1em; }
.landing-story-tabs button > span { font-size: .54rem; font-weight: 700; letter-spacing: .1em; }
.landing-story-tabs svg { width: 1rem; height: 1rem; }
.landing-story-tabs strong { overflow: hidden; max-width: 100%; font-size: .65rem; text-overflow: ellipsis; }
@@ -80,13 +80,13 @@
align-items: end;
margin-top: 1rem;
border-left: 3px solid var(--landing-primary);
border-radius: 0 .8rem .8rem 0;
border-radius: 0 var(--gi-radius-lg) var(--gi-radius-lg) 0;
padding: 1rem 1.1rem;
background: linear-gradient(90deg, rgba(222, 247, 241, .8), rgba(247, 252, 251, .55));
animation: landing-story-enter .42s ease both;
}
.landing-story-detail small { color: var(--landing-primary); font-size: .55rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.landing-story-detail small { color: var(--landing-primary); font-size: .55rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.landing-story-detail h3 { margin: .25rem 0 0; font-family: "Manrope", sans-serif; font-size: 1rem; }
.landing-story-detail p { max-width: 54ch; margin: .35rem 0 0; color: var(--landing-muted); font-size: .69rem; line-height: 1.6; }
.landing-story-metric { display: grid; min-width: 6.5rem; text-align: right; }
@@ -99,15 +99,20 @@
min-height: 38rem;
overflow: hidden;
border: 1px solid rgba(161, 215, 204, .6);
border-radius: 1.6rem;
border-radius: var(--gi-radius-xl);
background: #072f2c;
box-shadow: 0 35px 90px rgba(10, 67, 59, .2);
box-shadow: var(--gi-shadow-lg);
}
.landing-story-map {
position: absolute;
inset: 0;
background: linear-gradient(145deg, rgba(4, 35, 32, .2), rgba(2, 26, 24, .78)), url('/portfolio/geointel-building-qa.webp') center / cover;
/* De afbeelding komt pas wanneer het blok in de buurt van het scherm is;
zie useDeferredBackground. De gradiënt staat er meteen, zodat het vlak
nooit leeg oogt. */
background: linear-gradient(145deg, rgba(4, 35, 32, .2), rgba(2, 26, 24, .78));
background-size: cover;
background-position: center;
filter: saturate(.78) contrast(1.03);
transform: scale(1.035);
transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
@@ -132,14 +137,14 @@
z-index: 2;
display: grid;
border: 1px solid rgba(196, 244, 234, .24);
border-radius: .9rem;
border-radius: var(--gi-radius-lg);
background: rgba(3, 39, 35, .78);
color: #fff;
box-shadow: 0 16px 40px rgba(0, 0, 0, .24);
box-shadow: var(--gi-shadow-lg);
backdrop-filter: blur(13px);
}
.landing-story-status { top: 1.25rem; left: 1.25rem; gap: .2rem; min-width: 10rem; padding: .8rem .95rem; }
.landing-story-status span { color: #8ee7d2; font-size: .52rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.landing-story-status span { color: #8ee7d2; font-size: .52rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.landing-story-status i { display: inline-block; width: .42rem; height: .42rem; margin-right: .4rem; border-radius: 50%; background: #77e2ca; box-shadow: 0 0 0 5px rgba(119, 226, 202, .11); }
.landing-story-status strong { font-family: "Manrope", sans-serif; font-size: .92rem; }
.landing-story-status small { color: rgba(255, 255, 255, .58); font-size: .59rem; }
@@ -163,7 +168,7 @@
.landing-story-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.landing-story-detail { grid-template-columns: 1fr; }
.landing-story-metric { text-align: left; }
.landing-story-visual { min-height: 28rem; border-radius: 1.15rem; }
.landing-story-visual { min-height: 28rem; border-radius: var(--gi-radius-xl); }
}
@media (prefers-reduced-motion: reduce) {
@@ -172,3 +177,10 @@
transition-duration: .01ms !important;
}
}
.landing-story-map[data-achtergrond='geladen'] {
background:
linear-gradient(145deg, rgba(4, 35, 32, .2), rgba(2, 26, 24, .78)),
url('/portfolio/geointel-building-qa.webp') center / cover;
}
frontend/src/styles/landing.css
+69 -59
View File
@@ -61,13 +61,13 @@ body.landing-body {
z-index: 200;
top: -5rem;
left: 1rem;
border-radius: 0.65rem;
border-radius: var(--gi-radius-md);
padding: 0.75rem 1rem;
background: var(--landing-primary-dark);
color: #fff;
font-weight: 700;
font-weight: 600;
text-decoration: none;
box-shadow: 0 12px 30px rgba(4, 42, 37, 0.24);
box-shadow: var(--gi-shadow-md);
}
.landing-skip-link:focus {
@@ -104,8 +104,8 @@ body.landing-body {
.landing-brand-mark {
width: 2.35rem;
height: 2.35rem;
border-radius: 0.7rem;
box-shadow: 0 8px 22px rgba(3, 55, 49, 0.2);
border-radius: var(--gi-radius-md);
box-shadow: var(--gi-shadow-md);
}
.landing-brand-copy {
@@ -122,7 +122,7 @@ body.landing-body {
.landing-brand-copy small {
color: var(--landing-muted);
font-size: 0.59rem;
font-weight: 700;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@@ -138,7 +138,7 @@ body.landing-body {
padding: 0.55rem 0;
color: #3c5a55;
font-size: 0.78rem;
font-weight: 650;
font-weight: 600;
text-decoration: none;
}
@@ -148,7 +148,7 @@ body.landing-body {
bottom: 0.25rem;
left: 0;
height: 2px;
border-radius: 999px;
border-radius: var(--gi-radius-pill);
background: var(--landing-primary);
content: '';
opacity: 0;
@@ -176,10 +176,10 @@ body.landing-body {
.landing-header-login,
.landing-header-guest {
min-height: 2.55rem;
border-radius: 0.62rem;
border-radius: var(--gi-radius-md);
padding: 0.5rem 1rem;
font-size: 0.76rem;
font-weight: 750;
font-weight: 600;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}
@@ -187,7 +187,7 @@ body.landing-body {
border: 1px solid var(--landing-primary);
background: var(--landing-primary);
color: #fff;
box-shadow: 0 9px 22px rgba(8, 120, 108, 0.18);
box-shadow: var(--gi-shadow-md);
}
.landing-header-guest {
@@ -315,17 +315,17 @@ body.landing-body {
margin: 0;
color: var(--landing-primary-strong);
font-size: 0.67rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.105em;
text-transform: uppercase;
}
.landing-kicker {
border: 1px solid rgba(104, 182, 169, 0.52);
border-radius: 999px;
border-radius: var(--gi-radius-pill);
padding: 0.48rem 0.8rem;
background: rgba(225, 250, 245, 0.82);
box-shadow: 0 6px 18px rgba(48, 111, 101, 0.08);
box-shadow: var(--gi-shadow-md);
}
.landing-kicker svg {
@@ -339,7 +339,7 @@ body.landing-body {
color: var(--landing-ink);
font-family: "Manrope", "Segoe UI", sans-serif;
font-size: clamp(3.1rem, 5.2vw, 5.35rem);
font-weight: 750;
font-weight: 600;
letter-spacing: -0.06em;
line-height: 0.99;
text-wrap: balance;
@@ -372,10 +372,10 @@ body.landing-body {
gap: 0.6rem;
align-items: center;
justify-content: center;
border-radius: 0.72rem;
border-radius: var(--gi-radius-md);
padding: 0.8rem 1.2rem;
font-size: 0.82rem;
font-weight: 750;
font-weight: 600;
text-decoration: none;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
@@ -384,7 +384,7 @@ body.landing-body {
border: 1px solid var(--landing-primary);
background: var(--landing-primary);
color: #fff;
box-shadow: 0 14px 30px rgba(8, 120, 108, 0.2);
box-shadow: var(--gi-shadow-md);
}
.landing-secondary-action {
@@ -401,7 +401,7 @@ body.landing-body {
.landing-primary-action:hover:not(:disabled) {
background: var(--landing-primary-strong);
box-shadow: 0 18px 34px rgba(8, 120, 108, 0.24);
box-shadow: var(--gi-shadow-md);
}
.landing-secondary-action:hover {
@@ -478,7 +478,7 @@ body.landing-body {
position: relative;
overflow: hidden;
border: 1px solid rgba(103, 147, 138, 0.48);
border-radius: 1.25rem;
border-radius: var(--gi-radius-xl);
background: rgba(255, 255, 255, 0.96);
box-shadow: var(--landing-shadow);
scroll-margin-top: 6rem;
@@ -543,7 +543,7 @@ body.landing-body {
justify-content: space-between;
color: rgba(255, 255, 255, 0.78);
font-size: 0.61rem;
font-weight: 700;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
@@ -571,10 +571,10 @@ body.landing-body {
align-items: center;
margin: 1.4rem auto 1.1rem 0.7rem;
border: 1px solid rgba(189, 240, 230, 0.25);
border-radius: 0.8rem;
border-radius: var(--gi-radius-lg);
padding: 0.72rem 0.85rem;
background: rgba(5, 36, 32, 0.78);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
box-shadow: var(--gi-shadow-lg);
backdrop-filter: blur(8px);
}
@@ -583,7 +583,7 @@ body.landing-body {
width: 2.15rem;
height: 2.15rem;
place-items: center;
border-radius: 0.62rem;
border-radius: var(--gi-radius-md);
background: rgba(83, 223, 196, 0.16);
color: #7be7d1;
}
@@ -615,7 +615,7 @@ body.landing-body {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid rgba(214, 246, 240, 0.18);
border-radius: 0.72rem;
border-radius: var(--gi-radius-md);
background: rgba(5, 33, 30, 0.66);
backdrop-filter: blur(8px);
}
@@ -666,7 +666,7 @@ body.landing-body {
.landing-login-icon {
width: 2.45rem;
height: 2.45rem;
border-radius: 0.68rem;
border-radius: var(--gi-radius-md);
}
.landing-login-icon svg,
@@ -683,7 +683,7 @@ body.landing-body {
margin: 0 0 0.22rem;
color: var(--landing-primary);
font-size: 0.59rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
@@ -714,7 +714,7 @@ body.landing-body {
margin-top: 0.35rem;
color: #49645f;
font-size: 0.58rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.055em;
text-transform: uppercase;
}
@@ -723,7 +723,7 @@ body.landing-body {
width: 100%;
min-height: 2.85rem;
border: 1px solid #b8d1cc;
border-radius: 0.62rem;
border-radius: var(--gi-radius-md);
padding: 0.7rem 0.78rem;
background: #f4fbf9;
color: var(--landing-ink);
@@ -759,7 +759,7 @@ body.landing-body {
height: 2.15rem;
place-items: center;
border: 0;
border-radius: 0.5rem;
border-radius: var(--gi-radius-sm);
background: transparent;
color: #55716b;
transform: translateY(-50%);
@@ -784,19 +784,19 @@ body.landing-body {
justify-content: center;
margin-top: 0.55rem;
border: 1px solid var(--landing-primary);
border-radius: 0.66rem;
border-radius: var(--gi-radius-md);
padding: 0.72rem 1rem;
background: var(--landing-primary);
color: #fff;
font-size: 0.77rem;
font-weight: 750;
box-shadow: 0 10px 24px rgba(8, 120, 108, 0.16);
font-weight: 600;
box-shadow: var(--gi-shadow-md);
transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.landing-operator-submit:hover:not(:disabled) {
background: var(--landing-primary-strong);
box-shadow: 0 14px 26px rgba(8, 120, 108, 0.22);
box-shadow: var(--gi-shadow-md);
transform: translateY(-1px);
}
@@ -814,7 +814,7 @@ body.landing-body {
margin: 0.5rem 0 0;
border: 1px solid #efc4c1;
border-left: 3px solid #a23e38;
border-radius: 0.5rem;
border-radius: var(--gi-radius-sm);
padding: 0.62rem 0.72rem;
background: #fff3f2;
color: #7c2d29;
@@ -830,7 +830,7 @@ body.landing-body {
margin: 1.15rem 0;
color: #78908b;
font-size: 0.58rem;
font-weight: 650;
font-weight: 600;
}
.landing-access-divider::before,
@@ -846,7 +846,7 @@ body.landing-body {
gap: 0.7rem;
align-items: start;
border: 1px solid #bfe0d9;
border-radius: 0.75rem;
border-radius: var(--gi-radius-md);
padding: 0.78rem;
background: linear-gradient(135deg, #f2fcfa, #ecf8f5);
}
@@ -854,7 +854,7 @@ body.landing-body {
.landing-guest-icon {
width: 2.15rem;
height: 2.15rem;
border-radius: 0.58rem;
border-radius: var(--gi-radius-md);
}
.landing-guest-access > div {
@@ -881,12 +881,12 @@ body.landing-body {
align-items: center;
justify-content: space-between;
border: 1px solid #90c8bd;
border-radius: 0.6rem;
border-radius: var(--gi-radius-md);
padding: 0.62rem 0.78rem;
background: #fff;
color: var(--landing-primary-strong);
font-size: 0.71rem;
font-weight: 750;
font-weight: 600;
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
@@ -970,12 +970,12 @@ body.landing-body {
overflow: hidden;
min-height: 18rem;
border: 1px solid var(--landing-line-soft);
border-radius: 1rem;
border-radius: var(--gi-radius-lg);
padding: clamp(1.35rem, 2.5vw, 1.85rem);
background:
linear-gradient(180deg, rgba(242, 250, 248, 0.58), transparent 55%),
#fff;
box-shadow: 0 18px 45px rgba(19, 63, 56, 0.07);
box-shadow: var(--gi-shadow-lg);
transition: border-color 170ms ease, transform 170ms ease, box-shadow 170ms ease;
}
@@ -992,7 +992,7 @@ body.landing-body {
.landing-capability:hover {
border-color: #acd1ca;
box-shadow: 0 23px 52px rgba(19, 63, 56, 0.1);
box-shadow: var(--gi-shadow-lg);
transform: translateY(-3px);
}
@@ -1007,7 +1007,7 @@ body.landing-body {
width: 2.85rem;
height: 2.85rem;
place-items: center;
border-radius: 0.78rem;
border-radius: var(--gi-radius-lg);
background: var(--landing-mint);
color: var(--landing-primary);
}
@@ -1021,7 +1021,7 @@ body.landing-body {
color: #9aafaa;
font-family: "Manrope", sans-serif;
font-size: 0.68rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.1em;
}
@@ -1058,9 +1058,9 @@ body.landing-body {
min-height: 37rem;
overflow: hidden;
border: 1px solid rgba(115, 151, 144, 0.45);
border-radius: 1.2rem;
border-radius: var(--gi-radius-xl);
background: #0a2824;
box-shadow: 0 28px 70px rgba(10, 48, 42, 0.17);
box-shadow: var(--gi-shadow-lg);
isolation: isolate;
}
@@ -1112,7 +1112,7 @@ body.landing-body {
margin: 0 0 0.7rem;
color: #7be6d1;
font-size: 0.65rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
@@ -1145,11 +1145,11 @@ body.landing-body {
gap: 0.65rem;
align-items: center;
border: 1px solid rgba(202, 244, 236, 0.28);
border-radius: 0.72rem;
border-radius: var(--gi-radius-md);
padding: 0.68rem 0.78rem;
background: rgba(4, 38, 34, 0.76);
color: #fff;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.23);
box-shadow: var(--gi-shadow-lg);
backdrop-filter: blur(10px);
}
@@ -1203,12 +1203,12 @@ body.landing-body {
width: 2rem;
height: 2rem;
place-items: center;
border-radius: 0.55rem;
border-radius: var(--gi-radius-md);
background: var(--landing-mint);
color: var(--landing-primary-strong);
font-family: "Manrope", sans-serif;
font-size: 0.61rem;
font-weight: 800;
font-weight: 700;
}
.landing-workflow-steps h3 {
@@ -1231,7 +1231,7 @@ body.landing-body {
align-items: start;
margin-top: 1.35rem;
border: 1px solid #c2ddd7;
border-radius: 0.8rem;
border-radius: var(--gi-radius-lg);
padding: 1rem;
background: linear-gradient(135deg, #effbf8, #f7fcfb);
scroll-margin-top: 6rem;
@@ -1278,7 +1278,7 @@ body.landing-body {
.landing-footer-mark {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.65rem;
border-radius: var(--gi-radius-md);
}
.landing-footer strong {
@@ -1308,7 +1308,7 @@ body.landing-body {
.landing-footer .itworx-signature > span {
color: rgba(255, 255, 255, 0.45);
font-size: 0.53rem;
font-weight: 700;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
}
@@ -1388,7 +1388,7 @@ body.landing-body {
height: 2.45rem;
place-items: center;
border: 1px solid var(--landing-line);
border-radius: 0.62rem;
border-radius: var(--gi-radius-md);
background: rgba(255, 255, 255, 0.9);
color: var(--landing-ink);
}
@@ -1409,10 +1409,10 @@ body.landing-body {
align-items: stretch;
overflow: hidden;
border: 1px solid var(--landing-line);
border-radius: 0.8rem;
border-radius: var(--gi-radius-lg);
padding: 0.35rem;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 18px 45px rgba(10, 55, 48, 0.15);
box-shadow: var(--gi-shadow-lg);
}
.landing-nav-open {
@@ -1420,7 +1420,7 @@ body.landing-body {
}
.landing-nav a {
border-radius: 0.55rem;
border-radius: var(--gi-radius-md);
padding: 0.75rem 0.8rem;
}
@@ -1720,3 +1720,13 @@ body.landing-body {
transition-duration: 0.01ms !important;
}
}
/* De storingsmelding onder de knop, zolang de bezoeker nog niets geprobeerd
heeft. Een mededeling, geen fout: zie de toelichting in LandingPage.tsx. */
.landing-login-note {
margin: 0.7rem 0 0;
color: var(--landing-muted);
font-size: 0.78rem;
line-height: 1.45;
text-align: center;
}
frontend/src/styles/premium.css
+135 -135
View File
@@ -60,14 +60,14 @@ body {
.workbench-shell button {
border-color: var(--line-strong);
background: #ffffff;
background: var(--gi-surface);
box-shadow: none;
transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.workbench-shell button:hover:not(:disabled) {
border-color: #8fa3ae;
background: #f8fafb;
border-color: var(--gi-line);
background: var(--gi-info-soft);
box-shadow: 0 0 0 3px rgba(40, 105, 168, 0.08);
}
@@ -87,7 +87,7 @@ body {
.workbench-shell select,
.workbench-shell textarea {
border-color: var(--line-strong);
background: #ffffff;
background: var(--gi-surface);
box-shadow: none;
}
@@ -96,9 +96,9 @@ body {
.workbench-shell .context-bar span,
.workbench-shell .status-tile-topline > span:first-child,
.workbench-shell .inspector-field > span {
color: #6b7782;
color: var(--gi-ink-600);
font-size: 0.69rem;
font-weight: 750;
font-weight: 600;
text-transform: uppercase;
}
@@ -115,7 +115,7 @@ body {
align-items: center;
border-bottom: 1px solid var(--line);
padding: 0.65rem 1.25rem;
background: rgba(255, 255, 255, 0.98);
background: var(--gi-surface);
box-shadow: 0 1px 0 rgba(23, 33, 43, 0.03);
backdrop-filter: blur(14px);
}
@@ -133,11 +133,11 @@ body {
height: 2.25rem;
flex: 0 0 2.25rem;
place-items: center;
border-radius: 7px;
border-radius: var(--gi-radius-sm);
background: #123238;
color: #ffffff;
font-size: 0.78rem;
font-weight: 850;
font-weight: 700;
}
.brand-block h1 {
@@ -160,8 +160,8 @@ body {
gap: 0;
justify-content: stretch;
border: 1px solid var(--line);
border-radius: 7px;
background: #f8fafb;
border-radius: var(--gi-radius-sm);
background: var(--gi-info-soft);
}
.context-bar > div {
@@ -188,7 +188,7 @@ body {
display: block;
overflow: hidden;
margin-top: 0.16rem;
color: #27343f;
color: var(--gi-ink-800);
font-size: 0.78rem;
line-height: 1.2;
text-overflow: ellipsis;
@@ -208,7 +208,7 @@ body {
overflow: auto;
border-right: 1px solid var(--line);
padding: 0.9rem 0.7rem;
background: #f8fafb;
background: var(--gi-info-soft);
}
.workbench-sidebar nav {
@@ -233,16 +233,16 @@ body {
width: 100%;
min-height: 2.7rem;
border: 1px solid transparent;
border-radius: 6px;
border-radius: var(--gi-radius-sm);
padding: 0.52rem 0.65rem;
background: transparent;
color: #34424d;
color: var(--gi-ink-800);
text-align: left;
}
.nav-item span {
font-size: 0.86rem;
font-weight: 700;
font-weight: 600;
}
.nav-item small {
@@ -250,7 +250,7 @@ body {
}
.nav-item-active {
border-color: #c8ded9;
border-color: var(--gi-brand-50);
background: var(--accent-soft);
color: var(--accent-strong);
box-shadow: inset 3px 0 0 var(--accent);
@@ -259,9 +259,9 @@ body {
.nav-item-active small {
display: block;
margin-top: 0.18rem;
color: #50746e;
color: var(--gi-ink-600);
font-size: 0.69rem;
font-weight: 550;
font-weight: 500;
line-height: 1.2;
}
@@ -271,7 +271,7 @@ body {
}
.workbench-sidebar .nav-item-active {
border-color: #c8ded9;
border-color: var(--gi-brand-50);
background: var(--accent-soft);
}
@@ -359,8 +359,8 @@ body {
border: 0;
border-left: 1px solid var(--line);
padding: 1rem;
background: #ffffff;
box-shadow: -18px 0 44px rgba(28, 42, 53, 0.16);
background: var(--gi-surface);
box-shadow: var(--gi-shadow-lg);
}
.inspector-header {
@@ -374,7 +374,7 @@ body {
margin: -1rem -1rem 0.8rem;
border-bottom: 1px solid var(--line);
padding: 1rem;
background: rgba(255, 255, 255, 0.98);
background: var(--gi-surface);
}
.inspector-header h2 {
@@ -409,7 +409,7 @@ body {
}
.inspector-tab-active {
border-color: #b6d6d0;
border-color: var(--gi-brand-50);
background: var(--accent-soft);
color: var(--accent-strong);
}
@@ -448,8 +448,8 @@ body {
.handoff-action-card,
.system-provider-card {
border-color: var(--line);
border-radius: 7px;
background: #ffffff;
border-radius: var(--gi-radius-sm);
background: var(--gi-surface);
box-shadow: none;
}
@@ -469,10 +469,10 @@ body {
.status-pill,
.status-badge,
.workflow-step-status {
border-radius: 999px;
background: #edf2f4;
color: #4e5d68;
font-weight: 700;
border-radius: var(--gi-radius-pill);
background: var(--gi-info-soft);
color: var(--gi-ink-600);
font-weight: 600;
}
.data-panel-form-block,
@@ -488,23 +488,23 @@ body {
.table-scroll {
border-color: var(--line);
border-radius: 6px;
border-radius: var(--gi-radius-sm);
}
table thead th {
background: #f4f7f8;
color: #53616d;
background: var(--gi-info-soft);
color: var(--gi-ink-600);
}
table tbody tr:hover {
background: #f7fafb;
background: var(--gi-info-soft);
}
.error,
.warning-message,
.success-message,
.demo-message {
border-radius: 6px;
border-radius: var(--gi-radius-sm);
}
/* Data workspace */
@@ -512,9 +512,9 @@ table tbody tr:hover {
details.data-panel-form-block {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 6px;
border-radius: var(--gi-radius-sm);
padding: 0;
background: #f8fafb;
background: var(--gi-info-soft);
}
details.data-panel-form-block > summary {
@@ -524,9 +524,9 @@ details.data-panel-form-block > summary {
align-items: center;
justify-content: space-between;
padding: 0.65rem 0.75rem;
color: #33424d;
color: var(--gi-ink-800);
font-size: 0.8rem;
font-weight: 750;
font-weight: 600;
list-style: none;
}
@@ -542,7 +542,7 @@ details.data-panel-form-block > summary::after {
details.data-panel-form-block[open] > summary {
border-bottom: 1px solid var(--line);
background: #ffffff;
background: var(--gi-surface);
}
details.data-panel-form-block[open] > summary::after {
@@ -560,7 +560,7 @@ details.data-panel-form-block > form {
.workspace-grid-data .data-selection-summary {
border-left: 3px solid var(--accent);
background: #f7faf9;
background: var(--gi-brand-50);
}
.workspace-grid-data .data-panel-list-block {
@@ -576,26 +576,26 @@ details.data-panel-form-block > form {
gap: 0.55rem;
padding: 0.65rem;
border-bottom: 1px solid var(--line);
background: #f8fafb;
background: var(--gi-info-soft);
}
.catalog-browser-toolbar-datasets {
margin-bottom: 0.65rem;
border: 1px solid var(--line);
border-radius: 6px;
border-radius: var(--gi-radius-sm);
}
.catalog-search-field {
display: grid;
gap: 0.3rem;
color: #53616d;
color: var(--gi-ink-600);
font-size: 0.74rem;
font-weight: 750;
font-weight: 600;
}
.catalog-search-field input {
margin: 0;
background: #ffffff;
background: var(--gi-surface);
}
.catalog-pagination {
@@ -662,9 +662,9 @@ details.data-panel-form-block > form {
details.ai-lab-model-surface {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 6px;
border-radius: var(--gi-radius-sm);
padding: 0;
background: #f8fafb;
background: var(--gi-info-soft);
}
details.ai-lab-model-surface > summary {
@@ -675,9 +675,9 @@ details.ai-lab-model-surface > summary {
align-items: center;
justify-content: space-between;
padding: 0.65rem 0.75rem;
color: #33424d;
color: var(--gi-ink-800);
font-size: 0.8rem;
font-weight: 750;
font-weight: 600;
list-style: none;
}
@@ -699,13 +699,13 @@ details.ai-lab-model-surface > summary strong {
margin-left: auto;
color: var(--muted);
font-size: 0.72rem;
font-weight: 650;
font-weight: 600;
}
.ai-lab-disclosure-body {
border-top: 1px solid var(--line);
padding: 0.75rem;
background: #ffffff;
background: var(--gi-surface);
}
.ai-lab-shell .lab-block,
@@ -714,8 +714,8 @@ details.ai-lab-model-surface > summary strong {
.ai-lab-shell .ai-lab-qa-surface,
.ai-lab-shell > .ai-lab-model-surface[aria-label="Local model asset selection"] {
border-color: var(--line);
border-radius: 6px;
background: #ffffff;
border-radius: var(--gi-radius-sm);
background: var(--gi-surface);
box-shadow: none;
}
@@ -773,9 +773,9 @@ details.ai-lab-model-surface > summary strong {
.workbench-status-strip {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 7px;
border-radius: var(--gi-radius-sm);
padding: 0;
background: #ffffff;
background: var(--gi-surface);
}
.status-strip-header {
@@ -786,7 +786,7 @@ details.ai-lab-model-surface > summary strong {
margin: 0;
border-bottom: 1px solid var(--line);
padding: 1.1rem 1.2rem;
background: #ffffff;
background: var(--gi-surface);
}
.status-strip-header h2 {
@@ -821,7 +821,7 @@ details.ai-lab-model-surface > summary strong {
margin-top: 0.25rem;
color: var(--muted);
font-size: 0.72rem;
font-weight: 650;
font-weight: 600;
}
.status-strip-grid {
@@ -838,7 +838,7 @@ details.ai-lab-model-surface > summary strong {
border-right: 1px solid var(--line);
border-radius: 0;
padding: 0.75rem 0.8rem;
background: #ffffff;
background: var(--gi-surface);
}
.status-tile:last-child {
@@ -861,7 +861,7 @@ details.ai-lab-model-surface > summary strong {
display: -webkit-box;
overflow: hidden;
margin-top: 0.4rem;
color: #23313b;
color: var(--gi-ink-800);
font-size: 0.87rem;
line-height: 1.25;
-webkit-box-orient: vertical;
@@ -882,12 +882,12 @@ details.ai-lab-model-surface > summary strong {
.source-freshness-panel {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 7px;
background: #ffffff;
border-radius: var(--gi-radius-sm);
background: var(--gi-surface);
}
.source-freshness-header {
display: flex !important;
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
@@ -925,7 +925,7 @@ details.ai-lab-model-surface > summary strong {
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: #f8fafb;
background: var(--gi-info-soft);
}
.source-freshness-summary span {
@@ -942,7 +942,7 @@ details.ai-lab-model-surface > summary strong {
.source-freshness-summary strong {
display: block;
margin-bottom: 0.15rem;
color: #24333d;
color: var(--gi-ink-800);
font-size: 1.05rem;
}
@@ -985,7 +985,7 @@ details.ai-lab-model-surface > summary strong {
}
.source-freshness-main strong {
color: #23313b;
color: var(--gi-ink-800);
font-size: 0.86rem;
}
@@ -1002,8 +1002,8 @@ details.ai-lab-model-surface > summary strong {
.source-freshness-status {
flex: 0 0 auto;
color: #33424d !important;
font-weight: 750;
color: var(--gi-ink-800);
font-weight: 600;
}
.source-freshness-meta {
@@ -1026,7 +1026,7 @@ details.ai-lab-model-surface > summary strong {
.source-catalog-section {
border-top: 1px solid var(--line);
background: #fbfcfd;
background: var(--gi-info-soft);
}
.source-catalog-heading {
@@ -1043,7 +1043,7 @@ details.ai-lab-model-surface > summary strong {
}
.source-catalog-heading strong {
color: #23313b;
color: var(--gi-ink-800);
font-size: 0.84rem;
}
@@ -1055,7 +1055,7 @@ details.ai-lab-model-surface > summary strong {
.source-catalog-heading > span {
flex: 0 0 auto;
font-weight: 700;
font-weight: 600;
}
.source-catalog-empty {
@@ -1105,7 +1105,7 @@ details.ai-lab-model-surface > summary strong {
.grb-refresh-plan {
border-top: 1px solid var(--line);
background: #ffffff;
background: var(--gi-surface);
}
.grb-refresh-plan-heading {
@@ -1123,7 +1123,7 @@ details.ai-lab-model-surface > summary strong {
}
.grb-refresh-plan-heading strong {
color: #23313b;
color: var(--gi-ink-800);
font-size: 0.84rem;
}
@@ -1134,7 +1134,7 @@ details.ai-lab-model-surface > summary strong {
.grb-refresh-plan-heading > span {
flex: 0 0 auto;
font-weight: 750;
font-weight: 600;
}
.grb-refresh-layer-list {
@@ -1181,9 +1181,9 @@ details.ai-lab-model-surface > summary strong {
}
.grb-refresh-layer > div:first-child span {
color: #4d5c66;
color: var(--gi-ink-600);
font-size: 0.72rem;
font-weight: 750;
font-weight: 600;
}
.grb-refresh-layer p {
@@ -1198,9 +1198,9 @@ details.ai-lab-model-surface > summary strong {
gap: 1rem;
justify-content: space-between;
padding: 0.72rem 1rem;
color: #33424d;
color: var(--gi-ink-800);
font-size: 0.78rem;
font-weight: 700;
font-weight: 600;
}
.source-freshness-list {
@@ -1274,7 +1274,7 @@ details.ai-lab-model-surface > summary strong {
border: 1px solid var(--line);
border-left: 1px solid var(--line);
padding: 1rem 1.1rem;
background: #ffffff;
background: var(--gi-surface);
}
.workflow-guidance-panel .panel-title-row {
@@ -1295,23 +1295,23 @@ details.ai-lab-model-surface > summary strong {
min-width: 0;
min-height: 5rem;
border: 1px solid transparent;
border-radius: 6px;
border-radius: var(--gi-radius-sm);
padding: 0.65rem;
background: #f5f7f8;
background: var(--gi-surface);
text-align: left;
}
.workflow-guidance-step:hover:not(:disabled) {
border-color: #bdcbd2;
background: #f0f4f5;
border-color: var(--gi-line);
background: var(--gi-surface-soft);
}
.workflow-guidance-step-ready {
background: #f0f7f4;
background: var(--gi-brand-50);
}
.workflow-guidance-step-active {
border-color: #91c5ba;
border-color: var(--gi-brand-50);
background: var(--accent-soft);
}
@@ -1334,7 +1334,7 @@ details.ai-lab-model-surface > summary strong {
border: 1px solid var(--line);
border-left: 1px solid var(--line);
padding: 0.8rem 1rem;
background: #ffffff;
background: var(--gi-surface);
}
.overview-action-copy h2 {
@@ -1380,7 +1380,7 @@ details.ai-lab-model-surface > summary strong {
order: 1;
border: 1px solid var(--line);
padding: 0.75rem;
background: #ffffff;
background: var(--gi-surface);
}
.map-workspace-shell .map-toolbar {
@@ -1398,9 +1398,9 @@ details.ai-lab-model-surface > summary strong {
.layer-control-card {
min-height: 3.9rem;
border: 1px solid var(--line);
border-radius: 6px;
border-radius: var(--gi-radius-sm);
padding: 0.45rem 0.55rem;
background: #f8fafb;
background: var(--gi-info-soft);
}
.map-status {
@@ -1411,9 +1411,9 @@ details.ai-lab-model-surface > summary strong {
min-height: auto;
align-content: center;
border-left: 3px solid var(--accent);
border-radius: 4px;
border-radius: var(--gi-radius-xs);
padding: 0.45rem 0.65rem;
background: #f3f8f7;
background: var(--gi-brand-50);
}
.map-status strong {
@@ -1445,8 +1445,8 @@ details.ai-lab-model-surface > summary strong {
.detection-qa-diagnostic span {
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
font-weight: 700;
text-transform: none;
}
.detection-qa-diagnostic strong {
@@ -1461,15 +1461,15 @@ details.ai-lab-model-surface > summary strong {
.detection-qa-diagnostic-caution {
border-left-color: var(--warning);
background: #fff8eb;
background: var(--gi-warn-soft);
}
.basemap-policy-notice {
margin-bottom: 0.65rem;
border: 0;
border-radius: 5px;
border-radius: var(--gi-radius-xs);
padding: 0.45rem 0.6rem;
background: #f3f6f8;
background: var(--gi-info-soft);
}
.basemap-policy-notice strong,
@@ -1480,11 +1480,11 @@ details.ai-lab-model-surface > summary strong {
.map-frame-surface {
order: 2;
overflow: hidden;
border: 1px solid #aebac2;
border-radius: 7px;
border: 1px solid var(--gi-line);
border-radius: var(--gi-radius-sm);
padding: 0;
background: #e9eff1;
box-shadow: 0 7px 22px rgba(29, 43, 54, 0.09);
background: var(--gi-info-soft);
box-shadow: var(--gi-shadow-md);
}
.map-frame-surface .map-container,
@@ -1499,8 +1499,8 @@ details.ai-lab-model-surface > summary strong {
.map-advanced-tools {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 7px;
background: #ffffff;
border-radius: var(--gi-radius-sm);
background: var(--gi-surface);
}
.map-layer-details {
@@ -1524,9 +1524,9 @@ details.ai-lab-model-surface > summary strong {
align-items: center;
justify-content: space-between;
padding: 0.7rem 0.85rem;
color: #263540;
color: var(--gi-ink-800);
font-size: 0.82rem;
font-weight: 750;
font-weight: 600;
list-style: none;
}
@@ -1597,8 +1597,8 @@ details.ai-lab-model-surface > summary strong {
.map-empty-state {
margin: 0;
border: 1px dashed #afbdc5;
background: #f8fafb;
border: 1px dashed var(--gi-line);
background: var(--gi-info-soft);
}
.map-inspection-surface {
@@ -1613,9 +1613,9 @@ details.ai-lab-model-surface > summary strong {
.gis-test-run-surface {
border: 1px solid var(--line);
border-radius: 7px;
border-radius: var(--gi-radius-sm);
padding: 1rem;
background: #ffffff;
background: var(--gi-surface);
}
.gis-test-run-grid,
@@ -1635,7 +1635,7 @@ details.ai-lab-model-surface > summary strong {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
border-radius: 0;
background: #ffffff;
background: var(--gi-surface);
}
.map-advanced-tools-body > div:nth-child(2n) {
@@ -1644,8 +1644,8 @@ details.ai-lab-model-surface > summary strong {
.qa-evidence-map-status {
border: 1px solid var(--line);
border-radius: 7px;
background: #ffffff;
border-radius: var(--gi-radius-sm);
background: var(--gi-surface);
}
/* Responsive shell */
@@ -1736,7 +1736,7 @@ details.ai-lab-model-surface > summary strong {
border: 0;
border-bottom: 1px solid var(--line);
padding: 0.45rem 0.65rem;
background: #ffffff;
background: var(--gi-surface);
}
.workbench-sidebar nav {
@@ -1953,9 +1953,9 @@ details.ai-lab-model-surface > summary strong {
display: grid;
gap: 0.2rem;
border: 1px solid var(--line);
border-radius: 6px;
border-radius: var(--gi-radius-sm);
padding: 0.65rem 0.7rem;
background: #f7faf9;
background: var(--gi-brand-50);
}
.geo-loaded-scope span,
@@ -1974,7 +1974,7 @@ details.ai-lab-model-surface > summary strong {
gap: 0.8rem;
border-top: 1px solid var(--line);
padding: 0.8rem;
background: #ffffff;
background: var(--gi-surface);
}
.technical-management-body > .compact-form {
@@ -1992,8 +1992,8 @@ details.ai-lab-model-surface > summary strong {
.export-history-disclosure {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 6px;
background: #f8fafb;
border-radius: var(--gi-radius-sm);
background: var(--gi-info-soft);
}
.technical-run-list > summary,
@@ -2012,9 +2012,9 @@ details.ai-lab-model-surface > summary strong {
align-items: center;
justify-content: space-between;
padding: 0.62rem 0.75rem;
color: #33424d;
color: var(--gi-ink-800);
font-size: 0.8rem;
font-weight: 750;
font-weight: 600;
list-style: none;
}
@@ -2063,7 +2063,7 @@ details.ai-lab-model-surface > summary strong {
overflow: auto;
border-top: 1px solid var(--line);
padding: 0.65rem;
background: #ffffff;
background: var(--gi-surface);
}
.quality-advanced-disclosure {
@@ -2083,8 +2083,8 @@ details.ai-lab-model-surface > summary strong {
margin: -0.25rem 0 0.65rem;
border-left: 3px solid #b37a2d;
padding: 0.45rem 0.65rem;
background: #fffbeb;
color: #6f4b18;
background: var(--gi-warn-soft);
color: var(--gi-warn);
}
.quality-advanced-disclosure > summary strong {
@@ -2138,7 +2138,7 @@ details.ai-lab-model-surface > summary strong {
overflow: auto;
padding: 0.5rem;
list-style: none;
background: #ffffff;
background: var(--gi-surface);
}
.dataset-history-list li {
@@ -2183,13 +2183,13 @@ details.ai-lab-model-surface > summary strong {
min-width: 0;
gap: 0.25rem;
border: 1px solid var(--line);
border-radius: 6px;
border-radius: var(--gi-radius-sm);
padding: 0.75rem;
background: #ffffff;
background: var(--gi-surface);
}
.ai-user-summary-card-primary {
border-color: #bfd8d2;
border-color: var(--gi-brand-50);
background: var(--accent-soft);
}
@@ -2263,7 +2263,7 @@ details.ai-lab-model-surface > summary strong {
gap: 0.75rem;
border-top: 1px solid var(--line);
padding: 0.75rem;
background: #ffffff;
background: var(--gi-surface);
}
.export-history-body > div:first-child {
@@ -2321,15 +2321,15 @@ details.ai-lab-model-surface > summary strong {
.workflow-guidance-steps .workflow-guidance-step {
border-color: transparent;
background: #f5f7f8;
background: var(--gi-surface);
}
.workflow-guidance-steps .workflow-guidance-step-ready {
background: #f0f7f4;
background: var(--gi-brand-50);
}
.workflow-guidance-steps .workflow-guidance-step-active {
border-color: #91c5ba;
border-color: var(--gi-brand-50);
background: var(--accent-soft);
}
}
@@ -2349,7 +2349,7 @@ details.ai-lab-model-surface > summary strong {
width: fit-content;
cursor: pointer;
color: var(--muted);
font-weight: 750;
font-weight: 600;
}
.technical-inline-details[open] > summary {
@@ -2429,7 +2429,7 @@ details.ai-lab-model-surface > summary strong {
min-width: 0;
gap: 0.15rem;
border: 1px solid var(--line);
border-radius: 6px;
border-radius: var(--gi-radius-sm);
padding: 0.55rem;
background: var(--panel-soft);
}
@@ -2449,7 +2449,7 @@ details.ai-lab-model-surface > summary strong {
.geo-image-quality-context {
margin: 0;
border-left: 2px solid #91c5ba;
border-left: 2px solid var(--gi-brand-50);
padding-left: 0.55rem;
color: var(--muted);
font-size: 0.7rem;
@@ -2500,9 +2500,9 @@ details.ai-lab-model-surface > summary strong {
display: grid;
gap: 0.6rem;
border: 1px solid var(--line);
border-radius: 6px;
border-radius: var(--gi-radius-sm);
padding: 0.7rem;
background: #ffffff;
background: var(--gi-surface);
}
.detection-review-item-heading {
frontend/src/styles/professionalization.css
+29 -29
View File
@@ -36,13 +36,13 @@
}
.context-account-guest {
border-color: #9fcfc4;
color: #0c5e55;
background: linear-gradient(180deg, #f7fffc, #e8f7f3);
border-color: var(--gi-brand-50);
color: var(--gi-brand-600);
background: linear-gradient(180deg, var(--gi-brand-50), var(--gi-brand-50));
}
.context-account-guest > svg {
color: #0d7d6f;
color: var(--gi-brand-600);
}
.workbench-shell-guest .workbench-stage {
@@ -57,18 +57,18 @@
gap: 0.72rem;
align-items: center;
min-width: 0;
border-bottom: 1px solid #b7dbd3;
border-bottom: 1px solid var(--gi-brand-50);
padding: 0.68rem 1.35rem;
color: #164d47;
color: var(--gi-brand-600);
background:
radial-gradient(circle at 12% 0%, rgba(57, 172, 151, 0.13), transparent 16rem),
linear-gradient(90deg, #edf9f6, #f7fcfa);
linear-gradient(90deg, var(--gi-brand-50), var(--gi-brand-50));
}
.guest-mode-banner > svg {
width: 1.2rem;
height: 1.2rem;
color: #0f766e;
color: var(--gi-brand-600);
}
.guest-mode-banner > div {
@@ -85,7 +85,7 @@
.guest-mode-banner span:not(.guest-mode-badge) {
overflow: hidden;
color: #52736d;
color: var(--gi-ink-600);
font-size: 0.72rem;
line-height: 1.4;
text-overflow: ellipsis;
@@ -93,13 +93,13 @@
}
.guest-mode-badge {
border: 1px solid #9bcfc3;
border-radius: 999px;
border: 1px solid var(--gi-brand-50);
border-radius: var(--gi-radius-pill);
padding: 0.33rem 0.62rem;
color: #0d665b;
background: rgba(255, 255, 255, 0.82);
color: var(--gi-brand-600);
background: color-mix(in srgb, var(--gi-surface) 82%, transparent);
font-size: 0.66rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.045em;
text-transform: uppercase;
}
@@ -112,12 +112,12 @@
max-width: min(28rem, calc(100vw - 2rem));
gap: 0.65rem;
align-items: center;
border: 1px solid #b7d9d1;
border-radius: 0.85rem;
border: 1px solid var(--gi-brand-50);
border-radius: var(--gi-radius-lg);
padding: 0.72rem 0.9rem;
color: #164d47;
color: var(--gi-brand-600);
background: rgba(250, 255, 253, 0.97);
box-shadow: 0 18px 44px rgba(9, 65, 57, 0.16);
box-shadow: var(--gi-shadow-lg);
backdrop-filter: blur(16px);
}
@@ -125,9 +125,9 @@
width: 0.85rem;
height: 0.85rem;
flex: 0 0 auto;
border: 2px solid #b5ddd4;
border: 2px solid var(--gi-brand-50);
border-top-color: #0f766e;
border-radius: 999px;
border-radius: var(--gi-radius-pill);
animation: geointel-guest-spin 0.8s linear infinite;
}
@@ -145,9 +145,9 @@
grid-template-columns: auto minmax(0, 1fr);
gap: 0.78rem;
align-items: start;
border: 1px solid #b9ddd5;
color: #174f48;
background: linear-gradient(135deg, #eef9f6, #fbfefd);
border: 1px solid var(--gi-brand-50);
color: var(--gi-brand-600);
background: linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
}
.geo-guest-preview-note {
@@ -160,7 +160,7 @@
width: 1.12rem;
height: 1.12rem;
margin-top: 0.08rem;
color: #0f766e;
color: var(--gi-brand-600);
}
.geo-guest-preview-note > div,
@@ -177,21 +177,21 @@
.geo-guest-preview-note span,
.guest-readonly-card span {
color: #54756f;
color: var(--gi-ink-600);
font-size: 0.72rem;
line-height: 1.45;
}
.guest-readonly-card {
border-radius: 0.9rem;
border-radius: var(--gi-radius-lg);
padding: 0.9rem 1rem;
box-shadow: 0 8px 22px rgba(20, 81, 71, 0.06);
box-shadow: var(--gi-shadow-md);
}
.geo-result-next-actions-readonly {
grid-template-columns: minmax(0, 1fr);
border-color: #b9dcd4;
background: #f1faf7;
border-color: var(--gi-brand-50);
background: var(--gi-brand-50);
}
.geo-result-next-actions-readonly small {