/* Valyn Software - huisstijl, afgestemd op www.valyn.nl (oranje accent op donkere/lichte basis) */ :root { --brand-500: #FF6A1A; --brand-600: #F2570A; --ink-950: #0A0B10; } body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } h1, h2, h3, .font-display { font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; } .valyn-btn-primary { background-color: var(--brand-600); color: #fff; transition: background-color .15s ease, transform .1s ease; } .valyn-btn-primary:hover { background-color: var(--brand-700, #C94406); } .valyn-btn-primary:active { transform: scale(0.98); } .valyn-btn-danger { background-color: #fff; color: #B42318; border: 1px solid #FDA29B; transition: background-color .15s ease; } .valyn-btn-danger:hover { background-color: #FEF3F2; } .valyn-card { background: #fff; border: 1px solid #F1E7DF; box-shadow: 0 1px 2px rgba(10,11,16,0.04); } .valyn-logo-fallback { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: -0.02em; } /* ===== Sidebar-navigatie (vervangt de oude topbar) ===== */ .valyn-sidebar-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 0.5rem; color: #D7DAE0; font-weight: 500; } .valyn-sidebar-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; } .valyn-sidebar-link:hover { background: rgba(255,255,255,0.06); color: #fff; } .valyn-sidebar-link:hover svg { opacity: 1; } .valyn-sidebar-link.is-active { background: rgba(255,106,26,0.14); color: #fff; } .valyn-sidebar-link.is-active svg { opacity: 1; } /* Pagina's die de sidebar gebruiken krijgen dit op de - schuift de inhoud naast de sidebar. */ body.with-sidebar { padding-left: 0; } @media (min-width: 768px) { body.with-sidebar { padding-left: 16rem; } /* 16rem = w-64, breedte van de sidebar */ } /* ===== Lege staat: consistente stijl voor "nog niets hier" ===== */ .valyn-empty { text-align: center; padding: 2.5rem 1.5rem; color: #767A89; } .valyn-empty svg { width: 32px; height: 32px; margin: 0 auto 0.75rem; opacity: 0.35; } /* ===== Toegankelijkheid: zichtbare focusring op alle interactieve elementen ===== */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ===== Homepage: checklist-hero animatie (één bewuste, georkestreerde beweging) ===== */ @keyframes vy-tick-draw { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } } @keyframes vy-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .vy-tick { stroke-dasharray: 20; stroke-dashoffset: 20; animation: vy-tick-draw .45s ease forwards; } .vy-fade-row { opacity: 0; animation: vy-fade-up .5s ease forwards; } /* ===== Toast-meldingen (vervangen de platte tekstbalken bij succes/foutmeldingen) ===== */ #valynToastContainer { position: fixed; top: 1rem; right: 1rem; z-index: 60; display: flex; flex-direction: column; gap: 0.5rem; max-width: 22rem; } .valyn-toast { background: #fff; border-radius: 0.75rem; box-shadow: 0 8px 24px rgba(10,11,16,0.16); padding: 0.85rem 1rem; font-size: 0.875rem; display: flex; align-items: flex-start; gap: 0.6rem; animation: vy-toast-in .25s ease forwards; border-left: 3px solid #767A89; } .valyn-toast.is-error { border-left-color: #DC2626; color: #991B1B; } .valyn-toast.is-success { border-left-color: #16A34A; color: #14532D; } .valyn-toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } .valyn-toast .valyn-toast-close { margin-left: auto; cursor: pointer; opacity: 0.5; flex-shrink: 0; } .valyn-toast .valyn-toast-close:hover { opacity: 1; } .valyn-toast.is-leaving { animation: vy-toast-out .2s ease forwards; } @keyframes vy-toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } @keyframes vy-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(12px); } } /* ===== Bevestigingsmodal (vervangt de kale browser-confirm bij verwijderen) ===== */ #valynConfirmOverlay { position: fixed; inset: 0; background: rgba(10,11,16,0.5); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; } #valynConfirmBox { background: #fff; border-radius: 1rem; padding: 1.5rem; max-width: 24rem; width: 100%; animation: vy-modal-in .18s ease forwards; } /* Zorgt ervoor dat .hidden altijd wint van de display: flex op het overlay ID */ #valynConfirmOverlay.hidden { display: none !important; } @keyframes vy-modal-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } /* ===== Formulierknoppen: duidelijke "bezig"-status, voorkomt dubbel klikken ===== */ button:disabled { opacity: 0.6; cursor: not-allowed; }