/* ============================================================= app.css — Bitwesoft Design System Gebaseerd op het nieuwe design (code.html), geconverteerd van Tailwind utility classes naar plain CSS. ============================================================= */ /* --- Google Fonts worden geladen via de in de blade --- */ /* ===================== CSS CUSTOM PROPERTIES ===================== */ :root { /* Brand colours */ --color-primary: #06b6d4; --color-primary-container: #0891b2; --color-primary-fixed: #cffafe; --color-primary-fixed-dim: #67e8f9; --color-secondary: #22c55e; --color-secondary-fixed: #bbf7d0; --color-secondary-fixed-dim: #86efac; --color-secondary-container: #dcfce7; --color-tertiary: #0d9488; --color-tertiary-container: #134e4a; --color-on-tertiary-container:#4ade80; /* Surface colours */ --color-surface: #f8fafc; --color-surface-bright: #ffffff; --color-surface-dim: #e2e8f0; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #f8fafc; --color-surface-container: #f1f5f9; --color-surface-container-high: #e2e8f0; --color-surface-container-highest:#cbd5e1; --color-surface-variant: #e2e8f0; /* On-colours */ --color-on-surface: #0f172a; --color-on-surface-variant: #475569; --color-on-primary: #ffffff; --color-on-secondary: #ffffff; --color-on-tertiary: #ffffff; --color-on-background: #0f172a; /* Outline */ --color-outline: #64748b; --color-outline-variant: #cbd5e1; /* Inverse */ --color-inverse-surface: #1e293b; --color-inverse-on-surface: #f1f5f9; --color-inverse-primary: #67e8f9; /* Error */ --color-error: #ef4444; --color-error-container: #fee2e2; --color-on-error: #ffffff; --color-on-error-container: #991b1b; /* Typography */ --font-headline: 'Manrope', sans-serif; --font-body: 'Manrope', sans-serif; --font-label: 'Inter', sans-serif; /* Border radius */ --radius: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 1rem; /* Spacing helpers */ --section-padding: 6rem 0; } /* ===================== RESET & BASE ===================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--color-surface); color: var(--color-on-surface); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } /* ===================== MATERIAL SYMBOLS ===================== */ .material-symbols-outlined { font-family: 'Material Symbols Outlined', sans-serif; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-size: 1.5rem; line-height: 1; vertical-align: middle; display: inline-flex; align-items: center; } /* ===================== LAYOUT HELPERS ===================== */ .container-xl { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; } .container-lg { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; } .section-light { background-color: var(--color-surface-container-low); padding: var(--section-padding); } .section-white { background-color: var(--color-surface-bright); padding: var(--section-padding); } .section-dark { background-color: #0f172a; color: #ffffff; padding: var(--section-padding); } .section-header { text-align: center; margin-bottom: 4rem; } .section-title { font-family: var(--font-headline); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: #0f172a; letter-spacing: -0.02em; margin-bottom: 1rem; } .section-subtitle { color: var(--color-on-surface-variant); max-width: 40rem; margin: 0 auto; font-size: 1rem; } /* ===================== BUTTONS ===================== */ .btn-primary-sm { display: inline-block; background-color: var(--color-primary); color: #ffffff; padding: 0.625rem 1.5rem; border-radius: var(--radius); font-weight: 700; font-size: 0.875rem; transition: opacity 0.2s, transform 0.1s; cursor: pointer; border: none; } .btn-primary-sm:hover { opacity: 0.9; } .btn-primary-sm:active { transform: scale(0.95); } .btn-secondary-lg { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--color-secondary); color: var(--color-on-secondary); padding: 1rem 2rem; border-radius: var(--radius); font-weight: 700; font-size: 1.125rem; transition: box-shadow 0.2s, transform 0.1s; cursor: pointer; border: none; } .btn-secondary-lg:hover { box-shadow: 0 8px 30px rgba(34, 197, 94, 0.3); } .btn-secondary-lg:active { transform: scale(0.95); } .btn-outline-lg { display: inline-block; border: 1px solid rgba(255,255,255,0.2); color: #ffffff; padding: 1rem 2rem; border-radius: var(--radius); font-weight: 700; font-size: 1.125rem; backdrop-filter: blur(8px); transition: background-color 0.2s, transform 0.1s; cursor: pointer; background: transparent; } .btn-outline-lg:hover { background-color: rgba(255,255,255,0.1); } .btn-outline-lg:active { transform: scale(0.95); } /* ===================== NAVIGATION ===================== */ .nav-shell { position: fixed; top: 0; width: 100%; z-index: 50; background-color: rgba(249, 246, 245, 0.70); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(203, 213, 225, 0.1); } .nav-inner { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 80rem; margin: 0 auto; } .nav-logo { font-size: 1.5rem; font-weight: 900; color: #0f172a; letter-spacing: -0.04em; font-family: var(--font-headline); } .nav-links { display: none; align-items: center; gap: 2rem; font-family: var(--font-headline); font-weight: 700; letter-spacing: -0.01em; } .nav-link { color: #475569; font-weight: 500; transition: color 0.3s; } .nav-link:hover { color: var(--color-primary); } .nav-link--active { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); padding-bottom: 0.25rem; } @media (min-width: 768px) { .nav-links { display: flex; } } /* ===================== MAIN OFFSET ===================== */ .main-content { padding-top: 4rem; } /* ===================== HERO ===================== */ .hero-section { position: relative; overflow: hidden; padding: 6rem 1.5rem 8rem; } @media (min-width: 768px) { .hero-section { padding: 8rem 1.5rem 12rem; } } .hero-gradient-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #083344 0%, #06b6d4 100%); z-index: -1; } .hero-glow { position: absolute; top: 0; right: 0; width: 600px; height: 600px; background-color: rgba(6, 182, 212, 0.2); border-radius: 9999px; filter: blur(120px); transform: translate(25%, -25%); z-index: 0; } .hero-inner { max-width: 80rem; margin: 0 auto; position: relative; z-index: 1; } .hero-content { max-width: 48rem; } .hero-badge { display: inline-block; padding: 0.375rem 1rem; border-radius: var(--radius); background-color: rgba(34, 197, 94, 0.2); border: 1px solid rgba(34, 197, 94, 0.3); color: #bbf7d0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 2rem; } .hero-title { font-family: var(--font-headline); font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 800; color: #ffffff; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 2rem; } .hero-subtitle { font-size: 1.25rem; color: rgba(236, 254, 255, 0.8); line-height: 1.7; margin-bottom: 2.5rem; max-width: 40rem; font-weight: 300; } .hero-cta-group { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .hero-cta-group { flex-direction: row; } } /* ===================== OVER ONS ===================== */ .over-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; } @media (min-width: 1024px) { .over-grid { grid-template-columns: 1fr 1fr; } } .over-image-wrapper { position: relative; } .over-image-box { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--color-surface-container-highest); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } .over-image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); transition: filter 0.7s; } .over-image:hover { filter: grayscale(0%); } .over-floating-card { display: none; position: absolute; bottom: -2.5rem; right: -3rem; padding: 2rem; background-color: var(--color-surface-container-lowest); border-radius: var(--radius-lg); box-shadow: 0 20px 40px rgba(0,0,0,0.15); max-width: 22rem; border: 1px solid rgba(203,213,225,0.3); gap: 1rem; align-items: flex-start; } @media (min-width: 768px) { .over-floating-card { display: flex; } } .over-card-icon { color: var(--color-secondary); font-size: 2.5rem; flex-shrink: 0; } .over-card-title { font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; font-family: var(--font-headline); } .over-card-text { color: var(--color-on-surface-variant); font-size: 0.875rem; line-height: 1.6; } .over-paragraph { font-size: 1.125rem; color: var(--color-on-surface-variant); line-height: 1.75; margin-bottom: 1.5rem; } .check-list { display: flex; flex-direction: column; gap: 1rem; } .check-item { display: flex; align-items: center; gap: 0.75rem; } .check-icon { color: var(--color-primary); font-size: 1.5rem; flex-shrink: 0; } .check-label { font-weight: 700; color: #0f172a; } /* ===================== DIENSTEN ===================== */ .diensten-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .diensten-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .diensten-grid { grid-template-columns: repeat(3, 1fr); } } .dienst-card { display: block; padding: 2rem; background-color: var(--color-surface-container-low); border-radius: var(--radius-lg); border: 1px solid rgba(203, 213, 225, 0.2); transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; color: inherit; } .dienst-card--link { display: flex; flex-direction: column; cursor: pointer; } .dienst-card--link:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.1); transform: scale(1.02); border-color: rgba(6, 182, 212, 0.5); } .dienst-card--link:hover .dienst-icon { transform: scale(1.1); } .dienst-card--link:hover .dienst-title { color: var(--color-primary); } .dienst-icon { font-size: 2.5rem; color: var(--color-primary); margin-bottom: 1rem; display: block; transition: transform 0.2s; } .dienst-title { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin-bottom: 0.75rem; transition: color 0.2s; font-family: var(--font-headline); } .dienst-text { color: var(--color-on-surface-variant); font-size: 0.875rem; flex-grow: 1; margin-bottom: 1.5rem; } .dienst-meer { display: flex; align-items: center; gap: 0.5rem; color: var(--color-primary); font-weight: 700; font-size: 0.875rem; margin-top: auto; } .dienst-meer-icon { font-size: 1rem; } .dienst-card--cta { background-color: var(--color-primary); color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: none; } .dienst-cta-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 0.5rem; font-family: var(--font-headline); } .dienst-cta-text { color: #cffafe; font-size: 0.875rem; margin-bottom: 1.5rem; } .dienst-cta-btn { display: inline-block; background-color: #ffffff; color: var(--color-primary); padding: 0.5rem 1.5rem; border-radius: var(--radius); font-weight: 700; transition: background-color 0.2s; } .dienst-cta-btn:hover { background-color: #ecfeff; } /* ===================== WEBAPPLICATIE ===================== */ .webapp-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; } @media (min-width: 1024px) { .webapp-grid { grid-template-columns: 1fr 1fr; } } .webapp-title { font-family: var(--font-headline); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: #ffffff; letter-spacing: -0.02em; margin-bottom: 1.5rem; } .webapp-text { font-size: 1.125rem; color: #94a3b8; line-height: 1.75; margin-bottom: 2rem; } .webapp-voorbeelden-label { font-weight: 700; color: var(--color-primary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; font-family: var(--font-label); } .webapp-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; list-style: none; } @media (min-width: 640px) { .webapp-list { grid-template-columns: repeat(2, 1fr); } } .webapp-list-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #cbd5e1; } .webapp-list-icon { color: var(--color-primary); font-size: 1rem; } /* Mockup */ .webapp-mockup-wrapper { background: linear-gradient(to top right, rgba(6,182,212,0.1), rgba(34,197,94,0.1)); padding: 0.25rem; border-radius: var(--radius-xl); } .webapp-mockup { background-color: #1e293b; border-radius: var(--radius-lg); padding: 2rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); } .webapp-mockup-inner { /* inner wrapper */ } .webapp-dots { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .webapp-dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; } .webapp-dot--red { background-color: rgba(239,68,68,0.5); } .webapp-dot--yellow { background-color: rgba(234,179,8,0.5); } .webapp-dot--green { background-color: rgba(34,197,94,0.5); } .webapp-mockup-lines { display: flex; flex-direction: column; gap: 1rem; } .webapp-line { height: 1rem; background-color: #334155; border-radius: 0.25rem; } .webapp-line--3-4 { width: 75%; } .webapp-line--1-2 { width: 50%; } .webapp-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 0.5rem; } .webapp-block { height: 5rem; background-color: rgba(6,182,212,0.2); border-radius: 0.25rem; } .webapp-block-tall { height: 8rem; background-color: rgba(51,65,85,0.5); border-radius: 0.25rem; margin-top: 0.25rem; display: flex; align-items: center; justify-content: center; } .webapp-chart-icon { font-size: 2.5rem; color: #475569; } /* ===================== WERKWIJZE ===================== */ .werkwijze-wrapper { position: relative; } .werkwijze-line { display: none; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: rgba(203, 213, 225, 0.3); transform: translateY(-50%); z-index: 0; } @media (min-width: 1024px) { .werkwijze-line { display: block; } } .werkwijze-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; position: relative; z-index: 1; } @media (min-width: 768px) { .werkwijze-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .werkwijze-grid { grid-template-columns: repeat(5, 1fr); } } .stap { display: flex; flex-direction: column; align-items: center; text-align: center; } .stap-circle { width: 4rem; height: 4rem; border-radius: 9999px; background-color: #ffffff; border: 4px solid var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; transition: transform 0.2s; } .stap:hover .stap-circle { transform: scale(1.1); } .stap-icon { color: var(--color-primary); font-size: 1.5rem; } .stap-title { font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; font-family: var(--font-headline); } .stap-text { font-size: 0.875rem; color: var(--color-on-surface-variant); } /* ===================== CONTACT ===================== */ .contact-card { background-color: var(--color-primary-container); padding: 1.5rem; border-radius: var(--radius-lg); position: relative; overflow: hidden; } @media (min-width: 768px) { .contact-card { padding: 5rem; } } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } /* Prevent a wide child (e.g. the reCAPTCHA widget) from forcing this grid track wider than the viewport on mobile. */ .contact-grid > * { min-width: 0; } @media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } } .contact-title { font-family: var(--font-headline); font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: #ffffff; letter-spacing: -0.02em; margin-bottom: 2rem; } .contact-text { color: #ecfeff; font-size: 1.125rem; margin-bottom: 2rem; font-weight: 300; } .contact-details { display: flex; flex-direction: column; gap: 1rem; } .contact-detail-item { display: flex; align-items: center; gap: 0.75rem; color: #ffffff; } .contact-detail-icon { font-size: 1.5rem; } /* Contact form wrapper (wraps the partials/contact blade partial) */ .contact-form-wrapper { background-color: #ffffff; padding: 1.25rem; border-radius: var(--radius-lg); box-shadow: 0 20px 40px rgba(0,0,0,0.15); } @media (min-width: 768px) { .contact-form-wrapper { padding: 2rem; } } /* Generic form styles used inside partials/contact */ .contact-form-wrapper label { display: block; font-size: 0.875rem; font-weight: 700; color: #334155; margin-bottom: 0.25rem; font-family: var(--font-label); } .contact-form-wrapper input, .contact-form-wrapper textarea, .contact-form-wrapper select { width: 100%; padding: 0.5rem 1rem; border: 1px solid var(--color-outline-variant); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.875rem; outline: none; transition: box-shadow 0.2s; } .contact-form-wrapper input:focus, .contact-form-wrapper textarea:focus { box-shadow: 0 0 0 2px var(--color-primary); border-color: var(--color-primary); } .contact-form-wrapper textarea { height: 8rem; resize: vertical; } .contact-form-wrapper button, .contact-form-wrapper [type="submit"] { width: 100%; background-color: var(--color-secondary); color: var(--color-on-secondary); padding: 0.75rem 1.5rem; border-radius: var(--radius); font-weight: 900; font-size: 1rem; border: none; cursor: pointer; transition: opacity 0.2s, transform 0.1s; font-family: var(--font-headline); } .contact-form-wrapper button:hover, .contact-form-wrapper [type="submit"]:hover { opacity: 0.9; } .contact-form-wrapper button:active, .contact-form-wrapper [type="submit"]:active { transform: scale(0.95); } /* space between form groups */ .contact-form-wrapper > * + * { margin-top: 1rem; } .contact-form-wrapper .form-group + .form-group { margin-top: 1rem; } /* ===================== RECAPTCHA (shared across all forms on the site) The Google widget has a fixed ~304px width, which overflows every form's mobile padding and pushes the white box past the viewport edge. Scale it down on narrow screens instead. ===================== */ .g-recaptcha { transform: scale(0.7); transform-origin: 0 0; margin-bottom: -23px; } @media (min-width: 380px) { .g-recaptcha { transform: scale(0.8); margin-bottom: -16px; } } @media (min-width: 480px) { .g-recaptcha { transform: scale(0.9); margin-bottom: -8px; } } @media (min-width: 600px) { .g-recaptcha { transform: scale(1); margin-bottom: 0; } } /* ===================== FOOTER ===================== */ footer { background-color: #f3f0ef; padding: 3rem 2rem; width: 100%; } footer .footer-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 80rem; margin: 0 auto; } @media (min-width: 768px) { footer .footer-inner { grid-template-columns: repeat(4, 1fr); } } footer .footer-brand-name { font-size: 1.25rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; font-family: var(--font-headline); } footer .footer-tagline { font-family: var(--font-label); font-size: 0.875rem; color: #64748b; line-height: 1.6; } footer .footer-col-title { font-weight: 700; color: #0891b2; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; font-family: var(--font-label); } footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--font-label); font-size: 0.875rem; } footer ul a { color: #64748b; transition: color 0.2s; text-underline-offset: 4px; } footer ul a:hover { color: var(--color-primary); text-decoration: underline; } footer address { font-style: normal; font-family: var(--font-label); font-size: 0.875rem; color: #64748b; line-height: 1.6; } /* ===================== FADE-IN ANIMATION ===================== */ .fade-in { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.appear { opacity: 1; transform: translateY(0); } /* ===================== UTILITIES ===================== */ .over-text { display: flex; flex-direction: column; gap: 0; } /* ===================== FOOTER ===================== */ .site-footer { background-color: #f3f0ef; width: 100%; padding: 3rem 2rem; } .site-footer__inner { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 80rem; margin: 0 auto; align-items: start; } @media (min-width: 768px) { /* 4 equal columns: logo | info | bedrijf | hoofdkantoor */ .site-footer__inner { grid-template-columns: repeat(4, 1fr); } } /* Col 1: logo only — vertically centred within its column */ .site-footer__logo-col { display: flex; align-items: flex-start; } .site-footer__logo-img { height: auto; /* h-10 = 40px */ width: auto; display: block; } /* Col 2: info / tagline text */ .site-footer__info-col { display: flex; flex-direction: column; gap: 0.5rem; } .site-footer__tagline { font-family: var(--font-label); font-size: 0.875rem; color: #64748b; line-height: 1.6; -webkit-font-smoothing: antialiased; } .site-footer__tagline--copy { margin-top: 0.25rem; } .site-footer__email { color: #64748b; text-decoration: none; text-underline-offset: 3px; transition: color 0.2s; } .site-footer__email:hover { color: #06b6d4; text-decoration: underline; } /* Column headings */ .site-footer__col-title { font-family: var(--font-label); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #0891b2; /* cyan-600 */ margin-bottom: 1rem; } /* Link lists */ .site-footer__list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--font-label); font-size: 0.875rem; -webkit-font-smoothing: antialiased; } .site-footer__list a { color: #64748b; text-decoration: none; text-underline-offset: 4px; transition: color 0.2s; } .site-footer__list a:hover { color: #06b6d4; /* cyan-500 */ text-decoration: underline; } /* Address column */ .site-footer__address { font-style: normal; font-family: var(--font-label); font-size: 0.875rem; color: #64748b; line-height: 1.6; -webkit-font-smoothing: antialiased; }