White Sand Grout Consumption Calculator<\/title>\n<style>\n#ws-grout-calc {\n --ws-red:#ed1c24;\n --ws-red-dark:#c9141b;\n --ws-ink:#171b2a;\n --ws-text:#59606d;\n --ws-muted:#7b8493;\n --ws-bg:#f6f7f8;\n --ws-soft:#fafbfc;\n --ws-white:#ffffff;\n --ws-border:#e4e7eb;\n --ws-radius:25px;\n --ws-radius-md:20px;\n --ws-radius-sm:14px;\n --ws-shadow:0 14px 40px rgba(23,27,42,.07);\n --ws-shadow-soft:0 7px 22px rgba(23,27,42,.055);\n width:min(1320px,calc(100% - 40px));\n margin:36px auto 70px;\n color:var(--ws-ink);\n font-family:Arial,Helvetica,sans-serif;\n box-sizing:border-box;\n}\n#ws-grout-calc *,#ws-grout-calc *::before,#ws-grout-calc *::after{box-sizing:border-box}\n#ws-grout-calc input,#ws-grout-calc button{font:inherit}\n\n\/* HERO *\/\n#ws-grout-calc .ws-hero{\n position:relative;\n overflow:hidden;\n padding:38px 40px 34px;\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 text-align:center;\n}\n#ws-grout-calc .ws-hero::after{\n content:\"\";\n position:absolute;\n width:220px;height:220px;\n right:-65px;top:-80px;\n border:34px solid rgba(237,28,36,.035);\n border-radius:50%;\n pointer-events:none;\n}\n#ws-grout-calc .ws-kicker{\n display:inline-flex;align-items:center;justify-content:center;\n margin-bottom:16px;padding:8px 16px;\n border-radius:999px;background:var(--ws-red);color:#fff;\n font-size:11px;font-weight:800;letter-spacing:1px;\n}\n#ws-grout-calc .ws-hero h1{\n position:relative;z-index:1;\n margin:0;\n font-size:clamp(34px,4vw,50px);\n line-height:1.12;font-weight:800;letter-spacing:-.6px;\n}\n#ws-grout-calc .ws-hero p{\n position:relative;z-index:1;\n max-width:760px;margin:14px auto 0;\n color:var(--ws-text);font-size:15px;line-height:1.8;\n}\n#ws-grout-calc .ws-hero-line{width:76px;height:4px;margin:20px auto 0;border-radius:999px;background:var(--ws-red)}\n\n\/* MAIN SHELL *\/\n#ws-grout-calc .ws-shell{\n display:grid;\n grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);\n gap:22px;\n margin-top:22px;\n padding:22px;\n background:var(--ws-bg);\n border:1px solid var(--ws-border);\n border-radius:var(--ws-radius);\n box-shadow:var(--ws-shadow-soft);\n}\n#ws-grout-calc .ws-card{\n min-width:0;\n background:#fff;\n border:1px solid var(--ws-border);\n border-radius:var(--ws-radius-md);\n box-shadow:var(--ws-shadow-soft);\n padding:28px;\n}\n#ws-grout-calc .ws-card-head{\n display:flex;align-items:flex-start;justify-content:space-between;gap:18px;\n margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--ws-border);\n}\n#ws-grout-calc .ws-eyebrow{\n display:block;margin-bottom:6px;color:var(--ws-red);\n font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;\n}\n#ws-grout-calc .ws-card h2{margin:0;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.3px}\n#ws-grout-calc .ws-card-copy{margin:8px 0 0;color:var(--ws-text);font-size:13px;line-height:1.65}\n#ws-grout-calc .ws-step-badge{\n display:inline-flex;align-items:center;justify-content:center;\n min-width:46px;height:46px;padding:0 12px;\n border-radius:14px;background:rgba(237,28,36,.08);color:var(--ws-red);\n font-size:13px;font-weight:800;flex:none;\n}\n\n\/* INPUTS *\/\n#ws-grout-calc .ws-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}\n#ws-grout-calc .ws-field{min-width:0}\n#ws-grout-calc .ws-field.ws-wide{grid-column:1\/-1}\n#ws-grout-calc label{\n display:flex;align-items:center;gap:8px;margin-bottom:8px;\n color:#485466;font-size:12px;font-weight:800;line-height:1.35;letter-spacing:.25px;\n}\n#ws-grout-calc .ws-label-code{\n display:inline-flex;align-items:center;justify-content:center;\n min-width:26px;height:26px;padding:0 7px;border-radius:8px;\n background:#f1f3f5;color:var(--ws-muted);font-size:10px;font-weight:800;\n}\n#ws-grout-calc .ws-input-wrap{position:relative}\n#ws-grout-calc input[type=\"number\"]{\n width:100%;height:56px;padding:0 58px 0 15px;\n color:var(--ws-ink);background:#fbfcfd;\n border:1px solid #d9dee5;border-radius:14px;outline:none;\n font-size:15px;font-weight:600;\n box-shadow:0 2px 8px rgba(23,27,42,.025);\n transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;\n -moz-appearance:textfield;\n}\n#ws-grout-calc input[type=\"number\"]::-webkit-outer-spin-button,\n#ws-grout-calc input[type=\"number\"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n#ws-grout-calc input[type=\"number\"]:hover{border-color:#c7cdd5;background:#fff}\n#ws-grout-calc input[type=\"number\"]:focus{border-color:var(--ws-red);background:#fff;box-shadow:0 0 0 4px rgba(237,28,36,.08)}\n#ws-grout-calc .ws-unit{\n position:absolute;right:14px;top:50%;transform:translateY(-50%);\n display:inline-flex;align-items:center;justify-content:center;\n min-width:34px;height:28px;padding:0 7px;border-radius:8px;\n background:#f1f3f5;color:var(--ws-muted);font-size:11px;font-weight:800;\n pointer-events:none;\n}\n#ws-grout-calc .ws-tip{\n display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:14px 15px;\n border:1px solid var(--ws-border);border-radius:14px;background:#f8f9fa;color:var(--ws-text);\n font-size:12px;line-height:1.6;\n}\n#ws-grout-calc .ws-tip-icon{\n width:26px;height:26px;border-radius:8px;background:rgba(237,28,36,.08);color:var(--ws-red);\n display:flex;align-items:center;justify-content:center;font-weight:900;flex:none;\n}\n\n\/* RESULTS *\/\n#ws-grout-calc .ws-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}\n#ws-grout-calc .ws-summary-item{\n padding:14px 15px;background:#f8f9fa;border:1px solid var(--ws-border);border-radius:14px;\n}\n#ws-grout-calc .ws-summary-label{display:block;margin-bottom:5px;color:var(--ws-muted);font-size:9px;font-weight:800;letter-spacing:.65px;text-transform:uppercase}\n#ws-grout-calc .ws-summary-value{display:block;color:var(--ws-ink);font-size:14px;font-weight:800;line-height:1.25}\n\n#ws-grout-calc .ws-result-stack{display:grid;gap:12px;margin-top:14px}\n#ws-grout-calc .ws-result-card{\n display:flex;align-items:center;justify-content:space-between;gap:18px;\n padding:18px 19px;background:#fff;border:1px solid var(--ws-border);border-radius:16px;\n box-shadow:0 4px 14px rgba(23,27,42,.04);\n}\n#ws-grout-calc .ws-result-card .ws-result-title{color:var(--ws-muted);font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}\n#ws-grout-calc .ws-result-card .ws-result-number{margin-top:4px;color:var(--ws-ink);font-size:28px;font-weight:800;line-height:1.1}\n#ws-grout-calc .ws-result-card .ws-result-unit{color:var(--ws-text);font-size:13px;font-weight:700}\n#ws-grout-calc .ws-result-icon{\n width:48px;height:48px;border-radius:14px;background:rgba(237,28,36,.08);color:var(--ws-red);\n display:flex;align-items:center;justify-content:center;flex:none;\n}\n#ws-grout-calc .ws-result-icon svg{width:23px;height:23px;stroke:currentColor}\n#ws-grout-calc .ws-result-card.ws-total{\n background:linear-gradient(145deg,var(--ws-red) 0%,var(--ws-red-dark) 100%);\n border-color:transparent;\n box-shadow:0 12px 28px rgba(237,28,36,.2);\n}\n#ws-grout-calc .ws-result-card.ws-total .ws-result-title,\n#ws-grout-calc .ws-result-card.ws-total .ws-result-number,\n#ws-grout-calc .ws-result-card.ws-total .ws-result-unit{color:#fff}\n#ws-grout-calc .ws-result-card.ws-total .ws-result-icon{background:rgba(255,255,255,.15);color:#fff}\n\n#ws-grout-calc .ws-disclaimer{\n margin-top:14px;padding:13px 14px;background:#f8f9fa;border:1px solid var(--ws-border);border-radius:13px;\n color:var(--ws-muted);font-size:11px;line-height:1.6;\n}\n\n\/* TABLET *\/\n@media(max-width:980px){\n #ws-grout-calc .ws-shell{grid-template-columns:1fr}\n}\n\n\/* MOBILE *\/\n@media(max-width:767px){\n #ws-grout-calc{\n width:100%;\n margin:0 auto 40px;\n padding:0 10px;\n }\n #ws-grout-calc .ws-hero{\n margin-top:12px;padding:26px 18px 24px;border-radius:20px;\n }\n #ws-grout-calc .ws-kicker{margin-bottom:10px;padding:7px 12px;font-size:10px}\n #ws-grout-calc .ws-hero h1{font-size:clamp(29px,8vw,38px);line-height:1.08}\n #ws-grout-calc .ws-hero p{margin-top:10px;font-size:13px;line-height:1.6}\n #ws-grout-calc .ws-hero-line{width:58px;height:3px;margin-top:14px}\n\n #ws-grout-calc .ws-shell{margin-top:10px;padding:9px;gap:10px;border-radius:20px;box-shadow:none}\n #ws-grout-calc .ws-card{padding:17px;border-radius:17px;box-shadow:none}\n #ws-grout-calc .ws-card-head{margin-bottom:16px;padding-bottom:14px;gap:12px}\n #ws-grout-calc .ws-card h2{font-size:22px}\n #ws-grout-calc .ws-card-copy{font-size:12px;line-height:1.55}\n #ws-grout-calc .ws-step-badge{min-width:40px;height:40px;border-radius:12px;font-size:12px}\n\n #ws-grout-calc .ws-fields{grid-template-columns:1fr;gap:12px}\n #ws-grout-calc .ws-field.ws-wide{grid-column:auto}\n #ws-grout-calc input[type=\"number\"]{height:54px;font-size:14px;padding-left:14px;padding-right:55px}\n\n #ws-grout-calc .ws-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}\n #ws-grout-calc .ws-summary-item{padding:12px}\n #ws-grout-calc .ws-summary-value{font-size:13px}\n\n #ws-grout-calc .ws-result-card{padding:15px;gap:12px}\n #ws-grout-calc .ws-result-card .ws-result-number{font-size:24px}\n #ws-grout-calc .ws-result-icon{width:42px;height:42px;border-radius:12px}\n}\n\n@media(max-width:420px){\n #ws-grout-calc{padding:0 6px}\n #ws-grout-calc .ws-shell{padding:7px}\n #ws-grout-calc .ws-card{padding:14px}\n #ws-grout-calc .ws-summary-grid{grid-template-columns:1fr}\n}\n<\/style>\n<\/head>\n<body>\n<div id=\"ws-grout-calc\">\n <section class=\"ws-hero\">\n <div class=\"ws-kicker\">WHITE SAND<\/div>\n <h1>Grout Consumption Calculator<\/h1>\n <p>Estimate grout consumption instantly using tile dimensions, joint width and total installation area.<\/p>\n <div class=\"ws-hero-line\"><\/div>\n <\/section>\n\n <section class=\"ws-shell\">\n <section class=\"ws-card\">\n <div class=\"ws-card-head\">\n <div>\n <span class=\"ws-eyebrow\">Project Inputs<\/span>\n <h2>Enter Tile Dimensions<\/h2>\n <p class=\"ws-card-copy\">Use millimetres for tile and joint dimensions, then enter the total area to be tiled.<\/p>\n <\/div>\n <span class=\"ws-step-badge\">01<\/span>\n <\/div>\n\n <div class=\"ws-fields\">\n <div class=\"ws-field\">\n <label for=\"ws-tile-length\"><span class=\"ws-label-code\">A<\/span> Tile Length<\/label>\n <div class=\"ws-input-wrap\">\n <input type=\"number\" id=\"ws-tile-length\" placeholder=\"0\" min=\"0\" inputmode=\"decimal\" \/>\n <span class=\"ws-unit\">mm<\/span>\n <\/div>\n <\/div>\n\n <div class=\"ws-field\">\n <label for=\"ws-tile-width\"><span class=\"ws-label-code\">B<\/span> Tile Width<\/label>\n <div class=\"ws-input-wrap\">\n <input type=\"number\" id=\"ws-tile-width\" placeholder=\"0\" min=\"0\" inputmode=\"decimal\" \/>\n <span class=\"ws-unit\">mm<\/span>\n <\/div>\n <\/div>\n\n <div class=\"ws-field\">\n <label for=\"ws-tile-thickness\"><span class=\"ws-label-code\">C<\/span> Tile Thickness<\/label>\n <div class=\"ws-input-wrap\">\n <input type=\"number\" id=\"ws-tile-thickness\" placeholder=\"0\" min=\"0\" inputmode=\"decimal\" \/>\n <span class=\"ws-unit\">mm<\/span>\n <\/div>\n <\/div>\n\n <div class=\"ws-field\">\n <label for=\"ws-joint-width\"><span class=\"ws-label-code\">D<\/span> Joint Width<\/label>\n <div class=\"ws-input-wrap\">\n <input type=\"number\" id=\"ws-joint-width\" placeholder=\"0\" min=\"0\" inputmode=\"decimal\" \/>\n <span class=\"ws-unit\">mm<\/span>\n <\/div>\n <\/div>\n\n <div class=\"ws-field ws-wide\">\n <label for=\"ws-total-area\"><span class=\"ws-label-code\">m\u00b2<\/span> Total Area to Tile<\/label>\n <div class=\"ws-input-wrap\">\n <input type=\"number\" id=\"ws-total-area\" placeholder=\"0\" min=\"0\" inputmode=\"decimal\" \/>\n <span class=\"ws-unit\">m\u00b2<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"ws-tip\">\n <span class=\"ws-tip-icon\">i<\/span>\n <span>The calculator updates in real time. Enter all four tile\/joint dimensions to calculate the consumption rate, then add the total area for the overall quantity.<\/span>\n <\/div>\n <\/section>\n\n <section class=\"ws-card\">\n <div class=\"ws-card-head\">\n <div>\n <span class=\"ws-eyebrow\">Live Estimate<\/span>\n <h2>Grout Requirement<\/h2>\n <p class=\"ws-card-copy\">A quick project summary and estimated grout quantity based on your dimensions.<\/p>\n <\/div>\n <span class=\"ws-step-badge\">02<\/span>\n <\/div>\n\n <div class=\"ws-summary-grid\">\n <div class=\"ws-summary-item\"><span class=\"ws-summary-label\">Tile Length<\/span><span class=\"ws-summary-value\"><span id=\"ws-sum-length\">0<\/span> mm<\/span><\/div>\n <div class=\"ws-summary-item\"><span class=\"ws-summary-label\">Tile Width<\/span><span class=\"ws-summary-value\"><span id=\"ws-sum-width\">0<\/span> mm<\/span><\/div>\n <div class=\"ws-summary-item\"><span class=\"ws-summary-label\">Tile Thickness<\/span><span class=\"ws-summary-value\"><span id=\"ws-sum-thick\">0<\/span> mm<\/span><\/div>\n <div class=\"ws-summary-item\"><span class=\"ws-summary-label\">Joint Width<\/span><span class=\"ws-summary-value\"><span id=\"ws-sum-joint\">0<\/span> mm<\/span><\/div>\n <div class=\"ws-summary-item\" style=\"grid-column:1\/-1\"><span class=\"ws-summary-label\">Total Area<\/span><span class=\"ws-summary-value\"><span id=\"ws-sum-area\">0<\/span> m\u00b2<\/span><\/div>\n <\/div>\n\n <div class=\"ws-result-stack\">\n <div class=\"ws-result-card\">\n <div>\n <div class=\"ws-result-title\">Consumption Rate<\/div>\n <div class=\"ws-result-number\"><span id=\"ws-res-rate\">0.00<\/span> <span class=\"ws-result-unit\">kg\/m\u00b2<\/span><\/div>\n <\/div>\n <div class=\"ws-result-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"><path d=\"M4 19h16M6 16l3-7 3 4 2-5 4 8\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"ws-result-card ws-total\">\n <div>\n <div class=\"ws-result-title\">Total Grout Required<\/div>\n <div class=\"ws-result-number\"><span id=\"ws-res-total\">0.00<\/span> <span class=\"ws-result-unit\">kg<\/span><\/div>\n <\/div>\n <div class=\"ws-result-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"><path d=\"M4 7h16l-2 12H6L4 7Z\"\/><path d=\"M8 7V5a4 4 0 0 1 8 0v2\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"ws-disclaimer\">\n Calculations use a density factor of 1.5 kg\/L. Actual site consumption may vary depending on wastage, joint profile, tile geometry and application method.\n <\/div>\n <\/section>\n <\/section>\n<\/div>\n\n<script>\n(function(){\n const $ = (id) => document.getElementById(id);\n const inputs = {\n length: $('ws-tile-length'),\n width: $('ws-tile-width'),\n thickness: $('ws-tile-thickness'),\n joint: $('ws-joint-width'),\n area: $('ws-total-area')\n };\n const summary = {\n length: $('ws-sum-length'),\n width: $('ws-sum-width'),\n thickness: $('ws-sum-thick'),\n joint: $('ws-sum-joint'),\n area: $('ws-sum-area')\n };\n const resRate = $('ws-res-rate');\n const resTotal = $('ws-res-total');\n const DENSITY_FACTOR = 1.5;\n\n function clean(value){\n const n = parseFloat(value);\n return Number.isFinite(n) ? n : 0;\n }\n\n function displayNumber(value){\n if(!value) return '0';\n return Number.isInteger(value) ? String(value) : String(value);\n }\n\n function updateSummary(L,W,T,J,Area){\n summary.length.textContent = displayNumber(L);\n summary.width.textContent = displayNumber(W);\n summary.thickness.textContent = displayNumber(T);\n summary.joint.textContent = displayNumber(J);\n summary.area.textContent = displayNumber(Area);\n }\n\n function calculate(){\n const L = clean(inputs.length.value);\n const W = clean(inputs.width.value);\n const T = clean(inputs.thickness.value);\n const J = clean(inputs.joint.value);\n const Area = clean(inputs.area.value);\n\n updateSummary(L,W,T,J,Area);\n\n if(L <= 0 || W <= 0 || T <= 0 || J <= 0){\n resRate.textContent = '0.00';\n resTotal.textContent = '0.00';\n return;\n }\n\n const consumptionPerSqm = ((L + W) \/ (L * W)) * J * T * DENSITY_FACTOR;\n const totalQuantity = consumptionPerSqm * Math.max(Area,0);\n\n resRate.textContent = consumptionPerSqm.toFixed(2);\n resTotal.textContent = totalQuantity.toFixed(2);\n }\n\n Object.values(inputs).forEach(input => input.addEventListener('input', calculate));\n calculate();\n})();\n<\/script>\n<\/body>\n<\/html>\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 Grout Consumption Calculator WHITE SAND Grout Consumption Calculator Estimate grout consumption instantly using tile dimensions, joint width and total installation area. Project Inputs Enter Tile Dimensions Use millimetres for tile and joint dimensions, then enter the total area to be tiled. 01 A Tile Length mm B Tile Width mm C Tile Thickness […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-6241","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241","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=6241"}],"version-history":[{"count":11,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241\/revisions"}],"predecessor-version":[{"id":10517,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241\/revisions\/10517"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=6241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\n \n

