/* ============================================================ BECO BOUWGROEP — huisstijl-tokens Afgeleid uit het echte merkmateriaal: - logo SVG (becobouwgroep.be) → indigo #2D2E83 + goud #FDC300 - Elementor global colors → de zes stielkleuren - camion-/busbelettering → de kleurlijn onder "bouwen met vertrouwen" ============================================================ */ :root{ /* Primair */ --indigo: #2D2E83; --indigo-700: #24256B; --indigo-900: #14153C; --indigo-950: #0C0D26; /* Accent */ --goud: #FDC300; --goud-700: #E0AE00; /* Neutraal */ --inkt: #14153C; --grijs-900: #2B2C46; --grijs-600: #5B5D78; --grijs-400: #9294B0; --grijs-200: #DEDEE8; --grijs-100: #EFEFF5; --room: #F5F3ED; --room-2: #EDEAE1; --wit: #FFFFFF; /* De zes stielen — echte merkkleuren van BECO */ --bouw: #009FE3; --dak: #E6007E; --timmer: #3AAA35; --afbraak: #662483; --grond: #F39200; --vloer: #B17F4A; /* Terugkoppeling in een formulier. Groen is dezelfde groen als de stiel timmerwerken. Rood bestond nog niet in het palet en staat hier apart, want een mislukking hoort geen stielkleur te lenen. Ze worden alleen gebruikt om te zeggen of iets gelukt is. */ --gelukt: #3AAA35; --mis: #E30613; /* Ronding — afgeleid uit het lint en de boog in het B-teken */ --rond-s: 12px; --rond-m: clamp(16px,1.8vw,26px); --rond-l: clamp(22px,2.6vw,40px); --pil: 999px; /* De gouden zwiep uit het logo, als herbruikbare vorm */ --zwiep-vorm: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 44 55 20%22%3E%3Cpath fill=%22%23FDC300%22 d=%22M0,63.43c.39-.5.8-.98,1.25-1.43,1.25-1.25,2.73-2.27,4.35-3,1.36-.61,2.81-1.01,4.28-1.19h25.35l.34-.02c2.57-.12,5.1-.73,7.44-1.79,2.26-1.02,4.32-2.44,6.07-4.19,1.7-1.7,3.1-3.7,4.11-5.88.18.94.28,1.89.28,2.85,0,1.95-.39,3.9-1.15,5.7-.73,1.74-1.8,3.32-3.14,4.66-1.25,1.25-2.73,2.27-4.35,3-1.68.76-3.49,1.19-5.33,1.28h-.2s-.07.01-.07.01H0%22/%3E%3C/svg%3E"); /* Beweging */ --ease: cubic-bezier(.22,1,.36,1); --ease-uit: cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ul,ol{list-style:none} :focus-visible{outline:2px solid var(--goud);outline-offset:3px;border-radius:2px} /* ── De kleurlijn: het signatuurelement uit de belettering ───── */ /* De kleurlijn blijft recht: zo staat hij ook op de camion. */ .kleurlijn{display:flex;overflow:hidden;border-radius:0} .kleurlijn i{flex:1 1 0;display:block} .kleurlijn i:nth-child(1){background:var(--bouw)} .kleurlijn i:nth-child(2){background:var(--dak)} .kleurlijn i:nth-child(3){background:var(--timmer)} .kleurlijn i:nth-child(4){background:var(--afbraak)} .kleurlijn i:nth-child(5){background:var(--grond)} .kleurlijn i:nth-child(6){background:var(--vloer)} /* omgekeerd: van stiel 6 naar stiel 1, zoals ze in de expertisesectie genummerd staan */ .kleurlijn.omgekeerd i:nth-child(1){background:var(--vloer)} .kleurlijn.omgekeerd i:nth-child(2){background:var(--grond)} .kleurlijn.omgekeerd i:nth-child(3){background:var(--afbraak)} .kleurlijn.omgekeerd i:nth-child(4){background:var(--timmer)} .kleurlijn.omgekeerd i:nth-child(5){background:var(--dak)} .kleurlijn.omgekeerd i:nth-child(6){background:var(--bouw)} /* ── Het tempo van de kleurlijn ────────────────────────────── Alles wat aan de lijn hangt, hangt aan deze zes tijden: het tekenen, het wachten tot een segment uitgroeit, dat uitgroeien zelf, het wachten op de naam erbij, het opkomen van die naam, en de stap tussen twee segmenten op een werf met meerdere stielen. --kl-na is het moment waarop de lijn in een hero klaar is (hij start daar op .3s); de knop en de krul in de hero richten zich daarop. Deze waarden zijn gekozen na drie standen naast elkaar te hebben gezet (02-09-2026). Het was trager: 1,1s tekenen, de balk op 1,15s en de naam op 1,55s. Wie op een stielpagina landt, wachtte dan te lang om te zien waar hij is. */ :root{ --kl-teken:.75s; /* de lijn tekent zich van links naar rechts */ --kl-groei-wacht:.7s; /* na --start: een segment groeit uit */ --kl-groei:.5s; --kl-label-wacht:1s; /* na --start: de naam erbij komt op */ --kl-label:.35s; --kl-stap:.15s; /* tussen twee stielen op dezelfde werf */ --kl-na:calc(.3s + var(--kl-teken)); } /* de brede lijn tekent zich van links naar rechts */ .kleurlijn.tekenen{transform:scaleX(0);transform-origin:left; animation:tekenen var(--kl-teken) var(--ease-uit) var(--start,.9s) both} @keyframes tekenen{to{transform:scaleX(1)}} /* ── De gouden zwiep ───────────────────────────────────────── Eén keer op de pagina, in goud, in de rechterbocht van het grootste projectbeeld. Het pad komt uit de logo-SVG. */ .zwiep{position:relative} .zwiep::after{content:"";position:absolute;left:0; bottom:calc(-1 * var(--zwiep-uit,14px)); width:var(--zwiep-breed,20%);aspect-ratio:55/20;z-index:2;pointer-events:none; background:var(--zwiep-vorm) no-repeat left bottom/contain} /* tegen de rechterhoek, in dezelfde stand als in het logo */ .zwiep-rechts::after{left:auto;right:0;background-position:right bottom} /* ── Reveal-on-scroll ─────────────────────────────────────── De garantie: standaard is ALLES zichtbaar. Alleen wanneer de bewegingslaag echt draait, zet vroeg.js de klasse .beweging-aan op en pas dan mag er iets verborgen worden. Zonder JavaScript, met stukke JavaScript of met een trage verbinding blijft de pagina dus volledig leesbaar. vroeg.js haalt de klasse na 2500 ms weer weg als de laag nooit initialiseert. */ html.beweging-aan [data-reveal]{opacity:0;transform:translateY(22px); transition:opacity .95s var(--ease-uit),transform .95s var(--ease-uit)} html.beweging-aan [data-reveal].zichtbaar{opacity:1;transform:none} html.beweging-aan [data-reveal][data-delay="1"]{transition-delay:.08s} html.beweging-aan [data-reveal][data-delay="2"]{transition-delay:.16s} html.beweging-aan [data-reveal][data-delay="3"]{transition-delay:.24s} html.beweging-aan [data-reveal][data-delay="4"]{transition-delay:.32s} html.beweging-aan [data-reveal][data-delay="5"]{transition-delay:.40s} /* De kleurlijn beweegt altijd in één richting: van de eerste kleur naar de laatste. Nooit van buiten naar binnen, nooit per segment apart. Dat is de regel, overal op de site. De animatie zelf staat hierboven als .tekenen. */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important} html.beweging-aan [data-reveal]{opacity:1!important;transform:none!important} .kleurlijn.tekenen{transform:none!important} }