/* ============================== ROOT VARIABLES ============================== */ :root { --bg: #ffffff; --bg-alt: #f8fafc; --text: #0f172a; --muted: #64748b; --primary: #2563eb; --primary-soft: #2563eb22; --glass: rgba(255,255,255,.75); --border: rgba(0,0,0,.08); } /* Dark mode overrides */ [data-theme="dark"] { --bg: #020617; --bg-alt: #020617; --text: #e5e7eb; --muted: #94a3b8; --glass: rgba(2,6,23,.75); --border: rgba(255,255,255,.08); } .partners { display: flex; gap: 3rem; align-items: center; justify-content: center; flex-wrap: wrap; } .partner-logo { height: 64px; max-width: 180px; object-fit: contain; opacity: 0.85; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08)); transition: opacity .3s ease, transform .3s ease, filter .3s ease; } .partner-logo:hover { opacity: 1; transform: translateY(-3px); } [data-theme="light"] .partner-logo { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1)) brightness(0.95) contrast(1.1); } /* Dark mode: lichte logo's juist iets helderder */ [data-theme="dark"] .partner-logo { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) brightness(1.15) contrast(1.1); } /* ============================== GLOBAL STYLES ============================== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; transition: background .3s, color .3s; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } button { cursor: pointer; font-family: inherit; } /* ============================== HEADER / NAVIGATION ============================== */ header { position: sticky; top: 0; z-index: 100; background: var(--glass); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); transition: background .3s; } .nav { max-width: 1280px; margin: auto; padding: 1.2rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .nav-left { display: flex; align-items: center; gap: 2.5rem; } .nav img { height: 32px; } .nav a { font-weight: 500; opacity: .85; transition: opacity .2s; } .nav a:hover { opacity: 1; } .nav-right { display: flex; align-items: center; gap: 1.2rem; } .toggle { cursor: pointer; font-size: 1.2rem; } /* ============================== BUTTONS ============================== */ .btn { display: inline-block; padding: .8rem 1.8rem; border-radius: 999px; font-weight: 600; background: linear-gradient(135deg,#2563eb,#1e40af); color: white; border: none; transition: transform .2s; } .btn:hover { transform: scale(1.05); } /* ============================== HERO ============================== */ .hero { position: relative; padding: 8rem 0 7rem; background: radial-gradient(circle at 15% 20%, #60a5fa33, transparent 40%), radial-gradient(circle at 85% 30%, #2563eb33, transparent 40%); } .hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 4rem; align-items: center; max-width: 1280px; margin: auto; padding: 0 1.5rem; } .hero h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1.15; } .hero p { margin: 1.5rem 0 2.5rem; font-size: 1.1rem; color: var(--muted); max-width: 520px; } .hero-visual { position: relative; height: 320px; border-radius: 32px; background: linear-gradient(135deg,#2563eb,#60a5fa); box-shadow: 0 40px 80px rgba(0,0,0,0.25); overflow: hidden; } /* bewegend orb / glass overlay */ .hero-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, #ffffff33, transparent 70%); animation: moveOrb 8s infinite alternate ease-in-out; } @keyframes moveOrb { 0% { transform: translate(0,0); } 100% { transform: translate(60px,40px); } } /* Yealink PNG zweven */ .floating-yealink { position: absolute; width: 285px; /* pas eventueel aan */ top: 50%; left: 50%; transform: translate(-50%, -50%); animation: floatYealink 4s ease-in-out infinite alternate; pointer-events: none; filter: drop-shadow(0 15px 25px rgba(0,0,0,.3)); /* schaduw */ } @keyframes floatYealink { 0% { transform: translate(-50%, -50%) translateY(0px); } 50% { transform: translate(-50%, -50%) translateY(-15px) translateX(10px); } 100% { transform: translate(-50%, -50%) translateY(0px) translateX(0px); } } /* Hero tekst + CTA spacing fix */ .hero a.btn { margin-top: 1.5rem; display: inline-block; } /* ============================== SECTIONS ============================== */ section { padding: 6rem 0; } .bg-alt { background: var(--bg-alt); } .container { max-width: 1280px; margin: auto; padding: 0 1.5rem; } .section-title { max-width: 700px; margin-bottom: 3.5rem; } .section-title h2 { font-size: 2.2rem; } .section-title p { margin-top: 1rem; color: var(--muted); } /* ============================== GRID / CARDS ============================== */ .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 2.5rem; } .card { background: var(--glass); border-radius: 28px; padding: 3rem; backdrop-filter: blur(20px); box-shadow: 0 30px 60px rgba(0,0,0,.12); transition: transform .3s; } .card:hover { transform: translateY(-8px); } .card h3 { margin-bottom: 1rem; } [data-theme="dark"] .card { background: rgba(255,255,255,0.05); box-shadow: 0 20px 50px rgba(0,0,0,0.3); } /* ============================== PARTNERS ============================== */ .partners { display: flex; gap: 4rem; align-items: center; opacity: .6; mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); } .partners img { height: 44px; filter: grayscale(1); transition: filter .2s, transform .2s; } .partners img:hover { filter: grayscale(0); transform: scale(1.1); } /* ============================== MODALS / FORMS ============================== */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; z-index: 200; } .modal-content { background: var(--bg); padding: 3rem; border-radius: 28px; width: 100%; max-width: 480px; } form { display: grid; gap: 1.2rem; } input, textarea, select { padding: 1rem; border-radius: 14px; border: 1px solid var(--border); background: transparent; color: var(--text); } /* ============================== FOOTER ============================== */ footer { padding: 4rem 1.5rem; text-align: center; color: var(--muted); } /* ============================== RESPONSIVE ============================== */ @media(max-width:900px){ .hero-grid { grid-template-columns:1fr; } .grid-3 { grid-template-columns:1fr; } } @media(max-width:600px){ .floating-yealink { width: 120px; } }
/* Confetti */
.confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 9999;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: red;
  opacity: 0.9;
  transform: rotate(45deg);
  animation: fall 3s linear forwards;
}

@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}
/* Confetti container */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 9999;
}

/* Confetti pieces */
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0.9;
  transform-origin: center;
  will-change: transform;
  border-radius: 2px;
}