/* Self-hosted fonts: avoids depending on fonts.googleapis.com at runtime (can be blocked by ad-blockers/corporate proxies, causing a silent fallback to the browser default font). Both are variable fonts, so one file per family covers the whole weight range. */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/plus-jakarta-sans.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/space-grotesk.woff2') format('woff2'); } /* Syscon design tokens — ported from the Tailwind/shadcn source, kept as the same HSL values so colors are pixel-identical to the original site. */ :root { --sy-background: 210 20% 98%; --sy-foreground: 215 30% 15%; --sy-card: 0 0% 100%; --sy-primary: 215 65% 18%; --sy-primary-foreground: 0 0% 100%; --sy-muted: 210 20% 95%; --sy-muted-foreground: 215 15% 50%; --sy-accent: 5 100% 51%; --sy-accent-foreground: 0 0% 100%; --sy-border: 214 20% 90%; --sy-navy: 215 65% 18%; --sy-navy-light: 215 45% 30%; --sy-orange: 14 85% 52%; --sy-orange-hover: 14 85% 45%; --sy-radius: 0.625rem; } body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: hsl(var(--sy-background)); color: hsl(var(--sy-foreground)); } h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Space Grotesk', sans-serif; } a { text-decoration: none; } /* ── Layout helpers (mirror the original Tailwind utility names) ───────── */ .container-wide { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } /* Bootstrap's navbar flex layout (logo left, toggler+collapse right) only targets its own .container / .container-fluid selectors — since the navbar uses this custom .container-wide instead, that rule must be replicated here, or the brand/toggler never actually get pinned to opposite ends. */ .navbar > .container-wide { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; } .section-padding { padding-top: 4rem; padding-bottom: 4rem; } @media (min-width: 640px) { .section-padding { padding-top: 5rem; padding-bottom: 5rem; padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .section-padding { padding-top: 6rem; padding-bottom: 6rem; padding-left: 2rem; padding-right: 2rem; } } /* ── Font sizes (mirror Tailwind's default type scale exactly — see tailwind.config.ts, which has no custom fontSize, so the framework defaults apply). Responsive variants named sm-/md-/lg- instead of Tailwind's sm:/md: since ":" needs escaping in a plain CSS class name, matching this file's existing "/"→"-" convention (e.g. bg-muted-30). */ .text-xs { font-size: .75rem; line-height: 1rem; } .text-sm { font-size: .875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-6xl { font-size: 3.75rem; line-height: 1; } .text-7xl { font-size: 4.5rem; line-height: 1; } .leading-tight { line-height: 1.25; } @media (min-width: 640px) { .sm-text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .sm-text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .sm-text-5xl { font-size: 3rem; line-height: 1; } .sm-text-xl { font-size: 1.25rem; line-height: 1.75rem; } } @media (min-width: 768px) { .md-text-sm { font-size: .875rem; line-height: 1.25rem; } } @media (min-width: 1024px) { .lg-text-5xl { font-size: 3rem; line-height: 1; } } /* Homepage hero h1 only: text-4xl sm:text-5xl lg:text-[3.5rem] (HeroSection.tsx) */ .hero-h1 { font-size: 2.25rem; line-height: 1.2; } @media (min-width: 640px) { .hero-h1 { font-size: 3rem; } } @media (min-width: 1024px) { .hero-h1 { font-size: 3.5rem; } } .lucide-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } .flex-shrink-0 { flex-shrink: 0; } .bg-background { background: hsl(var(--sy-background)); } .bg-card { background: hsl(var(--sy-card)); } .bg-muted { background: hsl(var(--sy-muted)); } .bg-muted-30 { background: hsl(var(--sy-muted) / 0.6); } .text-foreground { color: hsl(var(--sy-foreground)); } .text-muted-foreground { color: hsl(var(--sy-muted-foreground)); } .text-accent { color: hsl(var(--sy-accent)); } .bg-accent { background: hsl(var(--sy-accent)); color: hsl(var(--sy-accent-foreground)); } .bg-accent-10 { background: hsl(var(--sy-accent) / 0.1); } .bg-accent-20 { background: hsl(var(--sy-accent) / 0.15); } .border-syscon { border: 1px solid hsl(var(--sy-border)); } .rounded-2xl { border-radius: 1rem; } .rounded-xl { border-radius: 0.75rem; } .gradient-navy { background: linear-gradient(135deg, hsl(var(--sy-navy)) 0%, hsl(var(--sy-navy-light)) 100%); } .gradient-navy-soft { background: linear-gradient(135deg, hsl(var(--sy-navy) / 0.9) 0%, hsl(var(--sy-navy-light) / 0.9) 100%); } .text-primary-foreground { color: hsl(var(--sy-primary-foreground)); } .text-primary-foreground-70 { color: hsl(var(--sy-primary-foreground) / 0.7); } .text-primary-foreground-50 { color: hsl(var(--sy-primary-foreground) / 0.5); } .card-syscon { background: hsl(var(--sy-card)); border: 1px solid hsl(var(--sy-border)); border-radius: 1rem; transition: box-shadow .2s, border-color .2s; } .card-syscon:hover { border-color: hsl(var(--sy-accent) / 0.3); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .15); } .badge-accent { display: inline-block; padding: .4rem 1rem; border-radius: 999px; background: hsl(var(--sy-accent) / 0.15); color: hsl(var(--sy-accent)); font-size: .875rem; font-weight: 500; } /* Hero-style badge on dark backgrounds */ .badge-accent-dark { display: inline-block; padding: .4rem 1rem; border-radius: 999px; background: hsl(var(--sy-accent) / 0.2); color: hsl(var(--sy-accent)); font-size: .875rem; font-weight: 500; } /* All Button variants share one base className in the original ("text-sm font-medium" from buttonVariants' base string) regardless of size, so Bootstrap's btn-lg/btn-sm font-size bump must be overridden back to text-sm here, and any icon placed inside one of these ([&_svg]:size-4) is 16px. */ /* Every shadcn Button variant shares the same fixed per-size box model (inline-flex items-center justify-center + a fixed height/horizontal padding pair from cva's "size" variant — default h-10 px-4, sm h-9 px-3, lg h-11 px-8), independent of which color "variant" is used. Bootstrap's own .btn/.btn-sm/.btn-lg padding doesn't match that scale, which is why e.g. the hero CTA (btn-lg) and "Meer over onze certificeringen" (no size class = default) ended up with visibly different, non-matching padding instead of both following the same consistent size system. */ .btn { height: 2.5rem; padding: 0 1rem; display: inline-flex; align-items: center; justify-content: center; } .btn-sm { height: 2.25rem; padding: 0 .75rem; } .btn-lg { height: 2.75rem; padding: 0 2rem; } .btn-hero, .btn-hero-outline, .btn-nav-cta, .btn-outline-secondary { font-size: .875rem; } .btn-hero .lucide-icon, .btn-hero-outline .lucide-icon, .btn-nav-cta .lucide-icon, .btn-outline-secondary .lucide-icon { width: 1rem; height: 1rem; } .btn-hero { background: hsl(var(--sy-accent)); color: #fff; font-weight: 600; border: none; box-shadow: 0 8px 20px -6px rgb(0 0 0 / .3); } .btn-hero:hover { background: hsl(var(--sy-orange-hover)); color: #fff; box-shadow: 0 12px 28px -6px rgb(0 0 0 / .35); } .btn-hero-outline { background: transparent; border: 2px solid rgb(255 255 255 / .3); color: #fff; font-weight: 600; } .btn-hero-outline:hover { background: rgb(255 255 255 / .1); color: #fff; } /* variant="nav" is rounded-full in button.tsx, but the desktop navbar CTA also has size="sm", whose own "rounded-md" class wins the Tailwind merge (confirmed against the actual compiled old-site CSS: the desktop button ships with "rounded-md", not "rounded-full") — only the mobile CTA (no size prop, so no override) stays a full pill. */ .btn-nav-cta { background: hsl(var(--sy-accent)); color: #fff; border-radius: 999px; font-weight: 500; border: none; } /* size="sm" is h-9 px-3 in button.tsx: a fixed 36px height (not just Bootstrap's smaller .btn-sm padding), so it lines up with the 37px-tall nav-links (text-sm + their own padding) next to it. */ .btn-nav-cta.btn-sm { border-radius: 0.5rem; } .btn-nav-cta:hover { background: hsl(var(--sy-orange-hover)); color: #fff; } .icon-tile { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; } .icon-tile-sm { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; } .hero-bg { position: relative; overflow: hidden; background-size: cover; background-position: center; } .hero-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, hsl(var(--sy-navy)) 0%, hsl(var(--sy-navy-light)) 100%); opacity: .85; } .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, hsl(var(--sy-navy) / .95) 0%, hsl(var(--sy-navy) / .7) 55%, transparent 100%); } .hero-bg > .hero-content { position: relative; z-index: 1; } /* Fade-in-on-scroll (lightweight stand-in for the framer-motion effects) */ .fade-in-up { opacity: 0; transform: translateY(24px); transition: opacity .5s ease-out, transform .5s ease-out; } .fade-in-up.is-visible { opacity: 1; transform: translateY(0); } /* Logo marquee */ .logo-track { display: flex; align-items: center; animation: sy-slide 30s linear infinite; } @keyframes sy-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } .logo-track img { height: 2.5rem; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; margin: 0 2rem; } .logo-track img:hover { filter: grayscale(0); opacity: 1; } /* Navbar dropdown active state */ .sy-nav-link.active-route, .dropdown-item.active-route, .sy-nav-link.active-route:hover, .sy-nav-link.active-route:focus, .dropdown-item.active-route:hover, .dropdown-item.active-route:focus { color: hsl(var(--sy-accent)); background: hsl(var(--sy-accent) / 0.1); border-radius: .5rem; } /* Nav links + dropdown items are text-sm font-medium, text-foreground/70 with hover:text-foreground hover:bg-muted in the original Navbar.tsx — Bootstrap's .nav-link/.dropdown-item default to link-blue, so color must be set explicitly. */ .sy-nav-link { font-size: .875rem; font-weight: 500; border-radius: .5rem; color: hsl(var(--sy-foreground) / 0.7); transition: color .15s, background-color .15s; } .sy-nav-link:hover, .sy-nav-link:focus { color: hsl(var(--sy-foreground)); background: hsl(var(--sy-muted)); } .dropdown-item { font-size: .875rem; color: hsl(var(--sy-foreground) / 0.7); transition: color .15s, background-color .15s; } .dropdown-item:hover, .dropdown-item:focus { color: hsl(var(--sy-foreground)); background: hsl(var(--sy-muted)); } .sy-topbar-link { font-size: .875rem; display: inline-flex; align-items: center; gap: .375rem; color: hsl(var(--sy-primary-foreground) / 0.8); transition: color .15s; } .sy-topbar-link:hover { color: hsl(var(--sy-primary-foreground)); } .sy-lang-switch { display: flex; align-items: center; gap: .25rem; border-left: 1px solid hsl(var(--sy-primary-foreground) / 0.25); padding-left: 1rem; margin-left: .25rem; } .sy-lang-item { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: hsl(var(--sy-primary-foreground) / 0.6); text-decoration: none; transition: background-color .15s, color .15s; } .sy-lang-item:hover { color: hsl(var(--sy-primary-foreground)); background: hsl(var(--sy-primary-foreground) / 0.12); } .sy-lang-item.sy-lang-active { color: hsl(var(--sy-primary-foreground)); background: hsl(var(--sy-primary-foreground) / 0.18); cursor: default; } /* Real SVG flags, not emoji: flag emoji (regional-indicator character pairs) render as plain two-letter text on Windows in most browsers instead of a picture, which looked like a duplicated "NL NL" / "GB EN" next to our own text label. */ .sy-lang-flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .15); vertical-align: -2px; } /* Using an explicit lucide chevron-down icon instead of Bootstrap's ::after caret */ .dropdown-toggle-noicon::after { display: none; } /* The original Navbar.tsx never sets a focus-visible ring on these links, and opening the dropdown on hover (site.js) triggers Bootstrap's dropdown JS, which the browser treats as enough to show its default black focus outline even on a plain mouse hover/click — suppress it here to match. */ .navbar .nav-link:focus, .navbar .nav-link:active, .navbar .dropdown-toggle:focus, .navbar .dropdown-toggle:active, .navbar .dropdown-item:focus, .navbar .dropdown-item:active { outline: none; box-shadow: none; } .hover-zoom { position: relative; display: block; overflow: hidden; border-radius: .75rem; cursor: zoom-in; } .hover-zoom img { transition: transform .3s; } .hover-zoom:hover img { transform: scale(1.02); } .hover-zoom-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: hsl(var(--sy-navy) / 0); opacity: 0; transition: all .2s; } .hover-zoom:hover .hover-zoom-overlay { background: hsl(var(--sy-navy) / 0.4); opacity: 1; } .code-block { background: #0f172a; color: #e2e8f0; border-radius: .75rem; padding: 1.25rem; font-family: 'Monaco','Menlo','Consolas',monospace; font-size: .85rem; overflow-x: auto; } footer.sy-footer a { color: hsl(var(--sy-primary-foreground) / 0.7); } footer.sy-footer a:hover { color: hsl(var(--sy-primary-foreground)); } /* The original Cookies control (Footer.tsx) is a bare