{"id":6784,"date":"2026-02-18T21:35:56","date_gmt":"2026-02-18T21:35:56","guid":{"rendered":"https:\/\/www.whitesand.sa\/?page_id=6784"},"modified":"2026-09-12T10:33:56","modified_gmt":"2026-09-12T10:33:56","slug":"color-cards","status":"publish","type":"page","link":"https:\/\/www.whitesand.sa\/ar\/color-cards\/","title":{"rendered":"\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0623\u0644\u0648\u0627\u0646"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6784\" class=\"elementor elementor-6784\" data-elementor-post-type=\"page\">\n\t\t\t\t        <section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a8eb01 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default pxl-section-offset-none\" data-id=\"6a8eb01\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\n                \n                <div class=\"elementor-container elementor-column-gap-no \">\n                <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d0b756e pxl-column-element-default\" data-id=\"d0b756e\" data-element_type=\"column\" data-e-type=\"column\">\r\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\r\n                    \t\t<div class=\"elementor-element elementor-element-9daad9f elementor-widget elementor-widget-html\" data-id=\"9daad9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"ws-tile-studio\" class=\"ws-tile-studio\">\n  <style>\n    #ws-tile-studio {\n      --ws-red:#ed1c24;\n      --ws-red-dark:#c9141b;\n      --ws-ink:#171b2a;\n      --ws-text:#59606d;\n      --ws-muted:#7b8492;\n      --ws-bg:#f6f7f8;\n      --ws-soft:#fafbfc;\n      --ws-white:#fff;\n      --ws-border:#e4e7eb;\n      --ws-radius:25px;\n      --ws-radius-inner:18px;\n      --ws-shadow:0 14px 40px rgba(23,27,42,.07);\n      --ws-shadow-soft:0 7px 22px rgba(23,27,42,.055);\n      --tile-fill:#E6E7E7;\n      --tile-line:#389DBA;\n      width:100%;\n      color:var(--ws-text);\n      font-family:inherit;\n      box-sizing:border-box;\n    }\n    #ws-tile-studio *,#ws-tile-studio *::before,#ws-tile-studio *::after{box-sizing:border-box}\n    #ws-tile-studio button{font:inherit}\n\n    \/* ===== HERO ===== *\/\n    #ws-tile-studio .ws-hero{\n      position:relative;\n      overflow:hidden;\n      max-width:1320px;\n      margin:32px auto 22px;\n      padding:34px 38px;\n      background:linear-gradient(145deg,#fff 0%,#f7f8f9 100%);\n      border:1px solid var(--ws-border);\n      border-top:5px solid var(--ws-red);\n      border-radius:var(--ws-radius);\n      box-shadow:var(--ws-shadow);\n    }\n    #ws-tile-studio .ws-hero::after{\n      content:\"\";\n      position:absolute;\n      width:220px;height:220px;\n      right:-80px;top:-90px;\n      border:34px solid rgba(237,28,36,.035);\n      border-radius:50%;\n      pointer-events:none;\n    }\n    #ws-tile-studio .ws-badge{\n      display:inline-flex;align-items:center;\n      margin-bottom:15px;padding:8px 16px;\n      background:var(--ws-red);color:#fff;\n      border-radius:999px;font-size:11px;font-weight:800;letter-spacing:1px;\n    }\n    #ws-tile-studio .ws-hero h1{\n      position:relative;z-index:1;\n      margin:0;color:var(--ws-ink);\n      font-size:clamp(34px,4vw,52px);font-weight:800;line-height:1.08;letter-spacing:-.7px;\n    }\n    #ws-tile-studio .ws-hero h1::after{\n      content:\"\";display:block;width:74px;height:4px;margin-top:18px;background:var(--ws-red);border-radius:10px;\n    }\n    #ws-tile-studio .ws-hero p{\n      position:relative;z-index:1;\n      max-width:720px;margin:15px 0 0;color:var(--ws-text);font-size:15px;line-height:1.8;\n    }\n\n    \/* ===== MASTER WRAPPER ===== *\/\n    #ws-tile-studio .ws-shell{\n      max-width:1320px;margin:0 auto 64px;padding:22px;\n      display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch;\n      background:var(--ws-bg);border:1px solid var(--ws-border);border-radius:var(--ws-radius);box-shadow:var(--ws-shadow);\n    }\n    #ws-tile-studio .ws-card{\n      position:relative;min-width:0;padding:28px;background:#fff;border:1px solid var(--ws-border);border-radius:20px;box-shadow:var(--ws-shadow-soft);\n    }\n    #ws-tile-studio .ws-card::before{\n      content:\"\";position:absolute;top:0;left:28px;width:66px;height:4px;background:var(--ws-red);border-radius:0 0 6px 6px;\n    }\n    #ws-tile-studio .ws-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:6px 0 24px;padding-bottom:16px;border-bottom:1px solid var(--ws-border)}\n    #ws-tile-studio .ws-eyebrow{display:block;margin-bottom:6px;color:var(--ws-red);font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}\n    #ws-tile-studio .ws-card h2{margin:0;color:var(--ws-ink);font-size:24px;font-weight:800;line-height:1.2}\n    #ws-tile-studio .ws-card-sub{margin:4px 0 0;color:var(--ws-muted);font-size:13px;line-height:1.6}\n\n    \/* ===== COLOR PALETTE ===== *\/\n    #ws-tile-studio .ws-color-grid{\n      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;\n    }\n    #ws-tile-studio .ws-color-item{\n      position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;\n      min-width:0;padding:10px 8px 12px;background:var(--ws-soft);border:1px solid transparent;border-radius:16px;cursor:pointer;\n      transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;\n    }\n    #ws-tile-studio .ws-color-item:hover{transform:translateY(-2px);background:#fff;border-color:#d8dce1;box-shadow:0 8px 20px rgba(23,27,42,.08)}\n    #ws-tile-studio .ws-color-item.is-selected{background:#fff;border-color:var(--ws-red);box-shadow:0 8px 22px rgba(23,27,42,.09)}\n    #ws-tile-studio .ws-color-item.is-selected::after{\n      content:\"\u2713\";position:absolute;top:8px;right:8px;width:23px;height:23px;display:flex;align-items:center;justify-content:center;\n      color:#fff;background:var(--ws-red);border-radius:50%;font-size:12px;font-weight:800;box-shadow:0 4px 10px rgba(237,28,36,.22)\n    }\n    #ws-tile-studio .ws-swatch{\n      width:82px;height:82px;max-width:100%;border-radius:50%;border:6px solid #eceeef;box-shadow:0 6px 15px rgba(23,27,42,.08);transition:transform .18s ease;\n    }\n    #ws-tile-studio .ws-color-item:hover .ws-swatch{transform:scale(1.035)}\n    #ws-tile-studio .ws-color-name{margin-top:10px;color:var(--ws-ink);font-size:12px;font-weight:750;line-height:1.35;text-align:center;overflow-wrap:anywhere}\n    #ws-tile-studio .ws-color-code{margin-top:3px;color:var(--ws-muted);font-size:10.5px;font-weight:650;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}\n\n    \/* ===== EDITOR ===== *\/\n    #ws-tile-studio .ws-editor-card{display:flex;flex-direction:column}\n    #ws-tile-studio .ws-toggle{\n      display:grid;grid-template-columns:repeat(2,1fr);gap:5px;width:100%;margin-bottom:18px;padding:5px;background:#f1f2f3;border-radius:14px;\n    }\n    #ws-tile-studio .ws-toggle button{\n      min-height:48px;border:0;border-radius:10px;background:transparent;color:var(--ws-text);font-size:12px;font-weight:800;cursor:pointer;transition:.2s ease;\n    }\n    #ws-tile-studio .ws-toggle button.active{background:#fff;color:var(--ws-ink);box-shadow:0 4px 12px rgba(23,27,42,.08)}\n\n    #ws-tile-studio .ws-shape-wrap{margin-bottom:18px;padding:14px;background:var(--ws-soft);border:1px solid var(--ws-border);border-radius:14px}\n    #ws-tile-studio .ws-mini-label{display:block;margin-bottom:11px;color:var(--ws-muted);font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}\n    #ws-tile-studio .ws-shapes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}\n    #ws-tile-studio .ws-shape-btn{border:2px solid #cbd5e1;background:#fff;cursor:pointer;transition:.18s ease;box-shadow:none;padding:0}\n    #ws-tile-studio .ws-shape-btn:hover{border-color:#9aa4b1;background:#fafbfc}\n    #ws-tile-studio .ws-shape-btn.active{border-color:var(--ws-red);background:#fff5f5;box-shadow:0 0 0 3px rgba(237,28,36,.08)}\n    #ws-tile-studio .sq-sm{width:22px;height:22px;border-radius:4px}\n    #ws-tile-studio .sq-lg{width:38px;height:38px;border-radius:5px}\n    #ws-tile-studio .rect-v{width:22px;height:38px;border-radius:4px}\n    #ws-tile-studio .rect-h{width:38px;height:22px;border-radius:4px}\n    #ws-tile-studio .plank{width:46px;height:14px;border-radius:3px}\n\n    #ws-tile-studio .ws-preview-card{\n      position:relative;overflow:hidden;width:100%;aspect-ratio:1\/1;background:#fff;border:1px solid var(--ws-border);border-radius:16px;\n      box-shadow:inset 0 4px 10px rgba(0,0,0,.035),0 10px 24px rgba(23,27,42,.07);\n    }\n    #ws-tile-studio .ws-preview-card svg{display:block;width:100%;height:100%}\n    #ws-tile-studio .grout-bg{fill:var(--tile-line);transition:fill .35s ease}\n    #ws-tile-studio .tile-base{fill:var(--tile-fill);transition:fill .35s ease}\n\n    \/* ===== SUMMARY ===== *\/\n    #ws-tile-studio .ws-summary{\n      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;\n    }\n    #ws-tile-studio .ws-summary-item{padding:13px 14px;background:var(--ws-soft);border:1px solid var(--ws-border);border-radius:13px}\n    #ws-tile-studio .ws-summary-item span{display:block;margin-bottom:4px;color:var(--ws-muted);font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}\n    #ws-tile-studio .ws-summary-item strong{display:block;color:var(--ws-ink);font-size:13px;font-weight:750;line-height:1.35}\n\n    \/* ===== CTA ===== *\/\n    #ws-tile-studio .ws-whatsapp{\n      width:100%;min-height:52px;margin-top:14px;padding:12px 18px;border:1px solid var(--ws-red);border-radius:14px;\n      display:flex;align-items:center;justify-content:center;gap:9px;background:var(--ws-red);color:#fff;font-weight:800;font-size:13px;cursor:pointer;\n      box-shadow:0 8px 20px rgba(237,28,36,.18);transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;\n    }\n    #ws-tile-studio .ws-whatsapp:hover{background:var(--ws-ink);border-color:var(--ws-ink);transform:translateY(-2px);box-shadow:0 10px 24px rgba(23,27,42,.15)}\n    #ws-tile-studio .ws-whatsapp svg{width:20px;height:20px;flex:0 0 20px}\n\n    \/* ===== TOAST ===== *\/\n    #ws-tile-studio .ws-toast{\n      visibility:hidden;opacity:0;position:fixed;z-index:99999;left:50%;bottom:28px;transform:translateX(-50%);\n      min-width:240px;padding:13px 18px;background:var(--ws-ink);color:#fff;border-left:4px solid var(--ws-red);border-radius:12px;\n      box-shadow:0 12px 30px rgba(23,27,42,.18);font-size:13px;font-weight:650;text-align:center;transition:opacity .2s ease,bottom .2s ease;\n    }\n    #ws-tile-studio .ws-toast.show{visibility:visible;opacity:1;bottom:42px}\n\n    \/* ===== RESPONSIVE ===== *\/\n    @media (max-width:1024px){\n      #ws-tile-studio .ws-shell{grid-template-columns:1fr 1fr;padding:16px;gap:16px}\n      #ws-tile-studio .ws-card{padding:22px}\n      #ws-tile-studio .ws-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}\n      #ws-tile-studio .ws-swatch{width:74px;height:74px}\n    }\n    @media (max-width:767px){\n      #ws-tile-studio .ws-hero{margin:18px 12px 12px;padding:26px 20px;border-radius:20px}\n      #ws-tile-studio .ws-hero h1{font-size:30px}\n      #ws-tile-studio .ws-shell{grid-template-columns:1fr;margin:0 12px 40px;padding:9px;gap:10px;border-radius:20px}\n      #ws-tile-studio .ws-card{padding:18px;border-radius:16px}\n      #ws-tile-studio .ws-card::before{left:18px}\n      #ws-tile-studio .ws-card-head{margin-bottom:18px}\n      #ws-tile-studio .ws-card h2{font-size:20px}\n      #ws-tile-studio .ws-color-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}\n      #ws-tile-studio .ws-swatch{width:62px;height:62px;border-width:4px}\n      #ws-tile-studio .ws-color-name{font-size:11px}\n      #ws-tile-studio .ws-summary{grid-template-columns:1fr}\n    }\n    @media (max-width:420px){\n      #ws-tile-studio .ws-hero{margin-left:8px;margin-right:8px}\n      #ws-tile-studio .ws-shell{margin-left:8px;margin-right:8px}\n      #ws-tile-studio .ws-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}\n    }\n  <\/style>\n\n  <section class=\"ws-hero\">\n    <span class=\"ws-badge\">WHITE SAND<\/span>\n    <h1>Tile Customization Studio<\/h1>\n    <p>Choose your tile color, grout line color, and format, then preview the result instantly before sending your selection to White Sand.<\/p>\n  <\/section>\n\n  <div id=\"ws-toast\" class=\"ws-toast\">Color updated<\/div>\n\n  <section class=\"ws-shell\">\n    <div class=\"ws-card ws-palette-card\">\n      <div class=\"ws-card-head\">\n        <div>\n          <span class=\"ws-eyebrow\">Step 01<\/span>\n          <h2>Select Color Palette<\/h2>\n          <p class=\"ws-card-sub\">Choose a color for the tile base or grout lines.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"ws-color-grid\" id=\"ws-color-grid\"><\/div>\n    <\/div>\n\n    <div class=\"ws-card ws-editor-card\">\n      <div class=\"ws-card-head\">\n        <div>\n          <span class=\"ws-eyebrow\">Step 02<\/span>\n          <h2>Design Your Tile<\/h2>\n          <p class=\"ws-card-sub\">Switch between tile base and lines, then choose the preferred tile format.<\/p>\n        <\/div>\n      <\/div>\n\n      <div class=\"ws-toggle\" aria-label=\"Choose what to edit\">\n        <button id=\"ws-btn-base\" class=\"active\" type=\"button\" onclick=\"wsSetEditMode('base')\">Tile Base<\/button>\n        <button id=\"ws-btn-lines\" type=\"button\" onclick=\"wsSetEditMode('lines')\">Lines<\/button>\n      <\/div>\n\n      <div class=\"ws-shape-wrap\">\n        <span class=\"ws-mini-label\">Tile Format<\/span>\n        <div class=\"ws-shapes\">\n          <button type=\"button\" class=\"ws-shape-btn sq-sm active\" onclick=\"wsSetTileSize(60,60,'Small Square',this)\" aria-label=\"Small Square\"><\/button>\n          <button type=\"button\" class=\"ws-shape-btn sq-lg\" onclick=\"wsSetTileSize(100,100,'Large Square',this)\" aria-label=\"Large Square\"><\/button>\n          <button type=\"button\" class=\"ws-shape-btn rect-v\" onclick=\"wsSetTileSize(50,100,'Vertical Rectangle',this)\" aria-label=\"Vertical Rectangle\"><\/button>\n          <button type=\"button\" class=\"ws-shape-btn rect-h\" onclick=\"wsSetTileSize(100,50,'Horizontal Rectangle',this)\" aria-label=\"Horizontal Rectangle\"><\/button>\n          <button type=\"button\" class=\"ws-shape-btn plank\" onclick=\"wsSetTileSize(120,30,'Plank',this)\" aria-label=\"Plank\"><\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"ws-preview-card\">\n        <svg viewBox=\"0 0 320 320\" aria-label=\"Tile preview\">\n          <defs>\n            <filter id=\"ws-stone-noise\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n              <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.03\" numOctaves=\"3\" result=\"noise\"\/>\n              <feColorMatrix type=\"matrix\" values=\"1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0.15 0\" in=\"noise\" result=\"alphaNoise\"\/>\n            <\/filter>\n            <pattern id=\"ws-tile-pattern\" patternUnits=\"userSpaceOnUse\" width=\"64\" height=\"64\">\n              <rect id=\"ws-tile-bg\" width=\"60\" height=\"60\" x=\"0\" y=\"0\" class=\"tile-base\"\/>\n              <rect id=\"ws-tile-texture\" width=\"60\" height=\"60\" x=\"0\" y=\"0\" fill=\"black\" filter=\"url(#ws-stone-noise)\" style=\"pointer-events:none;mix-blend-mode:overlay\"\/>\n              <rect id=\"ws-tile-highlight\" width=\"60\" height=\"60\" x=\"0\" y=\"0\" fill=\"none\" stroke=\"rgba(255,255,255,0.6)\" stroke-width=\"2\"\/>\n              <rect id=\"ws-tile-shadow\" width=\"60\" height=\"60\" x=\"0\" y=\"0\" fill=\"none\" stroke=\"rgba(0,0,0,0.1)\" stroke-width=\"1\"\/>\n            <\/pattern>\n          <\/defs>\n          <rect width=\"100%\" height=\"100%\" class=\"grout-bg\"\/>\n          <rect width=\"100%\" height=\"100%\" fill=\"url(#ws-tile-pattern)\"\/>\n        <\/svg>\n      <\/div>\n\n      <div class=\"ws-summary\">\n        <div class=\"ws-summary-item\"><span>Tile Base<\/span><strong id=\"ws-summary-base\">#50 Light Gray<\/strong><\/div>\n        <div class=\"ws-summary-item\"><span>Lines<\/span><strong id=\"ws-summary-lines\">#61 Blue<\/strong><\/div>\n        <div class=\"ws-summary-item\"><span>Format<\/span><strong id=\"ws-summary-size\">Small Square<\/strong><\/div>\n        <div class=\"ws-summary-item\"><span>Editing<\/span><strong id=\"ws-summary-mode\">Tile Base<\/strong><\/div>\n      <\/div>\n\n      <button class=\"ws-whatsapp\" type=\"button\" onclick=\"wsSendToWhatsApp()\">\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.099.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.029 18.88c-1.161 0-2.305-.292-3.318-.844l-3.677.964.984-3.595c-.607-1.052-.927-2.246-.926-3.468.001-3.825 3.113-6.937 6.937-6.937 1.856.001 3.598.723 4.907 2.034 1.31 1.311 2.031 3.054 2.03 4.908-.001 3.825-3.113 6.938-6.937 6.938z\"\/><\/svg>\n        Buy it on WhatsApp\n      <\/button>\n    <\/div>\n  <\/section>\n\n  <script>\n    (function(){\n      const colors = [\n        {name:'WHITE',hex:'#FFFFFF'},\n        {name:'#55 Golden Beige',hex:'#F3DEB4'},\n        {name:'#64 Brick Stone',hex:'#B63F2F'},\n        {name:'#50 Light Gray',hex:'#E6E7E7'},\n        {name:'#56 Desert',hex:'#BE9A7C'},\n        {name:'#67 Salmon Rose',hex:'#D18876'},\n        {name:'#51 Pearl Gray',hex:'#B5B7B8'},\n        {name:'#57 Mocha',hex:'#AC7A64'},\n        {name:'#70 Cream',hex:'#FBD0C2'},\n        {name:'#74 Titanium',hex:'#8C8F8C'},\n        {name:'#58 Clay Rose',hex:'#AB7963'},\n        {name:'#66 Black',hex:'#181B1D'},\n        {name:'#52 Sand Stone',hex:'#C7B19D'},\n        {name:'#59 Brown',hex:'#864A35'},\n        {name:'#77 Galaxy',hex:'#56534E'},\n        {name:'#53 Beige',hex:'#F8E9CF'},\n        {name:'#76 Dark Chocolate',hex:'#482517'},\n        {name:'#72 off White',hex:'#F2EBE3'},\n        {name:'#54 Classic Beige',hex:'#FCEACC'},\n        {name:'#61 Blue',hex:'#389DBA'},\n        {name:'#73 Ivory Gray',hex:'#CFCBC0'}\n      ];\n\n      let editMode='base';\n      let currentBaseColor='#E6E7E7';\n      let currentBaseColorLabel='#50 Light Gray';\n      let currentLineColor='#389DBA';\n      let currentLineColorLabel='#61 Blue';\n      let currentSizeName='Small Square';\n\n      const studio=document.getElementById('ws-tile-studio');\n      const grid=document.getElementById('ws-color-grid');\n\n      function renderColors(){\n        grid.innerHTML='';\n        colors.forEach((color,idx)=>{\n          const item=document.createElement('button');\n          item.type='button';\n          item.className='ws-color-item';\n          item.setAttribute('aria-label','Apply '+color.name);\n          item.innerHTML=`<span class=\"ws-swatch\" style=\"background:${color.hex}\"><\/span><span class=\"ws-color-name\">${color.name}<\/span><span class=\"ws-color-code\">${color.hex}<\/span>`;\n          item.addEventListener('click',()=>wsApplyColor(color.hex,color.name,item));\n          grid.appendChild(item);\n        });\n        syncSelectedCard();\n      }\n\n      function syncSelectedCard(){\n        const targetHex=(editMode==='base'?currentBaseColor:currentLineColor).toUpperCase();\n        [...grid.children].forEach((el,idx)=>el.classList.toggle('is-selected',colors[idx].hex.toUpperCase()===targetHex));\n      }\n\n      window.wsApplyColor=function(hex,label,item){\n        if(editMode==='base'){\n          currentBaseColor=hex;currentBaseColorLabel=label;\n          studio.style.setProperty('--tile-fill',hex);\n          document.getElementById('ws-summary-base').textContent=label;\n          wsShowToast('Tile base set to '+label);\n        }else{\n          currentLineColor=hex;currentLineColorLabel=label;\n          studio.style.setProperty('--tile-line',hex);\n          document.getElementById('ws-summary-lines').textContent=label;\n          wsShowToast('Lines set to '+label);\n        }\n        syncSelectedCard();\n      }\n\n      window.wsSetEditMode=function(mode){\n        editMode=mode;\n        document.getElementById('ws-btn-base').classList.toggle('active',mode==='base');\n        document.getElementById('ws-btn-lines').classList.toggle('active',mode==='lines');\n        document.getElementById('ws-summary-mode').textContent=mode==='base'?'Tile Base':'Lines';\n        syncSelectedCard();\n      }\n\n      window.wsSetTileSize=function(width,height,sizeName,btn){\n        currentSizeName=sizeName;\n        const gap=4;\n        const pattern=document.getElementById('ws-tile-pattern');\n        pattern.setAttribute('width',width+gap);\n        pattern.setAttribute('height',height+gap);\n        ['ws-tile-bg','ws-tile-texture','ws-tile-highlight','ws-tile-shadow'].forEach(id=>{\n          const el=document.getElementById(id);\n          el.setAttribute('width',width);\n          el.setAttribute('height',height);\n          el.setAttribute('x',0);\n          el.setAttribute('y',0);\n        });\n        studio.querySelectorAll('.ws-shape-btn').forEach(el=>el.classList.remove('active'));\n        btn.classList.add('active');\n        document.getElementById('ws-summary-size').textContent=sizeName;\n        wsShowToast('Tile format set to '+sizeName);\n      }\n\n      window.wsSendToWhatsApp=function(){\n        const phoneNumber='966552474087';\n        const message=`Hello White Sand Studio!\\n\\nI designed a tile and would like to order it.\\n\\nSize: ${currentSizeName}\\nTile Base: ${currentBaseColorLabel} (${currentBaseColor})\\nLines: ${currentLineColorLabel} (${currentLineColor})`;\n        window.open(`https:\/\/wa.me\/${phoneNumber}?text=${encodeURIComponent(message)}`,'_blank');\n      }\n\n      window.wsShowToast=function(message){\n        const toast=document.getElementById('ws-toast');\n        toast.textContent=message;\n        toast.classList.add('show');\n        clearTimeout(window.__wsToastTimer);\n        window.__wsToastTimer=setTimeout(()=>toast.classList.remove('show'),2200);\n      }\n\n      renderColors();\n    })();\n  <\/script>\n<\/div>\n\t\t\t\t<\/div>\n\t\t                    <\/div>\r\n        <\/div>\r\n        \t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>WHITE SAND Tile Customization Studio Choose your tile color, grout line color, and format, then preview the result instantly before sending your selection to White Sand. Color updated Step 01 Select Color Palette Choose a color for the tile base or grout lines. Step 02 Design Your Tile Switch between tile base and lines, then [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-6784","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/comments?post=6784"}],"version-history":[{"count":74,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6784\/revisions"}],"predecessor-version":[{"id":10482,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6784\/revisions\/10482"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=6784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}