/* ============================================================ Jonker Klus & Techniek — Website styles Production recreation of the Claude Design bundle. Design tokens are copied verbatim from the design system (tokens/colors, typography, spacing, elevation). ============================================================ */ /* Fonts worden zelf gehost (geen externe Google-request -> sneller renderen + AVG-vriendelijk). Variabele woff2's, latin-subset. De hero-font wordt apart ge-preload in de . */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/archivo.woff2") format("woff2"); } @font-face { font-family: "Spline Sans Mono"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("assets/fonts/spline-sans-mono.woff2") format("woff2"); } /* ---------- Color tokens ---------- */ :root { --teal-50: #e6f2f1; --teal-100: #c4e0de; --teal-200: #8fc3c0; --teal-300: #54a09c; --teal-400: #1f7d78; --teal-500: #086661; --teal-600: #03534f; --teal-700: #005050; --teal-800: #013a39; --teal-900: #02292a; --ink-700: #2a2a2a; --ink-800: #1c1c1c; --ink-900: #111111; --orange-50: #fdf3ea; --orange-100: #f9e0c9; --orange-200: #f1bd8c; --orange-300: #e89a54; --orange-400: #de7f2c; --orange-500: #c8690f; --orange-600: #a4540b; --orange-700: #7e400c; --orange-800: #5c2f10; --stone-0: #ffffff; --stone-50: #f6f6f4; --stone-100: #eeedea; --stone-100b:#edece8; --stone-200: #e0ded7; --stone-300: #cac6bd; --stone-400: #a7a097; --stone-500: #837c73; --stone-600: #635d56; --stone-700: #494540; --stone-800: #2d2b27; --stone-900: #1a1815; --green-600: #2e7d52; --green-100: #e6f2eb; --amber-600: #b5820a; --amber-100: #f9efd6; --red-600: #c23b2e; --red-100: #fae7e4; /* Semantic aliases */ --brand-primary: var(--teal-700); --brand-primary-hover: var(--teal-800); --brand-primary-active: var(--teal-900); --brand-accent: var(--orange-400); --brand-accent-hover: var(--orange-500); --brand-accent-active: var(--orange-600); --brand-ink: var(--ink-800); --surface-page: var(--stone-50); --surface-card: var(--stone-0); --surface-sunken: var(--stone-100); --surface-inverse: var(--teal-900); --surface-accent-soft: var(--orange-50); --surface-brand-soft: var(--teal-50); --text-strong: var(--ink-900); --text-body: var(--stone-700); --text-muted: var(--stone-500); --text-subtle: var(--stone-400); --text-on-brand: var(--stone-0); --text-on-accent: var(--ink-900); --text-link: var(--teal-600); --border-subtle: var(--stone-200); --border-default: var(--stone-300); --border-strong: var(--stone-400); --border-brand: var(--teal-700); --focus-ring: var(--orange-400); --success-fg: var(--green-600); --success-bg: var(--green-100); --warning-fg: var(--amber-600); --warning-bg: var(--amber-100); --danger-fg: var(--red-600); --danger-bg: var(--red-100); --info-fg: var(--teal-600); --info-bg: var(--teal-50); /* ---------- Typography tokens ---------- */ --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif; --font-body: "Archivo", system-ui, -apple-system, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --fs-display: clamp(3rem, 6vw, 5.25rem); --fs-h1: clamp(2.25rem, 4vw, 3.5rem); --fs-h2: clamp(1.75rem, 3vw, 2.5rem); --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-lead: 1.25rem; --fs-body: 1rem; --fs-body-sm: 0.875rem; --fs-caption: 0.75rem; --fs-label: 0.8125rem; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-tight: -0.02em; --ls-normal: 0; --ls-label: 0.08em; --ls-wide: 0.16em; /* ---------- Spacing & layout ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --container-max: 1200px; --container-narrow: 760px; --gutter: clamp(20px, 5vw, 64px); --section-y: clamp(56px, 9vw, 128px); /* ---------- Elevation, radius, motion ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --border-hair: 1px; --border-thick: 2px; --shadow-xs: 0 1px 2px rgba(26, 24, 21, 0.06); --shadow-sm: 0 1px 3px rgba(26, 24, 21, 0.08), 0 1px 2px rgba(26, 24, 21, 0.04); --shadow-md: 0 4px 12px rgba(26, 24, 21, 0.10), 0 2px 4px rgba(26, 24, 21, 0.05); --shadow-lg: 0 12px 28px rgba(26, 24, 21, 0.14), 0 4px 8px rgba(26, 24, 21, 0.06); --shadow-brand: 0 10px 24px rgba(16, 44, 58, 0.22); --ring: 0 0 0 3px rgba(240, 124, 43, 0.45); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } /* ============================================================ Base / reset ============================================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--surface-page); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--text-body); -webkit-font-smoothing: antialiased; } a { color: inherit; } img { display: block; } h1, h2, h3, h4, p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } .container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: var(--section-y); padding-bottom: var(--section-y); } .section--bordered { border-top: 1px solid var(--border-subtle); } /* ============================================================ Eyebrow / section label ============================================================ */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--brand-accent-hover); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--brand-accent); display: inline-block; } .eyebrow--light { color: var(--orange-300); } /* ============================================================ Headings ============================================================ */ .h1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.02em; color: var(--text-strong); } .h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.02em; color: var(--text-strong); } .lead { font-family: var(--font-body); font-size: var(--fs-lead); line-height: 1.6; color: var(--text-body); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: var(--fw-semibold); letter-spacing: 0.01em; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; outline: none; border: var(--border-thick) solid transparent; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn:active { transform: translateY(1px); } .btn--sm { padding: 8px 14px; font-size: 0.8125rem; gap: 6px; min-height: 36px; } .btn--md { padding: 12px 20px; font-size: 0.9375rem; gap: 8px; min-height: 44px; } .btn--lg { padding: 16px 28px; font-size: 1.0625rem; gap: 10px; min-height: 54px; } .btn--block { display: flex; width: 100%; } .btn--primary { background: var(--brand-primary); color: var(--text-on-brand); border-color: var(--brand-primary); } .btn--primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); } .btn--primary:focus-visible { box-shadow: 0 0 0 3px rgba(222, 127, 44, .5); } .btn--accent { background: var(--brand-accent); color: var(--text-on-accent); border-color: var(--brand-accent); } .btn--accent:hover { background: var(--brand-accent-hover); border-color: var(--brand-accent-hover); } .btn--accent:focus-visible { box-shadow: 0 0 0 3px rgba(0, 80, 80, .45); } .btn--secondary { background: transparent; color: var(--brand-primary); border-color: var(--border-default); } .btn--secondary:hover { border-color: var(--brand-primary); background: var(--surface-brand-soft); } .btn--secondary:focus-visible { box-shadow: 0 0 0 3px rgba(222, 127, 44, .5); } .btn--ghost { background: transparent; color: var(--brand-primary); border-color: transparent; } .btn--ghost:hover { background: var(--surface-sunken); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn:disabled:active { transform: none; } .btn svg { flex-shrink: 0; } /* Icon button (mobile menu toggle) */ .icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface-card); color: var(--brand-primary); border: var(--border-hair) solid var(--border-default); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .icon-btn:hover { background: var(--surface-sunken); border-color: var(--border-strong); } /* ============================================================ Header ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); transition: background var(--dur-base) var(--ease-out); } .site-header.is-scrolled { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); } .header-inner { max-width: var(--container-max); margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; gap: 20px; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; } .brand img { height: 42px; width: auto; } .brand-name { display: flex; flex-direction: column; line-height: 1.05; } .brand-name .b1 { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--brand-ink); } .brand-name .b2 { font-family: var(--font-mono); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-primary); } .nav { margin-left: auto; display: flex; gap: 28px; align-items: center; } .nav a { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; color: var(--text-body); text-decoration: none; } .nav a:hover { color: var(--text-strong); } .header-cta { display: flex; gap: 10px; align-items: center; } .header-cta a { text-decoration: none; } .menu-toggle { margin-left: auto; display: none; } .mobile-drawer { border-top: 1px solid var(--border-subtle); padding: 12px var(--gutter) 20px; display: none; flex-direction: column; gap: 4px; } .mobile-drawer.is-open { display: flex; } .mobile-drawer a { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--text-strong); text-decoration: none; padding: 12px 4px; border-bottom: 1px solid var(--border-subtle); } .mobile-drawer .btn { margin-top: 12px; } /* ============================================================ Hero ============================================================ */ .hero { background: var(--surface-page); } .hero-grid { max-width: var(--container-max); margin: 0 auto; padding: var(--section-y) var(--gutter); display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-8); align-items: center; } .hero-content { display: flex; flex-direction: column; gap: var(--space-5); } .hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.75rem, 5.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.02em; color: var(--text-strong); text-wrap: balance; /* nettere regelverdeling, minder losse woorden */ } .hero h1 .accent { color: var(--brand-primary); } .hero p { max-width: 46ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-body); } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .hero-ctas a { text-decoration: none; } .usps { display: flex; gap: 20px; flex-wrap: wrap; margin-top: var(--space-2); } .usp { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; } .usp .ic { color: var(--brand-accent-hover); display: inline-flex; } .hero-photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } /* ============================================================ Services ============================================================ */ .services { background: var(--surface-card); } .section-head { display: flex; flex-direction: column; gap: var(--space-3); } .services .section-head { max-width: 620px; margin-bottom: var(--space-7); } .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); } .service-card { display: flex; flex-direction: column; gap: var(--space-4); text-decoration: none; background: var(--surface-card); border: var(--border-hair) solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .service-icon { width: 52px; height: 52px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--surface-brand-soft); color: var(--brand-primary); transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .service-card:hover .service-icon { background: var(--brand-primary); color: var(--text-on-brand); } .service-body { display: flex; flex-direction: column; gap: 6px; flex: 1; } .service-body h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.25rem; color: var(--text-strong); letter-spacing: var(--ls-tight); } .service-body p { font-size: 0.9375rem; line-height: var(--lh-relaxed); color: var(--text-body); } .service-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--brand-accent-hover); } .service-more svg { transition: transform var(--dur-base) var(--ease-out); } .service-card:hover .service-more svg { transform: translateX(4px); } /* ============================================================ Projects ============================================================ */ .projects { background: var(--surface-page); } .projects .section-head { margin-bottom: var(--space-6); } .tag-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-6); } .tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.875rem; font-weight: var(--fw-medium); padding: 6px 14px; border-radius: var(--radius-pill); cursor: pointer; color: var(--text-body); background: var(--surface-card); border: var(--border-hair) solid var(--border-default); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .tag:hover { background: var(--surface-sunken); } .tag.is-selected { color: var(--text-on-brand); background: var(--brand-primary); border-color: var(--brand-primary); } .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); align-items: start; /* kaarten op eigen hoogte (hele foto), geen uitrek-gat */ } .project { text-decoration: none; display: flex; flex-direction: column; gap: 12px; cursor: pointer; /* reset zodat