{"id":14459,"date":"2026-01-23T10:01:14","date_gmt":"2026-01-23T08:01:14","guid":{"rendered":"https:\/\/www.berling.gr\/fandecks\/color-celebration\/"},"modified":"2026-01-23T10:20:45","modified_gmt":"2026-01-23T08:20:45","slug":"color-celebration","status":"publish","type":"page","link":"https:\/\/www.berling.gr\/en\/fandecks\/color-celebration\/","title":{"rendered":"Color Celebration"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14459\" class=\"elementor elementor-14459 elementor-14443\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-494550c e-flex e-con-boxed e-con e-parent\" data-id=\"494550c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66f5525 elementor-widget elementor-widget-heading\" data-id=\"66f5525\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Color Celebration<\/h1>\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 data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-17f98a6 e-flex e-con-boxed e-con e-parent\" data-id=\"17f98a6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ced1953 elementor-widget elementor-widget-text-editor\" data-id=\"ced1953\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Off White shades Color Celebration<\/p>\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 data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-123cfe5 e-flex e-con-boxed e-con e-parent\" data-id=\"123cfe5\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ddf0ca7 elementor-widget elementor-widget-html\" data-id=\"ddf0ca7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"berling-fandeck-page\" class=\"bf\" data-json=\"\/wp-content\/uploads\/berling-fandecks\/color-celebration.json\"><\/div>\n\n<script>\n(() => {\n  const mount = document.getElementById(\"berling-fandeck-page\");\n  if (!mount) return;\n  const DATA_URL = mount.dataset.json;\n\n  \/\/ Elementor global colors (fallbacks)\n  const css = getComputedStyle(document.documentElement);\n  const E_PRIMARY = css.getPropertyValue(\"--e-global-color-primary\").trim();\n  const E_TEXT = css.getPropertyValue(\"--e-global-color-text\").trim();\n  const E_ACCENT = css.getPropertyValue(\"--e-global-color-accent\").trim();\n\n  const theme = {\n    line: \"rgba(0,0,0,.12)\",\n    text: E_TEXT || \"rgba(0,0,0,.88)\",\n    muted: \"rgba(0,0,0,.60)\",\n    accent: E_ACCENT || E_PRIMARY || \"#0ea5e9\",\n    panel: \"rgba(255,255,255,.85)\"\n  };\n\n  mount.innerHTML = `\n  <style>\n    .bf{ --line:${theme.line}; --text:${theme.text}; --muted:${theme.muted}; --accent:${theme.accent}; --panel:${theme.panel};\n         color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }\n    .bf *{ box-sizing:border-box; }\n\n    .bf__wrap{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px; }\n    .bf__top{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }\n    .bf__title h2{ margin:0; font-size:24px; letter-spacing:.2px; }\n    .bf__title p{ margin:6px 0 0; color:var(--muted); font-size:14px; }\n\n    .bf__controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }\n    .bf__search{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px;\n                 border:1px solid var(--line); background:rgba(255,255,255,.65); min-width:320px; }\n    .bf__search input{ border:0; outline:0; background:transparent; color:var(--text); width:100%; font-size:14px; }\n    .bf select{ padding:10px 12px; border-radius:999px; border:1px solid var(--line);\n                background:rgba(255,255,255,.65); color:var(--text); font-size:14px; }\n    .bf select option{ color:#111; }\n\n    .bf__toggle{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px;\n                 border:1px solid var(--line); background:rgba(255,255,255,.65); font-size:14px; color:var(--muted); }\n    .bf__toggle input{ accent-color:var(--accent); }\n\n    .bf__btn{ padding:10px 14px; border-radius:999px; border:1px solid var(--line);\n              background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--text); cursor:pointer; }\n    .bf__btn:hover{ filter:brightness(1.03); }\n\n    .bf__meta{ display:flex; justify-content:space-between; align-items:center; margin:12px 4px 8px; gap:10px; flex-wrap:wrap; }\n    .bf__status{ color:var(--muted); font-size:13px; }\n\n    .bf__grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:12px; }\n    @media (max-width: 1024px){ .bf__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }\n    @media (max-width: 720px){ .bf__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .bf__search{ min-width:240px; } }\n    @media (max-width: 420px){ .bf__grid{ grid-template-columns:1fr; } }\n\n    .bf__card{ border-radius:18px; border:1px solid var(--line); overflow:hidden; background:rgba(255,255,255,.55); cursor:pointer; }\n    .bf__swatch{ height:120px; display:flex; align-items:flex-end; justify-content:space-between; padding:10px; position:relative; }\n    .bf__chip{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(0,0,0,.12);\n               background:rgba(255,255,255,.60); backdrop-filter: blur(10px); }\n\n    \/* \u2600 UV badge *\/\n    .bf__uv{\n      position:absolute; top:10px; left:10px;\n      display:inline-flex; align-items:center; gap:8px;\n      padding:6px 10px; border-radius:999px;\n      border:1px solid rgba(0,0,0,.12);\n      background:rgba(255,255,255,.70);\n      font-size:12px; font-weight:700;\n    }\n\n    .bf__body{ padding:12px 12px 14px; display:flex; justify-content:space-between; gap:10px; }\n    .bf__name{ font-weight:900; font-size:14px; line-height:1.2; }\n    .bf__sub{ color:var(--muted); font-size:12px; margin-top:4px; }\n\n    \/* Modal *\/\n    .bf__modal{ position:fixed; inset:0; display:none; z-index:9999; }\n    .bf__modal[aria-hidden=\"false\"]{ display:block; }\n    .bf__modalBackdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }\n    .bf__modalCard{ position:relative; width:min(980px, calc(100% - 24px)); margin:6vh auto 0;\n                    border-radius:24px; border:1px solid rgba(255,255,255,.18); background:rgba(16,18,24,.98);\n                    box-shadow:0 20px 70px rgba(0,0,0,.5); overflow:hidden; color:#fff; }\n    .bf__modalClose{ position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:999px;\n                     border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25); color:#fff; cursor:pointer; }\n    .bf__modalBody{ display:grid; grid-template-columns: 1.2fr 1fr; }\n    @media (max-width: 860px){ .bf__modalBody{ grid-template-columns:1fr; } }\n    .bf__modalSwatch{ min-height:360px; }\n    .bf__modalInfo{ padding:18px; }\n    .bf__modalName{ font-size:22px; font-weight:900; }\n    .bf__modalSub{ color:rgba(255,255,255,.72); margin-top:6px; font-size:13px; }\n    .bf__row{ display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 0;\n              border-bottom:1px dashed rgba(255,255,255,.16); }\n    .bf__k{ color:rgba(255,255,255,.70); font-size:13px; width:95px; }\n    .bf__v{ display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }\n    .bf__v code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n                 background:rgba(0,0,0,.25); padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.16); }\n    .bf__copy{ padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.25); color:#fff; cursor:pointer; }\n  <\/style>\n\n  <div class=\"bf__wrap\">\n    <div class=\"bf__top\">\n      <div class=\"bf__title\">\n        <h2 id=\"bfDeckTitle\">Fandeck<\/h2>\n        <p id=\"bfDeckDesc\">\u0395\u03c0\u03ad\u03bb\u03b5\u03be\u03b5 \u03b1\u03c0\u03cc\u03c7\u03c1\u03c9\u03c3\u03b7, \u03b4\u03b5\u03c2 \u03c4\u03b9\u03bc\u03ad\u03c2 \u03ba\u03b1\u03b9 \u03ba\u03ac\u03bd\u03b5 \u03b1\u03bd\u03c4\u03b9\u03b3\u03c1\u03b1\u03c6\u03ae.<\/p>\n      <\/div>\n\n      <div class=\"bf__controls\">\n        <label class=\"bf__search\">\n          <span style=\"opacity:.8;\">\u2315<\/span>\n          <input id=\"bfSearch\" type=\"search\" placeholder=\"\u0391\u03bd\u03b1\u03b6\u03ae\u03c4\u03b7\u03c3\u03b7 (\u03ba\u03c9\u03b4\u03b9\u03ba\u03cc\u03c2 \/ \u03cc\u03bd\u03bf\u03bc\u03b1)...\" \/>\n        <\/label>\n\n        <select id=\"bfCategory\">\n          <option value=\"\">\u038c\u03bb\u03b5\u03c2 \u03bf\u03b9 \u03ba\u03b1\u03c4\u03b7\u03b3\u03bf\u03c1\u03af\u03b5\u03c2<\/option>\n        <\/select>\n\n        <label class=\"bf__toggle\" title=\"\u0394\u03b5\u03af\u03be\u03b5 \u03bc\u03cc\u03bd\u03bf \u03b1\u03c0\u03bf\u03c7\u03c1\u03ce\u03c3\u03b5\u03b9\u03c2 \u03ba\u03b1\u03c4\u03ac\u03bb\u03bb\u03b7\u03bb\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03b5\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7\">\n          <input id=\"bfUvOnly\" type=\"checkbox\" \/>\n          <span>\u2600 \u0395\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7 (UV)<\/span>\n        <\/label>\n\n        <select id=\"bfSort\">\n          <option value=\"code_asc\" selected>\u039a\u03c9\u03b4\u03b9\u03ba\u03cc\u03c2 (ColorID)<\/option>\n          <option value=\"cat_then_name\">\u039a\u03b1\u03c4\u03b7\u03b3\u03bf\u03c1\u03af\u03b1 \u2192 \u038c\u03bd\u03bf\u03bc\u03b1<\/option>\n          <option value=\"name_asc\">\u038c\u03bd\u03bf\u03bc\u03b1 (A\u2192Z)<\/option>\n          <option value=\"name_desc\">\u038c\u03bd\u03bf\u03bc\u03b1 (Z\u2192A)<\/option>\n          <option value=\"light_to_dark\">\u0391\u03bd\u03bf\u03b9\u03c7\u03c4\u03cc \u2192 \u03a3\u03ba\u03bf\u03cd\u03c1\u03bf<\/option>\n        <\/select>\n\n        <button id=\"bfReset\" class=\"bf__btn\" type=\"button\">Reset<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"bf__meta\">\n      <div id=\"bfStatus\" class=\"bf__status\">Loading\u2026<\/div>\n      <div class=\"bf__status\">\u2600 = \u039a\u03b1\u03c4\u03ac\u03bb\u03bb\u03b7\u03bb\u03b7 \u03b3\u03b9\u03b1 \u03b5\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7 (UV resistant)<\/div>\n    <\/div>\n\n    <div id=\"bfGrid\" class=\"bf__grid\" aria-live=\"polite\"><\/div>\n  <\/div>\n\n  <div id=\"bfModal\" class=\"bf__modal\" role=\"dialog\" aria-modal=\"true\" aria-hidden=\"true\">\n    <div class=\"bf__modalBackdrop\" data-close=\"1\"><\/div>\n    <div class=\"bf__modalCard\" role=\"document\">\n      <button class=\"bf__modalClose\" type=\"button\" data-close=\"1\" aria-label=\"Close\">\u2715<\/button>\n      <div class=\"bf__modalBody\">\n        <div class=\"bf__modalSwatch\" id=\"bfModalSwatch\"><\/div>\n        <div class=\"bf__modalInfo\">\n          <div class=\"bf__modalName\" id=\"bfModalName\">\u2014<\/div>\n          <div class=\"bf__modalSub\" id=\"bfModalSub\">\u2014<\/div>\n\n          <div style=\"margin-top:14px; border-top:1px solid rgba(255,255,255,.16); padding-top:12px;\">\n            <div class=\"bf__row\"><div class=\"bf__k\">\u039a\u03b1\u03c4\u03b7\u03b3\u03bf\u03c1\u03af\u03b1<\/div><div class=\"bf__v\"><code id=\"bfCat\">\u2014<\/code><\/div><\/div>\n            <div class=\"bf__row\"><div class=\"bf__k\">\u03a7\u03c1\u03ae\u03c3\u03b7<\/div><div class=\"bf__v\"><code id=\"bfUse\">\u2014<\/code><\/div><\/div>\n            <div class=\"bf__row\"><div class=\"bf__k\">HEX<\/div><div class=\"bf__v\"><code id=\"bfHex\">\u2014<\/code><button class=\"bf__copy\" data-copy=\"hex\">Copy<\/button><\/div><\/div>\n            <div class=\"bf__row\"><div class=\"bf__k\">RGB<\/div><div class=\"bf__v\"><code id=\"bfRgb\">\u2014<\/code><button class=\"bf__copy\" data-copy=\"rgb\">Copy<\/button><\/div><\/div>\n            <div class=\"bf__row\"><div class=\"bf__k\">HSL<\/div><div class=\"bf__v\"><code id=\"bfHsl\">\u2014<\/code><button class=\"bf__copy\" data-copy=\"hsl\">Copy<\/button><\/div><\/div>\n          <\/div>\n\n          <div id=\"bfUseExplain\" style=\"margin-top:12px; color:rgba(255,255,255,.75); font-size:13px; line-height:1.4;\"><\/div>\n\n          <div style=\"display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;\">\n            <button id=\"bfCopyAll\" class=\"bf__btn\" type=\"button\">Copy all<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  `;\n\n  const $ = (sel) => mount.querySelector(sel);\n\n  const els = {\n    title: $(\"#bfDeckTitle\"),\n    desc: $(\"#bfDeckDesc\"),\n    status: $(\"#bfStatus\"),\n    grid: $(\"#bfGrid\"),\n    search: $(\"#bfSearch\"),\n    category: $(\"#bfCategory\"),\n    uvOnly: $(\"#bfUvOnly\"),\n    sort: $(\"#bfSort\"),\n    reset: $(\"#bfReset\"),\n    modal: $(\"#bfModal\"),\n    modalSwatch: $(\"#bfModalSwatch\"),\n    modalName: $(\"#bfModalName\"),\n    modalSub: $(\"#bfModalSub\"),\n    cat: $(\"#bfCat\"),\n    use: $(\"#bfUse\"),\n    useExplain: $(\"#bfUseExplain\"),\n    hex: $(\"#bfHex\"),\n    rgb: $(\"#bfRgb\"),\n    hsl: $(\"#bfHsl\"),\n    copyAll: $(\"#bfCopyAll\")\n  };\n\n  const clamp = (n,a,b)=>Math.max(a,Math.min(b,n));\n  const rgbToHex = (r,g,b)=>\"#\"+[r,g,b].map(x=>clamp(x,0,255).toString(16).padStart(2,\"0\")).join(\"\").toUpperCase();\n  const norm = (s)=>String(s||\"\").toLowerCase().trim();\n  const uniq = (arr)=>[...new Set(arr.filter(Boolean))].sort((a,b)=>a.localeCompare(b));\n  const escapeHtml = (s)=>String(s).replace(\/[&<>\"']\/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[c]));\n\n  function rgbToHsl(r,g,b){\n    r\/=255; g\/=255; b\/=255;\n    const max=Math.max(r,g,b), min=Math.min(r,g,b);\n    let h=0,s=0,l=(max+min)\/2;\n    const d=max-min;\n    if(d!==0){\n      s=d\/(1-Math.abs(2*l-1));\n      switch(max){\n        case r: h=((g-b)\/d)%6; break;\n        case g: h=(b-r)\/d+2; break;\n        case b: h=(r-g)\/d+4; break;\n      }\n      h*=60; if(h<0) h+=360;\n    }\n    return {h:Math.round(h), s:Math.round(s*100), l:Math.round(l*100)};\n  }\n\n  function autoCategory(r,g,b){\n    const {h,s,l} = rgbToHsl(r,g,b);\n    if (l >= 92 && s <= 12) return \"Whites\";\n    if (l <= 12 && s <= 18) return \"Blacks\";\n    if (s <= 10) return \"Greys\";\n    if (s <= 18 && l < 85 && l > 15) return \"Neutrals\";\n    if (h < 15 || h >= 345) return \"Reds\";\n    if (h < 35) return \"Oranges\";\n    if (h < 65) return \"Yellows\";\n    if (h < 90) return \"Yellow-Greens\";\n    if (h < 150) return \"Greens\";\n    if (h < 190) return \"Teals\";\n    if (h < 250) return \"Blues\";\n    if (h < 290) return \"Purples\";\n    if (h < 345) return \"Pinks\";\n    return \"Colors\";\n  }\n\n  function isLight(r,g,b){\n    const L = (0.2126*r + 0.7152*g + 0.0722*b) \/ 255;\n    return L > 0.62;\n  }\n\n  function fillSelect(sel, values){\n    const cur = sel.value;\n    sel.innerHTML = `<option value=\"\">\u038c\u03bb\u03b5\u03c2 \u03bf\u03b9 \u03ba\u03b1\u03c4\u03b7\u03b3\u03bf\u03c1\u03af\u03b5\u03c2<\/option>` + values.map(v=>`<option value=\"${escapeHtml(v)}\">${escapeHtml(v)}<\/option>`).join(\"\");\n    if(values.includes(cur)) sel.value = cur;\n  }\n\n  function copyText(text){\n    if (navigator.clipboard?.writeText) return navigator.clipboard.writeText(text);\n    const ta=document.createElement(\"textarea\"); ta.value=text; document.body.appendChild(ta); ta.select();\n    document.execCommand(\"copy\"); ta.remove();\n  }\n\n  function useExplain(uv){\n    return uv\n      ? \"\u2600 \u039a\u03b1\u03c4\u03ac\u03bb\u03bb\u03b7\u03bb\u03b7 \u03b3\u03b9\u03b1 \u03b5\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7: \u03b7 \u03b1\u03c0\u03cc\u03c7\u03c1\u03c9\u03c3\u03b7 \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03b7\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03c9\u03c2 UV resistant \u03ba\u03b1\u03b9 \u03c0\u03c1\u03bf\u03c4\u03b5\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 \u03b3\u03b9\u03b1 \u03b5\u03c6\u03b1\u03c1\u03bc\u03bf\u03b3\u03ad\u03c2 \u03c0\u03bf\u03c5 \u03b5\u03ba\u03c4\u03af\u03b8\u03b5\u03bd\u03c4\u03b1\u03b9 \u03c3\u03b5 \u03b7\u03bb\u03b9\u03b1\u03ba\u03ae \u03b1\u03ba\u03c4\u03b9\u03bd\u03bf\u03b2\u03bf\u03bb\u03af\u03b1.\"\n      : \"\u0393\u03b9\u03b1 \u03b5\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7: \u03b7 \u03b1\u03c0\u03cc\u03c7\u03c1\u03c9\u03c3\u03b7 \u03c0\u03c1\u03bf\u03c4\u03b5\u03af\u03bd\u03b5\u03c4\u03b1\u03b9 \u03ba\u03c5\u03c1\u03af\u03c9\u03c2 \u03b3\u03b9\u03b1 \u03b5\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03bf\u03cd\u03c2 \u03c7\u03ce\u03c1\u03bf\u03c5\u03c2.\";\n  }\n\n  let all = [];\n  let filtered = [];\n\n  function apply(){\n    const q = norm(els.search.value);\n    const cat = els.category.value;\n    const uvOnly = els.uvOnly.checked;\n\n    filtered = all.filter(c=>{\n      if (cat && c.category !== cat) return false;\n      if (uvOnly && !c.uv_resistant) return false;\n\n      if (!q) return true;\n      const hay = norm([c.code,c.name,c.category].filter(Boolean).join(\" \"));\n      return hay.includes(q);\n    });\n\n    const s = els.sort.value;\n\n    filtered.sort((a, b) => {\n      if (s === \"code_asc\") {\n        return (a.code || \"\").localeCompare(b.code || \"\", undefined, { numeric: true });\n      }\n      if (s === \"name_asc\") {\n        return (a.name || \"\").localeCompare(b.name || \"\");\n      }\n      if (s === \"name_desc\") {\n        return (b.name || \"\").localeCompare(a.name || \"\");\n      }\n      if (s === \"light_to_dark\") {\n        return (b.hsl.l - a.hsl.l);\n      }\n      if (s === \"cat_then_name\") {\n        const c = (a.category||\"\").localeCompare(b.category||\"\");\n        if (c !== 0) return c;\n        return (a.name || \"\").localeCompare(b.name || \"\");\n      }\n      \/\/ fallback: always by code\n      return (a.code || \"\").localeCompare(b.code || \"\", undefined, { numeric: true });\n    });\n\n    render();\n  }\n\n  function render(){\n    els.status.textContent = `${filtered.length} \u03b1\u03c0\u03bf\u03c7\u03c1\u03ce\u03c3\u03b5\u03b9\u03c2`;\n\n    if(filtered.length===0){\n      els.grid.innerHTML = `<div style=\"grid-column:1\/-1; padding:16px; border:1px dashed rgba(0,0,0,.18); border-radius:18px; color:rgba(0,0,0,.70);\">\n        \u0394\u03b5\u03bd \u03b2\u03c1\u03ad\u03b8\u03b7\u03ba\u03b1\u03bd \u03b1\u03c0\u03bf\u03c4\u03b5\u03bb\u03ad\u03c3\u03bc\u03b1\u03c4\u03b1 \u2014 \u03b4\u03bf\u03ba\u03af\u03bc\u03b1\u03c3\u03b5 reset\/\u03ac\u03bb\u03bb\u03b7 \u03b1\u03bd\u03b1\u03b6\u03ae\u03c4\u03b7\u03c3\u03b7.\n      <\/div>`;\n      return;\n    }\n\n    els.grid.innerHTML = filtered.map((c,i)=>{\n      const {r,g,b} = c.rgb;\n      const hex = c.hex;\n      const light = isLight(r,g,b);\n      const text = light ? \"#0b0f14\" : \"#ffffff\";\n      const chipBg = light ? \"rgba(255,255,255,.65)\" : \"rgba(0,0,0,.35)\";\n\n      return `\n      <article class=\"bf__card\" data-i=\"${i}\" tabindex=\"0\">\n        <div class=\"bf__swatch\" style=\"background:${hex}; color:${text}\">\n          ${c.uv_resistant ? `<span class=\"bf__uv\" style=\"background:${chipBg}; color:${text}\">\u2600 UV<\/span>` : ``}\n          <span class=\"bf__chip\" style=\"background:${chipBg}; color:${text}\">${escapeHtml(c.category)}<\/span>\n          <span class=\"bf__chip\" style=\"background:${chipBg}; color:${text}\">${escapeHtml(hex)}<\/span>\n        <\/div>\n        <div class=\"bf__body\">\n          <div style=\"min-width:0\">\n            <div class=\"bf__name\">${escapeHtml(c.name || c.code || \"\u2014\")}<\/div>\n            <div class=\"bf__sub\">${escapeHtml(c.code || \"\")}<\/div>\n          <\/div>\n          <span class=\"bf__chip\">${c.uv_resistant ? \"Exterior\" : \"Interior\"}<\/span>\n        <\/div>\n      <\/article>`;\n    }).join(\"\");\n\n    mount.querySelectorAll(\".bf__card\").forEach(card=>{\n      const open = ()=>openModal(Number(card.dataset.i));\n      card.addEventListener(\"click\", open);\n      card.addEventListener(\"keydown\", (e)=>{ if(e.key===\"Enter\"||e.key===\" \"){ e.preventDefault(); open(); }});\n    });\n  }\n\n  function openModal(i){\n    const c = filtered[i]; if(!c) return;\n    els.modalSwatch.style.background = c.hex;\n    els.modalName.textContent = c.name || c.code || \"\u2014\";\n    els.modalSub.textContent = c.code ? `Code: ${c.code}` : \"\";\n\n    els.cat.textContent = c.category;\n    els.use.textContent = c.uv_resistant ? \"\u039a\u03b1\u03c4\u03ac\u03bb\u03bb\u03b7\u03bb\u03b7 \u03b3\u03b9\u03b1 \u03b5\u03be\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7 (UV Resistant)\" : \"\u039a\u03b1\u03c4\u03ac\u03bb\u03bb\u03b7\u03bb\u03b7 \u03b3\u03b9\u03b1 \u03b5\u03c3\u03c9\u03c4\u03b5\u03c1\u03b9\u03ba\u03ae \u03c7\u03c1\u03ae\u03c3\u03b7\";\n    els.useExplain.textContent = useExplain(c.uv_resistant);\n\n    els.hex.textContent = c.hex;\n    els.rgb.textContent = `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`;\n    els.hsl.textContent = `hsl(${c.hsl.h} ${c.hsl.s}% ${c.hsl.l}%)`;\n\n    mount.querySelectorAll(\".bf__copy\").forEach(btn=>{\n      btn.onclick = () => {\n        const t = btn.dataset.copy;\n        const v = t===\"hex\" ? els.hex.textContent : (t===\"rgb\" ? els.rgb.textContent : els.hsl.textContent);\n        copyText(v);\n        btn.textContent = \"Copied\";\n        setTimeout(()=>btn.textContent=\"Copy\", 900);\n      };\n    });\n\n    els.copyAll.onclick = () => {\n      const lines = [\n        els.modalName.textContent,\n        els.cat.textContent,\n        els.use.textContent,\n        els.hex.textContent,\n        els.rgb.textContent,\n        els.hsl.textContent\n      ].join(\"\\n\");\n      copyText(lines);\n      els.copyAll.textContent = \"Copied!\";\n      setTimeout(()=>els.copyAll.textContent=\"Copy all\", 900);\n    };\n\n    els.modal.setAttribute(\"aria-hidden\",\"false\");\n    document.body.style.overflow=\"hidden\";\n  }\n\n  function closeModal(){\n    els.modal.setAttribute(\"aria-hidden\",\"true\");\n    document.body.style.overflow=\"\";\n  }\n  els.modal.addEventListener(\"click\",(e)=>{ if(e.target?.dataset?.close===\"1\") closeModal(); });\n  document.addEventListener(\"keydown\",(e)=>{ if(e.key===\"Escape\" && els.modal.getAttribute(\"aria-hidden\")===\"false\") closeModal(); });\n\n  [\"input\",\"change\"].forEach(evt=>{\n    els.search.addEventListener(evt, apply);\n    els.category.addEventListener(evt, apply);\n    els.uvOnly.addEventListener(evt, apply);\n    els.sort.addEventListener(evt, apply);\n  });\n\n  els.reset.addEventListener(\"click\", ()=>{\n    els.search.value=\"\";\n    els.category.value=\"\";\n    els.uvOnly.checked=false;\n    els.sort.value=\"code_asc\"; \/\/ \u2705 default back to ColorID\n    apply();\n  });\n\n  async function load(){\n    const res = await fetch(DATA_URL, { cache:\"no-store\" });\n    const json = await res.json();\n\n    const meta = json.meta || {};\n    const colors = Array.isArray(json.colors) ? json.colors : (Array.isArray(json) ? json : []);\n    if(colors.length===0) throw new Error(\"No colors in JSON\");\n\n    els.title.textContent = meta.deck || \"Fandeck\";\n    els.desc.textContent = meta.description || \"\u0395\u03c0\u03ad\u03bb\u03b5\u03be\u03b5 \u03b1\u03c0\u03cc\u03c7\u03c1\u03c9\u03c3\u03b7, \u03b4\u03b5\u03c2 \u03c4\u03b9\u03bc\u03ad\u03c2 \u03ba\u03b1\u03b9 \u03ba\u03ac\u03bd\u03b5 \u03b1\u03bd\u03c4\u03b9\u03b3\u03c1\u03b1\u03c6\u03ae.\";\n\n    all = colors.map((c, idx)=>{\n      const r = c.rgb?.r ?? c.colR ?? 0;\n      const g = c.rgb?.g ?? c.colG ?? 0;\n      const b = c.rgb?.b ?? c.colB ?? 0;\n      const hsl = rgbToHsl(r,g,b);\n\n      const uv = (c.uv_resistant === true) || (String(c.use_label || c.ColorUse || \"\").toLowerCase().includes(\"uv\"));\n      return {\n        id: c.id ?? (idx+1),\n        code: c.code || c.ColorID || \"\",\n        name: c.name || c.Colorname || c.code || c.ColorID || \"\",\n        rgb: { r, g, b },\n        hex: c.hex || rgbToHex(r,g,b),\n        hsl,\n        category: c.category || autoCategory(r,g,b),\n        uv_resistant: uv,\n        use_label: c.use_label || c.ColorUse || (uv ? \"UV Resistant\" : \"Interior Use\")\n      };\n    });\n\n    \/\/ \u2705 Ensure initial UI default is code sort\n    els.sort.value = \"code_asc\";\n\n    fillSelect(els.category, uniq(all.map(x=>x.category)));\n    filtered = [...all];\n    apply();\n  }\n\n  load().catch(err=>{\n    console.error(err);\n    els.status.textContent = \"Failed to load JSON (check path & format).\";\n  });\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de594ac elementor-widget elementor-widget-global elementor-global-7219 elementor-global-2295 elementor-widget-button\" data-id=\"de594ac\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.berling.gr\/en\/fandecks\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Return to fandecks<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9027c27 elementor-widget elementor-widget-global elementor-global-7008 elementor-global-1804 elementor-widget-text-editor\" data-id=\"9027c27\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Note:<\/strong><\/p>\n<p>The color samples photos may deviate from reality because of the limitations of each screen display or printing  For the full range of shades visit your nearest paint shop<\/p>\n<p>Tip 1: We recommend visiting the closest paint shop and asking for our colorcard or create a sample for you.<\/p>\n<p>Tip 2: Before painting interior or exterior surfaces we recommend asking for the specifications, surface preparation and any technical points in order to ensure great paint application results!<\/p>\n<p>Tip 3: Choose the color code you like and ask for the quantity you want.<\/p>\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Off White shades Color Celebration \u0395\u03c0\u03b9\u03c3\u03c4\u03c1\u03bf\u03c6\u03ae \u03c3\u03c4\u03b1 \u03c7\u03c1\u03c9\u03bc\u03b1\u03c4\u03bf\u03bb\u03cc\u03b3\u03b9\u03b1 \u03a3\u03b7\u03bc\u03b5\u03af\u03c9\u03c3\u03b7: \u03a4\u03b1 \u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1 \u03b1\u03c0\u03bf\u03c7\u03c1\u03ce\u03c3\u03b5\u03c9\u03bd \u03b5\u03bd\u03b4\u03ad\u03c7\u03b5\u03c4\u03b1\u03b9 \u03bd\u03b1 \u03b1\u03c0\u03bf\u03ba\u03bb\u03af\u03bd\u03bf\u03c5\u03bd \u03b1\u03c0\u03cc \u03c4\u03b7\u03bd \u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b9\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1 \u03bb\u03cc\u03b3\u03c9 \u03c4\u03c9\u03bd \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03b9\u03c3\u03bc\u03ce\u03bd \u03b1\u03c0\u03b5\u03b9\u03ba\u03cc\u03bd\u03b9\u03c3\u03b7\u03c2 \u03ba\u03ac\u03b8\u03b5 \u03bf\u03b8\u03cc\u03bd\u03b7\u03c2 \u03ae \u03b5\u03ba\u03c4\u03cd\u03c0\u03c9\u03c3\u03b7\u03c2. \u03a4\u03b1 \u03b4\u03b5\u03af\u03b3\u03bc\u03b1\u03c4\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b5\u03c0\u03b9\u03bb\u03b5\u03b3\u03bc\u03ad\u03bd\u03b1. \u0393\u03b9\u03b1 \u03c4\u03b7\u03bd \u03c0\u03bb\u03ae\u03c1\u03b7 \u03c3\u03b5\u03b9\u03c1\u03ac \u03b1\u03c0\u03bf\u03c7\u03c1\u03ce\u03c3\u03b5\u03c9\u03bd \u03b5\u03c0\u03b9\u03c3\u03ba\u03b5\u03c6\u03b8\u03b5\u03af\u03c4\u03b5 \u03c4\u03bf \u03ba\u03bf\u03bd\u03c4\u03b9\u03bd\u03cc \u03c3\u03b1\u03c2 \u03c7\u03c1\u03c9\u03bc\u03b1\u03c4\u03bf\u03c0\u03c9\u03bb\u03b5\u03af\u03bf. Tip 1: \u03a3\u03b1\u03c2 \u03c0\u03c1\u03bf\u03c4\u03b5\u03af\u03bd\u03bf\u03c5\u03bc\u03b5 \u03bd\u03b1 \u03b5\u03c0\u03b9\u03c3\u03ba\u03b5\u03c6\u03b8\u03b5\u03af\u03c4\u03b5 \u03c4\u03bf \u03c0\u03b9\u03bf \u03ba\u03bf\u03bd\u03c4\u03b9\u03bd\u03cc \u03c3\u03b5 \u03b5\u03c3\u03ac\u03c2 \u03c7\u03c1\u03c9\u03bc\u03b1\u03c4\u03bf\u03c0\u03c9\u03bb\u03b5\u03af\u03bf \u03ba\u03b1\u03b9 \u03bd\u03b1 \u03b6\u03b7\u03c4\u03ae\u03c3\u03b5\u03c4\u03b5 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12554,"parent":7014,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-14459","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/14459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/comments?post=14459"}],"version-history":[{"count":2,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/14459\/revisions"}],"predecessor-version":[{"id":14464,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/14459\/revisions\/14464"}],"up":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/media\/12554"}],"wp:attachment":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/media?parent=14459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}