{"id":45489,"date":"2026-09-08T09:37:03","date_gmt":"2026-09-08T09:37:03","guid":{"rendered":"https:\/\/gilbertkablan.it\/?page_id=45489"},"modified":"2026-10-28T11:16:34","modified_gmt":"2026-10-28T11:16:34","slug":"lavori","status":"publish","type":"page","link":"https:\/\/gilbertkablan.it\/en\/lavori\/","title":{"rendered":"Lavori"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"45489\" class=\"elementor elementor-45489\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0adcc5 e-con-full e-flex e-con e-parent\" data-id=\"f0adcc5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-626f4a2 elementor-widget elementor-widget-html\" data-id=\"626f4a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   GILBERT KABLAN \u2014 PORTFOLIO \/ LAVORI\n   ========================================================= *\/\n\n.gk-portfolio {\n    position: relative;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n\n    background: #050505;\n    color: #ffffff !important;\n\n    overflow: hidden;\n    font-family: inherit;\n}\n\n.gk-portfolio * {\n    box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   HERO VIDEO\n   ========================================================= *\/\n\n.gk-hero {\n    position: relative;\n\n    width: 100%;\n    height: 100vh;\n    height: 100svh;\n\n    min-height: 600px;\n\n    overflow: hidden;\n\n    background: #050505;\n}\n\n.gk-hero video {\n    position: absolute;\n    inset: 0;\n\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n    object-position: center center;\n\n    transform: scale(1);\n\n    transition:\n        transform 1.2s cubic-bezier(.2,.7,.2,1);\n}\n\n.gk-hero:hover video {\n    transform: scale(1.04);\n}\n\n\n\/* =========================================================\n   VIDEO OVERLAY\n   ========================================================= *\/\n\n.gk-video-overlay {\n    position: absolute;\n    inset: 0;\n\n    z-index: 2;\n\n    pointer-events: none;\n\n    background:\n        linear-gradient(\n            to bottom,\n            rgba(0,0,0,.45) 0%,\n            rgba(0,0,0,0) 30%,\n            rgba(0,0,0,0) 60%,\n            rgba(0,0,0,.65) 100%\n        );\n}\n\n\n\/* =========================================================\n   TOP BAR\n   ========================================================= *\/\n\n.gk-topbar {\n    position: absolute;\n\n    top: 0;\n    left: 0;\n\n    width: 100%;\n\n    z-index: 5;\n\n    display: flex;\n\n    justify-content: space-between;\n    align-items: center;\n\n    padding: 28px 34px;\n\n    color: #ffffff !important;\n\n    font-size: 12px;\n    line-height: 1;\n\n    letter-spacing: .08em;\n\n    text-transform: uppercase;\n}\n\n.gk-topbar * {\n    color: #ffffff !important;\n}\n\n\n\/* =========================================================\n   HERO INFO\n   ========================================================= *\/\n\n.gk-hero-info {\n    position: absolute;\n    inset: 0;\n\n    z-index: 4;\n\n    display: flex;\n    flex-direction: column;\n\n    justify-content: center;\n    align-items: center;\n\n    padding: 30px;\n\n    text-align: center;\n\n    pointer-events: none;\n}\n\n.gk-hero-label {\n    margin-bottom: 18px;\n\n    color: #ffffff !important;\n\n    font-size: 11px;\n\n    letter-spacing: .18em;\n\n    text-transform: uppercase;\n\n    opacity: .8;\n}\n\n.gk-hero-title {\n    margin: 0;\n\n    color: #ffffff !important;\n\n    font-size: clamp(70px, 13vw, 190px);\n\n    font-weight: 500;\n\n    line-height: .82;\n\n    letter-spacing: -.055em;\n}\n\n\n\/* =========================================================\n   BOTTOM BAR\n   ========================================================= *\/\n\n.gk-bottom {\n    position: absolute;\n\n    left: 0;\n    bottom: 0;\n\n    width: 100%;\n\n    z-index: 5;\n\n    display: flex;\n\n    justify-content: space-between;\n    align-items: center;\n\n    padding: 28px 34px;\n\n    color: #ffffff !important;\n\n    font-size: 11px;\n\n    letter-spacing: .12em;\n\n    text-transform: uppercase;\n}\n\n.gk-bottom * {\n    color: #ffffff !important;\n}\n\n\n\/* =========================================================\n   INFO SECTION\n   ========================================================= *\/\n\n.gk-info {\n    position: relative;\n\n    width: 100%;\n\n    min-height: 80vh;\n\n    display: flex;\n\n    align-items: center;\n\n    padding: 12vw 8vw;\n\n    background: #050505;\n\n    color: #ffffff !important;\n}\n\n.gk-info-inner {\n    width: 100%;\n\n    max-width: 1250px;\n\n    margin: 0 auto;\n}\n\n.gk-info-label {\n    margin-bottom: 35px;\n\n    color: #ffffff !important;\n\n    font-size: 11px;\n\n    letter-spacing: .18em;\n\n    text-transform: uppercase;\n\n    opacity: .65;\n}\n\n.gk-info-title {\n    margin: 0 0 45px;\n\n    color: #ffffff !important;\n\n    font-size: clamp(50px, 8vw, 120px);\n\n    font-weight: 500;\n\n    line-height: .9;\n\n    letter-spacing: -.055em;\n}\n\n.gk-info-title *,\n.gk-info-title strong,\n.gk-info-title span {\n    color: #ffffff !important;\n\n    opacity: 1 !important;\n}\n\n.gk-info-description {\n    max-width: 760px;\n\n    margin: 0 0 50px;\n\n    color: #ffffff !important;\n\n    font-size: 17px;\n\n    line-height: 1.65;\n\n    opacity: .75;\n}\n\n\n\/* =========================================================\n   PRIMARY CTA\n   ========================================================= *\/\n\n.gk-cta-group {\n    display: flex;\n\n    align-items: center;\n\n    gap: 14px;\n\n    flex-wrap: wrap;\n}\n\n.gk-contact,\n.gk-cv {\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    min-height: 44px;\n\n    padding: 0 20px;\n\n    color: #ffffff !important;\n\n    font-size: 12px;\n\n    letter-spacing: .12em;\n\n    text-transform: uppercase;\n\n    text-decoration: none !important;\n\n    border: 1px solid rgba(255,255,255,.5);\n\n    transition:\n        background .3s ease,\n        color .3s ease,\n        border-color .3s ease,\n        opacity .3s ease;\n}\n\n.gk-contact {\n    background: transparent;\n}\n\n.gk-contact:hover {\n    color: #050505 !important;\n\n    background: #ffffff;\n\n    border-color: #ffffff;\n}\n\n.gk-cv {\n    background: #ffffff;\n\n    color: #050505 !important;\n\n    border-color: #ffffff;\n}\n\n.gk-cv:hover {\n    background: transparent;\n\n    color: #ffffff !important;\n\n    border-color: rgba(255,255,255,.5);\n}\n\n\n\/* =========================================================\n   CASE STUDIES\n   ========================================================= *\/\n\n.gk-case-studies {\n    width: 100%;\n\n    margin-top: 70px;\n}\n\n.gk-case-studies-label {\n    margin: 0 0 24px;\n\n    color: #ffffff !important;\n\n    font-size: 10px;\n\n    line-height: 1;\n\n    letter-spacing: .18em;\n\n    text-transform: uppercase;\n\n    opacity: .55;\n}\n\n.gk-case-studies-grid {\n    display: flex;\n\n    flex-wrap: wrap;\n\n    gap: 10px;\n}\n\n.gk-case-study-link {\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    min-height: 42px;\n\n    padding: 0 16px;\n\n    border: 1px solid rgba(255,255,255,.22);\n\n    background: transparent;\n\n    color: rgba(255,255,255,.76) !important;\n\n    font-size: 10px;\n\n    line-height: 1;\n\n    letter-spacing: .1em;\n\n    text-transform: uppercase;\n\n    text-decoration: none !important;\n\n    transition:\n        background .3s ease,\n        color .3s ease,\n        border-color .3s ease,\n        transform .3s ease;\n}\n\n.gk-case-study-link:hover {\n    background: #ffffff;\n\n    color: #050505 !important;\n\n    border-color: #ffffff;\n\n    transform: translateY(-2px);\n}\n\n\n\/* =========================================================\n   FOOTER\n   ========================================================= *\/\n\n.gk-footer {\n    display: flex;\n\n    justify-content: space-between;\n    align-items: center;\n\n    padding: 30px 34px;\n\n    background: #050505;\n\n    border-top: 1px solid rgba(255,255,255,.12);\n\n    color: #ffffff !important;\n\n    font-size: 11px;\n\n    letter-spacing: .1em;\n\n    text-transform: uppercase;\n}\n\n.gk-footer * {\n    color: #ffffff !important;\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width: 1024px) {\n\n    .gk-hero {\n        min-height: 500px;\n    }\n\n    .gk-topbar {\n        padding: 24px 26px;\n    }\n\n    .gk-bottom {\n        padding: 24px 26px;\n    }\n\n    .gk-info {\n        padding: 12vw 7vw;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 767px) {\n\n    .gk-hero {\n        width: 100%;\n\n        height: 100vh;\n        height: 100svh;\n\n        min-height: 0;\n    }\n\n    .gk-hero video {\n        width: 100%;\n        height: 100%;\n\n        object-fit: cover;\n        object-position: center center;\n\n        transform: none !important;\n    }\n\n    .gk-topbar {\n        padding: 18px 20px;\n\n        font-size: 9px;\n\n        letter-spacing: .08em;\n    }\n\n    .gk-bottom {\n        padding: 18px 20px;\n\n        font-size: 9px;\n    }\n\n    .gk-hero-info {\n        padding: 20px;\n    }\n\n    .gk-hero-label {\n        margin-bottom: 12px;\n\n        font-size: 8px;\n\n        letter-spacing: .14em;\n    }\n\n    .gk-hero-title {\n        font-size: clamp(55px, 16vw, 100px);\n    }\n\n    .gk-info {\n        min-height: 70vh;\n\n        padding: 80px 24px;\n    }\n\n    .gk-info-label {\n        margin-bottom: 25px;\n\n        font-size: 9px;\n    }\n\n    .gk-info-title {\n        margin-bottom: 30px;\n\n        font-size: clamp(46px, 14vw, 75px);\n    }\n\n    .gk-info-description {\n        margin-bottom: 40px;\n\n        font-size: 15px;\n\n        line-height: 1.6;\n    }\n\n    .gk-cta-group {\n        width: 100%;\n\n        gap: 10px;\n    }\n\n    .gk-contact,\n    .gk-cv {\n        min-height: 46px;\n\n        padding: 0 16px;\n\n        font-size: 10px;\n\n        letter-spacing: .1em;\n    }\n\n    .gk-case-studies {\n        margin-top: 55px;\n    }\n\n    .gk-case-studies-label {\n        margin-bottom: 20px;\n\n        font-size: 9px;\n    }\n\n    .gk-case-studies-grid {\n        gap: 8px;\n    }\n\n    .gk-case-study-link {\n        min-height: 42px;\n\n        padding: 0 13px;\n\n        font-size: 9px;\n\n        letter-spacing: .08em;\n    }\n\n    .gk-footer {\n        padding: 24px 20px;\n\n        font-size: 9px;\n    }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL MOBILE\n   ========================================================= *\/\n\n@media (max-width: 390px) {\n\n    .gk-hero-title {\n        font-size: 55px;\n    }\n\n    .gk-info {\n        padding: 70px 20px;\n    }\n\n    .gk-cta-group {\n        flex-direction: column;\n\n        align-items: stretch;\n    }\n\n    .gk-contact,\n    .gk-cv {\n        width: 100%;\n    }\n\n    .gk-case-studies-grid {\n        flex-direction: column;\n    }\n\n    .gk-case-study-link {\n        width: 100%;\n\n        justify-content: flex-start;\n\n        padding: 0 16px;\n    }\n\n}\n\n\n\/* =========================================================\n   REDUCE MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n    .gk-hero video,\n    .gk-case-study-link {\n        transition: none;\n    }\n\n}\n<\/style>\n\n\n<div class=\"gk-portfolio\">\n\n\n    <!-- =====================================================\n         HERO VIDEO\n         ====================================================== -->\n\n    <section class=\"gk-hero\">\n\n        <video\n            id=\"gkPortfolioVideo\"\n            autoplay\n muted\n loop\n playsinline\n webkit-playsinline\n preload=\"auto\"\n            aria-hidden=\"true\"\n        >\n\n            <source\n                src=\"https:\/\/gilbertkablan.it\/wp-content\/uploads\/2025\/12\/SaveInsta.App-3180706843713729101_331762286-1.mp4\"\n                type=\"video\/mp4\"\n            >\n\n        <\/video>\n\n\n        <div class=\"gk-video-overlay\"><\/div>\n\n\n        <div class=\"gk-topbar\">\n\n            <span>\n                Gilbert Kablan\n            <\/span>\n\n            <span>\n                Portfolio \u2014 2026\n            <\/span>\n\n        <\/div>\n\n\n        <div class=\"gk-hero-info\">\n\n            <div class=\"gk-hero-label\">\n                Graphic Design \u00b7 Art Direction \u00b7 Digital\n            <\/div>\n\n            <h1 class=\"gk-hero-title\">\n                Portfolio\n            <\/h1>\n\n        <\/div>\n\n\n        <div class=\"gk-bottom\">\n\n            <span>\n                Always evolving.\n            <\/span>\n\n            <span>\n                Scroll \u2193\n            <\/span>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         INFO \/ SELECTED WORK\n         ====================================================== -->\n\n    <section class=\"gk-info\">\n\n        <div class=\"gk-info-inner\">\n\n\n            <div class=\"gk-info-label\">\n                Selected Work \u2014 2026\n            <\/div>\n\n\n            <h2 class=\"gk-info-title\">\n\n                Progetti selezionati.<br>\n                Design, motion e direzione creativa.\n\n            <\/h2>\n\n\n            <p class=\"gk-info-description\">\n\n                Una selezione di progetti di creative direction, branding,\n                web design, motion design, visual communication e contenuti\n                digitali. Case study sviluppati per brand, e-commerce e\n                progetti creativi, tra strategia, design e storytelling visivo.\n\n            <\/p>\n\n\n\n            <!-- =================================================\n                 PRIMARY CTA\n                 ================================================= -->\n\n            <div class=\"gk-cta-group\">\n\n\n                <a\n                    class=\"gk-contact\"\n                    href=\"mailto:gilbert@gilbertkablan.com\"\n                >\n                    Contattami\n                <\/a>\n\n\n                <a\n                    class=\"gk-cv\"\n                    href=\"https:\/\/gilbertkablan.it\/wp-content\/uploads\/2026\/08\/Gilbert_Kablan_2026.pdf\"\n                    target=\"_blank\"\n                    rel=\"noopener\"\n                >\n                    Scarica il CV\n                <\/a>\n\n\n            <\/div>\n\n\n\n            <!-- =================================================\n                 SELECTED CASE STUDIES\n                 ================================================= -->\n\n            <div class=\"gk-case-studies\">\n\n\n                <div class=\"gk-case-studies-label\">\n                    Selected Case Studies\n                <\/div>\n\n\n                <div class=\"gk-case-studies-grid\">\n\n\n                    <!-- 01 \u2014 SELYRA -->\n\n                    <a\n                        class=\"gk-case-study-link\"\n                        href=\"https:\/\/gilbertkablan.it\/en\/case-study-selyra-sustainable-digital-ecosystem\/\"\n                    >\n                        Selyra\n                    <\/a>\n\n\n                    <!-- 02 \u2014 OCCHIALANDO -->\n\n                    <a\n                        class=\"gk-case-study-link\"\n                        href=\"https:\/\/gilbertkablan.it\/en\/case-study-occhialando\/\"\n                    >\n                        Occhialando\n                    <\/a>\n\n\n                    <!-- 03 \u2014 CLOSET LONDON -->\n\n                    <a\n                        class=\"gk-case-study-link\"\n                        href=\"https:\/\/gilbertkablan.it\/en\/case-study-closet-london\/\"\n                    >\n                        Closet London\n                    <\/a>\n\n\n                    <!-- 04 \u2014 VOLVO -->\n\n                    <a\n                        class=\"gk-case-study-link\"\n                        href=\"https:\/\/gilbertkablan.it\/en\/case-study-volvo-360c-concept\/\"\n                    >\n                        Volvo \u2014 360c Concept\n                    <\/a>\n\n\n                    <!-- 05 \u2014 WEBFLOW -->\n\n                    <a\n                        class=\"gk-case-study-link\"\n                        href=\"https:\/\/gilbertkablan.it\/en\/case-study-webflow-welcome-to-the-age-of-no-code\/\"\n                    >\n                        Webflow \u2014 No Code\n                    <\/a>\n\n\n                    <!-- 06 \u2014 ALESSANDRA DI RONZA -->\n\n                    <a\n                        class=\"gk-case-study-link\"\n                        href=\"https:\/\/gilbertkablan.it\/en\/case-study-alessandra-di-ronza\/\"\n                    >\n                        Alessandra Di Ronza\n                    <\/a>\n\n\n                    <!-- 07 \u2014 LILLY CASA PET -->\n\n                    <a\n                        class=\"gk-case-study-link\"\n                        href=\"https:\/\/gilbertkablan.it\/en\/case-study-lilly-casa-pet-the-journey-of-life\/\"\n                    >\n                        Lilly Casa Pet\n                    <\/a>\n\n\n\n                    <!-- 08 \u2014 STRAWBERRY EXPLOSION \/ PERSONAL PROJECT -->\n\n                    <a\n                        class=\"gk-case-study-link\"\n                        href=\"https:\/\/gilbertkablan.it\/en\/strawberry-explosion-blender-e-3d-motion-design-gilbert-kablan\/\"\n                    >\n                        Strawberry Explosion \u2014 Blender 3D\n                    <\/a>\n\n\n\n                    <!-- =================================================\n                         HIDDEN CASE STUDIES\n                         SEIKA \u2014 TEMPORANEAMENTE NASCOSTI\n                         ================================================= -->\n\n\n                    <!--\n\n                    <a\n                        class=\"gk-case-study-link\"\n                        href=\"https:\/\/gilbertkablan.it\/case-study-seika-rebranding-teaser\/\"\n                    >\n                        Seika \u2014 Rebranding\n                    <\/a>\n\n\n                    <a\n                        class=\"gk-case-study-link\"\n                        href=\"https:\/\/gilbertkablan.it\/case-study-seika-fishing-aurex\/\"\n                    >\n                        Seika Fishing \u2014 Aurex\n                    <\/a>\n\n                    -->\n\n\n                <\/div>\n\n\n            <\/div>\n\n\n        <\/div>\n\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         FOOTER\n         ====================================================== -->\n\n    <footer class=\"gk-footer\">\n\n        <span>\n            Gilbert Kablan\n        <\/span>\n\n        <span>\n            Studio59\n        <\/span>\n\n    <\/footer>\n\n\n<\/div>\n\n\n\n<script>\n(function() {\n\n    const video =\n        document.getElementById(\"gkPortfolioVideo\");\n\n\n    if (!video) {\n        return;\n    }\n\n\n    function startVideo() {\n\n        video.muted = true;\n\n        video.setAttribute(\n            \"muted\",\n            \"\"\n        );\n\n        video.setAttribute(\n            \"playsinline\",\n            \"\"\n        );\n\n        video.setAttribute(\n            \"webkit-playsinline\",\n            \"\"\n        );\n\n\n        const playPromise =\n            video.play();\n\n\n        if (\n            playPromise !== undefined\n        ) {\n\n            playPromise.catch(\n                function() {\n\n                    \/*\n                     * Some browsers may block autoplay.\n                     *\/\n\n                }\n            );\n\n        }\n\n    }\n\n\n    if (\n        document.readyState === \"loading\"\n    ) {\n\n        document.addEventListener(\n            \"DOMContentLoaded\",\n            startVideo\n        );\n\n    } else {\n\n        startVideo();\n\n    }\n\n\n    document.addEventListener(\n        \"visibilitychange\",\n        function() {\n\n            if (\n                document.visibilityState === \"visible\"\n            ) {\n\n                startVideo();\n\n            }\n\n        }\n    );\n\n\n    if (\n        \"IntersectionObserver\" in window\n    ) {\n\n        const observer =\n            new IntersectionObserver(\n                function(entries) {\n\n                    entries.forEach(\n                        function(entry) {\n\n                            if (\n                                entry.isIntersecting\n                            ) {\n\n                                startVideo();\n\n                            }\n\n                        }\n                    );\n\n                },\n                {\n                    threshold: 0.1\n                }\n            );\n\n\n        observer.observe(video);\n\n    }\n\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Gilbert Kablan Portfolio \u2014 2026 Graphic Design \u00b7 Art Direction \u00b7 Digital Portfolio Always evolving. Scroll \u2193 Selected Work \u2014 2026 Progetti selezionati. Design, motion e direzione creativa. Una selezione di progetti di creative direction, branding, web design, motion design, visual communication e contenuti digitali. Case study sviluppati per brand, e-commerce e progetti creativi, tra [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"ngg_post_thumbnail":0,"_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"class_list":["post-45489","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/pages\/45489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/comments?post=45489"}],"version-history":[{"count":55,"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/pages\/45489\/revisions"}],"predecessor-version":[{"id":45981,"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/pages\/45489\/revisions\/45981"}],"wp:attachment":[{"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/media?parent=45489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}