/* The Dutch Logic Co. | shared site styles Tokens follow Dutch_Logic_Brand_Styleguide v1.0 (Juni 2026). Six colours only: wit, zwart, lichtgrijs, marineblauw, oranje, teal. Tints are reserved for hovers, borders and soft nuances. */ /* Self-hosted variable fonts (Google Fonts download, OFL licensed) */ @font-face{ font-family:"Outfit"; src:url("/assets/fonts/Outfit-Variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:"Inter"; src:url("/assets/fonts/Inter-Variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } :root{ --white:#FFFFFF; --black:#0A0A0A; --grey:#F4F4F6; --navy:#1A2F5A; --orange:#FF6B35; --teal:#00C2CB; /* navy tints */ --navy-80:#48597B; --navy-60:#76829C; --navy-40:#A3ACBD; --navy-20:#D1D5DE; /* orange tints */ --orange-80:#FF895D; --orange-10:#FFE1D7; --font-head:"Outfit",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --r-sm:8px; --r-md:12px; --r-lg:16px; --maxw:1080px; --ease:cubic-bezier(.4,0,.2,1); /* ease-in-out, vloeiend als water */ } *{margin:0;padding:0;box-sizing:border-box} html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body{ background:var(--white); color:var(--black); font-family:var(--font-body); font-size:16px; line-height:1.625; /* Inter 16/26 */ /* clip i.p.v. hidden: hidden maakt van een scroll-container en dat breekt position:sticky in Safari (hero-film bleef daardoor stilstaan). hidden blijft als fallback voor oude browsers. */ overflow-x:hidden; overflow-x:clip; } img{max-width:100%;display:block} ::selection{background:var(--orange-10);color:var(--black)} /* ---------- TYPE ---------- */ h1,h2,h3{font-family:var(--font-head);color:var(--navy)} h1{font-weight:600;font-size:clamp(2.4rem,5.5vw,3.5rem);line-height:1.12;letter-spacing:-.015em} h2{font-weight:600;font-size:clamp(1.7rem,3.4vw,2rem);line-height:1.25;letter-spacing:-.01em} h3{font-weight:500;font-size:1.375rem;line-height:1.36} .eyebrow{ font-family:var(--font-body); font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--navy-80); /* navy-60 haalt op wit geen AA-contrast voor kleine tekst */ } .lead{ font-size:1.125rem; line-height:1.65; color:var(--navy-80); max-width:38em; /* 60-75 tekens leesbreedte */ } .muted{color:var(--navy-80)} /* ---------- LAYOUT ---------- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding-left:max(24px,env(safe-area-inset-left)); padding-right:max(24px,env(safe-area-inset-right)); } /* anchors mogen niet onder de sticky nav verdwijnen */ [id]{scroll-margin-top:76px} .section{padding:clamp(72px,10vw,120px) 0} .section-grey{background:var(--grey)} .section-head{max-width:640px;margin-bottom:clamp(36px,5vw,56px)} .section-head .eyebrow{display:block;margin-bottom:14px} .section-head p{margin-top:14px} /* ---------- WORDMARK ---------- */ .wordmark{ font-family:var(--font-head); font-weight:600; font-size:19px; letter-spacing:-.01em; color:var(--navy); text-decoration:none; white-space:nowrap; } .wordmark .dot{color:var(--orange)} .wordmark-light{color:var(--white)} /* ---------- NAV ---------- */ .nav{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--navy-20); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; } .nav-links{display:flex;align-items:center;gap:clamp(16px,3vw,32px)} .nav-links a{ font-size:15px; font-weight:500; color:var(--navy); text-decoration:none; transition:color .25s var(--ease); } .nav-links a:hover{color:var(--orange)} .nav-links a[aria-current="page"]{color:var(--orange)} /* taalwissel NL / EN */ .lang-switch{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:500;font-size:.9rem;line-height:1} .lang-switch a{color:var(--navy-80);text-decoration:none;padding:3px 5px;border-radius:7px;transition:color .25s var(--ease)} .lang-switch a:hover{color:var(--orange)} .lang-switch a.is-current{color:var(--navy);font-weight:600} .lang-switch .lang-sep{color:var(--navy-20)} /* ---------- BUTTONS ---------- */ .btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:500; font-size:16px; line-height:1; padding:14px 26px; border-radius:10px; background:var(--orange); color:var(--white); text-decoration:none; border:none; cursor:pointer; transition:background .25s var(--ease),transform .25s var(--ease); } .btn:hover{background:var(--orange-80);transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn-outline{ background:transparent; color:var(--navy); border:1.5px solid var(--navy); padding:12.5px 24.5px; transition:background .25s var(--ease),transform .25s var(--ease); } .btn-outline:hover{background:var(--grey);transform:translateY(-1px)} .btn-outline-light{ background:transparent; color:var(--white); border-color:var(--white); } .btn-outline-light:hover{background:rgba(255,255,255,.12)} .btn-sm{font-size:14px;padding:10px 18px} .btn-sm.btn-outline{padding:8.5px 16.5px} /* tekstlink: marineblauw, onderstreept */ .text-link{ color:var(--navy); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; transition:color .25s var(--ease); } .text-link:hover{color:var(--orange)} /* kaartlink: oranje */ .card-link{ display:inline-flex; align-items:center; gap:6px; color:var(--orange); font-weight:500; text-decoration:none; } .card-link .chev{transition:transform .25s var(--ease)} .card-link:hover .chev{transform:translateX(3px)} /* teal badge (op donker of in kaarten, korte labels) */ .badge{ display:inline-block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); /* navy op teal leest beter dan wit (contrast) */ background:var(--teal); padding:5px 12px; border-radius:999px; } /* ---------- CARDS ---------- */ .card{ background:var(--white); border:1px solid var(--navy-20); border-radius:var(--r-md); padding:28px; } a.card{ display:flex; flex-direction:column; color:inherit; text-decoration:none; /* opacity included so the .reveal fade keeps working (shorthand would override it) */ transition:transform .3s var(--ease),border-color .3s var(--ease),opacity .35s var(--ease); } a.card:hover{transform:translateY(-3px);border-color:var(--navy-40)} .card h3{margin-bottom:6px} .card p{color:var(--navy-80)} /* ---------- CHIPS ---------- */ .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{ font-size:15px; font-weight:500; color:var(--navy); background:var(--white); border:1px solid var(--navy-20); border-radius:10px; padding:9px 18px; white-space:nowrap; } /* ---------- WAVE (de golf) ---------- */ .wave{display:block;margin-top:18px} .wave path{stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;fill:none} /* ---------- GRADIENT PANEL ---------- */ .gradient-panel{ background:linear-gradient(135deg,var(--navy) 0%,#14557E 45%,var(--teal) 100%); background-size:170% 170%; border-radius:var(--r-lg); padding:clamp(44px,7vw,80px) clamp(28px,6vw,80px); animation:gradientDrift 10s var(--ease) infinite alternate; } @keyframes gradientDrift{ from{background-position:0% 50%} to{background-position:100% 50%} } .gradient-panel h2{color:var(--white)} .gradient-panel p{color:rgba(255,255,255,.85);max-width:34em} /* ---------- ICONS ---------- */ .icon{display:block} .icon path,.icon circle,.icon rect,.icon line{ stroke:var(--navy); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; fill:none; } /* ---------- FOOTER ---------- */ .footer{ background:var(--navy); color:var(--navy-20); padding:clamp(56px,8vw,80px) 0 calc(40px + env(safe-area-inset-bottom)); font-size:14px; } .foot-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; padding-bottom:48px; } .foot-brand .wordmark{display:inline-block;margin-bottom:10px} .foot-tag{ font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--navy-40); } .foot-cols{display:flex;gap:clamp(40px,7vw,90px);flex-wrap:wrap} .foot-col h4{ font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-40); margin-bottom:14px; } .foot-col ul{list-style:none} .foot-col li{margin-bottom:9px} .foot-col a{ color:var(--navy-20); text-decoration:none; transition:color .25s var(--ease); } .foot-col a:hover{color:var(--white)} .foot-bottom{ border-top:1px solid var(--navy-80); padding-top:26px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; color:var(--navy-40); } .foot-names span{white-space:nowrap} .foot-sep{margin:0 8px;opacity:.6} /* ---------- SCROLL REVEAL (subtiel: 12 px, 350 ms) ---------- Alleen verbergen als (inline script in ): zonder JavaScript blijft alle content gewoon zichtbaar. */ .js .reveal{ opacity:0; transform:translateY(12px); transition:opacity .35s var(--ease),transform .35s var(--ease); } .js .reveal.in{opacity:1;transform:translateY(0)} .reveal[data-d="1"]{transition-delay:.07s} .reveal[data-d="2"]{transition-delay:.14s} .reveal[data-d="3"]{transition-delay:.21s} /* ---------- HERO ---------- */ .hero{padding:clamp(72px,11vw,140px) 0 clamp(64px,9vw,110px)} .hero .eyebrow{display:block;margin-bottom:18px} .hero h1{max-width:14em} .hero .lead{margin-top:22px} .hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;margin-top:34px} /* ---------- GRIDS ---------- */ .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,48px); } .grid-3 .icon{margin-bottom:18px} .grid-3 h3{margin-bottom:8px} .grid-3 p{color:var(--navy-80)} .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:880px; } .work-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; } .work-card .wc-top{display:flex;align-items:center;gap:16px;margin-bottom:16px} .work-card .wc-ico{width:56px;height:56px;border-radius:14px;flex:none} .work-card .wc-tag{ display:block; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-80); margin-top:3px; } .work-card p{flex:1} .work-card .card-link{margin-top:18px} .work-card .badge{align-self:flex-start;margin-bottom:14px} /* feature list (work page) */ .feature-list{list-style:none;margin:22px 0 0} .feature-list li{ position:relative; padding-left:26px; margin-bottom:10px; color:var(--navy-80); } .feature-list li::before{ content:""; position:absolute; left:0; top:.62em; width:10px; height:2.5px; border-radius:2px; background:var(--teal); } /* ---------- CASE: gebouwd werk (generiek blok, herbruikbaar per project) ---- Links een abstracte browser-mockup, rechts het verhaal. Bedoeld voor elk volgend project, niet voor dit ene. Stapelt onder 820px. */ .case{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr); gap:clamp(26px,4vw,48px); align-items:center; padding:clamp(24px,3.4vw,40px); border-radius:var(--r-lg); } .case-tag{ display:block; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-80); margin-bottom:7px; } .case-body h3{font-size:1.55rem;font-weight:600;margin-bottom:10px} .case-body p{color:var(--navy-80)} .case-body .feature-list{margin-top:18px} .case-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; margin-top:26px; } /* browser-mockup: frame, balk met URL, en een abstracte pagina erin */ .case-frame{ border:1px solid var(--navy-20); border-radius:var(--r-md); overflow:hidden; background:var(--white); box-shadow:0 26px 54px -34px rgba(26,47,90,.55); } .case-bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--grey); border-bottom:1px solid var(--navy-20); } .case-bar b{width:8px;height:8px;border-radius:50%;background:var(--navy-40);flex:none} .case-bar em{ margin-left:8px; font-style:normal; font-size:12px; color:var(--navy-80); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* de pagina zelf, abstract: een hero-band, de voorraad en de talenrij */ .case-shot{ display:block; padding:clamp(16px,2.2vw,24px); background:linear-gradient(165deg,#FAFBFC,var(--grey)); } .cs-hero{ display:block; position:relative; height:clamp(58px,7.5vw,78px); border-radius:8px; overflow:hidden; background:linear-gradient(135deg,var(--navy) 0%,#14557E 62%,var(--teal) 150%); } /* de kop op die band tekent zichzelf terwijl de sectie passeert (--p). Eén vermenigvuldiging, geen geneste calc: Safari-proof. */ .cs-hero::after{ content:""; position:absolute; left:14px; top:50%; transform:translateY(-50%); height:8px; border-radius:4px; background:rgba(255,255,255,.6); width:54%; } .js .cs-hero::after{width:calc(var(--p,1) * 54%)} .cs-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .cs-tile{ display:block; position:relative; height:clamp(48px,6vw,60px); border:1px solid var(--navy-20); border-radius:6px; background:var(--white); } .cs-tile::after{ content:""; position:absolute; left:8px; bottom:8px; width:56%; height:5px; border-radius:3px; background:var(--navy-20); } .cs-tile:nth-child(2)::after{background:var(--teal);width:44%} /* een prijs die eruit springt */ .cs-langs{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px} .cs-langs em{ font-style:normal; font-family:var(--font-head); font-size:10px; font-weight:600; letter-spacing:.06em; line-height:1.6; color:var(--navy-80); background:var(--white); border:1px solid var(--navy-20); border-radius:999px; padding:1px 8px; } @media (max-width:880px){ .grid-3{grid-template-columns:1fr;gap:36px} } @media (max-width:820px){ .case{grid-template-columns:1fr;gap:26px;padding:clamp(22px,4vw,30px)} } @media (max-width:640px){ .grid-2{grid-template-columns:1fr} } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .js .reveal{opacity:1;transform:none} html{scroll-behavior:auto} } /* ---------- RESPONSIVE ---------- */ @media (max-width:640px){ .wordmark{font-size:16px} .nav-links{gap:14px} .nav-links .btn{display:none} .foot-bottom{flex-direction:column} }