/*
Theme Name: NoordgroeiT + NoordbuiTen
Theme URI: https://www.noordgroeit.nl/
Author: Susan Aben
Description: Het gezamenlijke WordPress-thema voor NoordgroeiT en NoordbuiTen.
Version: 1.0.0
Text Domain: noordgroeit-merged
*/
/* NoordgroeiT + NoordbuiTen — Basis en huisstijl */
:root {
--color-green: #3e6b47;
--color-green-light: #e6f0e1;
--color-orange: #c87f4a;
--color-coral: #f06653;
--color-cream: #f4f1ec;
--color-dark: #2e3b32;
--color-white: #ffffff;
--font-primary: "Open Sans", Arial, sans-serif;
--content-width: 1200px;
--content-padding: clamp(20px, 4vw, 56px);
--radius-small: 8px;
--radius-medium: 18px;
--radius-large: 32px;
--shadow-soft: 0 14px 40px rgba(46, 59, 50, 0.12);
}
*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--color-dark);
background: var(--color-cream);
font-family: var(--font-primary);
font-size: 16px;
line-height: 1.65;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: var(--color-green);
}
button, input, textarea, select {
font: inherit;
}
.site-container {
width: min(calc(100% - (2 * var(--content-padding))), var(--content-width));
margin-inline: auto;
}
.ng-site-header .site-container {
--content-width: 1400px;
}
/* Toegankelijkheid */
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 9999;
padding: 12px 18px;
color: var(--color-white);
background: var(--color-dark);
border-radius: var(--radius-small);
transform: translateY(-150%);
}
.skip-link:focus {
transform: translateY(0);
}
/* Nieuwe NoordgroeiT-header */
.ng-site-header {
position: sticky;
z-index: 1000;
top: 0;
padding: 14px 0;
background: rgba(244, 241, 236, 0.94);
border-bottom: 1px solid rgba(46, 59, 50, 0.07);
backdrop-filter: blur(14px);
}
.admin-bar .ng-site-header {
top: 32px;
}
.ng-header-shell {
position: relative;
min-height: 78px;
display: flex;
align-items: center;
gap: clamp(22px, 3vw, 44px);
padding: 9px 11px 9px 22px;
background: var(--color-white);
border: 1px solid rgba(46, 59, 50, 0.09);
border-radius: 22px;
box-shadow: 0 9px 34px rgba(46, 59, 50, 0.07);
}
.ng-header-logo {
width: clamp(145px, 12vw, 180px);
flex: 0 0 auto;
display: block;
}
.ng-header-logo img {
width: 100%;
max-height: 58px;
display: block;
object-fit: contain;
object-position: left center;
}
.ng-primary-navigation {
margin-left: auto;
}
.ng-navigation-list {
display: flex;
align-items: center;
gap: clamp(17px, 1.7vw, 29px);
margin: 0;
padding: 0;
list-style: none;
}
.ng-navigation-list a {
position: relative;
display: block;
padding: 18px 0;
color: var(--color-dark);
font-size: 0.94rem;
font-weight: 750;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.ng-navigation-list a::after {
content: "";
position: absolute;
right: 0;
bottom: 9px;
left: 0;
height: 3px;
background: var(--color-coral);
border-radius: 999px;
transform: scaleX(0);
transform-origin: right;
transition: transform 180ms ease;
}
.ng-navigation-list a:hover::after, .ng-navigation-list a:focus-visible::after {
transform: scaleX(1);
transform-origin: left;
}
.ng-mobile-home {
display: none;
}
.ng-header-actions {
display: flex;
align-items: center;
gap: 16px;
}
.ng-support-link {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--color-dark);
font-size: 0.9rem;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.ng-support-link span {
color: var(--color-coral);
font-size: 1rem;
transition: transform 180ms ease;
}
.ng-support-link:hover span, .ng-support-link:focus-visible span {
transform: scale(1.18);
}
.ng-header-button {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 12px 22px;
color: var(--color-white);
background: var(--color-coral);
border-radius: 15px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.ng-header-button:hover, .ng-header-button:focus-visible {
color: var(--color-white);
background: var(--color-dark);
transform: translateY(-2px);
}
.ng-menu-toggle {
display: none;
}
/* Nieuwe split hero */
.ng-hero-values span:not(:last-child)::after {
content: "•";
position: absolute;
right: -15px;
color: var(--color-coral);
}
/* Hero image */
/* NoordbuiTen card */
/* Header and hero responsive */
@media (max-width: 1180px) {
.ng-header-shell {
min-height: 72px;
}
.ng-menu-toggle {
min-height: 48px;
display: inline-flex;
align-items: center;
gap: 9px;
margin-left: auto;
padding: 10px 14px;
color: var(--color-dark);
background: var(--color-cream);
border: 0;
border-radius: 13px;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.ng-menu-icon {
width: 20px;
display: grid;
gap: 5px;
}
.ng-menu-icon span {
width: 100%;
height: 2px;
display: block;
background: currentColor;
border-radius: 999px;
transition: transform 180ms ease;
}
.ng-primary-navigation {
position: absolute;
top: calc(100% + 11px);
right: 0;
left: 0;
display: none;
padding: 18px;
background: var(--color-white);
border: 1px solid rgba(46, 59, 50, 0.1);
border-radius: 19px;
box-shadow: 0 20px 50px rgba(46, 59, 50, 0.14);
}
.ng-site-header.menu-is-open .ng-primary-navigation {
display: block;
}
.ng-navigation-list {
display: grid;
gap: 3px;
}
.ng-navigation-list a {
padding: 14px 15px;
border-radius: 11px;
}
.ng-navigation-list a::after {
content: none;
}
.ng-navigation-list a:hover, .ng-navigation-list a:focus-visible {
background: var(--color-green-light);
}
.ng-mobile-home {
display: block;
}
}
@media (max-width: 860px) {
.ng-support-link {
display: none;
}
}
@media (max-width: 782px) {
.admin-bar .ng-site-header {
top: 46px;
}
}
@media (max-width: 620px) {
.ng-site-header {
padding: 9px 0;
}
.ng-header-shell {
min-height: 65px;
gap: 10px;
padding: 7px 8px 7px 15px;
border-radius: 17px;
}
.ng-header-logo {
width: 130px;
}
.ng-header-button {
display: none;
}
.ng-menu-toggle {
margin-left: auto;
}
.ng-hero-values span:not(:last-child)::after {
content: none;
}
}
/* Homepage: identiteit */
.identity-card > p:not(.identity-label) {
max-width: 560px;
margin: 0 0 30px;
font-size: 1.02rem;
}
/* Homepage responsive */
/* Standaard WordPress-inhoud */
.content-area {
padding-top: clamp(60px, 8vw, 100px);
padding-bottom: clamp(80px, 10vw, 140px);
}
.content-entry {
max-width: 850px;
margin-inline: auto;
}
.entry-title {
margin: 0 0 32px;
font-size: clamp(2.3rem, 5vw, 4.5rem);
letter-spacing: -0.05em;
line-height: 1.05;
}
.entry-image {
margin-bottom: 36px;
overflow: hidden;
border-radius: var(--radius-medium);
}
.entry-content > *:first-child {
margin-top: 0;
}
/* Footer */
.site-footer {
color: var(--color-white);
background: var(--color-green);
}
.footer-column h2 {
margin: 0 0 18px;
color: var(--color-white);
font-size: 1rem;
}
.footer-column p {
color: var(--color-green-light);
}
.footer-column a {
color: var(--color-white);
font-weight: 700;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-bottom p {
margin: 0;
color: var(--color-green-light);
font-size: 0.86rem;
}
/* Responsive */
@media (max-width: 640px) {
.button {
width: 100%;
}
}
/* Homepage: in de praktijk */
/* Concrete voortgang */
.progress-copy > p:not(.eyebrow) {
max-width: 540px;
margin: 24px 0 0;
color: rgba(255, 255, 255, 0.82);
}
/* NoordgroeiT is breder dan NoordbuiTen */
/* Responsive */
/* Homepage: meedoen en vrijwilligersverhaal */
/* Afbeelding */
/* Vrijwilligersverhaal */
/* Verwachtingen */
/* Afsluitende oproep */
.join-action p:not(.identity-label) {
max-width: 660px;
margin: 15px 0 0;
color: rgba(255, 255, 255, 0.8);
}
/* Responsive */
/* Homepage: nieuws en agenda */
/* Nieuws */
/* Agenda */
/* Lege situaties */
/* Responsive */
/* Homepage: netwerk en partners */
/* NoordbuiTen */
.noordbuiten-copy > p:not(.network-label) {
margin: 24px 0 34px;
color: rgba(255, 255, 255, 0.76);
}
/* Partnerwand */
/* Afsluitende partneroproep */
.network-action p:not(.network-label) {
max-width: 700px;
margin: 15px 0 0;
}
/* Responsive */
/* Homepage: afsluitende call-to-action */
.closing-cta-copy > p:not(.closing-cta-label) {
max-width: 660px;
margin: 30px 0 0;
color: rgba(255, 255, 255, 0.8);
font-size: clamp(1.05rem, 1.5vw, 1.24rem);
line-height: 1.7;
}
/* Gezamenlijke footer */
.site-footer {
padding: clamp(70px, 9vw, 110px) 0 28px;
color: rgba(255, 255, 255, 0.76);
background: var(--color-dark);
}
.footer-main {
display: grid;
grid-template-columns: minmax(280px, 1.3fr) minmax(150px, 0.65fr) minmax(150px, 0.65fr) minmax(230px, 0.9fr);
gap: clamp(35px, 5vw, 72px);
}
.footer-identity {
max-width: 420px;
}
.footer-logo {
width: min(100%, 285px);
min-height: 112px;
display: grid;
place-items: center;
margin-bottom: 28px;
padding: 21px 25px;
background: var(--color-cream);
border-radius: var(--radius-medium);
}
.footer-logo img {
width: 100%;
max-height: 82px;
object-fit: contain;
}
.footer-identity > p {
margin: 0;
line-height: 1.7;
}
.footer-organisation-note {
margin-top: 20px !important;
padding-left: 17px;
color: var(--color-green-light);
border-left: 3px solid var(--color-coral);
font-size: 0.88rem;
}
.footer-column h2 {
margin: 0 0 24px;
color: var(--color-white);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.footer-column ul {
display: grid;
gap: 13px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-column a {
color: rgba(255, 255, 255, 0.76);
text-decoration: none;
transition: color 180ms ease, transform 180ms ease;
}
.footer-column li a {
display: inline-block;
}
.footer-column a:hover, .footer-column a:focus-visible {
color: var(--color-white);
}
.footer-column li a:hover, .footer-column li a:focus-visible {
transform: translateX(4px);
}
.footer-newsletter p {
margin: 0 0 23px;
line-height: 1.65;
}
.footer-noordbuiten-copy a span {
transition: transform 180ms ease;
}
.footer-noordbuiten-copy a:hover span, .footer-noordbuiten-copy a:focus-visible span {
transform: translateX(5px);
}
/* NoordbuiTen in footer */
.footer-noordbuiten {
display: grid;
grid-template-columns: minmax(230px, 0.65fr) minmax(0, 1.35fr);
align-items: center;
gap: clamp(28px, 5vw, 65px);
margin-top: clamp(55px, 8vw, 90px);
padding: clamp(28px, 5vw, 48px);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-large);
}
.footer-noordbuiten-logo {
min-height: 145px;
display: grid;
place-items: center;
padding: 25px;
background: var(--color-green-light);
border-radius: var(--radius-medium);
}
.footer-noordbuiten-logo img {
width: 100%;
max-width: 285px;
max-height: 110px;
object-fit: contain;
}
.footer-small-label {
margin: 0 0 9px;
color: var(--color-coral);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.footer-noordbuiten-copy h2 {
max-width: 690px;
margin: 0 0 22px;
color: var(--color-white);
font-size: clamp(1.55rem, 3vw, 2.5rem);
letter-spacing: -0.04em;
line-height: 1.08;
}
.footer-noordbuiten-copy a {
display: inline-flex;
align-items: center;
gap: 9px;
padding-bottom: 4px;
color: var(--color-white);
border-bottom: 2px solid currentColor;
font-weight: 800;
text-decoration: none;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
margin-top: 34px;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 0.78rem;
}
.footer-bottom p {
margin: 0;
}
/* Responsive */
@media (max-width: 1050px) {
.footer-main {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.footer-main, .footer-noordbuiten {
grid-template-columns: 1fr;
}
.footer-identity {
max-width: none;
}
}
@media (max-width: 520px) {
.footer-main {
gap: 42px;
}
.footer-bottom {
align-items: flex-start;
flex-direction: column;
}
}
/* Homepage: introductie en missie */
/* Vier thema’s */
/* Relatie NoordgroeiT en NoordbuiTen */
.ng-structure-copy > p:not(.ng-structure-label) {
max-width: 680px;
margin: 27px 0 0;
color: rgba(255, 255, 255, 0.74);
font-size: 1.02rem;
}
/* Visuele organisatiestructuur */
/* Responsive */
/* Header language switcher */
.ng-header-actions {
gap: 12px;
}
.ng-language-switcher {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 4px;
background: var(--color-cream);
border: 1px solid rgba(46, 59, 50, 0.09);
border-radius: 12px;
}
.ng-language-switcher .ng-language-option {
position: static;
min-width: 34px;
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 8px;
color: rgba(46, 59, 50, 0.58);
border-radius: 9px;
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0.05em;
line-height: 1;
text-decoration: none;
transition: color 180ms ease, background-color 180ms ease;
}
.ng-language-switcher .ng-language-option::after {
content: none;
}
.ng-language-switcher a.ng-language-option:hover, .ng-language-switcher a.ng-language-option:focus-visible {
color: var(--color-dark);
background: var(--color-green-light);
}
.ng-language-switcher .ng-language-option.is-current {
color: var(--color-white);
background: var(--color-dark);
}
.ng-language-divider {
color: rgba(46, 59, 50, 0.25);
font-size: 0.7rem;
font-weight: 700;
}
.ng-language-option.is-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.ng-mobile-language {
display: none;
}
/* Language switch inside the mobile menu */
@media (max-width: 1180px) {
.ng-language-switcher--desktop {
display: none;
}
.ng-mobile-language {
display: block;
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid rgba(46, 59, 50, 0.1);
}
.ng-language-switcher--mobile {
width: fit-content;
}
.ng-mobile-language .ng-language-option {
min-width: 46px;
min-height: 40px;
padding: 9px 12px;
}
.ng-mobile-language .ng-language-option:hover, .ng-mobile-language .ng-language-option:focus-visible {
background: var(--color-green-light);
}
.ng-mobile-language .ng-language-option.is-current {
color: var(--color-white);
background: var(--color-dark);
}
}
/* Nieuwe open homepagehero */
/* Hero text */
.ng-home-hero-themes span:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -14px;
width: 4px;
height: 4px;
background: var(--color-coral);
border-radius: 50%;
transform: translateY(-50%);
}
/* Hero photography */
/* NoordbuiTen connection */
/* Responsive hero */
@media (max-width: 620px) {
.ng-home-hero-themes span:not(:last-child)::after {
right: -12px;
}
}
/* Rustige homepagehero */
/* Photograph */
/* Readability gradient */
/* Hero content */
/* Primary action */
/* Quiet secondary action */
/* Small scroll cue */
/* Tablet */
/* Mobile */
/* Respect reduced-motion settings */
/* Editorial hero: tekst boven brede foto */
/* Main action */
/* Quiet secondary action */
/* Wide photograph */
/* Tablet */
/* Mobile */
/* Homepage: foto achter tekst en header */
/* Header floats over the hero on the homepage */
body.home .ng-site-header {
position: fixed;
top: 0;
right: 0;
left: 0;
padding: 14px 0;
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
transition: background-color 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}
/* Slightly transparent at the top so the photo remains visible */
body.home .ng-header-shell {
background: rgba(244, 241, 236, 0.72);
border-color: rgba(255, 255, 255, 0.42);
box-shadow: 0 9px 34px rgba(31, 46, 37, 0.09);
backdrop-filter: blur(13px);
transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
/* Return to the existing header appearance after scrolling */
/* Full photograph hero */
/* The photograph fills the complete hero */
/* Local light-green veil: strong behind text, open over the photo */
/* Hero text */
/* Existing soft curve at the bottom */
/* Tablet and mobile */
/* Homepage: editorial photo behind text and header */
/* Transparent header at the top */
body.home .ng-site-header {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
padding: 14px 0;
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
transition: background-color 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}
body.home.admin-bar .ng-site-header {
top: 32px;
}
body.home .ng-header-shell {
background: rgba(244, 241, 236, 0.72);
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 10px 35px rgba(31, 46, 37, 0.1);
backdrop-filter: blur(14px);
transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
/* Existing solid header after scrolling */
body.home .ng-site-header.is-scrolled {
background: rgba(244, 241, 236, 0.94);
border-bottom-color: rgba(46, 59, 50, 0.07);
backdrop-filter: blur(14px);
}
body.home .ng-site-header.is-scrolled .ng-header-shell, body.home .ng-site-header.menu-is-open .ng-header-shell {
background: var(--color-white);
border-color: rgba(46, 59, 50, 0.09);
box-shadow: 0 9px 34px rgba(46, 59, 50, 0.07);
}
/* Complete opening hero */
/* Allow the photograph to cover the complete section */
/* Soft light area behind the text */
/* Text remains calm and central */
/* Mobile and tablet */
@media (max-width: 782px) {
body.home.admin-bar .ng-site-header {
top: 46px;
}
}
@media (max-width: 560px) {
body.home .ng-site-header {
padding: 9px 0;
}
}
/* Hero refinement: clean photograph, no light spotlight */
/* One consistent tint across the photograph */
/* Strong, clear white typography */
/* Tablet and mobile */
/* Show more of the panorama */
/* Keep enough height on smaller screens */
/* Hero: calmer text, scroll cue and dotted divider */
/* Tighter text composition */
/* Animated “scroll omlaag” cue */
/* Fine line and coral dot between hero and next section */
/* Keep mobile calmer */
/* Hero: asymmetric editorial composition */
/* Darker toward the text, without a spotlight */
/* Align content with the wider header */
/* Left-hand editorial text */
/* Keep scroll cue centred in the whole hero */
/* Divider now lives below the photograph */
/* Tablet and mobile */
/* Divider exactly on the bottom edge of the hero */
/* Keep the divider visible at the hero’s bottom edge */
/* Actual divider on the exact bottom edge */
/* Keep the following section behind the divider */
/* Dot centred directly on the border */
/* Intro section: warm editorial opening */
/* Softer, more organic background shape */
/* Main composition */
/* Small section label */
/* More controlled heading */
/* Handmade coral stroke */
/* Right-hand explanation */
body.home .ng-intro-copy p:not(.ng-intro-lead) {
max-width: 520px;
line-height: 1.7;
}
/* Responsive */
/* Over ons: editorial manifesto */
/* Remove previous decorative experiments */
/* Compact opening statement */
body.home .ng-intro-copy p:not(.ng-intro-lead) {
max-width: 590px;
margin-top: 20px;
font-size: 1rem;
line-height: 1.75;
}
/* Themes become flowing manifesto rows */
/* Remove redundant NoordgroeiT–NoordbuiTen card */
/* Responsive */
/* NoordgroeiT story system: de groeilijn */
/* Calm introductory composition */
/* Quiet text link */
/* The growth journey */
/* Hand-drawn-feeling connecting line */
/* Three unboxed moments */
/* Outcomes without cards */
/* Tablet */
/* Mobile */
/* Reduced motion */
/* Homepage About: civic editorial identity */
/* Opening statement */
/* Origin story */
/* Founding-date seal */
/* Story text */
/* Text link */
/* The belief: not a card, just a strong voice */
/* Full-width role statement */
/* Tablet */
/* Mobile */
/* Initiatieven: typographic project index */
/* Section introduction */
/* Full-width project rows */
/* Large background word */
/* Number and type */
/* Project title and description */
/* Circular action */
/* Tablet */
/* Mobile */
/* PHOTOGRAPHIC ABOUT + INITIATIVES */
/* ABOUT */
/* About photography */
/* About story */
/* INITIATIVES */
/* Initiative rows */
/* Initiative footer */
/* RESPONSIVE */
/* COMMUNITY FIELD STORY */
/* RESPONSIVE */
/* CALMER SECTION TYPOGRAPHY */
/* Slightly calmer spacing around the headings */
/* Mobile */
/* NOORD IN CIJFERS */
/* Subtle animation finishing state */
/* Tablet */
/* Mobile */
/* NOORDBUITEN STORY */
.ng-nb-story {
position: relative;
overflow: hidden;
padding: clamp(5rem, 9vw, 9rem) 0;
background: #dde8d8;
color: #29382f;
}
.ng-nb-story::before {
position: absolute;
top: clamp(4rem, 8vw, 8rem);
right: -7rem;
width: 19rem;
height: 19rem;
border: 1px solid rgba(72, 113, 65, 0.17);
border-radius: 50%;
content: "";
}
.ng-nb-story::after {
position: absolute;
top: clamp(9rem, 16vw, 16rem);
right: 2.5rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background: #f26452;
content: "";
}
/* Introduction */
.ng-nb-copy > p:not(.ng-nb-location) {
max-width: 620px;
margin: 0;
color: #56675b;
font-size: clamp(1rem, 1.25vw, 1.13rem);
line-height: 1.75;
}
/* Photographic sequence */
/* Closing line */
.ng-nb-footer li:not(:last-child)::after {
width: 0.3rem;
height: 0.3rem;
border-radius: 50%;
background: #f26452;
content: "";
}
/* Tablet */
/* Mobile */
@media (max-width: 680px) {
.ng-nb-story {
padding: 4.5rem 0;
}
}
/* Small phones */
/* Partners now use the full available width */
/* HOMEPAGE RHYTHM CLEANUP */
/* * ABOUT * Remove the unnecessary empty first column. */
/* * NUMBER STRIP */
/* * INITIATIVES */
/* One quieter link inside the active project */
/* * NOORDBUITEN */
.ng-nb-story {
padding: clamp(4rem, 6vw, 6.25rem) 0;
}
/* * Buttons should feel deliberate, not oversized. */
/* Tablet */
/* Mobile */
@media (max-width: 680px) {
.ng-nb-story {
padding: 3.75rem 0;
}
}
/* NOORDBUITEN DESTINATION */
/* MEEDOEN — EDITORIAL REDESIGN */
/* Opening */
/* Volunteer quote */
/* Photography */
/* Keep the clean expectation section, but tighten it */
/* Final action */
/* Desktop: keep the requested heading on one line */
/* Tablet */
/* Mobile */
/* MEEDOEN — CALMER TYPOGRAPHY AND REAL BUTTONS */
/* Final invitation */
/* Two proper choices */
/* Tablet */
/* Mobile */
/* Heading */
/* Achievement strip */
/* Photographic proof */
/* Two small proof points */
/* Tablet */
/* Mobile */
/* Reset the broken grid behaviour */
/* Number stays inside its own panel */
/* Tablet */
/* Mobile */
/* Fully reset each card */
/* Card colours */
/* Fix the number inside the top-left corner */
/* Stop the text container drifting sideways */
/* Neater typography */
/* Tablet */
/* Mobile */
/* Only hide cards once JavaScript has prepared them */
/* Reveal cards one after another */
/* Gentle movement after the entrance finishes */
/* Keep the number circle subtly alive */
/* NIEUWS, AGENDA & ACTIVITEITEN */
/* Heading */
/* Main layout */
/* News */
/* Agenda */
/* Proper destination rather than hyperlink */
/* Ongoing activities */
/* Responsive */
/* News category and date */
/* EDITORIAL NEWS */
/* Stories */
/* Leading story */
/* Category and date */
/* Two compact stories */
/* Shared photo movement */
/* Empty state */
/* Tablet */
/* Mobile */
/* MOVING PARTNER RIBBON */
/* Introduction */
/* Marquee viewport */
/* Moving track */
/* Logo panel */
/* Subtle interaction */
/* * Pause so visitors can inspect a logo. */
/* Seamless sideways movement */
/* Closing caption */
/* Tablet */
/* Mobile */
/* Accessibility */
/* PARTNER DESTINATION */
/* Deliberate destination—not a naked hyperlink */
/* Homepage: afsluiting / steun NoordgroeiT */
/* Coral shape in the corner */
/* Subtle green shape at the bottom */
/* A real button, not a hyperlink-looking text link */
/* Right-hand impact list */
/* Tablet */
/* Mobile */
/* Small visual transition from the partner section */
/* Hero: Samen voor Noord corner mark */
/* Large coral circle disappearing beyond the image */
/* Pale Samen voor Noord seal */
/* Keep the hero seal above the dark image overlay */
/* Badge is now independent from the darkened photograph */
/* Homepage: subtle scroll reveals */
/* * Elements are only hidden after JavaScript prepares them. * The site therefore remains fully visible if JavaScript fails. */
/* Images settle into place slightly */
/* Used sparingly for split compositions */
/* Revealed state */
/* Horizontal movement becomes vertical on smaller screens */
/* Accessibility */
/* NoordbuiTen: compact location map */
/* Fine inner line keeps the map visually connected to the card */
/* FINAL HOMEPAGE RESPONSIVE PASS — Keep this at the absolute bottom of style.css */
/* Prevent decorative elements from creating horizontal scroll */
html, body {
overflow-x: clip;
}
/* TABLET — 900px and smaller */
@media (max-width: 900px) {
/* Consistent section rhythm */
body.home .ng-nb-story {
padding-top: 5rem;
padding-bottom: 5rem;
}
/* Hero */
/* About */
/* Initiatives */
/* NoordbuiTen: map and story receive proper width */
/* Join */
/* Impact */
/* News and agenda */
/* Closing support chapter */
}
/* SMALL TABLET — NoordbuiTen switches to one column */
/* MOBILE — 600px and smaller */
@media (max-width: 600px) {
:root {
--content-padding: 18px;
--radius-large: 24px;
}
/* Header */
body.home .ng-site-header {
padding: 8px 0;
}
.ng-header-shell {
min-height: 62px;
padding: 7px 8px 7px 14px;
border-radius: 16px;
}
.ng-header-logo {
width: 122px;
}
.ng-menu-toggle {
min-height: 44px;
padding: 9px 12px;
font-size: 0.82rem;
}
/* Hero */
/* Shared section rhythm */
body.home .ng-nb-story {
padding-top: 4rem;
padding-bottom: 4rem;
}
/* Shared typography */
/* About */
/* Number strip stays compact as a 2 × 2 grid */
/* Initiatives */
/* NoordbuiTen */
/* Join */
/* Impact */
/* News and agenda */
/* Partners */
/* Final support chapter */
}
/* Very narrow phones only */
/* Touch devices do not need hover jumps */
/* Doe mee: more compact opening */
/* Doe mee: volunteer experiences */
/* Two testimonial cards */
/* Quiet decorative circle */
/* Keep the final action close to the testimonials */
/* Doe mee: clean text-led section */
/* Reviews become a quiet supporting element */
/* Keep the final action nearby */
/* SAFE SCROLL REVEALS — Content can never remain invisible */
/* Start the animation only once JavaScript reveals it */
/* The impact cards used the older pre-hidden approach */
/* Preserve a small stagger inside the impact cards */
/* COMPACT DESTINATION CONTROLS — Replaces the final naked text links */
/* Hero version */
/* Light-section version */
/* Shared movement */
/* FINAL CALM ANIMATION FIX — One subtle reveal system — no jumping or double animation */
/* Prepare elements smoothly */
/* Revealed state */
/* Impact cards: remove the second animation */
/* Reveal the cards */
/* Small, controlled stagger */
/* Prevent every individual child from animating separately */
/* Keep hover movement subtle */
/* Even quieter on phones */
/* Accessibility */
/* RESTORE ORIGINAL HOMEPAGE ANIMATIONS — Original movement, without the double-animation bug */
/* Main upward reveal */
/* Images gently settle into position */
/* Split layouts enter from opposite directions */
/* Final revealed position */
/* Original one-by-one rhythm */
/* Disable the conflicting inner animation */
/* Original hover movement */
/* MOBILE — Horizontal entrances become vertical */
/* Accessibility */
/* FINAL NAVIGATION WITH SUBMENUS */
.ng-nav-parent {
position: relative;
}
.ng-nav-parent-row {
display: flex;
align-items: center;
}
.ng-nav-parent-row > a {
padding-right: 4px;
}
/* Small chevron control */
.ng-submenu-toggle {
width: 26px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--color-dark);
background: transparent;
border: 0;
border-radius: 999px;
cursor: pointer;
}
.ng-submenu-toggle span {
width: 7px;
height: 7px;
display: block;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 180ms ease;
}
.ng-submenu-toggle:hover, .ng-submenu-toggle:focus-visible {
color: var(--color-coral);
background: var(--color-green-light);
}
.ng-nav-parent.submenu-is-open .ng-submenu-toggle span {
transform: translateY(2px) rotate(225deg);
}
/* Desktop dropdown */
.ng-submenu {
position: absolute;
z-index: 30;
top: calc(100% - 5px);
left: -18px;
width: max-content;
min-width: 245px;
display: grid;
margin: 0;
padding: 13px 10px 10px;
overflow: hidden;
list-style: none;
background: #fbfaf7;
border: 1px solid rgba(46, 59, 50, 0.11);
border-radius: 5px 17px 17px 17px;
box-shadow: 0 20px 45px rgba(46, 59, 50, 0.14);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(9px);
transition: opacity 180ms ease, visibility 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ng-submenu::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 46px;
height: 3px;
background: var(--color-coral);
border-radius: 0 999px 999px 0;
}
.ng-nav-doe-mee .ng-submenu {
right: 0;
left: auto;
}
.ng-nav-parent:hover > .ng-submenu, .ng-nav-parent:focus-within > .ng-submenu, .ng-nav-parent.submenu-is-open > .ng-submenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.ng-submenu li + li {
border-top: 1px solid rgba(46, 59, 50, 0.07);
}
.ng-submenu a {
padding: 11px 12px;
border-radius: 8px;
font-size: 0.88rem;
font-weight: 700;
line-height: 1.3;
}
.ng-submenu a::after {
content: none !important;
}
.ng-submenu a:hover, .ng-submenu a:focus-visible {
color: var(--color-green);
background: var(--color-green-light);
}
/* Mobile-only destinations */
.ng-mobile-support, .ng-mobile-vacancies {
display: none;
}
/* Mobile navigation accordion */
@media (max-width: 1180px) {
.ng-navigation-list {
max-height: calc(100vh - 145px);
overflow-y: auto;
overscroll-behavior: contain;
}
.ng-nav-parent-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 46px;
align-items: center;
}
.ng-nav-parent-row > a {
padding-right: 8px;
}
.ng-submenu-toggle {
width: 42px;
height: 42px;
}
.ng-nav-parent > .ng-submenu {
position: static;
width: auto;
min-width: 0;
max-height: 0;
margin: 0 14px;
padding: 0 0 0 14px;
overflow: hidden;
background: transparent;
border: 0;
border-left: 2px solid rgba(62, 107, 71, 0.2);
border-radius: 0;
box-shadow: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: none;
transition: max-height 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, margin 280ms ease, padding 280ms ease;
}
.ng-nav-parent > .ng-submenu::before {
display: none;
}
.ng-nav-parent.submenu-is-open > .ng-submenu {
max-height: 420px;
margin-top: 2px;
margin-bottom: 9px;
padding-top: 4px;
padding-bottom: 4px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ng-submenu li + li {
border-top: 0;
}
.ng-submenu a {
padding: 9px 11px;
font-size: 0.9rem;
}
}
@media (max-width: 860px) {
.ng-mobile-support {
display: block;
}
.ng-mobile-support > a {
color: var(--color-coral);
}
}
@media (max-width: 620px) {
.ng-mobile-vacancies {
display: block;
}
.ng-mobile-vacancies > a {
margin-top: 7px;
color: var(--color-white) !important;
background: var(--color-coral) !important;
}
.ng-mobile-vacancies > a:hover, .ng-mobile-vacancies > a:focus-visible {
background: var(--color-dark) !important;
}
}
/* NAVIGATION WIDTH CORRECTION */
.ng-site-header .site-container {
--content-width: 1500px;
}
.ng-header-shell {
gap: clamp(14px, 1.35vw, 24px);
}
.ng-navigation-list {
gap: clamp(9px, 0.9vw, 16px);
}
.ng-navigation-list > li > a, .ng-nav-parent-row > a {
font-size: 0.91rem;
}
.ng-submenu-toggle {
width: 20px;
height: 36px;
}
.ng-header-actions {
flex: 0 0 auto;
gap: 11px;
}
.ng-support-link {
font-size: 0.87rem;
}
.ng-header-button {
min-height: 52px;
padding-inline: 19px;
}
/* BALANCED HEADER + STEUN ONS BUTTON */
@media (min-width: 1181px) {
/* Three balanced areas: logo | centred navigation | actions */
.ng-header-shell {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: clamp(18px, 1.8vw, 30px);
padding: 9px 15px 9px 22px;
}
.ng-header-logo {
justify-self: start;
}
.ng-primary-navigation {
justify-self: center;
margin-left: 0;
}
.ng-header-actions {
justify-self: end;
margin-left: 0;
gap: 10px;
}
/* Keep the centre navigation compact */
.ng-navigation-list {
gap: clamp(8px, 0.75vw, 14px);
}
.ng-navigation-list > li > a, .ng-nav-parent-row > a {
font-size: 0.9rem;
}
}
/* Steun ons becomes a proper secondary CTA */
.ng-support-link--end {
min-height: 52px;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 18px !important;
color: var(--color-white) !important;
background: var(--color-dark) !important;
border: 1px solid var(--color-dark) !important;
border-radius: 15px !important;
font-size: 0.88rem;
font-weight: 800;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.ng-support-link--end span {
color: var(--color-coral) !important;
font-size: 1rem;
}
/* Steun ons hover */
.ng-support-link--end:hover, .ng-support-link--end:focus-visible {
color: var(--color-white) !important;
background: var(--color-green) !important;
border-color: var(--color-green) !important;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(46, 59, 50, 0.18);
}
.ng-support-link--end:hover span, .ng-support-link--end:focus-visible span {
color: var(--color-coral) !important;
transform: scale(1.15);
}
/* Return to the existing mobile flex layout */
@media (max-width: 1180px) {
.ng-header-shell {
display: flex;
}
}
/* HOMEPAGE — WAAR WE VOOR STAAN */
/* Small editorial label */
/* Four values */
/* Icon circles */
/* Text */
/* VALUES — TABLET */
/* VALUES — MOBILE */
/* Makes every icon start on exactly the same line */
/* Makes all four text blocks line up */
/* ACCESSIBILITY — CONTRAST FIXES */
/* Impact section */
/* NoordbuiTen footer label */
.footer-small-label {
color: #f3a28c;
}
/* VALUES STRIP — MOBILE CLEANUP */
/* MOBILE HEADER — COMPACT STEUN ONS */
@media (max-width: 560px) {
body.home .ng-header-shell {
gap: 10px;
padding: 8px 10px 8px 14px;
}
body.home .ng-header-actions {
flex: 0 0 auto;
gap: 0;
}
body.home .ng-support-link--end {
width: 48px;
min-width: 48px;
min-height: 48px;
padding: 0 !important;
/* Hides only the visible "Steun ons" text */
font-size: 0;
border-radius: 14px !important;
}
body.home .ng-support-link--end span {
font-size: 1rem;
}
}
/* FINAL HERO TYPOGRAPHY */
/* Small explanatory line */
/* Main statement */
/* Force our deliberate line break */
/* Tiny house-style detail */
/* Give line two a tiny bit of breathing room */
/* Tablet */
/* Mobile */
/* VALUES STRIP — CTA + PLAYFUL ICON MOTION */
/* Button + values on one horizontal line */
/* Ontdek wat we doen */
/* ICON MOVEMENT — Matches the existing NoordgroeiT interaction */
/* Only the little circle moves */
/* The item itself stays completely still */
/* VALUES CTA — RESPONSIVE */
/* Accessibility */
/* VALUES — OUTSIDE DISCOVERY BUTTON */
/* Button lives in the empty gutter beside the strip */
/* Hover */
/* * Once there isn't enough room beside the 1200px container, * bring it back above the strip rather than letting it overlap. */
/* Mobile */
/* VALUES — DIRECTIONAL CUE */
/* Lives in the left gutter */
/* Same quiet editorial language as SCROLL OMLAAG */
/* Direction line */
/* Fine line */
/* Coral dot */
/* Tiny arrow at the end */
/* Bring it above the strip when the side gutter gets too small */
/* Mobile: quiet, no unnecessary movement */
/* Respect accessibility settings */
/* HERO — CALMER TEXT SCALE */
/* Tablet */
/* Mobile */
/* OVER ONS — TIGHTER EDITORIAL INTRO */
/* Kicker now actually belongs to the heading */
/* Short supporting sentence */
/* ORIGIN STORY UNDER PHOTO */
/* Date */
/* Main statement */
/* Right-side explanation */
/* Tablet */
/* Mobile */
/* NUMBER STRIP — FILL THE EXISTING 1200PX CONTAINER */
/* Use the complete container width */
/* Four genuinely equal columns */
/* Keep outer edges aligned with the rest of the site */
/* NUMBER STRIP — VISUALLY USE FULL 1200PX WIDTH */
/* First one stays against the left edge */
/* Middle two sit nicely inside their columns */
/* Last one reaches the right edge */
/* Paragraphs currently have max-width:190px, so align those as well */
/* NUMBER STRIP — FINAL EVEN SPACING */
/* Every statistic gets exactly 1/4 of the 1200px */
/* Dividers exactly between the four columns */
/* Text sits underneath the number consistently */
/* Keep the numbers visually consistent */
/* HEADING */
/* CAROUSEL */
/* CARDS */
/* FRONT */
/* RIGHT CARD */
/* FURTHEST CARD */
/* fourth / invisible */
/* IMAGE */
/* number badge */
/* CONTENT */
/* CAS DE DAS PLACEHOLDER */
/* ARROWS */
/* DOTS */
/* QUIET INDEX */
/* TABLET */
/* MOBILE */
/* REDUCED MOTION */
/* INITIATIVES — CIRCULAR COVERFLOW CAROUSEL */
/* SECTION HEADING */
/* CAROUSEL SHELL */
/* CARDS */
/* ACTIVE / CENTRE */
/* LEFT PREVIEW */
/* RIGHT PREVIEW */
/* Anything else stays outside the carousel */
/* PHOTOGRAPH */
/* Fine tune existing photos */
/* GRADIENT OVER IMAGE */
/* * Side cards are already darkened through filter, * so keep their gradient visually simple. */
/* TEXT OVERLAY */
/* Small project label */
/* Title */
/* Description */
/* Link */
/* SIDE PREVIEW TEXT */
/* * Previews show only the identity, * not a full paragraph and button. */
/* Cursor indicates side card can be selected */
/* O & O / CAS DE DAS PLACEHOLDER */
/* ARROWS */
/* COUNTER + DOTS */
/* TABLET */
/* MOBILE */
/* ACCESSIBILITY */
/* COVERFLOW — SMALLER PREVIEWS INSIDE 1200PX */
/* Centre card stays the hero of the carousel */
/* Smaller left preview */
/* Smaller right preview */
/* Previews should feel quieter than the centre */
/* Arrows also stay comfortably inside the carousel */
/* Cas de Das carousel image */
/* OVER ONS — MISSIE & VISIE */
/* Small introduction */
/* TWO CLEAR COLUMNS */
/* First column aligns with page */
/* Divider between mission and vision */
/* Small number */
/* Mission / vision label */
/* Main statement */
/* Explanation */
/* QUOTE / CLOSING LINE */
/* Keep existing compact button neat */
/* RESPONSIVE */
/* HOMEPAGE POLISH — CONSISTENT TYPOGRAPHY */
:root {
--ng-home-section-title: clamp(2.85rem, 3.85vw, 4.15rem);
--ng-home-body: clamp(0.98rem, 1.05vw, 1.06rem);
}
/* MAIN SECTION HEADINGS */
/* SECTION INTRO COPY */
body.home .ng-nb-copy > p:not(.ng-nb-location) {
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* SMALL SECTION KICKERS */
@media (max-width: 700px) {
:root {
--ng-home-section-title: clamp(2.45rem, 10vw, 3.15rem);
--ng-home-body: 0.98rem;
}
}
/* HOMEPAGE POLISH — VERTICAL RHYTHM */
/* INITIATIVES — Less empty air around the carousel */
/* DOE MEE — Keep the dark chapter substantial, but tighter */
/* Testimonials belong to the same story, so they don't need a giant second opening */
/* NEWS & AGENDA */
/* PARTNERS — Supporting content = slightly more compact */
/* MOBILE */
/* HOMEPAGE POLISH — CONTROL LANGUAGE */
/* 1. COMPACT DESTINATION CONTROLS */
/* One clean interaction everywhere */
/* * Remove the little rotation from the older version. * Horizontal movement feels cleaner and matches the site. */
/* 2. DOE MEE — TWO IMPORTANT CHOICES — Keep them larger, but bring their details into the system. */
/* Same circular arrow proportions */
/* * Coral primary: * white circle + coral arrow. * Makes it feel related to the final support CTA. */
/* Quiet choice keeps dark circle */
/* Same hover motion */
/* 3. AGENDA DESTINATION — Same arrow language without turning it into a pill. */
/* 4. FINAL SUPPORT CTA — Keep this one deliberately more important. */
/* 5. ACCESSIBLE KEYBOARD FOCUS */
/* MOBILE */
/* HOMEPAGE POLISH — MICRO INTERACTIONS */
/* 1. MAIN "VAN BINNENUIT" PHOTO — Keep this calm — tiny depth, no big zoom. */
/* Coral marker gets a tiny response too */
/* 2. NOORDBUITEN PHOTOS — Existing movement, just slightly calmer and unified. */
/* Captions become a touch clearer on hover */
/* 3. DOE MEE TESTIMONIALS — They're not buttons, so no big movement. — Just a little depth when the mouse passes over. */
/* Let the decorative circle quietly move */
/* Quote mark gets a little brighter */
/* 4. NEWS CARDS — Same motion language as buttons: 2px, not 3–5px. */
/* 5. PARTNER LOGOS — Very subtle: these shouldn't behave like product cards. */
/* 6. INITIATIVE CAROUSEL — Centre card gets life; previews clearly feel selectable. */
/* Side previews: don't move position — that could fight the carousel animation. Just wake them up slightly. */
/* 7. CONSISTENT FOCUS — Mouse hover is cute; keyboard should get equal treatment. */
/* 8. TOUCH DEVICES — No sticky fake hover effects on phones/tablets. */
/* 9. REDUCED MOTION */
/* HOMEPAGE POLISH — SURFACE DESIGN SYSTEM */
:root {
/* Borders */
--ng-line-light: rgba(41, 56, 47, 0.14);
--ng-line-light-soft: rgba(41, 56, 47, 0.09);
--ng-line-dark: rgba(255, 255, 255, 0.17);
/* Shadows */
--ng-shadow-rest: 0 8px 26px rgba(41, 56, 47, 0.055);
--ng-shadow-hover: 0 14px 34px rgba(41, 56, 47, 0.10);
/* NoordgroeiT corner language */
--ng-radius-card: 1.3rem 1.3rem 0.35rem 1.3rem;
--ng-radius-card-large: 1.8rem 1.8rem 0.45rem 1.8rem;
--ng-radius-quote: 0.45rem 1.5rem 1.5rem 1.5rem;
}
/* News gets a very quiet resting shadow */
/* HOMEPAGE — FINAL RESPONSIVE & ACCESSIBILITY PASS — Keep this block at the VERY bottom of style.css */
/* TABLET — 900PX */
/* MOBILE — 700PX */
@media (max-width: 700px) {
:root {
--content-padding: 18px;
--ng-home-section-title: clamp(2.35rem, 10vw, 3rem);
--ng-home-body: 0.98rem;
}
/* General headings */
/* Supporting paragraphs */
body.home .ng-nb-copy > p:not(.ng-nb-location) {
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* Small uppercase labels — Don't let these become microscopic. */
/* Hero */
/* Values — One clean authoritative mobile layout. */
/* Direction cue above values */
/* Mission / vision */
/* Numbers — retain 2 × 2 */
/* Circular initiatives — Main card + tiny hints either side */
/* Doe mee */
/* News */
/* Support */
}
/* VERY SMALL PHONES — 430PX */
@media (max-width: 430px) {
:root {
--content-padding: 16px;
}
}
/* CAROUSEL DOTS — LARGE CLICK AREA, SMALL VISUAL DOT */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* INNER PAGES — SHARED EDITORIAL HERO */
.ng-inner-hero {
position: relative;
padding: clamp(4.5rem, 7vw, 7.5rem) 0 clamp(5rem, 8vw, 8rem);
overflow: hidden;
background: var(--color-cream);
color: var(--color-dark);
}
.ng-inner-hero::before {
content: "";
position: absolute;
top: 11%;
left: -170px;
width: 330px;
height: 330px;
border: 65px solid rgba(62, 107, 71, 0.045);
border-radius: 50%;
pointer-events: none;
}
/* Copy */
/* Tiny information strip */
/* Hero photograph */
/* Handmade coral mark */
/* OVER NOORDGROEIT — ONS VERHAAL */
/* Introduction */
/* Date + story */
/* Reading copy */
/* Quote */
/* Simple story progression */
/* RESPONSIVE */
@media (max-width: 700px) {
.ng-inner-hero {
padding: 4rem 0 4.5rem;
}
}
/* INNER PAGES — MATCH HOMEPAGE TYPOGRAPHY */
/* Main inner-page title */
/* Keep the green second line, but don't enlarge it */
/* Intro copy = same reading size as homepage */
/* Story heading = same section-title system */
/* Supporting intro text */
/* Story lead was also too dramatic */
/* Normal reading copy */
/* Quote: still special, but much calmer */
/* MOBILE */
/* OVER NOORDGROEIT — HERO PROPORTION FIX */
body .ng-inner-hero {
padding: clamp(4rem, 6vw, 5.75rem) 0 clamp(4.5rem, 7vw, 6.5rem);
}
/* Give the copy more room and make the image quieter */
/* Much calmer than the first version */
/* Keep the green line connected to the headline */
/* Copy slightly tighter */
/* Facts closer to the text */
/* Photo should support the hero, not dominate it */
/* Caption was getting a bit tiny */
/* Slightly smaller coral detail */
/* TABLET */
/* MOBILE */
/* OVER NOORDGROEIT — PHOTO HERO */
/* IMAGE */
/* OVERLAY */
/* slight grounding at bottom */
/* COPY */
/* SAME TYPOGRAPHY SCALE AS HOMEPAGE */
/* BUTTON */
/* LITTLE EDITORIAL DETAILS */
/* small coral line at top of photograph */
/* SCROLL MARK */
/* TABLET */
/* MOBILE */
/* OVER NOORDGROEIT — HERO NEATENING PASS */
/* Match the same centered width as the rest of the site */
/* Hero doesn't need to be quite this tall */
/* Give the copy a clean, deliberate width */
/* Kicker */
/* Headline: same visual family as homepage, but wide enough to avoid the staircase effect */
/* Keep the green phrase subtle */
/* Intro copy */
/* Button a little closer to the text */
/* IMAGE / OVERLAY BALANCE */
/* Let the people on the right stay brighter */
/* Make the side note feel anchored instead of floating */
/* Scroll marker slightly quieter */
/* TABLET */
/* MOBILE */
/* OVER NOORDGROEIT — STORY + CORE VALUES */
.ng-over-story-v3 {
position: relative;
padding: clamp(4.75rem, 7vw, 6.5rem) 0 clamp(4.75rem, 7vw, 6.25rem);
overflow: hidden;
background: var(--color-cream);
color: var(--color-dark);
border-top: 1px solid rgba(46, 59, 50, 0.1);
}
/* STORY INTRO */
.ng-over-story-v3-intro {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.6fr);
align-items: end;
gap: clamp(3rem, 7vw, 7rem);
padding-bottom: clamp(3.5rem, 5vw, 4.75rem);
}
.ng-over-story-v3-badge {
width: fit-content;
margin: 0 0 1.2rem;
padding: 0.45rem 0.75rem;
color: var(--color-dark);
background: var(--color-green-light);
border-radius: 999px;
font-size: 0.67rem;
font-weight: 850;
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ng-over-story-v3-heading h2 {
max-width: 710px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: 0.97;
letter-spacing: -0.052em;
}
.ng-over-story-v3-heading h2 span {
color: var(--color-green);
}
/* STORY COPY */
.ng-over-story-v3-copy {
max-width: 480px;
}
.ng-over-story-v3-copy > p {
margin: 0 0 1.15rem;
color: rgba(46, 59, 50, 0.7);
font-size: var(--ng-home-body);
line-height: 1.68;
}
.ng-over-story-v3-copy > p:first-child {
color: var(--color-dark);
font-weight: 700;
}
/* FOUNDING DATE */
.ng-over-story-v3-date {
display: grid;
grid-template-columns: 18px auto auto minmax(0, 1fr);
align-items: center;
gap: 0.7rem;
margin-top: 1.8rem;
padding-top: 1rem;
border-top: 1px solid rgba(46, 59, 50, 0.14);
}
.ng-over-story-v3-date > span {
position: relative;
width: 18px;
height: 1px;
background: var(--color-coral);
}
.ng-over-story-v3-date > span::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 6px;
height: 6px;
background: var(--color-coral);
border-radius: 50%;
transform: translateY(-50%);
}
.ng-over-story-v3-date small {
color: rgba(46, 59, 50, 0.48);
font-size: 0.62rem;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ng-over-story-v3-date strong {
font-size: 0.78rem;
letter-spacing: -0.01em;
}
.ng-over-story-v3-date p {
margin: 0;
color: rgba(46, 59, 50, 0.52);
font-size: 0.72rem;
}
/* THREE CORE VALUES */
.ng-over-values {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid rgba(46, 59, 50, 0.16);
border-bottom: 1px solid rgba(46, 59, 50, 0.16);
}
.ng-over-value {
position: relative;
min-width: 0;
padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.75rem);
}
.ng-over-value:first-child {
padding-left: 0;
}
.ng-over-value:last-child {
padding-right: 0;
}
.ng-over-value + .ng-over-value {
border-left: 1px solid rgba(46, 59, 50, 0.13);
}
/* NUMBER + ICON */
.ng-over-value-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: clamp(2.2rem, 4vw, 3.25rem);
}
.ng-over-value-icon {
display: grid;
width: 2.5rem;
height: 2.5rem;
place-items: center;
color: var(--color-green);
background: rgba(220, 234, 215, 0.62);
border-radius: 50%;
font-size: 1rem;
transition: transform 220ms ease, background-color 220ms ease;
}
.ng-over-value:hover .ng-over-value-icon {
background: var(--color-green-light);
transform: translateY(-3px) rotate(3deg);
}
/* VALUE TYPOGRAPHY */
.ng-over-value h3 {
max-width: 270px;
margin: 0 0 0.85rem;
color: var(--color-dark);
font-size: clamp(1.4rem, 2vw, 1.8rem);
font-weight: 740;
line-height: 1.05;
letter-spacing: -0.035em;
}
.ng-over-value h3 span {
color: var(--color-green);
}
.ng-over-value p {
max-width: 320px;
margin: 0;
color: rgba(46, 59, 50, 0.66);
font-size: 0.9rem;
line-height: 1.65;
}
/* LITTLE ENDING DETAIL */
.ng-over-values-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
.ng-over-values-footer span {
width: clamp(35px, 6vw, 80px);
height: 1px;
background: rgba(46, 59, 50, 0.18);
}
.ng-over-values-footer p {
margin: 0;
color: rgba(46, 59, 50, 0.55);
font-size: 0.65rem;
font-weight: 850;
letter-spacing: 0.11em;
text-transform: uppercase;
}
/* coral dot on the left line */
.ng-over-values-footer span:first-child {
position: relative;
}
.ng-over-values-footer span:first-child::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 6px;
height: 6px;
background: var(--color-coral);
border-radius: 50%;
transform: translateY(-50%);
}
/* TABLET */
@media (max-width: 800px) {
.ng-over-story-v3-intro {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.ng-over-story-v3-copy {
max-width: 620px;
}
.ng-over-values {
grid-template-columns: 1fr;
}
.ng-over-value, .ng-over-value:first-child, .ng-over-value:last-child {
padding: 2rem 0;
}
.ng-over-value + .ng-over-value {
border-top: 1px solid rgba(46, 59, 50, 0.13);
border-left: 0;
}
.ng-over-value-top {
margin-bottom: 1.5rem;
}
.ng-over-value p {
max-width: 560px;
}
}
/* MOBILE */
@media (max-width: 520px) {
.ng-over-story-v3 {
padding: 4rem 0;
}
.ng-over-story-v3-date {
grid-template-columns: 18px auto auto;
gap: 0.6rem 0.7rem;
}
.ng-over-story-v3-date p {
grid-column: 2 / -1;
}
.ng-over-values-footer {
justify-content: flex-start;
}
.ng-over-values-footer span:last-child {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ng-over-value-icon {
transition: none;
}
}
/* OVER NOORDGROEIT — PROCESS */
.ng-over-process {
position: relative;
padding: clamp(5rem, 7vw, 6.5rem) 0;
overflow: hidden;
background: var(--color-dark);
color: var(--color-white);
}
/* subtle background detail */
.ng-over-process::after {
content: "";
position: absolute;
right: -150px;
bottom: -180px;
width: 360px;
height: 360px;
border: 70px solid rgba(220, 234, 215, 0.04);
border-radius: 50%;
pointer-events: none;
}
/* HEADING */
.ng-over-process-heading {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.48fr);
align-items: end;
gap: clamp(3rem, 7vw, 7rem);
margin-bottom: clamp(4rem, 6vw, 5.25rem);
}
.ng-over-process-kicker {
margin: 0 0 1.15rem;
color: #f6a390;
font-size: 0.74rem;
font-weight: 850;
line-height: 1.3;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.ng-over-process-heading h2 {
max-width: 680px;
margin: 0;
color: var(--color-white);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: 0.97;
letter-spacing: -0.052em;
}
.ng-over-process-heading h2 span {
display: block;
color: #dcead7;
}
.ng-over-process-heading > p {
max-width: 440px;
margin: 0 0 0.15rem;
color: rgba(255, 255, 255, 0.67);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* PROCESS MAP */
/* EACH STEP */
/* DOTS */
/* positions nearest to each route segment */
/* CONNECTING ROUTE */
/* 01 → 02 */
/* 02 ↓ 03 */
/* 03 ← 04 */
/* ENDING */
.ng-over-process-footer {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.65rem, 2vw, 1.1rem);
margin-top: clamp(3.5rem, 5vw, 4.5rem);
padding-top: 1.4rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.5);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ng-over-process-footer i {
color: var(--color-coral);
font-style: normal;
}
.ng-over-process-footer strong {
color: var(--color-white);
}
/* TABLET */
@media (max-width: 800px) {
.ng-over-process-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-over-process-heading > p {
max-width: 600px;
}
}
/* MOBILE */
@media (max-width: 620px) {
.ng-over-process {
padding: 4rem 0;
}
/* turn route into one vertical path */
.ng-over-process-footer {
justify-content: flex-start;
flex-wrap: wrap;
}
}
/* OVER NOORDGROEIT — CLEAN PROCESS ROUTE */
/* Remove the first experimental route */
/* CLEAN 2 × 2 COMPOSITION */
/* Give every step the same visual width */
/* 01 → 02 */
/* 02 ↓ 03 */
/* 03 ← 04 */
/* TYPOGRAPHY / SPACING */
/* Keep the little summary closer to the diagram */
.ng-over-process-footer {
margin-top: clamp(3rem, 5vw, 4rem);
}
/* TABLET / MOBILE */
/* OVER NOORDGROEIT — PROCESS ROUTE FINAL STRUCTURE */
/* * Kill all older experimental route pieces. */
/* GRID */
/* make sure the old mobile path doesn't appear here */
/* STEP POSITIONS */
/* STEP DESIGN */
/* CONNECTOR: 01 → 02 */
/* CONNECTOR: 02 ↓ 03 */
/* CONNECTOR: 03 ← 04 */
/* MOBILE */
/* OVER NOORDGROEIT — PROCESS ROUTE VISUAL CLEANUP */
/* Remove the horizontal card rules */
/* NUMBER + NODE */
/* actual route node */
/* GRID */
/* HORIZONTAL ROUTE */
/* 01 → 02 */
/* 03 ← 04 */
/* VERTICAL ROUTE */
/* TYPOGRAPHY */
/* Give left and right steps the same visual position */
/* MOBILE */
/* OVER NOORDGROEIT — CLEAN PROCESS TIMELINE */
/* Hide every leftover experimental process connector */
/* TIMELINE */
/* One continuous route */
/* arrow at the end */
/* STEP */
/* Marker contains number + node */
/* cover the line behind each node slightly */
/* COPY */
/* SUBTLE STAGGER — Keeps it playful without breaking the route */
/* TABLET */
/* MOBILE */
/* OVER NOORDGROEIT — PROCESS ORBIT */
/* hide previous process experiments */
/* ORBIT LAYOUT */
/* STEP CARDS */
/* CENTRAL ORBIT */
/* subtle extra orbit */
/* center label */
/* ORBIT ARROWS */
/* little coral nodes where the steps connect conceptually */
/* RESPONSIVE */
/* OVER NOORDGROEIT — ANIMATED PROCESS FLOW */
/* FOUR STEPS */
/* CENTER ORBIT */
/* QUIET GUIDE RING */
/* THREE REAL ARCS */
/* NODES */
/* CENTER LABEL */
/* ANIMATION PREPARATION — Only hide things after JS confirms it can animate. */
/* ENTER SECTION */
/* step 01 */
/* arc 01 → 02 */
/* step 02 */
/* arc 02 → 03 */
/* step 03 */
/* arc 03 → 04 */
/* step 04 */
/* center arrives during the journey */
/* once revealed, the dashed guide moves very slowly */
/* KEYFRAMES */
/* TABLET */
/* MOBILE — Keep it simple rather than squashing the orbit. */
/* REDUCED MOTION */
/* OVER NOORDGROEIT — ANIMATED IDEA CYCLE */
/* * Hide all previous process experiments. */
/* MAIN COMPOSITION */
.ng-over-cycle {
position: relative;
width: min(100%, 1080px);
min-height: 540px;
margin: clamp(3.5rem, 6vw, 5rem) auto 0;
}
/* CENTRAL VISUAL */
.ng-over-cycle-visual {
position: absolute;
top: 50%;
left: 50%;
width: clamp(300px, 34vw, 390px);
aspect-ratio: 1;
transform: translate(-50%, -50%);
}
.ng-over-cycle-svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
/* QUIET GUIDE */
.ng-over-cycle-guide {
fill: none;
stroke: rgba(220, 234, 215, 0.08);
stroke-width: 1;
}
/* THE ONE ANIMATED ROUTE */
.ng-over-cycle-route {
fill: none;
stroke: var(--color-coral);
stroke-width: 1.6;
stroke-linecap: round;
/* * pathLength = 100, * so these values behave like percentages. */
stroke-dasharray: 100;
stroke-dashoffset: 0;
/* * SVG circles start at 3 o'clock. * Rotate -90deg so ours starts at 12 o'clock. */
transform: rotate(-90deg);
transform-origin: 160px 160px;
}
/* NODES */
.ng-over-cycle-node-ring {
fill: var(--color-dark);
stroke: var(--color-coral);
stroke-width: 2;
}
.ng-over-cycle-node-core {
fill: var(--color-coral);
}
/* CENTER COPY */
.ng-over-cycle-center {
position: absolute;
top: 50%;
left: 50%;
width: 124px;
height: 124px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--color-white);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 50%;
text-align: center;
transform: translate(-50%, -50%);
backdrop-filter: blur(5px);
}
.ng-over-cycle-center span {
color: rgba(255, 255, 255, 0.57);
font-size: 0.7rem;
font-weight: 700;
}
.ng-over-cycle-center strong {
margin-top: 0.15rem;
color: var(--color-white);
font-size: 1rem;
font-weight: 800;
}
/* TEXT STEPS AROUND THE CIRCLE */
.ng-over-cycle-step {
position: absolute;
z-index: 3;
width: min(29%, 300px);
}
/* 01 — upper left */
.ng-over-cycle-step--1 {
top: 2.4rem;
left: 0;
text-align: right;
}
/* 02 — upper right */
.ng-over-cycle-step--2 {
top: 2.4rem;
right: 0;
}
/* 03 — lower right */
.ng-over-cycle-step--3 {
right: 0;
bottom: 2.4rem;
}
/* 04 — lower left */
.ng-over-cycle-step--4 {
bottom: 2.4rem;
left: 0;
text-align: right;
}
/* STEP TYPOGRAPHY */
.ng-over-cycle-number {
display: block;
margin-bottom: 0.7rem;
color: var(--color-coral);
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.12em;
}
.ng-over-cycle-step h3 {
margin: 0 0 0.6rem;
color: var(--color-white);
font-size: clamp(1.25rem, 1.65vw, 1.5rem);
font-weight: 730;
line-height: 1.08;
letter-spacing: -0.03em;
}
.ng-over-cycle-step p {
max-width: 290px;
margin: 0;
color: rgba(255, 255, 255, 0.62);
font-size: 0.88rem;
line-height: 1.6;
}
.ng-over-cycle-step--1 p, .ng-over-cycle-step--4 p {
margin-left: auto;
}
/* ANIMATION PREPARATION */
/* * IMPORTANT: * * Without JS everything remains visible. * Only once JS adds .is-animatable do we prepare * the animation state. */
.ng-over-cycle.is-animatable .ng-over-cycle-route {
stroke-dashoffset: 100;
}
/* * STEP 01 REMAINS VISIBLE. * * This is exactly the starting state we want. */
.ng-over-cycle.is-animatable .ng-over-cycle-step--2, .ng-over-cycle.is-animatable .ng-over-cycle-step--3, .ng-over-cycle.is-animatable .ng-over-cycle-step--4 {
opacity: 0;
transform: translateY(10px);
}
/* * Only node 01 starts visible. */
.ng-over-cycle.is-animatable .ng-over-cycle-node--2, .ng-over-cycle.is-animatable .ng-over-cycle-node--3, .ng-over-cycle.is-animatable .ng-over-cycle-node--4 {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
transform: scale(0.3);
}
/* center can begin slightly quieter */
.ng-over-cycle.is-animatable .ng-over-cycle-center {
opacity: 0.55;
}
/* START DRAWING */
.ng-over-cycle.is-in-view .ng-over-cycle-route {
animation: ng-over-cycle-draw 4s linear forwards;
}
/* * At 25% of 4 seconds = 1 second. * The line reaches node 02. */
.ng-over-cycle.is-in-view .ng-over-cycle-node--2 {
animation: ng-over-cycle-node-arrive 400ms ease-out 1s forwards;
}
.ng-over-cycle.is-in-view .ng-over-cycle-step--2 {
animation: ng-over-cycle-copy-arrive 480ms ease-out 1.05s forwards;
}
/* * 50% = 2 seconds. * Reaches node 03. */
.ng-over-cycle.is-in-view .ng-over-cycle-node--3 {
animation: ng-over-cycle-node-arrive 400ms ease-out 2s forwards;
}
.ng-over-cycle.is-in-view .ng-over-cycle-step--3 {
animation: ng-over-cycle-copy-arrive 480ms ease-out 2.05s forwards;
}
/* * 75% = 3 seconds. * Reaches node 04. */
.ng-over-cycle.is-in-view .ng-over-cycle-node--4 {
animation: ng-over-cycle-node-arrive 400ms ease-out 3s forwards;
}
.ng-over-cycle.is-in-view .ng-over-cycle-step--4 {
animation: ng-over-cycle-copy-arrive 480ms ease-out 3.05s forwards;
}
/* * Center becomes fully visible during the journey. */
.ng-over-cycle.is-in-view .ng-over-cycle-center {
animation: ng-over-cycle-center-in 600ms ease 650ms forwards;
}
/* KEYFRAMES */
@keyframes ng-over-cycle-draw {
from {
stroke-dashoffset: 100;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes ng-over-cycle-node-arrive {
0% {
opacity: 0;
transform: scale(0.3);
}
65% {
opacity: 1;
transform: scale(1.3);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes ng-over-cycle-copy-arrive {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ng-over-cycle-center-in {
from {
opacity: 0.55;
transform: translate(-50%, -50%) scale(0.94);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
/* MOBILE */
@media (max-width: 700px) {
/* * On mobile we switch to a vertical journey. * Trying to squeeze the orbit around text would be messy. */
.ng-over-cycle {
min-height: 0;
display: flex;
flex-direction: column;
gap: 2rem;
}
.ng-over-cycle-visual {
position: relative;
top: auto;
left: auto;
width: min(100%, 310px);
margin: 1rem auto;
order: 3;
transform: none;
}
.ng-over-cycle-step {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: 100%;
text-align: left;
}
.ng-over-cycle-step--1 {
order: 1;
}
.ng-over-cycle-step--2 {
order: 2;
}
.ng-over-cycle-step--3 {
order: 4;
}
.ng-over-cycle-step--4 {
order: 5;
}
.ng-over-cycle-step p, .ng-over-cycle-step--1 p, .ng-over-cycle-step--4 p {
max-width: 500px;
margin-left: 0;
}
}
/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
.ng-over-cycle-route {
stroke-dashoffset: 0 !important;
animation: none !important;
}
.ng-over-cycle-step, .ng-over-cycle-node, .ng-over-cycle-center {
opacity: 1 !important;
animation: none !important;
transform: none;
}
.ng-over-cycle-center {
transform: translate(-50%, -50%);
}
}
/* Start with absolutely no circle */
.ng-over-cycle.is-animatable .ng-over-cycle-guide {
opacity: 0;
}
/* We don't actually need the guide during the reveal */
.ng-over-cycle.is-in-view .ng-over-cycle-guide {
opacity: 0;
}
/* OVER NOORDGROEIT — IDEA CTA */
.ng-over-idea-cta {
position: relative;
padding: clamp(4.5rem, 6vw, 5.75rem) 0;
overflow: hidden;
background: var(--color-green-light);
color: var(--color-dark);
}
/* quiet decorative circle */
.ng-over-idea-cta::after {
content: "";
position: absolute;
top: 50%;
right: -95px;
width: 230px;
height: 230px;
border: 44px solid rgba(47, 72, 55, 0.045);
border-radius: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* LAYOUT */
.ng-over-idea-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
}
/* COPY */
.ng-over-idea-copy {
max-width: 720px;
}
.ng-over-idea-kicker {
margin: 0 0 1.1rem;
color: var(--color-coral);
font-size: 0.74rem;
font-weight: 850;
line-height: 1.3;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.ng-over-idea-copy h2 {
max-width: 670px;
margin: 0 0 1.4rem;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: 0.97;
letter-spacing: -0.052em;
}
.ng-over-idea-copy > p:last-child {
max-width: 590px;
margin: 0;
color: rgba(46, 59, 50, 0.7);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* ACTION */
.ng-over-idea-action {
position: relative;
min-width: 245px;
padding-top: 2.3rem;
}
/* homepage-style CTA control */
/* RESPONSIVE */
@media (max-width: 760px) {
.ng-over-idea-layout {
grid-template-columns: 1fr;
align-items: start;
gap: 2.5rem;
}
.ng-over-idea-action {
min-width: 0;
width: fit-content;
}
}
@media (max-width: 520px) {
.ng-over-idea-cta {
padding: 4rem 0;
}
.ng-over-idea-action {
width: 100%;
}
}
/* OVER NOORDGROEIT — CTA FINAL BALANCE */
body .ng-over-idea-cta {
padding: clamp(4rem, 5.5vw, 5rem) 0;
}
/* Bring both sides into one stronger composition */
body .ng-over-idea-layout {
grid-template-columns: minmax(0, 1fr) minmax(240px, 0.42fr);
align-items: center;
gap: clamp(3rem, 7vw, 6.5rem);
}
/* Headline slightly more controlled */
body .ng-over-idea-copy h2 {
max-width: 650px;
}
/* Keep the action closer to the text */
body .ng-over-idea-action {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-width: 0;
padding-top: 0;
}
/* Annotation should feel attached to the button */
/* Slightly stronger CTA presence */
/* Decorative circle a little quieter */
body .ng-over-idea-cta::after {
right: -115px;
width: 215px;
height: 215px;
border-width: 38px;
opacity: 0.75;
}
@media (max-width: 760px) {
body .ng-over-idea-layout {
grid-template-columns: 1fr;
align-items: start;
gap: 2.5rem;
}
body .ng-over-idea-action {
width: fit-content;
}
}
/* TEAM & BESTUUR — HERO */
.ng-team-page {
background: var(--color-cream);
}
.ng-team-hero {
position: relative;
padding: clamp(5rem, 7vw, 6.75rem) 0 clamp(3.75rem, 5vw, 4.75rem);
overflow: hidden;
background: var(--color-cream);
color: var(--color-dark);
}
/* quiet page detail */
.ng-team-hero::before {
content: "";
position: absolute;
top: 50%;
right: -170px;
width: 330px;
height: 330px;
border: 56px solid rgba(47, 72, 55, 0.04);
border-radius: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* LAYOUT */
.ng-team-hero-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(330px, 0.58fr);
align-items: center;
gap: clamp(4rem, 9vw, 9rem);
}
/* COPY */
.ng-team-hero-copy {
max-width: 700px;
}
.ng-team-hero-kicker {
position: relative;
width: fit-content;
margin: 0 0 1.2rem;
padding-left: 1.1rem;
color: var(--color-coral);
font-size: 0.74rem;
font-weight: 850;
line-height: 1.3;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.ng-team-hero-kicker::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 6px;
height: 6px;
background: var(--color-coral);
border-radius: 50%;
transform: translateY(-50%);
box-shadow: 0 0 0 4px rgba(240, 102, 83, 0.1);
}
/* same typography language as homepage */
.ng-team-hero h1 {
max-width: 660px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: 0.97;
letter-spacing: -0.052em;
}
.ng-team-hero h1 span {
display: block;
color: var(--color-green);
}
.ng-team-hero-intro {
max-width: 560px;
margin: 1.6rem 0 0;
color: rgba(46, 59, 50, 0.7);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* PEOPLE VISUAL */
.ng-team-hero-visual {
position: relative;
justify-self: end;
width: min(100%, 360px);
}
.ng-team-hero-orbit {
position: relative;
width: 100%;
aspect-ratio: 1;
border: 1px solid rgba(46, 59, 50, 0.12);
border-radius: 50%;
}
/* inner orbit */
.ng-team-hero-orbit::before {
content: "";
position: absolute;
inset: 17%;
border: 1px dashed rgba(46, 59, 50, 0.11);
border-radius: 50%;
}
/* PEOPLE NODES */
.ng-team-person {
position: absolute;
width: 54px;
height: 54px;
display: grid;
place-items: center;
background: var(--color-green-light);
border: 8px solid var(--color-cream);
border-radius: 50%;
box-shadow: 0 8px 22px rgba(41, 56, 47, 0.08);
}
.ng-team-person i {
position: relative;
width: 18px;
height: 18px;
background: var(--color-green);
border-radius: 50% 50% 45% 45%;
}
/* simple head */
.ng-team-person i::before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 10px;
height: 10px;
background: var(--color-green);
border-radius: 50%;
transform: translateX(-50%);
}
.ng-team-person--1 {
top: -7px;
left: 50%;
transform: translateX(-50%);
}
.ng-team-person--2 {
top: 50%;
right: -7px;
transform: translateY(-50%);
}
.ng-team-person--3 {
bottom: -7px;
left: 50%;
transform: translateX(-50%);
}
.ng-team-person--4 {
top: 50%;
left: -7px;
transform: translateY(-50%);
}
/* alternating coral detail */
.ng-team-person--2, .ng-team-person--4 {
background: #f6d7cd;
}
.ng-team-person--2 i, .ng-team-person--4 i, .ng-team-person--2 i::before, .ng-team-person--4 i::before {
background: var(--color-coral);
}
/* CENTER MESSAGE */
.ng-team-hero-center {
position: absolute;
top: 50%;
left: 50%;
width: 126px;
height: 126px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--color-dark);
border-radius: 50%;
color: var(--color-white);
text-align: center;
transform: translate(-50%, -50%);
}
.ng-team-hero-center span {
color: rgba(255, 255, 255, 0.58);
font-size: 0.7rem;
font-weight: 700;
}
.ng-team-hero-center strong {
margin-top: 0.15rem;
font-size: 1rem;
font-weight: 800;
}
/* NOTE */
.ng-team-hero-note {
margin: 0.9rem 0 0;
color: rgba(46, 59, 50, 0.48);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.1em;
text-align: center;
text-transform: uppercase;
}
/* FOOTER DETAIL */
.ng-team-hero-footer {
display: flex;
align-items: center;
gap: 0.9rem;
margin-top: clamp(3rem, 5vw, 4rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46, 59, 50, 0.12);
}
.ng-team-hero-footer > span {
position: relative;
width: 42px;
height: 1px;
background: rgba(46, 59, 50, 0.2);
}
.ng-team-hero-footer > span::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 6px;
height: 6px;
background: var(--color-coral);
border-radius: 50%;
transform: translateY(-50%);
}
.ng-team-hero-footer p {
margin: 0;
color: rgba(46, 59, 50, 0.54);
font-size: 0.7rem;
font-weight: 750;
letter-spacing: 0.04em;
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-team-hero-layout {
grid-template-columns: minmax(0, 1fr) minmax(270px, 0.52fr);
gap: 3rem;
}
.ng-team-hero-visual {
width: min(100%, 310px);
}
}
@media (max-width: 650px) {
.ng-team-hero {
padding: 4rem 0 3.5rem;
}
.ng-team-hero-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.ng-team-hero-visual {
width: min(90%, 330px);
justify-self: center;
}
.ng-team-hero-footer {
margin-top: 3rem;
}
}
/* TEAM & BESTUUR — PEOPLE */
/* INTRO */
/* GROUP */
/* GROUP LABEL */
/* PEOPLE */
/* INITIALS */
/* NAME */
/* DESCRIPTION */
/* END NOTE */
/* RESPONSIVE */
/* TEAM & BESTUUR — HOE WE SAMENWERKEN */
/* quiet NoordgroeiT circle detail */
/* HEADING */
/* ROLE FLOW */
/* EACH ROLE */
/* ARROWS */
/* CLOSING DETAIL */
/* TABLET */
/* TEAM & BESTUUR — JOIN CTA */
/* subtle decorative detail */
/* LAYOUT */
/* COPY */
/* ACTION */
/* RESPONSIVE */
/* FINANCIËN & TRANSPARANTIE — HERO */
.ng-transparency-page {
background: var(--color-cream);
}
/* quiet geometric detail */
/* LAYOUT */
/* COPY */
/* FOUNDATION FACT PANEL */
/* tiny coral handmade mark */
/* PANEL TOP */
/* FACTS */
/* PANEL NOTE */
/* BOTTOM ROUTE */
/* RESPONSIVE */
/* FINANCIËN & TRANSPARANTIE — MONEY FLOW */
/* HEADING */
/* ROUTE */
/* * continuous vertical line */
/* STEP */
/* MARKER */
/* CONTENT */
/* BOTTOM NOTE */
/* RESPONSIVE */
/* FINANCIËN & TRANSPARANTIE — DOCUMENTEN */
/* HEADING */
/* LIST */
/* YEAR LABEL */
/* DOCUMENT ROW */
/* DOCUMENT COPY */
/* META / BUTTON */
/* CONTACT NOTE */
/* RESPONSIVE */
/* FINANCIËN & TRANSPARANTIE — VERANTWOORDELIJKHEID */
.ng-finance-responsibility {
position: relative;
padding: clamp(4.75rem, 7vw, 6.5rem) 0;
overflow: hidden;
background: var(--color-dark);
color: var(--color-white);
}
/* quiet decorative circle */
.ng-finance-responsibility::after {
content: "";
position: absolute;
right: -150px;
bottom: -185px;
width: 360px;
height: 360px;
border: 70px solid rgba(220, 234, 215, 0.04);
border-radius: 50%;
pointer-events: none;
}
/* HEADING */
.ng-finance-responsibility-heading {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr);
align-items: end;
gap: clamp(3rem, 7vw, 7rem);
margin-bottom: clamp(3.5rem, 6vw, 5rem);
}
.ng-finance-responsibility-kicker {
margin: 0 0 1.15rem;
color: #f6a390;
font-size: 0.74rem;
font-weight: 850;
line-height: 1.3;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.ng-finance-responsibility-heading h2 {
max-width: 700px;
margin: 0;
color: var(--color-white);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: 0.97;
letter-spacing: -0.052em;
}
.ng-finance-responsibility-heading h2 span {
display: block;
color: #dcead7;
}
.ng-finance-responsibility-heading > p {
max-width: 440px;
margin: 0;
color: rgba(255, 255, 255, 0.66);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* THREE COLUMN LAYOUT */
/* ITEMS */
/* TOP DETAILS */
/* FRED INITIAL */
/* small marker other columns */
/* COPY */
/* FOOTER LINK */
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-finance-responsibility-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-finance-responsibility-heading > p {
max-width: 600px;
}
}
@media (max-width: 600px) {
.ng-finance-responsibility {
padding: 4rem 0;
}
}
/* FINANCIËN & TRANSPARANTIE — CONTACT CTA */
/* quiet decorative circle */
/* LAYOUT */
/* COPY */
/* ACTION */
/* RESPONSIVE */
/* OVER NOORDGROEIT — STORY BRANDING POLISH */
/* Back to our normal section-kicker language */
body .ng-over-story-v3-badge {
width: auto;
margin: 0 0 1.15rem;
padding: 0;
color: var(--color-coral);
background: transparent;
border-radius: 0;
font-size: 0.74rem;
font-weight: 850;
line-height: 1.3;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* Normal heading colour */
body .ng-over-story-v3-heading h2 {
color: var(--color-dark);
}
/* * Kill the old rule that made the entire * second part of the heading green. */
body .ng-over-story-v3-heading h2 span {
color: inherit;
}
/* Reusable NoordgroeiT branding */
body .ng-brand-word {
color: var(--color-green) !important;
}
/* OVER NOORDGROEIT — CTA REDESIGN */
/* Kill old pill styling */
body .ng-over-idea-action {
position: relative;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: clamp(1.5rem, 3vw, 2.8rem);
padding: 0;
}
/* LITTLE JOURNEY INTO THE CTA */
.ng-over-idea-route {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 125px;
}
.ng-over-idea-route-dot {
width: 7px;
height: 7px;
margin-right: 2px;
margin-bottom: 0.8rem;
background: var(--color-coral);
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(240, 102, 83, 0.1);
}
.ng-over-idea-route p {
margin: 0;
color: rgba(46, 59, 50, 0.52);
font-size: 0.7rem;
font-weight: 700;
line-height: 1.45;
text-align: right;
}
.ng-over-idea-route p strong {
display: block;
color: var(--color-dark);
font-weight: 850;
}
.ng-over-idea-route-line {
width: 72px;
height: 1px;
margin-top: 1rem;
background: linear-gradient(to right, rgba(46, 59, 50, 0.12), var(--color-coral));
}
/* BIG ACTION CIRCLE */
.ng-over-idea-circle {
position: relative;
width: clamp(180px, 15vw, 215px);
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 1.5rem;
overflow: hidden;
color: var(--color-white);
background: var(--color-coral);
border-radius: 50%;
text-align: center;
text-decoration: none;
transition: transform 260ms cubic-bezier(.2,.75,.25,1), box-shadow 260ms ease;
}
/* subtle inner ring */
.ng-over-idea-circle::before {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 50%;
pointer-events: none;
}
/* quiet rotating outer detail */
.ng-over-idea-circle::after {
content: "";
position: absolute;
top: 18px;
right: 26px;
width: 7px;
height: 7px;
background: var(--color-white);
border-radius: 50%;
opacity: 0.85;
}
.ng-over-idea-circle-small {
position: relative;
z-index: 2;
margin-bottom: 0.55rem;
color: rgba(255, 255, 255, 0.68);
font-size: 0.63rem;
font-weight: 850;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.ng-over-idea-circle strong {
position: relative;
z-index: 2;
color: var(--color-white);
font-size: clamp(1.25rem, 1.55vw, 1.5rem);
font-weight: 800;
line-height: 1.02;
letter-spacing: -0.035em;
}
.ng-over-idea-circle-arrow {
position: absolute;
right: 27px;
bottom: 26px;
width: 34px;
height: 34px;
display: grid;
place-items: center;
color: var(--color-coral);
background: var(--color-white);
border-radius: 50%;
font-size: 0.8rem;
transition: transform 220ms ease;
}
/* INTERACTION */
.ng-over-idea-circle:hover, .ng-over-idea-circle:focus-visible {
color: var(--color-white);
transform: translateY(-4px) rotate(1deg);
box-shadow: 0 16px 35px rgba(46, 59, 50, 0.14);
}
.ng-over-idea-circle:hover .ng-over-idea-circle-arrow, .ng-over-idea-circle:focus-visible .ng-over-idea-circle-arrow {
transform: translate(3px, -3px);
}
/* RESPONSIVE */
@media (max-width: 760px) {
body .ng-over-idea-action {
justify-content: flex-start;
}
}
@media (max-width: 520px) {
body .ng-over-idea-action {
align-items: center;
gap: 1.3rem;
}
.ng-over-idea-route {
width: 100px;
}
.ng-over-idea-circle {
width: 170px;
}
}
/* TEAM & BESTUUR — PEOPLE COLLAGE */
.ng-team-people-v2 {
position: relative;
padding: clamp(4.75rem, 7vw, 6.5rem) 0;
overflow: hidden;
background: #fffdfa;
color: var(--color-dark);
}
/* HEADING */
.ng-team-people-v2-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.45fr);
align-items: end;
gap: clamp(3rem, 7vw, 7rem);
margin-bottom: clamp(3.5rem, 6vw, 5rem);
}
.ng-team-people-v2-kicker {
margin: 0 0 1.15rem;
color: var(--color-coral);
font-size: 0.74rem;
font-weight: 850;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.ng-team-people-v2-heading h2 {
max-width: 690px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: 0.97;
letter-spacing: -0.052em;
}
/* ONLY ONE WORD */
.ng-team-people-v2-heading h2 > span {
color: var(--color-green);
}
.ng-team-people-v2-heading > p {
max-width: 450px;
margin: 0;
color: rgba(46, 59, 50, 0.68);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* COLLAGE */
.ng-team-people-v2-grid {
display: grid;
grid-template-columns: 1.08fr 0.92fr;
gap: clamp(1.2rem, 2vw, 1.8rem);
align-items: stretch;
}
/* PROFILE */
.ng-team-profile {
position: relative;
min-height: 290px;
display: grid;
grid-template-columns: minmax(145px, 0.42fr) minmax(0, 1fr);
overflow: hidden;
background: var(--color-cream);
border: 1px solid rgba(46, 59, 50, 0.1);
border-radius: 1.8rem 0.5rem 1.8rem 1.8rem;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.ng-team-profile:nth-child(2) {
border-radius: 0.5rem 1.8rem 1.8rem 1.8rem;
}
.ng-team-profile:nth-child(3) {
border-radius: 1.8rem 1.8rem 0.5rem 1.8rem;
}
.ng-team-profile:nth-child(4) {
border-radius: 1.8rem 1.8rem 1.8rem 0.5rem;
}
.ng-team-profile:hover {
transform: translateY(-4px);
box-shadow: 0 14px 34px rgba(46, 59, 50, 0.08);
}
/* LARGE LEAD PROFILE */
/* PORTRAIT AREA */
.ng-team-profile-portrait {
position: relative;
min-height: 100%;
display: grid;
place-items: center;
overflow: hidden;
background: linear-gradient(145deg, var(--color-green-light), #d4e4cf);
}
/* subtle visual ring */
.ng-team-profile-portrait::before {
content: "";
position: absolute;
width: 150px;
height: 150px;
border: 1px solid rgba(47, 72, 55, 0.12);
border-radius: 50%;
}
.ng-team-profile-portrait::after {
content: "";
position: absolute;
top: 22px;
right: 22px;
width: 8px;
height: 8px;
background: var(--color-coral);
border-radius: 50%;
}
/* INITIALS — FALLBACK WHEN NO PHOTO IS AVAILABLE */
.ng-team-profile-initials {
position: relative;
z-index: 2;
width: 96px;
height: 96px;
display: grid;
place-items: center;
color: var(--color-green);
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 50% 50% 22% 50%;
font-size: 1rem;
font-weight: 850;
letter-spacing: 0.06em;
}
.ng-team-profile-photo-note {
position: absolute;
left: 20px;
bottom: 18px;
color: rgba(46, 59, 50, 0.42);
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
/* CORAL VARIANT */
.ng-team-profile--coral .ng-team-profile-portrait {
background: linear-gradient(145deg, #f7ddd5, #f4cfc5);
}
.ng-team-profile--coral .ng-team-profile-initials {
color: var(--color-coral);
}
/* COPY */
.ng-team-profile-copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(1.7rem, 3vw, 2.5rem);
}
.ng-team-profile-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.4rem;
}
.ng-team-profile-top > span {
color: var(--color-coral);
font-size: 0.64rem;
font-weight: 850;
letter-spacing: 0.12em;
}
.ng-team-profile-top p {
margin: 0;
color: rgba(46, 59, 50, 0.44);
font-size: 0.62rem;
font-weight: 850;
letter-spacing: 0.11em;
text-align: right;
text-transform: uppercase;
}
.ng-team-profile h3 {
margin: 0 0 0.75rem;
color: var(--color-dark);
font-size: clamp(1.4rem, 2vw, 1.8rem);
font-weight: 750;
line-height: 1.05;
letter-spacing: -0.035em;
}
.ng-team-profile-copy > p {
max-width: 390px;
margin: 0;
color: rgba(46, 59, 50, 0.63);
font-size: 0.88rem;
line-height: 1.64;
}
/* FOOTER */
.ng-team-people-v2-footer {
display: flex;
align-items: center;
gap: 0.9rem;
margin-top: clamp(2.5rem, 4vw, 3.5rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46, 59, 50, 0.1);
}
.ng-team-people-v2-footer > span {
width: 7px;
height: 7px;
flex: 0 0 auto;
background: var(--color-coral);
border-radius: 50%;
}
.ng-team-people-v2-footer p {
margin: 0;
color: rgba(46, 59, 50, 0.5);
font-size: 0.72rem;
font-weight: 700;
}
/* REAL PHOTOS LATER */
/* When we have portraits, replace initials markup with: 
*/
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-team-people-v2-grid {
grid-template-columns: 1fr;
}
.ng-team-profile {
min-height: 280px;
grid-template-columns: minmax(150px, 0.38fr) minmax(0, 1fr);
}
}
@media (max-width: 760px) {
.ng-team-people-v2-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 560px) {
.ng-team-profile {
grid-template-columns: 1fr;
}
.ng-team-profile-portrait {
min-height: 230px;
}
}
/* TEAM & BESTUUR — VISUAL COLLABORATION FLOW */
.ng-team-collab {
position: relative;
padding: clamp(5rem, 7vw, 6.5rem) 0;
overflow: hidden;
background: var(--color-dark);
color: var(--color-white);
}
/* subtle background echo */
.ng-team-collab::after {
content: "";
position: absolute;
right: -170px;
bottom: -190px;
width: 370px;
height: 370px;
border: 70px solid rgba(220, 234, 215, 0.035);
border-radius: 50%;
pointer-events: none;
}
/* HEADING */
.ng-team-collab-heading {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.44fr);
align-items: end;
gap: clamp(3rem, 7vw, 7rem);
margin-bottom: clamp(4rem, 7vw, 6rem);
}
.ng-team-collab-kicker {
margin: 0 0 1.15rem;
color: #f6a390;
font-size: 0.74rem;
font-weight: 850;
line-height: 1.3;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.ng-team-collab-heading h2 {
max-width: 720px;
margin: 0;
color: var(--color-white);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: 0.97;
letter-spacing: -0.052em;
}
/* ONLY NOORDGROEIT IS GREEN */
.ng-team-collab-heading .ng-brand-word {
color: #c7dfbe !important;
}
.ng-team-collab-heading > p {
max-width: 440px;
margin: 0;
color: rgba(255, 255, 255, 0.64);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* VISUAL FLOW */
/* FLOWING SVG LINE */
/* STATIONS */
/* LARGE VISUAL ICON */
/* COPY */
/* CLOSING LINE */
.ng-team-collab-end {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 0.9rem;
margin-top: 1.5rem;
padding-top: 1.3rem;
border-top: 1px solid rgba(255, 255, 255, 0.11);
}
.ng-team-collab-end > span {
width: 7px;
height: 7px;
background: var(--color-coral);
border-radius: 50%;
}
.ng-team-collab-end p {
margin: 0;
color: rgba(255, 255, 255, 0.48);
font-size: 0.72rem;
font-weight: 700;
}
/* ANIMATION */
/* middle already uses translateX */
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-team-collab-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* TEAM — CLEAN COLLABORATION TRACK */
.ng-team-collab-track {
position: relative;
width: min(100%, 1080px);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(3rem, 7vw, 6rem);
margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
padding-top: 1rem;
}
/* ROUTE */
.ng-team-collab-track-line {
position: absolute;
top: 17px;
left: 0;
width: 100%;
height: 120px;
pointer-events: none;
}
.ng-team-collab-track-guide, .ng-team-collab-track-live {
fill: none;
stroke-linecap: round;
}
.ng-team-collab-track-guide {
stroke: rgba(255,255,255,.09);
stroke-width: 1.2;
}
.ng-team-collab-track-live {
stroke: var(--color-coral);
stroke-width: 1.8;
}
/* STATIONS */
.ng-team-collab-station {
position: relative;
z-index: 2;
min-width: 0;
}
/* slight controlled variation */
.ng-team-collab-station--2 {
padding-top: 24px;
}
/* NODE */
.ng-team-collab-node {
position: relative;
width: 86px;
height: 86px;
display: grid;
place-items: center;
margin-bottom: 1.8rem;
color: var(--color-coral);
background: var(--color-dark);
border: 1px solid rgba(255,255,255,.14);
border-radius: 50% 50% 22% 50%;
box-shadow: 0 0 0 10px var(--color-dark);
}
/* little coral connection point */
.ng-team-collab-node::after {
content: "";
position: absolute;
top: -5px;
right: -4px;
width: 9px;
height: 9px;
background: var(--color-coral);
border: 4px solid var(--color-dark);
border-radius: 50%;
}
.ng-team-collab-node svg {
width: 38px;
height: 38px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* META */
.ng-team-collab-meta {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: .7rem;
}
.ng-team-collab-meta span {
color: var(--color-coral);
font-size: .64rem;
font-weight: 850;
letter-spacing: .12em;
}
.ng-team-collab-meta p {
margin: 0;
color: rgba(255,255,255,.42);
font-size: .64rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
/* COPY */
.ng-team-collab-station h3 {
max-width: 270px;
margin: 0 0 .75rem;
color: var(--color-white);
font-size: clamp(1.45rem, 1.9vw, 1.75rem);
font-weight: 750;
line-height: 1.04;
letter-spacing: -.035em;
}
.ng-team-collab-station-copy > p:last-child {
max-width: 280px;
margin: 0;
color: rgba(255,255,255,.58);
font-size: .88rem;
line-height: 1.62;
}
/* ANIMATION */
.ng-team-collab-track.is-animatable .ng-team-collab-track-live {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.ng-team-collab-track.is-animatable .ng-team-collab-station {
opacity: 0;
transform: translateY(10px);
}
.ng-team-collab-track.is-in-view .ng-team-collab-track-live {
animation: ng-team-track-draw 2.2s ease-in-out forwards;
}
.ng-team-collab-track.is-in-view .ng-team-collab-station--1 {
animation: ng-team-track-station .45s ease-out .1s forwards;
}
.ng-team-collab-track.is-in-view .ng-team-collab-station--2 {
animation: ng-team-track-station .45s ease-out .9s forwards;
}
.ng-team-collab-track.is-in-view .ng-team-collab-station--3 {
animation: ng-team-track-station .45s ease-out 1.7s forwards;
}
@keyframes ng-team-track-draw {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes ng-team-track-station {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* MOBILE */
@media (max-width: 760px) {
.ng-team-collab-track {
grid-template-columns: 1fr;
gap: 2.25rem;
}
.ng-team-collab-track-line {
display: none;
}
.ng-team-collab-station, .ng-team-collab-station--2 {
padding-top: 0;
}
.ng-team-collab-station {
display: grid;
grid-template-columns: 76px minmax(0,1fr);
gap: 1.4rem;
align-items: start;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.ng-team-collab-node {
width: 72px;
height: 72px;
margin: 0;
}
}
/* TEAM & BESTUUR — JOIN CTA V2 */
.ng-team-join-v2 {
position: relative;
padding: clamp(4.75rem, 7vw, 6rem) 0;
overflow: hidden;
background: var(--color-green-light);
color: var(--color-dark);
}
/* quiet page detail */
.ng-team-join-v2::after {
content: "";
position: absolute;
right: -120px;
bottom: -130px;
width: 250px;
height: 250px;
border: 45px solid rgba(46, 59, 50, 0.035);
border-radius: 50%;
pointer-events: none;
}
/* LAYOUT */
.ng-team-join-v2-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(390px, .72fr);
align-items: center;
gap: clamp(4rem, 9vw, 9rem);
}
/* COPY */
.ng-team-join-v2-copy {
max-width: 660px;
}
.ng-team-join-v2-kicker {
margin: 0 0 1.15rem;
color: var(--color-coral);
font-size: .74rem;
font-weight: 850;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-team-join-v2-copy h2 {
max-width: 640px;
margin: 0 0 1.4rem;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: .97;
letter-spacing: -.052em;
}
/* only NoordgroeiT is green */
.ng-team-join-v2-copy .ng-brand-word {
color: var(--color-green) !important;
}
.ng-team-join-v2-copy > p:last-child {
max-width: 540px;
margin: 0;
color: rgba(46, 59, 50, .67);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* VISUAL */
.ng-team-join-v2-visual {
position: relative;
width: min(100%, 420px);
aspect-ratio: 1.3;
justify-self: end;
}
/* connector lines */
.ng-team-join-v2-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.ng-team-join-v2-lines path {
fill: none;
stroke: rgba(240, 102, 83, .45);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 3 6;
}
/* OPTIONS */
.ng-team-join-v2-option {
position: absolute;
z-index: 2;
display: flex;
flex-direction: column;
padding: .9rem 1rem;
background: rgba(255,255,255,.48);
border: 1px solid rgba(46,59,50,.1);
backdrop-filter: blur(5px);
}
.ng-team-join-v2-option--1 {
top: 8px;
left: 0;
border-radius: 1rem 1rem .3rem 1rem;
}
.ng-team-join-v2-option--2 {
top: 18px;
right: 0;
border-radius: 1rem .3rem 1rem 1rem;
}
.ng-team-join-v2-option--3 {
left: 20px;
bottom: 5px;
border-radius: .3rem 1rem 1rem 1rem;
}
.ng-team-join-v2-option > span {
margin-bottom: .4rem;
color: var(--color-coral);
font-size: .6rem;
font-weight: 850;
letter-spacing: .12em;
}
.ng-team-join-v2-option strong {
color: var(--color-dark);
font-size: .86rem;
font-weight: 800;
line-height: 1.1;
}
.ng-team-join-v2-option small {
margin-top: .2rem;
color: rgba(46,59,50,.43);
font-size: .59rem;
font-weight: 750;
}
/* CENTRAL CTA */
.ng-team-join-v2-center {
position: absolute;
top: 50%;
left: 54%;
width: clamp(145px, 12vw, 170px);
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
color: var(--color-white);
background: var(--color-coral);
border-radius: 50% 50% 24% 50%;
text-align: center;
text-decoration: none;
transform: translate(-50%, -50%);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.ng-team-join-v2-center::before {
content: "";
position: absolute;
inset: 9px;
border: 1px solid rgba(255,255,255,.28);
border-radius: inherit;
}
.ng-team-join-v2-center > span {
position: relative;
color: rgba(255,255,255,.68);
font-size: .62rem;
font-weight: 750;
}
.ng-team-join-v2-center strong {
position: relative;
margin-top: .2rem;
color: var(--color-white);
font-size: 1.05rem;
font-weight: 850;
line-height: 1.05;
}
.ng-team-join-v2-center i {
position: absolute;
right: 18px;
bottom: 17px;
width: 30px;
height: 30px;
display: grid;
place-items: center;
color: var(--color-coral);
background: var(--color-white);
border-radius: 50%;
font-size: .72rem;
font-style: normal;
transition: transform 180ms ease;
}
.ng-team-join-v2-center:hover, .ng-team-join-v2-center:focus-visible {
color: var(--color-white);
transform: translate(-50%, -50%) translateY(-4px) rotate(1deg);
box-shadow: 0 15px 32px rgba(46,59,50,.13);
}
.ng-team-join-v2-center:hover i {
transform: translate(2px,-2px);
}
/* BOTTOM DETAIL */
.ng-team-join-v2-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: .9rem;
margin-top: clamp(3rem, 5vw, 4rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-team-join-v2-bottom > span {
width: 7px;
height: 7px;
background: var(--color-coral);
border-radius: 50%;
}
.ng-team-join-v2-bottom p {
margin: 0;
color: rgba(46,59,50,.5);
font-size: .72rem;
font-weight: 700;
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-team-join-v2-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-team-join-v2-visual {
width: min(100%, 420px);
justify-self: center;
}
}
@media (max-width: 520px) {
.ng-team-join-v2 {
padding: 4rem 0;
}
.ng-team-join-v2-visual {
width: 100%;
min-height: 350px;
}
.ng-team-join-v2-option {
padding: .75rem .8rem;
}
.ng-team-join-v2-center {
left: 52%;
width: 145px;
}
}
/* INITIATIEVEN — HERO V2 */
/* quiet big background echo */
/* LAYOUT */
/* COPY */
/* only ONE intentional word */
/* HERO BUTTON */
/* COLLAGE */
/* NOORDBUITEN PHOTO */
/* slight photo fade */
/* TALK CARD */
/* speech bubble tail */
/* TALK ICON */
/* FLOATING NOTE */
/* ROUTE */
/* BOTTOM THEMES */
/* RESPONSIVE */
/* INITIATIEVEN — PHOTO HERO */
/* IMAGE */
/* OVERLAY */
/* CONTAINER */
/* COPY */
/* only one highlighted word */
/* NoordgroeiT still gets brand treatment */
/* BUTTON */
/* SCROLL MARK */
/* RESPONSIVE */
/* INNER PAGE HERO KICKER — Same visual language as Over NoordgroeiT */
/* coral dot */
/* FINANCIËN & TRANSPARANTIE — HERO V2 */
.ng-finance-hero-v2 {
position: relative;
padding: clamp(5rem, 7vw, 6.75rem) 0 clamp(3.5rem, 5vw, 4.5rem);
overflow: hidden;
background: var(--color-cream);
color: var(--color-dark);
}
/* subtle house-style circle */
.ng-finance-hero-v2::after {
content: "";
position: absolute;
top: -150px;
right: -135px;
width: 330px;
height: 330px;
border: 62px solid rgba(46,59,50,.035);
border-radius: 50%;
pointer-events: none;
}
/* LAYOUT */
.ng-finance-hero-v2-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(390px, .66fr);
align-items: center;
gap: clamp(4rem, 9vw, 9rem);
}
/* COPY */
.ng-finance-hero-v2-copy {
max-width: 720px;
}
.ng-finance-hero-v2-kicker {
position: relative;
width: fit-content;
margin: 0 0 1.15rem;
padding-left: 1.15rem;
color: var(--color-coral);
font-size: .74rem;
font-weight: 850;
line-height: 1.3;
letter-spacing: .15em;
text-transform: uppercase;
}
/* same coral-dot language */
.ng-finance-hero-v2-kicker::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 6px;
height: 6px;
background: var(--color-coral);
border-radius: 50%;
transform: translateY(-50%);
box-shadow: 0 0 0 4px rgba(240,102,83,.11);
}
.ng-finance-hero-v2 h1 {
max-width: 700px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: .97;
letter-spacing: -.052em;
}
/* only one word */
.ng-finance-hero-v2 h1 > span {
color: var(--color-green);
}
.ng-finance-hero-v2-intro {
max-width: 560px;
margin: 1.55rem 0 0;
color: rgba(46,59,50,.68);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* BUTTON */
.ng-finance-hero-v2-button {
width: fit-content;
min-height: 50px;
display: inline-flex;
align-items: center;
gap: 1rem;
margin-top: 1.8rem;
padding: .35rem .4rem .35rem 1.15rem;
color: var(--color-dark);
border: 1px solid rgba(46,59,50,.16);
border-radius: 999px;
font-size: .78rem;
font-weight: 800;
text-decoration: none;
transition: transform 180ms ease, border-color 180ms ease;
}
.ng-finance-hero-v2-button-arrow {
width: 2.3rem;
height: 2.3rem;
display: grid;
place-items: center;
color: var(--color-white);
background: var(--color-coral);
border-radius: 50%;
transition: transform 180ms ease;
}
.ng-finance-hero-v2-button:hover {
color: var(--color-dark);
transform: translateY(-2px);
border-color: rgba(46,59,50,.3);
}
.ng-finance-hero-v2-button:hover .ng-finance-hero-v2-button-arrow {
transform: translateY(2px);
}
/* DOSSIER VISUAL */
.ng-finance-dossier {
position: relative;
width: min(100%, 410px);
height: 360px;
justify-self: end;
}
/* PAPERS */
.ng-finance-paper {
position: absolute;
width: 285px;
height: 245px;
padding: 1.6rem;
background: #fffdfa;
border: 1px solid rgba(46,59,50,.1);
box-shadow: 0 12px 30px rgba(46,59,50,.06);
}
.ng-finance-paper--back {
top: 20px;
left: 15px;
transform: rotate(-7deg);
border-radius: 1rem .3rem 1rem 1rem;
}
.ng-finance-paper--middle {
top: 12px;
right: 10px;
transform: rotate(6deg);
border-radius: .3rem 1rem 1rem 1rem;
}
/* PAPER DETAILS */
.ng-finance-paper-tab {
display: inline-block;
margin-bottom: 2rem;
color: var(--color-coral);
font-size: .6rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-finance-paper-line {
display: block;
width: 100%;
height: 1px;
margin-bottom: .85rem;
background: rgba(46,59,50,.13);
}
.ng-finance-paper-line--short {
width: 62%;
}
.ng-finance-paper-check {
display: flex;
align-items: center;
gap: .6rem;
margin-bottom: .8rem;
color: rgba(46,59,50,.53);
font-size: .68rem;
font-weight: 700;
}
.ng-finance-paper-check i {
width: 22px;
height: 22px;
display: grid;
place-items: center;
color: var(--color-coral);
border: 1px solid rgba(240,102,83,.3);
border-radius: 50%;
font-size: .62rem;
font-style: normal;
}
/* FRONT DOSSIER */
.ng-finance-dossier-front {
position: absolute;
z-index: 3;
top: 60px;
left: 50%;
width: 300px;
padding: 1.8rem 1.8rem 1.5rem;
color: var(--color-white);
background: var(--color-dark);
border-radius: 1.4rem 1.4rem .4rem 1.4rem;
transform: translateX(-50%) rotate(-1deg);
box-shadow: 0 20px 45px rgba(46,59,50,.16);
}
/* coral bookmark */
.ng-finance-dossier-front::before {
content: "";
position: absolute;
top: -5px;
left: 30px;
width: 46px;
height: 5px;
background: var(--color-coral);
border-radius: 999px;
}
/* DOSSIER TOP */
.ng-finance-dossier-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
}
.ng-finance-dossier-top p {
margin: 0;
color: rgba(255,255,255,.5);
font-size: .61rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-finance-dossier-top strong {
display: block;
margin-top: .15rem;
color: #dcead7;
font-size: .75rem;
}
.ng-finance-dossier-top > span {
width: 31px;
height: 31px;
display: grid;
place-items: center;
color: var(--color-coral);
border: 1px solid rgba(240,102,83,.3);
border-radius: 50%;
font-size: .7rem;
}
/* FACTS */
.ng-finance-dossier-front dl {
margin: 0;
}
.ng-finance-dossier-front dl > div {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 1rem;
padding: .85rem 0;
border-top: 1px solid rgba(255,255,255,.1);
}
.ng-finance-dossier-front dt {
color: rgba(255,255,255,.43);
font-size: .65rem;
font-weight: 700;
}
.ng-finance-dossier-front dd {
margin: 0;
color: var(--color-white);
font-size: .72rem;
font-weight: 800;
}
/* DOSSIER BOTTOM */
.ng-finance-dossier-bottom {
display: flex;
align-items: center;
gap: .7rem;
margin-top: 1.3rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,.1);
}
.ng-finance-dossier-bottom span {
width: 6px;
height: 6px;
background: var(--color-coral);
border-radius: 50%;
}
.ng-finance-dossier-bottom p {
margin: 0;
color: rgba(255,255,255,.42);
font-size: .58rem;
font-weight: 700;
}
/* ANNOTATION */
.ng-finance-dossier-note {
position: absolute;
z-index: 5;
right: -5px;
bottom: 8px;
display: flex;
align-items: flex-start;
gap: .6rem;
}
.ng-finance-dossier-note > span {
width: 7px;
height: 7px;
margin-top: .2rem;
background: var(--color-coral);
border-radius: 50%;
}
.ng-finance-dossier-note p {
margin: 0;
color: rgba(46,59,50,.48);
font-size: .61rem;
font-weight: 700;
line-height: 1.35;
}
.ng-finance-dossier-note strong {
display: block;
color: var(--color-dark);
font-weight: 850;
}
/* BOTTOM ROUTE */
.ng-finance-hero-v2-route {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: .7rem 1rem;
margin-top: clamp(3.5rem, 6vw, 5rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46,59,50,.11);
color: rgba(46,59,50,.48);
font-size: .64rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.ng-finance-hero-v2-route i {
color: var(--color-coral);
font-style: normal;
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-finance-hero-v2-layout {
grid-template-columns: 1fr;
gap: 4rem;
}
.ng-finance-dossier {
justify-self: center;
}
}
@media (max-width: 520px) {
.ng-finance-hero-v2 {
padding: 4rem 0 3rem;
}
.ng-finance-dossier {
width: 100%;
height: 330px;
}
.ng-finance-paper {
width: 235px;
}
.ng-finance-dossier-front {
width: min(88%, 290px);
}
}
/* FINANCE HERO — DOSSIER NEATNESS PASS */
/* Give the visual a cleaner working area */
body .ng-finance-dossier {
width: min(100%, 390px);
height: 350px;
display: flex;
justify-content: center;
justify-self: end;
}
/* BACK PAPERS */
body .ng-finance-paper {
width: 270px;
height: 225px;
padding: 1.45rem;
box-shadow: 0 10px 26px rgba(46, 59, 50, 0.055);
}
/* left/back sheet */
body .ng-finance-paper--back {
top: 34px;
left: 26px;
transform: rotate(-4deg);
opacity: 0.82;
}
/* right/back sheet */
body .ng-finance-paper--middle {
top: 26px;
right: 22px;
transform: rotate(4deg);
opacity: 0.92;
}
/* Keep their labels calmer */
body .ng-finance-paper-tab {
margin-bottom: 1.5rem;
font-size: 0.57rem;
letter-spacing: 0.14em;
}
/* MAIN GREEN DOCUMENT */
body .ng-finance-dossier-front {
top: 64px;
left: 50%;
width: 285px;
padding: 1.65rem 1.65rem 1.4rem;
transform: translateX(-50%);
border-radius: 1.25rem 1.25rem 0.4rem 1.25rem;
box-shadow: 0 18px 38px rgba(46, 59, 50, 0.14);
}
/* bookmark becomes a deliberate tab */
body .ng-finance-dossier-front::before {
top: -4px;
left: 28px;
width: 42px;
height: 4px;
}
/* TOP */
body .ng-finance-dossier-top {
margin-bottom: 1.6rem;
}
body .ng-finance-dossier-top > span {
width: 29px;
height: 29px;
}
/* FACT ROWS */
body .ng-finance-dossier-front dl > div {
padding: 0.75rem 0;
}
body .ng-finance-dossier-front dt {
font-size: 0.62rem;
}
body .ng-finance-dossier-front dd {
font-size: 0.7rem;
}
/* BOTTOM DETAIL */
body .ng-finance-dossier-bottom {
margin-top: 1rem;
padding-top: 0.9rem;
}
/* NOTE — NO LONGER FLOATING RANDOMLY */
body .ng-finance-dossier-note {
right: auto;
bottom: -3px;
left: 50%;
width: max-content;
align-items: center;
transform: translateX(-50%);
}
body .ng-finance-dossier-note > span {
margin-top: 0;
}
body .ng-finance-dossier-note p {
display: flex;
align-items: center;
gap: 0.3rem;
line-height: 1.2;
}
body .ng-finance-dossier-note strong {
display: inline;
}
/* TINY INTERACTION */
body .ng-finance-dossier-front, body .ng-finance-paper {
transition: transform 300ms cubic-bezier(.2,.75,.25,1);
}
body .ng-finance-dossier:hover .ng-finance-dossier-front {
transform: translateX(-50%) translateY(-4px);
}
body .ng-finance-dossier:hover .ng-finance-paper--back {
transform: translate(-4px, -2px) rotate(-5deg);
}
body .ng-finance-dossier:hover .ng-finance-paper--middle {
transform: translate(4px, -2px) rotate(5deg);
}
/* FINANCE HERO — SIZE + CLEANUP PASS */
/* Give the whole right visual a bit more room */
body .ng-finance-hero-v2-layout {
grid-template-columns: minmax(0, 1fr) minmax(440px, .78fr);
}
/* Make dossier area bigger */
body .ng-finance-dossier {
width: min(100%, 430px);
height: 390px;
}
/* Back papers slightly bigger too */
body .ng-finance-paper {
width: 295px;
height: 245px;
}
/* Reposition back sheets so they support the main card */
body .ng-finance-paper--back {
top: 38px;
left: 34px;
transform: rotate(-4deg);
}
body .ng-finance-paper--middle {
top: 18px;
right: 18px;
transform: rotate(4deg);
}
/* Main green file bigger */
body .ng-finance-dossier-front {
top: 56px;
left: 50%;
width: 320px;
padding: 1.85rem 1.8rem 1.5rem;
transform: translateX(-50%);
}
/* Slightly larger type inside so it scales with the bigger card */
body .ng-finance-dossier-top p {
font-size: 0.64rem;
}
body .ng-finance-dossier-top strong {
font-size: 0.82rem;
}
body .ng-finance-dossier-front dt {
font-size: 0.66rem;
}
body .ng-finance-dossier-front dd {
font-size: 0.78rem;
}
/* Clean up the little note under the file */
body .ng-finance-dossier-note {
position: absolute;
left: 50%;
bottom: -18px;
display: flex;
align-items: center;
justify-content: center;
width: max-content;
transform: translateX(-50%);
}
body .ng-finance-dossier-note p {
white-space: nowrap;
}
/* If you’d rather remove the note entirely, use this instead: body .ng-finance-dossier-note { display: none; } */
/* Prevent the hidden text from peeking out awkwardly */
body .ng-finance-dossier {
overflow: visible;
}
/* Mobile safety */
@media (max-width: 800px) {
body .ng-finance-hero-v2-layout {
grid-template-columns: 1fr;
}
body .ng-finance-dossier {
justify-self: center;
}
}
@media (max-width: 520px) {
body .ng-finance-dossier {
width: 100%;
height: 350px;
}
body .ng-finance-paper {
width: 250px;
height: 220px;
}
body .ng-finance-dossier-front {
width: min(92%, 310px);
}
body .ng-finance-dossier-note {
bottom: -10px;
}
}
/* FINANCIËN — VISUAL JOURNEY */
.ng-finance-journey {
position: relative;
padding: clamp(5rem, 7vw, 6.5rem) 0;
overflow: hidden;
background: #fffdfa;
color: var(--color-dark);
}
/* HEADING */
.ng-finance-journey-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .46fr);
align-items: end;
gap: clamp(3rem, 7vw, 7rem);
margin-bottom: clamp(4rem, 7vw, 5.5rem);
}
.ng-finance-journey-kicker {
margin: 0 0 1.15rem;
color: var(--color-coral);
font-size: .74rem;
font-weight: 850;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-finance-journey-heading h2 {
max-width: 690px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: .97;
letter-spacing: -.052em;
}
/* only one word */
.ng-finance-journey-heading h2 span {
color: var(--color-green);
}
.ng-finance-journey-heading > p {
max-width: 440px;
margin: 0;
color: rgba(46, 59, 50, .67);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* VISUAL JOURNEY */
/* ROUTE */
/* STEPS */
/* ICONS */
/* META */
/* STEP COPY */
/* LITTLE WIJK SCENE */
/* ground */
/* HOUSES */
/* TREE */
/* RESULT LABEL */
/* FOOTER NOTE */
/* ANIMATION */
/* MOBILE */
@media (max-width: 850px) {
.ng-finance-journey-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* FINANCE — PAPER TRAIL */
.ng-finance-papertrail {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.4rem, 3vw, 2.5rem);
margin-top: clamp(3rem, 5vw, 4.5rem);
align-items: start;
}
/* PAPERS */
.ng-finance-papertrail-item {
position: relative;
z-index: 2;
min-height: 330px;
display: flex;
flex-direction: column;
padding: clamp(1.6rem, 3vw, 2.2rem);
background: var(--color-cream);
border: 1px solid rgba(46,59,50,.10);
box-shadow: 0 12px 30px rgba(46,59,50,.055);
transition: transform 220ms ease, box-shadow 220ms ease;
}
/* slightly different paper shapes */
.ng-finance-papertrail-item--1 {
border-radius: 1.5rem .45rem 1.5rem 1.5rem;
transform: rotate(-1deg);
}
.ng-finance-papertrail-item--2 {
margin-top: 2.25rem;
border-radius: .45rem 1.5rem 1.5rem 1.5rem;
}
.ng-finance-papertrail-item--3 {
margin-top: .75rem;
border-radius: 1.5rem 1.5rem .45rem 1.5rem;
transform: rotate(1deg);
}
.ng-finance-papertrail-item:hover {
transform: translateY(-4px) rotate(0);
box-shadow: 0 18px 38px rgba(46,59,50,.085);
}
/* TOP */
.ng-finance-papertrail-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
padding-bottom: .9rem;
border-bottom: 1px solid rgba(46,59,50,.1);
}
.ng-finance-papertrail-number {
color: var(--color-coral);
font-size: .63rem;
font-weight: 850;
letter-spacing: .13em;
}
.ng-finance-papertrail-status {
color: rgba(46,59,50,.42);
font-size: .61rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
/* ICON */
.ng-finance-papertrail-icon {
width: 72px;
height: 72px;
display: grid;
place-items: center;
margin-bottom: 1.5rem;
color: var(--color-coral);
background: rgba(220,234,215,.45);
border-radius: 50% 50% 22% 50%;
}
.ng-finance-papertrail-icon svg {
width: 34px;
height: 34px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* COPY */
.ng-finance-papertrail-item h3 {
max-width: 270px;
margin: 0 0 .8rem;
color: var(--color-dark);
font-size: clamp(1.35rem, 1.8vw, 1.65rem);
font-weight: 750;
line-height: 1.05;
letter-spacing: -.035em;
}
.ng-finance-papertrail-item > p {
max-width: 290px;
margin: 0;
color: rgba(46,59,50,.62);
font-size: .87rem;
line-height: 1.62;
}
/* PAPER FOOTER */
.ng-finance-papertrail-bottom {
display: flex;
align-items: center;
gap: .6rem;
margin-top: auto;
padding-top: 1.6rem;
}
.ng-finance-papertrail-bottom span {
width: 6px;
height: 6px;
background: var(--color-coral);
border-radius: 50%;
}
.ng-finance-papertrail-bottom small {
color: rgba(46,59,50,.4);
font-size: .6rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
/* RESULT STAMP */
.ng-finance-papertrail-stamp {
width: fit-content;
margin-top: auto;
padding: .55rem .85rem;
color: var(--color-green);
border: 1px solid rgba(47,120,70,.28);
border-radius: .4rem;
font-size: .62rem;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
transform: rotate(-3deg);
}
/* CORAL THREAD */
.ng-finance-papertrail-thread {
position: absolute;
z-index: 1;
top: 120px;
left: 0;
width: 100%;
height: 180px;
pointer-events: none;
}
.ng-finance-papertrail-thread path {
fill: none;
stroke: var(--color-coral);
stroke-width: 1.4;
stroke-linecap: round;
stroke-dasharray: 3 7;
opacity: .55;
}
/* END NOTE */
.ng-finance-papertrail-note {
display: flex;
align-items: center;
gap: .9rem;
margin-top: clamp(2.5rem, 4vw, 3.5rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-finance-papertrail-note > span {
width: 7px;
height: 7px;
background: var(--color-coral);
border-radius: 50%;
}
.ng-finance-papertrail-note p {
margin: 0;
color: rgba(46,59,50,.5);
font-size: .72rem;
font-weight: 700;
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-finance-papertrail {
grid-template-columns: 1fr;
}
.ng-finance-papertrail-item, .ng-finance-papertrail-item--1, .ng-finance-papertrail-item--2, .ng-finance-papertrail-item--3 {
margin-top: 0;
transform: none;
}
.ng-finance-papertrail-thread {
display: none;
}
}
/* FINANCIËN — DOCUMENT ARCHIVE */
.ng-finance-archive {
position: relative;
padding: clamp(5rem, 7vw, 6.75rem) 0;
overflow: hidden;
background: var(--color-cream);
color: var(--color-dark);
}
/* LAYOUT */
.ng-finance-archive-layout {
display: grid;
grid-template-columns: minmax(0, .68fr) minmax(480px, 1fr);
align-items: center;
gap: clamp(4rem, 8vw, 8rem);
}
/* LEFT */
.ng-finance-archive-copy {
max-width: 600px;
}
.ng-finance-archive-kicker {
margin: 0 0 1.15rem;
color: var(--color-coral);
font-size: .74rem;
font-weight: 850;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-finance-archive-copy h2 {
max-width: 590px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: .97;
letter-spacing: -.052em;
}
/* NO GREEN HEADING */
.ng-finance-archive-intro {
max-width: 530px;
margin: 1.5rem 0 0;
color: rgba(46,59,50,.66);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* POINTS */
.ng-finance-archive-points {
margin-top: clamp(2.3rem, 4vw, 3.2rem);
}
.ng-finance-archive-point {
display: grid;
grid-template-columns: 54px minmax(0,1fr);
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(46,59,50,.1);
}
.ng-finance-archive-point-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
color: var(--color-green);
background: rgba(220,234,215,.65);
border-radius: 50% 50% 22% 50%;
}
.ng-finance-archive-point-icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.ng-finance-archive-point strong {
display: block;
margin-bottom: .2rem;
color: var(--color-dark);
font-size: .88rem;
font-weight: 800;
}
.ng-finance-archive-point p {
margin: 0;
color: rgba(46,59,50,.56);
font-size: .76rem;
line-height: 1.5;
}
/* HELP */
.ng-finance-archive-help {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .55rem .8rem;
margin-top: 2rem;
padding: 1rem 1.1rem;
background: rgba(255,255,255,.45);
border: 1px solid rgba(46,59,50,.08);
border-radius: .9rem .9rem .3rem .9rem;
}
.ng-finance-archive-help > span {
width: 3px;
height: 30px;
background: var(--color-coral);
border-radius: 999px;
}
.ng-finance-archive-help p {
margin: 0;
color: rgba(46,59,50,.56);
font-size: .72rem;
}
.ng-finance-archive-help a {
color: var(--color-green);
font-size: .72rem;
font-weight: 850;
text-decoration: none;
}
.ng-finance-archive-help i {
color: var(--color-coral);
font-style: normal;
}
/* FOLDER */
/* BACK */
/* TABS */
/* DOCUMENT STACK */
/* DOCUMENT */
/* overlap slightly like actual files */
/* PDF */
/* DOCUMENT COPY */
/* NoordgroeiT only */
/* ARROW */
/* FOLDER FRONT */
/* subtle embossed mark */
/* ANIMATION START STATE */
/* ANIMATION IN */
/* RESPONSIVE */
@media (max-width: 950px) {
.ng-finance-archive-layout {
grid-template-columns: 1fr;
gap: 4rem;
}
}
/* DOCUMENT ARCHIVE — LAYOUT POLISH */
body .ng-finance-archive-layout {
grid-template-columns: minmax(0, .88fr) minmax(560px, 1.12fr);
gap: clamp(4rem, 7vw, 7rem);
}
body .ng-finance-archive-copy {
max-width: 680px;
}
body .ng-finance-archive-copy h2 {
max-width: 680px;
}
/* REAL FOLDER */
/* BACK */
/* FOLDER TABS */
/* PAPER DEPTH */
/* DOCUMENT STACK */
/* EACH DOCUMENT */
/* PDF ICON */
/* DOCUMENT TEXT */
/* only NoordgroeiT */
/* ARROW */
/* FRONT POCKET */
/* slight upper lip */
/* FOLDER TEXT */
/* EMBOSSED MARK */
/* ENTRANCE ANIMATION */
/* BASE */
/* TABS */
/* BLANK PAPERS */
/* DOCUMENTS */
/* RESPONSIVE */
@media (max-width: 980px) {
body .ng-finance-archive-layout {
grid-template-columns: 1fr;
}
}
/* FINANCE — REAL INTERACTIVE FILE FOLDER */
/* BACK OF FOLDER */
/* ACTUAL FOLDER TABS */
/* selected tab physically rises */
/* tiny coral indicator */
/* BLANK PAPER DEPTH */
/* DOCUMENT AREA */
/* DOCUMENT */
/* PDF ICON */
/* COPY */
/* our branding rule */
/* ARROW */
/* FRONT POCKET — THIS MAKES IT READ AS A FOLDER */
/* Actual thicker folder lip. This is what was missing before. */
/* subtle seam */
/* FRONT COPY */
/* EMBOSSED LOGO DETAIL */
/* CATEGORY CHANGE ANIMATION */
/* LITTLE WHOLE-FOLDER HOVER */
/* RESPONSIVE */
/* FINANCE ARCHIVE — REAL FOLDER V3 */
.ng-archive-folder {
position: relative;
width: min(100%, 660px);
height: 520px;
justify-self: end;
}
/* FOLDER BACK */
.ng-archive-folder__back {
position: absolute;
z-index: 1;
top: 82px;
right: 16px;
bottom: 38px;
left: 16px;
background: linear-gradient(145deg, #c7d3c0, #afc0a8);
border: 1px solid rgba(46,59,50,.15);
border-radius: 1.45rem 1.45rem .65rem .65rem;
box-shadow: 0 20px 45px rgba(46,59,50,.10);
}
/* TABS — PHYSICALLY ATTACHED TO FOLDER */
.ng-archive-folder__tabs {
position: absolute;
top: -54px;
right: 18px;
left: 18px;
display: grid;
grid-template-columns: 1fr .88fr 1.25fr;
align-items: end;
}
.ng-archive-folder__tab {
position: relative;
min-height: 58px;
padding: .75rem .8rem;
color: rgba(46,59,50,.62);
background: #bdcbb6;
border: 1px solid rgba(46,59,50,.12);
border-bottom: 0;
border-radius: 1.15rem 1.15rem 0 0;
font: inherit;
font-size: .65rem;
font-weight: 780;
cursor: pointer;
transition: min-height 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.ng-archive-folder__tab:nth-child(2) {
background: #d6ded0;
}
.ng-archive-folder__tab:nth-child(3) {
background: #adbea6;
}
.ng-archive-folder__tab:hover {
color: var(--color-dark);
transform: translateY(-2px);
}
.ng-archive-folder__tab.is-active {
z-index: 3;
min-height: 74px;
color: var(--color-dark);
background: #f0ecdf;
font-weight: 850;
transform: translateY(-2px);
}
.ng-archive-folder__tab.is-active::after {
content: "";
position: absolute;
right: 15px;
bottom: 10px;
width: 5px;
height: 5px;
background: var(--color-coral);
border-radius: 50%;
}
/* PAPER DEPTH */
.ng-archive-folder__paper-back {
position: absolute;
z-index: 2;
right: 54px;
left: 54px;
height: 315px;
background: #fffdfa;
border: 1px solid rgba(46,59,50,.07);
border-radius: .75rem .75rem .2rem .2rem;
box-shadow: 0 4px 14px rgba(46,59,50,.04);
}
.ng-archive-folder__paper-back--2 {
top: 116px;
right: 68px;
left: 68px;
opacity: .55;
}
.ng-archive-folder__paper-back--1 {
top: 128px;
opacity: .78;
}
/* MAIN PAPER */
.ng-archive-folder__paper {
position: absolute;
z-index: 4;
top: 143px;
right: 36px;
left: 36px;
min-height: 300px;
padding: 1.15rem 1.25rem 4rem;
background: #fffdfa;
border: 1px solid rgba(46,59,50,.09);
border-radius: .8rem .8rem .25rem .25rem;
box-shadow: 0 7px 22px rgba(46,59,50,.06);
transition: transform 260ms cubic-bezier(.2,.75,.25,1);
}
.ng-archive-folder:hover .ng-archive-folder__paper {
transform: translateY(-5px);
}
/* PAPER HEADING */
.ng-archive-folder__paper-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .35rem .25rem 1rem;
border-bottom: 1px solid rgba(46,59,50,.1);
}
.ng-archive-folder__paper-heading > span {
color: rgba(46,59,50,.47);
font-size: .62rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-archive-folder__paper-heading small {
color: var(--color-coral);
font-size: .59rem;
font-weight: 800;
}
/* PANEL SWITCHING */
.ng-archive-folder__panel[hidden] {
display: none;
}
.ng-archive-folder__panel.is-switching {
animation: ng-archive-paper-switch 380ms cubic-bezier(.2,.75,.25,1);
}
@keyframes ng-archive-paper-switch {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* DOCUMENT ROW */
.ng-archive-document {
display: grid;
grid-template-columns: 55px minmax(0,1fr) 40px;
align-items: center;
gap: 1rem;
min-height: 88px;
padding: .9rem .2rem;
color: var(--color-dark);
border-bottom: 1px solid rgba(46,59,50,.1);
text-decoration: none;
transition: padding-left 180ms ease;
}
.ng-archive-document:last-child {
border-bottom: 0;
}
.ng-archive-document:hover {
color: var(--color-dark);
padding-left: .55rem;
}
/* PDF */
.ng-archive-document__pdf {
position: relative;
width: 46px;
height: 52px;
display: grid;
place-items: center;
}
.ng-archive-document__pdf svg {
width: 29px;
height: 35px;
fill: none;
stroke: rgba(46,59,50,.48);
stroke-width: 1.5;
}
.ng-archive-document__pdf b {
position: absolute;
bottom: 0;
color: var(--color-coral);
background: #fffdfa;
font-size: .51rem;
font-weight: 850;
}
/* DOCUMENT COPY */
.ng-archive-document__copy strong {
display: block;
color: var(--color-dark);
font-size: clamp(.91rem,1.1vw,1.04rem);
font-weight: 800;
line-height: 1.15;
}
.ng-archive-document__copy small {
display: block;
margin-top: .3rem;
color: var(--color-coral);
font-size: .58rem;
font-weight: 750;
}
/* only NoordgroeiT remains green */
.ng-archive-document .ng-brand-word {
color: var(--color-green) !important;
}
/* DOCUMENT ARROW */
/* DARK FRONT POCKET */
.ng-archive-folder__front {
position: absolute;
z-index: 7;
right: 0;
bottom: 0;
left: 0;
min-height: 155px;
padding: 2rem 2.6rem;
overflow: hidden;
color: #fff;
background: linear-gradient(145deg, #314638, #26392f);
border-radius: 1.05rem 1.05rem .6rem .6rem;
box-shadow: 0 24px 48px rgba(46,59,50,.20);
}
/* thick upper lip */
.ng-archive-folder__front::before {
content: "";
position: absolute;
top: 0;
right: 28px;
left: 28px;
height: 10px;
background: rgba(255,255,255,.055);
border-radius: 0 0 .65rem .65rem;
}
.ng-archive-folder__front > div {
display: flex;
align-items: baseline;
gap: .35rem;
}
.ng-archive-folder__front > div span {
color: rgba(255,255,255,.47);
font-size: .66rem;
}
.ng-archive-folder__front > div strong {
color: #fff;
font-size: 1.13rem;
font-weight: 800;
}
.ng-archive-folder__front > p {
margin: .65rem 0 0;
color: rgba(255,255,255,.51);
font-size: .59rem;
font-weight: 850;
letter-spacing: .14em;
text-transform: uppercase;
}
/* EMBOSS */
.ng-archive-folder__logo {
position: absolute;
right: 38px;
bottom: 23px;
color: rgba(255,255,255,.05);
font-size: 4.4rem;
font-weight: 750;
line-height: .58;
}
.ng-archive-folder__logo span {
display: block;
margin-left: 18px;
}
/* RESPONSIVE */
@media (max-width: 980px) {
.ng-archive-folder {
width: min(100%,660px);
justify-self: center;
}
}
@media (max-width: 620px) {
.ng-archive-folder {
height: 485px;
}
.ng-archive-folder__tabs {
right: 7px;
left: 7px;
}
.ng-archive-folder__tab {
padding: .6rem .3rem;
font-size: .5rem;
}
.ng-archive-folder__paper {
right: 15px;
left: 15px;
}
.ng-archive-document {
grid-template-columns: 40px minmax(0,1fr) 32px;
gap: .6rem;
}
.ng-archive-folder__front {
min-height: 135px;
padding: 1.65rem 1.3rem;
}
}
/* DOCUMENT FOLDER — SIMPLE FINAL CLEANUP */
/* Tabs span the exact width of the folder */
body .ng-archive-folder__tabs {
left: 0;
right: 0;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
}
/* Each tab fills its third */
body .ng-archive-folder__tab {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: 100%;
transform: none;
margin: 0;
background: #c7d3c0;
border-color: rgba(46, 59, 50, .1);
border-bottom: 0;
}
/* Active tab can still lift very slightly */
body .ng-archive-folder__tab.is-active {
background: #c7d3c0;
transform: translateY(-5px);
}
/* FOLDER BODY — Same exact colour as tabs */
body .ng-archive-folder__back {
background: #c7d3c0;
border-color: rgba(46, 59, 50, .1);
}
/* Remove any old stripes / extra folder edges */
body .ng-archive-folder__back::before, body .ng-archive-folder__back::after {
display: none !important;
}
/* Remove any stripe underneath the tabs */
body .ng-archive-folder__back {
box-shadow: 0 18px 42px rgba(46, 59, 50, .08);
}
/* Make tab/body connection seamless */
body .ng-archive-folder__tabs {
z-index: 3;
}
body .ng-archive-folder__back {
z-index: 1;
border-top: 0;
}
body .ng-archive-folder {
height: 545px;
}
body .ng-archive-folder__back {
bottom: 28px;
}
body .ng-archive-folder__paper {
min-height: 325px;
}
/* FINANCE — RESPONSIBILITY LEDGER */
/* PAGES */
/* left page */
/* right page */
/* BOOK SPINE */
/* LEFT PAGE — FRED */
/* PERSON */
/* SIGNATURE DETAIL */
/* RIGHT PAGE — CHECKS */
/* STAMP */
/* BOTTOM LINK */
/* SUBTLE OPEN ANIMATION */
/* RESPONSIVE */
/* FINANCE — RESPONSIBILITY LEDGER */
.ng-finance-ledger {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
width: min(100%, 1080px);
margin: clamp(3.5rem, 6vw, 5rem) auto 0;
filter: drop-shadow(0 22px 40px rgba(0,0,0,.12));
}
/* PAGES */
.ng-finance-ledger-page {
position: relative;
min-height: 380px;
padding: clamp(2rem, 4vw, 3rem);
color: var(--color-dark);
background: #f5f1e8;
border: 1px solid rgba(255,255,255,.08);
}
/* left page */
.ng-finance-ledger-page--left {
border-radius: 1.5rem .2rem .2rem 1.5rem;
background: linear-gradient(90deg, #f5f1e8 0%, #f2eee4 88%, #e7e1d5 100%);
}
/* right page */
.ng-finance-ledger-page--right {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 0;
border-radius: .2rem 1.5rem 1.5rem .2rem;
background: linear-gradient(90deg, #e7e1d5 0%, #f2eee4 12%, #f5f1e8 100%);
}
/* BOOK SPINE */
.ng-finance-ledger-spine {
position: absolute;
z-index: 5;
top: 16px;
bottom: 16px;
left: 50%;
width: 20px;
transform: translateX(-50%);
background: linear-gradient(90deg, rgba(46,59,50,.04), rgba(46,59,50,.14), rgba(255,255,255,.4), rgba(46,59,50,.1), rgba(46,59,50,.03));
pointer-events: none;
}
/* LEFT PAGE — FRED */
.ng-finance-ledger-page-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(46,59,50,.11);
}
.ng-finance-ledger-page-top span {
color: var(--color-coral);
font-size: .64rem;
font-weight: 850;
letter-spacing: .12em;
}
.ng-finance-ledger-page-top small {
color: rgba(46,59,50,.44);
font-size: .62rem;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
/* PERSON */
.ng-finance-ledger-person {
display: flex;
align-items: center;
gap: 1.2rem;
margin-top: clamp(2rem, 4vw, 3rem);
}
.ng-finance-ledger-avatar {
width: 72px;
height: 72px;
display: grid;
place-items: center;
flex: 0 0 auto;
color: var(--color-coral);
background: rgba(240,102,83,.1);
border: 1px solid rgba(240,102,83,.18);
border-radius: 50% 50% 20% 50%;
font-size: .78rem;
font-weight: 850;
letter-spacing: .08em;
}
.ng-finance-ledger-person p {
margin: 0 0 .3rem;
color: rgba(46,59,50,.44);
font-size: .62rem;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-finance-ledger-person h3 {
margin: 0;
color: var(--color-dark);
font-size: clamp(1.5rem, 2vw, 1.8rem);
font-weight: 750;
line-height: 1.05;
letter-spacing: -.035em;
}
.ng-finance-ledger-text {
max-width: 420px;
margin: 1.5rem 0 0;
color: rgba(46,59,50,.63);
font-size: .88rem;
line-height: 1.65;
}
/* SIGNATURE DETAIL */
.ng-finance-ledger-sign {
display: flex;
align-items: center;
gap: .7rem;
margin-top: clamp(2rem, 4vw, 3rem);
padding-top: 1rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-finance-ledger-sign span {
width: 36px;
height: 2px;
background: var(--color-coral);
border-radius: 999px;
}
.ng-finance-ledger-sign p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .6rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
/* RIGHT PAGE — CHECKS */
.ng-finance-ledger-check {
position: relative;
min-width: 0;
padding: 0 clamp(1.4rem, 3vw, 2.25rem);
}
.ng-finance-ledger-check + .ng-finance-ledger-check {
border-left: 1px solid rgba(46,59,50,.1);
}
.ng-finance-ledger-check-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: clamp(2.2rem, 4vw, 3rem);
padding-bottom: 1rem;
border-bottom: 1px solid rgba(46,59,50,.1);
}
.ng-finance-ledger-check-top span {
color: var(--color-coral);
font-size: .63rem;
font-weight: 850;
letter-spacing: .12em;
}
.ng-finance-ledger-check-top i {
width: 28px;
height: 28px;
display: grid;
place-items: center;
color: var(--color-green);
background: rgba(220,234,215,.7);
border-radius: 50%;
font-size: .65rem;
font-style: normal;
}
.ng-finance-ledger-label {
margin: 0 0 .6rem;
color: rgba(46,59,50,.43);
font-size: .62rem;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-finance-ledger-check h3 {
max-width: 250px;
margin: 0 0 .8rem;
color: var(--color-dark);
font-size: clamp(1.2rem, 1.7vw, 1.5rem);
font-weight: 750;
line-height: 1.07;
letter-spacing: -.03em;
}
.ng-finance-ledger-check > p:last-child {
max-width: 260px;
margin: 0;
color: rgba(46,59,50,.59);
font-size: .83rem;
line-height: 1.62;
}
/* STAMP */
.ng-finance-ledger-stamp {
position: absolute;
right: 32px;
bottom: 24px;
padding: .55rem .75rem;
color: var(--coral, #f06653);
border: 1px solid rgba(240,102,83,.3);
border-radius: .35rem;
font-size: .57rem;
font-weight: 850;
letter-spacing: .1em;
text-align: center;
text-transform: uppercase;
transform: rotate(-4deg);
}
.ng-finance-ledger-stamp strong {
display: block;
margin-top: .15rem;
font-weight: 850;
}
/* BOTTOM LINK */
.ng-finance-ledger-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-top: clamp(2.5rem, 4vw, 3.5rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(255,255,255,.11);
}
.ng-finance-ledger-footer p {
margin: 0;
color: rgba(255,255,255,.48);
font-size: .72rem;
font-weight: 700;
}
.ng-finance-ledger-footer a {
display: inline-flex;
align-items: center;
gap: .7rem;
color: var(--color-white);
font-size: .74rem;
font-weight: 800;
text-decoration: none;
}
.ng-finance-ledger-footer a span {
width: 36px;
height: 36px;
display: grid;
place-items: center;
color: var(--color-coral);
border: 1px solid rgba(240,102,83,.3);
border-radius: 50%;
transition: transform 180ms ease, color 180ms ease, background-color 180ms ease;
}
.ng-finance-ledger-footer a:hover span {
color: #fff;
background: var(--color-coral);
transform: translate(2px,-2px);
}
/* SUBTLE OPEN ANIMATION */
.ng-finance-ledger.is-animatable .ng-finance-ledger-page--left {
opacity: 0;
transform: perspective(900px) rotateY(8deg) translateX(15px);
}
.ng-finance-ledger.is-animatable .ng-finance-ledger-page--right {
opacity: 0;
transform: perspective(900px) rotateY(-8deg) translateX(-15px);
}
.ng-finance-ledger.is-in-view .ng-finance-ledger-page--left, .ng-finance-ledger.is-in-view .ng-finance-ledger-page--right {
opacity: 1;
transform: perspective(900px) rotateY(0) translateX(0);
transition: opacity 550ms ease, transform 700ms cubic-bezier(.2,.75,.25,1);
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-finance-ledger {
grid-template-columns: 1fr;
}
.ng-finance-ledger-spine {
display: none;
}
.ng-finance-ledger-page--left {
border-radius: 1.4rem 1.4rem .2rem .2rem;
}
.ng-finance-ledger-page--right {
grid-template-columns: 1fr;
gap: 2rem;
border-radius: .2rem .2rem 1.4rem 1.4rem;
}
.ng-finance-ledger-check {
padding: 0;
}
.ng-finance-ledger-check + .ng-finance-ledger-check {
padding-top: 2rem;
border-top: 1px solid rgba(46,59,50,.1);
border-left: 0;
}
}
/* FINANCE LEDGER — CLEAN BOOK LAYOUT */
/* Book slightly wider / more substantial */
body .ng-finance-ledger {
width: min(100%, 1120px);
grid-template-columns: 1fr 1fr;
}
/* PAGES */
body .ng-finance-ledger-page {
min-height: 410px;
}
body .ng-finance-ledger-page--left {
padding: clamp(2.2rem, 4vw, 3.2rem);
border-radius: 1.45rem 0 0 1.45rem;
}
/* * RIGHT PAGE: * no more two cramped columns */
body .ng-finance-ledger-page--right {
display: flex;
flex-direction: column;
gap: 0;
padding: clamp(2rem, 3vw, 2.7rem) clamp(2.2rem, 4vw, 3.1rem);
border-radius: 0 1.45rem 1.45rem 0;
}
/* RIGHT-PAGE ENTRIES */
body .ng-finance-ledger-check {
position: relative;
width: 100%;
display: grid;
grid-template-columns: 60px minmax(0, 1fr);
column-gap: 1.35rem;
padding: 1.2rem 0 1.65rem;
}
/* divider between Bestuur / Openheid */
body .ng-finance-ledger-check + .ng-finance-ledger-check {
margin-top: 0;
padding-top: 1.65rem;
border-top: 1px solid rgba(46, 59, 50, .11);
border-left: 0;
}
/* NUMBER / CHECK COLUMN */
body .ng-finance-ledger-check-top {
grid-column: 1;
grid-row: 1 / span 4;
width: 52px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: .8rem;
margin: 0;
padding: 0;
border: 0;
}
body .ng-finance-ledger-check-top span {
color: var(--color-coral);
font-size: .65rem;
font-weight: 850;
letter-spacing: .12em;
}
body .ng-finance-ledger-check-top i {
width: 34px;
height: 34px;
display: grid;
place-items: center;
color: var(--color-green);
background: rgba(220,234,215,.72);
border-radius: 50%;
font-size: .7rem;
}
/* RIGHT-PAGE COPY */
body .ng-finance-ledger-label {
grid-column: 2;
margin: 0 0 .5rem;
color: rgba(46, 59, 50, .42);
}
body .ng-finance-ledger-check h3 {
grid-column: 2;
max-width: 390px;
margin: 0 0 .65rem;
color: var(--color-dark);
font-size: clamp(1.25rem, 1.7vw, 1.55rem);
font-weight: 750;
line-height: 1.06;
letter-spacing: -.03em;
}
body .ng-finance-ledger-check > p:last-child {
grid-column: 2;
max-width: 390px;
margin: 0;
color: rgba(46, 59, 50, .59);
font-size: .84rem;
line-height: 1.62;
}
/* FRED PAGE POLISH */
body .ng-finance-ledger-person {
margin-top: 2.4rem;
}
body .ng-finance-ledger-text {
max-width: 430px;
}
body .ng-finance-ledger-sign {
margin-top: 2.5rem;
}
/* BOOK SPINE */
body .ng-finance-ledger-spine {
width: 16px;
top: 10px;
bottom: 10px;
background: linear-gradient(90deg, rgba(46,59,50,.035), rgba(46,59,50,.12), rgba(255,255,255,.55), rgba(46,59,50,.10), rgba(46,59,50,.025));
}
/* STAMP */
body .ng-finance-ledger-stamp {
right: 30px;
bottom: 20px;
padding: .5rem .75rem;
font-size: .55rem;
transform: rotate(-3deg);
}
/* * Reserve some room so the last paragraph * doesn't run into the stamp. */
body .ng-finance-ledger-check:last-of-type {
padding-bottom: 4rem;
}
/* SUBTLE PAGE LINES */
body .ng-finance-ledger-page--left::after, body .ng-finance-ledger-page--right::after {
content: "";
position: absolute;
inset: 0 18px;
pointer-events: none;
opacity: .18;
background: repeating-linear-gradient(to bottom, transparent 0, transparent 49px, rgba(46,59,50,.08) 50px);
}
/* Keep content over those lines */
body .ng-finance-ledger-page > * {
position: relative;
z-index: 2;
}
/* MOBILE */
@media (max-width: 850px) {
body .ng-finance-ledger {
grid-template-columns: 1fr;
}
body .ng-finance-ledger-page--left {
border-radius: 1.4rem 1.4rem 0 0;
}
body .ng-finance-ledger-page--right {
border-radius: 0 0 1.4rem 1.4rem;
}
body .ng-finance-ledger-check {
grid-template-columns: 52px minmax(0,1fr);
}
}
/* FINANCE — QUESTION CTA */
.ng-finance-question {
position: relative;
padding: clamp(4.75rem, 7vw, 6rem) 0;
overflow: hidden;
background: var(--color-green-light);
color: var(--color-dark);
}
/* quiet NoordgroeiT circle */
.ng-finance-question::after {
content: "";
position: absolute;
right: -115px;
bottom: -120px;
width: 250px;
height: 250px;
border: 45px solid rgba(46, 59, 50, .035);
border-radius: 50%;
pointer-events: none;
}
/* LAYOUT */
.ng-finance-question-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(380px, .62fr);
align-items: center;
gap: clamp(4rem, 9vw, 8rem);
}
/* COPY */
.ng-finance-question-copy {
max-width: 680px;
}
.ng-finance-question-kicker {
margin: 0 0 1.15rem;
color: var(--color-coral);
font-size: .74rem;
font-weight: 850;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-finance-question-copy h2 {
max-width: 650px;
margin: 0 0 1.4rem;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: .97;
letter-spacing: -.052em;
}
/* NO random green heading */
.ng-finance-question-copy > p:last-child {
max-width: 540px;
margin: 0;
color: rgba(46, 59, 50, .67);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* VISUAL */
.ng-finance-question-visual {
position: relative;
width: min(100%, 430px);
justify-self: end;
}
/* QUESTION CARD */
.ng-finance-question-card {
position: relative;
padding: 1.8rem 1.8rem 1.5rem;
overflow: hidden;
background: var(--color-cream);
border: 1px solid rgba(46, 59, 50, .11);
border-radius: 1.5rem .45rem 1.5rem 1.5rem;
box-shadow: 0 18px 38px rgba(46, 59, 50, .09);
transform: rotate(1deg);
transition: transform 260ms cubic-bezier(.2,.75,.25,1), box-shadow 260ms ease;
}
/* little coral tab */
.ng-finance-question-card::before {
content: "";
position: absolute;
top: 0;
left: 34px;
width: 55px;
height: 4px;
background: var(--color-coral);
border-radius: 0 0 999px 999px;
}
.ng-finance-question-card:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow: 0 22px 44px rgba(46, 59, 50, .12);
}
/* CARD TOP */
.ng-finance-question-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding-bottom: 1.4rem;
border-bottom: 1px solid rgba(46, 59, 50, .1);
}
.ng-finance-question-card-top > div > span {
display: block;
margin-bottom: .2rem;
color: rgba(46, 59, 50, .43);
font-size: .61rem;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-finance-question-card-top strong {
color: var(--color-dark);
font-size: 1rem;
font-weight: 800;
}
/* QUESTION MARK */
.ng-finance-question-mark {
width: 52px;
height: 52px;
display: grid;
place-items: center;
flex: 0 0 auto;
color: var(--color-coral);
background: rgba(240, 102, 83, .08);
border: 1px solid rgba(240, 102, 83, .18);
border-radius: 50% 50% 20% 50%;
font-size: 1.25rem;
font-weight: 850;
transition: transform 220ms ease;
}
.ng-finance-question-card:hover .ng-finance-question-mark {
transform: rotate(-5deg) scale(1.05);
}
/* FAKE MESSAGE AREA */
.ng-finance-question-label {
margin: 1.5rem 0 1rem;
color: var(--color-dark);
font-size: .78rem;
font-weight: 800;
}
.ng-finance-question-lines {
display: grid;
gap: .7rem;
}
.ng-finance-question-lines span {
display: block;
height: 1px;
background: rgba(46, 59, 50, .12);
}
.ng-finance-question-lines span:nth-child(2) {
width: 88%;
}
.ng-finance-question-lines span:nth-child(3) {
width: 66%;
}
/* TOPICS */
.ng-finance-question-topics {
display: flex;
flex-wrap: wrap;
gap: .45rem;
margin-top: 1.4rem;
}
.ng-finance-question-topics span {
padding: .4rem .65rem;
color: rgba(46, 59, 50, .56);
background: rgba(220, 234, 215, .7);
border-radius: 999px;
font-size: .57rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
/* CTA BUTTON */
.ng-finance-question-button {
min-height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.5rem;
padding: .4rem .45rem .4rem 1.15rem;
color: #fff;
background: var(--color-coral);
border-radius: 999px;
font-size: .78rem;
font-weight: 800;
text-decoration: none;
transition: transform 180ms ease;
}
.ng-finance-question-button:hover {
color: #fff;
transform: translateY(-2px);
}
.ng-finance-question-button-arrow {
width: 2.35rem;
height: 2.35rem;
display: grid;
place-items: center;
color: var(--color-coral);
background: #fff;
border-radius: 50%;
transition: transform 180ms ease;
}
.ng-finance-question-button:hover .ng-finance-question-button-arrow {
transform: translate(2px, -2px);
}
/* LITTLE NOTE */
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-finance-question-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-finance-question-visual {
justify-self: center;
}
}
@media (max-width: 520px) {
.ng-finance-question {
padding: 4rem 0;
}
.ng-finance-question-visual {
width: 100%;
}
.ng-finance-question-card {
padding: 1.5rem;
}
}
/* INITIATIEVEN — FEATURED NOORDBUITEN */
.ng-init-feature {
position: relative;
padding: clamp(5rem, 7vw, 6.5rem) 0;
overflow: hidden;
background: var(--color-cream);
color: var(--color-dark);
}
/* HEADING */
.ng-init-feature-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .46fr);
align-items: end;
gap: clamp(3rem, 7vw, 7rem);
margin-bottom: clamp(3.5rem, 6vw, 5rem);
}
.ng-init-feature-kicker {
margin: 0 0 1.15rem;
color: var(--color-coral);
font-size: .74rem;
font-weight: 850;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-init-feature-heading h2 {
max-width: 720px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: .97;
letter-spacing: -.052em;
}
/* no green heading */
.ng-init-feature-heading > p {
max-width: 440px;
margin: 0;
color: rgba(46, 59, 50, .66);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* SPREAD */
.ng-init-feature-spread {
position: relative;
min-height: 590px;
}
/* HUGE IMAGE */
.ng-init-feature-image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 70%;
overflow: hidden;
background: var(--color-green-light);
border-radius: 2rem .5rem 2rem 2rem;
}
.ng-init-feature-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 45%, rgba(28,45,34,.08) 72%, rgba(28,45,34,.28) 100%);
}
.ng-init-feature-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 700ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-feature-spread:hover .ng-init-feature-image img {
transform: scale(1.025);
}
/* IMAGE TAG */
.ng-init-feature-image-tag {
position: absolute;
z-index: 3;
left: 24px;
bottom: 24px;
display: flex;
align-items: center;
gap: .7rem;
padding: .6rem .85rem;
color: var(--color-dark);
background: rgba(255,253,250,.88);
border-radius: 999px;
backdrop-filter: blur(7px);
}
.ng-init-feature-image-tag span {
width: 6px;
height: 6px;
background: var(--color-coral);
border-radius: 50%;
}
.ng-init-feature-image-tag p {
margin: 0;
font-size: .64rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
/* NUMBER RAIL */
.ng-init-feature-rail {
position: absolute;
z-index: 4;
top: 42px;
left: 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: .65rem;
color: #fff;
}
.ng-init-feature-rail span {
color: #fff;
font-size: .65rem;
font-weight: 850;
letter-spacing: .12em;
}
.ng-init-feature-rail i {
width: 1px;
height: 42px;
background: rgba(255,255,255,.5);
}
.ng-init-feature-rail p {
margin: 0;
color: rgba(255,255,255,.72);
font-size: .55rem;
font-weight: 800;
letter-spacing: .12em;
writing-mode: vertical-rl;
text-transform: uppercase;
}
/* CONTENT PANEL */
.ng-init-feature-panel {
position: absolute;
z-index: 5;
top: 50%;
right: 0;
width: min(45%, 500px);
padding: clamp(2rem, 4vw, 3rem);
background: #fffdfa;
border: 1px solid rgba(46,59,50,.09);
border-radius: 1.6rem 1.6rem .45rem 1.6rem;
box-shadow: 0 22px 48px rgba(46,59,50,.11);
transform: translateY(-50%);
}
/* tiny coral page marker */
.ng-init-feature-panel::before {
content: "";
position: absolute;
top: 0;
left: 34px;
width: 55px;
height: 4px;
background: var(--color-coral);
border-radius: 0 0 999px 999px;
}
/* PANEL TOP */
.ng-init-feature-panel-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
margin-bottom: 1.8rem;
}
.ng-init-feature-panel-top > div > span {
display: block;
color: var(--color-dark);
font-size: .73rem;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-init-feature-panel-top small {
display: block;
margin-top: .3rem;
color: var(--color-coral);
font-size: .6rem;
font-weight: 800;
}
/* LITTLE SYMBOL */
.ng-init-feature-symbol {
width: 42px;
height: 42px;
display: grid;
place-items: center;
flex: 0 0 auto;
color: var(--color-green);
background: var(--color-green-light);
border-radius: 50% 50% 20% 50%;
}
/* MAIN COPY */
.ng-init-feature-panel h3 {
max-width: 390px;
margin: 0 0 1rem;
color: var(--color-dark);
font-size: clamp(1.8rem, 2.7vw, 2.5rem);
font-weight: 750;
line-height: 1;
letter-spacing: -.045em;
}
.ng-init-feature-panel > p {
max-width: 410px;
margin: 0;
color: rgba(46,59,50,.63);
font-size: .9rem;
line-height: 1.65;
}
/* THEMES */
.ng-init-feature-themes {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
margin-top: 1.8rem;
border-top: 1px solid rgba(46,59,50,.1);
border-bottom: 1px solid rgba(46,59,50,.1);
}
.ng-init-feature-themes > div {
min-width: 0;
padding: 1rem .85rem;
}
.ng-init-feature-themes > div:first-child {
padding-left: 0;
}
.ng-init-feature-themes > div + .ng-init-feature-themes > div {
border-left: 1px solid rgba(46,59,50,.09);
}
.ng-init-feature-themes span {
display: block;
margin-bottom: .5rem;
color: var(--color-coral);
font-size: .58rem;
font-weight: 850;
}
.ng-init-feature-themes strong {
display: block;
color: var(--color-dark);
font-size: .79rem;
font-weight: 850;
}
.ng-init-feature-themes small {
display: block;
margin-top: .25rem;
color: rgba(46,59,50,.48);
font-size: .58rem;
line-height: 1.4;
}
/* BUTTON */
.ng-init-feature-button {
width: fit-content;
min-height: 50px;
display: inline-flex;
align-items: center;
gap: 1rem;
margin-top: 1.8rem;
padding: .35rem .4rem .35rem 1.15rem;
color: #fff;
background: var(--color-coral);
border-radius: 999px;
font-size: .77rem;
font-weight: 800;
text-decoration: none;
transition: transform 180ms ease;
}
.ng-init-feature-button:hover {
color: #fff;
transform: translateY(-2px);
}
.ng-init-feature-button-arrow {
width: 2.3rem;
height: 2.3rem;
display: grid;
place-items: center;
color: var(--color-coral);
background: #fff;
border-radius: 50%;
transition: transform 180ms ease;
}
.ng-init-feature-button:hover .ng-init-feature-button-arrow {
transform: translate(2px,-2px);
}
/* BOTTOM DETAIL */
.ng-init-feature-bottom {
display: flex;
align-items: center;
gap: .9rem;
margin-top: clamp(2.5rem, 4vw, 3.5rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-init-feature-bottom > span {
width: 7px;
height: 7px;
background: var(--color-coral);
border-radius: 50%;
}
.ng-init-feature-bottom p {
margin: 0;
color: rgba(46,59,50,.48);
font-size: .72rem;
font-weight: 700;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-init-feature-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-init-feature-spread {
min-height: 0;
}
.ng-init-feature-image {
position: relative;
width: 100%;
height: 480px;
}
.ng-init-feature-panel {
position: relative;
top: auto;
right: auto;
width: calc(100% - 2rem);
margin: -80px auto 0;
transform: none;
}
}
@media (max-width: 600px) {
.ng-init-feature-image {
height: 390px;
}
.ng-init-feature-panel {
width: calc(100% - 1rem);
padding: 1.7rem;
}
.ng-init-feature-themes {
grid-template-columns: 1fr;
}
.ng-init-feature-themes > div {
padding: .85rem 0;
}
.ng-init-feature-themes > div + .ng-init-feature-themes > div {
border-top: 1px solid rgba(46,59,50,.08);
border-left: 0;
}
}
/* INITIATIEVEN — NOORDWERKTSAMEN */
/* quiet background shape */
/* HEADING */
/* MAIN LAYOUT */
/* VISUAL */
/* IMAGE */
/* NUMBER */
/* TALK BUBBLES */
/* little speech-tail */
/* 01 */
/* 02 */
/* 03 */
/* little movement */
/* COPY */
/* THEMES */
/* BUTTON */
/* BOTTOM NOTE */
/* SUBTLE BUBBLE ANIMATION */
/* RESPONSIVE */
/* INITIATIEVEN — HEIKANTSE TUYNEN */
/* subtle page motif */
/* HEADING */
/* allowed: the actual word green */
/* LAYOUT */
/* COPY */
/* NUMBER */
/* THEMES */
/* BUTTON */
/* PHOTO */
/* GARDEN LABELS */
/* GROWING LINE */
/* NOTE */
/* BOTTOM */
/* SMALL MOTION */
/* RESPONSIVE */
/* INITIATIEVEN — GROWTH PROCESS */
.ng-init-growth {
position: relative;
padding: clamp(5rem, 7vw, 6.5rem) 0;
overflow: hidden;
background: var(--color-dark);
color: var(--color-white);
}
/* background echo */
.ng-init-growth::after {
content: "";
position: absolute;
right: -150px;
bottom: -180px;
width: 360px;
height: 360px;
border: 70px solid rgba(220,234,215,.035);
border-radius: 50%;
pointer-events: none;
}
/* HEADING */
.ng-init-growth-heading {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0,1fr) minmax(300px,.46fr);
align-items: end;
gap: clamp(3rem,7vw,7rem);
margin-bottom: clamp(4rem,6vw,5rem);
}
.ng-init-growth-kicker {
margin: 0 0 1.15rem;
color: #f6a390;
font-size: .74rem;
font-weight: 850;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-init-growth-heading h2 {
max-width: 700px;
margin: 0;
color: var(--color-white);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: .97;
letter-spacing: -.052em;
}
.ng-init-growth-heading > p {
max-width: 440px;
margin: 0;
color: rgba(255,255,255,.64);
font-size: var(--ng-home-body);
line-height: 1.68;
}
.ng-init-growth-heading .ng-brand-word {
color: #dcead7 !important;
font-weight: 750;
}
/* PATH */
/* ROUTE */
/* STEPS */
/* alternate positions */
/* MARKER */
/* COPY */
/* FOOTER */
.ng-init-growth-footer {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-top: clamp(2.5rem,4vw,3.5rem);
padding-top: 1.35rem;
border-top: 1px solid rgba(255,255,255,.11);
}
.ng-init-growth-footer p {
max-width: 500px;
margin: 0;
color: rgba(255,255,255,.48);
font-size: .75rem;
line-height: 1.55;
}
.ng-init-growth-footer a {
display: inline-flex;
align-items: center;
gap: .8rem;
color: #fff;
font-size: .75rem;
font-weight: 800;
text-decoration: none;
}
.ng-init-growth-footer a > span {
width: 38px;
height: 38px;
display: grid;
place-items: center;
color: var(--color-coral);
border: 1px solid rgba(240,102,83,.3);
border-radius: 50%;
transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.ng-init-growth-footer a:hover > span {
color: #fff;
background: var(--color-coral);
transform: translate(2px,-2px);
}
/* ANIMATION */
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-init-growth-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 600px) {
.ng-init-growth-footer {
align-items: flex-start;
flex-direction: column;
}
}
/* INITIATIEVEN — CLEAN RISING PROCESS */
.ng-init-rise {
position: relative;
width: min(100%, 1120px);
height: 500px;
margin: clamp(3.5rem, 6vw, 5rem) auto 0;
}
/* ROUTE */
.ng-init-rise-route {
position: absolute;
inset: 55px 0 auto;
width: 100%;
height: 330px;
overflow: visible;
pointer-events: none;
}
.ng-init-rise-guide {
stroke: rgba(255,255,255,.10);
stroke-width: 1.2;
stroke-dasharray: 3 8;
}
/* STEPS */
.ng-init-rise-step {
position: absolute;
z-index: 3;
width: 220px;
}
/* * These positions follow the same upward trajectory * as the SVG line. */
.ng-init-rise-step--3 {
left: 55%;
top: 145px;
}
/* MARKER */
.ng-init-rise-node {
position: absolute;
top: -42px;
left: 0;
width: 72px;
height: 72px;
display: grid;
place-items: center;
color: var(--color-coral);
background: var(--color-dark);
border: 1px solid rgba(255,255,255,.14);
border-radius: 50% 50% 22% 50%;
box-shadow: 0 0 0 9px var(--color-dark);
}
.ng-init-rise-node > span {
position: absolute;
top: -5px;
right: -5px;
width: 10px;
height: 10px;
background: var(--color-coral);
border: 3px solid var(--color-dark);
border-radius: 50%;
}
.ng-init-rise-node svg {
width: 34px;
height: 34px;
fill: none;
stroke: currentColor;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
}
/* COPY */
.ng-init-rise-copy {
padding-top: 55px;
}
.ng-init-rise-number {
display: block;
margin-bottom: .45rem;
color: var(--color-coral);
font-size: .63rem;
font-weight: 850;
letter-spacing: .13em;
}
.ng-init-rise-copy small {
display: block;
margin-bottom: .55rem;
color: rgba(255,255,255,.4);
font-size: .59rem;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-init-rise-copy h3 {
max-width: 220px;
margin: 0 0 .65rem;
color: #fff;
font-size: clamp(1.3rem, 1.8vw, 1.55rem);
font-weight: 750;
line-height: 1.05;
letter-spacing: -.03em;
}
.ng-init-rise-copy p {
max-width: 215px;
margin: 0;
color: rgba(255,255,255,.55);
font-size: .81rem;
line-height: 1.6;
}
/* ANIMATION */
.ng-init-rise.is-animatable .ng-init-rise-live {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.ng-init-rise.is-animatable .ng-init-rise-step {
opacity: 0;
}
.ng-init-rise.is-in-view .ng-init-rise-live {
animation: ng-init-rise-draw 3s ease-in-out forwards;
}
.ng-init-rise.is-in-view .ng-init-rise-step--1 {
animation: ng-init-rise-step .45s ease-out .1s forwards;
}
.ng-init-rise.is-in-view .ng-init-rise-step--2 {
animation: ng-init-rise-step .45s ease-out .9s forwards;
}
.ng-init-rise.is-in-view .ng-init-rise-step--3 {
animation: ng-init-rise-step .45s ease-out 1.7s forwards;
}
.ng-init-rise.is-in-view .ng-init-rise-step--4 {
animation: ng-init-rise-step .45s ease-out 2.45s forwards;
}
@keyframes ng-init-rise-draw {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes ng-init-rise-step {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-init-rise {
height: auto;
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 3rem 2rem;
}
.ng-init-rise-route {
display: none;
}
.ng-init-rise-step, .ng-init-rise-step--1, .ng-init-rise-step--2, .ng-init-rise-step--3, .ng-init-rise-step--4 {
position: relative;
top: auto;
right: auto;
left: auto;
width: 100%;
}
.ng-init-rise-node {
position: relative;
top: auto;
left: auto;
margin-bottom: 1.2rem;
}
.ng-init-rise-copy {
padding-top: 0;
}
}
@media (max-width: 550px) {
.ng-init-rise {
grid-template-columns: 1fr;
}
}
/* PROCESS ROUTE — ACTUALLY MATCH THE NODES */
.ng-init-rise-route {
position: absolute;
inset: 0;
width: 100%;
height: 500px;
overflow: visible;
pointer-events: none;
}
.ng-init-rise-guide, .ng-init-rise-live {
fill: none;
stroke-linecap: round;
}
.ng-init-rise-guide {
stroke: rgba(255, 255, 255, .10);
stroke-width: 1.2;
stroke-dasharray: 3 8;
}
.ng-init-rise-live {
stroke: var(--color-coral);
stroke-width: 2;
}
.ng-init-rise-step--1 {
left: 0;
top: 265px;
}
.ng-init-rise-step--2 {
left: 27%;
top: 210px;
}
.ng-init-rise-step--3 {
left: 56%;
top: 145px;
}
.ng-init-rise-step--4 {
right: 0;
top: 60px;
}
/* INITIATIEVEN — IDEA CTA */
.ng-init-idea {
position: relative;
padding: clamp(5rem, 7vw, 6.5rem) 0 clamp(3rem, 5vw, 4rem);
overflow: hidden;
background: var(--color-green-light);
color: var(--color-dark);
}
/* LAYOUT */
.ng-init-idea-layout {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(390px, .62fr);
align-items: center;
gap: clamp(4rem, 9vw, 8rem);
}
/* COPY */
.ng-init-idea-copy {
max-width: 620px;
}
.ng-init-idea-kicker {
margin: 0 0 1.15rem;
color: var(--color-coral);
font-size: .74rem;
font-weight: 850;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-init-idea-copy h2 {
max-width: 680px;
margin: 0 0 1.4rem;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: .97;
letter-spacing: -.052em;
}
.ng-init-idea-copy > p {
max-width: 540px;
margin: 0;
color: rgba(46,59,50,.66);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* ACTIONS */
.ng-init-idea-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.2rem 1.5rem;
margin-top: 2rem;
}
.ng-init-idea-button {
min-height: 52px;
display: inline-flex;
align-items: center;
gap: 1rem;
padding: .4rem .4rem .4rem 1.2rem;
color: #fff;
background: var(--color-coral);
border-radius: 999px;
font-size: .78rem;
font-weight: 800;
text-decoration: none;
transition: transform 180ms ease;
}
.ng-init-idea-button:hover {
color: #fff;
transform: translateY(-2px);
}
.ng-init-idea-button-arrow {
width: 2.35rem;
height: 2.35rem;
display: grid;
place-items: center;
color: var(--color-coral);
background: #fff;
border-radius: 50%;
transition: transform 180ms ease;
}
.ng-init-idea-button:hover .ng-init-idea-button-arrow {
transform: translate(2px,-2px);
}
.ng-init-idea-secondary {
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--color-dark);
font-size: .75rem;
font-weight: 800;
text-decoration: none;
}
.ng-init-idea-secondary span {
color: var(--color-coral);
transition: transform 180ms ease;
}
.ng-init-idea-secondary:hover span {
transform: translateX(3px);
}
/* VISUAL */
.ng-init-idea-visual {
position: relative;
width: min(100%, 440px);
justify-self: end;
padding: 20px 18px 42px;
}
/* PAPER */
.ng-init-idea-paper {
position: relative;
padding: 2rem 1.8rem 1.5rem;
background: #fffdfa;
border: 1px solid rgba(46,59,50,.09);
border-radius: .45rem 1.4rem 1.4rem 1.4rem;
box-shadow: 0 20px 40px rgba(46,59,50,.1);
transform: rotate(1.5deg);
transition: transform 260ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-idea-paper:hover {
transform: rotate(.3deg) translateY(-4px);
}
/* PIN */
.ng-init-idea-pin {
position: absolute;
top: -10px;
left: 38px;
width: 20px;
height: 20px;
background: var(--color-coral);
border: 5px solid #f7b1a4;
border-radius: 50%;
box-shadow: 0 3px 7px rgba(46,59,50,.15);
}
/* TOP */
.ng-init-idea-paper-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(46,59,50,.1);
}
.ng-init-idea-paper-top span {
color: rgba(46,59,50,.48);
font-size: .61rem;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-init-idea-paper-top small {
color: var(--color-coral);
font-size: .62rem;
font-weight: 850;
}
/* QUESTION */
.ng-init-idea-question {
max-width: 310px;
margin: 1.7rem 0 1.4rem;
color: var(--color-dark);
font-size: clamp(1.35rem,2vw,1.7rem);
font-weight: 750;
line-height: 1.05;
letter-spacing: -.035em;
}
/* LINES */
.ng-init-idea-lines {
display: grid;
gap: .8rem;
}
.ng-init-idea-lines span {
height: 1px;
background: rgba(46,59,50,.12);
}
.ng-init-idea-lines span:nth-child(2) {
width: 88%;
}
.ng-init-idea-lines span:nth-child(3) {
width: 67%;
}
/* PROMPTS */
.ng-init-idea-prompts {
display: flex;
flex-wrap: wrap;
gap: .45rem;
margin-top: 1.5rem;
}
.ng-init-idea-prompts span {
padding: .4rem .65rem;
color: rgba(46,59,50,.58);
background: var(--color-green-light);
border-radius: 999px;
font-size: .57rem;
font-weight: 800;
}
/* PAPER FOOTER */
.ng-init-idea-paper-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.6rem;
padding-top: 1rem;
border-top: 1px solid rgba(46,59,50,.09);
}
.ng-init-idea-paper-footer span {
color: rgba(46,59,50,.43);
font-size: .61rem;
font-weight: 800;
}
.ng-init-idea-paper-footer strong {
width: 32px;
height: 32px;
display: grid;
place-items: center;
color: var(--color-coral);
background: rgba(240,102,83,.08);
border-radius: 50%;
}
/* LITTLE NOTE */
.ng-init-idea-note {
position: absolute;
right: 0;
bottom: 0;
display: flex;
align-items: flex-start;
gap: .55rem;
}
.ng-init-idea-note > span {
width: 7px;
height: 7px;
margin-top: .2rem;
background: var(--color-coral);
border-radius: 50%;
}
.ng-init-idea-note p {
margin: 0;
color: rgba(46,59,50,.44);
font-size: .6rem;
line-height: 1.35;
}
.ng-init-idea-note strong {
display: block;
color: var(--color-dark);
font-weight: 850;
}
/* BOTTOM ROUTE */
.ng-init-idea-route {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: clamp(4rem,6vw,5rem);
padding-top: 1.25rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-init-idea-route span {
color: rgba(46,59,50,.45);
font-size: .59rem;
font-weight: 850;
letter-spacing: .12em;
}
.ng-init-idea-route i {
width: 38px;
height: 1px;
background: var(--color-coral);
opacity: .55;
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-init-idea-layout {
grid-template-columns: 1fr;
gap: 4rem;
}
.ng-init-idea-visual {
justify-self: center;
}
}
@media (max-width: 520px) {
.ng-init-idea-actions {
align-items: flex-start;
flex-direction: column;
}
.ng-init-idea-visual {
width: 100%;
}
.ng-init-idea-route {
gap: .6rem;
}
.ng-init-idea-route i {
width: 20px;
}
}
/* INITIATIEVEN CTA — MATCH REST OF PAGE */
/* same heading treatment as the other initiative sections */
/* keep the section on the same horizontal grid as the rest */
/* slightly rebalance the columns now that we're using the correct page container */
/* INITIATIEVEN CTA — MATCH REST OF PAGE */
.ng-init-idea, .ng-init-idea button, .ng-init-idea a, .ng-init-idea input, .ng-init-idea textarea {
font-family: Inter, sans-serif;
}
/* same heading treatment as the other initiative sections */
.ng-init-idea-copy h2 {
font-family: Inter, sans-serif;
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: .97;
letter-spacing: -.052em;
}
/* keep the section on the same horizontal grid as the rest */
/* slightly rebalance the columns now that we're using the correct page container */
.ng-init-idea-layout {
grid-template-columns: minmax(0, 1fr) minmax(360px, .62fr);
gap: clamp(3.5rem, 7vw, 6.5rem);
}
/* Fix CTA kicker being overwritten by body paragraph styles */
body .ng-init-idea-copy > .ng-init-idea-kicker {
margin: 0 0 1.15rem;
color: var(--color-coral);
font-family: Inter, sans-serif;
font-size: .74rem;
font-weight: 850;
line-height: 1.3;
letter-spacing: .15em;
text-transform: uppercase;
}
/* INITIATIEVEN HERO — RESTORE CONTENT */
/* heading */
/* single highlighted part */
/* intro */
/* NoordgroeiT only */
/* keep kicker visible */
/* CTA stays underneath the copy */
/* INITIATIEVEN HERO — FINAL ALIGNMENT FIX */
/* COPY BACK ON THE SITE GRID */
/* KICKER */
/* HEADING */
/* INTRO */
/* RESTORE THE BUTTON TOO */
/* MOBILE */
/* INITIATIEVEN HERO — MATCH SECTION ALIGNMENT */
/* Make sure the copy itself does not escape the wrapper */
/* INITIATIEVEN HERO — FORCE SAME LEFT ALIGNMENT AS SECTIONS */
/* remove anything previously shifting the text */
/* NOORDBUITEN — HERO */
/* BACKGROUND IMAGE */
/* OVERLAY */
/* subtle depth */
/* CONTENT GRID */
/* KICKER */
/* TITLE */
/* INTRO */
/* BUTTON */
/* RELATION — NOORDGROEIT */
/* SCROLL CUE */
/* NEXT SECTION — START */
/* MOBILE */
/* NOORDBUITEN — WAT IS NOORDBUITEN */
.ng-nb-story {
position: relative;
padding: clamp(5.5rem, 9vw, 8.5rem) 0;
overflow: hidden;
background: var(--color-cream);
}
/* HEADER */
.ng-nb-story__heading {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, .7fr);
align-items: end;
gap: clamp(3rem, 7vw, 7rem);
margin-bottom: clamp(3.5rem, 6vw, 5.5rem);
}
.ng-nb-story__kicker {
margin: 0 0 1rem;
color: var(--color-coral);
font-size: .74rem;
font-weight: 850;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-nb-story h2 {
max-width: 720px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-home-section-title);
font-weight: 750;
line-height: .97;
letter-spacing: -.052em;
}
.ng-nb-story h2 span {
display: block;
color: var(--color-green);
}
.ng-nb-story__intro {
max-width: 500px;
}
.ng-nb-story__intro p {
margin: 0;
color: rgba(46, 59, 50, .72);
font-size: var(--ng-home-body);
line-height: 1.68;
}
.ng-nb-story__intro p + p {
margin-top: 1rem;
}
/* VISUAL */
.ng-nb-story__visual {
position: relative;
min-height: 560px;
}
/* IMAGE */
.ng-nb-story__photo {
position: absolute;
inset: 0 7% 0 5%;
margin: 0;
overflow: hidden;
border-radius: 2.5rem .8rem 2.5rem .8rem;
background: var(--color-green);
}
.ng-nb-story__photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.ng-nb-story__visual:hover .ng-nb-story__photo img {
transform: scale(1.02);
}
/* PLACE LABELS */
.ng-nb-story__marker {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .55rem .8rem;
border: 1px solid rgba(46, 59, 50, .12);
border-radius: 999px;
background: rgba(255,255,255,.94);
color: var(--color-dark);
box-shadow: 0 10px 28px rgba(46,59,50,.09);
font-size: .72rem;
font-weight: 800;
backdrop-filter: blur(7px);
}
.ng-nb-story__marker span {
width: 7px;
height: 7px;
flex: 0 0 auto;
background: var(--color-coral);
border-radius: 50%;
}
/* positions */
.ng-nb-story__marker--nature {
top: 13%;
left: 1%;
}
.ng-nb-story__marker--food {
top: 30%;
right: 1%;
}
.ng-nb-story__marker--meet {
top: 56%;
left: 0;
}
.ng-nb-story__marker--learn {
top: 72%;
right: 2%;
}
.ng-nb-story__marker--move {
bottom: 5%;
left: 18%;
}
/* LOCATION */
.ng-nb-story__location {
position: absolute;
z-index: 4;
right: 11%;
bottom: 2rem;
display: flex;
align-items: center;
gap: .75rem;
padding: .8rem 1rem;
background: var(--color-dark);
color: #fff;
border-radius: 1.2rem .35rem 1.2rem 1.2rem;
box-shadow: 0 18px 35px rgba(25,35,28,.18);
}
.ng-nb-story__location-dot {
width: 10px;
height: 10px;
flex: 0 0 auto;
background: var(--color-coral);
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(240,102,83,.13);
}
.ng-nb-story__location div {
display: grid;
gap: .05rem;
}
.ng-nb-story__location small {
color: rgba(255,255,255,.54);
font-size: .6rem;
font-weight: 750;
text-transform: uppercase;
letter-spacing: .1em;
}
.ng-nb-story__location strong {
color: #fff;
font-size: .78rem;
font-weight: 800;
}
/* LITTLE ROUTE UNDER IMAGE */
.ng-nb-story__route {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(.8rem, 2vw, 1.6rem);
margin-top: 2.4rem;
color: rgba(46,59,50,.5);
font-size: .66rem;
font-weight: 850;
letter-spacing: .12em;
}
.ng-nb-story__route i {
width: clamp(20px, 4vw, 55px);
height: 1px;
background: rgba(46,59,50,.18);
}
/* MOBILE */
@media (max-width: 760px) {
.ng-nb-story__heading {
grid-template-columns: 1fr;
align-items: start;
gap: 1.6rem;
}
.ng-nb-story__visual {
min-height: 470px;
}
.ng-nb-story__photo {
inset: 0 0 0 0;
}
.ng-nb-story__marker {
font-size: .65rem;
}
.ng-nb-story__marker--nature {
top: 5%;
left: .5rem;
}
.ng-nb-story__marker--food {
top: 25%;
right: .5rem;
}
.ng-nb-story__marker--meet {
top: 52%;
left: .5rem;
}
.ng-nb-story__marker--learn {
top: 68%;
right: .5rem;
}
.ng-nb-story__marker--move {
bottom: 4.5rem;
left: 1rem;
}
.ng-nb-story__location {
right: 1rem;
bottom: 1rem;
}
.ng-nb-story__route {
flex-wrap: wrap;
justify-content: flex-start;
row-gap: .6rem;
}
}
/* SHARED INNER HERO */
/* IMAGE */
/* OVERLAY */
.ng-inner-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(25, 40, 30, .82) 0%, rgba(25, 40, 30, .58) 42%, rgba(25, 40, 30, .22) 75%, rgba(25, 40, 30, .08) 100%);
}
/* CONTAINER */
/* COPY */
.ng-inner-hero__copy {
max-width: 760px;
}
/* KICKER */
/* TITLE */
/* SCROLL ARROW */
.ng-inner-hero__scroll {
position: absolute;
z-index: 4;
left: 50%;
bottom: 1.25rem;
width: 31px;
height: 31px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.28);
border-radius: 50%;
color: rgba(255,255,255,.8);
font-size: .7rem;
transform: translateX(-50%);
}
/* MOBILE */
/* SHARED INNER HERO */
.ng-inner-hero {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
overflow: hidden;
background: var(--color-dark);
color: #fff;
}
/* IMAGE */
.ng-inner-hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* OVERLAY */
.ng-inner-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(24, 39, 29, .84) 0%, rgba(24, 39, 29, .62) 38%, rgba(24, 39, 29, .27) 70%, rgba(24, 39, 29, .07) 100%);
}
/* CONTENT */
.ng-inner-hero .site-container {
position: relative;
z-index: 3;
}
.ng-inner-hero__copy {
position: relative;
max-width: 850px;
}
/* CORAL SIGNATURE */
.ng-inner-hero__detail {
display: flex;
align-items: center;
gap: .65rem;
margin-bottom: 1.25rem;
}
.ng-inner-hero__detail span {
width: 7px;
height: 7px;
flex: 0 0 auto;
background: var(--color-coral);
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(240,102,83,.11);
}
.ng-inner-hero__detail i {
display: block;
width: 46px;
height: 1px;
background: rgba(255,255,255,.48);
}
/* TITLE */
.ng-inner-hero h1 {
margin: 0;
color: #fff;
font-size: clamp(4.4rem, 7vw, 7.5rem);
font-weight: 760;
line-height: .88;
letter-spacing: -.065em;
}
/* NoordbuiTen keeps its branding */
.ng-inner-hero--noordbuiten h1 {
letter-spacing: -.055em;
}
/* SMALL META */
.ng-inner-hero__meta {
display: flex;
align-items: center;
gap: .4rem;
margin: 1.35rem 0 0;
color: rgba(255,255,255,.52);
font-size: .68rem;
font-weight: 750;
letter-spacing: .08em;
text-transform: uppercase;
}
.ng-inner-hero__meta span {
color: rgba(255,255,255,.88);
}
/* little separator */
.ng-inner-hero__meta span::before {
content: "·";
margin-right: .4rem;
color: var(--color-coral);
}
/* SCROLL */
.ng-inner-hero__scroll {
position: absolute;
z-index: 4;
left: 50%;
bottom: 1.25rem;
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.28);
border-radius: 50%;
color: rgba(255,255,255,.78);
font-size: .7rem;
transform: translateX(-50%);
}
/* subtle movement */
.ng-inner-hero__scroll {
animation: ngHeroArrow 2.2s ease-in-out infinite;
}
@keyframes ngHeroArrow {
0%, 100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(4px);
}
}
/* MOBILE */
@media (max-width: 700px) {
.ng-inner-hero {
min-height: 500px;
}
.ng-inner-hero h1 {
font-size: clamp(3.1rem, 13vw, 4.7rem);
}
.ng-inner-hero__detail {
margin-bottom: 1rem;
}
.ng-inner-hero__detail i {
width: 35px;
}
.ng-inner-hero__meta {
font-size: .61rem;
}
}
.ng-over-page section:not(.ng-inner-hero) h2, .ng-init-page section:not(.ng-inner-hero) h2, .ng-nb-page section:not(.ng-inner-hero) h2 {
font-size: var(--ng-section-title);
line-height: 1.06;
letter-spacing: -.035em;
font-weight: 750;
}
.ng-over-page section:not(.ng-inner-hero) h2, .ng-init-page section:not(.ng-inner-hero) h2, .ng-nb-page section:not(.ng-inner-hero) h2 {
margin-bottom: 1.25rem;
}
:root {
--ng-section-title: clamp(2rem, 2.65vw, 2.8rem);
}
/* Shared inner-page section headings */
.ng-over-page section:not(.ng-inner-hero) h2, .ng-team-page section:not(.ng-inner-hero) h2, .ng-finance-page section:not(.ng-inner-hero) h2, .ng-init-page section:not(.ng-inner-hero) h2, .ng-nb-page section:not(.ng-inner-hero) h2 {
font-size: var(--ng-section-title);
line-height: 1.06;
letter-spacing: -.035em;
font-weight: 750;
}
/* Mobile */
@media (max-width: 700px) {
:root {
--ng-section-title: clamp(1.9rem, 8vw, 2.35rem);
}
}
/* FINANCIËN & TRANSPARANTIE — SMALLER SECTION TITLES */
.ng-finance-ledger h2, .ng-finance-question h2, .ng-finance-responsibility h2, .ng-finance-papertrail h2, .ng-finance-archive h2 {
font-size: var(--ng-section-title) !important;
line-height: 1.06 !important;
letter-spacing: -.035em !important;
font-weight: 750 !important;
}
body.page-id-YOURPAGEID main section:not(:first-child) h2 {
font-size: var(--ng-section-title) !important;
line-height: 1.06 !important;
letter-spacing: -.035em !important;
}
.ng-inner-hero h1 {
margin: 0;
color: #fff;
font-size: clamp(4rem, 6.6vw, 7.35rem);
font-weight: 760;
line-height: .87;
letter-spacing: -.072em;
}
/* FINANCE — JOURNEY HEADING */
.ng-finance-journey-heading h2 {
font-size: var(--ng-section-title) !important;
line-height: 1.06 !important;
letter-spacing: -.035em !important;
font-weight: 750 !important;
}
.ng-finance-journey-heading h2 span {
font-size: inherit !important;
line-height: inherit !important;
}
/* INNER HERO TITLES — MATCH HOMEPAGE HERO SCALE */
body .ng-inner-hero h1 {
font-size: clamp(4rem, 6.6vw, 7.35rem) !important;
line-height: .87 !important;
letter-spacing: -.072em !important;
font-weight: 760 !important;
}
@media (max-width: 640px) {
body .ng-inner-hero h1 {
font-size: clamp(2.7rem, 13vw, 4.25rem) !important;
}
}
.ng-finance-journey-heading h2 {
font-size: var(--ng-section-title) !important;
}
/* INNER HERO TITLES — MATCH CURRENT HOMEPAGE HERO */
body .ng-inner-hero h1 {
max-width: 600px;
font-size: clamp(3.05rem, 4vw, 4.45rem) !important;
line-height: .96 !important;
letter-spacing: -.055em !important;
font-weight: 760 !important;
}
@media (max-width: 850px) {
body .ng-inner-hero h1 {
max-width: 520px;
font-size: clamp(2.8rem, 7vw, 3.8rem) !important;
}
}
@media (max-width: 560px) {
body .ng-inner-hero h1 {
font-size: clamp(2.55rem, 11vw, 3.2rem) !important;
}
}
/* INITIATIEVEN — RHYTHM CLEANUP — Smaller headings = tighter, cleaner spacing */
/* 1. Consistent section breathing room */
.ng-init-page section:not(.ng-inner-hero) {
padding-top: clamp(5.5rem, 7vw, 7rem);
padding-bottom: clamp(5.5rem, 7vw, 7rem);
}
/* 2. Titles themselves — Don't let old margins create random gaps */
.ng-init-page section:not(.ng-inner-hero) h2 {
margin-top: 0;
margin-bottom: 0;
}
/* 3. Kicker → title relationship — Keep these visually together */
.ng-init-page section:not(.ng-inner-hero) :is([class*="kicker"], .eyebrow) {
margin-bottom: .8rem;
}
/* 4. Main section introduction → content — The old layouts left room for much larger headings */
.ng-init-page section:not(.ng-inner-hero) .site-container > :first-child:has(h2) {
margin-bottom: clamp(2.75rem, 4vw, 4.25rem);
}
/* 5. Two-column section intros — Keep title and intro text neatly aligned */
.ng-init-page section:not(.ng-inner-hero) .site-container > :first-child:has(h2) {
align-items: end;
column-gap: clamp(2.5rem, 6vw, 6rem);
}
/* 6. Intro paragraphs should sit cleanly */
.ng-init-page section:not(.ng-inner-hero) .site-container > :first-child:has(h2) > p {
margin-top: 0;
margin-bottom: .2rem;
}
/* VAN IDEE NAAR INITIATIEF — REMOVE OLD GIANT-HEADING SPACE */
.ng-init-rise {
min-height: 0 !important;
padding-top: clamp(5.5rem, 7vw, 7rem) !important;
padding-bottom: clamp(5rem, 6.5vw, 6.5rem) !important;
}
.ng-init-rise > .site-container {
min-height: 0 !important;
}
/* HEIKANTSE TUYNEN — CLEANER RHYTHM */
/* Main section introduction */
/* Keep the main heading compact */
/* Intro paragraph on the right */
/* The SECOND title shouldn't compete with the section title */
/* Space between little label and second heading */
/* Give the actual project content breathing room */
/* JOUW IDEE VOOR DE WIJK — COMPACT */
.ng-init-idea {
min-height: 0 !important;
height: auto !important;
padding-top: 70px !important;
padding-bottom: 70px !important;
}
.ng-init-idea .site-container {
min-height: 0 !important;
height: auto !important;
}
/* Don't let the main composition create artificial height */
/* Remove old oversized vertical margins */
/* Text rhythm */
.ng-init-idea h2 {
margin-top: 12px !important;
margin-bottom: 18px !important;
}
/* Bottom ZIEN — DELEN — SAMEN KIJKEN line */
/* JOUW IDEE — move only the left column upward */
.ng-init-rise + section .site-container > div > :first-child {
position: relative;
top: -70px;
}
/* Move ONLY the left copy upward */
.ng-init-idea-copy {
align-self: start !important;
margin-top: 50px !important;
}
/* NOORDBUITEN — FIRST SECTION AFTER HERO */
.ng-inner-hero--noordbuiten + section {
padding-top: 100px !important;
}
/* NOORDBUITEN — DE PLEK GROEIT */
.ng-nb-grow {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: var(--color-dark);
color: var(--color-white);
}
/* Decorative route */
.ng-nb-grow::before {
content: "";
position: absolute;
top: 10%;
right: -170px;
width: 420px;
height: 420px;
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 50%;
pointer-events: none;
}
/* HEADER */
.ng-nb-grow-heading {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(300px, .55fr);
align-items: end;
gap: clamp(3rem, 7vw, 7rem);
margin-bottom: clamp(4.5rem, 7vw, 7rem);
}
.ng-nb-grow-kicker {
margin: 0 0 .9rem;
color: var(--color-coral);
font-size: .73rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-nb-grow-heading h2 {
max-width: 640px;
margin: 0;
color: #fff;
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.02;
letter-spacing: -.04em;
}
.ng-nb-grow-heading h2 span {
display: block;
color: #a9c9aa;
}
.ng-nb-grow-heading > p {
max-width: 420px;
margin: 0;
color: rgba(255, 255, 255, .64);
font-size: var(--ng-home-body);
line-height: 1.7;
}
/* PROJECT ROW */
.ng-nb-grow-item {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, .7fr);
align-items: center;
gap: clamp(3rem, 7vw, 7rem);
padding: clamp(2.5rem, 4vw, 4rem) 0;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.ng-nb-grow-item--reverse {
grid-template-columns: minmax(300px, .7fr) minmax(0, 1.2fr);
}
.ng-nb-grow-item--reverse .ng-nb-grow-image {
order: 2;
}
/* IMAGE */
.ng-nb-grow-image {
position: relative;
height: clamp(290px, 32vw, 430px);
margin: 0;
overflow: hidden;
border-radius: 10px 62px 10px 62px;
}
.ng-nb-grow-item--reverse .ng-nb-grow-image {
border-radius: 62px 10px 62px 10px;
}
.ng-nb-grow-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.ng-nb-grow-item:hover .ng-nb-grow-image img {
transform: scale(1.025);
}
/* Status pill */
.ng-nb-grow-status {
position: absolute;
left: 18px;
bottom: 18px;
padding: .55rem .85rem;
border-radius: 999px;
background: rgba(244, 241, 236, .96);
color: var(--color-dark);
font-size: .67rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
/* COPY */
.ng-nb-grow-copy {
position: relative;
max-width: 430px;
}
.ng-nb-grow-number {
display: inline-block;
margin-bottom: 2.25rem;
color: rgba(255, 255, 255, .26);
font-size: .78rem;
font-weight: 800;
letter-spacing: .12em;
}
.ng-nb-grow-label {
margin: 0 0 .7rem;
color: var(--color-coral);
font-size: .7rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-nb-grow-copy h3 {
margin: 0;
color: #fff;
font-size: clamp(2rem, 3vw, 3.1rem);
font-weight: 750;
line-height: 1;
letter-spacing: -.045em;
}
.ng-nb-grow-copy > p:not(.ng-nb-grow-label) {
max-width: 390px;
margin: 1.3rem 0 0;
color: rgba(255, 255, 255, .65);
line-height: 1.7;
}
.ng-nb-grow-line {
display: block;
width: 58px;
height: 1px;
margin-top: 2rem;
background: var(--color-coral);
}
/* FOOTER */
.ng-nb-grow-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding-top: 3rem;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.ng-nb-grow-footer p {
margin: 0;
color: rgba(255, 255, 255, .48);
font-size: .9rem;
}
.ng-nb-grow-footer a {
display: inline-flex;
align-items: center;
gap: 1rem;
color: #fff;
font-size: .86rem;
font-weight: 750;
text-decoration: none;
}
.ng-nb-grow-footer a > span:last-child {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 50%;
transition: transform .25s ease, background .25s ease;
}
.ng-nb-grow-footer a:hover > span:last-child {
transform: translate(3px, -3px);
background: rgba(255, 255, 255, .08);
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-nb-grow-heading, .ng-nb-grow-item, .ng-nb-grow-item--reverse {
grid-template-columns: 1fr;
}
.ng-nb-grow-item--reverse .ng-nb-grow-image {
order: 0;
}
.ng-nb-grow-heading {
align-items: start;
gap: 1.75rem;
}
.ng-nb-grow-copy {
max-width: 600px;
}
.ng-nb-grow-number {
margin-bottom: 1.4rem;
}
.ng-nb-grow-footer {
align-items: flex-start;
flex-direction: column;
}
}
/* NOORDBUITEN — WAT GEBEURT HIER */
/* HEADING */
/* MAIN LAYOUT */
/* IMAGE */
/* ACTIVITY ROWS */
/* FOOTER */
/* RESPONSIVE */
/* NOORDBUITEN LEEFT */
.ng-nb-alive {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0 clamp(5.5rem, 7vw, 7rem);
background: var(--color-cream);
}
/* HEADER */
.ng-nb-alive-heading {
margin-bottom: clamp(4rem, 6vw, 5.5rem);
}
.ng-nb-alive-kicker {
margin: 0 0 .85rem;
color: var(--color-coral);
font-size: .73rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-nb-alive-heading-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
gap: clamp(3rem, 7vw, 7rem);
align-items: end;
}
.ng-nb-alive-heading h2 {
max-width: 660px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-nb-alive-heading-row > p {
max-width: 410px;
margin: 0;
color: rgba(46, 59, 50, .66);
line-height: 1.7;
}
/* STAGE */
.ng-nb-alive-stage {
position: relative;
min-height: 720px;
}
/* wandering coral line */
.ng-nb-alive-route {
position: absolute;
inset: 8% 0 0;
width: 100%;
height: 82%;
pointer-events: none;
}
.ng-nb-alive-route path {
fill: none;
stroke: var(--color-coral);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 3 12;
opacity: .48;
}
/* CENTRAL PHOTO */
.ng-nb-alive-photo {
position: absolute;
z-index: 2;
top: 90px;
left: 50%;
width: min(46vw, 560px);
height: 510px;
margin: 0;
overflow: hidden;
transform: translateX(-50%) rotate(-1.5deg);
border-radius: 70px 12px 70px 12px;
box-shadow: 0 30px 70px rgba(46, 59, 50, .14);
background: #dfe8dc;
}
.ng-nb-alive-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s ease;
}
.ng-nb-alive-photo:hover img {
transform: scale(1.025);
}
.ng-nb-alive-photo figcaption {
position: absolute;
left: 18px;
bottom: 18px;
padding: .55rem .85rem;
border-radius: 999px;
background: rgba(244, 241, 236, .94);
color: var(--color-dark);
font-size: .67rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
/* FLOATING NOTES */
.ng-nb-alive-note {
position: absolute;
z-index: 3;
width: 255px;
padding: 1.35rem 1.4rem 1.5rem;
border: 1px solid rgba(46, 59, 50, .13);
background: rgba(255, 255, 255, .84);
backdrop-filter: blur(7px);
box-shadow: 0 15px 35px rgba(46, 59, 50, .07);
transition: transform .3s ease, box-shadow .3s ease;
}
.ng-nb-alive-note:hover {
transform: translateY(-5px) rotate(0deg);
box-shadow: 0 22px 48px rgba(46, 59, 50, .12);
}
/* each one deliberately slightly different */
.ng-nb-alive-note--meet {
top: 25px;
left: 4%;
transform: rotate(-2deg);
border-radius: 8px 34px 8px 34px;
}
.ng-nb-alive-note--make {
top: 365px;
left: 1%;
transform: rotate(1.5deg);
border-radius: 32px 8px 32px 8px;
}
.ng-nb-alive-note--learn {
top: 500px;
right: 7%;
transform: rotate(-1.5deg);
border-radius: 8px 34px 8px 34px;
}
.ng-nb-alive-note--play {
top: 115px;
right: 2%;
transform: rotate(2deg);
border-radius: 34px 8px 34px 8px;
}
/* little coral pin */
.ng-nb-alive-dot {
display: block;
width: 8px;
height: 8px;
margin-bottom: 1rem;
border-radius: 50%;
background: var(--color-coral);
}
.ng-nb-alive-label {
margin: 0 0 .45rem;
color: var(--color-coral);
font-size: .67rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-nb-alive-note h3 {
margin: 0;
color: var(--color-dark);
font-size: clamp(1.2rem, 1.55vw, 1.5rem);
font-weight: 750;
line-height: 1.13;
letter-spacing: -.035em;
}
/* LITTLE MESSAGE */
.ng-nb-alive-message {
position: absolute;
z-index: 4;
left: 50%;
bottom: 4px;
display: flex;
align-items: flex-start;
gap: .75rem;
transform: translateX(-50%) rotate(-2deg);
}
.ng-nb-alive-message > span {
color: var(--color-coral);
font-size: 1.5rem;
}
.ng-nb-alive-message p {
margin: 0;
color: rgba(46, 59, 50, .65);
font-size: .95rem;
line-height: 1.35;
}
.ng-nb-alive-message strong {
display: block;
color: var(--color-dark);
font-weight: 750;
}
/* FOOTER */
.ng-nb-alive-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding-top: 2.25rem;
border-top: 1px solid rgba(46, 59, 50, .13);
}
.ng-nb-alive-footer p {
margin: 0;
color: rgba(46, 59, 50, .6);
font-size: .9rem;
}
.ng-nb-alive-footer a {
display: inline-flex;
align-items: center;
gap: .9rem;
color: var(--color-dark);
font-size: .86rem;
font-weight: 800;
text-decoration: none;
}
.ng-nb-alive-footer a span {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid rgba(46, 59, 50, .18);
border-radius: 50%;
transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.ng-nb-alive-footer a:hover span {
transform: translate(3px, -3px);
background: var(--color-dark);
color: #fff;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-nb-alive-heading-row {
grid-template-columns: 1fr;
gap: 1.7rem;
}
.ng-nb-alive-stage {
min-height: auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.ng-nb-alive-route {
display: none;
}
.ng-nb-alive-photo {
position: relative;
top: auto;
left: auto;
grid-column: 1 / -1;
width: 100%;
height: clamp(380px, 65vw, 520px);
transform: rotate(-1deg);
}
.ng-nb-alive-note {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: auto;
transform: none;
}
.ng-nb-alive-message {
position: relative;
left: auto;
bottom: auto;
grid-column: 1 / -1;
margin: 1.4rem auto 2rem;
transform: rotate(-1deg);
}
}
@media (max-width: 600px) {
.ng-nb-alive-stage {
grid-template-columns: 1fr;
}
.ng-nb-alive-photo, .ng-nb-alive-message {
grid-column: auto;
}
.ng-nb-alive-footer {
align-items: flex-start;
flex-direction: column;
}
}
/* NOORDBUITEN — WOENSDAG */
/* TOP */
/* BIG WEDNESDAY */
/* little coral marker */
/* COPY */
.ng-nb-wednesday-copy > p:not(.ng-nb-wednesday-small) {
max-width: 480px;
margin: 1.4rem 0 0;
color: rgba(46, 59, 50, .68);
font-size: var(--ng-home-body);
line-height: 1.7;
}
/* BUTTON */
/* WORKBENCH */
/* long wandering work line */
/* TAGS */
/* deliberately scattered */
/* NOTE */
/* FOOTER */
/* RESPONSIVE */
/* NOORDBUITEN — SAMEN MAKEN WE DE PLEK */
.ng-nb-together {
position: relative;
overflow: hidden;
padding: clamp(5.5rem, 7vw, 7rem) 0;
background: var(--color-green-light);
color: var(--color-dark);
}
/* very subtle background detail */
.ng-nb-together::after {
content: "";
position: absolute;
width: 420px;
height: 420px;
right: -210px;
top: 50%;
transform: translateY(-50%);
border: 1px solid rgba(46, 59, 50, .08);
border-radius: 50%;
pointer-events: none;
}
/* TOP */
.ng-nb-together-top {
display: grid;
grid-template-columns: minmax(240px, .6fr) minmax(0, 1fr);
align-items: center;
gap: clamp(4rem, 9vw, 9rem);
}
/* BIG WORD */
.ng-nb-together-word {
color: var(--color-green);
font-size: clamp(5rem, 9vw, 9rem);
font-weight: 800;
line-height: .78;
letter-spacing: -.075em;
writing-mode: vertical-rl;
transform: rotate(180deg);
opacity: .95;
}
/* COPY */
.ng-nb-together-copy {
max-width: 620px;
}
.ng-nb-together-kicker {
margin: 0 0 .9rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-nb-together-copy h2 {
max-width: 600px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-nb-together-copy > p:not(.ng-nb-together-kicker) {
max-width: 520px;
margin: 1.35rem 0 0;
color: rgba(46, 59, 50, .67);
font-size: var(--ng-home-body);
line-height: 1.7;
}
/* BUTTON */
.ng-nb-together-button {
display: inline-flex;
align-items: center;
gap: 1rem;
margin-top: 2rem;
padding: .55rem .6rem .55rem 1.2rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .84rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease;
}
.ng-nb-together-button > span:last-child {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
transition: transform .25s ease;
}
.ng-nb-together-button:hover {
transform: translateY(-3px);
}
.ng-nb-together-button:hover > span:last-child {
transform: translate(2px, -2px);
}
/* ACTIVITY STRIP */
.ng-nb-together-strip {
display: grid;
grid-template-columns: minmax(190px, .55fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 5vw, 5rem);
margin-top: clamp(4.5rem, 7vw, 6.5rem);
padding: 2rem 0;
border-top: 1px solid rgba(46, 59, 50, .15);
border-bottom: 1px solid rgba(46, 59, 50, .15);
}
.ng-nb-together-strip-intro {
display: flex;
align-items: center;
gap: .9rem;
}
.ng-nb-together-strip-intro > span {
display: grid;
flex: 0 0 auto;
width: 36px;
height: 36px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-size: .7rem;
}
.ng-nb-together-strip-intro p {
margin: 0;
color: rgba(46, 59, 50, .58);
font-size: .76rem;
line-height: 1.35;
text-transform: uppercase;
letter-spacing: .06em;
}
.ng-nb-together-strip-intro strong {
display: block;
color: var(--color-dark);
font-weight: 800;
}
/* actual activities */
.ng-nb-together-things {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.ng-nb-together-things > span {
display: inline-flex;
align-items: center;
gap: .65rem;
color: var(--color-dark);
font-size: .8rem;
font-weight: 750;
white-space: nowrap;
}
.ng-nb-together-things i {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid rgba(46, 59, 50, .13);
border-radius: 50%;
background: rgba(255, 255, 255, .48);
font-style: normal;
font-size: .8rem;
}
/* BOTTOM NOTE */
.ng-nb-together-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
padding-top: 2rem;
}
.ng-nb-together-bottom p {
max-width: 630px;
margin: 0;
color: rgba(46, 59, 50, .58);
font-size: .86rem;
line-height: 1.6;
}
.ng-nb-together-bottom strong {
color: var(--color-dark);
}
.ng-nb-together-bottom a {
display: inline-flex;
align-items: center;
gap: .7rem;
color: var(--color-dark);
font-size: .82rem;
font-weight: 800;
text-decoration: none;
}
.ng-nb-together-bottom a span {
transition: transform .25s ease;
}
.ng-nb-together-bottom a:hover span {
transform: translateX(4px);
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-nb-together-top {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.ng-nb-together-word {
writing-mode: initial;
transform: none;
font-size: clamp(4rem, 16vw, 6.5rem);
line-height: .85;
}
.ng-nb-together-strip {
grid-template-columns: 1fr;
}
.ng-nb-together-things {
justify-content: flex-start;
flex-wrap: wrap;
gap: 1rem 2rem;
}
}
@media (max-width: 600px) {
.ng-nb-together-bottom {
align-items: flex-start;
flex-direction: column;
gap: 1.25rem;
}
.ng-nb-together-things {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
.ng-nb-together-things > span {
white-space: normal;
}
}
/* NOORDBUITEN — SUB-BRAND NAV DETAIL */
.ng-primary-navigation .ng-nav-noordbuiten {
position: relative;
color: #44606F !important;
transition: color .25s ease;
}
/* Coral logo-colour indicator */
.ng-primary-navigation .ng-nav-noordbuiten::after {
content: "";
position: absolute;
left: 50%;
bottom: 4px;
width: 0;
height: 2px;
border-radius: 999px;
background: #EA5D57;
transform: translateX(-50%);
transition: width .25s ease;
}
/* Keep the slate word, reveal coral on interaction */
.ng-primary-navigation .ng-nav-noordbuiten:hover, .ng-primary-navigation .ng-nav-noordbuiten:focus-visible {
color: #44606F !important;
}
.ng-primary-navigation .ng-nav-noordbuiten:hover::after, .ng-primary-navigation .ng-nav-noordbuiten:focus-visible::after {
width: 26px;
}
/* PLEKKEN & PROJECTEN — PAGE */
.ng-nbp-page {
background: var(--color-cream);
}
/* unique hero image crop ONLY */
/* PROGRESS SECTION */
.ng-nbp-progress {
position: relative;
padding: clamp(5.25rem, 7vw, 7rem) 0 clamp(5.5rem, 7vw, 7rem);
overflow: hidden;
background: var(--color-cream);
}
.ng-nbp-kicker {
margin: 0 0 .85rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
/* HEADING */
.ng-nbp-progress-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .58fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(4rem, 6vw, 5.5rem);
}
.ng-nbp-progress-heading h2 {
max-width: 620px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.04;
letter-spacing: -.04em;
}
.ng-nbp-progress-intro {
max-width: 430px;
}
.ng-nbp-progress-intro p {
margin: 0;
color: rgba(46, 59, 50, .67);
font-size: var(--ng-home-body);
line-height: 1.68;
}
.ng-nbp-progress-intro p + p {
margin-top: .8rem;
}
/* SITE BOARD */
.ng-nbp-board {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(360px, .72fr);
min-height: 610px;
overflow: hidden;
border: 1px solid rgba(46, 59, 50, .14);
border-radius: 12px 64px 12px 64px;
background: #fff;
}
/* IMAGE */
.ng-nbp-board-visual {
position: relative;
min-height: 610px;
margin: 0;
overflow: hidden;
background: #dce5d9;
}
.ng-nbp-board-visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(26, 39, 30, .5), transparent 45%);
pointer-events: none;
}
.ng-nbp-board-visual img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s ease;
}
.ng-nbp-board:hover .ng-nbp-board-visual img {
transform: scale(1.018);
}
/* location tag */
.ng-nbp-board-visual figcaption {
position: absolute;
z-index: 3;
left: 28px;
bottom: 26px;
display: flex;
align-items: center;
gap: .7rem;
color: #fff;
font-size: .7rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-nbp-board-visual figcaption span {
opacity: .7;
}
/* map-ish markers */
/* INFORMATION SIDE */
.ng-nbp-board-info {
display: flex;
flex-direction: column;
padding: clamp(2rem, 3.3vw, 3.25rem);
}
/* top */
.ng-nbp-board-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(46, 59, 50, .13);
color: rgba(46, 59, 50, .48);
font-size: .66rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
/* STATUS GROUPS */
.ng-nbp-status-group {
padding: 1.65rem 0;
border-bottom: 1px solid rgba(46, 59, 50, .12);
}
.ng-nbp-status-label {
display: flex;
align-items: center;
gap: .65rem;
margin: 0 0 1rem;
color: var(--color-dark);
font-size: .69rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-nbp-status-dot {
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 50%;
}
.ng-nbp-status-dot--here {
background: #3E6B47;
}
.ng-nbp-status-dot--building {
background: var(--color-coral);
}
/* list */
.ng-nbp-status-group ul {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.ng-nbp-status-group li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.5rem;
padding: .55rem 0;
color: var(--color-dark);
}
.ng-nbp-status-group li span {
font-size: .9rem;
font-weight: 720;
}
.ng-nbp-status-group li small {
color: rgba(46, 59, 50, .49);
font-size: .69rem;
text-align: right;
}
/* WATER NOTE */
/* BOTTOM ROUTE */
.ng-nbp-progress-route {
display: grid;
grid-template-columns: auto 1fr auto 1fr auto;
align-items: center;
gap: 1.25rem;
margin-top: 2rem;
color: rgba(46, 59, 50, .45);
font-size: .64rem;
font-weight: 800;
letter-spacing: .12em;
}
.ng-nbp-progress-route i {
display: block;
height: 1px;
background: repeating-linear-gradient(to right, rgba(46, 59, 50, .25) 0 4px, transparent 4px 11px);
}
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-nbp-progress-heading {
grid-template-columns: 1fr;
align-items: start;
gap: 1.75rem;
}
.ng-nbp-board {
grid-template-columns: 1fr;
}
.ng-nbp-board-visual {
min-height: clamp(380px, 65vw, 520px);
}
}
@media (max-width: 600px) {
.ng-nbp-progress {
padding: 4.5rem 0;
}
.ng-nbp-board {
border-radius: 10px 38px 10px 38px;
}
.ng-nbp-board-info {
padding: 1.6rem 1.35rem;
}
.ng-nbp-progress-route {
grid-template-columns: 1fr;
gap: .7rem;
}
.ng-nbp-progress-route i {
width: 45px;
}
}
/* PLEKKEN & PROJECTEN — INTRO */
.ng-nbp-intro {
position: relative;
overflow: hidden;
padding: clamp(5rem, 7vw, 7rem) 0 clamp(3rem, 4vw, 4rem);
background: var(--color-cream);
}
/* subtle giant decorative circle like our other pages */
.ng-nbp-intro::after {
content: "";
position: absolute;
top: 50%;
right: -170px;
width: 360px;
height: 360px;
border: 44px solid rgba(62, 107, 71, .035);
border-radius: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* LAYOUT */
.ng-nbp-intro-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
align-items: center;
gap: clamp(4rem, 9vw, 9rem);
min-height: 330px;
}
/* COPY */
.ng-nbp-intro-copy {
max-width: 650px;
}
.ng-nbp-intro-kicker {
margin: 0 0 1rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nbp-intro-copy h1 {
max-width: 620px;
margin: 0;
color: var(--color-dark);
font-size: clamp(3rem, 4vw, 4.35rem);
font-weight: 760;
line-height: .96;
letter-spacing: -.055em;
}
.ng-nbp-intro-copy h1 span {
display: block;
color: #3E6B47;
}
.ng-nbp-intro-copy > p:last-child {
max-width: 510px;
margin: 1.35rem 0 0;
color: rgba(46, 59, 50, .64);
font-size: .96rem;
line-height: 1.65;
}
/* ORBIT VISUAL */
.ng-nbp-intro-visual {
position: relative;
width: min(100%, 390px);
aspect-ratio: 1;
justify-self: center;
}
.ng-nbp-orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(46, 59, 50, .11);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.ng-nbp-orbit--outer {
width: 88%;
height: 88%;
}
.ng-nbp-orbit--inner {
width: 58%;
height: 58%;
}
/* center */
.ng-nbp-intro-center {
position: absolute;
top: 50%;
left: 50%;
display: flex;
width: 122px;
height: 122px;
align-items: center;
justify-content: center;
flex-direction: column;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--color-dark);
color: #fff;
text-align: center;
}
.ng-nbp-intro-center small {
margin-bottom: .3rem;
color: rgba(255, 255, 255, .55);
font-size: .58rem;
text-transform: uppercase;
letter-spacing: .1em;
}
.ng-nbp-intro-center strong {
max-width: 75px;
font-size: .82rem;
line-height: 1.1;
}
/* NODES */
.ng-nbp-intro-node {
position: absolute;
display: flex;
align-items: center;
gap: .5rem;
}
.ng-nbp-intro-node span {
display: block;
width: 28px;
height: 28px;
border: 5px solid rgba(255, 255, 255, .85);
border-radius: 50%;
box-shadow: 0 4px 14px rgba(46, 59, 50, .12);
}
.ng-nbp-intro-node small {
color: rgba(46, 59, 50, .52);
font-size: .57rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.ng-nbp-intro-node--green {
top: 1%;
left: 50%;
transform: translateX(-50%);
flex-direction: column;
}
.ng-nbp-intro-node--green span {
background: #3E6B47;
}
.ng-nbp-intro-node--build {
top: 50%;
right: 0;
transform: translateY(-50%);
flex-direction: row-reverse;
}
.ng-nbp-intro-node--build span {
background: var(--color-coral);
}
.ng-nbp-intro-node--meet {
bottom: 1%;
left: 50%;
transform: translateX(-50%);
flex-direction: column-reverse;
}
.ng-nbp-intro-node--meet span {
background: #44606F;
}
.ng-nbp-intro-node--play {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.ng-nbp-intro-node--play span {
background: #C87F4A;
}
/* BOTTOM DETAIL */
.ng-nbp-intro-bottom {
display: flex;
align-items: center;
gap: .75rem;
margin-top: 2rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(46, 59, 50, .11);
}
.ng-nbp-intro-bottom > span {
width: 6px;
height: 6px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--color-coral);
}
.ng-nbp-intro-bottom p {
margin: 0;
color: rgba(46, 59, 50, .52);
font-size: .68rem;
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-nbp-intro-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.ng-nbp-intro-visual {
width: min(100%, 330px);
justify-self: start;
}
}
.ng-nbp-intro-kicker {
display: inline-flex;
align-items: center;
gap: .6rem;
margin: 0 0 1rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nbp-intro-kicker::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-coral);
box-shadow: 0 0 0 3px rgba(240, 104, 80, 0.12);
flex: 0 0 auto;
}
.ng-nbp-intro {
background: #f3f0ea;
}
.ng-nbp-progress {
background: #fffdf9 !important;
}
/* PLEKKEN & PROJECTEN — DIT KRIJGT HIER VORM */
/* quiet decorative circle */
/* HEADING */
/* only literal chosen word is green */
/* PROJECT */
/* IMAGE */
/* COPY */
.ng-nbp-place-copy > p:not(.ng-nbp-place-type) {
max-width: 440px;
margin: 1.3rem 0 0;
color: rgba(255,255,255,.64);
line-height: 1.7;
}
/* LITTLE EDITORIAL NOTE */
/* FOOD FACTS */
/* FOOTER */
/* RESPONSIVE */
/* PLEKKEN & PROJECTEN — BLUEPRINT */
.ng-nbp-blueprint {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: var(--color-dark);
color: #fff;
}
/* HEADER */
.ng-nbp-blueprint-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(4.5rem, 7vw, 6.5rem);
}
.ng-nbp-blueprint-kicker {
margin: 0 0 .9rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-nbp-blueprint-heading h2 {
max-width: 650px;
margin: 0;
color: #fff;
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-nbp-blueprint-heading > p {
max-width: 430px;
margin: 0;
color: rgba(255,255,255,.6);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* PLAN */
.ng-nbp-blueprint-plan {
position: relative;
min-height: 650px;
border-top: 1px solid rgba(255,255,255,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
/* connecting paths */
/* CENTER */
.ng-nbp-plan-center {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
display: flex;
width: 135px;
height: 135px;
align-items: center;
justify-content: center;
flex-direction: column;
transform: translate(-50%, -50%);
border: 1px solid rgba(255,255,255,.16);
border-radius: 50%;
background: #24362b;
text-align: center;
}
.ng-nbp-plan-center small {
margin-bottom: .35rem;
color: var(--color-coral);
font-size: .57rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-nbp-plan-center strong {
max-width: 85px;
color: #fff;
font-size: .86rem;
line-height: 1.15;
}
/* ITEMS */
.ng-nbp-plan-item {
position: absolute;
z-index: 2;
width: 220px;
padding: 1.15rem 1.2rem;
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px 24px 8px 24px;
background: rgba(255,255,255,.055);
backdrop-filter: blur(4px);
}
.ng-nbp-plan-item strong {
display: block;
margin-top: .35rem;
color: #fff;
font-size: 1rem;
line-height: 1.12;
}
.ng-nbp-plan-item p {
margin: .65rem 0 0;
color: rgba(255,255,255,.48);
font-size: .72rem;
line-height: 1.5;
}
.ng-nbp-plan-state {
color: var(--color-coral);
font-size: .57rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-nbp-plan-accent {
color: #a9cbaa;
font-size: .76rem;
font-weight: 800;
letter-spacing: .05em;
}
/* positions */
.ng-nbp-plan-item--kas {
top: 28px;
left: 50%;
transform: translateX(-50%);
}
.ng-nbp-plan-item--coffee {
top: 220px;
left: 4%;
}
.ng-nbp-plan-item--water {
top: 220px;
left: 50%;
transform: translateX(-50%);
}
.ng-nbp-plan-item--workshop {
top: 220px;
right: 4%;
}
.ng-nbp-plan-item--circular {
bottom: 25px;
left: 11%;
}
.ng-nbp-plan-item--terrace {
right: 11%;
bottom: 25px;
}
/* FOOTER */
.ng-nbp-blueprint-footer {
display: flex;
align-items: center;
gap: .75rem;
padding-top: 1.75rem;
}
.ng-nbp-blueprint-footer span {
width: 6px;
height: 6px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--color-coral);
}
.ng-nbp-blueprint-footer p {
margin: 0;
color: rgba(255,255,255,.42);
font-size: .7rem;
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-nbp-blueprint-heading {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.ng-nbp-blueprint-plan {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
min-height: 0;
padding: 2.5rem 0;
}
.ng-nbp-plan-center {
display: none;
}
.ng-nbp-plan-item {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: auto;
transform: none;
}
}
@media (max-width: 560px) {
.ng-nbp-blueprint-plan {
grid-template-columns: 1fr;
}
}
/* BLUEPRINT — CLEAN SITE PLAN */
.ng-nbp-blueprint-plan {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-areas: "kas kas kas" "coffee water workshop" "circular center terrace";
gap: 18px;
min-height: 0;
padding: 52px clamp(24px, 4vw, 52px);
border: 1px solid rgba(255,255,255,.11);
border-radius: 10px 54px 10px 54px;
background: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px), rgba(255,255,255,.018);
background-size: 42px 42px;
overflow: hidden;
}
/* We don't need the old SVG spaghetti anymore */
/* STANDARD PLAN ITEM */
.ng-nbp-plan-item {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: auto;
min-height: 170px;
padding: 1.4rem 1.5rem;
transform: none !important;
border: 1px solid rgba(255,255,255,.12);
border-radius: 8px 28px 8px 28px;
background: rgba(255,255,255,.055);
backdrop-filter: blur(4px);
}
/* little blueprint corner */
.ng-nbp-plan-item::after {
content: "";
position: absolute;
right: 14px;
bottom: 14px;
width: 16px;
height: 16px;
border-right: 1px solid rgba(240,102,83,.45);
border-bottom: 1px solid rgba(240,102,83,.45);
}
.ng-nbp-plan-item strong {
display: block;
margin-top: .45rem;
color: #fff;
font-size: clamp(1rem, 1.35vw, 1.15rem);
line-height: 1.15;
}
.ng-nbp-plan-item p {
max-width: 280px;
margin: .7rem 0 0;
color: rgba(255,255,255,.48);
font-size: .76rem;
line-height: 1.55;
}
/* GRID POSITIONS */
.ng-nbp-plan-item--kas {
grid-area: kas;
width: min(360px, 100%);
min-height: 0;
justify-self: center;
}
.ng-nbp-plan-item--coffee {
grid-area: coffee;
}
.ng-nbp-plan-item--water {
grid-area: water;
border-color: rgba(169,203,170,.28);
background: rgba(169,203,170,.08);
}
.ng-nbp-plan-item--workshop {
grid-area: workshop;
}
.ng-nbp-plan-item--circular {
grid-area: circular;
}
.ng-nbp-plan-item--terrace {
grid-area: terrace;
}
/* WATER — MAIN FEATURE */
.ng-nbp-plan-item--water {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.ng-nbp-plan-item--water .ng-nbp-plan-accent {
color: #a9cbaa;
font-size: clamp(1.35rem, 2vw, 1.8rem);
font-weight: 800;
letter-spacing: -.025em;
}
.ng-nbp-plan-item--water strong {
font-size: clamp(1.2rem, 1.6vw, 1.45rem);
}
.ng-nbp-plan-item--water p {
max-width: 300px;
margin-inline: auto;
}
/* CENTER MESSAGE */
.ng-nbp-plan-center {
position: relative;
grid-area: center;
top: auto;
left: auto;
display: flex;
width: 100%;
min-height: 170px;
align-items: center;
justify-content: center;
flex-direction: column;
transform: none;
border: 1px dashed rgba(240,102,83,.38);
border-radius: 28px 8px 28px 8px;
background: rgba(240,102,83,.035);
text-align: center;
}
.ng-nbp-plan-center::before {
content: "↳";
margin-bottom: .6rem;
color: var(--color-coral);
font-size: 1.25rem;
}
.ng-nbp-plan-center small {
color: var(--color-coral);
}
.ng-nbp-plan-center strong {
max-width: 120px;
font-size: 1rem;
}
/* TOP CARD CONNECTION */
.ng-nbp-plan-item--kas::before {
content: "";
position: absolute;
left: 50%;
bottom: -19px;
width: 1px;
height: 19px;
background: repeating-linear-gradient(to bottom, var(--color-coral) 0 3px, transparent 3px 7px);
}
/* SMALL STATUS LABELS */
.ng-nbp-plan-state, .ng-nbp-plan-accent {
color: var(--color-coral);
font-size: .62rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-nbp-blueprint-plan {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "kas kas" "water water" "coffee workshop" "circular terrace" "center center";
}
.ng-nbp-plan-item--kas {
width: 100%;
}
}
@media (max-width: 560px) {
.ng-nbp-blueprint-plan {
grid-template-columns: 1fr;
grid-template-areas: "kas" "water" "coffee" "workshop" "circular" "terrace" "center";
padding: 28px 18px;
}
.ng-nbp-plan-item, .ng-nbp-plan-center {
min-height: 0;
}
}
/* PLEKKEN & PROJECTEN — NATURE FIELD */
/* large quiet decorative ring */
/* HEADING */
/* only the literal word 'groen' gets green */
/* FIELD */
/* MAIN ORCHARD STAT */
/* NOTES */
/* icon */
/* label */
/* ROOT DRAWING */
/* FOOTER */
/* RESPONSIVE */
/* PLEKKEN & PROJECTEN — GROWING LANDSCAPE */
.ng-nbp-landscape {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: #e8f0e3;
color: var(--color-dark);
}
/* HEADER */
.ng-nbp-landscape-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(4rem, 6vw, 5.5rem);
}
.ng-nbp-landscape-kicker {
margin: 0 0 .9rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-nbp-landscape-heading h2 {
max-width: 640px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
/* only groen is green */
.ng-nbp-landscape-heading h2 span {
color: #3E6B47;
}
.ng-nbp-landscape-heading > p {
max-width: 430px;
margin: 0;
color: rgba(46,59,50,.63);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* LANDSCAPE STAGE */
/* BIG ±40 */
/* GROWING LINE */
.ng-nbp-landscape-line {
position: absolute;
z-index: 1;
inset: 50px 0 0;
width: 100%;
height: 430px;
pointer-events: none;
}
.ng-nbp-landscape-line-main {
fill: none;
stroke: var(--color-coral);
stroke-width: 1.4;
stroke-linecap: round;
stroke-dasharray: 3 9;
opacity: .48;
vector-effect: non-scaling-stroke;
}
/* POINTS */
/* NO BOXES */
/* nodes */
/* GROUND LINE */
/* LITTLE NOTE */
/* FOOTER */
.ng-nbp-landscape-footer {
display: flex;
align-items: center;
gap: .75rem;
padding-top: 1.65rem;
}
.ng-nbp-landscape-footer span {
width: 6px;
height: 6px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--color-coral);
}
.ng-nbp-landscape-footer p {
margin: 0;
color: rgba(46,59,50,.44);
font-size: .7rem;
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-nbp-landscape-heading {
grid-template-columns: 1fr;
gap: 1.75rem;
}
}
@media (max-width: 560px) {
.ng-nbp-landscape {
padding: 4.5rem 0;
}
}
/* LANDSCAPE — POLISHED GROEIPAD */
/* THE ONE DELIBERATE PATH */
.ng-nbp-landscape-line {
position: absolute;
z-index: 1;
left: 5%;
top: 188px;
width: 90%;
height: 150px;
pointer-events: none;
}
.ng-nbp-landscape-line-main {
fill: none;
stroke: var(--color-coral);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 3 10;
opacity: .48;
vector-effect: non-scaling-stroke;
}
/* Kill the old hanging roots */
/* ORCHARD — BIG ANCHOR */
/* little orchard rhythm */
/* POINTS */
/* vertical little stem instead of random dot */
/* POSITIONS — DELIBERATELY STAGGERED */
/* COPY */
/* GROUND */
/* HANDWRITTEN-ISH NOTE */
/* FOOTER */
.ng-nbp-landscape-footer {
display: flex;
align-items: center;
gap: .75rem;
padding-top: 1.5rem;
}
.ng-nbp-landscape-footer p {
margin: 0;
color: rgba(46,59,50,.43);
font-size: .7rem;
}
/* MOBILE */
@media (max-width: 850px) {
.ng-nbp-landscape-line {
display: none;
}
}
/* ROOTS / LANDSCAPE SECTION — CLEANER VERSION */
/* THE STAT ON THE LEFT */
/* THE LINE ONLY CONNECTS THE 3 STORY POINTS */
.ng-nbp-landscape-line {
position: absolute;
top: 205px;
left: 31%;
width: 63%;
height: 90px;
z-index: 1;
pointer-events: none;
}
.ng-nbp-landscape-line-main {
fill: none;
stroke: var(--color-coral);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 4 10;
opacity: 0.55;
vector-effect: non-scaling-stroke;
}
/* POINTS */
/* STAGGERED POSITIONS */
/* TEXT */
/* GROUND LINE */
/* NOTE ON THE RIGHT */
/* FOOTER */
.ng-nbp-landscape-footer {
display: flex;
align-items: center;
gap: 0.75rem;
padding-top: 1.4rem;
}
.ng-nbp-landscape-footer span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-coral);
}
.ng-nbp-landscape-footer p {
margin: 0;
color: rgba(46, 59, 50, 0.46);
font-size: 0.78rem;
line-height: 1.5;
}
/* MOBILE */
@media (max-width: 900px) {
.ng-nbp-landscape-line {
display: none;
}
}
/* GROEN — BOTANICAL GROWTH MAP */
.ng-nbp-growth-map {
position: relative;
display: grid;
grid-template-columns: minmax(230px, .7fr) 90px minmax(260px, 1fr);
grid-template-rows: repeat(3, minmax(130px, auto));
column-gap: clamp(2.5rem, 6vw, 6rem);
row-gap: 1.4rem;
align-items: center;
min-height: 520px;
padding: 3rem 0;
border-top: 1px solid rgba(46,59,50,.12);
border-bottom: 1px solid rgba(46,59,50,.12);
}
/* BIG NUMBER */
.ng-nbp-growth-main {
grid-column: 1;
grid-row: 1 / 4;
align-self: center;
}
.ng-nbp-growth-main > p {
margin: 0 0 .7rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-nbp-growth-main strong {
display: flex;
align-items: flex-end;
gap: .45rem;
color: var(--color-dark);
font-size: clamp(5.5rem, 8vw, 7.5rem);
font-weight: 800;
line-height: .8;
letter-spacing: -.075em;
}
.ng-nbp-growth-main strong small {
margin-bottom: .65rem;
color: rgba(46,59,50,.42);
font-size: .78rem;
font-weight: 800;
letter-spacing: .04em;
}
.ng-nbp-growth-main > span {
display: block;
margin-top: 1rem;
color: rgba(46,59,50,.58);
font-size: .9rem;
}
/* CENTRAL STEM */
.ng-nbp-growth-stem {
position: relative;
grid-column: 2;
grid-row: 1 / 4;
width: 100%;
height: 100%;
}
.ng-nbp-growth-stem::before {
content: "";
position: absolute;
top: 7%;
bottom: 7%;
left: 50%;
width: 1px;
background: rgba(200,127,74,.45);
}
/* branch lines */
.ng-nbp-growth-stem::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 42px;
height: 1px;
background: rgba(200,127,74,.45);
}
.ng-nbp-growth-stem span::before, .ng-nbp-growth-stem span::after {
content: "";
position: absolute;
left: 50%;
width: 42px;
height: 1px;
background: rgba(200,127,74,.45);
}
.ng-nbp-growth-stem span::before {
top: 18%;
}
.ng-nbp-growth-stem span::after {
bottom: 18%;
}
/* tiny joints — now they actually belong to the stem */
.ng-nbp-growth-stem span {
position: absolute;
inset: 0;
}
.ng-nbp-growth-stem {
background: radial-gradient(circle at 50% 18%, var(--color-coral) 0 4px, #e8f0e3 4px 7px, transparent 7px), radial-gradient(circle at 50% 50%, var(--color-coral) 0 4px, #e8f0e3 4px 7px, transparent 7px), radial-gradient(circle at 50% 82%, var(--color-coral) 0 4px, #e8f0e3 4px 7px, transparent 7px);
}
/* FACTS */
.ng-nbp-growth-fact {
grid-column: 3;
max-width: 390px;
}
.ng-nbp-growth-fact--tree {
grid-row: 1;
}
.ng-nbp-growth-fact--bees {
grid-row: 2;
}
.ng-nbp-growth-fact--garden {
grid-row: 3;
}
.ng-nbp-growth-fact > p {
margin: 0 0 .45rem;
color: var(--color-coral);
font-size: .63rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-nbp-growth-fact h3 {
margin: 0;
color: var(--color-dark);
font-size: clamp(1.65rem, 2.2vw, 2.15rem);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-nbp-growth-fact > span {
display: block;
max-width: 330px;
margin-top: .65rem;
color: rgba(46,59,50,.56);
font-size: .8rem;
line-height: 1.55;
}
/* LITTLE NOTE */
.ng-nbp-growth-note {
position: absolute;
right: 0;
bottom: -3.1rem;
display: flex;
align-items: flex-start;
gap: .65rem;
}
.ng-nbp-growth-note > span {
color: var(--color-coral);
}
.ng-nbp-growth-note p {
margin: 0;
color: rgba(46,59,50,.46);
font-size: .7rem;
line-height: 1.4;
}
.ng-nbp-growth-note strong {
display: block;
color: var(--color-dark);
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-nbp-growth-map {
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 2.5rem;
}
.ng-nbp-growth-main, .ng-nbp-growth-fact {
grid-column: 1;
grid-row: auto;
}
.ng-nbp-growth-stem {
display: none;
}
.ng-nbp-growth-note {
position: relative;
right: auto;
bottom: auto;
margin-top: 1rem;
}
}
/* NOORDBUITEN ACTIVITEITEN */
.ng-nba-page {
background: var(--color-cream);
}
/* INTRO */
.ng-nba-intro {
position: relative;
overflow: hidden;
padding: clamp(5rem, 7vw, 7rem) 0 clamp(3rem, 4vw, 4rem);
background: var(--color-cream);
}
.ng-nba-intro::after {
content: "";
position: absolute;
top: 50%;
right: -170px;
width: 360px;
height: 360px;
border: 44px solid rgba(62, 107, 71, .035);
border-radius: 50%;
transform: translateY(-50%);
pointer-events: none;
}
/* COPY */
.ng-nba-intro-kicker {
display: inline-flex;
align-items: center;
gap: .65rem;
margin: 0 0 1rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nba-intro-kicker::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-coral);
box-shadow: 0 0 0 3px rgba(240, 102, 83, .1);
}
/* PAPER VISUAL */
/* center */
/* intro footer */
.ng-nba-intro-bottom {
display: flex;
align-items: center;
gap: .75rem;
margin-top: 2rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(46,59,50,.11);
}
.ng-nba-intro-bottom p {
margin: 0;
color: rgba(46,59,50,.5);
font-size: .68rem;
}
/* FEATURED EVENT */
.ng-nba-feature {
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
}
/* heading */
.ng-nba-feature-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(4rem, 6vw, 5rem);
}
.ng-nba-feature-kicker {
margin: 0 0 .9rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-nba-feature-heading h2 {
max-width: 620px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-nba-feature-heading > p {
max-width: 420px;
margin: 0;
color: rgba(46,59,50,.62);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* EVENT COMPOSITION */
.ng-nba-event {
display: grid;
grid-template-columns: minmax(0, 1.08fr) 125px minmax(340px, .72fr);
align-items: stretch;
overflow: hidden;
border: 1px solid rgba(46,59,50,.13);
border-radius: 12px 58px 12px 58px;
background: var(--color-cream);
}
/* IMAGE */
.ng-nba-event-image {
position: relative;
min-height: 490px;
margin: 0;
overflow: hidden;
}
.ng-nba-event-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(26,39,30,.48), transparent 42%);
pointer-events: none;
}
.ng-nba-event-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.ng-nba-event:hover .ng-nba-event-image img {
transform: scale(1.02);
}
.ng-nba-event-image figcaption {
position: absolute;
z-index: 2;
left: 22px;
bottom: 20px;
color: #fff;
font-size: .64rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
/* DATE STRIP */
.ng-nba-event-date {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: var(--color-coral);
color: #fff;
text-align: center;
}
.ng-nba-event-date span {
font-size: .6rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-nba-event-date strong {
margin-top: .5rem;
font-size: clamp(3.6rem, 5vw, 5.2rem);
line-height: .8;
letter-spacing: -.07em;
}
.ng-nba-event-date b {
margin-top: .55rem;
font-size: .9rem;
letter-spacing: .12em;
}
.ng-nba-event-date small {
margin-top: .2rem;
opacity: .64;
}
/* COPY */
.ng-nba-event-copy {
display: flex;
justify-content: center;
flex-direction: column;
padding: clamp(2rem, 3.5vw, 3.5rem);
}
.ng-nba-event-topline {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(46,59,50,.12);
color: rgba(46,59,50,.48);
font-size: .6rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ng-nba-event-copy h3 {
max-width: 430px;
margin: 0;
color: var(--color-dark);
font-size: clamp(2rem, 2.7vw, 2.65rem);
font-weight: 750;
line-height: 1.02;
letter-spacing: -.045em;
}
.ng-nba-event-copy > p {
max-width: 430px;
margin: 1.15rem 0 0;
color: rgba(46,59,50,.61);
line-height: 1.65;
}
/* bullets without looking like boring bullets */
.ng-nba-event-copy ul {
display: flex;
flex-wrap: wrap;
gap: .55rem;
margin: 1.6rem 0 0;
padding: 0;
list-style: none;
}
.ng-nba-event-copy li {
padding: .5rem .72rem;
border: 1px solid rgba(46,59,50,.13);
border-radius: 999px;
color: rgba(46,59,50,.68);
background: rgba(255,255,255,.48);
font-size: .67rem;
}
/* BUTTON */
.ng-nba-event-button {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: .9rem;
margin-top: 1.8rem;
padding: .5rem .55rem .5rem 1.15rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .78rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease;
}
.ng-nba-event-button > span:last-child {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
}
.ng-nba-event-button:hover {
transform: translateY(-3px);
}
/* NOTE */
.ng-nba-feature-note {
display: flex;
align-items: center;
gap: .9rem;
margin-top: 2rem;
}
.ng-nba-feature-note > span {
display: grid;
width: 34px;
height: 34px;
flex: 0 0 auto;
place-items: center;
border-radius: 50%;
background: var(--color-green-light);
color: var(--color-coral);
font-size: .7rem;
}
.ng-nba-feature-note p {
margin: 0;
color: rgba(46,59,50,.48);
font-size: .75rem;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-nba-feature-heading {
grid-template-columns: 1fr;
gap: 2rem;
}
.ng-nba-event {
grid-template-columns: 1fr;
}
.ng-nba-event-image {
min-height: clamp(360px, 65vw, 500px);
}
.ng-nba-event-date {
display: grid;
grid-template-columns: repeat(4, auto);
gap: .7rem;
justify-content: start;
padding: 1rem 1.4rem;
text-align: left;
}
.ng-nba-event-date strong {
margin: 0;
font-size: 2rem;
}
.ng-nba-event-date b, .ng-nba-event-date small {
margin: 0;
}
}
@media (max-width: 560px) {
.ng-nba-feature {
padding: 4.5rem 0;
}
.ng-nba-event-copy {
padding: 1.7rem 1.4rem;
}
.ng-nba-event-topline {
align-items: flex-start;
flex-direction: column;
gap: .4rem;
}
}
/* ACTIVITEITEN — VERHALENBANK */
.ng-nba-stories {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: var(--color-cream);
color: var(--color-dark);
}
/* HEADING */
.ng-nba-stories-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(4rem, 6vw, 5rem);
}
.ng-nba-stories-kicker {
margin: 0 0 .9rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-nba-stories-heading h2 {
max-width: 650px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-nba-stories-heading > p {
max-width: 430px;
margin: 0;
color: rgba(46, 59, 50, .63);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* CONVERSATION STAGE */
.ng-nba-stories-stage {
position: relative;
min-height: 440px;
border-top: 1px solid rgba(46,59,50,.12);
border-bottom: 1px solid rgba(46,59,50,.12);
}
/* BENCH */
/* canopy */
/* seat */
/* simple people */
/* label */
/* VOICES */
.ng-nba-story-voice {
position: absolute;
z-index: 4;
width: 240px;
}
.ng-nba-story-voice > span {
display: block;
height: 34px;
color: var(--color-coral);
font-size: 3rem;
font-weight: 700;
line-height: 1;
}
.ng-nba-story-voice p {
margin: .6rem 0 0;
color: var(--color-dark);
font-size: clamp(1.25rem, 1.7vw, 1.55rem);
font-weight: 750;
line-height: 1.08;
letter-spacing: -.035em;
}
.ng-nba-story-voice--left {
top: 115px;
left: 2%;
}
/* CONVERSATION PATH */
/* ACTIVITY POSSIBILITIES */
/* activities */
/* FOOTER */
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-nba-stories-heading {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.ng-nba-stories-stage {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
min-height: 0;
padding: 3rem 0;
}
.ng-nba-story-voice {
position: relative;
top: auto;
right: auto;
left: auto;
}
.ng-nba-story-voice {
width: min(100%, 420px);
}
.ng-nba-story-voice--right {
justify-self: end;
text-align: right;
}
}
/* ACTIVITEITEN INTRO — FOLDED POSTER */
/* FOLDED STRIP */
/* Fold separators */
.ng-nba-fold-panel:not(:last-child)::after {
content: "";
position: absolute;
top: 0;
right: -1px;
width: 1px;
height: 100%;
background: rgba(46, 59, 50, .12);
}
/* alternating subtle folds */
/* TYPOGRAPHY */
/* Tiny directional detail */
/* CENTRAL STAMP */
/* LITTLE EDITORIAL NOTE */
/* MOBILE */
/* ACTIVITEITEN INTRO — MOMENTOPNAME */
.ng-nba-intro--moment {
position: relative;
overflow: hidden;
padding: clamp(5rem, 7vw, 7rem) 0 clamp(3rem, 4vw, 4rem);
background: var(--color-cream);
}
/* big quiet background circle */
.ng-nba-intro--moment::after {
content: "";
position: absolute;
width: 390px;
height: 390px;
right: -190px;
top: 50%;
transform: translateY(-50%);
border: 42px solid rgba(46, 59, 50, .035);
border-radius: 50%;
pointer-events: none;
}
/* LAYOUT */
.ng-nba-moment-layout {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(440px, 1fr);
align-items: center;
gap: clamp(4rem, 8vw, 8rem);
min-height: 410px;
}
/* COPY */
.ng-nba-moment-copy {
max-width: 620px;
}
.ng-nba-moment-copy h1 {
max-width: 600px;
margin: 0;
color: var(--color-dark);
font-size: clamp(3.15rem, 4.4vw, 4.65rem);
font-weight: 760;
line-height: .94;
letter-spacing: -.055em;
}
/* important: NOT green */
.ng-nba-moment-copy h1 span {
display: block;
color: var(--color-dark);
}
.ng-nba-moment-copy > p:not(.ng-nba-intro-kicker) {
max-width: 500px;
margin: 1.4rem 0 0;
color: rgba(46, 59, 50, .62);
font-size: .96rem;
line-height: 1.68;
}
/* LITTLE WORD ROW */
.ng-nba-moment-tags {
display: flex;
flex-wrap: wrap;
gap: .7rem 1.3rem;
margin-top: 2rem;
}
.ng-nba-moment-tags span {
position: relative;
padding-left: 12px;
color: rgba(46, 59, 50, .58);
font-size: .69rem;
font-weight: 750;
letter-spacing: .04em;
text-transform: uppercase;
}
.ng-nba-moment-tags span::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 5px;
height: 5px;
transform: translateY(-50%);
border-radius: 50%;
background: var(--color-coral);
}
/* VISUAL */
.ng-nba-moment-visual {
position: relative;
width: min(100%, 570px);
height: 400px;
justify-self: end;
}
/* MAIN PHOTO */
.ng-nba-moment-photo {
position: absolute;
z-index: 2;
top: 20px;
right: 20px;
width: 410px;
height: 330px;
margin: 0;
overflow: hidden;
border-radius: 90px 14px 90px 14px;
transform: rotate(1.5deg);
box-shadow: 0 24px 55px rgba(46, 59, 50, .13);
}
.ng-nba-moment-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s ease;
}
.ng-nba-moment-photo:hover img {
transform: scale(1.025);
}
/* SECOND SMALL PHOTO */
.ng-nba-moment-photo-small {
position: absolute;
z-index: 4;
left: 15px;
bottom: 15px;
width: 180px;
height: 145px;
margin: 0;
overflow: hidden;
border: 7px solid var(--color-cream);
border-radius: 14px 48px 14px 48px;
transform: rotate(-5deg);
box-shadow: 0 18px 38px rgba(46,59,50,.13);
}
.ng-nba-moment-photo-small img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* GIANT DOEN WORD */
.ng-nba-moment-word {
position: absolute;
z-index: 1;
left: -8px;
top: 18px;
color: rgba(46, 59, 50, .075);
font-size: clamp(5rem, 8vw, 8rem);
font-weight: 800;
line-height: .8;
letter-spacing: -.08em;
writing-mode: vertical-rl;
transform: rotate(180deg);
pointer-events: none;
}
/* CORAL STAMP */
.ng-nba-moment-stamp {
position: absolute;
z-index: 5;
right: 1px;
top: 52px;
display: flex;
width: 90px;
height: 90px;
align-items: center;
justify-content: center;
flex-direction: column;
transform: rotate(7deg);
border-radius: 50%;
background: var(--color-coral);
color: #fff;
box-shadow: 0 14px 28px rgba(46,59,50,.14);
}
.ng-nba-moment-stamp span {
font-size: .51rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-nba-moment-stamp strong {
margin-top: -.1rem;
font-size: 2rem;
line-height: 1;
}
/* NOTE */
.ng-nba-moment-note {
position: absolute;
z-index: 5;
right: 22px;
bottom: 8px;
display: flex;
align-items: flex-start;
gap: .55rem;
transform: rotate(-2deg);
}
.ng-nba-moment-note > span {
color: var(--color-coral);
font-size: 1.1rem;
}
.ng-nba-moment-note p {
margin: 0;
color: rgba(46, 59, 50, .47);
font-size: .67rem;
line-height: 1.35;
}
.ng-nba-moment-note strong {
display: block;
color: var(--color-dark);
}
/* BOTTOM LINE */
.ng-nba-intro-bottom {
display: flex;
align-items: center;
gap: .75rem;
margin-top: 2.2rem;
padding-top: 1.35rem;
border-top: 1px solid rgba(46,59,50,.11);
}
.ng-nba-intro-bottom > span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-coral);
}
.ng-nba-intro-bottom p {
margin: 0;
color: rgba(46,59,50,.48);
font-size: .68rem;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-nba-moment-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.ng-nba-moment-visual {
justify-self: start;
}
}
@media (max-width: 600px) {
.ng-nba-moment-visual {
width: 100%;
height: 340px;
}
.ng-nba-moment-photo {
right: 0;
width: 88%;
height: 285px;
}
.ng-nba-moment-photo-small {
width: 145px;
height: 115px;
}
.ng-nba-moment-word {
display: none;
}
.ng-nba-moment-stamp {
width: 72px;
height: 72px;
}
}
/* VERHALENBANK — VISUAL COMPOSITION */
.ng-nba-stories-stage {
position: relative;
min-height: 470px;
border-top: 1px solid rgba(46, 59, 50, .12);
border-bottom: 1px solid rgba(46, 59, 50, .12);
overflow: hidden;
}
/* CENTER IMAGE */
.ng-nba-story-visual {
position: absolute;
z-index: 3;
top: 28px;
left: 50%;
width: min(470px, 42vw);
margin: 0;
transform: translateX(-50%);
}
.ng-nba-story-visual img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* little label underneath */
.ng-nba-story-visual figcaption {
display: flex;
align-items: center;
flex-direction: column;
margin-top: -10px;
text-align: center;
}
.ng-nba-story-visual figcaption small {
color: rgba(46, 59, 50, .45);
font-size: .58rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-nba-story-visual figcaption strong {
margin-top: .3rem;
color: var(--color-dark);
font-size: .82rem;
font-weight: 750;
}
.ng-nba-story-visual figcaption > span {
display: block;
width: 42px;
height: 2px;
margin-top: .75rem;
border-radius: 999px;
background: var(--color-coral);
}
/* QUOTES */
.ng-nba-story-voice > span {
display: block;
height: 42px;
color: var(--color-coral);
font-size: 3.4rem;
font-weight: 800;
line-height: 1;
}
.ng-nba-story-voice p {
margin: .5rem 0 0;
color: var(--color-dark);
font-size: clamp(1.4rem, 2vw, 1.85rem);
font-weight: 750;
line-height: 1.04;
letter-spacing: -.04em;
}
/* left quote */
.ng-nba-story-voice--left {
top: 125px;
left: 2%;
}
/* right quote */
.ng-nba-story-voice--right {
top: 220px;
right: 1%;
}
/* CONVERSATION LINES */
/* left line */
/* right line */
/* little endpoints */
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-nba-stories-stage {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
min-height: 0;
padding: 3rem 0;
}
.ng-nba-story-visual, .ng-nba-story-voice {
position: relative;
top: auto;
right: auto;
left: auto;
width: 100%;
transform: none;
}
.ng-nba-story-visual {
width: min(100%, 470px);
justify-self: center;
}
.ng-nba-story-voice {
max-width: 400px;
}
.ng-nba-story-voice--right {
justify-self: end;
text-align: right;
}
}
/* VERHALENBANK — QUOTE CONNECTIONS */
.ng-nba-story-voice {
position: absolute;
z-index: 5;
width: 245px;
}
.ng-nba-story-voice--left {
top: 118px;
left: 2%;
}
.ng-nba-story-voice--right {
top: 205px;
right: 1%;
}
.ng-nba-story-quote {
display: block;
height: 38px;
color: var(--color-coral);
font-size: 3.1rem;
font-weight: 800;
line-height: 1;
}
.ng-nba-story-voice p {
position: relative;
z-index: 2;
margin: .4rem 0 0;
color: var(--color-dark);
font-size: clamp(1.35rem, 1.85vw, 1.7rem);
font-weight: 750;
line-height: 1.04;
letter-spacing: -.04em;
}
/* dotted tail belongs to the quote */
.ng-nba-story-tail {
position: absolute;
z-index: 1;
width: 250px;
height: 90px;
overflow: visible;
pointer-events: none;
}
.ng-nba-story-tail path {
fill: none;
stroke: var(--color-coral);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 3 9;
opacity: .65;
vector-effect: non-scaling-stroke;
}
/* LEFT: starts directly after the text and travels to image */
.ng-nba-story-voice--left .ng-nba-story-tail {
left: calc(100% - 5px);
top: 72px;
}
/* RIGHT: SVG points toward text, so place it before text */
.ng-nba-story-voice--right .ng-nba-story-tail {
right: calc(100% - 5px);
top: -5px;
transform: scaleX(-1);
}
/* actual little connection point */
.ng-nba-story-voice::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border: 3px solid var(--color-cream);
border-radius: 50%;
background: var(--color-coral);
box-shadow: 0 0 0 1px rgba(46,59,50,.08);
}
.ng-nba-story-voice--left::after {
right: -8px;
top: 88px;
}
.ng-nba-story-voice--right::after {
left: -8px;
top: 10px;
}
.ng-nba-story-visual {
top: 42px;
width: min(500px, 44vw);
}
.ng-nba-story-voice--right {
right: 2.5%;
}
/* VERHALENBANK — FINAL QUOTE TAILS */
.ng-nba-story-tail {
position: absolute;
z-index: 2;
width: 180px;
height: 80px;
overflow: visible;
pointer-events: none;
}
.ng-nba-story-tail path {
fill: none;
stroke: var(--color-coral);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 3 9;
opacity: .62;
vector-effect: non-scaling-stroke;
}
/* LEFT: begins at quote and stops at left edge of artwork */
.ng-nba-story-voice--left .ng-nba-story-tail {
left: calc(100% + 3px);
top: 74px;
}
/* RIGHT: comes from artwork into quote */
.ng-nba-story-voice--right .ng-nba-story-tail {
right: calc(100% + 3px);
top: -4px;
transform: scaleX(-1);
}
.ng-nba-story-voice--left::after {
right: -9px;
top: 88px;
}
.ng-nba-story-voice--right::after {
left: -9px;
top: 10px;
}
/* ACTIVITEITEN — CAS DE DAS */
.ng-nba-cas {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: var(--color-dark);
color: #fff;
}
/* quiet background circle */
.ng-nba-cas::after {
content: "";
position: absolute;
right: -180px;
top: 50%;
width: 420px;
height: 420px;
transform: translateY(-50%);
border: 1px solid rgba(255,255,255,.055);
border-radius: 50%;
box-shadow: inset 0 0 0 55px rgba(255,255,255,.018);
pointer-events: none;
}
/* LAYOUT */
.ng-nba-cas-layout {
display: grid;
grid-template-columns: minmax(320px, .72fr) minmax(0, 1.15fr);
align-items: center;
gap: clamp(4rem, 8vw, 8rem);
}
/* COPY */
.ng-nba-cas-copy {
max-width: 530px;
}
.ng-nba-cas-copy h2 {
max-width: 500px;
margin: 0;
color: #fff;
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-nba-cas-copy > p:not(.ng-nba-cas-kicker) {
max-width: 470px;
margin: 1.35rem 0 0;
color: rgba(255,255,255,.61);
font-size: var(--ng-home-body);
line-height: 1.7;
}
/* status */
.ng-nba-cas-status {
display: flex;
align-items: flex-start;
gap: .8rem;
margin-top: 2rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(255,255,255,.1);
}
.ng-nba-cas-status > span {
width: 8px;
height: 8px;
flex: 0 0 auto;
margin-top: .35rem;
border-radius: 50%;
background: var(--color-coral);
box-shadow: 0 0 0 4px rgba(240,102,83,.1);
}
.ng-nba-cas-status p {
max-width: 330px;
margin: 0;
color: rgba(255,255,255,.46);
font-size: .75rem;
line-height: 1.55;
}
/* GAME AREA */
/* subtle grid like a game map */
/* CHARACTER */
/* ROUTE */
/* STOPS */
/* PAWS */
/* NOTE */
/* BOTTOM */
.ng-nba-cas-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
margin-top: 2rem;
padding-top: 1.6rem;
border-top: 1px solid rgba(255,255,255,.1);
}
.ng-nba-cas-bottom p {
max-width: 650px;
margin: 0;
color: rgba(255,255,255,.43);
font-size: .76rem;
line-height: 1.55;
}
.ng-nba-cas-bottom > span {
color: var(--color-coral);
font-size: .62rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-nba-cas-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
}
/* ACTIVITEITEN — CAS DE DAS */
.ng-nba-cas {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0 clamp(5rem, 7vw, 6.5rem);
background: var(--color-dark);
color: #fff;
}
/* subtle decorative circle */
.ng-nba-cas::before {
content: "";
position: absolute;
top: -170px;
left: -170px;
width: 380px;
height: 380px;
border: 1px solid rgba(255, 255, 255, .045);
border-radius: 50%;
box-shadow: inset 0 0 0 48px rgba(255, 255, 255, .016);
pointer-events: none;
}
/* LAYOUT */
.ng-nba-cas-layout {
display: grid;
grid-template-columns: minmax(320px, .72fr) minmax(0, 1.25fr);
align-items: center;
gap: clamp(4rem, 8vw, 8rem);
}
/* COPY */
.ng-nba-cas-copy {
max-width: 510px;
}
.ng-nba-cas-kicker {
margin: 0 0 .9rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-nba-cas-copy h2 {
max-width: 490px;
margin: 0;
color: #fff;
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.02;
letter-spacing: -.04em;
}
.ng-nba-cas-copy > p:not(.ng-nba-cas-kicker) {
max-width: 470px;
margin: 1.4rem 0 0;
color: rgba(255, 255, 255, .62);
font-size: var(--ng-home-body);
line-height: 1.7;
}
/* STATUS */
.ng-nba-cas-status {
display: flex;
align-items: flex-start;
gap: .85rem;
margin-top: 2rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.ng-nba-cas-status > span {
width: 8px;
height: 8px;
flex: 0 0 auto;
margin-top: .35rem;
border-radius: 50%;
background: var(--color-coral);
box-shadow: 0 0 0 4px rgba(240, 102, 83, .1);
}
.ng-nba-cas-status p {
max-width: 350px;
margin: 0;
color: rgba(255, 255, 255, .46);
font-size: .76rem;
line-height: 1.55;
}
/* PLAY FIELD */
/* very soft grid */
/* CAS */
/* ROUTE */
/* ROUTE STEPS */
/* placements */
/* CAS MESSAGE */
/* LITTLE PAWS */
/* BOTTOM */
.ng-nba-cas-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
margin-top: 2rem;
padding-top: 1.6rem;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.ng-nba-cas-bottom p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, .42);
font-size: .76rem;
line-height: 1.55;
}
.ng-nba-cas-bottom > span {
color: var(--color-coral);
font-size: .62rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
/* HOVER — VERY SUBTLE */
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-nba-cas-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 600px) {
.ng-nba-cas {
padding: 4.5rem 0;
}
.ng-nba-cas-bottom {
align-items: flex-start;
flex-direction: column;
gap: 1rem;
}
}
/* CAS DE DAS — STORYBOOK ADVENTURE */
.ng-nba-cas-adventure {
position: relative;
min-height: 520px;
overflow: visible;
}
/* ORGANIC GROUND */
.ng-nba-cas-ground {
position: absolute;
z-index: 1;
left: 50%;
bottom: 36px;
width: 500px;
height: 145px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(125, 145, 91, .19), rgba(125, 145, 91, .07) 63%, transparent 64%);
}
/* subtle second layer */
.ng-nba-cas-ground::after {
content: "";
position: absolute;
left: 50%;
bottom: 10px;
width: 390px;
height: 70px;
transform: translateX(-50%);
border-radius: 50%;
background: rgba(120, 139, 81, .07);
}
/* CAS — BIG STAR */
.ng-nba-cas-figure {
position: absolute;
z-index: 5;
left: 52%;
bottom: 27px;
width: clamp(280px, 35vw, 380px);
margin: 0;
transform: translateX(-50%);
filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .12));
transition: transform .35s ease;
}
.ng-nba-cas-figure img {
display: block;
width: 100%;
height: auto;
}
.ng-nba-cas-adventure:hover .ng-nba-cas-figure {
transform: translateX(-50%) translateY(-5px);
}
/* TRAIL */
.ng-nba-cas-trail {
position: absolute;
z-index: 2;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.ng-nba-cas-trail path {
fill: none;
stroke: var(--color-coral);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 4 11;
opacity: .72;
vector-effect: non-scaling-stroke;
}
/* TRAIL MARKERS */
.ng-nba-cas-marker {
position: absolute;
z-index: 4;
display: inline-flex;
align-items: center;
gap: .6rem;
padding: .6rem .85rem;
border: 1px solid rgba(255, 255, 255, .11);
border-radius: 999px;
background: rgba(38, 57, 45, .88);
box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
backdrop-filter: blur(5px);
color: #fff;
}
.ng-nba-cas-marker > span {
color: var(--color-coral);
font-size: .72rem;
}
.ng-nba-cas-marker strong {
font-size: .68rem;
font-weight: 750;
}
/* positions */
.ng-nba-cas-marker--look {
left: 6%;
bottom: 85px;
transform: rotate(-4deg);
}
.ng-nba-cas-marker--discover {
left: 34%;
top: 62px;
transform: rotate(2deg);
}
.ng-nba-cas-marker--think {
right: 4%;
bottom: 93px;
transform: rotate(3deg);
}
/* CAS NOTE */
.ng-nba-cas-whisper {
position: absolute;
z-index: 6;
top: 74px;
right: 1%;
display: flex;
align-items: flex-start;
gap: .65rem;
width: 170px;
transform: rotate(3deg);
}
.ng-nba-cas-whisper > span {
color: var(--color-coral);
font-size: 1.3rem;
}
.ng-nba-cas-whisper p {
margin: 0;
color: rgba(255, 255, 255, .58);
font-size: .76rem;
line-height: 1.35;
}
.ng-nba-cas-whisper strong {
display: block;
margin-top: .12rem;
color: #fff;
font-size: .98rem;
font-weight: 750;
}
/* PAW PRINTS */
.ng-nba-cas-footprints {
position: absolute;
z-index: 3;
width: 42px;
height: 28px;
opacity: .2;
}
.ng-nba-cas-footprints i {
position: absolute;
display: block;
border-radius: 50%;
background: #fff;
}
.ng-nba-cas-footprints i:nth-child(1) {
top: 0;
left: 4px;
width: 7px;
height: 9px;
}
.ng-nba-cas-footprints i:nth-child(2) {
top: 0;
left: 15px;
width: 7px;
height: 9px;
}
.ng-nba-cas-footprints i:nth-child(3) {
left: 7px;
bottom: 0;
width: 18px;
height: 13px;
}
.ng-nba-cas-footprints--one {
left: 23%;
bottom: 150px;
transform: rotate(-27deg);
}
.ng-nba-cas-footprints--two {
right: 18%;
bottom: 115px;
transform: rotate(25deg);
}
/* LITTLE PLANTS */
.ng-nba-cas-sprout {
position: absolute;
z-index: 3;
color: rgba(169, 203, 170, .32);
font-size: 2rem;
line-height: 1;
}
.ng-nba-cas-sprout--one {
left: 25%;
bottom: 52px;
transform: rotate(-18deg);
}
.ng-nba-cas-sprout--two {
right: 20%;
bottom: 60px;
transform: rotate(20deg) scaleX(-1);
}
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-nba-cas-adventure {
min-height: 540px;
}
.ng-nba-cas-figure {
width: min(380px, 58vw);
}
}
@media (max-width: 600px) {
.ng-nba-cas-adventure {
min-height: 560px;
}
.ng-nba-cas-ground {
width: 95%;
}
.ng-nba-cas-figure {
width: 260px;
bottom: 75px;
}
.ng-nba-cas-marker {
padding: .5rem .7rem;
}
.ng-nba-cas-marker--look {
left: 2%;
bottom: 35px;
}
.ng-nba-cas-marker--discover {
top: 40px;
left: 3%;
}
.ng-nba-cas-marker--think {
right: 2%;
bottom: 38px;
}
.ng-nba-cas-whisper {
top: 35px;
right: 2%;
width: 145px;
}
.ng-nba-cas-footprints, .ng-nba-cas-sprout {
display: none;
}
}
.ng-nba-cas-layout {
grid-template-columns: minmax(320px, .62fr) minmax(0, 1.38fr);
gap: clamp(4rem, 7vw, 7rem);
}
/* ACTIVITEITEN — EEN JAAR OP NOORDBUITEN */
.ng-nba-year {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: #e8f0e3;
color: var(--color-dark);
}
/* HEADING */
.ng-nba-year-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(4rem, 6vw, 5.5rem);
}
.ng-nba-year-kicker {
margin: 0 0 .9rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-nba-year-heading h2 {
max-width: 650px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
/* don't make whole phrase green */
.ng-nba-year-heading h2 span {
display: block;
color: var(--color-dark);
}
.ng-nba-year-heading > p {
max-width: 430px;
margin: 0;
color: rgba(46, 59, 50, .62);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* ACTIVITY TRAIL */
.ng-nba-year-trail {
position: relative;
min-height: 520px;
padding: 3rem 0;
border-top: 1px solid rgba(46, 59, 50, .12);
border-bottom: 1px solid rgba(46, 59, 50, .12);
}
/* central wandering line */
.ng-nba-year-line {
position: absolute;
z-index: 1;
top: 50%;
left: 3%;
width: 94%;
height: 1px;
background: repeating-linear-gradient(to right, rgba(240, 102, 83, .55) 0 4px, transparent 4px 13px);
}
.ng-nba-year-line::before, .ng-nba-year-line::after {
content: "";
position: absolute;
top: 50%;
width: 8px;
height: 8px;
transform: translateY(-50%);
border-radius: 50%;
background: var(--color-coral);
}
.ng-nba-year-line::before {
left: 0;
}
.ng-nba-year-line::after {
right: 0;
}
/* MOMENTS */
.ng-nba-year-moment {
position: absolute;
z-index: 3;
width: 205px;
}
.ng-nba-year-marker {
position: absolute;
width: 11px;
height: 11px;
border: 3px solid #e8f0e3;
border-radius: 50%;
background: var(--color-coral);
box-shadow: 0 0 0 1px rgba(46, 59, 50, .12);
}
/* small stem to timeline */
.ng-nba-year-moment::after {
content: "";
position: absolute;
width: 1px;
background: rgba(240, 102, 83, .38);
}
.ng-nba-year-moment > p {
margin: 0 0 .4rem;
color: var(--color-coral);
font-size: .59rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-nba-year-moment h3 {
margin: 0;
color: var(--color-dark);
font-size: clamp(1.3rem, 1.7vw, 1.65rem);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.035em;
}
.ng-nba-year-desc {
display: block;
margin-top: .65rem;
color: rgba(46, 59, 50, .55);
font-size: .74rem;
line-height: 1.5;
}
/* INDIVIDUAL POSITIONING */
/* above */
.ng-nba-year-moment--market {
top: 72px;
left: 2%;
}
.ng-nba-year-moment--market .ng-nba-year-marker {
left: 4px;
bottom: -62px;
}
.ng-nba-year-moment--market::after {
left: 9px;
bottom: -55px;
height: 48px;
}
/* below */
.ng-nba-year-moment--trees {
bottom: 55px;
left: 21%;
}
.ng-nba-year-moment--trees .ng-nba-year-marker {
left: 4px;
top: -66px;
}
.ng-nba-year-moment--trees::after {
left: 9px;
top: -57px;
height: 48px;
}
/* above */
.ng-nba-year-moment--bio {
top: 62px;
left: 42%;
}
.ng-nba-year-moment--bio .ng-nba-year-marker {
left: 4px;
bottom: -72px;
}
.ng-nba-year-moment--bio::after {
left: 9px;
bottom: -63px;
height: 55px;
}
/* below */
.ng-nba-year-moment--nldoet {
right: 19%;
bottom: 48px;
}
.ng-nba-year-moment--nldoet .ng-nba-year-marker {
left: 4px;
top: -72px;
}
.ng-nba-year-moment--nldoet::after {
left: 9px;
top: -63px;
height: 55px;
}
/* above */
.ng-nba-year-moment--music {
top: 82px;
right: 1%;
}
.ng-nba-year-moment--music .ng-nba-year-marker {
right: 7px;
bottom: -62px;
}
.ng-nba-year-moment--music::after {
right: 12px;
bottom: -53px;
height: 46px;
}
/* LITTLE NOTE */
.ng-nba-year-note {
position: absolute;
z-index: 4;
left: 51%;
bottom: 25px;
display: flex;
align-items: flex-start;
gap: .65rem;
transform: rotate(-2deg);
}
.ng-nba-year-note > span {
color: var(--color-coral);
font-size: 1rem;
}
.ng-nba-year-note p {
margin: 0;
color: rgba(46, 59, 50, .43);
font-size: .67rem;
line-height: 1.4;
}
.ng-nba-year-note strong {
display: block;
color: var(--color-dark);
}
/* FOOTER */
.ng-nba-year-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
padding-top: 1.7rem;
}
.ng-nba-year-footer p {
margin: 0;
color: rgba(46, 59, 50, .45);
font-size: .73rem;
}
.ng-nba-year-footer a {
display: inline-flex;
align-items: center;
gap: .8rem;
color: var(--color-dark);
font-size: .8rem;
font-weight: 800;
text-decoration: none;
}
.ng-nba-year-footer a span {
transition: transform .25s ease;
}
.ng-nba-year-footer a:hover span {
transform: translateX(4px);
}
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-nba-year-heading {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.ng-nba-year-trail {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.75rem 2rem;
min-height: 0;
}
.ng-nba-year-line {
display: none;
}
.ng-nba-year-moment, .ng-nba-year-note {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: auto;
transform: none;
}
.ng-nba-year-marker, .ng-nba-year-moment::after {
display: none;
}
.ng-nba-year-note {
align-self: end;
}
}
@media (max-width: 600px) {
.ng-nba-year {
padding: 4.5rem 0;
}
.ng-nba-year-trail {
grid-template-columns: 1fr;
}
.ng-nba-year-footer {
align-items: flex-start;
flex-direction: column;
gap: 1.2rem;
}
}
/* MEEDOEN — INTRO */
.ng-nbm-intro {
position: relative;
overflow: hidden;
padding: clamp(5rem, 7vw, 7rem) 0 clamp(3rem, 4vw, 4rem);
background: var(--color-cream);
}
.ng-nbm-intro-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(370px, .72fr);
align-items: center;
gap: clamp(4rem, 9vw, 9rem);
min-height: 340px;
}
/* COPY */
.ng-nbm-intro-copy {
max-width: 660px;
}
.ng-nbm-intro-kicker {
display: inline-flex;
align-items: center;
gap: .65rem;
margin: 0 0 1rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nbm-intro-kicker::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-coral);
box-shadow: 0 0 0 3px rgba(240,102,83,.1);
}
.ng-nbm-intro-copy h1 {
max-width: 650px;
margin: 0;
color: var(--color-dark);
font-size: clamp(3rem, 4vw, 4.35rem);
font-weight: 760;
line-height: .96;
letter-spacing: -.055em;
}
.ng-nbm-intro-copy > p:last-child {
max-width: 520px;
margin: 1.35rem 0 0;
color: rgba(46,59,50,.63);
font-size: .96rem;
line-height: 1.68;
}
/* FLEXIBLE TIME VISUAL */
.ng-nbm-intro-visual {
position: relative;
width: min(100%, 410px);
justify-self: center;
padding: 2.4rem 0;
}
.ng-nbm-intro-visual-label {
margin: 0 0 1.4rem;
color: rgba(46,59,50,.42);
font-size: .62rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-nbm-time-row {
display: flex;
align-items: center;
gap: .9rem;
margin-top: .65rem;
}
.ng-nbm-time-row > span {
min-width: 120px;
color: var(--color-dark);
font-size: .78rem;
font-weight: 750;
}
.ng-nbm-time-row i {
display: block;
height: 7px;
border-radius: 999px;
background: #3E6B47;
}
.ng-nbm-time-row--small i {
width: 55px;
}
.ng-nbm-time-row--regular i {
width: 115px;
opacity: .8;
}
.ng-nbm-time-row--often i {
width: 185px;
opacity: .65;
}
.ng-nbm-time-row--idea {
margin-top: 1.6rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(46,59,50,.12);
}
.ng-nbm-time-row--idea > span {
min-width: auto;
color: var(--color-coral);
}
.ng-nbm-time-row--idea strong {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-size: .7rem;
}
/* note */
.ng-nbm-intro-note {
display: flex;
align-items: flex-start;
gap: .6rem;
margin-top: 1.7rem;
transform: rotate(-1deg);
}
.ng-nbm-intro-note > span {
color: var(--color-coral);
}
.ng-nbm-intro-note p {
margin: 0;
color: rgba(46,59,50,.45);
font-size: .67rem;
line-height: 1.35;
}
.ng-nbm-intro-note strong {
display: block;
color: var(--color-dark);
}
/* bottom detail */
.ng-nbm-intro-bottom {
display: flex;
align-items: center;
gap: .75rem;
margin-top: 2rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(46,59,50,.11);
}
.ng-nbm-intro-bottom > span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-coral);
}
.ng-nbm-intro-bottom p {
margin: 0;
color: rgba(46,59,50,.5);
font-size: .68rem;
}
/* WAYS TO JOIN */
/* heading */
/* OPEN WORKTABLE */
/* work items */
/* OWN IDEA */
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-nbm-intro-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.ng-nbm-intro-visual {
justify-self: start;
}
}
/* MEEDOEN — BEGIN OP JOUW MANIER */
/* quiet background ring */
/* HEADING */
/* ROUTE STAGE */
/* YOU — CENTER START */
/* ROUTE LINES */
/* CHOICES */
/* little route endpoint */
/* copy */
/* BUTTONS */
/* MIDDLE NOTE */
/* BOTTOM PRACTICAL NOTE */
/* RESPONSIVE */
/* MEEDOEN — VOOR JE LANGSKOMT */
/* quiet background detail */
/* HEADING */
/* GUIDE */
/* LOCATION */
/* pin */
/* contact */
/* ROUTE */
/* start */
/* end */
/* travel labels */
/* FACTS */
/* IMPORTANT NOTE */
/* RESPONSIVE */
/* NOORDBUITEN — BEZOEKEN */
.ng-nbv-page {
background: var(--color-cream);
}
/* INTRO */
/* INTRO COPY */
/* JOURNEY */
/* start */
/* travel labels */
/* DESTINATION */
/* note */
/* INTRO BOTTOM */
/* FIND US */
.ng-nbv-find {
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
}
/* heading */
.ng-nbv-find-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(4rem, 6vw, 5rem);
}
.ng-nbv-find-kicker {
margin: 0 0 .9rem;
color: var(--color-coral);
font-size: .72rem;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.ng-nbv-find-heading h2 {
max-width: 620px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-nbv-find-heading > p {
max-width: 430px;
margin: 0;
color: rgba(46, 59, 50, .62);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* MAP + INFO */
.ng-nbv-find-layout {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr);
min-height: 540px;
overflow: hidden;
border: 1px solid rgba(46, 59, 50, .13);
border-radius: 12px 64px 12px 64px;
background: var(--color-cream);
}
/* MAP */
.ng-nbv-map {
position: relative;
min-height: 540px;
overflow: hidden;
}
.ng-nbv-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.ng-nbv-map-label {
position: absolute;
z-index: 3;
left: 22px;
bottom: 22px;
padding: .75rem 1rem;
border-radius: 10px 24px 10px 24px;
background: rgba(46, 59, 50, .92);
color: #fff;
box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}
.ng-nbv-map-label span {
display: block;
color: var(--color-coral);
font-size: .55rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
}
.ng-nbv-map-label strong {
display: block;
margin-top: .2rem;
font-size: .8rem;
}
/* INFO */
.ng-nbv-find-info {
display: flex;
justify-content: center;
flex-direction: column;
padding: clamp(2rem, 4vw, 3.8rem);
}
.ng-nbv-address > p {
margin: 0 0 .55rem;
color: var(--color-coral);
font-size: .6rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-nbv-address strong {
display: block;
color: var(--color-dark);
font-size: clamp(2rem, 3vw, 2.8rem);
line-height: .95;
letter-spacing: -.045em;
}
.ng-nbv-address > span {
display: block;
margin-top: .5rem;
color: rgba(46, 59, 50, .48);
font-size: .8rem;
}
.ng-nbv-find-rule {
height: 1px;
margin: 2rem 0;
background: rgba(46, 59, 50, .12);
}
/* ARRIVAL */
.ng-nbv-arrival > div {
display: flex;
align-items: center;
gap: .9rem;
}
.ng-nbv-arrival > div > span {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 auto;
place-items: center;
border-radius: 50%;
background: #e8f0e3;
color: var(--color-coral);
}
.ng-nbv-arrival small {
display: block;
color: rgba(46, 59, 50, .43);
font-size: .55rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
}
.ng-nbv-arrival strong {
display: block;
margin-top: .15rem;
color: var(--color-dark);
font-size: .83rem;
}
.ng-nbv-arrival > p {
max-width: 330px;
margin: .9rem 0 0;
color: rgba(46, 59, 50, .56);
font-size: .75rem;
line-height: 1.55;
}
/* NOTICE */
.ng-nbv-find-notice {
display: flex;
gap: .9rem;
margin-top: 2rem;
padding: 1rem 1.1rem;
border: 1px solid rgba(240, 102, 83, .2);
border-radius: 8px 24px 8px 24px;
background: rgba(240, 102, 83, .055);
}
.ng-nbv-find-notice > span {
display: grid;
width: 30px;
height: 30px;
flex: 0 0 auto;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-size: .67rem;
font-weight: 800;
}
.ng-nbv-find-notice strong {
color: var(--color-dark);
font-size: .75rem;
}
.ng-nbv-find-notice p {
margin: .35rem 0 0;
color: rgba(46, 59, 50, .52);
font-size: .69rem;
line-height: 1.5;
}
/* BUTTON */
.ng-nbv-find-button {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: .9rem;
margin-top: 1.8rem;
padding: .5rem .55rem .5rem 1.1rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .74rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease;
}
.ng-nbv-find-button i {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-style: normal;
}
.ng-nbv-find-button:hover {
transform: translateY(-3px);
}
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-nbv-find-heading {
grid-template-columns: 1fr;
gap: 2rem;
}
.ng-nbv-find-layout {
grid-template-columns: 1fr;
}
.ng-nbv-map {
min-height: 450px;
}
}
@media (max-width: 600px) {
.ng-nbv-find {
padding: 4.5rem 0;
}
.ng-nbv-map {
min-height: 380px;
}
.ng-nbv-find-info {
padding: 1.8rem 1.4rem;
}
}
/* BEZOEKEN — VISUAL WALK */
/* HEADING */
/* STAGE */
/* WANDERING ROUTE */
/* START */
/* IMAGE STOPS */
/* captions */
/* ORCHARD — LARGE LEFT */
/* COFFEE — SMALL HIGH */
/* PLAY — RIGHT / LOWER */
/* ROUTE DOTS */
/* LITTLE NOTES */
/* BOTTOM */
/* RESPONSIVE */
/* BEZOEKEN — GOED OM TE WETEN */
/* BACKGROUND DETAIL */
/* TOP */
/* NOTES */
/* tiny movement only */
/* SYMBOL */
/* LITTLE SIDE LABEL */
/* COPY */
/* BOTTOM NOTE */
/* RESPONSIVE */
/* BEZOEKEN — FINAL CTA */
/* LAYOUT */
/* COPY */
.ng-nbv-final-copy > p:not(.ng-nbv-final-kicker) {
max-width: 470px;
margin: 1.5rem 0 0;
color: rgba(46, 59, 50, .58);
font-size: .9rem;
line-height: 1.65;
}
/* BUTTON */
/* VISUAL */
/* ADDRESS */
/* ARROW */
/* PIN */
/* LITTLE NOTE */
/* BOTTOM */
/* RESPONSIVE */
/* MEEDOEN — FEEL / COLLAGE */
/* HEADING */
/* COLLAGE */
/* SHARED PHOTO */
/* MAIN IMAGE */
/* FOOD IMAGE */
/* OUTSIDE IMAGE */
/* MESSAGE */
/* STAMP */
/* BOTTOM */
/* RESPONSIVE */
/* MEEDOEN — SFEER */
/* HEADING */
/* SAME SCALE AS THE OTHER INNER SECTIONS */
/* GALLERY */
/* ITEMS */
/* IMAGE */
/* CAPTIONS */
/* BOTTOM NOTE */
/* RESPONSIVE */
/* MEEDOEN — GALLERY, SMALLER + PLAYFUL */
/* SHARED */
/* MAIN PHOTO */
/* TOP RIGHT */
/* BOTTOM RIGHT */
/* CAPTIONS */
/* LITTLE EDITORIAL DETAIL */
/* BOTTOM NOTE */
/* RESPONSIVE */
/* MEEDOEN — WAAR KRIJG JIJ ZIN VAN? */
.ng-nbm-pull {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
color: var(--color-dark);
}
/* HEADING */
.ng-nbm-pull-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(4rem, 6vw, 5rem);
}
.ng-nbm-pull-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nbm-pull-heading h2 {
max-width: 560px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.02;
letter-spacing: -.04em;
}
.ng-nbm-pull-heading > p {
max-width: 380px;
margin: 0;
color: rgba(46, 59, 50, .56);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* ROW */
.ng-nbm-pull-row {
display: grid;
grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
align-items: center;
gap: clamp(3rem, 7vw, 7rem);
min-height: 320px;
padding: clamp(2.6rem, 4vw, 4rem) 0;
border-top: 1px solid rgba(46, 59, 50, .11);
}
.ng-nbm-pull-row:last-of-type {
border-bottom: 1px solid rgba(46, 59, 50, .11);
}
/* second row flips proportions */
.ng-nbm-pull-row--outside {
grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr);
}
/* COPY */
.ng-nbm-pull-copy {
position: relative;
max-width: 400px;
}
.ng-nbm-pull-word {
display: inline-block;
margin-bottom: .75rem;
color: var(--color-coral);
font-size: .6rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nbm-pull-copy h3 {
margin: 0;
color: var(--color-dark);
font-size: clamp(1.75rem, 2.5vw, 2.45rem);
font-weight: 750;
line-height: 1;
letter-spacing: -.045em;
}
.ng-nbm-pull-copy > p {
max-width: 350px;
margin: 1rem 0 0;
color: rgba(46, 59, 50, .55);
font-size: .8rem;
line-height: 1.6;
}
.ng-nbm-pull-small {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 1.35rem;
color: rgba(46, 59, 50, .42);
font-size: .62rem;
font-weight: 650;
}
.ng-nbm-pull-small::before {
content: "";
width: 18px;
height: 1px;
background: var(--color-coral);
}
/* IMAGES */
.ng-nbm-pull-image {
position: relative;
height: 280px;
margin: 0;
overflow: hidden;
background: var(--color-cream);
}
.ng-nbm-pull-row--make .ng-nbm-pull-image {
border-radius: 10px 52px 10px 10px;
}
.ng-nbm-pull-row--outside .ng-nbm-pull-image {
border-radius: 48px 10px 10px 10px;
}
.ng-nbm-pull-row--together .ng-nbm-pull-image {
border-radius: 10px 10px 52px 10px;
}
.ng-nbm-pull-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.ng-nbm-pull-row:hover .ng-nbm-pull-image img {
transform: scale(1.025);
}
/* SMALL CREATIVE DETAILS */
.ng-nbm-pull-row--make .ng-nbm-pull-copy::after {
content: "↗";
position: absolute;
right: -35px;
bottom: 5px;
color: var(--color-coral);
font-size: 1rem;
transform: rotate(7deg);
}
.ng-nbm-pull-row--outside .ng-nbm-pull-copy::after {
content: "✦";
position: absolute;
left: -32px;
top: 4px;
color: var(--color-coral);
font-size: .7rem;
}
.ng-nbm-pull-row--together .ng-nbm-pull-copy::after {
content: "↳";
position: absolute;
right: -28px;
top: 25px;
color: var(--color-coral);
font-size: .9rem;
transform: rotate(-8deg);
}
/* BOTTOM */
.ng-nbm-pull-bottom {
display: flex;
align-items: flex-start;
gap: .7rem;
padding-top: 1.6rem;
}
.ng-nbm-pull-bottom > span {
color: var(--color-coral);
font-size: .9rem;
}
.ng-nbm-pull-bottom p {
margin: 0;
color: rgba(46, 59, 50, .46);
font-size: .72rem;
}
.ng-nbm-pull-bottom strong {
color: var(--color-dark);
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-nbm-pull-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-nbm-pull-row, .ng-nbm-pull-row--outside {
grid-template-columns: 1fr;
gap: 2rem;
}
.ng-nbm-pull-row--outside .ng-nbm-pull-image {
order: 2;
}
.ng-nbm-pull-row--outside .ng-nbm-pull-copy {
order: 1;
}
.ng-nbm-pull-image {
height: 320px;
}
}
@media (max-width: 600px) {
.ng-nbm-pull {
padding: 4.5rem 0;
}
.ng-nbm-pull-row {
padding: 2.5rem 0;
}
.ng-nbm-pull-image {
height: 240px;
}
.ng-nbm-pull-copy::after {
display: none;
}
}
/* MEEDOEN — PROBEER HET EENS */
.ng-nbm-try {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: var(--color-dark);
color: #fff;
}
/* MAIN SPLIT */
.ng-nbm-try-main {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
align-items: center;
gap: clamp(4rem, 8vw, 8rem);
}
/* PHOTO */
.ng-nbm-try-photo {
position: relative;
height: clamp(390px, 43vw, 520px);
margin: 0;
overflow: hidden;
border-radius: 12px 68px 12px 12px;
}
.ng-nbm-try-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.ng-nbm-try-photo:hover img {
transform: scale(1.025);
}
/* caption */
.ng-nbm-try-photo figcaption {
position: absolute;
right: 22px;
bottom: 22px;
display: flex;
align-items: flex-start;
gap: .7rem;
max-width: 230px;
padding: .95rem 1.05rem;
border-radius: 10px 26px 10px 10px;
background: rgba(248,246,238,.94);
box-shadow: 0 14px 34px rgba(0,0,0,.13);
}
.ng-nbm-try-photo figcaption > span {
color: var(--color-coral);
}
.ng-nbm-try-photo figcaption p {
margin: 0;
color: rgba(46,59,50,.48);
font-size: .63rem;
line-height: 1.4;
}
.ng-nbm-try-photo figcaption strong {
display: block;
margin-top: .18rem;
color: var(--color-dark);
font-size: .72rem;
}
/* COPY */
.ng-nbm-try-copy {
max-width: 470px;
}
.ng-nbm-try-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nbm-try-copy h2 {
max-width: 470px;
margin: 0;
color: #fff;
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.02;
letter-spacing: -.04em;
}
.ng-nbm-try-copy > p:not(.ng-nbm-try-kicker) {
max-width: 420px;
margin: 1.3rem 0 0;
color: rgba(255,255,255,.56);
font-size: var(--ng-home-body);
line-height: 1.67;
}
/* SMALL THOUGHT */
.ng-nbm-try-thought {
display: flex;
align-items: flex-start;
gap: .7rem;
margin-top: 1.8rem;
padding-top: 1.3rem;
border-top: 1px solid rgba(255,255,255,.11);
}
.ng-nbm-try-thought > span {
color: var(--color-coral);
font-size: .7rem;
}
.ng-nbm-try-thought p {
margin: 0;
color: rgba(255,255,255,.4);
font-size: .65rem;
line-height: 1.4;
}
.ng-nbm-try-thought strong {
display: block;
color: #fff;
}
/* BUTTON */
.ng-nbm-try-button {
display: inline-flex;
align-items: center;
gap: .9rem;
margin-top: 1.8rem;
padding: .48rem .52rem .48rem 1.05rem;
border: 1px solid rgba(255,255,255,.13);
border-radius: 999px;
background: rgba(255,255,255,.045);
color: #fff;
font-size: .72rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease, background-color .25s ease;
}
.ng-nbm-try-button i {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-style: normal;
transition: transform .25s ease;
}
.ng-nbm-try-button:hover {
transform: translateY(-3px);
background: rgba(255,255,255,.07);
}
.ng-nbm-try-button:hover i {
transform: rotate(8deg) translate(1px,-1px);
}
/* OPTIONS */
.ng-nbm-try-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: clamp(4rem, 6vw, 5.5rem);
border-top: 1px solid rgba(255,255,255,.11);
border-bottom: 1px solid rgba(255,255,255,.11);
}
.ng-nbm-try-option {
position: relative;
min-height: 185px;
padding: 2rem clamp(1.5rem, 3vw, 2.4rem);
}
.ng-nbm-try-option:first-child {
padding-left: 0;
}
.ng-nbm-try-option:last-child {
padding-right: 0;
}
.ng-nbm-try-option + .ng-nbm-try-option {
border-left: 1px solid rgba(255,255,255,.1);
}
/* labels */
.ng-nbm-try-option > span {
display: block;
margin-bottom: .55rem;
color: var(--color-coral);
font-size: .55rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-nbm-try-option strong {
display: block;
color: #fff;
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
line-height: 1.1;
}
.ng-nbm-try-option p {
max-width: 310px;
margin: .7rem 0 0;
color: rgba(255,255,255,.43);
font-size: .7rem;
line-height: 1.55;
}
/* tiny coral marks */
.ng-nbm-try-option::after {
content: "";
position: absolute;
top: -4px;
left: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-coral);
}
.ng-nbm-try-option:not(:first-child)::after {
left: clamp(1.5rem, 3vw, 2.4rem);
}
/* BOTTOM */
.ng-nbm-try-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
padding-top: 1.6rem;
}
.ng-nbm-try-bottom p {
margin: 0;
color: rgba(255,255,255,.42);
font-size: .69rem;
}
.ng-nbm-try-bottom p strong {
color: #fff;
}
.ng-nbm-try-bottom a {
display: inline-flex;
align-items: center;
gap: .7rem;
color: #fff;
font-size: .68rem;
font-weight: 750;
text-decoration: none;
}
.ng-nbm-try-bottom a span {
color: var(--color-coral);
transition: transform .25s ease;
}
.ng-nbm-try-bottom a:hover span {
transform: translateX(4px);
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-nbm-try-main {
grid-template-columns: 1fr;
gap: 3rem;
}
.ng-nbm-try-photo {
height: 430px;
}
.ng-nbm-try-options {
grid-template-columns: 1fr;
}
.ng-nbm-try-option, .ng-nbm-try-option:first-child, .ng-nbm-try-option:last-child {
padding: 1.7rem 0;
}
.ng-nbm-try-option + .ng-nbm-try-option {
border-left: 0;
border-top: 1px solid rgba(255,255,255,.1);
}
.ng-nbm-try-option:not(:first-child)::after {
left: 0;
}
}
@media (max-width: 600px) {
.ng-nbm-try {
padding: 4.5rem 0;
}
.ng-nbm-try-photo {
height: 300px;
border-radius: 10px 38px 10px 10px;
}
.ng-nbm-try-photo figcaption {
right: 12px;
bottom: 12px;
}
.ng-nbm-try-bottom {
align-items: flex-start;
flex-direction: column;
gap: .8rem;
}
}
/* MEEDOEN — KOM EENS KIJKEN */
.ng-nbm-come {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: var(--color-cream);
color: var(--color-dark);
}
/* HEADING */
.ng-nbm-come-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.ng-nbm-come-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nbm-come-heading h2 {
max-width: 570px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.02;
letter-spacing: -.04em;
}
.ng-nbm-come-heading > p {
max-width: 390px;
margin: 0;
color: rgba(46, 59, 50, .57);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* SCENE */
.ng-nbm-come-scene {
position: relative;
max-width: 1100px;
margin-inline: auto;
padding-bottom: 65px;
}
/* PHOTO */
.ng-nbm-come-photo {
width: 82%;
height: clamp(370px, 40vw, 500px);
margin: 0 0 0 auto;
overflow: hidden;
border-radius: 12px 64px 12px 12px;
background: #fff;
}
.ng-nbm-come-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.ng-nbm-come-scene:hover .ng-nbm-come-photo img {
transform: scale(1.02);
}
/* INVITATION PANEL */
.ng-nbm-come-invite {
position: absolute;
z-index: 4;
left: 0;
bottom: 0;
width: min(390px, 40%);
padding: clamp(1.7rem, 3vw, 2.5rem);
border-radius: 10px 42px 10px 10px;
background: #fff;
box-shadow: 0 20px 55px rgba(46, 59, 50, .1);
}
.ng-nbm-come-invite-kicker {
margin: 0 0 .65rem;
color: var(--color-coral);
font-size: .58rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-nbm-come-invite h3 {
max-width: 300px;
margin: 0;
color: var(--color-dark);
font-size: clamp(1.55rem, 2.3vw, 2.1rem);
font-weight: 750;
line-height: 1.02;
letter-spacing: -.04em;
}
.ng-nbm-come-invite > p:not(.ng-nbm-come-invite-kicker) {
max-width: 310px;
margin: 1rem 0 0;
color: rgba(46, 59, 50, .53);
font-size: .74rem;
line-height: 1.55;
}
/* BUTTON */
.ng-nbm-come-invite a {
display: inline-flex;
align-items: center;
gap: .9rem;
margin-top: 1.5rem;
padding: .48rem .52rem .48rem 1rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .7rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease;
}
.ng-nbm-come-invite a i {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-style: normal;
transition: transform .25s ease;
}
.ng-nbm-come-invite a:hover {
transform: translateY(-3px);
}
.ng-nbm-come-invite a:hover i {
transform: rotate(8deg) translate(1px, -1px);
}
/* SMALL NOTE */
.ng-nbm-come-note {
position: absolute;
z-index: 5;
right: 1%;
bottom: 15px;
display: flex;
align-items: flex-start;
gap: .6rem;
transform: rotate(-2deg);
}
.ng-nbm-come-note > span {
color: var(--color-coral);
font-size: .95rem;
}
.ng-nbm-come-note p {
margin: 0;
color: rgba(46, 59, 50, .4);
font-size: .61rem;
line-height: 1.35;
}
.ng-nbm-come-note strong {
display: block;
color: var(--color-dark);
}
/* DETAILS STRIP */
.ng-nbm-come-details {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 1100px;
margin: clamp(3.5rem, 6vw, 5rem) auto 0;
border-top: 1px solid rgba(46, 59, 50, .12);
border-bottom: 1px solid rgba(46, 59, 50, .12);
}
.ng-nbm-come-detail {
min-height: 125px;
padding: 1.7rem clamp(1rem, 3vw, 2.3rem);
}
.ng-nbm-come-detail:first-child {
padding-left: 0;
}
.ng-nbm-come-detail:last-child {
padding-right: 0;
}
.ng-nbm-come-detail + .ng-nbm-come-detail {
border-left: 1px solid rgba(46, 59, 50, .1);
}
.ng-nbm-come-detail small {
display: block;
margin-bottom: .4rem;
color: var(--color-coral);
font-size: .54rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-nbm-come-detail strong {
display: block;
color: var(--color-dark);
font-size: clamp(.95rem, 1.4vw, 1.15rem);
font-weight: 750;
}
.ng-nbm-come-detail > span, .ng-nbm-come-detail > a {
display: block;
margin-top: .35rem;
color: rgba(46, 59, 50, .5);
font-size: .67rem;
text-decoration: none;
}
.ng-nbm-come-detail > a:hover {
color: var(--color-coral);
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-nbm-come-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-nbm-come-scene {
padding-bottom: 0;
}
.ng-nbm-come-photo {
width: 100%;
height: 400px;
}
.ng-nbm-come-invite {
position: relative;
left: auto;
bottom: auto;
width: min(90%, 430px);
margin: -70px 0 0 5%;
box-shadow: 0 15px 40px rgba(46, 59, 50, .1);
}
.ng-nbm-come-note {
display: none;
}
}
@media (max-width: 650px) {
.ng-nbm-come {
padding: 4.5rem 0;
}
.ng-nbm-come-photo {
height: 300px;
border-radius: 10px 38px 10px 10px;
}
.ng-nbm-come-invite {
width: 92%;
margin: -45px auto 0;
padding: 1.5rem;
}
.ng-nbm-come-details {
grid-template-columns: 1fr;
}
.ng-nbm-come-detail, .ng-nbm-come-detail:first-child, .ng-nbm-come-detail:last-child {
min-height: 0;
padding: 1.35rem 0;
}
.ng-nbm-come-detail + .ng-nbm-come-detail {
border-left: 0;
border-top: 1px solid rgba(46, 59, 50, .1);
}
}
/* MEEDOEN — FINAL CTA */
.ng-nbm-final {
position: relative;
overflow: hidden;
padding: clamp(6rem, 9vw, 9rem) 0 clamp(3rem, 4vw, 4rem);
background: #fff;
color: var(--color-dark);
}
/* giant quiet background word */
.ng-nbm-final::before {
content: "buiten";
position: absolute;
right: -1.5vw;
top: 50%;
transform: translateY(-53%);
color: rgba(46, 59, 50, .025);
font-size: clamp(8rem, 20vw, 18rem);
font-weight: 800;
line-height: .8;
letter-spacing: -.08em;
pointer-events: none;
}
/* INNER */
.ng-nbm-final-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .6fr);
align-items: center;
gap: clamp(4rem, 10vw, 10rem);
min-height: 300px;
}
/* COPY */
.ng-nbm-final-copy {
max-width: 680px;
}
.ng-nbm-final-kicker {
margin: 0 0 .85rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nbm-final-copy h2 {
max-width: 660px;
margin: 0;
color: var(--color-dark);
font-size: clamp(2.7rem, 4.4vw, 4.6rem);
font-weight: 760;
line-height: .96;
letter-spacing: -.05em;
}
.ng-nbm-final-copy > p:not(.ng-nbm-final-kicker) {
max-width: 430px;
margin: 1.3rem 0 0;
color: rgba(46, 59, 50, .52);
font-size: .82rem;
line-height: 1.6;
}
/* ACTION */
.ng-nbm-final-action {
position: relative;
display: flex;
align-items: flex-start;
flex-direction: column;
}
/* coral mark */
.ng-nbm-final-mark {
display: grid;
width: 62px;
height: 62px;
margin-bottom: 1.5rem;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
transform: rotate(7deg);
}
.ng-nbm-final-mark span {
font-size: 1rem;
}
/* BUTTON */
.ng-nbm-final-button {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: .55rem .6rem .55rem 1.15rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .72rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease;
}
.ng-nbm-final-button i {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-style: normal;
transition: transform .25s ease;
}
.ng-nbm-final-button:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(46, 59, 50, .12);
}
.ng-nbm-final-button:hover i {
transform: translateX(3px);
}
/* ADDRESS */
.ng-nbm-final-address {
display: flex;
align-items: center;
gap: .65rem;
margin-top: 1rem;
color: rgba(46, 59, 50, .42);
font-size: .62rem;
}
.ng-nbm-final-address i {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-coral);
}
/* LITTLE BOTTOM NOTE */
.ng-nbm-final-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: .55rem;
margin-top: clamp(3rem, 5vw, 5rem);
padding-top: 1.4rem;
border-top: 1px solid rgba(46, 59, 50, .1);
}
.ng-nbm-final-bottom > span {
color: var(--color-coral);
}
.ng-nbm-final-bottom p {
margin: 0;
color: rgba(46, 59, 50, .4);
font-size: .6rem;
font-weight: 650;
transform: rotate(-1deg);
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-nbm-final-inner {
grid-template-columns: 1fr;
gap: 3rem;
}
.ng-nbm-final-action {
align-items: flex-start;
}
}
@media (max-width: 600px) {
.ng-nbm-final {
padding: 4.5rem 0 2.5rem;
}
.ng-nbm-final-copy h2 {
font-size: clamp(2.6rem, 12vw, 3.8rem);
}
.ng-nbm-final::before {
display: none;
}
.ng-nbm-final-mark {
width: 50px;
height: 50px;
}
}
.ng-nbm-final {
position: relative;
overflow: hidden;
padding: clamp(5rem, 7vw, 6.5rem) 0 clamp(3rem, 4vw, 4rem);
background: #e8f0e3;
color: var(--color-dark);
}
.ng-nbm-final-copy h2 {
max-width: 620px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-nbm-final::before {
content: "buiten";
position: absolute;
right: 1%;
top: 50%;
transform: translateY(-50%);
color: rgba(46, 59, 50, .025);
font-size: clamp(6rem, 14vw, 11rem);
font-weight: 800;
line-height: .8;
letter-spacing: -.07em;
pointer-events: none;
}
.ng-nbm-final-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr);
align-items: center;
gap: clamp(3rem, 8vw, 7rem);
min-height: 240px;
}
/* BEZOEKEN — HERO */
.ng-nbv-hero {
padding: clamp(5rem, 7vw, 7rem) 0 clamp(3rem, 5vw, 4rem);
background: var(--color-cream);
color: var(--color-dark);
}
.ng-nbv-hero-layout {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(380px, 1.15fr);
align-items: center;
gap: clamp(4rem, 8vw, 8rem);
}
.ng-nbv-hero-copy {
max-width: 590px;
}
.ng-nbv-hero-kicker {
margin: 0 0 .9rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nbv-hero-copy h1 {
margin: 0;
color: var(--color-dark);
font-size: clamp(2.8rem, 4vw, 4.2rem);
font-weight: 760;
line-height: .97;
letter-spacing: -.05em;
}
.ng-nbv-hero-copy > p:last-child {
max-width: 470px;
margin: 1.35rem 0 0;
color: rgba(46, 59, 50, .58);
font-size: .9rem;
line-height: 1.65;
}
/* PHOTO */
.ng-nbv-hero-photo {
position: relative;
height: clamp(330px, 37vw, 455px);
margin: 0;
overflow: visible;
}
.ng-nbv-hero-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px 64px 12px 12px;
}
.ng-nbv-hero-photo figcaption {
position: absolute;
right: -18px;
bottom: 28px;
display: flex;
align-items: flex-start;
gap: .55rem;
padding: .8rem .95rem;
border-radius: 8px 24px 8px 8px;
background: #fff;
box-shadow: 0 12px 30px rgba(46,59,50,.1);
}
.ng-nbv-hero-photo figcaption > span {
color: var(--color-coral);
}
.ng-nbv-hero-photo figcaption p {
margin: 0;
color: rgba(46,59,50,.44);
font-size: .6rem;
line-height: 1.3;
}
.ng-nbv-hero-photo figcaption strong {
display: block;
color: var(--color-dark);
}
/* BOTTOM */
.ng-nbv-hero-line {
display: flex;
align-items: center;
gap: .7rem;
margin-top: 2.5rem;
padding-top: 1.35rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-nbv-hero-line > span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-coral);
}
.ng-nbv-hero-line p {
margin: 0;
color: rgba(46,59,50,.43);
font-size: .65rem;
}
@media (max-width: 800px) {
.ng-nbv-hero-layout {
grid-template-columns: 1fr;
}
.ng-nbv-hero-photo {
height: 360px;
}
}
/* BEZOEKEN — EVEN RONDKIJKEN */
.ng-nbv-look {
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
color: var(--color-dark);
}
/* HEADING */
.ng-nbv-look-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.ng-nbv-look-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nbv-look-heading h2 {
max-width: 580px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-nbv-look-heading > p {
max-width: 390px;
margin: 0;
color: rgba(46,59,50,.57);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* SCENE */
.ng-nbv-look-scene {
position: relative;
max-width: 1050px;
min-height: 560px;
margin-inline: auto;
padding: 0 95px;
}
/* PHOTO */
.ng-nbv-look-photo {
width: 78%;
height: 470px;
margin: 0 auto;
overflow: hidden;
border-radius: 58px 10px 58px 10px;
}
.ng-nbv-look-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* SMALL LABELS */
.ng-nbv-look-tag {
position: absolute;
z-index: 4;
padding: .7rem .85rem;
background: var(--color-cream);
box-shadow: 0 10px 30px rgba(46,59,50,.08);
}
.ng-nbv-look-tag small {
display: block;
color: var(--color-coral);
font-size: .52rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
}
.ng-nbv-look-tag strong {
display: block;
margin-top: .18rem;
color: var(--color-dark);
font-size: .75rem;
}
.ng-nbv-look-tag--one {
left: 1%;
top: 72px;
transform: rotate(-2deg);
border-radius: 8px 22px 8px 8px;
}
.ng-nbv-look-tag--two {
right: 0;
top: 185px;
transform: rotate(2deg);
border-radius: 22px 8px 8px 8px;
}
.ng-nbv-look-tag--three {
left: 7%;
bottom: 85px;
transform: rotate(1deg);
border-radius: 8px 8px 22px 8px;
}
/* NOTE */
.ng-nbv-look-note {
position: absolute;
right: 11%;
bottom: 23px;
display: flex;
gap: .55rem;
transform: rotate(-2deg);
}
.ng-nbv-look-note > span {
color: var(--color-coral);
}
.ng-nbv-look-note p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .6rem;
}
.ng-nbv-look-note strong {
display: block;
color: var(--color-dark);
}
/* BOTTOM */
.ng-nbv-look-bottom {
max-width: 1050px;
margin: 2.5rem auto 0;
padding-top: 1.4rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-nbv-look-bottom p {
margin: 0;
color: rgba(46,59,50,.43);
font-size: .67rem;
}
@media (max-width: 800px) {
.ng-nbv-look-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-nbv-look-scene {
min-height: 0;
padding: 0;
}
.ng-nbv-look-photo {
width: 100%;
height: 390px;
}
.ng-nbv-look-tag, .ng-nbv-look-note {
display: none;
}
}
/* BEZOEKEN — FINAL */
.ng-nbv-end {
position: relative;
overflow: hidden;
padding: clamp(5rem, 7vw, 6.5rem) 0 clamp(3rem, 4vw, 4rem);
background: #e8f0e3;
color: var(--color-dark);
}
.ng-nbv-end-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr);
align-items: center;
gap: clamp(3rem, 8vw, 7rem);
min-height: 230px;
}
.ng-nbv-end-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nbv-end-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-nbv-end-copy > p:last-child {
max-width: 430px;
margin: 1rem 0 0;
color: rgba(46,59,50,.54);
font-size: .78rem;
line-height: 1.6;
}
/* ACTION */
.ng-nbv-end-action {
display: flex;
align-items: flex-start;
flex-direction: column;
}
.ng-nbv-end-action a {
display: inline-flex;
align-items: center;
gap: .9rem;
padding: .5rem .55rem .5rem 1.05rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .7rem;
font-weight: 800;
text-decoration: none;
}
.ng-nbv-end-action a i {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
font-style: normal;
}
.ng-nbv-end-action > p {
margin: .75rem 0 0;
color: rgba(46,59,50,.4);
font-size: .6rem;
}
/* BOTTOM */
.ng-nbv-end-line {
display: flex;
align-items: center;
gap: .55rem;
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-nbv-end-line > span {
color: var(--color-coral);
}
.ng-nbv-end-line p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .6rem;
}
@media (max-width: 750px) {
.ng-nbv-end-inner {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.ng-nbv-look {
padding: clamp(6rem, 8vw, 8rem) 0;
background: var(--color-cream);
color: var(--color-dark);
}
.ng-nbv-look-tag {
position: absolute;
z-index: 4;
padding: .7rem .85rem;
background: #fff;
box-shadow: 0 10px 30px rgba(46,59,50,.08);
}
.ng-nbv-look-bottom {
max-width: 1050px;
margin: 2.5rem auto 0;
padding-top: 1.4rem;
border-top: 1px solid rgba(46,59,50,.12);
}
/* NIEUWS & AGENDA */
.ng-na-page {
background: var(--color-cream);
}
/* HERO */
/* HERO COPY */
/* HERO BOARD */
/* NOTE */
/* HERO BOTTOM */
/* NEXT EVENT */
.ng-na-next {
position: relative;
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
color: var(--color-dark);
}
/* SECTION HEADING */
.ng-na-next-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.ng-na-next-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-na-next-heading h2 {
max-width: 560px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-na-next-heading > p {
max-width: 390px;
margin: 0;
color: rgba(46, 59, 50, .56);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* FEATURED EVENT */
.ng-na-feature {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(350px, .9fr);
overflow: hidden;
min-height: 480px;
border: 1px solid rgba(46, 59, 50, .11);
border-radius: 12px 58px 12px 12px;
background: var(--color-cream);
}
/* IMAGE */
.ng-na-feature-image {
position: relative;
min-height: 480px;
margin: 0;
overflow: hidden;
}
.ng-na-feature-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.ng-na-feature:hover .ng-na-feature-image img {
transform: scale(1.02);
}
/* DATE */
.ng-na-feature-date {
position: absolute;
left: 22px;
bottom: 22px;
display: flex;
width: 70px;
height: 70px;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}
.ng-na-feature-date strong {
font-size: 1.5rem;
line-height: .9;
}
.ng-na-feature-date span {
margin-top: .25rem;
font-size: .56rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
/* FEATURE COPY */
.ng-na-feature-copy {
display: flex;
justify-content: center;
flex-direction: column;
padding: clamp(2rem, 4vw, 3.8rem);
}
.ng-na-feature-type {
margin: 0 0 .55rem;
color: var(--color-coral);
font-size: .58rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-na-feature-copy h3 {
margin: 0;
color: var(--color-dark);
font-size: clamp(2rem, 3vw, 3rem);
font-weight: 760;
line-height: .98;
letter-spacing: -.045em;
}
.ng-na-feature-intro {
max-width: 420px;
margin: 1rem 0 0;
color: rgba(46, 59, 50, .57);
font-size: .82rem;
line-height: 1.6;
}
/* META */
.ng-na-feature-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid rgba(46, 59, 50, .11);
border-bottom: 1px solid rgba(46, 59, 50, .11);
}
.ng-na-feature-meta > div {
padding: 0 1rem;
}
.ng-na-feature-meta > div:first-child {
padding-left: 0;
}
.ng-na-feature-meta > div + div {
border-left: 1px solid rgba(46, 59, 50, .1);
}
.ng-na-feature-meta small {
display: block;
margin-bottom: .35rem;
color: var(--color-coral);
font-size: .5rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ng-na-feature-meta strong {
display: block;
color: var(--color-dark);
font-size: .7rem;
}
.ng-na-feature-meta span {
display: block;
margin-top: .25rem;
color: rgba(46, 59, 50, .43);
font-size: .6rem;
}
/* FEATURE BOTTOM */
.ng-na-feature-bottom {
margin-top: 1.5rem;
}
.ng-na-feature-bottom > p {
max-width: 430px;
margin: 0;
color: rgba(46, 59, 50, .47);
font-size: .69rem;
line-height: 1.5;
}
/* BUTTON */
.ng-na-feature-button {
display: inline-flex;
align-items: center;
gap: .9rem;
margin-top: 1.4rem;
padding: .48rem .52rem .48rem 1rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .69rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease;
}
.ng-na-feature-button i {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-style: normal;
transition: transform .25s ease;
}
.ng-na-feature-button:hover {
transform: translateY(-3px);
}
.ng-na-feature-button:hover i {
transform: translateX(3px);
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-na-next-heading {
grid-template-columns: 1fr;
gap: 2rem;
}
.ng-na-feature {
grid-template-columns: 1fr;
}
.ng-na-feature-image {
min-height: 380px;
}
}
@media (max-width: 600px) {
.ng-na-next {
padding: 4.5rem 0;
}
.ng-na-feature {
border-radius: 10px 38px 10px 10px;
}
.ng-na-feature-image {
min-height: 290px;
}
.ng-na-feature-meta {
grid-template-columns: 1fr;
}
.ng-na-feature-meta > div, .ng-na-feature-meta > div:first-child {
padding: .8rem 0;
}
.ng-na-feature-meta > div + div {
border-left: 0;
border-top: 1px solid rgba(46, 59, 50, .08);
}
}
/* NIEUWS & AGENDA — AGENDA */
.ng-na-agenda {
position: relative;
padding: clamp(6rem, 8vw, 8rem) 0;
background: #e8f0e3;
color: var(--color-dark);
}
/* HEADING */
.ng-na-agenda-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(3.5rem, 5vw, 4.5rem);
}
.ng-na-agenda-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-na-agenda-heading h2 {
max-width: 570px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-na-agenda-heading > p {
max-width: 390px;
margin: 0;
color: rgba(46, 59, 50, .56);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* MONTH LABEL */
.ng-na-agenda-month {
display: flex;
align-items: baseline;
gap: .6rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(46, 59, 50, .13);
}
.ng-na-agenda-month > span {
color: var(--color-dark);
font-size: .72rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ng-na-agenda-month small {
color: rgba(46, 59, 50, .36);
font-size: .56rem;
}
/* EVENT ROW */
.ng-na-agenda-row {
display: grid;
grid-template-columns: 95px minmax(280px, 1fr) minmax(300px, .7fr) 50px;
align-items: center;
gap: clamp(1.5rem, 4vw, 4rem);
min-height: 190px;
padding: 2rem 0;
border-bottom: 1px solid rgba(46, 59, 50, .13);
transition: padding-left .3s ease;
}
.ng-na-agenda-row:hover {
padding-left: .7rem;
}
/* DATE */
.ng-na-agenda-date {
display: flex;
align-items: center;
gap: .65rem;
}
.ng-na-agenda-date strong {
color: var(--color-dark);
font-size: clamp(2.6rem, 4vw, 3.5rem);
font-weight: 760;
line-height: .9;
letter-spacing: -.05em;
}
.ng-na-agenda-date span {
color: var(--color-coral);
font-size: .55rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
/* EVENT COPY */
.ng-na-agenda-event small {
display: block;
margin-bottom: .35rem;
color: var(--color-coral);
font-size: .54rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-na-agenda-event h3 {
margin: 0;
color: var(--color-dark);
font-size: clamp(1.45rem, 2vw, 1.9rem);
font-weight: 750;
line-height: 1;
letter-spacing: -.035em;
}
.ng-na-agenda-event p {
max-width: 460px;
margin: .65rem 0 0;
color: rgba(46, 59, 50, .52);
font-size: .72rem;
line-height: 1.52;
}
/* META */
.ng-na-agenda-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.4rem;
}
.ng-na-agenda-meta > div {
padding-left: 1rem;
border-left: 1px solid rgba(46, 59, 50, .12);
}
.ng-na-agenda-meta small {
display: block;
margin-bottom: .3rem;
color: rgba(46, 59, 50, .4);
font-size: .5rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ng-na-agenda-meta strong {
color: var(--color-dark);
font-size: .67rem;
}
/* ARROW */
.ng-na-agenda-arrow {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border: 1px solid rgba(46, 59, 50, .13);
border-radius: 50%;
background: rgba(255, 255, 255, .4);
color: var(--color-dark);
text-decoration: none;
transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.ng-na-agenda-arrow:hover {
transform: translateX(3px);
background: var(--color-coral);
color: #fff;
}
/* MORE COMING */
.ng-na-agenda-coming {
display: grid;
grid-template-columns: 42px auto minmax(80px, 1fr);
align-items: center;
gap: 1rem;
padding: 1.7rem 0;
border-bottom: 1px solid rgba(46, 59, 50, .13);
}
.ng-na-agenda-coming-mark {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-size: .7rem;
}
.ng-na-agenda-coming small {
display: block;
margin-bottom: .2rem;
color: var(--color-coral);
font-size: .51rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.ng-na-agenda-coming p {
margin: 0;
color: rgba(46, 59, 50, .49);
font-size: .68rem;
}
.ng-na-agenda-coming-line {
height: 1px;
margin-left: 1rem;
background: repeating-linear-gradient(to right, rgba(240, 102, 83, .45) 0 4px, transparent 4px 12px);
}
/* BOTTOM */
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-na-agenda-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-na-agenda-row {
grid-template-columns: 80px minmax(0, 1fr) 44px;
}
.ng-na-agenda-meta {
grid-column: 2 / 3;
margin-top: .5rem;
}
.ng-na-agenda-arrow {
grid-column: 3;
grid-row: 1 / 3;
}
}
@media (max-width: 600px) {
.ng-na-agenda {
padding: 4.5rem 0;
}
.ng-na-agenda-row {
grid-template-columns: 65px 1fr;
gap: 1.3rem;
padding: 1.8rem 0;
}
.ng-na-agenda-row:hover {
padding-left: 0;
}
.ng-na-agenda-meta {
grid-column: 2;
grid-template-columns: 1fr;
gap: .8rem;
}
.ng-na-agenda-arrow {
grid-column: 2;
grid-row: auto;
margin-top: .4rem;
}
.ng-na-agenda-coming {
grid-template-columns: 36px 1fr;
}
.ng-na-agenda-coming-line {
display: none;
}
}
/* NIEUWS & AGENDA — NIEUWS UIT NOORD */
.ng-na-news {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
color: var(--color-dark);
}
/* HEADING */
.ng-na-news-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(3.5rem, 5vw, 4.5rem);
}
.ng-na-news-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-na-news-heading h2 {
max-width: 570px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-na-news-heading > p {
max-width: 390px;
margin: 0;
color: rgba(46, 59, 50, .56);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* MAGAZINE LAYOUT */
.ng-na-news-layout {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr);
gap: clamp(3rem, 6vw, 6rem);
align-items: start;
}
.ng-na-news-layout--single {
grid-template-columns: minmax(0, 820px);
}
/* LEAD STORY */
.ng-na-news-lead {
min-width: 0;
}
.ng-na-news-lead-image {
display: block;
height: clamp(340px, 38vw, 470px);
overflow: hidden;
border-radius: 10px 58px 10px 10px;
background: var(--color-cream);
text-decoration: none;
}
.ng-na-news-lead-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.ng-na-news-lead:hover .ng-na-news-lead-image img {
transform: scale(1.025);
}
/* LEAD COPY */
.ng-na-news-lead-copy {
max-width: 650px;
padding-top: 1.4rem;
}
/* META */
.ng-na-news-meta {
display: flex;
align-items: center;
gap: .55rem;
color: rgba(46, 59, 50, .4);
font-size: .55rem;
font-weight: 750;
letter-spacing: .05em;
text-transform: uppercase;
}
.ng-na-news-meta i {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-coral);
}
/* TITLE */
.ng-na-news-lead h3 {
max-width: 620px;
margin: .65rem 0 0;
font-size: clamp(1.8rem, 2.8vw, 2.65rem);
font-weight: 750;
line-height: 1.02;
letter-spacing: -.04em;
}
.ng-na-news-lead h3 a {
color: var(--color-dark);
text-decoration: none;
}
/* EXCERPT */
.ng-na-news-lead-copy > p {
max-width: 550px;
margin: .8rem 0 0;
color: rgba(46, 59, 50, .53);
font-size: .77rem;
line-height: 1.58;
}
/* READ LINK */
.ng-na-news-read {
display: inline-flex;
align-items: center;
gap: .7rem;
margin-top: 1.2rem;
color: var(--color-dark);
font-size: .68rem;
font-weight: 800;
text-decoration: none;
}
.ng-na-news-read i {
color: var(--color-coral);
font-style: normal;
transition: transform .25s ease;
}
.ng-na-news-read:hover i {
transform: translateX(4px);
}
/* SIDE STORIES */
.ng-na-news-side {
display: flex;
flex-direction: column;
}
.ng-na-news-small {
display: grid;
grid-template-columns: 145px minmax(0, 1fr);
gap: 1.3rem;
padding: 0 0 2rem;
border-bottom: 1px solid rgba(46, 59, 50, .11);
}
.ng-na-news-small + .ng-na-news-small {
margin-top: 2rem;
}
/* SMALL IMAGE */
.ng-na-news-small-image {
display: block;
height: 140px;
overflow: hidden;
border-radius: 8px 26px 8px 8px;
background: var(--color-cream);
text-decoration: none;
}
.ng-na-news-small:nth-child(even) .ng-na-news-small-image {
border-radius: 26px 8px 8px 8px;
}
.ng-na-news-small-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.ng-na-news-small:hover .ng-na-news-small-image img {
transform: scale(1.035);
}
/* SMALL COPY */
.ng-na-news-small-copy {
position: relative;
padding-right: 28px;
}
.ng-na-news-small h3 {
margin: .55rem 0 0;
color: var(--color-dark);
font-size: clamp(1rem, 1.4vw, 1.25rem);
font-weight: 750;
line-height: 1.07;
letter-spacing: -.03em;
}
.ng-na-news-small h3 a {
color: inherit;
text-decoration: none;
}
.ng-na-news-small-copy > p {
margin: .55rem 0 0;
color: rgba(46, 59, 50, .5);
font-size: .67rem;
line-height: 1.5;
}
/* LITTLE ARROW */
.ng-na-news-small-arrow {
position: absolute;
right: 0;
bottom: 0;
display: grid;
width: 25px;
height: 25px;
place-items: center;
border: 1px solid rgba(46, 59, 50, .12);
border-radius: 50%;
color: var(--color-coral);
font-size: .58rem;
text-decoration: none;
transition: background-color .25s ease, color .25s ease;
}
.ng-na-news-small-arrow:hover {
background: var(--color-coral);
color: #fff;
}
/* NO FEATURED IMAGE */
.ng-na-news-no-image {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
gap: .6rem;
background: linear-gradient(145deg, var(--color-cream), #e8f0e3);
color: rgba(46, 59, 50, .42);
}
.ng-na-news-no-image > span {
color: var(--color-coral);
font-size: 1.1rem;
}
.ng-na-news-no-image small {
font-size: .55rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
/* EMPTY STATE */
.ng-na-news-empty {
display: flex;
align-items: flex-start;
gap: 1rem;
max-width: 700px;
padding: 2.5rem 0;
border-top: 1px solid rgba(46, 59, 50, .11);
border-bottom: 1px solid rgba(46, 59, 50, .11);
}
.ng-na-news-empty > span {
color: var(--color-coral);
}
.ng-na-news-empty strong {
color: var(--color-dark);
font-size: 1rem;
}
.ng-na-news-empty p {
margin: .35rem 0 0;
color: rgba(46, 59, 50, .49);
font-size: .7rem;
}
/* BOTTOM */
.ng-na-news-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-top: clamp(3rem, 5vw, 4rem);
padding-top: 1.4rem;
border-top: 1px solid rgba(46, 59, 50, .1);
}
.ng-na-news-bottom p {
margin: 0;
color: rgba(46, 59, 50, .42);
font-size: .65rem;
}
.ng-na-news-bottom a {
display: inline-flex;
align-items: center;
gap: .65rem;
color: var(--color-dark);
font-size: .67rem;
font-weight: 800;
text-decoration: none;
}
.ng-na-news-bottom a span {
color: var(--color-coral);
transition: transform .25s ease;
}
.ng-na-news-bottom a:hover span {
transform: translateX(4px);
}
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-na-news-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-na-news-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.ng-na-news-side {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
.ng-na-news-small, .ng-na-news-small + .ng-na-news-small {
grid-template-columns: 1fr;
margin-top: 0;
}
.ng-na-news-small-image {
height: 220px;
}
}
@media (max-width: 600px) {
.ng-na-news {
padding: 4.5rem 0;
}
.ng-na-news-lead-image {
height: 290px;
border-radius: 10px 38px 10px 10px;
}
.ng-na-news-side {
grid-template-columns: 1fr;
}
.ng-na-news-small-image {
height: 230px;
}
.ng-na-news-bottom {
align-items: flex-start;
flex-direction: column;
gap: .8rem;
}
}
.ng-na-news-lead-image:has(.ng-na-news-no-image) {
height: 310px;
}
.ng-na-news-small-image:has(.ng-na-news-no-image) {
height: 120px;
}
.ng-na-news-no-image {
position: relative;
display: flex;
width: 100%;
height: 100%;
align-items: flex-end;
justify-content: flex-start;
padding: 1.5rem;
background: linear-gradient(145deg, #eef3e9, var(--color-cream));
color: var(--color-dark);
}
.ng-na-news-no-image::before {
content: "";
position: absolute;
top: 22%;
right: 12%;
width: 95px;
height: 95px;
border: 1px solid rgba(46,59,50,.08);
border-radius: 50%;
}
.ng-na-news-no-image > span {
position: relative;
z-index: 2;
color: var(--color-coral);
font-size: .85rem;
}
.ng-na-news-no-image small {
position: relative;
z-index: 2;
margin-left: .6rem;
color: rgba(46,59,50,.5);
font-size: .54rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
/* NIEUWS & AGENDA — TERUGBLIK */
.ng-na-lookback {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: var(--color-dark);
color: #fff;
}
/* HEADING */
.ng-na-lookback-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(3.5rem, 5vw, 4.5rem);
}
.ng-na-lookback-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-na-lookback-heading h2 {
max-width: 570px;
margin: 0;
color: #fff;
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-na-lookback-heading > p {
max-width: 390px;
margin: 0;
color: rgba(255,255,255,.53);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* GALLERY */
.ng-na-lookback-gallery {
display: grid;
grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(240px, .4fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: end;
}
/* ITEM */
.ng-na-lookback-item {
min-width: 0;
}
/* main item */
/* smaller items */
/* IMAGE */
.ng-na-lookback-image {
display: block;
overflow: hidden;
background: rgba(255,255,255,.04);
text-decoration: none;
}
.ng-na-lookback-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.ng-na-lookback-item:hover .ng-na-lookback-image img {
transform: scale(1.03);
}
/* PLACEHOLDER */
.ng-na-lookback-placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
gap: .5rem;
border: 1px solid rgba(255,255,255,.08);
background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
}
.ng-na-lookback-placeholder span {
color: var(--color-coral);
}
.ng-na-lookback-placeholder small {
color: rgba(255,255,255,.35);
font-size: .54rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
/* COPY */
.ng-na-lookback-copy {
padding-top: 1.15rem;
}
.ng-na-lookback-date {
color: var(--color-coral);
font-size: .53rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.ng-na-lookback-copy h3 {
margin: .45rem 0 0;
color: #fff;
font-size: clamp(1.05rem, 1.6vw, 1.45rem);
font-weight: 750;
line-height: 1.05;
letter-spacing: -.03em;
}
.ng-na-lookback-copy h3 a {
color: inherit;
text-decoration: none;
}
.ng-na-lookback-copy > p {
max-width: 420px;
margin: .65rem 0 0;
color: rgba(255,255,255,.43);
font-size: .69rem;
line-height: 1.5;
}
/* READ LINK */
.ng-na-lookback-read {
display: inline-flex;
align-items: center;
gap: .65rem;
margin-top: .9rem;
color: #fff;
font-size: .63rem;
font-weight: 750;
text-decoration: none;
}
.ng-na-lookback-read span {
color: var(--color-coral);
transition: transform .25s ease;
}
.ng-na-lookback-read:hover span {
transform: translateX(4px);
}
/* EMPTY STATE */
.ng-na-lookback-empty {
display: flex;
align-items: center;
gap: .8rem;
padding: 1.8rem 0;
border-top: 1px solid rgba(255,255,255,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.ng-na-lookback-empty > span {
color: var(--color-coral);
}
.ng-na-lookback-empty p {
margin: 0;
color: rgba(255,255,255,.43);
font-size: .7rem;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-na-lookback-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-na-lookback-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.ng-na-lookback {
padding: 4.5rem 0;
}
.ng-na-lookback-gallery {
grid-template-columns: 1fr;
}
}
/* NIEUWS & AGENDA — NIEUWSBRIEF */
.ng-na-letter {
position: relative;
overflow: hidden;
padding: clamp(5rem, 7vw, 6.5rem) 0 clamp(3rem, 4vw, 4rem);
background: #e8f0e3;
color: var(--color-dark);
}
/* QUIET BACKGROUND DETAIL */
.ng-na-letter::after {
content: "";
position: absolute;
right: -110px;
bottom: -150px;
width: 340px;
height: 340px;
border: 1px solid rgba(46,59,50,.05);
border-radius: 50%;
box-shadow: inset 0 0 0 44px rgba(46,59,50,.015);
pointer-events: none;
}
/* INNER */
.ng-na-letter-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .5fr);
align-items: center;
gap: clamp(3rem, 8vw, 7rem);
min-height: 220px;
}
/* COPY */
.ng-na-letter-copy {
max-width: 620px;
}
.ng-na-letter-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-na-letter-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-na-letter-copy > p:not(.ng-na-letter-kicker) {
max-width: 440px;
margin: 1rem 0 0;
color: rgba(46,59,50,.54);
font-size: .78rem;
line-height: 1.6;
}
/* ACTION */
.ng-na-letter-action {
display: flex;
align-items: flex-start;
flex-direction: column;
}
.ng-na-letter-icon {
display: grid;
width: 48px;
height: 48px;
margin-bottom: 1.15rem;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
transform: rotate(6deg);
}
.ng-na-letter-icon span {
font-size: .8rem;
}
/* BUTTON */
.ng-na-letter-button {
display: inline-flex;
align-items: center;
gap: .9rem;
padding: .5rem .55rem .5rem 1.05rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .7rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease;
}
.ng-na-letter-button i {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-style: normal;
transition: transform .25s ease;
}
.ng-na-letter-button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(46,59,50,.1);
}
.ng-na-letter-button:hover i {
transform: translateX(3px);
}
/* tiny reassurance */
.ng-na-letter-action > p {
max-width: 290px;
margin: .8rem 0 0;
color: rgba(46,59,50,.4);
font-size: .59rem;
line-height: 1.45;
}
/* BOTTOM DETAIL */
.ng-na-letter-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: .55rem;
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-na-letter-bottom > span {
color: var(--color-coral);
}
.ng-na-letter-bottom p {
margin: 0;
color: rgba(46,59,50,.38);
font-size: .59rem;
}
/* RESPONSIVE */
@media (max-width: 750px) {
.ng-na-letter-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
@media (max-width: 600px) {
.ng-na-letter {
padding: 4.5rem 0 2.8rem;
}
.ng-na-letter::after {
display: none;
}
}
/* MAIN IMAGE HERO */
/* dark image wash */
/* soft darker vignette on left like screenshot */
/* slight spacing after hero before next section if needed */
/* RESPONSIVE */
/* CONTACT */
.ng-contact-main {
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
color: var(--color-dark);
}
/* HEADING */
.ng-contact-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(3.5rem, 6vw, 5rem);
}
.ng-contact-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-contact-heading h2, .ng-contact-noordbuiten h2 {
max-width: 590px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-contact-heading > p {
max-width: 390px;
margin: 0;
color: rgba(46, 59, 50, .56);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* LAYOUT */
.ng-contact-layout {
display: grid;
grid-template-columns: minmax(270px, .55fr) minmax(0, 1.15fr);
gap: clamp(4rem, 9vw, 9rem);
align-items: start;
padding-top: 2rem;
border-top: 1px solid rgba(46, 59, 50, .11);
}
/* CONTACT INFO */
.ng-contact-info {
padding-top: .5rem;
}
.ng-contact-info-intro {
display: flex;
gap: .7rem;
max-width: 310px;
margin-bottom: 2.4rem;
}
.ng-contact-info-mark {
color: var(--color-coral);
}
.ng-contact-info-intro p {
margin: 0;
color: rgba(46, 59, 50, .48);
font-size: .72rem;
line-height: 1.55;
}
.ng-contact-info-intro strong {
display: block;
color: var(--color-dark);
}
/* DETAILS */
.ng-contact-info-list {
border-top: 1px solid rgba(46, 59, 50, .1);
}
.ng-contact-info-row {
padding: 1.35rem 0;
border-bottom: 1px solid rgba(46, 59, 50, .1);
}
.ng-contact-info-row small {
display: block;
margin-bottom: .35rem;
color: var(--color-coral);
font-size: .53rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-contact-info-row strong, .ng-contact-info-row a {
display: block;
color: var(--color-dark);
font-size: .8rem;
font-weight: 750;
text-decoration: none;
}
.ng-contact-info-row a:hover {
color: var(--color-coral);
}
.ng-contact-info-row > span {
display: block;
margin-top: .2rem;
color: rgba(46, 59, 50, .42);
font-size: .64rem;
}
/* NOTE */
.ng-contact-side-note {
display: flex;
align-items: flex-start;
gap: .65rem;
margin-top: 2rem;
}
.ng-contact-side-note > span {
width: 6px;
height: 6px;
flex: 0 0 6px;
margin-top: .35rem;
border-radius: 50%;
background: var(--color-coral);
}
.ng-contact-side-note p {
max-width: 280px;
margin: 0;
color: rgba(46, 59, 50, .4);
font-size: .61rem;
line-height: 1.5;
}
/* FORM */
.ng-contact-form-wrap {
max-width: 720px;
}
.ng-contact-form {
display: grid;
gap: 1.45rem;
}
.ng-contact-form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
}
.ng-contact-field {
display: grid;
gap: .45rem;
}
.ng-contact-field label {
color: var(--color-dark);
font-size: .62rem;
font-weight: 800;
}
.ng-contact-field input, .ng-contact-field select, .ng-contact-field textarea {
width: 100%;
border: 1px solid rgba(46, 59, 50, .14);
border-radius: 10px;
outline: 0;
background: var(--color-cream);
color: var(--color-dark);
font: inherit;
font-size: .75rem;
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ng-contact-field input, .ng-contact-field select {
height: 52px;
padding: 0 1rem;
}
.ng-contact-field textarea {
min-height: 170px;
padding: 1rem;
resize: vertical;
}
.ng-contact-field input:focus, .ng-contact-field select:focus, .ng-contact-field textarea:focus {
border-color: var(--color-green);
background: #fff;
box-shadow: 0 0 0 3px rgba(62, 107, 71, .08);
}
.ng-contact-field input::placeholder, .ng-contact-field textarea::placeholder {
color: rgba(46, 59, 50, .34);
}
/* SUBMIT */
.ng-contact-form-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding-top: .4rem;
}
.ng-contact-form-bottom > p {
max-width: 300px;
margin: 0;
color: rgba(46, 59, 50, .37);
font-size: .59rem;
line-height: 1.45;
}
.ng-contact-submit {
display: inline-flex;
align-items: center;
gap: .9rem;
padding: .5rem .55rem .5rem 1.05rem;
border: 0;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font: inherit;
font-size: .7rem;
font-weight: 800;
cursor: pointer;
transition: transform .25s ease, box-shadow .25s ease;
}
.ng-contact-submit i {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
font-style: normal;
transition: transform .25s ease;
}
.ng-contact-submit:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(46, 59, 50, .11);
}
.ng-contact-submit:hover i {
transform: translateX(3px);
}
/* MESSAGES */
.ng-contact-message {
display: flex;
align-items: flex-start;
gap: .8rem;
margin-bottom: 1.7rem;
padding: 1rem 1.1rem;
border-radius: 8px 24px 8px 8px;
}
.ng-contact-message > span {
display: grid;
width: 28px;
height: 28px;
flex: 0 0 28px;
place-items: center;
border-radius: 50%;
font-size: .65rem;
font-weight: 800;
}
.ng-contact-message strong {
display: block;
font-size: .72rem;
}
.ng-contact-message p {
margin: .2rem 0 0;
font-size: .65rem;
}
.ng-contact-message--success {
background: var(--color-green-light);
}
.ng-contact-message--success > span {
background: var(--color-green);
color: #fff;
}
.ng-contact-message--error {
background: rgba(240, 102, 83, .1);
}
.ng-contact-message--error > span {
background: var(--color-coral);
color: #fff;
}
/* honeypot */
.ng-contact-honeypot {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* NOORDBUITEN STRIP */
.ng-contact-noordbuiten {
padding: clamp(5rem, 7vw, 6.5rem) 0 clamp(3rem, 4vw, 4rem);
background: var(--color-green-light);
color: var(--color-dark);
}
.ng-contact-noordbuiten-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr);
align-items: center;
gap: clamp(3rem, 8vw, 7rem);
min-height: 220px;
}
.ng-contact-noordbuiten-action > p {
max-width: 320px;
margin: 0 0 1.2rem;
color: rgba(46, 59, 50, .5);
font-size: .72rem;
line-height: 1.55;
}
.ng-contact-noordbuiten-action a {
display: inline-flex;
align-items: center;
gap: .85rem;
padding: .5rem .55rem .5rem 1rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .68rem;
font-weight: 800;
text-decoration: none;
}
.ng-contact-noordbuiten-action a i {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
font-style: normal;
}
/* BOTTOM */
.ng-contact-noordbuiten-bottom {
display: flex;
align-items: center;
gap: .55rem;
margin-top: 2rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(46, 59, 50, .1);
}
.ng-contact-noordbuiten-bottom > span {
color: var(--color-coral);
}
.ng-contact-noordbuiten-bottom p {
margin: 0;
color: rgba(46, 59, 50, .4);
font-size: .6rem;
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-contact-heading, .ng-contact-layout, .ng-contact-noordbuiten-inner {
grid-template-columns: 1fr;
}
.ng-contact-heading {
gap: 1.5rem;
}
.ng-contact-layout {
gap: 3rem;
}
.ng-contact-info {
max-width: 520px;
}
}
@media (max-width: 600px) {
.ng-contact-main {
padding: 4.5rem 0;
}
.ng-contact-form-row {
grid-template-columns: 1fr;
}
.ng-contact-form-bottom {
align-items: flex-start;
flex-direction: column;
}
.ng-contact-noordbuiten {
padding: 4.5rem 0 2.8rem;
}
}
/* DOE MEE — ENTRY */
.ng-dm-entry {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
color: var(--color-dark);
}
/* LAYOUT */
.ng-dm-entry-layout {
display: grid;
grid-template-columns: minmax(320px, .72fr) minmax(0, 1.15fr);
align-items: center;
gap: clamp(5rem, 10vw, 10rem);
}
/* COPY */
.ng-dm-entry-copy {
max-width: 540px;
}
.ng-dm-kicker {
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-dm-entry-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-dm-entry-copy > p:not(.ng-dm-kicker) {
max-width: 420px;
margin: 1.2rem 0 0;
color: rgba(46,59,50,.54);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* note */
.ng-dm-entry-note {
display: flex;
align-items: flex-start;
gap: .65rem;
margin-top: 2rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-dm-entry-note > span {
color: var(--color-coral);
}
.ng-dm-entry-note p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .65rem;
}
.ng-dm-entry-note strong {
display: block;
color: var(--color-dark);
}
/* WAYS */
.ng-dm-entry-ways {
position: relative;
max-width: 600px;
padding: 2rem 0;
}
/* subtle vertical path */
.ng-dm-entry-line {
position: absolute;
top: 55px;
bottom: 75px;
left: 26px;
width: 1px;
background: linear-gradient(to bottom, rgba(240,102,83,.12), rgba(240,102,83,.48), rgba(240,102,83,.12));
}
/* INDIVIDUAL WAY */
.ng-dm-way {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 52px minmax(0, 1fr) 38px;
align-items: center;
gap: 1.25rem;
min-height: 125px;
padding: 1.15rem 0;
color: var(--color-dark);
text-decoration: none;
border-bottom: 1px solid rgba(46,59,50,.1);
transition: transform .28s ease;
}
.ng-dm-way:first-of-type {
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-dm-way:hover {
transform: translateX(8px);
}
/* NUMBER */
.ng-dm-way-dot {
display: grid;
width: 52px;
height: 52px;
place-items: center;
border: 1px solid rgba(46,59,50,.12);
border-radius: 50%;
background: #fff;
color: var(--color-coral);
font-size: .52rem;
font-weight: 800;
box-shadow: 0 0 0 8px #fff;
}
/* COPY */
.ng-dm-way small {
display: block;
margin-bottom: .25rem;
color: var(--color-coral);
font-size: .52rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ng-dm-way strong {
display: block;
color: var(--color-dark);
font-size: clamp(1.1rem, 1.7vw, 1.45rem);
font-weight: 750;
line-height: 1.05;
letter-spacing: -.025em;
}
.ng-dm-way p {
margin: .35rem 0 0;
color: rgba(46,59,50,.46);
font-size: .65rem;
line-height: 1.45;
}
/* ARROW */
.ng-dm-way > i {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid rgba(46,59,50,.12);
border-radius: 50%;
color: var(--color-coral);
font-style: normal;
transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
.ng-dm-way:hover > i {
background: var(--color-coral);
color: #fff;
transform: translateX(3px);
}
/* NO IDEA YET */
.ng-dm-entry-whatever {
display: flex;
align-items: center;
gap: .65rem;
margin: 1.4rem 0 0 76px;
}
.ng-dm-entry-whatever > span {
color: var(--color-coral);
font-size: .7rem;
}
.ng-dm-entry-whatever p {
margin: 0;
color: rgba(46,59,50,.38);
font-size: .61rem;
}
.ng-dm-entry-whatever strong {
color: var(--color-dark);
}
/* BOTTOM */
.ng-dm-entry-bottom {
display: flex;
align-items: center;
gap: .65rem;
margin-top: clamp(3.5rem, 6vw, 5rem);
padding-top: 1.3rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-dm-entry-bottom > span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-coral);
}
.ng-dm-entry-bottom p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .62rem;
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-dm-entry-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-dm-entry-ways {
max-width: none;
}
}
@media (max-width: 600px) {
.ng-dm-entry {
padding: 4.5rem 0;
}
.ng-dm-way {
grid-template-columns: 44px minmax(0, 1fr) 32px;
gap: .9rem;
}
.ng-dm-way-dot {
width: 44px;
height: 44px;
box-shadow: 0 0 0 6px #fff;
}
.ng-dm-entry-line {
left: 22px;
}
.ng-dm-entry-whatever {
margin-left: 60px;
}
}
/* DOE MEE — VRIJWILLIGER */
.ng-dm-volunteer {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: var(--color-green-light);
color: var(--color-dark);
}
/* HEADING */
.ng-dm-volunteer-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(3.5rem, 6vw, 5rem);
}
.ng-dm-volunteer-heading h2 {
max-width: 620px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-dm-volunteer-heading > p {
max-width: 390px;
margin: 0;
color: rgba(46,59,50,.56);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* SCENE */
.ng-dm-volunteer-scene {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(340px, .75fr);
align-items: center;
gap: clamp(4rem, 8vw, 7rem);
}
/* PHOTO */
.ng-dm-volunteer-photo {
position: relative;
height: clamp(410px, 43vw, 540px);
margin: 0;
overflow: visible;
}
.ng-dm-volunteer-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px 68px 12px 12px;
}
/* NOTE OVER PHOTO */
.ng-dm-volunteer-photo figcaption {
position: absolute;
right: -25px;
bottom: 28px;
display: flex;
align-items: flex-start;
gap: .6rem;
max-width: 235px;
padding: .85rem 1rem;
border-radius: 9px 28px 9px 9px;
background: #fff;
box-shadow: 0 14px 35px rgba(46,59,50,.1);
}
.ng-dm-volunteer-photo figcaption > span {
color: var(--color-coral);
}
.ng-dm-volunteer-photo figcaption p {
margin: 0;
color: rgba(46,59,50,.42);
font-size: .59rem;
line-height: 1.35;
}
.ng-dm-volunteer-photo figcaption strong {
display: block;
margin-top: .15rem;
color: var(--color-dark);
font-size: .65rem;
}
/* COPY */
.ng-dm-volunteer-copy {
max-width: 480px;
}
.ng-dm-volunteer-small {
margin: 0 0 .6rem;
color: var(--color-coral);
font-size: .58rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-dm-volunteer-copy h3 {
margin: 0;
color: var(--color-dark);
font-size: clamp(1.85rem, 2.7vw, 2.6rem);
font-weight: 750;
line-height: 1.02;
letter-spacing: -.04em;
}
.ng-dm-volunteer-copy > p:not(.ng-dm-volunteer-small) {
max-width: 420px;
margin: 1.1rem 0 0;
color: rgba(46,59,50,.52);
font-size: .76rem;
line-height: 1.6;
}
/* WAYS TO HELP */
.ng-dm-volunteer-ways {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 2rem;
border-top: 1px solid rgba(46,59,50,.11);
border-bottom: 1px solid rgba(46,59,50,.11);
}
.ng-dm-volunteer-ways > div {
display: flex;
align-items: center;
gap: .75rem;
min-height: 88px;
padding: 1rem .8rem;
}
.ng-dm-volunteer-ways > div:nth-child(odd) {
padding-left: 0;
border-right: 1px solid rgba(46,59,50,.1);
}
.ng-dm-volunteer-ways > div:nth-child(-n + 2) {
border-bottom: 1px solid rgba(46,59,50,.1);
}
/* dots */
.ng-dm-volunteer-ways > div > span {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--color-coral);
}
.ng-dm-volunteer-ways p {
margin: 0;
}
.ng-dm-volunteer-ways small {
display: block;
color: rgba(46,59,50,.4);
font-size: .51rem;
letter-spacing: .07em;
text-transform: uppercase;
}
.ng-dm-volunteer-ways strong {
display: block;
margin-top: .15rem;
color: var(--color-dark);
font-size: .69rem;
}
/* ACTION */
.ng-dm-volunteer-action {
display: flex;
align-items: center;
gap: 1.4rem;
margin-top: 1.8rem;
}
.ng-dm-volunteer-action > a {
display: inline-flex;
align-items: center;
gap: .9rem;
padding: .48rem .52rem .48rem 1rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .69rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease;
}
.ng-dm-volunteer-action > a i {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-style: normal;
transition: transform .25s ease;
}
.ng-dm-volunteer-action > a:hover {
transform: translateY(-3px);
}
.ng-dm-volunteer-action > a:hover i {
transform: translateX(3px);
}
.ng-dm-volunteer-action > p {
max-width: 130px;
margin: 0;
color: rgba(46,59,50,.4);
font-size: .58rem;
line-height: 1.4;
}
/* BOTTOM NOTE */
.ng-dm-volunteer-bottom {
display: flex;
align-items: center;
gap: .65rem;
margin-top: clamp(3.5rem, 6vw, 5rem);
padding-top: 1.3rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-dm-volunteer-bottom p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .61rem;
}
.ng-dm-volunteer-bottom strong {
color: var(--color-dark);
font-size: .62rem;
}
.ng-dm-volunteer-bottom > span {
margin-left: auto;
color: var(--color-coral);
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-dm-volunteer-heading, .ng-dm-volunteer-scene {
grid-template-columns: 1fr;
}
.ng-dm-volunteer-heading {
gap: 1.5rem;
}
.ng-dm-volunteer-scene {
gap: 3rem;
}
.ng-dm-volunteer-copy {
max-width: 620px;
}
}
@media (max-width: 600px) {
.ng-dm-volunteer {
padding: 4.5rem 0;
}
.ng-dm-volunteer-photo {
height: 330px;
}
.ng-dm-volunteer-photo figcaption {
right: 12px;
bottom: 12px;
}
.ng-dm-volunteer-ways {
grid-template-columns: 1fr;
}
.ng-dm-volunteer-ways > div, .ng-dm-volunteer-ways > div:nth-child(odd) {
padding: .9rem 0;
border-right: 0;
border-bottom: 1px solid rgba(46,59,50,.1);
}
.ng-dm-volunteer-action {
align-items: flex-start;
flex-direction: column;
}
.ng-dm-volunteer-bottom {
align-items: flex-start;
flex-wrap: wrap;
}
}
/* DOE MEE — DEEL JE IDEE */
.ng-dm-idea {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
color: var(--color-dark);
}
/* LAYOUT */
.ng-dm-idea-layout {
display: grid;
grid-template-columns: minmax(320px, .72fr) minmax(0, 1.08fr);
align-items: center;
gap: clamp(5rem, 10vw, 10rem);
}
/* COPY */
.ng-dm-idea-copy {
max-width: 540px;
}
.ng-dm-idea-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-dm-idea-copy > p:not(.ng-dm-kicker) {
max-width: 430px;
margin: 1.2rem 0 0;
color: rgba(46,59,50,.54);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* LITTLE THOUGHT */
.ng-dm-idea-thought {
display: flex;
align-items: center;
gap: .8rem;
margin-top: 2rem;
}
.ng-dm-idea-thought > span {
color: var(--color-coral);
font-family: Georgia, serif;
font-size: 2.1rem;
line-height: .7;
}
.ng-dm-idea-thought p {
margin: 0;
color: rgba(46,59,50,.48);
font-size: .68rem;
font-style: italic;
}
/* BUTTON */
.ng-dm-idea-button {
display: inline-flex;
align-items: center;
gap: .9rem;
margin-top: 1.8rem;
padding: .48rem .52rem .48rem 1rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .69rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease;
}
.ng-dm-idea-button i {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-style: normal;
transition: transform .25s ease;
}
.ng-dm-idea-button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(46,59,50,.1);
}
.ng-dm-idea-button:hover i {
transform: translateX(3px);
}
/* IDEA VISUAL */
.ng-dm-idea-visual {
position: relative;
min-height: 430px;
border: 1px solid rgba(46,59,50,.09);
border-radius: 12px 58px 12px 58px;
background: linear-gradient(145deg, var(--color-cream), rgba(232,240,227,.5));
overflow: hidden;
}
/* very subtle graph-paper detail */
.ng-dm-idea-visual::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(46,59,50,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(46,59,50,.025) 1px, transparent 1px);
background-size: 38px 38px;
pointer-events: none;
}
/* PAPER THOUGHT */
.ng-dm-idea-paper {
position: absolute;
z-index: 4;
left: 8%;
top: 55px;
width: 185px;
padding: 1.2rem 1.25rem 1rem;
border-radius: 8px 24px 8px 8px;
background: #fff;
box-shadow: 0 12px 30px rgba(46,59,50,.08);
transform: rotate(-2deg);
}
.ng-dm-idea-paper-label {
display: block;
margin-bottom: .55rem;
color: var(--color-coral);
font-size: .49rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.ng-dm-idea-paper p {
margin: 0;
color: var(--color-dark);
font-size: .83rem;
font-weight: 750;
line-height: 1.25;
}
.ng-dm-idea-paper-mark {
margin-top: .75rem;
color: rgba(46,59,50,.26);
font-size: .7rem;
}
/* ROUTE */
.ng-dm-idea-route {
position: absolute;
z-index: 1;
left: 6%;
bottom: 42px;
width: 88%;
height: 245px;
}
.ng-dm-idea-route path {
fill: none;
stroke: var(--color-coral);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 3 9;
opacity: .58;
}
/* POINTS */
.ng-dm-idea-point {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: .5rem;
}
.ng-dm-idea-point > span {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-coral);
box-shadow: 0 0 0 5px rgba(240,102,83,.1);
}
.ng-dm-idea-point small {
color: rgba(46,59,50,.45);
font-size: .5rem;
font-weight: 700;
}
.ng-dm-idea-point--start {
left: 9%;
bottom: 63px;
}
.ng-dm-idea-point--middle {
left: 46%;
bottom: 120px;
}
/* GROWING DESTINATION */
.ng-dm-idea-grow {
position: absolute;
z-index: 4;
right: 7%;
top: 54px;
width: 130px;
text-align: center;
}
.ng-dm-idea-grow > span {
display: block;
width: 9px;
height: 46px;
margin: 0 auto;
border-radius: 999px;
background: var(--color-green);
}
/* leaves */
.ng-dm-idea-leaves {
position: relative;
width: 60px;
height: 36px;
margin: 0 auto -5px;
}
.ng-dm-idea-leaves i {
position: absolute;
bottom: 0;
width: 32px;
height: 18px;
background: var(--color-green);
border-radius: 100% 0 100% 0;
}
.ng-dm-idea-leaves i:first-child {
left: 4px;
transform: rotate(18deg);
}
.ng-dm-idea-leaves i:last-child {
right: 4px;
transform: scaleX(-1) rotate(18deg);
}
.ng-dm-idea-grow strong {
display: block;
margin-top: .75rem;
color: var(--color-dark);
font-size: .68rem;
line-height: 1.25;
}
/* SIDE NOTE */
.ng-dm-idea-side-note {
position: absolute;
z-index: 5;
right: 7%;
bottom: 35px;
display: flex;
align-items: flex-start;
gap: .55rem;
transform: rotate(-2deg);
}
.ng-dm-idea-side-note > span {
color: var(--color-coral);
}
.ng-dm-idea-side-note p {
margin: 0;
color: rgba(46,59,50,.38);
font-size: .55rem;
line-height: 1.35;
}
.ng-dm-idea-side-note strong {
display: block;
color: var(--color-dark);
}
/* BOTTOM */
.ng-dm-idea-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-top: clamp(3.5rem, 6vw, 5rem);
padding-top: 1.3rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-dm-idea-bottom p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .62rem;
}
.ng-dm-idea-bottom a {
display: inline-flex;
align-items: center;
gap: .65rem;
color: var(--color-dark);
font-size: .64rem;
font-weight: 800;
text-decoration: none;
}
.ng-dm-idea-bottom a span {
color: var(--color-coral);
transition: transform .25s ease;
}
.ng-dm-idea-bottom a:hover span {
transform: translateX(4px);
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-dm-idea-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-dm-idea-visual {
min-height: 410px;
}
}
@media (max-width: 600px) {
.ng-dm-idea {
padding: 4.5rem 0;
}
.ng-dm-idea-visual {
min-height: 390px;
border-radius: 10px 38px 10px 38px;
}
.ng-dm-idea-paper {
width: 165px;
left: 6%;
}
.ng-dm-idea-grow {
right: 5%;
}
.ng-dm-idea-point--middle, .ng-dm-idea-side-note {
display: none;
}
.ng-dm-idea-bottom {
align-items: flex-start;
flex-direction: column;
gap: .8rem;
}
}
/* DOE MEE — SAMENWERKEN */
.ng-dm-collab {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: var(--color-dark);
color: #fff;
}
/* quiet background detail */
.ng-dm-collab::before {
content: "";
position: absolute;
right: -180px;
bottom: -210px;
width: 500px;
height: 500px;
border: 1px solid rgba(255,255,255,.035);
border-radius: 50%;
box-shadow: inset 0 0 0 55px rgba(255,255,255,.012);
pointer-events: none;
}
/* LAYOUT */
.ng-dm-collab-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(320px, .7fr) minmax(0, 1.1fr);
align-items: center;
gap: clamp(5rem, 10vw, 9rem);
}
/* COPY */
.ng-dm-collab-copy {
max-width: 540px;
}
.ng-dm-collab .ng-dm-kicker {
color: var(--color-coral);
}
.ng-dm-collab-copy h2 {
margin: 0;
color: #fff;
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-dm-collab-copy > p {
max-width: 430px;
margin: 1.2rem 0 0;
color: rgba(255,255,255,.53);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* BUTTON */
.ng-dm-collab-button {
display: inline-flex;
align-items: center;
gap: .9rem;
margin-top: 1.8rem;
padding: .5rem .55rem .5rem 1.05rem;
border-radius: 999px;
background: #fff;
color: var(--color-dark);
font-size: .69rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease;
}
.ng-dm-collab-button i {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-style: normal;
transition: transform .25s ease;
}
.ng-dm-collab-button:hover {
transform: translateY(-3px);
}
.ng-dm-collab-button:hover i {
transform: translateX(3px);
}
/* NOTE */
.ng-dm-collab-note {
display: flex;
align-items: flex-start;
gap: .6rem;
margin-top: 2rem;
}
.ng-dm-collab-note > span {
color: var(--color-coral);
}
.ng-dm-collab-note p {
margin: 0;
color: rgba(255,255,255,.34);
font-size: .6rem;
line-height: 1.4;
}
.ng-dm-collab-note strong {
display: block;
color: rgba(255,255,255,.82);
}
/* VISUAL */
.ng-dm-collab-visual {
position: relative;
min-height: 440px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 58px 12px 58px 12px;
background: rgba(255,255,255,.022);
overflow: hidden;
}
/* subtle grid */
.ng-dm-collab-visual::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
background-size: 42px 42px;
pointer-events: none;
}
/* CONNECTION LINES */
.ng-dm-collab-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.ng-dm-collab-lines path {
fill: none;
stroke: var(--color-coral);
stroke-width: 1.2;
stroke-linecap: round;
stroke-dasharray: 3 9;
opacity: .42;
}
/* CENTER */
.ng-dm-collab-center {
position: absolute;
z-index: 4;
left: 50%;
top: 50%;
display: flex;
width: 155px;
height: 155px;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 1rem;
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
background: #304338;
text-align: center;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 14px rgba(255,255,255,.018);
}
.ng-dm-collab-center small {
color: var(--color-coral);
font-size: .51rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-dm-collab-center strong {
max-width: 100px;
margin-top: .4rem;
color: #fff;
font-size: .78rem;
line-height: 1.25;
}
.ng-dm-collab-center > span {
width: 6px;
height: 6px;
margin-top: .7rem;
border-radius: 50%;
background: var(--color-coral);
}
/* PIECES */
.ng-dm-collab-piece {
position: absolute;
z-index: 5;
min-width: 145px;
padding: .8rem .9rem;
border: 1px solid rgba(255,255,255,.08);
background: #2d4035;
box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.ng-dm-collab-piece span {
display: block;
margin-bottom: .22rem;
color: var(--color-coral);
font-size: .48rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.ng-dm-collab-piece strong {
display: block;
color: #fff;
font-size: .67rem;
line-height: 1.25;
}
/* positions */
.ng-dm-collab-piece--knowledge {
left: 7%;
top: 13%;
border-radius: 9px 26px 9px 9px;
transform: rotate(-2deg);
}
.ng-dm-collab-piece--network {
right: 7%;
top: 12%;
border-radius: 26px 9px 9px 9px;
transform: rotate(2deg);
}
.ng-dm-collab-piece--material {
left: 6%;
bottom: 14%;
border-radius: 9px 9px 26px 9px;
transform: rotate(1deg);
}
.ng-dm-collab-piece--support {
right: 6%;
bottom: 14%;
border-radius: 9px 9px 9px 26px;
transform: rotate(-2deg);
}
/* CAPTION */
.ng-dm-collab-caption {
position: absolute;
z-index: 6;
left: 50%;
bottom: 22px;
display: flex;
align-items: center;
gap: .5rem;
transform: translateX(-50%);
}
.ng-dm-collab-caption > span {
color: var(--color-coral);
font-size: .6rem;
}
.ng-dm-collab-caption p {
margin: 0;
color: rgba(255,255,255,.32);
font-size: .53rem;
}
.ng-dm-collab-caption strong {
color: rgba(255,255,255,.74);
}
/* BOTTOM */
.ng-dm-collab-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-top: clamp(3.5rem, 6vw, 5rem);
padding-top: 1.3rem;
border-top: 1px solid rgba(255,255,255,.09);
}
.ng-dm-collab-bottom p {
margin: 0;
color: rgba(255,255,255,.35);
font-size: .61rem;
}
.ng-dm-collab-bottom a {
display: inline-flex;
align-items: center;
gap: .65rem;
color: #fff;
font-size: .64rem;
font-weight: 800;
text-decoration: none;
}
.ng-dm-collab-bottom a span {
color: var(--color-coral);
transition: transform .25s ease;
}
.ng-dm-collab-bottom a:hover span {
transform: translateX(4px);
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-dm-collab-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-dm-collab-visual {
min-height: 430px;
}
}
@media (max-width: 600px) {
.ng-dm-collab {
padding: 4.5rem 0;
}
.ng-dm-collab-visual {
min-height: 460px;
border-radius: 38px 10px 38px 10px;
}
.ng-dm-collab-center {
width: 135px;
height: 135px;
}
.ng-dm-collab-piece {
min-width: 125px;
padding: .7rem .75rem;
}
.ng-dm-collab-piece--knowledge, .ng-dm-collab-piece--material {
left: 4%;
}
.ng-dm-collab-piece--network, .ng-dm-collab-piece--support {
right: 4%;
}
.ng-dm-collab-bottom {
align-items: flex-start;
flex-direction: column;
gap: .8rem;
}
}
/* DOE MEE — SHARED KICKER */
.ng-dm-kicker {
display: block;
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem !important;
font-weight: 800;
line-height: 1.2;
letter-spacing: .14em;
text-transform: uppercase;
}
/* DOE MEE — FINAL CTA */
.ng-dm-final {
position: relative;
padding: clamp(5.5rem, 7vw, 7rem) 0 clamp(3rem, 4vw, 4rem);
background: #e8f0e3;
color: var(--color-dark);
}
/* MAIN LAYOUT */
.ng-dm-final-inner {
display: grid;
grid-template-columns: minmax(320px, .75fr) minmax(0, 1fr);
align-items: center;
gap: clamp(4rem, 9vw, 8rem);
}
/* COPY */
.ng-dm-final-copy {
max-width: 600px;
}
.ng-dm-final-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-dm-final-copy > p:not(.ng-dm-kicker) {
max-width: 440px;
margin: 1.2rem 0 0;
color: rgba(46, 59, 50, .52);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* ROUTE LINKS */
.ng-dm-final-links {
border-top: 1px solid rgba(46, 59, 50, .11);
}
.ng-dm-final-links > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 92px;
padding: 1rem 0;
border-bottom: 1px solid rgba(46, 59, 50, .11);
color: var(--color-dark);
text-decoration: none;
transition: padding-left .25s ease;
}
.ng-dm-final-links > a:hover {
padding-left: .55rem;
}
/* copy */
.ng-dm-final-links small {
display: block;
margin-bottom: .2rem;
color: var(--color-coral);
font-size: .51rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ng-dm-final-links strong {
display: block;
color: var(--color-dark);
font-size: clamp(.95rem, 1.5vw, 1.2rem);
font-weight: 750;
line-height: 1.15;
}
/* arrow */
.ng-dm-final-links i {
display: grid;
width: 36px;
height: 36px;
flex: 0 0 36px;
place-items: center;
border: 1px solid rgba(46, 59, 50, .13);
border-radius: 50%;
color: var(--color-coral);
font-style: normal;
transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
.ng-dm-final-links > a:hover i {
background: var(--color-coral);
color: #fff;
transform: translateX(3px);
}
/* CONTACT FOOT */
.ng-dm-final-contact {
display: flex;
align-items: center;
gap: .6rem;
margin-top: clamp(3rem, 5vw, 4rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46, 59, 50, .1);
}
.ng-dm-final-contact > span {
color: var(--color-coral);
}
.ng-dm-final-contact p {
margin: 0;
color: rgba(46, 59, 50, .4);
font-size: .6rem;
}
.ng-dm-final-contact a {
display: inline-flex;
align-items: center;
gap: .45rem;
color: var(--color-dark);
font-size: .61rem;
font-weight: 800;
text-decoration: none;
}
.ng-dm-final-contact a span {
color: var(--color-coral);
transition: transform .25s ease;
}
.ng-dm-final-contact a:hover span {
transform: translateX(3px);
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-dm-final-inner {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 600px) {
.ng-dm-final {
padding: 4.5rem 0 2.8rem;
}
.ng-dm-final-contact {
align-items: flex-start;
flex-wrap: wrap;
}
}
/* VRIJWILLIGER WORDEN */
/* optional crop tweak */
.ng-inner-hero--volunteer .ng-inner-hero__image {
object-position: center 46%;
}
/* INTRO */
.ng-vol-intro {
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
color: var(--color-dark);
}
/* LAYOUT */
.ng-vol-intro-layout {
display: grid;
grid-template-columns: minmax(320px, .78fr) minmax(0, 1fr);
align-items: center;
gap: clamp(5rem, 10vw, 10rem);
}
/* COPY */
.ng-vol-intro-copy {
max-width: 570px;
}
.ng-vol-kicker {
display: block;
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-vol-intro-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-vol-intro-lead {
max-width: 470px;
margin: 1.4rem 0 0;
color: var(--color-dark);
font-size: clamp(.9rem, 1.3vw, 1.05rem);
line-height: 1.7;
}
.ng-vol-intro-copy > p:not(.ng-vol-kicker, .ng-vol-intro-lead) {
max-width: 450px;
margin: 1rem 0 0;
color: rgba(46,59,50,.5);
font-size: .76rem;
line-height: 1.65;
}
.ng-brand-word {
color: var(--color-green);
font-weight: 700;
}
/* FIT SIDE */
.ng-vol-fit {
max-width: 600px;
padding: clamp(2rem, 4vw, 3rem);
border: 1px solid rgba(46,59,50,.09);
border-radius: 12px 48px 12px 48px;
background: var(--color-cream);
}
/* heading */
.ng-vol-fit-heading {
display: flex;
align-items: flex-start;
gap: .65rem;
margin-bottom: 1.4rem;
}
.ng-vol-fit-heading > span {
color: var(--color-coral);
}
.ng-vol-fit-heading p {
margin: 0;
color: rgba(46,59,50,.43);
font-size: .61rem;
line-height: 1.45;
}
/* QUESTIONS */
.ng-vol-fit-list {
border-top: 1px solid rgba(46,59,50,.11);
}
.ng-vol-fit-row {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
gap: 1.1rem;
min-height: 105px;
padding: 1rem 0;
border-bottom: 1px solid rgba(46,59,50,.11);
}
/* number */
.ng-vol-fit-number {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid rgba(46,59,50,.12);
border-radius: 50%;
background: #fff;
color: var(--color-coral);
font-size: .5rem;
font-weight: 800;
}
/* text */
.ng-vol-fit-row small {
display: block;
margin-bottom: .2rem;
color: rgba(46,59,50,.4);
font-size: .52rem;
font-weight: 700;
}
.ng-vol-fit-row strong {
display: block;
max-width: 390px;
color: var(--color-dark);
font-size: .77rem;
font-weight: 750;
line-height: 1.4;
}
/* FOOT */
.ng-vol-fit-foot {
display: flex;
align-items: flex-start;
gap: .6rem;
margin-top: 1.25rem;
}
.ng-vol-fit-foot > span {
width: 6px;
height: 6px;
flex: 0 0 6px;
margin-top: .35rem;
border-radius: 50%;
background: var(--color-coral);
}
.ng-vol-fit-foot p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .57rem;
line-height: 1.45;
}
.ng-vol-fit-foot strong {
color: var(--color-dark);
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-vol-intro-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-vol-fit {
max-width: none;
}
}
@media (max-width: 600px) {
.ng-vol-intro {
padding: 4.5rem 0;
}
.ng-vol-fit {
padding: 1.6rem 1.3rem;
border-radius: 10px 34px 10px 34px;
}
}
/* VRIJWILLIGER — MOGELIJKHEDEN */
/* HEADING */
/* MOMENT */
/* reversed */
/* PHOTO */
/* NUMBER */
/* COPY */
.ng-vol-moment-copy > p:not(.ng-vol-moment-label) {
max-width: 410px;
margin: 1rem 0 0;
color: rgba(46,59,50,.52);
font-size: .76rem;
line-height: 1.65;
}
/* TAGS */
/* BOTTOM NOTE */
/* RESPONSIVE */
/* VRIJWILLIGER — OPENSTAANDE VACATURES */
/* HEADING */
/* LIST */
/* VACANCY */
/* number */
/* IMAGE */
/* fallback */
/* CONTENT */
/* META */
/* title */
/* excerpt */
/* BOTTOM */
/* link */
/* FOOTER */
/* EMPTY */
/* RESPONSIVE */
/* VRIJWILLIGER — OPEN KENNISMAKING */
.ng-vol-open {
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
color: var(--color-dark);
}
/* LAYOUT */
.ng-vol-open-layout {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(330px, .75fr);
align-items: center;
gap: clamp(4rem, 9vw, 8rem);
}
/* PHOTO */
.ng-vol-open-photo {
position: relative;
height: clamp(390px, 42vw, 535px);
margin: 0;
}
.ng-vol-open-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px 64px 12px 12px;
}
/* floating note */
.ng-vol-open-photo figcaption {
position: absolute;
right: -24px;
bottom: 30px;
display: flex;
align-items: flex-start;
gap: .6rem;
max-width: 215px;
padding: .9rem 1rem;
border-radius: 9px 28px 9px 9px;
background: var(--color-cream);
box-shadow: 0 14px 36px rgba(46, 59, 50, .1);
}
.ng-vol-open-photo figcaption > span {
color: var(--color-coral);
}
.ng-vol-open-photo figcaption p {
margin: 0;
color: rgba(46, 59, 50, .42);
font-size: .58rem;
line-height: 1.4;
}
.ng-vol-open-photo figcaption strong {
display: block;
color: var(--color-dark);
}
/* COPY */
.ng-vol-open-copy {
max-width: 500px;
}
.ng-vol-open-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-vol-open-lead {
margin: 1.25rem 0 0;
color: var(--color-dark);
font-size: clamp(.9rem, 1.25vw, 1.04rem);
line-height: 1.65;
}
.ng-vol-open-copy > p:not(.ng-vol-kicker, .ng-vol-open-lead) {
max-width: 430px;
margin: .85rem 0 0;
color: rgba(46, 59, 50, .5);
font-size: .75rem;
line-height: 1.65;
}
/* LITTLE PROMPTS */
.ng-vol-open-prompts {
margin-top: 2rem;
border-top: 1px solid rgba(46, 59, 50, .1);
}
.ng-vol-open-prompts > div {
display: grid;
grid-template-columns: minmax(130px, .6fr) minmax(0, 1fr);
gap: 1rem;
padding: .9rem 0;
border-bottom: 1px solid rgba(46, 59, 50, .1);
}
.ng-vol-open-prompts small {
color: rgba(46, 59, 50, .36);
font-size: .52rem;
}
.ng-vol-open-prompts strong {
color: var(--color-dark);
font-size: .68rem;
font-weight: 750;
}
/* ACTION */
.ng-vol-open-action {
display: flex;
align-items: center;
gap: 1.2rem;
margin-top: 1.8rem;
}
.ng-vol-open-action > a {
display: inline-flex;
align-items: center;
gap: .9rem;
padding: .5rem .55rem .5rem 1rem;
border-radius: 999px;
background: var(--color-dark);
color: #fff;
font-size: .68rem;
font-weight: 800;
text-decoration: none;
transition: transform .25s ease;
}
.ng-vol-open-action > a i {
display: grid;
width: 35px;
height: 35px;
place-items: center;
border-radius: 50%;
background: var(--color-coral);
color: #fff;
font-style: normal;
transition: transform .25s ease;
}
.ng-vol-open-action > a:hover {
transform: translateY(-3px);
}
.ng-vol-open-action > a:hover i {
transform: translateX(3px);
}
.ng-vol-open-action > p {
max-width: 110px;
margin: 0;
color: rgba(46, 59, 50, .37);
font-size: .56rem;
line-height: 1.4;
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-vol-open-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-vol-open-copy {
max-width: 620px;
}
}
@media (max-width: 600px) {
.ng-vol-open {
padding: 4.5rem 0;
}
.ng-vol-open-photo {
height: 330px;
}
.ng-vol-open-photo figcaption {
right: 12px;
bottom: 12px;
}
.ng-vol-open-prompts > div {
grid-template-columns: 1fr;
gap: .25rem;
}
.ng-vol-open-action {
align-items: flex-start;
flex-direction: column;
}
}
/* VRIJWILLIGER — VERHAAL */
.ng-vol-story {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0 clamp(3rem, 5vw, 4rem);
background: var(--color-dark);
color: #fff;
}
/* subtle oversized circle */
.ng-vol-story::before {
content: "";
position: absolute;
right: -190px;
top: -190px;
width: 470px;
height: 470px;
border: 1px solid rgba(255,255,255,.035);
border-radius: 50%;
box-shadow: inset 0 0 0 55px rgba(255,255,255,.012);
pointer-events: none;
}
/* LAYOUT */
.ng-vol-story-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(300px, .65fr) minmax(0, 1.1fr);
align-items: center;
gap: clamp(5rem, 10vw, 10rem);
}
/* INTRO */
.ng-vol-story .ng-vol-kicker {
color: var(--color-coral);
font-size: .68rem;
}
.ng-vol-story-intro {
max-width: 520px;
}
.ng-vol-story-intro h2 {
margin: 0;
color: #fff;
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-vol-story-intro > p:not(.ng-vol-kicker) {
max-width: 410px;
margin: 1.2rem 0 0;
color: rgba(255,255,255,.48);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* QUOTE */
.ng-vol-story-quote {
position: relative;
max-width: 680px;
padding: clamp(2.2rem, 4vw, 3.5rem);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px 56px 10px 10px;
background: rgba(255,255,255,.025);
}
/* quote mark */
.ng-vol-story-mark {
display: block;
margin-bottom: 1.2rem;
color: var(--color-coral);
font-family: Georgia, serif;
font-size: clamp(3.6rem, 7vw, 5.8rem);
line-height: .55;
}
/* quote */
.ng-vol-story-quote blockquote {
margin: 0;
}
.ng-vol-story-quote blockquote p {
max-width: 580px;
margin: 0;
color: #fff;
font-size: clamp(1.35rem, 2.3vw, 2rem);
font-weight: 600;
line-height: 1.38;
letter-spacing: -.025em;
}
/* PERSON */
.ng-vol-story-quote footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-top: clamp(2rem, 4vw, 3rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(255,255,255,.09);
}
.ng-vol-story-quote footer strong {
display: block;
color: #fff;
font-size: .72rem;
}
.ng-vol-story-quote footer div > span {
display: block;
margin-top: .25rem;
color: rgba(255,255,255,.4);
font-size: .56rem;
}
.ng-vol-story-arrow {
color: var(--color-coral);
font-size: .85rem;
}
/* LITTLE DECORATIVE LINE */
.ng-vol-story-line {
position: absolute;
right: 32px;
top: 32px;
width: 65px;
height: 1px;
background: var(--color-coral);
}
.ng-vol-story-line::after {
content: "";
position: absolute;
right: 0;
top: -3px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-coral);
}
/* FOOT */
.ng-vol-story-foot {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: .55rem;
margin-top: clamp(3rem, 5vw, 4rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(255,255,255,.08);
}
.ng-vol-story-foot > span {
color: var(--color-coral);
font-size: .6rem;
}
.ng-vol-story-foot p {
margin: 0;
color: rgba(255,255,255,.32);
font-size: .59rem;
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-vol-story-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-vol-story-quote {
max-width: none;
}
}
@media (max-width: 600px) {
.ng-vol-story {
padding: 4.5rem 0 2.8rem;
}
.ng-vol-story-quote {
padding: 1.8rem 1.4rem;
border-radius: 10px 38px 10px 10px;
}
.ng-vol-story-line {
right: 20px;
top: 22px;
width: 42px;
}
.ng-vol-story-quote footer {
align-items: flex-start;
}
}
/* VRIJWILLIGER — FINAL CTA */
.ng-vol-final {
padding: clamp(5.5rem, 7vw, 7rem) 0 clamp(3rem, 4vw, 4rem);
background: #e8f0e3;
color: var(--color-dark);
}
/* LAYOUT */
.ng-vol-final-inner {
display: grid;
grid-template-columns: minmax(320px, .75fr) minmax(0, 1fr);
align-items: center;
gap: clamp(4rem, 9vw, 8rem);
}
/* COPY */
.ng-vol-final-copy {
max-width: 590px;
}
.ng-vol-final-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-vol-final-copy > p:not(.ng-vol-kicker) {
max-width: 420px;
margin: 1.2rem 0 0;
color: rgba(46,59,50,.52);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* ACTIONS */
.ng-vol-final-actions {
border-top: 1px solid rgba(46,59,50,.11);
}
.ng-vol-final-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 100px;
padding: 1rem 0;
border-bottom: 1px solid rgba(46,59,50,.11);
color: var(--color-dark);
text-decoration: none;
transition: padding-left .25s ease;
}
.ng-vol-final-action:hover {
padding-left: .55rem;
}
/* text */
.ng-vol-final-action small {
display: block;
margin-bottom: .25rem;
color: var(--color-coral);
font-size: .52rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ng-vol-final-action strong {
display: block;
color: var(--color-dark);
font-size: clamp(1rem, 1.6vw, 1.25rem);
font-weight: 750;
}
/* arrow */
.ng-vol-final-action i {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 38px;
place-items: center;
border: 1px solid rgba(46,59,50,.13);
border-radius: 50%;
color: var(--color-coral);
font-style: normal;
transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.ng-vol-final-action:hover i {
background: var(--color-coral);
color: #fff;
transform: translateX(3px);
}
/* primary */
.ng-vol-final-action--primary strong {
font-weight: 800;
}
/* BOTTOM NOTE */
.ng-vol-final-bottom {
display: flex;
align-items: center;
gap: .6rem;
margin-top: clamp(3rem, 5vw, 4rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-vol-final-bottom > span {
color: var(--color-coral);
}
.ng-vol-final-bottom p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .6rem;
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-vol-final-inner {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 600px) {
.ng-vol-final {
padding: 4.5rem 0 2.8rem;
}
}
/* SAMENWERKEN */
.ng-inner-hero--collab .ng-inner-hero__image {
object-position: center 48%;
}
/* SHARED KICKER */
.ng-collab-kicker {
display: block;
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: .14em;
text-transform: uppercase;
}
/* INTRO */
.ng-collab-intro {
position: relative;
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
color: var(--color-dark);
}
/* LAYOUT */
.ng-collab-intro-layout {
display: grid;
grid-template-columns: minmax(320px, .72fr) minmax(0, 1fr);
align-items: center;
gap: clamp(5rem, 10vw, 10rem);
}
/* COPY */
.ng-collab-intro-copy {
max-width: 560px;
}
.ng-collab-intro-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-collab-intro-lead {
max-width: 470px;
margin: 1.4rem 0 0;
color: var(--color-dark);
font-size: clamp(.9rem, 1.3vw, 1.05rem);
line-height: 1.7;
}
.ng-collab-intro-copy > p:not(.ng-collab-kicker, .ng-collab-intro-lead) {
max-width: 440px;
margin: .9rem 0 0;
color: rgba(46, 59, 50, .5);
font-size: .76rem;
line-height: 1.65;
}
/* NOTE */
.ng-collab-intro-note {
display: flex;
align-items: flex-start;
gap: .65rem;
margin-top: 2rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(46, 59, 50, .1);
}
.ng-collab-intro-note > span {
color: var(--color-coral);
}
.ng-collab-intro-note p {
margin: 0;
color: rgba(46, 59, 50, .4);
font-size: .61rem;
line-height: 1.45;
}
.ng-collab-intro-note strong {
display: block;
color: var(--color-dark);
}
/* CONTRIBUTIONS */
.ng-collab-contributions {
max-width: 620px;
padding: clamp(2rem, 4vw, 3rem);
border: 1px solid rgba(46, 59, 50, .09);
border-radius: 12px 52px 12px 52px;
background: var(--color-cream);
}
/* TOP */
.ng-collab-contributions-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-bottom: 1rem;
color: rgba(46, 59, 50, .4);
font-size: .58rem;
font-weight: 700;
}
.ng-collab-contributions-top span:last-child {
color: var(--color-coral);
}
/* ROW */
.ng-collab-contribution {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: start;
gap: 1.1rem;
padding: 1.3rem 0;
border-top: 1px solid rgba(46, 59, 50, .1);
}
/* NUMBER */
.ng-collab-contribution-number {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border: 1px solid rgba(46, 59, 50, .12);
border-radius: 50%;
background: #fff;
color: var(--color-coral);
font-size: .5rem;
font-weight: 800;
}
/* COPY */
.ng-collab-contribution small {
display: block;
margin-bottom: .2rem;
color: var(--color-coral);
font-size: .5rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ng-collab-contribution strong {
display: block;
color: var(--color-dark);
font-size: .76rem;
font-weight: 750;
line-height: 1.35;
}
.ng-collab-contribution p {
max-width: 390px;
margin: .35rem 0 0;
color: rgba(46, 59, 50, .43);
font-size: .61rem;
line-height: 1.5;
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-collab-intro-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-collab-contributions {
max-width: none;
}
}
@media (max-width: 600px) {
.ng-collab-intro {
padding: 4.5rem 0;
}
.ng-collab-contributions {
padding: 1.6rem 1.3rem;
border-radius: 10px 36px 10px 36px;
}
}
/* SAMENWERKEN — BRIDGE */
/* HEADING */
/* MAP */
/* SIDES */
/* TOP */
/* COPY */
/* CHIPS */
/* CENTER */
/* route */
/* core */
/* RESULT */
/* little route mark */
/* result copy */
/* RESPONSIVE */
/* SAMENWERKEN — VOOR WIE? */
/* HEADING */
/* LIST */
/* NUMBER */
/* MAIN */
/* WHAT THEY BRING */
/* BOTTOM */
/* RESPONSIVE */
/* SAMENWERKEN — PARTNER PROOF */
.ng-collab-proof {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0 clamp(3rem, 5vw, 4rem);
background: var(--color-dark);
color: #fff;
}
/* HEADING */
.ng-collab-proof-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(3.5rem, 6vw, 5rem);
}
.ng-collab-proof .ng-collab-kicker {
color: var(--color-coral);
}
.ng-collab-proof-heading h2 {
max-width: 650px;
margin: 0;
color: #fff;
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
/* copy */
.ng-collab-proof-copy {
max-width: 390px;
}
.ng-collab-proof-copy p {
margin: 0;
color: rgba(255,255,255,.48);
font-size: var(--ng-home-body);
line-height: 1.65;
}
.ng-collab-proof-copy a {
display: inline-flex;
align-items: center;
gap: .55rem;
margin-top: 1rem;
color: #fff;
font-size: .62rem;
font-weight: 800;
text-decoration: none;
}
.ng-collab-proof-copy a span {
color: var(--color-coral);
transition: transform .25s ease;
}
.ng-collab-proof-copy a:hover span {
transform: translateX(3px);
}
/* LOGO RAIL */
/* subtle edge fades */
/* track */
/* repeated group */
/* LOGO */
/* logo image */
/* ANIMATION */
/* BOTTOM */
.ng-collab-proof-bottom {
display: flex;
align-items: center;
gap: .6rem;
margin-top: clamp(2.5rem, 4vw, 3.5rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(255,255,255,.08);
}
.ng-collab-proof-bottom > span {
color: var(--color-coral);
}
.ng-collab-proof-bottom p {
margin: 0;
color: rgba(255,255,255,.33);
font-size: .6rem;
}
.ng-collab-proof-bottom strong {
color: rgba(255,255,255,.75);
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-collab-proof-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 600px) {
.ng-collab-proof {
padding: 4.5rem 0 2.8rem;
}
}
/* SAMENWERKEN — FINAL CTA */
.ng-collab-final {
padding: clamp(5.5rem, 7vw, 7rem) 0 clamp(3rem, 4vw, 4rem);
background: #e8f0e3;
color: var(--color-dark);
}
/* LAYOUT */
.ng-collab-final-inner {
display: grid;
grid-template-columns: minmax(320px, .75fr) minmax(0, 1fr);
align-items: center;
gap: clamp(4rem, 9vw, 8rem);
}
/* COPY */
.ng-collab-final-copy {
max-width: 590px;
}
.ng-collab-final-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-collab-final-copy > p:not(.ng-collab-kicker) {
max-width: 440px;
margin: 1.2rem 0 0;
color: rgba(46, 59, 50, .52);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* ACTIONS */
.ng-collab-final-actions {
border-top: 1px solid rgba(46,59,50,.11);
}
.ng-collab-final-primary, .ng-collab-final-secondary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 100px;
padding: 1rem 0;
border-bottom: 1px solid rgba(46,59,50,.11);
color: var(--color-dark);
text-decoration: none;
transition: padding-left .25s ease;
}
.ng-collab-final-primary:hover, .ng-collab-final-secondary:hover {
padding-left: .55rem;
}
/* labels */
.ng-collab-final-actions small {
display: block;
margin-bottom: .25rem;
color: var(--color-coral);
font-size: .52rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ng-collab-final-actions strong {
display: block;
color: var(--color-dark);
font-size: clamp(1rem, 1.6vw, 1.25rem);
font-weight: 750;
line-height: 1.2;
}
/* arrows */
.ng-collab-final-actions i {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 38px;
place-items: center;
border: 1px solid rgba(46,59,50,.13);
border-radius: 50%;
color: var(--color-coral);
font-style: normal;
transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.ng-collab-final-primary:hover i, .ng-collab-final-secondary:hover i {
background: var(--color-coral);
color: #fff;
transform: translateX(3px);
}
/* primary slightly stronger */
.ng-collab-final-primary strong {
font-weight: 800;
}
/* BOTTOM */
.ng-collab-final-bottom {
display: flex;
align-items: center;
gap: .6rem;
margin-top: clamp(3rem, 5vw, 4rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-collab-final-bottom > span {
color: var(--color-coral);
}
.ng-collab-final-bottom p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .6rem;
}
.ng-collab-final-bottom strong {
color: var(--color-dark);
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-collab-final-inner {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 600px) {
.ng-collab-final {
padding: 4.5rem 0 2.8rem;
}
}
/* VACATURES */
.ng-inner-hero--vacatures .ng-inner-hero__image {
object-position: center 45%;
}
/* KICKER */
.ng-vac-kicker {
display: block;
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: .14em;
text-transform: uppercase;
}
/* INTRO */
.ng-vac-intro {
padding: clamp(5.5rem, 7vw, 7rem) 0;
background: #fff;
color: var(--color-dark);
}
.ng-vac-intro-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .52fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
}
.ng-vac-intro-copy {
max-width: 680px;
}
.ng-vac-intro-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-vac-intro-side {
max-width: 410px;
}
.ng-vac-intro-side > p {
margin: 0;
color: rgba(46,59,50,.52);
font-size: var(--ng-home-body);
line-height: 1.65;
}
.ng-vac-intro-count {
display: flex;
align-items: baseline;
gap: .7rem;
margin-top: 1.4rem;
padding-top: 1.1rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-vac-intro-count strong {
color: var(--color-coral);
font-size: clamp(1.6rem, 3vw, 2.3rem);
font-weight: 750;
line-height: 1;
}
.ng-vac-intro-count span {
color: rgba(46,59,50,.4);
font-size: .58rem;
font-weight: 700;
}
@media (max-width: 800px) {
.ng-vac-intro-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* VACATURES — LIST */
.ng-vac-list-section {
padding: clamp(6rem, 8vw, 8rem) 0;
background: #e8f0e3;
color: var(--color-dark);
}
/* HEADING */
.ng-vac-list-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .52fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
margin-bottom: clamp(3.5rem, 6vw, 5rem);
}
.ng-vac-list-heading h2 {
max-width: 650px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-vac-list-heading > p {
max-width: 390px;
margin: 0;
color: rgba(46,59,50,.52);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* LIST */
.ng-vac-list {
border-top: 1px solid rgba(46,59,50,.11);
}
.ng-vac-item {
display: grid;
grid-template-columns: 38px minmax(190px, 260px) minmax(0, 1fr);
align-items: center;
gap: clamp(1.5rem, 4vw, 4rem);
padding: clamp(1.8rem, 3vw, 2.6rem) 0;
border-bottom: 1px solid rgba(46,59,50,.11);
}
/* NUMBER */
.ng-vac-item-number {
align-self: flex-start;
padding-top: .25rem;
color: rgba(46,59,50,.28);
font-size: .52rem;
font-weight: 800;
}
/* IMAGE */
.ng-vac-item-image {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 1.55 / 1;
border-radius: 8px 30px 8px 8px;
background: var(--color-cream);
text-decoration: none;
}
.ng-vac-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .45s ease;
}
.ng-vac-item:hover .ng-vac-item-image img {
transform: scale(1.035);
}
/* placeholder */
.ng-vac-item-placeholder {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .45rem;
background: var(--color-cream);
color: var(--color-dark);
}
.ng-vac-item-placeholder span {
color: var(--color-coral);
font-size: .8rem;
}
.ng-vac-item-placeholder strong {
font-size: .65rem;
font-weight: 800;
}
/* status */
.ng-vac-item-status {
position: absolute;
top: .7rem;
left: .7rem;
padding: .33rem .6rem;
border-radius: 999px;
background: #fff;
color: var(--color-dark);
box-shadow: 0 4px 14px rgba(46,59,50,.09);
font-size: .47rem;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
}
/* CONTENT */
.ng-vac-item-content {
min-width: 0;
}
/* metadata */
.ng-vac-item-top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .45rem 1rem;
margin-bottom: .55rem;
}
.ng-vac-item-category {
color: var(--color-coral);
font-size: .51rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.ng-vac-item-location {
position: relative;
padding-left: .8rem;
color: rgba(46,59,50,.36);
font-size: .52rem;
font-weight: 700;
}
.ng-vac-item-location::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(46,59,50,.25);
transform: translateY(-50%);
}
/* title */
.ng-vac-item h3 {
max-width: 660px;
margin: 0;
font-size: clamp(1.35rem, 2.3vw, 2rem);
line-height: 1.08;
letter-spacing: -.035em;
}
.ng-vac-item h3 a {
color: var(--color-dark);
text-decoration: none;
}
/* excerpt */
.ng-vac-item-excerpt {
max-width: 650px;
margin: .8rem 0 0;
color: rgba(46,59,50,.5);
font-size: .7rem;
line-height: 1.65;
}
/* BOTTOM */
.ng-vac-item-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-top: 1.35rem;
}
/* hours */
.ng-vac-item-hours small {
display: block;
margin-bottom: .15rem;
color: rgba(46,59,50,.32);
font-size: .47rem;
letter-spacing: .07em;
text-transform: uppercase;
}
.ng-vac-item-hours strong {
display: block;
color: var(--color-dark);
font-size: .61rem;
font-weight: 750;
}
/* link */
.ng-vac-item-link {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--color-dark);
font-size: .6rem;
font-weight: 800;
text-decoration: none;
}
.ng-vac-item-link span {
display: grid;
width: 31px;
height: 31px;
place-items: center;
border: 1px solid rgba(46,59,50,.13);
border-radius: 50%;
color: var(--color-coral);
transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.ng-vac-item-link:hover span {
background: var(--color-coral);
color: #fff;
transform: translateX(3px);
}
/* EMPTY */
.ng-vac-empty {
display: grid;
grid-template-columns: 70px minmax(0, 550px);
gap: 1.5rem;
align-items: start;
padding: clamp(2.5rem, 5vw, 4rem);
border: 1px solid rgba(46,59,50,.09);
border-radius: 12px 54px 12px 12px;
background: rgba(255,255,255,.5);
}
.ng-vac-empty-mark {
display: grid;
width: 54px;
height: 54px;
place-items: center;
border-radius: 50%;
background: var(--color-dark);
color: var(--color-coral);
}
.ng-vac-empty h3 {
margin: 0;
color: var(--color-dark);
font-size: clamp(1.4rem, 2.4vw, 2rem);
line-height: 1.1;
}
.ng-vac-empty div > p:not(.ng-vac-kicker) {
max-width: 480px;
margin: .8rem 0 0;
color: rgba(46,59,50,.5);
font-size: .7rem;
line-height: 1.6;
}
.ng-vac-empty a {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 1.2rem;
color: var(--color-dark);
font-size: .61rem;
font-weight: 800;
text-decoration: none;
}
.ng-vac-empty a span {
color: var(--color-coral);
}
/* RESPONSIVE */
@media (max-width: 900px) {
.ng-vac-list-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-vac-item {
grid-template-columns: 30px minmax(150px, 210px) minmax(0,1fr);
gap: 1.4rem;
}
}
@media (max-width: 700px) {
.ng-vac-item {
grid-template-columns: 24px minmax(0,1fr);
align-items: start;
}
.ng-vac-item-image, .ng-vac-item-content {
grid-column: 2;
}
.ng-vac-item-image {
max-width: 420px;
}
.ng-vac-item-bottom {
align-items: flex-start;
flex-direction: column;
gap: 1rem;
}
.ng-vac-empty {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.ng-vac-list-section {
padding: 4.5rem 0;
}
.ng-vac-item {
gap: 1rem .8rem;
padding: 1.6rem 0;
}
}
/* VACATURES — FINAL */
.ng-vac-final {
padding: clamp(5.5rem, 7vw, 7rem) 0 clamp(3rem, 4vw, 4rem);
background: #fff;
color: var(--color-dark);
}
/* LAYOUT */
.ng-vac-final-layout {
display: grid;
grid-template-columns: minmax(320px, .75fr) minmax(0, 1fr);
align-items: center;
gap: clamp(4rem, 9vw, 8rem);
}
/* COPY */
.ng-vac-final-copy {
max-width: 590px;
}
.ng-vac-final-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-vac-final-copy > p:not(.ng-vac-kicker) {
max-width: 440px;
margin: 1.2rem 0 0;
color: rgba(46,59,50,.52);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* ACTIONS */
.ng-vac-final-actions {
border-top: 1px solid rgba(46,59,50,.11);
}
.ng-vac-final-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 100px;
padding: 1rem 0;
border-bottom: 1px solid rgba(46,59,50,.11);
color: var(--color-dark);
text-decoration: none;
transition: padding-left .25s ease;
}
.ng-vac-final-action:hover {
padding-left: .55rem;
}
.ng-vac-final-action small {
display: block;
margin-bottom: .25rem;
color: var(--color-coral);
font-size: .52rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ng-vac-final-action strong {
display: block;
color: var(--color-dark);
font-size: clamp(1rem, 1.6vw, 1.25rem);
font-weight: 750;
}
/* arrow */
.ng-vac-final-action i {
display: grid;
width: 38px;
height: 38px;
flex: 0 0 38px;
place-items: center;
border: 1px solid rgba(46,59,50,.13);
border-radius: 50%;
color: var(--color-coral);
font-style: normal;
transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.ng-vac-final-action:hover i {
background: var(--color-coral);
color: #fff;
transform: translateX(3px);
}
.ng-vac-final-action--primary strong {
font-weight: 800;
}
/* NOTE */
.ng-vac-final-note {
display: flex;
align-items: center;
gap: .6rem;
margin-top: clamp(3rem, 5vw, 4rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46,59,50,.09);
}
.ng-vac-final-note span {
color: var(--color-coral);
font-size: .6rem;
}
.ng-vac-final-note p {
margin: 0;
color: rgba(46,59,50,.38);
font-size: .6rem;
}
/* RESPONSIVE */
@media (max-width: 800px) {
.ng-vac-final-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
}
@media (max-width: 600px) {
.ng-vac-final {
padding: 4.5rem 0 2.8rem;
}
}
/* STEUN NOORDGROEIT */
.ng-inner-hero--support .ng-inner-hero__image {
object-position: center 48%;
}
/* KICKER */
.ng-support-kicker {
display: block;
margin: 0 0 .8rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: .14em;
text-transform: uppercase;
}
/* DONATION SECTION */
.ng-support-give {
position: relative;
overflow: hidden;
padding: clamp(6rem, 8vw, 8rem) 0;
background: #fff;
color: var(--color-dark);
}
.ng-support-give-layout {
display: grid;
grid-template-columns: minmax(320px, .78fr) minmax(340px, .72fr);
align-items: center;
gap: clamp(5rem, 10vw, 10rem);
}
/* COPY */
.ng-support-give-copy {
max-width: 610px;
}
.ng-support-give-copy h2 {
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.03;
letter-spacing: -.04em;
}
.ng-support-give-lead {
max-width: 490px;
margin: 1.4rem 0 0;
color: var(--color-dark);
font-size: clamp(.92rem, 1.3vw, 1.06rem);
line-height: 1.7;
}
.ng-support-give-copy > p:not(.ng-support-kicker, .ng-support-give-lead) {
max-width: 450px;
margin: .9rem 0 0;
color: rgba(46,59,50,.5);
font-size: var(--ng-home-body);
line-height: 1.65;
}
/* LITTLE NOTE */
.ng-support-give-note {
display: flex;
align-items: flex-start;
gap: .7rem;
margin-top: 2rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-support-give-note > span {
color: var(--color-coral);
}
.ng-support-give-note p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .62rem;
line-height: 1.5;
}
.ng-support-give-note strong {
display: block;
color: var(--color-dark);
}
/* DONATION PANEL */
.ng-support-donation {
position: relative;
max-width: 470px;
margin-left: auto;
padding: clamp(2rem, 4vw, 3rem);
border-radius: 12px 58px 12px 12px;
background: #e8f0e3;
box-shadow: 0 24px 70px rgba(46,59,50,.08);
}
/* TOP */
.ng-support-donation-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(46,59,50,.1);
color: rgba(46,59,50,.42);
font-size: .56rem;
font-weight: 750;
letter-spacing: .05em;
text-transform: uppercase;
}
.ng-support-donation-top span:last-child {
color: var(--color-coral);
}
/* QR */
.ng-support-qr-wrap {
position: relative;
width: min(100%, 270px);
margin: clamp(2rem, 4vw, 3rem) auto 0;
padding: 1.25rem;
border-radius: 9px 30px 9px 9px;
background: #fff;
}
.ng-support-qr {
display: block;
width: 100%;
height: auto;
}
/* QR placeholder */
.ng-support-qr-placeholder {
display: grid;
aspect-ratio: 1;
place-items: center;
align-content: center;
gap: .5rem;
padding: 1rem;
border: 1px dashed rgba(46,59,50,.18);
color: rgba(46,59,50,.35);
text-align: center;
}
.ng-support-qr-placeholder strong {
color: var(--color-dark);
font-size: 2rem;
}
.ng-support-qr-placeholder span {
max-width: 150px;
font-size: .55rem;
}
/* decorative corners */
.ng-support-qr-corner {
position: absolute;
width: 24px;
height: 24px;
border-color: var(--color-coral);
}
.ng-support-qr-corner--one {
top: 7px;
left: 7px;
border-top: 2px solid;
border-left: 2px solid;
}
.ng-support-qr-corner--two {
right: 7px;
bottom: 7px;
border-right: 2px solid;
border-bottom: 2px solid;
}
/* QR COPY */
.ng-support-donation-copy {
margin-top: 1.6rem;
text-align: center;
}
.ng-support-donation-copy small {
display: block;
margin-bottom: .3rem;
color: var(--color-coral);
font-size: .51rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.ng-support-donation-copy strong {
display: block;
color: var(--color-dark);
font-size: clamp(1.2rem, 2vw, 1.55rem);
font-weight: 800;
}
.ng-support-donation-copy p {
max-width: 280px;
margin: .55rem auto 0;
color: rgba(46,59,50,.47);
font-size: .64rem;
line-height: 1.55;
}
/* FOOT */
.ng-support-donation-foot {
display: flex;
align-items: center;
justify-content: center;
gap: .45rem;
margin-top: 1.6rem;
padding-top: 1rem;
border-top: 1px solid rgba(46,59,50,.09);
}
.ng-support-donation-foot span {
color: var(--color-coral);
font-size: .55rem;
}
.ng-support-donation-foot p {
margin: 0;
color: rgba(46,59,50,.38);
font-size: .56rem;
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-support-give-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-support-donation {
width: 100%;
max-width: 520px;
margin: 0 auto;
}
}
@media (max-width: 600px) {
.ng-support-give {
padding: 4.5rem 0;
}
.ng-support-donation {
padding: 1.7rem 1.4rem;
border-radius: 10px 40px 10px 10px;
}
.ng-support-qr-wrap {
width: min(100%, 240px);
}
}
/* NOORDGROEIT — FINAL TYPOGRAPHY & ACCESSIBILITY POLISH */
/* EXISTING BODY TOKEN */
/* SECTION KICKERS — Never microscopic. */
/* * Keep the deliberate uppercase/editorial look, * just make it readable. */
/* HTML SMALL / META */
/* SUPPORTING NOTES / CAPTIONS */
/* MAIN COPY BLOCKS */
/* NOORDGROEIT — FINAL TYPOGRAPHY & ACCESSIBILITY POLISH */
:root {
/* * Main readable text * 16px → roughly 17px on larger screens */
--ng-text-body: clamp(1rem, .25vw + .95rem, 1.0625rem);
/* Supporting copy */
--ng-text-support: .875rem;
/* Small metadata / labels */
--ng-text-meta: .75rem;
/* * Muted text should remain visibly readable. */
--ng-text-muted: rgba(46, 59, 50, .68);
--ng-text-soft: rgba(46, 59, 50, .56);
--ng-text-muted-light: rgba(255, 255, 255, .70);
--ng-text-soft-light: rgba(255, 255, 255, .58);
}
/* EXISTING BODY TOKEN */
:root {
--ng-home-body: var(--ng-text-body);
}
/* SECTION KICKERS — Never microscopic. */
main [class*="-kicker"] {
font-size: var(--ng-text-meta) !important;
line-height: 1.35;
}
/* * Keep the deliberate uppercase/editorial look, * just make it readable. */
main [class*="-kicker"] {
letter-spacing: .12em;
}
/* HTML SMALL / META */
main small {
font-size: var(--ng-text-meta) !important;
line-height: 1.45;
}
/* SUPPORTING NOTES / CAPTIONS */
main [class*="-note"] p, main [class*="-caption"] p, main [class*="-meta"] small, main [class*="-meta"] span {
font-size: var(--ng-text-support) !important;
line-height: 1.5;
}
/* MAIN COPY BLOCKS */
main [class*="-copy"] > p:not([class*="kicker"]) :not([class*="label"]), main [class*="-intro"] > p:not([class*="kicker"]) :not([class*="label"]), main [class*="-summary"] > p, main p[class*="-description"] {
font-size: var(--ng-text-body);
line-height: 1.65;
}
/* HOMEPAGE — VALUES DIRECTION CUE — SIMPLE TEXT + ARROW */
/* Kill old line + dot */
/* Ontdek wat we doen — position only */
/* HOMEPAGE — VAN BINNENUIT */
/* INTRO */
/* PHOTO */
/* JOURNEY */
/* Route */
/* Origin beneath photo */
/* PURPOSE BLOCKS */
/* Labels */
/* CLOSING */
/* TABLET */
/* MOBILE */
/* ACCESSIBILITY */
/* HOMEPAGE — VAN BINNENUIT — COMMUNITY NOTICEBOARD */
/* INTRO */
/* STAGE */
/* PHOTO */
/* CONNECTING THREAD */
/* PAPER NOTES */
/* Mission */
/* Vision */
/* Little pin */
/* Labels */
/* PHOTO CAPTION */
/* FOOTER */
/* TABLET */
/* MOBILE */
/* REDUCED MOTION */
/* HOMEPAGE MANIFESTO — CALMER REVEAL */
/* * Everything remains visible if JS fails. */
/* * JS adds this class once the section is ready * for scroll animation. */
/* Mission starts slightly left/down */
/* Vision starts slightly right/down */
/* Reveal state */
/* Mission first */
/* Vision follows */
/* THREAD — ONE QUIET REVEAL */
/* HOMEPAGE — INITIATIVES — NEIGHBOURHOOD EXHIBITION CAROUSEL */
/* Soft oversized background word */
/* HEADING */
/* little coral editorial mark */
/* CAROUSEL FIELD */
/* * Big soft field behind the cards. * Gives the carousel a shape of its own. */
/* BASE CARD */
/* ACTIVE CARD */
/* * Little coral tab — * like a marker attached to the active story. */
/* SIDE CARDS */
/* Let side cards rise slightly when hovered */
/* ACTIVE IMAGE */
/* * Active card doesn't need the huge dark gradient anymore. */
/* ACTIVE EDITORIAL TEXT SHEET */
/* Meta */
/* Title */
/* Description */
/* Link */
/* ACTIVE COPY ANIMATION — Restarts each time a card becomes active */
/* SIDE CARD COPY */
/* ARROWS */
/* FOOTER / DOTS */
/* TABLET */
/* MOBILE */
/* REDUCED MOTION */
/* INITIATIVES — MATCH PREVIOUS SECTION HEADING */
/* HOMEPAGE — NOORDBUITEN — AUTHORITATIVE FIX + INTERACTIVE PHOTO STRIP */
/* 1. FIX LEAKING INNER-PAGE STYLES */
/* Kill decorative old circle / dot */
/* Reset the inner-page .ng-nb-intro collision */
/* 2. FIX HEADING / PARAGRAPH RHYTHM */
body.home #noordbuiten-uitgelicht .ng-nb-copy > p:not(.ng-nb-location) {
max-width: 600px;
margin: 0 !important;
color: rgba(46, 59, 50, .72);
font-size: var(--ng-home-body);
line-height: 1.68;
}
/* 3. PHOTO ACCORDION */
/* SHARED PANEL */
/* * Main image gets the attention initially. */
/* * End image closes the composition. */
/* INTERACTION */
/* * When gallery is being explored, * all photos become slightly narrower... */
/* * ...and the one you're looking at opens up. */
/* IMAGES */
/* GRADIENT */
/* CAPTIONS */
/* * Expanded image gets full caption emphasis. */
/* LITTLE CORAL ACTIVE LINE */
/* 4. SCROLL ENTRANCE */
/* TABLET */
/* MOBILE */
/* REDUCED MOTION */
/* HOME — MISSIE / VISIE PHOTO DRAWERS */
/* DRAWER POSITION */
/* DRAWER */
/* Give vision opposite corner character */
/* COLLAPSED HEADER */
/* + BUTTON / HOVER AFFORDANCE */
/* HIDDEN CONTENT */
/* OPEN ON HOVER / KEYBOARD FOCUS */
/* DIM THE OTHER DRAWER SLIGHTLY */
body.home .ng-home-purpose-drawers:has(.ng-home-purpose-drawer:hover) .ng-home-purpose-drawer:not(:hover) {
opacity: .72;
}
/* MOBILE */
/* REDUCED MOTION */
/* HOME — VAN BINNENUIT — SPACING CLEANUP */
/* * Match the spacing rhythm used by the other homepage * section introductions. */
/* * No extra gap between intro and visual. */
/* * The photo starts immediately at the top of the stage. * Previously this had top: 55px, which created that * second unwanted gap. */
/* * We don't need this caption anymore now that * Missie + Visie become the interactive elements. */
/* MOBILE */
/* HOMEPAGE — MATCH INNER PAGE SECTION TYPOGRAPHY — HERO EXCLUDED */
/* * Exact same H2 treatment as Over ons / Team / * Financiën / Initiatieven / NoordbuiTen. */
body.home main section:not(.ng-editorial-hero) h2 {
font-family: var(--font-primary) !important;
font-size: var(--ng-section-title) !important;
font-weight: 750 !important;
line-height: 1.06 !important;
letter-spacing: -.035em !important;
}
/* Same mobile scale as inner pages */
@media (max-width: 700px) {
body.home main section:not(.ng-editorial-hero) h2 {
font-size: var(--ng-section-title) !important;
line-height: 1.06 !important;
letter-spacing: -.035em !important;
}
}
/* HOMEPAGE — DOE MEE V2 — INTERACTIVE CONVERSATION */
/* subtle giant background word */
/* INTRO */
/* INTERACTIVE ROWS */
/* ROW BUTTON */
/* little opening point */
/* LABEL */
/* PLUS */
/* HIDDEN PANEL */
/* OPEN STATE */
/* VOLUNTEER QUOTE */
/* FINAL CTA */
/* CTA BUTTONS */
/* TABLET / MOBILE */
/* REDUCED MOTION */
/* DOE MEE — PLAYFUL CONVERSATION PROMPTS */
/* each one gets slightly different character */
/* little symbol */
/* hover/open = wakes up */
/* when the row opens, keep contrast nice on cream */
/* positions */
/* HOMEPAGE — DOE MEE — CIRCULAR CONVERSATION JOURNEY */
/* subtle background texture */
/* INTRO */
/* STAGE */
/* ORBIT */
/* second imperfect circle */
/* CENTRE */
/* SLOW TRAVELLING DOT */
/* MOMENTS */
/* LEFT */
/* RIGHT */
/* BOTTOM */
/* NODE */
/* MAIN COPY */
/* LITTLE POPUP LABELS */
/* Coffee */
/* Spark */
/* Go */
/* SCROLL REVEAL */
/* * Your existing reveal script adds .visible, * so no new JavaScript is necessary. */
/* coffee starts */
/* spark follows */
/* bottom last */
/* visible */
/* stagger the main moments */
/* labels pop AFTER each title appears */
/* HOVER DETAILS */
/* QUOTE */
/* CTA */
/* CTA BUTTONS */
/* TABLET */
/* MOBILE — Still playful — alternating conversation path */
/* REDUCED MOTION */
/* DOE MEE — DEFINITIVE POP SEQUENCE */
/* * IMPORTANT: * Content is visible by default. * JS only adds the animation when it is available. */
/* Animation enabled by JS */
/* starting positions */
/* Main moment appears */
/* LABELS */
/* label actually POPS */
/* individual character */
/* little icon reacts after popping */
/* MOBILE */
/* REDUCED MOTION */
/* DOE MEE — TRIANGLE AROUND CENTRAL CIRCLE */
/* CIRCLE — ACTUALLY CENTRED BETWEEN THE THREE */
/* * Keep ONE softer inner circle. * No need for another moving/random-looking route. */
/* THREE MOMENTS AROUND IT */
/* 10 o'clock */
/* 2 o'clock */
/* 6 o'clock */
/* CENTRAL COPY */
/* RED DOT — ACTUAL JOURNEY */
/* * ONE journey: * * upper-left * ↓ * upper-right * ↓ * bottom * * Then STOP. */
/* DOE MEE — CLEAN CIRCLE LAYOUT */
/* CIRCLE */
/* inner route */
/* CENTRE COPY */
/* MOMENTS */
/* LEFT */
/* RIGHT */
/* BOTTOM */
/* MOMENT COPY */
/* Bottom text centered */
/* CONNECTOR NODES */
/* left points toward circle */
/* right points toward circle */
/* bottom points upward */
/* POPUP LABELS */
/* second */
/* third */
/* HOME — DOE MEE — FINAL CLEANUP / CALMER ORBIT COMPOSITION */
/* REMOVE THE RANDOM DOTS BESIDE THE TEXT — The travelling orbit dot is the ONLY coral dot. */
/* TIGHTER, CLEANER STAGE */
/* CENTRAL CIRCLE */
/* slightly quieter inner circle */
/* THREE MOMENTS */
/* LEFT */
/* RIGHT */
/* BOTTOM */
/* COPY */
/* SPEECH BUBBLES */
/* little cartoon speech tail */
/* LEFT bubble */
/* RIGHT bubble */
/* BOTTOM bubble */
/* bottom speech-tail centered */
/* CARTOON POP */
/* * JS already adds .is-label-visible. * Instead of a gentle fade: * little squash → overshoot → settle. */
/* little icon gets its own delayed boop */
/* MOBILE */
/* HOME — VOLUNTEER QUOTE WITH PORTRAIT */
/* PORTRAIT */
/* tiny coral accent */
/* LITTLE "HI" SPEECH BUBBLE */
/* little cartoon speech tail */
/* QUOTE CONTENT */
/* RIGHT-SIDE LABEL */
/* POP ANIMATION */
/* * Everything stays visible if JS fails. */
/* PHOTO POP */
/* SPEECH BUBBLE POPS AFTER PHOTO */
/* waving hand gets a tiny boop */
/* MOBILE */
/* REDUCED MOTION */
/* HOME — VRIJWILLIGERSERVARING — CLEAN SPEECH BUBBLE */
/* PHOTO */
/* tiny brand accent */
/* THE ACTUAL SPEECH BUBBLE */
/* speech tail pointing to Susan */
/* EYEBROW */
/* QUOTE */
/* ATTRIBUTION */
/* SUBTLE POP-IN */
/* MOBILE */
/* HOME — WAT SPEELT ER IN NOORD — EDITORIAL WIJKKRANT */
/* giant almost-invisible editorial mark */
/* INTRO */
/* MAIN LAYOUT */
/* NEWS HEADING */
/* FEATURE STORY */
/* round arrow */
/* EDITORIAL PAPER SHEET */
/* TWO SMALL STORIES */
/* AGENDA */
/* VERTICAL TIMELINE */
/* AGENDA CTA */
/* EMPTY STATES */
/* TABLET */
/* MOBILE */
/* HOME — PARTNERS POLISH */
/* slightly calmer logo cards */
/* bottom information area */
/* keep the CTA a little lighter / cleaner */
/* HOME — FINAL SUPPORT CTA POLISH — Keep the concept, integrate it with the homepage */
/* SECTION RHYTHM */
/* keep transition from partners subtle */
/* PANEL — A LITTLE SHORTER / LESS BOXY */
/* CORAL CORNER — Same idea, softer / more organic */
/* softer green shape at the bottom */
/* LEFT COPY */
/* CTA slightly closer to the message */
/* RIGHT SIDE — Remove the hard dividing line. */
/* * Softer fading divider instead. */
/* STAMP */
/* IMPACT LIST */
/* * Make list separators less prominent. */
/* SUBTLE INTERACTION */
/* TABLET */
/* MOBILE */
/* HOME — "ONTDEK WAT WE DOEN" — RESTORE ORIGINAL TYPOGRAPHY ONLY */
/* Original small-screen size */
/* HOME — VALUES STRIP — RESTORE ORIGINAL TYPOGRAPHY */
/* Original mobile treatment */
/* HOME — OVER NOORDGROEIT — COMMUNITY WINDOW */
/* INTRO */
/* VISUAL COMPOSITION */
/* LEFT STORY MARKER */
/* PHOTO */
/* MISSION / VISION DRAWERS */
/* remove native details marker */
/* trigger */
/* + */
/* HIDDEN CONTENT */
/* DESKTOP HOVER / CLICK OPEN */
/* click/tap fallback */
/* CLOSING STATEMENT */
/* * First empty column lines the statement * up with the PHOTO rather than the page edge. */
/* CTA */
/* TABLET */
/* MOBILE */
/* HOME — MISSIE / VISIE OPEN STATE */
/* HOME — NOORDBUITEN — STEP INTO THE PLACE */
/* IDENTITY */
/* BIG EXPERIENCE */
/* IMAGES */
/* IMAGE SHADE */
/* STORY */
/* DESTINATION */
/* IMAGE SELECTORS */
/* LOCATION TICKET */
/* TABLET */
/* MOBILE */
/* HOME — NOORDBUITEN — EDITORIAL LANDSCAPE */
/* INTRO */
/* COPY */
/* * ONLY the word "groeit" is green. */
/* PHOTO STAGE */
/* very gentle shade only at bottom */
/* IMAGE SWITCHER */
/* LOCATION TICKET */
/* FOOTER */
/* MAIN CTA */
/* MOBILE */
/* HOME — INITIATIEVEN HEADING — REMOVE OLD CORAL STRIKE */
/* HOME — NEWS MINI HEADER */
/* ALL NEWS LINK */
/* MOBILE */
/* SITE FOOTER — FINAL EDITORIAL POLISH */
.site-footer {
padding: clamp(4.5rem, 6vw, 5.75rem) 0 1.5rem;
color: rgba(255,255,255,.72);
background: var(--color-dark);
}
/* MAIN FOOTER GRID */
.site-footer .footer-main {
display: grid;
grid-template-columns: minmax(270px, 1.25fr) minmax(135px, .6fr) minmax(150px, .65fr) minmax(240px, .9fr);
align-items: start;
gap: clamp(2.5rem, 5vw, 5rem);
}
/* NOORDGROEIT IDENTITY */
.site-footer .footer-identity {
max-width: 390px;
}
/* * Keep the cream tile because the green logo * needs contrast — just make it calmer. */
.site-footer .footer-logo {
width: min(100%, 220px);
min-height: 88px;
margin-bottom: 1.5rem;
padding: 1rem 1.35rem;
background: rgba(244,241,236,.97);
border-radius: 1.25rem 1.25rem .4rem 1.25rem;
box-shadow: none;
}
.site-footer .footer-logo img {
width: 100%;
max-height: 62px;
object-fit: contain;
}
.site-footer .footer-identity > p {
max-width: 360px;
margin: 0;
color: rgba(255,255,255,.66);
font-size: .9rem;
line-height: 1.7;
}
/* stichting explanation */
.site-footer .footer-organisation-note {
max-width: 345px;
margin-top: 1.2rem !important;
padding: .1rem 0 .1rem 1rem;
color: rgba(255,255,255,.72);
border-left: 2px solid var(--color-coral);
font-size: .78rem;
line-height: 1.55;
}
/* COLUMN HEADINGS */
.site-footer .footer-column h2 {
margin: .2rem 0 1.3rem;
color: #fff;
font-size: .69rem;
font-weight: 850;
line-height: 1.2;
letter-spacing: .15em;
text-transform: uppercase;
}
/* LINKS */
.site-footer .footer-column ul {
gap: .72rem;
}
.site-footer .footer-column a {
color: rgba(255,255,255,.7);
font-size: .87rem;
font-weight: 650;
line-height: 1.4;
text-decoration: none;
}
.site-footer .footer-column li a {
position: relative;
display: inline-flex;
align-items: center;
transition: color .22s ease, transform .22s ease;
}
.site-footer .footer-column li a:hover, .site-footer .footer-column li a:focus-visible {
color: #fff;
transform: translateX(4px);
}
/* NEWSLETTER */
.site-footer .footer-newsletter p {
max-width: 290px;
margin: 0 0 1.35rem;
color: rgba(255,255,255,.67);
font-size: .87rem;
line-height: 1.65;
}
/* * Replace old underline link with the same * compact-control language used elsewhere. */
/* arrow becomes the round control */
/* NOORDBUITEN — FLAT EDITORIAL STRIP */
.site-footer .footer-noordbuiten {
display: grid;
grid-template-columns: minmax(165px, .38fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 4vw, 4rem);
margin-top: clamp(3rem, 5vw, 4.25rem);
padding: clamp(2rem, 3.5vw, 2.75rem) 0;
/* * No more giant card inside the footer. */
background: transparent;
border: 0;
border-top: 1px solid rgba(255,255,255,.13);
border-bottom: 1px solid rgba(255,255,255,.13);
border-radius: 0;
}
/* smaller NoordbuiTen logo tile */
.site-footer .footer-noordbuiten-logo {
width: min(100%, 190px);
min-height: 100px;
display: grid;
place-items: center;
padding: 1rem 1.25rem;
background: var(--color-green-light);
border-radius: 1rem 1rem .35rem 1rem;
}
.site-footer .footer-noordbuiten-logo img {
width: min(100%, 145px);
max-height: 76px;
object-fit: contain;
}
/* NOORDBUITEN COPY */
.site-footer .footer-small-label {
margin: 0 0 .55rem;
color: var(--color-coral);
font-size: .63rem;
font-weight: 850;
line-height: 1.2;
letter-spacing: .14em;
text-transform: uppercase;
}
.site-footer .footer-noordbuiten-copy h2 {
max-width: 690px;
margin: 0 0 1.1rem;
color: #fff;
font-size: clamp(1.35rem, 2.2vw, 2rem);
font-weight: 730;
line-height: 1.1;
letter-spacing: -.035em;
}
/* * Lose the old underline here as well. */
.site-footer .footer-noordbuiten-copy a {
width: fit-content;
display: inline-flex;
align-items: center;
gap: .7rem;
padding: 0;
color: rgba(255,255,255,.78);
border: 0;
font-size: .78rem;
font-weight: 800;
text-decoration: none;
transition: color .25s ease;
}
.site-footer .footer-noordbuiten-copy a::after {
content: "→";
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
color: var(--color-dark);
background: var(--color-cream);
transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
.site-footer .footer-noordbuiten-copy a:hover, .site-footer .footer-noordbuiten-copy a:focus-visible {
color: #fff;
}
.site-footer .footer-noordbuiten-copy a:hover::after, .site-footer .footer-noordbuiten-copy a:focus-visible::after {
color: #fff;
background: var(--color-coral);
transform: translateX(3px);
}
/* * The old link already contains an arrow span. * Hide that because ::after is now our circular arrow. */
.site-footer .footer-noordbuiten-copy a > span {
display: none;
}
/* BOTTOM BAR */
.site-footer .footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-top: 0;
padding-top: 1.35rem;
border-top: 0;
color: rgba(255,255,255,.52);
font-size: .7rem;
}
.site-footer .footer-bottom p {
margin: 0;
}
/* tiny final brand accent */
.site-footer .footer-bottom p:last-child {
display: inline-flex;
align-items: center;
gap: .55rem;
}
.site-footer .footer-bottom p:last-child::before {
content: "";
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 50%;
background: var(--color-coral);
}
/* TABLET */
@media (max-width: 1050px) {
.site-footer .footer-main {
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 3rem 4rem;
}
.site-footer .footer-newsletter p {
max-width: 360px;
}
}
/* MOBILE */
@media (max-width: 700px) {
.site-footer {
padding: 4rem 0 1.5rem;
}
.site-footer .footer-main {
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 2.75rem 1.5rem;
}
.site-footer .footer-identity, .site-footer .footer-newsletter {
grid-column: 1 / -1;
}
.site-footer .footer-logo {
width: 190px;
}
.site-footer .footer-noordbuiten {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 3rem;
padding: 2rem 0;
}
.site-footer .footer-noordbuiten-logo {
width: 165px;
}
.site-footer .footer-bottom {
align-items: flex-start;
flex-direction: column;
gap: .65rem;
padding-top: 1.25rem;
}
}
/* SMALL PHONE */
@media (max-width: 480px) {
.site-footer .footer-main {
grid-template-columns: 1fr;
gap: 2.25rem;
}
.site-footer .footer-identity, .site-footer .footer-newsletter {
grid-column: auto;
}
}
/* HOME MOTION — 01 HERO — Calm opening sequence */
/* PHOTO — VERY SUBTLE SETTLE */
/* CORAL LEFT LINE */
/* EYEBROW */
/* TITLE — LINE BY LINE */
/* SMALL LABEL MOTION */
/* CORAL DOT AFTER "GEZOND" */
/* CORNER SHAPE */
/* "SAMEN VOOR NOORD" SEAL */
/* SCROLL CUE — Keep this as the ONE repeating hero animation */
/* REDUCED MOTION */
/* HOME MOTION — 02 VALUES */
/* DIRECTION CUE */
/* * The cue becomes relative on narrower screens, * so don't keep the desktop translateY there. */
/* DRAW THE LITTLE LINE */
/* CORAL DOT */
/* ARROW — Stop the old infinite pulse. */
/* VALUE ITEMS */
/* ICON POP */
/* REDUCED MOTION */
/* HOME MOTION — 03 OVER NOORDGROEIT */
/* INTRO */
/* 2023 STORY MARKER */
/* little line draws itself */
/* 2023 gets a tiny stamp-like arrival */
/* COMMUNITY PHOTO — Window opens horizontally */
/* MISSIE / VISIE — Arrive after the photograph */
/* tiny + pop */
/* CLOSING STATEMENT */
/* CTA arrow gets one little nudge */
/* MOBILE — Keep the reveal simpler */
@media (max-width: 700px) {
@keyframes ngOriginPhotoMobile {
from {
clip-path: inset(0 0 35% 0 round 1.5rem);
}
to {
clip-path: inset(0 0 0 0 round 1.5rem);
}
}
}
/* REDUCED MOTION */
/* HOME MOTION — 04 INITIATIVES */
/* HEADING */
/* CAROUSEL STAGE — Starts slightly lower. */
/* CARD FAN-OUT */
/* * While waiting: * active card is slightly smaller, * previews hide close behind it. */
body.home .ng-coverflow-section.is-initiatives-motion-ready:not(.is-initiatives-visible) .ng-coverflow-card.is-active {
opacity: 0;
transform: translate(-50%, -50%) scale(.90);
}
body.home .ng-coverflow-section.is-initiatives-motion-ready:not(.is-initiatives-visible) .ng-coverflow-card.is-prev {
left: 42%;
opacity: 0;
transform: translate(-50%, -50%) scale(.68);
}
body.home .ng-coverflow-section.is-initiatives-motion-ready:not(.is-initiatives-visible) .ng-coverflow-card.is-next {
left: 58%;
opacity: 0;
transform: translate(-50%, -50%) scale(.68);
}
/* * Once visible, send them to their * actual carousel positions. */
/* ACTIVE CARD COPY */
/* tiny project number line */
/* ARROW CONTROLS */
/* COUNTER + PAGINATION STROKES */
/* * Active pagination stroke gets one * quick stretch when it arrives. */
/* MOBILE — Side previews use different positions here. */
/* REDUCED MOTION */
/* HOME MOTION — 05 NOORDBUITEN */
/* IDENTITY */
/* Logo gets a tiny handmade stamp arrival */
/* HEADING + COPY */
/* BIG PHOTO — Opens like a wide landscape. */
/* ONTMOETEN / MAKEN / GROEIEN */
/* LOCATION TICKET */
/* little coral location dot */
/* FOOTER STORY + CTA */
/* CTA ARROW — ONE LITTLE NUDGE */
/* MOBILE */
@media (max-width: 700px) {
@keyframes ngNbStageMobile {
from {
opacity: 0;
clip-path: inset(7% 0 7% 0 round 1.5rem);
transform: translateY(18px);
}
to {
opacity: 1;
clip-path: inset(0 0 0 0 round 1.5rem);
transform: translateY(0);
}
}
}
/* REDUCED MOTION */
/* HOME MOTION — 07 ACTUALITEIT */
/* MAIN INTRO */
/* "NIEUWS UIT NOORD" MINI HEADER */
/* Alle nieuws arrow gets one tiny nudge */
/* FEATURE STORY IMAGE — Horizontal newspaper-photo reveal */
/* FEATURE STORY SHEET — Like the article has been placed over the photo */
/* Feature arrow appears last */
/* SMALLER NEWS STORIES */
/* AGENDA COLUMN */
/* AGENDA EVENTS */
/* LITTLE TIMELINE DOTS */
/* AGENDA CTA */
/* MOBILE */
@media (max-width: 760px) {
/* * No sideways agenda movement on mobile. */
@keyframes ngPulseAgendaMobile {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
/* REDUCED MOTION */
/* HOME MOTION — 08 PARTNERS */
/* INTRO */
/* MARQUEE — Keep its own horizontal transform untouched. */
/* * Important: * the moving transform belongs to .ng-partner-track. * So the reveal happens on the wrapper instead. */
/* DON'T LET LOGOS MOVE BEFORE THEY ARE VISIBLE */
body.home .ng-partner-section.is-partner-motion-ready:not(.is-partner-visible) .ng-partner-track {
animation-play-state: paused;
}
/* LOGOS — VERY SMALL SETTLE */
/* * Opacity only here. * No transform, because logo hover already uses transform. */
/* FOOTER NOTE */
/* LITTLE CORAL FOOTER DOT */
/* PARTNERS DESTINATION */
/* CTA ARROW */
/* MOBILE */
@media (max-width: 700px) {
/* * Simpler ribbon opening on small screens. */
@keyframes ngPartnerRibbonMobile {
from {
opacity: 0;
clip-path: inset(0 0 0 18%);
}
to {
opacity: 1;
clip-path: inset(0 0 0 0);
}
}
}
/* REDUCED MOTION */
/* PARTNERS MOTION — FASTER TIMING */
/* Heading comes in quicker */
/* Ribbon starts almost immediately */
/* Logos become fully visible much faster */
/* Bottom content follows shortly after */
/* HOME MOTION — 09 FINAL SUPPORT CTA */
/* PANEL */
/* DECORATIVE CORAL CIRCLE */
/* PALE GREEN SHAPE */
/* LEFT COPY */
/* SUPPORT BUTTON */
/* little arrow finish */
/* DIVIDER BETWEEN COPY + IMPACT */
/* STAMP — Our little final cute moment 😎 */
/* Heart pops inside the stamp */
/* RIGHT-HAND LABEL */
/* IMPACT ROWS */
/* 01 / 02 / 03 */
/* TABLET — Border becomes horizontal in existing layout. */
@media (max-width: 900px) {
@keyframes ngSupportDividerMobile {
from {
border-top-color: transparent;
}
to {
border-top-color: rgba(255,255,255,.2);
}
}
}
/* REDUCED MOTION */
/* OVER NOORDGROEIT MOTION — 01 HERO — Correct selectors */
/* PHOTO */
.ng-over-page .ng-inner-hero--over .ng-inner-hero__image {
animation: ngOverInnerPhotoIn 1.25s cubic-bezier(.18,.82,.25,1) backwards;
}
@keyframes ngOverInnerPhotoIn {
from {
opacity: .55;
transform: scale(1.06);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* OVERLAY — Settles over the photograph slightly afterwards */
.ng-over-page .ng-inner-hero--over .ng-inner-hero__overlay {
animation: ngOverInnerOverlayIn .9s .08s ease backwards;
}
@keyframes ngOverInnerOverlayIn {
from {
opacity: .25;
}
to {
opacity: 1;
}
}
/* CORAL SIGNATURE */
.ng-over-page .ng-inner-hero--over .ng-inner-hero__detail {
animation: ngOverInnerDetailIn .4s .18s ease backwards;
}
@keyframes ngOverInnerDetailIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* coral dot */
.ng-over-page .ng-inner-hero--over .ng-inner-hero__detail span {
animation: ngOverInnerDotIn .4s .23s cubic-bezier(.2,1.4,.3,1) backwards;
}
@keyframes ngOverInnerDotIn {
0% {
opacity: 0;
transform: scale(.25);
}
70% {
opacity: 1;
transform: scale(1.35);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* little line draws out */
.ng-over-page .ng-inner-hero--over .ng-inner-hero__detail i {
transform-origin: left center;
animation: ngOverInnerLineIn .5s .32s cubic-bezier(.2,.75,.25,1) backwards;
}
@keyframes ngOverInnerLineIn {
from {
opacity: 0;
transform: scaleX(0);
}
to {
opacity: 1;
transform: scaleX(1);
}
}
/* TITLE */
.ng-over-page .ng-inner-hero--over h1 {
animation: ngOverInnerTitleIn .72s .34s cubic-bezier(.18,.82,.25,1) backwards;
}
@keyframes ngOverInnerTitleIn {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* STICHTING NOORDGROEIT */
.ng-over-page .ng-inner-hero--over .ng-inner-hero__meta {
animation: ngOverInnerMetaIn .55s .52s cubic-bezier(.2,.75,.25,1) backwards;
}
@keyframes ngOverInnerMetaIn {
from {
opacity: 0;
transform: translateY(13px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* NoordgroeiT gets a tiny emphasis */
.ng-over-page .ng-inner-hero--over .ng-inner-hero__meta span {
display: inline-block;
animation: ngOverInnerBrandIn .4s .69s cubic-bezier(.2,1.3,.3,1) backwards;
}
@keyframes ngOverInnerBrandIn {
from {
opacity: 0;
transform: translateY(3px) scale(.92);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* IMPORTANT: — DO NOT animate .ng-inner-hero__scroll here. — It ALREADY has its own continuous scroll animation. */
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-over-page .ng-inner-hero--over .ng-inner-hero__image, .ng-over-page .ng-inner-hero--over .ng-inner-hero__overlay, .ng-over-page .ng-inner-hero--over .ng-inner-hero__detail, .ng-over-page .ng-inner-hero--over .ng-inner-hero__detail span, .ng-over-page .ng-inner-hero--over .ng-inner-hero__detail i, .ng-over-page .ng-inner-hero--over h1, .ng-over-page .ng-inner-hero--over .ng-inner-hero__meta, .ng-over-page .ng-inner-hero--over .ng-inner-hero__meta span {
animation: none !important;
}
}
/* OVER NOORDGROEIT — VALUES V2 — Interactive editorial triptych */
/* WHOLE STRIP */
.ng-over-page .ng-over-story-v3 .ng-over-values {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(.7rem, 1.2vw, 1rem);
margin-top: clamp(.5rem, 1.5vw, 1.25rem);
border: 0;
}
/* PANELS */
.ng-over-page .ng-over-story-v3 .ng-over-value {
position: relative;
min-height: clamp(290px, 28vw, 360px);
display: flex;
flex-direction: column;
padding: clamp(1.5rem, 2.6vw, 2.25rem);
overflow: hidden;
border: 1px solid rgba(46,59,50,.08);
background: #fff;
transition: transform .36s cubic-bezier(.2,.75,.25,1), box-shadow .36s ease, background-color .3s ease, border-color .3s ease;
}
/* different silhouettes */
.ng-over-page .ng-over-story-v3 .ng-over-value:nth-child(1) {
border-radius: 2.5rem .65rem .65rem .65rem;
background: #e5eee0;
}
.ng-over-page .ng-over-story-v3 .ng-over-value:nth-child(2) {
border-radius: .65rem 2.5rem .65rem .65rem;
background: #fffdfa;
}
.ng-over-page .ng-over-story-v3 .ng-over-value:nth-child(3) {
border-radius: .65rem .65rem 2.5rem .65rem;
background: #f1e5d8;
}
/* kill the old column borders/padding */
.ng-over-page .ng-over-story-v3 .ng-over-value:first-child, .ng-over-page .ng-over-story-v3 .ng-over-value:last-child {
padding-left: clamp(1.5rem, 2.6vw, 2.25rem);
padding-right: clamp(1.5rem, 2.6vw, 2.25rem);
}
.ng-over-page .ng-over-story-v3 .ng-over-value + .ng-over-value {
border-left: 1px solid rgba(46,59,50,.08);
}
/* SUBTLE BACKGROUND NUMBER */
.ng-over-page .ng-over-story-v3 .ng-over-value::after {
position: absolute;
right: -.08em;
bottom: -.22em;
color: rgba(46,59,50,.045);
font-size: clamp(7rem, 11vw, 10rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.08em;
pointer-events: none;
transition: transform .45s cubic-bezier(.2,.75,.25,1), opacity .3s ease;
}
.ng-over-page .ng-over-story-v3 .ng-over-value:nth-child(1)::after {
content: "01";
}
.ng-over-page .ng-over-story-v3 .ng-over-value:nth-child(2)::after {
content: "02";
}
.ng-over-page .ng-over-story-v3 .ng-over-value:nth-child(3)::after {
content: "03";
}
/* NUMBER + ICON */
.ng-over-page .ng-over-story-v3 .ng-over-value-top {
position: relative;
z-index: 2;
margin-bottom: auto;
}
.ng-over-page .ng-over-story-v3 .ng-over-value-icon {
width: 3rem;
height: 3rem;
background: rgba(255,255,255,.62);
color: var(--color-dark);
border: 1px solid rgba(46,59,50,.08);
transition: transform .4s cubic-bezier(.2,1.25,.3,1), background-color .3s ease;
}
/* TITLE */
.ng-over-page .ng-over-story-v3 .ng-over-value h3 {
position: relative;
z-index: 2;
max-width: 290px;
margin: 2.4rem 0 0;
color: var(--color-dark);
font-size: clamp(1.5rem, 2vw, 1.85rem);
font-weight: 760;
line-height: 1.04;
letter-spacing: -.04em;
}
/* * Only "groen" stays green. * The rest of the headings stay dark. */
.ng-over-page .ng-over-story-v3 .ng-over-value h3 span {
color: var(--color-green);
}
/* DESCRIPTION */
.ng-over-page .ng-over-story-v3 .ng-over-value > p {
position: relative;
z-index: 2;
max-width: 300px;
margin: .9rem 0 0;
color: rgba(46,59,50,.66);
font-size: .88rem;
line-height: 1.6;
}
/* DESKTOP HOVER REVEAL */
@media (hover: hover) and (pointer: fine) {
.ng-over-page .ng-over-story-v3 .ng-over-value > p {
max-height: 0;
margin-top: 0;
opacity: 0;
overflow: hidden;
transform: translateY(16px);
transition: max-height .42s cubic-bezier(.2,.75,.25,1), margin .35s ease, opacity .3s ease, transform .42s cubic-bezier(.2,.75,.25,1);
}
.ng-over-page .ng-over-story-v3 .ng-over-value:hover, .ng-over-page .ng-over-story-v3 .ng-over-value:focus {
transform: translateY(-7px);
border-color: rgba(46,59,50,.13);
box-shadow: 0 20px 45px rgba(46,59,50,.10);
outline: none;
}
.ng-over-page .ng-over-story-v3 .ng-over-value:hover > p, .ng-over-page .ng-over-story-v3 .ng-over-value:focus > p {
max-height: 150px;
margin-top: .9rem;
opacity: 1;
transform: translateY(0);
}
.ng-over-page .ng-over-story-v3 .ng-over-value:hover .ng-over-value-icon, .ng-over-page .ng-over-story-v3 .ng-over-value:focus .ng-over-value-icon {
transform: rotate(5deg) scale(1.08);
background: #fff;
}
.ng-over-page .ng-over-story-v3 .ng-over-value:hover::after, .ng-over-page .ng-over-story-v3 .ng-over-value:focus::after {
transform: translate(-8px,-5px) scale(1.04);
opacity: .8;
}
}
/* LITTLE CORAL REVEAL LINE */
.ng-over-page .ng-over-story-v3 .ng-over-value::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 4px;
background: var(--color-coral);
transition: width .42s cubic-bezier(.2,.75,.25,1);
}
@media (hover: hover) and (pointer: fine) {
.ng-over-page .ng-over-story-v3 .ng-over-value:hover::before, .ng-over-page .ng-over-story-v3 .ng-over-value:focus::before {
width: 100%;
}
}
/* FOOTER DETAIL */
.ng-over-page .ng-over-story-v3 .ng-over-values-footer {
margin-top: clamp(2rem, 3vw, 2.75rem);
}
/* TABLET / MOBILE */
@media (max-width: 800px) {
.ng-over-page .ng-over-story-v3 .ng-over-values {
grid-template-columns: 1fr;
gap: .8rem;
}
.ng-over-page .ng-over-story-v3 .ng-over-value, .ng-over-page .ng-over-story-v3 .ng-over-value:first-child, .ng-over-page .ng-over-story-v3 .ng-over-value:last-child {
min-height: 0;
padding: 1.6rem;
border: 1px solid rgba(46,59,50,.08);
border-radius: 1.5rem 1.5rem .45rem 1.5rem;
}
.ng-over-page .ng-over-story-v3 .ng-over-value + .ng-over-value {
border-top: 1px solid rgba(46,59,50,.08);
}
.ng-over-page .ng-over-story-v3 .ng-over-value-top {
margin-bottom: 1.8rem;
}
.ng-over-page .ng-over-story-v3 .ng-over-value h3 {
margin-top: 0;
}
/* * Never hide important text on touch devices. */
.ng-over-page .ng-over-story-v3 .ng-over-value > p {
max-height: none;
margin-top: .8rem;
opacity: 1;
transform: none;
}
}
/* ACCESSIBILITY */
.ng-over-page .ng-over-story-v3 .ng-over-value:focus-visible {
outline: 3px solid rgba(240,102,83,.36);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.ng-over-page .ng-over-story-v3 .ng-over-value, .ng-over-page .ng-over-story-v3 .ng-over-value::before, .ng-over-page .ng-over-story-v3 .ng-over-value::after, .ng-over-page .ng-over-story-v3 .ng-over-value-icon, .ng-over-page .ng-over-story-v3 .ng-over-value > p {
transition: none !important;
}
}
/* OVER NOORDGROEIT — VALUES V2 — COMPACT POLISH */
.ng-over-page .ng-over-story-v3 .ng-over-value {
min-height: clamp(220px, 21vw, 270px);
padding: clamp(1.25rem, 2vw, 1.75rem);
}
/* less empty space above title */
.ng-over-page .ng-over-story-v3 .ng-over-value-top {
margin-bottom: 1.6rem;
}
.ng-over-page .ng-over-story-v3 .ng-over-value h3 {
margin-top: 1.4rem;
}
/* slightly smaller decorative background numbers */
.ng-over-page .ng-over-story-v3 .ng-over-value::after {
font-size: clamp(5.5rem, 8vw, 7.5rem);
bottom: -.18em;
}
/* compact description */
.ng-over-page .ng-over-story-v3 .ng-over-value > p {
max-width: 280px;
font-size: .84rem;
line-height: 1.55;
}
/* hover reveal needs less room */
@media (hover: hover) and (pointer: fine) {
.ng-over-page .ng-over-story-v3 .ng-over-value:hover > p, .ng-over-page .ng-over-story-v3 .ng-over-value:focus > p {
max-height: 110px;
margin-top: .7rem;
}
}
/* icon a touch smaller too */
.ng-over-page .ng-over-story-v3 .ng-over-value-icon {
width: 2.65rem;
height: 2.65rem;
}
/* OVER NOORDGROEIT MOTION — 02 STORY */
/* BADGE */
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-story-v3-badge {
opacity: 0;
transform: translateY(10px);
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-story-v3-badge {
animation: ngOverStoryTextIn .42s .03s cubic-bezier(.2,.75,.25,1) both;
}
/* HEADLINE */
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-story-v3-heading h2 {
opacity: 0;
transform: translateY(20px);
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-story-v3-heading h2 {
animation: ngOverStoryTitleIn .62s .12s cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ngOverStoryTitleIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* RIGHT-HAND COPY */
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-story-v3-copy > p {
opacity: 0;
transform: translateY(14px);
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-story-v3-copy > p:nth-of-type(1) {
animation: ngOverStoryTextIn .52s .24s cubic-bezier(.2,.75,.25,1) both;
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-story-v3-copy > p:nth-of-type(2) {
animation: ngOverStoryTextIn .52s .34s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngOverStoryTextIn {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* FOUNDING DATE */
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-story-v3-date {
opacity: 0;
transform: translateY(8px);
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-story-v3-date {
animation: ngOverStoryDateIn .48s .47s ease both;
}
@keyframes ngOverStoryDateIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* coral line draws */
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-story-v3-date > span {
transform: scaleX(0);
transform-origin: left center;
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-story-v3-date > span {
animation: ngOverStoryDateLine .4s .56s ease both;
}
@keyframes ngOverStoryDateLine {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* founding dot */
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-story-v3-date > span::before {
transform: translateY(-50%) scale(.25);
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-story-v3-date > span::before {
animation: ngOverStoryDateDot .34s .69s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes ngOverStoryDateDot {
0% {
transform: translateY(-50%) scale(.25);
}
70% {
transform: translateY(-50%) scale(1.35);
}
100% {
transform: translateY(-50%) scale(1);
}
}
/* THREE PRINCIPLES */
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-value {
opacity: 0;
transform: translateY(20px) scale(.985);
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-value:nth-child(1) {
animation: ngOverValueIn .55s .62s cubic-bezier(.18,.82,.25,1) both;
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-value:nth-child(2) {
animation: ngOverValueIn .55s .73s cubic-bezier(.18,.82,.25,1) both;
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-value:nth-child(3) {
animation: ngOverValueIn .55s .84s cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ngOverValueIn {
from {
opacity: 0;
transform: translateY(20px) scale(.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ICONS */
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-value-icon {
opacity: 0;
transform: scale(.65) rotate(-5deg);
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-value:nth-child(1) .ng-over-value-icon {
animation: ngOverValueIconIn .4s .82s cubic-bezier(.2,1.3,.3,1) both;
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-value:nth-child(2) .ng-over-value-icon {
animation: ngOverValueIconIn .4s .93s cubic-bezier(.2,1.3,.3,1) both;
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-value:nth-child(3) .ng-over-value-icon {
animation: ngOverValueIconIn .4s 1.04s cubic-bezier(.2,1.3,.3,1) both;
}
@keyframes ngOverValueIconIn {
0% {
opacity: 0;
transform: scale(.65) rotate(-5deg);
}
70% {
opacity: 1;
transform: scale(1.08) rotate(2deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0);
}
}
/* ENDING DETAIL — SAMEN VEILIG EN GEZOND */
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-values-footer {
opacity: 0;
transform: translateY(8px);
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-values-footer {
animation: ngOverValuesFooterIn .42s 1.08s ease both;
}
@keyframes ngOverValuesFooterIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* the two little lines */
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-values-footer > span {
transform: scaleX(0);
}
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-values-footer > span:first-child {
transform-origin: right center;
}
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-values-footer > span:last-child {
transform-origin: left center;
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-values-footer > span {
animation: ngOverFooterLineIn .45s 1.19s ease both;
}
@keyframes ngOverFooterLineIn {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* coral dot finishes the chapter */
.ng-over-page .ng-over-story-v3.is-story-motion-ready .ng-over-values-footer span:first-child::after {
transform: translateY(-50%) scale(.25);
}
.ng-over-page .ng-over-story-v3.is-story-visible .ng-over-values-footer span:first-child::after {
animation: ngOverFooterDotIn .35s 1.38s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes ngOverFooterDotIn {
0% {
transform: translateY(-50%) scale(.25);
}
70% {
transform: translateY(-50%) scale(1.4);
}
100% {
transform: translateY(-50%) scale(1);
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-over-page .ng-over-story-v3 .ng-over-story-v3-badge, .ng-over-page .ng-over-story-v3 .ng-over-story-v3-heading h2, .ng-over-page .ng-over-story-v3 .ng-over-story-v3-copy > p, .ng-over-page .ng-over-story-v3 .ng-over-story-v3-date, .ng-over-page .ng-over-story-v3 .ng-over-value, .ng-over-page .ng-over-story-v3 .ng-over-value-icon, .ng-over-page .ng-over-story-v3 .ng-over-values-footer {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
/* OVER NOORDGROEIT MOTION — 03 PROCESS */
/* SECTION INTRO */
.ng-over-page .ng-over-process.is-process-motion-ready .ng-over-process-kicker, .ng-over-page .ng-over-process.is-process-motion-ready .ng-over-process-heading h2, .ng-over-page .ng-over-process.is-process-motion-ready .ng-over-process-heading > p {
opacity: 0;
transform: translateY(18px);
}
.ng-over-page .ng-over-process.is-process-visible .ng-over-process-kicker {
animation: ngOverProcessTextIn .4s .02s cubic-bezier(.2,.75,.25,1) both;
}
.ng-over-page .ng-over-process.is-process-visible .ng-over-process-heading h2 {
animation: ngOverProcessTextIn .58s .10s cubic-bezier(.18,.82,.25,1) both;
}
.ng-over-page .ng-over-process.is-process-visible .ng-over-process-heading > p {
animation: ngOverProcessTextIn .5s .22s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngOverProcessTextIn {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* CYCLE CONTAINER */
.ng-over-page .ng-over-process.is-process-motion-ready .ng-over-cycle {
opacity: 0;
}
.ng-over-page .ng-over-process.is-process-visible .ng-over-cycle {
animation: ngOverProcessCycleIn .5s .27s ease both;
}
@keyframes ngOverProcessCycleIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* SPEED UP EXISTING CIRCLE JOURNEY — Original = 4 seconds. — New = 3.2 seconds. */
.ng-over-cycle.is-in-view .ng-over-cycle-route {
animation: ng-over-cycle-draw 3.2s linear forwards !important;
}
/* NODE 02 — 25% */
.ng-over-cycle.is-in-view .ng-over-cycle-node--2 {
animation: ng-over-cycle-node-arrive .38s ease-out .8s forwards !important;
}
.ng-over-cycle.is-in-view .ng-over-cycle-step--2 {
animation: ng-over-cycle-copy-arrive .44s ease-out .84s forwards !important;
}
/* NODE 03 — 50% */
.ng-over-cycle.is-in-view .ng-over-cycle-node--3 {
animation: ng-over-cycle-node-arrive .38s ease-out 1.6s forwards !important;
}
.ng-over-cycle.is-in-view .ng-over-cycle-step--3 {
animation: ng-over-cycle-copy-arrive .44s ease-out 1.64s forwards !important;
}
/* NODE 04 — 75% */
.ng-over-cycle.is-in-view .ng-over-cycle-node--4 {
animation: ng-over-cycle-node-arrive .38s ease-out 2.4s forwards !important;
}
.ng-over-cycle.is-in-view .ng-over-cycle-step--4 {
animation: ng-over-cycle-copy-arrive .44s ease-out 2.44s forwards !important;
}
/* CENTRE */
.ng-over-cycle.is-in-view .ng-over-cycle-center {
animation: ng-over-cycle-center-in .55s ease .52s forwards !important;
}
/* 01 — FIRST STEP — It already starts visible, so just give it one subtle — entrance instead of hiding it. */
.ng-over-page .ng-over-process.is-process-motion-ready .ng-over-cycle-step--1 {
opacity: 0;
transform: translateY(10px);
}
.ng-over-page .ng-over-process.is-process-visible .ng-over-cycle-step--1 {
animation: ngOverProcessFirstIn .45s .38s ease both;
}
@keyframes ngOverProcessFirstIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* BOTTOM SUMMARY — IDEA → SAMENWERKING → GROEI */
.ng-over-page .ng-over-process.is-process-motion-ready .ng-over-process-footer {
opacity: 0;
transform: translateY(10px);
}
.ng-over-page .ng-over-process.is-process-visible .ng-over-process-footer {
animation: ngOverProcessFooterIn .48s 3.35s ease both;
}
@keyframes ngOverProcessFooterIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* arrows get one tiny finishing nudge */
.ng-over-page .ng-over-process.is-process-visible .ng-over-process-footer i:first-of-type {
animation: ngOverProcessArrow .35s 3.58s ease both;
}
.ng-over-page .ng-over-process.is-process-visible .ng-over-process-footer i:last-of-type {
animation: ngOverProcessArrow .35s 3.70s ease both;
}
@keyframes ngOverProcessArrow {
0%, 100% {
transform: translateX(0);
}
55% {
transform: translateX(4px);
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-over-page .ng-over-process .ng-over-process-kicker, .ng-over-page .ng-over-process .ng-over-process-heading h2, .ng-over-page .ng-over-process .ng-over-process-heading > p, .ng-over-page .ng-over-process .ng-over-cycle, .ng-over-page .ng-over-process .ng-over-cycle-step, .ng-over-page .ng-over-process .ng-over-process-footer {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
/* OVER NOORDGROEIT MOTION — 04 IDEA CTA */
/* LEFT COPY */
.ng-over-page .ng-over-idea-cta.is-idea-motion-ready .ng-over-idea-kicker, .ng-over-page .ng-over-idea-cta.is-idea-motion-ready .ng-over-idea-copy h2, .ng-over-page .ng-over-idea-cta.is-idea-motion-ready .ng-over-idea-copy > p:last-child {
opacity: 0;
transform: translateY(17px);
}
.ng-over-page .ng-over-idea-cta.is-idea-visible .ng-over-idea-kicker {
animation: ngIdeaTextIn .38s .03s cubic-bezier(.2,.75,.25,1) both;
}
.ng-over-page .ng-over-idea-cta.is-idea-visible .ng-over-idea-copy h2 {
animation: ngIdeaTextIn .58s .11s cubic-bezier(.18,.82,.25,1) both;
}
.ng-over-page .ng-over-idea-cta.is-idea-visible .ng-over-idea-copy > p:last-child {
animation: ngIdeaTextIn .5s .24s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngIdeaTextIn {
from {
opacity: 0;
transform: translateY(17px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* LITTLE ROUTE */
.ng-over-page .ng-over-idea-cta.is-idea-motion-ready .ng-over-idea-route {
opacity: 0;
}
.ng-over-page .ng-over-idea-cta.is-idea-visible .ng-over-idea-route {
animation: ngIdeaRouteIn .35s .40s ease both;
}
@keyframes ngIdeaRouteIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* CORAL DOT */
.ng-over-page .ng-over-idea-cta.is-idea-motion-ready .ng-over-idea-route-dot {
transform: scale(.25);
}
.ng-over-page .ng-over-idea-cta.is-idea-visible .ng-over-idea-route-dot {
animation: ngIdeaDotPop .36s .46s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes ngIdeaDotPop {
0% {
transform: scale(.25);
}
70% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
/* "EEN EERSTE IDEE IS GENOEG" */
.ng-over-page .ng-over-idea-cta.is-idea-motion-ready .ng-over-idea-route p {
opacity: 0;
transform: translateY(8px);
}
.ng-over-page .ng-over-idea-cta.is-idea-visible .ng-over-idea-route p {
animation: ngIdeaRouteTextIn .42s .53s ease both;
}
@keyframes ngIdeaRouteTextIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ROUTE LINE DRAWS TOWARD CTA */
.ng-over-page .ng-over-idea-cta.is-idea-motion-ready .ng-over-idea-route-line {
transform: scaleX(0);
transform-origin: left center;
}
.ng-over-page .ng-over-idea-cta.is-idea-visible .ng-over-idea-route-line {
animation: ngIdeaLineDraw .48s .67s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngIdeaLineDraw {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* MAIN CORAL CIRCLE */
.ng-over-page .ng-over-idea-cta.is-idea-motion-ready .ng-over-idea-circle {
opacity: 0;
transform: translateY(18px) rotate(-4deg) scale(.82);
}
.ng-over-page .ng-over-idea-cta.is-idea-visible .ng-over-idea-circle {
animation: ngIdeaCircleLand .62s .72s cubic-bezier(.18,1.2,.3,1) both;
}
@keyframes ngIdeaCircleLand {
0% {
opacity: 0;
transform: translateY(18px) rotate(-4deg) scale(.82);
}
70% {
opacity: 1;
transform: translateY(-3px) rotate(1deg) scale(1.035);
}
100% {
opacity: 1;
transform: translateY(0) rotate(0) scale(1);
}
}
/* INNER RING */
.ng-over-page .ng-over-idea-cta.is-idea-motion-ready .ng-over-idea-circle::before {
opacity: 0;
transform: scale(.78);
}
.ng-over-page .ng-over-idea-cta.is-idea-visible .ng-over-idea-circle::before {
animation: ngIdeaRingIn .45s .92s ease both;
}
@keyframes ngIdeaRingIn {
from {
opacity: 0;
transform: scale(.78);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* SMALL WHITE DETAIL DOT */
.ng-over-page .ng-over-idea-cta.is-idea-motion-ready .ng-over-idea-circle::after {
transform: scale(.2);
}
.ng-over-page .ng-over-idea-cta.is-idea-visible .ng-over-idea-circle::after {
animation: ngIdeaWhiteDot .32s 1.04s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes ngIdeaWhiteDot {
from {
transform: scale(.2);
}
to {
transform: scale(1);
}
}
/* ARROW FINISH */
.ng-over-page .ng-over-idea-cta.is-idea-visible .ng-over-idea-circle-arrow {
animation: ngIdeaArrowFinish .4s 1.13s ease both;
}
@keyframes ngIdeaArrowFinish {
0%, 100% {
transform: translate(0,0);
}
55% {
transform: translate(4px,-4px);
}
}
/* QUIET BACKGROUND CIRCLE */
.ng-over-page .ng-over-idea-cta.is-idea-motion-ready::after {
opacity: 0;
}
.ng-over-page .ng-over-idea-cta.is-idea-visible::after {
animation: ngIdeaBackgroundIn .7s .18s ease both;
}
@keyframes ngIdeaBackgroundIn {
from {
opacity: 0;
}
to {
opacity: .75;
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-over-page .ng-over-idea-cta .ng-over-idea-kicker, .ng-over-page .ng-over-idea-cta .ng-over-idea-copy h2, .ng-over-page .ng-over-idea-cta .ng-over-idea-copy > p:last-child, .ng-over-page .ng-over-idea-route, .ng-over-page .ng-over-idea-route-dot, .ng-over-page .ng-over-idea-route p, .ng-over-page .ng-over-idea-route-line, .ng-over-page .ng-over-idea-circle, .ng-over-page .ng-over-idea-circle::before, .ng-over-page .ng-over-idea-circle::after, .ng-over-page .ng-over-idea-circle-arrow {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
/* TEAM & BESTUUR MOTION — 01 HERO — People coming together */
/* KICKER */
.ng-team-page .ng-team-hero-kicker {
animation: ngTeamHeroTextIn .46s .12s cubic-bezier(.2,.75,.25,1) backwards;
}
/* coral dot */
.ng-team-page .ng-team-hero-kicker::before {
animation: ngTeamHeroKickerDot .36s .28s cubic-bezier(.2,1.4,.3,1) backwards;
}
@keyframes ngTeamHeroKickerDot {
from {
opacity: 0;
transform: translateY(-50%) scale(.25);
}
70% {
opacity: 1;
transform: translateY(-50%) scale(1.35);
}
to {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
/* TITLE */
.ng-team-page .ng-team-hero h1 {
animation: ngTeamHeroTitleIn .7s .23s cubic-bezier(.18,.82,.25,1) backwards;
}
@keyframes ngTeamHeroTitleIn {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* NoordgroeiT gets a tiny extra settle */
.ng-team-page .ng-team-hero h1 span {
animation: ngTeamHeroBrandIn .48s .43s cubic-bezier(.2,1.15,.3,1) backwards;
}
@keyframes ngTeamHeroBrandIn {
from {
opacity: 0;
transform: translateY(9px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* INTRO */
.ng-team-page .ng-team-hero-intro {
animation: ngTeamHeroTextIn .55s .47s cubic-bezier(.2,.75,.25,1) backwards;
}
@keyframes ngTeamHeroTextIn {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ORBIT */
.ng-team-page .ng-team-hero-orbit {
animation: ngTeamOrbitIn .8s .34s cubic-bezier(.18,.82,.25,1) backwards;
}
@keyframes ngTeamOrbitIn {
from {
opacity: 0;
transform: scale(.88);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* dashed inner circle arrives slightly afterwards */
.ng-team-page .ng-team-hero-orbit::before {
animation: ngTeamInnerOrbitIn .75s .52s cubic-bezier(.18,.82,.25,1) backwards;
}
@keyframes ngTeamInnerOrbitIn {
from {
opacity: 0;
transform: rotate(-18deg) scale(.78);
}
to {
opacity: 1;
transform: rotate(0) scale(1);
}
}
/* CENTER — SAMEN VOOR NOORD */
.ng-team-page .ng-team-hero-center {
animation: ngTeamCenterIn .58s .56s cubic-bezier(.18,1.2,.3,1) backwards;
}
@keyframes ngTeamCenterIn {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(.7);
}
70% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.045);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
/* PEOPLE — Clockwise: top → right → bottom → left */
/* * Fade the actual node in. * We avoid replacing their positioning transforms. */
.ng-team-page .ng-team-person {
opacity: 0;
}
.ng-team-page .ng-team-person--1 {
animation: ngTeamPersonFade .38s .72s ease forwards;
}
.ng-team-page .ng-team-person--2 {
animation: ngTeamPersonFade .38s .84s ease forwards;
}
.ng-team-page .ng-team-person--3 {
animation: ngTeamPersonFade .38s .96s ease forwards;
}
.ng-team-page .ng-team-person--4 {
animation: ngTeamPersonFade .38s 1.08s ease forwards;
}
@keyframes ngTeamPersonFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* LITTLE PEOPLE ICONS POP */
.ng-team-page .ng-team-person i {
animation: ngTeamPersonIconIn .4s cubic-bezier(.2,1.35,.3,1) backwards;
}
.ng-team-page .ng-team-person--1 i {
animation-delay: .75s;
}
.ng-team-page .ng-team-person--2 i {
animation-delay: .87s;
}
.ng-team-page .ng-team-person--3 i {
animation-delay: .99s;
}
.ng-team-page .ng-team-person--4 i {
animation-delay: 1.11s;
}
@keyframes ngTeamPersonIconIn {
from {
transform: scale(.45);
}
70% {
transform: scale(1.18);
}
to {
transform: scale(1);
}
}
/* ORBIT NOTE — BEWONERS · BESTUUR · VRIJWILLIGERS */
.ng-team-page .ng-team-hero-note {
animation: ngTeamHeroNoteIn .46s 1.16s ease backwards;
}
@keyframes ngTeamHeroNoteIn {
from {
opacity: 0;
transform: translateY(7px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* BOTTOM DETAIL */
.ng-team-page .ng-team-hero-footer {
animation: ngTeamHeroFooterIn .48s 1.22s ease backwards;
}
@keyframes ngTeamHeroFooterIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* line draws in */
.ng-team-page .ng-team-hero-footer > span {
transform-origin: left center;
animation: ngTeamFooterLineIn .45s 1.31s ease backwards;
}
@keyframes ngTeamFooterLineIn {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* coral dot finishes it */
.ng-team-page .ng-team-hero-footer > span::after {
animation: ngTeamFooterDotIn .34s 1.48s cubic-bezier(.2,1.4,.3,1) backwards;
}
@keyframes ngTeamFooterDotIn {
from {
transform: translateY(-50%) scale(.25);
}
70% {
transform: translateY(-50%) scale(1.4);
}
to {
transform: translateY(-50%) scale(1);
}
}
/* QUIET DECORATIVE CIRCLE ON RIGHT */
.ng-team-page .ng-team-hero::before {
animation: ngTeamBackgroundCircleIn .9s .25s ease backwards;
}
@keyframes ngTeamBackgroundCircleIn {
from {
opacity: 0;
transform: translateY(-50%) scale(.78);
}
to {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-team-page .ng-team-hero-kicker, .ng-team-page .ng-team-hero-kicker::before, .ng-team-page .ng-team-hero h1, .ng-team-page .ng-team-hero h1 span, .ng-team-page .ng-team-hero-intro, .ng-team-page .ng-team-hero-orbit, .ng-team-page .ng-team-hero-orbit::before, .ng-team-page .ng-team-hero-center, .ng-team-page .ng-team-person, .ng-team-page .ng-team-person i, .ng-team-page .ng-team-hero-note, .ng-team-page .ng-team-hero-footer, .ng-team-page .ng-team-hero-footer > span, .ng-team-page .ng-team-hero-footer > span::after, .ng-team-page .ng-team-hero::before {
animation: none !important;
opacity: 1 !important;
}
}
/* TEAM & BESTUUR — PEOPLE STRUCTURE V3 */
/* GROUPS */
.ng-team-page .ng-team-people-group {
margin-top: clamp(3.5rem, 6vw, 5.5rem);
}
.ng-team-page .ng-team-people-group:first-of-type {
margin-top: 0;
}
.ng-team-page .ng-team-people-group-heading {
display: grid;
grid-template-columns: minmax(180px, .42fr) minmax(260px, .72fr);
align-items: end;
justify-content: space-between;
gap: clamp(2rem, 6vw, 6rem);
margin-bottom: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(46,59,50,.12);
}
.ng-team-page .ng-team-people-group-heading > div {
display: flex;
align-items: baseline;
gap: .9rem;
}
.ng-team-page .ng-team-people-group-heading span {
color: var(--color-coral);
font-size: .64rem;
font-weight: 850;
letter-spacing: .12em;
}
.ng-team-page .ng-team-people-group-heading > div p {
margin: 0;
color: var(--color-dark);
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
font-weight: 800;
letter-spacing: -.025em;
}
.ng-team-page .ng-team-people-group-heading > p {
justify-self: end;
max-width: 380px;
margin: 0;
color: rgba(46,59,50,.58);
font-size: .82rem;
line-height: 1.6;
}
/* SLIGHTLY MORE COMPACT PROFILES */
.ng-team-page .ng-team-people-v2 .ng-team-profile {
min-height: 250px;
}
.ng-team-page .ng-team-people-v2 .ng-team-profile-copy {
padding: clamp(1.5rem, 2.5vw, 2rem);
}
.ng-team-page .ng-team-people-v2 .ng-team-profile-top {
margin-bottom: 1.1rem;
}
.ng-team-page .ng-team-profile-photo-note {
opacity: .72;
}
/* ADVISORS */
.ng-team-page .ng-team-advisors {
display: grid;
grid-template-columns: minmax(170px, .34fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 5rem);
margin-top: clamp(4rem, 6vw, 5rem);
padding: 1.6rem 0;
border-top: 1px solid rgba(46,59,50,.12);
border-bottom: 1px solid rgba(46,59,50,.12);
}
.ng-team-page .ng-team-advisors-heading > div {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.ng-team-page .ng-team-advisors-heading > div > span {
color: var(--color-coral);
font-size: .64rem;
font-weight: 850;
letter-spacing: .12em;
}
.ng-team-page .ng-team-advisors-heading p {
margin: -.18rem 0 .25rem;
color: var(--color-dark);
font-weight: 800;
}
.ng-team-page .ng-team-advisors-heading small {
color: rgba(46,59,50,.5);
font-size: .7rem;
}
.ng-team-page .ng-team-advisor-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .8rem;
}
.ng-team-page .ng-team-advisor {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
padding: .9rem 1rem;
background: rgba(255,255,255,.55);
border: 1px solid rgba(46,59,50,.08);
border-radius: 1.2rem .35rem 1.2rem 1.2rem;
}
.ng-team-page .ng-team-advisor > span {
width: 42px;
height: 42px;
display: grid;
place-items: center;
flex: 0 0 auto;
color: var(--color-green);
background: var(--color-green-light);
border-radius: 50% 50% 18% 50%;
font-size: .7rem;
font-weight: 850;
}
.ng-team-page .ng-team-advisor strong {
display: block;
color: var(--color-dark);
font-size: .82rem;
line-height: 1.25;
}
.ng-team-page .ng-team-advisor small {
display: block;
margin-top: .2rem;
color: rgba(46,59,50,.46);
font-size: .64rem;
}
/* VOLUNTEER THANK-YOU */
.ng-team-page .ng-team-volunteer-thanks {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) minmax(180px, .36fr);
align-items: center;
gap: clamp(1.5rem, 4vw, 3.5rem);
margin-top: clamp(4rem, 7vw, 6rem);
padding: clamp(1.7rem, 3vw, 2.4rem);
overflow: hidden;
background: var(--color-green-light);
border-radius: 2.4rem .55rem 2.4rem 2.4rem;
}
.ng-team-page .ng-team-volunteer-thanks::after {
content: "";
position: absolute;
right: -70px;
bottom: -95px;
width: 210px;
height: 210px;
border: 38px solid rgba(47,72,55,.045);
border-radius: 50%;
pointer-events: none;
}
.ng-team-page .ng-team-volunteer-thanks-mark {
position: relative;
z-index: 2;
width: clamp(74px, 8vw, 96px);
aspect-ratio: 1;
display: grid;
place-items: center;
color: var(--color-white);
background: var(--color-coral);
border-radius: 50%;
transform: rotate(-4deg);
}
.ng-team-page .ng-team-volunteer-thanks-mark span {
font-size: 1.45rem;
}
.ng-team-page .ng-team-volunteer-thanks-copy {
position: relative;
z-index: 2;
max-width: 680px;
}
.ng-team-page .ng-team-volunteer-thanks-kicker {
margin: 0 0 .65rem;
color: var(--color-coral);
font-size: .66rem;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-team-page .ng-team-volunteer-thanks h3 {
margin: 0 0 .7rem;
color: var(--color-dark);
font-size: clamp(1.35rem, 2vw, 1.75rem);
font-weight: 780;
line-height: 1.05;
letter-spacing: -.035em;
}
.ng-team-page .ng-team-volunteer-thanks-copy > p:last-child {
max-width: 620px;
margin: 0;
color: rgba(46,59,50,.66);
font-size: .86rem;
line-height: 1.62;
}
.ng-team-page .ng-team-volunteer-thanks-note {
position: relative;
z-index: 2;
padding-left: 1.25rem;
border-left: 2px solid var(--color-coral);
}
.ng-team-page .ng-team-volunteer-thanks-note span {
display: block;
margin-bottom: .25rem;
color: rgba(46,59,50,.48);
font-size: .64rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-team-page .ng-team-volunteer-thanks-note strong {
display: block;
max-width: 180px;
color: var(--color-dark);
font-size: 1rem;
line-height: 1.25;
}
/* RESPONSIVE */
@media (max-width: 850px) {
.ng-team-page .ng-team-people-group-heading {
grid-template-columns: 1fr;
gap: .6rem;
}
.ng-team-page .ng-team-people-group-heading > p {
justify-self: start;
}
.ng-team-page .ng-team-advisors {
grid-template-columns: 1fr;
}
.ng-team-page .ng-team-advisor-list {
grid-template-columns: 1fr;
}
.ng-team-page .ng-team-volunteer-thanks {
grid-template-columns: auto minmax(0, 1fr);
}
.ng-team-page .ng-team-volunteer-thanks-note {
grid-column: 2;
}
}
@media (max-width: 560px) {
.ng-team-page .ng-team-volunteer-thanks {
grid-template-columns: 1fr;
border-radius: 1.6rem .4rem 1.6rem 1.6rem;
}
.ng-team-page .ng-team-volunteer-thanks-note {
grid-column: auto;
}
}
/* TEAM PEOPLE — FINAL SPACING POLISH */
/* Slightly tighter gap between groups */
.ng-team-page .ng-team-people-group {
margin-top: clamp(3rem, 5vw, 4.5rem);
}
/* Make FOTO VOLGT quieter */
.ng-team-page .ng-team-profile-photo-note {
opacity: .48;
font-size: .54rem;
letter-spacing: .1em;
}
/* Give the volunteer thank-you a little more importance */
.ng-team-page .ng-team-volunteer-thanks {
padding: clamp(2rem, 3.5vw, 2.75rem);
}
.ng-team-page .ng-team-volunteer-thanks-copy > p:last-child {
line-height: 1.68;
}
/* TEAM & BESTUUR MOTION — 02 PEOPLE */
/* INTRO */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-people-v2-kicker, .ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-people-v2-heading h2, .ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-people-v2-heading > p {
opacity: 0;
transform: translateY(18px);
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-v2-kicker {
animation: ngTeamPeopleTextIn .4s .02s cubic-bezier(.2,.75,.25,1) both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-v2-heading h2 {
animation: ngTeamPeopleTextIn .58s .10s cubic-bezier(.18,.82,.25,1) both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-v2-heading > p {
animation: ngTeamPeopleTextIn .5s .21s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngTeamPeopleTextIn {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* GROUP HEADERS */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-people-group-heading {
opacity: 0;
transform: translateY(10px);
}
/* Bestuur */
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(1) .ng-team-people-group-heading {
animation: ngTeamGroupHeadingIn .44s .36s ease both;
}
/* Kernteam */
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(2) .ng-team-people-group-heading {
animation: ngTeamGroupHeadingIn .44s .87s ease both;
}
@keyframes ngTeamGroupHeadingIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* GROUP DIVIDERS DRAW IN */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-people-group-heading {
border-top-color: transparent;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(1) .ng-team-people-group-heading {
animation: ngTeamGroupHeadingIn .44s .36s ease both, ngTeamGroupBorderIn .55s .40s ease both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(2) .ng-team-people-group-heading {
animation: ngTeamGroupHeadingIn .44s .87s ease both, ngTeamGroupBorderIn .55s .91s ease both;
}
@keyframes ngTeamGroupBorderIn {
from {
border-top-color: transparent;
}
to {
border-top-color: rgba(46,59,50,.12);
}
}
/* PROFILE CARDS */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-profile {
opacity: 0;
transform: translateY(18px) scale(.985);
}
/* BESTUUR */
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(1) .ng-team-profile:nth-child(1) {
animation: ngTeamProfileIn .55s .49s cubic-bezier(.18,.82,.25,1) both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(1) .ng-team-profile:nth-child(2) {
animation: ngTeamProfileIn .55s .59s cubic-bezier(.18,.82,.25,1) both;
}
/* KERNTEAM */
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(2) .ng-team-profile:nth-child(1) {
animation: ngTeamProfileIn .52s 1s cubic-bezier(.18,.82,.25,1) both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(2) .ng-team-profile:nth-child(2) {
animation: ngTeamProfileIn .52s 1.08s cubic-bezier(.18,.82,.25,1) both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(2) .ng-team-profile:nth-child(3) {
animation: ngTeamProfileIn .52s 1.16s cubic-bezier(.18,.82,.25,1) both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(2) .ng-team-profile:nth-child(4) {
animation: ngTeamProfileIn .52s 1.24s cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ngTeamProfileIn {
from {
opacity: 0;
transform: translateY(18px) scale(.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* PORTRAIT PLACEHOLDERS */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-profile-initials {
opacity: 0;
transform: scale(.72) rotate(-4deg);
}
/* Bestuur */
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(1) .ng-team-profile:nth-child(1) .ng-team-profile-initials {
animation: ngTeamInitialsIn .4s .67s cubic-bezier(.2,1.3,.3,1) both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(1) .ng-team-profile:nth-child(2) .ng-team-profile-initials {
animation: ngTeamInitialsIn .4s .77s cubic-bezier(.2,1.3,.3,1) both;
}
/* Kernteam */
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(2) .ng-team-profile:nth-child(1) .ng-team-profile-initials {
animation-delay: 1.17s;
animation-name: ngTeamInitialsIn;
animation-duration: .4s;
animation-fill-mode: both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(2) .ng-team-profile:nth-child(2) .ng-team-profile-initials {
animation: ngTeamInitialsIn .4s 1.25s cubic-bezier(.2,1.3,.3,1) both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(2) .ng-team-profile:nth-child(3) .ng-team-profile-initials {
animation: ngTeamInitialsIn .4s 1.33s cubic-bezier(.2,1.3,.3,1) both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-group:nth-of-type(2) .ng-team-profile:nth-child(4) .ng-team-profile-initials {
animation: ngTeamInitialsIn .4s 1.41s cubic-bezier(.2,1.3,.3,1) both;
}
@keyframes ngTeamInitialsIn {
0% {
opacity: 0;
transform: scale(.72) rotate(-4deg);
}
70% {
opacity: 1;
transform: scale(1.07) rotate(1deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0);
}
}
/* ADVISORS */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-advisors {
opacity: 0;
transform: translateY(13px);
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-advisors {
animation: ngTeamAdvisorsIn .52s 1.42s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngTeamAdvisorsIn {
from {
opacity: 0;
transform: translateY(13px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* individual advisors */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-advisor {
opacity: 0;
transform: translateX(8px);
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-advisor:nth-child(1) {
animation: ngTeamAdvisorIn .38s 1.57s ease both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-advisor:nth-child(2) {
animation: ngTeamAdvisorIn .38s 1.65s ease both;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-advisor:nth-child(3) {
animation: ngTeamAdvisorIn .38s 1.73s ease both;
}
@keyframes ngTeamAdvisorIn {
from {
opacity: 0;
transform: translateX(8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* VOLUNTEER THANK-YOU */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-volunteer-thanks {
opacity: 0;
transform: translateY(18px) scale(.99);
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-volunteer-thanks {
animation: ngTeamVolunteerBlockIn .62s 1.83s cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ngTeamVolunteerBlockIn {
from {
opacity: 0;
transform: translateY(18px) scale(.99);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* coral heart seal */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-volunteer-thanks-mark {
opacity: 0;
transform: rotate(-10deg) scale(.7);
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-volunteer-thanks-mark {
animation: ngTeamVolunteerHeartIn .5s 1.98s cubic-bezier(.18,1.3,.3,1) both;
}
@keyframes ngTeamVolunteerHeartIn {
0% {
opacity: 0;
transform: rotate(-10deg) scale(.7);
}
70% {
opacity: 1;
transform: rotate(-2deg) scale(1.07);
}
100% {
opacity: 1;
transform: rotate(-4deg) scale(1);
}
}
/* heart itself */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-volunteer-thanks-mark span {
transform: scale(.45);
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-volunteer-thanks-mark span {
animation: ngTeamVolunteerHeartPop .34s 2.14s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes ngTeamVolunteerHeartPop {
from {
transform: scale(.45);
}
70% {
transform: scale(1.35);
}
to {
transform: scale(1);
}
}
/* FINAL NOTE */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-people-v2-footer {
opacity: 0;
transform: translateY(8px);
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-v2-footer {
animation: ngTeamPeopleFooterIn .4s 2.15s ease both;
}
@keyframes ngTeamPeopleFooterIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* little coral closing dot */
.ng-team-page .ng-team-people-v2.is-team-people-motion-ready .ng-team-people-v2-footer > span {
transform: scale(.25);
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-v2-footer > span {
animation: ngTeamPeopleFooterDot .32s 2.26s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes ngTeamPeopleFooterDot {
from {
transform: scale(.25);
}
to {
transform: scale(1);
}
}
/* MOBILE — Faster — don't make users wait through a huge vertical list. */
@media (max-width: 700px) {
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-profile {
animation-delay: .42s !important;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-advisors {
animation-delay: .72s;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-volunteer-thanks {
animation-delay: .92s;
}
.ng-team-page .ng-team-people-v2.is-team-people-visible .ng-team-people-v2-footer {
animation-delay: 1.12s;
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-team-page .ng-team-people-v2 .ng-team-people-v2-kicker, .ng-team-page .ng-team-people-v2 .ng-team-people-v2-heading h2, .ng-team-page .ng-team-people-v2 .ng-team-people-v2-heading > p, .ng-team-page .ng-team-people-v2 .ng-team-people-group-heading, .ng-team-page .ng-team-people-v2 .ng-team-profile, .ng-team-page .ng-team-people-v2 .ng-team-profile-initials, .ng-team-page .ng-team-people-v2 .ng-team-advisors, .ng-team-page .ng-team-people-v2 .ng-team-advisor, .ng-team-page .ng-team-people-v2 .ng-team-volunteer-thanks, .ng-team-page .ng-team-people-v2 .ng-team-volunteer-thanks-mark, .ng-team-page .ng-team-people-v2 .ng-team-volunteer-thanks-mark span, .ng-team-page .ng-team-people-v2 .ng-team-people-v2-footer {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
/* TEAM & BESTUUR MOTION — 03 COLLABORATION */
/* Less giant empty-green-section energy */
.ng-team-page .ng-team-collab {
padding: clamp(4rem, 5.5vw, 5.25rem) 0;
}
.ng-team-page .ng-team-collab-heading {
margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
/* HEADING ENTRANCE */
.ng-team-page .ng-team-collab.is-collab-motion-ready .ng-team-collab-kicker, .ng-team-page .ng-team-collab.is-collab-motion-ready .ng-team-collab-heading h2, .ng-team-page .ng-team-collab.is-collab-motion-ready .ng-team-collab-heading > p {
opacity: 0;
transform: translateY(16px);
}
.ng-team-page .ng-team-collab.is-collab-visible .ng-team-collab-kicker {
animation: ngTeamCollabIntro .38s ease both;
}
.ng-team-page .ng-team-collab.is-collab-visible .ng-team-collab-heading h2 {
animation: ngTeamCollabIntro .55s .08s cubic-bezier(.18,.82,.25,1) both;
}
.ng-team-page .ng-team-collab.is-collab-visible .ng-team-collab-heading > p {
animation: ngTeamCollabIntro .48s .18s ease both;
}
@keyframes ngTeamCollabIntro {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* TRACK */
.ng-team-page .ng-team-collab.is-collab-motion-ready .ng-team-collab-track {
opacity: 0;
}
.ng-team-page .ng-team-collab.is-collab-visible .ng-team-collab-track {
animation: ngTeamCollabTrackIn .4s .22s ease both;
}
@keyframes ngTeamCollabTrackIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* CLOSING NOTE */
.ng-team-page .ng-team-collab.is-collab-motion-ready .ng-team-collab-end {
opacity: 0;
transform: translateY(8px);
}
.ng-team-page .ng-team-collab.is-collab-visible .ng-team-collab-end {
animation: ngTeamCollabEndIn .42s 2.25s ease both;
}
@keyframes ngTeamCollabEndIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-team-page .ng-team-collab * {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* TEAM & BESTUUR MOTION — 04 CTA */
/* COPY */
.ng-team-join-v2.is-team-join-ready .ng-team-join-v2-copy {
opacity: 0;
transform: translateY(18px);
}
.ng-team-join-v2.is-team-join-visible .ng-team-join-v2-copy {
opacity: 1;
transform: translateY(0);
transition: opacity .55s ease, transform .6s cubic-bezier(.18,.82,.25,1);
}
/* THREE LITTLE POSSIBILITIES */
.ng-team-join-v2.is-team-join-ready .ng-team-join-v2-option {
opacity: 0;
transform: translateY(10px) scale(.92);
}
.ng-team-join-v2.is-team-join-visible .ng-team-join-v2-option {
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity .38s ease, transform .45s cubic-bezier(.2,1.2,.3,1);
}
.ng-team-join-v2.is-team-join-visible .ng-team-join-v2-option--1 {
transition-delay: .28s;
}
.ng-team-join-v2.is-team-join-visible .ng-team-join-v2-option--2 {
transition-delay: .38s;
}
.ng-team-join-v2.is-team-join-visible .ng-team-join-v2-option--3 {
transition-delay: .48s;
}
/* CONNECTING LINES */
.ng-team-join-v2.is-team-join-ready .ng-team-join-v2-lines {
opacity: 0;
}
.ng-team-join-v2.is-team-join-visible .ng-team-join-v2-lines {
opacity: 1;
transition: opacity .55s .52s ease;
}
/* CORAL CTA LANDS LAST */
.ng-team-join-v2.is-team-join-ready .ng-team-join-v2-center {
opacity: 0;
transform: translate(-50%, -50%) scale(.76) rotate(-5deg);
}
.ng-team-join-v2.is-team-join-visible .ng-team-join-v2-center {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0);
transition: opacity .45s .58s ease, transform .58s .58s cubic-bezier(.18,1.25,.3,1);
}
/* LITTLE ARROW NUDGE */
.ng-team-join-v2.is-team-join-visible .ng-team-join-v2-center i {
animation: ngTeamJoinArrow .4s .95s ease both;
}
@keyframes ngTeamJoinArrow {
0%, 100% {
transform: translate(0,0);
}
55% {
transform: translate(3px,-3px);
}
}
/* BOTTOM NOTE */
.ng-team-join-v2.is-team-join-ready .ng-team-join-v2-bottom {
opacity: 0;
transform: translateY(8px);
}
.ng-team-join-v2.is-team-join-visible .ng-team-join-v2-bottom {
opacity: 1;
transform: translateY(0);
transition: opacity .4s 1s ease, transform .4s 1s ease;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-team-join-v2 * {
animation: none !important;
transition: none !important;
}
}
/* FINANCIËN — HERO CONTENT POLISH */
/* No arbitrary green words */
/* FINANCE MOTION — 01 HERO — Quiet dossier entrance */
/* * IMPORTANT: * We NEVER animate transform on: * * .ng-finance-paper--back * .ng-finance-paper--middle * .ng-finance-dossier-front * .ng-finance-dossier-note * * Their transforms are part of the actual design. */
/* PREPARE — Only active when JavaScript confirms animation is available. */
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-kicker, .ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2 h1, .ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-intro, .ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-button, .ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-dossier, .ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-route {
opacity: 0;
}
/* Text may rise safely */
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-kicker, .ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2 h1, .ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-intro {
transform: translateY(10px);
}
/* * The dossier itself has no positioning transform, * so the WHOLE composition can move together safely. */
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-dossier {
transform: translateY(12px) scale(.99);
}
/* Bottom route */
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-route {
transform: translateY(7px);
}
/* TRANSITIONS */
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-kicker {
transition: opacity 480ms cubic-bezier(.2,.75,.25,1), transform 480ms cubic-bezier(.2,.75,.25,1);
}
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2 h1 {
transition: opacity 600ms cubic-bezier(.2,.75,.25,1), transform 600ms cubic-bezier(.2,.75,.25,1);
}
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-intro {
transition: opacity 540ms cubic-bezier(.2,.75,.25,1), transform 540ms cubic-bezier(.2,.75,.25,1);
}
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-button {
transition: opacity 480ms cubic-bezier(.2,.75,.25,1);
}
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-dossier {
transition: opacity 720ms cubic-bezier(.2,.75,.25,1), transform 720ms cubic-bezier(.2,.75,.25,1);
}
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-route {
transition: opacity 520ms cubic-bezier(.2,.75,.25,1), transform 520ms cubic-bezier(.2,.75,.25,1);
}
/* PLAY */
/* Kicker first */
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-hero-v2-kicker {
opacity: 1;
transform: translateY(0);
}
/* Big statement */
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-hero-v2 h1 {
opacity: 1;
transform: translateY(0);
transition-delay: 90ms;
}
/* Supporting copy */
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-hero-v2-intro {
opacity: 1;
transform: translateY(0);
transition-delay: 190ms;
}
/* CTA */
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-hero-v2-button {
opacity: 1;
transition-delay: 300ms;
}
/* Whole dossier settles into place */
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-dossier {
opacity: 1;
transform: translateY(0) scale(1);
transition-delay: 160ms;
}
/* Route closes the entrance */
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-hero-v2-route {
opacity: 1;
transform: translateY(0);
transition-delay: 480ms;
}
/* DOSSIER MICRO DETAILS — Animate INSIDE the paper instead of moving the papers. */
/* Back-sheet document lines */
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-paper-line {
opacity: 0;
transform: scaleX(.25);
transform-origin: left center;
transition: opacity 420ms ease, transform 550ms cubic-bezier(.2,.75,.25,1);
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-paper-line {
opacity: 1;
transform: scaleX(1);
transition-delay: 470ms;
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-paper-line:nth-of-type(2) {
transition-delay: 530ms;
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-paper-line:nth-of-type(3) {
transition-delay: 590ms;
}
/* Checks on second paper */
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-paper-check {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-paper-check {
opacity: 1;
transition-delay: 520ms;
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-paper-check + .ng-finance-paper-check {
transition-delay: 610ms;
}
/* Coral bookmark draws itself */
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-dossier-front::before {
transform: scaleX(0);
transform-origin: left center;
transition: transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-dossier-front::before {
transform: scaleX(1);
transition-delay: 530ms;
}
/* ROUTE — Organisatie → Middelen → Documenten */
.ng-finance-hero-v2.is-finance-hero-motion-ready .ng-finance-hero-v2-route > * {
opacity: 0;
transition: opacity 300ms ease;
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-hero-v2-route > * {
opacity: 1;
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-hero-v2-route > :nth-child(1) {
transition-delay: 570ms;
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-hero-v2-route > :nth-child(2) {
transition-delay: 640ms;
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-hero-v2-route > :nth-child(3) {
transition-delay: 710ms;
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-hero-v2-route > :nth-child(4) {
transition-delay: 780ms;
}
.ng-finance-hero-v2.is-finance-hero-visible .ng-finance-hero-v2-route > :nth-child(5) {
transition-delay: 850ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-finance-hero-v2, .ng-finance-hero-v2 *, .ng-finance-hero-v2::before, .ng-finance-hero-v2::after {
animation: none !important;
}
}
/* FINANCE MOTION — 02 JOURNEY — Middelen → inzet → resultaat */
/* PREPARE — No positioning transforms on the paper cards themselves. */
.ng-finance-journey.is-finance-journey-motion-ready .ng-finance-journey-heading, .ng-finance-journey.is-finance-journey-motion-ready .ng-finance-papertrail-item, .ng-finance-journey.is-finance-journey-motion-ready .ng-finance-papertrail-thread, .ng-finance-journey.is-finance-journey-motion-ready .ng-finance-papertrail-note {
opacity: 0;
}
/* Heading can safely have a tiny rise */
.ng-finance-journey.is-finance-journey-motion-ready .ng-finance-journey-heading {
transform: translateY(10px);
transition: opacity 560ms cubic-bezier(.2,.75,.25,1), transform 560ms cubic-bezier(.2,.75,.25,1);
}
/* * Papers: * opacity ONLY. * * Their rotate / margin / hover transforms belong * to the existing design and stay completely untouched. */
.ng-finance-journey.is-finance-journey-motion-ready .ng-finance-papertrail-item {
transition: opacity 520ms ease;
}
/* Thread */
.ng-finance-journey.is-finance-journey-motion-ready .ng-finance-papertrail-thread {
transition: opacity 500ms ease;
}
/* End note */
.ng-finance-journey.is-finance-journey-motion-ready .ng-finance-papertrail-note {
transform: translateY(7px);
transition: opacity 450ms ease, transform 450ms cubic-bezier(.2,.75,.25,1);
}
/* INTERNAL DETAILS */
/* * Icons are safe to animate because their transform * isn't responsible for the card layout. */
.ng-finance-journey.is-finance-journey-motion-ready .ng-finance-papertrail-icon {
opacity: 0;
transform: scale(.92);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
}
/* Status labels */
.ng-finance-journey.is-finance-journey-motion-ready .ng-finance-papertrail-status {
opacity: 0;
transition: opacity 350ms ease;
}
/* Result stamp */
.ng-finance-journey.is-finance-journey-motion-ready .ng-finance-papertrail-stamp {
opacity: 0;
transform: scale(.94);
transition: opacity 380ms ease, transform 480ms cubic-bezier(.18,.8,.2,1);
}
/* PLAY — HEADING */
.ng-finance-journey.is-finance-journey-visible .ng-finance-journey-heading {
opacity: 1;
transform: translateY(0);
}
/* PAPER 01 — MIDDELEN */
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-item--1 {
opacity: 1;
transition-delay: 180ms;
}
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-item--1 .ng-finance-papertrail-icon {
opacity: 1;
transform: scale(1);
transition-delay: 350ms;
}
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-item--1 .ng-finance-papertrail-status {
opacity: 1;
transition-delay: 420ms;
}
/* PAPER 02 — INZET */
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-item--2 {
opacity: 1;
transition-delay: 540ms;
}
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-item--2 .ng-finance-papertrail-icon {
opacity: 1;
transform: scale(1);
transition-delay: 700ms;
}
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-item--2 .ng-finance-papertrail-status {
opacity: 1;
transition-delay: 770ms;
}
/* PAPER 03 — RESULTAAT */
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-item--3 {
opacity: 1;
transition-delay: 900ms;
}
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-item--3 .ng-finance-papertrail-icon {
opacity: 1;
transform: scale(1);
transition-delay: 1050ms;
}
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-item--3 .ng-finance-papertrail-status {
opacity: 1;
transition-delay: 1120ms;
}
/* Little payoff at the end */
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-stamp {
opacity: 1;
transform: scale(1);
transition-delay: 1250ms;
}
/* CORAL THREAD */
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-thread {
opacity: 1;
transition-delay: 390ms;
}
/* * Give the dotted coral trail a subtle feeling * of movement while the story progresses. */
.ng-finance-journey.is-finance-journey-motion-ready .ng-finance-papertrail-thread path {
stroke-dashoffset: 36;
}
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-thread path {
animation: ngFinanceJourneyThread 1.45s linear .38s forwards;
}
@keyframes ngFinanceJourneyThread {
from {
stroke-dashoffset: 36;
}
to {
stroke-dashoffset: 0;
}
}
/* CLOSING NOTE */
.ng-finance-journey.is-finance-journey-visible .ng-finance-papertrail-note {
opacity: 1;
transform: translateY(0);
transition-delay: 1430ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-finance-papertrail-thread path {
animation: none !important;
}
}
/* FINANCE ARCHIVE — PENDING DOCUMENTS */
/* Pending rows are information, not links */
.ng-archive-document--pending {
grid-template-columns: 55px minmax(0, 1fr) auto;
cursor: default;
}
/* * Kill the old link-hover movement. * Nothing should suggest that this can already be opened. */
.ng-archive-document--pending:hover {
padding-left: .2rem;
}
/* Status */
.ng-archive-document__status {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .48rem .7rem;
color: var(--color-green);
background: rgba(220, 234, 215, .6);
border: 1px solid rgba(62, 107, 71, .13);
border-radius: 999px;
font-size: .56rem;
font-weight: 850;
line-height: 1.2;
white-space: nowrap;
}
/* Tiny status dot */
.ng-archive-document__status::before {
content: "";
width: 5px;
height: 5px;
flex: 0 0 auto;
background: var(--color-coral);
border-radius: 50%;
}
/* * Pending PDF icons are slightly softer. * They're representations of future files, * not active download controls. */
.ng-archive-document--pending .ng-archive-document__pdf {
opacity: .72;
}
/* MOBILE */
@media (max-width: 620px) {
.ng-archive-document--pending {
grid-template-columns: 40px minmax(0, 1fr);
}
.ng-archive-document__status {
grid-column: 2;
justify-self: start;
margin-top: -.15rem;
padding: .38rem .58rem;
white-space: normal;
}
}
/* FINANCE MOTION — 03 ARCHIVE */
.ng-finance-archive.is-archive-motion-ready .ng-finance-archive-copy, .ng-finance-archive.is-archive-motion-ready .ng-archive-folder {
opacity: 0;
}
/* Copy */
.ng-finance-archive.is-archive-motion-ready .ng-finance-archive-copy {
transform: translateY(10px);
transition: opacity 560ms ease, transform 560ms cubic-bezier(.2,.75,.25,1);
}
/* * Whole folder only. * Internal folder positioning remains untouched. */
.ng-finance-archive.is-archive-motion-ready .ng-archive-folder {
transform: translateY(13px);
transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.75,.25,1);
}
/* Relationship note */
/* PLAY */
.ng-finance-archive.is-archive-visible .ng-finance-archive-copy {
opacity: 1;
transform: translateY(0);
}
.ng-finance-archive.is-archive-visible .ng-archive-folder {
opacity: 1;
transform: translateY(0);
transition-delay: 170ms;
}
/* Pending badges appear last */
.ng-finance-archive.is-archive-motion-ready .ng-archive-document__status {
opacity: 0;
transition: opacity 350ms ease;
}
.ng-finance-archive.is-archive-visible .ng-archive-document__status {
opacity: 1;
transition-delay: 600ms;
}
/* FINANCE MOTION — 04 RESPONSIBILITY — Details after the book opens */
/* * Book opening remains the MAIN animation. * * These only reveal the content shortly afterwards. */
.ng-finance-ledger.is-animatable .ng-finance-ledger-person, .ng-finance-ledger.is-animatable .ng-finance-ledger-text, .ng-finance-ledger.is-animatable .ng-finance-ledger-sign, .ng-finance-ledger.is-animatable .ng-finance-ledger-check, .ng-finance-ledger.is-animatable .ng-finance-ledger-stamp {
opacity: 0;
}
/* LEFT PAGE — FRED */
.ng-finance-ledger.is-in-view .ng-finance-ledger-person {
opacity: 1;
transition: opacity 420ms ease 360ms;
}
.ng-finance-ledger.is-in-view .ng-finance-ledger-text {
opacity: 1;
transition: opacity 440ms ease 470ms;
}
.ng-finance-ledger.is-in-view .ng-finance-ledger-sign {
opacity: 1;
transition: opacity 400ms ease 590ms;
}
/* RIGHT PAGE */
.ng-finance-ledger.is-in-view .ng-finance-ledger-check:nth-of-type(1) {
opacity: 1;
transition: opacity 420ms ease 430ms;
}
.ng-finance-ledger.is-in-view .ng-finance-ledger-check:nth-of-type(2) {
opacity: 1;
transition: opacity 420ms ease 570ms;
}
/* CHECK MARKS */
.ng-finance-ledger.is-animatable .ng-finance-ledger-check-top i {
transform: scale(.82);
transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}
.ng-finance-ledger.is-in-view .ng-finance-ledger-check:nth-of-type(1) .ng-finance-ledger-check-top i {
transform: scale(1);
transition-delay: 620ms;
}
.ng-finance-ledger.is-in-view .ng-finance-ledger-check:nth-of-type(2) .ng-finance-ledger-check-top i {
transform: scale(1);
transition-delay: 760ms;
}
/* FINAL STAMP */
/* * OPACITY ONLY. * * The stamp already has rotate(-3deg) as part of * its design, so we deliberately don't animate transform. */
.ng-finance-ledger.is-in-view .ng-finance-ledger-stamp {
opacity: 1;
transition: opacity 420ms ease 880ms;
}
/* FINANCE MOTION — 05 QUESTION CTA — Final page flourish */
/* PREPARE */
.ng-finance-question.is-question-motion-ready .ng-finance-question-copy, .ng-finance-question.is-question-motion-ready .ng-finance-question-visual {
opacity: 0;
}
/* Copy can safely move */
.ng-finance-question.is-question-motion-ready .ng-finance-question-copy {
transform: translateY(10px);
transition: opacity 560ms ease, transform 560ms cubic-bezier(.2,.75,.25,1);
}
/* * Animate the VISUAL WRAPPER. * * Not .ng-finance-question-card itself, * because the card already owns rotate(1deg). */
.ng-finance-question.is-question-motion-ready .ng-finance-question-visual {
transform: translateY(13px);
transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.75,.25,1);
}
/* CARD DETAILS */
/* Coral tab draws itself */
.ng-finance-question.is-question-motion-ready .ng-finance-question-card::before {
transform: scaleX(0);
transform-origin: left center;
transition: transform 480ms cubic-bezier(.2,.75,.25,1);
}
/* Question mark */
.ng-finance-question.is-question-motion-ready .ng-finance-question-mark {
opacity: 0;
transition: opacity 380ms ease, transform 220ms ease;
}
/* Fake writing lines */
.ng-finance-question.is-question-motion-ready .ng-finance-question-lines span {
transform: scaleX(0);
transform-origin: left center;
transition: transform 520ms cubic-bezier(.2,.75,.25,1);
}
/* Topic pills */
.ng-finance-question.is-question-motion-ready .ng-finance-question-topics span {
opacity: 0;
transition: opacity 330ms ease;
}
/* Button */
.ng-finance-question.is-question-motion-ready .ng-finance-question-button {
opacity: 0;
transition: opacity 420ms ease, transform 180ms ease;
}
/* PLAY */
.ng-finance-question.is-question-visible .ng-finance-question-copy {
opacity: 1;
transform: translateY(0);
}
.ng-finance-question.is-question-visible .ng-finance-question-visual {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
/* little coral tab */
.ng-finance-question.is-question-visible .ng-finance-question-card::before {
transform: scaleX(1);
transition-delay: 390ms;
}
/* question mark */
.ng-finance-question.is-question-visible .ng-finance-question-mark {
opacity: 1;
transition-delay: 430ms;
}
/* writing lines */
.ng-finance-question.is-question-visible .ng-finance-question-lines span:nth-child(1) {
transform: scaleX(1);
transition-delay: 480ms;
}
.ng-finance-question.is-question-visible .ng-finance-question-lines span:nth-child(2) {
transform: scaleX(1);
transition-delay: 570ms;
}
.ng-finance-question.is-question-visible .ng-finance-question-lines span:nth-child(3) {
transform: scaleX(1);
transition-delay: 660ms;
}
/* topic chips */
.ng-finance-question.is-question-visible .ng-finance-question-topics span:nth-child(1) {
opacity: 1;
transition-delay: 740ms;
}
.ng-finance-question.is-question-visible .ng-finance-question-topics span:nth-child(2) {
opacity: 1;
transition-delay: 810ms;
}
.ng-finance-question.is-question-visible .ng-finance-question-topics span:nth-child(3) {
opacity: 1;
transition-delay: 880ms;
}
/* CTA = final beat */
.ng-finance-question.is-question-visible .ng-finance-question-button {
opacity: 1;
transition-delay: 960ms;
}
/* OPTIONAL LITTLE NOTE */
/* SHARED INNER HERO MOTION — Used across all main internal pages */
/* PHOTO */
.ng-inner-hero .ng-inner-hero__image {
animation: ngInnerHeroPhotoIn 1.25s cubic-bezier(.18,.82,.25,1) backwards;
}
@keyframes ngInnerHeroPhotoIn {
from {
opacity: .55;
transform: scale(1.06);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* OVERLAY */
.ng-inner-hero .ng-inner-hero__overlay {
animation: ngInnerHeroOverlayIn .9s .08s ease backwards;
}
@keyframes ngInnerHeroOverlayIn {
from {
opacity: .25;
}
to {
opacity: 1;
}
}
/* CORAL SIGNATURE */
.ng-inner-hero .ng-inner-hero__detail {
animation: ngInnerHeroDetailIn .4s .18s ease backwards;
}
@keyframes ngInnerHeroDetailIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* coral dot */
.ng-inner-hero .ng-inner-hero__detail span {
animation: ngInnerHeroDotIn .4s .23s cubic-bezier(.2,1.4,.3,1) backwards;
}
@keyframes ngInnerHeroDotIn {
0% {
opacity: 0;
transform: scale(.25);
}
70% {
opacity: 1;
transform: scale(1.35);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* little coral line */
.ng-inner-hero .ng-inner-hero__detail i {
transform-origin: left center;
animation: ngInnerHeroLineIn .5s .32s cubic-bezier(.2,.75,.25,1) backwards;
}
@keyframes ngInnerHeroLineIn {
from {
opacity: 0;
transform: scaleX(0);
}
to {
opacity: 1;
transform: scaleX(1);
}
}
/* TITLE */
.ng-inner-hero h1 {
animation: ngInnerHeroTitleIn .72s .34s cubic-bezier(.18,.82,.25,1) backwards;
}
@keyframes ngInnerHeroTitleIn {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* META / SUBTITLE */
.ng-inner-hero .ng-inner-hero__meta {
animation: ngInnerHeroMetaIn .55s .52s cubic-bezier(.2,.75,.25,1) backwards;
}
@keyframes ngInnerHeroMetaIn {
from {
opacity: 0;
transform: translateY(13px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* tiny emphasis on branded word */
.ng-inner-hero .ng-inner-hero__meta span {
display: inline-block;
animation: ngInnerHeroBrandIn .4s .69s cubic-bezier(.2,1.3,.3,1) backwards;
}
@keyframes ngInnerHeroBrandIn {
from {
opacity: 0;
transform: translateY(3px) scale(.92);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* IMPORTANT — Do NOT animate .ng-inner-hero__scroll. — It already has its own continuous motion. */
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-inner-hero .ng-inner-hero__image, .ng-inner-hero .ng-inner-hero__overlay, .ng-inner-hero .ng-inner-hero__detail, .ng-inner-hero .ng-inner-hero__detail span, .ng-inner-hero .ng-inner-hero__detail i, .ng-inner-hero h1, .ng-inner-hero .ng-inner-hero__meta, .ng-inner-hero .ng-inner-hero__meta span {
animation: none !important;
}
}
/* INITIATIEVEN MOTION — 01 FEATURED NOORDBUITEN — Photo → dossier sheet */
/* PREPARE */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-kicker, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-heading h2, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-heading > p, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-image-tag, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-rail, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-panel-top, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-panel h3, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-panel > p, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-themes, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-button, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-bottom {
opacity: 0;
}
/* Heading can safely rise */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-kicker, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-heading h2, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-heading > p {
transform: translateY(10px);
}
/* PHOTO — Reveal using clip-path, NOT transform. — This leaves the existing hover zoom on the ![]()
alone. */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-image {
clip-path: inset(0 100% 0 0 round 2rem .5rem 2rem 2rem);
transition: clip-path 900ms cubic-bezier(.18,.82,.25,1);
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-image {
clip-path: inset(0 0 0 0 round 2rem .5rem 2rem 2rem);
transition-delay: 180ms;
}
/* HEADING */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-kicker {
transition: opacity 420ms ease, transform 480ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-heading h2 {
transition: opacity 540ms ease, transform 600ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-heading > p {
transition: opacity 480ms ease, transform 540ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-kicker {
opacity: 1;
transform: translateY(0);
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 70ms;
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 170ms;
}
/* IMAGE TAG */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-image-tag {
transition: opacity 380ms ease;
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-image-tag {
opacity: 1;
transition-delay: 710ms;
}
/* Coral dot inside Tilburg-Noord pill */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-image-tag > span {
transform: scale(0);
transition: transform 380ms cubic-bezier(.2,1.35,.3,1);
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-image-tag > span {
transform: scale(1);
transition-delay: 800ms;
}
/* 01 / UITGELICHT RAIL */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-rail {
transition: opacity 380ms ease;
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-rail {
opacity: 1;
transition-delay: 500ms;
}
/* little vertical line draws downward */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-rail i {
transform: scaleY(0);
transform-origin: top center;
transition: transform 520ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-rail i {
transform: scaleY(1);
transition-delay: 610ms;
}
/* WHITE INFORMATION SHEET — IMPORTANT: clip-path only. — Its translateY(-50%) positioning remains untouched. */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-panel {
opacity: 0;
clip-path: inset(0 0 0 100% round 1.6rem);
transition: opacity 480ms ease, clip-path 760ms cubic-bezier(.18,.82,.25,1);
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-panel {
opacity: 1;
clip-path: inset(0 0 0 0 round 1.6rem);
transition-delay: 480ms;
}
/* Coral page marker */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-panel::before {
transform: scaleX(0);
transform-origin: left center;
transition: transform 450ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-panel::before {
transform: scaleX(1);
transition-delay: 820ms;
}
/* PANEL CONTENT */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-panel-top, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-panel h3, .ng-init-feature.is-init-feature-motion-ready .ng-init-feature-panel > p {
transform: translateY(7px);
transition: opacity 390ms ease, transform 450ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-panel-top {
opacity: 1;
transform: translateY(0);
transition-delay: 780ms;
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-panel h3 {
opacity: 1;
transform: translateY(0);
transition-delay: 880ms;
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-panel > p {
opacity: 1;
transform: translateY(0);
transition-delay: 980ms;
}
/* little ✦ */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-symbol {
transform: scale(.75);
transition: transform 420ms cubic-bezier(.2,1.3,.3,1);
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-symbol {
transform: scale(1);
transition-delay: 940ms;
}
/* THREE THEMES — Groen → Gezond → Samen */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-themes {
transition: opacity 400ms ease;
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-themes {
opacity: 1;
transition-delay: 1080ms;
}
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-themes > div {
opacity: 0;
transition: opacity 320ms ease;
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-themes > div:nth-child(1) {
opacity: 1;
transition-delay: 1140ms;
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-themes > div:nth-child(2) {
opacity: 1;
transition-delay: 1220ms;
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-themes > div:nth-child(3) {
opacity: 1;
transition-delay: 1300ms;
}
/* CTA — Opacity only — button already has hover transform. */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-button {
transition: opacity 380ms ease, transform 180ms ease;
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-button {
opacity: 1;
transition-delay: 1390ms;
}
/* BOTTOM DETAIL */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-bottom {
transition: opacity 420ms ease;
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-bottom {
opacity: 1;
transition-delay: 1530ms;
}
/* little coral dot */
.ng-init-feature.is-init-feature-motion-ready .ng-init-feature-bottom > span {
transform: scale(0);
transition: transform 350ms cubic-bezier(.2,1.35,.3,1);
}
.ng-init-feature.is-init-feature-visible .ng-init-feature-bottom > span {
transform: scale(1);
transition-delay: 1600ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-init-feature *, .ng-init-feature *::before, .ng-init-feature *::after {
animation: none !important;
}
}
/* INITIATIEVEN — NOORDWERKTSAMEN V2 — Doorlopende buurt- en wijkgesprekken */
/* quiet background ring */
/* HEADING */
/* right-side intro */
/* MAIN LAYOUT */
/* VISUAL */
/* BIG PHOTO */
/* NUMBER */
/* MAIN QUESTION */
/* CONTINUATION NOTE */
/* COPY */
/* CONVERSATION FLOW */
/* PARTICIPANTS */
/* BUTTON */
/* RESPONSIVE */
/* INITIATIEVEN — NOORDWERKTSAMEN CLEAN */
.ng-nwt-clean {
position: relative;
padding: clamp(6rem, 9vw, 8.5rem) 0;
overflow: hidden;
background: var(--color-dark);
color: #fff;
}
/* barely-there background detail */
.ng-nwt-clean::after {
content: "";
position: absolute;
right: -190px;
bottom: -210px;
width: 390px;
height: 390px;
border: 70px solid rgba(220,234,215,.025);
border-radius: 50%;
pointer-events: none;
}
/* LAYOUT */
.ng-nwt-clean-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(340px,.68fr) minmax(0,1.18fr);
align-items: center;
gap: clamp(4rem,8vw,8.5rem);
}
/* COPY */
.ng-nwt-clean-copy {
max-width: 520px;
}
/* tiny initiative identifier */
.ng-nwt-clean-meta {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: 1.5rem;
}
.ng-nwt-clean-meta span, .ng-nwt-clean-meta small {
color: var(--color-coral);
font-size: .64rem;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-nwt-clean-meta i {
width: 35px;
height: 1px;
background: rgba(255,255,255,.23);
}
/* MAIN HEADING */
.ng-nwt-clean h2 {
max-width: 560px;
margin: 0 0 2rem;
color: #fff;
font-size: clamp(2.8rem,4.6vw,4.4rem);
font-weight: 750;
line-height: .96;
letter-spacing: -.052em;
}
/* IMPORTANT LABEL */
.ng-nwt-clean-label {
margin: 0 0 .7rem;
color: #f6a390;
font-size: .66rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
/* BODY */
.ng-nwt-clean-intro {
max-width: 470px;
margin: 0;
color: rgba(255,255,255,.62);
font-size: .93rem;
line-height: 1.75;
}
/* SIMPLE CONVERSATION FLOW */
.ng-nwt-clean-flow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .75rem;
margin-top: 2.4rem;
}
.ng-nwt-clean-flow span {
color: rgba(255,255,255,.82);
font-size: .72rem;
font-weight: 800;
}
.ng-nwt-clean-flow i {
width: 28px;
height: 1px;
background: var(--color-coral);
}
/* BEWONERS ↔ GEMEENTE */
.ng-nwt-clean-relation {
display: flex;
align-items: center;
gap: .55rem;
margin: 1.3rem 0 0;
color: rgba(255,255,255,.4);
font-size: .63rem;
font-weight: 750;
}
.ng-nwt-clean-relation i {
color: var(--color-coral);
font-style: normal;
}
/* BUTTON */
.ng-nwt-clean-button {
width: fit-content;
min-height: 50px;
display: inline-flex;
align-items: center;
gap: 1rem;
margin-top: 2rem;
padding: .35rem .4rem .35rem 1.15rem;
color: #fff;
border: 1px solid rgba(255,255,255,.2);
border-radius: 999px;
font-size: .77rem;
font-weight: 800;
text-decoration: none;
transition: transform 180ms ease, background-color 180ms ease;
}
.ng-nwt-clean-button:hover {
color: #fff;
background: rgba(255,255,255,.06);
transform: translateY(-2px);
}
.ng-nwt-clean-button-arrow {
width: 2.3rem;
height: 2.3rem;
display: grid;
place-items: center;
color: var(--color-coral);
background: #fff;
border-radius: 50%;
transition: transform 180ms ease;
}
.ng-nwt-clean-button:hover .ng-nwt-clean-button-arrow {
transform: translate(2px,-2px);
}
/* PHOTO */
.ng-nwt-clean-visual {
position: relative;
padding: 0 0 45px;
}
.ng-nwt-clean-photo {
position: relative;
min-height: clamp(520px,48vw,690px);
margin: 0;
overflow: hidden;
border-radius: 2.7rem .6rem 2.7rem 2.7rem;
box-shadow: 0 32px 75px rgba(0,0,0,.18);
}
.ng-nwt-clean-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(13,29,20,.64) 0%, rgba(13,29,20,.1) 34%, transparent 58%);
pointer-events: none;
}
.ng-nwt-clean-photo img {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
display: block;
object-fit: cover;
transition: transform 700ms cubic-bezier(.2,.75,.25,1);
}
.ng-nwt-clean-photo:hover img {
transform: scale(1.025);
}
/* PHOTO CAPTION — Not a card. Just belongs to the photograph. */
.ng-nwt-clean-photo figcaption {
position: absolute;
z-index: 3;
left: clamp(1.5rem,4vw,2.6rem);
bottom: clamp(1.5rem,4vw,2.5rem);
max-width: 310px;
}
.ng-nwt-clean-photo figcaption span {
display: block;
margin-bottom: .45rem;
color: #f6a390;
font-size: .6rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-nwt-clean-photo figcaption strong {
display: block;
color: #fff;
font-size: clamp(1.3rem,2.3vw,2rem);
font-weight: 750;
line-height: 1.04;
letter-spacing: -.035em;
}
/* LITTLE CONTINUATION ANNOTATION */
/* RESPONSIVE */
@media (max-width: 950px) {
.ng-nwt-clean-layout {
grid-template-columns: 1fr;
gap: 4rem;
}
.ng-nwt-clean-copy {
max-width: 680px;
}
.ng-nwt-clean-visual {
width: min(100%,760px);
}
}
@media (max-width: 600px) {
.ng-nwt-clean {
padding: 5rem 0;
}
.ng-nwt-clean h2 {
font-size: clamp(2.7rem,13vw,3.7rem);
}
.ng-nwt-clean-flow {
align-items: flex-start;
flex-direction: column;
gap: .55rem;
}
.ng-nwt-clean-flow i {
width: 1px;
height: 17px;
margin-left: .2rem;
}
.ng-nwt-clean-photo {
min-height: 480px;
}
}
/* NOORDWERKTSAMEN — SPACING / ALIGNMENT POLISH */
/* ALIGN THE TEXT WITH THE IMAGE */
.ng-nwt-clean-layout {
align-items: start;
gap: clamp(3.5rem, 6vw, 6rem);
}
/* * Text starts only slightly below the top of the image. * Enough difference to feel editorial, not misaligned. */
.ng-nwt-clean-copy {
max-width: 520px;
padding-top: clamp(2rem, 4vw, 3.5rem);
}
/* CLEANER TEXT RHYTHM */
.ng-nwt-clean-meta {
margin-bottom: 1.6rem;
}
.ng-nwt-clean h2 {
margin: 0 0 1.65rem;
line-height: .98;
}
/* * Give the important "buurt- en wijkgesprekken" * line its own breathing room. */
.ng-nwt-clean-label {
margin: 0 0 .9rem;
line-height: 1.3;
}
.ng-nwt-clean-intro {
max-width: 455px;
line-height: 1.72;
}
/* FLOW — Make this feel connected to the paragraph above, — rather than like another separate section. */
.ng-nwt-clean-flow {
margin-top: 2rem;
gap: .65rem;
}
.ng-nwt-clean-flow i {
width: 24px;
}
/* BEWONERS ↔ GEMEENTE — Slightly quieter and closer to the flow. */
.ng-nwt-clean-relation {
margin-top: 1.1rem;
opacity: .82;
}
/* CTA */
.ng-nwt-clean-button {
margin-top: 1.75rem;
}
/* IMAGE — Slightly less towering so both sides feel related. */
.ng-nwt-clean-photo {
min-height: clamp(540px, 43vw, 640px);
}
/* VISUAL POSITION */
.ng-nwt-clean-visual {
padding-bottom: 38px;
}
/* RESPONSIVE */
@media (max-width: 950px) {
.ng-nwt-clean-copy {
padding-top: 0;
}
}
/* NOORDWERKTSAMEN — FINAL SPACING FIX */
/* SECTION HEIGHT — Less dead space top/bottom */
.ng-nwt-clean {
padding: clamp(4.75rem, 7vw, 6.5rem) 0 clamp(4.25rem, 6vw, 5.75rem);
}
/* LAYOUT — Give the text a bit more width and reduce the gap */
.ng-nwt-clean-layout {
grid-template-columns: minmax(420px, .78fr) minmax(0, 1.08fr);
align-items: start;
gap: clamp(2.75rem, 5vw, 4.75rem);
}
/* LEFT COLUMN — Better breathing room */
.ng-nwt-clean-copy {
max-width: 560px;
padding-top: clamp(2.25rem, 4vw, 3.4rem);
}
.ng-nwt-clean-meta {
margin-bottom: 1.8rem;
}
.ng-nwt-clean h2 {
max-width: 620px;
margin: 0 0 1.3rem;
font-size: clamp(2.6rem, 4vw, 4rem);
line-height: 1.01;
}
.ng-nwt-clean-label {
margin: 0 0 1rem;
font-size: .64rem;
line-height: 1.4;
}
.ng-nwt-clean-intro {
max-width: 500px;
margin: 0;
font-size: .92rem;
line-height: 1.85;
}
/* FLOW / RELATION / BUTTON — Make these feel calmer and less stacked */
.ng-nwt-clean-flow {
margin-top: 2.2rem;
gap: .7rem .75rem;
}
.ng-nwt-clean-flow span {
font-size: .7rem;
}
.ng-nwt-clean-relation {
margin-top: 1.4rem;
font-size: .7rem;
}
.ng-nwt-clean-button {
margin-top: 2.1rem;
}
/* IMAGE SIDE — Slightly less towering, less hanging space underneath */
.ng-nwt-clean-visual {
padding-bottom: 22px;
}
.ng-nwt-clean-photo {
min-height: clamp(500px, 40vw, 600px);
}
/* MOBILE / TABLET */
@media (max-width: 1100px) {
.ng-nwt-clean-layout {
grid-template-columns: minmax(360px, .9fr) minmax(0, 1fr);
gap: 2.5rem;
}
}
@media (max-width: 950px) {
.ng-nwt-clean-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.ng-nwt-clean-copy {
max-width: 680px;
padding-top: 0;
}
.ng-nwt-clean-visual {
width: min(100%, 760px);
padding-bottom: 18px;
}
}
.ng-nwt-clean-flow {
flex-direction: column;
align-items: flex-start;
gap: .55rem;
}
.ng-nwt-clean-flow i {
width: 18px;
}
/* NOORDWERKTSAMEN — REMOVE EXCESS BOTTOM SPACE */
.ng-nwt-clean {
padding: clamp(4.75rem, 7vw, 6.5rem) 0 clamp(2.5rem, 3.5vw, 3.5rem);
}
/* We don't need reserved space underneath the photo anymore */
.ng-nwt-clean-visual {
padding-bottom: 0;
}
/* Keep the little annotation close to the image */
/* INITIATIEVEN — HEIKANTSE TUYNEN CLEAN */
.ng-ht-clean {
position: relative;
padding: clamp(5rem, 7vw, 6.75rem) 0 clamp(4rem, 6vw, 5.5rem);
overflow: hidden;
background: #f6f4ef;
}
.ng-ht-clean::after {
content: "";
position: absolute;
right: -170px;
top: 110px;
width: 360px;
height: 360px;
border: 68px solid rgba(46,59,50,.035);
border-radius: 50%;
pointer-events: none;
}
/* LAYOUT */
.ng-ht-clean-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(420px, .82fr);
align-items: start;
gap: clamp(2.75rem, 5vw, 5rem);
}
/* IMAGE */
.ng-ht-clean-visual {
position: relative;
padding-bottom: 18px;
}
.ng-ht-clean-photo {
position: relative;
min-height: clamp(500px, 40vw, 600px);
margin: 0;
overflow: hidden;
border-radius: .65rem 2.7rem 2.7rem 2.7rem;
box-shadow: 0 30px 70px rgba(0,0,0,.12);
}
.ng-ht-clean-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(25,33,27,.46) 0%, rgba(25,33,27,.08) 34%, transparent 58%);
pointer-events: none;
}
.ng-ht-clean-photo img {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
display: block;
object-fit: cover;
transition: transform 700ms cubic-bezier(.2,.75,.25,1);
}
.ng-ht-clean-photo:hover img {
transform: scale(1.025);
}
.ng-ht-clean-photo figcaption {
position: absolute;
z-index: 3;
left: clamp(1.5rem, 4vw, 2.4rem);
bottom: clamp(1.5rem, 4vw, 2.4rem);
max-width: 320px;
}
.ng-ht-clean-photo figcaption span {
display: block;
margin-bottom: .45rem;
color: var(--color-coral);
font-size: .6rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-ht-clean-photo figcaption strong {
display: block;
color: #fff;
font-size: clamp(1.35rem, 2.3vw, 2rem);
font-weight: 750;
line-height: 1.04;
letter-spacing: -.035em;
}
/* little note */
/* COPY */
.ng-ht-clean-copy {
max-width: 560px;
padding-top: clamp(2.2rem, 4vw, 3.2rem);
}
.ng-ht-clean-meta {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: 2rem;
}
.ng-ht-clean-meta span, .ng-ht-clean-meta small {
color: var(--color-coral);
font-size: .64rem;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-ht-clean-meta i {
width: 35px;
height: 1px;
background: rgba(46,59,50,.18);
}
.ng-ht-clean-label {
margin: 0 0 .95rem;
color: var(--color-coral);
font-size: .64rem;
font-weight: 850;
line-height: 1.35;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-ht-clean h2 {
max-width: 600px;
margin: 0 0 1.2rem;
color: var(--color-dark);
font-size: clamp(2.7rem, 4vw, 4rem);
font-weight: 750;
line-height: 1;
letter-spacing: -.05em;
}
.ng-ht-clean h3 {
max-width: 500px;
margin: 0 0 1.45rem;
color: var(--color-dark);
font-size: clamp(1.5rem, 2.3vw, 2rem);
font-weight: 750;
line-height: 1.05;
letter-spacing: -.03em;
}
.ng-ht-clean h3 span {
display: block;
color: rgba(46,59,50,.6);
}
.ng-ht-clean-intro {
max-width: 500px;
margin: 0;
color: rgba(46,59,50,.7);
font-size: .92rem;
line-height: 1.85;
}
/* SIMPLE FLOW */
.ng-ht-clean-flow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .75rem;
margin-top: 2.2rem;
}
.ng-ht-clean-flow span {
color: rgba(46,59,50,.82);
font-size: .72rem;
font-weight: 800;
}
.ng-ht-clean-flow i {
width: 28px;
height: 1px;
background: var(--color-coral);
}
/* BUTTON */
.ng-ht-clean-button {
width: fit-content;
min-height: 50px;
display: inline-flex;
align-items: center;
gap: 1rem;
margin-top: 2rem;
padding: .35rem .4rem .35rem 1.15rem;
color: var(--color-dark);
border: 1px solid rgba(46,59,50,.16);
border-radius: 999px;
font-size: .77rem;
font-weight: 800;
text-decoration: none;
transition: transform 180ms ease, background-color 180ms ease;
}
.ng-ht-clean-button:hover {
color: var(--color-dark);
background: rgba(46,59,50,.04);
transform: translateY(-2px);
}
.ng-ht-clean-button-arrow {
width: 2.3rem;
height: 2.3rem;
display: grid;
place-items: center;
color: #fff;
background: var(--color-coral);
border-radius: 50%;
transition: transform 180ms ease;
}
.ng-ht-clean-button:hover .ng-ht-clean-button-arrow {
transform: translate(2px,-2px);
}
/* RESPONSIVE */
@media (max-width: 950px) {
.ng-ht-clean-copy {
max-width: 680px;
padding-top: 0;
}
.ng-ht-clean-visual {
width: min(100%, 760px);
}
}
@media (max-width: 600px) {
.ng-ht-clean {
padding: 4.75rem 0;
}
.ng-ht-clean h2 {
font-size: clamp(2.6rem, 12vw, 3.7rem);
}
.ng-ht-clean h3 {
font-size: clamp(1.35rem, 6vw, 1.8rem);
}
.ng-ht-clean-flow {
flex-direction: column;
align-items: flex-start;
gap: .55rem;
}
.ng-ht-clean-flow i {
width: 1px;
height: 16px;
margin-left: .2rem;
}
.ng-ht-clean-photo {
min-height: 460px;
}
}
/* HEIKANTSE TUYNEN — ALIGNMENT / READABILITY FIX */
/* ALIGN THE TEXT BETTER WITH THE IMAGE */
.ng-ht-clean-layout {
align-items: start;
grid-template-columns: minmax(0, 1.05fr) minmax(440px, .8fr);
gap: clamp(2.5rem, 4.5vw, 4.5rem);
}
/* * Start the text a bit higher so it visually aligns * better with the top of the image. */
.ng-ht-clean-copy {
max-width: 560px;
padding-top: clamp(.8rem, 2vw, 1.5rem);
}
.ng-ht-clean-meta {
margin-bottom: 1.7rem;
}
.ng-ht-clean-label {
margin: 0 0 .9rem;
}
.ng-ht-clean h2 {
margin: 0 0 1.35rem;
line-height: 1.02;
}
.ng-ht-clean h3 {
margin: 0 0 1.25rem;
}
.ng-ht-clean-intro {
max-width: 510px;
line-height: 1.8;
}
/* IMAGE NOTE UNDER THE PHOTO — Make it readable and stop it from getting lost */
.ng-ht-clean-visual {
padding-bottom: 42px;
}
/* OPTIONAL: — Make caption inside image a bit easier to read too */
.ng-ht-clean-photo::after {
background: linear-gradient(to top, rgba(25,33,27,.58) 0%, rgba(25,33,27,.16) 36%, transparent 60%);
}
/* MOBILE */
@media (max-width: 950px) {
.ng-ht-clean-copy {
padding-top: 0;
}
.ng-ht-clean-visual {
padding-bottom: 34px;
}
}
/* HEIKANTSE TUYNEN — FINAL ALIGNMENT */
/* SECTION */
.ng-ht-clean {
padding: clamp(5rem, 7vw, 6.5rem) 0 clamp(2.75rem, 4vw, 3.75rem);
}
/* PERFECT TOP ALIGNMENT */
.ng-ht-clean-layout {
grid-template-columns: minmax(0, 1.05fr) minmax(440px, .82fr);
align-items: start;
gap: clamp(3rem, 5vw, 5rem);
}
.ng-ht-clean-visual, .ng-ht-clean-copy {
align-self: start;
}
/* * IMPORTANT: * No offset whatsoever. * * Top of HEIKANTSE TUYNEN * now lines up with top of photograph. */
.ng-ht-clean-meta {
margin-top: 0;
margin-bottom: 2rem;
}
/* IMAGE */
.ng-ht-clean-visual {
padding-bottom: 0;
}
.ng-ht-clean-photo {
min-height: clamp(520px, 39vw, 600px);
}
/* old annotation is gone */
/* BOTTOM DETAIL — Same visual language as NoordbuiTen */
.ng-ht-clean-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: .9rem;
margin-top: clamp(2.5rem, 4vw, 3.5rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-ht-clean-bottom > span {
width: 7px;
height: 7px;
flex: 0 0 auto;
background: var(--color-coral);
border-radius: 50%;
}
.ng-ht-clean-bottom p {
margin: 0;
color: rgba(46,59,50,.5);
font-size: .72rem;
font-weight: 700;
}
/* RESPONSIVE */
@media (max-width: 950px) {
.ng-ht-clean-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.ng-ht-clean-copy {
padding-top: 0 !important;
}
.ng-ht-clean-bottom {
margin-top: 2.75rem;
}
}
/* INITIATIEVEN — CONSISTENT SECTION RHYTHM — NoordbuiTen / NoordwerkTsamen / Heikantse Tuynen */
/* Match NoordbuiTen section spacing */
.ng-nwt-clean, .ng-ht-clean {
padding: clamp(5rem, 7vw, 6.5rem) 0;
}
/* No extra fake space reserved under visuals */
.ng-nwt-clean-visual, .ng-ht-clean-visual {
padding-bottom: 0;
}
/* SHARED BOTTOM DETAIL — Exactly the same rhythm as NoordbuiTen */
.ng-nwt-clean-bottom, .ng-ht-clean-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: .9rem;
margin-top: clamp(2.5rem, 4vw, 3.5rem);
padding-top: 1.2rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-nwt-clean-bottom > span, .ng-ht-clean-bottom > span {
width: 7px;
height: 7px;
flex: 0 0 auto;
background: var(--color-coral);
border-radius: 50%;
}
.ng-nwt-clean-bottom p, .ng-ht-clean-bottom p {
margin: 0;
font-size: .72rem;
font-weight: 700;
}
/* Light section */
.ng-ht-clean-bottom p {
color: rgba(46,59,50,.48);
}
/* Dark NoordwerkTsamen section */
.ng-nwt-clean-bottom {
border-top-color: rgba(255,255,255,.11);
}
.ng-nwt-clean-bottom p {
color: rgba(255,255,255,.45);
}
.ng-nwt-clean-bottom .ng-brand-word {
color: #dcead7;
font-weight: 800;
}
/* Heikantse branded word */
.ng-ht-clean-bottom .ng-brand-word {
color: var(--color-green);
font-weight: 800;
}
/* HEIKANTSE — TOP ALIGNMENT STAYS EXACT */
.ng-ht-clean-layout {
align-items: start;
}
.ng-ht-clean-copy {
padding-top: 0 !important;
margin-top: 0 !important;
}
.ng-ht-clean-visual {
align-self: start;
}
/* RESPONSIVE */
@media (max-width: 950px) {
.ng-nwt-clean-bottom, .ng-ht-clean-bottom {
margin-top: 2.75rem;
}
}
/* HEIKANTSE TUYNEN — FINAL BOTTOM SPACING FIX */
.ng-ht-clean {
padding-bottom: clamp(1.75rem, 2.5vw, 2.5rem) !important;
}
.ng-ht-clean {
padding-bottom: 2rem !important;
}
/* HEIKANTSE TUYNEN — BOTTOM DETAIL SPACING */
.ng-ht-clean-bottom {
margin-top: 2.5rem !important;
padding-top: 1rem;
}
/* Keep section ending tidy too */
.ng-ht-clean {
padding-bottom: 2.5rem !important;
}
.ng-ht-clean-bottom {
margin-top: .25rem !important;
padding-top: .95rem;
}
/* INITIATIEVEN MOTION — HEIKANTSE TUYNEN */
/* PREPARE */
.ng-ht-clean.is-ht-motion-ready .ng-ht-clean-meta, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean-label, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean h2, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean h3, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean-intro, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean-flow, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean-button, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean-photo figcaption, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean-bottom {
opacity: 0;
}
/* safe text rise */
.ng-ht-clean.is-ht-motion-ready .ng-ht-clean-meta, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean-label, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean h2, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean h3, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean-intro {
transform: translateY(9px);
}
/* PHOTO REVEAL — Do NOT animate the img transform. — That belongs to hover. */
.ng-ht-clean.is-ht-motion-ready .ng-ht-clean-photo {
clip-path: inset(0 100% 0 0 round .65rem 2.7rem 2.7rem 2.7rem);
transition: clip-path 900ms cubic-bezier(.18,.82,.25,1);
}
.ng-ht-clean.is-ht-visible .ng-ht-clean-photo {
clip-path: inset(0 0 0 0 round .65rem 2.7rem 2.7rem 2.7rem);
}
/* PHOTO CAPTION */
.ng-ht-clean.is-ht-motion-ready .ng-ht-clean-photo figcaption {
transform: translateY(8px);
transition: opacity 420ms ease, transform 480ms cubic-bezier(.2,.75,.25,1);
}
.ng-ht-clean.is-ht-visible .ng-ht-clean-photo figcaption {
opacity: 1;
transform: translateY(0);
transition-delay: 620ms;
}
/* COPY */
.ng-ht-clean.is-ht-motion-ready .ng-ht-clean-meta, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean-label, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean h2, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean h3, .ng-ht-clean.is-ht-motion-ready .ng-ht-clean-intro {
transition: opacity 450ms ease, transform 520ms cubic-bezier(.2,.75,.25,1);
}
/* HEIKANTSE TUYNEN — 03 */
.ng-ht-clean.is-ht-visible .ng-ht-clean-meta {
opacity: 1;
transform: translateY(0);
transition-delay: 130ms;
}
/* GROEN EN ONTMOETING */
.ng-ht-clean.is-ht-visible .ng-ht-clean-label {
opacity: 1;
transform: translateY(0);
transition-delay: 230ms;
}
/* Main heading */
.ng-ht-clean.is-ht-visible .ng-ht-clean h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 310ms;
}
/* supporting heading */
.ng-ht-clean.is-ht-visible .ng-ht-clean h3 {
opacity: 1;
transform: translateY(0);
transition-delay: 430ms;
}
/* paragraph */
.ng-ht-clean.is-ht-visible .ng-ht-clean-intro {
opacity: 1;
transform: translateY(0);
transition-delay: 540ms;
}
/* GROEN — ONTMOETING — BUURTKRACHT */
.ng-ht-clean.is-ht-motion-ready .ng-ht-clean-flow {
transition: opacity 350ms ease;
}
.ng-ht-clean.is-ht-visible .ng-ht-clean-flow {
opacity: 1;
transition-delay: 680ms;
}
/* words */
.ng-ht-clean.is-ht-motion-ready .ng-ht-clean-flow span {
opacity: 0;
transition: opacity 300ms ease;
}
.ng-ht-clean.is-ht-visible .ng-ht-clean-flow span:nth-of-type(1) {
opacity: 1;
transition-delay: 720ms;
}
.ng-ht-clean.is-ht-visible .ng-ht-clean-flow span:nth-of-type(2) {
opacity: 1;
transition-delay: 870ms;
}
.ng-ht-clean.is-ht-visible .ng-ht-clean-flow span:nth-of-type(3) {
opacity: 1;
transition-delay: 1020ms;
}
/* coral connecting lines */
.ng-ht-clean.is-ht-motion-ready .ng-ht-clean-flow i {
transform: scaleX(0);
transform-origin: left center;
transition: transform 380ms cubic-bezier(.2,.75,.25,1);
}
.ng-ht-clean.is-ht-visible .ng-ht-clean-flow i:nth-of-type(1) {
transform: scaleX(1);
transition-delay: 790ms;
}
.ng-ht-clean.is-ht-visible .ng-ht-clean-flow i:nth-of-type(2) {
transform: scaleX(1);
transition-delay: 940ms;
}
/* CTA — Opacity only — preserve existing hover transform */
.ng-ht-clean.is-ht-motion-ready .ng-ht-clean-button {
transition: opacity 400ms ease, transform 180ms ease, background-color 180ms ease;
}
.ng-ht-clean.is-ht-visible .ng-ht-clean-button {
opacity: 1;
transition-delay: 1120ms;
}
/* BOTTOM DETAIL */
.ng-ht-clean.is-ht-motion-ready .ng-ht-clean-bottom {
transition: opacity 450ms ease;
}
.ng-ht-clean.is-ht-visible .ng-ht-clean-bottom {
opacity: 1;
transition-delay: 1260ms;
}
/* coral dot at the end */
.ng-ht-clean.is-ht-motion-ready .ng-ht-clean-bottom > span {
transform: scale(0);
transition: transform 360ms cubic-bezier(.2,1.35,.3,1);
}
.ng-ht-clean.is-ht-visible .ng-ht-clean-bottom > span {
transform: scale(1);
transition-delay: 1340ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-ht-clean *, .ng-ht-clean *::before, .ng-ht-clean *::after {
animation: none !important;
}
}
/* INITIATIEVEN MOTION — NOORDWERKTSAMEN — Sister animation to Heikantse Tuynen */
/* PREPARE */
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-meta, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-label, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean h2, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-intro, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-flow, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-relation, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-button, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-photo figcaption, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-bottom {
opacity: 0;
}
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-meta, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-label, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean h2, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-intro {
transform: translateY(9px);
}
/* PHOTO — Mirror of Heikantse: reveal RIGHT → LEFT */
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-photo {
clip-path: inset(0 0 0 100% round 2.7rem .6rem 2.7rem 2.7rem);
transition: clip-path 900ms cubic-bezier(.18,.82,.25,1);
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-photo {
clip-path: inset(0 0 0 0 round 2.7rem .6rem 2.7rem 2.7rem);
}
/* PHOTO CAPTION */
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-photo figcaption {
transform: translateY(8px);
transition: opacity 420ms ease, transform 480ms cubic-bezier(.2,.75,.25,1);
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-photo figcaption {
opacity: 1;
transform: translateY(0);
transition-delay: 620ms;
}
/* COPY */
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-meta, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-label, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean h2, .ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-intro {
transition: opacity 450ms ease, transform 520ms cubic-bezier(.2,.75,.25,1);
}
/* NOORDWERKTSAMEN — 02 */
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-meta {
opacity: 1;
transform: translateY(0);
transition-delay: 130ms;
}
/* Doorlopende buurt- en wijkgesprekken */
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-label {
opacity: 1;
transform: translateY(0);
transition-delay: 230ms;
}
/* Main heading */
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 310ms;
}
/* intro */
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-intro {
opacity: 1;
transform: translateY(0);
transition-delay: 470ms;
}
/* LUISTEREN — DELEN — SAMEN ONDERZOEKEN */
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-flow {
transition: opacity 350ms ease;
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-flow {
opacity: 1;
transition-delay: 650ms;
}
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-flow span {
opacity: 0;
transition: opacity 300ms ease;
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-flow span:nth-of-type(1) {
opacity: 1;
transition-delay: 700ms;
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-flow span:nth-of-type(2) {
opacity: 1;
transition-delay: 850ms;
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-flow span:nth-of-type(3) {
opacity: 1;
transition-delay: 1000ms;
}
/* coral separators */
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-flow i {
transform: scaleX(0);
transform-origin: left center;
transition: transform 380ms cubic-bezier(.2,.75,.25,1);
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-flow i:nth-of-type(1) {
transform: scaleX(1);
transition-delay: 770ms;
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-flow i:nth-of-type(2) {
transform: scaleX(1);
transition-delay: 920ms;
}
/* BEWONERS ↔ GEMEENTE */
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-relation {
transition: opacity 360ms ease;
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-relation {
opacity: 1;
transition-delay: 1080ms;
}
/* CTA */
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-button {
transition: opacity 400ms ease, transform 180ms ease, background-color 180ms ease;
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-button {
opacity: 1;
transition-delay: 1180ms;
}
/* BOTTOM DETAIL */
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-bottom {
transition: opacity 450ms ease;
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-bottom {
opacity: 1;
transition-delay: 1320ms;
}
.ng-nwt-clean.is-nwt-motion-ready .ng-nwt-clean-bottom > span {
transform: scale(0);
transition: transform 360ms cubic-bezier(.2,1.35,.3,1);
}
.ng-nwt-clean.is-nwt-visible .ng-nwt-clean-bottom > span {
transform: scale(1);
transition-delay: 1400ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-nwt-clean *, .ng-nwt-clean *::before, .ng-nwt-clean *::after {
animation: none !important;
}
}
/* INITIATIEVEN MOTION — GROWTH PATH POLISH — Supporting details only */
/* NODES — The step itself already fades/rises. — We only give the plant marker a soft little "growth" pop. */
.ng-init-rise.is-animatable .ng-init-rise-node {
opacity: 0;
transform: scale(.84);
}
/* 01 */
.ng-init-rise.is-in-view .ng-init-rise-step--1 .ng-init-rise-node {
animation: ng-init-node-grow .48s cubic-bezier(.2,1.25,.3,1) .18s forwards;
}
/* 02 */
.ng-init-rise.is-in-view .ng-init-rise-step--2 .ng-init-rise-node {
animation: ng-init-node-grow .48s cubic-bezier(.2,1.25,.3,1) .98s forwards;
}
/* 03 */
.ng-init-rise.is-in-view .ng-init-rise-step--3 .ng-init-rise-node {
animation: ng-init-node-grow .48s cubic-bezier(.2,1.25,.3,1) 1.78s forwards;
}
/* 04 */
.ng-init-rise.is-in-view .ng-init-rise-step--4 .ng-init-rise-node {
animation: ng-init-node-grow .48s cubic-bezier(.2,1.25,.3,1) 2.53s forwards;
}
@keyframes ng-init-node-grow {
0% {
opacity: 0;
transform: scale(.84);
}
70% {
opacity: 1;
transform: scale(1.06);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* LITTLE CORAL DOT ON EACH NODE — Tiny delayed punctuation. */
.ng-init-rise.is-animatable .ng-init-rise-node > span {
opacity: 0;
transform: scale(0);
}
.ng-init-rise.is-in-view .ng-init-rise-step--1 .ng-init-rise-node > span {
animation: ng-init-node-dot .3s ease .48s forwards;
}
.ng-init-rise.is-in-view .ng-init-rise-step--2 .ng-init-rise-node > span {
animation: ng-init-node-dot .3s ease 1.28s forwards;
}
.ng-init-rise.is-in-view .ng-init-rise-step--3 .ng-init-rise-node > span {
animation: ng-init-node-dot .3s ease 2.08s forwards;
}
.ng-init-rise.is-in-view .ng-init-rise-step--4 .ng-init-rise-node > span {
animation: ng-init-node-dot .3s ease 2.83s forwards;
}
@keyframes ng-init-node-dot {
to {
opacity: 1;
transform: scale(1);
}
}
/* BOTTOM CTA — .ng-init-growth-footer comes directly after .ng-init-rise, — so we can use the existing animation state. */
.ng-init-rise.is-animatable + .ng-init-growth-footer {
opacity: 0;
transform: translateY(8px);
}
.ng-init-rise.is-in-view + .ng-init-growth-footer {
animation: ng-init-growth-footer-in .55s cubic-bezier(.2,.75,.25,1) 3s forwards;
}
@keyframes ng-init-growth-footer-in {
to {
opacity: 1;
transform: translateY(0);
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-init-rise.is-animatable .ng-init-rise-node, .ng-init-rise.is-animatable .ng-init-rise-node > span, .ng-init-rise.is-animatable + .ng-init-growth-footer {
opacity: 1;
transform: none;
animation: none;
}
}
/* INITIATIEVEN MOTION — FINAL IDEA CTA */
/* PREPARE */
.ng-init-idea.is-idea-motion-ready .ng-init-idea-kicker, .ng-init-idea.is-idea-motion-ready .ng-init-idea-copy h2, .ng-init-idea.is-idea-motion-ready .ng-init-idea-copy > p, .ng-init-idea.is-idea-motion-ready .ng-init-idea-actions, .ng-init-idea.is-idea-motion-ready .ng-init-idea-visual, .ng-init-idea.is-idea-motion-ready .ng-init-idea-paper-top, .ng-init-idea.is-idea-motion-ready .ng-init-idea-question, .ng-init-idea.is-idea-motion-ready .ng-init-idea-paper-footer, .ng-init-idea.is-idea-motion-ready .ng-init-idea-note, .ng-init-idea.is-idea-motion-ready .ng-init-idea-route {
opacity: 0;
}
/* safe copy movement */
.ng-init-idea.is-idea-motion-ready .ng-init-idea-kicker, .ng-init-idea.is-idea-motion-ready .ng-init-idea-copy h2, .ng-init-idea.is-idea-motion-ready .ng-init-idea-copy > p {
transform: translateY(9px);
}
/* visual wrapper — NOT paper */
.ng-init-idea.is-idea-motion-ready .ng-init-idea-visual {
transform: translateY(12px);
transition: opacity 650ms ease, transform 700ms cubic-bezier(.2,.75,.25,1);
}
/* LEFT COPY */
.ng-init-idea.is-idea-motion-ready .ng-init-idea-kicker, .ng-init-idea.is-idea-motion-ready .ng-init-idea-copy h2, .ng-init-idea.is-idea-motion-ready .ng-init-idea-copy > p {
transition: opacity 450ms ease, transform 520ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-idea.is-idea-visible .ng-init-idea-kicker {
opacity: 1;
transform: translateY(0);
}
.ng-init-idea.is-idea-visible .ng-init-idea-copy h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 90ms;
}
.ng-init-idea.is-idea-visible .ng-init-idea-copy > p {
opacity: 1;
transform: translateY(0);
transition-delay: 200ms;
}
/* PAPER ARRIVES */
.ng-init-idea.is-idea-visible .ng-init-idea-visual {
opacity: 1;
transform: translateY(0);
transition-delay: 170ms;
}
/* PIN */
.ng-init-idea.is-idea-motion-ready .ng-init-idea-pin {
opacity: 0;
transform: scale(.55);
transition: opacity 300ms ease, transform 420ms cubic-bezier(.2,1.4,.3,1);
}
.ng-init-idea.is-idea-visible .ng-init-idea-pin {
opacity: 1;
transform: scale(1);
transition-delay: 470ms;
}
/* PAPER HEADER + QUESTION */
.ng-init-idea.is-idea-motion-ready .ng-init-idea-paper-top, .ng-init-idea.is-idea-motion-ready .ng-init-idea-question {
transform: translateY(6px);
transition: opacity 380ms ease, transform 430ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-idea.is-idea-visible .ng-init-idea-paper-top {
opacity: 1;
transform: translateY(0);
transition-delay: 530ms;
}
.ng-init-idea.is-idea-visible .ng-init-idea-question {
opacity: 1;
transform: translateY(0);
transition-delay: 640ms;
}
/* WRITING LINES */
.ng-init-idea.is-idea-motion-ready .ng-init-idea-lines span {
transform: scaleX(0);
transform-origin: left center;
transition: transform 460ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-idea.is-idea-visible .ng-init-idea-lines span:nth-child(1) {
transform: scaleX(1);
transition-delay: 760ms;
}
.ng-init-idea.is-idea-visible .ng-init-idea-lines span:nth-child(2) {
transform: scaleX(1);
transition-delay: 850ms;
}
.ng-init-idea.is-idea-visible .ng-init-idea-lines span:nth-child(3) {
transform: scaleX(1);
transition-delay: 940ms;
}
/* PROMPTS */
.ng-init-idea.is-idea-motion-ready .ng-init-idea-prompts span {
opacity: 0;
transition: opacity 300ms ease;
}
.ng-init-idea.is-idea-visible .ng-init-idea-prompts span:nth-child(1) {
opacity: 1;
transition-delay: 980ms;
}
.ng-init-idea.is-idea-visible .ng-init-idea-prompts span:nth-child(2) {
opacity: 1;
transition-delay: 1060ms;
}
.ng-init-idea.is-idea-visible .ng-init-idea-prompts span:nth-child(3) {
opacity: 1;
transition-delay: 1140ms;
}
/* PAPER FOOTER + LITTLE NOTE */
.ng-init-idea.is-idea-motion-ready .ng-init-idea-paper-footer, .ng-init-idea.is-idea-motion-ready .ng-init-idea-note {
transition: opacity 380ms ease;
}
.ng-init-idea.is-idea-visible .ng-init-idea-paper-footer {
opacity: 1;
transition-delay: 1230ms;
}
.ng-init-idea.is-idea-visible .ng-init-idea-note {
opacity: 1;
transition-delay: 1320ms;
}
/* CTA BUTTONS — Existing button hover transform stays intact. */
.ng-init-idea.is-idea-motion-ready .ng-init-idea-actions {
transition: opacity 400ms ease;
}
.ng-init-idea.is-idea-visible .ng-init-idea-actions {
opacity: 1;
transition-delay: 1050ms;
}
/* ZIEN → DELEN → SAMEN KIJKEN */
.ng-init-idea.is-idea-motion-ready .ng-init-idea-route {
transition: opacity 380ms ease;
}
.ng-init-idea.is-idea-visible .ng-init-idea-route {
opacity: 1;
transition-delay: 1380ms;
}
.ng-init-idea.is-idea-motion-ready .ng-init-idea-route > * {
opacity: 0;
}
.ng-init-idea.is-idea-motion-ready .ng-init-idea-route i {
transform: scaleX(0);
transform-origin: left center;
transition: opacity 250ms ease, transform 350ms cubic-bezier(.2,.75,.25,1);
}
.ng-init-idea.is-idea-motion-ready .ng-init-idea-route span {
transition: opacity 300ms ease;
}
/* ZIEN */
.ng-init-idea.is-idea-visible .ng-init-idea-route > :nth-child(1) {
opacity: 1;
transition-delay: 1430ms;
}
/* line */
.ng-init-idea.is-idea-visible .ng-init-idea-route > :nth-child(2) {
opacity: 1;
transform: scaleX(1);
transition-delay: 1500ms;
}
/* DELEN */
.ng-init-idea.is-idea-visible .ng-init-idea-route > :nth-child(3) {
opacity: 1;
transition-delay: 1580ms;
}
/* line */
.ng-init-idea.is-idea-visible .ng-init-idea-route > :nth-child(4) {
opacity: 1;
transform: scaleX(1);
transition-delay: 1650ms;
}
/* SAMEN KIJKEN */
.ng-init-idea.is-idea-visible .ng-init-idea-route > :nth-child(5) {
opacity: 1;
transition-delay: 1730ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-init-idea *, .ng-init-idea *::before, .ng-init-idea *::after {
animation: none !important;
}
}
/* NOORDWERKTSAMEN — 01 — INTRO / CONVERSATION */
.ng-nwt-about {
position: relative;
padding: clamp(5.5rem, 8vw, 8rem) 0;
overflow: hidden;
background: #f6f4ef;
}
/* faint oversized circle */
.ng-nwt-about::after {
content: "";
position: absolute;
width: 420px;
height: 420px;
right: -210px;
top: 70px;
border: 75px solid rgba(46,59,50,.025);
border-radius: 50%;
pointer-events: none;
}
/* LAYOUT */
.ng-nwt-about-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(420px, .72fr);
align-items: start;
gap: clamp(4rem, 8vw, 7.5rem);
}
/* COPY */
.ng-nwt-about-copy {
max-width: 650px;
}
.ng-nwt-about-meta {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: clamp(2.25rem, 4vw, 3rem);
}
.ng-nwt-about-meta span, .ng-nwt-about-meta small {
color: var(--color-coral);
font-size: .64rem;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-nwt-about-meta i {
width: 38px;
height: 1px;
background: rgba(46,59,50,.18);
}
.ng-nwt-about-kicker {
margin: 0 0 .95rem;
color: var(--color-coral);
font-size: .67rem;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-nwt-about h2 {
max-width: 650px;
margin: 0 0 1.75rem;
color: var(--color-dark);
font-size: clamp(2.8rem, 4.5vw, 4.6rem);
font-weight: 750;
line-height: .98;
letter-spacing: -.055em;
}
.ng-nwt-about h2 span {
display: block;
color: var(--color-green);
}
.ng-nwt-about-intro {
max-width: 540px;
margin: 0 0 1.15rem;
color: rgba(46,59,50,.82);
font-size: clamp(1.05rem, 1.4vw, 1.18rem);
font-weight: 650;
line-height: 1.65;
}
.ng-nwt-about-text {
max-width: 520px;
margin: 0;
color: rgba(46,59,50,.62);
font-size: .94rem;
line-height: 1.85;
}
/* CONVERSATION VISUAL */
.ng-nwt-about-dialogue {
position: relative;
margin-top: 1rem;
padding: clamp(2.2rem, 4vw, 3.25rem);
background: var(--color-dark);
border-radius: .6rem 2.8rem 2.8rem 2.8rem;
box-shadow: 0 28px 65px rgba(46,59,50,.13);
}
/* two people / two sides */
.ng-nwt-about-line {
display: grid;
grid-template-columns: 10px 1fr 10px;
align-items: center;
gap: .7rem;
margin-bottom: 2.2rem;
}
.ng-nwt-about-line span {
width: 9px;
height: 9px;
background: var(--color-coral);
border-radius: 50%;
}
.ng-nwt-about-line i {
height: 1px;
background: rgba(255,255,255,.16);
}
/* SIDES */
.ng-nwt-about-side small {
display: block;
margin-bottom: .4rem;
color: var(--color-coral);
font-size: .59rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-nwt-about-side strong {
display: block;
margin-bottom: .6rem;
color: #fff;
font-size: clamp(1.35rem, 2vw, 1.7rem);
line-height: 1.05;
letter-spacing: -.025em;
}
.ng-nwt-about-side p {
max-width: 320px;
margin: 0;
color: rgba(255,255,255,.58);
font-size: .8rem;
line-height: 1.65;
}
/* LISTEN — SHARE — INVESTIGATE */
.ng-nwt-about-middle {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .55rem .7rem;
margin: 2rem 0;
padding: 1rem 0;
border-top: 1px solid rgba(255,255,255,.09);
border-bottom: 1px solid rgba(255,255,255,.09);
}
.ng-nwt-about-middle span {
color: rgba(255,255,255,.72);
font-size: .64rem;
font-weight: 800;
}
.ng-nwt-about-middle i {
width: 24px;
height: 1px;
background: var(--color-coral);
}
/* NOTE */
.ng-nwt-about-note {
margin: 2.4rem 0 0;
padding-top: 1.2rem;
color: rgba(255,255,255,.43);
border-top: 1px solid rgba(255,255,255,.09);
font-size: .7rem;
line-height: 1.55;
}
.ng-nwt-about-note strong {
display: block;
margin-top: .15rem;
color: rgba(255,255,255,.8);
font-weight: 800;
}
/* RESPONSIVE */
@media (max-width: 950px) {
.ng-nwt-about-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-nwt-about-dialogue {
width: min(100%, 600px);
}
}
@media (max-width: 600px) {
.ng-nwt-about {
padding: 4.75rem 0;
}
.ng-nwt-about h2 {
font-size: clamp(2.65rem, 12vw, 4rem);
}
.ng-nwt-about-dialogue {
padding: 2rem 1.5rem;
}
.ng-nwt-about-middle {
align-items: flex-start;
flex-direction: column;
}
.ng-nwt-about-middle i {
width: 1px;
height: 14px;
margin-left: .2rem;
}
}
/* NOORDWERKTSAMEN — 02 — GESPREKSONDERWERPEN */
/* quiet background detail */
/* HEADING */
/* TOPIC LIST */
/* number */
/* title */
/* WORD FLOW */
/* SMALL FINISHING NOTE */
/* HOVER — VERY SUBTLE */
/* RESPONSIVE */
/* NOORDWERKTSAMEN — 03 — GEEN DEBAT, WEL DIALOOG */
/* quiet oversized typographic-ish circle */
/* LAYOUT */
/* LEFT */
/* NOT / BUT */
/* PROCESS */
/* vertical route */
/* STEP */
/* NODE */
/* STEP COPY */
/* BOTTOM DETAIL */
/* RESPONSIVE */
/* NOORDWERKTSAMEN — 04 — VAN GESPREK NAAR INVLOED */
/* background detail */
/* HEADING */
/* BIG STATEMENT */
/* IMPACT LIST */
/* number */
/* title */
/* BOTTOM DETAIL */
/* HOVER */
/* RESPONSIVE */
/* NOORDWERKTSAMEN — FINAL CTA — PRAAT MEE */
/* PANEL */
/* tiny accent */
/* COPY */
/* ACTIONS */
/* CONVERSATION VISUAL */
/* person */
/* connecting conversation */
/* note */
/* BOTTOM SIGNATURE */
/* RESPONSIVE */
/* NOORDWERKTSAMEN — VISUAL SYSTEM RESET */
.ng-nwt-page {
--nwt-section-title: var(--ng-home-section-title);
--nwt-cream: #f6f4ef;
--nwt-paper: #fffdf9;
--nwt-soft-green: #edf2e9;
--nwt-soft-coral: #f6e7e2;
}
/* HEADING SCALE — Match the rest of NoordgroeiT */
.ng-nwt-about h2 {
font-size: var(--nwt-section-title) !important;
line-height: .98 !important;
letter-spacing: -.052em !important;
}
/* supporting H3s */
.ng-nwt-page h3 {
letter-spacing: -.03em;
}
/* GREEN TEXT RULE — Generic highlighted sentence fragments are NOT green. */
.ng-nwt-about h2 span {
color: inherit !important;
}
/* * Green should only be explicitly added to meaningful * words with .ng-brand-word / .ng-green-word. */
.ng-nwt-page .ng-brand-word, .ng-nwt-page .ng-green-word {
color: var(--color-green) !important;
font-weight: inherit;
}
/* SECTION BACKGROUND RHYTHM */
.ng-nwt-about {
background: var(--nwt-cream) !important;
}
/* NWT TOPICS — LIGHT EDITORIAL VERSION */
/* NOORDWERKTSAMEN — FINAL VISUAL DIRECTION — Match the rest of NoordgroeiT */
/* PAGE RHYTHM */
.ng-nwt-page {
background: var(--color-cream);
}
.ng-nwt-about {
background: var(--color-cream) !important;
}
/* subtle section separation instead of random colours */
/* SECTION SPACING — Less giant empty editorial blocks */
.ng-nwt-about {
padding: clamp(4.5rem, 6vw, 6rem) 0 !important;
}
/* HEADING SCALE — The current page still reads WAY too loud. */
.ng-nwt-about h2 {
max-width: 620px;
font-size: clamp(2.35rem, 3.25vw, 3.35rem) !important;
line-height: 1.01 !important;
letter-spacing: -.047em !important;
}
/* absolutely no arbitrary green sentence fragments */
.ng-nwt-about h2 span {
color: inherit !important;
}
/* green is deliberate only */
.ng-nwt-page .ng-brand-word, .ng-nwt-page .ng-green-word {
color: var(--color-green) !important;
}
/* SECTION 1 — Keep the composition, calm it down */
.ng-nwt-about-layout {
gap: clamp(3.5rem, 6vw, 6rem);
}
.ng-nwt-about-dialogue {
max-width: 430px;
justify-self: end;
padding: clamp(2rem, 3vw, 2.6rem);
border-radius: .55rem 2.3rem 2.3rem 2.3rem;
}
/* SECTION 2 — TOPICS — Editorial, quiet, not another huge statement section */
/* SECTION 3 — METHOD — Dark belongs INSIDE the panel only */
/* SECTION 4 — IMPACT — THIS was too big / too green / too dramatic */
/* remove giant decorative mint-circle feeling */
/* NOORDWERKTSAMEN — FINAL CTA — Light section before dark footer */
/* MAIN COMPOSITION */
/* COPY */
/* ACTIONS */
/* RIGHT CARD */
/* SMALL SIGNATURE */
/* MOBILE */
/* NOORDWERKTSAMEN — PAGE RHYTHM V3 — One continuous editorial surface */
/* 1. ONE BASE BACKGROUND — No more white / cream / white / cream. */
body .ng-nwt-page, body .ng-nwt-page .ng-nwt-about {
background: var(--color-cream) !important;
}
/* Remove the artificial section-strip borders */
/* Instead, the content grid gets a subtle divider */
/* prevent double spacing */
/* 2. SECTION 1 — Let it flow into section 2 instead of making a band. */
body .ng-nwt-page .ng-nwt-about {
padding-bottom: clamp(4.5rem, 6vw, 6rem) !important;
}
/* 3. TOPICS — Same paper background. — Give the LIST the visual identity instead. */
/* remove the original outer top border */
/* 4. METHOD — Keep dark panel as the contrast. — Same background around it. */
/* 5. IMPACT — Stop giving the whole section another background. — Make only the KEY MESSAGE green. */
/* 6. FINAL CTA — Use the SAME soft green family as Over ons. — This becomes the only major full-width colour change. */
/* CTA — REMOVE WHITE FLOATING CARD — The section itself IS the composition. */
/* CTA COPY — FORCE READABILITY — Old dark CTA rules were still making this white. */
/* secondary link */
/* CTA RIGHT OBJECT — One contained dark item = contrast without another section. */
/* CTA SIGNATURE */
/* MOBILE */
/* NOORDWERKTSAMEN — 02 — WAT LEEFT ER IN NOORD? — Fresh component — no old Topics inheritance */
.ng-nwt-voices {
position: relative;
padding: clamp(5rem, 7vw, 6.5rem) 0;
overflow: hidden;
background: var(--color-cream);
}
/* HEADING */
.ng-nwt-voices-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr);
align-items: end;
gap: clamp(3rem, 7vw, 6rem);
margin-bottom: clamp(3.5rem, 6vw, 5rem);
}
.ng-nwt-voices-kicker {
margin: 0 0 1rem;
color: var(--color-coral);
font-size: .66rem;
font-weight: 850;
line-height: 1.3;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nwt-voices h2 {
max-width: 600px;
margin: 0;
color: var(--color-dark);
font-size: clamp(2.35rem, 3.25vw, 3.35rem);
font-weight: 750;
line-height: 1.01;
letter-spacing: -.047em;
}
/* FIELD */
.ng-nwt-voices-field {
position: relative;
min-height: clamp(430px, 39vw, 520px);
overflow: hidden;
background: #fffdfa;
border: 1px solid rgba(46,59,50,.08);
border-radius: .6rem 2.6rem 2.6rem 2.6rem;
}
/* very faint paper grid */
.ng-nwt-voices-field::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(46,59,50,.027) 1px, transparent 1px), linear-gradient(to bottom, rgba(46,59,50,.027) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
pointer-events: none;
}
/* CENTRE */
.ng-nwt-voices-centre {
position: absolute;
top: 50%;
left: 50%;
width: clamp(165px, 18vw, 220px);
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
transform: translate(-50%,-50%);
border: 1px solid rgba(46,59,50,.12);
border-radius: 50%;
}
.ng-nwt-voices-centre::before {
content: "";
position: absolute;
inset: 11px;
border: 1px solid rgba(46,59,50,.055);
border-radius: 50%;
}
.ng-nwt-voices-centre small {
margin-bottom: .55rem;
color: var(--color-coral);
font-size: .57rem;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-nwt-voices-centre strong {
color: var(--color-dark);
font-size: clamp(1.25rem,2vw,1.65rem);
line-height: 1;
letter-spacing: -.035em;
}
.ng-nwt-voices-centre > span {
width: 7px;
height: 7px;
margin-top: .9rem;
background: var(--color-coral);
border-radius: 50%;
}
/* VOICES / TOPICS */
.ng-nwt-voice > span {
color: var(--color-coral);
font-size: .54rem;
font-weight: 850;
letter-spacing: .1em;
}
.ng-nwt-voice strong {
color: var(--color-dark);
font-size: clamp(.82rem,1.35vw,1.08rem);
font-weight: 750;
letter-spacing: -.02em;
}
/* placement deliberately irregular, but still aligned to an invisible grid */
.ng-nwt-voice--1 {
top: 16%;
left: 8%;
}
.ng-nwt-voice--2 {
top: 13%;
right: 13%;
}
.ng-nwt-voice--3 {
top: 34%;
left: 18%;
}
.ng-nwt-voice--4 {
top: 34%;
right: 8%;
}
.ng-nwt-voice--5 {
top: 61%;
left: 7%;
}
.ng-nwt-voice--6 {
top: 58%;
right: 16%;
}
.ng-nwt-voice--7 {
bottom: 14%;
left: 24%;
}
.ng-nwt-voice--8 {
bottom: 12%;
right: 8%;
}
.ng-nwt-voice--9 {
bottom: 8%;
left: 48%;
transform: translateX(-50%);
}
/* QUIET CONNECTING LINES — Not every topic needs one — keeps it elegant. */
.ng-nwt-voices-line {
position: absolute;
height: 1px;
background: linear-gradient(to right, transparent, rgba(240,102,83,.55), transparent);
transform-origin: left center;
pointer-events: none;
}
.ng-nwt-voices-line--a {
width: 120px;
top: 25%;
left: 27%;
transform: rotate(13deg);
}
.ng-nwt-voices-line--b {
width: 145px;
top: 69%;
right: 24%;
transform: rotate(-11deg);
}
.ng-nwt-voices-line--c {
width: 90px;
bottom: 22%;
left: 34%;
transform: rotate(-28deg);
}
/* BOTTOM NOTE */
.ng-nwt-voices-bottom {
display: flex;
align-items: center;
gap: .75rem;
margin-top: 1.6rem;
}
.ng-nwt-voices-bottom p {
margin: 0;
color: rgba(46,59,50,.48);
font-size: .67rem;
line-height: 1.5;
}
/* HOVER — Just a tiny bit of life. */
@media (hover:hover) and (pointer:fine) {
.ng-nwt-voice strong {
transition: transform 180ms ease, color 180ms ease;
}
.ng-nwt-voice:hover strong {
color: #1f2d24;
transform: translateY(-2px);
}
}
/* TABLET */
@media (max-width: 850px) {
.ng-nwt-voices-heading {
grid-template-columns: 1fr;
align-items: start;
gap: 1.5rem;
}
.ng-nwt-voices-field {
min-height: 470px;
}
}
/* MOBILE — Turn the composition into a clean editorial list. */
@media (max-width: 600px) {
.ng-nwt-voices-field {
min-height: 0;
display: grid;
gap: 0;
padding: 1.5rem;
border-radius: .5rem 1.5rem 1.5rem 1.5rem;
}
.ng-nwt-voices-centre {
position: relative;
top: auto;
left: auto;
width: 150px;
margin: .5rem auto 1.75rem;
transform: none;
}
.ng-nwt-voice {
position: relative;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
padding: .85rem 0;
border-top: 1px solid rgba(46,59,50,.08);
}
.ng-nwt-voice strong {
font-size: .95rem;
}
}
/* NOORDWERKTSAMEN — 02 — CONVERSATION MAP, REFINED */
.ng-nwt-voices {
position: relative;
padding: clamp(5rem, 7vw, 6.5rem) 0;
background: color-mix(in srgb, var(--color-green-light) 72%, var(--color-cream));
overflow: hidden;
}
/* subtle transition from previous section */
.ng-nwt-voices::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(1200px, calc(100% - 40px));
height: 1px;
transform: translateX(-50%);
background: rgba(46,59,50,.09);
}
/* HEADING */
.ng-nwt-voices-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .46fr);
align-items: end;
gap: clamp(3rem, 7vw, 6rem);
margin-bottom: clamp(3.5rem, 5vw, 4.5rem);
}
.ng-nwt-voices-kicker {
margin: 0 0 1rem;
color: var(--color-coral);
font-size: .66rem;
font-weight: 850;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nwt-voices h2 {
max-width: 620px;
margin: 0;
color: var(--color-dark);
font-size: clamp(2.35rem, 3.25vw, 3.35rem);
font-weight: 750;
line-height: 1.01;
letter-spacing: -.047em;
}
.ng-nwt-voices-heading > p {
max-width: 390px;
margin: 0 0 .2rem;
color: rgba(46,59,50,.62);
font-size: .88rem;
line-height: 1.8;
}
/* MAP — No giant white dashboard anymore */
.ng-nwt-voices-field {
position: relative;
width: min(100%, 1060px);
min-height: clamp(360px, 34vw, 440px);
margin-inline: auto;
overflow: visible;
background: transparent;
border: 0;
border-radius: 0;
}
/* remove old grid-card effect */
.ng-nwt-voices-field::before {
display: none;
}
/* CENTRE */
.ng-nwt-voices-centre {
position: absolute;
top: 50%;
left: 50%;
width: clamp(150px, 16vw, 190px);
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
transform: translate(-50%,-50%);
background: rgba(255,255,255,.42);
border: 1px solid rgba(46,59,50,.14);
border-radius: 50%;
box-shadow: 0 18px 40px rgba(46,59,50,.055);
}
.ng-nwt-voices-centre::before {
content: "";
position: absolute;
inset: 10px;
border: 1px solid rgba(46,59,50,.06);
border-radius: 50%;
}
.ng-nwt-voices-centre small {
margin-bottom: .45rem;
color: var(--color-coral);
font-size: .58rem;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-nwt-voices-centre strong {
color: var(--color-dark);
font-size: clamp(1.35rem, 2vw, 1.7rem);
line-height: 1;
letter-spacing: -.035em;
}
.ng-nwt-voices-centre > span {
width: 7px;
height: 7px;
margin-top: .8rem;
background: var(--color-coral);
border-radius: 50%;
}
/* TOPICS — Larger, closer, actually readable */
.ng-nwt-voice {
position: absolute;
display: flex;
align-items: baseline;
gap: .55rem;
white-space: nowrap;
}
.ng-nwt-voice > span {
color: var(--color-coral);
font-size: .55rem;
font-weight: 850;
letter-spacing: .1em;
}
.ng-nwt-voice strong {
color: var(--color-dark);
font-size: clamp(1rem, 1.55vw, 1.32rem);
font-weight: 750;
letter-spacing: -.025em;
}
/* the one word that genuinely fits our green rule */
.ng-nwt-voice--3 strong {
color: var(--color-green);
}
/* TIGHTER PLACEMENT */
.ng-nwt-voice--1 {
top: 12%;
left: 8%;
}
.ng-nwt-voice--2 {
top: 10%;
right: 8%;
}
.ng-nwt-voice--3 {
top: 36%;
left: 13%;
}
.ng-nwt-voice--4 {
top: 35%;
right: 7%;
}
.ng-nwt-voice--5 {
bottom: 22%;
left: 8%;
}
.ng-nwt-voice--6 {
bottom: 24%;
right: 10%;
}
.ng-nwt-voice--7 {
bottom: 7%;
left: 25%;
}
.ng-nwt-voice--8 {
bottom: 8%;
right: 22%;
}
.ng-nwt-voice--9 {
top: 9%;
left: 50%;
transform: translateX(-50%);
}
/* CONNECTORS — Quiet, meaningful, not spaghetti */
.ng-nwt-voices-line {
position: absolute;
height: 1px;
background: rgba(240,102,83,.35);
transform-origin: left center;
pointer-events: none;
}
.ng-nwt-voices-line--a {
width: 105px;
top: 31%;
left: 29%;
transform: rotate(16deg);
}
.ng-nwt-voices-line--b {
width: 115px;
top: 68%;
right: 27%;
transform: rotate(-15deg);
}
.ng-nwt-voices-line--c {
width: 85px;
bottom: 20%;
left: 37%;
transform: rotate(-27deg);
}
/* EXTRA QUIET GUIDE RINGS */
.ng-nwt-voices-field::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 360px;
height: 360px;
transform: translate(-50%,-50%);
border: 1px dashed rgba(46,59,50,.055);
border-radius: 50%;
pointer-events: none;
}
/* BOTTOM NOTE */
.ng-nwt-voices-bottom {
width: min(100%, 1060px);
display: flex;
align-items: center;
gap: .75rem;
margin: 1.5rem auto 0;
}
.ng-nwt-voices-bottom > span {
width: 7px;
height: 7px;
flex: 0 0 auto;
background: var(--color-coral);
border-radius: 50%;
}
.ng-nwt-voices-bottom p {
margin: 0;
color: rgba(46,59,50,.48);
font-size: .67rem;
}
/* MOBILE */
@media (max-width: 700px) {
.ng-nwt-voices-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-nwt-voices-field {
min-height: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding-top: 1rem;
}
.ng-nwt-voices-centre {
position: relative;
grid-column: 1 / -1;
top: auto;
left: auto;
width: 145px;
margin: 0 auto 2rem;
transform: none;
}
.ng-nwt-voice {
position: relative;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
padding: 1rem .4rem;
border-top: 1px solid rgba(46,59,50,.08);
}
.ng-nwt-voices-line, .ng-nwt-voices-field::after {
display: none;
}
}
/* NWT VOICES — DOTTED CONNECTORS TO THE CENTRE */
.ng-nwt-voices-centre {
z-index: 3;
}
.ng-nwt-voice {
z-index: 3;
}
.ng-nwt-voice-link {
position: absolute;
top: 50%;
left: 50%;
height: 1px;
transform-origin: left center;
pointer-events: none;
z-index: 1;
opacity: .7;
/* nicer than dashed border */
background: repeating-linear-gradient(to right, rgba(240,102,83,.32) 0 3px, transparent 3px 9px);
}
/* little soft dot at outer end */
.ng-nwt-voice-link::after {
content: "";
position: absolute;
right: -2px;
top: 50%;
width: 4px;
height: 4px;
transform: translateY(-50%);
background: rgba(240,102,83,.42);
border-radius: 50%;
}
/* INDIVIDUAL SPOKES — tweak a few px/deg if needed after preview */
.ng-nwt-voice-link--1 {
width: 250px;
transform: rotate(-153deg);
}
.ng-nwt-voice-link--2 {
width: 255px;
transform: rotate(-27deg);
}
.ng-nwt-voice-link--3 {
width: 205px;
transform: rotate(-170deg);
}
.ng-nwt-voice-link--4 {
width: 215px;
transform: rotate(-10deg);
}
.ng-nwt-voice-link--5 {
width: 245px;
transform: rotate(154deg);
}
.ng-nwt-voice-link--6 {
width: 215px;
transform: rotate(16deg);
}
.ng-nwt-voice-link--7 {
width: 205px;
transform: rotate(133deg);
}
.ng-nwt-voice-link--8 {
width: 195px;
transform: rotate(51deg);
}
.ng-nwt-voice-link--9 {
width: 165px;
transform: rotate(-90deg);
}
/* MOBILE */
@media (max-width: 700px) {
.ng-nwt-voice-link {
display: none;
}
}
/* NWT VOICES — CONNECTOR POLISH */
/* kill the old experimental solid lines */
.ng-nwt-voices-line {
display: none !important;
}
/* slightly quieter dotted routes */
.ng-nwt-voice-link {
opacity: .58;
background: repeating-linear-gradient(to right, rgba(240,102,83,.32) 0 3px, transparent 3px 10px);
}
/* tiny endpoint */
.ng-nwt-voice-link::after {
width: 4px;
height: 4px;
right: -2px;
background: rgba(240,102,83,.5);
}
/* ACTUALLY CONNECT TO THE WORDS */
/* Eenzaamheid */
.ng-nwt-voice-link--1 {
width: 475px;
transform: rotate(-159deg);
}
/* Veiligheid */
.ng-nwt-voice-link--2 {
width: 475px;
transform: rotate(-22deg);
}
/* Vergroening */
.ng-nwt-voice-link--3 {
width: 395px;
transform: rotate(-171deg);
}
/* Nieuwbouw */
.ng-nwt-voice-link--4 {
width: 455px;
transform: rotate(-8deg);
}
/* Armoede */
.ng-nwt-voice-link--5 {
width: 455px;
transform: rotate(165deg);
}
/* Gezondheid */
.ng-nwt-voice-link--6 {
width: 420px;
transform: rotate(15deg);
}
/* Overlast */
.ng-nwt-voice-link--7 {
width: 325px;
transform: rotate(145deg);
}
/* Hittestress */
.ng-nwt-voice-link--8 {
width: 345px;
transform: rotate(32deg);
}
/* Zwerfvuil */
.ng-nwt-voice-link--9 {
width: 180px;
transform: rotate(-90deg);
}
.ng-nwt-voices-field::after {
border-color: rgba(46,59,50,.035);
}
/* stronger, still subtle dotted routes */
.ng-nwt-voice-link {
height: 2px;
opacity: .9;
background: repeating-linear-gradient(to right, rgba(240,102,83,.58) 0 4px, transparent 4px 11px);
}
/* clearer endpoint */
.ng-nwt-voice-link::after {
width: 5px;
height: 5px;
right: -2px;
background: rgba(240,102,83,.7);
}
.ng-nwt-voices-field::after {
border-color: rgba(46,59,50,.025);
}
/* NWT VOICES — CLEANER CONNECTOR HIERARCHY */
/* the field creates the stacking context */
.ng-nwt-voices-field {
position: relative;
}
/* big guide ring = very far back */
.ng-nwt-voices-field::after {
z-index: 0;
}
/* dotted spokes sit behind everything important */
.ng-nwt-voice-link {
z-index: 1;
height: 2px;
opacity: .82;
background: repeating-linear-gradient(to right, rgba(240,102,83,.52) 0 4px, transparent 4px 11px);
}
/* endpoint dot */
.ng-nwt-voice-link::after {
content: "";
position: absolute;
right: -2px;
top: 50%;
width: 5px;
height: 5px;
transform: translateY(-50%);
background: rgba(240,102,83,.68);
border-radius: 50%;
}
/* middle circle covers the lines */
.ng-nwt-voices-centre {
z-index: 4;
position: absolute;
background: rgba(255,255,255,.88);
box-shadow: 0 18px 40px rgba(46,59,50,.055);
}
/* text labels always on top */
.ng-nwt-voice {
z-index: 5;
}
/* SHORTER SPOKES — stop BEFORE the labels */
/* 01 — Eenzaamheid */
.ng-nwt-voice-link--1 {
width: 345px;
transform: rotate(-158deg);
}
/* 02 — Veiligheid */
.ng-nwt-voice-link--2 {
width: 355px;
transform: rotate(-23deg);
}
/* 03 — Vergroening */
.ng-nwt-voice-link--3 {
width: 290px;
transform: rotate(-172deg);
}
/* 04 — Nieuwbouw */
.ng-nwt-voice-link--4 {
width: 335px;
transform: rotate(-8deg);
}
/* 05 — Armoede */
.ng-nwt-voice-link--5 {
width: 345px;
transform: rotate(164deg);
}
/* 06 — Gezondheid */
.ng-nwt-voice-link--6 {
width: 330px;
transform: rotate(16deg);
}
/* 07 — Overlast */
.ng-nwt-voice-link--7 {
width: 240px;
transform: rotate(145deg);
}
/* 08 — Hittestress */
.ng-nwt-voice-link--8 {
width: 235px;
transform: rotate(36deg);
}
/* 09 — Zwerfvuil */
.ng-nwt-voice-link--9 {
width: 150px;
transform: rotate(-90deg);
}
.ng-nwt-voices-centre {
background: rgba(255,255,255,.92);
}
/* NWT VOICES — FINAL SPOKE LENGTHS — Leave a clean gap before every word */
/* 01 — Eenzaamheid */
.ng-nwt-voice-link--1 {
width: 275px;
transform: rotate(-158deg);
}
/* 02 — Veiligheid */
.ng-nwt-voice-link--2 {
width: 330px;
transform: rotate(-23deg);
}
/* 03 — Vergroening */
.ng-nwt-voice-link--3 {
width: 225px;
transform: rotate(-172deg);
}
/* 04 — Nieuwbouw */
.ng-nwt-voice-link--4 {
width: 305px;
transform: rotate(-8deg);
}
/* 05 — Armoede */
.ng-nwt-voice-link--5 {
width: 285px;
transform: rotate(164deg);
}
/* 06 — Gezondheid */
.ng-nwt-voice-link--6 {
width: 270px;
transform: rotate(16deg);
}
/* 07 — Overlast */
.ng-nwt-voice-link--7 {
width: 185px;
transform: rotate(145deg);
}
/* 08 — Hittestress */
.ng-nwt-voice-link--8 {
width: 215px;
transform: rotate(36deg);
}
/* 09 — Zwerfvuil */
.ng-nwt-voice-link--9 {
width: 125px;
transform: rotate(-90deg);
}
/* NOORDWERKTSAMEN — 03 — GEEN DEBAT, WEL DIALOOG */
.ng-nwt-dialogue {
position: relative;
padding: clamp(5rem, 7vw, 6.5rem) 0;
overflow: hidden;
color: #fff;
background: var(--color-dark);
}
/* very quiet decorative ring */
.ng-nwt-dialogue::after {
content: "";
position: absolute;
width: 340px;
height: 340px;
right: -170px;
bottom: -150px;
border: 55px solid rgba(255,255,255,.018);
border-radius: 50%;
pointer-events: none;
}
/* HEADING */
.ng-nwt-dialogue-heading {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .46fr);
align-items: end;
gap: clamp(3rem, 7vw, 6rem);
margin-bottom: clamp(4rem, 6vw, 5rem);
}
.ng-nwt-dialogue-kicker {
margin: 0 0 1rem;
color: var(--color-coral);
font-size: .66rem;
font-weight: 850;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nwt-dialogue h2 {
max-width: 620px;
margin: 0;
color: #fff;
font-size: clamp(2.35rem, 3.25vw, 3.35rem);
font-weight: 750;
line-height: 1.01;
letter-spacing: -.047em;
}
.ng-nwt-dialogue-heading > p {
max-width: 400px;
margin: 0 0 .15rem;
color: rgba(255,255,255,.58);
font-size: .88rem;
line-height: 1.8;
}
/* ROUTE */
.ng-nwt-dialogue-route {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 3rem);
padding-top: 1rem;
}
/* horizontal coral route */
.ng-nwt-dialogue-track {
position: absolute;
top: 39px;
left: calc(12.5% - 2px);
right: calc(12.5% - 2px);
height: 1px;
background: rgba(240,102,83,.46);
z-index: 0;
}
/* STEP */
.ng-nwt-dialogue-step {
position: relative;
z-index: 2;
}
.ng-nwt-dialogue-node {
position: relative;
width: 56px;
height: 56px;
display: grid;
place-items: center;
margin-bottom: 1.5rem;
color: var(--color-coral);
background: var(--color-dark);
border: 1px solid rgba(240,102,83,.5);
border-radius: 50%;
}
.ng-nwt-dialogue-node::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
right: -4px;
top: 7px;
background: var(--color-coral);
border-radius: 50%;
}
.ng-nwt-dialogue-node span {
font-size: .59rem;
font-weight: 850;
letter-spacing: .09em;
}
/* STEP COPY */
.ng-nwt-dialogue-step-copy {
max-width: 220px;
}
.ng-nwt-dialogue-step-copy small {
display: block;
margin-bottom: .45rem;
color: var(--color-coral);
font-size: .57rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-nwt-dialogue-step-copy h3 {
margin: 0 0 .65rem;
color: #fff;
font-size: clamp(1.35rem, 1.8vw, 1.6rem);
font-weight: 750;
line-height: 1;
letter-spacing: -.035em;
}
.ng-nwt-dialogue-step-copy p {
margin: 0;
color: rgba(255,255,255,.5);
font-size: .76rem;
line-height: 1.65;
}
/* PRINCIPLE — Not another card — sits underneath the route */
.ng-nwt-dialogue-principle {
grid-column: 2 / 4;
display: grid;
grid-template-columns: auto 1fr auto auto 1fr;
align-items: center;
gap: .65rem 1rem;
margin-top: clamp(3rem, 5vw, 4rem);
padding: 1.35rem 0;
border-top: 1px solid rgba(255,255,255,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.ng-nwt-dialogue-principle span {
color: rgba(255,255,255,.34);
font-size: .56rem;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-nwt-dialogue-principle strong {
color: rgba(255,255,255,.86);
font-size: .72rem;
line-height: 1.4;
}
.ng-nwt-dialogue-principle i {
color: var(--color-coral);
font-style: normal;
}
/* BOTTOM NOTE */
.ng-nwt-dialogue-bottom {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: .75rem;
margin-top: clamp(3rem, 5vw, 4rem);
padding-top: 1.1rem;
border-top: 1px solid rgba(255,255,255,.09);
}
.ng-nwt-dialogue-bottom > span {
width: 7px;
height: 7px;
flex: 0 0 auto;
background: var(--color-coral);
border-radius: 50%;
}
.ng-nwt-dialogue-bottom p {
margin: 0;
color: rgba(255,255,255,.4);
font-size: .67rem;
}
/* MOBILE */
@media (max-width: 850px) {
.ng-nwt-dialogue-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-nwt-dialogue-route {
grid-template-columns: 1fr 1fr;
gap: 3rem 2rem;
}
.ng-nwt-dialogue-track {
display: none;
}
.ng-nwt-dialogue-principle {
grid-column: 1 / -1;
}
}
@media (max-width: 560px) {
.ng-nwt-dialogue-route {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.ng-nwt-dialogue-principle {
grid-template-columns: 1fr;
align-items: start;
gap: .45rem;
}
.ng-nwt-dialogue-principle i {
transform: rotate(90deg);
width: fit-content;
}
}
/* NOORDWERKTSAMEN — 04 — VAN GESPREK NAAR BETEKENIS */
/* HEADING */
/* JOURNEY */
/* CURVED ROUTE */
/* ITEMS */
/* placements */
/* NUMBER + DOT */
/* COPY */
/* CENTRE ITEM — A LITTLE MORE EMPHASIS */
/* * This is one of the rare places where the green language * actually makes semantic sense: trust can "grow". */
/* CLOSING THOUGHT */
/* MOBILE — Route becomes vertical */
/* NOORDWERKTSAMEN — 04 — DE OOGST VAN HET GESPREK */
.ng-nwt-harvest {
position: relative;
padding: clamp(5rem, 7vw, 6.5rem) 0;
overflow: hidden;
background: var(--color-cream);
color: var(--color-dark);
}
/* quiet large detail */
.ng-nwt-harvest::after {
content: "";
position: absolute;
left: -130px;
bottom: -150px;
width: 300px;
height: 300px;
border: 50px solid rgba(46,59,50,.025);
border-radius: 50%;
pointer-events: none;
}
/* LAYOUT */
.ng-nwt-harvest-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0,.82fr) minmax(430px,.74fr);
align-items: center;
gap: clamp(4rem,8vw,7.5rem);
}
/* COPY */
.ng-nwt-harvest-copy {
max-width: 610px;
}
.ng-nwt-harvest-kicker {
margin: 0 0 1rem;
color: var(--color-coral);
font-size: .66rem;
font-weight: 850;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-nwt-harvest h2 {
max-width: 590px;
margin: 0 0 1.6rem;
color: var(--color-dark);
font-size: clamp(2.35rem,3.25vw,3.35rem);
font-weight: 750;
line-height: 1.01;
letter-spacing: -.047em;
}
.ng-nwt-harvest-lead {
max-width: 500px;
margin: 0;
color: rgba(46,59,50,.62);
font-size: .92rem;
line-height: 1.8;
}
/* LITTLE CLOSING THOUGHT */
.ng-nwt-harvest-thought {
display: flex;
align-items: flex-start;
gap: .85rem;
max-width: 500px;
margin-top: 2.5rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(46,59,50,.1);
}
.ng-nwt-harvest-thought > span {
width: 7px;
height: 7px;
flex: 0 0 auto;
margin-top: .42rem;
background: var(--color-coral);
border-radius: 50%;
}
.ng-nwt-harvest-thought p {
margin: 0;
color: rgba(46,59,50,.48);
font-size: .71rem;
line-height: 1.6;
}
.ng-nwt-harvest-thought strong {
color: var(--color-dark);
font-weight: 800;
}
/* PAPER WRAPPER */
.ng-nwt-harvest-sheet-wrap {
position: relative;
width: min(100%,520px);
justify-self: end;
padding: 10px 10px 18px;
}
/* subtle second sheet behind */
.ng-nwt-harvest-sheet-wrap::before {
content: "";
position: absolute;
inset: 18px 2px 4px 20px;
background: #e8e5dc;
border-radius: .55rem 1.7rem 1.7rem 1.7rem;
transform: rotate(1.3deg);
}
/* MAIN SHEET */
.ng-nwt-harvest-sheet {
position: relative;
z-index: 2;
padding: clamp(2rem,3.5vw,2.8rem);
background: #fffdfa;
border: 1px solid rgba(46,59,50,.1);
border-radius: .55rem 2rem 2rem 2rem;
box-shadow: 0 25px 55px rgba(46,59,50,.10);
transform: rotate(-1deg);
}
/* TOP */
.ng-nwt-harvest-sheet-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
padding-bottom: 1.45rem;
border-bottom: 1px solid rgba(46,59,50,.11);
}
.ng-nwt-harvest-sheet-top small {
display: block;
margin-bottom: .35rem;
color: var(--color-coral);
font-size: .56rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-nwt-harvest-sheet-top strong {
display: block;
color: var(--color-dark);
font-size: 1rem;
line-height: 1.2;
}
.ng-nwt-harvest-sheet-top > span {
color: rgba(46,59,50,.36);
font-size: .56rem;
font-weight: 850;
letter-spacing: .12em;
}
/* RESULT ROW */
.ng-nwt-harvest-row {
display: grid;
grid-template-columns: 45px 1fr;
gap: 1.2rem;
padding: 1.65rem 0;
border-bottom: 1px solid rgba(46,59,50,.08);
}
.ng-nwt-harvest-number {
color: var(--color-coral);
font-size: .57rem;
font-weight: 850;
letter-spacing: .1em;
}
.ng-nwt-harvest-row small {
display: block;
margin-bottom: .4rem;
color: rgba(46,59,50,.42);
font-size: .55rem;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-nwt-harvest-row h3 {
margin: 0 0 .55rem;
color: var(--color-dark);
font-size: clamp(1.25rem,1.8vw,1.55rem);
font-weight: 750;
line-height: 1;
letter-spacing: -.03em;
}
.ng-nwt-harvest-row p {
max-width: 330px;
margin: 0;
color: rgba(46,59,50,.58);
font-size: .76rem;
line-height: 1.65;
}
/* SHEET FOOTER */
.ng-nwt-harvest-sheet-bottom {
display: flex;
align-items: center;
gap: .7rem;
padding-top: 1.35rem;
}
.ng-nwt-harvest-sheet-bottom > span {
width: 7px;
height: 7px;
background: var(--color-coral);
border-radius: 50%;
}
.ng-nwt-harvest-sheet-bottom p {
margin: 0;
color: rgba(46,59,50,.4);
font-size: .58rem;
font-weight: 750;
letter-spacing: .04em;
}
/* PIN */
.ng-nwt-harvest-pin {
position: absolute;
z-index: 5;
top: 1px;
right: 44px;
width: 14px;
height: 14px;
background: var(--color-coral);
border: 4px solid var(--color-cream);
border-radius: 50%;
box-shadow: 0 4px 9px rgba(46,59,50,.15);
}
/* RESPONSIVE */
@media (max-width:900px) {
.ng-nwt-harvest-layout {
grid-template-columns: 1fr;
gap: 4rem;
}
.ng-nwt-harvest-sheet-wrap {
justify-self: start;
}
}
@media (max-width:560px) {
.ng-nwt-harvest-sheet {
padding: 1.6rem;
transform: none;
}
.ng-nwt-harvest-sheet-wrap::before {
transform: none;
}
}
/* NOORDWERKTSAMEN — PAGE MOTION */
/* 01 — INTRO */
.ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-meta, .ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-kicker, .ng-nwt-about.is-nwt-motion-ready h2, .ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-intro, .ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-text, .ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-dialogue {
opacity: 0;
}
.ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-meta, .ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-kicker, .ng-nwt-about.is-nwt-motion-ready h2, .ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-intro, .ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-text {
transform: translateY(9px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nwt-about.is-nwt-visible .ng-nwt-about-meta {
opacity: 1;
transform: translateY(0);
transition-delay: 70ms;
}
.ng-nwt-about.is-nwt-visible .ng-nwt-about-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-nwt-about.is-nwt-visible h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 230ms;
}
.ng-nwt-about.is-nwt-visible .ng-nwt-about-intro {
opacity: 1;
transform: translateY(0);
transition-delay: 350ms;
}
.ng-nwt-about.is-nwt-visible .ng-nwt-about-text {
opacity: 1;
transform: translateY(0);
transition-delay: 450ms;
}
/* conversation object */
.ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-dialogue {
transform: translateY(12px);
transition: opacity 600ms ease, transform 650ms cubic-bezier(.18,.82,.25,1);
}
.ng-nwt-about.is-nwt-visible .ng-nwt-about-dialogue {
opacity: 1;
transform: translateY(0);
transition-delay: 280ms;
}
/* contents inside dialogue */
.ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-dialogue .ng-nwt-about-side, .ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-dialogue .ng-nwt-about-middle, .ng-nwt-about.is-nwt-motion-ready .ng-nwt-about-dialogue .ng-nwt-about-note {
opacity: 0;
transition: opacity 350ms ease;
}
.ng-nwt-about.is-nwt-visible .ng-nwt-about-dialogue .ng-nwt-about-side--residents {
opacity: 1;
transition-delay: 620ms;
}
.ng-nwt-about.is-nwt-visible .ng-nwt-about-dialogue .ng-nwt-about-middle {
opacity: 1;
transition-delay: 760ms;
}
.ng-nwt-about.is-nwt-visible .ng-nwt-about-dialogue .ng-nwt-about-side--partners {
opacity: 1;
transition-delay: 900ms;
}
.ng-nwt-about.is-nwt-visible .ng-nwt-about-dialogue .ng-nwt-about-note {
opacity: 1;
transition-delay: 1040ms;
}
/* 02 — WHAT LIVES IN NOORD */
/* heading */
.ng-nwt-voices.is-nwt-motion-ready .ng-nwt-voices-kicker, .ng-nwt-voices.is-nwt-motion-ready h2, .ng-nwt-voices.is-nwt-motion-ready .ng-nwt-voices-heading > p {
opacity: 0;
transform: translateY(9px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nwt-voices.is-nwt-visible .ng-nwt-voices-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-nwt-voices.is-nwt-visible h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-nwt-voices.is-nwt-visible .ng-nwt-voices-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* centre appears first */
.ng-nwt-voices.is-nwt-motion-ready .ng-nwt-voices-centre {
opacity: 0;
transition: opacity 520ms ease;
}
.ng-nwt-voices.is-nwt-visible .ng-nwt-voices-centre {
opacity: 1;
transition-delay: 380ms;
}
/* topics hidden initially */
.ng-nwt-voices.is-nwt-motion-ready .ng-nwt-voice {
opacity: 0;
transition: opacity 320ms ease;
}
/* DOTTED SPOKES — Important: — use clip-path because transform already owns rotation. */
.ng-nwt-voices.is-nwt-motion-ready .ng-nwt-voice-link {
clip-path: inset(0 100% 0 0);
transition: clip-path 520ms cubic-bezier(.2,.75,.25,1);
}
.ng-nwt-voices.is-nwt-visible .ng-nwt-voice-link {
clip-path: inset(0 0 0 0);
}
/* top centre */
.ng-nwt-voices.is-nwt-visible .ng-nwt-voice-link--9 {
transition-delay: 500ms;
}
.ng-nwt-voices.is-nwt-visible .ng-nwt-voice--9 {
opacity: 1;
transition-delay: 910ms;
}
/* upper pair */
.ng-nwt-voices.is-nwt-visible .ng-nwt-voice-link--1, .ng-nwt-voices.is-nwt-visible .ng-nwt-voice-link--2 {
transition-delay: 620ms;
}
.ng-nwt-voices.is-nwt-visible .ng-nwt-voice--1, .ng-nwt-voices.is-nwt-visible .ng-nwt-voice--2 {
opacity: 1;
transition-delay: 1030ms;
}
/* middle pair */
.ng-nwt-voices.is-nwt-visible .ng-nwt-voice-link--3, .ng-nwt-voices.is-nwt-visible .ng-nwt-voice-link--4 {
transition-delay: 760ms;
}
.ng-nwt-voices.is-nwt-visible .ng-nwt-voice--3, .ng-nwt-voices.is-nwt-visible .ng-nwt-voice--4 {
opacity: 1;
transition-delay: 1170ms;
}
/* lower-middle */
.ng-nwt-voices.is-nwt-visible .ng-nwt-voice-link--5, .ng-nwt-voices.is-nwt-visible .ng-nwt-voice-link--6 {
transition-delay: 900ms;
}
.ng-nwt-voices.is-nwt-visible .ng-nwt-voice--5, .ng-nwt-voices.is-nwt-visible .ng-nwt-voice--6 {
opacity: 1;
transition-delay: 1310ms;
}
/* bottom pair */
.ng-nwt-voices.is-nwt-visible .ng-nwt-voice-link--7, .ng-nwt-voices.is-nwt-visible .ng-nwt-voice-link--8 {
transition-delay: 1040ms;
}
.ng-nwt-voices.is-nwt-visible .ng-nwt-voice--7, .ng-nwt-voices.is-nwt-visible .ng-nwt-voice--8 {
opacity: 1;
transition-delay: 1450ms;
}
/* bottom annotation */
.ng-nwt-voices.is-nwt-motion-ready .ng-nwt-voices-bottom {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-nwt-voices.is-nwt-visible .ng-nwt-voices-bottom {
opacity: 1;
transition-delay: 1580ms;
}
/* 03 — DIALOGUE JOURNEY */
/* heading */
.ng-nwt-dialogue.is-nwt-motion-ready .ng-nwt-dialogue-kicker, .ng-nwt-dialogue.is-nwt-motion-ready h2, .ng-nwt-dialogue.is-nwt-motion-ready .ng-nwt-dialogue-heading > p {
opacity: 0;
transform: translateY(9px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 60ms;
}
.ng-nwt-dialogue.is-nwt-visible h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 260ms;
}
/* route draws across */
.ng-nwt-dialogue.is-nwt-motion-ready .ng-nwt-dialogue-track {
transform: scaleX(0);
transform-origin: left center;
transition: transform 1150ms cubic-bezier(.2,.75,.25,1);
}
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-track {
transform: scaleX(1);
transition-delay: 400ms;
}
/* nodes */
.ng-nwt-dialogue.is-nwt-motion-ready .ng-nwt-dialogue-node {
opacity: 0;
transform: scale(.72);
transition: opacity 300ms ease, transform 430ms cubic-bezier(.2,1.3,.3,1);
}
/* step text */
.ng-nwt-dialogue.is-nwt-motion-ready .ng-nwt-dialogue-step-copy {
opacity: 0;
transform: translateY(8px);
transition: opacity 380ms ease, transform 430ms cubic-bezier(.2,.75,.25,1);
}
/* STEP 01 */
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-step--1 .ng-nwt-dialogue-node {
opacity: 1;
transform: scale(1);
transition-delay: 430ms;
}
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-step--1 .ng-nwt-dialogue-step-copy {
opacity: 1;
transform: translateY(0);
transition-delay: 540ms;
}
/* STEP 02 */
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-step--2 .ng-nwt-dialogue-node {
opacity: 1;
transform: scale(1);
transition-delay: 690ms;
}
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-step--2 .ng-nwt-dialogue-step-copy {
opacity: 1;
transform: translateY(0);
transition-delay: 800ms;
}
/* STEP 03 */
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-step--3 .ng-nwt-dialogue-node {
opacity: 1;
transform: scale(1);
transition-delay: 950ms;
}
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-step--3 .ng-nwt-dialogue-step-copy {
opacity: 1;
transform: translateY(0);
transition-delay: 1060ms;
}
/* STEP 04 */
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-step--4 .ng-nwt-dialogue-node {
opacity: 1;
transform: scale(1);
transition-delay: 1210ms;
}
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-step--4 .ng-nwt-dialogue-step-copy {
opacity: 1;
transform: translateY(0);
transition-delay: 1320ms;
}
/* core principle */
.ng-nwt-dialogue.is-nwt-motion-ready .ng-nwt-dialogue-principle {
opacity: 0;
transition: opacity 450ms ease;
}
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-principle {
opacity: 1;
transition-delay: 1480ms;
}
/* bottom note */
.ng-nwt-dialogue.is-nwt-motion-ready .ng-nwt-dialogue-bottom {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-nwt-dialogue.is-nwt-visible .ng-nwt-dialogue-bottom {
opacity: 1;
transition-delay: 1620ms;
}
/* 04 — HARVEST */
/* left copy */
.ng-nwt-harvest.is-nwt-motion-ready .ng-nwt-harvest-kicker, .ng-nwt-harvest.is-nwt-motion-ready h2, .ng-nwt-harvest.is-nwt-motion-ready .ng-nwt-harvest-lead, .ng-nwt-harvest.is-nwt-motion-ready .ng-nwt-harvest-thought {
opacity: 0;
transform: translateY(9px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nwt-harvest.is-nwt-visible .ng-nwt-harvest-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 60ms;
}
.ng-nwt-harvest.is-nwt-visible h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-nwt-harvest.is-nwt-visible .ng-nwt-harvest-lead {
opacity: 1;
transform: translateY(0);
transition-delay: 270ms;
}
.ng-nwt-harvest.is-nwt-visible .ng-nwt-harvest-thought {
opacity: 1;
transform: translateY(0);
transition-delay: 1180ms;
}
/* PAPER ARRIVES — Animate WRAPPER — not rotated sheet. — PaperGate prevention system engaged. */
.ng-nwt-harvest.is-nwt-motion-ready .ng-nwt-harvest-sheet-wrap {
opacity: 0;
transform: translateY(14px);
transition: opacity 620ms ease, transform 680ms cubic-bezier(.18,.82,.25,1);
}
.ng-nwt-harvest.is-nwt-visible .ng-nwt-harvest-sheet-wrap {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* pin */
.ng-nwt-harvest.is-nwt-motion-ready .ng-nwt-harvest-pin {
opacity: 0;
transform: scale(.4);
transition: opacity 250ms ease, transform 400ms cubic-bezier(.2,1.35,.3,1);
}
.ng-nwt-harvest.is-nwt-visible .ng-nwt-harvest-pin {
opacity: 1;
transform: scale(1);
transition-delay: 570ms;
}
/* sheet header + rows */
.ng-nwt-harvest.is-nwt-motion-ready .ng-nwt-harvest-sheet-top, .ng-nwt-harvest.is-nwt-motion-ready .ng-nwt-harvest-row, .ng-nwt-harvest.is-nwt-motion-ready .ng-nwt-harvest-sheet-bottom {
opacity: 0;
transform: translateY(6px);
transition: opacity 340ms ease, transform 400ms cubic-bezier(.2,.75,.25,1);
}
.ng-nwt-harvest.is-nwt-visible .ng-nwt-harvest-sheet-top {
opacity: 1;
transform: translateY(0);
transition-delay: 610ms;
}
.ng-nwt-harvest.is-nwt-visible .ng-nwt-harvest-row:nth-of-type(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 760ms;
}
.ng-nwt-harvest.is-nwt-visible .ng-nwt-harvest-row:nth-of-type(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 900ms;
}
.ng-nwt-harvest.is-nwt-visible .ng-nwt-harvest-row:nth-of-type(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 1040ms;
}
.ng-nwt-harvest.is-nwt-visible .ng-nwt-harvest-sheet-bottom {
opacity: 1;
transform: translateY(0);
transition-delay: 1180ms;
}
/* FINAL CTA — Reused Over-ons component, NWT-specific animation. */
.ng-nwt-final.is-nwt-motion-ready .ng-over-idea-kicker, .ng-nwt-final.is-nwt-motion-ready .ng-over-idea-copy h2, .ng-nwt-final.is-nwt-motion-ready .ng-over-idea-copy > p, .ng-nwt-final.is-nwt-motion-ready .ng-over-idea-action {
opacity: 0;
}
.ng-nwt-final.is-nwt-motion-ready .ng-over-idea-kicker, .ng-nwt-final.is-nwt-motion-ready .ng-over-idea-copy h2, .ng-nwt-final.is-nwt-motion-ready .ng-over-idea-copy > p {
transform: translateY(9px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nwt-final.is-nwt-visible .ng-over-idea-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 60ms;
}
.ng-nwt-final.is-nwt-visible .ng-over-idea-copy h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-nwt-final.is-nwt-visible .ng-over-idea-copy > p {
opacity: 1;
transform: translateY(0);
transition-delay: 270ms;
}
/* animate wrapper, never the circle itself */
.ng-nwt-final.is-nwt-motion-ready .ng-over-idea-action {
transform: translateY(10px);
transition: opacity 540ms ease, transform 600ms cubic-bezier(.18,.82,.25,1);
}
.ng-nwt-final.is-nwt-visible .ng-over-idea-action {
opacity: 1;
transform: translateY(0);
transition-delay: 350ms;
}
/* tiny final arrow nudge */
.ng-nwt-final.is-nwt-visible .ng-over-idea-circle-arrow {
animation: ngNwtFinalArrow .42s 950ms ease both;
}
@keyframes ngNwtFinalArrow {
0%, 100% {
transform: translate(0,0);
}
55% {
transform: translate(3px,-3px);
}
}
/* REDUCED MOTION — JS does not add classes for reduced-motion users, — but this is extra insurance. */
@media (prefers-reduced-motion: reduce) {
.ng-nwt-page *, .ng-nwt-page *::before, .ng-nwt-page *::after {
animation: none !important;
transition: none !important;
}
}
/* HEIKANTSE TUYNEN — PAGE */
.ng-ht-page {
background: var(--color-cream);
}
/* 01 — VISION */
.ng-ht-vision {
position: relative;
padding: clamp(5rem, 7vw, 6.5rem) 0;
overflow: hidden;
background: var(--color-cream);
}
.ng-ht-vision-layout {
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(420px, .72fr);
align-items: center;
gap: clamp(4rem, 8vw, 7rem);
}
/* COPY */
.ng-ht-vision-copy {
max-width: 610px;
}
.ng-ht-vision-meta {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: 2.4rem;
}
.ng-ht-vision-meta span, .ng-ht-vision-meta small {
color: var(--color-coral);
font-size: .63rem;
font-weight: 850;
letter-spacing: .13em;
text-transform: uppercase;
}
.ng-ht-vision-meta i {
width: 38px;
height: 1px;
background: rgba(46,59,50,.16);
}
.ng-ht-vision-kicker, .ng-ht-status-kicker {
margin: 0 0 1rem;
color: var(--color-coral);
font-size: .66rem;
font-weight: 850;
letter-spacing: .14em;
text-transform: uppercase;
}
.ng-ht-vision h2, .ng-ht-status h2 {
max-width: 600px;
margin: 0 0 1.6rem;
color: var(--color-dark);
font-size: clamp(2.35rem, 3.25vw, 3.35rem);
font-weight: 750;
line-height: 1.01;
letter-spacing: -.047em;
}
.ng-ht-vision-lead {
max-width: 520px;
margin: 0 0 1rem;
color: rgba(46,59,50,.8);
font-size: 1rem;
font-weight: 650;
line-height: 1.7;
}
.ng-ht-vision-text {
max-width: 510px;
margin: 0;
color: rgba(46,59,50,.58);
font-size: .9rem;
line-height: 1.8;
}
/* VISION FIELD */
.ng-ht-vision-field {
position: relative;
min-height: 420px;
padding: 2rem;
background: var(--color-green-light);
border-radius: .6rem 2.6rem 2.6rem 2.6rem;
overflow: hidden;
}
.ng-ht-vision-field-top {
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(46,59,50,.46);
font-size: .58rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
/* middle */
.ng-ht-vision-centre {
position: absolute;
top: 50%;
left: 50%;
width: 145px;
height: 145px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transform: translate(-50%,-50%);
background: rgba(255,255,255,.72);
border: 1px solid rgba(46,59,50,.12);
border-radius: 50%;
text-align: center;
box-shadow: 0 16px 34px rgba(46,59,50,.06);
}
.ng-ht-vision-centre small {
color: var(--color-coral);
font-size: .54rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-ht-vision-centre strong {
margin-top: .25rem;
color: var(--color-dark);
font-size: 1.35rem;
line-height: 1;
}
.ng-ht-vision-centre > span {
width: 6px;
height: 6px;
margin-top: .7rem;
background: var(--color-coral);
border-radius: 50%;
}
/* words */
.ng-ht-vision-word {
position: absolute;
color: var(--color-dark);
font-size: clamp(.78rem,1.1vw,.95rem);
font-weight: 750;
}
.ng-ht-vision-word--1 {
top: 24%;
left: 10%;
}
.ng-ht-vision-word--2 {
top: 24%;
right: 9%;
}
.ng-ht-vision-word--3 {
top: 49%;
left: 8%;
}
.ng-ht-vision-word--4 {
top: 50%;
right: 12%;
}
.ng-ht-vision-word--5 {
bottom: 18%;
left: 22%;
}
.ng-ht-vision-word--6 {
right: 21%;
bottom: 18%;
}
/* STATUS */
.ng-ht-status {
position: relative;
padding: clamp(4.75rem, 6.5vw, 6rem) 0;
overflow: hidden;
background: #fffdfa;
border-top: 1px solid rgba(46,59,50,.08);
}
.ng-ht-status-layout {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(320px,.5fr);
align-items: center;
gap: clamp(4rem, 8vw, 7rem);
}
.ng-ht-status-copy {
max-width: 650px;
}
.ng-ht-status-copy > p {
max-width: 520px;
margin: 0;
color: rgba(46,59,50,.62);
font-size: .9rem;
line-height: 1.8;
}
/* ACTIONS */
.ng-ht-status-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem 1.4rem;
margin-top: 2rem;
}
.ng-ht-status-button {
min-height: 50px;
display: inline-flex;
align-items: center;
gap: 1rem;
padding: .35rem .4rem .35rem 1.15rem;
color: var(--color-dark);
border: 1px solid rgba(46,59,50,.15);
border-radius: 999px;
font-size: .76rem;
font-weight: 800;
text-decoration: none;
}
.ng-ht-status-button-arrow {
width: 2.25rem;
height: 2.25rem;
display: grid;
place-items: center;
color: #fff;
background: var(--color-coral);
border-radius: 50%;
}
.ng-ht-status-back {
display: inline-flex;
align-items: center;
gap: .55rem;
color: var(--color-dark);
font-size: .72rem;
font-weight: 800;
text-decoration: none;
}
.ng-ht-status-back span {
color: var(--color-coral);
}
/* STATUS CARD */
.ng-ht-status-card {
max-width: 390px;
justify-self: end;
padding: clamp(2rem,3vw,2.6rem);
color: #fff;
background: var(--color-dark);
border-radius: .55rem 2rem 2rem 2rem;
box-shadow: 0 22px 50px rgba(46,59,50,.12);
}
.ng-ht-status-card-top {
display: flex;
align-items: center;
gap: .65rem;
margin-bottom: 1.5rem;
}
.ng-ht-status-card-top > span {
width: 7px;
height: 7px;
background: var(--color-coral);
border-radius: 50%;
}
.ng-ht-status-card-top small {
color: var(--color-coral);
font-size: .56rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-ht-status-card > strong {
display: block;
margin-bottom: .75rem;
color: #fff;
font-size: clamp(1.5rem,2.2vw,1.9rem);
line-height: 1;
letter-spacing: -.035em;
}
.ng-ht-status-card > p {
max-width: 300px;
margin: 0;
color: rgba(255,255,255,.53);
font-size: .76rem;
line-height: 1.65;
}
/* tiny project route */
.ng-ht-status-line {
display: flex;
align-items: center;
gap: .55rem;
margin-top: 2rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(255,255,255,.1);
}
.ng-ht-status-line span {
color: rgba(255,255,255,.65);
font-size: .55rem;
font-weight: 750;
}
.ng-ht-status-line i {
flex: 1;
height: 1px;
background: rgba(240,102,83,.55);
}
/* MOBILE */
@media (max-width: 900px) {
.ng-ht-vision-layout, .ng-ht-status-layout {
grid-template-columns: 1fr;
gap: 3.5rem;
}
.ng-ht-vision-field, .ng-ht-status-card {
width: min(100%,520px);
justify-self: start;
}
}
@media (max-width: 560px) {
.ng-ht-vision-field {
min-height: 500px;
}
.ng-ht-status-actions {
align-items: flex-start;
flex-direction: column;
}
}
/* FOOTER — NEWSLETTER SIGNUP */
.footer-newsletter-form {
width: 100%;
margin-top: 1.15rem;
}
/* MailPoet form */
.footer-newsletter-form .mailpoet_form {
padding: 0 !important;
}
.footer-newsletter-form .mailpoet_paragraph {
margin: 0 !important;
}
/* Email */
.footer-newsletter-form input[type="email"] {
width: 100%;
min-height: 46px;
padding: .75rem 1rem;
color: var(--color-dark);
background: rgba(255,255,255,.96);
border: 1px solid rgba(255,255,255,.14);
border-radius: .65rem;
font: inherit;
font-size: .72rem;
outline: none;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.footer-newsletter-form input[type="email"]:focus {
border-color: var(--color-coral);
box-shadow: 0 0 0 3px rgba(240,102,83,.13);
}
/* Button */
.footer-newsletter-form input[type="submit"], .footer-newsletter-form button[type="submit"] {
min-height: 42px;
margin-top: .55rem;
padding: .65rem 1rem;
color: #fff;
background: var(--color-coral);
border: 0;
border-radius: 999px;
font: inherit;
font-size: .7rem;
font-weight: 800;
cursor: pointer;
transition: transform 180ms ease;
}
.footer-newsletter-form input[type="submit"]:hover, .footer-newsletter-form button[type="submit"]:hover {
transform: translateY(-2px);
}
.footer-newsletter-privacy {
margin: .7rem 0 0 !important;
color: rgba(255,255,255,.36) !important;
font-size: .58rem !important;
line-height: 1.45 !important;
}
/* NOORDBUITEN — PAGE MOTION */
/* 01 — WAT IS NOORDBUITEN */
.ng-nb-story.is-nb-motion-ready .ng-nb-story__kicker, .ng-nb-story.is-nb-motion-ready h2, .ng-nb-story.is-nb-motion-ready .ng-nb-story__intro {
opacity: 0;
transform: translateY(10px);
transition: opacity 450ms ease, transform 520ms cubic-bezier(.2,.75,.25,1);
}
.ng-nb-story.is-nb-visible .ng-nb-story__kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 60ms;
}
.ng-nb-story.is-nb-visible h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-nb-story.is-nb-visible .ng-nb-story__intro {
opacity: 1;
transform: translateY(0);
transition-delay: 270ms;
}
/* Main overview photo */
.ng-nb-story.is-nb-motion-ready .ng-nb-story__photo {
opacity: 0;
clip-path: inset(0 0 9% 0);
transition: opacity 600ms ease, clip-path 750ms cubic-bezier(.2,.75,.25,1);
}
.ng-nb-story.is-nb-visible .ng-nb-story__photo {
opacity: 1;
clip-path: inset(0 0 0 0);
transition-delay: 320ms;
}
/* Floating themes */
.ng-nb-story.is-nb-motion-ready .ng-nb-story__marker {
opacity: 0;
transform: scale(.88);
transition: opacity 300ms ease, transform 400ms cubic-bezier(.2,1.25,.3,1);
}
.ng-nb-story.is-nb-visible .ng-nb-story__marker--nature {
opacity: 1;
transform: scale(1);
transition-delay: 640ms;
}
.ng-nb-story.is-nb-visible .ng-nb-story__marker--food {
opacity: 1;
transform: scale(1);
transition-delay: 740ms;
}
.ng-nb-story.is-nb-visible .ng-nb-story__marker--meet {
opacity: 1;
transform: scale(1);
transition-delay: 840ms;
}
.ng-nb-story.is-nb-visible .ng-nb-story__marker--learn {
opacity: 1;
transform: scale(1);
transition-delay: 940ms;
}
.ng-nb-story.is-nb-visible .ng-nb-story__marker--move {
opacity: 1;
transform: scale(1);
transition-delay: 1040ms;
}
/* Location */
.ng-nb-story.is-nb-motion-ready .ng-nb-story__location {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-nb-story.is-nb-visible .ng-nb-story__location {
opacity: 1;
transition-delay: 1120ms;
}
/* Little route underneath */
.ng-nb-story.is-nb-motion-ready .ng-nb-story__route {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-nb-story.is-nb-motion-ready .ng-nb-story__route i {
transform: scaleX(0);
transform-origin: left center;
transition: transform 450ms cubic-bezier(.2,.75,.25,1);
}
.ng-nb-story.is-nb-visible .ng-nb-story__route {
opacity: 1;
transition-delay: 1220ms;
}
.ng-nb-story.is-nb-visible .ng-nb-story__route i {
transform: scaleX(1);
transition-delay: 1320ms;
}
/* 02 — DE PLEK GROEIT */
.ng-nb-grow.is-nb-motion-ready .ng-nb-grow-kicker, .ng-nb-grow.is-nb-motion-ready .ng-nb-grow-heading h2, .ng-nb-grow.is-nb-motion-ready .ng-nb-grow-heading > p {
opacity: 0;
transform: translateY(10px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nb-grow.is-nb-visible .ng-nb-grow-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-nb-grow.is-nb-visible .ng-nb-grow-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-nb-grow.is-nb-visible .ng-nb-grow-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* Each project row */
.ng-nb-grow.is-nb-motion-ready .ng-nb-grow-image {
opacity: 0;
clip-path: inset(0 0 12% 0);
transition: opacity 550ms ease, clip-path 700ms cubic-bezier(.2,.75,.25,1);
}
.ng-nb-grow.is-nb-motion-ready .ng-nb-grow-copy {
opacity: 0;
transform: translateY(10px);
transition: opacity 450ms ease, transform 520ms cubic-bezier(.2,.75,.25,1);
}
/* 1 */
.ng-nb-grow.is-nb-visible .ng-nb-grow-item:nth-of-type(1) .ng-nb-grow-image {
opacity: 1;
clip-path: inset(0);
transition-delay: 360ms;
}
.ng-nb-grow.is-nb-visible .ng-nb-grow-item:nth-of-type(1) .ng-nb-grow-copy {
opacity: 1;
transform: translateY(0);
transition-delay: 520ms;
}
/* 2 */
.ng-nb-grow.is-nb-visible .ng-nb-grow-item:nth-of-type(2) .ng-nb-grow-image {
opacity: 1;
clip-path: inset(0);
transition-delay: 700ms;
}
.ng-nb-grow.is-nb-visible .ng-nb-grow-item:nth-of-type(2) .ng-nb-grow-copy {
opacity: 1;
transform: translateY(0);
transition-delay: 860ms;
}
/* 3 */
.ng-nb-grow.is-nb-visible .ng-nb-grow-item:nth-of-type(3) .ng-nb-grow-image {
opacity: 1;
clip-path: inset(0);
transition-delay: 1040ms;
}
.ng-nb-grow.is-nb-visible .ng-nb-grow-item:nth-of-type(3) .ng-nb-grow-copy {
opacity: 1;
transform: translateY(0);
transition-delay: 1200ms;
}
.ng-nb-grow.is-nb-motion-ready .ng-nb-grow-footer {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-nb-grow.is-nb-visible .ng-nb-grow-footer {
opacity: 1;
transition-delay: 1420ms;
}
/* 03 — WAT GEBEURT HIER */
/* Sticky photo */
/* Activity rows */
/* 04 — NOORDBUITEN LEEFT */
.ng-nb-alive.is-nb-motion-ready .ng-nb-alive-kicker, .ng-nb-alive.is-nb-motion-ready .ng-nb-alive-heading h2, .ng-nb-alive.is-nb-motion-ready .ng-nb-alive-heading-row > p {
opacity: 0;
transform: translateY(9px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nb-alive.is-nb-visible .ng-nb-alive-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-nb-alive.is-nb-visible .ng-nb-alive-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-nb-alive.is-nb-visible .ng-nb-alive-heading-row > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* * Route gets uncovered instead of changing its * existing dashed SVG styling. */
.ng-nb-alive.is-nb-motion-ready .ng-nb-alive-route {
clip-path: inset(0 100% 0 0);
transition: clip-path 1100ms cubic-bezier(.2,.75,.25,1);
}
.ng-nb-alive.is-nb-visible .ng-nb-alive-route {
clip-path: inset(0);
transition-delay: 360ms;
}
/* * Photo already owns translateX + rotate, * so opacity only. No PaperGate's cousin. */
.ng-nb-alive.is-nb-motion-ready .ng-nb-alive-photo {
opacity: 0;
transition: opacity 600ms ease;
}
.ng-nb-alive.is-nb-visible .ng-nb-alive-photo {
opacity: 1;
transition-delay: 430ms;
}
/* Scattered notes already use rotate transforms */
.ng-nb-alive.is-nb-motion-ready .ng-nb-alive-note {
opacity: 0;
transition: opacity 350ms ease;
}
.ng-nb-alive.is-nb-visible .ng-nb-alive-note--meet {
opacity: 1;
transition-delay: 680ms;
}
.ng-nb-alive.is-nb-visible .ng-nb-alive-note--play {
opacity: 1;
transition-delay: 800ms;
}
.ng-nb-alive.is-nb-visible .ng-nb-alive-note--make {
opacity: 1;
transition-delay: 920ms;
}
.ng-nb-alive.is-nb-visible .ng-nb-alive-note--learn {
opacity: 1;
transition-delay: 1040ms;
}
.ng-nb-alive.is-nb-motion-ready .ng-nb-alive-message, .ng-nb-alive.is-nb-motion-ready .ng-nb-alive-footer {
opacity: 0;
transition: opacity 420ms ease;
}
.ng-nb-alive.is-nb-visible .ng-nb-alive-message {
opacity: 1;
transition-delay: 1160ms;
}
.ng-nb-alive.is-nb-visible .ng-nb-alive-footer {
opacity: 1;
transition-delay: 1320ms;
}
/* 05 — WOENSDAG */
/* vertical word already rotated */
/* Copy */
/* Workbench route */
/* * Tags already own rotations. * Only fade them in. */
/* 06 — SAMEN MAKEN WE DE PLEK */
/* SAMEN already has a rotation */
.ng-nb-together.is-nb-motion-ready .ng-nb-together-word {
opacity: 0;
transition: opacity 650ms ease;
}
.ng-nb-together.is-nb-visible .ng-nb-together-word {
opacity: .95;
transition-delay: 80ms;
}
.ng-nb-together.is-nb-motion-ready .ng-nb-together-kicker, .ng-nb-together.is-nb-motion-ready .ng-nb-together-copy h2, .ng-nb-together.is-nb-motion-ready .ng-nb-together-copy > p, .ng-nb-together.is-nb-motion-ready .ng-nb-together-button {
opacity: 0;
transform: translateY(9px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nb-together.is-nb-visible .ng-nb-together-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 180ms;
}
.ng-nb-together.is-nb-visible .ng-nb-together-copy h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 280ms;
}
.ng-nb-together.is-nb-visible .ng-nb-together-copy > p {
opacity: 1;
transform: translateY(0);
transition-delay: 400ms;
}
.ng-nb-together.is-nb-visible .ng-nb-together-button {
opacity: 1;
transform: translateY(0);
transition-delay: 520ms;
}
/* Activity strip */
.ng-nb-together.is-nb-motion-ready .ng-nb-together-strip {
opacity: 0;
transition: opacity 450ms ease;
}
.ng-nb-together.is-nb-visible .ng-nb-together-strip {
opacity: 1;
transition-delay: 680ms;
}
.ng-nb-together.is-nb-motion-ready .ng-nb-together-things > span {
opacity: 0;
transform: translateY(5px);
transition: opacity 300ms ease, transform 350ms ease;
}
.ng-nb-together.is-nb-visible .ng-nb-together-things > span:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 820ms;
}
.ng-nb-together.is-nb-visible .ng-nb-together-things > span:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 920ms;
}
.ng-nb-together.is-nb-visible .ng-nb-together-things > span:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 1020ms;
}
.ng-nb-together.is-nb-visible .ng-nb-together-things > span:nth-child(4) {
opacity: 1;
transform: translateY(0);
transition-delay: 1120ms;
}
.ng-nb-together.is-nb-motion-ready .ng-nb-together-bottom {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-nb-together.is-nb-visible .ng-nb-together-bottom {
opacity: 1;
transition-delay: 1260ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-nb-page *, .ng-nb-page *::before, .ng-nb-page *::after {
animation: none !important;
transition: none !important;
}
}
/* PLEKKEN & PROJECTEN — ANIMATION */
@media (prefers-reduced-motion: reduce) {
.ng-nbp-intro, .ng-nbp-progress, .ng-nbp-blueprint, .ng-nbp-landscape {
animation: none !important;
transition: none !important;
}
}
/* REVEAL BASE */
[data-nbp-reveal].is-animatable .ng-nbp-progress-heading, [data-nbp-reveal].is-animatable .ng-nbp-blueprint-heading, [data-nbp-reveal].is-animatable .ng-nbp-landscape-heading {
opacity: 0;
transform: translateY(32px);
transition: opacity .7s ease, transform .7s ease;
}
[data-nbp-reveal].is-in-view .ng-nbp-progress-heading, [data-nbp-reveal].is-in-view .ng-nbp-blueprint-heading, [data-nbp-reveal].is-in-view .ng-nbp-landscape-heading {
opacity: 1;
transform: translateY(0);
}
/* INTRO ORBIT */
[data-nbp-intro].is-animatable .ng-nbp-intro-copy {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
[data-nbp-intro].is-animatable .ng-nbp-intro-center {
opacity: 0;
transform: translate(-50%, -50%) scale(.88);
transition: opacity .65s ease, transform .65s ease;
transition-delay: .15s;
}
[data-nbp-intro].is-animatable .ng-nbp-intro-node {
opacity: 0;
transition: opacity .55s ease, transform .55s ease;
}
[data-nbp-intro].is-animatable .ng-nbp-intro-node--green {
transform: translateX(-50%) translateY(-10px);
transition-delay: .18s;
}
[data-nbp-intro].is-animatable .ng-nbp-intro-node--build {
transform: translateY(-50%) translateX(10px);
transition-delay: .26s;
}
[data-nbp-intro].is-animatable .ng-nbp-intro-node--meet {
transform: translateX(-50%) translateY(10px);
transition-delay: .34s;
}
[data-nbp-intro].is-animatable .ng-nbp-intro-node--play {
transform: translateY(-50%) translateX(-10px);
transition-delay: .42s;
}
[data-nbp-intro].is-animatable .ng-nbp-intro-bottom {
opacity: 0;
transform: translateY(18px);
transition: opacity .6s ease, transform .6s ease;
transition-delay: .5s;
}
[data-nbp-intro].is-in-view .ng-nbp-intro-copy {
opacity: 1;
transform: translateY(0);
}
[data-nbp-intro].is-in-view .ng-nbp-intro-center {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
[data-nbp-intro].is-in-view .ng-nbp-intro-node--green {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
[data-nbp-intro].is-in-view .ng-nbp-intro-node--build {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
[data-nbp-intro].is-in-view .ng-nbp-intro-node--meet {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
[data-nbp-intro].is-in-view .ng-nbp-intro-node--play {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
[data-nbp-intro].is-in-view .ng-nbp-intro-bottom {
opacity: 1;
transform: translateY(0);
}
[data-nbp-intro].is-in-view .ng-nbp-orbit--outer {
animation: ngNbpOrbitSpin 24s linear infinite;
}
[data-nbp-intro].is-in-view .ng-nbp-orbit--inner {
animation: ngNbpOrbitSpinReverse 18s linear infinite;
}
[data-nbp-intro].is-in-view .ng-nbp-intro-center {
animation: ngNbpCenterFloat 4.5s ease-in-out infinite;
}
[data-nbp-intro].is-in-view .ng-nbp-intro-node span {
animation: ngNbpNodePulse 3.6s ease-in-out infinite;
}
[data-nbp-intro].is-in-view .ng-nbp-intro-node--build span {
animation-delay: .4s;
}
[data-nbp-intro].is-in-view .ng-nbp-intro-node--meet span {
animation-delay: .8s;
}
[data-nbp-intro].is-in-view .ng-nbp-intro-node--play span {
animation-delay: 1.2s;
}
/* PROGRESS BOARD */
[data-nbp-board].is-animatable {
opacity: 0;
transform: translateY(34px);
transition: opacity .75s ease, transform .75s ease;
}
[data-nbp-board].is-animatable .ng-nbp-board-visual img {
transform: scale(1.06);
transition: transform 1s ease;
}
[data-nbp-board].is-animatable .ng-nbp-board-info > * {
opacity: 0;
transform: translateY(18px);
transition: opacity .55s ease, transform .55s ease;
}
[data-nbp-board].is-animatable .ng-nbp-board-top {
transition-delay: .08s;
}
[data-nbp-board].is-animatable .ng-nbp-status-group:nth-of-type(1) {
transition-delay: .18s;
}
[data-nbp-board].is-animatable .ng-nbp-status-group:nth-of-type(2) {
transition-delay: .28s;
}
[data-nbp-board].is-in-view {
opacity: 1;
transform: translateY(0);
}
[data-nbp-board].is-in-view .ng-nbp-board-visual img {
transform: scale(1);
}
[data-nbp-board].is-in-view .ng-nbp-board-info > * {
opacity: 1;
transform: translateY(0);
}
.ng-nbp-progress-route {
overflow: hidden;
}
[data-nbp-reveal].is-animatable .ng-nbp-progress-route {
opacity: 0;
transform: translateY(18px);
transition: opacity .55s ease, transform .55s ease;
transition-delay: .35s;
}
[data-nbp-reveal].is-animatable .ng-nbp-progress-route i {
transform: scaleX(0);
transform-origin: left;
transition: transform .7s ease;
transition-delay: .5s;
}
[data-nbp-reveal].is-in-view .ng-nbp-progress-route {
opacity: 1;
transform: translateY(0);
}
[data-nbp-reveal].is-in-view .ng-nbp-progress-route i {
transform: scaleX(1);
}
/* BLUEPRINT */
[data-nbp-blueprint].is-animatable .ng-nbp-plan-item, [data-nbp-blueprint].is-animatable .ng-nbp-plan-center {
opacity: 0;
transform: translateY(24px);
transition: opacity .55s ease, transform .55s ease;
}
[data-nbp-blueprint].is-animatable .ng-nbp-plan-item--kas {
transition-delay: .05s;
}
[data-nbp-blueprint].is-animatable .ng-nbp-plan-item--coffee {
transition-delay: .12s;
}
[data-nbp-blueprint].is-animatable .ng-nbp-plan-item--water {
transition-delay: .19s;
}
[data-nbp-blueprint].is-animatable .ng-nbp-plan-item--workshop {
transition-delay: .26s;
}
[data-nbp-blueprint].is-animatable .ng-nbp-plan-item--circular {
transition-delay: .33s;
}
[data-nbp-blueprint].is-animatable .ng-nbp-plan-item--terrace {
transition-delay: .40s;
}
[data-nbp-blueprint].is-animatable .ng-nbp-plan-center {
transition-delay: .48s;
}
[data-nbp-blueprint].is-in-view .ng-nbp-plan-item, [data-nbp-blueprint].is-in-view .ng-nbp-plan-center {
opacity: 1;
transform: translateY(0);
}
[data-nbp-blueprint].is-in-view .ng-nbp-plan-center {
animation: ngNbpCenterPulse 4.2s ease-in-out infinite;
}
/* GROWTH SECTION */
[data-nbp-growth].is-animatable .ng-nbp-growth-main, [data-nbp-growth].is-animatable .ng-nbp-growth-fact, [data-nbp-growth].is-animatable .ng-nbp-growth-note {
opacity: 0;
transform: translateY(26px);
transition: opacity .6s ease, transform .6s ease;
}
[data-nbp-growth].is-animatable .ng-nbp-growth-main {
transition-delay: .05s;
}
[data-nbp-growth].is-animatable .ng-nbp-growth-fact--tree {
transition-delay: .16s;
}
[data-nbp-growth].is-animatable .ng-nbp-growth-fact--bees {
transition-delay: .27s;
}
[data-nbp-growth].is-animatable .ng-nbp-growth-fact--garden {
transition-delay: .38s;
}
[data-nbp-growth].is-animatable .ng-nbp-growth-note {
transition-delay: .48s;
}
[data-nbp-growth].is-in-view .ng-nbp-growth-main, [data-nbp-growth].is-in-view .ng-nbp-growth-fact, [data-nbp-growth].is-in-view .ng-nbp-growth-note {
opacity: 1;
transform: translateY(0);
}
[data-nbp-growth].is-animatable .ng-nbp-growth-stem span {
display: block;
transform: scaleY(0);
transform-origin: top;
transition: transform .85s ease;
transition-delay: .2s;
}
[data-nbp-growth].is-in-view .ng-nbp-growth-stem span {
transform: scaleY(1);
}
/* KEYFRAMES */
@keyframes ngNbpOrbitSpin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes ngNbpOrbitSpinReverse {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes ngNbpCenterFloat {
0%, 100% {
transform: translate(-50%, -50%) translateY(0);
}
50% {
transform: translate(-50%, -50%) translateY(-6px);
}
}
@keyframes ngNbpNodePulse {
0%, 100% {
box-shadow: 0 4px 14px rgba(46, 59, 50, .12);
}
50% {
box-shadow: 0 6px 22px rgba(46, 59, 50, .22);
}
}
@keyframes ngNbpCenterPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(240, 102, 83, 0);
}
50% {
box-shadow: 0 0 0 10px rgba(240, 102, 83, 0.06);
}
}
/* PLEKKEN & PROJECTEN — BOARD SIZE — Keep original compact composition with any source image */
@media (min-width: 901px) {
.ng-nbp-board {
height: 610px;
min-height: 610px;
}
.ng-nbp-board-visual {
height: 610px;
min-height: 0;
}
.ng-nbp-board-visual img {
position: static;
width: 100%;
height: 100%;
object-fit: cover;
}
.ng-nbp-board-info {
height: 610px;
min-height: 0;
}
}
/* Mobile goes back to natural stacking */
@media (max-width: 900px) {
.ng-nbp-board {
height: auto;
min-height: 0;
}
.ng-nbp-board-visual {
height: clamp(380px, 65vw, 520px);
min-height: 0;
}
.ng-nbp-board-info {
height: auto;
}
}
/* NOORDBUITEN ACTIVITEITEN — MOTION PASS */
/* 01 — INTRO */
.ng-nba-intro.is-nba-motion-ready .ng-nba-intro-kicker, .ng-nba-intro.is-nba-motion-ready .ng-nba-moment-copy h1, .ng-nba-intro.is-nba-motion-ready .ng-nba-moment-copy > p:not(.ng-nba-intro-kicker) {
opacity: 0;
transform: translateY(10px);
transition: opacity 430ms ease, transform 520ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-intro.is-nba-visible .ng-nba-intro-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 60ms;
}
.ng-nba-intro.is-nba-visible .ng-nba-moment-copy h1 {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-nba-intro.is-nba-visible .ng-nba-moment-copy > p:not(.ng-nba-intro-kicker) {
opacity: 1;
transform: translateY(0);
transition-delay: 260ms;
}
/* little topic words */
.ng-nba-intro.is-nba-motion-ready .ng-nba-moment-tags span {
opacity: 0;
transform: translateY(6px);
transition: opacity 320ms ease, transform 380ms ease;
}
.ng-nba-intro.is-nba-visible .ng-nba-moment-tags span:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 380ms;
}
.ng-nba-intro.is-nba-visible .ng-nba-moment-tags span:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 450ms;
}
.ng-nba-intro.is-nba-visible .ng-nba-moment-tags span:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 520ms;
}
.ng-nba-intro.is-nba-visible .ng-nba-moment-tags span:nth-child(4) {
opacity: 1;
transform: translateY(0);
transition-delay: 590ms;
}
/* * Main image already owns rotation through its CSS. * Reveal with clip-path instead of transform. */
.ng-nba-intro.is-nba-motion-ready .ng-nba-moment-photo {
opacity: 0;
clip-path: inset(0 0 12% 0);
transition: opacity 580ms ease, clip-path 720ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-intro.is-nba-visible .ng-nba-moment-photo {
opacity: 1;
clip-path: inset(0);
transition-delay: 230ms;
}
/* * These already use transforms for their layout/rotation. * Opacity only = no PaperGate. */
.ng-nba-intro.is-nba-motion-ready .ng-nba-moment-photo-small, .ng-nba-intro.is-nba-motion-ready .ng-nba-moment-word, .ng-nba-intro.is-nba-motion-ready .ng-nba-moment-stamp, .ng-nba-intro.is-nba-motion-ready .ng-nba-moment-note {
opacity: 0;
transition: opacity 420ms ease;
}
.ng-nba-intro.is-nba-visible .ng-nba-moment-word {
opacity: 1;
transition-delay: 350ms;
}
.ng-nba-intro.is-nba-visible .ng-nba-moment-photo-small {
opacity: 1;
transition-delay: 520ms;
}
.ng-nba-intro.is-nba-visible .ng-nba-moment-stamp {
opacity: 1;
transition-delay: 680ms;
}
.ng-nba-intro.is-nba-visible .ng-nba-moment-note {
opacity: 1;
transition-delay: 820ms;
}
.ng-nba-intro.is-nba-motion-ready .ng-nba-intro-bottom {
opacity: 0;
transform: translateY(7px);
transition: opacity 400ms ease, transform 430ms ease;
}
.ng-nba-intro.is-nba-visible .ng-nba-intro-bottom {
opacity: 1;
transform: translateY(0);
transition-delay: 940ms;
}
/* 02 — PAUWELSDAG */
.ng-nba-feature.is-nba-motion-ready .ng-nba-feature-kicker, .ng-nba-feature.is-nba-motion-ready .ng-nba-feature-heading h2, .ng-nba-feature.is-nba-motion-ready .ng-nba-feature-heading > p {
opacity: 0;
transform: translateY(10px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-feature.is-nba-visible .ng-nba-feature-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-nba-feature.is-nba-visible .ng-nba-feature-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-nba-feature.is-nba-visible .ng-nba-feature-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* whole event card */
.ng-nba-feature.is-nba-motion-ready .ng-nba-event {
opacity: 0;
transform: translateY(12px);
transition: opacity 520ms ease, transform 600ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-feature.is-nba-visible .ng-nba-event {
opacity: 1;
transform: translateY(0);
transition-delay: 350ms;
}
/* photograph reveals */
.ng-nba-feature.is-nba-motion-ready .ng-nba-event-image {
clip-path: inset(0 0 10% 0);
transition: clip-path 720ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-feature.is-nba-visible .ng-nba-event-image {
clip-path: inset(0);
transition-delay: 400ms;
}
/* coral date strip */
.ng-nba-feature.is-nba-motion-ready .ng-nba-event-date {
opacity: 0;
transform: translateY(-8px);
transition: opacity 400ms ease, transform 480ms ease;
}
.ng-nba-feature.is-nba-visible .ng-nba-event-date {
opacity: 1;
transform: translateY(0);
transition-delay: 580ms;
}
/* information */
.ng-nba-feature.is-nba-motion-ready .ng-nba-event-topline, .ng-nba-feature.is-nba-motion-ready .ng-nba-event-copy h3, .ng-nba-feature.is-nba-motion-ready .ng-nba-event-copy > p, .ng-nba-feature.is-nba-motion-ready .ng-nba-event-copy ul, .ng-nba-feature.is-nba-motion-ready .ng-nba-event-button {
opacity: 0;
transform: translateY(8px);
transition: opacity 360ms ease, transform 430ms ease;
}
.ng-nba-feature.is-nba-visible .ng-nba-event-topline {
opacity: 1;
transform: translateY(0);
transition-delay: 650ms;
}
.ng-nba-feature.is-nba-visible .ng-nba-event-copy h3 {
opacity: 1;
transform: translateY(0);
transition-delay: 730ms;
}
.ng-nba-feature.is-nba-visible .ng-nba-event-copy > p {
opacity: 1;
transform: translateY(0);
transition-delay: 820ms;
}
.ng-nba-feature.is-nba-visible .ng-nba-event-copy ul {
opacity: 1;
transform: translateY(0);
transition-delay: 910ms;
}
.ng-nba-feature.is-nba-visible .ng-nba-event-button {
opacity: 1;
transform: translateY(0);
transition-delay: 1010ms;
}
.ng-nba-feature.is-nba-motion-ready .ng-nba-feature-note {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-nba-feature.is-nba-visible .ng-nba-feature-note {
opacity: 1;
transition-delay: 1160ms;
}
/* 03 — VERHALENBANK */
.ng-nba-stories.is-nba-motion-ready .ng-nba-stories-kicker, .ng-nba-stories.is-nba-motion-ready .ng-nba-stories-heading h2, .ng-nba-stories.is-nba-motion-ready .ng-nba-stories-heading > p {
opacity: 0;
transform: translateY(10px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-stories.is-nba-visible .ng-nba-stories-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-nba-stories.is-nba-visible .ng-nba-stories-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-nba-stories.is-nba-visible .ng-nba-stories-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* * Centre artwork already owns translateX(-50%). * Never animate transform on the figure itself. */
.ng-nba-stories.is-nba-motion-ready .ng-nba-story-visual {
opacity: 0;
transition: opacity 520ms ease;
}
.ng-nba-stories.is-nba-motion-ready .ng-nba-story-visual img {
transform: scale(.97);
transition: transform 650ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-stories.is-nba-visible .ng-nba-story-visual {
opacity: 1;
transition-delay: 380ms;
}
.ng-nba-stories.is-nba-visible .ng-nba-story-visual img {
transform: scale(1);
transition-delay: 380ms;
}
/* quotes */
.ng-nba-stories.is-nba-motion-ready .ng-nba-story-voice {
opacity: 0;
transform: translateY(7px);
transition: opacity 380ms ease, transform 430ms ease;
}
.ng-nba-stories.is-nba-visible .ng-nba-story-voice--left {
opacity: 1;
transform: translateY(0);
transition-delay: 560ms;
}
.ng-nba-stories.is-nba-visible .ng-nba-story-voice--right {
opacity: 1;
transform: translateY(0);
transition-delay: 760ms;
}
/* * Right SVG already owns scaleX(-1), * so don't touch its transform. */
.ng-nba-stories.is-nba-motion-ready .ng-nba-story-tail {
opacity: 0;
transition: opacity 430ms ease;
}
.ng-nba-stories.is-nba-visible .ng-nba-story-tail {
opacity: 1;
transition-delay: 900ms;
}
/* 04 — CAS DE DAS */
.ng-nba-cas.is-nba-motion-ready .ng-nba-cas-kicker, .ng-nba-cas.is-nba-motion-ready .ng-nba-cas-copy h2, .ng-nba-cas.is-nba-motion-ready .ng-nba-cas-copy > p:not(.ng-nba-cas-kicker), .ng-nba-cas.is-nba-motion-ready .ng-nba-cas-status {
opacity: 0;
transform: translateY(9px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-copy h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-copy > p:not(.ng-nba-cas-kicker) {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-status {
opacity: 1;
transform: translateY(0);
transition-delay: 360ms;
}
/* ground */
.ng-nba-cas.is-nba-motion-ready .ng-nba-cas-ground {
opacity: 0;
transition: opacity 480ms ease;
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-ground {
opacity: 1;
transition-delay: 400ms;
}
/* dotted adventure route */
.ng-nba-cas.is-nba-motion-ready .ng-nba-cas-trail {
clip-path: inset(0 100% 0 0);
transition: clip-path 1100ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-trail {
clip-path: inset(0);
transition-delay: 460ms;
}
/* * Cas owns translateX(-50%) and a hover transform. * Opacity only on figure, scale image inside. */
.ng-nba-cas.is-nba-motion-ready .ng-nba-cas-figure {
opacity: 0;
transition: opacity 500ms ease;
}
.ng-nba-cas.is-nba-motion-ready .ng-nba-cas-figure img {
transform: scale(.96);
transition: transform 650ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-figure {
opacity: 1;
transition-delay: 650ms;
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-figure img {
transform: scale(1);
transition-delay: 650ms;
}
/* * Markers all have their own rotations. * Fade only. */
.ng-nba-cas.is-nba-motion-ready .ng-nba-cas-marker, .ng-nba-cas.is-nba-motion-ready .ng-nba-cas-whisper, .ng-nba-cas.is-nba-motion-ready .ng-nba-cas-footprints, .ng-nba-cas.is-nba-motion-ready .ng-nba-cas-sprout {
opacity: 0;
transition: opacity 330ms ease;
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-marker--look {
opacity: 1;
transition-delay: 800ms;
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-marker--discover {
opacity: 1;
transition-delay: 920ms;
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-marker--think {
opacity: 1;
transition-delay: 1040ms;
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-whisper {
opacity: 1;
transition-delay: 1160ms;
}
/* footprints normally have opacity .2 */
.ng-nba-cas.is-nba-visible .ng-nba-cas-footprints {
opacity: .2;
transition-delay: 1240ms;
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-sprout {
opacity: 1;
transition-delay: 1320ms;
}
.ng-nba-cas.is-nba-motion-ready .ng-nba-cas-bottom {
opacity: 0;
transform: translateY(7px);
transition: opacity 400ms ease, transform 430ms ease;
}
.ng-nba-cas.is-nba-visible .ng-nba-cas-bottom {
opacity: 1;
transform: translateY(0);
transition-delay: 1420ms;
}
/* 05 — DOOR HET JAAR HEEN */
.ng-nba-year.is-nba-motion-ready .ng-nba-year-kicker, .ng-nba-year.is-nba-motion-ready .ng-nba-year-heading h2, .ng-nba-year.is-nba-motion-ready .ng-nba-year-heading > p {
opacity: 0;
transform: translateY(10px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-year.is-nba-visible .ng-nba-year-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-nba-year.is-nba-visible .ng-nba-year-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-nba-year.is-nba-visible .ng-nba-year-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* central dotted route */
.ng-nba-year.is-nba-motion-ready .ng-nba-year-line {
clip-path: inset(0 100% 0 0);
transition: clip-path 1200ms cubic-bezier(.2,.75,.25,1);
}
.ng-nba-year.is-nba-visible .ng-nba-year-line {
clip-path: inset(0);
transition-delay: 370ms;
}
/* moments */
.ng-nba-year.is-nba-motion-ready .ng-nba-year-moment {
opacity: 0;
transform: translateY(8px);
transition: opacity 360ms ease, transform 420ms ease;
}
.ng-nba-year.is-nba-visible .ng-nba-year-moment--market {
opacity: 1;
transform: translateY(0);
transition-delay: 500ms;
}
.ng-nba-year.is-nba-visible .ng-nba-year-moment--trees {
opacity: 1;
transform: translateY(0);
transition-delay: 650ms;
}
.ng-nba-year.is-nba-visible .ng-nba-year-moment--bio {
opacity: 1;
transform: translateY(0);
transition-delay: 800ms;
}
.ng-nba-year.is-nba-visible .ng-nba-year-moment--nldoet {
opacity: 1;
transform: translateY(0);
transition-delay: 950ms;
}
.ng-nba-year.is-nba-visible .ng-nba-year-moment--music {
opacity: 1;
transform: translateY(0);
transition-delay: 1100ms;
}
/* little aside */
.ng-nba-year.is-nba-motion-ready .ng-nba-year-note, .ng-nba-year.is-nba-motion-ready .ng-nba-year-footer {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-nba-year.is-nba-visible .ng-nba-year-note {
opacity: 1;
transition-delay: 1240ms;
}
.ng-nba-year.is-nba-visible .ng-nba-year-footer {
opacity: 1;
transition-delay: 1380ms;
}
/* ACTIVITEITEN — CAS SPACING FIX */
@media (min-width: 901px) {
.ng-nba-cas-adventure {
min-height: 430px;
}
.ng-nba-cas {
padding-bottom: clamp(4.5rem, 6vw, 5.5rem);
}
.ng-nba-cas-bottom {
margin-top: 1rem;
}
}
/* ACTIVITEITEN — VERHALENBANK CAPTION FIX */
.ng-nba-story-visual figcaption {
position: relative;
z-index: 6;
margin-top: 8px;
}
/* ACTIVITEITEN — CAS COMPACT LAYOUT */
@media (min-width: 901px) {
/* less giant section padding */
.ng-nba-cas {
padding: clamp(4.5rem, 5vw, 5.5rem) 0;
}
/* compact the adventure area */
.ng-nba-cas-adventure {
min-height: 455px;
}
/* Cas — smaller so he doesn't eat the labels */
.ng-nba-cas-figure {
left: 52%;
bottom: 22px;
width: clamp(275px, 28vw, 330px);
}
/* ground follows Cas */
.ng-nba-cas-ground {
bottom: 28px;
width: 440px;
height: 125px;
}
.ng-nba-cas-ground::after {
width: 340px;
height: 62px;
}
/* adventure labels */
.ng-nba-cas-marker--look {
left: 5%;
bottom: 68px;
}
.ng-nba-cas-marker--discover {
left: 28%;
top: 28px;
}
.ng-nba-cas-marker--think {
right: 3%;
bottom: 76px;
}
/* little story note */
.ng-nba-cas-whisper {
top: 38px;
right: 1%;
}
/* paws follow the smaller composition */
.ng-nba-cas-footprints--one {
left: 25%;
bottom: 125px;
}
.ng-nba-cas-footprints--two {
right: 19%;
bottom: 100px;
}
/* decorative plants */
.ng-nba-cas-sprout--one {
bottom: 42px;
}
.ng-nba-cas-sprout--two {
bottom: 48px;
}
/* bottom note no longer lives miles away */
.ng-nba-cas-bottom {
max-width: 560px;
margin-top: .5rem;
padding-top: 1.35rem;
}
}
/* NOORDBUITEN – MEEDOEN — Subtle scroll reveal animation */
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-reveal {
opacity: 0;
transform: translate3d(0, 28px, 0);
transition: opacity 620ms ease, transform 620ms ease;
transition-delay: var(--nbm-delay, 0ms);
will-change: opacity, transform;
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-reveal--left {
transform: translate3d(-38px, 28px, 0);
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-reveal--right {
transform: translate3d(38px, 28px, 0);
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-reveal--image {
overflow: hidden;
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-reveal--image img {
transform: scale(1.05);
transition: transform 900ms ease, filter 900ms ease;
filter: saturate(.96);
will-change: transform, filter;
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-reveal.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-reveal--image.is-visible img {
transform: scale(1);
filter: saturate(1);
}
/* Intro bars */
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-intro-visual .ng-nbm-time-row i {
transform: scaleX(0);
transform-origin: left center;
transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-intro-visual.is-visible .ng-nbm-time-row--small i {
transition-delay: 120ms;
transform: scaleX(1);
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-intro-visual.is-visible .ng-nbm-time-row--regular i {
transition-delay: 220ms;
transform: scaleX(1);
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-intro-visual.is-visible .ng-nbm-time-row--often i {
transition-delay: 320ms;
transform: scaleX(1);
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-intro-visual .ng-nbm-time-row--idea strong, .ng-nbm-page.ng-nbm-motion-ready .ng-nbm-intro-visual .ng-nbm-intro-note {
opacity: 0;
transform: translateY(12px);
transition: opacity 500ms ease, transform 500ms ease;
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-intro-visual.is-visible .ng-nbm-time-row--idea strong {
opacity: 1;
transform: translateY(0);
transition-delay: 420ms;
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-intro-visual.is-visible .ng-nbm-intro-note {
opacity: 1;
transform: translateY(0);
transition-delay: 520ms;
}
/* Little pop on try cards */
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-try-option {
transform: translateY(24px);
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-try-option.is-visible {
transform: translateY(0);
}
/* Final CTA mark */
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-final-action .ng-nbm-final-mark {
opacity: 0;
transform: scale(.82) rotate(-12deg);
transition: opacity 500ms ease, transform 500ms ease;
transition-delay: 180ms;
}
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-final-action.is-visible .ng-nbm-final-mark {
opacity: 1;
transform: scale(1) rotate(0deg);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.ng-nbm-page.ng-nbm-motion-ready .ng-nbm-intro-visual .ng-nbm-time-row i, .ng-nbm-page.ng-nbm-motion-ready .ng-nbm-intro-visual .ng-nbm-time-row--idea strong, .ng-nbm-page.ng-nbm-motion-ready .ng-nbm-intro-visual .ng-nbm-intro-note, .ng-nbm-page.ng-nbm-motion-ready .ng-nbm-final-action .ng-nbm-final-mark {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
filter: none !important;
}
}
/* NOORDBUITEN — BEZOEKEN MOTION */
/* 01 — HERO */
.ng-nbv-hero.is-nbv-motion-ready .ng-nbv-hero-kicker, .ng-nbv-hero.is-nbv-motion-ready .ng-nbv-hero-copy h1, .ng-nbv-hero.is-nbv-motion-ready .ng-nbv-hero-copy > p:last-child {
opacity: 0;
transform: translateY(10px);
transition: opacity 430ms ease, transform 520ms cubic-bezier(.2,.75,.25,1);
}
.ng-nbv-hero.is-nbv-visible .ng-nbv-hero-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 60ms;
}
.ng-nbv-hero.is-nbv-visible .ng-nbv-hero-copy h1 {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-nbv-hero.is-nbv-visible .ng-nbv-hero-copy > p:last-child {
opacity: 1;
transform: translateY(0);
transition-delay: 270ms;
}
/* Main hero photograph */
.ng-nbv-hero.is-nbv-motion-ready .ng-nbv-hero-photo {
opacity: 0;
clip-path: inset(0 0 10% 0);
transition: opacity 580ms ease, clip-path 760ms cubic-bezier(.2,.75,.25,1);
}
.ng-nbv-hero.is-nbv-visible .ng-nbv-hero-photo {
opacity: 1;
clip-path: inset(0);
transition-delay: 250ms;
}
/* Little white annotation */
.ng-nbv-hero.is-nbv-motion-ready .ng-nbv-hero-photo figcaption {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-nbv-hero.is-nbv-visible .ng-nbv-hero-photo figcaption {
opacity: 1;
transition-delay: 650ms;
}
/* Bottom detail */
.ng-nbv-hero.is-nbv-motion-ready .ng-nbv-hero-line {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-nbv-hero.is-nbv-visible .ng-nbv-hero-line {
opacity: 1;
transition-delay: 780ms;
}
/* 02 — VIND JE WEG */
.ng-nbv-find.is-nbv-motion-ready .ng-nbv-find-kicker, .ng-nbv-find.is-nbv-motion-ready .ng-nbv-find-heading h2, .ng-nbv-find.is-nbv-motion-ready .ng-nbv-find-heading > p {
opacity: 0;
transform: translateY(10px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nbv-find.is-nbv-visible .ng-nbv-find-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-nbv-find.is-nbv-visible .ng-nbv-find-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-nbv-find.is-nbv-visible .ng-nbv-find-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* Whole map board */
.ng-nbv-find.is-nbv-motion-ready .ng-nbv-find-layout {
opacity: 0;
transform: translateY(14px);
transition: opacity 550ms ease, transform 650ms cubic-bezier(.2,.75,.25,1);
}
.ng-nbv-find.is-nbv-visible .ng-nbv-find-layout {
opacity: 1;
transform: translateY(0);
transition-delay: 350ms;
}
/* Map label */
.ng-nbv-find.is-nbv-motion-ready .ng-nbv-map-label {
opacity: 0;
transition: opacity 350ms ease;
}
.ng-nbv-find.is-nbv-visible .ng-nbv-map-label {
opacity: 1;
transition-delay: 650ms;
}
/* Right-hand information */
.ng-nbv-find.is-nbv-motion-ready .ng-nbv-address, .ng-nbv-find.is-nbv-motion-ready .ng-nbv-arrival, .ng-nbv-find.is-nbv-motion-ready .ng-nbv-find-notice, .ng-nbv-find.is-nbv-motion-ready .ng-nbv-find-button {
opacity: 0;
transform: translateY(8px);
transition: opacity 360ms ease, transform 430ms ease;
}
.ng-nbv-find.is-nbv-visible .ng-nbv-address {
opacity: 1;
transform: translateY(0);
transition-delay: 540ms;
}
.ng-nbv-find.is-nbv-visible .ng-nbv-arrival {
opacity: 1;
transform: translateY(0);
transition-delay: 670ms;
}
.ng-nbv-find.is-nbv-visible .ng-nbv-find-notice {
opacity: 1;
transform: translateY(0);
transition-delay: 800ms;
}
.ng-nbv-find.is-nbv-visible .ng-nbv-find-button {
opacity: 1;
transform: translateY(0);
transition-delay: 930ms;
}
/* 03 — EVEN RONDKIJKEN */
.ng-nbv-look.is-nbv-motion-ready .ng-nbv-look-kicker, .ng-nbv-look.is-nbv-motion-ready .ng-nbv-look-heading h2, .ng-nbv-look.is-nbv-motion-ready .ng-nbv-look-heading > p {
opacity: 0;
transform: translateY(10px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nbv-look.is-nbv-visible .ng-nbv-look-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-nbv-look.is-nbv-visible .ng-nbv-look-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-nbv-look.is-nbv-visible .ng-nbv-look-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* Main photo */
.ng-nbv-look.is-nbv-motion-ready .ng-nbv-look-photo {
opacity: 0;
clip-path: inset(0 0 10% 0);
transition: opacity 580ms ease, clip-path 760ms cubic-bezier(.2,.75,.25,1);
}
.ng-nbv-look.is-nbv-visible .ng-nbv-look-photo {
opacity: 1;
clip-path: inset(0);
transition-delay: 340ms;
}
/* * The tags ALREADY use rotations. * Opacity only. Hands off their transforms. */
.ng-nbv-look.is-nbv-motion-ready .ng-nbv-look-tag, .ng-nbv-look.is-nbv-motion-ready .ng-nbv-look-note {
opacity: 0;
transition: opacity 350ms ease;
}
.ng-nbv-look.is-nbv-visible .ng-nbv-look-tag--one {
opacity: 1;
transition-delay: 570ms;
}
.ng-nbv-look.is-nbv-visible .ng-nbv-look-tag--two {
opacity: 1;
transition-delay: 720ms;
}
.ng-nbv-look.is-nbv-visible .ng-nbv-look-tag--three {
opacity: 1;
transition-delay: 870ms;
}
.ng-nbv-look.is-nbv-visible .ng-nbv-look-note {
opacity: 1;
transition-delay: 1020ms;
}
/* Bottom thought */
.ng-nbv-look.is-nbv-motion-ready .ng-nbv-look-bottom {
opacity: 0;
transform: translateY(6px);
transition: opacity 400ms ease, transform 430ms ease;
}
.ng-nbv-look.is-nbv-visible .ng-nbv-look-bottom {
opacity: 1;
transform: translateY(0);
transition-delay: 1160ms;
}
/* 04 — FINAL CTA */
.ng-nbv-end.is-nbv-motion-ready .ng-nbv-end-kicker, .ng-nbv-end.is-nbv-motion-ready .ng-nbv-end-copy h2, .ng-nbv-end.is-nbv-motion-ready .ng-nbv-end-copy > p:last-child {
opacity: 0;
transform: translateY(9px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nbv-end.is-nbv-visible .ng-nbv-end-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-nbv-end.is-nbv-visible .ng-nbv-end-copy h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-nbv-end.is-nbv-visible .ng-nbv-end-copy > p:last-child {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
.ng-nbv-end.is-nbv-motion-ready .ng-nbv-end-action {
opacity: 0;
transform: translateY(9px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-nbv-end.is-nbv-visible .ng-nbv-end-action {
opacity: 1;
transform: translateY(0);
transition-delay: 360ms;
}
.ng-nbv-end.is-nbv-motion-ready .ng-nbv-end-line {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-nbv-end.is-nbv-visible .ng-nbv-end-line {
opacity: 1;
transition-delay: 540ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-nbv-page *, .ng-nbv-page *::before, .ng-nbv-page *::after {
animation: none !important;
transition: none !important;
}
}
/* SINGLE AGENDA */
.ng-single-agenda {
background: #fffdf9;
color: var(--color-dark);
}
/* HERO */
.ng-agenda-hero {
padding: clamp(8.5rem, 12vw, 11rem) 0 clamp(5rem, 8vw, 7rem);
background: #f5f1e9;
}
.ng-agenda-back {
display: inline-flex;
align-items: center;
gap: .65rem;
margin-bottom: clamp(3rem, 5vw, 4.5rem);
color: rgba(46, 59, 50, .62);
font-size: .72rem;
font-weight: 750;
text-decoration: none;
transition: color 180ms ease, gap 180ms ease;
}
.ng-agenda-back:hover {
gap: .9rem;
color: var(--color-coral);
}
.ng-agenda-hero-layout {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr);
gap: clamp(3rem, 8vw, 8rem);
align-items: end;
}
.ng-agenda-hero-copy {
max-width: 720px;
}
.ng-agenda-kicker, .ng-agenda-section-kicker, .ng-agenda-practical-kicker {
margin: 0 0 1rem;
color: var(--color-coral);
font-size: .68rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-agenda-hero h1 {
max-width: 720px;
margin: 0;
color: var(--color-dark);
font-size: clamp(3.2rem, 6vw, 6.4rem);
font-weight: 800;
line-height: .92;
letter-spacing: -.065em;
}
.ng-agenda-intro {
max-width: 600px;
margin: 2rem 0 0;
color: rgba(46, 59, 50, .66);
font-size: clamp(1rem, 1.4vw, 1.2rem);
line-height: 1.65;
}
.ng-agenda-hero-detail {
display: flex;
align-items: center;
gap: .85rem;
margin-top: 2.6rem;
color: rgba(46, 59, 50, .48);
font-size: .72rem;
}
.ng-agenda-hero-detail > span {
width: 5px;
height: 5px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--color-coral);
}
.ng-agenda-hero-detail p {
margin: 0;
}
/* DATE CARD */
.ng-agenda-date-card {
padding: clamp(1.8rem, 3vw, 2.4rem);
background: var(--color-dark);
color: #fff;
border-radius: 1.35rem;
}
.ng-agenda-date-label {
display: block;
margin-bottom: 1.4rem;
color: rgba(255, 255, 255, .48);
font-size: .62rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-agenda-date {
display: flex;
align-items: center;
gap: 1.1rem;
}
.ng-agenda-date > strong {
color: var(--color-coral);
font-size: clamp(3rem, 5vw, 4.6rem);
font-weight: 800;
line-height: .8;
letter-spacing: -.06em;
}
.ng-agenda-date > div {
display: grid;
gap: .15rem;
}
.ng-agenda-date span {
font-size: 1.05rem;
font-weight: 750;
}
.ng-agenda-date small {
color: rgba(255, 255, 255, .48);
font-size: .67rem;
}
.ng-agenda-date-rule {
height: 1px;
margin: 1.8rem 0;
background: rgba(255, 255, 255, .12);
}
.ng-agenda-date-meta {
display: grid;
gap: .25rem;
padding: .7rem 0;
}
.ng-agenda-date-meta small {
color: rgba(255, 255, 255, .4);
font-size: .58rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-agenda-date-meta strong {
font-size: .84rem;
}
/* IMAGE */
.ng-agenda-visual {
padding: clamp(4rem, 7vw, 6rem) 0 0;
}
.ng-agenda-photo {
position: relative;
width: min(100%, 1050px);
margin: 0 auto;
}
.ng-agenda-photo img {
display: block;
width: 100%;
max-height: 650px;
object-fit: cover;
border-radius: 1.5rem;
}
.ng-agenda-photo figcaption {
position: absolute;
right: 1.2rem;
bottom: 1.2rem;
display: flex;
align-items: center;
gap: .5rem;
padding: .7rem .9rem;
background: rgba(255, 253, 249, .94);
border-radius: .7rem;
color: var(--color-dark);
font-size: .65rem;
}
.ng-agenda-photo figcaption span {
color: var(--color-coral);
}
.ng-agenda-photo figcaption p {
margin: 0;
}
/* CONTENT */
.ng-agenda-content {
padding: clamp(5rem, 8vw, 8rem) 0;
}
.ng-agenda-content-layout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
gap: clamp(3rem, 8vw, 7rem);
align-items: start;
}
.ng-agenda-article {
max-width: 720px;
}
.ng-agenda-entry {
color: rgba(46, 59, 50, .76);
font-size: clamp(1rem, 1.25vw, 1.12rem);
line-height: 1.8;
}
.ng-agenda-entry > *:first-child {
margin-top: 0;
}
.ng-agenda-entry h2, .ng-agenda-entry h3 {
margin: 2.4rem 0 .9rem;
color: var(--color-dark);
line-height: 1.05;
letter-spacing: -.035em;
}
.ng-agenda-entry h2 {
font-size: clamp(2rem, 3vw, 2.75rem);
}
.ng-agenda-entry h3 {
font-size: clamp(1.4rem, 2vw, 1.8rem);
}
.ng-agenda-entry a {
color: var(--color-green);
font-weight: 750;
}
/* PRACTICAL */
.ng-agenda-practical {
position: sticky;
top: 8rem;
padding: clamp(1.7rem, 3vw, 2.3rem);
background: #eef4e8;
border-radius: 1.25rem;
}
.ng-agenda-practical h2 {
margin: 0;
color: var(--color-dark);
font-size: clamp(1.65rem, 2.4vw, 2.15rem);
line-height: 1;
letter-spacing: -.04em;
}
.ng-agenda-practical-list {
margin-top: 1.8rem;
}
.ng-agenda-practical-list > div {
display: grid;
gap: .25rem;
padding: 1rem 0;
border-top: 1px solid rgba(46, 59, 50, .1);
}
.ng-agenda-practical-list small {
color: rgba(46, 59, 50, .44);
font-size: .58rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-agenda-practical-list strong {
color: var(--color-dark);
font-size: .86rem;
}
.ng-agenda-contact {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.4rem;
padding: .9rem 1.1rem;
background: var(--color-dark);
color: #fff;
border-radius: 999px;
font-size: .7rem;
font-weight: 800;
text-decoration: none;
}
.ng-agenda-contact i {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
background: var(--color-coral);
border-radius: 50%;
font-style: normal;
}
/* END */
.ng-agenda-end {
padding: clamp(4rem, 6vw, 5rem) 0;
background: var(--color-dark);
color: #fff;
}
.ng-agenda-end-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 3rem;
}
.ng-agenda-end p {
margin: 0 0 .7rem;
color: var(--color-coral);
font-size: .63rem;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-agenda-end h2 {
max-width: 560px;
margin: 0;
color: #fff;
font-size: clamp(2.2rem, 4vw, 4rem);
line-height: .96;
letter-spacing: -.05em;
}
.ng-agenda-end a {
display: inline-flex;
align-items: center;
gap: 1rem;
color: #fff;
font-size: .72rem;
font-weight: 800;
text-decoration: none;
}
.ng-agenda-end a i {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
background: var(--color-coral);
border-radius: 50%;
font-style: normal;
transition: transform 180ms ease;
}
.ng-agenda-end a:hover i {
transform: translateX(3px);
}
/* MOBILE */
@media (max-width: 850px) {
.ng-agenda-hero-layout, .ng-agenda-content-layout {
grid-template-columns: 1fr;
}
.ng-agenda-date-card {
max-width: 430px;
}
.ng-agenda-practical {
position: static;
}
.ng-agenda-end-inner {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 600px) {
.ng-agenda-hero {
padding-top: 7.5rem;
}
.ng-agenda-hero h1 {
font-size: clamp(2.8rem, 14vw, 4rem);
}
.ng-agenda-photo figcaption {
position: static;
width: fit-content;
margin-top: .75rem;
background: #f5f1e9;
}
}
/* SINGLE AGENDA — HERO SIZE POLISH */
.ng-agenda-hero h1 {
max-width: 620px;
font-size: clamp(2.9rem, 4.8vw, 4.9rem);
line-height: .94;
letter-spacing: -.055em;
}
/* SINGLE AGENDA — FINAL CTA */
.ng-agenda-end {
padding: clamp(4rem, 6vw, 5.5rem) 0;
background: #eef4e8;
color: var(--color-dark);
border-top: 1px solid rgba(46, 59, 50, .06);
}
.ng-agenda-end p {
color: var(--color-coral);
}
.ng-agenda-end h2 {
color: var(--color-dark);
font-size: clamp(2.15rem, 3.5vw, 3.4rem);
}
.ng-agenda-end a {
color: var(--color-dark);
}
.ng-agenda-end a i {
background: var(--color-coral);
color: #fff;
}
/* SINGLE NEWS */
.ng-single-news {
background: #fffdf9;
color: var(--color-dark);
}
/* HERO */
.ng-news-hero {
padding: clamp(8rem, 11vw, 10rem) 0 clamp(4.5rem, 7vw, 6.5rem);
background: #f5f1e9;
}
.ng-news-back {
display: inline-flex;
align-items: center;
gap: .6rem;
margin-bottom: clamp(3rem, 5vw, 4.5rem);
color: rgba(46, 59, 50, .56);
font-size: .7rem;
font-weight: 750;
text-decoration: none;
transition: color 180ms ease, gap 180ms ease;
}
.ng-news-back:hover {
gap: .85rem;
color: var(--color-coral);
}
.ng-news-hero-layout {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(220px, .45fr);
align-items: end;
gap: clamp(3rem, 8vw, 8rem);
}
.ng-news-hero-copy {
max-width: 800px;
}
.ng-news-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .55rem;
margin-bottom: 1.2rem;
color: rgba(46, 59, 50, .43);
font-size: .61rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.ng-news-meta > span:first-child {
color: var(--color-coral);
}
.ng-news-meta i {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-coral);
}
.ng-news-hero h1 {
max-width: 760px;
margin: 0;
font-size: clamp(2.9rem, 5vw, 5rem);
font-weight: 780;
line-height: .96;
letter-spacing: -.055em;
}
.ng-news-intro {
max-width: 620px;
margin: 1.8rem 0 0;
color: rgba(46, 59, 50, .62);
font-size: clamp(1rem, 1.25vw, 1.15rem);
line-height: 1.65;
}
.ng-news-hero-note {
display: flex;
align-items: flex-start;
gap: .8rem;
max-width: 240px;
color: rgba(46, 59, 50, .46);
font-size: .72rem;
line-height: 1.55;
}
.ng-news-hero-note > span {
color: var(--color-coral);
}
.ng-news-hero-note p {
margin: 0;
}
/* FEATURED IMAGE */
.ng-news-visual {
padding: clamp(4rem, 6vw, 5.5rem) 0 0;
}
.ng-news-photo {
position: relative;
width: min(100%, 1050px);
margin: 0 auto;
}
.ng-news-photo img {
display: block;
width: 100%;
height: clamp(340px, 50vw, 650px);
object-fit: cover;
border-radius: 12px 64px 12px 12px;
}
.ng-news-photo figcaption {
position: absolute;
right: 1.2rem;
bottom: 1.2rem;
display: flex;
align-items: center;
gap: .45rem;
padding: .65rem .85rem;
background: rgba(255, 253, 249, .94);
border-radius: .65rem;
font-size: .62rem;
}
.ng-news-photo figcaption span {
color: var(--color-coral);
}
.ng-news-photo figcaption p {
margin: 0;
}
/* ARTICLE */
.ng-news-body {
padding: clamp(5rem, 8vw, 8rem) 0;
}
.ng-news-body-layout {
display: grid;
grid-template-columns: 110px minmax(0, 720px);
justify-content: center;
gap: clamp(2rem, 5vw, 4rem);
}
.ng-news-body-marker {
padding-top: .4rem;
}
.ng-news-body-marker span {
display: block;
color: var(--color-coral);
font-size: .6rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
}
.ng-news-body-marker i {
display: block;
width: 1px;
height: 72px;
margin: 1rem 0 0 3px;
background: rgba(46, 59, 50, .13);
}
.ng-news-entry {
color: rgba(46, 59, 50, .76);
font-size: clamp(1rem, 1.2vw, 1.12rem);
line-height: 1.82;
}
.ng-news-entry > *:first-child {
margin-top: 0;
}
.ng-news-entry p {
margin: 0 0 1.5rem;
}
.ng-news-entry h2, .ng-news-entry h3 {
color: var(--color-dark);
line-height: 1.05;
letter-spacing: -.04em;
}
.ng-news-entry h2 {
margin: 3rem 0 1rem;
font-size: clamp(2rem, 3vw, 2.8rem);
}
.ng-news-entry h3 {
margin: 2.4rem 0 .8rem;
font-size: clamp(1.45rem, 2vw, 1.9rem);
}
.ng-news-entry img {
max-width: 100%;
height: auto;
margin: 2rem 0;
border-radius: 1rem;
}
.ng-news-entry blockquote {
margin: 2.5rem 0;
padding: .4rem 0 .4rem 1.5rem;
border-left: 3px solid var(--color-coral);
color: var(--color-dark);
font-size: clamp(1.25rem, 2vw, 1.65rem);
font-weight: 700;
line-height: 1.35;
}
.ng-news-entry a {
color: var(--color-green);
font-weight: 750;
}
/* RELATED */
.ng-news-related {
padding: clamp(5rem, 7vw, 7rem) 0;
background: #f5f1e9;
}
.ng-news-related-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 3rem;
margin-bottom: 3rem;
}
.ng-news-related-heading p {
margin: 0 0 .7rem;
color: var(--color-coral);
font-size: .62rem;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-news-related-heading h2 {
max-width: 550px;
margin: 0;
font-size: clamp(2.2rem, 3.5vw, 3.4rem);
line-height: .98;
letter-spacing: -.05em;
}
.ng-news-related-heading h2 span {
color: var(--color-green);
}
.ng-news-related-heading > a {
display: inline-flex;
align-items: center;
gap: .7rem;
color: var(--color-dark);
font-size: .7rem;
font-weight: 800;
text-decoration: none;
}
.ng-news-related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.4rem);
}
.ng-news-related-image {
display: block;
height: 235px;
overflow: hidden;
border-radius: 10px 38px 10px 10px;
}
.ng-news-related-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.ng-news-related-card:hover .ng-news-related-image img {
transform: scale(1.025);
}
.ng-news-related-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
background: #e9eee4;
color: rgba(46, 59, 50, .22);
font-size: 2rem;
font-weight: 800;
}
.ng-news-related-meta {
display: flex;
align-items: center;
gap: .5rem;
margin-top: 1.2rem;
color: rgba(46, 59, 50, .42);
font-size: .56rem;
text-transform: uppercase;
}
.ng-news-related-meta i {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-coral);
}
.ng-news-related-card h3 {
margin: .65rem 0 0;
font-size: clamp(1.35rem, 2vw, 1.8rem);
line-height: 1.04;
letter-spacing: -.035em;
}
.ng-news-related-card h3 a {
color: inherit;
text-decoration: none;
}
.ng-news-related-card > p {
margin: .8rem 0 0;
color: rgba(46, 59, 50, .55);
font-size: .78rem;
line-height: 1.55;
}
.ng-news-related-link {
display: inline-flex;
gap: .45rem;
margin-top: 1rem;
color: var(--color-dark);
font-size: .67rem;
font-weight: 800;
text-decoration: none;
}
/* END CTA */
.ng-news-end {
padding: clamp(4rem, 6vw, 5rem) 0;
background: #eef4e8;
}
.ng-news-end-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 3rem;
}
.ng-news-end p {
margin: 0 0 .7rem;
color: var(--color-coral);
font-size: .62rem;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-news-end h2 {
margin: 0;
font-size: clamp(2.15rem, 3.5vw, 3.4rem);
line-height: .98;
letter-spacing: -.05em;
}
.ng-news-end a {
display: inline-flex;
align-items: center;
gap: 1rem;
color: var(--color-dark);
font-size: .7rem;
font-weight: 800;
text-decoration: none;
}
.ng-news-end a i {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
background: var(--color-coral);
color: #fff;
border-radius: 50%;
font-style: normal;
transition: transform 180ms ease;
}
.ng-news-end a:hover i {
transform: translateX(3px);
}
/* MOBILE */
@media (max-width: 850px) {
.ng-news-hero-layout {
grid-template-columns: 1fr;
}
.ng-news-hero-note {
max-width: 420px;
}
.ng-news-body-layout {
grid-template-columns: 1fr;
}
.ng-news-body-marker {
display: none;
}
.ng-news-related-grid {
grid-template-columns: 1fr;
}
.ng-news-related-image {
height: clamp(260px, 60vw, 420px);
}
.ng-news-related-heading, .ng-news-end-inner {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 600px) {
.ng-news-hero {
padding-top: 7.5rem;
}
.ng-news-photo figcaption {
position: static;
width: fit-content;
margin-top: .75rem;
background: #f5f1e9;
}
}
/* SINGLE CONTENT — SHARED MOTION — Agenda + News */
/* AGENDA — HERO */
.ng-single-agenda.is-single-motion-ready .ng-agenda-back, .ng-single-agenda.is-single-motion-ready .ng-agenda-kicker, .ng-single-agenda.is-single-motion-ready .ng-agenda-hero-copy h1, .ng-single-agenda.is-single-motion-ready .ng-agenda-intro, .ng-single-agenda.is-single-motion-ready .ng-agenda-hero-detail {
opacity: 0;
transform: translateY(10px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-single-agenda.is-single-visible .ng-agenda-back {
opacity: 1;
transform: translateY(0);
transition-delay: 40ms;
}
.ng-single-agenda.is-single-visible .ng-agenda-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 100ms;
}
.ng-single-agenda.is-single-visible .ng-agenda-hero-copy h1 {
opacity: 1;
transform: translateY(0);
transition-delay: 180ms;
}
.ng-single-agenda.is-single-visible .ng-agenda-intro {
opacity: 1;
transform: translateY(0);
transition-delay: 290ms;
}
.ng-single-agenda.is-single-visible .ng-agenda-hero-detail {
opacity: 1;
transform: translateY(0);
transition-delay: 390ms;
}
/* Date card */
.ng-single-agenda.is-single-motion-ready .ng-agenda-date-card {
opacity: 0;
transform: translateY(14px);
transition: opacity 500ms ease, transform 580ms cubic-bezier(.2,.75,.25,1);
}
.ng-single-agenda.is-single-visible .ng-agenda-date-card {
opacity: 1;
transform: translateY(0);
transition-delay: 260ms;
}
/* Featured photo */
.ng-single-agenda.is-single-motion-ready .ng-agenda-photo {
opacity: 0;
clip-path: inset(0 0 10% 0);
transition: opacity 600ms ease, clip-path 760ms cubic-bezier(.2,.75,.25,1);
}
.ng-single-agenda.is-single-visible .ng-agenda-photo {
opacity: 1;
clip-path: inset(0);
transition-delay: 480ms;
}
/* Article */
.ng-single-agenda.is-single-motion-ready .ng-agenda-article, .ng-single-agenda.is-single-motion-ready .ng-agenda-practical {
opacity: 0;
transform: translateY(12px);
transition: opacity 500ms ease, transform 560ms cubic-bezier(.2,.75,.25,1);
}
.ng-single-agenda.is-single-visible .ng-agenda-article {
opacity: 1;
transform: translateY(0);
transition-delay: 650ms;
}
.ng-single-agenda.is-single-visible .ng-agenda-practical {
opacity: 1;
transform: translateY(0);
transition-delay: 760ms;
}
/* Final agenda CTA */
.ng-single-agenda.is-single-motion-ready .ng-agenda-end-inner {
opacity: 0;
transform: translateY(10px);
transition: opacity 480ms ease, transform 540ms ease;
}
.ng-single-agenda.is-single-visible .ng-agenda-end-inner {
opacity: 1;
transform: translateY(0);
transition-delay: 900ms;
}
/* NEWS — HERO */
.ng-single-news.is-single-motion-ready .ng-news-back, .ng-single-news.is-single-motion-ready .ng-news-meta, .ng-single-news.is-single-motion-ready .ng-news-hero h1, .ng-single-news.is-single-motion-ready .ng-news-intro, .ng-single-news.is-single-motion-ready .ng-news-hero-note {
opacity: 0;
transform: translateY(10px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-single-news.is-single-visible .ng-news-back {
opacity: 1;
transform: translateY(0);
transition-delay: 40ms;
}
.ng-single-news.is-single-visible .ng-news-meta {
opacity: 1;
transform: translateY(0);
transition-delay: 100ms;
}
.ng-single-news.is-single-visible .ng-news-hero h1 {
opacity: 1;
transform: translateY(0);
transition-delay: 180ms;
}
.ng-single-news.is-single-visible .ng-news-intro {
opacity: 1;
transform: translateY(0);
transition-delay: 290ms;
}
.ng-single-news.is-single-visible .ng-news-hero-note {
opacity: 1;
transform: translateY(0);
transition-delay: 390ms;
}
/* Featured news image */
.ng-single-news.is-single-motion-ready .ng-news-photo {
opacity: 0;
clip-path: inset(0 0 10% 0);
transition: opacity 600ms ease, clip-path 760ms cubic-bezier(.2,.75,.25,1);
}
.ng-single-news.is-single-visible .ng-news-photo {
opacity: 1;
clip-path: inset(0);
transition-delay: 460ms;
}
/* Article */
.ng-single-news.is-single-motion-ready .ng-news-body-marker, .ng-single-news.is-single-motion-ready .ng-news-entry {
opacity: 0;
transform: translateY(12px);
transition: opacity 500ms ease, transform 560ms cubic-bezier(.2,.75,.25,1);
}
.ng-single-news.is-single-visible .ng-news-body-marker {
opacity: 1;
transform: translateY(0);
transition-delay: 620ms;
}
.ng-single-news.is-single-visible .ng-news-entry {
opacity: 1;
transform: translateY(0);
transition-delay: 700ms;
}
/* Related stories */
.ng-single-news.is-single-motion-ready .ng-news-related-heading {
opacity: 0;
transform: translateY(10px);
transition: opacity 450ms ease, transform 500ms ease;
}
.ng-single-news.is-single-visible .ng-news-related-heading {
opacity: 1;
transform: translateY(0);
transition-delay: 820ms;
}
.ng-single-news.is-single-motion-ready .ng-news-related-card {
opacity: 0;
transform: translateY(12px);
transition: opacity 420ms ease, transform 480ms ease;
}
.ng-single-news.is-single-visible .ng-news-related-card:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 920ms;
}
.ng-single-news.is-single-visible .ng-news-related-card:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 1020ms;
}
.ng-single-news.is-single-visible .ng-news-related-card:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 1120ms;
}
/* Final news CTA */
.ng-single-news.is-single-motion-ready .ng-news-end-inner {
opacity: 0;
transform: translateY(10px);
transition: opacity 460ms ease, transform 520ms ease;
}
.ng-single-news.is-single-visible .ng-news-end-inner {
opacity: 1;
transform: translateY(0);
transition-delay: 1240ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-single-agenda *, .ng-single-news *, .ng-single-agenda *::before, .ng-single-agenda *::after, .ng-single-news *::before, .ng-single-news *::after {
animation: none !important;
transition: none !important;
}
}
/* NIEUWS & AGENDA — MOTION PASS */
/* SHARED HEADING REVEALS */
.ng-na-page .is-na-motion-ready .ng-na-next-kicker, .ng-na-page .is-na-motion-ready .ng-na-next-heading h2, .ng-na-page .is-na-motion-ready .ng-na-next-heading > p, .ng-na-page .is-na-motion-ready .ng-na-agenda-kicker, .ng-na-page .is-na-motion-ready .ng-na-agenda-heading h2, .ng-na-page .is-na-motion-ready .ng-na-agenda-heading > p, .ng-na-page .is-na-motion-ready .ng-na-news-kicker, .ng-na-page .is-na-motion-ready .ng-na-news-heading h2, .ng-na-page .is-na-motion-ready .ng-na-news-heading > p, .ng-na-page .is-na-motion-ready .ng-na-lookback-kicker, .ng-na-page .is-na-motion-ready .ng-na-lookback-heading h2, .ng-na-page .is-na-motion-ready .ng-na-lookback-heading > p, .ng-na-page .is-na-motion-ready .ng-na-letter-kicker, .ng-na-page .is-na-motion-ready .ng-na-letter-copy h2, .ng-na-page .is-na-motion-ready .ng-na-letter-copy > p:not(.ng-na-letter-kicker) {
opacity: 0;
transform: translateY(10px);
transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
/* 01 — DIT KOMT ERAAN */
.ng-na-next.is-na-visible .ng-na-next-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-na-next.is-na-visible .ng-na-next-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-na-next.is-na-visible .ng-na-next-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* whole event card */
.ng-na-next.is-na-motion-ready .ng-na-feature {
opacity: 0;
transform: translateY(14px);
transition: opacity 520ms ease, transform 620ms cubic-bezier(.2,.75,.25,1);
}
.ng-na-next.is-na-visible .ng-na-feature {
opacity: 1;
transform: translateY(0);
transition-delay: 340ms;
}
/* * Image has its own hover scale already. * Reveal its WRAPPER, not the img. */
.ng-na-next.is-na-motion-ready .ng-na-feature-image {
clip-path: inset(0 0 10% 0);
transition: clip-path 720ms cubic-bezier(.2,.75,.25,1);
}
.ng-na-next.is-na-visible .ng-na-feature-image {
clip-path: inset(0);
transition-delay: 400ms;
}
/* date circle */
.ng-na-next.is-na-motion-ready .ng-na-feature-date {
opacity: 0;
transform: scale(.86);
transition: opacity 330ms ease, transform 430ms cubic-bezier(.2,1.15,.3,1);
}
.ng-na-next.is-na-visible .ng-na-feature-date {
opacity: 1;
transform: scale(1);
transition-delay: 590ms;
}
/* event information */
.ng-na-next.is-na-motion-ready .ng-na-feature-type, .ng-na-next.is-na-motion-ready .ng-na-feature-copy h3, .ng-na-next.is-na-motion-ready .ng-na-feature-intro, .ng-na-next.is-na-motion-ready .ng-na-feature-meta, .ng-na-next.is-na-motion-ready .ng-na-feature-bottom {
opacity: 0;
transform: translateY(7px);
transition: opacity 350ms ease, transform 420ms ease;
}
.ng-na-next.is-na-visible .ng-na-feature-type {
opacity: 1;
transform: translateY(0);
transition-delay: 520ms;
}
.ng-na-next.is-na-visible .ng-na-feature-copy h3 {
opacity: 1;
transform: translateY(0);
transition-delay: 610ms;
}
.ng-na-next.is-na-visible .ng-na-feature-intro {
opacity: 1;
transform: translateY(0);
transition-delay: 700ms;
}
.ng-na-next.is-na-visible .ng-na-feature-meta {
opacity: 1;
transform: translateY(0);
transition-delay: 790ms;
}
.ng-na-next.is-na-visible .ng-na-feature-bottom {
opacity: 1;
transform: translateY(0);
transition-delay: 900ms;
}
/* 02 — AGENDA */
.ng-na-agenda.is-na-visible .ng-na-agenda-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-na-agenda.is-na-visible .ng-na-agenda-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-na-agenda.is-na-visible .ng-na-agenda-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* Month */
.ng-na-agenda.is-na-motion-ready .ng-na-agenda-month {
opacity: 0;
transform: translateY(7px);
transition: opacity 380ms ease, transform 430ms ease;
}
.ng-na-agenda.is-na-visible .ng-na-agenda-month {
opacity: 1;
transform: translateY(0);
transition-delay: 340ms;
}
/* * Keep rows' existing hover padding intact. * Only vertical entrance transform. */
.ng-na-agenda.is-na-motion-ready .ng-na-agenda-row {
opacity: 0;
transform: translateY(10px);
transition: opacity 400ms ease, transform 480ms ease, padding-left .3s ease;
}
.ng-na-agenda.is-na-visible .ng-na-agenda-row:nth-of-type(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 440ms;
}
.ng-na-agenda.is-na-visible .ng-na-agenda-row:nth-of-type(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 570ms;
}
.ng-na-agenda.is-na-visible .ng-na-agenda-row:nth-of-type(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 700ms;
}
.ng-na-agenda.is-na-visible .ng-na-agenda-row:nth-of-type(4) {
opacity: 1;
transform: translateY(0);
transition-delay: 830ms;
}
/* coming-soon / bottom note */
.ng-na-agenda.is-na-motion-ready .ng-na-agenda-coming {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-na-agenda.is-na-visible .ng-na-agenda-coming {
opacity: 1;
transition-delay: 850ms;
}
/* 03 — NIEUWS UIT NOORD */
.ng-na-news.is-na-visible .ng-na-news-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-na-news.is-na-visible .ng-na-news-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-na-news.is-na-visible .ng-na-news-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* Lead story */
.ng-na-news.is-na-motion-ready .ng-na-news-lead {
opacity: 0;
transform: translateY(12px);
transition: opacity 480ms ease, transform 560ms cubic-bezier(.2,.75,.25,1);
}
.ng-na-news.is-na-visible .ng-na-news-lead {
opacity: 1;
transform: translateY(0);
transition-delay: 350ms;
}
.ng-na-news.is-na-motion-ready .ng-na-news-lead-image {
clip-path: inset(0 0 9% 0);
transition: clip-path 720ms cubic-bezier(.2,.75,.25,1);
}
.ng-na-news.is-na-visible .ng-na-news-lead-image {
clip-path: inset(0);
transition-delay: 400ms;
}
/* Smaller stories */
.ng-na-news.is-na-motion-ready .ng-na-news-small {
opacity: 0;
transform: translateY(9px);
transition: opacity 380ms ease, transform 450ms ease;
}
.ng-na-news.is-na-visible .ng-na-news-small:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 520ms;
}
.ng-na-news.is-na-visible .ng-na-news-small:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 660ms;
}
.ng-na-news.is-na-visible .ng-na-news-small:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 800ms;
}
.ng-na-news.is-na-motion-ready .ng-na-news-bottom {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-na-news.is-na-visible .ng-na-news-bottom {
opacity: 1;
transition-delay: 950ms;
}
/* 04 — DIT GEBEURDE ER AL */
.ng-na-lookback.is-na-visible .ng-na-lookback-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-na-lookback.is-na-visible .ng-na-lookback-heading h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-na-lookback.is-na-visible .ng-na-lookback-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* Gallery stories */
.ng-na-lookback.is-na-motion-ready .ng-na-lookback-item {
opacity: 0;
transform: translateY(12px);
transition: opacity 430ms ease, transform 520ms cubic-bezier(.2,.75,.25,1);
}
/* Image opens inside its already-shaped container */
.ng-na-lookback.is-na-motion-ready .ng-na-lookback-image {
clip-path: inset(0 0 8% 0);
transition: clip-path 700ms cubic-bezier(.2,.75,.25,1);
}
.ng-na-lookback.is-na-visible .ng-na-lookback-image {
clip-path: inset(0);
}
/* empty state */
.ng-na-lookback.is-na-motion-ready .ng-na-lookback-empty {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-na-lookback.is-na-visible .ng-na-lookback-empty {
opacity: 1;
transition-delay: 400ms;
}
/* 05 — NIEUWSBRIEF */
.ng-na-letter.is-na-visible .ng-na-letter-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-na-letter.is-na-visible .ng-na-letter-copy h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-na-letter.is-na-visible .ng-na-letter-copy > p:not(.ng-na-letter-kicker) {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* * Icon already owns rotate(6deg), * so FADE ONLY. */
.ng-na-letter.is-na-motion-ready .ng-na-letter-icon {
opacity: 0;
transition: opacity 350ms ease;
}
.ng-na-letter.is-na-visible .ng-na-letter-icon {
opacity: 1;
transition-delay: 350ms;
}
.ng-na-letter.is-na-motion-ready .ng-na-letter-button, .ng-na-letter.is-na-motion-ready .ng-na-letter-action > p {
opacity: 0;
transform: translateY(7px);
transition: opacity 370ms ease, transform 430ms ease;
}
.ng-na-letter.is-na-visible .ng-na-letter-button {
opacity: 1;
transform: translateY(0);
transition-delay: 450ms;
}
.ng-na-letter.is-na-visible .ng-na-letter-action > p {
opacity: 1;
transform: translateY(0);
transition-delay: 560ms;
}
.ng-na-letter.is-na-motion-ready .ng-na-letter-bottom {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-na-letter.is-na-visible .ng-na-letter-bottom {
opacity: 1;
transition-delay: 680ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-na-page *, .ng-na-page *::before, .ng-na-page *::after {
animation: none !important;
transition: none !important;
}
}
/* DOE MEE — MOTION PASS */
/* 01 — ENTRY / THREE WAYS IN */
.ng-dm-entry.is-dm-motion-ready .ng-dm-entry-copy > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-dm-entry.is-dm-visible .ng-dm-entry-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-dm-entry.is-dm-visible .ng-dm-entry-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 130ms;
}
.ng-dm-entry.is-dm-visible .ng-dm-entry-copy > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 220ms;
}
.ng-dm-entry.is-dm-visible .ng-dm-entry-note {
opacity: 1;
transform: translateY(0);
transition-delay: 310ms;
}
/* vertical route */
.ng-dm-entry.is-dm-motion-ready .ng-dm-entry-line {
clip-path: inset(0 0 100% 0);
transition: clip-path 800ms cubic-bezier(.2,.75,.25,1);
}
.ng-dm-entry.is-dm-visible .ng-dm-entry-line {
clip-path: inset(0);
transition-delay: 220ms;
}
/* ways */
.ng-dm-entry.is-dm-motion-ready .ng-dm-way {
opacity: 0;
transform: translateY(10px);
transition: opacity 380ms ease, transform 460ms ease, background-color 180ms ease;
}
.ng-dm-entry.is-dm-visible .ng-dm-way--time {
opacity: 1;
transform: translateY(0);
transition-delay: 330ms;
}
.ng-dm-entry.is-dm-visible .ng-dm-way--idea {
opacity: 1;
transform: translateY(0);
transition-delay: 470ms;
}
.ng-dm-entry.is-dm-visible .ng-dm-way--partner {
opacity: 1;
transform: translateY(0);
transition-delay: 610ms;
}
.ng-dm-entry.is-dm-motion-ready .ng-dm-entry-whatever, .ng-dm-entry.is-dm-motion-ready .ng-dm-entry-bottom {
opacity: 0;
transition: opacity 380ms ease;
}
.ng-dm-entry.is-dm-visible .ng-dm-entry-whatever {
opacity: 1;
transition-delay: 760ms;
}
.ng-dm-entry.is-dm-visible .ng-dm-entry-bottom {
opacity: 1;
transition-delay: 880ms;
}
/* 02 — VOLUNTEER */
.ng-dm-volunteer.is-dm-motion-ready .ng-dm-volunteer-heading > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-heading > *:first-child {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 180ms;
}
/* fresh photo */
.ng-dm-volunteer.is-dm-motion-ready .ng-dm-volunteer-photo {
opacity: 0;
clip-path: inset(0 0 10% 0);
transition: opacity 540ms ease, clip-path 720ms cubic-bezier(.2,.75,.25,1);
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-photo {
opacity: 1;
clip-path: inset(0);
transition-delay: 280ms;
}
/* * Caption may already have its own positioning, * so opacity only. */
.ng-dm-volunteer.is-dm-motion-ready .ng-dm-volunteer-photo figcaption {
opacity: 0;
transition: opacity 350ms ease;
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-photo figcaption {
opacity: 1;
transition-delay: 650ms;
}
/* copy */
.ng-dm-volunteer.is-dm-motion-ready .ng-dm-volunteer-copy > .ng-dm-volunteer-small, .ng-dm-volunteer.is-dm-motion-ready .ng-dm-volunteer-copy > h3, .ng-dm-volunteer.is-dm-motion-ready .ng-dm-volunteer-copy > p {
opacity: 0;
transform: translateY(9px);
transition: opacity 380ms ease, transform 450ms ease;
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-small {
opacity: 1;
transform: translateY(0);
transition-delay: 340ms;
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-copy > h3 {
opacity: 1;
transform: translateY(0);
transition-delay: 430ms;
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-copy > p {
opacity: 1;
transform: translateY(0);
transition-delay: 530ms;
}
/* four contribution types */
.ng-dm-volunteer.is-dm-motion-ready .ng-dm-volunteer-ways > div {
opacity: 0;
transform: translateY(7px);
transition: opacity 340ms ease, transform 420ms ease;
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-ways > div:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 620ms;
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-ways > div:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 700ms;
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-ways > div:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 780ms;
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-ways > div:nth-child(4) {
opacity: 1;
transform: translateY(0);
transition-delay: 860ms;
}
.ng-dm-volunteer.is-dm-motion-ready .ng-dm-volunteer-action, .ng-dm-volunteer.is-dm-motion-ready .ng-dm-volunteer-bottom {
opacity: 0;
transition: opacity 380ms ease;
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-action {
opacity: 1;
transition-delay: 960ms;
}
.ng-dm-volunteer.is-dm-visible .ng-dm-volunteer-bottom {
opacity: 1;
transition-delay: 1080ms;
}
/* 03 — IDEA */
.ng-dm-idea.is-dm-motion-ready .ng-dm-idea-copy > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 400ms ease, transform 480ms cubic-bezier(.2,.75,.25,1);
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-copy > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 230ms;
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-thought {
opacity: 1;
transform: translateY(0);
transition-delay: 320ms;
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-button {
opacity: 1;
transform: translateY(0);
transition-delay: 410ms;
}
/* * Paper likely owns a small rotation. * Do NOT animate its transform. */
.ng-dm-idea.is-dm-motion-ready .ng-dm-idea-paper {
opacity: 0;
transition: opacity 380ms ease;
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-paper {
opacity: 1;
transition-delay: 330ms;
}
/* the journey physically grows across the page */
.ng-dm-idea.is-dm-motion-ready .ng-dm-idea-route {
clip-path: inset(0 100% 0 0);
transition: clip-path 1050ms cubic-bezier(.2,.75,.25,1);
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-route {
clip-path: inset(0);
transition-delay: 450ms;
}
/* checkpoints */
.ng-dm-idea.is-dm-motion-ready .ng-dm-idea-point, .ng-dm-idea.is-dm-motion-ready .ng-dm-idea-grow, .ng-dm-idea.is-dm-motion-ready .ng-dm-idea-side-note {
opacity: 0;
transition: opacity 350ms ease;
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-point--start {
opacity: 1;
transition-delay: 520ms;
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-point--middle {
opacity: 1;
transition-delay: 780ms;
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-grow {
opacity: 1;
transition-delay: 1080ms;
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-side-note {
opacity: 1;
transition-delay: 1190ms;
}
.ng-dm-idea.is-dm-motion-ready .ng-dm-idea-bottom {
opacity: 0;
transition: opacity 400ms ease;
}
.ng-dm-idea.is-dm-visible .ng-dm-idea-bottom {
opacity: 1;
transition-delay: 1280ms;
}
/* 04 — COLLABORATION */
.ng-dm-collab.is-dm-motion-ready .ng-dm-collab-copy > * {
opacity: 0;
transform: translateY(9px);
transition: opacity 400ms ease, transform 470ms ease;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-copy > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 230ms;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-button {
opacity: 1;
transform: translateY(0);
transition-delay: 320ms;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-note {
opacity: 1;
transform: translateY(0);
transition-delay: 410ms;
}
/* center first */
.ng-dm-collab.is-dm-motion-ready .ng-dm-collab-center {
opacity: 0;
transition: opacity 390ms ease;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-center {
opacity: 1;
transition-delay: 300ms;
}
/* * Reveal network from its center. * Doesn't touch the SVG's dashed/dotted stroke styles. */
.ng-dm-collab.is-dm-motion-ready .ng-dm-collab-lines {
opacity: 0;
clip-path: circle(0% at 50% 50%);
transition: opacity 250ms ease, clip-path 900ms cubic-bezier(.2,.75,.25,1);
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-lines {
opacity: 1;
clip-path: circle(75% at 50% 50%);
transition-delay: 430ms;
}
/* four contributions arrive around it */
.ng-dm-collab.is-dm-motion-ready .ng-dm-collab-piece {
opacity: 0;
transition: opacity 340ms ease;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-piece--knowledge {
opacity: 1;
transition-delay: 570ms;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-piece--network {
opacity: 1;
transition-delay: 690ms;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-piece--material {
opacity: 1;
transition-delay: 810ms;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-piece--support {
opacity: 1;
transition-delay: 930ms;
}
.ng-dm-collab.is-dm-motion-ready .ng-dm-collab-caption, .ng-dm-collab.is-dm-motion-ready .ng-dm-collab-bottom {
opacity: 0;
transition: opacity 370ms ease;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-caption {
opacity: 1;
transition-delay: 1040ms;
}
.ng-dm-collab.is-dm-visible .ng-dm-collab-bottom {
opacity: 1;
transition-delay: 1150ms;
}
/* 05 — FINAL CHOICE */
.ng-dm-final.is-dm-motion-ready .ng-dm-final-copy > * {
opacity: 0;
transform: translateY(9px);
transition: opacity 400ms ease, transform 470ms ease;
}
.ng-dm-final.is-dm-visible .ng-dm-final-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-dm-final.is-dm-visible .ng-dm-final-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-dm-final.is-dm-visible .ng-dm-final-copy > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 230ms;
}
.ng-dm-final.is-dm-motion-ready .ng-dm-final-links > a {
opacity: 0;
transform: translateY(8px);
transition: opacity 350ms ease, transform 430ms ease;
}
.ng-dm-final.is-dm-visible .ng-dm-final-links > a:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 300ms;
}
.ng-dm-final.is-dm-visible .ng-dm-final-links > a:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 420ms;
}
.ng-dm-final.is-dm-visible .ng-dm-final-links > a:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 540ms;
}
.ng-dm-final.is-dm-motion-ready .ng-dm-final-contact {
opacity: 0;
transition: opacity 380ms ease;
}
.ng-dm-final.is-dm-visible .ng-dm-final-contact {
opacity: 1;
transition-delay: 680ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-dm-entry *, .ng-dm-volunteer *, .ng-dm-idea *, .ng-dm-collab *, .ng-dm-final * {
animation: none !important;
transition: none !important;
}
}
/* VRIJWILLIGER WORDEN — MANIEREN OM BIJ TE DRAGEN */
.ng-vw-possibilities {
padding: clamp(5.5rem, 8vw, 8rem) 0;
background: #eef4e8;
color: var(--color-dark);
}
/* heading */
.ng-vw-possibilities-heading {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(260px, .7fr);
gap: clamp(3rem, 8vw, 7rem);
align-items: end;
padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
border-bottom: 1px solid rgba(46, 59, 50, .1);
}
.ng-vw-possibilities-kicker {
margin: 0 0 .9rem;
color: var(--color-coral);
font-size: .63rem;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-vw-possibilities-heading h2 {
max-width: 650px;
margin: 0;
font-size: clamp(2.35rem, 3.5vw, 3.5rem);
line-height: .96;
letter-spacing: -.05em;
}
.ng-vw-possibilities-heading > p {
max-width: 430px;
margin: 0;
color: rgba(46, 59, 50, .6);
font-size: .9rem;
line-height: 1.7;
}
/* list */
.ng-vw-possibilities-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 1rem;
}
.ng-vw-possibility {
display: grid;
grid-template-columns: 48px 1fr;
gap: 1.25rem;
min-height: 220px;
padding: clamp(1.8rem, 3vw, 2.6rem);
border-bottom: 1px solid rgba(46, 59, 50, .1);
}
.ng-vw-possibility:nth-child(odd) {
border-right: 1px solid rgba(46, 59, 50, .1);
}
.ng-vw-possibility-number {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid rgba(46, 59, 50, .15);
border-radius: 50%;
color: var(--color-coral);
font-size: .58rem;
font-weight: 850;
}
.ng-vw-possibility small {
display: block;
margin-bottom: .7rem;
color: var(--color-coral);
font-size: .57rem;
font-weight: 850;
letter-spacing: .1em;
text-transform: uppercase;
}
.ng-vw-possibility h3 {
max-width: 360px;
margin: 0;
font-size: clamp(1.4rem, 2vw, 1.9rem);
line-height: 1.02;
letter-spacing: -.04em;
}
.ng-vw-possibility p {
max-width: 390px;
margin: 1rem 0 0;
color: rgba(46, 59, 50, .56);
font-size: .78rem;
line-height: 1.65;
}
/* bottom CTA */
.ng-vw-possibilities-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
padding: clamp(2rem, 4vw, 3rem) 0 1.4rem;
}
.ng-vw-possibilities-bottom > div {
display: flex;
align-items: center;
gap: .75rem;
max-width: 530px;
}
.ng-vw-possibilities-bottom > div > span {
color: var(--color-coral);
}
.ng-vw-possibilities-bottom p {
margin: 0;
color: rgba(46, 59, 50, .6);
font-size: .76rem;
line-height: 1.55;
}
.ng-vw-possibilities-button {
display: inline-flex;
align-items: center;
gap: .9rem;
padding: .55rem .6rem .55rem 1.15rem;
background: var(--color-dark);
color: #fff;
border-radius: 999px;
font-size: .68rem;
font-weight: 800;
text-decoration: none;
}
.ng-vw-possibilities-button i {
display: grid;
place-items: center;
width: 2.1rem;
height: 2.1rem;
background: var(--color-coral);
border-radius: 50%;
font-style: normal;
transition: transform 180ms ease;
}
.ng-vw-possibilities-button:hover i {
transform: translateX(3px);
}
/* tiny note */
.ng-vw-possibilities-note {
display: flex;
gap: .55rem;
padding-top: 1.15rem;
border-top: 1px solid rgba(46, 59, 50, .08);
color: rgba(46, 59, 50, .43);
font-size: .62rem;
}
.ng-vw-possibilities-note > span {
color: var(--color-coral);
}
.ng-vw-possibilities-note p {
margin: 0;
}
.ng-vw-possibilities-note a {
color: var(--color-dark);
font-weight: 800;
text-decoration: none;
}
/* mobile */
@media (max-width: 820px) {
.ng-vw-possibilities-heading {
grid-template-columns: 1fr;
}
.ng-vw-possibilities-grid {
grid-template-columns: 1fr;
}
.ng-vw-possibility:nth-child(odd) {
border-right: 0;
}
.ng-vw-possibilities-bottom {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 520px) {
.ng-vw-possibility {
grid-template-columns: 38px 1fr;
padding: 1.6rem 0;
}
}
/* VRIJWILLIGER WORDEN — MOTION PASS */
/* 01 — EERST KIJKEN NAAR JOU */
.ng-vol-intro.is-vol-motion-ready .ng-vol-intro-copy > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-vol-intro.is-vol-visible .ng-vol-intro-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-vol-intro.is-vol-visible .ng-vol-intro-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-vol-intro.is-vol-visible .ng-vol-intro-copy > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 240ms;
}
.ng-vol-intro.is-vol-visible .ng-vol-intro-copy > *:nth-child(4) {
opacity: 1;
transform: translateY(0);
transition-delay: 340ms;
}
/* right questionnaire */
.ng-vol-intro.is-vol-motion-ready .ng-vol-fit {
opacity: 0;
transform: translateY(12px);
transition: opacity 500ms ease, transform 580ms cubic-bezier(.2,.75,.25,1);
}
.ng-vol-intro.is-vol-visible .ng-vol-fit {
opacity: 1;
transform: translateY(0);
transition-delay: 240ms;
}
.ng-vol-intro.is-vol-motion-ready .ng-vol-fit-heading, .ng-vol-intro.is-vol-motion-ready .ng-vol-fit-row, .ng-vol-intro.is-vol-motion-ready .ng-vol-fit-foot {
opacity: 0;
transform: translateY(7px);
transition: opacity 350ms ease, transform 420ms ease;
}
.ng-vol-intro.is-vol-visible .ng-vol-fit-heading {
opacity: 1;
transform: translateY(0);
transition-delay: 400ms;
}
.ng-vol-intro.is-vol-visible .ng-vol-fit-row:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 500ms;
}
.ng-vol-intro.is-vol-visible .ng-vol-fit-row:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 620ms;
}
.ng-vol-intro.is-vol-visible .ng-vol-fit-row:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 740ms;
}
.ng-vol-intro.is-vol-visible .ng-vol-fit-foot {
opacity: 1;
transform: translateY(0);
transition-delay: 880ms;
}
/* 02 — WAAR WIL JIJ IETS IN BETEKENEN? */
.ng-vw-possibilities.is-vol-motion-ready .ng-vw-possibilities-heading > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-vw-possibilities.is-vol-visible .ng-vw-possibilities-heading > div {
opacity: 1;
transform: translateY(0);
transition-delay: 60ms;
}
.ng-vw-possibilities.is-vol-visible .ng-vw-possibilities-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 190ms;
}
/* four directions */
.ng-vw-possibilities.is-vol-motion-ready .ng-vw-possibility {
opacity: 0;
transform: translateY(12px);
transition: opacity 400ms ease, transform 480ms cubic-bezier(.2,.75,.25,1);
}
.ng-vw-possibilities.is-vol-visible .ng-vw-possibility:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 310ms;
}
.ng-vw-possibilities.is-vol-visible .ng-vw-possibility:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 420ms;
}
.ng-vw-possibilities.is-vol-visible .ng-vw-possibility:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 530ms;
}
.ng-vw-possibilities.is-vol-visible .ng-vw-possibility:nth-child(4) {
opacity: 1;
transform: translateY(0);
transition-delay: 640ms;
}
/* little numbered circles */
.ng-vw-possibilities.is-vol-motion-ready .ng-vw-possibility-number {
opacity: 0;
transform: scale(.82);
transition: opacity 300ms ease, transform 390ms cubic-bezier(.2,1.15,.3,1);
}
.ng-vw-possibilities.is-vol-visible .ng-vw-possibility-number {
opacity: 1;
transform: scale(1);
}
/* bottom bridge to vacancies */
.ng-vw-possibilities.is-vol-motion-ready .ng-vw-possibilities-bottom, .ng-vw-possibilities.is-vol-motion-ready .ng-vw-possibilities-note {
opacity: 0;
transform: translateY(7px);
transition: opacity 370ms ease, transform 430ms ease;
}
.ng-vw-possibilities.is-vol-visible .ng-vw-possibilities-bottom {
opacity: 1;
transform: translateY(0);
transition-delay: 780ms;
}
.ng-vw-possibilities.is-vol-visible .ng-vw-possibilities-note {
opacity: 1;
transform: translateY(0);
transition-delay: 900ms;
}
/* 03 — OPEN KENNISMAKING */
/* photo reveal without touching its layout */
.ng-vol-open.is-vol-motion-ready .ng-vol-open-photo {
opacity: 0;
clip-path: inset(0 0 10% 0);
transition: opacity 540ms ease, clip-path 720ms cubic-bezier(.2,.75,.25,1);
}
.ng-vol-open.is-vol-visible .ng-vol-open-photo {
opacity: 1;
clip-path: inset(0);
transition-delay: 80ms;
}
/* floating caption */
.ng-vol-open.is-vol-motion-ready .ng-vol-open-photo figcaption {
opacity: 0;
transition: opacity 360ms ease;
}
.ng-vol-open.is-vol-visible .ng-vol-open-photo figcaption {
opacity: 1;
transition-delay: 500ms;
}
/* copy */
.ng-vol-open.is-vol-motion-ready .ng-vol-open-copy > .ng-vol-kicker, .ng-vol-open.is-vol-motion-ready .ng-vol-open-copy > h2, .ng-vol-open.is-vol-motion-ready .ng-vol-open-lead, .ng-vol-open.is-vol-motion-ready .ng-vol-open-copy > p:not(.ng-vol-kicker, .ng-vol-open-lead) {
opacity: 0;
transform: translateY(9px);
transition: opacity 400ms ease, transform 470ms ease;
}
.ng-vol-open.is-vol-visible .ng-vol-open-copy > .ng-vol-kicker {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-vol-open.is-vol-visible .ng-vol-open-copy > h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 240ms;
}
.ng-vol-open.is-vol-visible .ng-vol-open-lead {
opacity: 1;
transform: translateY(0);
transition-delay: 340ms;
}
.ng-vol-open.is-vol-visible .ng-vol-open-copy > p:not(.ng-vol-kicker, .ng-vol-open-lead) {
opacity: 1;
transform: translateY(0);
transition-delay: 430ms;
}
/* three little prompts */
.ng-vol-open.is-vol-motion-ready .ng-vol-open-prompts > div {
opacity: 0;
transform: translateY(7px);
transition: opacity 340ms ease, transform 420ms ease;
}
.ng-vol-open.is-vol-visible .ng-vol-open-prompts > div:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 540ms;
}
.ng-vol-open.is-vol-visible .ng-vol-open-prompts > div:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 650ms;
}
.ng-vol-open.is-vol-visible .ng-vol-open-prompts > div:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 760ms;
}
.ng-vol-open.is-vol-motion-ready .ng-vol-open-action {
opacity: 0;
transform: translateY(7px);
transition: opacity 360ms ease, transform 430ms ease;
}
.ng-vol-open.is-vol-visible .ng-vol-open-action {
opacity: 1;
transform: translateY(0);
transition-delay: 880ms;
}
/* 04 — VRIJWILLIGERSVERHAAL */
.ng-vol-story.is-vol-motion-ready .ng-vol-story-intro > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 400ms ease, transform 480ms cubic-bezier(.2,.75,.25,1);
}
.ng-vol-story.is-vol-visible .ng-vol-story-intro > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-vol-story.is-vol-visible .ng-vol-story-intro > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-vol-story.is-vol-visible .ng-vol-story-intro > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 260ms;
}
/* quote card */
.ng-vol-story.is-vol-motion-ready .ng-vol-story-quote {
opacity: 0;
transform: translateY(12px);
transition: opacity 500ms ease, transform 580ms cubic-bezier(.2,.75,.25,1);
}
.ng-vol-story.is-vol-visible .ng-vol-story-quote {
opacity: 1;
transform: translateY(0);
transition-delay: 310ms;
}
/* quotation mark */
.ng-vol-story.is-vol-motion-ready .ng-vol-story-mark {
opacity: 0;
transition: opacity 300ms ease;
}
.ng-vol-story.is-vol-visible .ng-vol-story-mark {
opacity: 1;
transition-delay: 500ms;
}
/* coral decorative line */
.ng-vol-story.is-vol-motion-ready .ng-vol-story-line {
clip-path: inset(0 100% 0 0);
transition: clip-path 620ms cubic-bezier(.2,.75,.25,1);
}
.ng-vol-story.is-vol-visible .ng-vol-story-line {
clip-path: inset(0);
transition-delay: 560ms;
}
.ng-vol-story.is-vol-motion-ready .ng-vol-story-foot {
opacity: 0;
transition: opacity 380ms ease;
}
.ng-vol-story.is-vol-visible .ng-vol-story-foot {
opacity: 1;
transition-delay: 800ms;
}
/* 05 — FINAL CTA */
.ng-vol-final.is-vol-motion-ready .ng-vol-final-copy > * {
opacity: 0;
transform: translateY(9px);
transition: opacity 400ms ease, transform 470ms ease;
}
.ng-vol-final.is-vol-visible .ng-vol-final-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-vol-final.is-vol-visible .ng-vol-final-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-vol-final.is-vol-visible .ng-vol-final-copy > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* * Keep the existing hover padding-left. * Entrance only moves vertically. */
.ng-vol-final.is-vol-motion-ready .ng-vol-final-action {
opacity: 0;
transform: translateY(8px);
transition: opacity 360ms ease, transform 430ms ease, padding-left .25s ease;
}
.ng-vol-final.is-vol-visible .ng-vol-final-action:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 340ms;
}
.ng-vol-final.is-vol-visible .ng-vol-final-action:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 470ms;
}
.ng-vol-final.is-vol-motion-ready .ng-vol-final-bottom {
opacity: 0;
transition: opacity 380ms ease;
}
.ng-vol-final.is-vol-visible .ng-vol-final-bottom {
opacity: 1;
transition-delay: 620ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-vol-page *, .ng-vol-page *::before, .ng-vol-page *::after {
animation: none !important;
transition: none !important;
}
}
/* CONTACT — MOTION PASS */
/* 01 — MAIN HEADING */
.ng-contact-main.is-contact-motion-ready .ng-contact-heading > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-contact-main.is-contact-visible .ng-contact-heading > div {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-contact-main.is-contact-visible .ng-contact-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 180ms;
}
/* 02 — LEFT CONTACT INFO */
.ng-contact-main.is-contact-motion-ready .ng-contact-info-intro {
opacity: 0;
transform: translateY(8px);
transition: opacity 380ms ease, transform 450ms ease;
}
.ng-contact-main.is-contact-visible .ng-contact-info-intro {
opacity: 1;
transform: translateY(0);
transition-delay: 300ms;
}
/* individual info rows */
.ng-contact-main.is-contact-motion-ready .ng-contact-info-row {
opacity: 0;
transform: translateY(7px);
transition: opacity 350ms ease, transform 420ms ease;
}
.ng-contact-main.is-contact-visible .ng-contact-info-row:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 410ms;
}
.ng-contact-main.is-contact-visible .ng-contact-info-row:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 510ms;
}
.ng-contact-main.is-contact-visible .ng-contact-info-row:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 610ms;
}
.ng-contact-main.is-contact-visible .ng-contact-info-row:nth-child(4) {
opacity: 1;
transform: translateY(0);
transition-delay: 710ms;
}
.ng-contact-main.is-contact-motion-ready .ng-contact-side-note {
opacity: 0;
transition: opacity 360ms ease;
}
.ng-contact-main.is-contact-visible .ng-contact-side-note {
opacity: 1;
transition-delay: 820ms;
}
/* 03 — CONTACT FORM */
/* * JS gives each direct form child its own --contact-step. * We animate wrappers only, so input focus/hover styling * remains completely untouched. */
.ng-contact-main.is-contact-motion-ready .ng-contact-form > .is-contact-form-step {
opacity: 0;
transform: translateY(9px);
transition: opacity 360ms ease, transform 430ms ease;
transition-delay: calc(340ms + (var(--contact-step) * 95ms));
}
.ng-contact-main.is-contact-visible .ng-contact-form > .is-contact-form-step {
opacity: 1;
transform: translateY(0);
}
/* success/error message */
.ng-contact-main.is-contact-motion-ready .ng-contact-message {
opacity: 0;
transform: translateY(7px);
transition: opacity 350ms ease, transform 420ms ease;
}
.ng-contact-main.is-contact-visible .ng-contact-message {
opacity: 1;
transform: translateY(0);
transition-delay: 280ms;
}
/* 04 — NOORDBUITEN CONTACT STRIP */
.ng-contact-noordbuiten.is-contact-motion-ready .ng-contact-noordbuiten-inner > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-contact-noordbuiten.is-contact-visible .ng-contact-noordbuiten-inner > *:first-child {
opacity: 1;
transform: translateY(0);
transition-delay: 60ms;
}
.ng-contact-noordbuiten.is-contact-visible .ng-contact-noordbuiten-action {
opacity: 1;
transform: translateY(0);
transition-delay: 210ms;
}
.ng-contact-noordbuiten.is-contact-motion-ready .ng-contact-noordbuiten-bottom {
opacity: 0;
transition: opacity 380ms ease;
}
.ng-contact-noordbuiten.is-contact-visible .ng-contact-noordbuiten-bottom {
opacity: 1;
transition-delay: 420ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-contact-main *, .ng-contact-noordbuiten *, .ng-contact-main *::before, .ng-contact-main *::after, .ng-contact-noordbuiten *::before, .ng-contact-noordbuiten *::after {
animation: none !important;
transition: none !important;
}
}
/* VACATURES — MOTION PASS */
/* 01 — INTRO */
.ng-vac-intro.is-vac-motion-ready .ng-vac-intro-copy > *, .ng-vac-intro.is-vac-motion-ready .ng-vac-intro-side > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-vac-intro.is-vac-visible .ng-vac-intro-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-vac-intro.is-vac-visible .ng-vac-intro-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-vac-intro.is-vac-visible .ng-vac-intro-side > p {
opacity: 1;
transform: translateY(0);
transition-delay: 220ms;
}
/* Vacancy count */
.ng-vac-intro.is-vac-motion-ready .ng-vac-intro-count {
opacity: 0;
transform: translateY(8px);
transition: opacity 380ms ease, transform 450ms ease;
}
.ng-vac-intro.is-vac-visible .ng-vac-intro-count {
opacity: 1;
transform: translateY(0);
transition-delay: 340ms;
}
.ng-vac-intro.is-vac-motion-ready .ng-vac-intro-count strong {
transform: scale(.84);
transition: transform 430ms cubic-bezier(.2,1.15,.3,1);
}
.ng-vac-intro.is-vac-visible .ng-vac-intro-count strong {
transform: scale(1);
transition-delay: 410ms;
}
/* 02 — CURRENT VACANCIES */
.ng-vac-list-section.is-vac-motion-ready .ng-vac-list-heading > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-vac-list-section.is-vac-visible .ng-vac-list-heading > div {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-vac-list-section.is-vac-visible .ng-vac-list-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 180ms;
}
/* Dynamic vacancy rows */
.ng-vac-list-section.is-vac-motion-ready .ng-vac-item {
opacity: 0;
transform: translateY(12px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
transition-delay: calc(300ms + (var(--vac-index, 0) * 110ms));
}
.ng-vac-list-section.is-vac-visible .ng-vac-item {
opacity: 1;
transform: translateY(0);
}
/* * Reveal the image container. * The IMG keeps its existing hover scale. */
.ng-vac-list-section.is-vac-motion-ready .ng-vac-item-image {
clip-path: inset(0 0 10% 0);
transition: clip-path 700ms cubic-bezier(.2,.75,.25,1);
transition-delay: calc(340ms + (var(--vac-index, 0) * 110ms));
}
.ng-vac-list-section.is-vac-visible .ng-vac-item-image {
clip-path: inset(0);
}
/* Status badge */
.ng-vac-list-section.is-vac-motion-ready .ng-vac-item-status {
opacity: 0;
transition: opacity 320ms ease;
}
.ng-vac-list-section.is-vac-visible .ng-vac-item-status {
opacity: 1;
transition-delay: calc(560ms + (var(--vac-index, 0) * 110ms));
}
/* Empty state, if there are ever no vacancies */
.ng-vac-list-section.is-vac-motion-ready .ng-vac-empty {
opacity: 0;
transform: translateY(12px);
transition: opacity 450ms ease, transform 520ms cubic-bezier(.2,.75,.25,1);
}
.ng-vac-list-section.is-vac-visible .ng-vac-empty {
opacity: 1;
transform: translateY(0);
transition-delay: 300ms;
}
/* 03 — NOTHING FOUND / FINAL */
.ng-vac-final.is-vac-motion-ready .ng-vac-final-copy > * {
opacity: 0;
transform: translateY(9px);
transition: opacity 400ms ease, transform 470ms ease;
}
.ng-vac-final.is-vac-visible .ng-vac-final-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-vac-final.is-vac-visible .ng-vac-final-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-vac-final.is-vac-visible .ng-vac-final-copy > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
/* * Keep existing padding-left hover transition. */
.ng-vac-final.is-vac-motion-ready .ng-vac-final-action {
opacity: 0;
transform: translateY(8px);
transition: opacity 360ms ease, transform 430ms ease, padding-left .25s ease;
}
.ng-vac-final.is-vac-visible .ng-vac-final-action:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 340ms;
}
.ng-vac-final.is-vac-visible .ng-vac-final-action:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 470ms;
}
.ng-vac-final.is-vac-motion-ready .ng-vac-final-note {
opacity: 0;
transition: opacity 380ms ease;
}
.ng-vac-final.is-vac-visible .ng-vac-final-note {
opacity: 1;
transition-delay: 620ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-vac-intro *, .ng-vac-list-section *, .ng-vac-final *, .ng-vac-intro *::before, .ng-vac-intro *::after, .ng-vac-list-section *::before, .ng-vac-list-section *::after, .ng-vac-final *::before, .ng-vac-final *::after {
animation: none !important;
transition: none !important;
}
}
/* STEUN NOORDGROEIT — MOTION */
/* COPY */
.ng-support-give.is-support-motion-ready .ng-support-give-copy > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-support-give.is-support-visible .ng-support-give-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-support-give.is-support-visible .ng-support-give-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-support-give.is-support-visible .ng-support-give-copy > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
.ng-support-give.is-support-visible .ng-support-give-copy > *:nth-child(4) {
opacity: 1;
transform: translateY(0);
transition-delay: 360ms;
}
/* little thank-you note */
.ng-support-give.is-support-motion-ready .ng-support-give-note {
opacity: 0;
transform: translateY(7px);
transition: opacity 370ms ease, transform 430ms ease;
}
.ng-support-give.is-support-visible .ng-support-give-note {
opacity: 1;
transform: translateY(0);
transition-delay: 470ms;
}
/* DONATION CARD */
.ng-support-give.is-support-motion-ready .ng-support-donation {
opacity: 0;
transform: translateY(15px);
transition: opacity 520ms ease, transform 620ms cubic-bezier(.2,.75,.25,1);
}
.ng-support-give.is-support-visible .ng-support-donation {
opacity: 1;
transform: translateY(0);
transition-delay: 220ms;
}
/* card heading */
.ng-support-give.is-support-motion-ready .ng-support-donation-top {
opacity: 0;
transition: opacity 350ms ease;
}
.ng-support-give.is-support-visible .ng-support-donation-top {
opacity: 1;
transition-delay: 420ms;
}
/* QR */
/* * Open the QR area without touching the QR image itself. * Works for placeholder now + actual QR later. */
.ng-support-give.is-support-motion-ready .ng-support-qr-wrap {
opacity: 0;
clip-path: inset(0 0 12% 0);
transition: opacity 480ms ease, clip-path 680ms cubic-bezier(.2,.75,.25,1);
}
.ng-support-give.is-support-visible .ng-support-qr-wrap {
opacity: 1;
clip-path: inset(0);
transition-delay: 500ms;
}
/* little scanner corners */
.ng-support-give.is-support-motion-ready .ng-support-qr-corner {
opacity: 0;
transition: opacity 300ms ease;
}
.ng-support-give.is-support-visible .ng-support-qr-corner--one {
opacity: 1;
transition-delay: 720ms;
}
.ng-support-give.is-support-visible .ng-support-qr-corner--two {
opacity: 1;
transition-delay: 820ms;
}
/* DONATION COPY */
.ng-support-give.is-support-motion-ready .ng-support-donation-copy > * {
opacity: 0;
transform: translateY(7px);
transition: opacity 350ms ease, transform 420ms ease;
}
.ng-support-give.is-support-visible .ng-support-donation-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 800ms;
}
.ng-support-give.is-support-visible .ng-support-donation-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 890ms;
}
.ng-support-give.is-support-visible .ng-support-donation-copy > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 980ms;
}
/* thank-you footer */
.ng-support-give.is-support-motion-ready .ng-support-donation-foot {
opacity: 0;
transition: opacity 370ms ease;
}
.ng-support-give.is-support-visible .ng-support-donation-foot {
opacity: 1;
transition-delay: 1100ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-support-give *, .ng-support-give *::before, .ng-support-give *::after {
animation: none !important;
transition: none !important;
}
}
/* SAMENWERKEN — VIER INGANGEN */
.ng-collab-paths {
position: relative;
padding: clamp(6rem, 9vw, 8.5rem) 0;
overflow: hidden;
background: #fffdf9;
color: var(--color-dark);
}
/* quiet background detail */
.ng-collab-paths::after {
content: "";
position: absolute;
right: -135px;
top: 40%;
width: 280px;
height: 280px;
border: 48px solid rgba(46,59,50,.025);
border-radius: 50%;
pointer-events: none;
}
/* HEADING */
.ng-collab-paths-heading {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr);
gap: clamp(3rem, 8vw, 8rem);
align-items: end;
margin-bottom: clamp(4rem, 7vw, 6.5rem);
}
.ng-collab-paths-heading h2 {
max-width: 690px;
margin: 0;
color: var(--color-dark);
font-size: var(--ng-section-title);
font-weight: 750;
line-height: 1.02;
letter-spacing: -.045em;
}
.ng-collab-paths-heading > p {
max-width: 400px;
margin: 0;
color: rgba(46,59,50,.52);
font-size: var(--ng-home-body);
line-height: 1.7;
}
/* ROUTE */
.ng-collab-paths-route {
position: relative;
width: min(100%, 980px);
margin: 0 auto;
}
/* central vertical line */
.ng-collab-paths-line {
position: absolute;
top: 28px;
bottom: 28px;
left: 50%;
width: 1px;
transform: translateX(-50%);
background: rgba(46,59,50,.09);
}
.ng-collab-paths-line span {
position: absolute;
inset: 0;
background: repeating-linear-gradient(to bottom, var(--color-coral) 0, var(--color-coral) 5px, transparent 5px, transparent 11px);
opacity: .48;
}
/* EACH STOP */
.ng-collab-path {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
gap: clamp(1.4rem, 3vw, 2.5rem);
align-items: center;
min-height: 205px;
}
.ng-collab-path + .ng-collab-path {
margin-top: clamp(1rem, 2vw, 1.8rem);
}
/* NODE */
.ng-collab-path-node {
position: relative;
z-index: 3;
display: grid;
place-items: center;
width: 46px;
height: 46px;
margin: 0 auto;
border: 1px solid rgba(240,102,83,.34);
border-radius: 50%;
background: #fffdf9;
box-shadow: 0 8px 20px rgba(46,59,50,.04);
}
.ng-collab-path-node::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-coral);
}
.ng-collab-path-node span {
position: absolute;
top: -19px;
color: rgba(46,59,50,.32);
font-size: .5rem;
font-weight: 850;
letter-spacing: .08em;
}
/* COPY — NO BOXY CARD */
.ng-collab-path-card {
position: relative;
padding: 1.8rem 0;
border-top: 1px solid rgba(46,59,50,.1);
border-bottom: 1px solid rgba(46,59,50,.1);
}
/* little route edge */
.ng-collab-path--left .ng-collab-path-card::after, .ng-collab-path--right .ng-collab-path-card::before {
content: "";
position: absolute;
top: 50%;
width: clamp(20px, 3vw, 42px);
height: 1px;
background: var(--color-coral);
opacity: .36;
}
.ng-collab-path--left .ng-collab-path-card::after {
right: calc(clamp(20px, 3vw, 42px) * -1);
}
.ng-collab-path--right .ng-collab-path-card::before {
left: calc(clamp(20px, 3vw, 42px) * -1);
}
.ng-collab-path-card small {
display: block;
margin-bottom: .55rem;
color: var(--color-coral);
font-size: .55rem;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.ng-collab-path-card h3 {
max-width: 390px;
margin: 0;
color: var(--color-dark);
font-size: clamp(1.45rem, 2.3vw, 2rem);
font-weight: 750;
line-height: 1.02;
letter-spacing: -.04em;
}
.ng-collab-path-card p {
max-width: 430px;
margin: .8rem 0 0;
color: rgba(46,59,50,.49);
font-size: .74rem;
line-height: 1.65;
}
/* TAGS */
.ng-collab-path-tags {
display: flex;
flex-wrap: wrap;
gap: .45rem;
margin-top: 1.15rem;
}
.ng-collab-path-tags span {
padding: .35rem .55rem;
border: 1px solid rgba(46,59,50,.1);
border-radius: 999px;
color: rgba(46,59,50,.52);
background: rgba(238,244,232,.5);
font-size: .53rem;
font-weight: 700;
}
/* alignment */
.ng-collab-path--left .ng-collab-path-card {
text-align: right;
}
.ng-collab-path--left .ng-collab-path-card h3, .ng-collab-path--left .ng-collab-path-card p {
margin-left: auto;
}
.ng-collab-path--left .ng-collab-path-tags {
justify-content: flex-end;
}
/* BOTTOM NOTE */
.ng-collab-paths-bottom {
display: flex;
align-items: flex-start;
gap: .65rem;
width: min(100%, 980px);
margin: clamp(3.5rem, 6vw, 5rem) auto 0;
padding-top: 1.3rem;
border-top: 1px solid rgba(46,59,50,.09);
}
.ng-collab-paths-bottom > span {
color: var(--color-coral);
}
.ng-collab-paths-bottom p {
margin: 0;
color: rgba(46,59,50,.42);
font-size: .64rem;
line-height: 1.5;
}
.ng-collab-paths-bottom strong {
color: var(--color-dark);
}
/* MOBILE */
@media (max-width: 760px) {
.ng-collab-paths-heading {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.ng-collab-paths-route {
padding-left: 54px;
}
.ng-collab-paths-line {
left: 22px;
transform: none;
}
.ng-collab-path {
display: block;
min-height: 0;
margin-bottom: 2.4rem;
}
.ng-collab-path-empty {
display: none;
}
.ng-collab-path-node {
position: absolute;
top: 1.8rem;
left: -54px;
width: 44px;
height: 44px;
margin: 0;
}
.ng-collab-path-card, .ng-collab-path--left .ng-collab-path-card {
text-align: left;
}
.ng-collab-path--left .ng-collab-path-card h3, .ng-collab-path--left .ng-collab-path-card p {
margin-left: 0;
}
.ng-collab-path--left .ng-collab-path-tags {
justify-content: flex-start;
}
.ng-collab-path-card::before, .ng-collab-path-card::after {
display: none;
}
}
/* SAMENWERKEN — VIER INGANGEN — COMPACT EDITORIAL VERSION */
.ng-collab-paths {
padding: clamp(4.75rem, 7vw, 6.5rem) 0;
}
/* tighter intro */
.ng-collab-paths-heading {
margin-bottom: clamp(2.75rem, 4vw, 3.75rem);
}
/* TURN ROUTE INTO 2 × 2 FIELD */
.ng-collab-paths-route {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
max-width: none;
border-top: 1px solid rgba(46,59,50,.1);
border-bottom: 1px solid rgba(46,59,50,.1);
}
/* old vertical route is no longer needed */
.ng-collab-paths-line {
display: none;
}
/* each path becomes one compact cell */
.ng-collab-path, .ng-collab-path + .ng-collab-path {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 1.25rem;
min-height: 0;
margin: 0;
padding: clamp(1.8rem, 3vw, 2.5rem);
align-items: start;
}
/* vertical divider between columns */
.ng-collab-path:nth-child(odd) {
border-right: 1px solid rgba(46,59,50,.1);
}
/* divider between rows */
.ng-collab-path:nth-child(-n + 2) {
border-bottom: 1px solid rgba(46,59,50,.1);
}
/* REMOVE LEFT / RIGHT ALTERNATION */
.ng-collab-path-empty {
display: none;
}
.ng-collab-path--left .ng-collab-path-card, .ng-collab-path--right .ng-collab-path-card {
text-align: left;
}
.ng-collab-path--left .ng-collab-path-card h3, .ng-collab-path--left .ng-collab-path-card p {
margin-left: 0;
}
.ng-collab-path--left .ng-collab-path-tags {
justify-content: flex-start;
}
/* NUMBER / NODE */
.ng-collab-path-node {
grid-column: 1;
grid-row: 1;
width: 40px;
height: 40px;
margin: .1rem 0 0;
border-color: rgba(240,102,83,.28);
background: transparent;
box-shadow: none;
}
.ng-collab-path-node span {
top: auto;
color: var(--color-coral);
font-size: .55rem;
letter-spacing: .08em;
}
.ng-collab-path-node::after {
display: none;
}
/* COPY */
.ng-collab-path-card {
grid-column: 2;
grid-row: 1;
padding: 0;
border: 0;
}
/* remove old connector bits */
.ng-collab-path-card::before, .ng-collab-path-card::after {
display: none !important;
}
.ng-collab-path-card h3 {
max-width: 420px;
font-size: clamp(1.4rem, 2vw, 1.85rem);
}
.ng-collab-path-card p {
max-width: 430px;
margin-top: .65rem;
}
/* TAGS */
.ng-collab-path-tags {
margin-top: .9rem;
}
/* SMALL CORAL ACCENT */
.ng-collab-path {
position: relative;
}
.ng-collab-path::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 2px;
background: var(--color-coral);
opacity: .55;
}
/* BOTTOM NOTE */
.ng-collab-paths-bottom {
width: 100%;
margin-top: clamp(2rem, 3vw, 2.75rem);
padding-top: 0;
border-top: 0;
}
/* MOBILE */
@media (max-width: 760px) {
.ng-collab-paths-route {
grid-template-columns: 1fr;
padding-left: 0;
}
.ng-collab-path, .ng-collab-path + .ng-collab-path {
display: grid;
grid-template-columns: 46px minmax(0,1fr);
margin: 0;
padding: 1.8rem 0;
}
.ng-collab-path:nth-child(odd) {
border-right: 0;
}
.ng-collab-path:not(:last-child) {
border-bottom: 1px solid rgba(46,59,50,.1);
}
.ng-collab-path-node {
position: relative;
top: auto;
left: auto;
}
}
/* SAMENWERKEN — SECTION COLOUR RHYTHM */
/* 01 — intro */
.ng-collab-intro {
background: #fffdf9;
}
/* 02 — types / four entrances */
.ng-collab-paths {
background: #eaf2e5;
}
/* 03 — existing partner proof */
.ng-collab-proof {
background: var(--color-dark);
}
/* 04 — final CTA */
.ng-collab-final {
background: #f7f3eb;
}
/* SAMENWERKEN — WE DOEN DIT AL SAMEN */
.ng-collab-proof {
background: var(--color-dark);
color: #f8f6f0;
padding: 120px 0;
}
.ng-collab-proof .ng-collab-kicker {
color: var(--color-accent);
}
.ng-collab-proof-heading {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px);
gap: 48px;
align-items: end;
margin-bottom: 56px;
}
.ng-collab-proof-heading h2 {
color: #fff;
margin: 0;
}
.ng-collab-proof-copy p {
color: rgba(255, 255, 255, 0.78);
margin: 0 0 18px;
}
.ng-collab-proof-stats {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ng-collab-proof-stats span {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
}
.ng-collab-proof-groups {
display: grid;
gap: 28px;
}
.ng-collab-proof-group-block {
padding: 28px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.ng-collab-proof-group-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
margin-bottom: 24px;
}
.ng-collab-proof-group-head h3 {
margin: 0 0 6px;
color: #fff;
font-size: clamp(1.5rem, 2vw, 2rem);
}
.ng-collab-proof-group-head p {
margin: 0;
color: rgba(255, 255, 255, 0.72);
max-width: 640px;
}
.ng-collab-proof-count {
flex: 0 0 auto;
min-width: 44px;
height: 44px;
padding: 0 14px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-accent);
color: #fff;
font-weight: 800;
font-size: 0.95rem;
}
.ng-collab-proof-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.ng-collab-proof-card {
min-height: 118px;
border-radius: 18px;
background: #fffdf8;
border: 1px solid rgba(26, 32, 26, 0.08);
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
}
.ng-collab-proof-card img {
display: block;
width: 100%;
max-width: 150px;
max-height: 62px;
object-fit: contain;
filter: none;
}
.ng-collab-proof-card--fallback {
text-align: center;
}
.ng-collab-proof-fallback {
max-width: 180px;
color: var(--color-dark);
font-size: 0.78rem;
font-weight: 750;
line-height: 1.35;
}
.ng-collab-proof-bottom {
margin-top: 24px;
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.72);
font-size: 0.95rem;
}
.ng-collab-proof-bottom strong {
color: #fff;
}
@media (max-width: 1100px) {
.ng-collab-proof-heading {
grid-template-columns: 1fr;
}
.ng-collab-proof-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 780px) {
.ng-collab-proof-group-head {
flex-direction: column;
align-items: flex-start;
}
.ng-collab-proof-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ng-collab-proof-card {
min-height: 104px;
}
}
@media (max-width: 520px) {
.ng-collab-proof {
padding: 88px 0;
}
.ng-collab-proof-group-block {
padding: 20px;
border-radius: 22px;
}
.ng-collab-proof-grid {
grid-template-columns: 1fr;
}
}
.ng-collab-proof-card {
color: var(--color-dark);
}
.ng-collab-proof-card span, .ng-collab-proof-card p, .ng-collab-proof-card strong {
color: var(--color-dark);
}
/* SAMENWERKEN — MOTION PASS */
/* 01 — INTRO */
.ng-collab-intro.is-collab-motion-ready .ng-collab-intro-copy > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-collab-intro.is-collab-visible .ng-collab-intro-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-collab-intro.is-collab-visible .ng-collab-intro-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 140ms;
}
.ng-collab-intro.is-collab-visible .ng-collab-intro-copy > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 230ms;
}
.ng-collab-intro.is-collab-visible .ng-collab-intro-copy > *:nth-child(4) {
opacity: 1;
transform: translateY(0);
transition-delay: 320ms;
}
.ng-collab-intro.is-collab-visible .ng-collab-intro-note {
opacity: 1;
transform: translateY(0);
transition-delay: 410ms;
}
/* contribution panel */
.ng-collab-intro.is-collab-motion-ready .ng-collab-contributions {
opacity: 0;
transform: translateY(12px);
transition: opacity 500ms ease, transform 580ms cubic-bezier(.2,.75,.25,1);
}
.ng-collab-intro.is-collab-visible .ng-collab-contributions {
opacity: 1;
transform: translateY(0);
transition-delay: 220ms;
}
.ng-collab-intro.is-collab-motion-ready .ng-collab-contribution {
opacity: 0;
transform: translateY(7px);
transition: opacity 350ms ease, transform 420ms ease;
transition-delay: calc(380ms + var(--collab-delay, 0ms));
}
.ng-collab-intro.is-collab-visible .ng-collab-contribution {
opacity: 1;
transform: translateY(0);
}
/* 02 — THE BRIDGE */
/* left need */
/* route elements */
/* first connection */
/* central NoordgroeiT point */
/* second connection */
/* partner side */
/* result */
/* OPTIONAL — GREEN "FOR WHO" SECTION — Works whether you're using the old list OR compact paths. */
.ng-collab-paths.is-collab-motion-ready .ng-collab-paths-heading > * {
opacity: 0;
transform: translateY(9px);
transition: opacity 400ms ease, transform 470ms ease;
}
.ng-collab-paths.is-collab-visible .ng-collab-paths-heading > div {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-collab-paths.is-collab-visible .ng-collab-paths-heading > p {
opacity: 1;
transform: translateY(0);
transition-delay: 170ms;
}
.ng-collab-paths.is-collab-motion-ready .ng-collab-path {
opacity: 0;
transform: translateY(9px);
transition: opacity 380ms ease, transform 450ms ease;
transition-delay: calc(280ms + var(--collab-delay, 0ms));
}
.ng-collab-paths.is-collab-visible .ng-collab-path {
opacity: 1;
transform: translateY(0);
}
/* 03 — PARTNER PROOF HEADING */
.ng-collab-proof.is-collab-motion-ready .ng-collab-proof-heading > * {
opacity: 0;
transform: translateY(10px);
transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.75,.25,1);
}
.ng-collab-proof.is-collab-visible .ng-collab-proof-heading > div:first-child {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-collab-proof.is-collab-visible .ng-collab-proof-copy {
opacity: 1;
transform: translateY(0);
transition-delay: 180ms;
}
/* PARTNER GROUPS — OBSERVED INDIVIDUALLY */
.ng-collab-proof-group-block.is-collab-group-ready {
opacity: 0;
transform: translateY(12px);
transition: opacity 450ms ease, transform 520ms cubic-bezier(.2,.75,.25,1);
}
.ng-collab-proof-group-block.is-collab-group-visible {
opacity: 1;
transform: translateY(0);
}
/* group heading */
.ng-collab-proof-group-block.is-collab-group-ready .ng-collab-proof-group-head {
opacity: 0;
transform: translateY(7px);
transition: opacity 340ms ease, transform 410ms ease;
}
.ng-collab-proof-group-block.is-collab-group-visible .ng-collab-proof-group-head {
opacity: 1;
transform: translateY(0);
transition-delay: 120ms;
}
/* individual logo tiles */
.ng-collab-proof-group-block.is-collab-group-ready .ng-collab-proof-card {
opacity: 0;
transform: translateY(7px);
transition: opacity 320ms ease, transform 390ms ease;
transition-delay: calc(220ms + var(--collab-card-delay, 0ms));
}
.ng-collab-proof-group-block.is-collab-group-visible .ng-collab-proof-card {
opacity: 1;
transform: translateY(0);
}
/* closing line */
.ng-collab-proof.is-collab-motion-ready .ng-collab-proof-bottom {
opacity: 0;
transition: opacity 380ms ease;
}
.ng-collab-proof.is-collab-visible .ng-collab-proof-bottom {
opacity: 1;
transition-delay: 350ms;
}
/* 04 — FINAL CTA */
.ng-collab-final.is-collab-motion-ready .ng-collab-final-copy > * {
opacity: 0;
transform: translateY(9px);
transition: opacity 400ms ease, transform 470ms ease;
}
.ng-collab-final.is-collab-visible .ng-collab-final-copy > *:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 50ms;
}
.ng-collab-final.is-collab-visible .ng-collab-final-copy > *:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 150ms;
}
.ng-collab-final.is-collab-visible .ng-collab-final-copy > *:nth-child(3) {
opacity: 1;
transform: translateY(0);
transition-delay: 250ms;
}
.ng-collab-final.is-collab-motion-ready .ng-collab-final-actions > a {
opacity: 0;
transform: translateY(8px);
transition: opacity 360ms ease, transform 430ms ease;
}
.ng-collab-final.is-collab-visible .ng-collab-final-actions > a:nth-child(1) {
opacity: 1;
transform: translateY(0);
transition-delay: 340ms;
}
.ng-collab-final.is-collab-visible .ng-collab-final-actions > a:nth-child(2) {
opacity: 1;
transform: translateY(0);
transition-delay: 470ms;
}
.ng-collab-final.is-collab-motion-ready .ng-collab-final-bottom {
opacity: 0;
transition: opacity 380ms ease;
}
.ng-collab-final.is-collab-visible .ng-collab-final-bottom {
opacity: 1;
transition-delay: 620ms;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.ng-collab-page *, .ng-collab-page *::before, .ng-collab-page *::after {
animation: none !important;
transition: none !important;
}
}
/* NOORDBUITEN BEZOEKEN — CORAL TARGET */
.ng-nbv-hero-kicker {
display: flex;
align-items: center;
gap: .6rem;
}
.ng-nbv-hero-kicker::before {
content: "";
width: 11px;
height: 11px;
flex: 0 0 11px;
border-radius: 50%;
background:
radial-gradient(
circle,
var(--color-coral) 0 2px,
transparent 2px 4px,
var(--color-coral) 4px 5px,
transparent 5px
);
}
/* =========================================================
SAMENWERKEN — PARTNER HEADING MOBILE FIX
The complete partner section is extremely tall on mobile,
so its section-level IntersectionObserver may never reach
the required percentage of visibility.
Keep the heading visible on mobile. Individual partner
groups can still animate normally.
========================================================= */
@media (max-width: 780px) {
.ng-collab-proof.is-collab-motion-ready
.ng-collab-proof-heading > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* MOBILE MENU — INNER PAGE HARD FIX — Homepage already works, so leave it alone. */
@media (max-width: 1180px) {
/* Keep the complete inner-page header in the viewport */
body:not(.home) .ng-site-header {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
width: 100%;
z-index: 999999 !important;
}
/* Fixed header no longer takes up document space */
body:not(.home) {
padding-top: 100px;
}
/* Menu is anchored directly underneath the visible header */
body:not(.home)
.ng-site-header
.ng-primary-navigation {
position: absolute !important;
top: calc(100% + 8px) !important;
right: 0 !important;
left: 0 !important;
z-index: 1000000 !important;
max-height: calc(100dvh - 120px);
overflow-y: auto;
overscroll-behavior: contain;
}
/* When JS says open, it is REALLY open */
body:not(.home)
.ng-site-header.menu-is-open
.ng-primary-navigation {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}
/* WordPress toolbar while logged in */
@media (max-width: 782px) {
body.admin-bar:not(.home)
.ng-site-header {
top: 46px !important;
}
}
/* ACCESSIBILITY — FINAL CONTRAST PASS — Lighthouse contrast fixes */
:root {
/*
* Original coral stays available for decorative use.
* These two variants are for readable text/buttons.
*/
--color-coral-accessible: #b84438;
--color-coral-on-dark: #f3a28c;
}
/* VOLUNTEER SPOTLIGHT */
/* Small coral text on cream needs stronger contrast */
/* Attribution text was too faint */
/* HOME — JOIN / VACATURE BUTTON */
/*
* White text on the original coral does not quite reach
* WCAG AA. Keep white text, slightly deepen the coral.
*/
/* FOOTER */
/* Small footer privacy text was much too faint */
.site-footer
.footer-newsletter-privacy {
color: rgba(255, 255, 255, .62) !important;
}
/*
* Original coral is too dark against the dark-green footer.
* Use the lighter coral variant here.
*/
.site-footer
.footer-small-label {
color: var(--color-coral-on-dark);
}
/* Newsletter submit button uses the same white/coral combo */
.site-footer
.footer-newsletter-form input[type="submit"],
.site-footer
.footer-newsletter-form button[type="submit"] {
color: #fff;
background: var(--color-coral-accessible);
}
/* =========================================================
FOOTER — LIVE MAILPOET
Global inner-page version
========================================================= */
.footer-newsletter-form {
width: 100%;
margin-top: 1.15rem;
}
.footer-newsletter-form .mailpoet_form {
padding: 0 !important;
background: transparent !important;
}
.footer-newsletter-form .mailpoet_paragraph,
.footer-newsletter-form .mailpoet_form_paragraph {
margin: 0 0 .55rem !important;
}
.footer-newsletter-form input[type="email"],
.footer-newsletter-form .mailpoet_text {
width: 100% !important;
min-height: 46px !important;
padding: .75rem 1rem !important;
color: var(--color-dark) !important;
background: rgba(255,255,255,.96) !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: .65rem !important;
font-family: var(--font-primary) !important;
font-size: .72rem !important;
box-sizing: border-box;
outline: none;
}
.footer-newsletter-form input[type="email"]:focus,
.footer-newsletter-form .mailpoet_text:focus {
border-color: var(--color-coral) !important;
box-shadow:
0 0 0 3px rgba(240,102,83,.13) !important;
}
.footer-newsletter-form input[type="submit"],
.footer-newsletter-form button[type="submit"],
.footer-newsletter-form .mailpoet_submit {
width: 100% !important;
min-height: 42px !important;
margin-top: .1rem !important;
padding: .65rem 1rem !important;
color: #fff !important;
background: #b84438 !important;
border: 0 !important;
border-radius: 999px !important;
font-family: var(--font-primary) !important;
font-size: .7rem !important;
font-weight: 800 !important;
cursor: pointer;
}
.footer-newsletter-form .mailpoet_submit:hover {
transform: translateY(-2px);
}
.footer-newsletter-privacy {
margin: .7rem 0 0 !important;
color: rgba(255,255,255,.62) !important;
font-size: .58rem !important;
line-height: 1.45 !important;
}