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/styles/landing.css
+69 -59
View File
@@ -61,13 +61,13 @@ body.landing-body {
z-index: 200;
top: -5rem;
left: 1rem;
border-radius: 0.65rem;
border-radius: var(--gi-radius-md);
padding: 0.75rem 1rem;
background: var(--landing-primary-dark);
color: #fff;
font-weight: 700;
font-weight: 600;
text-decoration: none;
box-shadow: 0 12px 30px rgba(4, 42, 37, 0.24);
box-shadow: var(--gi-shadow-md);
}
.landing-skip-link:focus {
@@ -104,8 +104,8 @@ body.landing-body {
.landing-brand-mark {
width: 2.35rem;
height: 2.35rem;
border-radius: 0.7rem;
box-shadow: 0 8px 22px rgba(3, 55, 49, 0.2);
border-radius: var(--gi-radius-md);
box-shadow: var(--gi-shadow-md);
}
.landing-brand-copy {
@@ -122,7 +122,7 @@ body.landing-body {
.landing-brand-copy small {
color: var(--landing-muted);
font-size: 0.59rem;
font-weight: 700;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@@ -138,7 +138,7 @@ body.landing-body {
padding: 0.55rem 0;
color: #3c5a55;
font-size: 0.78rem;
font-weight: 650;
font-weight: 600;
text-decoration: none;
}
@@ -148,7 +148,7 @@ body.landing-body {
bottom: 0.25rem;
left: 0;
height: 2px;
border-radius: 999px;
border-radius: var(--gi-radius-pill);
background: var(--landing-primary);
content: '';
opacity: 0;
@@ -176,10 +176,10 @@ body.landing-body {
.landing-header-login,
.landing-header-guest {
min-height: 2.55rem;
border-radius: 0.62rem;
border-radius: var(--gi-radius-md);
padding: 0.5rem 1rem;
font-size: 0.76rem;
font-weight: 750;
font-weight: 600;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}
@@ -187,7 +187,7 @@ body.landing-body {
border: 1px solid var(--landing-primary);
background: var(--landing-primary);
color: #fff;
box-shadow: 0 9px 22px rgba(8, 120, 108, 0.18);
box-shadow: var(--gi-shadow-md);
}
.landing-header-guest {
@@ -315,17 +315,17 @@ body.landing-body {
margin: 0;
color: var(--landing-primary-strong);
font-size: 0.67rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.105em;
text-transform: uppercase;
}
.landing-kicker {
border: 1px solid rgba(104, 182, 169, 0.52);
border-radius: 999px;
border-radius: var(--gi-radius-pill);
padding: 0.48rem 0.8rem;
background: rgba(225, 250, 245, 0.82);
box-shadow: 0 6px 18px rgba(48, 111, 101, 0.08);
box-shadow: var(--gi-shadow-md);
}
.landing-kicker svg {
@@ -339,7 +339,7 @@ body.landing-body {
color: var(--landing-ink);
font-family: "Manrope", "Segoe UI", sans-serif;
font-size: clamp(3.1rem, 5.2vw, 5.35rem);
font-weight: 750;
font-weight: 600;
letter-spacing: -0.06em;
line-height: 0.99;
text-wrap: balance;
@@ -372,10 +372,10 @@ body.landing-body {
gap: 0.6rem;
align-items: center;
justify-content: center;
border-radius: 0.72rem;
border-radius: var(--gi-radius-md);
padding: 0.8rem 1.2rem;
font-size: 0.82rem;
font-weight: 750;
font-weight: 600;
text-decoration: none;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
@@ -384,7 +384,7 @@ body.landing-body {
border: 1px solid var(--landing-primary);
background: var(--landing-primary);
color: #fff;
box-shadow: 0 14px 30px rgba(8, 120, 108, 0.2);
box-shadow: var(--gi-shadow-md);
}
.landing-secondary-action {
@@ -401,7 +401,7 @@ body.landing-body {
.landing-primary-action:hover:not(:disabled) {
background: var(--landing-primary-strong);
box-shadow: 0 18px 34px rgba(8, 120, 108, 0.24);
box-shadow: var(--gi-shadow-md);
}
.landing-secondary-action:hover {
@@ -478,7 +478,7 @@ body.landing-body {
position: relative;
overflow: hidden;
border: 1px solid rgba(103, 147, 138, 0.48);
border-radius: 1.25rem;
border-radius: var(--gi-radius-xl);
background: rgba(255, 255, 255, 0.96);
box-shadow: var(--landing-shadow);
scroll-margin-top: 6rem;
@@ -543,7 +543,7 @@ body.landing-body {
justify-content: space-between;
color: rgba(255, 255, 255, 0.78);
font-size: 0.61rem;
font-weight: 700;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
@@ -571,10 +571,10 @@ body.landing-body {
align-items: center;
margin: 1.4rem auto 1.1rem 0.7rem;
border: 1px solid rgba(189, 240, 230, 0.25);
border-radius: 0.8rem;
border-radius: var(--gi-radius-lg);
padding: 0.72rem 0.85rem;
background: rgba(5, 36, 32, 0.78);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
box-shadow: var(--gi-shadow-lg);
backdrop-filter: blur(8px);
}
@@ -583,7 +583,7 @@ body.landing-body {
width: 2.15rem;
height: 2.15rem;
place-items: center;
border-radius: 0.62rem;
border-radius: var(--gi-radius-md);
background: rgba(83, 223, 196, 0.16);
color: #7be7d1;
}
@@ -615,7 +615,7 @@ body.landing-body {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid rgba(214, 246, 240, 0.18);
border-radius: 0.72rem;
border-radius: var(--gi-radius-md);
background: rgba(5, 33, 30, 0.66);
backdrop-filter: blur(8px);
}
@@ -666,7 +666,7 @@ body.landing-body {
.landing-login-icon {
width: 2.45rem;
height: 2.45rem;
border-radius: 0.68rem;
border-radius: var(--gi-radius-md);
}
.landing-login-icon svg,
@@ -683,7 +683,7 @@ body.landing-body {
margin: 0 0 0.22rem;
color: var(--landing-primary);
font-size: 0.59rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
@@ -714,7 +714,7 @@ body.landing-body {
margin-top: 0.35rem;
color: #49645f;
font-size: 0.58rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.055em;
text-transform: uppercase;
}
@@ -723,7 +723,7 @@ body.landing-body {
width: 100%;
min-height: 2.85rem;
border: 1px solid #b8d1cc;
border-radius: 0.62rem;
border-radius: var(--gi-radius-md);
padding: 0.7rem 0.78rem;
background: #f4fbf9;
color: var(--landing-ink);
@@ -759,7 +759,7 @@ body.landing-body {
height: 2.15rem;
place-items: center;
border: 0;
border-radius: 0.5rem;
border-radius: var(--gi-radius-sm);
background: transparent;
color: #55716b;
transform: translateY(-50%);
@@ -784,19 +784,19 @@ body.landing-body {
justify-content: center;
margin-top: 0.55rem;
border: 1px solid var(--landing-primary);
border-radius: 0.66rem;
border-radius: var(--gi-radius-md);
padding: 0.72rem 1rem;
background: var(--landing-primary);
color: #fff;
font-size: 0.77rem;
font-weight: 750;
box-shadow: 0 10px 24px rgba(8, 120, 108, 0.16);
font-weight: 600;
box-shadow: var(--gi-shadow-md);
transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.landing-operator-submit:hover:not(:disabled) {
background: var(--landing-primary-strong);
box-shadow: 0 14px 26px rgba(8, 120, 108, 0.22);
box-shadow: var(--gi-shadow-md);
transform: translateY(-1px);
}
@@ -814,7 +814,7 @@ body.landing-body {
margin: 0.5rem 0 0;
border: 1px solid #efc4c1;
border-left: 3px solid #a23e38;
border-radius: 0.5rem;
border-radius: var(--gi-radius-sm);
padding: 0.62rem 0.72rem;
background: #fff3f2;
color: #7c2d29;
@@ -830,7 +830,7 @@ body.landing-body {
margin: 1.15rem 0;
color: #78908b;
font-size: 0.58rem;
font-weight: 650;
font-weight: 600;
}
.landing-access-divider::before,
@@ -846,7 +846,7 @@ body.landing-body {
gap: 0.7rem;
align-items: start;
border: 1px solid #bfe0d9;
border-radius: 0.75rem;
border-radius: var(--gi-radius-md);
padding: 0.78rem;
background: linear-gradient(135deg, #f2fcfa, #ecf8f5);
}
@@ -854,7 +854,7 @@ body.landing-body {
.landing-guest-icon {
width: 2.15rem;
height: 2.15rem;
border-radius: 0.58rem;
border-radius: var(--gi-radius-md);
}
.landing-guest-access > div {
@@ -881,12 +881,12 @@ body.landing-body {
align-items: center;
justify-content: space-between;
border: 1px solid #90c8bd;
border-radius: 0.6rem;
border-radius: var(--gi-radius-md);
padding: 0.62rem 0.78rem;
background: #fff;
color: var(--landing-primary-strong);
font-size: 0.71rem;
font-weight: 750;
font-weight: 600;
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
@@ -970,12 +970,12 @@ body.landing-body {
overflow: hidden;
min-height: 18rem;
border: 1px solid var(--landing-line-soft);
border-radius: 1rem;
border-radius: var(--gi-radius-lg);
padding: clamp(1.35rem, 2.5vw, 1.85rem);
background:
linear-gradient(180deg, rgba(242, 250, 248, 0.58), transparent 55%),
#fff;
box-shadow: 0 18px 45px rgba(19, 63, 56, 0.07);
box-shadow: var(--gi-shadow-lg);
transition: border-color 170ms ease, transform 170ms ease, box-shadow 170ms ease;
}
@@ -992,7 +992,7 @@ body.landing-body {
.landing-capability:hover {
border-color: #acd1ca;
box-shadow: 0 23px 52px rgba(19, 63, 56, 0.1);
box-shadow: var(--gi-shadow-lg);
transform: translateY(-3px);
}
@@ -1007,7 +1007,7 @@ body.landing-body {
width: 2.85rem;
height: 2.85rem;
place-items: center;
border-radius: 0.78rem;
border-radius: var(--gi-radius-lg);
background: var(--landing-mint);
color: var(--landing-primary);
}
@@ -1021,7 +1021,7 @@ body.landing-body {
color: #9aafaa;
font-family: "Manrope", sans-serif;
font-size: 0.68rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.1em;
}
@@ -1058,9 +1058,9 @@ body.landing-body {
min-height: 37rem;
overflow: hidden;
border: 1px solid rgba(115, 151, 144, 0.45);
border-radius: 1.2rem;
border-radius: var(--gi-radius-xl);
background: #0a2824;
box-shadow: 0 28px 70px rgba(10, 48, 42, 0.17);
box-shadow: var(--gi-shadow-lg);
isolation: isolate;
}
@@ -1112,7 +1112,7 @@ body.landing-body {
margin: 0 0 0.7rem;
color: #7be6d1;
font-size: 0.65rem;
font-weight: 800;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
@@ -1145,11 +1145,11 @@ body.landing-body {
gap: 0.65rem;
align-items: center;
border: 1px solid rgba(202, 244, 236, 0.28);
border-radius: 0.72rem;
border-radius: var(--gi-radius-md);
padding: 0.68rem 0.78rem;
background: rgba(4, 38, 34, 0.76);
color: #fff;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.23);
box-shadow: var(--gi-shadow-lg);
backdrop-filter: blur(10px);
}
@@ -1203,12 +1203,12 @@ body.landing-body {
width: 2rem;
height: 2rem;
place-items: center;
border-radius: 0.55rem;
border-radius: var(--gi-radius-md);
background: var(--landing-mint);
color: var(--landing-primary-strong);
font-family: "Manrope", sans-serif;
font-size: 0.61rem;
font-weight: 800;
font-weight: 700;
}
.landing-workflow-steps h3 {
@@ -1231,7 +1231,7 @@ body.landing-body {
align-items: start;
margin-top: 1.35rem;
border: 1px solid #c2ddd7;
border-radius: 0.8rem;
border-radius: var(--gi-radius-lg);
padding: 1rem;
background: linear-gradient(135deg, #effbf8, #f7fcfb);
scroll-margin-top: 6rem;
@@ -1278,7 +1278,7 @@ body.landing-body {
.landing-footer-mark {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.65rem;
border-radius: var(--gi-radius-md);
}
.landing-footer strong {
@@ -1308,7 +1308,7 @@ body.landing-body {
.landing-footer .itworx-signature > span {
color: rgba(255, 255, 255, 0.45);
font-size: 0.53rem;
font-weight: 700;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
}
@@ -1388,7 +1388,7 @@ body.landing-body {
height: 2.45rem;
place-items: center;
border: 1px solid var(--landing-line);
border-radius: 0.62rem;
border-radius: var(--gi-radius-md);
background: rgba(255, 255, 255, 0.9);
color: var(--landing-ink);
}
@@ -1409,10 +1409,10 @@ body.landing-body {
align-items: stretch;
overflow: hidden;
border: 1px solid var(--landing-line);
border-radius: 0.8rem;
border-radius: var(--gi-radius-lg);
padding: 0.35rem;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 18px 45px rgba(10, 55, 48, 0.15);
box-shadow: var(--gi-shadow-lg);
}
.landing-nav-open {
@@ -1420,7 +1420,7 @@ body.landing-body {
}
.landing-nav a {
border-radius: 0.55rem;
border-radius: var(--gi-radius-md);
padding: 0.75rem 0.8rem;
}
@@ -1720,3 +1720,13 @@ body.landing-body {
transition-duration: 0.01ms !important;
}
}
/* De storingsmelding onder de knop, zolang de bezoeker nog niets geprobeerd
heeft. Een mededeling, geen fout: zie de toelichting in LandingPage.tsx. */
.landing-login-note {
margin: 0.7rem 0 0;
color: var(--landing-muted);
font-size: 0.78rem;
line-height: 1.45;
text-align: center;
}