/* ========================================================================== Recruit a Student België - Design tokens Versie 1.0, 31 augustus 2026 Alle kleuren zijn overgenomen uit de live site (www.recruitastudent.be, gemeten 31 augustus 2026). Er is geen rebrand: de hexcodes zijn identiek. Wat nieuw is, is de toewijzing: welke kleur mag waar, en met welke contrastverhouding. Zie STYLEGUIDE-BE.md paragraaf 2. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. Merkkleuren, exact zoals in de bestaande huisstijl --------------------------------------------------------------------- */ /* Blauw: het werkgeversspoor en de merkkleur */ --ras-blue-500: #0091da; /* primaryColor. Merksignaal. NIET voor kleine tekst */ --ras-blue-400: #009ff0; /* primaryLightColor. Hover op blauwe vlakken */ --ras-blue-300: #99ddff; /* primaryLighterColor */ --ras-blue-100: #e6f6ff; /* primaryLightestColor. Sectie-achtergrond */ --ras-blue-050: #e5f6ff; /* secondaryLightColor. Vrijwel gelijk aan 100 */ --ras-blue-600: #3473c3; /* secondaryColor. Laagste blauw dat als tekst mag (4,8:1) */ --ras-blue-700: #275591; /* secondaryDarkColor. Koppen en knopvulling (7,5:1) */ --ras-blue-800: #1a3861; /* secondaryDarkerColor. Donkere secties */ --ras-blue-900: #112540; /* secondaryDarkestColor. Footer, overlays. Draagt het merkoranje op 6,1:1 en wit op 15,4:1, en is daarmee het vlak voor de hero op de twee homepagina's. */ /* Oranje: het studentenspoor en de actiekleur */ --ras-orange-500: #ff7f32; /* accentColor. Studenten-CTA */ --ras-orange-400: #ff9032; /* accentLightColor */ --ras-orange-300: #ffb87a; /* accentLighterColor */ --ras-orange-100: #ffeee6; /* accentLightestColor. Sectie-achtergrond */ --ras-orange-600: #ff6e32; /* accentDarkColor. Hover */ --ras-orange-700: #ff5d32; /* accentDarkerColor. Active */ --ras-orange-800: #ff4c32; /* accentDarkestColor */ /* Neutralen */ --ras-ink: #161b1d; /* textThemeDark. Alle lopende tekst (15,9:1) */ --ras-grey-800: #364349; /* baseDarkestColor. Secundaire tekst (9,4:1) */ --ras-grey-700: #4c5e67; /* baseDarkerColor. Labels, meta (6,6:1) */ --ras-grey-600: #6c8693; /* baseDarkColor. Placeholder (3,8:1), geen lopende tekst */ --ras-grey-500: #899ea8; /* baseColor. Iconen, disabled */ --ras-grey-400: #a7b6be; /* baseLightColor */ --ras-grey-300: #c4cfd4; /* baseLighterColor. Randen op donker */ --ras-grey-200: #e2e7e9; /* baseLightestColor. Randen, scheidingslijnen */ --ras-grey-100: #f2f5f6; /* Toegevoegd. Zachte sectie-achtergrond */ --ras-white: #ffffff; /* De kleuren ván het logobestand. Deze wijken af van de sitekleuren hierboven, gemeten in LOGO_RAS_PNG.png op 31 augustus 2026. Ze staan hier alleen ter documentatie: het logo wordt nooit herkleurd, en deze tokens worden nergens in de opmaak gebruikt. Zie STYLEGUIDE-BE.md 2.5. */ --logo-orange: #f18e00; /* site-oranje is #ff7f32 */ --logo-blue: #0071b9; /* site-blauw is #0091da */ /* Statuskleuren */ --ras-success: #2e7d32; /* Aangepast naar de donkere variant voor contrast */ --ras-success-bg: #e8f5e9; --ras-error: #c62828; --ras-error-bg: #ffebee; --ras-warning: #ef6c00; --ras-warning-bg: #fff3e0; --ras-info: #275591; --ras-info-bg: #e6f6ff; /* --------------------------------------------------------------------- 2. Semantische rollen. Componenten gebruiken ALLEEN deze tokens, nooit de merkkleuren hierboven. --------------------------------------------------------------------- */ --color-text: var(--ras-ink); --color-text-secondary: var(--ras-grey-800); --color-text-muted: var(--ras-grey-700); --color-text-inverse: var(--ras-white); /* Tekst en iconen op een oranje vlak. Wit haalt daar 2,52:1 en dat is te weinig; zwart haalt 8,33:1. Gekozen op 23 september 2026, zodat het oranje van de huisstijl onveranderd kan blijven. */ --color-on-accent: #000000; /* Sectievlakken, overgenomen van de live site (gemeten 31 augustus 2026). De site werkt met drie vlakken en niet meer: wit, de lichte tint #e6f6ff, en de gekleurde band #3473c3. Grijs komt er niet in voor. */ --color-surface: var(--ras-white); --color-surface-soft: var(--ras-blue-100); /* #e6f6ff */ --color-surface-band: var(--ras-blue-600); /* #3473c3, wit erop = 4,8:1 */ --color-surface-accent: var(--ras-orange-500); /* #ff7f32, footerblok */ --color-border: var(--ras-grey-200); --color-border-strong: var(--ras-grey-400); --color-link: var(--ras-blue-600); --color-link-hover: var(--ras-blue-700); --color-focus: var(--ras-blue-500); /* --------------------------------------------------------------------- 3. Doelgroepspoor. Zie STYLEGUIDE-BE.md paragraaf 3. Standaard is neutraal-blauw. Een sectie of pagina krijgt data-audience="student" of data-audience="employer". --------------------------------------------------------------------- */ --accent: var(--ras-blue-700); /* vulling die tekst draagt; blue-500 haalt 3,46:1 */ --accent-strong: var(--ras-blue-700); --accent-hover: var(--ras-blue-800); --accent-tint: var(--ras-blue-100); --accent-ink: var(--ras-white); /* tekstkleur ÓP de accentvulling */ --accent-on-tint: var(--ras-blue-700);/* tekstkleur op de tint */ --motion-scale: 1; /* multiplier op alle duren */ } /* Studentenspoor: oranje, energiek, sneller. De afwijking van 31 augustus 2026 is op 23 september 2026 ingetrokken. Wit op het oranje haalde 2,52:1 en zakte daarmee onder elke norm, ook die voor grote tekst. De vulling blijft exact hetzelfde oranje; alleen de tekst erop is nu zwart en haalt 8,33:1. 16 oktober 2026: op verzoek van Recruit a Student weer wit, zoals op de oranje knoppen (huisstijl). Dat haalt 2,52:1, onder de WCAG-norm. */ [data-audience="student"] { --accent: var(--ras-orange-500); --accent-strong: var(--ras-orange-600); --accent-hover: var(--ras-orange-600); --accent-tint: var(--ras-orange-100); --accent-ink: var(--ras-white); /* 16-10-2026: wit op oranje, zoals de knoppen (huisstijl) */ --accent-on-tint: var(--ras-grey-800); --motion-scale: 0.8; } /* Werkgeversspoor: blauw, rustig, iets langzamer. */ [data-audience="employer"] { --accent: var(--ras-blue-700); --accent-strong: var(--ras-blue-700); --accent-hover: var(--ras-blue-800); --accent-tint: var(--ras-blue-100); --accent-ink: var(--ras-white); --accent-on-tint: var(--ras-blue-700); --motion-scale: 1.15; } /* De gekleurde band, #3473c3 met witte tekst, zoals de live site die gebruikt voor "Personeel nodig?" en de app-secties. De tokens draaien mee, zodat componenten ongewijzigd blijven werken. */ [data-surface="band"] { --color-text: var(--ras-white); --color-text-secondary: rgba(255, 255, 255, 0.86); --color-text-muted: rgba(255, 255, 255, 0.72); --color-surface: var(--ras-blue-600); --color-border: rgba(255, 255, 255, 0.22); --color-border-strong: rgba(255, 255, 255, 0.42); --color-link: var(--ras-white); --color-link-hover: var(--ras-blue-100); --color-focus: var(--ras-white); --accent-on-tint: var(--ras-white); } /* Het oranje footerblok, ook letterlijk van de live site. */ [data-surface="accent"] { --color-text: var(--ras-white); --color-text-secondary: rgba(255, 255, 255, 0.9); --color-text-muted: rgba(255, 255, 255, 0.78); --color-surface: var(--ras-orange-500); --color-border: rgba(255, 255, 255, 0.28); --color-link: var(--ras-white); --color-link-hover: var(--ras-white); --color-focus: var(--ras-white); --accent-on-tint: var(--ras-white); } :root { /* --------------------------------------------------------------------- 4. Typografie. Heebo, zelf gehost, latin-subset, 400/500/700. --------------------------------------------------------------------- */ --font-sans: "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* Vloeiende schaal, mobile-first. Basis 16px, geen kleinere maat dan 14px in gebruik. De schaal sluit aan op de live site: die zet H2 op 28px. Onze H2 loopt van 24 naar 32px en omvat die 28 dus. Er is één maat bijgekomen, de display, want de homepage heeft nu geen H1 en die moet er komen. */ --fs-display: clamp(2rem, 1.5rem + 2.2vw, 3rem); /* 32 -> 48 */ /* Alleen voor de hero op de twee homepagina's. Temper zet die kop op 100px; dit is de Heebo-variant daarvan, want Heebo is breder dan de smalle letter die zij gebruiken. */ --fs-display-xl: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); /* 40 -> 72 */ --fs-h1: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); /* 28 -> 40 */ --fs-h2: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24 -> 32, live is 28 */ --fs-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);/* 19 -> 22 */ --fs-h4: 1.125rem; /* 18 */ --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); /* 17 -> 20 */ --fs-body: 1rem; /* 16 */ --fs-small: 0.9375rem; /* 15 */ --fs-meta: 0.875rem; /* 14 */ --fs-eyebrow: 0.8125rem; /* 13 */ --lh-tight: 1.05; --lh-heading: 1.18; --lh-snug: 1.35; --lh-body: 1.65; /* De huidige site staat op 1,5. Te krap voor blogs van 2.000 woorden. */ --lh-loose: 1.75; --ls-display: -0.025em; --ls-heading: -0.015em; --ls-body: 0; --ls-eyebrow: 0.08em; --measure-prose: 66ch; /* maximale regellengte lopende tekst */ --measure-lead: 56ch; /* --------------------------------------------------------------------- 5. Ruimte. Basis 4px. --------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-11: 6rem; /* 96 */ --space-12: 8rem; /* 128 */ /* Sectieritme: het verschil tussen mobiel en desktop */ --section-y: clamp(3.5rem, 2rem + 6vw, 6rem); --section-y-large: clamp(4.5rem, 2.5rem + 8vw, 8rem); /* --------------------------------------------------------------------- 6. Maatvoering --------------------------------------------------------------------- */ --container-wide: 90rem; /* 1440, volledige breedte secties */ --container: 75rem; /* 1200, standaard inhoud */ --container-narrow: 45rem; /* 720, lopende tekst en formulieren */ --gutter: clamp(1.25rem, 0.75rem + 2vw, 2rem); --topbar-h: 3.5rem; /* 56, de balk met de doelgroepschakelaar */ --header-h: 4.5rem; /* 72, mobiel */ --header-h-lg: 5.5rem; /* 88, desktop */ --tap-min: 2.75rem; /* 44, minimale aanraakzone */ /* --------------------------------------------------------------------- 7. Radius. Overgenomen uit de live site: knoppen zijn pil-vormig (24 tot 26px op een hoogte van circa 44px), kaarten 8 tot 12px. --------------------------------------------------------------------- */ --radius-pill: 999px; /* alleen nog voor labels en tags */ /* Knoppen. De live site is pilvormig (26px op een hoogte van 44px). Op verzoek van 4 september 2026 minder rond gemaakt: een zachte rechthoek in plaats van een pil. Dit is dus een bewuste afwijking van de bestaande site, en de enige plek waar de knopvorm verandert. */ --radius-button: 0.625rem; /* 10, knoppen */ --radius-button-sm: 0.5rem; /* 8, kleine knoppen en icoonknoppen */ --radius-input: 0.5rem; /* 8 */ --radius-card: 0.75rem; /* 12 */ --radius-image: 1rem; /* 16 */ --radius-panel: 1.5rem; /* 24, grote vlakken en hero-beeld */ /* --------------------------------------------------------------------- 8. Schaduw. Spaarzaam. De strakke look komt van randen, niet van schaduwen. Schaduw alleen bij hover en bij zwevende elementen. --------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(22, 27, 29, 0.06); --shadow-md: 0 4px 16px rgba(22, 27, 29, 0.08); --shadow-lg: 0 12px 32px rgba(22, 27, 29, 0.10); --shadow-xl: 0 24px 56px rgba(17, 37, 64, 0.16); /* --------------------------------------------------------------------- 9. Beweging. Alle duren worden vermenigvuldigd met --motion-scale, zodat het studentenspoor sneller aanvoelt en het werkgeversspoor rustiger, zonder dat een component dat zelf hoeft te weten. --------------------------------------------------------------------- */ --dur-fast: calc(150ms * var(--motion-scale)); --dur-base: calc(220ms * var(--motion-scale)); --dur-slow: calc(320ms * var(--motion-scale)); --dur-reveal: calc(560ms * var(--motion-scale)); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entree, gedecideerd uitlopend */ --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* toestandswisseling */ /* Zachtere entree dan --ease-out, voor de eenmalige binnenkomst van de hero. --ease-out remt hard af en oogt op een vlak van deze omvang schokkerig; deze curve loopt rustiger uit. */ --ease-hero: cubic-bezier(0.22, 0.61, 0.36, 1); --reveal-shift: 1rem; /* verplaatsing bij scroll-reveal. Nooit meer dan 24px. */ --reveal-stagger: 60ms; /* vertraging tussen items in een rij */ /* -------------------------------------------------------------------- 10. Overlays op fotografie. Nodig om tekst op beeld leesbaar te houden bij minimaal 4,5:1. -------------------------------------------------------------------- */ --overlay-blue: linear-gradient(180deg, rgba(17,37,64,0.20) 0%, rgba(17,37,64,0.78) 100%); --overlay-ink: linear-gradient(180deg, rgba(22,27,29,0.15) 0%, rgba(22,27,29,0.70) 100%); --overlay-side: linear-gradient(90deg, rgba(17,37,64,0.82) 0%, rgba(17,37,64,0.35) 55%, rgba(17,37,64,0) 100%); --z-header: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; /* De vlagvorm onder het logo, overgetrokken van "Het witte vlak rond ons logo.png", aangeleverd op 15 september 2026. Zie blok 3 in site.css. */ --vlag: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20449%20122%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0%200%20L0.0%207.7%20L4.0%2017.0%20L8.0%2029.0%20L12.0%2041.4%20L16.0%2054.0%20L20.0%2066.0%20L24.0%2078.2%20L28.0%2090.0%20L32.0%2098.2%20L36.0%20103.6%20L40.0%20108.0%20L44.0%20111.4%20L48.0%20114.2%20L52.0%20116.2%20L56.0%20118.2%20L60.0%20119.6%20L64.0%20120.8%20L68.0%20121.4%20L72.0%20122.0%20L76.0%20122.0%20L80.0%20121.4%20L84.0%20120.8%20L88.0%20119.8%20L92.0%20118.6%20L96.0%20117.4%20L100.0%20116.0%20L104.0%20114.6%20L108.0%20113.4%20L112.0%20112.2%20L116.0%20111.0%20L120.0%20109.6%20L124.0%20108.4%20L128.0%20107.0%20L158.0%2097.4%20L188.0%2087.4%20L218.0%2077.6%20L248.0%2068.0%20L278.0%2058.4%20L308.0%2048.6%20L338.0%2038.6%20L368.0%2029.0%20L398.0%2019.4%20L428.0%209.6%20L449.0%203.0%20L449%200%20Z%22%20fill=%22%23000%22/%3E%3C/svg%3E"); } /* ----------------------------------------------------------------------- 11. Beperkte beweging. Verplicht, niet optioneel. Alle verplaatsing gaat uit, alleen zeer korte opacity-overgangen blijven. ----------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; --reveal-shift: 0px; --reveal-stagger: 0ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }