{"id":59,"date":"2025-07-30T04:58:16","date_gmt":"2025-07-30T04:58:16","guid":{"rendered":"https:\/\/grafika.design\/?page_id=59"},"modified":"2025-08-24T12:15:36","modified_gmt":"2025-08-24T12:15:36","slug":"homepage","status":"publish","type":"page","link":"https:\/\/grafika.design\/","title":{"rendered":"Homepage"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"59\" class=\"elementor elementor-59\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e28a489 e-con-full e-flex e-con e-parent\" data-id=\"e28a489\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e18e0a1 elementor-widget elementor-widget-html\" data-id=\"e18e0a1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"bg\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Creativity Section<\/title>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredericka+the+Great&display=swap\" rel=\"stylesheet\">\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        .creativity-section-wrapper {\r\n            font-family: Arial, sans-serif;\r\n            width: 100%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: flex-start;\r\n            padding: 0;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        .creativity-container {\r\n            position: relative;\r\n            width: 100%;\r\n            min-height: 400px;\r\n        }\r\n\r\n        .creativity-word {\r\n            font-size: clamp(4rem, 12vw, 8rem);\r\n            font-family: 'Fredericka the Great', cursive;\r\n            color: transparent;\r\n            -webkit-text-stroke: 1.5px #666;\r\n            text-stroke: 1.5px #666;\r\n            position: relative;\r\n            left: -100%;\r\n            opacity: 0;\r\n            animation: slideIn 2s ease-out forwards;\r\n            margin-bottom: 2rem;\r\n            z-index: 1;\r\n            white-space: nowrap;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .letter {\r\n            display: inline-block;\r\n            position: relative;\r\n            opacity: 1;\r\n            transform: translateX(0);\r\n        }\r\n\r\n        .letter.filled {\r\n            font-family: Arial, sans-serif;\r\n            font-weight: bold;\r\n            color: #444;\r\n            -webkit-text-stroke: none;\r\n            text-stroke: none;\r\n            transition: all 0.5s ease;\r\n        }\r\n\r\n        .paragraph {\r\n            font-size: clamp(1rem, 3vw, 1.2rem);\r\n            line-height: 1.6;\r\n            color: #555;\r\n            max-width: 550px;\r\n            width: 100%;\r\n            opacity: 0;\r\n            transform: translateY(10px);\r\n            margin-left: 0;\r\n            transition: all 0.8s ease;\r\n            \r\n            top: 100%;\r\n            left: 0;\r\n            z-index: 10;\r\n        }\r\n\r\n        .paragraph.show {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        @keyframes slideIn {\r\n            0% {\r\n                left: -100%;\r\n                opacity: 0;\r\n            }\r\n            100% {\r\n                left: 0;\r\n                opacity: 1;\r\n            }\r\n        }\r\n\r\n        @keyframes strokeToFill {\r\n            0% {\r\n                font-family: 'Fredericka the Great', cursive;\r\n                color: transparent;\r\n                -webkit-text-stroke: 1.5px #666;\r\n                text-stroke: 1.5px #666;\r\n            }\r\n            100% {\r\n                font-family: Arial, sans-serif;\r\n                font-weight: bold;\r\n                color: #444;\r\n                -webkit-text-stroke: none;\r\n                text-stroke: none;\r\n            }\r\n        }\r\n\r\n        \/* Responsive adjustments *\/\r\n        @media (max-width: 768px) {\r\n            .creativity-section-wrapper {\r\n                padding: 0;\r\n            }\r\n            \r\n            .creativity-word {\r\n                font-size: clamp(2.5rem, 8vw, 4rem);\r\n                margin-bottom: 1.5rem;\r\n            }\r\n            \r\n            .paragraph {\r\n                font-size: clamp(0.9rem, 4vw, 1.1rem);\r\n                max-width: 100%;\r\n                position: relative;\r\n                top: auto;\r\n                left: auto;\r\n                margin-top: 2rem;\r\n                z-index: auto;\r\n                margin-left: 0;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .creativity-word {\r\n                font-size: clamp(2rem, 6vw, 3rem);\r\n                margin-bottom: 1rem;\r\n            }\r\n            \r\n            .paragraph {\r\n                font-size: clamp(0.8rem, 4.5vw, 1rem);\r\n                max-width: 100%;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"creativity-section-wrapper\">\r\n        <div class=\"creativity-container\">\r\n            <div class=\"creativity-word\" id=\"creativityWord\">\r\n                <span class=\"letter\" data-letter=\"C\">C<\/span>\r\n                <span class=\"letter\" data-letter=\"r\">r<\/span>\r\n                <span class=\"letter\" data-letter=\"e\">e<\/span>\r\n                <span class=\"letter\" data-letter=\"a\">a<\/span>\r\n                <span class=\"letter\" data-letter=\"t\">t<\/span>\r\n                <span class=\"letter\" data-letter=\"i\">i<\/span>\r\n                <span class=\"letter\" data-letter=\"v\">v<\/span>\r\n                <span class=\"letter\" data-letter=\"i\">i<\/span>\r\n                <span class=\"letter\" data-letter=\"t\">t<\/span>\r\n                <span class=\"letter\" data-letter=\"y\">y<\/span>\r\n            <\/div>\r\n            \r\n            <div class=\"paragraph\" id=\"paragraph\">\r\n                We work closely with our clients to turn big ideas into something real and impactful. We love trying new things and bringing different perspectives together to come up with fresh, standout solutions.\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const letters = document.querySelectorAll('.letter');\r\n            const paragraph = document.getElementById('paragraph');\r\n            const word = document.getElementById('creativityWord');\r\n            \r\n            \/\/ \u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0430\u043d\u0435 \u043d\u0430 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430 \u043f\u043e\u0434 \u0431\u0443\u043a\u0432\u0430\u0442\u0430 't' (5-\u0442\u0430 \u0431\u0443\u043a\u0432\u0430)\r\n            function positionParagraph() {\r\n                \/\/ \u0421\u0430\u043c\u043e \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0430\u043c\u0435 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430\r\n                if (window.innerWidth > 768) {\r\n                    const targetLetter = letters[4]; \/\/ 't' (5-\u0442\u0430 \u0431\u0443\u043a\u0432\u0430)\r\n                    const targetLetterRect = targetLetter.getBoundingClientRect();\r\n                    const wordRect = word.getBoundingClientRect();\r\n                    \r\n                    \/\/ \u0418\u0437\u0447\u0438\u0441\u043b\u044f\u0432\u0430\u043c\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u044f\u0442\u0430 \u0441\u043f\u0440\u044f\u043c\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\r\n                    const relativeLeft = targetLetterRect.left - wordRect.left;\r\n                    paragraph.style.marginLeft = relativeLeft + 'px';\r\n                } else {\r\n                    \/\/ \u041d\u0430 \u043c\u043e\u0431\u0438\u043b\u043d\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0443\u043b\u0438\u0440\u0430\u043c\u0435 margin-left\r\n                    paragraph.style.marginLeft = '0px';\r\n                }\r\n            }\r\n\r\n            \/\/ \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430 \u0431\u0443\u043a\u0432\u0438\u0442\u0435\r\n            function animateLetters() {\r\n                \/\/ \u041f\u044a\u0440\u0432\u043e \u043f\u043e\u043a\u0430\u0437\u0432\u0430\u043c\u0435 \u0446\u044f\u043b\u0430\u0442\u0430 \u0434\u0443\u043c\u0430 \u0432 stroke \u0435\u0444\u0435\u043a\u0442\r\n                setTimeout(() => {\r\n                    \/\/ \u0421\u043b\u0435\u0434 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0430 \u0437\u0430\u043f\u043e\u0447\u0432\u0430\u043c\u0435 \u0434\u0430 \u0437\u0430\u043f\u044a\u043b\u0432\u0430\u043c\u0435 \u0431\u0443\u043a\u0432\u0430 \u043f\u043e \u0431\u0443\u043a\u0432\u0430\r\n                    letters.forEach((letter, index) => {\r\n                        setTimeout(() => {\r\n                            letter.classList.add('filled');\r\n                            letter.style.animation = 'strokeToFill 0.5s ease forwards';\r\n                            \r\n                            \/\/ \u0410\u043a\u043e \u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0430\u0442\u0430 \u0431\u0443\u043a\u0432\u0430, \u043f\u043e\u043a\u0430\u0437\u0432\u0430\u043c\u0435 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430\r\n                            if (index === letters.length - 1) {\r\n                                setTimeout(() => {\r\n                                    paragraph.classList.add('show');\r\n                                }, 500);\r\n                            }\r\n                        }, index * 200); \/\/ 200ms \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043c\u0435\u0436\u0434\u0443 \u0431\u0443\u043a\u0432\u0438\u0442\u0435\r\n                    });\r\n                }, 1000);\r\n            }\r\n\r\n            \/\/ \u0421\u0442\u0430\u0440\u0442\u0438\u0440\u0430\u043c\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0442\u0430 \u0441\u043b\u0435\u0434 \u043c\u0430\u043b\u043a\u043e \u0437\u0430\u043a\u044a\u0441\u043d\u0435\u043d\u0438\u0435\r\n            setTimeout(() => {\r\n                animateLetters();\r\n                positionParagraph();\r\n            }, 1000);\r\n\r\n            \/\/ \u041f\u0440\u0435\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0430\u043c\u0435 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430 \u043f\u0440\u0438 resize\r\n            window.addEventListener('resize', positionParagraph);\r\n\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html> \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6bd865c e-flex e-con-boxed e-con e-parent\" data-id=\"6bd865c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-72e9fc2 elementor-widget elementor-widget-spacer\" data-id=\"72e9fc2\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\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>Creativity Section C r e a t i v i t y We work closely with our clients to turn big ideas into something real and impactful. We love trying new things and bringing different perspectives together to come up with fresh, standout solutions.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-59","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/grafika.design\/index.php\/wp-json\/wp\/v2\/pages\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grafika.design\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grafika.design\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grafika.design\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grafika.design\/index.php\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":13,"href":"https:\/\/grafika.design\/index.php\/wp-json\/wp\/v2\/pages\/59\/revisions"}],"predecessor-version":[{"id":129,"href":"https:\/\/grafika.design\/index.php\/wp-json\/wp\/v2\/pages\/59\/revisions\/129"}],"wp:attachment":[{"href":"https:\/\/grafika.design\/index.php\/wp-json\/wp\/v2\/media?parent=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}