{"id":22,"date":"2026-06-04T01:02:55","date_gmt":"2026-06-04T01:02:55","guid":{"rendered":"https:\/\/ampustica.elvetrina.tn\/?page_id=22"},"modified":"2026-06-04T02:13:29","modified_gmt":"2026-06-04T02:13:29","slug":"home","status":"publish","type":"page","link":"https:\/\/ampustica.elvetrina.tn\/","title":{"rendered":"Ampustica"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"22\" class=\"elementor elementor-22\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13c2a5f e-con e-atomic-element e-flexbox-base e-6fc9175 \" data-id=\"13c2a5f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"13c2a5f\">\n    \t\t<div class=\"elementor-element elementor-element-fa5610f elementor-widget elementor-widget-html\" data-id=\"fa5610f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* Hero Section Container *\/\r\n    .modern-hero {\r\n        position: relative;\r\n        width: 100%;\r\n        min-height: 100vh;\r\n        display: flex;\r\n        align-items: flex-end; \/* Aligns content to the bottom *\/\r\n        justify-content: flex-end; \/* Aligns content to the right *\/\r\n        padding: 5% 8%; \/* Spacing from the edges *\/\r\n        overflow: hidden;\r\n        background-color: #111;\r\n    }\r\n\r\n    \/* Background Slider *\/\r\n    .hero-slide {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        opacity: 0;\r\n        z-index: 1;\r\n        transition: opacity 1.5s ease-in-out;\r\n    }\r\n\r\n    .hero-slide-bg {\r\n        width: 100%;\r\n        height: 100%;\r\n        background-size: cover;\r\n        background-position: center;\r\n        transform: scale(1);\r\n        transition: transform 8s linear; \/* Smooth, slow zoom *\/\r\n    }\r\n\r\n    .hero-slide.active { opacity: 1; }\r\n    .hero-slide.active .hero-slide-bg { transform: scale(1.12); }\r\n\r\n    \/* Smart Gradient Overlay *\/\r\n    .hero-gradient-overlay {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        \/* Dark at top for header, dark at bottom right for text, clear in middle *\/\r\n        background: radial-gradient(circle at 70% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);\r\n        z-index: 2;\r\n    }\r\n\r\n    \/* GIANT Editorial Background Text (Like the \"INSIDER\" example) *\/\r\n    .giant-bg-text {\r\n        position: absolute;\r\n        top: 18%; \/* Sits right below the header *\/\r\n        left: 4%;\r\n        font-family: 'Playfair Display', 'Times New Roman', serif; \/* Elegant serif *\/\r\n        font-size: 14vw; \/* Scales with screen size *\/\r\n        font-weight: 400;\r\n        color: rgba(255, 255, 255, 0.85);\r\n        z-index: 3;\r\n        line-height: 1;\r\n        letter-spacing: -2px;\r\n        pointer-events: none; \/* Stops it from blocking clicks *\/\r\n        text-shadow: 0 10px 30px rgba(0,0,0,0.3);\r\n    }\r\n\r\n    \/* The Sleek Glass Text Card (Bottom Right) *\/\r\n    .hero-content {\r\n        position: relative;\r\n        z-index: 4;\r\n        max-width: 550px;\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n        animation: fadeUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\r\n        animation-delay: 0.5s;\r\n        margin-bottom: 40px; \/* Space for the slider dots below *\/\r\n    }\r\n\r\n    @keyframes fadeUp {\r\n        to { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    .glass-text-box {\r\n        background: rgba(0, 0, 0, 0.4); \/* Darker glass for better contrast *\/\r\n        backdrop-filter: blur(20px); \/* Heavy blur as requested *\/\r\n        -webkit-backdrop-filter: blur(20px);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 40px;\r\n        border-radius: 12px;\r\n        box-shadow: 0 20px 40px rgba(0,0,0,0.4);\r\n    }\r\n\r\n    .glass-text-box h2 {\r\n        font-family: 'Playfair Display', 'Times New Roman', serif;\r\n        font-size: 2.5rem;\r\n        font-weight: 500;\r\n        margin-bottom: 15px;\r\n        color: #ffffff;\r\n    }\r\n\r\n    .glass-text-box p {\r\n        font-family: 'Inter', 'Helvetica Neue', sans-serif;\r\n        font-size: 1.05rem;\r\n        line-height: 1.6;\r\n        font-weight: 300;\r\n        color: rgba(255, 255, 255, 0.85);\r\n        margin-bottom: 25px;\r\n    }\r\n\r\n    \/* Slider Navigation Dots *\/\r\n    .slider-nav {\r\n        position: absolute;\r\n        bottom: 30px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: flex;\r\n        gap: 12px;\r\n        z-index: 5;\r\n    }\r\n\r\n    .slider-dot {\r\n        width: 12px;\r\n        height: 12px;\r\n        border-radius: 50%;\r\n        background: rgba(255, 255, 255, 0.3);\r\n        border: 1px solid rgba(255,255,255,0.5);\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .slider-dot:hover {\r\n        background: rgba(255, 255, 255, 0.7);\r\n    }\r\n\r\n    .slider-dot.active {\r\n        background: #ffffff;\r\n        transform: scale(1.3);\r\n        border-color: #ffffff;\r\n    }\r\n\r\n    \/* Modern Button *\/\r\n    .hero-btn {\r\n        display: inline-block;\r\n        padding: 12px 28px;\r\n        background: transparent;\r\n        color: #ffffff;\r\n        text-decoration: none;\r\n        border: 1px solid #ffffff;\r\n        border-radius: 30px;\r\n        font-size: 13px;\r\n        font-weight: 500;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .hero-btn:hover {\r\n        background: #ffffff;\r\n        color: #111;\r\n    }\r\n\r\n    \/* Mobile Adjustments *\/\r\n    @media (max-width: 768px) {\r\n        .modern-hero {\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 20px;\r\n        }\r\n        .giant-bg-text {\r\n            top: 15%;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            font-size: 22vw;\r\n        }\r\n        .hero-content {\r\n            margin-bottom: 0;\r\n            text-align: center;\r\n        }\r\n        .glass-text-box {\r\n            padding: 25px 20px;\r\n            background: rgba(0, 0, 0, 0.5);\r\n        }\r\n        .slider-nav {\r\n            bottom: 20px;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"modern-hero\">\r\n    \r\n    <div id=\"hero-slider-container\">\r\n        <div class=\"hero-slide active\">\r\n            <div class=\"hero-slide-bg\" style=\"background-image: url('https:\/\/ampustica.elvetrina.tn\/wp-content\/uploads\/2026\/06\/02.jpg');\"><\/div>\r\n        <\/div>\r\n        <div class=\"hero-slide\">\r\n            <div class=\"hero-slide-bg\" style=\"background-image: url('https:\/\/ampustica.elvetrina.tn\/wp-content\/uploads\/2026\/06\/05.jpg');\"><\/div>\r\n        <\/div>\r\n        <div class=\"hero-slide\">\r\n            <div class=\"hero-slide-bg\" style=\"background-image: url('https:\/\/ampustica.elvetrina.tn\/wp-content\/uploads\/2026\/06\/06.jpg');\"><\/div>\r\n        <\/div>\r\n        <div class=\"hero-slide\">\r\n            <div class=\"hero-slide-bg\" style=\"background-image: url('https:\/\/ampustica.elvetrina.tn\/wp-content\/uploads\/2026\/06\/07.jpg');\"><\/div>\r\n        <\/div>\r\n        <div class=\"hero-slide\">\r\n            <div class=\"hero-slide-bg\" style=\"background-image: url('https:\/\/ampustica.elvetrina.tn\/wp-content\/uploads\/2026\/06\/08.jpg');\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"hero-gradient-overlay\"><\/div>\r\n\r\n    <div class=\"giant-bg-text\">USTICA<\/div>\r\n\r\n    <div class=\"hero-content\">\r\n        <div class=\"glass-text-box\">\r\n            <h2>Benvenuto<\/h2>\r\n            <p>Istituita nel novembre del 1986, l\u2019Area Marina Protetta di Ustica si estende per oltre 15,000 ettari. Paradiso di subacquei e amanti del mare, l\u2019AMP lavora insieme alla comunit\u00e0 locale per tutelare e gestire l\u2019ambiente marino e il territorio.<\/p>\r\n            <a href=\"#scopri\" class=\"hero-btn\">Scopri l'Area<\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"slider-nav\" id=\"slider-dots\">\r\n        <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const slides = document.querySelectorAll('.hero-slide');\r\n        const dotsContainer = document.getElementById('slider-dots');\r\n        let currentSlide = 0;\r\n        let slideInterval;\r\n        const timeDelay = 6000;\r\n\r\n        if(slides.length > 1) {\r\n            \/\/ 1. Create the dots based on how many images you have\r\n            slides.forEach((_, index) => {\r\n                const dot = document.createElement('div');\r\n                dot.classList.add('slider-dot');\r\n                if(index === 0) dot.classList.add('active');\r\n                \r\n                \/\/ Add click event to each dot\r\n                dot.addEventListener('click', () => {\r\n                    goToSlide(index);\r\n                    resetInterval(); \/\/ Restart the timer if user clicks manually\r\n                });\r\n                dotsContainer.appendChild(dot);\r\n            });\r\n\r\n            const dots = document.querySelectorAll('.slider-dot');\r\n\r\n            \/\/ 2. Function to change slides\r\n            function goToSlide(index) {\r\n                \/\/ Remove active classes\r\n                slides[currentSlide].classList.remove('active');\r\n                dots[currentSlide].classList.remove('active');\r\n                \r\n                \/\/ Update current slide index\r\n                currentSlide = index;\r\n                \r\n                \/\/ Add active classes to new slide\r\n                slides[currentSlide].classList.add('active');\r\n                dots[currentSlide].classList.add('active');\r\n            }\r\n\r\n            \/\/ 3. Function to automatically go to the next slide\r\n            function nextSlide() {\r\n                let nextIndex = (currentSlide + 1) % slides.length;\r\n                goToSlide(nextIndex);\r\n            }\r\n\r\n            \/\/ 4. Timer Logic\r\n            function startInterval() {\r\n                slideInterval = setInterval(nextSlide, timeDelay);\r\n            }\r\n\r\n            function resetInterval() {\r\n                clearInterval(slideInterval);\r\n                startInterval();\r\n            }\r\n\r\n            \/\/ Start the auto-slider\r\n            startInterval();\r\n        }\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-e8fe743 e-con e-atomic-element e-flexbox-base e-933e9c1 \" data-id=\"e8fe743\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e8fe743\">\n    \t\t<div class=\"elementor-element elementor-element-56be05b elementor-widget elementor-widget-html\" data-id=\"56be05b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* Section Wrapper *\/\r\n    .expanding-subhero {\r\n        padding: 100px 5%;\r\n        background-color: #0f1115; \r\n        font-family: 'Inter', 'Helvetica Neue', sans-serif;\r\n        display: flex;\r\n        justify-content: center;\r\n    }\r\n\r\n    \/* Flex Container *\/\r\n    .expanding-container {\r\n        display: flex;\r\n        flex-direction: row;\r\n        width: 100%;\r\n        max-width: 1300px;\r\n        height: 550px; \r\n        gap: 15px;\r\n    }\r\n\r\n    \/* Individual Card Panel *\/\r\n    .expand-panel {\r\n        background-size: cover;\r\n        background-position: center;\r\n        background-repeat: no-repeat;\r\n        border-radius: 40px; \r\n        cursor: pointer;\r\n        flex: 1; \r\n        position: relative;\r\n        overflow: hidden;\r\n        transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n        color: #ffffff !important;\r\n        text-decoration: none !important;\r\n    }\r\n\r\n    \/* Hover State: The Expansion *\/\r\n    .expand-panel:hover, .expand-panel:focus {\r\n        flex: 4; \r\n        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);\r\n        color: #ffffff !important; \r\n    }\r\n\r\n    \/* Gradient Overlay for Text Readability *\/\r\n    .expand-panel::before {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 60%;\r\n        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);\r\n        opacity: 0.8;\r\n        transition: opacity 0.4s ease;\r\n    }\r\n\r\n    .expand-panel:hover::before {\r\n        opacity: 1; \r\n    }\r\n\r\n    \/* Text Content Box *\/\r\n    .panel-content {\r\n        position: absolute;\r\n        bottom: 30px;\r\n        left: 30px;\r\n        right: 30px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    \/* Icon Box *\/\r\n    .panel-icon {\r\n        width: 45px;\r\n        height: 45px;\r\n        border-radius: 50%;\r\n        background: rgba(255, 255, 255, 0.15);\r\n        backdrop-filter: blur(10px);\r\n        -webkit-backdrop-filter: blur(10px);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border: 1px solid rgba(255, 255, 255, 0.3);\r\n        min-width: 45px;\r\n        transition: all 0.4s ease;\r\n    }\r\n\r\n    \/* Proper SVG styling *\/\r\n    .panel-icon svg {\r\n        width: 22px;\r\n        height: 22px;\r\n        stroke: #ffffff; \r\n        fill: none;\r\n        transition: transform 0.4s ease;\r\n    }\r\n\r\n    .expand-panel:hover .panel-icon {\r\n        background: #d92128; \r\n        border-color: #d92128;\r\n    }\r\n\r\n    .expand-panel:hover .panel-icon svg {\r\n        transform: rotate(45deg); \r\n    }\r\n\r\n    \/* Title Styling *\/\r\n    .expand-panel h3 {\r\n        font-size: 1.25rem;\r\n        font-weight: 600;\r\n        margin: 0;\r\n        letter-spacing: 0.5px;\r\n        white-space: nowrap; \r\n        color: #ffffff !important; \r\n        text-shadow: 0 2px 10px rgba(0,0,0,0.5); \r\n    }\r\n\r\n    \/* Mobile Responsive Setup *\/\r\n    @media (max-width: 992px) {\r\n        .expanding-subhero {\r\n            padding: 60px 5%;\r\n        }\r\n        .expanding-container {\r\n            flex-direction: column;\r\n            height: 800px; \r\n        }\r\n        .expand-panel {\r\n            border-radius: 20px;\r\n        }\r\n        .panel-content {\r\n            bottom: 20px;\r\n            left: 20px;\r\n        }\r\n        .expand-panel h3 {\r\n            font-size: 1.1rem;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<section class=\"expanding-subhero\">\r\n    <div class=\"expanding-container\">\r\n        \r\n        <!-- Panel 1: Legislation (Gavel & Law Book) -->\r\n        <a href=\"#legislation\" class=\"expand-panel\" style=\"background-image: url('https:\/\/ampustica.elvetrina.tn\/wp-content\/uploads\/2026\/06\/justice-photo.jpeg');\">\r\n            <div class=\"panel-content\">\r\n                <div class=\"panel-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                <\/div>\r\n                <h3>Legislation<\/h3>\r\n            <\/div>\r\n        <\/a>\r\n\r\n        <!-- Panel 2: Maps (Compass on Map) -->\r\n        <a href=\"#maps\" class=\"expand-panel\" style=\"background-image: url('https:\/\/ampustica.elvetrina.tn\/wp-content\/uploads\/2026\/06\/02-ISOLA-USTICA-1140x760-1.jpg');\">\r\n            <div class=\"panel-content\">\r\n                <div class=\"panel-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                <\/div>\r\n                <h3>Maps<\/h3>\r\n            <\/div>\r\n        <\/a>\r\n\r\n        <!-- Panel 3: Authorizations (Signing Document) -->\r\n        <a href=\"#authorizations\" class=\"expand-panel\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1450101499163-c8848c66ca85?q=80&w=1000&auto=format&fit=crop');\">\r\n            <div class=\"panel-content\">\r\n                <div class=\"panel-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                <\/div>\r\n                <h3>Authorizations<\/h3>\r\n            <\/div>\r\n        <\/a>\r\n\r\n        <!-- Panel 4: Tenders (Pen on Paperwork) -->\r\n        <a href=\"#tenders\" class=\"expand-panel\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1554224155-8d04cb21cd6c?q=80&w=1000&auto=format&fit=crop');\">\r\n            <div class=\"panel-content\">\r\n                <div class=\"panel-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                <\/div>\r\n                <h3>Tenders<\/h3>\r\n            <\/div>\r\n        <\/a>\r\n\r\n        <!-- Panel 5: Publications (Open Book) -->\r\n        <a href=\"#publications\" class=\"expand-panel\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1512820790803-83ca734da794?q=80&w=1000&auto=format&fit=crop');\">\r\n            <div class=\"panel-content\">\r\n                <div class=\"panel-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                <\/div>\r\n                <h3>Publications<\/h3>\r\n            <\/div>\r\n        <\/a>\r\n\r\n        <!-- Panel 6: Press Releases (Stacked Newspapers) -->\r\n        <a href=\"#press-releases\" class=\"expand-panel\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1504711434969-e33886168f5c?q=80&w=1000&auto=format&fit=crop');\">\r\n            <div class=\"panel-content\">\r\n                <div class=\"panel-icon\">\r\n                    <svg viewBox=\"0 0 24 24\"><path d=\"M5 12h14M12 5l7 7-7 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n                <\/div>\r\n                <h3>Press Releases<\/h3>\r\n            <\/div>\r\n        <\/a>\r\n\r\n    <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>USTICA Benvenuto Istituita nel novembre del 1986, l\u2019Area Marina Protetta di Ustica si estende per oltre 15,000 ettari. Paradiso di subacquei e amanti del mare, l\u2019AMP lavora insieme alla comunit\u00e0 locale per tutelare e gestire l\u2019ambiente marino e il territorio. Scopri l&#8217;Area Legislation Maps Authorizations Tenders Publications Press Releases<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ampustica.elvetrina.tn\/index.php?rest_route=\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ampustica.elvetrina.tn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ampustica.elvetrina.tn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ampustica.elvetrina.tn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ampustica.elvetrina.tn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22"}],"version-history":[{"count":29,"href":"https:\/\/ampustica.elvetrina.tn\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":85,"href":"https:\/\/ampustica.elvetrina.tn\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions\/85"}],"wp:attachment":[{"href":"https:\/\/ampustica.elvetrina.tn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}