{"id":5355,"date":"2025-07-02T11:46:31","date_gmt":"2025-07-02T11:46:31","guid":{"rendered":"http:\/\/valostones.com\/?page_id=5355"},"modified":"2025-07-02T11:46:33","modified_gmt":"2025-07-02T11:46:33","slug":"promotional-and-outreach-materials","status":"publish","type":"page","link":"http:\/\/valostones.com\/fr\/promotional-and-outreach-materials\/","title":{"rendered":"Promotional and Outreach materials"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"5355\" class=\"elementor elementor-5355\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1233ec4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1233ec4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-edb699e\" data-id=\"edb699e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-df35937 elementor-widget elementor-widget-html\" data-id=\"df35937\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        :root {\r\n            --primary-green: #00963f;\r\n            --primary-dark: #1d1d1b;\r\n            --accent-gold: #a09919;\r\n            --pure-white: #ffffff;\r\n            --light-gray: #f8f9fa;\r\n            --medium-gray: #e9ecef;\r\n            --text-gray: #6c757d;\r\n        }\r\n\r\n        body {\r\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n            line-height: 1.6;\r\n            color: var(--primary-dark);\r\n            background: linear-gradient(135deg, var(--light-gray) 0%, var(--pure-white) 100%);\r\n            min-height: 100vh;\r\n        }\r\n\r\n        .container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 20px;\r\n        }\r\n\r\n        .header {\r\n            background: var(--pure-white);\r\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\r\n            padding: 2rem 0;\r\n            margin-bottom: 3rem;\r\n        }\r\n\r\n        .hero {\r\n            text-align: center;\r\n            animation: fadeInUp 1s ease-out;\r\n        }\r\n\r\n        .hero h1 {\r\n            font-size: 3rem;\r\n            font-weight: 700;\r\n            color: var(--primary-dark);\r\n            margin-bottom: 1rem;\r\n            background: linear-gradient(135deg, var(--primary-green), var(--accent-gold));\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n        }\r\n\r\n        .hero p {\r\n            font-size: 1.2rem;\r\n            color: var(--text-gray);\r\n            max-width: 600px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .section {\r\n            background: var(--pure-white);\r\n            border-radius: 20px;\r\n            padding: 3rem;\r\n            margin-bottom: 2rem;\r\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n            backdrop-filter: blur(10px);\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n\r\n        .section:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\r\n        }\r\n\r\n        .section-title {\r\n            font-size: 2rem;\r\n            font-weight: 600;\r\n            color: var(--primary-dark);\r\n            margin-bottom: 2rem;\r\n            position: relative;\r\n            padding-bottom: 0.5rem;\r\n        }\r\n\r\n        .section-title::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 60px;\r\n            height: 4px;\r\n            background: linear-gradient(135deg, var(--primary-green), var(--accent-gold));\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .logo-showcase {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 2rem;\r\n            margin-bottom: 3rem;\r\n        }\r\n\r\n        .logo-variant {\r\n            background: var(--light-gray);\r\n            border-radius: 15px;\r\n            padding: 2rem;\r\n            text-align: center;\r\n            transition: all 0.3s ease;\r\n            border: 2px solid transparent;\r\n        }\r\n\r\n        .logo-variant:hover {\r\n            border-color: var(--primary-green);\r\n            background: var(--pure-white);\r\n            transform: scale(1.02);\r\n        }\r\n\r\n        .logo-variant h3 {\r\n            font-size: 1.1rem;\r\n            color: var(--primary-dark);\r\n            margin-bottom: 1rem;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .logo-container {\r\n            background: var(--pure-white);\r\n            padding: 2rem;\r\n            border-radius: 10px;\r\n            margin-bottom: 1rem;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            min-height: 120px;\r\n        }\r\n\r\n        .logo-image {\r\n            max-height: 120px;\r\n            max-width: 100%;\r\n            object-fit: contain;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .logo-image:hover {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        .color-palette {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n            gap: 1.5rem;\r\n            margin-bottom: 2rem;\r\n        }\r\n\r\n        .color-card {\r\n            background: var(--pure-white);\r\n            border-radius: 15px;\r\n            overflow: hidden;\r\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .color-card:hover {\r\n            transform: translateY(-3px);\r\n        }\r\n\r\n        .color-swatch {\r\n            height: 100px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .color-swatch:hover {\r\n            height: 120px;\r\n        }\r\n\r\n        .color-info {\r\n            padding: 1.5rem;\r\n        }\r\n\r\n        .color-name {\r\n            font-weight: 600;\r\n            color: var(--primary-dark);\r\n            margin-bottom: 0.5rem;\r\n        }\r\n\r\n        .color-hex {\r\n            font-family: 'Courier New', monospace;\r\n            color: var(--text-gray);\r\n            font-size: 0.9rem;\r\n            background: var(--light-gray);\r\n            padding: 0.3rem 0.6rem;\r\n            border-radius: 5px;\r\n            display: inline-block;\r\n        }\r\n\r\n        .typography-sample {\r\n            background: var(--light-gray);\r\n            padding: 2rem;\r\n            border-radius: 15px;\r\n            margin-bottom: 1.5rem;\r\n        }\r\n\r\n        .font-showcase h1, .font-showcase h2, .font-showcase h3 {\r\n            margin-bottom: 1rem;\r\n            color: var(--primary-dark);\r\n        }\r\n\r\n        .font-showcase h1 {\r\n            font-size: 2.5rem;\r\n            font-weight: 700;\r\n        }\r\n\r\n        .font-showcase h2 {\r\n            font-size: 2rem;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .font-showcase h3 {\r\n            font-size: 1.5rem;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .font-showcase p {\r\n            color: var(--text-gray);\r\n            line-height: 1.8;\r\n        }\r\n\r\n        .usage-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 1.5rem;\r\n        }\r\n\r\n        .usage-card {\r\n            background: linear-gradient(135deg, var(--primary-green), var(--accent-gold));\r\n            color: var(--pure-white);\r\n            padding: 2rem;\r\n            border-radius: 15px;\r\n            text-align: center;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .usage-card:hover {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        .usage-card h3 {\r\n            margin-bottom: 1rem;\r\n            font-size: 1.3rem;\r\n        }\r\n\r\n        .usage-card p {\r\n            opacity: 0.9;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        @keyframes fadeInUp {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(30px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        @keyframes rotate {\r\n            from {\r\n                transform: rotate(0deg);\r\n            }\r\n            to {\r\n                transform: rotate(360deg);\r\n            }\r\n        }\r\n\r\n        .interactive-demo {\r\n            background: var(--primary-dark);\r\n            color: var(--pure-white);\r\n            padding: 3rem;\r\n            border-radius: 20px;\r\n            text-align: center;\r\n            margin-top: 2rem;\r\n        }\r\n\r\n        .demo-logo {\r\n            margin-bottom: 2rem;\r\n            filter: drop-shadow(0 0 20px rgba(0, 150, 63, 0.5));\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .hero h1 {\r\n                font-size: 2rem;\r\n            }\r\n            \r\n            .section {\r\n                padding: 2rem;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <main class=\"container\">\r\n        <section class=\"section\">\r\n            <h2 class=\"section-title\">Logo Variations<\/h2>\r\n            <div class=\"logo-showcase\">\r\n                <div class=\"logo-variant\">\r\n                    <h3>Primary Logo (Stacked)<\/h3>\r\n                    <div class=\"logo-container\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/logo-valostones-2-.jpg\" \r\n                             alt=\"VAL Stones Logo - Stacked Version\" \r\n                             class=\"logo-image\">\r\n                    <\/div>\r\n                 \r\n                <\/div>\r\n\r\n                <div class=\"logo-variant\">\r\n                    <h3>Horizontal Logo<\/h3>\r\n                    <div class=\"logo-container\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/logo-ValoStones-1.jpg\" \r\n                             alt=\"VAL Stones Logo - Horizontal Version\" \r\n                             class=\"logo-image\">\r\n                    <\/div>\r\n                   \r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n        <section class=\"section\">\r\n            <h2 class=\"section-title\">Color Palette<\/h2>\r\n            <div class=\"color-palette\">\r\n                <div class=\"color-card\">\r\n                    <div class=\"color-swatch\" style=\"background-color: #00963f;\"><\/div>\r\n                    <div class=\"color-info\">\r\n                        <div class=\"color-name\">Primary Green<\/div>\r\n                        <div class=\"color-hex\">#00963f<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"color-card\">\r\n                    <div class=\"color-swatch\" style=\"background-color: #1d1d1b;\"><\/div>\r\n                    <div class=\"color-info\">\r\n                        <div class=\"color-name\">Primary Dark<\/div>\r\n                        <div class=\"color-hex\">#1d1d1b<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"color-card\">\r\n                    <div class=\"color-swatch\" style=\"background-color: #a09919;\"><\/div>\r\n                    <div class=\"color-info\">\r\n                        <div class=\"color-name\">Accent Gold<\/div>\r\n                        <div class=\"color-hex\">#a09919<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n           <section class=\"section\">\r\n            <h2 class=\"section-title\">Branded Materials<\/h2>\r\n            <div class=\"logo-showcase\">\r\n                <div class=\"logo-variant\">\r\n                    <h3>Letterhead<\/h3>\r\n                    <div class=\"logo-container\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/PAPIER-ENTETE-1.jpg\" \r\n                             alt=\"VAL Stones Letterhead Design\" \r\n                             class=\"logo-image\">\r\n                    <\/div>\r\n                    <p style=\"color: var(--text-gray); font-size: 0.9rem; line-height: 1.5;\">\r\n                        Official letterhead featuring the VALOStones branding for formal correspondence and business communications.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"logo-variant\">\r\n                    <h3>Business Card<\/h3>\r\n                    <div class=\"logo-container\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/CARTE-DE-VISITE.jpg\" \r\n                             alt=\"VAL Stones Business Card Design\" \r\n                             class=\"logo-image\">\r\n                    <\/div>\r\n                    <p style=\"color: var(--text-gray); font-size: 0.9rem; line-height: 1.5;\">\r\n                        Professional business cards incorporating the brand identity for networking and client interactions.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"logo-variant\">\r\n                    <h3>Notepad<\/h3>\r\n                    <div class=\"logo-container\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/BLOC-NOTE.jpg\" \r\n                             alt=\"VAL Stones Notepad Design\" \r\n                             class=\"logo-image\">\r\n                    <\/div>\r\n                    <p style=\"color: var(--text-gray); font-size: 0.9rem; line-height: 1.5;\">\r\n                        Branded notepad design for internal use and client meetings, maintaining consistent visual identity.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"logo-variant\">\r\n                    <h3>BADGE - ID Badge<\/h3>\r\n                    <div class=\"logo-container\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/BADGE.jpg\" \r\n                             alt=\"VAL Stones ID Badge Design\" \r\n                             class=\"logo-image\">\r\n                    <\/div>\r\n                    <p style=\"color: var(--text-gray); font-size: 0.9rem; line-height: 1.5;\">\r\n                         Identification badge design for professional staff identification.\r\n                    <\/p>\r\n                <\/div>\r\n                 <div class=\"logo-variant\">\r\n                    <h3>Banner<\/h3>\r\n                    <div class=\"logo-container\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/baniere-homepage--scaled.jpg\" \r\n                             alt=\"VAL Stones Banner Design\" \r\n                             class=\"logo-image\">\r\n                    <\/div>\r\n                    <p style=\"color: var(--text-gray); font-size: 0.9rem; line-height: 1.5;\">\r\n                        Large format banner design for events, trade shows, and promotional displays featuring brand elements.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"logo-variant\">\r\n                    <h3>Roll Up Display<\/h3>\r\n                    <div class=\"logo-container\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/roll-up-VALOstones.jpg\" \r\n                             alt=\"VAL Stones Roll Up Display\" \r\n                             class=\"logo-image\">\r\n                    <\/div>\r\n                    <p style=\"color: var(--text-gray); font-size: 0.9rem; line-height: 1.5;\">\r\n                        Portable roll-up banner display for exhibitions, presentations, and marketing events.\r\n                    <\/p>\r\n                <\/div>\r\n                <div class=\"logo-variant\">\r\n                    <h3>Leaflet<\/h3>\r\n                    <div class=\"logo-container\" style=\"display: flex; gap: 1rem; align-items: center; justify-content: center;\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/depliant-face-1.jpg\" \r\n                             alt=\"VAL Stones Leaflet - Front\" \r\n                             class=\"logo-image\" style=\"max-height: 100px; flex: 1;\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/depliant-face-2.jpg\" \r\n                             alt=\"VAL Stones Leaflet - Back\" \r\n                             class=\"logo-image\" style=\"max-height: 100px; flex: 1;\">\r\n                    <\/div>\r\n                    <p style=\"color: var(--text-gray); font-size: 0.9rem; line-height: 1.5;\">\r\n                        Tri-fold marketing leaflet showcasing VALOStones services and information.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"logo-variant\">\r\n                    <h3>Canvas Bag<\/h3>\r\n                    <div class=\"logo-container\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/SAC-TOILE.jpg\" \r\n                             alt=\"VAL Stones Canvas Bag\" \r\n                             class=\"logo-image\">\r\n                    <\/div>\r\n                    <p style=\"color: var(--text-gray); font-size: 0.9rem; line-height: 1.5;\">\r\n                        Eco-friendly canvas tote bag featuring the VALOStones branding for promotional and retail purposes.\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <div class=\"logo-variant\">\r\n                    <h3>Cardboard Bag<\/h3>\r\n                    <div class=\"logo-container\">\r\n                        <img decoding=\"async\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2025\/07\/SAC-carton.jpg\" \r\n                             alt=\"VAL Stones Cardboard Bag\" \r\n                             class=\"logo-image\">\r\n                    <\/div>\r\n                    <p style=\"color: var(--text-gray); font-size: 0.9rem; line-height: 1.5;\">\r\n                        Branded cardboard bag design for retail packaging.\r\n                    <\/p>\r\n                <\/div>\r\n                \r\n                \r\n            \r\n            <\/div>\r\n        <\/section>\r\n        \r\n        <section class=\"section\">\r\n            <h2 class=\"section-title\">Promotional Video<\/h2>\r\n            <div style=\"text-align: center; margin-bottom: 2rem;\">\r\n                <p style=\"font-size: 1.1rem; color: var(--text-gray); max-width: 800px; margin: 0 auto 2rem;\">\r\n                    A short promotional video (Instagram Reel) was published to dynamically present the project's objectives and sustainable innovation approach.\r\n                <\/p>\r\n            <\/div>\r\n            \r\n            <div style=\"display: flex; justify-content: center; margin-bottom: 2rem;\">\r\n                <div style=\"background: var(--pure-white); padding: 2rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-width: 500px; width: 100%;\">\r\n                    <h3 style=\"text-align: center; margin-bottom: 1.5rem; color: var(--primary-dark); font-size: 1.3rem;\">VALOstones Instagram Reel<\/h3>\r\n                    \r\n                    <!-- Instagram Embed -->\r\n                    <div style=\"position: relative; width: 100%; height: 600px; border-radius: 15px; overflow: hidden; background: var(--light-gray); display: flex; align-items: center; justify-content: center;\">\r\n                        <iframe loading=\"lazy\" src=\"https:\/\/www.instagram.com\/reel\/DI052x-qHKW\/embed\/\" \r\n                                width=\"100%\" \r\n                                height=\"100%\" \r\n                                frameborder=\"0\" \r\n                                scrolling=\"no\" \r\n                                allowtransparency=\"true\"\r\n                                style=\"border-radius: 15px;\">\r\n                        <\/iframe>\r\n                    <\/div>\r\n                    \r\n                    <!-- Fallback link in case embed doesn't work -->\r\n                    <div style=\"text-align: center; margin-top: 1rem;\">\r\n                        <a href=\"https:\/\/www.instagram.com\/reel\/DI052x-qHKW\/?igsh=MXQwNGQzOXU3cHhnYw%3D%3D\" \r\n                           target=\"_blank\" \r\n                           style=\"display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, var(--primary-green), var(--accent-gold)); color: var(--pure-white); padding: 0.8rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease;\"\r\n                           onmouseover=\"this.style.transform='scale(1.05)'\"\r\n                           onmouseout=\"this.style.transform='scale(1)'\">\r\n                            \ud83d\udcf1 View on Instagram\r\n                        <\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n          \r\n        <\/section>\r\n        \r\n           <section class=\"section\">\r\n            <h2 class=\"section-title\">Media Coverage<\/h2>\r\n            <div style=\"text-align: center; margin-bottom: 2rem;\">\r\n                <p style=\"font-size: 1.1rem; color: var(--text-gray); max-width: 800px; margin: 0 auto 2rem;\">\r\n                    Media coverage of the VALOstones Kick-Off Meeting was shared via national Tunisian television and radio, highlighting the project's significance and impact.\r\n                <\/p>\r\n            <\/div>\r\n            \r\n            <div style=\"display: flex; justify-content: center; margin-bottom: 2rem;\">\r\n                <div style=\"background: var(--pure-white); padding: 2rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-width: 600px; width: 100%;\">\r\n                    <h3 style=\"text-align: center; margin-bottom: 1.5rem; color: var(--primary-dark); font-size: 1.3rem;\">VALOstones Kick-Off Meeting Coverage<\/h3>\r\n                    \r\n                    <!-- Facebook Video Embed -->\r\n                    <div style=\"position: relative; width: 100%; height: 400px; border-radius: 15px; overflow: hidden; background: var(--light-gray); display: flex; align-items: center; justify-content: center;\">\r\n                        <iframe loading=\"lazy\" src=\"https:\/\/www.facebook.com\/plugins\/video.php?height=400&href=https%3A%2F%2Fwww.facebook.com%2F100005398667573%2Fvideos%2F890998242369232%2F&show_text=false&width=560&t=0\" \r\n                                width=\"100%\" \r\n                                height=\"100%\" \r\n                                style=\"border:none;overflow:hidden;border-radius:15px;\" \r\n                                scrolling=\"no\" \r\n                                frameborder=\"0\" \r\n                                allowfullscreen=\"true\" \r\n                                allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\">\r\n                        <\/iframe>\r\n                    <\/div>\r\n                    \r\n                    <!-- Fallback link in case embed doesn't work -->\r\n                    <div style=\"text-align: center; margin-top: 1rem;\">\r\n                        <a href=\"https:\/\/www.facebook.com\/100005398667573\/videos\/890998242369232\" \r\n                           target=\"_blank\" \r\n                           style=\"display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #1877f2, #42a5f5); color: var(--pure-white); padding: 0.8rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease;\"\r\n                           onmouseover=\"this.style.transform='scale(1.05)'\"\r\n                           onmouseout=\"this.style.transform='scale(1)'\">\r\n                            \ud83d\udcfa Watch on Facebook\r\n                        <\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Radio Interview Section -->\r\n            <div style=\"display: flex; justify-content: center; margin-bottom: 2rem;\">\r\n                <div style=\"background: var(--pure-white); padding: 2rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-width: 600px; width: 100%;\">\r\n                    <h3 style=\"text-align: center; margin-bottom: 1.5rem; color: var(--primary-dark); font-size: 1.3rem;\">RAI Radio Interview<\/h3>\r\n                    <p style=\"text-align: center; color: var(--text-gray); margin-bottom: 1.5rem; font-size: 0.95rem;\">\r\n                        Interview about VALOstones broadcast on Italian Regional Radio<br>\r\n                        <strong>November 19, 2023<\/strong>\r\n                    <\/p>\r\n                    \r\n                    <!-- Audio Player Container -->\r\n                    <div style=\"position: relative; width: 100%; min-height: 200px; border-radius: 15px; overflow: hidden; background: linear-gradient(135deg, #f8f9fa, #e9ecef); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed var(--primary-green);\">\r\n                        <!-- Audio Icon -->\r\n                        <div style=\"font-size: 4rem; color: var(--primary-green); margin-bottom: 1rem;\">\ud83c\udf99\ufe0f<\/div>\r\n                        <h4 style=\"color: var(--primary-dark); margin-bottom: 0.5rem; text-align: center;\">RAI Radio TGR FVG<\/h4>\r\n                        <p style=\"color: var(--text-gray); font-size: 0.9rem; text-align: center; margin-bottom: 1.5rem;\">Audio Interview - November 19, 2023<\/p>\r\n                        \r\n                        <!-- Try to embed RAI audio -->\r\n                      \r\n                    <\/div>\r\n                    \r\n                    <!-- Listen Link -->\r\n                    <div style=\"text-align: center; margin-top: 1rem;\">\r\n                        <a href=\"https:\/\/www.rainews.it\/tgr\/fvg\/audio\/2023\/11\/puntata-del-19-novembre-5f73a27e-6dd9-4d7b-9c51-e8ba1a004610.html\" \r\n                           target=\"_blank\" \r\n                           style=\"display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, var(--primary-green), var(--accent-gold)); color: var(--pure-white); padding: 0.8rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease;\"\r\n                           onmouseover=\"this.style.transform='scale(1.05)'\"\r\n                           onmouseout=\"this.style.transform='scale(1)'\">\r\n                            \ud83c\udfa7 Listen on RAI Radio\r\n                        <\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n         \r\n        <\/section>\r\n        \r\n         <section class=\"section\">\r\n            <h2 class=\"section-title\">University Announcements<\/h2>\r\n            \r\n            <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-bottom: 2rem;\">\r\n                \r\n                <!-- University of Gab\u00e8s -->\r\n                <div style=\"background: var(--pure-white); border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; display: flex; flex-direction: column; justify-content: space-between;\" onmouseover=\"this.style.transform='translateY(-5px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n                    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;\">\r\n                        <div style=\"font-size: 2.5rem;\">\ud83c\uddf9\ud83c\uddf3<\/div>\r\n                        <div>\r\n                            <h3 style=\"color: var(--primary-dark); font-size: 1.3rem; margin-bottom: 0.3rem;\">Universit\u00e9 de Gabes<\/h3>\r\n                            <p style=\"color: var(--text-gray); font-size: 0.9rem;\">Facebook Page<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/www.facebook.com\/100064545495882\/posts\/716313110530199\/?rdid=Xo5mQ32sKA\" \r\n                       target=\"_blank\" \r\n                       style=\"display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #1877f2, #42a5f5); color: var(--pure-white); padding: 0.8rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease; align-self: flex-start;\"\r\n                       onmouseover=\"this.style.transform='scale(1.05)'\"\r\n                       onmouseout=\"this.style.transform='scale(1)'\">\r\n                        \ud83d\udcd8 View Facebook Post\r\n                    <\/a>\r\n                <\/div>\r\n\r\n                <!-- University of Montpellier -->\r\n                <div style=\"background: var(--pure-white); border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; display: flex; flex-direction: column; justify-content: space-between;\" onmouseover=\"this.style.transform='translateY(-5px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n                    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;\">\r\n                        <div style=\"font-size: 2.5rem;\">\ud83c\uddeb\ud83c\uddf7<\/div>\r\n                        <div>\r\n                            <h3 style=\"color: var(--primary-dark); font-size: 1.3rem; margin-bottom: 0.3rem;\">University of Montpellier<\/h3>\r\n                            <p style=\"color: var(--text-gray); font-size: 0.9rem;\">Official Announcement<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/iem.umontpellier.fr\/28-9-2023-reunion-de-lancement-du-projet-europeen-prima-2\/?fbclid=IwZXh0bgNhZW0CMTAAAR1qp9eeWObNwSmgLFwBW-NxoRUtv1Ul78kg05-K1D3lYy5BVxI3I6tYNxE_aem_p-Li8uJb9yxC3uS13OZ6tw\" \r\n                       target=\"_blank\" \r\n                       style=\"display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, var(--primary-green), var(--accent-gold)); color: var(--pure-white); padding: 0.8rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease; align-self: flex-start;\"\r\n                       onmouseover=\"this.style.transform='scale(1.05)'\"\r\n                       onmouseout=\"this.style.transform='scale(1)'\">\r\n                        \ud83c\udfdb\ufe0f Read Announcement\r\n                    <\/a>\r\n                <\/div>\r\n\r\n                <!-- University of Udine - News -->\r\n                <div style=\"background: var(--pure-white); border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; display: flex; flex-direction: column; justify-content: space-between;\" onmouseover=\"this.style.transform='translateY(-5px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n                    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;\">\r\n                        <div style=\"font-size: 2.5rem;\">\ud83c\uddee\ud83c\uddf9<\/div>\r\n                        <div>\r\n                            <h3 style=\"color: var(--primary-dark); font-size: 1.3rem; margin-bottom: 0.3rem;\">University of Udine<\/h3>\r\n                            <p style=\"color: var(--text-gray); font-size: 0.9rem;\">Research News<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/qui.uniud.it\/ricerca-e-innovazione\/dai-noccioli-delle-olive-le-applicazioni-per-i-settori-alimentare-farmaceutico-e-cosmetico\/\" \r\n                       target=\"_blank\" \r\n                       style=\"display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, var(--primary-green), var(--accent-gold)); color: var(--pure-white); padding: 0.8rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease; align-self: flex-start;\"\r\n                       onmouseover=\"this.style.transform='scale(1.05)'\"\r\n                       onmouseout=\"this.style.transform='scale(1)'\">\r\n                        \ud83d\udcf0 Read News Article\r\n                    <\/a>\r\n                <\/div>\r\n\r\n                <!-- University of Udine - Project Page -->\r\n                <div style=\"background: var(--pure-white); border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; display: flex; flex-direction: column; justify-content: space-between;\" onmouseover=\"this.style.transform='translateY(-5px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n                    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;\">\r\n                        <div style=\"font-size: 2.5rem;\">\ud83c\udf93<\/div>\r\n                        <div>\r\n                            <h3 style=\"color: var(--primary-dark); font-size: 1.3rem; margin-bottom: 0.3rem;\">University of Udine<\/h3>\r\n                            <p style=\"color: var(--text-gray); font-size: 0.9rem;\">VALOstones Project Page<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/www.uniud.it\/it\/ricerca\/progetti-e-iniziative\/progetti-finanziati\/valostones\" \r\n                       target=\"_blank\" \r\n                       style=\"display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, var(--primary-green), var(--accent-gold)); color: var(--pure-white); padding: 0.8rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease; align-self: flex-start;\"\r\n                       onmouseover=\"this.style.transform='scale(1.05)'\"\r\n                       onmouseout=\"this.style.transform='scale(1)'\">\r\n                        \ud83d\udd2c View Project Page\r\n                    <\/a>\r\n                <\/div>\r\n\r\n                <!-- University of Udine - Twitter\/X -->\r\n                <div style=\"background: var(--pure-white); border-radius: 20px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; display: flex; flex-direction: column; justify-content: space-between;\" onmouseover=\"this.style.transform='translateY(-5px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\r\n                    <div style=\"display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;\">\r\n                        <div style=\"font-size: 2.5rem;\">\ud83d\udc26<\/div>\r\n                        <div>\r\n                            <h3 style=\"color: var(--primary-dark); font-size: 1.3rem; margin-bottom: 0.3rem;\">University of Udine<\/h3>\r\n                            <p style=\"color: var(--text-gray); font-size: 0.9rem;\">Twitter\/X Post<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <a href=\"https:\/\/x.com\/uniud\/status\/1729846643174916167?mx=2\" \r\n                       target=\"_blank\" \r\n                       style=\"display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #1da1f2, #0d8bd9); color: var(--pure-white); padding: 0.8rem 1.5rem; border-radius: 25px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease; align-self: flex-start;\"\r\n                       onmouseover=\"this.style.transform='scale(1.05)'\"\r\n                       onmouseout=\"this.style.transform='scale(1)'\">\r\n                        \ud83d\udc26 View on X\/Twitter\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n\r\n          \r\n        <\/section>\r\n\r\n\r\n\r\n\r\n    <\/main>\r\n\r\n    <script>\r\n        \/\/ Add interactive color copying\r\n        document.querySelectorAll('.color-hex').forEach(element => {\r\n            element.addEventListener('click', function() {\r\n                const colorCode = this.textContent;\r\n                navigator.clipboard.writeText(colorCode).then(() => {\r\n                    const original = this.textContent;\r\n                    this.textContent = 'Copied!';\r\n                    setTimeout(() => {\r\n                        this.textContent = original;\r\n                    }, 1000);\r\n                });\r\n            });\r\n        });\r\n\r\n        \/\/ Smooth animations on scroll\r\n        const observerOptions = {\r\n            threshold: 0.1,\r\n            rootMargin: '0px 0px -50px 0px'\r\n        };\r\n\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.style.animation = 'fadeInUp 0.8s ease-out';\r\n                }\r\n            });\r\n        }, observerOptions);\r\n\r\n        document.querySelectorAll('.section').forEach(section => {\r\n            observer.observe(section);\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Logo Variations Primary Logo (Stacked) Horizontal Logo Color Palette Primary Green #00963f Primary Dark #1d1d1b Accent Gold #a09919 Branded Materials Letterhead Official letterhead featuring the VALOStones branding for formal correspondence &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"http:\/\/valostones.com\/fr\/promotional-and-outreach-materials\/\"> <span class=\"screen-reader-text\">Promotional and Outreach materials<\/span> Lire la suite\u00a0\u00bb<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_piecal_is_event":false,"_piecal_start_date":"","_piecal_end_date":"","_piecal_is_allday":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-5355","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/comments?post=5355"}],"version-history":[{"count":72,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5355\/revisions"}],"predecessor-version":[{"id":5439,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5355\/revisions\/5439"}],"wp:attachment":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/media?parent=5355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}