{"id":7105,"date":"2026-01-20T00:00:01","date_gmt":"2026-01-20T00:00:01","guid":{"rendered":"https:\/\/themeton.com\/?page_id=7105"},"modified":"2026-01-22T06:59:31","modified_gmt":"2026-01-22T06:59:31","slug":"70s","status":"publish","type":"page","link":"https:\/\/themeton.com\/tools\/font-generator\/70s\/","title":{"rendered":"70s Font Generator &#8211; Funky Curvy Psychedelic Serif Text"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7105\" class=\"elementor elementor-7105\">\n\t\t\t\t<div class=\"elementor-element elementor-element-36a5ea49 e-con-full e-flex e-con e-parent\" data-id=\"36a5ea49\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5662a114 elementor-widget elementor-widget-shortcode\" data-id=\"5662a114\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div id=\"retro-font-tool-master\">\r\n    <style>\r\n        \/* CSS Variables - 70s Earthy Retro Palette *\/\r\n        :root {\r\n            --vintage-bg: #3c1e08; \/* Keyword relevant: Deep Earthy Umber *\/\r\n            --retro-gradient: linear-gradient(180deg, #ff8c00 0%, #ff0050 100%);\r\n            --button-gradient: linear-gradient(45deg, #fb8500, #ffb703);\r\n            --card-bg: #fffaf0;\r\n            --accent-yellow: #ffb703;\r\n            --text-dark: #2d1606;\r\n            --radius: 9px;\r\n            --container-max: 1200px;\r\n        }\r\n\r\n        \/* 100% Background Width Container *\/\r\n        #retro-font-tool-master {\r\n            width: 100%;\r\n            min-height: 100vh;\r\n            background-color: var(--vintage-bg);\r\n            margin: 0;\r\n            padding: 0;\r\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n            color: var(--text-dark);\r\n            box-sizing: border-box;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n        }\r\n\r\n        \/* 1200px Content Wrapper *\/\r\n        .max-width-wrapper {\r\n            width: 100%;\r\n            max-width: var(--container-max);\r\n            padding: 0 10px;\r\n            box-sizing: border-box;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        \/* Header Section outside the tool component *\/\r\n        .header-section {\r\n            margin-top: 20px;\r\n            text-align: center;\r\n            padding: 20px 0;\r\n        }\r\n\r\n        .header-section h1 {\r\n            font-size: clamp(1.8rem, 5vw, 3.5rem);\r\n            margin: 0;\r\n            font-weight: 900;\r\n            background: linear-gradient(to bottom, #ffea00, #ff8c00);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            text-transform: uppercase;\r\n            letter-spacing: -1px;\r\n            line-height: 1;\r\n        }\r\n\r\n        .header-section p {\r\n            color: var(--accent-yellow);\r\n            font-size: 1rem;\r\n            margin-top: 10px;\r\n            opacity: 0.9;\r\n            font-style: italic;\r\n        }\r\n\r\n        \/* Main Tool Component *\/\r\n        .tool-component {\r\n            background: var(--card-bg);\r\n            border-radius: var(--radius);\r\n            padding: 10px;\r\n            margin-bottom: 25px;\r\n            width: 100%;\r\n            box-shadow: 0 10px 40px rgba(0,0,0,0.4);\r\n            box-sizing: border-box;\r\n            border: 1px solid rgba(255,255,255,0.1);\r\n        }\r\n\r\n        \/* Input Controls *\/\r\n        .control-group {\r\n            display: flex;\r\n            gap: 10px;\r\n            padding: 5px;\r\n        }\r\n\r\n        .input-box {\r\n            flex: 1;\r\n            padding: 18px;\r\n            font-size: 1.2rem;\r\n            border: 2px solid #ddd;\r\n            border-radius: 6px;\r\n            outline: none;\r\n            transition: border-color 0.2s;\r\n        }\r\n\r\n        .input-box:focus {\r\n            border-color: #fb8500;\r\n        }\r\n\r\n\t\t\r\n        .clear-btn {\r\n\t\t\t\t\t\theight: 50px;\r\n            background: #e74c3c;\r\n            color: white;\r\n            border: none;\r\n            border-radius: 6px;\r\n            padding: 0 25px;\r\n            font-weight: bold;\r\n            cursor: pointer;\r\n            transition: background 0.2s;\r\n        }\r\n\r\n        .clear-btn:hover { background: #c0392b; }\r\n\r\n        \/* Output Listing *\/\r\n        .results-list {\r\n            display: grid;\r\n            grid-template-columns: 1fr;\r\n            gap: 10px;\r\n            margin-top: 20px;\r\n        }\r\n\r\n        .font-item {\r\n            background: #fff;\r\n            padding: 15px 20px;\r\n            border-radius: 6px;\r\n            border-left: 5px solid var(--accent-yellow);\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            cursor: pointer;\r\n            transition: all 0.2s;\r\n            border-top: 1px solid #f0f0f0;\r\n            border-bottom: 1px solid #f0f0f0;\r\n        }\r\n\r\n        .font-item:hover {\r\n            transform: translateX(8px);\r\n            background: #fff9ed;\r\n            border-left-color: #fb8500;\r\n        }\r\n\r\n        .font-preview {\r\n            font-size: 1.4rem;\r\n            word-break: break-all;\r\n            color: #333;\r\n        }\r\n\r\n        .copy-hint {\r\n            font-size: 0.7rem;\r\n            background: #eee;\r\n            padding: 4px 8px;\r\n            border-radius: 4px;\r\n            color: #777;\r\n            text-transform: uppercase;\r\n            font-weight: bold;\r\n            white-space: nowrap;\r\n        }\r\n\r\n        \/* Load More Section *\/\r\n        .pagination-area {\r\n            text-align: center;\r\n            padding: 20px 0;\r\n        }\r\n\r\n        .btn-load {\r\n            background: var(--button-gradient);\r\n            color: #fff;\r\n            border: none;\r\n            padding: 15px 40px;\r\n            border-radius: 50px;\r\n            font-size: 1rem;\r\n            font-weight: 800;\r\n            cursor: pointer;\r\n            box-shadow: 0 5px 15px rgba(251, 133, 0, 0.4);\r\n            transition: transform 0.2s;\r\n        }\r\n\r\n        .btn-load:active { transform: scale(0.96); }\r\n\r\n        \/* Status Notification *\/\r\n        #toast {\r\n            position: fixed;\r\n            bottom: 20px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            background: #2ecc71;\r\n            color: white;\r\n            padding: 10px 30px;\r\n            border-radius: 50px;\r\n            font-weight: bold;\r\n            display: none;\r\n            z-index: 10000;\r\n            box-shadow: 0 4px 12px rgba(0,0,0,0.2);\r\n        }\r\n\r\n        \/* Responsive Breakpoints *\/\r\n        @media (max-width: 768px) {\r\n            .results-list { grid-template-columns: 1fr; }\r\n            .control-group { flex-direction: column; }\r\n            .clear-btn { padding: 15px; }\r\n            .font-item { flex-direction: column; align-items: flex-start; gap: 10px; }\r\n        }\r\n    <\/style>\r\n\r\n    <div id=\"toast\">Copied to Clipboard! \u270c\ufe0f<\/div>\r\n\r\n    <div class=\"max-width-wrapper\">\r\n        <header class=\"header-section\">\r\n            <h1>70s Font Generator - Funky Curvy Psychedelic Serif Text<\/h1>\r\n            <p>Generate groovy Unicode text for social media bios, captions, and retro designs.<\/p>\r\n        <\/header>\r\n\r\n        <main class=\"tool-component\">\r\n            <div class=\"control-group\">\r\n                <input type=\"text\" id=\"mainInput\" class=\"input-box\" placeholder=\"Type your groovy message here...\" maxlength=\"80\">\r\n                <button id=\"clearTrigger\" class=\"clear-btn\">CLEAR<\/button>\r\n            <\/div>\r\n\r\n            <div id=\"resultsOutput\" class=\"results-list\">\r\n                <!-- Initial 10 results populate here -->\r\n            <\/div>\r\n\r\n            <div class=\"pagination-area\" id=\"paginationWrap\">\r\n                <button class=\"btn-load\" id=\"loadBtn\">SHOW MORE STYLES<\/button>\r\n            <\/div>\r\n        <\/main>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            \"use strict\";\r\n\r\n            const input = document.getElementById('mainInput');\r\n            const output = document.getElementById('resultsOutput');\r\n            const loadBtn = document.getElementById('loadBtn');\r\n            const clearBtn = document.getElementById('clearTrigger');\r\n            const toast = document.getElementById('toast');\r\n            \r\n            let isExpanded = false;\r\n\r\n            \/\/ Font Character Maps (Unicode)\r\n            const charset = {\r\n                bubble: { a:'\u24d0',b:'\u24d1',c:'\u24d2',d:'\u24d3',e:'\u24d4',f:'\u24d5',g:'\u24d6',h:'\u24d7',i:'\u24d8',j:'\u24d9',k:'\u24da',l:'\u24db',m:'\u24dc',n:'\u24dd',o:'\u24de',p:'\u24df',q:'\u24e0',r:'\u24e1',s:'\u24e2',t:'\u24e3',u:'\u24e4',v:'\u24e5',w:'\u24e6',x:'\u24e7',y:'\u24e8',z:'\u24e9' },\r\n                groovy: { a:'\u0e04',b:'\u0e52',c:'\u03c2',d:'\u0e54',e:'\u0454',f:'\u0166',g:'\ufeee',h:'\u0452',i:'\u0e40',j:'\u05df',k:'\u043a',l:'\u026d',m:'\u0e53',n:'\u0e20',o:'\u0e4f',p:'\u05e7',q:'\u1ee3',r:'\u0433',s:'\u0e23',t:'\u0547',u:'\u0e22',v:'\u0e07',w:'\u0e2c',x:'\u05e5',y:'\u05e5',z:'\u0579' },\r\n                bold: { a:'\ud835\uddee',b:'\ud835\uddef',c:'\ud835\uddf0',d:'\ud835\uddf1',e:'\ud835\uddf2',f:'\ud835\uddf3',g:'\ud835\uddf4',h:'\ud835\uddf5',i:'\ud835\uddf6',j:'\ud835\uddf7',k:'\ud835\uddf8',l:'\ud835\uddf9',m:'\ud835\uddfa',n:'\ud835\uddfb',o:'\ud835\uddfc',p:'\ud835\uddfd',q:'\ud835\uddfe',r:'\ud835\uddff',s:'\ud835\ude00',t:'\ud835\ude01',u:'\ud835\ude02',v:'\ud835\ude03',w:'\ud835\ude04',x:'\ud835\ude05',y:'\ud835\ude06',z:'\ud835\ude07' },\r\n                italic: { a:'\ud835\ude22',b:'\ud835\ude23',c:'\ud835\ude24',d:'\ud835\ude25',e:'\ud835\ude26',f:'\ud835\ude27',g:'\ud835\ude28',h:'\ud835\ude29',i:'\ud835\ude2a',j:'\ud835\ude2b',k:'\ud835\ude2c',l:'\ud835\ude2d',m:'\ud835\ude2e',n:'\ud835\ude2f',o:'\ud835\ude30',p:'\ud835\ude31',q:'\ud835\ude32',r:'\ud835\ude33',s:'\ud835\ude34',t:'\ud835\ude35',u:'\ud835\ude36',v:'\ud835\ude37',w:'\ud835\ude38',x:'\ud835\ude39',y:'\ud835\ude3a',z:'\ud835\ude3b' },\r\n                script: { a:'\ud835\udcea',b:'\ud835\udceb',c:'\ud835\udcec',d:'\ud835\udced',e:'\ud835\udcee',f:'\ud835\udcef',g:'\ud835\udcf0',h:'\ud835\udcf1',i:'\ud835\udcf2',j:'\ud835\udcf3',k:'\ud835\udcf4',l:'\ud835\udcf5',m:'\ud835\udcf6',n:'\ud835\udcf7',o:'\ud835\udcf8',p:'\ud835\udcf9',q:'\ud835\udcfa',r:'\ud835\udcfb',s:'\ud835\udcfc',t:'\ud835\udcfd',u:'\ud835\udcfe',v:'\ud835\udcff',w:'\ud835\udd00',x:'\ud835\udd01',y:'\ud835\udd02',z:'\ud835\udd03' },\r\n                fancy: { a:'\u03b1',b:'\u10a6',c:'\u0188',d:'\u0503',e:'\u04bd',f:'\u03dd',g:'\u0260',h:'\u050b',i:'\u03b9',j:'\u029d',k:'\u0199',l:'\u0285',m:'\u0271',n:'\u0273',o:'\u03c3',p:'\u03c1',q:'\u03d9',r:'\u027e',s:'\u0282',t:'\u019a',u:'\u03c5',v:'\u028b',w:'\u03c9',x:'x',y:'\u10e7',z:'\u0225' },\r\n                outline: { a:'\ud835\udd52',b:'\ud835\udd53',c:'\ud835\udd54',d:'\ud835\udd55',e:'\ud835\udd56',f:'\ud835\udd57',g:'\ud835\udd58',h:'\ud835\udd59',i:'\ud835\udd5a',j:'\ud835\udd5b',k:'\ud835\udd5c',l:'\ud835\udd5d',m:'\ud835\udd5e',n:'\ud835\udd5f',o:'\ud835\udd60',p:'\ud835\udd61',q:'\ud835\udd62',r:'\ud835\udd63',s:'\ud835\udd64',t:'\ud835\udd65',u:'\ud835\udd66',v:'\ud835\udd67',w:'\ud835\udd68',x:'\ud835\udd69',y:'\ud835\udd6a',z:'\ud835\udd6b' },\r\n                mono: { a:'\ud835\ude8a',b:'\ud835\ude8b',c:'\ud835\ude8c',d:'\ud835\ude8d',e:'\ud835\ude8e',f:'\ud835\ude8f',g:'\ud835\ude90',h:'\ud835\ude91',i:'\ud835\ude92',j:'\ud835\ude93',k:'\ud835\ude94',l:'\ud835\ude95',m:'\ud835\ude96',n:'\ud835\ude97',o:'\ud835\ude98',p:'\ud835\ude99',q:'\ud835\ude9a',r:'\ud835\ude9b',s:'\ud835\ude9c',t:'\ud835\ude9d',u:'\ud835\ude9e',v:'\ud835\ude9f',w:'\ud835\udea0',x:'\ud835\udea1',y:'\ud835\udea2',z:'\ud835\udea3' },\r\n                smallcap: { a:'\u1d00',b:'\u0299',c:'\u1d04',d:'\u1d05',e:'\u1d07',f:'\u0493',g:'\u0262',h:'\u029c',i:'\u026a',j:'\u1d0a',k:'\u1d0b',l:'\u029f',m:'\u1d0d',n:'\u0274',o:'\u1d0f',p:'\u1d18',q:'\u03d9',r:'\u0280',s:'s',t:'\u1d1b',u:'\u1d1c',v:'\u1d20',w:'\u1d21',x:'x',y:'\u028f',z:'\u1d22' }\r\n            };\r\n\r\n            const decorations = [\"\u270c\ufe0f\", \"\ud83c\udf08\", \"\ud83c\udf44\", \"\u2b50\", \"\ud83c\udf3b\", \"\ud83c\udf00\", \"\ud83e\udd8b\", \"\ud83c\udfb8\", \"\ud83d\udcc0\", \"\ud83d\udd25\", \"\u26a1\", \"\ud83d\udd7a\", \"\ud83c\udfa8\", \"\u262e\ufe0f\", \"\u2600\ufe0f\", \"\ud83c\udf6d\", \"\ud83c\udf44\", \"\ud83d\udef8\", \"\ud83d\udd76\ufe0f\", \"\ud83c\udf4d\", \"\ud83d\udc8e\", \"\u2604\ufe0f\", \"\ud83e\uddff\", \"\ud83c\udf40\", \"\ud83c\udf53\"];\r\n\r\n            function convert(text, map, prefix = '', suffix = '') {\r\n                const res = text.split('').map(char => {\r\n                    const l = char.toLowerCase();\r\n                    return map[l] || char;\r\n                }).join('');\r\n                return prefix + res + suffix;\r\n            }\r\n\r\n            function generate() {\r\n                const text = input.value || \"Funky Text\";\r\n                const styles = [];\r\n\r\n                \/\/ Base Styles\r\n                Object.keys(charset).forEach(k => styles.push(convert(text, charset[k])));\r\n                \r\n                \/\/ Decorative Styles (Loop to reach 50+)\r\n                decorations.forEach(dec => {\r\n                    styles.push(`${dec} ${convert(text, charset.bold)} ${dec}`);\r\n                    styles.push(`${convert(text, charset.groovy, dec + ' ', ' ' + dec)}`);\r\n                });\r\n\r\n                render(styles);\r\n            }\r\n\r\n            function render(list) {\r\n                output.innerHTML = '';\r\n                const limit = isExpanded ? list.length : 10;\r\n\r\n                for (let i = 0; i < limit; i++) {\r\n                    const item = list[i];\r\n                    if (!item) continue;\r\n\r\n                    const div = document.createElement('div');\r\n                    div.className = 'font-item';\r\n                    div.innerHTML = `\r\n                        <span class=\"font-preview\">${item}<\/span>\r\n                        <span class=\"copy-hint\">Click to Copy<\/span>\r\n                    `;\r\n                    div.onclick = () => copyText(item);\r\n                    output.appendChild(div);\r\n                }\r\n\r\n                loadBtn.style.display = (isExpanded || list.length <= 10) ? 'none' : 'inline-block';\r\n            }\r\n\r\n            async function copyText(text) {\r\n                try {\r\n                    await navigator.clipboard.writeText(text);\r\n                    toast.style.display = 'block';\r\n                    setTimeout(() => toast.style.display = 'none', 1500);\r\n                } catch (err) {\r\n                    console.error('Failed to copy', err);\r\n                }\r\n            }\r\n\r\n            \/\/ Events\r\n            input.oninput = generate;\r\n            \r\n            clearBtn.onclick = () => {\r\n                input.value = '';\r\n                generate();\r\n                input.focus();\r\n            };\r\n\r\n            loadBtn.onclick = () => {\r\n                isExpanded = true;\r\n                generate();\r\n            };\r\n\r\n            \/\/ Init\r\n            generate();\r\n\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n\r\n<!-- Section Breaker -->\r\n\r\n   <div class=\"content-wrapper-bg color-shade-1\">\r\n        <div class=\"max-width-wrapper content-padding\">\r\n            <div class=\"section-intro\">\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t<\/div>\r\n\t\t <\/div>\r\n<\/div>\r\n<!-- Supportive Content Section 1 -->\r\n    <div class=\"content-wrapper-bg color-shade-1\">\r\n        <div class=\"max-width-wrapper content-padding\">\r\n            <div class=\"section-intro\">\r\n                <h2 class=\"seo-title\">Groovy Text Styles for the Modern Hippie<\/h2>\r\n                <p class=\"seo-subtitle\">Transform your plain text into a psychedelic masterpiece with just one click.<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"info-grid\">\r\n                <div class=\"info-card\">\r\n                    <div class=\"card-icon\">\u270c\ufe0f<\/div>\r\n                    <h3>Psychedelic Variety<\/h3>\r\n                    <p>Access over 50 unique Unicode styles, from bubbly serif fonts to curvy disco-inspired scripts perfect for any retro project.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <div class=\"card-icon\">\ud83c\udf08<\/div>\r\n                    <h3>Instant Copy-Paste<\/h3>\r\n                    <p>No downloads or font installations required. Simply click any style to copy it directly to your clipboard for instant use.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <div class=\"card-icon\">\ud83c\udf44<\/div>\r\n                    <h3>70s Aesthetic<\/h3>\r\n                    <p>Bring back the era of peace, love, and flower power with fonts that capture the essence of vintage vinyl records and posters.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Supportive Content Section 2 -->\r\n    <div class=\"content-wrapper-bg color-shade-2\">\r\n        <div class=\"max-width-wrapper content-padding\">\r\n            <div class=\"section-intro\">\r\n                <h2 class=\"seo-title\">Level Up Your Social Media Presence<\/h2>\r\n                <p class=\"seo-subtitle\">Stand out in a crowded feed with eye-catching, funky typography.<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"info-grid\">\r\n                <div class=\"info-card-alt\">\r\n                    <div class=\"card-icon\">\ud83d\udcf1<\/div>\r\n                    <h3>Instagram & TikTok<\/h3>\r\n                    <p>Our 70s fonts work perfectly in bios, captions, and comments. Make your profile look like a vintage time machine.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card-alt\">\r\n                    <div class=\"card-icon\">\ud83d\udd7a<\/div>\r\n                    <h3>Digital Designs<\/h3>\r\n                    <p>Use these groovy characters in your Canva layouts, Photoshop headers, or even your digital scrapbooking projects.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card-alt\">\r\n                    <div class=\"card-icon\">\ud83c\udfa8<\/div>\r\n                    <h3>Brand Identity<\/h3>\r\n                    <p>Give your personal brand a nostalgic touch. The curvy, thick-and-thin lines evoke a sense of warmth and creativity.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Supportive Content Section 3 -->\r\n    <div class=\"content-wrapper-bg color-shade-1\">\r\n        <div class=\"max-width-wrapper content-padding\">\r\n            <div class=\"section-intro\">\r\n                <h2 class=\"seo-title\">The Science of Unicode Magic<\/h2>\r\n                <p class=\"seo-subtitle\">Why our retro font generator works on almost every platform.<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"info-grid\">\r\n                <div class=\"info-card\">\r\n                    <div class=\"card-icon\">\u262e\ufe0f<\/div>\r\n                    <h3>Universal Support<\/h3>\r\n                    <p>Since we use Unicode characters, your funky text will be visible on iPhones, Androids, and all desktop browsers without fail.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <div class=\"card-icon\">\ud83e\udd8b<\/div>\r\n                    <h3>No Hidden Costs<\/h3>\r\n                    <p>Our tool is 100% free to use forever. Generate unlimited groovy text for your commercial or personal vintage projects.<\/p>\r\n                <\/div>\r\n                <div class=\"info-card\">\r\n                    <div class=\"card-icon\">\ud83d\udcc0<\/div>\r\n                    <h3>SEO Friendly<\/h3>\r\n                    <p>While looking like a font, these are actually characters that search engines can read, keeping your content accessible.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <style>\r\n        \/* Additional Styling for Content Sections *\/\r\n        .content-wrapper-bg {\r\n            width: 100%;\r\n            display: flex;\r\n            justify-content: center;\r\n        }\r\n\r\n        \/* Color Variations as requested *\/\r\n        .color-shade-1 { background-color: #f5eedf; } \/* Slightly different shade of card-bg *\/\r\n        .color-shade-2 { background-color: var(--card-bg); } \/* Inherit tool card-bg *\/\r\n\r\n        .content-padding {\r\n            padding: 60px 20px;\r\n        }\r\n\r\n        .section-intro {\r\n            text-align: center;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        .seo-title {\r\n            font-size: 2.2rem;\r\n            color: var(--vintage-bg);\r\n            margin-bottom: 10px;\r\n            font-weight: 800;\r\n        }\r\n\r\n        .seo-subtitle {\r\n            font-size: 1rem;\r\n            color: #5d3a1a;\r\n            max-width: 700px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .info-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 25px;\r\n            width: 100%;\r\n        }\r\n\r\n        \/* Card Type 1: Tool Component Color *\/\r\n        .info-card {\r\n            background: var(--card-bg);\r\n            padding: 40px 30px;\r\n            border-radius: var(--radius);\r\n            text-align: center;\r\n            position: relative;\r\n            transition: transform 0.3s ease;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.05);\r\n        }\r\n\r\n        \/* Card Type 2: Shade Color *\/\r\n        .info-card-alt {\r\n            background: #f5eedf;\r\n            padding: 40px 30px;\r\n            border-radius: var(--radius);\r\n            text-align: center;\r\n            position: relative;\r\n            transition: transform 0.3s ease;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.05);\r\n        }\r\n\r\n        \/* Hover Effect: Border-top starts from center *\/\r\n        .info-card::before, .info-card-alt::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 50%;\r\n            width: 100%;\r\n            height: 4px;\r\n            background: var(--button-gradient);\r\n            transform: translateX(-50%) scaleX(0);\r\n            transition: transform 0.4s ease;\r\n            border-radius: var(--radius) var(--radius) 0 0;\r\n        }\r\n\r\n        .info-card:hover::before, .info-card-alt:hover::before {\r\n            transform: translateX(-50%) scaleX(1);\r\n        }\r\n\r\n        .info-card:hover, .info-card-alt:hover {\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        .card-icon {\r\n            font-size: 3rem;\r\n            margin-bottom: 20px;\r\n            display: inline-block;\r\n            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        }\r\n\r\n        .info-card:hover .card-icon, .info-card-alt:hover .card-icon {\r\n            transform: scale(1.2) rotate(5deg);\r\n        }\r\n\r\n        .info-grid h3 {\r\n            font-size: 1.4rem !important;\r\n            margin-bottom: 15px;\r\n            color: var(--vintage-bg);\r\n            font-weight: 700;\r\n        }\r\n\r\n        .info-grid p {\r\n            line-height: 1.6;\r\n            font-size: 0.95rem;\r\n            color: #5d3a1a;\r\n        }\r\n\r\n        \/* Responsive adjustments *\/\r\n        @media (max-width: 992px) {\r\n            .info-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n            }\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            .info-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            .content-padding {\r\n                padding: 40px 10px;\r\n            }\r\n            .seo-title {\r\n                font-size: 1.6rem !important;\r\n            }\r\n        }\r\n    <\/style><\/div>\n\t\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":"","protected":false},"author":3,"featured_media":0,"parent":7051,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7105","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/themeton.com\/wp-json\/wp\/v2\/pages\/7105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themeton.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themeton.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themeton.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/themeton.com\/wp-json\/wp\/v2\/comments?post=7105"}],"version-history":[{"count":4,"href":"https:\/\/themeton.com\/wp-json\/wp\/v2\/pages\/7105\/revisions"}],"predecessor-version":[{"id":7109,"href":"https:\/\/themeton.com\/wp-json\/wp\/v2\/pages\/7105\/revisions\/7109"}],"up":[{"embeddable":true,"href":"https:\/\/themeton.com\/wp-json\/wp\/v2\/pages\/7051"}],"wp:attachment":[{"href":"https:\/\/themeton.com\/wp-json\/wp\/v2\/media?parent=7105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}