{"id":997,"date":"2026-05-10T17:20:19","date_gmt":"2026-05-10T09:20:19","guid":{"rendered":"https:\/\/dgtide.com\/?page_id=997"},"modified":"2026-05-17T19:45:58","modified_gmt":"2026-05-17T11:45:58","slug":"logo-customize","status":"publish","type":"page","link":"https:\/\/dgtide.com\/?page_id=997","title":{"rendered":"Logo Customize"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"997\" class=\"elementor elementor-997\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aba569f e-flex e-con-boxed e-con e-parent\" data-id=\"aba569f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-442d0eb e-con-full e-flex e-con e-child\" data-id=\"442d0eb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f146b32 elementor-widget elementor-widget-text-editor\" data-id=\"f146b32\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h1>Logo Customize<\/h1>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85a5149 elementor-widget elementor-widget-text-editor\" data-id=\"85a5149\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div><span style=\"color: #cc99ff;\"><em>TAIDE Menswear<\/em><\/span><\/div><div>\u00a0<\/div><div>Add your brand mark to every piece. Custom logos, subtle embroidery, and personalized details that make your style one of a kind.<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8b7f96 elementor-widget elementor-widget-image\" data-id=\"d8b7f96\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"726\" src=\"https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/1-%E6%B5%B7%E6%8A%A5-9.png?fit=1200%2C726&amp;ssl=1\" class=\"attachment-large size-large wp-image-1266\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d554e0f e-con-full e-flex e-con e-child\" data-id=\"d554e0f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf34c18 elementor-widget elementor-widget-image\" data-id=\"bf34c18\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"900\" height=\"1200\" src=\"https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/2-9.png?fit=900%2C1200&amp;ssl=1\" class=\"attachment-large size-large wp-image-1267\" alt=\"\" srcset=\"https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/2-9.png?w=1773&amp;ssl=1 1773w, https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/2-9.png?resize=375%2C500&amp;ssl=1 375w, https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/2-9.png?resize=900%2C1200&amp;ssl=1 900w, https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/2-9.png?resize=225%2C300&amp;ssl=1 225w, https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/2-9.png?resize=768%2C1024&amp;ssl=1 768w, https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/2-9.png?resize=1152%2C1536&amp;ssl=1 1152w, https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/2-9.png?resize=1536%2C2048&amp;ssl=1 1536w, https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/2-9.png?resize=56%2C75&amp;ssl=1 56w, https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/2-9.png?resize=480%2C640&amp;ssl=1 480w, https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/2-9.png?resize=800%2C1067&amp;ssl=1 800w\" sizes=\"(max-width:767px) 480px, (max-width:900px) 100vw, 900px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d6ab503 e-flex e-con-boxed e-con e-parent\" data-id=\"d6ab503\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fcb60e2 elementor-widget elementor-widget-html\" data-id=\"fcb60e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Logo Customize - Fabric Preview<\/title>\n  <style>\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');\n\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    :root {\n      --bg-primary: #0a0a0a;\n      --bg-secondary: #141414;\n      --bg-card: #1a1a1a;\n      --bg-card-hover: #222222;\n      --text-primary: #f5f5f5;\n      --text-secondary: #999999;\n      --text-muted: #666666;\n      --accent: #c8a96e;\n      --accent-light: #e0c992;\n      --border: #2a2a2a;\n      --border-active: #c8a96e;\n      --radius-sm: 8px;\n      --radius-md: 12px;\n      --radius-lg: 16px;\n      --radius-xl: 20px;\n      --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);\n      --shadow-md: 0 4px 20px rgba(0,0,0,0.4);\n      --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);\n      --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    body {\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n      background: var(--bg-primary);\n      color: var(--text-primary);\n      min-height: 100vh;\n      overflow-x: hidden;\n    }\n\n    \/* ===== Page Header ===== *\/\n    .page-header {\n      text-align: center;\n      padding: 60px 24px 40px;\n      position: relative;\n    }\n\n    .page-header::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 50%;\n      transform: translateX(-50%);\n      width: 60px;\n      height: 2px;\n      background: linear-gradient(90deg, transparent, var(--accent), transparent);\n    }\n\n    .page-header .subtitle {\n      font-size: 11px;\n      letter-spacing: 4px;\n      text-transform: uppercase;\n      color: var(--accent);\n      margin-bottom: 16px;\n      font-weight: 500;\n    }\n\n    .page-header h1 {\n      font-family: 'Playfair Display', serif;\n      font-size: clamp(32px, 5vw, 48px);\n      font-weight: 600;\n      color: #ffffff !important;\n      letter-spacing: 1px;\n    }\n\n    .page-header p {\n      margin-top: 12px;\n      color: var(--text-secondary);\n      font-size: 15px;\n      font-weight: 300;\n      max-width: 500px;\n      margin-left: auto;\n      margin-right: auto;\n      line-height: 1.6;\n    }\n\n    \/* ===== Main Container ===== *\/\n    .main-container {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 40px 24px 80px;\n    }\n\n    \/* ===== Preview Section ===== *\/\n    .preview-section {\n      margin-bottom: 48px;\n    }\n\n    .preview-wrapper {\n      position: relative;\n      width: 100%;\n      aspect-ratio: 21 \/ 9;\n      border-radius: var(--radius-xl);\n      overflow: hidden;\n      box-shadow: var(--shadow-lg);\n      border: 1px solid var(--border);\n    }\n\n    .preview-bg {\n      position: absolute;\n      inset: 0;\n      background-size: cover;\n      background-position: center;\n      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .preview-bg.fade-out {\n      opacity: 0;\n    }\n\n    .preview-overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);\n    }\n\n    .logo-preview-area {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .logo-placeholder {\n      width: 120px;\n      height: 120px;\n      border: 2px dashed rgba(255,255,255,0.4);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: var(--transition);\n      cursor: pointer;\n      background: rgba(255,255,255,0.05);\n      backdrop-filter: blur(10px);\n    }\n\n    .logo-placeholder:hover {\n      border-color: var(--accent);\n      background: rgba(200,169,110,0.1);\n      transform: scale(1.05);\n    }\n\n    .logo-placeholder svg {\n      width: 40px;\n      height: 40px;\n      stroke: rgba(255,255,255,0.5);\n      transition: var(--transition);\n    }\n\n    .logo-placeholder:hover svg {\n      stroke: var(--accent);\n    }\n\n    .logo-placeholder .upload-text {\n      position: absolute;\n      bottom: -32px;\n      font-size: 12px;\n      color: var(--text-secondary);\n      white-space: nowrap;\n    }\n\n    .logo-placeholder-wrapper {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding-bottom: 36px;\n    }\n\n    .preview-material-label {\n      font-size: 13px;\n      color: rgba(255,255,255,0.7);\n      letter-spacing: 2px;\n      text-transform: uppercase;\n      font-weight: 400;\n      background: rgba(0,0,0,0.3);\n      backdrop-filter: blur(8px);\n      padding: 6px 20px;\n      border-radius: 20px;\n      border: 1px solid rgba(255,255,255,0.1);\n      transition: var(--transition);\n    }\n\n    \/* ===== Controls Bar ===== *\/\n    .controls-bar {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 32px;\n      flex-wrap: wrap;\n      gap: 16px;\n    }\n\n    .section-title {\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--text-primary);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .section-title .count {\n      font-size: 12px;\n      color: var(--text-muted);\n      font-weight: 400;\n      background: var(--bg-card);\n      padding: 2px 10px;\n      border-radius: 12px;\n    }\n\n    .view-toggle {\n      display: flex;\n      gap: 4px;\n      background: var(--bg-card);\n      padding: 4px;\n      border-radius: var(--radius-sm);\n      border: 1px solid var(--border);\n    }\n\n    .view-toggle button {\n      background: none;\n      border: none;\n      color: var(--text-muted);\n      padding: 6px 12px;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 13px;\n      transition: var(--transition);\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .view-toggle button.active {\n      background: var(--accent);\n      color: #000;\n    }\n\n    .view-toggle button:hover:not(.active) {\n      color: var(--text-primary);\n      background: var(--bg-card-hover);\n    }\n\n    \/* ===== Material Grid ===== *\/\n    .material-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n      gap: 20px;\n    }\n\n    .material-card {\n      position: relative;\n      border-radius: var(--radius-lg);\n      overflow: hidden;\n      border: 2px solid transparent;\n      cursor: pointer;\n      transition: var(--transition);\n      background: var(--bg-card);\n      group: true;\n    }\n\n    .material-card:hover {\n      border-color: rgba(200,169,110,0.3);\n      transform: translateY(-4px);\n      box-shadow: var(--shadow-md);\n    }\n\n    .material-card.active {\n      border-color: var(--accent);\n      box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);\n    }\n\n    .material-card .card-image {\n      width: 100%;\n      aspect-ratio: 3 \/ 1;\n      object-fit: cover;\n      display: block;\n      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .material-card:hover .card-image {\n      transform: scale(1.05);\n    }\n\n    .card-image-wrapper {\n      overflow: hidden;\n      position: relative;\n    }\n\n    .card-image-wrapper::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: 60px;\n      background: linear-gradient(to top, var(--bg-card), transparent);\n      pointer-events: none;\n    }\n\n    .material-card .card-info {\n      padding: 16px 20px 20px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .card-info .material-name {\n      font-size: 15px;\n      font-weight: 500;\n      color: var(--text-primary);\n      margin-bottom: 4px;\n    }\n\n    .card-info .material-desc {\n      font-size: 12px;\n      color: var(--text-muted);\n      font-weight: 300;\n    }\n\n    .color-dots {\n      display: flex;\n      gap: 6px;\n      align-items: center;\n    }\n\n    .color-dot {\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      border: 2px solid rgba(255,255,255,0.15);\n      transition: var(--transition);\n    }\n\n    .material-card:hover .color-dot {\n      border-color: rgba(255,255,255,0.3);\n    }\n\n    .check-badge {\n      position: absolute;\n      top: 12px;\n      right: 12px;\n      width: 32px;\n      height: 32px;\n      background: var(--accent);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      opacity: 0;\n      transform: scale(0.6);\n      transition: var(--transition);\n      z-index: 2;\n      box-shadow: 0 2px 10px rgba(200,169,110,0.4);\n    }\n\n    .material-card.active .check-badge {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    .check-badge svg {\n      width: 16px;\n      height: 16px;\n      stroke: #000;\n      stroke-width: 3;\n      fill: none;\n    }\n\n    \/* ===== Customize Options Panel ===== *\/\n    .options-panel {\n      margin-top: 48px;\n      background: var(--bg-card);\n      border-radius: var(--radius-xl);\n      border: 1px solid var(--border);\n      padding: 32px;\n    }\n\n    .options-panel .panel-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 28px;\n      padding-bottom: 20px;\n      border-bottom: 1px solid var(--border);\n    }\n\n    .panel-header h3 {\n      font-size: 18px;\n      font-weight: 600;\n    }\n\n    .panel-header .reset-btn {\n      font-size: 13px;\n      color: var(--text-muted);\n      background: none;\n      border: 1px solid var(--border);\n      padding: 6px 16px;\n      border-radius: 20px;\n      cursor: pointer;\n      transition: var(--transition);\n    }\n\n    .panel-header .reset-btn:hover {\n      color: var(--text-primary);\n      border-color: var(--text-muted);\n    }\n\n    .options-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n      gap: 28px;\n    }\n\n    .option-group label {\n      display: block;\n      font-size: 12px;\n      letter-spacing: 1.5px;\n      text-transform: uppercase;\n      color: var(--text-muted);\n      margin-bottom: 12px;\n      font-weight: 500;\n    }\n\n    .option-group select,\n    .option-group input[type=\"range\"] {\n      width: 100%;\n      appearance: none;\n      -webkit-appearance: none;\n    }\n\n    .option-group select {\n      background: var(--bg-secondary);\n      color: var(--text-primary);\n      border: 1px solid var(--border);\n      padding: 10px 16px;\n      border-radius: var(--radius-sm);\n      font-size: 14px;\n      cursor: pointer;\n      outline: none;\n      transition: var(--transition);\n      font-family: inherit;\n    }\n\n    .option-group select:focus {\n      border-color: var(--accent);\n    }\n\n    .option-group select option {\n      background: var(--bg-secondary);\n      color: var(--text-primary);\n    }\n\n    .range-wrapper {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .option-group input[type=\"range\"] {\n      height: 4px;\n      background: var(--border);\n      border-radius: 2px;\n      outline: none;\n      cursor: pointer;\n    }\n\n    .option-group input[type=\"range\"]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 18px;\n      height: 18px;\n      background: var(--accent);\n      border-radius: 50%;\n      cursor: pointer;\n      border: 3px solid var(--bg-card);\n      box-shadow: 0 0 0 1px var(--accent);\n    }\n\n    .range-value {\n      font-size: 13px;\n      color: var(--accent);\n      min-width: 36px;\n      text-align: right;\n      font-weight: 500;\n    }\n\n    \/* ===== Action Buttons ===== *\/\n    .action-bar {\n      display: flex;\n      justify-content: flex-end;\n      gap: 12px;\n      margin-top: 32px;\n      padding-top: 24px;\n      border-top: 1px solid var(--border);\n    }\n\n    .btn {\n      padding: 12px 28px;\n      border-radius: var(--radius-sm);\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: var(--transition);\n      border: none;\n      font-family: inherit;\n      letter-spacing: 0.5px;\n    }\n\n    .btn-outline {\n      background: transparent;\n      border: 1px solid var(--border);\n      color: var(--text-secondary);\n    }\n\n    .btn-outline:hover {\n      border-color: var(--text-primary);\n      color: var(--text-primary);\n    }\n\n    .btn-primary {\n      background: var(--accent);\n      color: #000;\n      font-weight: 600;\n    }\n\n    .btn-primary:hover {\n      background: var(--accent-light);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 15px rgba(200,169,110,0.3);\n    }\n\n    \/* ===== Responsive ===== *\/\n    @media (max-width: 768px) {\n      .page-header {\n        padding: 40px 20px 30px;\n      }\n\n      .main-container {\n        padding: 24px 16px 60px;\n      }\n\n      .material-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .preview-wrapper {\n        aspect-ratio: 16 \/ 9;\n      }\n\n      .options-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .controls-bar {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n\n      .action-bar {\n        flex-direction: column;\n      }\n\n      .action-bar .btn {\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    @media (max-width: 480px) {\n      .preview-wrapper {\n        aspect-ratio: 4 \/ 3;\n      }\n\n      .logo-placeholder {\n        width: 80px;\n        height: 80px;\n      }\n    }\n\n    \/* ===== Animations ===== *\/\n    @keyframes fadeInUp {\n      from {\n        opacity: 0;\n        transform: translateY(20px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    .material-card {\n      animation: fadeInUp 0.5s ease forwards;\n      opacity: 0;\n    }\n\n    .material-card:nth-child(1) { animation-delay: 0.05s; }\n    .material-card:nth-child(2) { animation-delay: 0.1s; }\n    .material-card:nth-child(3) { animation-delay: 0.15s; }\n    .material-card:nth-child(4) { animation-delay: 0.2s; }\n    .material-card:nth-child(5) { animation-delay: 0.25s; }\n\n    .preview-section {\n      animation: fadeInUp 0.6s ease forwards;\n    }\n\n    .options-panel {\n      animation: fadeInUp 0.6s ease 0.3s forwards;\n      opacity: 0;\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <!-- Page Header -->\n  <header class=\"page-header\">\n    <div class=\"subtitle\">Premium Customization<\/div>\n    <h1>Logo Customize<\/h1>\n    <p>Select a fabric texture to preview how your logo looks on different materials<\/p>\n  <\/header>\n\n  <main class=\"main-container\">\n\n    <!-- Preview Section -->\n    <section class=\"preview-section\">\n      <div class=\"preview-wrapper\" id=\"previewWrapper\">\n        <div class=\"preview-bg\" id=\"previewBg\"\n             style=\"background-image: url('https:\/\/dgtide.com\/wp-content\/uploads\/2026\/05\/7-2.jpg');\">\n        <\/div>\n        <div class=\"preview-overlay\">\n          <div class=\"logo-preview-area\">\n            <div class=\"logo-placeholder-wrapper\">\n              <div class=\"logo-placeholder\" id=\"logoPlaceholder\" title=\"Click to upload Logo\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                  <path d=\"M12 5v14M5 12h14\"\/>\n                <\/svg>\n                <span class=\"upload-text\">Click to upload Logo<\/span>\n              <\/div>\n            <\/div>\n            <div class=\"preview-material-label\" id=\"materialLabel\">White Plush<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- Material Selection -->\n    <section>\n      <div class=\"controls-bar\">\n        <div class=\"section-title\">\n          Select Material\n          <span class=\"count\">5 Options<\/span>\n        <\/div>\n        <div class=\"view-toggle\">\n          <button class=\"active\" data-view=\"grid\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/>\n              <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/>\n            <\/svg>\n            Grid\n          <\/button>\n          <button data-view=\"list\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/>\n              <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/>\n            <\/svg>\n            List\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"material-grid\" id=\"materialGrid\">\n\n        <!-- Card 1: White Plush -->\n        <div class=\"material-card active\" data-material=\"white-plush\" data-label=\"White Plush\">\n          <div class=\"check-badge\">\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n          <\/div>\n          <div class=\"card-image-wrapper\">\n            <img data-recalc-dims=\"1\" decoding=\"async\" class=\"card-image\" src=\"https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/7-2.jpg?w=1220&#038;ssl=1\" alt=\"White Plush\" loading=\"lazy\">\n          <\/div>\n          <div class=\"card-info\">\n            <div>\n              <div class=\"material-name\">White Plush<\/div>\n              <div class=\"material-desc\">Soft & Skin-friendly<\/div>\n            <\/div>\n            <div class=\"color-dots\">\n              <div class=\"color-dot\" style=\"background: #f5f0eb;\"><\/div>\n              <div class=\"color-dot\" style=\"background: #e8ddd0;\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Card 2: Navy Velvet -->\n        <div class=\"material-card\" data-material=\"navy-velvet\" data-label=\"Navy Velvet\">\n          <div class=\"check-badge\">\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n          <\/div>\n          <div class=\"card-image-wrapper\">\n            <img data-recalc-dims=\"1\" decoding=\"async\" class=\"card-image\" src=\"https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/8-4.jpg?w=1220&#038;ssl=1\" alt=\"Navy Velvet\" loading=\"lazy\">\n          <\/div>\n          <div class=\"card-info\">\n            <div>\n              <div class=\"material-name\">Navy Velvet<\/div>\n              <div class=\"material-desc\">Noble & Elegant<\/div>\n            <\/div>\n            <div class=\"color-dots\">\n              <div class=\"color-dot\" style=\"background: #1a2744;\"><\/div>\n              <div class=\"color-dot\" style=\"background: #2a3f6e;\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Card 3: Gold Satin -->\n        <div class=\"material-card\" data-material=\"gold-satin\" data-label=\"Gold Satin\">\n          <div class=\"check-badge\">\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n          <\/div>\n          <div class=\"card-image-wrapper\">\n            <img data-recalc-dims=\"1\" decoding=\"async\" class=\"card-image\" src=\"https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/9-2.jpg?w=1220&#038;ssl=1\" alt=\"Gold Satin\" loading=\"lazy\">\n          <\/div>\n          <div class=\"card-info\">\n            <div>\n              <div class=\"material-name\">Gold Satin<\/div>\n              <div class=\"material-desc\">Luxurious Sheen<\/div>\n            <\/div>\n            <div class=\"color-dots\">\n              <div class=\"color-dot\" style=\"background: #c8a96e;\"><\/div>\n              <div class=\"color-dot\" style=\"background: #e0c992;\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Card 4: Cream Fleece -->\n        <div class=\"material-card\" data-material=\"cream-fleece\" data-label=\"Cream Fleece\">\n          <div class=\"check-badge\">\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n          <\/div>\n          <div class=\"card-image-wrapper\">\n            <img data-recalc-dims=\"1\" decoding=\"async\" class=\"card-image\" src=\"https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/10-2.jpg?w=1220&#038;ssl=1\" alt=\"Cream Fleece\" loading=\"lazy\">\n          <\/div>\n          <div class=\"card-info\">\n            <div>\n              <div class=\"material-name\">Cream Fleece<\/div>\n              <div class=\"material-desc\">Warm & Cozy<\/div>\n            <\/div>\n            <div class=\"color-dots\">\n              <div class=\"color-dot\" style=\"background: #f0e6d3;\"><\/div>\n              <div class=\"color-dot\" style=\"background: #ddd0b8;\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Card 5: Teal Silk -->\n        <div class=\"material-card\" data-material=\"teal-silk\" data-label=\"Teal Silk\">\n          <div class=\"check-badge\">\n            <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n          <\/div>\n          <div class=\"card-image-wrapper\">\n            <img data-recalc-dims=\"1\" decoding=\"async\" class=\"card-image\" src=\"https:\/\/i0.wp.com\/dgtide.com\/wp-content\/uploads\/2026\/05\/11-2.jpg?w=1220&#038;ssl=1\" alt=\"Teal Silk\" loading=\"lazy\">\n          <\/div>\n          <div class=\"card-info\">\n            <div>\n              <div class=\"material-name\">Teal Silk<\/div>\n              <div class=\"material-desc\">Fresh & Refined<\/div>\n            <\/div>\n            <div class=\"color-dots\">\n              <div class=\"color-dot\" style=\"background: #2a9d8f;\"><\/div>\n              <div class=\"color-dot\" style=\"background: #40b4a5;\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/section>\n\n    <!-- Options Panel -->\n    <section class=\"options-panel\">\n      <div class=\"panel-header\">\n        <h3>Customize Options<\/h3>\n        <button class=\"reset-btn\" id=\"resetBtn\">Reset Defaults<\/button>\n      <\/div>\n      <div class=\"options-grid\">\n        <div class=\"option-group\">\n          <label>Craft Method<\/label>\n          <select id=\"craftMethod\">\n            <option value=\"embroidery\">Embroidery<\/option>\n            <option value=\"screen-print\">Screen Print<\/option>\n            <option value=\"heat-transfer\">Heat Transfer<\/option>\n            <option value=\"deboss\">Deboss<\/option>\n          <\/select>\n        <\/div>\n        <div class=\"option-group\">\n          <label>Logo Size<\/label>\n          <div class=\"range-wrapper\">\n            <input type=\"range\" id=\"logoSize\" min=\"40\" max=\"200\" value=\"120\">\n            <span class=\"range-value\" id=\"sizeValue\">120px<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"option-group\">\n          <label>Logo Position<\/label>\n          <select id=\"logoPosition\">\n            <option value=\"center\">Center<\/option>\n            <option value=\"top-left\">Top Left<\/option>\n            <option value=\"top-right\">Top Right<\/option>\n            <option value=\"bottom-right\">Bottom Right<\/option>\n          <\/select>\n        <\/div>\n        <div class=\"option-group\">\n          <label>Opacity<\/label>\n          <div class=\"range-wrapper\">\n            <input type=\"range\" id=\"logoOpacity\" min=\"30\" max=\"100\" value=\"100\">\n            <span class=\"range-value\" id=\"opacityValue\">100%<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"action-bar\">\n        <button class=\"btn btn-outline\">Save Draft<\/button>\n        <button class=\"btn btn-primary\">Confirm<\/button>\n      <\/div>\n    <\/section>\n\n  <\/main>\n\n  <script>\n    \/\/ Material selection\n    const cards = document.querySelectorAll('.material-card');\n    const previewBg = document.getElementById('previewBg');\n    const materialLabel = document.getElementById('materialLabel');\n\n    \/\/ Image URLs mapping\n    const imageUrls = {\n      'white-plush': 'https:\/\/dgtide.com\/wp-content\/uploads\/2026\/05\/7-2.jpg',\n      'navy-velvet': 'https:\/\/dgtide.com\/wp-content\/uploads\/2026\/05\/8-4.jpg',\n      'gold-satin': 'https:\/\/dgtide.com\/wp-content\/uploads\/2026\/05\/9-2.jpg',\n      'cream-fleece': 'https:\/\/dgtide.com\/wp-content\/uploads\/2026\/05\/10-2.jpg',\n      'teal-silk': 'https:\/\/dgtide.com\/wp-content\/uploads\/2026\/05\/11-2.jpg'\n    };\n\n    cards.forEach(card => {\n      card.addEventListener('click', () => {\n        \/\/ Remove active from all\n        cards.forEach(c => c.classList.remove('active'));\n        \/\/ Add active to clicked\n        card.classList.add('active');\n\n        \/\/ Update preview with fade transition\n        const material = card.dataset.material;\n        const label = card.dataset.label;\n\n        previewBg.classList.add('fade-out');\n\n        setTimeout(() => {\n          previewBg.style.backgroundImage = `url('${imageUrls[material]}')`;\n          previewBg.classList.remove('fade-out');\n        }, 400);\n\n        materialLabel.textContent = label;\n      });\n    });\n\n    \/\/ Logo upload placeholder interaction\n    const logoPlaceholder = document.getElementById('logoPlaceholder');\n    logoPlaceholder.addEventListener('click', () => {\n      const input = document.createElement('input');\n      input.type = 'file';\n      input.accept = 'image\/*';\n      input.onchange = (e) => {\n        const file = e.target.files[0];\n        if (file) {\n          const reader = new FileReader();\n          reader.onload = (ev) => {\n            logoPlaceholder.innerHTML = '';\n            logoPlaceholder.style.border = 'none';\n            logoPlaceholder.style.background = 'none';\n            const img = document.createElement('img');\n            img.src = ev.target.result;\n            img.style.cssText = 'width:100%;height:100%;object-fit:contain;border-radius:50%;';\n            logoPlaceholder.appendChild(img);\n            document.querySelector('.upload-text').textContent = 'Change Logo';\n          };\n          reader.readAsDataURL(file);\n        }\n      };\n      input.click();\n    });\n\n    \/\/ Range sliders\n    const logoSize = document.getElementById('logoSize');\n    const sizeValue = document.getElementById('sizeValue');\n    const logoOpacity = document.getElementById('logoOpacity');\n    const opacityValue = document.getElementById('opacityValue');\n\n    logoSize.addEventListener('input', () => {\n      sizeValue.textContent = logoSize.value + 'px';\n      logoPlaceholder.style.width = logoSize.value + 'px';\n      logoPlaceholder.style.height = logoSize.value + 'px';\n    });\n\n    logoOpacity.addEventListener('input', () => {\n      opacityValue.textContent = logoOpacity.value + '%';\n      logoPlaceholder.style.opacity = logoOpacity.value \/ 100;\n    });\n\n    \/\/ Reset button\n    document.getElementById('resetBtn').addEventListener('click', () => {\n      logoSize.value = 120;\n      sizeValue.textContent = '120px';\n      logoPlaceholder.style.width = '120px';\n      logoPlaceholder.style.height = '120px';\n\n      logoOpacity.value = 100;\n      opacityValue.textContent = '100%';\n      logoPlaceholder.style.opacity = 1;\n\n      document.getElementById('craftMethod').selectedIndex = 0;\n      document.getElementById('logoPosition').selectedIndex = 0;\n    });\n\n    \/\/ View toggle (visual only)\n    const viewBtns = document.querySelectorAll('.view-toggle button');\n    const grid = document.getElementById('materialGrid');\n\n    viewBtns.forEach(btn => {\n      btn.addEventListener('click', () => {\n        viewBtns.forEach(b => b.classList.remove('active'));\n        btn.classList.add('active');\n\n        if (btn.dataset.view === 'list') {\n          grid.style.gridTemplateColumns = '1fr';\n        } else {\n          grid.style.gridTemplateColumns = '';\n        }\n      });\n    });\n  <\/script>\n\n<\/body>\n<\/html>\n\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>Logo Customize TAIDE Menswear\u00a0Add your brand mark to every piece. Custom logos, subtle embroidery, and personalized details that make your style one<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_wpcom_ai_launchpad_about_page":false,"_wpcom_ai_launchpad_gallery_page":false,"_wpcom_ai_launchpad_contact_page":false,"_wpcom_ai_launchpad_events_page":false,"_wpcom_ai_launchpad_video_page":false,"_wpcom_ai_launchpad_portfolio_piece":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"footnotes":""},"class_list":["post-997","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/dgtide.com\/index.php?rest_route=\/wp\/v2\/pages\/997","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dgtide.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dgtide.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dgtide.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dgtide.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=997"}],"version-history":[{"count":11,"href":"https:\/\/dgtide.com\/index.php?rest_route=\/wp\/v2\/pages\/997\/revisions"}],"predecessor-version":[{"id":1290,"href":"https:\/\/dgtide.com\/index.php?rest_route=\/wp\/v2\/pages\/997\/revisions\/1290"}],"wp:attachment":[{"href":"https:\/\/dgtide.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}