:root {
  --ink:                    #1A1A1A;
  --ink-foreground:         #FFFFFF;
  --ink-muted:              #BDBDBD;
  --graphite:               #343434;
  --navy:                   var(--ink);
  --navy-foreground:        var(--ink-foreground);
  --navy-muted:             var(--muted-foreground);
  --signal:                 var(--ink);
  --signal-foreground:      var(--ink-foreground);
  --surface:                #F5F5F5;
  --background:             #FFFFFF;
  --foreground:             #1A1A1A;
  --card:                   #FFFFFF;
  --card-foreground:        #1A1A1A;
  --popover:                #FFFFFF;
  --popover-foreground:     #1A1A1A;
  --primary:                var(--accent);
  --primary-foreground:     var(--accent-foreground);
  --secondary:              #F5F5F5;
  --secondary-foreground:   #1A1A1A;
  --muted:                  #F5F5F5;
  --muted-foreground:       #5C5C5C;
  --accent:                 #E8611A;
  --accent-hover:           #D4550F;
  --accent-foreground:      #1A1A1A;
  --border:                 #E0E0E0;
  --input:                  #E0E0E0;
  --ring:                   var(--accent);
  --placeholder:            #343434;
  --placeholder-foreground: #BDBDBD;
  --destructive:            #D64545;
  --destructive-foreground: #FFFFFF;
  --radius:                 4px;
  --font-heading:           "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans:              "Inter", system-ui, sans-serif;
}

Diensten

• Shovel

• Grid2x2

• Fence

• Wind

• Scissors

• Truck

USP's

• ShieldCheck

• Layers

• Clock

• Handshake

• BadgeCheck

• container: max-width 1248px
• kolommen: 12
• gutter: 32px (20px op mobiel)
• breakpoint sm: 640px
• breakpoint md: 768px
• breakpoint lg: 1024px
• breakpoint xl: 1280px
• sectiepadding: 64px mobiel / 96px desktop

• Zwart-wit in hero’s; kleur is toegestaan in content
• Eigen mensen en materieel, met bedrijfskleding in beeld
• Hero: full-width, minimaal 70vh op desktop; binnenpagina’s 40vh / 32vh mobiel
• Eigen hero-foto’s: liggend 16:9, minimaal 2400 px breed
• Over ons: ratio 5/4
• Projecten: ratio 16/9
• Rustig vlak links voor de tekst; machinist en bedrijfskleding in beeld
• Geen logo's van opdrachtgevers zonder toestemming

Gedeelde foto’s: home / grondverzet, contact / grondzuigtechniek, vacatures / projectinrichting en over ons / transport. Toepassingspagina’s gebruiken de foto van hun dienst; de fotoblokken in de tekst blijven placeholders. Bestratingen en asfaltzagen hebben een kleine bronfoto; scherpere originelen zijn gewenst.

• Accent / materieel-oranje

  #E8611A

  --accent

  Maximaal 10% van het beeld; nooit sectieachtergronden

• Ink

  #1A1A1A

  --ink / --foreground

  Koppen, footer en donkere secties

• Graphite

  #343434

  --graphite

  Calamiteitenbalk, tabelkoppen en fotoblokken

• Light Grey

  #F5F5F5

  --surface / --secondary

  Sectie-achtergrond

• White

  #FFFFFF

  --background

  Basisachtergrond en tekst op donker

• Border

  #E0E0E0

  --border

  Randen van cards en tabellen

• Muted text

  #5C5C5C

  --muted-foreground

  Secundaire bodytekst

• Placeholder

  #343434

  --placeholder

  Captionkleur #BDBDBD

• Destructive

  #D64545

  --destructive

  Alleen foutmeldingen, geen accentkleur

Accent uitschakelen: zet --accent gelijk aan --ink.

Contrast: #1A1A1A op #E8611A en #E8611A op #1A1A1A: 5,10:1. Oranje is geen bodytekstkleur op wit.

• Grondverzet en bestratingH1 — Barlow Condensed Bold, uppercase
  48 / 60 px, line-height 1.05
• Grondverzet en bestratingH2 — Barlow Condensed Bold, uppercase
  36 / 48 px
• Grondverzet en bestratingH3 — Barlow Condensed Bold, uppercase
  24 px
• Grondverzet en bestratingEyebrow — Barlow Condensed 600, tracking 0.14em
  15 px, uppercase
• Grondverzet en bestratingBody large — Inter Regular
  18 px, line-height 1.65
• Grondverzet en bestratingBody — Inter Regular
  16 px, line-height 1.65
• Grondverzet en bestratingSmall — Inter Regular
  14 px

• spacing-4 · 1rem / 16px
• spacing-6 · 1.5rem / 24px
• spacing-8 · 2rem / 32px
• spacing-10 · 2.5rem / 40px
• spacing-16 · 4rem / 64px
• spacing-24 · 6rem / 96px

• SiteHeader → header.php
• SiteFooter → footer.php
• Hero → template-parts/hero.php
• ServiceGrid → template-parts/service-grid.php
• UspBlock → template-parts/usp-block.php
• HowItWorks → template-parts/how-it-works.php
• ProjectCases → template-parts/project-cases.php
• CtaBand → template-parts/cta-band.php
• ContactForm → template-parts/contact-form.php
• MachineTable → template-parts/machine-table.php
• VacancyCard → template-parts/vacancy-card.php
• PageIntro → template-parts/page-intro.php
• FaqAccordion → template-parts/faq.php
• ApplicationShell → single-toepassing.php

FaqAccordion → template-parts/faq.php · ACF repeater vraag/antwoord