Icon-box Style Sheet

max-width: 1920px -- min-width: 375px

CSS CODE

White Space Style sheet

Typography Style Sheet

Dark-scheme

Responsive Design

A website should look great on every device, from desktop to mobile.

User-Friendly Navigation

Clear navigation helps visitors find what they need quickly and easily.

Visual Consistency

Consistent colors, fonts, and styles create a strong brand identity.

Light-scheme

Responsive Design

A website should look great on every device, from desktop to mobile.

User-Friendly Navigation

Clear navigation helps visitors find what they need quickly and easily.

Visual Consistency

Consistent colors, fonts, and styles create a strong brand identity.

Accent-scheme

Responsive Design

A website should look great on every device, from desktop to mobile.

User-Friendly Navigation

Clear navigation helps visitors find what they need quickly and easily.

Visual Consistency

Consistent colors, fonts, and styles create a strong brand identity. 

				
					<style>
/* ========== BASIS VARIABELEN ========== */
:root {
	
  /* Tekstkleuren */
  --heading-color: var(--e-global-color-primary);
  --subtitle-color: var(--e-global-color-primary);
  --body-text-color: var(--e-global-color-primary);

  /* Linkkleuren */
  --link-text-color: var(--e-global-color-accent);
  --link-text-hover-color: var(--e-global-color-primary);
  --link-text-bg-color: var(--e-global-color-accent);
  --link-text-hover-bg-color: var(--e-global-color-accent);
  --link-border-color: var(--e-global-color-primary);
	
	/*icon kleuren*/
	--icon-boc-icon-color: var(--e-global-color-accent);
	
}
	

/* ========== LICHTE THEMA ========== */
.light-scheme {
  --heading-color: var(--e-global-color-primary);
  --subtitle-color: var(--e-global-color-primary);
  --body-text-color: var(--e-global-color-primary);

  --link-text-color: var(--e-global-color-accent);
  --link-text-hover-color: var(--e-global-color-primary);
  --link-text-bg-color: var(--e-global-color-primary);
  --link-text-hover-bg-color: var(--e-global-color-accent);
  --link-border-color: var(--e-global-color-primary);
	
	--icon-box-icon-color: var(--e-global-color-accent);
	
		--container-bg-color : var(--e-global-color-secondary)
}

/* ========== DONKERE THEMA ========== */
.dark-scheme {
  --heading-color: var(--e-global-color-secondary); 
  --subtitle-color: var(--e-global-color-accent);
  --body-text-color: var(--e-global-color-secondary);

  --link-text-color: var(--e-global-color-primary);
  --link-text-hover-color: var(--e-global-color-accent);
  --link-text-bg-color: var(--e-global-color-accent);
  --link-text-hover-bg-color: var(--e-global-color-primary);
  --link-border-color: var(--e-global-color-accent);
	
	--icon-box-icon-color: var(--e-global-color-accent);
	
	--container-bg-color : var(--e-global-color-primary)
}

/* ========== ACCENT THEMA ========== */
.accent-scheme {
  --heading-color: var(--e-global-color-primary); 
  --subtitle-color: var(--e-global-color-primary);
  --body-text-color: var(--e-global-color-primary);

  --link-text-color: var(--e-global-color-accent);
  --link-text-hover-color: var(--e-global-color-primary);
  --link-text-bg-color: var(--e-global-color-primary);
  --link-text-hover-bg-color: var(--e-global-color-accent);
  --link-border-color: var(--e-global-color-primary);
	
	--icon-box-icon-color: var(--e-global-color-primary);
	
	--container-bg-color : var(--e-global-color-accent)
}

/* ========== TEKSTSTIJLEN ========== */

	:where(h1,h2,h3,h4,h5,h6) {
		 color: var(--body-text-color) !important;
	}

	
.elementor-widget-text-editor,
.elementor-widget-icon-box
	{
  color: var(--body-text-color);
}

.elementor-widget-text-editor a
	{
  color: var(--link-text-color);
  background: var(--link-text-bg-color);
  border: 1px solid var(--link-border-color);
}

.elementor-widget-text-editor a:hover {
  color: var(--link-text-hover-color);
  background: var(--link-text-hover-bg-color);
}

.elementor-widget-text-editor h1,
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3,
.elementor-widget-icon-box h1,
.elementor-widget-icon-box h2,
.elementor-widget-icon-box h3
	{
  color: var(--heading-color);
}

.elementor-widget-text-editor h4,
.elementor-widget-text-editor h5,
.elementor-widget-text-editor h6,
.elementor-widget-icon-box h4,
.elementor-widget-icon-box h5,
.elementor-widget-icon-box h6{
  color: var(--subtitle-color);
}

.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-icon-box p {
  color: var(--body-text-color);
}
	
	.elementor-widget-icon-box .elementor-icon {
		color: var(--icon-box-icon-color);
		fill: var(--icon-box-icon-color);
	}
	
	.e-parent, .e-con {
		background-color: var(--container-bg-color)
	}	
