{"id":7096,"date":"2026-03-23T00:00:37","date_gmt":"2026-03-23T00:00:37","guid":{"rendered":"https:\/\/raistheme.com\/?page_id=7096"},"modified":"2026-04-06T11:42:50","modified_gmt":"2026-04-06T11:42:50","slug":"curved","status":"publish","type":"page","link":"https:\/\/raistheme.com\/tools\/font-generator\/curved\/","title":{"rendered":"Curved Font Generator \u2013 Create Curved Text Styles Free"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7096\" class=\"elementor elementor-7096\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65f3be35 e-con-full e-flex e-con e-parent\" data-id=\"65f3be35\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e52fd41 elementor-widget elementor-widget-shortcode\" data-id=\"2e52fd41\" 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=\"curved-font-generator-wrapper\">\r\n  <div id=\"curved-font-generator\">\r\n    <!-- Header Section -->\r\n    <header class=\"tool-header\">\r\n      <h1> Curved Font Generator \u2013 Create Curved Text Styles Free <\/h1>\r\n      <p class=\"subheading\">\u2728 Transform your text into beautiful, eye-catching curved designs instantly! Perfect for logos, social media, and more! \ud83d\ude80<\/p>\r\n    <\/header>\r\n\r\n    <!-- Generator Tool Section -->\r\n    <section class=\"generator-tool\">\r\n      <!-- Input Section -->\r\n      <div class=\"input-section\">\r\n        <div class=\"input-wrapper\">\r\n          <div class=\"input-header\">\r\n            <label for=\"text-input\">\u270f\ufe0f Enter Your Text<\/label>\r\n            <div class=\"input-actions\">\r\n              <button id=\"random-btn\" aria-label=\"Random text\">\ud83c\udfb2 Random<\/button>\r\n              <button id=\"clear-btn\" aria-label=\"Clear text\">\ud83d\uddd1\ufe0f Clear<\/button>\r\n              <span id=\"char-count\">0\/200 \ud83d\udccf<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <textarea id=\"text-input\" placeholder=\"Type something amazing here... \u2728\" rows=\"3\"><\/textarea>\r\n          \r\n          <!-- NEW: Expanded Feature Toolbar -->\r\n          <div class=\"features-container\">\r\n            <!-- Group 1: Case Converters -->\r\n            <div class=\"feature-group\">\r\n              <span class=\"group-label\">\ud83d\udd20 Case:<\/span>\r\n              <button class=\"tool-btn\" data-action=\"upper\" title=\"UPPERCASE\">ABC<\/button>\r\n              <button class=\"tool-btn\" data-action=\"lower\" title=\"lowercase\">abc<\/button>\r\n              <button class=\"tool-btn\" data-action=\"title\" title=\"Title Case\">Abc<\/button>\r\n              <button class=\"tool-btn\" data-action=\"alternating\" title=\"aLtErNaTiNg\">aBc<\/button>\r\n            <\/div>\r\n\r\n            <!-- Group 2: Formatters -->\r\n            <div class=\"feature-group\">\r\n              <span class=\"group-label\">\ud83d\udee0\ufe0f Format:<\/span>\r\n              <button class=\"tool-btn\" data-action=\"reverse\" title=\"Reverse Text\">\ud83d\udd01 Flip<\/button>\r\n              <button class=\"tool-btn\" data-action=\"nospace\" title=\"Remove Spaces\">NoSpace<\/button>\r\n              <button class=\"tool-btn\" data-action=\"snake\" title=\"Snake Case\">_snake_<\/button>\r\n              <button class=\"tool-btn\" data-action=\"kebab\" title=\"Kebab Case\">-kebab-<\/button>\r\n            <\/div>\r\n\r\n            <!-- Group 3: Decorators -->\r\n            <div class=\"feature-group\">\r\n              <span class=\"group-label\">\u2728 Decor:<\/span>\r\n              <button class=\"tool-btn\" data-action=\"decorate\" title=\"Sparkles\">\u2728<\/button>\r\n              <button class=\"tool-btn\" data-action=\"hearts\" title=\"Hearts\">\u2665<\/button>\r\n              <button class=\"tool-btn\" data-action=\"stars\" title=\"Stars\">\u2605<\/button>\r\n              <button class=\"tool-btn\" data-action=\"brackets\" title=\"Brackets\">[ ]<\/button>\r\n              <button class=\"tool-btn\" data-action=\"arrows\" title=\"Arrows\">\u00bb \u00ab<\/button>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Output Section (Unlimited Height) -->\r\n      <div class=\"output-section\">\r\n        <div id=\"results-container\" class=\"results-container\">\r\n          <!-- Results generated dynamically -->\r\n        <\/div>\r\n        <div class=\"load-more-container\">\r\n          <button id=\"load-more-btn\" class=\"load-more-btn\">\r\n            Load More Styles \u23ec\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- Content Sections -->\r\n   \r\n\r\n<style>\r\n  \/* Google Fonts Import *\/\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700;800&display=swap');\r\n  \r\n  \/* Font Awesome Icons *\/\r\n  @import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css');\r\n\r\n  \/* Full-Width Wrapper with Animated Background *\/\r\n  #curved-font-generator-wrapper {\r\n    width: 100%;\r\n    background: linear-gradient(-45deg, #845EC2, #D65DB1, #FF6F91, #FF9671, #FFC75F, #F9F871);\r\n    background-size: 400% 400%;\r\n    animation: gradientShift 15s ease infinite;\r\n    padding: 20px 0 0 0; \/* Changed: 0 at the bottom *\/\r\n    min-height: auto;    \/* Changed: from 100vh to auto *\/\r\n}\r\n\r\n\r\n  @keyframes gradientShift {\r\n    0% { background-position: 0% 50%; }\r\n    50% { background-position: 100% 50%; }\r\n    100% { background-position: 0% 50%; }\r\n  }\r\n\r\n  \/* Base Styles & Variables *\/\r\n  :root {\r\n    --h1-size: clamp(1.6rem, 4vw, 3.2rem);\r\n    --h2-size: clamp(1.3rem, 3vw, 2.2rem);\r\n    --body-size: clamp(0.9rem, 1vw, 1.2rem);\r\n    --small-size: clamp(0.75rem, 1vw, 0.95rem);\r\n    \r\n    --sp-xs: 2px;\r\n    --sp-sm: 4px;\r\n    --sp-md: 8px;\r\n    --sp-lg: 12px;\r\n    --sp-xl: 16px;\r\n    \r\n    --pad-clamp: clamp(0.25rem, 1.5vw, 0.75rem);\r\n    --gap-clamp: clamp(0.25rem, 1.5vw, 0.75rem);\r\n    --margin-clamp: clamp(0.25rem, 1.5vw, 0.75rem);\r\n\r\n    \/* Color Palette *\/\r\n    --primary-gradient: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%);\r\n    --secondary-gradient: linear-gradient(135deg, #f12711 0%, #f5af19 100%);\r\n    --accent-gradient: linear-gradient(135deg, #00B4DB 0%, #0083B0 100%);\r\n    --card-bg: rgba(255, 255, 255, 0.98);\r\n    --text-primary: #2c3e50;\r\n    --text-secondary: #4a5568;\r\n    --border-color: rgba(142, 45, 226, 0.2);\r\n    --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.08);\r\n    --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.15);\r\n    --shadow-colored: 0 8px 25px rgba(142, 45, 226, 0.25);\r\n    --border-radius: 20px;\r\n    --transition: all 0.3s ease;\r\n  }\r\n\r\n#curved-font-generator {\r\n    font-family: 'Poppins', sans-serif;\r\n    line-height: 1.5;\r\n    color: var(--text-primary);\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: var(--pad-clamp) var(--pad-clamp) 0 var(--pad-clamp); \/* 0 at bottom *\/\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n  \/* Header Styles *\/\r\n  .tool-header {\r\n    text-align: center;\r\n    color: #fff;\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  h1 {\r\n    font-size: var(--h1-size);\r\n    line-height: 1.2;\r\n    font-weight: 800;\r\n    margin-bottom: var(--sp-md);\r\n    text-shadow: 0 5px 15px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  h2 {\r\n    font-size: var(--h2-size);\r\n    line-height: 1.3;\r\n    margin-bottom: var(--sp-lg);\r\n    color: #8E2DE2;\r\n  }\r\n\r\n  .subheading {\r\n    font-size: var(--body-size);\r\n    max-width: 800px;\r\n    margin: 0 auto;\r\n    color: rgba(255, 255, 255, 1);\r\n    font-weight: 500;\r\n    text-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n  }\r\n\r\n  \/* Generator Tool Layout *\/\r\n  .generator-tool {\r\n    background: var(--card-bg);\r\n    backdrop-filter: blur(10px);\r\n    border-radius: var(--border-radius);\r\n    padding: calc(var(--pad-clamp) * 2);\r\n    box-shadow: var(--shadow-heavy);\r\n    margin-bottom: calc(var(--margin-clamp) * 4);\r\n    border: 2px solid #fff;\r\n    overflow: hidden;\r\n    position: relative;\r\n  }\r\n\r\n  .generator-tool::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 6px;\r\n    background: var(--primary-gradient);\r\n  }\r\n\r\n  \/* Input Section *\/\r\n  .input-section {\r\n    margin-bottom: calc(var(--margin-clamp) * 2);\r\n  }\r\n\r\n  .input-wrapper {\r\n    background: #f8f9fa;\r\n    padding: calc(var(--pad-clamp) * 1.5);\r\n    border-radius: 15px;\r\n    border: 1px solid #e2e8f0;\r\n    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);\r\n  }\r\n\r\n  .input-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: var(--sp-md);\r\n  }\r\n\r\n  .input-header label {\r\n    font-weight: 700;\r\n    color: var(--text-primary);\r\n    font-size: var(--body-size);\r\n  }\r\n\r\n  .input-actions {\r\n    display: flex;\r\n    gap: var(--sp-lg);\r\n    align-items: center;\r\n  }\r\n\r\n  #char-count {\r\n    font-size: var(--small-size);\r\n    color: var(--text-secondary);\r\n    font-weight: 600;\r\n  }\r\n\r\n  #clear-btn, #random-btn {\r\n    background: none;\r\n    border: none;\r\n    font-size: var(--small-size);\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    transition: var(--transition);\r\n  }\r\n\r\n  #clear-btn { color: #e74c3c; }\r\n  #random-btn { color: #8E2DE2; }\r\n\r\n  #clear-btn:hover, #random-btn:hover {\r\n    transform: scale(1.05);\r\n  }\r\n\r\n  textarea#text-input {\r\n    width: 100%;\r\n    padding: var(--sp-lg);\r\n    border: 2px solid #e2e8f0;\r\n    border-radius: 12px;\r\n    font-size: var(--body-size);\r\n    font-family: 'Poppins', sans-serif;\r\n    resize: vertical;\r\n    transition: var(--transition);\r\n    outline: none;\r\n    background: #fff;\r\n    color: var(--text-primary);\r\n  }\r\n\r\n  textarea#text-input:focus {\r\n    border-color: #8E2DE2;\r\n    box-shadow: 0 0 0 4px rgba(142, 45, 226, 0.1);\r\n  }\r\n\r\n  \/* NEW: Features Container *\/\r\n  .features-container {\r\n    margin-top: 15px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n  }\r\n\r\n  .feature-group {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n    align-items: center;\r\n    padding-bottom: 8px;\r\n    border-bottom: 1px dashed #e2e8f0;\r\n  }\r\n\r\n  .feature-group:last-child {\r\n    border-bottom: none;\r\n  }\r\n\r\n  .group-label {\r\n    font-size: 0.85rem;\r\n    font-weight: 700;\r\n    color: #8E2DE2;\r\n    margin-right: 5px;\r\n    min-width: 65px;\r\n  }\r\n\r\n  .tool-btn {\r\n    background: white;\r\n    border: 1px solid #cbd5e0;\r\n    padding: 6px 14px;\r\n    border-radius: 50px;\r\n    font-size: 0.8rem;\r\n    cursor: pointer;\r\n    transition: var(--transition);\r\n    font-weight: 600;\r\n    color: #4a5568;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n    box-shadow: 0 2px 4px rgba(0,0,0,0.05);\r\n  }\r\n\r\n  .tool-btn:hover {\r\n    background: #8E2DE2;\r\n    color: white;\r\n    border-color: #8E2DE2;\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 4px 8px rgba(142, 45, 226, 0.2);\r\n  }\r\n\r\n  \/* Output Section *\/\r\n  .output-section {\r\n    width: 100%;\r\n  }\r\n\r\n  .results-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--gap-clamp);\r\n    width: 100%;\r\n  }\r\n\r\n  .result-card {\r\n    background: #fff;\r\n    border: 1px solid #edf2f7;\r\n    border-left: 5px solid #8E2DE2; \/* Accent Border *\/\r\n    border-radius: 12px;\r\n    padding: var(--sp-xl);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: var(--sp-lg);\r\n    transition: var(--transition);\r\n    opacity: 0;\r\n    animation: fadeIn 0.5s forwards;\r\n    box-shadow: var(--shadow-light);\r\n  }\r\n\r\n  @keyframes fadeIn {\r\n    to { opacity: 1; }\r\n  }\r\n\r\n  .result-card:hover {\r\n    transform: translateY(-2px) translateX(2px);\r\n    border-color: #D65DB1;\r\n    box-shadow: var(--shadow-heavy);\r\n  }\r\n\r\n  .style-info {\r\n    flex: 1;\r\n    min-width: 0;\r\n  }\r\n\r\n  .style-label {\r\n    font-size: var(--small-size);\r\n    color: #8E2DE2;\r\n    margin-bottom: var(--sp-xs);\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.8px;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .generated-text {\r\n    font-size: var(--body-size);\r\n    color: #2d3748;\r\n    word-break: break-all;\r\n    font-weight: 500;\r\n  }\r\n\r\n  .copy-btn {\r\n    background: var(--primary-gradient);\r\n    color: white;\r\n    border: none;\r\n    padding: var(--sp-md) var(--sp-xl);\r\n    border-radius: 50px;\r\n    font-size: var(--small-size);\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    flex-shrink: 0;\r\n    transition: var(--transition);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    box-shadow: 0 4px 15px rgba(142, 45, 226, 0.3);\r\n  }\r\n\r\n  .copy-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 20px rgba(142, 45, 226, 0.4);\r\n  }\r\n\r\n  .copy-btn.copied {\r\n    background: #00b894; \/* Success Green *\/\r\n    box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);\r\n  }\r\n\r\n  \/* Load More Button *\/\r\n  .load-more-container {\r\n    text-align: center;\r\n    margin-top: calc(var(--margin-clamp) * 3);\r\n  }\r\n\r\n  .load-more-btn {\r\n    background: #fff;\r\n    color: #8E2DE2;\r\n    border: 2px solid #8E2DE2;\r\n    padding: 12px 30px;\r\n    border-radius: 50px;\r\n    font-weight: 700;\r\n    font-size: var(--body-size);\r\n    cursor: pointer;\r\n    transition: var(--transition);\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n\r\n  .load-more-btn:hover {\r\n    background: #8E2DE2;\r\n    color: #fff;\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 5px 15px rgba(142, 45, 226, 0.3);\r\n  }\r\n\r\n  .load-more-btn.hidden {\r\n    display: none;\r\n  }\r\n\r\n  \/* Content Sections *\/\r\n  .content-sections {\r\n    margin-top: calc(var(--margin-clamp) * 4);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: calc(var(--gap-clamp) * 2);\r\n  }\r\n\r\n  .content-card {\r\n    background: var(--card-bg);\r\n    backdrop-filter: blur(10px);\r\n    border-radius: var(--border-radius);\r\n    padding: calc(var(--pad-clamp) * 2);\r\n    box-shadow: var(--shadow-medium);\r\n    border: 1px solid rgba(255, 255, 255, 0.5);\r\n  }\r\n\r\n  .content-card p, .content-card li {\r\n    font-size: var(--body-size);\r\n    color: var(--text-secondary);\r\n    line-height: 1.6;\r\n    margin-bottom: var(--sp-md);\r\n  }\r\n\r\n  .content-card ul {\r\n    padding-left: 20px;\r\n    list-style-type: none;\r\n  }\r\n  \r\n  .content-card li {\r\n    position: relative;\r\n    padding-left: 25px;\r\n  }\r\n  \r\n  .content-card li::before {\r\n    content: \"\u2728\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 2px;\r\n    font-size: 0.9em;\r\n  }\r\n\r\n  \/* FAQ Accordion *\/\r\n  .faq-item {\r\n    border-bottom: 1px solid #e2e8f0;\r\n    margin-bottom: var(--sp-md);\r\n  }\r\n\r\n  .faq-question {\r\n    width: 100%;\r\n    text-align: left;\r\n    background: none;\r\n    border: none;\r\n    padding: var(--sp-lg) 0;\r\n    font-size: var(--body-size);\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    color: var(--text-primary);\r\n    transition: color 0.2s;\r\n  }\r\n  \r\n  .faq-question:hover {\r\n    color: #8E2DE2;\r\n  }\r\n\r\n  .faq-question::after {\r\n    content: \"\\f067\";\r\n    font-family: \"Font Awesome 6 Free\";\r\n    font-weight: 900;\r\n    font-size: 0.9em;\r\n    transition: transform 0.3s;\r\n    color: #8E2DE2;\r\n  }\r\n\r\n  .faq-question[aria-expanded=\"true\"]::after {\r\n    transform: rotate(45deg);\r\n  }\r\n\r\n  .faq-answer {\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    transition: max-height 0.3s ease;\r\n  }\r\n\r\n  \/* Notification *\/\r\n  .notification {\r\n    position: fixed;\r\n    bottom: 30px;\r\n    right: 30px;\r\n    background: var(--primary-gradient);\r\n    color: white;\r\n    padding: 15px 25px;\r\n    border-radius: 50px;\r\n    box-shadow: var(--shadow-colored);\r\n    transform: translateY(100px);\r\n    opacity: 0;\r\n    transition: var(--transition);\r\n    z-index: 1000;\r\n    font-weight: 600;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n  }\r\n  \r\n  .notification.show {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .input-header {\r\n      flex-direction: column;\r\n      align-items: flex-start;\r\n      gap: var(--sp-sm);\r\n    }\r\n    .input-actions {\r\n      width: 100%;\r\n      justify-content: space-between;\r\n    }\r\n    .group-label {\r\n      width: 100%;\r\n      margin-bottom: 5px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ --- Elements ---\r\n    const textInput = document.getElementById('text-input');\r\n    const clearBtn = document.getElementById('clear-btn');\r\n    const randomBtn = document.getElementById('random-btn');\r\n    const charCount = document.getElementById('char-count');\r\n    const resultsContainer = document.getElementById('results-container');\r\n    const loadMoreBtn = document.getElementById('load-more-btn');\r\n    const toolBtns = document.querySelectorAll('.tool-btn[data-action]');\r\n    \r\n    \/\/ --- State ---\r\n    let currentInput = \"\";\r\n    let visibleItemsCount = window.innerWidth >= 992 ? 10 : 5;\r\n    const batchSize = 10;\r\n\r\n    \/\/ Notification\r\n    const notification = document.createElement('div');\r\n    notification.className = 'notification';\r\n    notification.innerHTML = '<span>\u2705 Copied to clipboard!<\/span>';\r\n    document.body.appendChild(notification);\r\n\r\n    \/\/ --- EXACT CHARACTER MAPPINGS (a-z) ---\r\n    \/\/ Used for strict 1:1 mapping to ensure perfect output match with prompt\r\n    const maps = {\r\n      \/\/ 1. Bubble Curved (a-z: 24D0-24E9)\r\n      bubble: \"\u24d0\u24d1\u24d2\u24d3\u24d4\u24d5\u24d6\u24d7\u24d8\u24d9\u24da\u24db\u24dc\u24dd\u24de\u24df\u24e0\u24e1\u24e2\u24e3\u24e4\u24e5\u24e6\u24e7\u24e8\u24e9\",\r\n      \/\/ 2. Dark Bubble (a-z: 1F150-1F169)\r\n      bubbleDark: \"\ud83c\udd50\ud83c\udd51\ud83c\udd52\ud83c\udd53\ud83c\udd54\ud83c\udd55\ud83c\udd56\ud83c\udd57\ud83c\udd58\ud83c\udd59\ud83c\udd5a\ud83c\udd5b\ud83c\udd5c\ud83c\udd5d\ud83c\udd5e\ud83c\udd5f\ud83c\udd60\ud83c\udd61\ud83c\udd62\ud83c\udd63\ud83c\udd64\ud83c\udd65\ud83c\udd66\ud83c\udd67\ud83c\udd68\ud83c\udd69\",\r\n      \/\/ 3. Light Bubble (a-z: 24B6-24CF)\r\n      bubbleLight: \"\u24b6\u24b7\u24b8\u24b9\u24ba\u24bb\u24bc\u24bd\u24be\u24bf\u24c0\u24c1\u24c2\u24c3\u24c4\u24c5\u24c6\u24c7\u24c8\u24c9\u24ca\u24cb\u24cc\u24cd\u24ce\u24cf\",\r\n      \/\/ 4. Swing Script (Bold Script)\r\n      swingScript: \"\ud835\udcea\ud835\udceb\ud835\udcec\ud835\udced\ud835\udcee\ud835\udcef\ud835\udcf0\ud835\udcf1\ud835\udcf2\ud835\udcf3\ud835\udcf4\ud835\udcf5\ud835\udcf6\ud835\udcf7\ud835\udcf8\ud835\udcf9\ud835\udcfa\ud835\udcfb\ud835\udcfc\ud835\udcfd\ud835\udcfe\ud835\udcff\ud835\udd00\ud835\udd01\ud835\udd02\ud835\udd03\",\r\n      \/\/ 5. Looped Smooth Script (Mathematical Script)\r\n      smoothScript: \"\ud835\udcb6\ud835\udcb7\ud835\udcb8\ud835\udcb9\ud835\udc52\ud835\udcbb\ud835\udc54\ud835\udcbd\ud835\udcbe\ud835\udcbf\ud835\udcc0\ud835\udcc1\ud835\udcc2\ud835\udcc3\ud835\udc5c\ud835\udcc5\ud835\udcc6\ud835\udcc7\ud835\udcc8\ud835\udcc9\ud835\udcca\ud835\udccb\ud835\udccc\ud835\udccd\ud835\udcce\ud835\udccf\",\r\n      \/\/ 6. Elegant Thin Script (Fraktur)\r\n      elegantThin: \"\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\",\r\n      \/\/ 7. Handwritten Mono\r\n      handwritten: \"\ud835\ude8a\ud835\ude8b\ud835\ude8c\ud835\ude8d\ud835\ude8e\ud835\ude8f\ud835\ude90\ud835\ude91\ud835\ude92\ud835\ude93\ud835\ude94\ud835\ude95\ud835\ude96\ud835\ude97\ud835\ude98\ud835\ude99\ud835\ude9a\ud835\ude9b\ud835\ude9c\ud835\ude9d\ud835\ude9e\ud835\ude9f\ud835\udea0\ud835\udea1\ud835\udea2\ud835\udea3\",\r\n      \/\/ 8. Round Sans Curved (Bold Fraktur)\r\n      roundSans: \"\ud835\udd86\ud835\udd87\ud835\udd88\ud835\udd89\ud835\udd8a\ud835\udd8b\ud835\udd8c\ud835\udd8d\ud835\udd8e\ud835\udd8f\ud835\udd90\ud835\udd91\ud835\udd92\ud835\udd93\ud835\udd94\ud835\udd95\ud835\udd96\ud835\udd97\ud835\udd98\ud835\udd99\ud835\udd9a\ud835\udd9b\ud835\udd9c\ud835\udd9d\ud835\udd9e\ud835\udd9f\",\r\n      \/\/ 9. Wide Smallcaps\r\n      wideSmall: \"\u1d00\u0299\u1d04\u1d05\u1d07\u0493\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280s\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d22\",\r\n      \/\/ 10. Bent Curve Serif\r\n      bentCurve: \"\u0251\u0253\u0188\u0257\u025b\u0192\u0260\u0266\u0269\u025f\u0199\u0285\u0271\u0273\u00f8\u01a5\u024b\u0280s\u0236\u028a\u028b\u028d\u04b3\u028f\u01b6\",\r\n      \/\/ 11. Soft Circle Thin (Prefix style, logic handled differently)\r\n      \/\/ 12. Arc-Side Bubble (Wrap style)\r\n      \/\/ 13. Wide Curve Brackets (Wrap style)\r\n      \/\/ 14. Circular Frame (Enclosed Alphanumeric Supplement)\r\n      circularFrame: \"\ud83c\udd10\ud83c\udd11\ud83c\udd12\ud83c\udd13\ud83c\udd14\ud83c\udd15\ud83c\udd16\ud83c\udd17\ud83c\udd18\ud83c\udd19\ud83c\udd1a\ud83c\udd1b\ud83c\udd1c\ud83c\udd1d\ud83c\udd1e\ud83c\udd1f\ud83c\udd20\ud83c\udd21\ud83c\udd22\ud83c\udd23\ud83c\udd24\ud83c\udd25\ud83c\udd26\ud83c\udd27\ud83c\udd28\ud83c\udd29\",\r\n      \/\/ 15. Puffy Round Script\r\n      puffyRound: \"\uabae\uabaf\uabb0\uabb1\uabb2\uabb3\uabb4\uabb5\uabb6\uabb7\uabb8\uabb9\uabba\uabbb\uabbc\uabbd\uabbe\uabbf\uabc0\uabc1\uabc2\uabc3\uabc4\uabc5\uabc6\",\r\n      \/\/ 16. Squishy Wide Round\r\n      squishyWide: \"\u15e9\u15f7\u1455\u15de\u15f4\u15b4\u13c0\u157c\u13c6\u148d\u13e6\u13de\u15f0\u1609\u15dd\u1548\u146b\u1587\u1515\u13a2\u144c\u142f\u15ef\u166d\u13a9\u1614\",\r\n      \/\/ 17. Cartoon Round\r\n      cartoon: \"\u0e04\u0e52\u03c2\u0e54\u0454\u017f\ufeee\u0452\u0e40\ufeee\u043a\u026d\u05ef\u0e20\u05df\u03c3\u03c1\u06f9\u0433\u0e23\u0547\u0e22\u05e5\u0936\u0579\",\r\n      \/\/ 19. Looped Round Latin (Fallback to map10 mostly, but prompt said 'unique')\r\n      loopedLatin: \"\u2c65\u2c67\u2c65\u2c66\u2c68\u2c77\u2c78\u2c79\u2c7a\u2c7b\u2c7c\u2c7d\u2c7e\u2c7f\u0251\u0253\u0188\u0257\u025b\u0192\u0260\u0266\u0269\u025f\u0199\u0285\", \/\/ Partial match to prompt visual + fillers\r\n      \/\/ 29. Dome Curve (Superscript)\r\n      dome: \"\u1d43\u1d47\u1d9c\u1d48\u1d49\u1da0\u1d4d\u02b0\u2071\u02b2\u1d4f\u02e1\u1d50\u207f\u1d52\u1d56\ud801\udfa5\u02b3\u02e2\u1d57\u1d58\u1d5b\u02b7\u02e3\u02b8\u1dbb\",\r\n      \/\/ 31. Curved Geoffrey\r\n      geoffrey: \"\u0251\u0253\u0188\u0256\u025b\u025f\u0260\u0266\u0268\u029d\u0199\u029f\u0271\u0272\u0254\u01a5\u024b\u0280\u0282\u0236\u028a\u028b\u026f\u04b3\u028f\u01b6\",\r\n      \/\/ 32. Round Serif Lite\r\n      serifLite: \"\u1e01\u1e03\u010b\u1e0b\u0117\u1e1f\u0121\u1e23\u1ecb\u0133\u0137\u0140\u1e43\u1e45\u1e53\u1e55\u02a0\u1e59\u1e61\u1e6b\u1e73\u1e7d\u1e85\u1e8b\u1e8f\u1e93\",\r\n      \/\/ 33. Circle Flick\r\n      circleFlick: \"\u00e5\u0253\u00e7\u00f0\u00e9\u0192\u011f\u0127\u00ef\u0135\u0137\u013a\u1e43\u00f1\u00f6\u00fe\u02a0\u0159\u015b\u0163\u00fc\u1e7d\u0175\u1e8b\u00ff\u017e\",\r\n      \/\/ 34. Soft Spiral\r\n      softSpiral: \"\u03b1\u0432c\u0257\u03b5\u0493gh\u03b9j\u0199\u2113\u043c\u0438\u03c3\u03c1q\u044fs\u0442\u03c5v\u03c9xyz\",\r\n      \/\/ 35. Wide Rounded Curves\r\n      wideRounded: \"\u0e04\u0e20\u0e23\u0e2c\u0e22\u0ba3\u0bb1\u0e25\u0e07\u0e0a\u0e0d\u0e1c\u0e20\u0e27\u0e28\u0e29\u0e2c\u0e10\u0e11\u0e27\u0e28\u0e1f\",\r\n      \/\/ 36. Curl Extension\r\n      curlExt: \"\u023a\u0181\u023b\u0110\u0246\u1e1e\u0193\u021e\u020a\u0237\u023d\u023e\u1e3e\u0220\u01fe\u01a4\u024a\u024c\u0218\u021a\u0244\u0245\u1e86\u1e8c\u024e\u1e92\",\r\n      \/\/ 37. Loop Serif Curve\r\n      loopSerif: \"\u1d00\u0299\u1d04\u1d05\u1d07\ua730\u0262\u029c\u026a\u1d0a\u1d0b\u029f\u1d0d\u0274\u1d0f\u1d18\u01eb\u0280\ua731\u1d1b\u1d1c\u1d20\u1d21x\u028f\u1d22\",\r\n      \/\/ 38. Round Flow Gothic\r\n      roundGothic: \"\ud835\udd86\ud835\udd87\ud835\udd88\ud835\udd89\ud835\udd8a\ud835\udd8b\ud835\udd8c\ud835\udd8d\ud835\udd8e\ud835\udd8f\ud835\udd90\ud835\udd91\ud835\udd92\ud835\udd93\ud835\udd94\ud835\udd95\ud835\udd96\ud835\udd97\ud835\udd98\ud835\udd99\ud835\udd9a\ud835\udd9b\ud835\udd9c\ud835\udd9d\ud835\udd9e\ud835\udd9f\",\r\n      \/\/ 39. Tilted Curve Italic (Sans-Serif Italic)\r\n      tiltedItalic: \"\ud835\ude22\ud835\ude23\ud835\ude24\ud835\ude25\ud835\ude26\ud835\ude27\ud835\ude28\ud835\ude29\ud835\ude2a\ud835\ude2b\ud835\ude2c\ud835\ude2d\ud835\ude2e\ud835\ude2f\ud835\ude30\ud835\ude31\ud835\ude32\ud835\ude33\ud835\ude34\ud835\ude35\ud835\ude36\ud835\ude37\ud835\ude38\ud835\ude39\ud835\ude3a\ud835\ude3b\",\r\n      \/\/ 40. Smooth Calligraphic (Bold Italic)\r\n      calligraphic: \"\ud835\udc82\ud835\udc83\ud835\udc84\ud835\udc85\ud835\udc86\ud835\udc87\ud835\udc88\ud835\udc89\ud835\udc8a\ud835\udc8b\ud835\udc8c\ud835\udc8d\ud835\udc8e\ud835\udc8f\ud835\udc90\ud835\udc91\ud835\udc92\ud835\udc93\ud835\udc94\ud835\udc95\ud835\udc96\ud835\udc97\ud835\udc98\ud835\udc99\ud835\udc9a\ud835\udc9b\",\r\n      \/\/ 41. Plump Rounded (SmallCaps) - Used as base for complex logic\r\n      \/\/ 42. Thick Bubble (Same as Dark Bubble)\r\n      \/\/ 43. Single Line Curve (Math Italic\/Bold mix per prompt)\r\n      singleLine: \"\ud835\udc4e\ud835\udc4f\ud835\udc50\ud835\udc51\ud835\udc52\ud835\udc53\ud835\udc54\ud835\udc89\ud835\udc8a\ud835\udc8b\ud835\udc8c\ud835\udc8d\ud835\udc8e\ud835\udc8f\ud835\udc5c\ud835\udc91\ud835\udcc6\ud835\udcc7\ud835\udcc8\ud835\udcc9\ud835\udcca\ud835\udccb\ud835\udccc\ud835\udccd\ud835\udcce\ud835\udccf\",\r\n      \/\/ 44. Swoop Rounded\r\n      swoop: \"\u0105\u0253\u00e7\u0111\u0119\u025f\u01f5\u0127\u012f\u012f\u0137\u013c\u0271\u0272\u01eb\u1e55\u024b\u0159\u015b\u0165\u0173\u1e7d\u1e83\u1e8b\u1e8f\u017c\",\r\n      \/\/ 47. Looped Casual\r\n      loopedCasual: \"\u0251\u0253\u0188\u0257\u025b\u025f\u0260\u0266\u0268\u029d\u0199\u029f\u0271\u0272\u0254\u01a5\u024b\u0280\u0282\u0236\u028a\u028b\u026f\u028e\u01b6\",\r\n      \/\/ 49. Arched Light Serif (Inverted Breves)\r\n      archedSerif: \"\u0203\u0207\u0209\u020b\u020d\u020f\u0211\u0213\u0215\u0217\u0203\u0207\u0209\u020b\u020d\u020f\u0211\u0213\u0215\u0217\u0203\u0207\u0209\u020b\u020d\u020f\", \/\/ Simulating the look\r\n    };\r\n\r\n    \/\/ --- Definition of 50 Styles ---\r\n    const styles = [\r\n      { name: \"Bubble Curved \ud83e\udee7\", type: 'map', map: maps.bubble },\r\n      { name: \"Dark Bubble Curved \u26ab\", type: 'map', map: maps.bubbleDark },\r\n      { name: \"Light Bubble Curved \u26aa\", type: 'map', map: maps.bubbleLight },\r\n      { name: \"Swing Script Curved \u2712\ufe0f\", type: 'map', map: maps.swingScript },\r\n      { name: \"Looped Smooth Script \u27b0\", type: 'map', map: maps.smoothScript },\r\n      { name: \"Elegant Thin Script \ud83d\udd8b\ufe0f\", type: 'map', map: maps.elegantThin },\r\n      { name: \"Curved Handwritten Mono \ud83d\udcdd\", type: 'map', map: maps.handwritten },\r\n      { name: \"Round Sans Curved \ud83d\udd24\", type: 'map', map: maps.roundSans },\r\n      { name: \"Curvy Wide Smallcaps \u2194\ufe0f\", type: 'map', map: maps.wideSmall },\r\n      { name: \"Bent Curve Serif \u2935\ufe0f\", type: 'map', map: maps.bentCurve },\r\n      { name: \"Soft Circle Thin \u2b55\", type: 'prefix', val: '\u25d4' },\r\n      { name: \"Arc-Side Bubble \ud83d\udde8\ufe0f\", type: 'wrap', start: '\u276a', end: '\u276b' },\r\n      { name: \"Wide Curve Brackets \u3010\u3011\", type: 'wrap', start: '\u3010', end: '\u3011' },\r\n      { name: \"Circular Frame \ud83d\uddbc\ufe0f\", type: 'map', map: maps.circularFrame },\r\n      { name: \"Puffy Round Script \u2601\ufe0f\", type: 'map', map: maps.puffyRound },\r\n      { name: \"Squishy Wide Round \ud83e\udd95\", type: 'map', map: maps.squishyWide },\r\n      { name: \"Cartoon Round \ud83d\udc2d\", type: 'map', map: maps.cartoon },\r\n      { name: \"Cloudy Puffy \ud83c\udf2b\ufe0f\", type: 'combine', val: '\\u0335' },\r\n      { name: \"Looped Round Latin \ud83d\udd21\", type: 'map', map: maps.loopedLatin },\r\n      { name: \"Outline Bubble \u2b1c\", type: 'prefix', val: '\u25a2' },\r\n      { name: \"Wavy Thin \u3030\ufe0f\", type: 'combine', val: '\\u0366' },\r\n      { name: \"Flow Curve Accent \ud83c\udf0a\", type: 'combine', val: '\\u0334' },\r\n      { name: \"Bent Curl High \u27b0\", type: 'combine', val: '\\u033D\\u0353' },\r\n      { name: \"Light Wave Under \ufe4f\", type: 'combine', val: '\\u035F' },\r\n      { name: \"Double Curve Accent \ud83d\udeae\", type: 'combine', val: '\\u033E' },\r\n      { name: \"Swirled Text \ud83c\udf65\", type: 'combine', val: '\\u035B' },\r\n      { name: \"Twisted Curve Ascend \u2934\ufe0f\", type: 'combine', val: '\\u033C' },\r\n      { name: \"Rainbow Bend \ud83c\udf08\", type: 'combine', val: '\\u0307' },\r\n      { name: \"Dome Curve \ud83c\udfaa\", type: 'map', map: maps.dome },\r\n      { name: \"Crescent Bend \ud83c\udf19\", type: 'combine', val: '\\u0311' },\r\n      { name: \"Curved Geoffrey \ud83e\udd92\", type: 'map', map: maps.geoffrey },\r\n      { name: \"Round Serif Lite \ud83c\udfdb\ufe0f\", type: 'map', map: maps.serifLite },\r\n      { name: \"Circle Flick \ud83d\udcab\", type: 'map', map: maps.circleFlick },\r\n      { name: \"Soft Spiral \ud83c\udf00\", type: 'map', map: maps.softSpiral },\r\n      { name: \"Wide Rounded Curves \ud83d\udee3\ufe0f\", type: 'map', map: maps.wideRounded },\r\n      { name: \"Curl Extension \ud83e\udd68\", type: 'map', map: maps.curlExt },\r\n      { name: \"Loop Serif Curve \u27b0\", type: 'map', map: maps.loopSerif },\r\n      { name: \"Round Flow Gothic \ud83e\udddb\", type: 'map', map: maps.roundGothic },\r\n      { name: \"Tilted Curve Italic \ud83c\udfc4\", type: 'map', map: maps.tiltedItalic },\r\n      { name: \"Smooth Calligraphic \u270d\ufe0f\", type: 'map', map: maps.calligraphic },\r\n      { name: \"Plump Rounded \ud83c\udf51\", type: 'complex-41' },\r\n      { name: \"Thick Bubble Curve \ud83e\uddfc\", type: 'map', map: maps.bubbleDark },\r\n      { name: \"Single Line Curve \u2796\", type: 'map', map: maps.singleLine },\r\n      { name: \"Swoop Rounded \ud83c\udff9\", type: 'map', map: maps.swoop },\r\n      { name: \"Ultra Loop Script \ud83c\udfa2\", type: 'map', map: maps.swingScript },\r\n      { name: \"Soft Bubble-Locked \ud83d\udd12\", type: 'map', map: maps.circularFrame },\r\n      { name: \"Looped Casual \ud83d\udc5f\", type: 'map', map: maps.loopedCasual },\r\n      { name: \"Swirl-Lined Script \ud83c\udf00\", type: 'complex-48' },\r\n      { name: \"Arched Light Serif \u26e9\ufe0f\", type: 'combine', val: '\\u0311' },\r\n      { name: \"Wavy Curved XXL \ud83c\udf0a\", type: 'combine', val: '\\u0324' }\r\n    ];\r\n\r\n    \/\/ --- Core Logic ---\r\n\r\n    function transformChar(char, style) {\r\n      const code = char.toLowerCase().charCodeAt(0);\r\n      const index = code - 97; \/\/ 0-25\r\n\r\n      if (index < 0 || index > 25) return char;\r\n\r\n      if (style.type === 'map') {\r\n        const mapArray = [...style.map];\r\n        return mapArray[index] || char;\r\n      }\r\n\r\n      if (style.type === 'combine') {\r\n        return char + style.val;\r\n      }\r\n\r\n      if (style.type === 'prefix') {\r\n        return style.val + char;\r\n      }\r\n\r\n      if (style.type === 'wrap') {\r\n        return style.start + char + style.end;\r\n      }\r\n\r\n      \/\/ 41. Plump Rounded: SmallCap + Superscript\r\n      if (style.type === 'complex-41') {\r\n        const smallCaps = [...maps.wideSmall];\r\n        const supers = [...maps.dome];\r\n        return (smallCaps[index] || char) + (supers[index] || \"\");\r\n      }\r\n\r\n      \/\/ 48. Swirl-Lined: Script + Strike\r\n      if (style.type === 'complex-48') {\r\n        const scriptArr = [...maps.smoothScript];\r\n        return (scriptArr[index] || char) + '\\u0336';\r\n      }\r\n\r\n      return char;\r\n    }\r\n\r\n    function generateText(text, style) {\r\n      if (!text) return \"\";\r\n      return [...text].map(char => transformChar(char, style)).join('');\r\n    }\r\n\r\n    \/\/ --- NEW: Enhanced Toolbar Logic ---\r\n\r\n    function toTitleCase(str) {\r\n      return str.replace(\r\n        \/\\w\\S*\/g,\r\n        function(txt) {\r\n          return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();\r\n        }\r\n      );\r\n    }\r\n\r\n    function triggerInputEvent() {\r\n      const event = new Event('input', {\r\n        bubbles: true,\r\n        cancelable: true,\r\n      });\r\n      textInput.dispatchEvent(event);\r\n    }\r\n\r\n    \/\/ Random Text Generator\r\n    const randomPhrases = [\r\n      \"Curved text is awesome\",\r\n      \"Design your dreams\",\r\n      \"Creative vibes only\",\r\n      \"Hello amazing world\",\r\n      \"Make it stand out\",\r\n      \"Smooth and rounded\"\r\n    ];\r\n\r\n    randomBtn.addEventListener('click', () => {\r\n      const random = randomPhrases[Math.floor(Math.random() * randomPhrases.length)];\r\n      textInput.value = random;\r\n      triggerInputEvent();\r\n    });\r\n\r\n    \/\/ Toolbar Event Listeners\r\n    toolBtns.forEach(btn => {\r\n      btn.addEventListener('click', function() {\r\n        const action = this.getAttribute('data-action');\r\n        let text = textInput.value;\r\n\r\n        if (!text) return;\r\n\r\n        switch(action) {\r\n          \/\/ Case\r\n          case 'upper':\r\n            textInput.value = text.toUpperCase();\r\n            break;\r\n          case 'lower':\r\n            textInput.value = text.toLowerCase();\r\n            break;\r\n          case 'title':\r\n            textInput.value = toTitleCase(text);\r\n            break;\r\n          case 'alternating':\r\n            textInput.value = text.split('').map((c, i) => i % 2 === 0 ? c.toLowerCase() : c.toUpperCase()).join('');\r\n            break;\r\n          \r\n          \/\/ Format\r\n          case 'reverse':\r\n            textInput.value = text.split('').reverse().join('');\r\n            break;\r\n          case 'nospace':\r\n            textInput.value = text.replace(\/\\s\/g, '');\r\n            break;\r\n          case 'snake':\r\n            textInput.value = text.trim().replace(\/\\s+\/g, '_');\r\n            break;\r\n          case 'kebab':\r\n            textInput.value = text.trim().replace(\/\\s+\/g, '-');\r\n            break;\r\n\r\n          \/\/ Decor\r\n          case 'decorate':\r\n            textInput.value = `\u2728 ${text} \u2728`;\r\n            break;\r\n          case 'hearts':\r\n            textInput.value = `\u2665 ${text} \u2665`;\r\n            break;\r\n          case 'stars':\r\n            textInput.value = `\u2605 ${text} \u2605`;\r\n            break;\r\n          case 'brackets':\r\n            textInput.value = `[ ${text} ]`;\r\n            break;\r\n          case 'arrows':\r\n            textInput.value = `\u00bb ${text} \u00ab`;\r\n            break;\r\n        }\r\n        triggerInputEvent();\r\n      });\r\n    });\r\n\r\n    \/\/ --- Rendering ---\r\n    \r\n    function renderOutputs(reset = false) {\r\n      if (reset) {\r\n        resultsContainer.innerHTML = '';\r\n        visibleItemsCount = window.innerWidth >= 992 ? 10 : 5;\r\n        loadMoreBtn.classList.remove('hidden');\r\n      }\r\n\r\n      const textToProcess = currentInput || \"Curved Font Generator\";\r\n      const currentCount = resultsContainer.children.length;\r\n      const endIndex = Math.min(visibleItemsCount, styles.length);\r\n\r\n      for (let i = currentCount; i < endIndex; i++) {\r\n        const style = styles[i];\r\n        const result = generateText(textToProcess, style);\r\n        \r\n        const card = document.createElement('div');\r\n        card.className = 'result-card';\r\n        card.innerHTML = `\r\n          <div class=\"style-info\">\r\n            <div class=\"style-label\">${i + 1}. ${style.name}<\/div>\r\n            <div class=\"generated-text\">${result}<\/div>\r\n          <\/div>\r\n          <button class=\"copy-btn\" data-text=\"${result}\">\r\n            <i class=\"fa-regular fa-copy\"><\/i> Copy\r\n          <\/button>\r\n        `;\r\n        \r\n        resultsContainer.appendChild(card);\r\n      }\r\n\r\n      if (visibleItemsCount >= styles.length) {\r\n        loadMoreBtn.classList.add('hidden');\r\n      }\r\n    }\r\n\r\n    function updateVisibleOutputs() {\r\n      const textToProcess = currentInput || \"Curved Font Generator\";\r\n      const cards = resultsContainer.querySelectorAll('.result-card');\r\n      \r\n      cards.forEach((card, index) => {\r\n        if (index < styles.length) {\r\n          const style = styles[index];\r\n          const result = generateText(textToProcess, style);\r\n          card.querySelector('.generated-text').textContent = result;\r\n          card.querySelector('.copy-btn').setAttribute('data-text', result);\r\n        }\r\n      });\r\n    }\r\n\r\n    \/\/ --- Event Listeners ---\r\n\r\n    textInput.addEventListener('input', function() {\r\n      currentInput = this.value;\r\n      charCount.textContent = `${currentInput.length}\/200 \ud83d\udccf`;\r\n      if (currentInput.length > 200) {\r\n        this.value = currentInput.substring(0, 200);\r\n        currentInput = this.value;\r\n      }\r\n      updateVisibleOutputs();\r\n    });\r\n\r\n    clearBtn.addEventListener('click', function() {\r\n      textInput.value = '';\r\n      currentInput = '';\r\n      charCount.textContent = '0\/200 \ud83d\udccf';\r\n      updateVisibleOutputs();\r\n      textInput.focus();\r\n    });\r\n\r\n    loadMoreBtn.addEventListener('click', function() {\r\n      visibleItemsCount += batchSize;\r\n      renderOutputs();\r\n    });\r\n\r\n    resultsContainer.addEventListener('click', function(e) {\r\n      if (e.target.closest('.copy-btn')) {\r\n        const btn = e.target.closest('.copy-btn');\r\n        const text = btn.getAttribute('data-text');\r\n        \r\n        navigator.clipboard.writeText(text).then(() => {\r\n          const originalHTML = btn.innerHTML;\r\n          btn.classList.add('copied');\r\n          btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i> Copied!';\r\n          \r\n          notification.classList.add('show');\r\n          setTimeout(() => notification.classList.remove('show'), 3000);\r\n\r\n          setTimeout(() => {\r\n            btn.classList.remove('copied');\r\n            btn.innerHTML = originalHTML;\r\n          }, 2000);\r\n        });\r\n      }\r\n    });\r\n\r\n    document.querySelectorAll('.faq-question').forEach(button => {\r\n      button.addEventListener('click', () => {\r\n        const expanded = button.getAttribute('aria-expanded') === 'true';\r\n        button.setAttribute('aria-expanded', !expanded);\r\n        const answer = button.nextElementSibling;\r\n        answer.style.maxHeight = expanded ? '0' : answer.scrollHeight + 'px';\r\n      });\r\n    });\r\n\r\n    \/\/ Initial Render\r\n    renderOutputs(true);\r\n  });\r\n<\/script>\r\n\t\t\r\n<!-- <content section is starting -->\r\n\r\n\r\n<!--  ============================================================= -->\r\n<!--  ========= START: SEPARATED SUPPORTIVE CONTENT (WHITE THEME) == -->\r\n<!--  ============================================================= -->\r\n<div class=\"fixed-content-separator\">\r\n    <!-- Clean reset to ensure no \"Tool Colors\" leak into this section -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;600;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n    <style>\r\n        .fixed-content-separator {\r\n    --content-blue: #4F46E5;\r\n    --content-slate: #0f172a;\r\n    --content-body: #334155;\r\n    --content-white: #ffffff;\r\n    --content-gray: #f8fafc;\r\n    --card-gray: #f1f5f9;\r\n    \r\n    font-family: 'Inter', sans-serif;\r\n    background-color: var(--content-white);\r\n    color: var(--content-body);\r\n    line-height: 1.6;\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    \/* Viewport breakout logic *\/\r\n    width: 100vw;\r\n    position: relative;\r\n    left: 50%;\r\n    right: 50%;\r\n    margin-left: -50vw;\r\n    margin-right: -50vw;\r\n    \r\n    \/* ADD THIS LINE to prevent the color gap *\/\r\n    display: block;\r\n    box-shadow: 0 -2px 0 var(--content-white); \/* Small shadow to overlap any gap *\/\r\n}\r\n        .seo-section {\r\n            width: 100%;\r\n            padding: clamp(3rem, 7vw, 6rem) 20px;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .seo-container {\r\n        \r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* --- BACKGROUND ALTERNATIONS --- *\/\r\n        .bg-white { background-color: var(--content-white); }\r\n        .bg-alt { background-color: var(--content-gray); }\r\n\r\n        \/* --- HEADINGS ALIGNMENT --- *\/\r\n        .seo-header {\r\n            text-align: center;\r\n            margin-bottom: clamp(2.5rem, 5vw, 4rem);\r\n        }\r\n\r\n        .wh-heading {\r\n            font-family: 'Outfit', sans-serif;\r\n            font-size: clamp(2rem, 4vw, 2.75rem);\r\n            font-weight: 800;\r\n            color: var(--content-slate);\r\n            margin: 0 0 10px 0;\r\n            text-transform: capitalize;\r\n        }\r\n\r\n        .seo-sub {\r\n            font-size: 1.1rem;\r\n            color: var(--content-body);\r\n            max-width: 700px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* --- GRID SYSTEM --- *\/\r\n        .seo-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: 25px;\r\n        }\r\n\r\n        \/* --- CARD DESIGN --- *\/\r\n        .seo-card {\r\n            padding: 30px;\r\n            border-radius: 15px;\r\n            transition: all 0.4s ease;\r\n            border: 2px solid transparent;\r\n            display: flex;\r\n            flex-direction: column;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.02);\r\n        }\r\n\r\n        .card-soft-gray { background-color: var(--card-gray); }\r\n        .card-pure-white { background-color: var(--content-white); border: 1px solid #e2e8f0; }\r\n\r\n        \/* Card Hover *\/\r\n        .seo-card:hover {\r\n            border-color: var(--content-blue);\r\n            transform: translateY(-8px);\r\n            box-shadow: 0 15px 30px rgba(79, 70, 229, 0.1);\r\n        }\r\n\r\n        \/* ICON STYLES *\/\r\n        .icon-box {\r\n            width: 50px;\r\n            height: 50px;\r\n            background: #fff;\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: var(--content-blue);\r\n            font-size: 1.4rem;\r\n            margin-bottom: 20px;\r\n            transition: all 0.4s ease;\r\n            box-shadow: 0 5px 10px rgba(0,0,0,0.05);\r\n        }\r\n\r\n        \/* Hover effect to the icon *\/\r\n        .seo-card:hover .icon-box {\r\n            background: var(--content-blue);\r\n            color: #fff;\r\n            transform: rotate(360deg) scale(1.1);\r\n        }\r\n\r\n        .seo-card h3 {\r\n            font-family: 'Outfit', sans-serif;\r\n            font-size: 1.3rem;\r\n            color: var(--content-slate);\r\n            margin: 0 0 12px 0;\r\n            font-weight: 700;\r\n        }\r\n\r\n        .seo-card p {\r\n            font-size: 0.95rem;\r\n            margin: 0;\r\n            color: var(--content-body);\r\n        }\r\n\r\n        \/* Responsive Settings *\/\r\n        @media (max-width: 992px) {\r\n            .seo-grid { grid-template-columns: repeat(2, 1fr); }\r\n        }\r\n        @media (max-width: 768px) {\r\n            .seo-grid { grid-template-columns: 1fr; }\r\n            .fixed-content-separator { text-align: center; }\r\n            .icon-box { margin-left: auto; margin-right: auto; }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- SECTION 1: WHAT IS IT (White BG \/ Soft Gray Cards) -->\r\n <section class=\"seo-section bg-white\">\r\n        <div class=\"seo-container\">\r\n        \r\n        <\/div>\r\n\t<\/section>\r\n    <section class=\"seo-section bg-white\">\r\n        <div class=\"seo-container\">\r\n            <div class=\"seo-header\">\r\n                <h2 class=\"wh-heading\">What is the Curved Font Generator?<\/h2>\r\n                <p class=\"seo-sub\">Learn how our path-warping engine turns standard text into beautiful arcs.<\/p>\r\n            <\/div>\r\n            <div class=\"seo-grid\">\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-bezier-curve\"><\/i><\/div>\r\n                    <h3>Vector Path Logic \u2728<\/h3>\r\n                    <p>Our generator uses complex geometry to align every individual letter along a mathematical curve without distorting pixel quality.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-microchip\"><\/i><\/div>\r\n                    <h3>Instant Processing \u26a1<\/h3>\r\n                    <p>Calculations happen on the fly. As soon as you type, our algorithm renders the curved preview in real-time on your browser.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-copy\"><\/i><\/div>\r\n                    <h3>Rich Copy Format \ud83d\udccb<\/h3>\r\n                    <p>Transfer your curved font styles with one click, preserving the decorative elements and Unicode arcs for your bios and headers.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-wand-magic-sparkles\"><\/i><\/div>\r\n                    <h3>Smart Decoration \ud83c\udf08<\/h3>\r\n                    <p>Enhance your curves with a curated selection of sparkles, stars, and symbols that wrap perfectly with your text path.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-globe\"><\/i><\/div>\r\n                    <h3>Web Ready Output \ud83c\udf10<\/h3>\r\n                    <p>Designed for modern websites and apps, our fonts ensure maximum compatibility across both iOS and Android platforms.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-lock\"><\/i><\/div>\r\n                    <h3>No Storage Trailing \ud83d\udd12<\/h3>\r\n                    <p>Your typing is private. Our tool is a \"Passive Portal\" meaning it never logs your search intent or stores the text you type.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2: HOW TO USE (Soft Gray BG \/ White Cards) -->\r\n    <section class=\"seo-section bg-alt\">\r\n        <div class=\"seo-container\">\r\n            <div class=\"seo-header\">\r\n                <h2 class=\"wh-heading\">How do you use curved fonts effectively?<\/h2>\r\n                <p class=\"seo-sub\">Discover the best creative use cases for non-linear typography.<\/p>\r\n            <\/div>\r\n            <div class=\"seo-grid\">\r\n                <div class=\"seo-card card-pure-white\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-user-circle\"><\/i><\/div>\r\n                    <h3>Profile Branding \ud83e\udd33<\/h3>\r\n                    <p>Establishing a distinctive visual tone in your Instagram or TikTok bio is easy with arced names that stop the scroll.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-pure-white\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-id-badge\"><\/i><\/div>\r\n                    <h3>Gaming Handles \ud83d\udd79\ufe0f<\/h3>\r\n                    <p>Stand out in Discord or Steam lobbies by converting your gamertag into a uniquely bent or circular font design.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-pure-white\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-stamp\"><\/i><\/div>\r\n                    <h3>Emblem & Badge Drafts \ud83c\udff7\ufe0f<\/h3>\r\n                    <p>Draft professional circular labels for merch, product logos, or vintage badges where the name curves around the top.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-pure-white\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-camera\"><\/i><\/div>\r\n                    <h3>Story Captions \ud83d\udcf8<\/h3>\r\n                    <p>Frame your faces and objects better by using arched captions on social media stories that follow the movement of the photo.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-pure-white\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-palette\"><\/i><\/div>\r\n                    <h3>Mockup Typography \ud83d\udd8c\ufe0f<\/h3>\r\n                    <p>Digital artists use our high-fidelity arched fonts to visualize text for flyer mockups and streetwear designs effortlessly.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-pure-white\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-certificate\"><\/i><\/div>\r\n                    <h3>Certificates & Official \ud83c\udf93<\/h3>\r\n                    <p>Perfect for titles of personal achievement posts or community-based certifications that need a touch of official curved authority.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3: WHY CHOOSE US (White BG \/ Soft Gray Cards) -->\r\n    <section class=\"seo-section bg-white\">\r\n        <div class=\"seo-container\">\r\n            <div class=\"seo-header\">\r\n                <h2 class=\"wh-heading\">Why choose our Arched Text Creator?<\/h2>\r\n                <p class=\"seo-sub\">The technical advantages of using our 2026 optimized curved rendering engine.<\/p>\r\n            <\/div>\r\n            <div class=\"seo-grid\">\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-sack-dollar\"><\/i><\/div>\r\n                    <h3>Completely Ad-Free \ud83d\udcb8<\/h3>\r\n                    <p>Focus purely on the design results. We don't distract your creative flow with blinking banners or intrusive popups.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-mobile-alt\"><\/i><\/div>\r\n                    <h3>Mobile-First Design \ud83d\udcf1<\/h3>\r\n                    <p>Engineered to work on 4-inch phone screens as perfectly as 4K monitors with zero layout shift or formatting errors.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-maximize\"><\/i><\/div>\r\n                    <h3>Infinite Variations \ud83d\ude80<\/h3>\r\n                    <p>With 50+ integrated path modes and styles, you won't find another generator that offers this much circular depth for free.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-user-shield\"><\/i><\/div>\r\n                    <h3>Full Data Privacy \ud83d\udd10<\/h3>\r\n                    <p>Use all features anonymously. No email login or account bridge is required to generate or copy your high-res text.<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-language\"><\/i><\/div>\r\n                    <h3>Unicode Precision \ud83d\udd21<\/h3>\r\n                    <p>We retrieval uncropped source data sets to ensure that when you paste your text, it doesn't break into \"empty boxes.\"<\/p>\r\n                <\/div>\r\n                <div class=\"seo-card card-soft-gray\">\r\n                    <div class=\"icon-box\"><i class=\"fas fa-hands-clapping\"><\/i><\/div>\r\n                    <h3>Simplicity Focused \ud83d\udc8e<\/h3>\r\n                    <p>Why use expensive software? Bending text should be easy, fast, and free\u2014this is the definitive path for high-res curves.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n\r\n<!-- Add the revealed reveal logic specifically for these clean cards -->\r\n<script>\r\n    document.addEventListener(\"DOMContentLoaded\", () => {\r\n        const obsOptions = { threshold: 0.15 };\r\n        const contentReveal = new IntersectionObserver((entries) => {\r\n            entries.forEach((ent) => {\r\n                if (ent.isIntersecting) {\r\n                    ent.target.style.opacity = \"1\";\r\n                    ent.target.style.transform = \"translateY(0)\";\r\n                }\r\n            });\r\n        }, obsOptions);\r\n\r\n        document.querySelectorAll(\".seo-card\").forEach(card => {\r\n            card.style.opacity = \"0\";\r\n            card.style.transform = \"translateY(25px)\";\r\n            card.style.transition = \"all 0.5s ease-out\";\r\n            contentReveal.observe(card);\r\n        });\r\n    });\r\n<\/script>\r\n<!--  =========================================================== -->\r\n<!--  ========= END: SEPARATED SUPPORTIVE CONTENT ============== -->\r\n<!--  =========================================================== --><\/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":5,"featured_media":0,"parent":7231,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-7096","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/comments?post=7096"}],"version-history":[{"count":5,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7096\/revisions"}],"predecessor-version":[{"id":7226,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7096\/revisions\/7226"}],"up":[{"embeddable":true,"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/pages\/7231"}],"wp:attachment":[{"href":"https:\/\/raistheme.com\/wp-json\/wp\/v2\/media?parent=7096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}