JensandClaude Opus 5
438d0ec083
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>
270 lines
5.6 KiB
CSS
270 lines
5.6 KiB
CSS
/*
|
|
* GeoIntel professionalisation pass — 2026-07-27
|
|
*
|
|
* This intentionally remains a small, final override layer. The historical
|
|
* style sheets are consolidated in a separate refactor so this release does
|
|
* not destabilise the map workbench or its responsive contracts.
|
|
*/
|
|
|
|
.workbench-stage {
|
|
position: relative;
|
|
}
|
|
|
|
@media (min-width: 1361px) {
|
|
.workbench-layout {
|
|
grid-template-columns: 13.75rem minmax(0, 1fr);
|
|
}
|
|
|
|
.workbench-sidebar {
|
|
padding-inline: 0.72rem;
|
|
}
|
|
|
|
.workbench-main:not(.workbench-main-map) {
|
|
padding-inline: clamp(1.5rem, 2vw, 2.4rem);
|
|
}
|
|
}
|
|
|
|
.context-bar > div {
|
|
min-width: 0;
|
|
}
|
|
|
|
.context-bar strong {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.context-account-guest {
|
|
border-color: var(--gi-brand-50);
|
|
color: var(--gi-brand-600);
|
|
background: linear-gradient(180deg, var(--gi-brand-50), var(--gi-brand-50));
|
|
}
|
|
|
|
.context-account-guest > svg {
|
|
color: var(--gi-brand-600);
|
|
}
|
|
|
|
.workbench-shell-guest .workbench-stage {
|
|
grid-template-rows: var(--atlas-topbar-height) auto minmax(0, 1fr);
|
|
}
|
|
|
|
.guest-mode-banner {
|
|
position: relative;
|
|
z-index: 22;
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
gap: 0.72rem;
|
|
align-items: center;
|
|
min-width: 0;
|
|
border-bottom: 1px solid var(--gi-brand-50);
|
|
padding: 0.68rem 1.35rem;
|
|
color: var(--gi-brand-600);
|
|
background:
|
|
radial-gradient(circle at 12% 0%, rgba(57, 172, 151, 0.13), transparent 16rem),
|
|
linear-gradient(90deg, var(--gi-brand-50), var(--gi-brand-50));
|
|
}
|
|
|
|
.guest-mode-banner > svg {
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
color: var(--gi-brand-600);
|
|
}
|
|
|
|
.guest-mode-banner > div {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 0.12rem;
|
|
}
|
|
|
|
.guest-mode-banner strong {
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: 0.8rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.guest-mode-banner span:not(.guest-mode-badge) {
|
|
overflow: hidden;
|
|
color: var(--gi-ink-600);
|
|
font-size: 0.72rem;
|
|
line-height: 1.4;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.guest-mode-badge {
|
|
border: 1px solid var(--gi-brand-50);
|
|
border-radius: var(--gi-radius-pill);
|
|
padding: 0.33rem 0.62rem;
|
|
color: var(--gi-brand-600);
|
|
background: color-mix(in srgb, var(--gi-surface) 82%, transparent);
|
|
font-size: 0.66rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.045em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.guest-demo-loading {
|
|
position: absolute;
|
|
inset: calc(var(--atlas-topbar-height) + 3.75rem) 1.25rem auto auto;
|
|
z-index: 85;
|
|
display: inline-flex;
|
|
max-width: min(28rem, calc(100vw - 2rem));
|
|
gap: 0.65rem;
|
|
align-items: center;
|
|
border: 1px solid var(--gi-brand-50);
|
|
border-radius: var(--gi-radius-lg);
|
|
padding: 0.72rem 0.9rem;
|
|
color: var(--gi-brand-600);
|
|
background: rgba(250, 255, 253, 0.97);
|
|
box-shadow: var(--gi-shadow-lg);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.guest-demo-loading > span {
|
|
width: 0.85rem;
|
|
height: 0.85rem;
|
|
flex: 0 0 auto;
|
|
border: 2px solid var(--gi-brand-50);
|
|
border-top-color: #0f766e;
|
|
border-radius: var(--gi-radius-pill);
|
|
animation: geointel-guest-spin 0.8s linear infinite;
|
|
}
|
|
|
|
.guest-demo-loading strong {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
@keyframes geointel-guest-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.geo-guest-preview-note,
|
|
.guest-readonly-card {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: 0.78rem;
|
|
align-items: start;
|
|
border: 1px solid var(--gi-brand-50);
|
|
color: var(--gi-brand-600);
|
|
background: linear-gradient(135deg, var(--gi-brand-50), var(--gi-brand-50));
|
|
}
|
|
|
|
.geo-guest-preview-note {
|
|
border-width: 0 0 1px;
|
|
padding: 0.78rem 1.25rem;
|
|
}
|
|
|
|
.geo-guest-preview-note > svg,
|
|
.guest-readonly-card > svg {
|
|
width: 1.12rem;
|
|
height: 1.12rem;
|
|
margin-top: 0.08rem;
|
|
color: var(--gi-brand-600);
|
|
}
|
|
|
|
.geo-guest-preview-note > div,
|
|
.guest-readonly-card > div {
|
|
display: grid;
|
|
gap: 0.16rem;
|
|
}
|
|
|
|
.geo-guest-preview-note strong,
|
|
.guest-readonly-card strong {
|
|
font-family: "Manrope", sans-serif;
|
|
font-size: 0.79rem;
|
|
}
|
|
|
|
.geo-guest-preview-note span,
|
|
.guest-readonly-card span {
|
|
color: var(--gi-ink-600);
|
|
font-size: 0.72rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.guest-readonly-card {
|
|
border-radius: var(--gi-radius-lg);
|
|
padding: 0.9rem 1rem;
|
|
box-shadow: var(--gi-shadow-md);
|
|
}
|
|
|
|
.geo-result-next-actions-readonly {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
border-color: var(--gi-brand-50);
|
|
background: var(--gi-brand-50);
|
|
}
|
|
|
|
.geo-result-next-actions-readonly small {
|
|
max-width: 48rem;
|
|
}
|
|
|
|
.workbench-shell-guest .geo-explorer-header {
|
|
min-height: 5.25rem;
|
|
}
|
|
|
|
.workbench-shell-guest .geo-explorer-layout {
|
|
grid-template-columns: minmax(13.5rem, 0.7fr) minmax(28rem, 1.75fr) minmax(18rem, 0.8fr);
|
|
}
|
|
|
|
@media (max-width: 1120px) {
|
|
.guest-mode-banner {
|
|
padding-inline: 0.9rem;
|
|
}
|
|
|
|
.guest-mode-banner span:not(.guest-mode-badge) {
|
|
white-space: normal;
|
|
}
|
|
|
|
.workbench-shell-guest .geo-explorer-layout {
|
|
grid-template-columns: 13rem minmax(24rem, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 920px) {
|
|
.workbench-shell-guest .workbench-stage {
|
|
grid-template-rows: auto auto minmax(0, 1fr);
|
|
}
|
|
|
|
.guest-mode-banner {
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
padding: 0.65rem 0.8rem;
|
|
}
|
|
|
|
.guest-mode-badge {
|
|
display: none;
|
|
}
|
|
|
|
.guest-demo-loading {
|
|
position: fixed;
|
|
inset: 0.75rem 0.75rem auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.guest-mode-banner > svg {
|
|
display: none;
|
|
}
|
|
|
|
.guest-mode-banner {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.guest-mode-banner strong {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.guest-mode-banner span:not(.guest-mode-badge) {
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
.geo-guest-preview-note {
|
|
padding: 0.72rem 0.85rem;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.guest-demo-loading > span {
|
|
animation: none;
|
|
}
|
|
}
|