/* ══════════════════════════════════════════════════════════ MARQETING — ONTWERPTOKENS ══════════════════════════════════════════════════════════ De taal komt van webgroeiers.nl: groen, wit, verlopen, stevige letters en de pilknop met het ronde pijltje. Dat is een keuze, geen gemak — Marqeting hoort zichtbaar bij dezelfde familie, en dat is ook het verhaal richting bureaus. De waarden hieronder zijn afgelezen van de werkelijke berekende opmaak van nieuw.webgroeiers.nl, niet uit het hoofd nagetypt: H1 68px, gewicht 800, tracking -2,04px, regel 72,76px H2 44px, gewicht 700, tracking -0,88px gewicht 700 domineert (108x), dan 400, 600, 800 radius 999px (46x), 22px (19x), 12px (22x), 10px kleuren #0F1A17, #3A4A44, #047857 op #FFF / #F5F7F6 / #D1FAE5 schaduw 0 1px 2px rgba(11,15,14,.04) Alleen licht. Donker komt later of niet. ══════════════════════════════════════════════════════════ */ @font-face { font-family: "Manrope"; src: url("fonts/Manrope-Variable.woff2") format("woff2-variations"); font-weight: 400 800; font-display: swap; } :root { --letter: "Manrope", system-ui, -apple-system, sans-serif; --letter-data: ui-monospace, SFMono-Regular, Menlo, monospace; /* ── HET PALET ─────────────────────────────────────────── Eén groene familie in tien stappen, van bijna-wit tot diep. Meer kleuren heb je niet nodig; met minder kun je geen verloop maken dat ergens heen gaat. Daarbinnen heeft Marqeting precies één eigen noot: de verlopen lopen door naar teal. Webgroeiers' verloop blijft groen, het onze schuift naar #0E7490. Klein genoeg om familie te blijven, groot genoeg om een eigen product te zijn. Waarom teal en geen vierde kleur: dit product gaat over verbinding — er wordt opgenomen. Groen dat naar blauwgroen trekt leest als een lijn die openstaat. En het is de enige buurkleur van groen die op wit nog contrast haalt zonder dat je hem donkerder moet maken dan de merkkleur zelf. */ --gr-50: #ECFDF5; --gr-100: #D1FAE5; --gr-200: #A7F3D0; --gr-300: #6EE7B7; --gr-400: #34D399; --gr-500: #10B981; --gr-600: #059669; /* de merkkleur, als vlak */ --gr-700: #047857; /* dezelfde kleur zodra er letters op staan */ --gr-800: #065F46; --gr-900: #064E3B; /* Alleen in verlopen, nooit als vlakke kleur. Zodra teal op zichzelf staat wordt het een tweede merkkleur, en dan heb je er twee die om aandacht vechten. */ --teal: #0E7490; --teal-2: #0891B2; /* ── inkt en papier ───────────────────────────────────── */ --inkt: #0F1A17; /* gemeten op webgroeiers.nl */ --inkt-2: #3A4A44; /* lopende tekst; 9,1:1 op wit */ --inkt-3: #5A6B64; /* labels; 5,4:1 op wit, 5,1 op --vlak */ --zwart: #0B0F0E; --wit: #FFFFFF; --vlak: #F5F7F6; --vlak-2: #F0F5F3; --op-donker: rgba(255,255,255,.96); --op-donker-2: rgba(255,255,255,.88); --lijn: rgba(11,15,14,.10); --lijn-fijn: rgba(11,15,14,.06); --lijn-op-donker: rgba(255,255,255,.16); --lijn-groen: rgba(4,120,87,.18); /* ── DE VERLOPEN ───────────────────────────────────────── Drie lagen op elkaar, zoals op webgroeiers.nl: een witte bloem linksboven, een gekleurde bloem rechtsboven, en daaronder een lineair verloop schuin over het vlak. Die opbouw geeft diepte; één linear-gradient blijft een plat kleurblok. Wat hier anders is: het lineaire deel eindigt in teal. */ /* Zachte kaart. Hier staat tekst op, dus de kleur blijft laag. */ --v-kaart: radial-gradient(130% 150% at 14% 0%, rgba(255,255,255,.90) 0%, rgba(255,255,255,0) 56%), linear-gradient(140deg, #ECFDF5 0%, #C7F2E4 100%); /* Vollere kaart, voor de één die eruit mag springen. */ --v-kaart-vol: radial-gradient(130% 150% at 14% 0%, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 56%), linear-gradient(140deg, #DCF8EC 0%, #8FE0CC 100%); /* Het grote lichte vlak: hier mag de kleur dragen. */ --v-vlak: radial-gradient(120% 190% at 8% 0%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 50%), radial-gradient(150% 210% at 92% 8%, var(--gr-300) 0%, rgba(110,231,183,0) 60%), linear-gradient(120deg, #D9F8EA 0%, #5FD8A6 52%, #37C2C0 100%); /* Het donkere vlak. Groen dat naar teal trekt. */ /* Deze drie stoppunten zijn doorgerekend, niet gekozen op het oog. Met de oorspronkelijke #047857/#0E7490 haalde witte tekst op de teal-kant 4,0:1 en een mintgroen label 3,5 — een verloop dat aan één kant onleesbaar wordt is geen verloop maar een fout. Ook de twee bloemen zijn meegerekend: op elk stoppunt, met of zonder bloem, haalt de lopende tekst minstens 4,8 en de kop minstens 5,4. */ --v-diep: radial-gradient(100% 150% at 10% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 44%), radial-gradient(90% 130% at 92% 0%, rgba(5,150,105,.38) 0%, rgba(5,150,105,0) 58%), linear-gradient(125deg, #05452F 0%, #065B45 46%, #0A5C72 100%); /* Voor het widgetvenster: koel, zodat het als een scherm leest en niet als nog een groene kaart. */ --v-koel: radial-gradient(120% 180% at 10% 0%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 50%), linear-gradient(135deg, #E8F6FB 0%, #D2F0E5 100%); /* Een dunne verlooprand, voor kaarten die moeten opvallen zonder dat er een kleurvlak bij komt. */ --v-rand: linear-gradient(140deg, var(--gr-400), var(--teal-2)); /* ── LETTERS ───────────────────────────────────────────── Stevig. 700 draagt de pagina, 800 voor de grote koppen. Dat is wat webgroeiers.nl doet, en het is het tegenovergestelde van de ingehouden 500 die overal staat. */ --w-tekst: 400; --w-half: 600; --w-vet: 700; --w-zwaar: 800; --t-mini: 12.5px; --t-klein: 14px; --t-basis: 16px; --t-groot: clamp(17px, 1.4vw, 19px); --t-kop-s: clamp(18px, 1.5vw, 20px); --t-kop-m: clamp(30px, 4.2vw, 44px); --t-kop-l: clamp(38px, 6.2vw, 68px); --tr-groot: -0.03em; /* op 68px → -2,04px */ --tr-mid: -0.02em; /* op 44px → -0,88px */ --tr-klein: -0.015em; --tr-label: 0.09em; --lh-kop: 1.07; --lh-tekst: 1.6; /* ── ruimte ───────────────────────────────────────────── */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-6: 24px; --r-8: 32px; --r-12: 48px; --r-16: 64px; --r-20: 80px; --r-sectie: clamp(64px, 8vw, 112px); /* ── vormen ────────────────────────────────────────────── Rond. 999px voor pillen, 22px voor kaarten, 30 voor de grote vlakken. */ --rond-s: 10px; --rond-m: 12px; --rond-l: 22px; --rond-xl: 30px; --rond-pil: 999px; /* ── hoogte ────────────────────────────────────────────── Altijd met negatieve spread, zodat de schaduw ónder het element blijft. Zonder die spread waaiert hij eromheen en dan is het geen schaduw meer maar een gloed. */ --sch-1: 0 1px 2px rgba(11,15,14,.05); --sch-2: 0 10px 26px -16px rgba(11,15,14,.26); --sch-3: 0 24px 54px -26px rgba(11,15,14,.30); --sch-4: 0 40px 90px -40px rgba(6,78,59,.42); --sch-groen: 0 18px 44px -24px rgba(4,120,87,.45); /* ── beweging ──────────────────────────────────────────── Twee curves. "soepel" voor kleur en opaciteit, "veer" voor alles wat zich verplaatst — die laatste schiet net iets door, en dat is het verschil tussen levend en mechanisch. */ --soepel: cubic-bezier(.4, 0, .2, 1); --veer: cubic-bezier(.2, .8, .25, 1); --duur-kort: .18s; --duur: .32s; --duur-lang: .6s; }