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 = [ const capabilityItems = [
{ {
icon: MapPinned, icon: MapPinned,
number: '01',
title: 'Eén kaartgerichte werkruimte', title: 'Eén kaartgerichte werkruimte',
description: description:
'Selecteer een gebied in België of de Belgische Noordzee en werk verder vanuit dezelfde ruimtelijke context.', 'Selecteer een gebied in België of de Belgische Noordzee en werk verder vanuit dezelfde ruimtelijke context.',
}, },
{ {
icon: Database, icon: Database,
number: '02',
title: 'Bronnen blijven herkenbaar', title: 'Bronnen blijven herkenbaar',
description: description:
'Autoriteit, meetmoment, dekking, CRS en beperkingen blijven zichtbaar in plaats van achter één generieke kaartlaag te verdwijnen.', 'Autoriteit, meetmoment, dekking, CRS en beperkingen blijven zichtbaar in plaats van achter één generieke kaartlaag te verdwijnen.',
}, },
{ {
icon: ShieldCheck, icon: ShieldCheck,
number: '03',
title: 'Kwaliteit vóór resultaat', title: 'Kwaliteit vóór resultaat',
description: description:
'Vergelijk referentie- en kandidaatgegevens, controleer bewijs en exporteer pas wanneer de context klopt.', '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 [password, setPassword] = useState('')
const [pendingAction, setPendingAction] = useState<'operator' | 'guest' | null>(null) const [pendingAction, setPendingAction] = useState<'operator' | 'guest' | null>(null)
const [authError, setAuthError] = useState<string | null>(null) const [authError, setAuthError] = useState<string | null>(null)
const [attempted, setAttempted] = useState(false)
const [showPassword, setShowPassword] = useState(false) const [showPassword, setShowPassword] = useState(false)
const [menuOpen, setMenuOpen] = useState(false) const [menuOpen, setMenuOpen] = useState(false)
const usernameRef = useRef<HTMLInputElement | null>(null) const usernameRef = useRef<HTMLInputElement | null>(null)
@@ -84,6 +82,7 @@ export function LandingPage({
const submitLogin = async (event: FormEvent<HTMLFormElement>) => { const submitLogin = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault() event.preventDefault()
setPendingAction('operator') setPendingAction('operator')
setAttempted(true)
setAuthError(null) setAuthError(null)
try { try {
const session = await login(username.trim(), password) const session = await login(username.trim(), password)
@@ -98,6 +97,7 @@ export function LandingPage({
const submitGuestLogin = async () => { const submitGuestLogin = async () => {
setMenuOpen(false) setMenuOpen(false)
setPendingAction('guest') setPendingAction('guest')
setAttempted(true)
setAuthError(null) setAuthError(null)
if (typeof accessPanelRef.current?.scrollIntoView === 'function') { if (typeof accessPanelRef.current?.scrollIntoView === 'function') {
accessPanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }) accessPanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' })
@@ -278,7 +278,7 @@ export function LandingPage({
</button> </button>
</div> </div>
{authError || serviceError ? ( {authError || (serviceError && attempted) ? (
<p className="landing-login-error" role="alert">{authError ?? serviceError}</p> <p className="landing-login-error" role="alert">{authError ?? serviceError}</p>
) : null} ) : null}
@@ -290,6 +290,13 @@ export function LandingPage({
<LogIn aria-hidden="true" /> <LogIn aria-hidden="true" />
{pendingAction === 'operator' ? 'Veilig aanmelden…' : 'Inloggen als operator'} {pendingAction === 'operator' ? 'Veilig aanmelden…' : 'Inloggen als operator'}
</button> </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> </form>
{guestAccessEnabled ? ( {guestAccessEnabled ? (
@@ -326,11 +333,10 @@ export function LandingPage({
</div> </div>
<div className="landing-capability-grid"> <div className="landing-capability-grid">
{capabilityItems.map(({ icon: Icon, number, title, description }) => ( {capabilityItems.map(({ icon: Icon, title, description }) => (
<article key={title} className="landing-capability"> <article key={title} className="landing-capability">
<div className="landing-capability-topline"> <div className="landing-capability-topline">
<span className="landing-capability-icon" aria-hidden="true"><Icon /></span> <span className="landing-capability-icon" aria-hidden="true"><Icon /></span>
<small>{number}</small>
</div> </div>
<h3>{title}</h3> <h3>{title}</h3>
<p>{description}</p> <p>{description}</p>
frontend/src/components/datasets/DatasetPanel.tsx
+1 -6
View File
@@ -172,28 +172,24 @@ export function DatasetPanel({
key: 'selected', key: 'selected',
label: 'Geselecteerd', label: 'Geselecteerd',
count: selectedDatasetId ? 1 : 0, count: selectedDatasetId ? 1 : 0,
hint: 'Actief',
className: 'dataset-role-selected', className: 'dataset-role-selected',
}, },
{ {
key: 'reference', key: 'reference',
label: 'Referentie', label: 'Referentie',
count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'reference').length, count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'reference').length,
hint: 'Officieel',
className: 'dataset-role-reference', className: 'dataset-role-reference',
}, },
{ {
key: 'candidate', key: 'candidate',
label: 'Resultaat', label: 'Resultaat',
count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'candidate').length, count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'candidate').length,
hint: 'Afgeleid',
className: 'dataset-role-candidate', className: 'dataset-role-candidate',
}, },
{ {
key: 'source', key: 'source',
label: 'Basisbron', label: 'Basisbron',
count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'source').length, count: primaryDatasets.filter((dataset) => normalizeDatasetRole(dataset) === 'source').length,
hint: 'Ingeladen',
className: 'dataset-role-source', className: 'dataset-role-source',
}, },
] ]
@@ -277,9 +273,8 @@ export function DatasetPanel({
<div className="dataset-role-summary-grid" aria-label="Dataset role summary"> <div className="dataset-role-summary-grid" aria-label="Dataset role summary">
{roleSummaries.map((summary) => ( {roleSummaries.map((summary) => (
<div className={`dataset-role-summary ${summary.className}`} key={summary.key}> <div className={`dataset-role-summary ${summary.className}`} key={summary.key}>
<span>{summary.label}</span>
<strong>{summary.count}</strong> <strong>{summary.count}</strong>
<small>{summary.hint}</small> <span>{summary.label}</span>
</div> </div>
))} ))}
</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') expect(screen.getByRole('tab', { name: /Detecties/ }).textContent).toContain('volgende stap')
fireEvent.click(screen.getByRole('tab', { name: /NVIDIA GPU/ })) fireEvent.click(screen.getByRole('tab', { name: /Berekening/ }))
expect(screen.getByRole('tabpanel').textContent).toContain('Lokale PyTorch-inferentie') 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 = [ const pipelineStages = [
{ key: 'imagery', label: 'Orthofoto', title: 'Gegeorefereerd bronbeeld', detail: 'CRS, resolutie en ruimtelijke dekking blijven bij de dataset bewaard.', icon: Image }, { 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: '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: '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: '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: '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 }, { 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 ] as const
@@ -36,15 +36,15 @@ export function AiPipelineIllustration({
<div className="ai-pipeline-heading"> <div className="ai-pipeline-heading">
<div> <div>
<p className="eyebrow">Van pixel naar bewijs</p> <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> <p>Open een schakel om te zien welke technische context GeoIntel door de volledige analyse bewaart.</p>
</div> </div>
<span className={gpuReady ? 'ai-pipeline-gpu ai-pipeline-gpu-ready' : 'ai-pipeline-gpu'}> <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> </span>
</div> </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" /> <span className="ai-pipeline-flow" aria-hidden="true" />
{pipelineStages.map(({ key, label, icon: Icon }, index) => ( {pipelineStages.map(({ key, label, icon: Icon }, index) => (
<button <button
frontend/src/components/exports/ExportCenter.tsx
+4 -4
View File
@@ -275,8 +275,8 @@ export function ExportCenter({
})} })}
{availableLatestArtifacts.length === 0 ? ( {availableLatestArtifacts.length === 0 ? (
<div className="result-state result-state-empty latest-download-empty"> <div className="result-state result-state-empty latest-download-empty">
<strong>Nog geen downloads gemaakt</strong> <strong>Nog geen recente downloads</strong>
<p>Kies hieronder een rapport of de actieve kaartlaag.</p> <p>De laatst bewaarde bestanden verschijnen hier.</p>
</div> </div>
) : null} ) : null}
</div> </div>
@@ -377,8 +377,8 @@ export function ExportCenter({
) : null} ) : null}
{exports.length === 0 ? ( {exports.length === 0 ? (
<div className="result-state result-state-empty"> <div className="result-state result-state-empty">
<strong>Nog geen downloads gemaakt.</strong> <strong>Nog niets bewaard</strong>
<p>Kies hierboven een leesbaar rapport, projectoverzicht of kaartlaag.</p> <p>Maak een leesbaar rapport, een projectoverzicht, of bewaar de actieve kaartlaag.</p>
</div> </div>
) : null} ) : null}
</div> </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' } from 'lucide-react'
import type { WorkspaceKey } from '../overview/OverviewWorkspace' import type { WorkspaceKey } from '../overview/OverviewWorkspace'
import { GeoIntelMark } from '../brand/GeoIntelBrand' import { GeoIntelMark } from '../brand/GeoIntelBrand'
import { ItWorxSignature } from '../brand/ItWorxSignature'
export interface WorkspaceNavigationItem { export interface WorkspaceNavigationItem {
key: WorkspaceKey key: WorkspaceKey
@@ -86,7 +85,6 @@ export function WorkbenchNavigation({
</div> </div>
))} ))}
</nav> </nav>
<ItWorxSignature />
</aside> </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 transparent 15rem
), ),
linear-gradient(180deg, var(--atlas-900), var(--atlas-950)); 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 { .sidebar-brand {
@@ -101,7 +101,7 @@ body {
width: 2.65rem; width: 2.65rem;
height: 2.65rem; height: 2.65rem;
border: 1px solid rgba(173, 238, 227, 0.44); border: 1px solid rgba(173, 238, 227, 0.44);
border-radius: 0.8rem; border-radius: var(--gi-radius-lg);
object-fit: cover; object-fit: cover;
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14),
@@ -120,7 +120,7 @@ body {
.itworx-signature > span { .itworx-signature > span {
color: rgba(223, 250, 245, 0.48); color: rgba(223, 250, 245, 0.48);
font-size: 0.58rem; font-size: 0.58rem;
font-weight: 700; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -173,12 +173,12 @@ body {
gap: 0.75rem; gap: 0.75rem;
margin: 0.2rem 0; margin: 0.2rem 0;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 0.75rem; border-radius: var(--gi-radius-md);
padding: 0.68rem 0.72rem; padding: 0.68rem 0.72rem;
color: rgba(239, 252, 249, 0.7); color: rgba(239, 252, 249, 0.7);
background: transparent; background: transparent;
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 650; font-weight: 600;
box-shadow: none; box-shadow: none;
} }
@@ -209,9 +209,9 @@ body {
bottom: 0.68rem; bottom: 0.68rem;
left: -0.86rem; left: -0.86rem;
width: 0.22rem; width: 0.22rem;
border-radius: 0 999px 999px 0; border-radius: 0 var(--gi-radius-pill) var(--gi-radius-pill) 0;
background: #69d5c2; background: var(--gi-brand-50);
box-shadow: 0 0 14px rgba(105, 213, 194, 0.72); box-shadow: var(--gi-shadow-md);
content: ""; content: "";
} }
@@ -234,7 +234,7 @@ body {
border-bottom: 1px solid rgba(194, 210, 205, 0.72); border-bottom: 1px solid rgba(194, 210, 205, 0.72);
padding: 0.72rem 1.35rem; padding: 0.72rem 1.35rem;
background: rgba(250, 252, 251, 0.9); 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%); backdrop-filter: blur(18px) saturate(135%);
} }
@@ -246,7 +246,7 @@ body {
position: relative; position: relative;
min-width: 0; min-width: 0;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 0.72rem; border-radius: var(--gi-radius-md);
padding: 0.48rem 0.72rem 0.52rem; padding: 0.48rem 0.72rem 0.52rem;
background: rgba(238, 248, 246, 0.62); background: rgba(238, 248, 246, 0.62);
transition: transition:
@@ -256,13 +256,13 @@ body {
} }
.context-bar > div:first-child { .context-bar > div:first-child {
border-color: #c7ded8; border-color: var(--gi-brand-50);
background: #eaf6f3; background: var(--gi-brand-50);
} }
.workbench-shell .context-bar span { .workbench-shell .context-bar span {
margin-bottom: 0.16rem; margin-bottom: 0.16rem;
color: #6d827c; color: var(--gi-ink-600);
font-size: 0.66rem; font-size: 0.66rem;
letter-spacing: 0.055em; letter-spacing: 0.055em;
} }
@@ -270,16 +270,16 @@ body {
.context-bar strong { .context-bar strong {
color: var(--ink-950); color: var(--ink-950);
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 650; font-weight: 600;
} }
.context-health { .context-health {
min-height: 2.45rem; min-height: 2.45rem;
border: 1px solid #cfe0dc; border: 1px solid var(--gi-surface-sunken);
border-radius: 999px; border-radius: var(--gi-radius-pill);
padding: 0.45rem 0.78rem; padding: 0.45rem 0.78rem;
color: var(--atlas-800); color: var(--atlas-800);
background: #f4faf8; background: var(--gi-brand-50);
font-size: 0.75rem; font-size: 0.75rem;
} }
@@ -293,14 +293,14 @@ body {
.context-account { .context-account {
min-height: 2.55rem; min-height: 2.55rem;
border: 1px solid var(--atlas-line); border: 1px solid var(--atlas-line);
border-radius: 999px; border-radius: var(--gi-radius-pill);
padding: 0.22rem 0.28rem 0.22rem 0.68rem; padding: 0.22rem 0.28rem 0.22rem 0.68rem;
background: var(--paper); background: var(--paper);
box-shadow: var(--atlas-shadow-xs); box-shadow: var(--atlas-shadow-xs);
} }
.context-account button { .context-account button {
border-radius: 999px; border-radius: var(--gi-radius-pill);
} }
/* Calm, singular operational notice */ /* Calm, singular operational notice */
@@ -315,10 +315,10 @@ body {
width: min(26rem, calc(100vw - 2rem)); width: min(26rem, calc(100vw - 2rem));
gap: 0.7rem; gap: 0.7rem;
align-items: start; align-items: start;
border: 1px solid #e6c9b2; border: 1px solid var(--gi-warn-soft);
border-radius: 0.9rem; border-radius: var(--gi-radius-lg);
padding: 0.82rem 0.95rem; padding: 0.82rem 0.95rem;
color: #6f3b1c; color: var(--gi-warn);
background: rgba(255, 250, 244, 0.96); background: rgba(255, 250, 244, 0.96);
box-shadow: var(--atlas-shadow-floating); box-shadow: var(--atlas-shadow-floating);
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
@@ -327,7 +327,7 @@ body {
.workspace-notice > svg { .workspace-notice > svg {
width: 1.08rem; width: 1.08rem;
margin-top: 0.08rem; margin-top: 0.08rem;
color: #b26530; color: var(--gi-warn);
} }
.workspace-notice > div { .workspace-notice > div {
@@ -340,7 +340,7 @@ body {
} }
.workspace-notice span { .workspace-notice span {
color: #865337; color: var(--gi-warn);
font-size: 0.74rem; font-size: 0.74rem;
line-height: 1.45; line-height: 1.45;
} }
@@ -372,7 +372,7 @@ body {
color: var(--ink-950); color: var(--ink-950);
font-family: "Manrope", sans-serif; font-family: "Manrope", sans-serif;
font-size: clamp(1.65rem, 2vw, 2.25rem); font-size: clamp(1.65rem, 2vw, 2.25rem);
font-weight: 700; font-weight: 600;
letter-spacing: -0.045em; letter-spacing: -0.045em;
} }
@@ -388,21 +388,21 @@ body {
.primary-action, .primary-action,
.quick-action-button { .quick-action-button {
min-height: 2.65rem; min-height: 2.65rem;
border-radius: 0.68rem; border-radius: var(--gi-radius-md);
padding-inline: 1rem; padding-inline: 1rem;
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 700; font-weight: 600;
} }
.workbench-shell .primary-action { .workbench-shell .primary-action {
border-color: var(--atlas-700); border-color: var(--atlas-700);
background: linear-gradient(135deg, var(--atlas-700), var(--atlas-600)); 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) { .workbench-shell .primary-action:hover:not(:disabled) {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(13, 102, 91, 0.22); box-shadow: var(--gi-shadow-md);
} }
/* Shared premium surfaces */ /* Shared premium surfaces */
@@ -418,7 +418,7 @@ body {
.export-history-disclosure { .export-history-disclosure {
border: 1px solid rgba(194, 210, 205, 0.78); border: 1px solid rgba(194, 210, 205, 0.78);
border-radius: var(--atlas-radius-lg); 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); box-shadow: var(--atlas-shadow-sm);
} }
@@ -429,12 +429,9 @@ body {
letter-spacing: -0.025em; letter-spacing: -0.025em;
} }
.workbench-shell .eyebrow, /* De regel voor .eyebrow en .section-kicker die hier stond, was een tweede
.workbench-shell .section-kicker { definitie van wat atlas-workbench.css al zette, met afwijkende waarden. Ze
color: var(--atlas-700); verplichtte die andere regel tot !important. Eén definitie is genoeg. */
font-size: 0.69rem;
letter-spacing: 0.06em;
}
.muted, .muted,
.panel-title-row .muted, .panel-title-row .muted,
@@ -448,17 +445,17 @@ body {
.status-badge, .status-badge,
.count-pill, .count-pill,
.status-pill { .status-pill {
border-radius: 999px; border-radius: var(--gi-radius-pill);
padding: 0.28rem 0.52rem; padding: 0.28rem 0.52rem;
font-size: 0.66rem; font-size: 0.66rem;
font-weight: 750; font-weight: 600;
letter-spacing: 0.015em; letter-spacing: 0.015em;
} }
.result-state, .result-state,
.empty-state { .empty-state {
min-height: 9rem; min-height: 9rem;
border: 1px dashed #bfd0cb; border: 1px dashed var(--gi-line);
border-radius: var(--atlas-radius-md); border-radius: var(--atlas-radius-md);
padding: 1.2rem; padding: 1.2rem;
background: background:
@@ -467,13 +464,13 @@ body {
rgba(21, 152, 137, 0.08), rgba(21, 152, 137, 0.08),
transparent 8rem transparent 8rem
), ),
#fbfdfc; var(--gi-brand-50);
} }
.result-state-error { .result-state-error {
border-style: solid; border-style: solid;
border-color: #ebc7bf; border-color: var(--gi-danger-soft);
background: #fff8f6; background: var(--gi-danger-soft);
} }
/* Status becomes an executive health overview */ /* Status becomes an executive health overview */
@@ -492,7 +489,7 @@ body {
rgba(91, 204, 184, 0.22), rgba(91, 204, 184, 0.22),
transparent 14rem transparent 14rem
), ),
linear-gradient(135deg, #f8fcfb, #eef7f4); linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
} }
.status-strip-header h2 { .status-strip-header h2 {
@@ -520,7 +517,7 @@ body {
border-radius: 50%; border-radius: 50%;
padding: 0; padding: 0;
background: var(--paper); background: var(--paper);
box-shadow: 0 12px 30px rgba(8, 42, 38, 0.13); box-shadow: var(--gi-shadow-md);
} }
.status-readiness-orbit { .status-readiness-orbit {
@@ -578,7 +575,7 @@ body {
.status-strip-grid { .status-strip-grid {
gap: 0.65rem; gap: 0.65rem;
padding: 0.75rem; padding: 0.75rem;
background: #f7faf9; background: var(--gi-brand-50);
} }
.status-tile, .status-tile,
@@ -587,7 +584,7 @@ body {
min-height: 8rem; min-height: 8rem;
overflow: hidden; overflow: hidden;
border: 1px solid var(--atlas-line); border: 1px solid var(--atlas-line);
border-radius: 0.8rem; border-radius: var(--gi-radius-lg);
padding: 0.9rem; padding: 0.9rem;
background: var(--paper); background: var(--paper);
} }
@@ -604,7 +601,7 @@ body {
} }
.status-tile-ready { .status-tile-ready {
border-color: #c6dfd8; border-color: var(--gi-brand-50);
box-shadow: inset 0 3px 0 #45a996; box-shadow: inset 0 3px 0 #45a996;
} }
@@ -638,12 +635,12 @@ body {
} }
.workbench-shell .workspace-grid-data > section.source-catalog-panel { .workbench-shell .workspace-grid-data > section.source-catalog-panel {
border-color: #c5dcd6; border-color: var(--gi-brand-50);
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(238, 248, 246, 0.72), 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); var(--paper);
} }
@@ -664,7 +661,7 @@ body {
.workspace-grid-data .dataset-card { .workspace-grid-data .dataset-card {
border-color: var(--atlas-line); border-color: var(--atlas-line);
padding: 0.9rem; padding: 0.9rem;
background: #fcfdfd; background: var(--gi-surface);
transition: transition:
transform 140ms ease, transform 140ms ease,
border-color 140ms ease, border-color 140ms ease,
@@ -674,7 +671,7 @@ body {
.workspace-grid-data .entity-card:hover, .workspace-grid-data .entity-card:hover,
.workspace-grid-data .dataset-card:hover { .workspace-grid-data .dataset-card:hover {
transform: translateY(-1px); transform: translateY(-1px);
border-color: #9fc8be; border-color: var(--gi-brand-50);
box-shadow: var(--atlas-shadow-sm); box-shadow: var(--atlas-shadow-sm);
} }
@@ -698,7 +695,7 @@ body {
rgba(84, 196, 176, 0.14), rgba(84, 196, 176, 0.14),
transparent 16rem transparent 16rem
), ),
linear-gradient(135deg, #fbfdfc, #f3f9f7); linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
} }
.geo-explorer-header h2 { .geo-explorer-header h2 {
@@ -714,13 +711,13 @@ body {
.geo-explorer-layout { .geo-explorer-layout {
gap: 0; gap: 0;
background: #eef3f1; background: var(--gi-surface-soft);
} }
.geo-theme-panel, .geo-theme-panel,
.geo-insight-panel { .geo-insight-panel {
border: 0; border: 0;
background: rgba(255, 255, 255, 0.97); background: color-mix(in srgb, var(--gi-surface) 97%, transparent);
} }
.geo-theme-panel { .geo-theme-panel {
@@ -735,7 +732,7 @@ body {
.geo-insight-panel > .geo-panel-heading { .geo-insight-panel > .geo-panel-heading {
min-height: 5rem; min-height: 5rem;
padding: 1rem; padding: 1rem;
background: #fbfdfc; background: var(--gi-brand-50);
} }
.geo-theme-list { .geo-theme-list {
@@ -746,20 +743,20 @@ body {
.geo-theme-option { .geo-theme-option {
min-height: 3.65rem; min-height: 3.65rem;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 0.75rem; border-radius: var(--gi-radius-md);
padding: 0.65rem 0.72rem; padding: 0.65rem 0.72rem;
background: transparent; background: transparent;
} }
.geo-theme-option:hover:not(:disabled) { .geo-theme-option:hover:not(:disabled) {
border-color: #c4d9d4; border-color: var(--gi-line);
background: #f5faf8; background: var(--gi-brand-50);
} }
.geo-theme-option-active, .geo-theme-option-active,
.geo-theme-option-active:hover:not(:disabled) { .geo-theme-option-active:hover:not(:disabled) {
border-color: #9bc9be; border-color: var(--gi-brand-50);
background: linear-gradient(135deg, #e7f5f1, #f4faf8); background: linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
box-shadow: box-shadow:
inset 3px 0 0 var(--atlas-600), inset 3px 0 0 var(--atlas-600),
0 6px 16px rgba(8, 42, 38, 0.07); 0 6px 16px rgba(8, 42, 38, 0.07);
@@ -777,7 +774,7 @@ body {
.geo-map-panel, .geo-map-panel,
.geo-map-stage, .geo-map-stage,
.map-frame-surface { .map-frame-surface {
background: #dce7e3; background: var(--gi-surface-sunken);
} }
.geo-explorer .map-container, .geo-explorer .map-container,
@@ -789,7 +786,7 @@ body {
.map-frame-surface .maplibregl-ctrl-group { .map-frame-surface .maplibregl-ctrl-group {
overflow: hidden; overflow: hidden;
border: 1px solid rgba(171, 192, 186, 0.78); 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); box-shadow: var(--atlas-shadow-md);
} }
@@ -802,8 +799,8 @@ body {
.geo-map-toolbar, .geo-map-toolbar,
.map-toolbar { .map-toolbar {
border: 1px solid rgba(172, 194, 188, 0.82); border: 1px solid rgba(172, 194, 188, 0.82);
border-radius: 0.78rem; border-radius: var(--gi-radius-lg);
background: rgba(255, 255, 255, 0.94); background: color-mix(in srgb, var(--gi-surface) 94%, transparent);
box-shadow: var(--atlas-shadow-floating); box-shadow: var(--atlas-shadow-floating);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
} }
@@ -811,7 +808,7 @@ body {
.geo-explorer-footer { .geo-explorer-footer {
min-height: 3rem; min-height: 3rem;
border-top: 1px solid var(--atlas-line); border-top: 1px solid var(--atlas-line);
background: #fbfdfc; background: var(--gi-brand-50);
color: var(--ink-500); color: var(--ink-500);
font-size: 0.7rem; font-size: 0.7rem;
} }
@@ -829,7 +826,7 @@ body {
.export-history-disclosure { .export-history-disclosure {
border-color: var(--atlas-line); border-color: var(--atlas-line);
border-radius: var(--atlas-radius-md); 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, .technical-run-list > summary,
@@ -852,15 +849,15 @@ body {
.workbench-shell textarea { .workbench-shell textarea {
min-height: 2.65rem; min-height: 2.65rem;
border-color: var(--atlas-line-strong); border-color: var(--atlas-line-strong);
border-radius: 0.62rem; border-radius: var(--gi-radius-md);
background: #fcfdfd; background: var(--gi-surface);
} }
.workbench-shell input:focus, .workbench-shell input:focus,
.workbench-shell select:focus, .workbench-shell select:focus,
.workbench-shell textarea:focus { .workbench-shell textarea:focus {
border-color: var(--atlas-600); border-color: var(--atlas-600);
background: #ffffff; background: var(--gi-surface);
box-shadow: 0 0 0 4px rgba(21, 152, 137, 0.12); box-shadow: 0 0 0 4px rgba(21, 152, 137, 0.12);
} }
@@ -915,8 +912,8 @@ body {
@media (max-width: 920px) { @media (max-width: 920px) {
.workbench-sidebar { .workbench-sidebar {
color: var(--ink-700); color: var(--ink-700);
background: rgba(255, 255, 255, 0.97); background: color-mix(in srgb, var(--gi-surface) 97%, transparent);
box-shadow: 0 8px 24px rgba(8, 42, 38, 0.08); box-shadow: var(--gi-shadow-md);
} }
.workbench-sidebar .nav-item { .workbench-sidebar .nav-item {
@@ -926,7 +923,7 @@ body {
.workbench-sidebar .nav-item-active, .workbench-sidebar .nav-item-active,
.workbench-sidebar .nav-item-active:hover:not(:disabled) { .workbench-sidebar .nav-item-active:hover:not(:disabled) {
border-color: #acd2c9; border-color: var(--gi-brand-50);
color: var(--atlas-800); color: var(--atlas-800);
background: var(--atlas-50); background: var(--atlas-50);
box-shadow: none; box-shadow: none;
@@ -1024,14 +1021,14 @@ body {
align-items: center; align-items: center;
border-bottom: 1px solid var(--atlas-line); border-bottom: 1px solid var(--atlas-line);
padding: 0.65rem 1rem; 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 { 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 > div { display: grid; min-width: 0; gap: 0.12rem; }
.municipality-search-copy strong { font-size: 0.78rem; } .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-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-shortcut svg { width: 0.8rem; height: 0.8rem; }
.municipality-search-control { position: relative; min-width: 0; } .municipality-search-control { position: relative; min-width: 0; }
.municipality-search-control label { position: relative; display: block; 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 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 { 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-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 > 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:hover { background: var(--atlas-50); }
.municipality-search-results > button span { display: grid; min-width: 0; gap: 0.12rem; } .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 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 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 { 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; } .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 { 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 > 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 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); border-radius: var(--atlas-radius-lg);
background: background:
radial-gradient(circle at 45% 0%, rgba(44, 163, 141, 0.09), transparent 12rem), 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); box-shadow: var(--atlas-shadow-xs);
} }
@@ -1134,10 +1131,10 @@ body {
height: 5.25rem; height: 5.25rem;
overflow: hidden; overflow: hidden;
border: 1px solid rgba(13, 102, 91, 0.14); border: 1px solid rgba(13, 102, 91, 0.14);
border-radius: 1.1rem; border-radius: var(--gi-radius-xl);
background: background:
radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--signal-accent) 18%, transparent), transparent 2.6rem), 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); box-shadow: inset 0 1px 0 #fff, 0 12px 25px rgba(8, 42, 38, 0.08);
} }
@@ -1169,7 +1166,7 @@ body {
height: 2.5rem; height: 2.5rem;
place-items: center; place-items: center;
border: 1px solid color-mix(in srgb, var(--signal-accent) 28%, white); border: 1px solid color-mix(in srgb, var(--signal-accent) 28%, white);
border-radius: 0.8rem; border-radius: var(--gi-radius-lg);
color: #fff; color: #fff;
background: linear-gradient(145deg, color-mix(in srgb, var(--signal-accent) 85%, white), var(--signal-accent)); 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); box-shadow: 0 8px 20px color-mix(in srgb, var(--signal-accent) 25%, transparent);
@@ -1294,7 +1291,7 @@ body {
.workspace-signal { .workspace-signal {
width: 4.7rem; width: 4.7rem;
height: 4.1rem; height: 4.1rem;
border-radius: 0.85rem; border-radius: var(--gi-radius-lg);
} }
.workspace-signal-icon { .workspace-signal-icon {
@@ -1372,7 +1369,7 @@ body {
.project-atlas-copy > p strong { .project-atlas-copy > p strong {
color: #fff; color: #fff;
font-weight: 650; font-weight: 600;
} }
.project-atlas-metrics { .project-atlas-metrics {
@@ -1388,7 +1385,7 @@ body {
gap: 0.35rem; gap: 0.35rem;
padding: 0.55rem 0.7rem; padding: 0.55rem 0.7rem;
border: 1px solid rgba(178, 230, 216, 0.16); 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); color: rgba(230, 247, 242, 0.7);
background: rgba(255, 255, 255, 0.055); background: rgba(255, 255, 255, 0.055);
font-size: 0.7rem; font-size: 0.7rem;
@@ -1413,8 +1410,8 @@ body {
height: auto; height: auto;
overflow: visible; overflow: visible;
border: 1px solid rgba(157, 222, 205, 0.18); border: 1px solid rgba(157, 222, 205, 0.18);
border-radius: 1.75rem; border-radius: var(--gi-radius-xl);
box-shadow: 0 30px 70px rgba(1, 19, 23, 0.36); box-shadow: var(--gi-shadow-lg);
transform: rotateX(2deg) rotateY(-3deg); transform: rotateX(2deg) rotateY(-3deg);
transform-origin: center; transform-origin: center;
transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 500ms ease; 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:hover .project-atlas-visual svg,
.project-atlas:focus-within .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); transform: rotateX(0) rotateY(0) translateY(-0.2rem);
} }
@@ -1501,13 +1498,13 @@ body {
gap: 0.4rem; gap: 0.4rem;
padding: 0.45rem 0.6rem; padding: 0.45rem 0.6rem;
border: 1px solid rgba(190, 236, 224, 0.16); 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); color: rgba(238, 252, 248, 0.78);
background: rgba(5, 35, 37, 0.7); background: rgba(5, 35, 37, 0.7);
font-size: 0.62rem; font-size: 0.62rem;
font-weight: 700; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0;
text-transform: uppercase; text-transform: none;
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
} }
@@ -1515,7 +1512,7 @@ body {
width: 0.42rem; width: 0.42rem;
height: 0.42rem; height: 0.42rem;
border-radius: 50%; border-radius: 50%;
background: #62dfbd; background: var(--gi-brand-50);
box-shadow: 0 0 0 0 rgba(98, 223, 189, 0.55); box-shadow: 0 0 0 0 rgba(98, 223, 189, 0.55);
animation: atlas-live-pulse 2.2s ease-out infinite; animation: atlas-live-pulse 2.2s ease-out infinite;
} }
@@ -1538,7 +1535,7 @@ body {
min-width: 0; min-width: 0;
padding: 0.68rem; padding: 0.68rem;
border: 1px solid rgba(178, 230, 216, 0.14); 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); color: rgba(230, 247, 242, 0.7);
background: rgba(255, 255, 255, 0.045); background: rgba(255, 255, 255, 0.045);
text-align: left; text-align: left;
@@ -1559,7 +1556,7 @@ body {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
place-items: center; place-items: center;
border-radius: 0.58rem; border-radius: var(--gi-radius-md);
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
} }
@@ -1581,15 +1578,15 @@ body {
} }
.project-atlas-stage small { .project-atlas-stage small {
color: rgba(213, 238, 232, 0.48); color: rgba(213, 238, 232, 0.66);
font-size: 0.6rem; font-size: 0.6rem;
text-transform: uppercase; text-transform: none;
letter-spacing: 0.08em; letter-spacing: 0;
} }
.project-atlas-stage-ready > span { .project-atlas-stage-ready > span {
color: #092f2b; color: var(--gi-brand-600);
background: #79d7bd; background: var(--gi-brand-50);
} }
.project-atlas-stage-active { .project-atlas-stage-active {
@@ -1599,8 +1596,8 @@ body {
} }
.project-atlas-stage-active > span { .project-atlas-stage-active > span {
color: #3a2b09; color: var(--gi-warn);
background: #edc86c; background: var(--gi-warn-soft);
box-shadow: 0 0 0 0.25rem rgba(237, 200, 108, 0.1); 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; right: 0.75rem;
width: min(30rem, calc(100vw - 1.5rem)); width: min(30rem, calc(100vw - 1.5rem));
margin: 0; margin: 0;
border-color: #efc2bf; border-color: var(--gi-danger-soft);
border-radius: var(--atlas-radius); border-radius: var(--atlas-radius);
background: var(--atlas-danger-soft); background: var(--atlas-danger-soft);
box-shadow: 0 8px 24px rgba(53, 31, 29, 0.12); box-shadow: var(--gi-shadow-md);
} }
.workbench-layout { .workbench-layout {
@@ -130,7 +130,7 @@ textarea {
color: var(--atlas-primary); color: var(--atlas-primary);
font-family: "Manrope", "Segoe UI", sans-serif; font-family: "Manrope", "Segoe UI", sans-serif;
font-size: 1.05rem; font-size: 1.05rem;
font-weight: 800; font-weight: 700;
} }
.sidebar-brand-copy { .sidebar-brand-copy {
@@ -190,7 +190,7 @@ textarea {
.workbench-sidebar .nav-item-active { .workbench-sidebar .nav-item-active {
border-left-color: var(--atlas-primary); border-left-color: var(--atlas-primary);
background: #eefaf7; background: var(--gi-brand-50);
box-shadow: none; box-shadow: none;
color: var(--atlas-primary); color: var(--atlas-primary);
} }
@@ -222,7 +222,7 @@ textarea {
min-height: var(--atlas-topbar-height); min-height: var(--atlas-topbar-height);
align-items: stretch; align-items: stretch;
border-bottom: 1px solid var(--atlas-line); border-bottom: 1px solid var(--atlas-line);
background: #eefdf9; background: var(--gi-brand-50);
} }
.context-account { .context-account {
@@ -277,8 +277,8 @@ textarea {
} }
.context-bar span { .context-bar span {
color: var(--atlas-muted) !important; color: var(--atlas-muted);
font-size: 0.58rem !important; font-size: 0.58rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0; letter-spacing: 0;
line-height: 1.1; line-height: 1.1;
@@ -368,7 +368,7 @@ textarea {
color: var(--atlas-ink); color: var(--atlas-ink);
font-family: "Manrope", "Segoe UI", sans-serif; font-family: "Manrope", "Segoe UI", sans-serif;
font-size: 1.08rem; font-size: 1.08rem;
font-weight: 700; font-weight: 600;
letter-spacing: 0; letter-spacing: 0;
} }
@@ -482,24 +482,24 @@ textarea {
.section-kicker, .section-kicker,
.eyebrow { .eyebrow {
color: var(--atlas-secondary) !important; color: var(--atlas-secondary);
font-size: 0.62rem !important; font-size: 0.62rem;
font-weight: 760; font-weight: 600;
letter-spacing: 0; letter-spacing: 0;
} }
.status-badge, .status-badge,
.count-pill { .count-pill {
border-color: var(--atlas-line-strong); border-color: var(--atlas-line-strong);
border-radius: 999px; border-radius: var(--gi-radius-pill);
background: var(--atlas-surface-muted); background: var(--atlas-surface-muted);
color: var(--atlas-ink-soft); color: var(--atlas-ink-soft);
box-shadow: none; box-shadow: none;
} }
.status-badge-ready { .status-badge-ready {
border-color: #bddacf; border-color: var(--gi-brand-50);
background: #edf7f3; background: var(--gi-brand-50);
color: var(--atlas-primary-strong); color: var(--atlas-primary-strong);
} }
@@ -543,7 +543,7 @@ textarea {
color: var(--atlas-ink); color: var(--atlas-ink);
font-family: "Manrope", "Segoe UI", sans-serif; font-family: "Manrope", "Segoe UI", sans-serif;
font-size: 1.08rem; font-size: 1.08rem;
font-weight: 700; font-weight: 600;
letter-spacing: 0; letter-spacing: 0;
} }
@@ -566,7 +566,7 @@ textarea {
.geo-analysis-mode button { .geo-analysis-mode button {
min-height: 1.65rem; min-height: 1.65rem;
border: 0; border: 0;
border-radius: 3px; border-radius: var(--gi-radius-xs);
padding: 0.32rem 0.7rem; padding: 0.32rem 0.7rem;
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
@@ -577,7 +577,7 @@ textarea {
.geo-analysis-mode button.active { .geo-analysis-mode button.active {
background: var(--atlas-surface); background: var(--atlas-surface);
color: var(--atlas-primary-strong); 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 { .geo-explorer-advanced {
@@ -645,7 +645,7 @@ textarea {
.geo-results-panel > .geo-panel-heading { .geo-results-panel > .geo-panel-heading {
padding: 0.85rem 1rem 0.75rem; padding: 0.85rem 1rem 0.75rem;
border-bottom: 1px solid var(--atlas-line); border-bottom: 1px solid var(--atlas-line);
background: #fbfefd; background: var(--gi-brand-50);
} }
.geo-panel-heading { .geo-panel-heading {
@@ -677,10 +677,10 @@ textarea {
.geo-loaded-scope { .geo-loaded-scope {
flex: 0 0 auto; flex: 0 0 auto;
margin: 0.7rem 0.85rem 0; margin: 0.7rem 0.85rem 0;
border: 1px solid #c7ded8; border: 1px solid var(--gi-brand-50);
border-radius: var(--atlas-radius); border-radius: var(--atlas-radius);
padding: 0.58rem; padding: 0.58rem;
background: #eefaf7; background: var(--gi-brand-50);
} }
.geo-loaded-scope span, .geo-loaded-scope span,
@@ -728,9 +728,9 @@ textarea {
} }
.geo-theme-option-active { .geo-theme-option-active {
border-color: #bddbd4; border-color: var(--gi-brand-50);
border-radius: var(--atlas-radius); border-radius: var(--atlas-radius);
background: #f5fcfa; background: var(--gi-brand-50);
box-shadow: inset 4px 0 0 var(--atlas-primary); box-shadow: inset 4px 0 0 var(--atlas-primary);
} }
@@ -779,7 +779,7 @@ textarea {
position: relative; position: relative;
display: block; display: block;
overflow: hidden; overflow: hidden;
background: #dce8e6; background: var(--gi-surface-sunken);
} }
.geo-map-toolbar { .geo-map-toolbar {
@@ -798,7 +798,7 @@ textarea {
border-radius: var(--atlas-radius); border-radius: var(--atlas-radius);
padding: 0.22rem; padding: 0.22rem;
background: var(--atlas-surface); 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 { .geo-map-toolbar > .geo-panel-heading {
@@ -851,7 +851,7 @@ textarea {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
background: #dce8e6; background: var(--gi-surface-sunken);
} }
.geo-map-canvas .map-container { .geo-map-canvas .map-container {
@@ -862,8 +862,8 @@ textarea {
.geo-map-legend { .geo-map-legend {
border: 1px solid rgba(21, 37, 34, 0.22); border: 1px solid rgba(21, 37, 34, 0.22);
border-radius: var(--atlas-radius); border-radius: var(--atlas-radius);
background: rgba(255, 255, 255, 0.96); background: color-mix(in srgb, var(--gi-surface) 96%, transparent);
box-shadow: 0 2px 8px rgba(21, 37, 34, 0.1); box-shadow: var(--gi-shadow-sm);
} }
.geo-results-panel { .geo-results-panel {
@@ -911,9 +911,9 @@ textarea {
.geo-result-next-actions { .geo-result-next-actions {
margin: auto 0.85rem 0.85rem; margin: auto 0.85rem 0.85rem;
border-color: #bad7d1; border-color: var(--gi-brand-50);
border-radius: var(--atlas-radius); border-radius: var(--atlas-radius);
background: #f0f8f6; background: var(--gi-brand-50);
} }
.geo-explorer-footer { .geo-explorer-footer {
@@ -935,7 +935,7 @@ textarea {
.source-catalog-panel > .panel-title-row { .source-catalog-panel > .panel-title-row {
border-bottom: 1px solid var(--atlas-line); border-bottom: 1px solid var(--atlas-line);
padding: 0.85rem 1rem; padding: 0.85rem 1rem;
background: #fbfefd; background: var(--gi-brand-50);
} }
.source-domain-grid { .source-domain-grid {
@@ -1017,8 +1017,8 @@ textarea {
} }
.workspace-grid-data .data-selection-summary { .workspace-grid-data .data-selection-summary {
border-color: #c7ded8; border-color: var(--gi-brand-50);
background: #eefaf7; background: var(--gi-brand-50);
} }
.workspace-grid-data .entity-card, .workspace-grid-data .entity-card,
@@ -1044,7 +1044,7 @@ textarea {
grid-column: 1 / -1; grid-column: 1 / -1;
border-bottom: 1px solid var(--atlas-line); border-bottom: 1px solid var(--atlas-line);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: #fbfefd; background: var(--gi-brand-50);
} }
.geo-assistant-panel > .panel-title-row h2 { .geo-assistant-panel > .panel-title-row h2 {
@@ -1069,7 +1069,7 @@ textarea {
border-right: 1px solid var(--atlas-line); border-right: 1px solid var(--atlas-line);
border-radius: 0; border-radius: 0;
padding: 0.9rem; padding: 0.9rem;
background: #eefaf7; background: var(--gi-brand-50);
} }
.assistant-context-strip > div { .assistant-context-strip > div {
@@ -1083,8 +1083,8 @@ textarea {
.assistant-context-strip label > span { .assistant-context-strip label > span {
color: var(--atlas-muted); color: var(--atlas-muted);
font-size: 0.59rem; font-size: 0.59rem;
font-weight: 700; font-weight: 600;
text-transform: uppercase; text-transform: none;
} }
.assistant-context-strip > div strong { .assistant-context-strip > div strong {
@@ -1112,15 +1112,15 @@ textarea {
align-items: center; align-items: center;
border-top: 1px solid var(--atlas-line); border-top: 1px solid var(--atlas-line);
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
background: #fbfefd; background: var(--gi-brand-50);
} }
.assistant-suggestions button { .assistant-suggestions button {
min-height: 1.65rem; min-height: 1.65rem;
border-color: #bddbd4; border-color: var(--gi-brand-50);
border-radius: var(--atlas-radius); border-radius: var(--atlas-radius);
padding: 0.3rem 0.55rem; padding: 0.3rem 0.55rem;
background: #f5fcfa; background: var(--gi-brand-50);
color: var(--atlas-ink-soft); color: var(--atlas-ink-soft);
font-size: 0.58rem; font-size: 0.58rem;
line-height: 1.15; line-height: 1.15;
@@ -1150,7 +1150,7 @@ textarea {
.assistant-message-assistant { .assistant-message-assistant {
border-left-color: var(--atlas-primary); border-left-color: var(--atlas-primary);
background: #f2f8f6; background: var(--gi-brand-50);
} }
.assistant-composer { .assistant-composer {
@@ -1161,7 +1161,7 @@ textarea {
border-top: 1px solid var(--atlas-line); border-top: 1px solid var(--atlas-line);
border-radius: 0; border-radius: 0;
padding: 0.55rem 0.75rem; padding: 0.55rem 0.75rem;
background: #eefaf7; background: var(--gi-brand-50);
} }
.assistant-composer textarea { .assistant-composer textarea {
@@ -1551,7 +1551,7 @@ textarea {
width: min(22rem, 34vw); width: min(22rem, 34vw);
border-left: 1px solid var(--atlas-line); border-left: 1px solid var(--atlas-line);
background: var(--atlas-surface); 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. */ /* 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; justify-items: start;
min-width: 0; min-width: 0;
border: 1px solid var(--landing-line); border: 1px solid var(--landing-line);
border-radius: .8rem; border-radius: var(--gi-radius-lg);
padding: .8rem; padding: .8rem;
background: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .72);
color: var(--landing-muted); color: var(--landing-muted);
@@ -54,7 +54,7 @@
bottom: 0; bottom: 0;
left: .8rem; left: .8rem;
height: 2px; height: 2px;
border-radius: 999px; border-radius: var(--gi-radius-pill);
background: var(--landing-primary); background: var(--landing-primary);
content: ''; content: '';
opacity: 0; opacity: 0;
@@ -69,7 +69,7 @@
color: var(--landing-primary-strong); color: var(--landing-primary-strong);
} }
.landing-story-tabs button[aria-selected='true']::after { opacity: 1; transform: scaleX(1); } .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 svg { width: 1rem; height: 1rem; }
.landing-story-tabs strong { overflow: hidden; max-width: 100%; font-size: .65rem; text-overflow: ellipsis; } .landing-story-tabs strong { overflow: hidden; max-width: 100%; font-size: .65rem; text-overflow: ellipsis; }
@@ -80,13 +80,13 @@
align-items: end; align-items: end;
margin-top: 1rem; margin-top: 1rem;
border-left: 3px solid var(--landing-primary); 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; padding: 1rem 1.1rem;
background: linear-gradient(90deg, rgba(222, 247, 241, .8), rgba(247, 252, 251, .55)); background: linear-gradient(90deg, rgba(222, 247, 241, .8), rgba(247, 252, 251, .55));
animation: landing-story-enter .42s ease both; 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 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-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; } .landing-story-metric { display: grid; min-width: 6.5rem; text-align: right; }
@@ -99,15 +99,20 @@
min-height: 38rem; min-height: 38rem;
overflow: hidden; overflow: hidden;
border: 1px solid rgba(161, 215, 204, .6); border: 1px solid rgba(161, 215, 204, .6);
border-radius: 1.6rem; border-radius: var(--gi-radius-xl);
background: #072f2c; background: #072f2c;
box-shadow: 0 35px 90px rgba(10, 67, 59, .2); box-shadow: var(--gi-shadow-lg);
} }
.landing-story-map { .landing-story-map {
position: absolute; position: absolute;
inset: 0; 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); filter: saturate(.78) contrast(1.03);
transform: scale(1.035); transform: scale(1.035);
transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), filter .5s ease; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
@@ -132,14 +137,14 @@
z-index: 2; z-index: 2;
display: grid; display: grid;
border: 1px solid rgba(196, 244, 234, .24); border: 1px solid rgba(196, 244, 234, .24);
border-radius: .9rem; border-radius: var(--gi-radius-lg);
background: rgba(3, 39, 35, .78); background: rgba(3, 39, 35, .78);
color: #fff; color: #fff;
box-shadow: 0 16px 40px rgba(0, 0, 0, .24); box-shadow: var(--gi-shadow-lg);
backdrop-filter: blur(13px); backdrop-filter: blur(13px);
} }
.landing-story-status { top: 1.25rem; left: 1.25rem; gap: .2rem; min-width: 10rem; padding: .8rem .95rem; } .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 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 strong { font-family: "Manrope", sans-serif; font-size: .92rem; }
.landing-story-status small { color: rgba(255, 255, 255, .58); font-size: .59rem; } .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-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.landing-story-detail { grid-template-columns: 1fr; } .landing-story-detail { grid-template-columns: 1fr; }
.landing-story-metric { text-align: left; } .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) { @media (prefers-reduced-motion: reduce) {
@@ -172,3 +177,10 @@
transition-duration: .01ms !important; 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; z-index: 200;
top: -5rem; top: -5rem;
left: 1rem; left: 1rem;
border-radius: 0.65rem; border-radius: var(--gi-radius-md);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: var(--landing-primary-dark); background: var(--landing-primary-dark);
color: #fff; color: #fff;
font-weight: 700; font-weight: 600;
text-decoration: none; text-decoration: none;
box-shadow: 0 12px 30px rgba(4, 42, 37, 0.24); box-shadow: var(--gi-shadow-md);
} }
.landing-skip-link:focus { .landing-skip-link:focus {
@@ -104,8 +104,8 @@ body.landing-body {
.landing-brand-mark { .landing-brand-mark {
width: 2.35rem; width: 2.35rem;
height: 2.35rem; height: 2.35rem;
border-radius: 0.7rem; border-radius: var(--gi-radius-md);
box-shadow: 0 8px 22px rgba(3, 55, 49, 0.2); box-shadow: var(--gi-shadow-md);
} }
.landing-brand-copy { .landing-brand-copy {
@@ -122,7 +122,7 @@ body.landing-body {
.landing-brand-copy small { .landing-brand-copy small {
color: var(--landing-muted); color: var(--landing-muted);
font-size: 0.59rem; font-size: 0.59rem;
font-weight: 700; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -138,7 +138,7 @@ body.landing-body {
padding: 0.55rem 0; padding: 0.55rem 0;
color: #3c5a55; color: #3c5a55;
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 650; font-weight: 600;
text-decoration: none; text-decoration: none;
} }
@@ -148,7 +148,7 @@ body.landing-body {
bottom: 0.25rem; bottom: 0.25rem;
left: 0; left: 0;
height: 2px; height: 2px;
border-radius: 999px; border-radius: var(--gi-radius-pill);
background: var(--landing-primary); background: var(--landing-primary);
content: ''; content: '';
opacity: 0; opacity: 0;
@@ -176,10 +176,10 @@ body.landing-body {
.landing-header-login, .landing-header-login,
.landing-header-guest { .landing-header-guest {
min-height: 2.55rem; min-height: 2.55rem;
border-radius: 0.62rem; border-radius: var(--gi-radius-md);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 0.76rem; font-size: 0.76rem;
font-weight: 750; font-weight: 600;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease; 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); border: 1px solid var(--landing-primary);
background: var(--landing-primary); background: var(--landing-primary);
color: #fff; color: #fff;
box-shadow: 0 9px 22px rgba(8, 120, 108, 0.18); box-shadow: var(--gi-shadow-md);
} }
.landing-header-guest { .landing-header-guest {
@@ -315,17 +315,17 @@ body.landing-body {
margin: 0; margin: 0;
color: var(--landing-primary-strong); color: var(--landing-primary-strong);
font-size: 0.67rem; font-size: 0.67rem;
font-weight: 800; font-weight: 700;
letter-spacing: 0.105em; letter-spacing: 0.105em;
text-transform: uppercase; text-transform: uppercase;
} }
.landing-kicker { .landing-kicker {
border: 1px solid rgba(104, 182, 169, 0.52); border: 1px solid rgba(104, 182, 169, 0.52);
border-radius: 999px; border-radius: var(--gi-radius-pill);
padding: 0.48rem 0.8rem; padding: 0.48rem 0.8rem;
background: rgba(225, 250, 245, 0.82); 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 { .landing-kicker svg {
@@ -339,7 +339,7 @@ body.landing-body {
color: var(--landing-ink); color: var(--landing-ink);
font-family: "Manrope", "Segoe UI", sans-serif; font-family: "Manrope", "Segoe UI", sans-serif;
font-size: clamp(3.1rem, 5.2vw, 5.35rem); font-size: clamp(3.1rem, 5.2vw, 5.35rem);
font-weight: 750; font-weight: 600;
letter-spacing: -0.06em; letter-spacing: -0.06em;
line-height: 0.99; line-height: 0.99;
text-wrap: balance; text-wrap: balance;
@@ -372,10 +372,10 @@ body.landing-body {
gap: 0.6rem; gap: 0.6rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 0.72rem; border-radius: var(--gi-radius-md);
padding: 0.8rem 1.2rem; padding: 0.8rem 1.2rem;
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 750; font-weight: 600;
text-decoration: none; text-decoration: none;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease; 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); border: 1px solid var(--landing-primary);
background: var(--landing-primary); background: var(--landing-primary);
color: #fff; color: #fff;
box-shadow: 0 14px 30px rgba(8, 120, 108, 0.2); box-shadow: var(--gi-shadow-md);
} }
.landing-secondary-action { .landing-secondary-action {
@@ -401,7 +401,7 @@ body.landing-body {
.landing-primary-action:hover:not(:disabled) { .landing-primary-action:hover:not(:disabled) {
background: var(--landing-primary-strong); 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 { .landing-secondary-action:hover {
@@ -478,7 +478,7 @@ body.landing-body {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border: 1px solid rgba(103, 147, 138, 0.48); 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); background: rgba(255, 255, 255, 0.96);
box-shadow: var(--landing-shadow); box-shadow: var(--landing-shadow);
scroll-margin-top: 6rem; scroll-margin-top: 6rem;
@@ -543,7 +543,7 @@ body.landing-body {
justify-content: space-between; justify-content: space-between;
color: rgba(255, 255, 255, 0.78); color: rgba(255, 255, 255, 0.78);
font-size: 0.61rem; font-size: 0.61rem;
font-weight: 700; font-weight: 600;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -571,10 +571,10 @@ body.landing-body {
align-items: center; align-items: center;
margin: 1.4rem auto 1.1rem 0.7rem; margin: 1.4rem auto 1.1rem 0.7rem;
border: 1px solid rgba(189, 240, 230, 0.25); border: 1px solid rgba(189, 240, 230, 0.25);
border-radius: 0.8rem; border-radius: var(--gi-radius-lg);
padding: 0.72rem 0.85rem; padding: 0.72rem 0.85rem;
background: rgba(5, 36, 32, 0.78); 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); backdrop-filter: blur(8px);
} }
@@ -583,7 +583,7 @@ body.landing-body {
width: 2.15rem; width: 2.15rem;
height: 2.15rem; height: 2.15rem;
place-items: center; place-items: center;
border-radius: 0.62rem; border-radius: var(--gi-radius-md);
background: rgba(83, 223, 196, 0.16); background: rgba(83, 223, 196, 0.16);
color: #7be7d1; color: #7be7d1;
} }
@@ -615,7 +615,7 @@ body.landing-body {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
border: 1px solid rgba(214, 246, 240, 0.18); 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); background: rgba(5, 33, 30, 0.66);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
@@ -666,7 +666,7 @@ body.landing-body {
.landing-login-icon { .landing-login-icon {
width: 2.45rem; width: 2.45rem;
height: 2.45rem; height: 2.45rem;
border-radius: 0.68rem; border-radius: var(--gi-radius-md);
} }
.landing-login-icon svg, .landing-login-icon svg,
@@ -683,7 +683,7 @@ body.landing-body {
margin: 0 0 0.22rem; margin: 0 0 0.22rem;
color: var(--landing-primary); color: var(--landing-primary);
font-size: 0.59rem; font-size: 0.59rem;
font-weight: 800; font-weight: 700;
letter-spacing: 0.09em; letter-spacing: 0.09em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -714,7 +714,7 @@ body.landing-body {
margin-top: 0.35rem; margin-top: 0.35rem;
color: #49645f; color: #49645f;
font-size: 0.58rem; font-size: 0.58rem;
font-weight: 800; font-weight: 700;
letter-spacing: 0.055em; letter-spacing: 0.055em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -723,7 +723,7 @@ body.landing-body {
width: 100%; width: 100%;
min-height: 2.85rem; min-height: 2.85rem;
border: 1px solid #b8d1cc; border: 1px solid #b8d1cc;
border-radius: 0.62rem; border-radius: var(--gi-radius-md);
padding: 0.7rem 0.78rem; padding: 0.7rem 0.78rem;
background: #f4fbf9; background: #f4fbf9;
color: var(--landing-ink); color: var(--landing-ink);
@@ -759,7 +759,7 @@ body.landing-body {
height: 2.15rem; height: 2.15rem;
place-items: center; place-items: center;
border: 0; border: 0;
border-radius: 0.5rem; border-radius: var(--gi-radius-sm);
background: transparent; background: transparent;
color: #55716b; color: #55716b;
transform: translateY(-50%); transform: translateY(-50%);
@@ -784,19 +784,19 @@ body.landing-body {
justify-content: center; justify-content: center;
margin-top: 0.55rem; margin-top: 0.55rem;
border: 1px solid var(--landing-primary); border: 1px solid var(--landing-primary);
border-radius: 0.66rem; border-radius: var(--gi-radius-md);
padding: 0.72rem 1rem; padding: 0.72rem 1rem;
background: var(--landing-primary); background: var(--landing-primary);
color: #fff; color: #fff;
font-size: 0.77rem; font-size: 0.77rem;
font-weight: 750; font-weight: 600;
box-shadow: 0 10px 24px rgba(8, 120, 108, 0.16); box-shadow: var(--gi-shadow-md);
transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease; transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
} }
.landing-operator-submit:hover:not(:disabled) { .landing-operator-submit:hover:not(:disabled) {
background: var(--landing-primary-strong); 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); transform: translateY(-1px);
} }
@@ -814,7 +814,7 @@ body.landing-body {
margin: 0.5rem 0 0; margin: 0.5rem 0 0;
border: 1px solid #efc4c1; border: 1px solid #efc4c1;
border-left: 3px solid #a23e38; border-left: 3px solid #a23e38;
border-radius: 0.5rem; border-radius: var(--gi-radius-sm);
padding: 0.62rem 0.72rem; padding: 0.62rem 0.72rem;
background: #fff3f2; background: #fff3f2;
color: #7c2d29; color: #7c2d29;
@@ -830,7 +830,7 @@ body.landing-body {
margin: 1.15rem 0; margin: 1.15rem 0;
color: #78908b; color: #78908b;
font-size: 0.58rem; font-size: 0.58rem;
font-weight: 650; font-weight: 600;
} }
.landing-access-divider::before, .landing-access-divider::before,
@@ -846,7 +846,7 @@ body.landing-body {
gap: 0.7rem; gap: 0.7rem;
align-items: start; align-items: start;
border: 1px solid #bfe0d9; border: 1px solid #bfe0d9;
border-radius: 0.75rem; border-radius: var(--gi-radius-md);
padding: 0.78rem; padding: 0.78rem;
background: linear-gradient(135deg, #f2fcfa, #ecf8f5); background: linear-gradient(135deg, #f2fcfa, #ecf8f5);
} }
@@ -854,7 +854,7 @@ body.landing-body {
.landing-guest-icon { .landing-guest-icon {
width: 2.15rem; width: 2.15rem;
height: 2.15rem; height: 2.15rem;
border-radius: 0.58rem; border-radius: var(--gi-radius-md);
} }
.landing-guest-access > div { .landing-guest-access > div {
@@ -881,12 +881,12 @@ body.landing-body {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border: 1px solid #90c8bd; border: 1px solid #90c8bd;
border-radius: 0.6rem; border-radius: var(--gi-radius-md);
padding: 0.62rem 0.78rem; padding: 0.62rem 0.78rem;
background: #fff; background: #fff;
color: var(--landing-primary-strong); color: var(--landing-primary-strong);
font-size: 0.71rem; font-size: 0.71rem;
font-weight: 750; font-weight: 600;
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
} }
@@ -970,12 +970,12 @@ body.landing-body {
overflow: hidden; overflow: hidden;
min-height: 18rem; min-height: 18rem;
border: 1px solid var(--landing-line-soft); border: 1px solid var(--landing-line-soft);
border-radius: 1rem; border-radius: var(--gi-radius-lg);
padding: clamp(1.35rem, 2.5vw, 1.85rem); padding: clamp(1.35rem, 2.5vw, 1.85rem);
background: background:
linear-gradient(180deg, rgba(242, 250, 248, 0.58), transparent 55%), linear-gradient(180deg, rgba(242, 250, 248, 0.58), transparent 55%),
#fff; #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; transition: border-color 170ms ease, transform 170ms ease, box-shadow 170ms ease;
} }
@@ -992,7 +992,7 @@ body.landing-body {
.landing-capability:hover { .landing-capability:hover {
border-color: #acd1ca; border-color: #acd1ca;
box-shadow: 0 23px 52px rgba(19, 63, 56, 0.1); box-shadow: var(--gi-shadow-lg);
transform: translateY(-3px); transform: translateY(-3px);
} }
@@ -1007,7 +1007,7 @@ body.landing-body {
width: 2.85rem; width: 2.85rem;
height: 2.85rem; height: 2.85rem;
place-items: center; place-items: center;
border-radius: 0.78rem; border-radius: var(--gi-radius-lg);
background: var(--landing-mint); background: var(--landing-mint);
color: var(--landing-primary); color: var(--landing-primary);
} }
@@ -1021,7 +1021,7 @@ body.landing-body {
color: #9aafaa; color: #9aafaa;
font-family: "Manrope", sans-serif; font-family: "Manrope", sans-serif;
font-size: 0.68rem; font-size: 0.68rem;
font-weight: 800; font-weight: 700;
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
@@ -1058,9 +1058,9 @@ body.landing-body {
min-height: 37rem; min-height: 37rem;
overflow: hidden; overflow: hidden;
border: 1px solid rgba(115, 151, 144, 0.45); border: 1px solid rgba(115, 151, 144, 0.45);
border-radius: 1.2rem; border-radius: var(--gi-radius-xl);
background: #0a2824; background: #0a2824;
box-shadow: 0 28px 70px rgba(10, 48, 42, 0.17); box-shadow: var(--gi-shadow-lg);
isolation: isolate; isolation: isolate;
} }
@@ -1112,7 +1112,7 @@ body.landing-body {
margin: 0 0 0.7rem; margin: 0 0 0.7rem;
color: #7be6d1; color: #7be6d1;
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 800; font-weight: 700;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -1145,11 +1145,11 @@ body.landing-body {
gap: 0.65rem; gap: 0.65rem;
align-items: center; align-items: center;
border: 1px solid rgba(202, 244, 236, 0.28); border: 1px solid rgba(202, 244, 236, 0.28);
border-radius: 0.72rem; border-radius: var(--gi-radius-md);
padding: 0.68rem 0.78rem; padding: 0.68rem 0.78rem;
background: rgba(4, 38, 34, 0.76); background: rgba(4, 38, 34, 0.76);
color: #fff; color: #fff;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.23); box-shadow: var(--gi-shadow-lg);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@@ -1203,12 +1203,12 @@ body.landing-body {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
place-items: center; place-items: center;
border-radius: 0.55rem; border-radius: var(--gi-radius-md);
background: var(--landing-mint); background: var(--landing-mint);
color: var(--landing-primary-strong); color: var(--landing-primary-strong);
font-family: "Manrope", sans-serif; font-family: "Manrope", sans-serif;
font-size: 0.61rem; font-size: 0.61rem;
font-weight: 800; font-weight: 700;
} }
.landing-workflow-steps h3 { .landing-workflow-steps h3 {
@@ -1231,7 +1231,7 @@ body.landing-body {
align-items: start; align-items: start;
margin-top: 1.35rem; margin-top: 1.35rem;
border: 1px solid #c2ddd7; border: 1px solid #c2ddd7;
border-radius: 0.8rem; border-radius: var(--gi-radius-lg);
padding: 1rem; padding: 1rem;
background: linear-gradient(135deg, #effbf8, #f7fcfb); background: linear-gradient(135deg, #effbf8, #f7fcfb);
scroll-margin-top: 6rem; scroll-margin-top: 6rem;
@@ -1278,7 +1278,7 @@ body.landing-body {
.landing-footer-mark { .landing-footer-mark {
width: 2.25rem; width: 2.25rem;
height: 2.25rem; height: 2.25rem;
border-radius: 0.65rem; border-radius: var(--gi-radius-md);
} }
.landing-footer strong { .landing-footer strong {
@@ -1308,7 +1308,7 @@ body.landing-body {
.landing-footer .itworx-signature > span { .landing-footer .itworx-signature > span {
color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.45);
font-size: 0.53rem; font-size: 0.53rem;
font-weight: 700; font-weight: 600;
letter-spacing: 0.07em; letter-spacing: 0.07em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -1388,7 +1388,7 @@ body.landing-body {
height: 2.45rem; height: 2.45rem;
place-items: center; place-items: center;
border: 1px solid var(--landing-line); border: 1px solid var(--landing-line);
border-radius: 0.62rem; border-radius: var(--gi-radius-md);
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
color: var(--landing-ink); color: var(--landing-ink);
} }
@@ -1409,10 +1409,10 @@ body.landing-body {
align-items: stretch; align-items: stretch;
overflow: hidden; overflow: hidden;
border: 1px solid var(--landing-line); border: 1px solid var(--landing-line);
border-radius: 0.8rem; border-radius: var(--gi-radius-lg);
padding: 0.35rem; padding: 0.35rem;
background: rgba(255, 255, 255, 0.98); 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 { .landing-nav-open {
@@ -1420,7 +1420,7 @@ body.landing-body {
} }
.landing-nav a { .landing-nav a {
border-radius: 0.55rem; border-radius: var(--gi-radius-md);
padding: 0.75rem 0.8rem; padding: 0.75rem 0.8rem;
} }
@@ -1720,3 +1720,13 @@ body.landing-body {
transition-duration: 0.01ms !important; 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 { .workbench-shell button {
border-color: var(--line-strong); border-color: var(--line-strong);
background: #ffffff; background: var(--gi-surface);
box-shadow: none; box-shadow: none;
transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease; transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
} }
.workbench-shell button:hover:not(:disabled) { .workbench-shell button:hover:not(:disabled) {
border-color: #8fa3ae; border-color: var(--gi-line);
background: #f8fafb; background: var(--gi-info-soft);
box-shadow: 0 0 0 3px rgba(40, 105, 168, 0.08); box-shadow: 0 0 0 3px rgba(40, 105, 168, 0.08);
} }
@@ -87,7 +87,7 @@ body {
.workbench-shell select, .workbench-shell select,
.workbench-shell textarea { .workbench-shell textarea {
border-color: var(--line-strong); border-color: var(--line-strong);
background: #ffffff; background: var(--gi-surface);
box-shadow: none; box-shadow: none;
} }
@@ -96,9 +96,9 @@ body {
.workbench-shell .context-bar span, .workbench-shell .context-bar span,
.workbench-shell .status-tile-topline > span:first-child, .workbench-shell .status-tile-topline > span:first-child,
.workbench-shell .inspector-field > span { .workbench-shell .inspector-field > span {
color: #6b7782; color: var(--gi-ink-600);
font-size: 0.69rem; font-size: 0.69rem;
font-weight: 750; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -115,7 +115,7 @@ body {
align-items: center; align-items: center;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 0.65rem 1.25rem; 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); box-shadow: 0 1px 0 rgba(23, 33, 43, 0.03);
backdrop-filter: blur(14px); backdrop-filter: blur(14px);
} }
@@ -133,11 +133,11 @@ body {
height: 2.25rem; height: 2.25rem;
flex: 0 0 2.25rem; flex: 0 0 2.25rem;
place-items: center; place-items: center;
border-radius: 7px; border-radius: var(--gi-radius-sm);
background: #123238; background: #123238;
color: #ffffff; color: #ffffff;
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 850; font-weight: 700;
} }
.brand-block h1 { .brand-block h1 {
@@ -160,8 +160,8 @@ body {
gap: 0; gap: 0;
justify-content: stretch; justify-content: stretch;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 7px; border-radius: var(--gi-radius-sm);
background: #f8fafb; background: var(--gi-info-soft);
} }
.context-bar > div { .context-bar > div {
@@ -188,7 +188,7 @@ body {
display: block; display: block;
overflow: hidden; overflow: hidden;
margin-top: 0.16rem; margin-top: 0.16rem;
color: #27343f; color: var(--gi-ink-800);
font-size: 0.78rem; font-size: 0.78rem;
line-height: 1.2; line-height: 1.2;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -208,7 +208,7 @@ body {
overflow: auto; overflow: auto;
border-right: 1px solid var(--line); border-right: 1px solid var(--line);
padding: 0.9rem 0.7rem; padding: 0.9rem 0.7rem;
background: #f8fafb; background: var(--gi-info-soft);
} }
.workbench-sidebar nav { .workbench-sidebar nav {
@@ -233,16 +233,16 @@ body {
width: 100%; width: 100%;
min-height: 2.7rem; min-height: 2.7rem;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 6px; border-radius: var(--gi-radius-sm);
padding: 0.52rem 0.65rem; padding: 0.52rem 0.65rem;
background: transparent; background: transparent;
color: #34424d; color: var(--gi-ink-800);
text-align: left; text-align: left;
} }
.nav-item span { .nav-item span {
font-size: 0.86rem; font-size: 0.86rem;
font-weight: 700; font-weight: 600;
} }
.nav-item small { .nav-item small {
@@ -250,7 +250,7 @@ body {
} }
.nav-item-active { .nav-item-active {
border-color: #c8ded9; border-color: var(--gi-brand-50);
background: var(--accent-soft); background: var(--accent-soft);
color: var(--accent-strong); color: var(--accent-strong);
box-shadow: inset 3px 0 0 var(--accent); box-shadow: inset 3px 0 0 var(--accent);
@@ -259,9 +259,9 @@ body {
.nav-item-active small { .nav-item-active small {
display: block; display: block;
margin-top: 0.18rem; margin-top: 0.18rem;
color: #50746e; color: var(--gi-ink-600);
font-size: 0.69rem; font-size: 0.69rem;
font-weight: 550; font-weight: 500;
line-height: 1.2; line-height: 1.2;
} }
@@ -271,7 +271,7 @@ body {
} }
.workbench-sidebar .nav-item-active { .workbench-sidebar .nav-item-active {
border-color: #c8ded9; border-color: var(--gi-brand-50);
background: var(--accent-soft); background: var(--accent-soft);
} }
@@ -359,8 +359,8 @@ body {
border: 0; border: 0;
border-left: 1px solid var(--line); border-left: 1px solid var(--line);
padding: 1rem; padding: 1rem;
background: #ffffff; background: var(--gi-surface);
box-shadow: -18px 0 44px rgba(28, 42, 53, 0.16); box-shadow: var(--gi-shadow-lg);
} }
.inspector-header { .inspector-header {
@@ -374,7 +374,7 @@ body {
margin: -1rem -1rem 0.8rem; margin: -1rem -1rem 0.8rem;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 1rem; padding: 1rem;
background: rgba(255, 255, 255, 0.98); background: var(--gi-surface);
} }
.inspector-header h2 { .inspector-header h2 {
@@ -409,7 +409,7 @@ body {
} }
.inspector-tab-active { .inspector-tab-active {
border-color: #b6d6d0; border-color: var(--gi-brand-50);
background: var(--accent-soft); background: var(--accent-soft);
color: var(--accent-strong); color: var(--accent-strong);
} }
@@ -448,8 +448,8 @@ body {
.handoff-action-card, .handoff-action-card,
.system-provider-card { .system-provider-card {
border-color: var(--line); border-color: var(--line);
border-radius: 7px; border-radius: var(--gi-radius-sm);
background: #ffffff; background: var(--gi-surface);
box-shadow: none; box-shadow: none;
} }
@@ -469,10 +469,10 @@ body {
.status-pill, .status-pill,
.status-badge, .status-badge,
.workflow-step-status { .workflow-step-status {
border-radius: 999px; border-radius: var(--gi-radius-pill);
background: #edf2f4; background: var(--gi-info-soft);
color: #4e5d68; color: var(--gi-ink-600);
font-weight: 700; font-weight: 600;
} }
.data-panel-form-block, .data-panel-form-block,
@@ -488,23 +488,23 @@ body {
.table-scroll { .table-scroll {
border-color: var(--line); border-color: var(--line);
border-radius: 6px; border-radius: var(--gi-radius-sm);
} }
table thead th { table thead th {
background: #f4f7f8; background: var(--gi-info-soft);
color: #53616d; color: var(--gi-ink-600);
} }
table tbody tr:hover { table tbody tr:hover {
background: #f7fafb; background: var(--gi-info-soft);
} }
.error, .error,
.warning-message, .warning-message,
.success-message, .success-message,
.demo-message { .demo-message {
border-radius: 6px; border-radius: var(--gi-radius-sm);
} }
/* Data workspace */ /* Data workspace */
@@ -512,9 +512,9 @@ table tbody tr:hover {
details.data-panel-form-block { details.data-panel-form-block {
overflow: hidden; overflow: hidden;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 6px; border-radius: var(--gi-radius-sm);
padding: 0; padding: 0;
background: #f8fafb; background: var(--gi-info-soft);
} }
details.data-panel-form-block > summary { details.data-panel-form-block > summary {
@@ -524,9 +524,9 @@ details.data-panel-form-block > summary {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.65rem 0.75rem; padding: 0.65rem 0.75rem;
color: #33424d; color: var(--gi-ink-800);
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 750; font-weight: 600;
list-style: none; list-style: none;
} }
@@ -542,7 +542,7 @@ details.data-panel-form-block > summary::after {
details.data-panel-form-block[open] > summary { details.data-panel-form-block[open] > summary {
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: #ffffff; background: var(--gi-surface);
} }
details.data-panel-form-block[open] > summary::after { details.data-panel-form-block[open] > summary::after {
@@ -560,7 +560,7 @@ details.data-panel-form-block > form {
.workspace-grid-data .data-selection-summary { .workspace-grid-data .data-selection-summary {
border-left: 3px solid var(--accent); border-left: 3px solid var(--accent);
background: #f7faf9; background: var(--gi-brand-50);
} }
.workspace-grid-data .data-panel-list-block { .workspace-grid-data .data-panel-list-block {
@@ -576,26 +576,26 @@ details.data-panel-form-block > form {
gap: 0.55rem; gap: 0.55rem;
padding: 0.65rem; padding: 0.65rem;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: #f8fafb; background: var(--gi-info-soft);
} }
.catalog-browser-toolbar-datasets { .catalog-browser-toolbar-datasets {
margin-bottom: 0.65rem; margin-bottom: 0.65rem;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 6px; border-radius: var(--gi-radius-sm);
} }
.catalog-search-field { .catalog-search-field {
display: grid; display: grid;
gap: 0.3rem; gap: 0.3rem;
color: #53616d; color: var(--gi-ink-600);
font-size: 0.74rem; font-size: 0.74rem;
font-weight: 750; font-weight: 600;
} }
.catalog-search-field input { .catalog-search-field input {
margin: 0; margin: 0;
background: #ffffff; background: var(--gi-surface);
} }
.catalog-pagination { .catalog-pagination {
@@ -662,9 +662,9 @@ details.data-panel-form-block > form {
details.ai-lab-model-surface { details.ai-lab-model-surface {
overflow: hidden; overflow: hidden;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 6px; border-radius: var(--gi-radius-sm);
padding: 0; padding: 0;
background: #f8fafb; background: var(--gi-info-soft);
} }
details.ai-lab-model-surface > summary { details.ai-lab-model-surface > summary {
@@ -675,9 +675,9 @@ details.ai-lab-model-surface > summary {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.65rem 0.75rem; padding: 0.65rem 0.75rem;
color: #33424d; color: var(--gi-ink-800);
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 750; font-weight: 600;
list-style: none; list-style: none;
} }
@@ -699,13 +699,13 @@ details.ai-lab-model-surface > summary strong {
margin-left: auto; margin-left: auto;
color: var(--muted); color: var(--muted);
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 650; font-weight: 600;
} }
.ai-lab-disclosure-body { .ai-lab-disclosure-body {
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
padding: 0.75rem; padding: 0.75rem;
background: #ffffff; background: var(--gi-surface);
} }
.ai-lab-shell .lab-block, .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-qa-surface,
.ai-lab-shell > .ai-lab-model-surface[aria-label="Local model asset selection"] { .ai-lab-shell > .ai-lab-model-surface[aria-label="Local model asset selection"] {
border-color: var(--line); border-color: var(--line);
border-radius: 6px; border-radius: var(--gi-radius-sm);
background: #ffffff; background: var(--gi-surface);
box-shadow: none; box-shadow: none;
} }
@@ -773,9 +773,9 @@ details.ai-lab-model-surface > summary strong {
.workbench-status-strip { .workbench-status-strip {
overflow: hidden; overflow: hidden;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 7px; border-radius: var(--gi-radius-sm);
padding: 0; padding: 0;
background: #ffffff; background: var(--gi-surface);
} }
.status-strip-header { .status-strip-header {
@@ -786,7 +786,7 @@ details.ai-lab-model-surface > summary strong {
margin: 0; margin: 0;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 1.1rem 1.2rem; padding: 1.1rem 1.2rem;
background: #ffffff; background: var(--gi-surface);
} }
.status-strip-header h2 { .status-strip-header h2 {
@@ -821,7 +821,7 @@ details.ai-lab-model-surface > summary strong {
margin-top: 0.25rem; margin-top: 0.25rem;
color: var(--muted); color: var(--muted);
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 650; font-weight: 600;
} }
.status-strip-grid { .status-strip-grid {
@@ -838,7 +838,7 @@ details.ai-lab-model-surface > summary strong {
border-right: 1px solid var(--line); border-right: 1px solid var(--line);
border-radius: 0; border-radius: 0;
padding: 0.75rem 0.8rem; padding: 0.75rem 0.8rem;
background: #ffffff; background: var(--gi-surface);
} }
.status-tile:last-child { .status-tile:last-child {
@@ -861,7 +861,7 @@ details.ai-lab-model-surface > summary strong {
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
margin-top: 0.4rem; margin-top: 0.4rem;
color: #23313b; color: var(--gi-ink-800);
font-size: 0.87rem; font-size: 0.87rem;
line-height: 1.25; line-height: 1.25;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@@ -882,12 +882,12 @@ details.ai-lab-model-surface > summary strong {
.source-freshness-panel { .source-freshness-panel {
overflow: hidden; overflow: hidden;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 7px; border-radius: var(--gi-radius-sm);
background: #ffffff; background: var(--gi-surface);
} }
.source-freshness-header { .source-freshness-header {
display: flex !important; display: flex;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -925,7 +925,7 @@ details.ai-lab-model-surface > summary strong {
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: #f8fafb; background: var(--gi-info-soft);
} }
.source-freshness-summary span { .source-freshness-summary span {
@@ -942,7 +942,7 @@ details.ai-lab-model-surface > summary strong {
.source-freshness-summary strong { .source-freshness-summary strong {
display: block; display: block;
margin-bottom: 0.15rem; margin-bottom: 0.15rem;
color: #24333d; color: var(--gi-ink-800);
font-size: 1.05rem; font-size: 1.05rem;
} }
@@ -985,7 +985,7 @@ details.ai-lab-model-surface > summary strong {
} }
.source-freshness-main strong { .source-freshness-main strong {
color: #23313b; color: var(--gi-ink-800);
font-size: 0.86rem; font-size: 0.86rem;
} }
@@ -1002,8 +1002,8 @@ details.ai-lab-model-surface > summary strong {
.source-freshness-status { .source-freshness-status {
flex: 0 0 auto; flex: 0 0 auto;
color: #33424d !important; color: var(--gi-ink-800);
font-weight: 750; font-weight: 600;
} }
.source-freshness-meta { .source-freshness-meta {
@@ -1026,7 +1026,7 @@ details.ai-lab-model-surface > summary strong {
.source-catalog-section { .source-catalog-section {
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
background: #fbfcfd; background: var(--gi-info-soft);
} }
.source-catalog-heading { .source-catalog-heading {
@@ -1043,7 +1043,7 @@ details.ai-lab-model-surface > summary strong {
} }
.source-catalog-heading strong { .source-catalog-heading strong {
color: #23313b; color: var(--gi-ink-800);
font-size: 0.84rem; font-size: 0.84rem;
} }
@@ -1055,7 +1055,7 @@ details.ai-lab-model-surface > summary strong {
.source-catalog-heading > span { .source-catalog-heading > span {
flex: 0 0 auto; flex: 0 0 auto;
font-weight: 700; font-weight: 600;
} }
.source-catalog-empty { .source-catalog-empty {
@@ -1105,7 +1105,7 @@ details.ai-lab-model-surface > summary strong {
.grb-refresh-plan { .grb-refresh-plan {
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
background: #ffffff; background: var(--gi-surface);
} }
.grb-refresh-plan-heading { .grb-refresh-plan-heading {
@@ -1123,7 +1123,7 @@ details.ai-lab-model-surface > summary strong {
} }
.grb-refresh-plan-heading strong { .grb-refresh-plan-heading strong {
color: #23313b; color: var(--gi-ink-800);
font-size: 0.84rem; font-size: 0.84rem;
} }
@@ -1134,7 +1134,7 @@ details.ai-lab-model-surface > summary strong {
.grb-refresh-plan-heading > span { .grb-refresh-plan-heading > span {
flex: 0 0 auto; flex: 0 0 auto;
font-weight: 750; font-weight: 600;
} }
.grb-refresh-layer-list { .grb-refresh-layer-list {
@@ -1181,9 +1181,9 @@ details.ai-lab-model-surface > summary strong {
} }
.grb-refresh-layer > div:first-child span { .grb-refresh-layer > div:first-child span {
color: #4d5c66; color: var(--gi-ink-600);
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 750; font-weight: 600;
} }
.grb-refresh-layer p { .grb-refresh-layer p {
@@ -1198,9 +1198,9 @@ details.ai-lab-model-surface > summary strong {
gap: 1rem; gap: 1rem;
justify-content: space-between; justify-content: space-between;
padding: 0.72rem 1rem; padding: 0.72rem 1rem;
color: #33424d; color: var(--gi-ink-800);
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 700; font-weight: 600;
} }
.source-freshness-list { .source-freshness-list {
@@ -1274,7 +1274,7 @@ details.ai-lab-model-surface > summary strong {
border: 1px solid var(--line); border: 1px solid var(--line);
border-left: 1px solid var(--line); border-left: 1px solid var(--line);
padding: 1rem 1.1rem; padding: 1rem 1.1rem;
background: #ffffff; background: var(--gi-surface);
} }
.workflow-guidance-panel .panel-title-row { .workflow-guidance-panel .panel-title-row {
@@ -1295,23 +1295,23 @@ details.ai-lab-model-surface > summary strong {
min-width: 0; min-width: 0;
min-height: 5rem; min-height: 5rem;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 6px; border-radius: var(--gi-radius-sm);
padding: 0.65rem; padding: 0.65rem;
background: #f5f7f8; background: var(--gi-surface);
text-align: left; text-align: left;
} }
.workflow-guidance-step:hover:not(:disabled) { .workflow-guidance-step:hover:not(:disabled) {
border-color: #bdcbd2; border-color: var(--gi-line);
background: #f0f4f5; background: var(--gi-surface-soft);
} }
.workflow-guidance-step-ready { .workflow-guidance-step-ready {
background: #f0f7f4; background: var(--gi-brand-50);
} }
.workflow-guidance-step-active { .workflow-guidance-step-active {
border-color: #91c5ba; border-color: var(--gi-brand-50);
background: var(--accent-soft); background: var(--accent-soft);
} }
@@ -1334,7 +1334,7 @@ details.ai-lab-model-surface > summary strong {
border: 1px solid var(--line); border: 1px solid var(--line);
border-left: 1px solid var(--line); border-left: 1px solid var(--line);
padding: 0.8rem 1rem; padding: 0.8rem 1rem;
background: #ffffff; background: var(--gi-surface);
} }
.overview-action-copy h2 { .overview-action-copy h2 {
@@ -1380,7 +1380,7 @@ details.ai-lab-model-surface > summary strong {
order: 1; order: 1;
border: 1px solid var(--line); border: 1px solid var(--line);
padding: 0.75rem; padding: 0.75rem;
background: #ffffff; background: var(--gi-surface);
} }
.map-workspace-shell .map-toolbar { .map-workspace-shell .map-toolbar {
@@ -1398,9 +1398,9 @@ details.ai-lab-model-surface > summary strong {
.layer-control-card { .layer-control-card {
min-height: 3.9rem; min-height: 3.9rem;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 6px; border-radius: var(--gi-radius-sm);
padding: 0.45rem 0.55rem; padding: 0.45rem 0.55rem;
background: #f8fafb; background: var(--gi-info-soft);
} }
.map-status { .map-status {
@@ -1411,9 +1411,9 @@ details.ai-lab-model-surface > summary strong {
min-height: auto; min-height: auto;
align-content: center; align-content: center;
border-left: 3px solid var(--accent); border-left: 3px solid var(--accent);
border-radius: 4px; border-radius: var(--gi-radius-xs);
padding: 0.45rem 0.65rem; padding: 0.45rem 0.65rem;
background: #f3f8f7; background: var(--gi-brand-50);
} }
.map-status strong { .map-status strong {
@@ -1445,8 +1445,8 @@ details.ai-lab-model-surface > summary strong {
.detection-qa-diagnostic span { .detection-qa-diagnostic span {
color: var(--muted); color: var(--muted);
font-size: 0.68rem; font-size: 0.68rem;
font-weight: 800; font-weight: 700;
text-transform: uppercase; text-transform: none;
} }
.detection-qa-diagnostic strong { .detection-qa-diagnostic strong {
@@ -1461,15 +1461,15 @@ details.ai-lab-model-surface > summary strong {
.detection-qa-diagnostic-caution { .detection-qa-diagnostic-caution {
border-left-color: var(--warning); border-left-color: var(--warning);
background: #fff8eb; background: var(--gi-warn-soft);
} }
.basemap-policy-notice { .basemap-policy-notice {
margin-bottom: 0.65rem; margin-bottom: 0.65rem;
border: 0; border: 0;
border-radius: 5px; border-radius: var(--gi-radius-xs);
padding: 0.45rem 0.6rem; padding: 0.45rem 0.6rem;
background: #f3f6f8; background: var(--gi-info-soft);
} }
.basemap-policy-notice strong, .basemap-policy-notice strong,
@@ -1480,11 +1480,11 @@ details.ai-lab-model-surface > summary strong {
.map-frame-surface { .map-frame-surface {
order: 2; order: 2;
overflow: hidden; overflow: hidden;
border: 1px solid #aebac2; border: 1px solid var(--gi-line);
border-radius: 7px; border-radius: var(--gi-radius-sm);
padding: 0; padding: 0;
background: #e9eff1; background: var(--gi-info-soft);
box-shadow: 0 7px 22px rgba(29, 43, 54, 0.09); box-shadow: var(--gi-shadow-md);
} }
.map-frame-surface .map-container, .map-frame-surface .map-container,
@@ -1499,8 +1499,8 @@ details.ai-lab-model-surface > summary strong {
.map-advanced-tools { .map-advanced-tools {
overflow: hidden; overflow: hidden;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 7px; border-radius: var(--gi-radius-sm);
background: #ffffff; background: var(--gi-surface);
} }
.map-layer-details { .map-layer-details {
@@ -1524,9 +1524,9 @@ details.ai-lab-model-surface > summary strong {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.7rem 0.85rem; padding: 0.7rem 0.85rem;
color: #263540; color: var(--gi-ink-800);
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 750; font-weight: 600;
list-style: none; list-style: none;
} }
@@ -1597,8 +1597,8 @@ details.ai-lab-model-surface > summary strong {
.map-empty-state { .map-empty-state {
margin: 0; margin: 0;
border: 1px dashed #afbdc5; border: 1px dashed var(--gi-line);
background: #f8fafb; background: var(--gi-info-soft);
} }
.map-inspection-surface { .map-inspection-surface {
@@ -1613,9 +1613,9 @@ details.ai-lab-model-surface > summary strong {
.gis-test-run-surface { .gis-test-run-surface {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 7px; border-radius: var(--gi-radius-sm);
padding: 1rem; padding: 1rem;
background: #ffffff; background: var(--gi-surface);
} }
.gis-test-run-grid, .gis-test-run-grid,
@@ -1635,7 +1635,7 @@ details.ai-lab-model-surface > summary strong {
border-right: 1px solid var(--line); border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
border-radius: 0; border-radius: 0;
background: #ffffff; background: var(--gi-surface);
} }
.map-advanced-tools-body > div:nth-child(2n) { .map-advanced-tools-body > div:nth-child(2n) {
@@ -1644,8 +1644,8 @@ details.ai-lab-model-surface > summary strong {
.qa-evidence-map-status { .qa-evidence-map-status {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 7px; border-radius: var(--gi-radius-sm);
background: #ffffff; background: var(--gi-surface);
} }
/* Responsive shell */ /* Responsive shell */
@@ -1736,7 +1736,7 @@ details.ai-lab-model-surface > summary strong {
border: 0; border: 0;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding: 0.45rem 0.65rem; padding: 0.45rem 0.65rem;
background: #ffffff; background: var(--gi-surface);
} }
.workbench-sidebar nav { .workbench-sidebar nav {
@@ -1953,9 +1953,9 @@ details.ai-lab-model-surface > summary strong {
display: grid; display: grid;
gap: 0.2rem; gap: 0.2rem;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 6px; border-radius: var(--gi-radius-sm);
padding: 0.65rem 0.7rem; padding: 0.65rem 0.7rem;
background: #f7faf9; background: var(--gi-brand-50);
} }
.geo-loaded-scope span, .geo-loaded-scope span,
@@ -1974,7 +1974,7 @@ details.ai-lab-model-surface > summary strong {
gap: 0.8rem; gap: 0.8rem;
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
padding: 0.8rem; padding: 0.8rem;
background: #ffffff; background: var(--gi-surface);
} }
.technical-management-body > .compact-form { .technical-management-body > .compact-form {
@@ -1992,8 +1992,8 @@ details.ai-lab-model-surface > summary strong {
.export-history-disclosure { .export-history-disclosure {
overflow: hidden; overflow: hidden;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 6px; border-radius: var(--gi-radius-sm);
background: #f8fafb; background: var(--gi-info-soft);
} }
.technical-run-list > summary, .technical-run-list > summary,
@@ -2012,9 +2012,9 @@ details.ai-lab-model-surface > summary strong {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.62rem 0.75rem; padding: 0.62rem 0.75rem;
color: #33424d; color: var(--gi-ink-800);
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 750; font-weight: 600;
list-style: none; list-style: none;
} }
@@ -2063,7 +2063,7 @@ details.ai-lab-model-surface > summary strong {
overflow: auto; overflow: auto;
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
padding: 0.65rem; padding: 0.65rem;
background: #ffffff; background: var(--gi-surface);
} }
.quality-advanced-disclosure { .quality-advanced-disclosure {
@@ -2083,8 +2083,8 @@ details.ai-lab-model-surface > summary strong {
margin: -0.25rem 0 0.65rem; margin: -0.25rem 0 0.65rem;
border-left: 3px solid #b37a2d; border-left: 3px solid #b37a2d;
padding: 0.45rem 0.65rem; padding: 0.45rem 0.65rem;
background: #fffbeb; background: var(--gi-warn-soft);
color: #6f4b18; color: var(--gi-warn);
} }
.quality-advanced-disclosure > summary strong { .quality-advanced-disclosure > summary strong {
@@ -2138,7 +2138,7 @@ details.ai-lab-model-surface > summary strong {
overflow: auto; overflow: auto;
padding: 0.5rem; padding: 0.5rem;
list-style: none; list-style: none;
background: #ffffff; background: var(--gi-surface);
} }
.dataset-history-list li { .dataset-history-list li {
@@ -2183,13 +2183,13 @@ details.ai-lab-model-surface > summary strong {
min-width: 0; min-width: 0;
gap: 0.25rem; gap: 0.25rem;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 6px; border-radius: var(--gi-radius-sm);
padding: 0.75rem; padding: 0.75rem;
background: #ffffff; background: var(--gi-surface);
} }
.ai-user-summary-card-primary { .ai-user-summary-card-primary {
border-color: #bfd8d2; border-color: var(--gi-brand-50);
background: var(--accent-soft); background: var(--accent-soft);
} }
@@ -2263,7 +2263,7 @@ details.ai-lab-model-surface > summary strong {
gap: 0.75rem; gap: 0.75rem;
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
padding: 0.75rem; padding: 0.75rem;
background: #ffffff; background: var(--gi-surface);
} }
.export-history-body > div:first-child { .export-history-body > div:first-child {
@@ -2321,15 +2321,15 @@ details.ai-lab-model-surface > summary strong {
.workflow-guidance-steps .workflow-guidance-step { .workflow-guidance-steps .workflow-guidance-step {
border-color: transparent; border-color: transparent;
background: #f5f7f8; background: var(--gi-surface);
} }
.workflow-guidance-steps .workflow-guidance-step-ready { .workflow-guidance-steps .workflow-guidance-step-ready {
background: #f0f7f4; background: var(--gi-brand-50);
} }
.workflow-guidance-steps .workflow-guidance-step-active { .workflow-guidance-steps .workflow-guidance-step-active {
border-color: #91c5ba; border-color: var(--gi-brand-50);
background: var(--accent-soft); background: var(--accent-soft);
} }
} }
@@ -2349,7 +2349,7 @@ details.ai-lab-model-surface > summary strong {
width: fit-content; width: fit-content;
cursor: pointer; cursor: pointer;
color: var(--muted); color: var(--muted);
font-weight: 750; font-weight: 600;
} }
.technical-inline-details[open] > summary { .technical-inline-details[open] > summary {
@@ -2429,7 +2429,7 @@ details.ai-lab-model-surface > summary strong {
min-width: 0; min-width: 0;
gap: 0.15rem; gap: 0.15rem;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 6px; border-radius: var(--gi-radius-sm);
padding: 0.55rem; padding: 0.55rem;
background: var(--panel-soft); background: var(--panel-soft);
} }
@@ -2449,7 +2449,7 @@ details.ai-lab-model-surface > summary strong {
.geo-image-quality-context { .geo-image-quality-context {
margin: 0; margin: 0;
border-left: 2px solid #91c5ba; border-left: 2px solid var(--gi-brand-50);
padding-left: 0.55rem; padding-left: 0.55rem;
color: var(--muted); color: var(--muted);
font-size: 0.7rem; font-size: 0.7rem;
@@ -2500,9 +2500,9 @@ details.ai-lab-model-surface > summary strong {
display: grid; display: grid;
gap: 0.6rem; gap: 0.6rem;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 6px; border-radius: var(--gi-radius-sm);
padding: 0.7rem; padding: 0.7rem;
background: #ffffff; background: var(--gi-surface);
} }
.detection-review-item-heading { .detection-review-item-heading {
frontend/src/styles/professionalization.css
+29 -29
View File
@@ -36,13 +36,13 @@
} }
.context-account-guest { .context-account-guest {
border-color: #9fcfc4; border-color: var(--gi-brand-50);
color: #0c5e55; color: var(--gi-brand-600);
background: linear-gradient(180deg, #f7fffc, #e8f7f3); background: linear-gradient(180deg, var(--gi-brand-50), var(--gi-brand-50));
} }
.context-account-guest > svg { .context-account-guest > svg {
color: #0d7d6f; color: var(--gi-brand-600);
} }
.workbench-shell-guest .workbench-stage { .workbench-shell-guest .workbench-stage {
@@ -57,18 +57,18 @@
gap: 0.72rem; gap: 0.72rem;
align-items: center; align-items: center;
min-width: 0; min-width: 0;
border-bottom: 1px solid #b7dbd3; border-bottom: 1px solid var(--gi-brand-50);
padding: 0.68rem 1.35rem; padding: 0.68rem 1.35rem;
color: #164d47; color: var(--gi-brand-600);
background: background:
radial-gradient(circle at 12% 0%, rgba(57, 172, 151, 0.13), transparent 16rem), 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 { .guest-mode-banner > svg {
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
color: #0f766e; color: var(--gi-brand-600);
} }
.guest-mode-banner > div { .guest-mode-banner > div {
@@ -85,7 +85,7 @@
.guest-mode-banner span:not(.guest-mode-badge) { .guest-mode-banner span:not(.guest-mode-badge) {
overflow: hidden; overflow: hidden;
color: #52736d; color: var(--gi-ink-600);
font-size: 0.72rem; font-size: 0.72rem;
line-height: 1.4; line-height: 1.4;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -93,13 +93,13 @@
} }
.guest-mode-badge { .guest-mode-badge {
border: 1px solid #9bcfc3; border: 1px solid var(--gi-brand-50);
border-radius: 999px; border-radius: var(--gi-radius-pill);
padding: 0.33rem 0.62rem; padding: 0.33rem 0.62rem;
color: #0d665b; color: var(--gi-brand-600);
background: rgba(255, 255, 255, 0.82); background: color-mix(in srgb, var(--gi-surface) 82%, transparent);
font-size: 0.66rem; font-size: 0.66rem;
font-weight: 800; font-weight: 700;
letter-spacing: 0.045em; letter-spacing: 0.045em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -112,12 +112,12 @@
max-width: min(28rem, calc(100vw - 2rem)); max-width: min(28rem, calc(100vw - 2rem));
gap: 0.65rem; gap: 0.65rem;
align-items: center; align-items: center;
border: 1px solid #b7d9d1; border: 1px solid var(--gi-brand-50);
border-radius: 0.85rem; border-radius: var(--gi-radius-lg);
padding: 0.72rem 0.9rem; padding: 0.72rem 0.9rem;
color: #164d47; color: var(--gi-brand-600);
background: rgba(250, 255, 253, 0.97); 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); backdrop-filter: blur(16px);
} }
@@ -125,9 +125,9 @@
width: 0.85rem; width: 0.85rem;
height: 0.85rem; height: 0.85rem;
flex: 0 0 auto; flex: 0 0 auto;
border: 2px solid #b5ddd4; border: 2px solid var(--gi-brand-50);
border-top-color: #0f766e; border-top-color: #0f766e;
border-radius: 999px; border-radius: var(--gi-radius-pill);
animation: geointel-guest-spin 0.8s linear infinite; animation: geointel-guest-spin 0.8s linear infinite;
} }
@@ -145,9 +145,9 @@
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr);
gap: 0.78rem; gap: 0.78rem;
align-items: start; align-items: start;
border: 1px solid #b9ddd5; border: 1px solid var(--gi-brand-50);
color: #174f48; color: var(--gi-brand-600);
background: linear-gradient(135deg, #eef9f6, #fbfefd); background: linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
} }
.geo-guest-preview-note { .geo-guest-preview-note {
@@ -160,7 +160,7 @@
width: 1.12rem; width: 1.12rem;
height: 1.12rem; height: 1.12rem;
margin-top: 0.08rem; margin-top: 0.08rem;
color: #0f766e; color: var(--gi-brand-600);
} }
.geo-guest-preview-note > div, .geo-guest-preview-note > div,
@@ -177,21 +177,21 @@
.geo-guest-preview-note span, .geo-guest-preview-note span,
.guest-readonly-card span { .guest-readonly-card span {
color: #54756f; color: var(--gi-ink-600);
font-size: 0.72rem; font-size: 0.72rem;
line-height: 1.45; line-height: 1.45;
} }
.guest-readonly-card { .guest-readonly-card {
border-radius: 0.9rem; border-radius: var(--gi-radius-lg);
padding: 0.9rem 1rem; 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 { .geo-result-next-actions-readonly {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
border-color: #b9dcd4; border-color: var(--gi-brand-50);
background: #f1faf7; background: var(--gi-brand-50);
} }
.geo-result-next-actions-readonly small { .geo-result-next-actions-readonly small {