\r\n

\r\n \t\t

\n\t\t\t\t\t\n\n\n\n\nWhite Sand Grout Consumption Calculator<\/title>\n<style>\n#ws-grout-calc {\n --ws-red:#ed1c24;\n --ws-red-dark:#c9141b;\n --ws-ink:#171b2a;\n --ws-text:#59606d;\n --ws-muted:#7b8493;\n --ws-bg:#f6f7f8;\n --ws-soft:#fafbfc;\n --ws-white:#ffffff;\n --ws-border:#e4e7eb;\n --ws-radius:25px;\n --ws-radius-md:20px;\n --ws-radius-sm:14px;\n --ws-shadow:0 14px 40px rgba(23,27,42,.07);\n --ws-shadow-soft:0 7px 22px rgba(23,27,42,.055);\n width:min(1320px,calc(100% - 40px));\n margin:36px auto 70px;\n color:var(--ws-ink);\n font-family:Arial,Helvetica,sans-serif;\n box-sizing:border-box;\n}\n#ws-grout-calc *,#ws-grout-calc *::before,#ws-grout-calc *::after{box-sizing:border-box}\n#ws-grout-calc input,#ws-grout-calc button{font:inherit}\n\n\/* HERO *\/\n#ws-grout-calc .ws-hero{\n position:relative;\n overflow:hidden;\n padding:38px 40px 34px;\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 text-align:center;\n}\n#ws-grout-calc .ws-hero::after{\n content:\"\";\n position:absolute;\n width:220px;height:220px;\n right:-65px;top:-80px;\n border:34px solid rgba(237,28,36,.035);\n border-radius:50%;\n pointer-events:none;\n}\n#ws-grout-calc .ws-kicker{\n display:inline-flex;align-items:center;justify-content:center;\n margin-bottom:16px;padding:8px 16px;\n border-radius:999px;background:var(--ws-red);color:#fff;\n font-size:11px;font-weight:800;letter-spacing:1px;\n}\n#ws-grout-calc .ws-hero h1{\n position:relative;z-index:1;\n margin:0;\n font-size:clamp(34px,4vw,50px);\n line-height:1.12;font-weight:800;letter-spacing:-.6px;\n}\n#ws-grout-calc .ws-hero p{\n position:relative;z-index:1;\n max-width:760px;margin:14px auto 0;\n color:var(--ws-text);font-size:15px;line-height:1.8;\n}\n#ws-grout-calc .ws-hero-line{width:76px;height:4px;margin:20px auto 0;border-radius:999px;background:var(--ws-red)}\n\n\/* MAIN SHELL *\/\n#ws-grout-calc .ws-shell{\n display:grid;\n grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);\n gap:22px;\n margin-top:22px;\n padding:22px;\n background:var(--ws-bg);\n border:1px solid var(--ws-border);\n border-radius:var(--ws-radius);\n box-shadow:var(--ws-shadow-soft);\n}\n#ws-grout-calc .ws-card{\n min-width:0;\n background:#fff;\n border:1px solid var(--ws-border);\n border-radius:var(--ws-radius-md);\n box-shadow:var(--ws-shadow-soft);\n padding:28px;\n}\n#ws-grout-calc .ws-card-head{\n display:flex;align-items:flex-start;justify-content:space-between;gap:18px;\n margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--ws-border);\n}\n#ws-grout-calc .ws-eyebrow{\n display:block;margin-bottom:6px;color:var(--ws-red);\n font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;\n}\n#ws-grout-calc .ws-card h2{margin:0;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.3px}\n#ws-grout-calc .ws-card-copy{margin:8px 0 0;color:var(--ws-text);font-size:13px;line-height:1.65}\n#ws-grout-calc .ws-step-badge{\n display:inline-flex;align-items:center;justify-content:center;\n min-width:46px;height:46px;padding:0 12px;\n border-radius:14px;background:rgba(237,28,36,.08);color:var(--ws-red);\n font-size:13px;font-weight:800;flex:none;\n}\n\n\/* INPUTS *\/\n#ws-grout-calc .ws-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}\n#ws-grout-calc .ws-field{min-width:0}\n#ws-grout-calc .ws-field.ws-wide{grid-column:1\/-1}\n#ws-grout-calc label{\n display:flex;align-items:center;gap:8px;margin-bottom:8px;\n color:#485466;font-size:12px;font-weight:800;line-height:1.35;letter-spacing:.25px;\n}\n#ws-grout-calc .ws-label-code{\n display:inline-flex;align-items:center;justify-content:center;\n min-width:26px;height:26px;padding:0 7px;border-radius:8px;\n background:#f1f3f5;color:var(--ws-muted);font-size:10px;font-weight:800;\n}\n#ws-grout-calc .ws-input-wrap{position:relative}\n#ws-grout-calc input[type=\"number\"]{\n width:100%;height:56px;padding:0 58px 0 15px;\n color:var(--ws-ink);background:#fbfcfd;\n border:1px solid #d9dee5;border-radius:14px;outline:none;\n font-size:15px;font-weight:600;\n box-shadow:0 2px 8px rgba(23,27,42,.025);\n transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;\n -moz-appearance:textfield;\n}\n#ws-grout-calc input[type=\"number\"]::-webkit-outer-spin-button,\n#ws-grout-calc input[type=\"number\"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n#ws-grout-calc input[type=\"number\"]:hover{border-color:#c7cdd5;background:#fff}\n#ws-grout-calc input[type=\"number\"]:focus{border-color:var(--ws-red);background:#fff;box-shadow:0 0 0 4px rgba(237,28,36,.08)}\n#ws-grout-calc .ws-unit{\n position:absolute;right:14px;top:50%;transform:translateY(-50%);\n display:inline-flex;align-items:center;justify-content:center;\n min-width:34px;height:28px;padding:0 7px;border-radius:8px;\n background:#f1f3f5;color:var(--ws-muted);font-size:11px;font-weight:800;\n pointer-events:none;\n}\n#ws-grout-calc .ws-tip{\n display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:14px 15px;\n border:1px solid var(--ws-border);border-radius:14px;background:#f8f9fa;color:var(--ws-text);\n font-size:12px;line-height:1.6;\n}\n#ws-grout-calc .ws-tip-icon{\n width:26px;height:26px;border-radius:8px;background:rgba(237,28,36,.08);color:var(--ws-red);\n display:flex;align-items:center;justify-content:center;font-weight:900;flex:none;\n}\n\n\/* RESULTS *\/\n#ws-grout-calc .ws-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}\n#ws-grout-calc .ws-summary-item{\n padding:14px 15px;background:#f8f9fa;border:1px solid var(--ws-border);border-radius:14px;\n}\n#ws-grout-calc .ws-summary-label{display:block;margin-bottom:5px;color:var(--ws-muted);font-size:9px;font-weight:800;letter-spacing:.65px;text-transform:uppercase}\n#ws-grout-calc .ws-summary-value{display:block;color:var(--ws-ink);font-size:14px;font-weight:800;line-height:1.25}\n\n#ws-grout-calc .ws-result-stack{display:grid;gap:12px;margin-top:14px}\n#ws-grout-calc .ws-result-card{\n display:flex;align-items:center;justify-content:space-between;gap:18px;\n padding:18px 19px;background:#fff;border:1px solid var(--ws-border);border-radius:16px;\n box-shadow:0 4px 14px rgba(23,27,42,.04);\n}\n#ws-grout-calc .ws-result-card .ws-result-title{color:var(--ws-muted);font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}\n#ws-grout-calc .ws-result-card .ws-result-number{margin-top:4px;color:var(--ws-ink);font-size:28px;font-weight:800;line-height:1.1}\n#ws-grout-calc .ws-result-card .ws-result-unit{color:var(--ws-text);font-size:13px;font-weight:700}\n#ws-grout-calc .ws-result-icon{\n width:48px;height:48px;border-radius:14px;background:rgba(237,28,36,.08);color:var(--ws-red);\n display:flex;align-items:center;justify-content:center;flex:none;\n}\n#ws-grout-calc .ws-result-icon svg{width:23px;height:23px;stroke:currentColor}\n#ws-grout-calc .ws-result-card.ws-total{\n background:linear-gradient(145deg,var(--ws-red) 0%,var(--ws-red-dark) 100%);\n border-color:transparent;\n box-shadow:0 12px 28px rgba(237,28,36,.2);\n}\n#ws-grout-calc .ws-result-card.ws-total .ws-result-title,\n#ws-grout-calc .ws-result-card.ws-total .ws-result-number,\n#ws-grout-calc .ws-result-card.ws-total .ws-result-unit{color:#fff}\n#ws-grout-calc .ws-result-card.ws-total .ws-result-icon{background:rgba(255,255,255,.15);color:#fff}\n\n#ws-grout-calc .ws-disclaimer{\n margin-top:14px;padding:13px 14px;background:#f8f9fa;border:1px solid var(--ws-border);border-radius:13px;\n color:var(--ws-muted);font-size:11px;line-height:1.6;\n}\n\n\/* TABLET *\/\n@media(max-width:980px){\n #ws-grout-calc .ws-shell{grid-template-columns:1fr}\n}\n\n\/* MOBILE *\/\n@media(max-width:767px){\n #ws-grout-calc{\n width:100%;\n margin:0 auto 40px;\n padding:0 10px;\n }\n #ws-grout-calc .ws-hero{\n margin-top:12px;padding:26px 18px 24px;border-radius:20px;\n }\n #ws-grout-calc .ws-kicker{margin-bottom:10px;padding:7px 12px;font-size:10px}\n #ws-grout-calc .ws-hero h1{font-size:clamp(29px,8vw,38px);line-height:1.08}\n #ws-grout-calc .ws-hero p{margin-top:10px;font-size:13px;line-height:1.6}\n #ws-grout-calc .ws-hero-line{width:58px;height:3px;margin-top:14px}\n\n #ws-grout-calc .ws-shell{margin-top:10px;padding:9px;gap:10px;border-radius:20px;box-shadow:none}\n #ws-grout-calc .ws-card{padding:17px;border-radius:17px;box-shadow:none}\n #ws-grout-calc .ws-card-head{margin-bottom:16px;padding-bottom:14px;gap:12px}\n #ws-grout-calc .ws-card h2{font-size:22px}\n #ws-grout-calc .ws-card-copy{font-size:12px;line-height:1.55}\n #ws-grout-calc .ws-step-badge{min-width:40px;height:40px;border-radius:12px;font-size:12px}\n\n #ws-grout-calc .ws-fields{grid-template-columns:1fr;gap:12px}\n #ws-grout-calc .ws-field.ws-wide{grid-column:auto}\n #ws-grout-calc input[type=\"number\"]{height:54px;font-size:14px;padding-left:14px;padding-right:55px}\n\n #ws-grout-calc .ws-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}\n #ws-grout-calc .ws-summary-item{padding:12px}\n #ws-grout-calc .ws-summary-value{font-size:13px}\n\n #ws-grout-calc .ws-result-card{padding:15px;gap:12px}\n #ws-grout-calc .ws-result-card .ws-result-number{font-size:24px}\n #ws-grout-calc .ws-result-icon{width:42px;height:42px;border-radius:12px}\n}\n\n@media(max-width:420px){\n #ws-grout-calc{padding:0 6px}\n #ws-grout-calc .ws-shell{padding:7px}\n #ws-grout-calc .ws-card{padding:14px}\n #ws-grout-calc .ws-summary-grid{grid-template-columns:1fr}\n}\n<\/style>\n<\/head>\n<body>\n<div id=\"ws-grout-calc\">\n <section class=\"ws-hero\">\n <div class=\"ws-kicker\">WHITE SAND<\/div>\n <h1>Grout Consumption Calculator<\/h1>\n <p>Estimate grout consumption instantly using tile dimensions, joint width and total installation area.<\/p>\n <div class=\"ws-hero-line\"><\/div>\n <\/section>\n\n <section class=\"ws-shell\">\n <section class=\"ws-card\">\n <div class=\"ws-card-head\">\n <div>\n <span class=\"ws-eyebrow\">Project Inputs<\/span>\n <h2>Enter Tile Dimensions<\/h2>\n <p class=\"ws-card-copy\">Use millimetres for tile and joint dimensions, then enter the total area to be tiled.<\/p>\n <\/div>\n <span class=\"ws-step-badge\">01<\/span>\n <\/div>\n\n <div class=\"ws-fields\">\n <div class=\"ws-field\">\n <label for=\"ws-tile-length\"><span class=\"ws-label-code\">A<\/span> Tile Length<\/label>\n <div class=\"ws-input-wrap\">\n <input type=\"number\" id=\"ws-tile-length\" placeholder=\"0\" min=\"0\" inputmode=\"decimal\" \/>\n <span class=\"ws-unit\">mm<\/span>\n <\/div>\n <\/div>\n\n <div class=\"ws-field\">\n <label for=\"ws-tile-width\"><span class=\"ws-label-code\">B<\/span> Tile Width<\/label>\n <div class=\"ws-input-wrap\">\n <input type=\"number\" id=\"ws-tile-width\" placeholder=\"0\" min=\"0\" inputmode=\"decimal\" \/>\n <span class=\"ws-unit\">mm<\/span>\n <\/div>\n <\/div>\n\n <div class=\"ws-field\">\n <label for=\"ws-tile-thickness\"><span class=\"ws-label-code\">C<\/span> Tile Thickness<\/label>\n <div class=\"ws-input-wrap\">\n <input type=\"number\" id=\"ws-tile-thickness\" placeholder=\"0\" min=\"0\" inputmode=\"decimal\" \/>\n <span class=\"ws-unit\">mm<\/span>\n <\/div>\n <\/div>\n\n <div class=\"ws-field\">\n <label for=\"ws-joint-width\"><span class=\"ws-label-code\">D<\/span> Joint Width<\/label>\n <div class=\"ws-input-wrap\">\n <input type=\"number\" id=\"ws-joint-width\" placeholder=\"0\" min=\"0\" inputmode=\"decimal\" \/>\n <span class=\"ws-unit\">mm<\/span>\n <\/div>\n <\/div>\n\n <div class=\"ws-field ws-wide\">\n <label for=\"ws-total-area\"><span class=\"ws-label-code\">m\u00b2<\/span> Total Area to Tile<\/label>\n <div class=\"ws-input-wrap\">\n <input type=\"number\" id=\"ws-total-area\" placeholder=\"0\" min=\"0\" inputmode=\"decimal\" \/>\n <span class=\"ws-unit\">m\u00b2<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"ws-tip\">\n <span class=\"ws-tip-icon\">i<\/span>\n <span>The calculator updates in real time. Enter all four tile\/joint dimensions to calculate the consumption rate, then add the total area for the overall quantity.<\/span>\n <\/div>\n <\/section>\n\n <section class=\"ws-card\">\n <div class=\"ws-card-head\">\n <div>\n <span class=\"ws-eyebrow\">Live Estimate<\/span>\n <h2>Grout Requirement<\/h2>\n <p class=\"ws-card-copy\">A quick project summary and estimated grout quantity based on your dimensions.<\/p>\n <\/div>\n <span class=\"ws-step-badge\">02<\/span>\n <\/div>\n\n <div class=\"ws-summary-grid\">\n <div class=\"ws-summary-item\"><span class=\"ws-summary-label\">Tile Length<\/span><span class=\"ws-summary-value\"><span id=\"ws-sum-length\">0<\/span> mm<\/span><\/div>\n <div class=\"ws-summary-item\"><span class=\"ws-summary-label\">Tile Width<\/span><span class=\"ws-summary-value\"><span id=\"ws-sum-width\">0<\/span> mm<\/span><\/div>\n <div class=\"ws-summary-item\"><span class=\"ws-summary-label\">Tile Thickness<\/span><span class=\"ws-summary-value\"><span id=\"ws-sum-thick\">0<\/span> mm<\/span><\/div>\n <div class=\"ws-summary-item\"><span class=\"ws-summary-label\">Joint Width<\/span><span class=\"ws-summary-value\"><span id=\"ws-sum-joint\">0<\/span> mm<\/span><\/div>\n <div class=\"ws-summary-item\" style=\"grid-column:1\/-1\"><span class=\"ws-summary-label\">Total Area<\/span><span class=\"ws-summary-value\"><span id=\"ws-sum-area\">0<\/span> m\u00b2<\/span><\/div>\n <\/div>\n\n <div class=\"ws-result-stack\">\n <div class=\"ws-result-card\">\n <div>\n <div class=\"ws-result-title\">Consumption Rate<\/div>\n <div class=\"ws-result-number\"><span id=\"ws-res-rate\">0.00<\/span> <span class=\"ws-result-unit\">kg\/m\u00b2<\/span><\/div>\n <\/div>\n <div class=\"ws-result-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"><path d=\"M4 19h16M6 16l3-7 3 4 2-5 4 8\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"ws-result-card ws-total\">\n <div>\n <div class=\"ws-result-title\">Total Grout Required<\/div>\n <div class=\"ws-result-number\"><span id=\"ws-res-total\">0.00<\/span> <span class=\"ws-result-unit\">kg<\/span><\/div>\n <\/div>\n <div class=\"ws-result-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"><path d=\"M4 7h16l-2 12H6L4 7Z\"\/><path d=\"M8 7V5a4 4 0 0 1 8 0v2\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"ws-disclaimer\">\n Calculations use a density factor of 1.5 kg\/L. Actual site consumption may vary depending on wastage, joint profile, tile geometry and application method.\n <\/div>\n <\/section>\n <\/section>\n<\/div>\n\n<script>\n(function(){\n const $ = (id) => document.getElementById(id);\n const inputs = {\n length: $('ws-tile-length'),\n width: $('ws-tile-width'),\n thickness: $('ws-tile-thickness'),\n joint: $('ws-joint-width'),\n area: $('ws-total-area')\n };\n const summary = {\n length: $('ws-sum-length'),\n width: $('ws-sum-width'),\n thickness: $('ws-sum-thick'),\n joint: $('ws-sum-joint'),\n area: $('ws-sum-area')\n };\n const resRate = $('ws-res-rate');\n const resTotal = $('ws-res-total');\n const DENSITY_FACTOR = 1.5;\n\n function clean(value){\n const n = parseFloat(value);\n return Number.isFinite(n) ? n : 0;\n }\n\n function displayNumber(value){\n if(!value) return '0';\n return Number.isInteger(value) ? String(value) : String(value);\n }\n\n function updateSummary(L,W,T,J,Area){\n summary.length.textContent = displayNumber(L);\n summary.width.textContent = displayNumber(W);\n summary.thickness.textContent = displayNumber(T);\n summary.joint.textContent = displayNumber(J);\n summary.area.textContent = displayNumber(Area);\n }\n\n function calculate(){\n const L = clean(inputs.length.value);\n const W = clean(inputs.width.value);\n const T = clean(inputs.thickness.value);\n const J = clean(inputs.joint.value);\n const Area = clean(inputs.area.value);\n\n updateSummary(L,W,T,J,Area);\n\n if(L <= 0 || W <= 0 || T <= 0 || J <= 0){\n resRate.textContent = '0.00';\n resTotal.textContent = '0.00';\n return;\n }\n\n const consumptionPerSqm = ((L + W) \/ (L * W)) * J * T * DENSITY_FACTOR;\n const totalQuantity = consumptionPerSqm * Math.max(Area,0);\n\n resRate.textContent = consumptionPerSqm.toFixed(2);\n resTotal.textContent = totalQuantity.toFixed(2);\n }\n\n Object.values(inputs).forEach(input => input.addEventListener('input', calculate));\n calculate();\n})();\n<\/script>\n<\/body>\n<\/html>\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 Grout Consumption Calculator WHITE SAND Grout Consumption Calculator Estimate grout consumption instantly using tile dimensions, joint width and total installation area. Project Inputs Enter Tile Dimensions Use millimetres for tile and joint dimensions, then enter the total area to be tiled. 01 A Tile Length mm B Tile Width mm C Tile Thickness […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-6241","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241","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=6241"}],"version-history":[{"count":11,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241\/revisions"}],"predecessor-version":[{"id":10517,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241\/revisions\/10517"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=6241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}