/* SALESSYNC — DE NIEUWE TOKENSET ============================== De eigenaar (12-8-2026): *"knoppen en tegels met meer diepte en glas effect en manieren vinden om de mensen echt rust te geven in salessync met de juiste combinatie van kleuren."* Drie beslissingen die daaruit volgen. 1. DIEPTE IS EEN LADDER, GEEN EFFECT. Er zijn vier hoogtes en elk vlak zit op precies één ervan: de ondergrond, het werkvlak, het zwevende vlak, en wat er bovenop ligt. Een schaduw zegt dus iets — hoe ver iets van de ondergrond af staat — in plaats van dat hij er alleen maar mooi uitziet. Vandaag staan er drie schaduwschalen naast elkaar (--shadow-*, --diepte-*, --gloed-goud) die willekeurig door elkaar gebruikt worden; dat is precies waarom het scherm plat aanvoelt ondanks al die schaduwen. 2. GLAS WERKT ALLEEN ALS ER IETS ACHTER ZIT. Doorschijnend op een egale kleur levert grijs op. Daarom krijgt de ondergrond een heel rustig kleurverloop met twee warme lichtbronnen. Het glas pakt dat op, en daardoor verschilt een tegel bovenaan het scherm subtiel van een tegel onderaan — dat is wat je als diepte leest. 3. RUST KOMT VAN WEINIG KLEUREN, NIET VAN ZACHTE KLEUREN. Eén koele basis (blauwgrijs), één warm accent (het goud van het merk), en vier betekeniskleuren die alleen gebruikt worden wanneer ze iets betekenen. Verder niets. De afspraak blijft: GEEN gekleurde rij-achtergronden, en zeker geen rood — een linkerrand is de indicator. Van 86 tokens naar 34. Wat verdween en waarom: --bg / --bg-main identiek --text / --text-primary identiek --muted / --silver / --text-muted alle drie #7a8a9a --primary / --midnight beide #e8e6e3 --red / --red-knop / --red-tekst alle drie #dd9488 --border / --border-color identiek alle *-soft varianten nu color-mix() op het moment zelf */ :root { /* ⚠️ ALLEEN dark, NIET "dark light". Met beide laat je de browser kiezen op basis van prefers-color-scheme — en die staat op deze machines op light, terwijl SalesSync altijd data-theme="dark" forceert. Gevolg: witte schuifbalken in de agenda, in de inhoudskolom, in het leveringsvenster en langs het menu, plus lichte datumkiezers en uitklaplijsten. Het lichtste ding op een donker scherm, en het wijst nergens naar. */ color-scheme: dark; /* ── DE ONDERGROND ──────────────────────────────────────────────────── Twee zachte lichtbronnen op een diepe basis. Dit is wat het glas oppikt; zonder dit verloop is elk doorschijnend vlak gewoon grijs. */ --grond: #0b1220; --grond-verloop: radial-gradient(1200px 680px at 12% -8%, rgba(213,186,118,.13), transparent 62%), radial-gradient(1000px 700px at 92% 12%, rgba(94,142,196,.14), transparent 58%), linear-gradient(180deg, #0d1522 0%, #080d16 100%); /* ── DE VIER HOOGTES ────────────────────────────────────────────────── 0 = de ondergrond zelf. 1 = het werkvlak (tegels, tabellen, formulieren). 2 = wat zweeft (menu's, tooltips, de mascotte). 3 = wat alles blokkeert (dialoogvensters). Alleen deze vier. */ --glas-1: rgba(255, 255, 255, .050); --glas-2: rgba(255, 255, 255, .078); --glas-3: rgba(255, 255, 255, .105); --waas: 14px; /* backdrop-filter blur op hoogte 1 en 2 */ --waas-diep: 26px; /* op hoogte 3 */ /* De lichtrand bovenaan een glasvlak. Dít is wat glas leesbaar maakt: licht valt van boven, dus de bovenrand licht op en de onderrand niet. */ --glans: inset 0 1px 0 rgba(255, 255, 255, .10); --glans-sterk: inset 0 1px 0 rgba(255, 255, 255, .16); --diepte-1: 0 1px 2px rgba(0,0,0,.30), var(--glans); --diepte-2: 0 8px 24px rgba(0,0,0,.38), var(--glans); --diepte-3: 0 24px 60px rgba(0,0,0,.50), var(--glans-sterk); /* ── LIJNEN ─────────────────────────────────────────────────────────── Vandaag staan alle randen op goud met 14% dekking. Daardoor zie je de structuur nauwelijks én kleurt alles geel. Randen worden neutraal; goud is voortaan alleen voor wat van het merk is. */ --lijn: rgba(255, 255, 255, .10); --lijn-sterk: rgba(255, 255, 255, .18); /* ── TEKST. Drie niveaus, meer heb je niet nodig. ─────────────────── */ --tekst: #eaf0f8; --tekst-zacht: #a6b3c8; --tekst-uit: #6f7d93; /* ── MERK ─────────────────────────────────────────────────────────── */ --merk: #d8bd79; --merk-diep: #c2a45e; --merk-op: #131a26; /* ── BETEKENIS. Vier, en alleen vier. ─────────────────────────────── */ --ok: #6ec485; --let-op: #dcb95e; --fout: #e19a8d; --info: #7fb8dc; /* ── MATEN ────────────────────────────────────────────────────────── */ --rond: 12px; --rond-klein: 8px; --rond-vol: 999px; /* ── TYPOGRAFIE ───────────────────────────────────────────────────── */ --lettertype: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --tekst-xs: .75rem; --tekst-s: .8125rem; --tekst-m: .9375rem; --tekst-l: 1.125rem; --tekst-xl: 1.5rem; --tekst-cijfer: 2rem; } /* ── LICHT ──────────────────────────────────────────────────────────────── Een garage is geen kantoor: iemand met een tablet aan de werkbank staat in het daglicht. Het glas blijft, maar dan met licht dat van boven komt op een lichte ondergrond — dus donkere randen in plaats van lichte glans. Opzet: :root hierboven bevat het VOLLEDIGE donkere palet. Hier staan alleen de tokens die anders moeten. Zo bestaat er geen kleur die maar in één thema gedefinieerd is. */ /* AANGEPAST BIJ HET INBOUWEN (14-8-2026) Het pakket schreef [data-thema="donker"/"licht"]. SalesSync schakelt zijn thema al met data-theme="dark"/"light" op — zie de themaknop en style.css. Twee schakelaars naast elkaar betekent dat het glas het lichte palet pakt terwijl de app donker staat: wit glas op een donkere achtergrond. Daarom volgt dit bestand de bestaande schakelaar. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --grond: #eef1f6; --grond-verloop: radial-gradient(1200px 680px at 12% -8%, rgba(196,168,98,.16), transparent 62%), radial-gradient(1000px 700px at 92% 12%, rgba(94,142,196,.14), transparent 58%), linear-gradient(180deg, #f6f8fb 0%, #e9edf4 100%); --glas-1: rgba(255, 255, 255, .62); --glas-2: rgba(255, 255, 255, .78); --glas-3: rgba(255, 255, 255, .90); --glans: inset 0 1px 0 rgba(255, 255, 255, .90); --glans-sterk:inset 0 1px 0 rgba(255, 255, 255, 1); --diepte-1: 0 1px 2px rgba(18,32,52,.07), var(--glans); --diepte-2: 0 8px 24px rgba(18,32,52,.10), var(--glans); --diepte-3: 0 24px 60px rgba(18,32,52,.16), var(--glans-sterk); --lijn: rgba(18, 32, 52, .12); --lijn-sterk: rgba(18, 32, 52, .22); --tekst: #16202e; --tekst-zacht:#54617a; --tekst-uit: #8894a8; --merk: #96762f; --merk-diep: #a9873c; --merk-op: #ffffff; --ok: #2e7d55; --let-op: #8a5f0f; --fout: #a8443a; --info: #2b6a91; } } /* De uitdrukkelijke keuze van de gebruiker wint van de systeemvoorkeur, in beide richtingen. Daarom staat licht hier nog een keer, nu op de vlag. */ :root[data-theme="light"] { --grond: #eef1f6; --grond-verloop: radial-gradient(1200px 680px at 12% -8%, rgba(196,168,98,.16), transparent 62%), radial-gradient(1000px 700px at 92% 12%, rgba(94,142,196,.14), transparent 58%), linear-gradient(180deg, #f6f8fb 0%, #e9edf4 100%); --glas-1: rgba(255, 255, 255, .62); --glas-2: rgba(255, 255, 255, .78); --glas-3: rgba(255, 255, 255, .90); --glans: inset 0 1px 0 rgba(255, 255, 255, .90); --glans-sterk:inset 0 1px 0 rgba(255, 255, 255, 1); --diepte-1: 0 1px 2px rgba(18,32,52,.07), var(--glans); --diepte-2: 0 8px 24px rgba(18,32,52,.10), var(--glans); --diepte-3: 0 24px 60px rgba(18,32,52,.16), var(--glans-sterk); --lijn: rgba(18, 32, 52, .12); --lijn-sterk: rgba(18, 32, 52, .22); --tekst: #16202e; --tekst-zacht:#54617a; --tekst-uit: #8894a8; --merk: #96762f; --merk-diep: #a9873c; --merk-op: #ffffff; --ok: #2e7d55; --let-op: #8a5f0f; --fout: #a8443a; --info: #2b6a91; } /* Wie geen beweging wil, krijgt ook geen waas: backdrop-filter is duur en op een zwakke machine schokt het scrollen ervan. Dan vallen de vlakken terug op een dekkende kleur — dezelfde hoogtes, zonder het glas. */ @media (prefers-reduced-transparency: reduce) { :root { --waas: 0px; --waas-diep: 0px; --glas-1: #131d2c; --glas-2: #182437; --glas-3: #1d2a3f; } } /* Wie geen beweging wil, houdt het glas én de hovertoestand: alleen de lóópbeweging wordt getemperd. Doorzichtigheid en beweging zijn twee verschillende voorkeuren, en een hover die niets doet is geen toegankelijkheid. */ @media (prefers-reduced-motion: reduce) { /* De uitdrukkelijke keuze van de gebruiker wint (SalesSync, 12-8-2026). Op Windows staat deze voorkeur ook aan zodra iemand gewoon "animaties weergeven" uitzet — standaard op een server. Zet hij beweging in SalesSync zelf aan, dan krijgt de klasse `beweging-aan` en slaat dit blok over. Zie style.css voor hetzelfde mechanisme. Let op wat hier NIET staat: transition-duration en transform. Die platslaan maakt elke hover dood, en een hover die niets doet is geen toegankelijkheid. */ html:not(.beweging-aan) *, html:not(.beweging-aan) *::before, html:not(.beweging-aan) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }