/** * Voltina Hero Video Block — Voltina skin (STRUCTUUR ONGEWIJZIGD) * Copy-paste friendly. * Opmerking: de gigantische background-image data-uri van .background-patterns * laat ik bewust weg — die plak jij manueel terug. */ /* Ensure full width - override WordPress constrained layout and global padding */ .voltina-hero-video { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; position: relative; display: flex; flex-direction: column; overflow: hidden; /* keep your sizing behavior */ min-height: 404px; padding-bottom: 48px; justify-content: space-between; /* Voltina base */ background-color: #000000; } /* Keep if you still use it somewhere (you had it in your CSS) */ .navigation { position: relative; display: flex; flex-direction: column; background-color: #000000; overflow: hidden; min-height: 404px; padding-bottom: 48px; justify-content: space-between; } /* Override constrained layout for this block */ .is-layout-constrained > .voltina-hero-video, .has-global-padding > .voltina-hero-video { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* -------------------- Background patterns (IMAGE CODE OMITTED) -------------------- */ .voltina-hero-video .background-patterns { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1NSAyNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PGc+PGNsaXBQYXRoIGlkPSJfY2xpcDEiPjxyZWN0IHg9IjcuMjUzIiB5PSIwIiB3aWR0aD0iMTguODIzIiBoZWlnaHQ9IjIyLjU3MyIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI19jbGlwMSkiPjxwYXRoIGQ9Ik03LjI1MywwbDEyLjkyOSwyMi41NzNsNC45NDQsLTEwLjU1MmwtNS4zMjQsMGw2LjI3NCwtMTIuMDIxbC0xOC44MjMsMFoiIHN0eWxlPSJmaWxsOiNkN2NkZWE7ZmlsbC1vcGFjaXR5OjAuMTQ7Ii8+PC9nPjxjbGlwUGF0aCBpZD0iX2NsaXAyIj48cGF0aCBkPSJNMjguNzM4LDcuNDk5bDguNzQ2LC0wbC0xNS45NzEsMTYuNDMxbDUuNjI2LDkuMTk1bDE5Ljg4NiwtMzMuMTI1bC0xMy43MjQsMGwtNC41NjMsNy40OTlaIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAyKSI+PHJlY3QgeD0iMjEuNTEzIiB5PSIwIiB3aWR0aD0iMjUuNTEyIiBoZWlnaHQ9IjMzLjEyNSIgc3R5bGU9ImZpbGw6I2Q3Y2RlYTtmaWxsLW9wYWNpdHk6MC4xNDsiLz48L2c+PC9nPjwvc3ZnPg=="), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1NSAyNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PGc+PGNsaXBQYXRoIGlkPSJfY2xpcDEiPjxyZWN0IHg9IjcuMjUzIiB5PSIwIiB3aWR0aD0iMTguODIzIiBoZWlnaHQ9IjIyLjU3MyIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI19jbGlwMSkiPjxwYXRoIGQ9Ik03LjI1MywwbDEyLjkyOSwyMi41NzNsNC45NDQsLTEwLjU1MmwtNS4zMjQsMGw2LjI3NCwtMTIuMDIxbC0xOC44MjMsMFoiIHN0eWxlPSJmaWxsOiNkN2NkZWE7ZmlsbC1vcGFjaXR5OjAuMTQ7Ii8+PC9nPjxjbGlwUGF0aCBpZD0iX2NsaXAyIj48cGF0aCBkPSJNMjguNzM4LDcuNDk5bDguNzQ2LC0wbC0xNS45NzEsMTYuNDMxbDUuNjI2LDkuMTk1bDE5Ljg4NiwtMzMuMTI1bC0xMy43MjQsMGwtNC41NjMsNy40OTlaIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAyKSI+PHJlY3QgeD0iMjEuNTEzIiB5PSIwIiB3aWR0aD0iMjUuNTEyIiBoZWlnaHQ9IjMzLjEyNSIgc3R5bGU9ImZpbGw6I2Q3Y2RlYTtmaWxsLW9wYWNpdHk6MC4xNDsiLz48L2c+PC9nPjwvc3ZnPg=="), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1NSAyNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PGc+PGNsaXBQYXRoIGlkPSJfY2xpcDEiPjxyZWN0IHg9IjcuMjUzIiB5PSIwIiB3aWR0aD0iMTguODIzIiBoZWlnaHQ9IjIyLjU3MyIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI19jbGlwMSkiPjxwYXRoIGQ9Ik03LjI1MywwbDEyLjkyOSwyMi41NzNsNC45NDQsLTEwLjU1MmwtNS4zMjQsMGw2LjI3NCwtMTIuMDIxbC0xOC44MjMsMFoiIHN0eWxlPSJmaWxsOiNkN2NkZWE7ZmlsbC1vcGFjaXR5OjAuMTQ7Ii8+PC9nPjxjbGlwUGF0aCBpZD0iX2NsaXAyIj48cGF0aCBkPSJNMjguNzM4LDcuNDk5bDguNzQ2LC0wbC0xNS45NzEsMTYuNDMxbDUuNjI2LDkuMTk1bDE5Ljg4NiwtMzMuMTI1bC0xMy43MjQsMGwtNC41NjMsNy40OTlaIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAyKSI+PHJlY3QgeD0iMjEuNTEzIiB5PSIwIiB3aWR0aD0iMjUuNTEyIiBoZWlnaHQ9IjMzLjEyNSIgc3R5bGU9ImZpbGw6I2Q3Y2RlYTtmaWxsLW9wYWNpdHk6MC4xNDsiLz48L2c+PC9nPjwvc3ZnPg=="), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1NSAyNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PGc+PGNsaXBQYXRoIGlkPSJfY2xpcDEiPjxyZWN0IHg9IjcuMjUzIiB5PSIwIiB3aWR0aD0iMTguODIzIiBoZWlnaHQ9IjIyLjU3MyIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI19jbGlwMSkiPjxwYXRoIGQ9Ik03LjI1MywwbDEyLjkyOSwyMi41NzNsNC45NDQsLTEwLjU1MmwtNS4zMjQsMGw2LjI3NCwtMTIuMDIxbC0xOC44MjMsMFoiIHN0eWxlPSJmaWxsOiNkN2NkZWE7ZmlsbC1vcGFjaXR5OjAuMTQ7Ii8+PC9nPjxjbGlwUGF0aCBpZD0iX2NsaXAyIj48cGF0aCBkPSJNMjguNzM4LDcuNDk5bDguNzQ2LC0wbC0xNS45NzEsMTYuNDMxbDUuNjI2LDkuMTk1bDE5Ljg4NiwtMzMuMTI1bC0xMy43MjQsMGwtNC41NjMsNy40OTlaIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAyKSI+PHJlY3QgeD0iMjEuNTEzIiB5PSIwIiB3aWR0aD0iMjUuNTEyIiBoZWlnaHQ9IjMzLjEyNSIgc3R5bGU9ImZpbGw6I2Q3Y2RlYTtmaWxsLW9wYWNpdHk6MC4xNDsiLz48L2c+PC9nPjwvc3ZnPg=="),url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1NSAyNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PGc+PGNsaXBQYXRoIGlkPSJfY2xpcDEiPjxyZWN0IHg9IjcuMjUzIiB5PSIwIiB3aWR0aD0iMTguODIzIiBoZWlnaHQ9IjIyLjU3MyIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI19jbGlwMSkiPjxwYXRoIGQ9Ik03LjI1MywwbDEyLjkyOSwyMi41NzNsNC45NDQsLTEwLjU1MmwtNS4zMjQsMGw2LjI3NCwtMTIuMDIxbC0xOC44MjMsMFoiIHN0eWxlPSJmaWxsOiNkN2NkZWE7ZmlsbC1vcGFjaXR5OjAuMTQ7Ii8+PC9nPjxjbGlwUGF0aCBpZD0iX2NsaXAyIj48cGF0aCBkPSJNMjguNzM4LDcuNDk5bDguNzQ2LC0wbC0xNS45NzEsMTYuNDMxbDUuNjI2LDkuMTk1bDE5Ljg4NiwtMzMuMTI1bC0xMy43MjQsMGwtNC41NjMsNy40OTlaIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAyKSI+PHJlY3QgeD0iMjEuNTEzIiB5PSIwIiB3aWR0aD0iMjUuNTEyIiBoZWlnaHQ9IjMzLjEyNSIgc3R5bGU9ImZpbGw6I2Q3Y2RlYTtmaWxsLW9wYWNpdHk6MC4xNDsiLz48L2c+PC9nPjwvc3ZnPg=="), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1NSAyNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PGc+PGNsaXBQYXRoIGlkPSJfY2xpcDEiPjxyZWN0IHg9IjcuMjUzIiB5PSIwIiB3aWR0aD0iMTguODIzIiBoZWlnaHQ9IjIyLjU3MyIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI19jbGlwMSkiPjxwYXRoIGQ9Ik03LjI1MywwbDEyLjkyOSwyMi41NzNsNC45NDQsLTEwLjU1MmwtNS4zMjQsMGw2LjI3NCwtMTIuMDIxbC0xOC44MjMsMFoiIHN0eWxlPSJmaWxsOiNkN2NkZWE7ZmlsbC1vcGFjaXR5OjAuMTQ7Ii8+PC9nPjxjbGlwUGF0aCBpZD0iX2NsaXAyIj48cGF0aCBkPSJNMjguNzM4LDcuNDk5bDguNzQ2LC0wbC0xNS45NzEsMTYuNDMxbDUuNjI2LDkuMTk1bDE5Ljg4NiwtMzMuMTI1bC0xMy43MjQsMGwtNC41NjMsNy40OTlaIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAyKSI+PHJlY3QgeD0iMjEuNTEzIiB5PSIwIiB3aWR0aD0iMjUuNTEyIiBoZWlnaHQ9IjMzLjEyNSIgc3R5bGU9ImZpbGw6I2Q3Y2RlYTtmaWxsLW9wYWNpdHk6MC4xNDsiLz48L2c+PC9nPjwvc3ZnPg=="), url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1NSAyNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PGc+PGNsaXBQYXRoIGlkPSJfY2xpcDEiPjxyZWN0IHg9IjcuMjUzIiB5PSIwIiB3aWR0aD0iMTguODIzIiBoZWlnaHQ9IjIyLjU3MyIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI19jbGlwMSkiPjxwYXRoIGQ9Ik03LjI1MywwbDEyLjkyOSwyMi41NzNsNC45NDQsLTEwLjU1MmwtNS4zMjQsMGw2LjI3NCwtMTIuMDIxbC0xOC44MjMsMFoiIHN0eWxlPSJmaWxsOiNkN2NkZWE7ZmlsbC1vcGFjaXR5OjAuMTQ7Ii8+PC9nPjxjbGlwUGF0aCBpZD0iX2NsaXAyIj48cGF0aCBkPSJNMjguNzM4LDcuNDk5bDguNzQ2LC0wbC0xNS45NzEsMTYuNDMxbDUuNjI2LDkuMTk1bDE5Ljg4NiwtMzMuMTI1bC0xMy43MjQsMGwtNC41NjMsNy40OTlaIi8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjX2NsaXAyKSI+PHJlY3QgeD0iMjEuNTEzIiB5PSIwIiB3aWR0aD0iMjUuNTEyIiBoZWlnaHQ9IjMzLjEyNSIgc3R5bGU9ImZpbGw6I2Q3Y2RlYTtmaWxsLW9wYWNpdHk6MC4xNDsiLz48L2c+PC9nPjwvc3ZnPg=="); background-position: 0 0, -14px 65px, -28px 130px, -42px 195px, -56px 260px, -70px 325px, -84px 390px; } /* Jouw bestaande gradient-layer (laat staan, jij kan je originele values hier zetten) */ .voltina-hero-video .background-patterns::after { content: ""; position: absolute; inset: 0; /* Als je je originele gradient wil behouden, zet hem hier terug. (Deze stond eerder op #380594; je kan die laten of aanpassen.) */ background: linear-gradient( 90deg, #f08040 33.73%, rgba(230, 0, 126, 0.25) 100% ); } /* Extra Voltina tint: bovenop patterns + jouw gradient, zonder iets weg te nemen */ .voltina-hero-video .background-patterns::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 120deg, rgba(230, 0, 126, 0.18) 0%, rgba(240, 128, 72, 0.18) 100% ); pointer-events: none; } /* Zorg dat ::after onder de Voltina tint blijft */ .voltina-hero-video .background-patterns::after { z-index: 0; } /* -------------------- Media cover -------------------- */ .voltina-hero-video iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); pointer-events: none; } /* Aspect ratio handling for proper video coverage */ @media (min-aspect-ratio: 16/9) { .voltina-hero-video iframe { height: 56.25vw; /* 100vw / 16 * 9 */ } } @media (max-aspect-ratio: 16/9) { .voltina-hero-video iframe { width: 177.78vh; /* 100vh / 9 * 16 */ } } /* Fallback image polish (optional but safe) */ .voltina-hero-video img { filter: saturate(1.05) contrast(1.05); } /* Je bestaande overlay (bg-black/40) laten staan maar iets verfijnd */ .voltina-hero-video .absolute.inset-0.bg-black\/40 { background: rgba(0, 0, 0, 0.32) !important; } /* -------------------- Typography -------------------- */ .voltina-hero-video h1, .voltina-hero-video .space-y-4, .voltina-hero-video a.focus-visible\:ring-border-primary { color: white; } .voltina-hero-video h1 { font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .voltina-hero-video .space-y-4 { font-weight: 400; line-height: 1.6; text-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } /* Description paragraph spacing */ .voltina-hero-video .space-y-4 > p { margin-bottom: 1rem; } .voltina-hero-video .space-y-4 > p:last-child { margin-bottom: 0; } /* -------------------- CTA button (zelfde class, Voltina look) -------------------- */ .voltina-hero-video a.focus-visible\:ring-border-primary { font-size: 18px; border-radius: 9999px; border: 0 !important; text-decoration: none; background: #e6007e; padding: 14px 22px !important; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease; } .voltina-hero-video a.focus-visible\:ring-border-primary:hover { transform: translateY(-1px); filter: brightness(1.03) saturate(1.06); box-shadow: 0 18px 55px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.10) inset; } .voltina-hero-video a.focus-visible\:ring-border-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.35), 0 0 0 6px rgba(240, 128, 72, 0.25), 0 18px 55px rgba(0, 0, 0, 0.42); } /* Small polish for mobile spacing */ @media (max-width: 640px) { .voltina-hero-video { padding-bottom: 36px; } } /* Align hero content with header/logo gutter (meestal px-[5%]) */ .voltina-hero-video > .relative.z-10.px-\[9\%\] { padding-left: 5% !important; padding-right: 5% !important; } /* (optioneel) als je header container een vaste max-width heeft, zorg dat de hero container exact hetzelfde gedrag heeft. */ .voltina-hero-video > .relative.z-10.px-\[9\%\] > .container { max-width: 1200px; /* pas aan indien jouw theme bv 1200/1440 gebruikt */ margin-left: auto; margin-right: auto; } /* (optioneel) als je nog nét 1-2px verschil voelt door fonts/line-height */ .voltina-hero-video .max-w-2xl { transform: translateX(0); /* placeholder: laat 0 staan tenzij je finetunet */ } .voltina-hero-video .absolute.inset-0.z-0.overflow-hidden { background: #000; /* of je Voltina gradient */ } .voltina-hero-video .absolute.inset-0.z-0.overflow-hidden { background: linear-gradient(90deg, #f08048 33.73%, rgba(230, 0, 126, 0.25) 100%); }