{"id":16,"date":"2026-05-13T09:46:29","date_gmt":"2026-05-13T09:46:29","guid":{"rendered":"https:\/\/radiomagicunicorn.nl\/?page_id=16"},"modified":"2026-05-13T19:43:38","modified_gmt":"2026-05-13T19:43:38","slug":"home","status":"publish","type":"page","link":"https:\/\/radiomagicunicorn.nl\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"16\" class=\"elementor elementor-16\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50ebf55 e-con-full e-flex e-con e-parent\" data-id=\"50ebf55\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1b9d9b elementor-widget elementor-widget-html\" data-id=\"c1b9d9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"rgb-banner\">\r\n\r\n<style>\r\n\r\n\/* \ud83c\udf0c BASE *\/\r\n#rgb-banner {\r\n    width: 100%;\r\n\r\n    background: radial-gradient(circle at center,\r\n        #070012 0%,\r\n        #0a0f1f 40%,\r\n        #050510 100%\r\n    );\r\n\r\n    color: #dfe7ff;\r\n\r\n    font-family: Arial, sans-serif;\r\n\r\n    padding: 6px 0;\r\n\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n\/* \u2728 UNICORN GLOW LAYER *\/\r\n#rgb-banner::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n\r\n    background: linear-gradient(270deg,\r\n        rgba(255,77,255,0.15),\r\n        rgba(0,255,255,0.12),\r\n        rgba(120,0,255,0.12),\r\n        rgba(0,0,0,0.7)\r\n    );\r\n\r\n    z-index:0;\r\n}\r\n\r\n\/* \ud83c\udfb5 EQUALIZER *\/\r\n.equalizer {\r\n    position: absolute;\r\n    inset: 0;\r\n    display: flex;\r\n    align-items: flex-end;\r\n    justify-content: space-between;\r\n\r\n    opacity: 0.18;\r\n\r\n    z-index: 1;\r\n    pointer-events: none;\r\n}\r\n\r\n.equalizer span {\r\n    flex: 1;\r\n    margin: 0 0.5px;\r\n\r\n    background: linear-gradient(to top,\r\n        #ff4dff,\r\n        #4de6ff,\r\n        #7a4dff\r\n    );\r\n\r\n    border-radius: 2px 2px 0 0;\r\n\r\n    box-shadow: 0 0 8px rgba(255,77,255,0.3);\r\n\r\n    animation: eqAnim 1.6s infinite ease-in-out;\r\n}\r\n\r\n@keyframes eqAnim {\r\n    0%, 100% { transform: scaleY(0.1); }\r\n    50% { transform: scaleY(0.6); }\r\n}\r\n\r\n\/* HEADER *\/\r\n.header-row {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n\r\n    padding: 0 10px;\r\n\r\n    position: relative;\r\n    z-index: 2;\r\n    gap:10px;\r\n}\r\n\r\n\/* TITLE *\/\r\n.title {\r\n    font-size: clamp(16px, 3vw, 26px);\r\n    font-weight: 900;\r\n\r\n    color: #ff4dff;\r\n\r\n    text-shadow:\r\n        0 0 8px rgba(255,77,255,0.6),\r\n        0 0 16px rgba(0,255,255,0.2);\r\n}\r\n\r\n\/* INFO *\/\r\n.info {\r\n    text-align: center;\r\n    font-size: clamp(10px, 2.5vw, 13px);\r\n\r\n    color: #cfe8ff;\r\n}\r\n\r\n\/* \ud83d\udd34 ON AIR *\/\r\n.onair{\r\n    color:#ff4dff;\r\n\r\n    font-weight:900;\r\n    font-size: clamp(12px, 2.5vw, 14px);\r\n\r\n    text-shadow:\r\n        0 0 10px rgba(255,77,255,0.7),\r\n        0 0 20px rgba(0,255,255,0.3);\r\n\r\n    padding:4px 10px;\r\n\r\n    border:1px solid rgba(255,77,255,0.35);\r\n    border-radius:8px;\r\n\r\n    background: rgba(10,10,20,0.45);\r\n\r\n    animation: pulseOnAir 2s infinite;\r\n}\r\n\r\n@keyframes pulseOnAir{\r\n    0%   { transform: scale(1);   opacity:1; }\r\n    50%  { transform: scale(1.05); opacity:0.7; }\r\n    100% { transform: scale(1);   opacity:1; }\r\n}\r\n\r\n\/* TICKER *\/\r\n#ticker {\r\n    margin-top: 4px;\r\n\r\n    background: rgba(5, 5, 15, 0.85);\r\n\r\n    border-top: 1px solid rgba(255,77,255,0.25);\r\n\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n\/* SCROLL TEXT *\/\r\n#ticker-content {\r\n    display: inline-block;\r\n    padding-left: 100%;\r\n\r\n    animation: scroll 85s linear infinite;\r\n\r\n    will-change: transform;\r\n\r\n    color: #4de6ff;\r\n}\r\n\r\n@keyframes scroll {\r\n    0% { transform: translateX(0); }\r\n    100% { transform: translateX(-100%); }\r\n}\r\n\r\n\/* NEWS ITEMS *\/\r\n.news-item {\r\n    margin-right: 40px;\r\n    display: inline-block;\r\n\r\n    color: #dfe7ff;\r\n    text-decoration: none;\r\n\r\n    text-shadow: 0 0 6px rgba(0,255,255,0.2);\r\n}\r\n\r\n.news-item:hover {\r\n    color: #ffffff;\r\n    text-shadow: 0 0 10px rgba(255,77,255,0.5);\r\n}\r\n\r\n\/* PAUSE ON HOVER *\/\r\n#ticker:hover #ticker-content {\r\n    animation-play-state: paused;\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media (max-width: 600px) {\r\n    .header-row {\r\n        flex-direction: column;\r\n        gap: 4px;\r\n        text-align: center;\r\n    }\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- \ud83c\udfb5 EQUALIZER -->\r\n<div class=\"equalizer\">\r\n    <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\r\n    <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\r\n    <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\r\n<\/div>\r\n\r\n<!-- HEADER -->\r\n<div class=\"header-row\">\r\n\r\n    <div class=\"title\">\ud83e\udd84 Radiomagicunicorn<\/div>\r\n\r\n    <div class=\"info\">\r\n        <div id=\"greeting\">Laden...<\/div>\r\n        <div id=\"weather\">...<\/div>\r\n    <\/div>\r\n\r\n    <!-- ON AIR -->\r\n    <div class=\"onair\">\ud83d\udd34 ON AIR<\/div>\r\n\r\n<\/div>\r\n\r\n<!-- TICKER -->\r\n<div id=\"ticker\">\r\n    <div id=\"ticker-content\">Nieuws laden...<\/div>\r\n<\/div>\r\n\r\n<script>\r\n\r\nfunction updateGreeting() {\r\n    const hour = new Date().getHours();\r\n\r\n    let text =\r\n        hour < 6 ? \"\ud83c\udf19 Nacht vibes bij Radiomagicunicorn\"\r\n      : hour < 12 ? \"\u2600\ufe0f Goedemorgen unicorn luisteraar\"\r\n      : hour < 18 ? \"\ud83c\udf24\ufe0f Middag vibes op de radio\"\r\n      : \"\ud83c\udf0c Avond muziek bij Radiomagicunicorn\";\r\n\r\n    document.getElementById(\"greeting\").innerText = text;\r\n}\r\nupdateGreeting();\r\n\r\n\/* WEATHER *\/\r\nasync function loadWeather() {\r\n    try {\r\n        const res = await fetch(\"https:\/\/api.open-meteo.com\/v1\/forecast?latitude=52.79&longitude=6.89&current_weather=true\");\r\n        const data = await res.json();\r\n\r\n        const w = data.current_weather;\r\n\r\n        document.getElementById(\"weather\").innerText =\r\n            Math.round(w.temperature) + \"\u00b0C \u2022 \" + w.windspeed + \" km\/h\";\r\n\r\n    } catch {\r\n        document.getElementById(\"weather\").innerText = \"Weer offline\";\r\n    }\r\n}\r\nloadWeather();\r\n\r\n\/* RSS *\/\r\nasync function loadRSS() {\r\n    try {\r\n        const res = await fetch(\"https:\/\/api.rss2json.com\/v1\/api.json?rss_url=https:\/\/feeds.nos.nl\/nosnieuwsalgemeen\");\r\n        const data = await res.json();\r\n\r\n        let html = \"\";\r\n\r\n        data.items.slice(0, 15).forEach(item => {\r\n            html += `\r\n                <a href=\"${item.link}\" target=\"_blank\" class=\"news-item\">\r\n                    \ud83d\udcf0 ${item.title}\r\n                <\/a>\r\n            `;\r\n        });\r\n\r\n        document.getElementById(\"ticker-content\").innerHTML = html;\r\n\r\n    } catch {\r\n        document.getElementById(\"ticker-content\").innerText = \"Nieuws niet beschikbaar\";\r\n    }\r\n}\r\nloadRSS();\r\n\r\n<\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9e0fa6f e-con-full e-flex e-con e-parent\" data-id=\"9e0fa6f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c433c4 elementor-widget elementor-widget-html\" data-id=\"8c433c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"rfm-wrapper\">\r\n\r\n<style>\r\n\r\n\/* \ud83c\udf0c WRAPPER *\/\r\n#rfm-wrapper{\r\n    width:100%;\r\n    font-family: Arial, sans-serif;\r\n    position:relative;\r\n    overflow:hidden;\r\n}\r\n\r\n\/* DARK NEON BASE *\/\r\n#rfm-wrapper::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n\r\n    background: linear-gradient(270deg,\r\n        #050010,\r\n        #0a0f1f,\r\n        #120018,\r\n        #081a14,\r\n        #0b0b20\r\n    );\r\n\r\n    background-size: 1200% 1200%;\r\n    animation: bgMove 20s ease infinite;\r\n\r\n    z-index:0;\r\n}\r\n\r\n@keyframes bgMove{\r\n    0%{background-position:0% 50%}\r\n    50%{background-position:100% 50%}\r\n    100%{background-position:0% 50%}\r\n}\r\n\r\n\/* BANNER *\/\r\n.rfm-banner {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 320px;\r\n    overflow: hidden;\r\n    z-index:1;\r\n}\r\n\r\n\/* SLIDES *\/\r\n.rfm-slide {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    opacity: 0;\r\n    transform: scale(1.05);\r\n    transition: opacity 1s ease, transform 1s ease;\r\n}\r\n\r\n.rfm-slide.active {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n}\r\n\r\n.rfm-slide img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n\r\n    filter: brightness(35%) contrast(130%) saturate(160%);\r\n}\r\n\r\n\/* OVERLAY *\/\r\n.music-overlay {\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    background: linear-gradient(\r\n        to bottom,\r\n        rgba(0,0,0,0.15),\r\n        rgba(0,0,0,0.92)\r\n    );\r\n\r\n    z-index:2;\r\n}\r\n\r\n\/* CENTER TEXT *\/\r\n.rfm-center {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n\r\n    text-align: center;\r\n    z-index:3;\r\n}\r\n\r\n.rfm-center h2 {\r\n    font-size: 38px;\r\n\r\n    color: #ff4dff;\r\n\r\n    text-shadow:\r\n        0 0 10px #ff00ff,\r\n        0 0 25px rgba(255,77,255,0.5),\r\n        0 0 40px rgba(0,255,255,0.2);\r\n}\r\n\r\n#dynamicText {\r\n    color: #66ffff;\r\n    font-size: 14px;\r\n    text-shadow: 0 0 8px rgba(0,255,255,0.4);\r\n}\r\n\r\n\/* WATERMARK *\/\r\n.rfm-watermark {\r\n    position: absolute;\r\n    bottom: 15px;\r\n    width: 100%;\r\n    text-align: center;\r\n    z-index:3;\r\n}\r\n\r\n.rfm-watermark span {\r\n    font-size: 10px;\r\n    color: rgba(255,255,255,0.3);\r\n}\r\n\r\n\/* MARQUEE (optional future use) *\/\r\n.rfm-marquee-text {\r\n    display:inline-block;\r\n    white-space:nowrap;\r\n    font-size:12px;\r\n    color:#4de6ff;\r\n    animation: scrollText 22s linear infinite;\r\n}\r\n\r\n@keyframes scrollText {\r\n    0% { transform: translateX(100%); }\r\n    100% { transform: translateX(-100%); }\r\n}\r\n\r\n\/* CONTROLS *\/\r\n.rfm-controls {\r\n    position: absolute;\r\n    bottom: 10px;\r\n    right: 10px;\r\n    z-index:4;\r\n}\r\n\r\n.rfm-controls button {\r\n    background: rgba(10,10,20,0.7);\r\n\r\n    border: 1px solid #ff4dff;\r\n\r\n    color: #ff4dff;\r\n\r\n    padding: 6px 8px;\r\n\r\n    cursor: pointer;\r\n\r\n    border-radius:6px;\r\n\r\n    transition:.2s ease;\r\n}\r\n\r\n.rfm-controls button:hover{\r\n    background: rgba(255,77,255,0.2);\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media (max-width: 768px) {\r\n    .rfm-banner { height: 220px; }\r\n    .rfm-center h2 { font-size: 22px; }\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- BANNER -->\r\n<div class=\"rfm-banner\" id=\"rfmBanner\">\r\n\r\n    <div class=\"music-overlay\"><\/div>\r\n\r\n    <!-- SLIDES (NEW NEON CYBER BACKGROUNDS) -->\r\n    <div class=\"rfm-slide active\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1520975916090-3105956dac38?q=80&w=1800\">\r\n    <\/div>\r\n\r\n    <div class=\"rfm-slide\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1535223289827-42f1e9919769?q=80&w=1800\">\r\n    <\/div>\r\n\r\n    <div class=\"rfm-slide\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475?q=80&w=1800\">\r\n    <\/div>\r\n\r\n    <div class=\"rfm-slide\">\r\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1531297484001-80022131f5a1?q=80&w=1800\">\r\n    <\/div>\r\n\r\n    <!-- CENTER -->\r\n    <div class=\"rfm-center\">\r\n        <h2>\ud83e\udd84 RADIO MAGIC UNICORN<\/h2>\r\n        <p id=\"dynamicText\">LIVE \u2022 ON AIR<\/p>\r\n    <\/div>\r\n\r\n    <!-- WATERMARK -->\r\n    <div class=\"rfm-watermark\">\r\n        <span>Radiomagicunicorn \u2022 Neon Cyber Station<\/span>\r\n    <\/div>\r\n\r\n    <!-- CONTROLS -->\r\n    <div class=\"rfm-controls\">\r\n        <button onclick=\"rfmPrev()\">\u27f5<\/button>\r\n        <button onclick=\"rfmNext()\">\u27f6<\/button>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\r\n(function(){\r\n\r\nlet slides = document.querySelectorAll('#rfm-wrapper .rfm-slide');\r\nlet current = 0;\r\n\r\nfunction show(i){\r\n    slides.forEach(s => s.classList.remove('active'));\r\n    slides[i].classList.add('active');\r\n}\r\n\r\nfunction rfmNext(){\r\n    current = (current + 1) % slides.length;\r\n    show(current);\r\n}\r\n\r\nfunction rfmPrev(){\r\n    current = (current - 1 + slides.length) % slides.length;\r\n    show(current);\r\n}\r\n\r\nwindow.rfmNext = rfmNext;\r\nwindow.rfmPrev = rfmPrev;\r\n\r\nsetInterval(rfmNext, 8000);\r\n\r\n\/* TEXT ROTATION *\/\r\nconst texts = [\r\n    \"LIVE \u2022 ON AIR\",\r\n    \"Radiomagicunicorn\",\r\n    \"Neon Cyber Radio\",\r\n    \"24\/7 Music Stream\",\r\n    \"Unicorn Sound Experience\"\r\n];\r\n\r\nlet i = 0;\r\nconst el = document.getElementById(\"dynamicText\");\r\n\r\nsetInterval(()=>{\r\n    if(!el) return;\r\n\r\n    el.style.opacity = 0;\r\n\r\n    setTimeout(()=>{\r\n        i = (i + 1) % texts.length;\r\n        el.textContent = texts[i];\r\n        el.style.opacity = 1;\r\n    },300);\r\n\r\n},3500);\r\n\r\n})();\r\n\r\n<\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f1955a5 e-con-full e-flex e-con e-parent\" data-id=\"f1955a5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f23e3d elementor-widget elementor-widget-html\" data-id=\"5f23e3d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"rebecca-grid\">\r\n\r\n    <div class=\"rebecca-card\">\r\n        <h3>\ud83d\udcdc Onze Start<\/h3>\r\n        <p>We begonnen klein, maar met veel liefde voor radio. Elke dag maken we het leuker en beter voor jou als luisteraar.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"rebecca-card\">\r\n        <h3>\ud83c\udfb6 Jij kiest mee<\/h3>\r\n        <p>Stuur een verzoekje in en hoor jouw favoriete muziek terug op de radio. Jij maakt de playlist samen met ons.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"rebecca-card\">\r\n        <h3>\ud83d\udd0a Muziek 24\/7<\/h3>\r\n        <p>Nonstop muziek met een mix van hits, classics en vrolijke tracks. Altijd iets om naar te luisteren.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"rebecca-card\">\r\n        <h3>\ud83c\udf99\ufe0f Onze stijl<\/h3>\r\n        <p>We draaien met passie en plezier. Een warme radiosfeer waar iedereen welkom is.<\/p>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\r\n\/* \ud83c\udf0c GRID BACKGROUND (DARK UNICORN SAFE) *\/\r\n.rebecca-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));\r\n    gap: 14px;\r\n    padding: 15px;\r\n\r\n    background: radial-gradient(circle at top,\r\n        #070012 0%,\r\n        #0a0f1f 40%,\r\n        #050510 100%\r\n    );\r\n}\r\n\r\n\/* \ud83e\uddf1 CARD *\/\r\n.rebecca-card {\r\n    padding: 14px;\r\n    border-radius: 12px;\r\n\r\n    background: rgba(10, 10, 25, 0.75);\r\n\r\n    border: 1px solid rgba(255, 77, 255, 0.25);\r\n\r\n    color: #dfe7ff;\r\n    text-align: center;\r\n\r\n    position: relative;\r\n    overflow: hidden;\r\n\r\n    box-shadow:\r\n        0 0 12px rgba(255,77,255,0.12),\r\n        inset 0 0 10px rgba(0,255,255,0.05);\r\n\r\n    transition: 0.25s ease;\r\n}\r\n\r\n\/* \u2728 NEON SHINE EFFECT *\/\r\n.rebecca-card::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    width: 200%;\r\n    height: 200%;\r\n    top: -50%;\r\n    left: -50%;\r\n\r\n    background: linear-gradient(\r\n        120deg,\r\n        transparent,\r\n        rgba(255,77,255,0.08),\r\n        rgba(0,255,255,0.06),\r\n        transparent\r\n    );\r\n\r\n    animation: shine 8s linear infinite;\r\n}\r\n\r\n\/* HOVER *\/\r\n.rebecca-card:hover {\r\n    transform: translateY(-3px) scale(1.02);\r\n\r\n    box-shadow:\r\n        0 0 18px rgba(255,77,255,0.25),\r\n        0 0 25px rgba(0,255,255,0.15);\r\n}\r\n\r\n\/* \ud83e\udde0 TITEL *\/\r\n.rebecca-card h3 {\r\n    font-size: 15px;\r\n    margin-bottom: 8px;\r\n\r\n    color: #ff4dff;\r\n\r\n    text-shadow:\r\n        0 0 8px rgba(255,77,255,0.5);\r\n}\r\n\r\n\/* \ud83d\udcc4 TEKST *\/\r\n.rebecca-card p {\r\n    font-size: 12.5px;\r\n    line-height: 1.5;\r\n\r\n    color: #cfdcff;\r\n}\r\n\r\n\/* \u2728 ANIMATIE *\/\r\n@keyframes shine {\r\n    0% { transform: translateX(-100%) rotate(20deg); }\r\n    100% { transform: translateX(100%) rotate(20deg); }\r\n}\r\n\r\n\/* \ud83d\udcf1 MOBILE *\/\r\n@media (max-width: 600px) {\r\n    .rebecca-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-600752a e-con-full e-flex e-con e-parent\" data-id=\"600752a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3df801c elementor-widget elementor-widget-html\" data-id=\"3df801c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"rmu-news-blocks-widget\">\r\n\r\n<style>\r\n\r\n\/* \ud83c\udf0c BASE *\/\r\n#rmu-news-blocks-widget{\r\n    width:100%;\r\n    font-family: Arial, sans-serif;\r\n\r\n    background: radial-gradient(circle at top,\r\n        #070012 0%,\r\n        #0a0f1f 50%,\r\n        #050510 100%\r\n    );\r\n\r\n    padding:12px;\r\n    box-sizing:border-box;\r\n\r\n    position:relative;\r\n    overflow:hidden;\r\n}\r\n\r\n\/* \u2728 UNICORN GLOW OVERLAY *\/\r\n#rmu-news-blocks-widget::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n\r\n    background: linear-gradient(270deg,\r\n        rgba(255,77,255,0.10),\r\n        rgba(0,255,255,0.08),\r\n        rgba(120,0,255,0.08)\r\n    );\r\n\r\n    z-index:0;\r\n}\r\n\r\n\/* GRID *\/\r\n#rmu-news-blocks-widget .grid{\r\n    display:grid;\r\n    grid-template-columns:repeat(3,1fr);\r\n    gap:12px;\r\n\r\n    position:relative;\r\n    z-index:1;\r\n}\r\n\r\n\/* BLOCK *\/\r\n#rmu-news-blocks-widget .block{\r\n    background: rgba(10,10,25,0.75);\r\n\r\n    border: 1px solid rgba(255,77,255,0.20);\r\n\r\n    border-radius:14px;\r\n\r\n    padding:12px;\r\n\r\n    color:#dfe7ff;\r\n\r\n    box-shadow:\r\n        0 0 14px rgba(0,255,255,0.08),\r\n        inset 0 0 10px rgba(255,77,255,0.05);\r\n\r\n    min-height:120px;\r\n\r\n    overflow:hidden;\r\n\r\n    transition:.2s ease;\r\n}\r\n\r\n#rmu-news-blocks-widget .block:hover{\r\n    transform: translateY(-3px);\r\n    box-shadow:\r\n        0 0 20px rgba(255,77,255,0.20),\r\n        0 0 25px rgba(0,255,255,0.10);\r\n}\r\n\r\n\/* TITLE *\/\r\n#rmu-news-blocks-widget .title{\r\n    font-size:13px;\r\n    font-weight:bold;\r\n\r\n    color:#ff4dff;\r\n\r\n    margin-bottom:8px;\r\n\r\n    text-shadow:\r\n        0 0 8px rgba(255,77,255,0.5);\r\n}\r\n\r\n\/* LIST *\/\r\n#rmu-news-blocks-widget ul{\r\n    margin:0;\r\n    padding:0;\r\n    list-style:none;\r\n\r\n    font-size:12px;\r\n    line-height:1.5;\r\n}\r\n\r\n#rmu-news-blocks-widget li{\r\n    margin-bottom:6px;\r\n\r\n    color:#cfe8ff;\r\n\r\n    text-shadow:0 0 4px rgba(0,255,255,0.15);\r\n}\r\n\r\n\/* RADIO BLOCK SPECIAL *\/\r\n#rmu-news-blocks-widget .block:nth-child(3){\r\n    border:1px solid rgba(0,255,255,0.25);\r\n}\r\n\r\n\/* MOBILE *\/\r\n@media(max-width:768px){\r\n    #rmu-news-blocks-widget .grid{\r\n        grid-template-columns:1fr;\r\n    }\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- NEWS BLOCKS -->\r\n<div class=\"grid\">\r\n\r\n    <div class=\"block\">\r\n        <div class=\"title\">\ud83d\udcf0 NOS Nieuws<\/div>\r\n        <ul id=\"news1\">\r\n            <li>laden...<\/li>\r\n        <\/ul>\r\n    <\/div>\r\n\r\n    <div class=\"block\">\r\n        <div class=\"title\">\ud83d\udd25 Laatste Updates<\/div>\r\n        <ul id=\"news2\">\r\n            <li>laden...<\/li>\r\n        <\/ul>\r\n    <\/div>\r\n\r\n    <div class=\"block\">\r\n        <div class=\"title\">\ud83e\udd84 Radiomagicunicorn<\/div>\r\n        <ul id=\"news3\">\r\n            <li>Nonstop 24\/7 muziek<\/li>\r\n            <li>Verzoeken welkom<\/li>\r\n            <li>Unicorn nonstop hits<\/li>\r\n        <\/ul>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n\r\n\/* NOS NEWS *\/\r\nasync function loadRMUNewsBlocks(){\r\n\r\n    try{\r\n\r\n        const rss = \"https:\/\/feeds.nos.nl\/nosnieuwsalgemeen\";\r\n        const api = \"https:\/\/api.rss2json.com\/v1\/api.json?rss_url=\";\r\n\r\n        const res = await fetch(api + encodeURIComponent(rss));\r\n        const data = await res.json();\r\n\r\n        let items = (data.items || []).slice(0,6);\r\n\r\n        let html1 = \"\";\r\n        let html2 = \"\";\r\n\r\n        items.forEach((item,i)=>{\r\n\r\n            if(i < 3){\r\n                html1 += \"<li>\ud83d\udcf0 \" + item.title + \"<\/li>\";\r\n            }else{\r\n                html2 += \"<li>\ud83d\udd25 \" + item.title + \"<\/li>\";\r\n            }\r\n        });\r\n\r\n        document.getElementById(\"news1\").innerHTML = html1;\r\n        document.getElementById(\"news2\").innerHTML = html2;\r\n\r\n    }catch{\r\n\r\n        document.getElementById(\"news1\").innerHTML =\r\n            \"<li>Nieuws tijdelijk offline<\/li>\";\r\n\r\n        document.getElementById(\"news2\").innerHTML =\r\n            \"<li>Probeer later opnieuw<\/li>\";\r\n    }\r\n}\r\n\r\nloadRMUNewsBlocks();\r\nsetInterval(loadRMUNewsBlocks, 300000);\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2e02c97 e-flex e-con-boxed e-con e-parent\" data-id=\"2e02c97\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aee511b elementor-widget elementor-widget-html\" data-id=\"aee511b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n#radioDockSafe{\r\n    all: initial;\r\n    position:fixed;\r\n    left:0;\r\n    bottom:0;\r\n    width:100%;\r\n    z-index:999999;\r\n\r\n    font-family: system-ui, sans-serif;\r\n    color:#fff;\r\n}\r\n\r\n\/* MAIN BAR *\/\r\n#radioDockSafe .dock{\r\n    position:relative;\r\n    background: rgba(18,0,36,0.78);\r\n    backdrop-filter: blur(14px);\r\n    -webkit-backdrop-filter: blur(14px);\r\n\r\n    border-top:1px solid rgba(255,79,216,0.25);\r\n\r\n    overflow:hidden;\r\n    width:100%;\r\n    max-width:100vw;\r\n\r\n    height:120px;\r\n    box-shadow: 0 -10px 30px rgba(0,0,0,0.35);\r\n\r\n    transition: height .2s ease;\r\n}\r\n\r\n\/* ===== FLOATING PARTICLES LAYER ===== *\/\r\n#radioDockSafe .particles{\r\n    position:absolute;\r\n    inset:0;\r\n    pointer-events:none;\r\n    overflow:hidden;\r\n}\r\n\r\n\/* particle base *\/\r\n#radioDockSafe .particle{\r\n    position:absolute;\r\n    bottom:-20px;\r\n\r\n    width:6px;\r\n    height:6px;\r\n    border-radius:50%;\r\n\r\n    background: rgba(0,255,204,0.25);\r\n    box-shadow: 0 0 10px rgba(0,255,204,0.3);\r\n\r\n    animation: floatUp linear infinite;\r\n}\r\n\r\n\/* different sizes *\/\r\n#radioDockSafe .particle.p2{\r\n    width:4px;\r\n    height:4px;\r\n    background: rgba(255,79,216,0.25);\r\n}\r\n\r\n#radioDockSafe .particle.p3{\r\n    width:8px;\r\n    height:8px;\r\n    opacity:0.15;\r\n}\r\n\r\n\/* animation *\/\r\n@keyframes floatUp{\r\n    0%{\r\n        transform: translateY(0);\r\n        opacity:0;\r\n    }\r\n    10%{\r\n        opacity:0.6;\r\n    }\r\n    100%{\r\n        transform: translateY(-140px);\r\n        opacity:0;\r\n    }\r\n}\r\n\r\n\/* HEADER *\/\r\n#radioDockSafe .head{\r\n    position:relative;\r\n    height:44px;\r\n    display:flex;\r\n    justify-content:space-between;\r\n    align-items:center;\r\n\r\n    padding:0 12px;\r\n    font-size:12px;\r\n    z-index:2;\r\n}\r\n\r\n#radioDockSafe .head span{\r\n    color:#00ffcc;\r\n    font-weight:600;\r\n}\r\n\r\n\/* BUTTON *\/\r\n#radioDockSafe .btn{\r\n    border:0;\r\n    cursor:pointer;\r\n\r\n    padding:6px 10px;\r\n    font-size:11px;\r\n    font-weight:700;\r\n\r\n    border-radius:8px;\r\n    color:#fff;\r\n    background: linear-gradient(135deg,#ff4fd8,#7a2cff);\r\n    z-index:2;\r\n}\r\n\r\n\/* CONTENT *\/\r\n#radioDockSafe .content{\r\n    position:relative;\r\n    z-index:2;\r\n\r\n    height:76px;\r\n    display:flex;\r\n    flex-direction:column;\r\n}\r\n\r\n\/* ticker *\/\r\n#radioDockSafe .ticker{\r\n    height:30px;\r\n    overflow:hidden;\r\n    display:flex;\r\n    align-items:center;\r\n    padding:0 10px;\r\n    border-bottom:1px solid rgba(255,255,255,0.08);\r\n}\r\n\r\n#radioDockSafe .track{\r\n    white-space:nowrap;\r\n    width:max-content;\r\n    display:inline-block;\r\n    animation: scroll 35s linear infinite;\r\n}\r\n\r\n#radioDockSafe .track a{\r\n    color:rgba(255,255,255,0.85);\r\n    text-decoration:none;\r\n    margin-right:20px;\r\n}\r\n\r\n@keyframes scroll{\r\n    0%{transform:translateX(0);}\r\n    100%{transform:translateX(-50%);}\r\n}\r\n\r\n\/* player *\/\r\n#radioDockSafe iframe{\r\n    width:100%;\r\n    height:100%;\r\n    border:0;\r\n}\r\n\r\n\/* closed *\/\r\n#radioDockSafe.closed .content{\r\n    display:none;\r\n}\r\n\r\n#radioDockSafe.closed .dock{\r\n    height:44px;\r\n}\r\n<\/style>\r\n\r\n<div id=\"radioDockSafe\" class=\"closed\">\r\n\r\n    <div class=\"dock\">\r\n\r\n        <!-- FLOATING LAYER -->\r\n        <div class=\"particles\" id=\"particles\"><\/div>\r\n\r\n        <div class=\"head\">\r\n            <div>\ud83c\udfa7 Radio <span id=\"listenersSafe\">0<\/span><\/div>\r\n            <button class=\"btn\" id=\"toggleBtn\">Open<\/button>\r\n        <\/div>\r\n\r\n        <div class=\"content\">\r\n\r\n            <div class=\"ticker\">\r\n                <div class=\"track\" id=\"tickerSafe\">laden...<\/div>\r\n            <\/div>\r\n\r\n            <iframe\r\n                src=\"https:\/\/chat4beat.nl\/players\/radiomagicunicorn\/\"\r\n                allow=\"autoplay\"\r\n                loading=\"lazy\">\r\n            <\/iframe>\r\n\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(() => {\r\n\r\n    const root = document.getElementById(\"radioDockSafe\");\r\n    const btn = document.getElementById(\"toggleBtn\");\r\n\r\n    btn.addEventListener(\"click\", () => {\r\n        root.classList.toggle(\"closed\");\r\n    });\r\n\r\n    \/* ===== PARTICLES SAFE GENERATOR ===== *\/\r\n    const container = document.getElementById(\"particles\");\r\n\r\n    function spawnParticles(){\r\n        if(!container) return;\r\n\r\n        const count = 12; \/\/ safe amount (WP friendly)\r\n\r\n        for(let i=0;i<count;i++){\r\n            const p = document.createElement(\"div\");\r\n\r\n            const type = Math.random();\r\n            p.className = \"particle \" +\r\n                (type > 0.66 ? \"p2\" : type > 0.33 ? \"p3\" : \"\");\r\n\r\n            p.style.left = Math.random()*100 + \"%\";\r\n            p.style.animationDuration = (6 + Math.random()*6) + \"s\";\r\n            p.style.animationDelay = Math.random()*5 + \"s\";\r\n\r\n            container.appendChild(p);\r\n        }\r\n    }\r\n\r\n    spawnParticles();\r\n\r\n    \/* NEWS SAFE *\/\r\n    async function loadNews(){\r\n        const el = document.getElementById(\"tickerSafe\");\r\n\r\n        try{\r\n            const url = \"https:\/\/api.allorigins.win\/raw?url=\" +\r\n                encodeURIComponent(\"https:\/\/feeds.nos.nl\/nosnieuwsalgemeen\");\r\n\r\n            const res = await fetch(url);\r\n            const xml = new DOMParser().parseFromString(await res.text(),\"text\/xml\");\r\n\r\n            const items = [...xml.querySelectorAll(\"item\")].slice(0,5);\r\n\r\n            el.innerHTML = items.map(i=>{\r\n                const t=i.querySelector(\"title\")?.textContent;\r\n                const l=i.querySelector(\"link\")?.textContent;\r\n                return `<a href=\"${l}\" target=\"_blank\" rel=\"noopener\">${t}<\/a>`;\r\n            }).join(\" \u2022 \");\r\n\r\n        }catch{\r\n            el.textContent = \"Nieuws niet beschikbaar\";\r\n        }\r\n    }\r\n\r\n    \/* LISTENERS SAFE *\/\r\n    async function loadListeners(){\r\n        const el = document.getElementById(\"listenersSafe\");\r\n\r\n        try{\r\n            const res = await fetch(\"https:\/\/radio.chat4beat.nl:8000\/status-json.xsl\");\r\n            const data = await res.json();\r\n\r\n            el.textContent = data?.icestats?.source?.listeners ?? 0;\r\n\r\n        }catch{\r\n            el.textContent = \"0\";\r\n        }\r\n    }\r\n\r\n    loadNews();\r\n    loadListeners();\r\n\r\n    setInterval(loadNews, 300000);\r\n    setInterval(loadListeners, 60000);\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e3dc2b8 e-flex e-con-boxed e-con e-parent\" data-id=\"e3dc2b8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83e\udd84 Radiomagicunicorn Laden\u2026 \u2026 \ud83d\udd34 ON AIR Nieuws laden\u2026 \ud83e\udd84 RADIO MAGIC UNICORN LIVE \u2022 ON AIR Radiomagicunicorn \u2022 Neon Cyber Station \u27f5 \u27f6 \ud83d\udcdc Onze Start We begonnen klein, maar met veel liefde voor radio. Elke dag maken we het leuker en beter voor jou als luisteraar. \ud83c\udfb6 Jij kiest mee Stuur een verzoekje [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/frontpage.php","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/radiomagicunicorn.nl\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/radiomagicunicorn.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/radiomagicunicorn.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/radiomagicunicorn.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/radiomagicunicorn.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":5,"href":"https:\/\/radiomagicunicorn.nl\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/radiomagicunicorn.nl\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/radiomagicunicorn.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}