</style>

				
			
				
					<style>
:root {
  --fscale-multiplier: 1; /* standaard schaalfactor */

  /* Font size scales met multiplier */
  --xxxlarge: calc(clamp(3rem, 2.36rem + 2.72vw, 5.63rem) * var(--fscale-multiplier));
  --xxlarge:  calc(clamp(2.5rem, 2.26rem + 1.04vw, 3.5rem) * var(--fscale-multiplier));
  --xlarge:   calc(clamp(2rem, 1.82rem + 0.78vw, 2.75rem) * var(--fscale-multiplier));
  --large:    calc(clamp(1.5rem, 1.26rem + 1.04vw, 2.5rem) * var(--fscale-multiplier));
  --xmedium:  calc(clamp(1.25rem, 1.07rem + 0.78vw, 2rem) * var(--fscale-multiplier));
  --medium:   calc(clamp(1.19rem, 1.11rem + 0.32vw, 1.5rem) * var(--fscale-multiplier));
  --small:    calc(clamp(1.13rem, 1.09rem + 0.13vw, 1.25rem) * var(--fscale-multiplier));
  --xsmall:   calc(clamp(1rem, 0.97rem + 0.13vw, 1.13rem) * var(--fscale-multiplier));
  --xxsmall:  calc(clamp(0.82rem, 0.8rem + 0.12vw, 0.94rem) * var(--fscale-multiplier));
}

/* Root font size */
html {
  font-size: 16px;
}

/* Font weight utilities */
:is(.fw300, .fw600, .fw800) :is(h1, h2, h3, h4, h5, h6, p) {
  font-weight: var(--fw, 400);
}

.fw300 { --fw: 300; }
.fw600 { --fw: 600; }
.fw800 { --fw: 800; }

/* Responsive text balance */
@media (min-width: 767px) {
  .balance :is(
    h1, h2, h3, h4, h5, h6, p,
    .elementor-widget-text-editor h1,
    .elementor-widget-text-editor h2,
    .elementor-widget-text-editor h3,
    .elementor-widget-text-editor h4,
    .elementor-widget-text-editor h5,
    .elementor-widget-text-editor h6
  ) {
    text-wrap: balance;
  }
}

/* Font sizes using multiplier variables */
.xxxlarge :is(h1, h2, h3, h4, h5, h6, p) {
  font-size: var(--xxxlarge);
  line-height: 1;
}

.xxlarge :is(h1, h2, h3, h4, h5, h6, p) {
  font-size: var(--xxlarge);
  line-height: 1.1;
}

.xlarge :is(h1, h2, h3, h4, h5, h6, p) {
  font-size: var(--xlarge);
  line-height: 1.2;
}

.large :is(h1, h2, h3, h4, h5, h6, p) {
  font-size: var(--large);
  line-height: 1.3;
}

.xmedium :is(h1, h2, h3, h4, h5, h6, p) {
  font-size: var(--xmedium);
  line-height: 1.4;
}

.medium :is(h1, h2, h3, h4, h5, h6, p) {
  font-size: var(--medium);
  line-height: 1.4;
}

.small :is(h1, h2, h3, h4, h5, h6, p) {
  font-size: var(--small);
  line-height: 1.4;
}

.xsmall :is(h1, h2, h3, h4, h5, h6, p) {
  font-size: var(--xsmall);
  line-height: 1.4;
}

.xxsmall :is(h1, h2, h3, h4, h5, h6, p) {
  font-size: var(--xxsmall);
  line-height: 1.4;
}


</style>

				
			
				
					<style>


/* Elementor text editor headings and iconbox headings */
.elementor-widget-text-editor h1,
.elementor-widget-icon-box h1	
	{
  font-size: var(--xxxlarge);
  line-height: 1;
  font-weight: 800;
}

.elementor-widget-text-editor h2,
.elementor-widget-icon-box h2	{
  font-size: var(--large);
  line-height: 1.2;
  font-weight: 600;
}

.elementor-widget-text-editor h3,
	.elementor-widget-icon-box h3	{
  font-size: var(--xmedium);
  line-height: 1.3;
  font-weight: 600;
}

.elementor-widget-text-editor h4,
.elementor-widget-icon-box h4	{
  font-size: var(--medium);
  line-height: 1.45;
  font-weight: 600;
}

.elementor-widget-text-editor h5,
.elementor-widget-icon-box h5	{
  font-size: var(--xsmall);
  line-height: 1.45;
  font-weight: 600;
}

.elementor-widget-text-editor h6,
.elementor-widget-icon-box h6	
	{
  font-size: var(--xsmall);
  line-height: 1.45;
  text-transform: uppercase;
}
	
.elementor-widget-text-editor :is(p, li) {
  font-size: var(--small);
  line-height: 1.7;
}

/* Links */
.elementor-widget-text-editor a {
  font-size: var(--small);
  line-height: 1.5;
  font-weight: 600;
  border-radius: 20px;
  padding: 3px 8px;
  transition: all 0.3s;
}

</style>