- render flush (no native bullet
gutter) and stack their items as a flex column with 14px gap.
- inherits paragraph typography (18 / 1.55 / -0.005em / 400 /
#072c22). Components can override `list-style`, `gap`, or per-li
layout (e.g. flex row with a custom check icon) without
re-declaring typography.
============================================================ */
ul, ol {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
li {
font-size: 18px;
line-height: 1.55;
font-weight: 500;
letter-spacing: -0.005em;
color: #072c22;
}
.container { max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
display: inline-block;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ff-ink-3);
font-weight: 700;
}
.eyebrow.on-dark { color: var(--ff-on-dark-2); }
/* ===== Buttons ===== */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 12px 12px 22px;
border: 1px solid var(--ff-ink);
border-radius: 999px;
font-size: 14px;
font-weight: 600;
color: var(--ff-ink);
background: transparent;
text-decoration: none;
cursor: pointer;
letter-spacing: -0.01em;
font-family: inherit;
transition: transform 220ms cubic-bezier(0.16,1,0.3,1), background 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.btn .chip {
width: 30px; height: 30px;
border-radius: 999px;
background: var(--ff-lime);
border: 0;
color: var(--ff-forest);
display: inline-flex; align-items: center; justify-content: center;
transition: transform 280ms cubic-bezier(0.16,1,0.3,1), background 220ms ease, color 220ms ease;
}
.btn .chip svg path { stroke: var(--ff-forest); }
.btn:hover { transform: translateY(-1px); }
.btn:hover .chip { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn-primary {
background: var(--ff-ink);
color: var(--ff-paper);
border-color: var(--ff-ink);
}
.btn-primary .chip { background: var(--ff-lime); color: var(--ff-forest); }
.btn-primary .chip svg path { stroke: var(--ff-forest); }
.btn-primary:hover {
background: var(--ff-lime);
color: var(--ff-forest);
border-color: var(--ff-lime);
box-shadow: 0 10px 28px rgba(143, 176, 32, 0.4);
}
.btn-primary:hover .chip { background: var(--ff-forest); color: var(--ff-lime); }
.btn-primary:hover .chip svg path { stroke: var(--ff-lime); }
/* ===== Secondary Button =========================================
A standalone, self-contained dark-pill button with a lime chip
that inverts to lime-on-forest on hover. Same visual recipe as
.btn + .btn-primary, but available as a SINGLE class so it can
be dropped anywhere without needing the .btn base.
Use:
Label
================================================================ */
.secondary-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px 14px 28px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
letter-spacing: -0.015em;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
border: 1px solid var(--ff-ink);
background: var(--ff-ink);
color: var(--ff-paper);
transition:
transform 220ms cubic-bezier(0.16,1,0.3,1),
background 220ms ease,
color 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease;
}
.secondary-button .chip {
width: 30px; height: 30px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ff-lime);
color: var(--ff-forest);
flex-shrink: 0;
transition:
transform 280ms cubic-bezier(0.16,1,0.3,1),
background 220ms ease,
color 220ms ease;
}
.secondary-button .chip svg path,
.secondary-button .chip svg line,
.secondary-button .chip svg polyline { stroke: var(--ff-forest); }
.secondary-button:hover {
transform: translateY(-1px);
background: var(--ff-lime);
color: var(--ff-forest);
border-color: var(--ff-lime);
box-shadow: 0 10px 28px rgba(143, 176, 32, 0.4);
}
.secondary-button:hover .chip {
background: var(--ff-forest);
color: var(--ff-lime);
transform: translateX(3px);
}
.secondary-button:hover .chip svg path,
.secondary-button:hover .chip svg line,
.secondary-button:hover .chip svg polyline { stroke: var(--ff-lime); }
.secondary-button:active { transform: translateY(0); }
/* ===== Primary Button ===========================================
Lime pill with a dark forest chip — the brand's hero / conversion
CTA. Self-contained single class (no .btn base needed).
Use:
Label
Optional state:
.primary-button.is-active — inverted (dark fill, lime chip)
for the current page / selected state
================================================================ */
.primary-button {
display: inline-flex;
align-items: center;
gap: 8px;
height: 48px;
padding: 6px 6px 6px 20px;
border-radius: 9999px;
border: 1px solid transparent;
font-family: inherit;
font-weight: 700;
font-size: 14px;
letter-spacing: -0.015em;
line-height: 26px;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
background: var(--ff-lime, #EAFE45);
color: var(--ff-forest, #072C22);
transition:
background-color 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
color 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
box-shadow 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.primary-button .chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-left: 4px;
border-radius: 50%;
background: var(--ff-forest, #072C22);
color: var(--ff-lime, #EAFE45);
border: 0;
flex-shrink: 0;
transition:
background-color 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
color 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.primary-button .chip svg {
display: block;
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
}
.primary-button:hover {
box-shadow: 0 8px 24px rgba(7, 44, 34, 0.12);
transform: translateY(-1px);
}
.primary-button:hover .chip {
background: #19392A;
transform: translateX(2px);
}
.primary-button:active { transform: translateY(0); }
/* Inverted state — dark fill, lime chip (e.g. when the CTA's
target page is the current page). */
.primary-button.is-active {
background: var(--ff-forest, #072C22);
color: var(--ff-paper, #ECF0EF);
}
.primary-button.is-active .chip {
background: var(--ff-lime, #EAFE45);
color: var(--ff-forest, #072C22);
}
.primary-button.is-active:hover .chip {
background: var(--ff-paper, #ECF0EF);
}
.btn-lime {
background: var(--ff-lime);
color: var(--ff-forest);
border-color: var(--ff-lime);
}
.btn-lime .chip { background: var(--ff-forest); color: var(--ff-lime); }
.btn-lime .chip svg path { stroke: var(--ff-lime); }
.btn-lime:hover {
background: var(--ff-lime-2);
border-color: var(--ff-lime-2);
box-shadow: 0 10px 28px rgba(143, 176, 32, 0.4);
}
.btn-ghost {
background: transparent;
color: var(--ff-ink);
}
.btn-ghost:hover { background: var(--ff-ink); color: var(--ff-paper); }
.btn-ghost:hover .chip { background: var(--ff-forest); color: var(--ff-lime); }
.btn-ghost:hover .chip svg path { stroke: var(--ff-lime); }
.btn-on-dark {
color: var(--ff-on-dark);
border-color: var(--ff-on-dark);
}
.btn-on-dark .chip { background: var(--ff-lime); color: var(--ff-forest); }
.btn-on-dark .chip svg path { stroke: var(--ff-forest); }
.btn-on-dark:hover { background: var(--ff-lime); color: var(--ff-forest); border-color: var(--ff-lime); }
.btn-on-dark:hover .chip { background: var(--ff-forest); color: var(--ff-lime); }
.btn-on-dark:hover .chip svg path { stroke: var(--ff-lime); }
/* ===== Pills ===== */
.pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px;
border: 1px solid var(--ff-line);
border-radius: 999px;
background: var(--ff-paper);
font-size: 12px; font-weight: 600;
color: var(--ff-ink);
letter-spacing: -0.01em;
}
.pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ff-lime); }
.pill.on-dark { background: transparent; color: var(--ff-on-dark); border-color: var(--ff-on-dark-3); }
/* ===== Liquid Glass ==============================================
Translucent frosted surface used by the sticky nav and any card or
chip that should feel like it's floating on top of the page.
Variants:
.liquid-glass — light surface (on cream/paper bg)
.liquid-glass.is-dark — dark surface (on forest bg)
Optional modifier:
.liquid-glass.is-interactive — hover lift + brighter fill
================================================================ */
.liquid-glass {
background: rgba(235, 238, 237, 0.65);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(7, 44, 34, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 8px 24px -8px rgba(7, 44, 34, 0.10);
color: var(--ff-ink);
}
.liquid-glass.is-dark {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.10);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 10px 30px -12px rgba(0, 0, 0, 0.35),
0 1px 3px rgba(0, 0, 0, 0.15);
color: var(--ff-on-dark);
}
.liquid-glass.is-interactive {
transition:
transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 220ms ease,
box-shadow 320ms ease,
background 220ms ease;
}
.liquid-glass.is-interactive:hover {
transform: translateY(-3px);
background: rgba(235, 238, 237, 0.85);
border-color: rgba(7, 44, 34, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 18px 40px -10px rgba(7, 44, 34, 0.18),
0 3px 8px rgba(7, 44, 34, 0.08);
}
.liquid-glass.is-dark.is-interactive:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 18px 40px -10px rgba(0, 0, 0, 0.4),
0 3px 8px rgba(0, 0, 0, 0.18);
}
/* ===== Liquid Lime Gradient ===============================================
See-through cream liquid-glass with a SHARP lime hotspot at the
top-left corner that fades into a faint forest hairline at the
bottom-right — like light catching the rim of polished glass.
The body is nearly transparent (~30% white) — the brand presence
comes from the EDGE, not a body wash. Designed for the cream/paper
site background. On dark backgrounds the body fill won't read as
clearly; reach for .liquid-glass.is-dark instead.
Use:
……for hover lift Apply directly to any card, chip, tile, badge — works at any size. The element becomes a positioned, isolated stacking context: ::before paints the top/bottom specular highlights, ::after paints the shining lime rim. Direct children are auto-lifted above both layers, so existing markup needs no wrappers. To color the rim differently, override the ::after background gradient on a subclass. To remove the rim entirely, set .liquid-lime-gradient::after { display: none; }. ================================================================ */ .liquid-lime-gradient { position: relative; isolation: isolate; overflow: hidden; background: /* whisper of lime — top-left, very faint */ radial-gradient(120% 90% at 0% 0%, rgba(234, 254, 69, 0.12) 0%, rgba(234, 254, 69, 0.04) 28%, rgba(234, 254, 69, 0) 58%), /* near-transparent warm white body */ linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0%, rgba(252, 254, 246, 0.28) 50%, rgba(248, 252, 238, 0.24) 100%); border: 1px solid transparent; color: var(--ff-primary); backdrop-filter: blur(18px) saturate(165%); -webkit-backdrop-filter: blur(18px) saturate(165%); box-shadow: /* crisp top specular — glass top-edge sheen */ inset 0 1px 0 rgba(255, 255, 255, 0.75), /* subtle inner cavity */ inset 0 0 0 1px rgba(255, 255, 255, 0.22), /* bottom-edge dark line for depth */ inset 0 -1px 0 rgba(7, 44, 34, 0.06), /* outer drop */ 0 8px 22px -14px rgba(7, 44, 34, 0.14), 0 1px 3px rgba(7, 44, 34, 0.04); } /* Glass specular highlight — top sheen + bottom rim catch */ .liquid-lime-gradient::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: /* primary top sheen */ linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.10) 26%, rgba(255, 255, 255, 0) 52%), /* bottom rim catch — secondary refraction */ linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.04) 18%, rgba(255, 255, 255, 0) 40%); pointer-events: none; z-index: 0; } /* SHINING LIME RIM — sharp hotspot at top-left, fading around the element to a faint forest hairline. Painted via the mask-composite trick so it wraps the inherited border-radius. */ .liquid-lime-gradient::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0.6px; background: /* tight, sharp brightness peak at top-left corner */ radial-gradient(110% 95% at 0% 0%, rgba(234, 254, 69, 1) 0%, rgba(234, 254, 69, 0.85) 5%, rgba(234, 254, 69, 0.30) 14%, rgba(234, 254, 69, 0.06) 32%, rgba(234, 254, 69, 0) 55%), /* tail — fade into a faint forest edge */ linear-gradient(135deg, rgba(234, 254, 69, 0.0) 0%, rgba(7, 44, 34, 0.04) 60%, rgba(7, 44, 34, 0.12) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; /* a soft glow around the lit edge */ filter: drop-shadow(0 0 1.5px rgba(234, 254, 69, 0.4)); pointer-events: none; z-index: 0; } .liquid-lime-gradient > * { position: relative; z-index: 1; } .liquid-lime-gradient.is-interactive { transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), background 220ms ease, box-shadow 320ms ease; } .liquid-lime-gradient.is-interactive:hover { transform: translateY(-3px); background: radial-gradient(120% 90% at 0% 0%, rgba(234, 254, 69, 0.22) 0%, rgba(234, 254, 69, 0.08) 28%, rgba(234, 254, 69, 0) 58%), linear-gradient(135deg, rgba(255, 255, 255, 0.48) 0%, rgba(252, 254, 246, 0.40) 50%, rgba(248, 252, 238, 0.36) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(7, 44, 34, 0.08), 0 16px 36px -14px rgba(7, 44, 34, 0.18), 0 2px 6px rgba(7, 44, 34, 0.06); } .liquid-lime-gradient.is-interactive:hover::after { filter: drop-shadow(0 0 2.5px rgba(234, 254, 69, 0.6)); } /* ===== Logo Marquee ============================================ Auto-scrolling row of client logos with edge fade-out masks. Pause on hover. Honors prefers-reduced-motion. Structure:
... (duplicate the list so the loop seams cleanly)
directly OR on a wrapper containing
. */ .marquee-logo > img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; } /* ===== Nav ===== */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(235, 238, 237, 0.82); backdrop-filter: blur(20px); border-bottom: 1px solid var(--ff-line-soft); } .nav-inner { height: 84px; display: flex; align-items: center; justify-content: space-between; } .nav-left { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ff-ink); } .nav-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--ff-forest); color: var(--ff-lime); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; letter-spacing: -0.03em; } .nav-wordmark { font-size: 18px; font-weight: 700; color: var(--ff-ink); letter-spacing: -0.02em; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 15px; color: var(--ff-ink-2); text-decoration: none; font-weight: 500; letter-spacing: -0.01em; transition: color 200ms ease; } .nav-links a:hover { color: var(--ff-ink); } .nav-links a.is-active { color: var(--ff-ink); } /* ===== Footer ===== */ .foot { background: var(--ff-paper); border-top: 1px solid var(--ff-line-soft); padding: 80px 0 32px; margin-top: 80px; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--ff-line-soft); } .foot-brand .logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; text-decoration: none; color: inherit; } .foot-brand .logo img { width: 36px; height: 36px; border-radius: 7px; display: block; } .foot-brand .name { font-size: 15px; font-weight: 600; color: var(--ff-ink); letter-spacing: -0.01em; } .foot-brand p { color: var(--ff-ink-3); font-size: 14px; max-width: 30ch; line-height: 1.55; } .foot-socials { display: flex; gap: 8px; margin-top: 18px; } .foot-socials a { width: 36px; height: 36px; border-radius: 999px; background: rgba(235, 238, 237, 0.65); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(7, 44, 34, 0.08); color: var(--ff-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 24px -8px rgba(7, 44, 34, 0.10); display: inline-flex; align-items: center; justify-content: center; transition: background 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .foot-socials a:hover { background: rgba(234, 254, 69, 0.7); /* fluo lime, translucent */ border-color: rgba(143, 176, 32, 0.35); color: var(--ff-forest); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 28px -8px rgba(234, 254, 69, 0.5); transform: translateY(-1px); } .foot-col h5 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-ink-3); font-weight: 700; margin: 0 0 18px; } .foot-col a { display: block; font-size: 14px; color: var(--ff-ink); text-decoration: none; margin-bottom: 10px; transition: color 200ms ease; } .foot-col a:hover { color: var(--ff-lime-deep); } .foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 13px; color: var(--ff-ink-4); } .foot-bottom .links { display: flex; gap: 24px; } .foot-bottom a { color: var(--ff-ink-4); text-decoration: none; } .foot-bottom a:hover { color: var(--ff-ink-2); } /* ===== Mobile section padding ============================================ Many sections across the site reserve 80–120px of vertical padding for editorial breathing room on desktop. On phones (≤720px) that becomes excessive — half of a viewport-height of empty space between sections. Cap every common section class at 48px top/bottom on phones unless a page-level rule explicitly overrides. Component-level paddings (cards, pills, buttons) are left alone. ============================================================================ */ @media (max-width: 720px) { .hero, .reason, .values, .obs, .cta-strip, .story, .doen, .motorkap, .partner, .channels-3, .team, .mission, .pillars, .fit, .case-detail, .tl2, .stack-sub, .dark-section { padding-top: 48px; padding-bottom: 48px; } /* .results is a tighter section on mobile — eyebrow + h2 + 1 card per row needs no editorial breathing room above. */ .results { padding-top: 20px; padding-bottom: 32px; } /* Section-to-section gaps that came from margin instead of padding */ .values { margin-bottom: 48px; } } @media (max-width: 720px) { /* ===== Mobile footer ================================================== Single column, centered. The three link columns are hidden — page nav lives in the hamburger menu, and the "Diensten" + "Contact" columns are redundant with the brand block + hamburger. Brand block becomes a centered tagline + socials. Legal links (©, Privacy, Voorwaarden) drop below as a tidy stacked footer row. ====================================================================== */ .foot-grid { grid-template-columns: 1fr; padding-bottom: 28px; border-bottom: 1px solid var(--ff-line-soft); gap: 20px; text-align: center; } .foot-grid .foot-col { display: none; } .foot-brand .logo { justify-content: center; margin-bottom: 14px; } .foot-brand p { margin-left: auto; margin-right: auto; max-width: 34ch; font-size: 13px; } .foot-socials { justify-content: center; margin-top: 18px; } /* Legal row — stacked, centered, tight. */ .foot-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 20px; text-align: center; font-size: 12px; } .foot-bottom .links { gap: 18px; justify-content: center; } } /* =============================================================== CASE DETAIL COMPONENT =============================================================== Per-case section used on the Case Studies page. Two-column grid: left = eyebrow + h2 (with optional verified badge) + lead copy + tool pills. Right = photo with two glass "result" cards overlaid on the bottom. Tone is editorial — generous spacing, a single focus image, and two punchy stat readouts. Use:
Brand Name…
…
… …… …………