/** * Hak4t AI Website OS — frontend styling. * Token-gedreven, mobile-first, minimale footprint. * Alle kleuren/spacing komen uit CSS-variabelen (zie inline :root in ). */ .h4-root { --h4-primary: #1a1a2e; --h4-secondary: #16213e; --h4-accent: #0f9d8a; --h4-bg: #ffffff; --h4-text: #1d1d1f; --h4-muted: #6b7280; --h4-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --h4-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --h4-font-size: 17px; --h4-container: 1200px; --h4-radius: 12px; --h4-btn-radius: 999px; --h4-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); --h4-space: 8px; color: var(--h4-text); font-family: var(--h4-font-body); font-size: var(--h4-font-size); line-height: 1.6; } .h4-root * { box-sizing: border-box; } .h4-container { width: 100%; max-width: var(--h4-container); margin: 0 auto; padding: 0 calc(var(--h4-space) * 2.5); } .h4-container--narrow { max-width: 820px; } .h4-block { padding: calc(var(--h4-space) * 7) 0; } .h4-section-title { font-family: var(--h4-font-heading); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; margin: 0 0 calc(var(--h4-space) * 3); color: var(--h4-primary); } .h4-prose p { margin: 0 0 1em; } /* ---------- Buttons ---------- */ .h4-btn { display: inline-block; padding: 0.85em 1.6em; border-radius: var(--h4-btn-radius); font-weight: 600; text-decoration: none; border: 2px solid transparent; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; cursor: pointer; } .h4-btn--primary { background: var(--h4-primary); color: #fff; } .h4-btn--accent { background: var(--h4-accent); color: #fff; } .h4-btn:hover { transform: translateY(-2px); box-shadow: var(--h4-shadow); } /* ---------- Hero ---------- */ .h4-hero { background: linear-gradient(135deg, var(--h4-primary), var(--h4-secondary)); color: #fff; text-align: center; } .h4-hero__title { font-family: var(--h4-font-heading); font-size: clamp(2rem, 6vw, 4rem); line-height: 1.05; margin: 0 0 0.4em; } .h4-hero__subtitle { font-size: clamp(1rem, 2.2vw, 1.4rem); opacity: 0.92; max-width: 38ch; margin: 0 auto calc(var(--h4-space) * 4); } .h4-hero--split .h4-hero__copy, .h4-hero--image .h4-hero__copy { text-align: left; } .h4-hero__form { margin-top: calc(var(--h4-space) * 3); } /* ---------- Grids ---------- */ .h4-grid { display: grid; gap: calc(var(--h4-space) * 3); grid-template-columns: 1fr; } /* ---------- USP ---------- */ .h4-usp__item { padding: calc(var(--h4-space) * 3); border-radius: var(--h4-radius); background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.05); } .h4-usp__item h3 { margin-top: 0; color: var(--h4-primary); } /* ---------- Text + image ---------- */ .h4-text-image { display: grid; gap: calc(var(--h4-space) * 4); align-items: center; grid-template-columns: 1fr; } .h4-text-image__media img { width: 100%; height: auto; border-radius: var(--h4-radius); display: block; } /* ---------- Cards (services / projects / blog) ---------- */ .h4-card { background: var(--h4-bg); border-radius: var(--h4-radius); box-shadow: var(--h4-shadow); overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.05); } .h4-card__body { padding: calc(var(--h4-space) * 3); } .h4-card__link { color: var(--h4-accent); font-weight: 600; text-decoration: none; } /* ---------- Timeline ---------- */ .h4-timeline__item { display: grid; grid-template-columns: 90px 1fr; gap: calc(var(--h4-space) * 2); padding: calc(var(--h4-space) * 2) 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .h4-timeline__year { font-weight: 700; color: var(--h4-accent); } /* ---------- Steps ---------- */ .h4-steps__item { display: grid; grid-template-columns: 48px 1fr; gap: calc(var(--h4-space) * 2); align-items: start; margin-bottom: calc(var(--h4-space) * 3); } .h4-steps__num { width: 48px; height: 48px; border-radius: 50%; background: var(--h4-accent); color: #fff; display: grid; place-items: center; font-weight: 700; } /* ---------- FAQ ---------- */ .h4-faq__item { border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding: calc(var(--h4-space) * 2) 0; } .h4-faq__item summary { cursor: pointer; font-weight: 600; color: var(--h4-primary); } .h4-faq__answer { margin-top: var(--h4-space); color: var(--h4-muted); } /* ---------- Testimonials ---------- */ .h4-testimonial { padding: calc(var(--h4-space) * 3); border-radius: var(--h4-radius); background: rgba(0, 0, 0, 0.02); border-left: 4px solid var(--h4-accent); } /* ---------- CTA banner ---------- */ .h4-cta-banner { background: var(--h4-accent); color: #fff; text-align: center; border-radius: var(--h4-radius); padding: calc(var(--h4-space) * 6) calc(var(--h4-space) * 3); } .h4-cta-banner .h4-btn--primary { background: #fff; color: var(--h4-primary); } /* ---------- Stats ---------- */ .h4-stats { display: grid; gap: calc(var(--h4-space) * 3); grid-template-columns: 1fr; text-align: center; } .h4-stat__num { display: block; font-family: var(--h4-font-heading); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; color: var(--h4-accent); } .h4-stat__label { color: var(--h4-muted); } /* ---------- Logo slider ---------- */ .h4-logo-slider { display: flex; flex-wrap: wrap; gap: calc(var(--h4-space) * 4); align-items: center; justify-content: center; opacity: 0.75; } .h4-logo-slider img { max-height: 48px; width: auto; } /* ---------- Forms ---------- */ .h4-form__row { margin-bottom: calc(var(--h4-space) * 2); display: flex; flex-direction: column; gap: calc(var(--h4-space) * 0.75); } .h4-form label { font-weight: 600; } .h4-form__req { color: #d33; } .h4-form input, .h4-form textarea { width: 100%; padding: 0.75em 0.9em; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: calc(var(--h4-radius) / 2); font: inherit; } .h4-form input:focus, .h4-form textarea:focus { outline: 2px solid var(--h4-accent); outline-offset: 1px; border-color: var(--h4-accent); } .h4-form__success { padding: calc(var(--h4-space) * 2); background: rgba(15, 157, 138, 0.12); border-radius: calc(var(--h4-radius) / 2); color: var(--h4-primary); } /* honeypot veld verbergen */ .h4-form .h4-hp { position: absolute !important; left: -9999px !important; } /* ---------- Reveal-on-scroll animatie ---------- */ .h4-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; } .h4-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .h4-reveal { opacity: 1; transform: none; transition: none; } .h4-btn:hover { transform: none; } } /* ---------- Responsive ---------- */ @media (min-width: 640px) { .h4-grid--2 { grid-template-columns: repeat(2, 1fr); } .h4-stats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .h4-grid--3 { grid-template-columns: repeat(3, 1fr); } .h4-grid--4 { grid-template-columns: repeat(4, 1fr); } .h4-stats { grid-template-columns: repeat(4, 1fr); } .h4-text-image { grid-template-columns: 1fr 1fr; } .h4-text-image--reverse .h4-text-image__media { order: 2; } .h4-hero--split .h4-hero__copy { max-width: 40rem; margin: 0 auto; } }