/* ========================================================================== Eén Gezonde Visie – opmaak Kleur: Pantone 5585 C (#A7BDB1) met diep groen-zwart en ivoor. Lettertype: Montserrat (lokaal). Beweging: rustig, bij het scrollen. ========================================================================== */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/montserrat-latin-300-normal.woff2) format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/montserrat-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/montserrat-latin-500-normal.woff2) format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/montserrat-latin-600-normal.woff2) format('woff2'); } :root { --salie: #A7BDB1; /* Pantone 5585 C */ --salie-licht: #D6E2DB; --salie-zacht: #EDF2EF; --salie-diep: #4F6B5D; /* voor tekst op licht: voldoende contrast */ --inkt: #1E2B26; --inkt-2: #26362F; --ivoor: #F8F7F3; --wit: #FFFFFF; --tekst: #23302B; --tekst-zacht: #4A5752; --lijn: rgba(30, 43, 38, .12); --lijn-licht: rgba(255, 255, 255, .16); --rand: clamp(20px, 5vw, 56px); --max: 1240px; --ease: cubic-bezier(.16, 1, .3, 1); --ease-2: cubic-bezier(.2, .7, .2, 1); --kop-h: 84px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.75; font-weight: 400; color: var(--tekst); background: var(--wit); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; } p { margin: 0 0 1.1em; } h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: 1.15; letter-spacing: -.012em; color: inherit; } h3 { font-weight: 500; font-size: 19px; line-height: 1.35; letter-spacing: 0; } :focus-visible { outline: 2px solid var(--salie-diep); outline-offset: 3px; border-radius: 2px; } .sectie--donker :focus-visible, .hero :focus-visible, .voet :focus-visible, .kop:not(.is-vast) :focus-visible { outline-color: var(--salie); } main { display: block; outline: none; } .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); } .wrap--smal { max-width: calc(780px + 2 * var(--rand)); } .overslaan { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--wit); color: var(--inkt); padding: 10px 16px; border-radius: 6px; text-decoration: none; font-weight: 500; transition: top .2s; } .overslaan:focus { top: 12px; } /* ------------------------------------------------------------------ labels, titels, knoppen */ .label { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--salie-diep); margin: 0 0 22px; } .label::before { content: ''; width: 36px; height: 1px; background: currentColor; opacity: .6; flex: none; } .label--licht, .sectie--donker .label { color: var(--salie); } .titel { font-size: clamp(30px, 3.9vw, 52px); line-height: 1.12; margin: 0 0 28px; max-width: 18ch; } .titel--groot { font-size: clamp(36px, 5vw, 68px); max-width: 16ch; } .sectie__kop { margin-bottom: clamp(40px, 5vw, 72px); max-width: 760px; } .sectie__kop--breed { max-width: 920px; } .sectie__intro { font-size: 18px; color: var(--tekst-zacht); max-width: 62ch; } .knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; } .knop { --k-bg: transparent; --k-kleur: currentColor; --k-rand: currentColor; position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 14px 26px; border-radius: 999px; border: 1px solid var(--k-rand); background: var(--k-bg); color: var(--k-kleur); font: 500 15px/1.2 'Montserrat', sans-serif; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); } .knop::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--k-hover, var(--wit)); border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--ease); } .knop:hover::after, .knop:focus-visible::after { transform: none; } .knop .pijl { width: 18px; height: 18px; transition: transform .5s var(--ease); } .knop:hover .pijl { transform: translateX(4px); } .knop--vol { --k-bg: var(--salie); --k-kleur: var(--inkt); --k-rand: var(--salie); --k-hover: var(--wit); } .knop--vol:hover { --k-rand: var(--wit); } .knop--lijn { --k-kleur: var(--wit); --k-rand: rgba(255, 255, 255, .45); --k-hover: var(--wit); } .knop--lijn:hover { color: var(--inkt); --k-rand: var(--wit); } .sectie:not(.sectie--donker):not(.cta) .knop--vol { --k-bg: var(--inkt); --k-kleur: var(--wit); --k-rand: var(--inkt); --k-hover: var(--salie-diep); } .knop--klein { min-height: 42px; padding: 10px 20px; font-size: 14px; } /* ------------------------------------------------------------------ kop (header) */ .kop { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--kop-h); color: var(--wit); transition: background-color .5s var(--ease), color .5s var(--ease), height .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); } .kop__binnen { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .kop.is-vast { --kop-h: 70px; background: rgba(248, 247, 243, .92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); color: var(--inkt); box-shadow: 0 1px 0 var(--lijn); } .kop.is-weg { transform: translateY(-100%); } .admin-bar .kop { top: 32px; } @media (max-width: 782px) { .admin-bar .kop { top: 46px; } } .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .logo__beeld { width: 44px; height: 30px; flex: none; } .logo__beeld circle { fill: none; stroke: currentColor; stroke-width: 1.4; } .logo__lens { fill: var(--salie); } .logo__tekst { font-size: 17px; font-weight: 400; letter-spacing: .06em; white-space: nowrap; } .logo__een { font-weight: 600; } .custom-logo-link img { max-height: 48px; width: auto; } .nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); } .nav .menu { list-style: none; display: flex; gap: clamp(14px, 1.8vw, 30px); margin: 0; padding: 0; } .nav .menu a { position: relative; white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: .01em; padding: 6px 0; } .nav .menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); } .nav .menu a:hover::after, .nav .menu .current-menu-item > a::after, .nav .menu .current_page_item > a::after { transform: scaleX(1); transform-origin: left; } .nav__knop { --k-rand: currentColor; --k-hover: var(--salie); white-space: nowrap; } .nav__knop:hover { color: var(--inkt); --k-rand: var(--salie); } .nav .sub-menu { display: none; } .menuknop { display: none; } @media (max-width: 1240px) { .menuknop { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; color: inherit; font: 500 15px 'Montserrat', sans-serif; cursor: pointer; padding: 10px 0; position: relative; z-index: 2; } .menuknop__streepjes { display: grid; gap: 6px; width: 26px; } .menuknop__streepjes i { display: block; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); } .menu-open .menuknop__streepjes i:first-child { transform: translateY(3.75px) rotate(45deg); } .menu-open .menuknop__streepjes i:last-child { transform: translateY(-3.75px) rotate(-45deg); } .nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 36px; padding: calc(var(--kop-h) + 20px) var(--rand) 40px; background: var(--inkt); color: var(--wit); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--ease), visibility 0s .8s; } .menu-open .nav { clip-path: inset(0); visibility: visible; transition: clip-path .8s var(--ease); } .menu-open .kop { color: var(--wit); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .nav .menu { flex-direction: column; gap: 6px; } .nav .menu a { font-size: clamp(26px, 7vw, 40px); font-weight: 300; display: inline-block; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .8s var(--ease); } .menu-open .nav .menu a { opacity: 1; transform: none; } .menu-open .nav .menu li:nth-child(2) a { transition-delay: .06s; } .menu-open .nav .menu li:nth-child(3) a { transition-delay: .12s; } .menu-open .nav .menu li:nth-child(4) a { transition-delay: .18s; } .menu-open .nav .menu li:nth-child(5) a { transition-delay: .24s; } .menu-open .nav .menu li:nth-child(6) a { transition-delay: .3s; } .menu-open .nav .menu li:nth-child(7) a { transition-delay: .36s; } .menu-open { overflow: hidden; } .logo { position: relative; z-index: 2; } } /* ------------------------------------------------------------------ gordijn (pagina-overgang) */ .gordijn { display: none; } .js .gordijn { display: block; position: fixed; inset: 0; z-index: 400; background: var(--inkt); pointer-events: none; transform: translateY(0); transition: transform 1s var(--ease); } .js .gordijn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--salie); } .js body.is-geladen .gordijn { transform: translateY(-101%); } .js body.is-weg .gordijn { transform: translateY(0); transition-duration: .6s; } /* ------------------------------------------------------------------ hero */ .hero { position: relative; overflow: hidden; isolation: isolate; min-height: min(78vh, 760px); display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--kop-h) + 60px) 0 clamp(70px, 9vw, 120px); background: var(--inkt); color: var(--wit); } .hero--groot { min-height: 100vh; min-height: 100svh; padding-bottom: clamp(30px, 4vw, 48px); } .hero__achtergrond { position: absolute; inset: -10% 0 0; z-index: -1; transform: translate3d(0, var(--p, 0px), 0); will-change: transform; } .vlek { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; } .vlek--1 { width: 56vw; height: 56vw; max-width: 820px; max-height: 820px; right: -12vw; top: 0; background: radial-gradient(circle, #6F8B7D 0%, rgba(111, 139, 125, 0) 68%); animation: drijf1 22s ease-in-out infinite alternate; } .vlek--2 { width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; left: -14vw; bottom: -18vw; background: radial-gradient(circle, #3C5348 0%, rgba(60, 83, 72, 0) 70%); animation: drijf2 26s ease-in-out infinite alternate; } .vlek--3 { width: 30vw; height: 30vw; max-width: 460px; max-height: 460px; left: 38%; top: 12%; background: radial-gradient(circle, rgba(167, 189, 177, .55) 0%, rgba(167, 189, 177, 0) 70%); animation: drijf3 18s ease-in-out infinite alternate; } @keyframes drijf1 { to { transform: translate(-8vw, 6vh) scale(1.12); } } @keyframes drijf2 { to { transform: translate(10vw, -8vh) scale(1.08); } } @keyframes drijf3 { to { transform: translate(-6vw, 10vh) scale(.9); } } .hero__lijnen { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__lijnen circle { fill: none; stroke: rgba(167, 189, 177, .28); stroke-width: 1; stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: teken 3.2s var(--ease) .5s forwards; } .hero__lijnen circle:nth-child(2) { animation-delay: .8s; } .hero__lijnen circle:nth-child(3) { stroke: rgba(167, 189, 177, .14); animation-delay: 1.1s; animation-duration: 4s; stroke-dasharray: 2400; stroke-dashoffset: 2400; } @keyframes teken { to { stroke-dashoffset: 0; } } .korrel { position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30, 43, 38, .35) 0%, rgba(30, 43, 38, 0) 30%, rgba(30, 43, 38, .45) 100%); } .hero__inhoud { position: relative; } .hero__label { margin-bottom: 30px; } .hero__label::before { display: none; } .hero__label .streep { width: 36px; height: 1px; background: currentColor; opacity: .7; display: inline-block; } .hero__titel { font-size: clamp(42px, 7.4vw, 108px); font-weight: 300; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 32px; } .hero:not(.hero--groot) .hero__titel { font-size: clamp(40px, 6.2vw, 88px); } .hero--groot .hero__titel { font-size: clamp(42px, 5.8vw, 84px); } .regel { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; } .regel > span { display: block; } .regel:nth-child(2) > span { color: var(--salie); } .hero__intro { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; max-width: 46ch; color: rgba(255, 255, 255, .88); margin-bottom: 36px; } .hero__knoppen { margin-bottom: 0; } .hero__feiten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(56px, 8vh, 96px); padding-top: 26px; border-top: 1px solid var(--lijn-licht); } .hero__feiten p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .86); display: flex; gap: 14px; align-items: baseline; } .hero__feiten .nr { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--salie); } .hero__scroll { position: absolute; right: var(--rand); bottom: clamp(30px, 4vw, 48px); display: none; align-items: center; gap: 14px; color: rgba(255, 255, 255, .8); text-decoration: none; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-rl; } .hero__scroll i { width: 1px; height: 64px; background: rgba(255, 255, 255, .25); position: relative; overflow: hidden; } .hero__scroll i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--salie); animation: zak 2.4s var(--ease) infinite; } @keyframes zak { to { top: 100%; } } .hero:not(.hero--groot) .hero__scroll { display: flex; } /* hero-beweging bij laden */ .js .hero__label, .js .hero__intro, .js .hero__knoppen, .js .hero__feiten p { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-2), transform 1.2s var(--ease); } .js .regel > span { transform: translateY(108%); transition: transform 1.3s var(--ease); transition-delay: calc(.35s + var(--i, 0) * .12s); } .js .is-geladen .regel > span { transform: none; } .js .is-geladen .hero__label { opacity: 1; transform: none; transition-delay: .25s; } .js .is-geladen .hero__intro { opacity: 1; transform: none; transition-delay: .75s; } .js .is-geladen .hero__knoppen { opacity: 1; transform: none; transition-delay: .9s; } .js .is-geladen .hero__feiten p { opacity: 1; transform: none; transition-delay: calc(1.05s + var(--i, 0) * .1s); } /* ------------------------------------------------------------------ verschijnen bij scrollen */ .js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease-2), transform 1.2s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); } .js [data-reveal].is-in { opacity: 1; transform: none; } .js .woorden[data-reveal] { opacity: 1; transform: none; } .woorden .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; } .woorden .w > span { display: inline-block; } .js .woorden .w > span { transform: translateY(110%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); } .js .woorden.is-in .w > span { transform: none; } /* ------------------------------------------------------------------ secties */ .sectie { position: relative; padding: clamp(80px, 10vw, 150px) 0; } .sectie--ivoor { background: var(--ivoor); } .sectie--salie { background: var(--salie); color: var(--inkt); } .sectie--salie .label { color: var(--inkt); } .sectie--salie .sectie__intro, .sectie--salie p { color: var(--inkt); } .sectie--donker { background: var(--inkt); color: var(--wit); } .sectie--donker p { color: rgba(255, 255, 255, .86); } /* tweeluik */ .tweeluik__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 7vw, 120px); align-items: start; } .tweeluik__kop { position: sticky; top: 120px; } .tweeluik__kop .titel { margin-bottom: 0; } .tweeluik__tekst { padding-top: 46px; max-width: 64ch; } .tweeluik__tekst p:first-child { font-size: 20px; line-height: 1.65; color: var(--inkt); } .sectie--salie .tweeluik__tekst p:first-child { color: var(--inkt); } .tweeluik + .tweeluik:not(.sectie--salie) { padding-top: 0; } /* band met woorden */ .band { overflow: hidden; background: var(--ivoor); border-block: 1px solid var(--lijn); padding: 26px 0; } .band__spoor { display: flex; width: max-content; animation: band 48s linear infinite; } .band__reeks { display: flex; align-items: center; flex: none; } .band span { font-size: clamp(26px, 3.6vw, 52px); font-weight: 300; letter-spacing: -.01em; color: var(--inkt); white-space: nowrap; padding: 0 clamp(18px, 2.4vw, 36px); } .band span:nth-child(4n+1) { color: var(--salie-diep); } .band i { width: 10px; height: 10px; border-radius: 50%; background: var(--salie); flex: none; } @keyframes band { to { transform: translateX(-50%); } } .band:hover .band__spoor { animation-play-state: paused; } /* diensten */ .diensten__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--lijn); } .dienst { position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 340px; padding: clamp(32px, 4vw, 56px) clamp(24px, 3.4vw, 52px) clamp(30px, 3.4vw, 48px) 0; text-decoration: none; color: var(--tekst); border-bottom: 1px solid var(--lijn); transition: background-color .6s var(--ease), padding .6s var(--ease); } .dienst:nth-child(odd) { border-right: 1px solid var(--lijn); } .dienst:nth-child(even) { padding-left: clamp(24px, 3.4vw, 52px); } .dienst__nr { font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--salie-diep); } .dienst h3 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 300; line-height: 1.15; color: var(--inkt); } .dienst p { color: var(--tekst-zacht); max-width: 44ch; margin: 0; } .dienst__meer { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--inkt); } .dienst__meer .pijl { width: 18px; height: 18px; transition: transform .5s var(--ease); } .dienst__lijn { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--salie-diep); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); } .dienst:hover { background: var(--salie-zacht); } .dienst:nth-child(odd):hover { padding-left: 24px; } .dienst:hover .dienst__lijn { transform: scaleX(1); } .dienst:hover .pijl { transform: translateX(6px); } /* feiten */ .feiten { padding: clamp(70px, 8vw, 120px) 0; } .feiten__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); } .feit { border-top: 1px solid var(--lijn-licht); padding-top: 28px; } .feit__getal { font-size: clamp(64px, 8vw, 120px); font-weight: 300; line-height: 1; letter-spacing: -.03em; color: var(--salie); margin: 0 0 18px; font-variant-numeric: tabular-nums; } .feit__tekst { max-width: 30ch; font-size: 17px; } /* model */ .model__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 110px); align-items: center; } .model__tekst > p { max-width: 60ch; color: var(--tekst-zacht); } .model__lijst { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--lijn); } .model__lijst li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--lijn); } .model__lijst strong { font-weight: 500; color: var(--inkt); } .model__lijst span { color: var(--tekst-zacht); } .model__figuur { margin: 0; } .model__figuur svg { width: 100%; max-width: 480px; margin: 0 auto; overflow: visible; } .ring { fill: rgba(167, 189, 177, .26); stroke: var(--salie-diep); stroke-width: 1.2; mix-blend-mode: multiply; } .model__figuur text { font: 500 15px 'Montserrat', sans-serif; fill: var(--inkt); text-anchor: middle; letter-spacing: .02em; } .kern { fill: var(--inkt); } .model__figuur .kern__tekst { fill: var(--wit); font-size: 13px; font-weight: 600; letter-spacing: .08em; } .js .model__figuur .ring { stroke-dasharray: 660; stroke-dashoffset: 660; fill-opacity: 0; transition: stroke-dashoffset 2s var(--ease), fill-opacity 1.2s ease 1s; } .js .model__figuur .ring--2 { transition-delay: .2s, 1.2s; } .js .model__figuur .ring--3 { transition-delay: .4s, 1.4s; } .js .model__figuur.is-in .ring { stroke-dashoffset: 0; fill-opacity: 1; } .js .model__figuur text, .js .model__figuur .kern { opacity: 0; transition: opacity 1s ease 1.4s; } .js .model__figuur.is-in text, .js .model__figuur.is-in .kern { opacity: 1; } /* sporen */ .sporen__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .spoor { background: rgba(255, 255, 255, .55); border-radius: 18px; padding: clamp(28px, 3vw, 40px); transition: transform .6s var(--ease), background-color .6s var(--ease); } .spoor:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .8); } .spoor__en { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--salie-diep); margin-bottom: 18px; } .spoor h3 { font-size: 26px; font-weight: 300; margin-bottom: 14px; color: var(--inkt); } .spoor p { margin: 0; } /* stappen */ .stappen__wrap { position: relative; } .stappen__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); } .stappen__lijn { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--lijn); } .stappen__lijn span { position: absolute; inset: 0; background: var(--salie-diep); transform: scaleX(var(--v, 0)); transform-origin: left; } .stap { padding-top: 34px; position: relative; } .stap::before { content: ''; position: absolute; top: -5px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--wit); border: 1px solid var(--salie-diep); } .stap__nr { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--salie-diep); margin-bottom: 14px; } .stap h3 { margin-bottom: 10px; color: var(--inkt); } .stap p { color: var(--tekst-zacht); font-size: 16.5px; line-height: 1.8; margin: 0; } /* tijdlijn */ .tijdlijn__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 110px); } .tijdlijn__kop { position: sticky; top: 120px; align-self: start; } .tijdlijn__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn-licht); } .tijdlijn__lijst li { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--lijn-licht); } .tijdlijn__moment { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--salie); padding-top: 3px; } .tijdlijn__lijst h3 { margin-bottom: 6px; color: var(--wit); } .tijdlijn__lijst p { margin: 0; } /* doelgroepen */ .doelgroepen__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .doelgroep { background: var(--wit); border-radius: 18px; padding: clamp(28px, 3vw, 44px); box-shadow: 0 1px 0 var(--lijn); transition: transform .6s var(--ease), box-shadow .6s var(--ease); } .doelgroep:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -30px rgba(30, 43, 38, .35); } .doelgroep__aantal { font-size: clamp(40px, 4vw, 56px); font-weight: 300; line-height: 1; color: var(--salie-diep); margin-bottom: 26px; letter-spacing: -.02em; } .doelgroep__aantal small { font-size: 15px; font-weight: 500; letter-spacing: 0; margin-left: 8px; color: var(--tekst-zacht); } .doelgroep h3 { margin-bottom: 10px; color: var(--inkt); } .doelgroep p { margin: 0; color: var(--tekst-zacht); } /* kaarten */ .kaarten__grid { display: grid; gap: 20px; } .kaarten__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kaarten__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kaart { position: relative; background: var(--wit); border-radius: 18px; padding: clamp(28px, 3vw, 40px); box-shadow: 0 1px 0 var(--lijn); overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s var(--ease); } .kaart::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--salie); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); } .kaart:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -30px rgba(30, 43, 38, .35); } .kaart:hover::before { transform: scaleX(1); } .kaart__nr { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--salie-diep); margin-bottom: 22px; } .kaart h3 { margin-bottom: 10px; color: var(--inkt); } .kaart p { margin: 0; color: var(--tekst-zacht); } /* citaat */ .citaat figure { margin: 0; max-width: 1040px; position: relative; padding-left: clamp(0px, 6vw, 90px); } .citaat figure::before { content: '“'; position: absolute; left: 0; top: -.32em; font-size: clamp(90px, 12vw, 180px); line-height: 1; font-weight: 300; color: var(--salie); } .citaat blockquote { margin: 0 0 32px; } .citaat blockquote p { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.3; font-weight: 300; color: var(--inkt); margin: 0; letter-spacing: -.01em; } .citaat figcaption { display: flex; flex-direction: column; gap: 4px; font-size: 15px; } .citaat figcaption strong { font-weight: 600; color: var(--inkt); } .citaat figcaption span { color: var(--tekst-zacht); } .citaat + .sectie--ivoor, .citaat + .persoon { margin-top: 0; } /* faq */ .faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 110px); } .faq__lijst { border-top: 1px solid var(--lijn); } .vraag { border-bottom: 1px solid var(--lijn); } .vraag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font-size: 19px; font-weight: 500; color: var(--inkt); } .vraag summary::-webkit-details-marker { display: none; } .plus { position: relative; width: 16px; height: 16px; flex: none; } .plus::before, .plus::after { content: ''; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); } .plus::after { transform: rotate(90deg); } .vraag[open] .plus::after { transform: rotate(0); } .vraag p { margin: -6px 0 26px; color: var(--tekst-zacht); max-width: 62ch; } /* samenwerken */ .samenwerken__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 110px); align-items: center; } .samenwerken__opties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .optie { background: var(--wit); border-radius: 18px; padding: clamp(28px, 3vw, 40px); box-shadow: 0 1px 0 var(--lijn); } .optie h3 { font-size: 24px; font-weight: 300; margin-bottom: 12px; color: var(--inkt); } .optie p { margin: 0; color: var(--tekst-zacht); } .optie--uitgelicht { background: var(--inkt); } .optie--uitgelicht h3 { color: var(--salie); } .optie--uitgelicht p { color: rgba(255, 255, 255, .86); } /* persoon */ .persoon__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 110px); align-items: center; } .persoon__beeld { aspect-ratio: 4 / 5; border-radius: 220px 220px 18px 18px; background: linear-gradient(160deg, var(--salie) 0%, #8FA99B 100%); display: grid; place-items: center; overflow: hidden; } .persoon__beeld span { font-size: clamp(64px, 8vw, 110px); font-weight: 300; color: var(--inkt); letter-spacing: .04em; } .persoon__beeld img { width: 100%; height: 100%; object-fit: cover; } .persoon p { max-width: 62ch; color: var(--tekst-zacht); } /* cta */ .cta { overflow: hidden; isolation: isolate; } .cta__achtergrond { position: absolute; inset: 0; z-index: -1; } .cta__achtergrond .vlek--1 { top: -20%; } .cta__achtergrond .vlek--2 { bottom: -40%; } .cta__inhoud { max-width: calc(980px + 2 * var(--rand)); margin-left: 0; margin-right: auto; } @media (min-width: 1352px) { .cta__inhoud { margin-left: calc((100vw - var(--max)) / 2 - var(--rand)); } } .cta__inhoud > p { font-size: 19px; max-width: 52ch; margin-bottom: 36px; } /* contact */ .contact__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(36px, 7vw, 110px); } .contact__gegevens dl { margin: 0 0 30px; } .contact__gegevens dl > div { padding: 18px 0; border-bottom: 1px solid var(--lijn); } .contact__gegevens dt { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--salie-diep); margin-bottom: 4px; } .contact__gegevens dd { margin: 0; font-size: 19px; } .contact__gegevens dd a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); word-break: break-word; } .contact__gegevens dd a:hover { background-size: 100% 1px; } .contact__noot { color: var(--tekst-zacht); } .formulier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; } .veld { display: flex; flex-direction: column; gap: 8px; } .veld--breed { grid-column: 1 / -1; } .veld--verborgen { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .veld label { font-size: 14px; font-weight: 600; color: var(--inkt); letter-spacing: .02em; } .veld input, .veld select, .veld textarea { width: 100%; font: 400 17px/1.5 'Montserrat', sans-serif; color: var(--inkt); background: var(--ivoor); border: 1px solid transparent; border-bottom-color: rgba(30, 43, 38, .3); border-radius: 10px 10px 0 0; padding: 14px 16px; transition: border-color .4s var(--ease), background-color .4s var(--ease); } .veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; background: var(--wit); border-color: var(--salie-diep); border-radius: 10px; } .veld textarea { resize: vertical; min-height: 160px; } .akkoord { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--tekst-zacht); line-height: 1.6; } .akkoord input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--salie-diep); flex: none; } .formulier .knop { justify-self: start; } .melding { padding: 18px 22px; border-radius: 12px; margin-bottom: 30px; font-weight: 500; } .melding--goed { background: var(--salie-zacht); color: var(--inkt); border-left: 4px solid var(--salie-diep); } .melding--fout { background: #FBEDEA; color: #6B2418; border-left: 4px solid #B5462F; } /* tekstpagina */ .tekstpagina h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 1.6em 0 .6em; color: var(--inkt); } .tekstpagina h2:first-child { margin-top: 0; } .tekstpagina a { color: var(--salie-diep); } .tekstpagina ul, .tekstpagina ol { padding-left: 1.2em; } /* ------------------------------------------------------------------ voet */ .voet { background: var(--inkt); color: rgba(255, 255, 255, .86); padding: clamp(70px, 8vw, 110px) 0 36px; font-size: 15px; } .voet__boven { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2.4fr) minmax(0, 2fr) minmax(0, 3fr); gap: 40px; padding-bottom: 60px; border-bottom: 1px solid var(--lijn-licht); } .voet__merk .logo { color: var(--wit); margin-bottom: 22px; } .voet__merk p { max-width: 34ch; } .voet h2 { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--salie); margin-bottom: 18px; } .voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .voet a { text-decoration: none; color: rgba(255, 255, 255, .88); transition: color .3s; overflow-wrap: anywhere; } .voet a[href^="mailto"] { overflow-wrap: normal; word-break: normal; } .voet a:hover { color: var(--salie); } .voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 26px; font-size: 14px; color: rgba(255, 255, 255, .7); } .voet__onder p { margin: 0; } /* ------------------------------------------------------------------ responsief */ @media (max-width: 1080px) { .stappen__lijst { grid-template-columns: 1fr; gap: 0; padding-left: 34px; } .stappen__lijn { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .stappen__lijn span { transform: scaleY(var(--v, 0)); transform-origin: top; } .stap { padding: 0 0 34px; } .stap::before { left: -34px; top: 6px; } .voet__boven { grid-template-columns: repeat(3, minmax(0, 1fr)); } .voet__merk { grid-column: 1 / -1; } } @media (max-width: 900px) { :root { --kop-h: 72px; } .tweeluik__grid, .model__grid, .tijdlijn__grid, .faq__grid, .samenwerken__grid, .persoon__grid, .contact__grid { grid-template-columns: 1fr; } .tweeluik__kop, .tijdlijn__kop { position: static; } .tweeluik__tekst { padding-top: 0; } .diensten__grid { grid-template-columns: 1fr; } .dienst, .dienst:nth-child(even) { padding: 34px 0; border-right: 0 !important; min-height: 0; } .dienst:hover, .dienst:nth-child(odd):hover { padding-left: 0; background: transparent; } .feiten__grid, .sporen__grid, .doelgroepen__grid, .kaarten__grid--3, .kaarten__grid--2 { grid-template-columns: 1fr; } .persoon__beeld { max-width: 320px; } .model__figuur { order: -1; } .model__figuur svg { max-width: 360px; } } @media (max-width: 640px) { body { font-size: 16.5px; } .formulier { grid-template-columns: 1fr; } .samenwerken__opties { grid-template-columns: 1fr; } .model__lijst li, .tijdlijn__lijst li { grid-template-columns: 1fr; gap: 4px; } .voet__boven { grid-template-columns: repeat(2, minmax(0, 1fr)); } .voet__kolom:last-child { grid-column: 1 / -1; } .logo__tekst { font-size: 15px; } .hero:not(.hero--groot) .hero__scroll { display: none; } .hero__titel { letter-spacing: -.02em; } .titel { max-width: none; } } @media (max-width: 380px) { .voet__boven { grid-template-columns: minmax(0, 1fr); } .knop { padding: 14px 20px; } } /* ------------------------------------------------------------------ minder beweging */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .js [data-reveal], .js .woorden .w > span, .js .regel > span, .js .hero__label, .js .hero__intro, .js .hero__knoppen, .js .hero__feiten p { opacity: 1 !important; transform: none !important; } .js .model__figuur .ring { stroke-dashoffset: 0; fill-opacity: 1; } .js .model__figuur text, .js .model__figuur .kern { opacity: 1; } .hero__lijnen circle { stroke-dashoffset: 0; } .band__spoor { animation: none; } .hero__achtergrond { transform: none !important; } .js .gordijn { display: none; } } /* ------------------------------------------------------------------ afdrukken */ @media print { .kop, .gordijn, .band, .hero__achtergrond, .hero__scroll, .cta, .voet { display: none !important; } .hero { min-height: 0; background: none; color: #000; padding: 20px 0; } .js [data-reveal], .js .woorden .w > span, .js .regel > span { opacity: 1 !important; transform: none !important; } } /* Smallere desktopschermen: de knop "Plan een gesprek" wijkt; Contact staat al in het menu. */ @media (min-width: 1241px) and (max-width: 1440px) { .nav__knop { display: none; } } /* ========================================================================== Logo en beeldmerk (figuur met hoofd, pijl en boog) – saliegroen, bewegend ========================================================================== */ .logo { gap: 14px; align-items: center; } .logo__tekst { display: grid; gap: 3px; line-height: 1.1; letter-spacing: 0; } .logo__naam { font-size: 19px; font-weight: 400; letter-spacing: .01em; white-space: nowrap; } .logo__pijl { position: relative; display: block; height: 1.5px; background: var(--salie); transform-origin: left; } .logo__pijl::after { content: ''; position: absolute; right: -2px; top: -3.5px; border-left: 7px solid var(--salie); border-top: 4.25px solid transparent; border-bottom: 4.25px solid transparent; } .logo__slogan { font-size: 11.5px; font-weight: 500; letter-spacing: .04em; opacity: .85; white-space: nowrap; } .beeldmerk--kop { height: 50px; width: auto; flex: none; overflow: visible; } .voet__merk .beeldmerk--kop { height: 58px; } .beeldmerk .bm-lijn { fill: none; stroke: var(--salie); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; } .beeldmerk--groot .bm-lijn { stroke-width: 2.2px; } .beeldmerk .bm-stip, .beeldmerk .bm-punt { fill: var(--salie); } .beeldmerk .bm-halo { fill: none; stroke: var(--salie); stroke-width: 1.2px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; } .beeldmerk .bm-ster { fill: #EAF1ED; opacity: 0; transform: scale(0); } .beeldmerk .bm-glim { fill: none; stroke: #FFFFFF; stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: .07 .93; stroke-dashoffset: 1; opacity: 0; } /* Tekenen bij het laden */ .js .beeldmerk .bm-lijn { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); } .js .beeldmerk .bm-lijn--romp { transition-delay: .3s; } .js .beeldmerk .bm-lijn--pijl { transition-delay: .7s; transition-duration: 1.9s; } .js .beeldmerk .bm-lijn--boog { transition-delay: 1s; transition-duration: 2.2s; } .js .beeldmerk .bm-stip, .js .beeldmerk .bm-punt { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .9s cubic-bezier(.34, 1.56, .64, 1); } .js .beeldmerk .bm-stip--klein { transition-delay: .55s; } .js .beeldmerk .bm-stip--hoofd { transition-delay: 1.35s; } .js .beeldmerk .bm-punt { transition-delay: 2.2s; } .js .is-geladen .beeldmerk .bm-lijn { stroke-dashoffset: 0; } .js .is-geladen .beeldmerk .bm-stip, .js .is-geladen .beeldmerk .bm-punt { transform: none; } .js .logo__pijl { transform: scaleX(0); transition: transform 1.6s var(--ease) .8s; } .js .is-geladen .logo__pijl { transform: none; } /* Doorlopende beweging: glinstering bij het hoofd, een pulserende kring en licht dat over de lijnen loopt */ .is-geladen .beeldmerk .bm-ster { animation: fonkel 3.6s ease-in-out infinite; animation-delay: calc(2.4s + var(--v, 0s)); } .is-geladen .beeldmerk .bm-halo { animation: kring 3.6s var(--ease-2) 2.2s infinite; } .is-geladen .beeldmerk .bm-glim--pijl { animation: glim 6s ease-in-out 3s infinite; } .is-geladen .beeldmerk .bm-glim--boog { animation: glim 7s ease-in-out 5.5s infinite; } .is-geladen .beeldmerk--kop .bm-stip--hoofd { animation: adem 4s ease-in-out 2.6s infinite; } @keyframes fonkel { 0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 18% { opacity: 1; transform: scale(var(--s, 1)) rotate(45deg); } 36% { opacity: 0; transform: scale(0) rotate(90deg); } } @keyframes kring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } } @keyframes glim { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: .95; } 60% { stroke-dashoffset: -.07; opacity: .95; } 66%, 100% { stroke-dashoffset: -.07; opacity: 0; } } @keyframes adem { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } } .logo:hover .bm-stip--hoofd { animation-duration: 1.2s; } /* Hero: groot beeldmerk of figuur */ .hero__beeld { position: absolute; z-index: -1; pointer-events: none; right: max(var(--rand), calc((100vw - var(--max)) / 2)); top: calc(var(--kop-h) + 40px); bottom: 70px; width: min(44vw, 620px); display: flex; align-items: center; justify-content: flex-end; transform: translate3d(0, calc(var(--p, 0px) * -.25), 0); } .hero__beeld .beeldmerk--groot { width: 100%; height: auto; max-height: 100%; } .hero--groot .hero__beeld { width: min(30vw, 400px); top: calc(var(--kop-h) + 20px); bottom: 150px; right: max(var(--rand), calc((100vw - var(--max)) / 2 - 20px)); opacity: 1; } .hero__beeld--figuur { width: min(32vw, 440px); bottom: 0; top: calc(var(--kop-h) + 20px); align-items: flex-end; justify-content: center; } .hero__beeld--figuur .figuur { max-height: 92%; width: auto; max-width: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); } .hero__gloed { position: absolute; left: 50%; bottom: 8%; width: 110%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(167, 189, 177, .42) 0%, rgba(167, 189, 177, 0) 62%); animation: gloei 6s ease-in-out infinite alternate; } @keyframes gloei { to { transform: translateX(-50%) scale(1.08); opacity: .8; } } .js .hero__beeld--figuur .figuur { opacity: 0; transform: translateY(40px) scale(.96); transition: opacity 1.2s var(--ease-2) .5s, transform 1.4s var(--ease) .5s; } .js .is-geladen .hero__beeld--figuur .figuur { opacity: 1; transform: none; } .is-geladen .hero__beeld--figuur .figuur.zweef { animation: zweef 6s ease-in-out 1.9s infinite alternate; } /* Figuren in de secties */ .figuur { display: block; height: auto; } .zweef { animation: zweef 6s ease-in-out infinite alternate; } .zweef--traag { animation-duration: 8s; } @keyframes zweef { from { transform: translateY(0); } to { transform: translateY(-12px); } } .wip { animation: wip 5s ease-in-out infinite alternate; transform-origin: 50% 85%; } @keyframes wip { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } } .tweeluik__beeld { margin-top: 44px; max-width: 320px; } .tweeluik__beeld .figuur { width: 100%; filter: drop-shadow(0 18px 24px rgba(30, 43, 38, .14)); } .dienst { padding-right: clamp(150px, 14vw, 190px); } .dienst:nth-child(even) { padding-right: clamp(150px, 14vw, 190px); } .dienst__beeld { position: absolute; right: clamp(16px, 2vw, 32px); top: clamp(26px, 3vw, 44px); width: clamp(110px, 10vw, 150px); height: clamp(110px, 10vw, 150px); display: flex; align-items: flex-end; justify-content: center; transition: transform .8s var(--ease); } .dienst__beeld .figuur { max-width: 100%; max-height: 100%; width: auto; filter: drop-shadow(0 12px 16px rgba(30, 43, 38, .14)); } .dienst:hover .dienst__beeld { transform: translateY(-8px) scale(1.06); } .spoor__beeld, .doelgroep__beeld { height: 150px; display: flex; align-items: flex-end; margin-bottom: 22px; } .spoor__beeld .figuur, .doelgroep__beeld .figuur { max-height: 100%; max-width: 70%; width: auto; transition: transform .8s var(--ease); filter: drop-shadow(0 12px 16px rgba(30, 43, 38, .14)); } .spoor:hover .figuur, .doelgroep:hover .figuur { transform: translateY(-8px) rotate(-1.5deg); } .samenwerken__beeld { margin-top: 36px; max-width: 360px; } .samenwerken__beeld .figuur { width: 100%; } .contact__adres { color: var(--tekst-zacht); font-size: 15px; } .contact__li a { display: inline-flex; align-items: center; gap: 8px; color: var(--salie-diep); font-weight: 500; } .contact__beeld { margin-top: 30px; max-width: 170px; } .contact__beeld .figuur { width: 100%; } @media (max-width: 1240px) { .logo__slogan { display: none; } } @media (max-width: 900px) { .hero__beeld, .hero--groot .hero__beeld { width: 34vw; max-width: 200px; right: var(--rand); top: calc(var(--kop-h) + 6px); bottom: auto; height: 19vh; max-height: 170px; opacity: .9; align-items: flex-start; } .hero__beeld--figuur { width: 32vw; max-width: 160px; height: 20vh; max-height: 180px; align-items: flex-start; } .hero__beeld--figuur .figuur { max-height: 100%; } .hero__inhoud { padding-top: 15vh; } .hero__gloed { display: none; } .dienst, .dienst:nth-child(even) { padding-right: 0; } .dienst__beeld { position: static; width: 110px; height: 110px; justify-content: flex-start; order: -1; margin-bottom: 4px; } .dienst__nr { order: -2; } .tweeluik__beeld { max-width: 240px; margin-top: 30px; } } @media (max-width: 420px) { .logo__naam { font-size: 17px; } .beeldmerk--kop { height: 44px; } } @media (prefers-reduced-motion: reduce) { .js .beeldmerk .bm-lijn { stroke-dashoffset: 0; } .js .beeldmerk .bm-stip, .js .beeldmerk .bm-punt { transform: none; } .js .logo__pijl { transform: none; } .beeldmerk .bm-ster, .beeldmerk .bm-halo, .beeldmerk .bm-glim { display: none; } .js .hero__beeld--figuur .figuur { opacity: 1; transform: none; } .zweef, .wip, .hero__gloed { animation: none !important; } .hero__beeld { transform: none !important; } } /* ========================================================================== 1.2.0 – LICHTE, VERFIJNDE OPZET Palet: saliegroen (Pantone 5585 C), wit en lichtgrijs. Veel lucht, dunne lijnen, fijne letters. ========================================================================== */ :root { --salie: #A7BDB1; --salie-diep: #587566; /* tekstaccent op wit (contrast > 4,5) */ --salie-tint: #EEF3F0; --salie-tint-2: #F5F8F6; --grijs-licht: #F5F6F5; --grijs: #E6E9E7; --inkt: #2F3734; /* koppen: zacht antraciet */ --tekst: #3E4642; --tekst-zacht: #5C6560; --lijn: rgba(47, 55, 52, .10); --lijn-licht: rgba(47, 55, 52, .10); --kop-h: 88px; } body { color: var(--tekst); background: #FFFFFF; } h1, h2, .titel { font-weight: 300; letter-spacing: -.01em; color: var(--inkt); } .titel { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.18; } .titel--groot { font-size: clamp(32px, 4vw, 56px); } .label { font-size: 12.5px; font-weight: 600; letter-spacing: .2em; color: var(--salie-diep); } .label::before { width: 28px; background: var(--salie); opacity: 1; } .label--licht, .sectie--donker .label { color: var(--salie-diep); } .sectie { padding: clamp(90px, 11vw, 170px) 0; } .sectie--ivoor, .sectie--grijs { background: var(--grijs-licht); color: var(--tekst); } .sectie--zacht { background: linear-gradient(160deg, var(--salie-tint) 0%, #FFFFFF 70%); color: var(--tekst); } .sectie--salie { background: var(--salie-tint); } .sectie--grijs p, .sectie--zacht p { color: var(--tekst); } .tweeluik__tekst p:first-child { font-size: 19px; color: var(--inkt); font-weight: 400; } /* Knoppen: fijn en licht */ .knop { min-height: 48px; padding: 12px 24px; font-size: 14.5px; font-weight: 500; letter-spacing: .03em; border-width: 1px; } .knop--vol, .sectie:not(.sectie--donker):not(.cta) .knop--vol { --k-bg: var(--salie); --k-kleur: var(--inkt); --k-rand: var(--salie); --k-hover: var(--salie-diep); } .knop--vol:hover, .sectie .knop--vol:hover { color: #FFFFFF; --k-rand: var(--salie-diep); } .knop--lijn { --k-kleur: var(--inkt); --k-rand: rgba(88, 117, 102, .5); --k-hover: var(--salie-tint); } .knop--lijn:hover { color: var(--inkt); --k-rand: var(--salie-diep); } /* Kop: wit en transparant, donkere tekst */ .kop { color: var(--inkt); } .kop.is-vast { background: rgba(255, 255, 255, .9); color: var(--inkt); box-shadow: 0 1px 0 var(--lijn); } .logo__naam { color: #6F7672; font-weight: 400; } .logo__slogan { color: #7C837F; font-weight: 500; opacity: 1; } .nav .menu a { font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst); } .nav .menu a::after { background: var(--salie); height: 1.5px; } .nav__knop { --k-rand: var(--salie); --k-hover: var(--salie); text-transform: none; } .nav__knop:hover { color: var(--inkt); } .kop :focus-visible, .hero :focus-visible { outline-color: var(--salie-diep); } @media (max-width: 1240px) { .nav { background: #FFFFFF; color: var(--inkt); } .menu-open .kop { color: var(--inkt); } .nav .menu a { text-transform: none; letter-spacing: 0; font-size: clamp(24px, 6.4vw, 36px); font-weight: 300; color: var(--inkt); } } /* Gordijn bij paginawissel: wit met een saliegroene lijn */ .js .gordijn { background: #FFFFFF; } /* Hero: licht, lucht, zachte saliegroene gloed en lichtvonkjes */ .hero { background: #FFFFFF; color: var(--inkt); min-height: min(76vh, 720px); } .hero--groot { min-height: 100vh; min-height: 100svh; } .hero::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, #FFFFFF 100%); } .hero__achtergrond { background: radial-gradient(120% 90% at 85% 10%, var(--salie-tint) 0%, rgba(238, 243, 240, 0) 60%), linear-gradient(180deg, #FBFCFB 0%, #FFFFFF 100%); } .vlek { filter: blur(90px); opacity: .7; } .vlek--1 { background: radial-gradient(circle, rgba(167, 189, 177, .55) 0%, rgba(167, 189, 177, 0) 68%); } .vlek--2 { background: radial-gradient(circle, rgba(167, 189, 177, .35) 0%, rgba(167, 189, 177, 0) 70%); } .vlek--3 { background: radial-gradient(circle, rgba(230, 233, 231, .9) 0%, rgba(230, 233, 231, 0) 70%); } .korrel { display: none; } .hero__label { color: var(--salie-diep); } .hero__titel { font-weight: 300; color: var(--inkt); letter-spacing: -.02em; } .hero--groot .hero__titel { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.06; } .hero:not(.hero--groot) .hero__titel { font-size: clamp(36px, 5vw, 68px); } .regel:nth-child(2) > span { color: var(--salie-diep); } .hero__intro { color: var(--tekst); font-size: clamp(17px, 1.3vw, 19px); } .hero__feiten p { color: var(--tekst); } .hero__feiten .nr { color: var(--salie-diep); } .hero__scroll { color: var(--tekst-zacht); } .hero__scroll i { background: var(--grijs); } .hero__gloed { background: radial-gradient(circle, rgba(167, 189, 177, .45) 0%, rgba(167, 189, 177, 0) 62%); } .hero__beeld--figuur .figuur { filter: drop-shadow(0 24px 30px rgba(47, 55, 52, .12)); } /* Lichtvonkjes (bokeh) die zacht opstijgen en fonkelen */ .vonk { position: absolute; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0%, rgba(255, 255, 255, .9) 25%, rgba(167, 189, 177, .55) 55%, rgba(167, 189, 177, 0) 72%); opacity: 0; animation: vonk var(--duur, 9s) ease-in-out var(--wacht, 0s) infinite; } @keyframes vonk { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); } 20% { opacity: var(--max, .9); } 55% { opacity: calc(var(--max, .9) * .35); } 75% { opacity: var(--max, .9); } 100% { opacity: 0; transform: translate3d(var(--dx, 10px), -90px, 0) scale(1); } } /* Beeldmerk op licht: glinstering in saliegroen */ .beeldmerk .bm-ster { fill: var(--salie); } .beeldmerk--groot .bm-ster { fill: #FFFFFF; stroke: var(--salie); stroke-width: 1.2px; vector-effect: non-scaling-stroke; } .beeldmerk .bm-glim { stroke: #FFFFFF; filter: drop-shadow(0 0 3px rgba(88, 117, 102, .8)); } .beeldmerk--groot .bm-lijn { stroke-width: 1.6px; } /* Band met woorden: fijner */ .band { background: #FFFFFF; border-block: 1px solid var(--lijn); padding: 22px 0; } .band span { font-size: clamp(22px, 2.8vw, 40px); font-weight: 300; color: #8A918D; } .band span:nth-child(4n+1) { color: var(--salie-diep); } .band i { width: 6px; height: 6px; background: var(--salie); } /* Diensten, kaarten en blokken: wit, dunne randen, geen zware schaduw */ .dienst:hover { background: var(--salie-tint-2); } .dienst h3 { font-weight: 300; color: var(--inkt); } .dienst__lijn { background: var(--salie); height: 1.5px; } .kaart, .doelgroep, .optie, .spoor { background: #FFFFFF; border: 1px solid var(--grijs); box-shadow: none; border-radius: 14px; } .kaart:hover, .doelgroep:hover { box-shadow: 0 24px 44px -32px rgba(47, 55, 52, .28); } .kaart::before { height: 2px; } .spoor { background: rgba(255, 255, 255, .85); } .optie--uitgelicht { background: var(--salie-tint); border-color: var(--salie); } .optie--uitgelicht h3 { color: var(--salie-diep); } .optie--uitgelicht p { color: var(--tekst); } .kaart h3, .doelgroep h3, .stap h3, .optie h3 { font-weight: 500; } /* Feiten: licht met dunne cijfers */ .feiten { padding: clamp(80px, 9vw, 130px) 0; } .feit { border-top: 1px solid var(--grijs); } .feit__getal { color: var(--salie-diep); font-weight: 300; font-size: clamp(56px, 7vw, 100px); } .feit__tekst { color: var(--tekst); } /* Model */ .ring { fill: rgba(167, 189, 177, .18); stroke: var(--salie); stroke-width: 1; } .kern { fill: var(--salie-diep); } /* Tijdlijn: licht */ .tijdlijn__lijst { border-top-color: var(--grijs); } .tijdlijn__lijst li { border-bottom-color: var(--grijs); } .tijdlijn__moment { color: var(--salie-diep); } .tijdlijn__lijst h3 { color: var(--inkt); } .tijdlijn__lijst p, .tijdlijn__kop p { color: var(--tekst); } /* Citaat */ .citaat figure::before { color: var(--salie); font-weight: 200; } .citaat blockquote p { font-weight: 300; font-size: clamp(24px, 2.8vw, 38px); color: var(--inkt); } /* CTA: zacht saliegroen, donkere tekst */ .cta__achtergrond .vlek--1 { background: radial-gradient(circle, rgba(167, 189, 177, .5) 0%, rgba(167, 189, 177, 0) 68%); } .cta__achtergrond .vlek--2 { background: radial-gradient(circle, rgba(230, 233, 231, .9) 0%, rgba(230, 233, 231, 0) 70%); } .cta .titel { color: var(--inkt); } .cta__inhoud > p { color: var(--tekst); } /* Persoon */ .persoon__beeld { background: var(--salie-tint); border-radius: 240px 240px 14px 14px; } /* Formulier */ .veld input, .veld select, .veld textarea { background: var(--grijs-licht); border-bottom-color: rgba(47, 55, 52, .22); } .melding--goed { background: var(--salie-tint); border-left-color: var(--salie-diep); } /* Voettekst: lichtgrijs */ .voet { background: var(--grijs-licht); color: var(--tekst); border-top: 1px solid var(--grijs); } .voet__boven { border-bottom-color: var(--grijs); } .voet h2 { color: var(--salie-diep); } .voet a { color: var(--tekst); } .voet a:hover { color: var(--salie-diep); } .voet__merk .logo { color: var(--inkt); } .voet__onder { color: var(--tekst-zacht); } /* Figuren op licht: zachte schaduw */ .tweeluik__beeld .figuur, .dienst__beeld .figuur, .spoor__beeld .figuur, .doelgroep__beeld .figuur { filter: drop-shadow(0 14px 18px rgba(47, 55, 52, .10)); } @media (max-width: 900px) { .hero__beeld, .hero--groot .hero__beeld { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .vonk { display: none; } } /* Lijniconen in saliegroen (in plaats van de 3D-figuren) */ .icoon { width: 100%; height: 100%; overflow: visible; } .icoon .ic-lijn * { fill: none; stroke: var(--salie-diep); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .icoon .ic-stip { fill: var(--salie); } .js .icoon .ic-lijn * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) .15s; } .js .icoon .ic-stip { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .8s cubic-bezier(.34, 1.56, .64, 1) 1.1s; } .js .is-in .icoon .ic-lijn *, .js .is-in.icoon .ic-lijn * { stroke-dashoffset: 0; } .js .is-in .icoon .ic-stip { transform: none; } .is-in .icoon .ic-stip--hoofd { animation: adem 4s ease-in-out 2.4s infinite; } .dienst__icoon { position: absolute; right: clamp(20px, 2.4vw, 40px); top: clamp(34px, 3.6vw, 52px); width: 64px; height: 64px; padding: 14px; border-radius: 50%; background: var(--salie-tint-2); border: 1px solid var(--grijs); transition: transform .8s var(--ease), background-color .6s var(--ease), border-color .6s var(--ease); } .dienst:hover .dienst__icoon { transform: translateY(-4px); background: #FFFFFF; border-color: var(--salie); } .dienst, .dienst:nth-child(even) { padding-right: clamp(110px, 9vw, 130px); } .spoor__icoon, .doelgroep__icoon { width: 56px; height: 56px; margin-bottom: 26px; } @media (max-width: 900px) { .dienst, .dienst:nth-child(even) { padding-right: 0; } .dienst__icoon { position: static; width: 56px; height: 56px; padding: 12px; order: -1; margin-bottom: 4px; } } @media (prefers-reduced-motion: reduce) { .js .icoon .ic-lijn * { stroke-dashoffset: 0; } .js .icoon .ic-stip { transform: none; } } /* LinkedIn-kaart met QR-code (pagina Onze visie) */ .linkedin-kaart { display: flex; align-items: center; gap: 28px; margin-top: 40px; padding: 22px 26px 22px 22px; background: #FFFFFF; border: 1px solid var(--grijs); border-radius: 16px; max-width: 560px; } .linkedin-kaart__qr { flex: none; width: 148px; height: 148px; border-radius: 12px; overflow: hidden; display: block; background: var(--grijs-licht); transition: transform .6s var(--ease), box-shadow .6s var(--ease); } .linkedin-kaart__qr > svg { width: 100%; height: 100%; display: block; } .linkedin-kaart__qr:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -20px rgba(47, 55, 52, .4); } .linkedin-kaart__titel { font-size: 19px; font-weight: 400; color: var(--inkt); margin: 0 0 6px; } .linkedin-kaart__tekst { font-size: 15px; color: var(--tekst-zacht); margin: 0 0 16px; } @media (max-width: 520px) { .linkedin-kaart { flex-direction: column; align-items: flex-start; } } .linkedin-kaart--leeg { border: 1.5px dashed var(--salie); background: var(--salie-tint-2); } /* 1.2.4 – loopbalk fijner en kleiner */ .band { padding: 16px 0; } .band span { font-size: clamp(15px, 1.5vw, 21px); font-weight: 300; letter-spacing: .04em; padding: 0 clamp(16px, 2vw, 30px); } .band i { width: 4px; height: 4px; } .linkedin-kaart--contact { margin: 6px 0 24px; padding: 16px; gap: 18px; } .linkedin-kaart--contact .linkedin-kaart__qr { width: 112px; height: 112px; } .linkedin-kaart--contact .linkedin-kaart__titel { font-size: 16px; margin-bottom: 12px; } /* ========================================================================== 1.3.0 – SJIEKER, LICHT Warm ivoor i.p.v. grijs, meer lucht, smallere tekst, haarlijnen, rustigere beweging, lijntekeningen. ========================================================================== */ :root { --ivoor: #FAF8F4; --grijs-licht: #FAF8F4; --grijs: #E9E6E0; --lijn: rgba(47, 55, 52, .08); --haar: rgba(88, 117, 102, .22); --max: 1180px; } body { background: #FFFFFF; } .sectie { padding: clamp(110px, 13vw, 200px) 0; } .sectie--ivoor, .sectie--grijs { background: var(--ivoor); } .sectie--salie { background: linear-gradient(180deg, #F3F7F4 0%, var(--ivoor) 100%); } .voet { background: var(--ivoor); border-top-color: var(--grijs); } /* Koppen: groter, dunner, meer lucht (Montserrat) */ h1, h2, .titel { font-weight: 300; } .titel { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.16; letter-spacing: -.015em; margin-bottom: 34px; } .hero--groot .hero__titel { letter-spacing: -.025em; } .label { font-size: 11.5px; letter-spacing: .26em; margin-bottom: 28px; } .label::before { width: 40px; height: 1px; background: var(--salie); } /* Smallere, rustige tekstkolommen */ .tweeluik__tekst { max-width: 58ch; } .tweeluik__tekst p { line-height: 1.85; } .tweeluik__tekst p:first-child { font-size: 19px; line-height: 1.7; font-weight: 300; color: var(--inkt); } .sectie__intro, .model__tekst > p, .persoon p { max-width: 56ch; line-height: 1.85; } .tweeluik__grid { gap: clamp(40px, 9vw, 150px); } /* Haarlijnen en fijne saliegroene accenten */ .diensten__grid, .dienst, .faq__lijst, .vraag, .model__lijst, .model__lijst li, .tijdlijn__lijst, .tijdlijn__lijst li, .feit, .voet__boven { border-color: var(--haar) !important; } .dienst:nth-child(odd) { border-right-color: var(--haar); } .kaart, .doelgroep, .optie, .spoor, .linkedin-kaart { border-color: var(--grijs); border-radius: 14px; } .kaart::before { background: var(--salie); height: 1px; } .dienst__icoon { border-radius: 50%; } .band { border-color: var(--haar); } .knop { border-radius: 2px; letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; font-weight: 500; min-height: 46px; padding: 12px 26px; } .nav__knop { text-transform: uppercase; } .persoon__beeld { border-radius: 240px 240px 14px 14px; } /* Rustigere beweging */ .js [data-reveal] { transform: translateY(18px); transition: opacity 1.6s cubic-bezier(.25, .1, .25, 1), transform 1.8s var(--ease); transition-delay: calc(var(--d, 0) * 140ms); } .js .woorden .w > span { transition-duration: 1.5s; transition-delay: calc(var(--i, 0) * 60ms); } /* Lijntekeningen in logostijl */ .tekening { margin: 48px 0 0; max-width: 360px; } .tekening svg { width: 100%; height: auto; overflow: visible; display: block; } .tekening path, .tekening circle:not(.tk-stip), .tekening rect { fill: none; stroke: var(--salie-diep); stroke-width: var(--sw, 1.1); stroke-linecap: round; stroke-linejoin: round; } .tekening .tk-stip { fill: var(--salie); } .js .tekening path, .js .tekening circle:not(.tk-stip), .js .tekening rect { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.45, .05, .2, 1) .2s; } .js .tekening .tk-stip { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 1s cubic-bezier(.34, 1.56, .64, 1) 1.8s; } .js .tekening.is-in path, .js .tekening.is-in circle, .js .tekening.is-in rect { stroke-dashoffset: 0; } .js .tekening.is-in .tk-stip { transform: none; } .tekening.is-in .tk-stip:not(.tk-stip--klein) { animation: adem 5s ease-in-out 3s infinite; } .sectie__kop .tekening { max-width: 420px; margin-top: 30px; } .tijdlijn__kop .tekening { max-width: 320px; } /* Iconen bij de werkwijze */ .stap__icoon { display: block; width: 34px; height: 34px; margin-bottom: 18px; } .stap__icoon svg { width: 100%; height: 100%; overflow: visible; } .stap__icoon path, .stap__icoon circle, .stap__icoon rect { fill: none; stroke: var(--salie-diep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .js .stap__icoon path, .js .stap__icoon circle, .js .stap__icoon rect { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) .3s; } .js .stap.is-in .stap__icoon path, .js .stap.is-in .stap__icoon circle, .js .stap.is-in .stap__icoon rect { stroke-dashoffset: 0; } .stap { padding-top: 40px; } @media (max-width: 900px) { .tekening { max-width: 280px; margin-top: 30px; } .sectie { padding: clamp(80px, 16vw, 120px) 0; } } @media (prefers-reduced-motion: reduce) { .js .tekening path, .js .tekening circle, .js .tekening rect, .js .stap__icoon path, .js .stap__icoon circle, .js .stap__icoon rect { stroke-dashoffset: 0; } .js .tekening .tk-stip { transform: none; } } .nav .menu a { font-size: 12.5px; letter-spacing: .1em; } .nav { gap: clamp(14px, 1.8vw, 28px); margin-left: 32px; } .nav .menu { gap: clamp(12px, 1.5vw, 24px); } .doelgroep__aantal { font-size: clamp(34px, 3.4vw, 48px); white-space: nowrap; } @media (max-width: 1240px) { .nav { margin-left: 0; } .nav .menu a { font-size: clamp(24px, 6.4vw, 36px); letter-spacing: 0; } } @media (min-width: 1241px) and (max-width: 1680px) { .nav__knop { display: none; } } .tekening .tk-glans { fill: var(--salie); } .tekening.is-in .tk-glans { animation: fonkel 4s ease-in-out 3s infinite; transform-box: fill-box; transform-origin: center; } .band__spoor { animation-duration: 90s; } .kaarten__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .kaarten__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .kaarten__grid--4 { grid-template-columns: 1fr; } } /* 1.3.5 – menu meer lucht */ @media (min-width: 1241px) { .nav .menu { gap: clamp(18px, 2vw, 38px); } .nav { gap: clamp(22px, 2.2vw, 40px); } } @media (min-width: 1241px) and (max-width: 1880px) { .nav__knop { display: none; } } /* ========================================================================== 1.4.0 – CONSULTANCY & SJIEKER Koppen in Cormorant Garamond (aan/uit in de Customizer), uitklapmenu, cijfers, pijlers, opdrachtgevers, loopbaan, publicaties, profiel, teaser. ========================================================================== */ .egv-schreef { --schreef: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif; } .egv-schreef .titel, .egv-schreef .hero__titel, .egv-schreef .citaat blockquote p, .egv-schreef .feit__getal, .egv-schreef .cijfer__getal, .egv-schreef .pijler__nr, .egv-schreef .pijler h3, .egv-schreef .loopbaan__jaar, .egv-schreef .loopbaan h3, .egv-schreef .publicaties h3, .egv-schreef .dienst h3, .egv-schreef .doelgroep__aantal, .egv-schreef .spoor h3, .egv-schreef .optie h3, .egv-schreef .linkedin-kaart__titel, .egv-schreef .kaart h3, .egv-schreef .opdrachtgever h3, .egv-schreef .profiel figcaption, .egv-schreef .tekstpagina h2 { font-family: var(--schreef); font-weight: 400; letter-spacing: -.005em; } .egv-schreef .titel { font-size: clamp(36px, 4.1vw, 60px); line-height: 1.08; } .egv-schreef .titel--groot { font-size: clamp(40px, 4.8vw, 70px); } .egv-schreef .hero--groot .hero__titel { font-size: clamp(50px, 6.8vw, 108px); line-height: 1.02; letter-spacing: -.01em; } .egv-schreef .hero:not(.hero--groot) .hero__titel { font-size: clamp(46px, 6vw, 92px); line-height: 1.02; } .egv-schreef .regel:nth-child(2) > span { font-style: italic; } .egv-schreef .citaat blockquote p { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.22; font-style: italic; } .egv-schreef .dienst h3 { font-size: clamp(30px, 2.8vw, 40px); } .egv-schreef .kaart h3, .egv-schreef .opdrachtgever h3, .egv-schreef .spoor h3, .egv-schreef .optie h3 { font-size: 26px; line-height: 1.2; } .egv-schreef .feit__getal { font-size: clamp(64px, 8vw, 116px); } .egv-schreef .doelgroep__aantal { font-size: clamp(42px, 4vw, 58px); } .egv-schreef .linkedin-kaart__titel { font-size: 24px; } .egv-schreef .tekstpagina h2 { font-size: clamp(30px, 3vw, 40px); } /* Uitklapmenu (Diensten) */ .nav .menu-item-has-children > a { padding-right: 16px; } .nav .menu-item-has-children > a::before { content: ''; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .4s var(--ease); } .nav .current-menu-ancestor > a::after, .nav .current-menu-parent > a::after { transform: scaleX(1); } @media (min-width: 1241px) { .nav .menu > li { position: relative; } .nav .menu > li.menu-item-has-children::after { content: ''; position: absolute; left: -10px; right: -10px; top: 100%; height: 22px; } .nav .sub-menu { display: block; position: absolute; left: -26px; top: calc(100% + 18px); min-width: 270px; margin: 0; padding: 14px 0; list-style: none; background: #FFFFFF; border: 1px solid var(--grijs); box-shadow: 0 30px 50px -34px rgba(47, 55, 52, .35); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .55s; z-index: 5; } .nav .menu > li:hover > .sub-menu, .nav .menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .55s var(--ease); } .nav .menu > li:hover > a::before { transform: translateY(-30%) rotate(225deg); } .nav .sub-menu a { display: block; padding: 10px 26px; color: var(--tekst); text-transform: none; letter-spacing: .02em; font-size: 14px; white-space: nowrap; transition: color .3s, background-color .3s, padding .4s var(--ease); } .nav .sub-menu a::after { display: none; } .nav .sub-menu a:hover, .nav .sub-menu .current-menu-item > a { color: var(--salie-diep); background: var(--salie-tint-2); padding-left: 32px; } } @media (max-width: 1240px) { .nav { justify-content: flex-start; overflow-y: auto; padding-top: calc(var(--kop-h) + 40px); } .nav .menu-item-has-children > a::before { display: none; } .nav .sub-menu { display: block; list-style: none; margin: 4px 0 10px; padding: 0 0 0 20px; border-left: 1px solid var(--haar); } .nav .sub-menu a { font-size: clamp(17px, 4.6vw, 22px) !important; padding: 5px 0; } } .link-pijl { display: inline-flex; align-items: center; gap: 10px; color: var(--salie-diep); text-decoration: none; font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; } .link-pijl .pijl { width: 18px; height: 18px; transition: transform .5s var(--ease); } .link-pijl:hover .pijl { transform: translateX(5px); } /* Cijfers */ .cijfers { padding: clamp(90px, 10vw, 150px) 0; } .cijfers__rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--haar); } .cijfer { padding: 34px clamp(16px, 2.4vw, 36px) 0 0; border-right: 1px solid var(--haar); } .cijfer + .cijfer { padding-left: clamp(16px, 2.4vw, 36px); } .cijfer:last-child { border-right: 0; } .cijfer__getal { font-size: clamp(48px, 5.4vw, 84px); font-weight: 300; line-height: 1; color: var(--salie-diep); margin: 0 0 20px; white-space: nowrap; font-variant-numeric: lining-nums; } .cijfer__tekst { font-size: 15.5px; color: var(--tekst); max-width: 26ch; margin: 0; } /* Pijlers */ .pijlers__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 8vw, 140px); } .pijlers__kop { position: sticky; top: 130px; align-self: start; } .pijlers__kop > p { color: var(--tekst-zacht); max-width: 44ch; line-height: 1.85; } .pijlers__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--haar); } .pijler { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 38px 0; border-bottom: 1px solid var(--haar); transition: background-color .6s var(--ease); } .pijler__nr { font-size: 40px; line-height: 1; color: var(--salie); font-style: italic; } .pijler h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; line-height: 1.15; color: var(--inkt); margin-bottom: 12px; } .pijler p { margin: 0; color: var(--tekst-zacht); max-width: 56ch; line-height: 1.8; } /* Opdrachtgevers */ .opdrachtgevers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--haar); } .opdrachtgever { padding: 40px clamp(20px, 3vw, 44px) 10px 0; border-right: 1px solid var(--haar); } .opdrachtgever + .opdrachtgever { padding-left: clamp(20px, 3vw, 44px); } .opdrachtgever:last-child { border-right: 0; } .opdrachtgever__icoon { width: 52px; height: 52px; margin-bottom: 26px; } .opdrachtgever h3 { color: var(--inkt); margin-bottom: 12px; } .opdrachtgever p { color: var(--tekst-zacht); margin: 0; } /* Loopbaan */ .loopbaan__wrap { position: relative; max-width: 980px; } .loopbaan__lijn { position: absolute; left: 200px; top: 8px; bottom: 8px; width: 1px; background: var(--haar); } .loopbaan__lijn span { position: absolute; inset: 0; background: var(--salie-diep); transform: scaleY(var(--v, 0)); transform-origin: top; } .loopbaan__lijst { list-style: none; margin: 0; padding: 0; } .loopbaan__stap { display: grid; grid-template-columns: 200px 1fr; gap: 0; padding: 0 0 54px; position: relative; } .loopbaan__stap::before { content: ''; position: absolute; left: 195px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--salie-diep); } .loopbaan__stap:last-child::before { background: var(--salie); border-color: var(--salie); box-shadow: 0 0 0 6px rgba(167, 189, 177, .25); } .loopbaan__jaar { font-size: 26px; font-style: italic; color: var(--salie-diep); padding-right: 40px; text-align: right; line-height: 1.3; } .loopbaan__inhoud { padding-left: 48px; } .loopbaan h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; color: var(--inkt); line-height: 1.2; margin-bottom: 10px; } .loopbaan p { color: var(--tekst-zacht); margin: 0; max-width: 60ch; line-height: 1.8; } /* Publicaties */ .publicaties__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 8vw, 140px); } .publicaties__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--haar); } .publicaties__lijst li { padding: 32px 0; border-bottom: 1px solid var(--haar); } .publicatie__meta { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--salie-diep); margin-bottom: 12px; } .publicaties h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 400; line-height: 1.2; color: var(--inkt); margin-bottom: 10px; } .publicaties p { margin: 0; color: var(--tekst-zacht); } /* Profiel */ .profiel__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 8vw, 130px); align-items: start; } .profiel__beeld { margin: 0; position: sticky; top: 120px; } .profiel__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 300px 300px 14px 14px; display: block; } .profiel figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; font-family: var(--kopletter); font-weight: 400; font-size: 21px; letter-spacing: -.015em; color: var(--inkt); } .profiel figcaption span { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--salie-diep); } .profiel__tekst p { color: var(--tekst); line-height: 1.9; max-width: 60ch; } .profiel__tekst p:first-of-type { font-size: 19px; color: var(--inkt); } /* Teaser */ .teaser__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 8vw, 130px); align-items: center; } .teaser__beeld img { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 300px 300px 14px 14px; display: block; } .teaser p { color: var(--tekst); max-width: 58ch; line-height: 1.85; } .teaser .knoppen { margin-top: 30px; } @media (max-width: 900px) { .cijfers__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cijfer, .cijfer + .cijfer { padding: 28px 16px 26px 0; border-right: 0; border-bottom: 1px solid var(--haar); } .cijfer:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--haar); } .pijlers__grid, .publicaties__grid, .profiel__grid, .teaser__grid { grid-template-columns: 1fr; } .pijlers__kop, .profiel__beeld { position: static; } .pijler { grid-template-columns: 56px 1fr; gap: 14px; padding: 28px 0; } .opdrachtgevers__grid { grid-template-columns: 1fr; } .opdrachtgever, .opdrachtgever + .opdrachtgever { padding: 30px 0; border-right: 0; border-bottom: 1px solid var(--haar); } .loopbaan__lijn { left: 5px; } .loopbaan__stap { grid-template-columns: 1fr; padding: 0 0 40px 34px; } .loopbaan__stap::before { left: 0; top: 8px; } .loopbaan__jaar { text-align: left; padding: 0 0 6px; font-size: 22px; } .loopbaan__inhoud { padding-left: 0; } .profiel__beeld, .teaser__beeld { max-width: 340px; } } @media (max-width: 520px) { .cijfers__rij { grid-template-columns: 1fr; } .cijfer:nth-child(even) { padding-left: 0; border-left: 0; } } .cijfer__getal { white-space: normal; font-size: clamp(44px, 4.6vw, 76px); } .cijfer__getal--lang { font-size: clamp(36px, 3.6vw, 58px); padding-top: .2em; } .cijfer__getal--lang { font-size: clamp(32px, 3.1vw, 50px); white-space: nowrap; padding-top: .35em; } .nav .menu-item-type-custom.current-menu-item > a::after { transform: scaleX(0); } .nav .menu-item-type-custom.current-menu-item > a:hover::after { transform: scaleX(1); } @media (max-width: 1240px) { .nav .menu-item-type-custom.current-menu-item > a::after { display: none; } } /* ========================================================================== 1.5.0 – MODERNE TYPOGRAFIE Koppen, menu, labels en knoppen in Montserrat; lopende tekst in Inter. ========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/inter-latin-300-normal.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format('woff2'); } :root { --kopletter: 'Montserrat', system-ui, sans-serif; --tekstletter: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } body { font-family: var(--tekstletter); font-size: 16.5px; line-height: 1.8; letter-spacing: -.003em; font-feature-settings: 'cv11', 'ss01'; } h1, h2, h3, h4, .titel, .hero__titel, .label, .nav, .knop, .logo, .menuknop, .stap__nr, .kaart__nr, .dienst__nr, .dienst__meer, .feit__getal, .cijfer__getal, .pijler__nr, .loopbaan__jaar, .publicatie__meta, .tijdlijn__moment, .doelgroep__aantal, .spoor__en, .citaat figcaption strong, .veld label, .voet h2, .link-pijl, .band span, .hero__feiten .nr { font-family: var(--kopletter); } .titel { font-weight: 300; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.12; letter-spacing: -.025em; } .titel--groot { font-size: clamp(36px, 4.4vw, 64px); } .hero__titel { font-weight: 300; letter-spacing: -.035em; } .hero--groot .hero__titel { font-size: clamp(44px, 6vw, 92px); line-height: 1.03; } .hero:not(.hero--groot) .hero__titel { font-size: clamp(40px, 5.4vw, 80px); line-height: 1.04; } .regel:nth-child(2) > span { color: var(--salie-diep); font-style: normal; } .dienst h3, .pijler h3, .loopbaan h3, .publicaties h3, .kaart h3, .opdrachtgever h3, .spoor h3, .optie h3, .doelgroep h3, .stap h3, .tijdlijn__lijst h3 { font-family: var(--kopletter); letter-spacing: -.015em; } .stap h3, .tijdlijn__lijst h3 { font-weight: 500; font-size: 19px; } .dienst h3 { font-weight: 300; font-size: clamp(24px, 2.2vw, 30px); } .pijler h3, .loopbaan h3, .publicaties h3, .dialoog__kant h3 { font-weight: 400; font-size: clamp(20px, 1.7vw, 24px); } .kaart h3, .opdrachtgever h3, .spoor h3, .optie h3, .doelgroep h3 { font-weight: 500; font-size: 19px; } .pijler__nr { font-style: normal; font-weight: 300; font-size: 30px; color: var(--salie); } .loopbaan__jaar { font-style: normal; font-weight: 400; font-size: 15px; letter-spacing: .08em; padding-top: 6px; } .citaat blockquote p { font-family: var(--kopletter); font-weight: 300; font-style: normal; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.32; letter-spacing: -.02em; } .feit__getal, .cijfer__getal { font-weight: 200; letter-spacing: -.04em; } .cijfer__getal { font-size: clamp(44px, 4.6vw, 72px); } .cijfer__getal--lang { font-size: clamp(30px, 2.8vw, 46px); } .linkedin-kaart__titel { font-family: var(--kopletter); font-weight: 400; } .tweeluik__tekst p:first-child { font-size: 18.5px; font-weight: 300; } .hero__intro { font-weight: 300; } /* 1.5.1 – link in tweeluiktekst */ .tweeluik__tekst a{color:inherit;text-decoration:underline;text-decoration-color:var(--salie,#A7BDB1);text-decoration-thickness:1px;text-underline-offset:.25em;transition:text-decoration-color .3s} .tweeluik__tekst a:hover,.tweeluik__tekst a:focus-visible{text-decoration-color:currentColor} /* ================================================================== 1.6.0 – keten en dialoog */ .keten__wrap { position: relative; margin-top: clamp(40px, 5vw, 64px); } .keten__lijn { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--haar, var(--lijn)); } .keten__lijn span { position: absolute; inset: 0; background: var(--salie-diep); transform: scaleX(0); transform-origin: left; transition: transform 2.4s cubic-bezier(.45, .05, .2, 1) .2s; } .keten__lijn i { position: absolute; right: -2px; top: -5px; width: 10px; height: 10px; border-top: 1px solid var(--salie-diep); border-right: 1px solid var(--salie-diep); transform: rotate(45deg); opacity: 0; transition: opacity .6s 2.4s; } .keten__wrap.is-in .keten__lijn span, html:not(.js) .keten__lijn span { transform: none; } .keten__wrap.is-in .keten__lijn i, html:not(.js) .keten__lijn i { opacity: 1; } .keten__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); } .fase { position: relative; padding-top: 44px; } .fase__stip { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--salie); box-shadow: 0 0 0 6px var(--wit, #fff); transform: scale(0); transition: transform .9s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.4s + var(--d, 0) * .5s); } .sectie--salie .fase__stip { box-shadow: 0 0 0 6px var(--salie-tint); } .keten__wrap.is-in .fase__stip, html:not(.js) .fase__stip { transform: none; } .fase__nr { display: block; font-family: var(--kopletter); font-size: 12px; font-weight: 500; letter-spacing: .16em; color: var(--salie-diep); margin-bottom: 14px; } .fase h3 { font-family: var(--kopletter); font-weight: 500; font-size: 19px; line-height: 1.35; letter-spacing: -.015em; color: var(--inkt); margin: 0 0 10px; } .fase__doel { color: var(--inkt); margin: 0 0 18px; } .fase__rol { margin: 0; padding-top: 16px; border-top: 1px solid var(--haar, var(--lijn)); color: var(--tekst-zacht, #5f6964); font-size: .94em; } .fase__rol span { display: block; font-family: var(--kopletter); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--salie-diep); margin-bottom: 6px; } .js .fase { opacity: 0; transform: translateY(14px); transition: opacity 1.2s, transform 1.4s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.3s + var(--d, 0) * .5s); } .js .keten__wrap.is-in .fase { opacity: 1; transform: none; } .js .keten__wrap[data-reveal] { opacity: 1; transform: none; } .dialoog__grid { display: grid; grid-template-columns: 1fr minmax(140px, 220px) 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: clamp(36px, 4vw, 56px); } .dialoog__kant { background: var(--wit, #fff); border-radius: 18px; padding: clamp(26px, 3vw, 40px); } .dialoog__kant h3 { font-family: var(--kopletter); letter-spacing: -.015em; color: var(--inkt); margin: 0 0 16px; } .dialoog__kant ul { list-style: none; margin: 0; padding: 0; } .dialoog__kant li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--haar, var(--lijn)); } .dialoog__kant li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--salie); } .dialoog__midden { text-align: center; } .dialoog__midden svg { width: 100%; max-width: 200px; height: auto; display: block; margin: 0 auto 10px; overflow: visible; } .dialoog__midden path { fill: none; stroke: var(--salie-diep); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; } .dialoog__midden span { font-family: var(--kopletter); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--salie-diep); } .dialoog__opbrengst { margin-top: clamp(36px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--haar, var(--lijn)); } .dialoog__opbrengst-kop { font-family: var(--kopletter); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--salie-diep); margin: 0 0 18px; } .dialoog__opbrengst ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.5vw, 36px); } .dialoog__opbrengst strong { display: block; font-family: var(--kopletter); font-weight: 400; font-size: 19px; letter-spacing: -.01em; color: var(--inkt); margin-bottom: 4px; } .dialoog__opbrengst span { color: var(--tekst-zacht, #5f6964); font-size: .95em; } @media (max-width: 900px) { .keten__lijn { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .keten__lijn span { transform: scaleY(0); transform-origin: top; } .keten__lijn i { display: none; } .keten__lijst { grid-template-columns: 1fr; gap: 36px; } .fase { padding: 0 0 0 44px; } .dialoog__grid { grid-template-columns: 1fr; } .dialoog__midden svg { max-width: 120px; transform: rotate(90deg); margin: 6px auto; } .dialoog__opbrengst ul { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .dialoog__opbrengst ul { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .keten__lijn span, .fase__stip, .js .fase { transform: none !important; opacity: 1 !important; transition: none !important; } .keten__lijn i { opacity: 1; } } .dialoog__grid { align-items: stretch; } .dialoog__midden { align-self: center; } @media (max-width: 900px) { .dialoog__midden svg { transform: none; max-width: 110px; margin: 4px auto 6px; } } /* ================================================================== 1.7.0 – logo als origineel */ .beeldmerk--logo { height: 70px; width: auto; display: block; } .beeldmerk--logo text { font-family: var(--kopletter); } .beeldmerk--logo .bm-naam { fill: #6F7672; font-weight: 400; letter-spacing: 3px; } .beeldmerk--logo .bm-slogan { fill: #7C837F; font-weight: 500; letter-spacing: 8px; } .js .beeldmerk--logo text { opacity: 0; transition: opacity 1.2s var(--ease-2, ease) .9s; } .js .is-geladen .beeldmerk--logo text { opacity: 1; } .voet__merk .beeldmerk--logo { height: 76px; } @media (max-width: 900px) { .beeldmerk--logo { height: 58px; } } @media (prefers-reduced-motion: reduce) { .js .beeldmerk--logo text { opacity: 1; transition: none; } } /* RCDI-registerlogo */ .rcdi { margin: 0; display: flex; align-items: center; gap: 14px; } .rcdi img { display: block; height: auto; flex: none; } .rcdi figcaption { font-family: var(--kopletter); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: var(--salie-diep); max-width: 22ch; } .rcdi--persoon { margin-top: 22px; } .rcdi--persoon img { width: 120px; } .rcdi--voet { margin-top: 26px; } .rcdi--voet img { width: 104px; } .rcdi--voet figcaption { font-size: 10px; } @media (max-width: 900px) { .persoon__links { max-width: 320px; } .persoon__links .persoon__beeld { max-width: none; } } /* 1.7.0 – kop iets hoger zodat het volledige logo leesbaar blijft */ @media (min-width: 901px) { :root { --kop-h: 104px; } .kop.is-vast { --kop-h: 82px; } .beeldmerk--logo { height: 88px; transition: height .5s var(--ease); } .kop.is-vast .beeldmerk--logo { height: 70px; } } @media (max-width: 900px) { :root { --kop-h: 80px; } .kop.is-vast { --kop-h: 70px; } .beeldmerk--logo { height: 62px; } .kop.is-vast .beeldmerk--logo { height: 56px; } } .beeldmerk--logo .bm-lijn { stroke-width: 1.5px; } .kop .logo { align-self: center; } .beeldmerk--logo .bm-slogan { font-weight: 400; } .voet__merk .beeldmerk--logo { height: 96px; } .rcdi figcaption { max-width: 30ch; } /* ================================================================== 1.8.1 – VERFIJND UITKLAPMENU Het paneel onder een menu-item met submenu: zachte ronding, een haarfijne rand in saliegroen, gelaagde schaduw en een klein tongetje dat naar het menu-item wijst. De regels openen zich één voor één. ================================================================== */ @media (min-width: 1241px) { .nav .menu > li.menu-item-has-children::after { height: 20px; } .nav .sub-menu { left: -20px; top: calc(100% + 14px); min-width: 228px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); border: 1px solid rgba(88, 117, 102, .13); box-shadow: 0 1px 2px rgba(47, 55, 52, .03), 0 12px 24px -14px rgba(47, 55, 52, .12), 0 34px 60px -30px rgba(47, 55, 52, .26); transform: translateY(10px) scale(.975); transform-origin: 44px top; transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .6s; } /* Tongetje naar het menu-item toe. */ .nav .sub-menu::before { content: ''; position: absolute; top: -5px; left: 42px; width: 9px; height: 9px; background: rgba(255, 255, 255, .92); border-left: 1px solid rgba(88, 117, 102, .13); border-top: 1px solid rgba(88, 117, 102, .13); border-radius: 2px 0 0 0; transform: rotate(45deg); } .nav .menu > li:hover > .sub-menu, .nav .menu > li:focus-within > .sub-menu { transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease); } .nav .sub-menu li { opacity: 0; transform: translateY(-5px); transition: opacity .45s var(--ease-2), transform .55s var(--ease); } .nav .menu > li:hover > .sub-menu li, .nav .menu > li:focus-within > .sub-menu li { opacity: 1; transform: none; } .nav .sub-menu li:nth-child(1) { transition-delay: .05s; } .nav .sub-menu li:nth-child(2) { transition-delay: .11s; } .nav .sub-menu li:nth-child(3) { transition-delay: .17s; } .nav .sub-menu li:nth-child(4) { transition-delay: .23s; } .nav .sub-menu li:nth-child(5) { transition-delay: .29s; } .nav .sub-menu li:nth-child(6) { transition-delay: .35s; } .nav .sub-menu a { position: relative; padding: 11px 18px; border-radius: 9px; font-size: 14.5px; letter-spacing: .015em; transition: color .4s var(--ease), background-color .4s var(--ease), padding .5s var(--ease); } /* Haarfijn streepje dat ingroeit waar de regel vandaan schuift. */ .nav .sub-menu a::before { content: ''; position: absolute; left: 18px; top: 50%; width: 0; height: 1px; background: var(--salie-diep); opacity: .7; transition: width .5s var(--ease); } .nav .sub-menu a:hover, .nav .sub-menu a:focus-visible, .nav .sub-menu .current-menu-item > a { color: var(--salie-diep); background: rgba(167, 189, 177, .17); padding-left: 36px; } .nav .sub-menu a:hover::before, .nav .sub-menu a:focus-visible::before, .nav .sub-menu .current-menu-item > a::before { width: 11px; } .nav .sub-menu a:focus-visible { outline-offset: -2px; } } @media (prefers-reduced-motion: reduce) { .nav .sub-menu, .nav .sub-menu li, .nav .sub-menu a, .nav .sub-menu a::before { transition: none !important; } .nav .sub-menu li { opacity: 1; transform: none; } } /* ================================================================== 1.8.3 – KENMERKEN ONDER DE HERO Eén zacht paneel met afgeronde hoeken, binnenin drie kolommen met haarfijne scheidingen. De toelichting breekt niet af. ================================================================== */ .hero__feiten-wrap { margin-top: clamp(46px, 6.5vh, 78px); } .hero__feiten { list-style: none; display: grid; grid-template-columns: 1fr 1.14fr 1fr; gap: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid rgba(88, 117, 102, .14); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(245, 248, 246, .66) 100%); -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px); box-shadow: 0 1px 2px rgba(47, 55, 52, .025), 0 20px 44px -30px rgba(47, 55, 52, .2); } .hero__feiten li { display: block; margin: 0; padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2.1vw, 32px); border-left: 1px solid rgba(88, 117, 102, .12); } .hero__feiten li:first-child { border-left: 0; } .feiten__kop { display: block; font-size: clamp(21px, 1.85vw, 26px); font-weight: 300; line-height: 1.15; letter-spacing: -.015em; color: var(--salie-diep); margin-bottom: 8px; font-variant-numeric: lining-nums; } /* Het registratieteken klein en opgetild, zodat het de kop niet domineert. */ .feiten__kop .merkteken { font-size: .46em; vertical-align: .72em; letter-spacing: 0; } .feiten__tekst { display: block; font-size: 14px; line-height: 1.6; color: var(--tekst-zacht); text-wrap: pretty; } /* Tussenformaat: twee naast elkaar, de derde eronder over de volle breedte. */ @media (max-width: 1100px) and (min-width: 721px) { .hero__feiten { grid-template-columns: 1fr 1fr; } .hero__feiten li:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(88, 117, 102, .12); } } @media (max-width: 720px) { .hero__feiten { grid-template-columns: 1fr; border-radius: 14px; } .hero__feiten li { padding: 20px 22px; border-left: 0; border-top: 1px solid rgba(88, 117, 102, .12); } .hero__feiten li:first-child { border-top: 0; } .feiten__kop { font-size: 22px; margin-bottom: 5px; } } /* Beweging bij het laden: de kenmerken verschijnen één voor één. */ .js .hero__feiten li { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-2), transform 1.2s var(--ease); } .js .is-geladen .hero__feiten li { opacity: 1; transform: none; transition-delay: calc(1.05s + var(--i, 0) * .12s); } @media (prefers-reduced-motion: reduce) { .js .hero__feiten li { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ================================================================== 1.8.5 – PORTRET IN MELKGLAS De foto vloeit aan de randen weg in een zachte waas, zodat het beeld rustig op de pagina ligt. Het effect zit in de opmaak: elke foto die u via de Customizer uploadt, krijgt dezelfde behandeling. ================================================================== */ .persoon__beeld { position: relative; background: linear-gradient(170deg, var(--salie-tint, #EEF3F0) 0%, var(--ivoor, #FAF8F4) 62%, #FFFFFF 100%); isolation: isolate; } .persoon__beeld img { filter: saturate(.92) contrast(.97); /* Het beeld vervaagt aan de randen in de achtergrond. */ -webkit-mask-image: radial-gradient(ellipse 84% 72% at 50% 38%, #000 44%, rgba(0, 0, 0, .55) 72%, transparent 99%); mask-image: radial-gradient(ellipse 84% 72% at 50% 38%, #000 44%, rgba(0, 0, 0, .55) 72%, transparent 99%); } /* De melkglaslaag: een zachte sluier die van onderaf opkomt. */ .persoon__beeld::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 30%, rgba(250, 248, 244, .42) 80%, rgba(250, 248, 244, .78) 100%), radial-gradient(ellipse 62% 56% at 50% 36%, rgba(255, 255, 255, 0) 50%, rgba(238, 243, 240, .55) 100%); -webkit-backdrop-filter: blur(.6px); backdrop-filter: blur(.6px); mix-blend-mode: normal; } /* Een haarfijne rand die het beeld afsluit zonder hard te worden. */ .persoon__beeld::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(88, 117, 102, .1); } @media (prefers-reduced-motion: reduce) { .persoon__beeld::after { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Rollen en wapenfeiten: een rustige opsomming met haarfijne lijnen. */ .rollen { margin-top: clamp(30px, 3.4vw, 44px); } .rollen__kop { margin: 0 0 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--salie-diep); } .rollen__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--haar); } .rollen__lijst li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--haar); } .rollen__rol { font-size: 15px; line-height: 1.5; color: var(--inkt); } .rollen__waar { font-size: 13px; line-height: 1.5; color: var(--tekst-zacht); text-align: right; white-space: nowrap; } .js .rollen__lijst li { opacity: 0; transform: translateY(10px); transition: opacity .9s var(--ease-2), transform 1s var(--ease); } .js .rollen.is-in .rollen__lijst li { opacity: 1; transform: none; transition-delay: calc(.1s + var(--d, 0) * 90ms); } @media (max-width: 600px) { .rollen__lijst li { grid-template-columns: 1fr; gap: 2px; } .rollen__waar { text-align: left; white-space: normal; } } @media (prefers-reduced-motion: reduce) { .js .rollen__lijst li { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Het portret lijnt bovenaan uit met de kop, nu de tekst ernaast langer is. */ @media (min-width: 901px) { .persoon__grid { align-items: start; } .persoon__links { padding-top: clamp(8px, 2vw, 34px); } } /* Dezelfde zachte behandeling voor het portret op de homepage en in het profiel. */ .teaser__beeld, .profiel__beeld { position: relative; isolation: isolate; } .teaser__beeld img, .profiel__beeld img { filter: saturate(.92) contrast(.97); -webkit-mask-image: radial-gradient(ellipse 84% 74% at 50% 38%, #000 46%, rgba(0, 0, 0, .55) 74%, transparent 99%); mask-image: radial-gradient(ellipse 84% 74% at 50% 38%, #000 46%, rgba(0, 0, 0, .55) 74%, transparent 99%); } .teaser__beeld::after, .profiel__beeld::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 30%, rgba(250, 248, 244, .40) 80%, rgba(250, 248, 244, .74) 100%), radial-gradient(ellipse 62% 56% at 50% 36%, rgba(255, 255, 255, 0) 50%, rgba(238, 243, 240, .5) 100%); } /* ================================================================== 1.8.7 – RUSTIGER De cijferrij past zich aan het aantal cijfers aan, en op de homepage wisselt de achtergrond minder vaak, zodat de pagina rustiger leest. ================================================================== */ .cijfers__rij { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } @media (max-width: 1100px) { .cijfers__rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .cijfers__rij { grid-template-columns: 1fr; } } .home .teaser { background: var(--ivoor); } .home .doelgroepen.sectie--ivoor { background: #FFFFFF; } /* Meer lucht tussen de inleiding en de knoppen in de kop. */ .hero__intro { margin-bottom: clamp(52px, 7vh, 82px); } /* De kop van de homepage: inhoud gecentreerd in beeld, met rust eromheen. */ .hero--groot { justify-content: center; min-height: min(92vh, 880px); } @media (max-width: 900px) { .hero--groot { min-height: min(86vh, 760px); } .hero--groot .hero__inhoud { padding-top: 6vh; } } /* ================================================================== 1.9.0 – DONKERE, LUXE UITVOERING Achtergrond bijna-zwart groen, accenten in champagnegoud. Alles hangt aan variabelen; de lichte uitvoering hierboven blijft ongemoeid en komt terug zodra de klasse egv-donker weg is. ================================================================== */ body.egv-donker { --goud: #C9B98A; --goud-licht: #DFD3AE; --goud-diep: #08100C; --salie: #A9C4B0; --salie-licht: #C5D1C9; --salie-zacht: #22594A; /* 1.9.7: was #16211B, bijna zwart */ --salie-tint: #22594A; /* 1.9.7: was #16211B */ --salie-tint-2: #1E5342; /* 1.9.7: was #131D18 */ --salie-diep: #C9B98A; --inkt: #EFF5F0; --inkt-2: #DCE8E0; --wit: #143E30; --vlak: #1A4A39; --kaart: #1E5342; --diepst: #0E2E23; --ivoor: #1A4A39; --grijs-licht: #1A4A39; --grijs: #357056; --tekst: #CFDDD4; --tekst-zacht: #B6CCBF; --lijn: rgba(201, 185, 138, .22); --lijn-licht: rgba(201, 185, 138, .22); --haar: rgba(201, 185, 138, .34); color-scheme: dark; background: var(--wit); color: var(--tekst); } /* --- vlakken ------------------------------------------------------ */ body.egv-donker .hero, body.egv-donker .band, body.egv-donker .js .gordijn, body.egv-donker.home .doelgroepen.sectie--ivoor { background: var(--wit); } body.egv-donker .sectie--ivoor, body.egv-donker .sectie--grijs, body.egv-donker.home .teaser { background: var(--vlak); } body.egv-donker .sectie--zacht, body.egv-donker .sectie--salie { background: linear-gradient(180deg, var(--vlak) 0%, var(--wit) 100%); } body.egv-donker .sectie--donker { background: var(--diepst); color: var(--inkt); } body.egv-donker .kaart, body.egv-donker .doelgroep, body.egv-donker .optie, body.egv-donker .spoor, body.egv-donker .dialoog__kant, body.egv-donker .linkedin-kaart, body.egv-donker .nav .sub-menu { background: var(--kaart); border: 1px solid var(--lijn); box-shadow: 0 1px 0 rgba(201, 185, 138, .07); } body.egv-donker .sectie--ivoor .kaart, body.egv-donker .sectie--ivoor .doelgroep, body.egv-donker .sectie--ivoor .optie, body.egv-donker .sectie--ivoor .spoor { background: #23604B; } body.egv-donker .dienst:hover .dienst__icoon { background: var(--kaart); border-color: var(--goud); } /* --- koppen, tekst, lijnen ---------------------------------------- */ body.egv-donker h1, body.egv-donker h2, body.egv-donker h3, body.egv-donker h4, body.egv-donker .titel, body.egv-donker .hero__titel { color: var(--inkt); } body.egv-donker .regel:nth-child(2) > span { color: var(--salie); } body.egv-donker .hero__intro { color: var(--tekst); } body.egv-donker .label, body.egv-donker .label--licht, body.egv-donker .sectie--donker .label { color: var(--goud); } body.egv-donker .label::before { background: var(--goud); opacity: .85; } body.egv-donker .sectie__intro, body.egv-donker .kaart p:not([class]), body.egv-donker .doelgroep p:not([class]), body.egv-donker .optie p:not([class]), body.egv-donker .stap p:not([class]), body.egv-donker .pijler p:not([class]), body.egv-donker .opdrachtgever p:not([class]), body.egv-donker .trede__tekst { color: var(--tekst-zacht); } body.egv-donker hr, body.egv-donker .voet__boven, body.egv-donker .cijfers__rij > * + *, body.egv-donker .rollen__regel { border-color: var(--lijn); } /* --- knoppen ------------------------------------------------------ */ body.egv-donker .knop--vol, body.egv-donker .sectie:not(.sectie--donker):not(.cta) .knop--vol { --k-bg: var(--goud); --k-kleur: var(--goud-diep); --k-rand: var(--goud); --k-hover: var(--goud-licht); } body.egv-donker .knop--vol:hover, body.egv-donker .sectie .knop--vol:hover { color: var(--goud-diep); --k-rand: var(--goud-licht); } body.egv-donker .knop--lijn { --k-kleur: var(--goud); --k-rand: rgba(201, 185, 138, .45); --k-hover: var(--goud); } body.egv-donker .knop--lijn:hover { color: var(--goud-diep); --k-rand: var(--goud); } body.egv-donker .nav__knop { --k-rand: rgba(201, 185, 138, .45); --k-kleur: var(--goud); --k-hover: var(--goud); } body.egv-donker .nav__knop:hover { color: var(--goud-diep); --k-rand: var(--goud); } /* --- kop en menu --------------------------------------------------- */ body.egv-donker .kop { color: var(--inkt); } body.egv-donker .kop.is-vast { background: rgba(20, 62, 48, .92); -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); border-bottom: 1px solid var(--lijn); } body.egv-donker .nav a:hover, body.egv-donker .nav .current-menu-item > a { color: var(--goud); } body.egv-donker .nav .sub-menu { box-shadow: 0 36px 60px -34px rgba(14, 46, 35, .95), 0 0 0 1px rgba(169, 196, 176, .1); } body.egv-donker .nav .sub-menu a { color: var(--tekst); } body.egv-donker .nav .sub-menu a:hover { color: var(--goud); } @media (max-width: 960px) { body.egv-donker .nav { background: var(--diepst); color: var(--inkt); } body.egv-donker .menu-open .kop { color: var(--inkt); } } /* --- hero ---------------------------------------------------------- */ body.egv-donker .hero__achtergrond { background: radial-gradient(120% 90% at 85% 8%, rgba(169, 196, 176, .10) 0%, rgba(169, 196, 176, 0) 62%), linear-gradient(180deg, #1B503E 0%, var(--wit) 46%, var(--diepst) 100%); } body.egv-donker .hero::after { background: linear-gradient(180deg, rgba(14, 46, 35, 0) 55%, var(--diepst) 100%); } body.egv-donker .vlek { opacity: .5; } body.egv-donker .korrel { opacity: .5; mix-blend-mode: soft-light; } body.egv-donker .hero__scroll { color: var(--tekst-zacht); } body.egv-donker .hero__scroll:hover { color: var(--goud); } /* --- beeldmerk ------------------------------------------------------ */ body.egv-donker .beeldmerk--groot .bm-ster { fill: var(--goud); stroke: var(--goud); } body.egv-donker .beeldmerk .bm-ster { fill: var(--goud); } body.egv-donker .beeldmerk .bm-glim { stroke: var(--goud-licht); filter: drop-shadow(0 0 4px rgba(201, 185, 138, .65)); } body.egv-donker .vonk { background: radial-gradient(circle, var(--goud-licht) 0%, rgba(223, 211, 174, .8) 25%, rgba(201, 185, 138, .45) 55%, rgba(201, 185, 138, 0) 72%); } /* --- portret en beeld ------------------------------------------------ */ body.egv-donker .persoon__beeld { background: linear-gradient(170deg, #225B46 0%, var(--vlak) 60%, var(--wit) 100%); } body.egv-donker .persoon__beeld img { filter: saturate(.86) contrast(.95) brightness(.96); } body.egv-donker .rcdi figcaption { color: var(--goud); } body.egv-donker .loopbaan__stap::before { background: var(--wit); border-color: var(--goud); } body.egv-donker .fase__stip { box-shadow: 0 0 0 5px rgba(201, 185, 138, .16); } body.egv-donker .model__figuur .kern__tekst { fill: var(--goud-diep); } /* --- formulier ------------------------------------------------------- */ body.egv-donker .veld input, body.egv-donker .veld select, body.egv-donker .veld textarea { background: var(--vlak); color: var(--tekst); border-bottom-color: rgba(201, 185, 138, .26); } body.egv-donker .veld input:focus, body.egv-donker .veld select:focus, body.egv-donker .veld textarea:focus { background: var(--kaart); border-color: var(--goud); } body.egv-donker .veld label { color: var(--goud); } body.egv-donker .akkoord { color: var(--tekst-zacht); } body.egv-donker .melding--fout { background: #2A1714; color: #F0C3B6; border-left-color: #B5462F; } body.egv-donker .melding--goed { background: #13231B; color: var(--salie); } /* --- voettekst -------------------------------------------------------- */ body.egv-donker .voet { background: var(--diepst); color: var(--tekst-zacht); border-top: 1px solid var(--lijn); } body.egv-donker .voet__merk .logo { color: var(--inkt); } body.egv-donker .voet h2 { color: var(--goud); } body.egv-donker .voet a { color: var(--tekst); } body.egv-donker .voet a:hover { color: var(--goud); } body.egv-donker .voet__onder { color: var(--tekst-zacht); } /* --- cijfers en citaten ------------------------------------------------ */ body.egv-donker .cijfer__getal, body.egv-donker .doelgroep__aantal, body.egv-donker .pijler__nr, body.egv-donker .dienst__nr, body.egv-donker .kaart__nr, body.egv-donker .stap__nr, body.egv-donker .trede__nr { color: var(--goud); } body.egv-donker .citaat blockquote p { color: var(--inkt); } body.egv-donker .citaat figcaption strong { color: var(--goud); } body.egv-donker .citaat::before, body.egv-donker .citaat__teken { color: rgba(201, 185, 138, .3); } /* --- CTA-gloed ------------------------------------------------------- */ body.egv-donker .cta { background: var(--wit); } body.egv-donker .cta__achtergrond .vlek--1 { background: radial-gradient(circle, rgba(169, 196, 176, .13) 0%, rgba(169, 196, 176, 0) 68%); } body.egv-donker .cta__achtergrond .vlek--2 { background: radial-gradient(circle, rgba(201, 185, 138, .11) 0%, rgba(201, 185, 138, 0) 70%); } body.egv-donker .cta .titel { color: var(--inkt); } body.egv-donker .cta__inhoud > p:not([class]) { color: var(--tekst); } body.egv-donker .vlek--1 { background: radial-gradient(circle, rgba(169, 196, 176, .10) 0%, rgba(169, 196, 176, 0) 68%); } body.egv-donker .vlek--2, body.egv-donker .vlek--3 { background: radial-gradient(circle, rgba(201, 185, 138, .09) 0%, rgba(201, 185, 138, 0) 70%); } /* --- iconen en tekeningen -------------------------------------------- */ body.egv-donker .dienst__icoon { border-color: var(--lijn); background: var(--kaart); color: var(--goud); } body.egv-donker .icoon, body.egv-donker .tekening { color: var(--goud); } body.egv-donker .doelgroep__icoon, body.egv-donker .spoor__icoon { color: var(--goud); } /* --- kleine onderdelen in de donkere uitvoering ----------------------- */ body.egv-donker .akkoord input[type="checkbox"], body.egv-donker .veld input[type="checkbox"], body.egv-donker .veld input[type="radio"] { accent-color: var(--goud); } body.egv-donker .veld select { color: var(--tekst); background-image: linear-gradient(45deg, transparent 50%, var(--goud) 50%), linear-gradient(135deg, var(--goud) 50%, transparent 50%); background-position: right 18px top 50%, right 12px top 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; -webkit-appearance: none; appearance: none; padding-right: 38px; } body.egv-donker .veld select option { background: var(--vlak); color: var(--tekst); } body.egv-donker .linkedin-kaart__qr { background: #FFFFFF; } body.egv-donker .linkedin-kaart__titel { color: var(--inkt); } body.egv-donker .linkedin-kaart p { color: var(--tekst-zacht); } body.egv-donker ::selection { background: rgba(201, 185, 138, .3); color: var(--inkt); } body.egv-donker :focus-visible { outline-color: var(--goud); } body.egv-donker .overslaan { background: var(--kaart); color: var(--inkt); } body.egv-donker a { text-decoration-color: rgba(201, 185, 138, .5); } body.egv-donker .tweeluik__tekst a { text-decoration-color: var(--goud); } body.egv-donker .link-pijl, body.egv-donker .dienst__meer { color: var(--goud); } /* Het RCDI-keurmerk is een geregistreerd beeldmerk en wordt niet verkleurd; op de donkere uitvoering krijgt het een rustig, licht plaatje zodat het leesbaar blijft. */ body.egv-donker .rcdi img { background: #F2F1EC; border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 0 rgba(201, 185, 138, .18); } /* Let op: .ring bestaat twee keer in dit thema – de cirkels van het model (Onze visie) en de vulring op Ketenaanpak. De multiply-blend van het model maakt op een donkere ondergrond alles eronder zwart, dus die zetten we hier uit. */ body.egv-donker .ring { mix-blend-mode: normal; } body.egv-donker .model__figuur .ring { fill: rgba(169, 196, 176, .13); stroke: var(--goud); } /* ================================================================== 1.9.1 – LICHT DAT MEEBEWEEGT Twee heel zachte lichtvelden drijven traag over de hele pagina heen, zodat het donker leeft in plaats van vlak te liggen. Ze liggen bovenop met screen-blending, raken niets aan en vangen geen muisklikken. Wie "minder beweging" heeft ingesteld, ziet ze stil staan. ================================================================== */ body.egv-donker::before, body.egv-donker::after { content: ''; position: fixed; pointer-events: none; z-index: 9998; border-radius: 50%; mix-blend-mode: screen; will-change: transform; } body.egv-donker::before { width: 78vw; height: 78vw; max-width: 1000px; max-height: 1000px; left: -16vw; top: -20vh; background: radial-gradient(circle, rgba(169, 196, 176, .085) 0%, rgba(169, 196, 176, .03) 42%, rgba(169, 196, 176, 0) 68%); animation: egv-licht-1 56s ease-in-out infinite alternate; } body.egv-donker::after { width: 66vw; height: 66vw; max-width: 840px; max-height: 840px; right: -18vw; bottom: -22vh; background: radial-gradient(circle, rgba(201, 185, 138, .075) 0%, rgba(201, 185, 138, .025) 44%, rgba(201, 185, 138, 0) 70%); animation: egv-licht-2 74s ease-in-out infinite alternate; } @keyframes egv-licht-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(28vw, 22vh, 0) scale(1.2); } } @keyframes egv-licht-2 { from { transform: translate3d(0, 0, 0) scale(1.12); } to { transform: translate3d(-24vw, -24vh, 0) scale(.9); } } /* De drijvende vlekken in de kop mochten wat meer aanwezig zijn, anders zie je de beweging die er al in zat niet. */ body.egv-donker .vlek { opacity: .85; } body.egv-donker .vlek--1 { background: radial-gradient(circle, rgba(169, 196, 176, .20) 0%, rgba(169, 196, 176, 0) 68%); } body.egv-donker .vlek--2 { background: radial-gradient(circle, rgba(201, 185, 138, .15) 0%, rgba(201, 185, 138, 0) 70%); } body.egv-donker .vlek--3 { background: radial-gradient(circle, rgba(169, 196, 176, .13) 0%, rgba(169, 196, 176, 0) 70%); } body.egv-donker .cta__achtergrond .vlek--1 { background: radial-gradient(circle, rgba(169, 196, 176, .18) 0%, rgba(169, 196, 176, 0) 68%); } body.egv-donker .cta__achtergrond .vlek--2 { background: radial-gradient(circle, rgba(201, 185, 138, .15) 0%, rgba(201, 185, 138, 0) 70%); } body.egv-donker .hero__lijnen circle { stroke: rgba(201, 185, 138, .22); } body.egv-donker .hero__lijnen circle:nth-child(3) { stroke: rgba(169, 196, 176, .14); } /* Over het streepje bij elke kleine kop loopt traag een lichtje. */ body.egv-donker .label::before { background: linear-gradient(90deg, rgba(201, 185, 138, .22) 0%, var(--goud) 45%, rgba(201, 185, 138, .22) 100%); background-size: 260% 100%; animation: egv-streep 9s ease-in-out infinite; } @keyframes egv-streep { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } } /* Vlakken vangen een haarfijn lichtje op hun bovenrand, zoals geborsteld metaal. */ body.egv-donker .kaart, body.egv-donker .doelgroep, body.egv-donker .optie, body.egv-donker .spoor, body.egv-donker .dialoog__kant, body.egv-donker .linkedin-kaart, body.egv-donker .beeld, body.egv-donker .grafiek { box-shadow: inset 0 1px 0 rgba(201, 185, 138, .11), 0 1px 0 rgba(201, 185, 138, .05); } body.egv-donker .kaart:hover, body.egv-donker .doelgroep:hover, body.egv-donker .optie:hover, body.egv-donker .spoor:hover { box-shadow: inset 0 1px 0 rgba(201, 185, 138, .26), 0 22px 40px -26px rgba(14, 46, 35, .8); border-color: rgba(201, 185, 138, .26); } @media (prefers-reduced-motion: reduce) { body.egv-donker::before, body.egv-donker::after, body.egv-donker .label::before { animation: none !important; } } /* ================================================================== 1.9.2 – CHAMPAGNEGOUD ALS ACCENT OP DE LICHTE UITVOERING Drie tinten van hetzelfde goud, want champagne op ivoor haalt maar 1,8 op 1 en is als letter onleesbaar: --goud champagne, voor vlakken die je vult (knoppen, vullingen) --goud-lijn iets dieper, voor streepjes, randen en haarlijnen --goud-tekst antiek goud, 4,96 op 1 op ivoor, voor alle letters Het saliegroen blijft het merk: het beeldmerk, de cursieve regel in de kop en de cirkels van het model veranderen niet. ================================================================== */ body.egv-goud { --goud: #C9B98A; --goud-lijn: #BFA96E; --goud-tekst: #7E6A2E; --goud-diep: #08100C; --haar: rgba(126, 106, 46, .26); } /* --- kleine koppen en hun streepje ---------------------------------- */ body.egv-goud .label, body.egv-goud .label--licht, body.egv-goud .sectie--donker .label { color: var(--goud-tekst); } body.egv-goud .label::before { background: var(--goud-lijn); opacity: 1; } /* --- knoppen --------------------------------------------------------- */ body.egv-goud .knop--vol, body.egv-goud .sectie:not(.sectie--donker):not(.cta) .knop--vol { --k-bg: var(--goud); --k-kleur: var(--goud-diep); --k-rand: var(--goud); --k-hover: #D8CBA4; } body.egv-goud .knop--vol:hover, body.egv-goud .sectie .knop--vol:hover { color: var(--goud-diep); --k-rand: #B8A673; } body.egv-goud .knop--lijn { --k-kleur: var(--inkt); --k-rand: rgba(126, 106, 46, .45); --k-hover: #F2EDDF; } body.egv-goud .knop--lijn:hover { color: var(--goud-diep); --k-rand: var(--goud-lijn); } body.egv-goud .nav__knop { --k-rand: rgba(126, 106, 46, .45); --k-hover: var(--goud); } body.egv-goud .nav__knop:hover { color: var(--goud-diep); --k-rand: var(--goud); } /* --- cijfers en nummers ----------------------------------------------- */ body.egv-goud .cijfer__getal, body.egv-goud .doelgroep__aantal, body.egv-goud .pijler__nr, body.egv-goud .dienst__nr, body.egv-goud .kaart__nr, body.egv-goud .stap__nr, body.egv-goud .feit__getal, body.egv-goud .loopbaan__jaar, body.egv-goud .tijdlijn__moment, body.egv-goud .publicatie__meta, body.egv-goud .hero__feiten .nr { color: var(--goud-tekst); } /* --- lijnen en randen -------------------------------------------------- */ body.egv-goud .stap::before, body.egv-goud .fase__stip { background: var(--goud-lijn); } body.egv-goud .fase__stip { box-shadow: 0 0 0 5px rgba(201, 185, 138, .22); } body.egv-goud .loopbaan__stap::before { border-color: var(--goud-lijn); } body.egv-goud .dienst:hover .dienst__icoon { border-color: var(--goud-lijn); } body.egv-goud .dienst__icoon { color: var(--goud-tekst); } /* --- tekstaccenten ------------------------------------------------------ */ body.egv-goud .citaat figcaption strong, body.egv-goud .rcdi figcaption, body.egv-goud .veld label, body.egv-goud .voet h2, body.egv-goud .link-pijl, body.egv-goud .dienst__meer, body.egv-goud .linkedin-kaart__titel { color: var(--goud-tekst); } body.egv-goud .tweeluik__tekst a { text-decoration-color: var(--goud-lijn); } body.egv-goud a:hover { color: var(--goud-tekst); } body.egv-goud .voet a:hover { color: var(--goud-tekst); } body.egv-goud .nav a:hover, body.egv-goud .nav .current-menu-item > a { color: var(--goud-tekst); } body.egv-goud ::selection { background: rgba(201, 185, 138, .4); } body.egv-goud :focus-visible { outline-color: var(--goud-tekst); } /* --- zachte vlakken ------------------------------------------------------ */ body.egv-goud .cta__achtergrond .vlek--2 { background: radial-gradient(circle, rgba(201, 185, 138, .45) 0%, rgba(201, 185, 138, 0) 70%); } body.egv-goud .hero__achtergrond { background: radial-gradient(120% 90% at 85% 10%, rgba(201, 185, 138, .13) 0%, rgba(201, 185, 138, 0) 58%), linear-gradient(180deg, #FDFCFA 0%, #FFFFFF 100%); } /* Het saliegroen blijft waar het merk zit. Deze regels houden het vast, ook als er later iets aan het goud verandert. */ body.egv-goud .regel:nth-child(2) > span { color: var(--salie-diep); } body.egv-goud .beeldmerk .bm-ster { fill: var(--salie); } body.egv-goud .beeldmerk--groot .bm-ster { fill: #FFFFFF; stroke: var(--salie); } body.egv-goud .model__figuur .ring { stroke: var(--salie-diep); } /* ================================================================== 1.9.3 – FLESSENGROEN MET CHAMPAGNE De vorige donkere uitvoering was grijsgroen: donker van waarde, maar met 32% verzadiging nauwelijks groen van kleur. Daardoor oogde het vlak. Deze ondergrond zit op 71% en is herkenbaar groen, zoals een leren boekband. Hieronder staat wat het diepte geeft: verlopen in plaats van vlakke vulling, champagne haarlijnen en een randje licht op elk vlak. ================================================================== */ /* Vlakken krijgen een verloop; vlakke kleur is wat het saai maakte. */ body.egv-donker .sectie--ivoor, body.egv-donker .sectie--grijs, body.egv-donker.home .teaser { background: linear-gradient(176deg, #1E5543 0%, var(--vlak) 38%, #1D4F3D 100%); } body.egv-donker .sectie:not(.sectie--ivoor):not(.sectie--grijs):not(.cta):not(.sectie--zacht):not(.sectie--salie) { background: linear-gradient(180deg, var(--wit) 0%, #174434 55%, var(--wit) 100%); } body.egv-donker .kaart, body.egv-donker .doelgroep, body.egv-donker .optie, body.egv-donker .spoor, body.egv-donker .dialoog__kant, body.egv-donker .linkedin-kaart, body.egv-donker .beeld, body.egv-donker .grafiek { background: linear-gradient(168deg, #215645 0%, var(--kaart) 58%, #1A4B3A 100%); border: 1px solid rgba(201, 185, 138, .22); box-shadow: inset 0 1px 0 rgba(201, 185, 138, .18), 0 18px 34px -24px rgba(14, 46, 35, .8); } body.egv-donker .sectie--ivoor .kaart, body.egv-donker .sectie--ivoor .doelgroep, body.egv-donker .sectie--ivoor .optie, body.egv-donker .sectie--ivoor .spoor { background: linear-gradient(168deg, #225946 0%, #1F5544 58%, #1A4A39 100%); } body.egv-donker .kaart:hover, body.egv-donker .doelgroep:hover, body.egv-donker .optie:hover, body.egv-donker .spoor:hover { border-color: rgba(169, 196, 176, .5); background: linear-gradient(168deg, #35775F 0%, #2C6A54 58%, #245847 100%); box-shadow: inset 0 1px 0 rgba(201, 185, 138, .4), 0 0 0 1px rgba(169, 196, 176, .14), 0 26px 50px -22px rgba(169, 196, 176, .3); } /* Een haarfijne champagne lijn bovenaan de pagina, als de rand van een band. */ body.egv-donker .kop::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(201, 185, 138, 0) 0%, var(--goud) 22%, #E6DCBE 50%, var(--goud) 78%, rgba(201, 185, 138, 0) 100%); opacity: .75; } /* Scheidingslijnen in champagne in plaats van in grijs. */ body.egv-donker .dienst, body.egv-donker .cijfers__rij > * + *, body.egv-donker .rollen__regel, body.egv-donker .pijler, body.egv-donker .opdrachtgever { border-color: var(--lijn); } /* De cijfers mogen glanzen: champagne met een lichte kern, als bladgoud. */ body.egv-donker .cijfer__getal, body.egv-donker .doelgroep__aantal, body.egv-donker .pijler__nr { background: linear-gradient(170deg, #E8DDBB 0%, var(--goud) 46%, #AD9C6C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--goud); } @supports not (background-clip: text) { body.egv-donker .cijfer__getal, body.egv-donker .doelgroep__aantal, body.egv-donker .pijler__nr { -webkit-text-fill-color: var(--goud); color: var(--goud); } } /* De lichtvelden iets warmer en ruimer, zodat het groen leeft. */ body.egv-donker::before { background: radial-gradient(circle, rgba(169, 196, 176, .11) 0%, rgba(169, 196, 176, .035) 42%, rgba(169, 196, 176, 0) 68%); } body.egv-donker::after { background: radial-gradient(circle, rgba(201, 185, 138, .10) 0%, rgba(201, 185, 138, .03) 44%, rgba(201, 185, 138, 0) 70%); } /* ================================================================== 1.9.5 – MUISAANWIJZER IN CHAMPAGNE (1.9.7: zonder donkere rand) Alleen op apparaten met een echte muis; op telefoon en tablet verandert er niets. Pijl in champagne met een antiekgouden randje; boven een link een champagne ring met een lichte gloed. Geen zwart of donkergroen meer. Achter elke aanwijzer staat het gewone sleutelwoord, zodat de browser terugvalt als het plaatje niet laadt. ================================================================== */ /* 1.9.8: 'any-pointer' in plaats van 'pointer', zodat de aanwijzer ook werkt op laptops met touchscreen (daar meldt Windows aanraken als hoofdinvoer en viel hij terug op de zwarte pijl). Kleiner en fijner: pijl 20 px, ring 22 px, alleen champagne en antiek goud, geen zwart. */ @media (any-hover: hover) and (any-pointer: fine) { html, body { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cpath%20d='M3%202.5v13.2l3.5-3.3%202.3%205%201.9-.9-2.3-4.9h4.9z'%20fill='%23D8CBA2'%20stroke='%23A08A4C'%20stroke-width='1'%20stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto; } a, a *, button, button *, summary, summary *, .vraag summary, label, select, .knop, .nav a, .menuknop, [role="button"], [tabindex]:not([tabindex="-1"]) { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7.5'%20fill='%23C9B98A'%20fill-opacity='.12'%20stroke='%23C9B98A'%20stroke-width='1.3'/%3E%3Ccircle%20cx='11'%20cy='11'%20r='8.6'%20fill='none'%20stroke='%23A08A4C'%20stroke-width='.6'%20opacity='.7'/%3E%3Ccircle%20cx='11'%20cy='11'%20r='1.9'%20fill='%23C9B98A'/%3E%3C/svg%3E") 11 11, pointer; } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], textarea { cursor: text; } input[type="checkbox"], input[type="radio"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7.5'%20fill='%23C9B98A'%20fill-opacity='.12'%20stroke='%23C9B98A'%20stroke-width='1.3'/%3E%3Ccircle%20cx='11'%20cy='11'%20r='8.6'%20fill='none'%20stroke='%23A08A4C'%20stroke-width='.6'%20opacity='.7'/%3E%3Ccircle%20cx='11'%20cy='11'%20r='1.9'%20fill='%23C9B98A'/%3E%3C/svg%3E") 11 11, pointer; } } /* ================================================================== 1.9.7 – DIENSTEN ALS KAARTEN, CHAMPAGNE BIJ AANWIJZEN (donkere uitvoering) De vier diensten op de homepage hadden geen eigen vlak, en bij het aanwijzen werd het blok bijna zwart (een oude variabele uit 1.9.0). Nu: in rust een lichtere groene kaart met een champagne rand; bij het aanwijzen wordt de kaart champagne met donkergroene tekst. Leesbaarheid (norm 4,5): in rust tekst 4,6, kop 7,1, goud 5,2; bij aanwijzen tekst 5,4, kop 8,2, goud 5,5. ================================================================== */ @media (min-width: 901px) { body.egv-donker .diensten__grid { gap: clamp(16px, 1.8vw, 24px); border-top: 0; } } body.egv-donker .dienst, body.egv-donker .dienst:nth-child(even) { padding-left: clamp(24px, 3vw, 44px); border: 1px solid rgba(201, 185, 138, .34) !important; border-radius: 14px; overflow: hidden; background: linear-gradient(168deg, #2A5B48 0%, #255746 60%, #22533F 100%); box-shadow: inset 0 1px 0 rgba(230, 220, 190, .22), 0 18px 34px -24px rgba(14, 46, 35, .8); transition: background .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease), transform .6s var(--ease); } body.egv-donker .dienst .dienst__nr, body.egv-donker .dienst .dienst__meer { color: var(--goud-licht); } body.egv-donker .dienst h3, body.egv-donker .dienst p, body.egv-donker .dienst .dienst__nr, body.egv-donker .dienst .dienst__meer { transition: color .5s var(--ease); } body.egv-donker .dienst:hover, body.egv-donker .dienst:nth-child(odd):hover, body.egv-donker .dienst:focus-visible { padding-left: clamp(24px, 3vw, 44px); border-color: #E6DCBE !important; background: linear-gradient(168deg, #EFE8D4 0%, #E9E0C6 50%, #E1D6B6 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 26px 50px -22px rgba(201, 185, 138, .45); transform: translateY(-3px); } body.egv-donker .dienst:hover h3, body.egv-donker .dienst:focus-visible h3 { color: #143E30; } body.egv-donker .dienst:hover p, body.egv-donker .dienst:focus-visible p { color: #2E5A48; } body.egv-donker .dienst:hover .dienst__nr, body.egv-donker .dienst:hover .dienst__meer, body.egv-donker .dienst:focus-visible .dienst__nr, body.egv-donker .dienst:focus-visible .dienst__meer { color: #5E4F1F; } body.egv-donker .dienst__lijn { background: #8C7A45; } body.egv-donker .dienst__icoon { background: rgba(20, 62, 48, .55); border-color: rgba(201, 185, 138, .4); } body.egv-donker .dienst:hover .dienst__icoon { background: #F6F1E3; border-color: #BFA96E; color: #5E4F1F; } body.egv-donker .dienst__icoon .ic-lijn * { stroke: var(--goud-licht); transition: stroke .5s var(--ease); } body.egv-donker .dienst:hover .dienst__icoon .ic-lijn * { stroke: #5E4F1F; } body.egv-donker .dienst:hover .dienst__icoon .ic-stip { fill: #8C7A45; } @media (max-width: 900px) { body.egv-donker .diensten__grid { display: grid; gap: 16px; border-top: 0; } body.egv-donker .dienst, body.egv-donker .dienst:nth-child(even) { padding: 30px 24px; } body.egv-donker .dienst:hover, body.egv-donker .dienst:nth-child(odd):hover { padding-left: 24px; } } @media (prefers-reduced-motion: reduce) { body.egv-donker .dienst:hover { transform: none; } } /* ================================================================== 1.9.8 – EIGEN LOGO VIA SITE-IDENTITEIT Een logo dat u uploadt bij Customizer → Site-identiteit → Logo krijgt genoeg hoogte om leesbaar te zijn (was 48 px). ================================================================== */ .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; } .custom-logo-link img { height: 66px; max-height: 66px; width: auto; max-width: min(360px, 56vw); object-fit: contain; } .kop.is-vast .custom-logo-link img { height: 56px; max-height: 56px; } .voet__merk .custom-logo-link img { height: 70px; max-height: 70px; max-width: 340px; } .custom-logo-link img { transition: height .4s var(--ease); } @media (max-width: 900px) { .custom-logo-link img, .kop.is-vast .custom-logo-link img { height: 46px; max-height: 46px; } } /* ================================================================== 1.9.9 – NIEUW LOGO IN HET THEMA ZELF Het vorige logo had een grijze naam (#6F7672) die op het flessengroen wegviel, en de naam was in de kop maar zo'n 9 px hoog. Het nieuwe logo heeft de naam ruim twee keer zo groot en kleurt mee met de uitvoering. ================================================================== */ .beeldmerk--logo.beeldmerk--logo2 { height: 72px; width: auto; display: block; transition: height .5s var(--ease); } .kop.is-vast .beeldmerk--logo.beeldmerk--logo2 { height: 60px; } .voet__merk .beeldmerk--logo.beeldmerk--logo2 { height: 84px; } @media (max-width: 900px) { .beeldmerk--logo.beeldmerk--logo2 { height: 50px; } .kop.is-vast .beeldmerk--logo.beeldmerk--logo2 { height: 46px; } .voet__merk .beeldmerk--logo.beeldmerk--logo2 { height: 64px; } } .beeldmerk--logo2 .bm-naam { font-family: var(--kopletter, 'Montserrat', sans-serif); font-weight: 400; letter-spacing: 1px; fill: #143E30; } .beeldmerk--logo2 .bm-slogan { font-family: var(--kopletter, 'Montserrat', sans-serif); font-weight: 500; letter-spacing: 9px; fill: #7E6A2E; } .beeldmerk--logo2 .bm-lijn { stroke: #A08A4C; stroke-width: 1.4px; } .beeldmerk--logo2 .bm-stip, .beeldmerk--logo2 .bm-punt { fill: #A08A4C; } .beeldmerk--logo2 .bm-halo { stroke: #BFA96E; } .beeldmerk--logo2 .bm-lijn--onder { transition-delay: 1.3s; transition-duration: 1.4s; } /* Donkere uitvoering: ivoren naam, champagne beeldmerk en slogan. */ body.egv-donker .beeldmerk--logo2 .bm-naam { fill: #F3EEE0; } body.egv-donker .beeldmerk--logo2 .bm-slogan { fill: #C9B98A; } body.egv-donker .beeldmerk--logo2 .bm-lijn { stroke: #C9B98A; } body.egv-donker .beeldmerk--logo2 .bm-stip, body.egv-donker .beeldmerk--logo2 .bm-punt { fill: #C9B98A; } body.egv-donker .beeldmerk--logo2 .bm-halo { stroke: #DFD3AE; } /* 1.9.10 – logo op één lijn met het menu: de naam staat nu op dezelfde hoogte als de menu-items (gemeten: de naam stond 8 px hoger dan het menu). Alleen in de kop, niet in de voettekst. */ .kop .beeldmerk--logo.beeldmerk--logo2 { transform: translateY(8px); transition: height .5s var(--ease), transform .5s var(--ease); } .kop.is-vast .beeldmerk--logo.beeldmerk--logo2 { transform: translateY(7px); } @media (max-width: 900px) { .kop .beeldmerk--logo.beeldmerk--logo2, .kop.is-vast .beeldmerk--logo.beeldmerk--logo2 { transform: translateY(5px); } } /* 1.9.11 – logo in saliegroen (Pantone 5585 C, #A9C4B0) in plaats van champagne: beeldmerk, naam, pijl en slogan. Leesbaarheid op het flessengroen 6,4 op 1 (norm 4,5). */ body.egv-donker .beeldmerk--logo2 .bm-naam, body.egv-donker .beeldmerk--logo2 .bm-slogan { fill: #A9C4B0; } body.egv-donker .beeldmerk--logo2 .bm-lijn { stroke: #A9C4B0; } body.egv-donker .beeldmerk--logo2 .bm-stip, body.egv-donker .beeldmerk--logo2 .bm-punt { fill: #A9C4B0; } body.egv-donker .beeldmerk--logo2 .bm-halo { stroke: #C5D8CB; } /* ================================================================== 1.9.15 – "WAT HET OPLEVERT" NETJES UITGELIJND Vier gelijke kolommen met een haarfijne lijn ertussen (zoals de cijferrij), een kort champagne streepje boven elke kop en regels die evenwichtig afbreken, zodat er geen los woord onderaan blijft hangen. ================================================================== */ .dialoog__opbrengst ul { --kolomgat: clamp(36px, 4.8vw, 68px); grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--kolomgat); row-gap: 28px; align-items: stretch; } .dialoog__opbrengst li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 4px 0 6px; } /* Haarlijn precies midden in de tussenruimte, zodat alle kolommen even ver uit elkaar staan. */ .dialoog__opbrengst li + li::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--kolomgat) / -2); width: 1px; background: var(--haar, var(--lijn)); } .dialoog__opbrengst strong { margin: 0; position: relative; padding-top: 16px; } .dialoog__opbrengst strong::before { content: ''; position: absolute; left: 0; top: 0; width: 22px; height: 1.5px; background: var(--goud-lijn, var(--goud, #BFA96E)); } .dialoog__opbrengst span { display: block; max-width: 24ch; line-height: 1.6; text-wrap: balance; } @media (max-width: 900px) { .dialoog__opbrengst ul { grid-template-columns: 1fr 1fr; } .dialoog__opbrengst li:nth-child(odd)::after { display: none; } } @media (max-width: 480px) { .dialoog__opbrengst ul { grid-template-columns: 1fr; row-gap: 22px; } .dialoog__opbrengst li::after { display: none; } } /* 1.9.16 – ervaring uit de praktijk in een opdrachtgeverskaart (Ketenaanpak) */ .opdrachtgever__ervaring { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--haar, var(--lijn)); } .opdrachtgever__ervaring-kop { position: relative; margin: 0 0 8px !important; padding-left: 32px; font-family: var(--kopletter); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--goud-tekst, var(--salie-diep)); } .opdrachtgever__ervaring-kop::before { content: ''; position: absolute; left: 0; top: 50%; width: 22px; height: 1.5px; background: var(--goud-lijn, var(--goud, #BFA96E)); } .opdrachtgever__ervaring p + p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; } .opdrachtgever__ervaring .link-pijl { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; text-decoration: none; } .opdrachtgever__ervaring .link-pijl .pijl { width: 16px; height: 16px; transition: transform .5s var(--ease); } .opdrachtgever__ervaring .link-pijl:hover .pijl { transform: translateX(5px); } body.egv-donker .opdrachtgever__ervaring-kop { color: var(--goud); } body.egv-donker .opdrachtgever__ervaring .link-pijl { color: var(--goud); } /* 1.9.18 – knop "Plan een gesprek" in de kop: flessengroene letters bij het aanwijzen. De regel voor menulinks (".nav a:hover" in champagne) woog zwaarder, waardoor de tekst champagne op champagne werd en verdween. Leesbaarheid nu 6,1 op 1. */ body .kop .nav a.nav__knop:hover, body .kop .nav a.nav__knop:focus-visible { color: #143E30; } body .kop .nav a.nav__knop:hover .pijl, body .kop .nav a.nav__knop:focus-visible .pijl { color: #143E30; } /* 1.10.0 – optionele "lees meer"-link onderaan een kaart. Wordt nu nergens gebruikt en staat klaar voor een kaart die moet doorverwijzen (zie README bij 1.10.1). Dezelfde stijl als de link in de praktijkblokken op Ketenaanpak. */ .kaart__meer { margin-top: 18px; font-size: 14.5px; letter-spacing: .06em; text-decoration: none; } .kaart__meer .pijl { width: 16px; height: 16px; } body.egv-goud .kaart__meer { color: var(--goud-tekst); } body.egv-donker .kaart__meer { color: var(--goud); } /* ------------------------------------------------------------------ 1.11.0 */ /* Voettekst: grotere aanraakvlakken op de telefoon (minimaal ca. 40 px per link). */ @media (max-width: 640px) { .voet ul { gap: 0; } .voet ul a { display: inline-block; padding: 10px 0; } .voet__onder a { display: inline-block; padding: 10px 0; } } /* "Ook interessant" onder de dienstpagina's: geen nummers, wat minder hoog. */ .diensten--meer .dienst { min-height: 0; }