CSS

The custom CSS is broadly applied and defines the look and feel of the following elements:

• Accordions
• Tabs
• Section backgrounds
• Headers

It also includes several :root variables for colors and other styling elements. These can be easily updated to modify the visual appearance across templates, without needing to edit individual pages.

:root {
	--oranje: #EE7F00;
	--donkergroen: #628C5F;
	--lichtblauw: #B1CEDE;
	--paars: #9E6697;
	--lichtgroen: #9CC489;
	--donkerblauw: #578494;
	--grijsgroen: #C4C6B1;
	--geel: #DEC437;
	--roze: #E0B6CE;

	--bg-callout-bg: #E6E6E6;
	--bg-callout-border: #CCCCCC;

	--bs-body-font-size: 17px;

	--brd-custom: #DEE2E6;

	--info: #cfe2ff;
	--success: #d1e7dd;
	--warning: #fff3cd;
	--error: #f8d7daX;
}

Font Family

Following the Hanze Marketing guidelines, Helvetica Neue is used as the primary font across all templates, with Arial as a fallback.

body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    color: rgb(32, 33, 34);
    padding-right: 15px; /* Matches the left-side body padding in Brightspace */
}

Colors

These are the colors used within the templates currently;

Oranje

#EE7F00 - oranje

Donkergroen

#628C5F - donkergroen

Paars

#9E6697 - paars

Donkerblauw

#578494 - donkerblauw