Hogai Color Combo Builder \u2014 Build a bold, cohesive mini collection<\/title>\n <meta name=\"description\" content=\"Pick your room, vibe, and color bravery to get a clear Hogai palette and a mini collection you can shop in one click.\" \/>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Raleway:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n \/* \u2500\u2500 HOGAI WRAPPER + SCOPED VARIABLES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n \/* Wszystkie zmienne i style s\u0105 scoped do .hogai-tool-wrap\n \u017ceby nie wycieka\u0107 na WP theme (nav, linki, nag\u0142\u00f3wki etc.) *\/\n .hogai-tool-wrap {\n --black: #000000;\n --white: #ffffff;\n --off-white: #f9f9f9;\n --gray-light: #dddddd;\n --gray-border: #cccccc;\n --gray-medium: #999999;\n --text-primary: #212529;\n --text-dark: #040404;\n --orange: #ff5723;\n --font: 'Raleway', system-ui, -apple-system, sans-serif;\n --radius-sm: 4px;\n --radius-pill: 20px;\n --transition: 200ms ease;\n --container: 100%;\n\n width: 100%;\n font-family: var(--font);\n font-size: 16px;\n color: var(--text-primary);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n }\n\n \/* \u2500\u2500 SCOPED RESET \u2014 tylko wewn\u0105trz naszego toola \u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap *, .hogai-tool-wrap *::before, .hogai-tool-wrap *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n .hogai-tool-wrap img { display: block; max-width: 100%; height: auto; }\n .hogai-tool-wrap a { color: var(--black); text-decoration: none; transition: opacity var(--transition); }\n .hogai-tool-wrap a:hover { opacity: 0.6; }\n .hogai-tool-wrap ul, .hogai-tool-wrap ol { list-style: none; }\n .hogai-tool-wrap h1, .hogai-tool-wrap h2, .hogai-tool-wrap h3,\n .hogai-tool-wrap h4, .hogai-tool-wrap h5, .hogai-tool-wrap h6 {\n font-family: var(--font);\n font-weight: 400;\n color: var(--black);\n text-transform: uppercase;\n line-height: 1.15;\n }\n .hogai-tool-wrap ::selection { background: var(--black); color: var(--white); }\n\n \/* \u2500\u2500 LAYOUT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .container {\n width: 100%;\n max-width: var(--container);\n margin-inline: auto;\n padding-inline: clamp(20px, 4vw, 48px);\n padding-bottom: 80px;\n }\n\n \/* \u2500\u2500 PAGE HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .page-hero {\n padding: 56px 0 40px;\n border-bottom: 1px solid var(--gray-light);\n background: var(--off-white);\n width: 100%;\n }\n .hogai-tool-wrap .page-hero__inner {\n max-width: var(--container);\n margin-inline: auto;\n padding-inline: clamp(20px, 4vw, 48px);\n }\n .hogai-tool-wrap .page-hero__eyebrow {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 3px;\n color: var(--orange);\n margin-bottom: 16px;\n }\n .hogai-tool-wrap .page-hero__title {\n font-size: clamp(28px, 4.5vw, 48px);\n font-weight: 400;\n text-transform: uppercase;\n line-height: 1.05;\n margin-bottom: 16px;\n max-width: 700px;\n }\n .hogai-tool-wrap .page-hero__title em {\n font-style: normal;\n }\n .hogai-tool-wrap .page-hero__desc {\n font-size: 16px;\n color: #555;\n max-width: 560px;\n line-height: 1.7;\n }\n .hogai-tool-wrap .page-hero__desc small {\n display: block;\n margin-top: 8px;\n font-size: 12px;\n color: var(--gray-medium);\n letter-spacing: 0.3px;\n }\n\n \/* \u2500\u2500 MAIN GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .tool-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 0;\n margin-top: 0;\n }\n .hogai-tool-wrap .tool-grid.results-visible {\n grid-template-columns: 1fr;\n }\n @media (min-width: 900px) {\n .hogai-tool-wrap .tool-grid.results-visible {\n grid-template-columns: 1.05fr 0.95fr;\n align-items: start;\n }\n }\n\n .hogai-tool-wrap #results {\n display: none;\n }\n .hogai-tool-wrap #results.visible {\n display: block;\n }\n\n \/* \u2500\u2500 PANEL (replaces \"card\") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .panel {\n border-right: 1px solid var(--gray-light);\n padding: 32px 24px;\n }\n .hogai-tool-wrap .panel:last-child {\n border-right: none;\n padding: 32px 24px;\n }\n @media (max-width: 899px) {\n .hogai-tool-wrap .panel { border-right: none; padding: 28px 20px; }\n .hogai-tool-wrap .panel:first-child { border-bottom: 1px solid var(--gray-light); }\n .hogai-tool-wrap .panel:last-child { border-bottom: none; }\n .hogai-tool-wrap #results:not(.visible) + * { border-bottom: none; }\n .hogai-tool-wrap .panel:first-child:has(~ #results:not(.visible)) { border-bottom: none; }\n }\n\n .hogai-tool-wrap .panel__title {\n font-size: 22px;\n font-weight: 400;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 6px;\n }\n .hogai-tool-wrap .hint {\n font-size: 13px;\n color: var(--gray-medium);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 28px;\n }\n\n \/* \u2500\u2500 FORM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap form { display: grid; gap: 20px; }\n\n .hogai-tool-wrap .field { display: grid; gap: 6px; }\n\n .hogai-tool-wrap label {\n font-size: 12px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--black);\n }\n\n .hogai-tool-wrap .help {\n font-size: 12px;\n color: var(--gray-medium);\n line-height: 1.5;\n }\n\n .hogai-tool-wrap select, .hogai-tool-wrap input[type=\"text\"] {\n font-family: var(--font);\n font-size: 15px;\n color: var(--black);\n background: var(--white);\n border: 1px solid var(--gray-border);\n border-radius: var(--radius-sm);\n padding: 11px 14px;\n width: 100%;\n outline: none;\n transition: border-color var(--transition);\n appearance: none;\n -webkit-appearance: none;\n }\n .hogai-tool-wrap select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n padding-right: 36px;\n }\n .hogai-tool-wrap select:focus, .hogai-tool-wrap input[type=\"text\"]:focus {\n border-color: var(--black);\n }\n .hogai-tool-wrap select::placeholder, .hogai-tool-wrap input[type=\"text\"]::placeholder { color: var(--gray-medium); }\n\n \/* \u2500\u2500 CHIPS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding-top: 4px;\n }\n .hogai-tool-wrap .chip {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n padding: 7px 14px;\n border: 1px solid var(--gray-border);\n border-radius: var(--radius-pill);\n cursor: pointer;\n user-select: none;\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: border-color var(--transition), background var(--transition);\n }\n .hogai-tool-wrap .chip:hover { border-color: var(--black); }\n .hogai-tool-wrap .chip input {\n width: 15px;\n height: 15px;\n accent-color: var(--black);\n cursor: pointer;\n }\n .hogai-tool-wrap .chip:has(input:checked) {\n border-color: var(--black);\n background: var(--off-white);\n }\n\n \/* \u2500\u2500 BUTTONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }\n\n .hogai-tool-wrap .hogai-btn {\n display: inline-block;\n font-family: var(--font);\n font-size: 13px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n cursor: pointer;\n border-radius: var(--radius-sm);\n transition: all var(--transition);\n padding: 12px 20px;\n flex: 1;\n }\n \/* Primary = black fill *\/\n .hogai-tool-wrap .hogai-btn {\n color: var(--white);\n background: var(--black);\n border: 1px solid var(--black);\n }\n .hogai-tool-wrap .hogai-btn:hover { background: var(--text-primary); border-color: var(--text-primary); }\n .hogai-tool-wrap .hogai-btn:active { transform: translateY(1px); }\n\n \/* Secondary = outline *\/\n .hogai-tool-wrap .hogai-btn.secondary {\n color: var(--black);\n background: transparent;\n border: 1px solid var(--gray-border);\n }\n .hogai-tool-wrap .hogai-btn.secondary:hover { border-color: var(--black); }\n\n \/* Small variant *\/\n .hogai-tool-wrap .hogai-btn.small {\n padding: 9px 16px;\n flex: none;\n font-size: 12px;\n }\n\n .hogai-tool-wrap .note {\n font-size: 12px;\n color: var(--gray-medium);\n line-height: 1.6;\n margin-top: 4px;\n }\n\n \/* \u2500\u2500 ERRORS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .errors {\n border-left: 3px solid var(--orange);\n background: rgba(255,87,35,.06);\n padding: 12px 14px;\n border-radius: var(--radius-sm);\n display: none;\n }\n .hogai-tool-wrap .errors p { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }\n .hogai-tool-wrap .errors ul { margin: 8px 0 0 16px; font-size: 13px; color: var(--text-primary); list-style: disc; }\n\n \/* \u2500\u2500 RESULTS PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap #results { scroll-margin-top: 20px; border-top: none; }\n\n .hogai-tool-wrap .result-top {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n margin-bottom: 20px;\n }\n\n \/* Pills = category tags *\/\n .hogai-tool-wrap .kpis { display: flex; gap: 8px; flex-wrap: wrap; }\n .hogai-tool-wrap .pill {\n display: inline-block;\n padding: 3px 12px;\n border: 1px solid var(--gray-border);\n border-radius: var(--radius-pill);\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--gray-medium);\n }\n\n \/* \u2500\u2500 SWATCH CARDS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .palette {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n }\n @media (min-width: 520px) {\n .hogai-tool-wrap .palette { grid-template-columns: 1fr 1fr; }\n }\n @media (min-width: 900px) {\n .hogai-tool-wrap .palette { grid-template-columns: 1fr; }\n }\n\n .hogai-tool-wrap .swatchCard {\n border: 1px solid var(--gray-light);\n border-radius: var(--radius-sm);\n padding: 16px;\n display: grid;\n gap: 12px;\n background: var(--white);\n }\n .hogai-tool-wrap .swatches {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n align-items: center;\n }\n .hogai-tool-wrap .swatch {\n position: relative;\n width: 40px;\n height: 40px;\n border-radius: var(--radius-sm);\n border: 1px solid rgba(0,0,0,.12);\n cursor: default;\n }\n .hogai-tool-wrap .swatch::after {\n content: attr(data-name);\n position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n background: var(--black);\n color: var(--white);\n font-size: 11px;\n font-family: var(--font);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n white-space: nowrap;\n padding: 4px 8px;\n border-radius: var(--radius-sm);\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--transition);\n }\n .hogai-tool-wrap .swatch:hover::after {\n opacity: 1;\n }\n .hogai-tool-wrap .swatchLabel { display: grid; gap: 3px; }\n .hogai-tool-wrap .swatchLabel strong {\n font-size: 13px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n .hogai-tool-wrap .swatchLabel span {\n font-size: 13px;\n color: var(--gray-medium);\n }\n .hogai-tool-wrap .why {\n border-top: 1px solid var(--gray-light);\n padding-top: 10px;\n font-size: 13px;\n color: var(--gray-medium);\n line-height: 1.6;\n }\n .hogai-tool-wrap .why strong { color: var(--text-primary); }\n\n \/* \u2500\u2500 RECS LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .recList {\n padding-left: 0;\n display: grid;\n gap: 6px;\n }\n .hogai-tool-wrap .recList li {\n font-size: 14px;\n color: var(--text-primary);\n padding-left: 16px;\n position: relative;\n }\n .hogai-tool-wrap .recList li::before {\n content: counter(li-counter) \".\";\n counter-increment: li-counter;\n position: absolute;\n left: 0;\n color: var(--orange);\n font-weight: 700;\n font-size: 13px;\n }\n .hogai-tool-wrap ol.recList { counter-reset: li-counter; }\n\n \/* \u2500\u2500 CTA SECTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap #cta {\n margin-top: 20px;\n padding: 20px;\n border: 1px solid var(--gray-light);\n border-top: 3px solid var(--black);\n border-radius: var(--radius-sm);\n background: var(--off-white);\n }\n .hogai-tool-wrap #cta h3 {\n font-size: 15px;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 6px;\n }\n .hogai-tool-wrap #cta p {\n font-size: 13px;\n color: var(--gray-medium);\n margin-bottom: 14px;\n }\n\n .hogai-tool-wrap .ctaRow {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n }\n .hogai-tool-wrap .ctaRow .hogai-btn { flex: 1 1 auto; min-width: 160px; }\n\n \/* \u2500\u2500 STICKY CTA (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .stickyCta {\n position: sticky;\n bottom: 0;\n margin-top: 16px;\n padding-top: 12px;\n background: linear-gradient(to bottom, transparent, var(--white) 30%);\n }\n\n \/* \u2500\u2500 PHOTO UPLOAD TABS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .input-tabs {\n display: flex;\n gap: 0;\n border-bottom: 1px solid var(--gray-light);\n margin-bottom: 24px;\n }\n .hogai-tool-wrap .input-tab {\n font-family: var(--font);\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--gray-medium);\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n margin-bottom: -1px;\n padding: 10px 16px 10px 0;\n cursor: pointer;\n transition: color var(--transition), border-color var(--transition);\n }\n .hogai-tool-wrap .input-tab.active {\n color: var(--black);\n border-bottom-color: var(--black);\n }\n .hogai-tool-wrap .input-tab:hover:not(.active) { color: var(--text-primary); }\n\n .hogai-tool-wrap .tab-pane { display: none; }\n .hogai-tool-wrap .tab-pane.active { display: block; }\n\n \/* \u2500\u2500 DROP ZONE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .drop-zone {\n border: 1.5px dashed var(--gray-border);\n border-radius: var(--radius-sm);\n padding: 36px 20px;\n text-align: center;\n cursor: pointer;\n transition: border-color var(--transition), background var(--transition);\n position: relative;\n }\n .hogai-tool-wrap .drop-zone:hover, .hogai-tool-wrap .drop-zone.drag-over {\n border-color: var(--black);\n background: var(--off-white);\n }\n .hogai-tool-wrap .drop-zone input[type=\"file\"] {\n position: absolute;\n inset: 0;\n opacity: 0;\n cursor: pointer;\n width: 100%;\n height: 100%;\n }\n .hogai-tool-wrap .drop-zone__icon {\n font-size: 28px;\n margin-bottom: 10px;\n line-height: 1;\n }\n .hogai-tool-wrap .drop-zone__label {\n font-size: 13px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--black);\n display: block;\n margin-bottom: 4px;\n }\n .hogai-tool-wrap .drop-zone__sub {\n font-size: 12px;\n color: var(--gray-medium);\n }\n\n \/* \u2500\u2500 PHOTO PREVIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .photo-preview {\n display: none;\n margin-top: 16px;\n gap: 12px;\n }\n .hogai-tool-wrap .photo-preview.visible { display: grid; }\n .hogai-tool-wrap .photo-preview__img {\n width: 100%;\n aspect-ratio: 16\/9;\n object-fit: cover;\n border-radius: var(--radius-sm);\n border: 1px solid var(--gray-light);\n }\n .hogai-tool-wrap .photo-preview__colors {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n align-items: center;\n }\n .hogai-tool-wrap .photo-preview__swatch {\n width: 28px;\n height: 28px;\n border-radius: var(--radius-sm);\n border: 1px solid rgba(0,0,0,.12);\n position: relative;\n cursor: default;\n }\n .hogai-tool-wrap .photo-preview__swatch::after {\n content: attr(data-name);\n position: absolute;\n bottom: calc(100% + 5px);\n left: 50%;\n transform: translateX(-50%);\n background: var(--black);\n color: var(--white);\n font-size: 10px;\n font-family: var(--font);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n white-space: nowrap;\n padding: 3px 7px;\n border-radius: var(--radius-sm);\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--transition);\n }\n .hogai-tool-wrap .photo-preview__swatch:hover::after { opacity: 1; }\n\n .hogai-tool-wrap .photo-status {\n font-size: 12px;\n color: var(--gray-medium);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-top: 4px;\n }\n .hogai-tool-wrap .photo-status strong { color: var(--orange); }\n\n .hogai-tool-wrap .hogai-btn-analyze {\n margin-top: 14px;\n width: 100%;\n }\n .hogai-tool-wrap .photo-note {\n font-size: 12px;\n color: var(--gray-medium);\n margin-top: 10px;\n line-height: 1.6;\n }\n\n \/* \u2500\u2500 DIVIDER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .section-divider {\n border: none;\n border-top: 1px solid var(--gray-light);\n margin: 0;\n }\n\n \/* \u2500\u2500 KEYBOARD FOCUS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap.show-focus *:focus { outline: 2px solid var(--orange); outline-offset: 2px; }\n\n \/* \u2500\u2500 REDUCED MOTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n @media (prefers-reduced-motion: reduce) {\n .hogai-tool-wrap * { scroll-behavior: auto; }\n .hogai-tool-wrap .hogai-btn:active { transform: none; }\n }\n <\/style>\n<\/head>\n\n<body>\n\n<div class=\"hogai-tool-wrap\">\n\n \n <section class=\"page-hero\">\n <div class=\"page-hero__inner\">\n <h1 class=\"page-hero__title\">\n Pick your vibe. Get a clear palette<br>\n + what to shop first.\n <\/h1>\n <p class=\"page-hero__desc\">\n Fill this in to get a simple, no-jargon color plan for your room \u2014 plus category links to start shopping.\n <small>Note: This tool does not make discount claims or delivery promises.<\/small>\n <\/p>\n <\/div>\n <\/section>\n\n <hr class=\"section-divider\">\n\n \n <div class=\"container\">\n <div class=\"tool-grid\">\n\n \n <section class=\"panel\" aria-labelledby=\"formTitle\">\n <h2 class=\"panel__title\" id=\"formTitle\">Your room + color preferences<\/h2>\n\n \n <div class=\"input-tabs\" role=\"tablist\">\n <button class=\"input-tab active\" role=\"tab\" aria-selected=\"true\" id=\"tab-manual\" aria-controls=\"pane-manual\">Fill manually<\/button>\n <button class=\"input-tab\" role=\"tab\" aria-selected=\"false\" id=\"tab-photo\" aria-controls=\"pane-photo\">Upload a photo<\/button>\n <\/div>\n\n <div class=\"errors\" id=\"errors\" role=\"alert\" aria-live=\"assertive\">\n <p>Please fix the following:<\/p>\n <ul id=\"errorList\"><\/ul>\n <\/div>\n\n \n <div class=\"tab-pane active\" id=\"pane-manual\" role=\"tabpanel\" aria-labelledby=\"tab-manual\">\n <p class=\"hint\" style=\"margin-top:0\">3\u20135 quick choices. Results appear instantly.<\/p>\n\n <form id=\"builderForm\" novalidate>\n <div class=\"field\">\n <label for=\"room\">Room type<\/label>\n <select id=\"room\" name=\"room\" required>\n <option value=\"\">Select\u2026<\/option>\n <option value=\"Living room\">Living room<\/option>\n <option value=\"Bedroom\">Bedroom<\/option>\n <option value=\"Hallway\">Hallway<\/option>\n <option value=\"Home office\">Home office<\/option>\n <option value=\"Dining area\">Dining area<\/option>\n <\/select>\n <p class=\"help\">This helps choose what carries color best (mirror vs table vs accents).<\/p>\n <\/div>\n\n <div class=\"field\">\n <label for=\"mood\">How do you want the space to feel?<\/label>\n <select id=\"mood\" name=\"mood\" required>\n <option value=\"\">Select\u2026<\/option>\n <option value=\"Calm & collected\">Calm & collected<\/option>\n <option value=\"Playful + warm\">Playful + warm<\/option>\n <option value=\"Bold & graphic\">Bold & graphic<\/option>\n <option value=\"Gallery-like\">Gallery-like<\/option>\n <\/select>\n <p class=\"help\">Your mood drives the accent choice and how many colors we suggest.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label for=\"base\">Base vibe (your “canvas”)<\/label>\n <select id=\"base\" name=\"base\" required>\n <option value=\"\">Select\u2026<\/option>\n <option value=\"Light base\">Light base<\/option>\n <option value=\"Neutral base\">Neutral base<\/option>\n <option value=\"Dark base\">Dark base<\/option>\n <\/select>\n <p class=\"help\">Your base acts like a “canvas.” Accents do the talking.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label id=\"accentsLabel\">Accent colors (pick up to 2)<\/label>\n <div class=\"chips\" role=\"group\" aria-labelledby=\"accentsLabel\">\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Blue\" \/>\n <span>Blue<\/span>\n <\/label>\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Pink\" \/>\n <span>Pink<\/span>\n <\/label>\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Green\" \/>\n <span>Green<\/span>\n <\/label>\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Red\" \/>\n <span>Red<\/span>\n <\/label>\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Yellow\" \/>\n <span>Yellow<\/span>\n <\/label>\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Surprise me\" \/>\n <span>Surprise me<\/span>\n <\/label>\n <\/div>\n <p class=\"help\">Max 2 so it stays cohesive. If you pick “Surprise me” we’ll select accents for you.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label for=\"existing\">What do you already have?<\/label>\n <input\n id=\"existing\"\n name=\"existing\"\n type=\"text\"\n placeholder='e.g., \"grey sofa\", \"wood floors\", \"white walls\", or \"nothing yet\"'\n maxlength=\"80\"\n autocomplete=\"off\"\n \/>\n <p class=\"help\">Optional. We’ll use it as a “don’t fight the room” constraint.<\/p>\n <\/div>\n\n <div class=\"row\">\n <button class=\"hogai-btn\" type=\"submit\" id=\"buildBtn\">Build my palette<\/button>\n <button class=\"hogai-btn secondary small\" type=\"button\" id=\"resetBtn\">Reset<\/button>\n <\/div>\n\n <p class=\"note\">\n Tip: After you get a palette, use the shop buttons to browse categories and pick colors that match your result.\n <\/p>\n <\/form>\n <\/div>\n\n \n <div class=\"tab-pane\" id=\"pane-photo\" role=\"tabpanel\" aria-labelledby=\"tab-photo\">\n <p class=\"hint\" style=\"margin-top:0\">We’ll read dominant colors from your photo and pre-fill the form.<\/p>\n\n <div class=\"drop-zone\" id=\"dropZone\">\n <input type=\"file\" id=\"photoInput\" accept=\"image\/*\" aria-label=\"Upload a room photo\">\n <div class=\"drop-zone__icon\" id=\"dropIcon\">\ud83d\udcf7<\/div>\n <span class=\"drop-zone__label\" id=\"dropLabel\">Drop a photo here or click to browse<\/span>\n <span class=\"drop-zone__sub\" id=\"dropSub\">JPG, PNG, WEBP \u2014 any size<\/span>\n <\/div>\n\n <div class=\"photo-preview\" id=\"photoPreview\">\n <img decoding=\"async\" class=\"photo-preview__img\" id=\"photoThumb\" src=\"\" alt=\"Your room photo\">\n <div>\n <p class=\"photo-status\" id=\"photoStatus\">Detecting colors\u2026<\/p>\n <div class=\"photo-preview__colors\" id=\"photoColors\"><\/div>\n <\/div>\n <\/div>\n\n <button class=\"hogai-btn hogai-btn-analyze\" id=\"analyzeBtn\" type=\"button\" style=\"display:none\">\n Apply to form + build palette\n <\/button>\n <p class=\"photo-note\">\n Room type is the only field you’ll need to confirm \u2014 color, mood and base are set automatically from your photo.\n <\/p>\n\n <canvas id=\"analyzeCanvas\" style=\"display:none\"><\/canvas>\n <\/div>\n\n <\/section>\n\n \n <section class=\"panel\" id=\"results\" aria-labelledby=\"resultsTitle\">\n <div class=\"result-top\">\n <div>\n <h2 class=\"panel__title\" id=\"resultsTitle\">Your palette + mini collection<\/h2>\n <p class=\"hint\" id=\"resultsIntro\">Fill the form to see your results here.<\/p>\n <\/div>\n <div class=\"kpis\" aria-label=\"Summary badges\">\n <span class=\"pill\" id=\"pillRoom\">Room: \u2014<\/span>\n <span class=\"pill\" id=\"pillMood\">Vibe: \u2014<\/span>\n <span class=\"pill\" id=\"pillRule\">Rule: \u2014<\/span>\n <\/div>\n <\/div>\n\n <div id=\"liveResults\" aria-live=\"polite\">\n <div class=\"palette\" aria-label=\"Palette output\">\n <div class=\"swatchCard\">\n <div class=\"swatches\" aria-label=\"Base and accent swatches\">\n <div class=\"swatch\" style=\"background:#1f2937\" aria-hidden=\"true\"><\/div>\n <div class=\"swatch\" style=\"background:#3094ff\" aria-hidden=\"true\"><\/div>\n <div class=\"swatch\" style=\"background:#34d399\" aria-hidden=\"true\"><\/div>\n <\/div>\n <div class=\"swatchLabel\">\n <strong>Example palette (placeholder)<\/strong>\n <span>Submit to generate your custom version.<\/span>\n <\/div>\n <div class=\"why\">\n You’ll get: 1 base + 1\u20132 accents, plus what to shop first.\n <\/div>\n <\/div>\n\n <div class=\"swatchCard\">\n <div class=\"swatchLabel\">\n <strong>Mini collection (starter set)<\/strong>\n <span>Categories chosen for your room + vibe.<\/span>\n <\/div>\n <ul class=\"recList\" id=\"recList\">\n <li>Mirror (strong statement, low clutter)<\/li>\n <li>Coffee table (anchors the room)<\/li>\n <li>Furniture category (browse matching pieces)<\/li>\n <\/ul>\n <p class=\"note\" id=\"noteExisting\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"stickyCta\" aria-hidden=\"false\">\n <section id=\"cta\" aria-labelledby=\"ctaTitle\">\n <h3 id=\"ctaTitle\">Ready to shop your palette?<\/h3>\n <p id=\"ctaCopy\">Open a category in a new tab. We’ll pass your palette as a note in the URL.<\/p>\n <div class=\"ctaRow\">\n <button class=\"hogai-btn\" id=\"ctaFurniture\" type=\"button\">\n Shop Furniture in this palette\n <\/button>\n <button class=\"hogai-btn secondary\" id=\"ctaMirrors\" type=\"button\">\n Shop Mirrors\n <\/button>\n <button class=\"hogai-btn secondary\" id=\"ctaCoffee\" type=\"button\">\n Shop Coffee Tables\n <\/button>\n <button class=\"hogai-btn secondary\" id=\"ctaTextiles\" type=\"button\">\n Shop Textiles\n <\/button>\n <\/div>\n <\/section>\n <\/div>\n <\/section>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ Basic DataLayer setup (for GTM \/ analytics)\n window.dataLayer = window.dataLayer || [];\n\n \/\/ \u2500\u2500 TAB SWITCHING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n document.getElementById(\"tab-manual\").addEventListener(\"click\", () => switchTab(\"manual\"));\n document.getElementById(\"tab-photo\").addEventListener(\"click\", () => switchTab(\"photo\"));\n\n function switchTab(which) {\n [\"manual\",\"photo\"].forEach(t => {\n document.getElementById(\"tab-\" + t).classList.toggle(\"active\", t === which);\n document.getElementById(\"tab-\" + t).setAttribute(\"aria-selected\", t === which);\n document.getElementById(\"pane-\" + t).classList.toggle(\"active\", t === which);\n });\n }\n\n \/\/ \u2500\u2500 PHOTO ANALYSIS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n const dropZone = document.getElementById(\"dropZone\");\n const photoInput = document.getElementById(\"photoInput\");\n const photoPreview = document.getElementById(\"photoPreview\");\n const photoThumb = document.getElementById(\"photoThumb\");\n const photoStatus = document.getElementById(\"photoStatus\");\n const photoColors = document.getElementById(\"photoColors\");\n const analyzeBtn = document.getElementById(\"analyzeBtn\");\n const canvas = document.getElementById(\"analyzeCanvas\");\n const ctx = canvas.getContext(\"2d\");\n\n \/\/ \u2500\u2500 MOBILE: swap to camera capture \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n const isMobile = window.matchMedia(\"(pointer: coarse)\").matches;\n if (isMobile) {\n photoInput.setAttribute(\"capture\", \"environment\");\n document.getElementById(\"dropIcon\").textContent = \"\ud83d\udcf8\";\n document.getElementById(\"dropLabel\").textContent = \"Tap to take a photo\";\n document.getElementById(\"dropSub\").textContent = \"Opens your camera directly\";\n }\n\n \/\/ Drag-over visual feedback\n dropZone.addEventListener(\"dragover\", e => { e.preventDefault(); dropZone.classList.add(\"drag-over\"); });\n dropZone.addEventListener(\"dragleave\", () => dropZone.classList.remove(\"drag-over\"));\n dropZone.addEventListener(\"drop\", e => {\n e.preventDefault();\n dropZone.classList.remove(\"drag-over\");\n const file = e.dataTransfer.files[0];\n if (file && file.type.startsWith(\"image\/\")) processPhoto(file);\n });\n photoInput.addEventListener(\"change\", () => {\n if (photoInput.files[0]) processPhoto(photoInput.files[0]);\n });\n\n let detectedPhotoState = null; \/\/ filled after analysis\n\n function processPhoto(file) {\n const url = URL.createObjectURL(file);\n photoThumb.src = url;\n photoPreview.classList.add(\"visible\");\n photoStatus.innerHTML = \"Detecting colors\u2026\";\n photoColors.innerHTML = \"\";\n analyzeBtn.style.display = \"none\";\n\n const img = new Image();\n img.onload = () => {\n \/\/ Sample at max 200x200 for speed\n const W = Math.min(img.width, 200);\n const H = Math.min(img.height, 200);\n canvas.width = W;\n canvas.height = H;\n ctx.drawImage(img, 0, 0, W, H);\n\n const data = ctx.getImageData(0, 0, W, H).data;\n const pixels = [];\n \/\/ Sample every 4th pixel row\/col\n for (let y = 0; y < H; y += 4) {\n for (let x = 0; x < W; x += 4) {\n const i = (y * W + x) * 4;\n const r = data[i], g = data[i+1], b = data[i+2], a = data[i+3];\n if (a < 128) continue; \/\/ skip transparent\n pixels.push([r, g, b]);\n }\n }\n\n \/\/ k-means clustering k=5 for dominant colors\n const clusters = kMeans(pixels, 5, 12);\n\n \/\/ Sort by cluster size (most dominant first)\n clusters.sort((a, b) => b.count - a.count);\n\n \/\/ Map each cluster center to nearest HOGAI color\n const hogaiMatches = clusters.map(c => nearestHogai(c.center));\n\n \/\/ Deduplicate (same HOGAI color may match multiple clusters)\n const seen = new Set();\n const uniqueMatches = [];\n for (const m of hogaiMatches) {\n if (!seen.has(m.name)) { seen.add(m.name); uniqueMatches.push(m); }\n if (uniqueMatches.length >= 3) break;\n }\n\n \/\/ Derive form values from image characteristics\n const avgBrightness = pixels.reduce((s, p) => s + (p[0]*0.299 + p[1]*0.587 + p[2]*0.114), 0) \/ pixels.length;\n const avgSaturation = pixels.reduce((s, p) => {\n const max = Math.max(...p), min = Math.min(...p);\n return s + (max === 0 ? 0 : (max - min) \/ max);\n }, 0) \/ pixels.length;\n\n let base, mood;\n if (avgBrightness > 180) base = \"Light base\";\n else if (avgBrightness > 100) base = \"Neutral base\";\n else base = \"Dark base\";\n\n if (avgSaturation > 0.45) mood = \"Bold & graphic\";\n else if (avgSaturation > 0.25) mood = \"Playful + warm\";\n else if (avgBrightness > 150) mood = \"Gallery-like\";\n else mood = \"Calm & collected\";\n\n \/\/ Pick accents: top 1\u20132 non-base colors from matches\n const baseColor = uniqueMatches[0];\n const accents = uniqueMatches.slice(1, 3);\n\n detectedPhotoState = { base, mood, baseColor, accents };\n\n \/\/ Render swatches\n photoColors.innerHTML = uniqueMatches.map(c =>\n `<div class=\"photo-preview__swatch\" style=\"background:${c.hex}\" data-name=\"${c.name}\" title=\"${c.name}\"><\/div>`\n ).join(\"\");\n\n photoStatus.innerHTML = `<strong>${uniqueMatches.length} HOGAI colors detected<\/strong> \u2014 Base: ${base} \u00b7 Mood: ${mood}`;\n analyzeBtn.style.display = \"block\";\n URL.revokeObjectURL(url);\n };\n img.src = url;\n }\n\n analyzeBtn.addEventListener(\"click\", () => {\n if (!detectedPhotoState) return;\n const { base, mood, accents } = detectedPhotoState;\n\n \/\/ Apply to form\n document.getElementById(\"base\").value = base;\n document.getElementById(\"mood\").value = mood;\n\n \/\/ Uncheck all accent checkboxes, then check matching ones\n document.querySelectorAll('input[name=\"accent\"]').forEach(cb => cb.checked = false);\n const accentNameMap = {\n \"Cobalt Love\": \"Blue\", \"Blue Jeans\": \"Blue\",\n \"Baby Blue\": \"Blue\",\n \"Pink Power\": \"Pink\",\n \"Green Bottle\": \"Green\", \"Dusty Sage\": \"Green\",\n \"Red Light\": \"Red\", \"Burgundy Star\": \"Red\",\n \"Orange Joy\": \"Yellow\", \"Ecru Lady\": \"Yellow\",\n \"Grey Flow\": null, \"Black Night\": null\n };\n accents.forEach(a => {\n const formVal = accentNameMap[a.name];\n if (formVal) {\n const cb = document.querySelector(`input[name=\"accent\"][value=\"${formVal}\"]`);\n if (cb) cb.checked = true;\n }\n });\n\n \/\/ Switch to manual tab so user sees + confirms room type\n switchTab(\"manual\");\n\n \/\/ Highlight room field\n const roomEl = document.getElementById(\"room\");\n roomEl.style.borderColor = \"var(--orange)\";\n roomEl.focus();\n setTimeout(() => roomEl.style.borderColor = \"\", 2500);\n\n window.dataLayer.push({ event: \"tool_photo_analyzed\", tool: TOOL_NAME });\n });\n\n \/\/ \u2500\u2500 K-MEANS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function kMeans(pixels, k, iterations) {\n \/\/ Init centers by picking spread-out pixels\n let centers = [];\n centers.push(pixels[Math.floor(Math.random() * pixels.length)]);\n while (centers.length < k) {\n \/\/ k-means++ init: pick pixel farthest from existing centers\n const dists = pixels.map(p => Math.min(...centers.map(c => colorDistSq(p, c))));\n const total = dists.reduce((a, b) => a + b, 0);\n let r = Math.random() * total, cum = 0;\n for (let i = 0; i < pixels.length; i++) {\n cum += dists[i];\n if (cum >= r) { centers.push(pixels[i]); break; }\n }\n }\n\n let clusters = [];\n for (let iter = 0; iter < iterations; iter++) {\n clusters = centers.map(c => ({ center: [...c], pixels: [], count: 0 }));\n for (const p of pixels) {\n let best = 0, bestD = Infinity;\n centers.forEach((c, i) => { const d = colorDistSq(p, c); if (d < bestD) { bestD = d; best = i; } });\n clusters[best].pixels.push(p);\n clusters[best].count++;\n }\n \/\/ Recompute centers\n centers = clusters.map(cl => {\n if (!cl.pixels.length) return cl.center;\n const avg = [0,0,0];\n cl.pixels.forEach(p => { avg[0]+=p[0]; avg[1]+=p[1]; avg[2]+=p[2]; });\n return avg.map(v => Math.round(v \/ cl.pixels.length));\n });\n }\n clusters.forEach((cl, i) => cl.center = centers[i]);\n return clusters;\n }\n\n function colorDistSq([r1,g1,b1], [r2,g2,b2]) {\n return (r1-r2)**2 + (g1-g2)**2 + (b1-b2)**2;\n }\n\n \/\/ \u2500\u2500 NEAREST HOGAI COLOR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function hexToRgb(hex) {\n const h = hex.replace(\"#\",\"\");\n return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)];\n }\n\n function nearestHogai(rgb) {\n const ALL_HOGAI = [\n { name: \"Cobalt Love\", hex: \"#1440b8\" },\n { name: \"Orange Joy\", hex: \"#DA6E00\" },\n { name: \"Red Light\", hex: \"#e0281a\" },\n { name: \"Burgundy Star\", hex: \"#6e1332\" },\n { name: \"Green Bottle\", hex: \"#375e30\" },\n { name: \"Blue Jeans\", hex: \"#2a5fa5\" },\n { name: \"Black Night\", hex: \"#000000\" },\n { name: \"Pink Power\", hex: \"#D8A0A6\" },\n { name: \"Baby Blue\", hex: \"#8ab4cc\" },\n { name: \"Grey Flow\", hex: \"#9ea3b0\" },\n { name: \"Dusty Sage\", hex: \"#a3b18a\" },\n { name: \"Ecru Lady\", hex: \"#d5c9a1\" }\n ];\n let best = ALL_HOGAI[0], bestD = Infinity;\n for (const c of ALL_HOGAI) {\n const d = colorDistSq(rgb, hexToRgb(c.hex));\n if (d < bestD) { bestD = d; best = c; }\n }\n return best;\n }\n\n \/\/ --- CTA destinations (confirmed Hogai category URLs) ---\n const BASE_URLS = {\n furniture: \"https:\/\/hogai.store\/en\/store\/\",\n mirrors: \"https:\/\/hogai.store\/en\/kategoria-produktu\/mirrors\/\",\n coffee: \"https:\/\/hogai.store\/en\/kategoria-produktu\/coffee-tables\/\",\n textiles: \"https:\/\/hogai.store\/en\/kategoria-produktu\/blankets\/\"\n };\n\n \/\/ --- Utilities ---\n function clamp(n, min, max){ return Math.max(min, Math.min(max, n)); }\n\n function safeSlug(str){\n return (str || \"\")\n .toLowerCase()\n .trim()\n .replace(\/\\s+\/g, \"-\")\n .replace(\/[^a-z0-9\\-]\/g, \"\")\n .slice(0, 60);\n }\n\n function appendParams(url, params){\n const u = new URL(url);\n Object.entries(params).forEach(([k,v]) => {\n if (v !== undefined && v !== null && String(v).length){\n u.searchParams.set(k, String(v));\n }\n });\n return u.toString();\n }\n\n function openCta(url, toolName, destinationLabel){\n window.dataLayer.push({ event: \"tool_cta_click\", tool: toolName, destination: destinationLabel });\n\n \/\/ Open in new tab safely\n const a = document.createElement(\"a\");\n a.href = url;\n a.target = \"_blank\";\n a.rel = \"noopener\";\n document.body.appendChild(a);\n a.click();\n a.remove();\n }\n\n \/\/ --- Tool logic (transparent, simple rules) ---\n const TOOL_NAME = \"Hogai Color Combo Builder\";\n\n \/\/ All 12 official HOGAI product colors\n const HOGAI_COLORS = {\n \"Cobalt Love\": { name: \"Cobalt Love\", hex: \"#1440b8\" },\n \"Orange Joy\": { name: \"Orange Joy\", hex: \"#DA6E00\" },\n \"Red Light\": { name: \"Red Light\", hex: \"#e0281a\" },\n \"Burgundy Star\": { name: \"Burgundy Star\", hex: \"#6e1332\" },\n \"Green Bottle\": { name: \"Green Bottle\", hex: \"#375e30\" },\n \"Blue Jeans\": { name: \"Blue Jeans\", hex: \"#2a5fa5\" },\n \"Black Night\": { name: \"Black Night\", hex: \"#000000\" },\n \"Pink Power\": { name: \"Pink Power\", hex: \"#D8A0A6\" },\n \"Baby Blue\": { name: \"Baby Blue\", hex: \"#8ab4cc\" },\n \"Grey Flow\": { name: \"Grey Flow\", hex: \"#9ea3b0\" },\n \"Dusty Sage\": { name: \"Dusty Sage\", hex: \"#a3b18a\" },\n \"Ecru Lady\": { name: \"Ecru Lady\", hex: \"#d5c9a1\" }\n };\n\n const PALETTES = {\n base: {\n \"Light base\": { name: \"Ecru Lady\", hex: \"#d5c9a1\", note: \"Keeps the room airy; accents pop cleanly.\" },\n \"Neutral base\": { name: \"Grey Flow\", hex: \"#9ea3b0\", note: \"Soft backdrop; works with most bold accents.\" },\n \"Dark base\": { name: \"Black Night\",hex: \"#000000\", note: \"Drama + contrast; use 1\u20132 sharp accents.\" }\n },\n accents: {\n Blue: HOGAI_COLORS[\"Cobalt Love\"],\n Pink: HOGAI_COLORS[\"Pink Power\"],\n Green: HOGAI_COLORS[\"Green Bottle\"],\n Red: HOGAI_COLORS[\"Red Light\"],\n Yellow: HOGAI_COLORS[\"Orange Joy\"]\n },\n neutrals: [\n HOGAI_COLORS[\"Baby Blue\"],\n HOGAI_COLORS[\"Dusty Sage\"],\n HOGAI_COLORS[\"Ecru Lady\"]\n ]\n };\n\n function pickSurpriseAccents(baseVibe, mood){\n \/\/ Simple deterministic selection based on mood + base\n const choices = Object.keys(PALETTES.accents);\n if (mood.includes(\"Calm\")) return baseVibe === \"Dark base\" ? [\"Green\"] : [\"Blue\", \"Green\"];\n if (mood.includes(\"Playful\")) return [\"Pink\", \"Blue\"];\n if (mood.includes(\"Bold\")) return [\"Red\", \"Blue\"];\n return [\"Blue\", \"Yellow\"]; \/\/ Gallery-like\n }\n\n function buildRule(mood, baseVibe, accentsCount){\n \/\/ Transparent rule summary for trust\n if (mood.includes(\"Calm\")) return accentsCount === 1 ? \"1 accent max, clean contrast\" : \"2 accents max, keep shapes simple\";\n if (mood.includes(\"Playful\")) return \"2 accents, mix shapes (but keep base quiet)\";\n if (mood.includes(\"Bold\")) return baseVibe === \"Dark base\" ? \"1\u20132 accents, high contrast\" : \"2 accents, one as hero\";\n return \"1 hero accent + 1 highlight, curated feel\";\n }\n\n function categoryGuidance(room, mood){\n \/\/ Keep it practical + consistent with your preferred categories\n const roomLower = room.toLowerCase();\n let first = \"Mirrors\";\n let second = \"Coffee tables\";\n let third = \"Furniture\";\n\n if (roomLower.includes(\"hallway\")){\n first = \"Mirrors\";\n second = \"Furniture\";\n third = \"Coffee tables\";\n } else if (roomLower.includes(\"bedroom\")){\n first = \"Mirrors\";\n second = \"Furniture\";\n third = \"Coffee tables\";\n } else if (roomLower.includes(\"office\")){\n first = \"Furniture\";\n second = \"Mirrors\";\n third = \"Coffee tables\";\n } else if (roomLower.includes(\"dining\")){\n first = \"Furniture\";\n second = \"Mirrors\";\n third = \"Coffee tables\";\n }\n\n let tip = \"Start with one statement piece, then add one supporting color.\";\n if (mood.includes(\"Calm\")) tip = \"Keep the base clean; let one accent carry the personality.\";\n if (mood.includes(\"Playful\")) tip = \"Use two accents \u2014 one main, one small highlight \u2014 so it stays intentional.\";\n if (mood.includes(\"Bold\")) tip = \"Pick a hero color, then repeat it once (mirror + table) for cohesion.\";\n if (mood.includes(\"Gallery\")) tip = \"Use a hero accent + a highlight; repeat shapes for a curated look.\";\n\n return { order: [first, second, third], tip };\n }\n\n \/\/ --- Form handling + validation ---\n const form = document.getElementById(\"builderForm\");\n const errorsBox = document.getElementById(\"errors\");\n const errorList = document.getElementById(\"errorList\");\n\n const roomEl = document.getElementById(\"room\");\n const moodEl = document.getElementById(\"mood\");\n const baseEl = document.getElementById(\"base\");\n const existingEl = document.getElementById(\"existing\");\n\n const resultsIntro = document.getElementById(\"resultsIntro\");\n const pillRoom = document.getElementById(\"pillRoom\");\n const pillMood = document.getElementById(\"pillMood\");\n const pillRule = document.getElementById(\"pillRule\");\n\n const recList = document.getElementById(\"recList\");\n const noteExisting = document.getElementById(\"noteExisting\");\n\n const ctaFurniture = document.getElementById(\"ctaFurniture\");\n const ctaMirrors = document.getElementById(\"ctaMirrors\");\n const ctaCoffee = document.getElementById(\"ctaCoffee\");\n const ctaTextiles = document.getElementById(\"ctaTextiles\");\n\n const liveResults = document.getElementById(\"liveResults\");\n\n \/\/ For live updates, we re-render results after any change once there is a valid baseline.\n let lastState = null;\n\n function getAccentSelections(){\n const boxes = Array.from(form.querySelectorAll('input[name=\"accent\"]'));\n return boxes.filter(b => b.checked).map(b => b.value);\n }\n\n function enforceAccentLimit(changedInput){\n const selected = getAccentSelections();\n \/\/ If \"Surprise me\" is selected, uncheck others and keep only it.\n if (selected.includes(\"Surprise me\")){\n const boxes = Array.from(form.querySelectorAll('input[name=\"accent\"]'));\n boxes.forEach(b => {\n if (b.value !== \"Surprise me\") b.checked = false;\n });\n return;\n }\n \/\/ Max 2 accents\n if (selected.length > 2 && changedInput){\n changedInput.checked = false;\n }\n }\n\n Array.from(form.querySelectorAll('input[name=\"accent\"]')).forEach(cb => {\n cb.addEventListener(\"change\", (e) => {\n enforceAccentLimit(e.target);\n \/\/ If we already have a state, live update\n if (lastState && isCoreValid()) render();\n });\n });\n\n [roomEl, moodEl, baseEl, existingEl].forEach(el => {\n el.addEventListener(\"change\", () => {\n if (lastState && isCoreValid()) render();\n });\n el.addEventListener(\"input\", () => {\n if (lastState && isCoreValid()) render();\n });\n });\n\n function isCoreValid(){\n return !!roomEl.value && !!moodEl.value && !!baseEl.value;\n }\n\n function showErrors(items){\n errorList.innerHTML = \"\";\n items.forEach(msg => {\n const li = document.createElement(\"li\");\n li.textContent = msg;\n errorList.appendChild(li);\n });\n errorsBox.style.display = \"block\";\n errorsBox.focus?.();\n }\n\n function clearErrors(){\n errorsBox.style.display = \"none\";\n errorList.innerHTML = \"\";\n }\n\n function buildState(){\n const room = roomEl.value;\n const mood = moodEl.value;\n const baseVibe = baseEl.value;\n const existing = (existingEl.value || \"\").trim();\n\n let accents = getAccentSelections();\n if (accents.length === 0) {\n \/\/ Default: if none selected, choose a safe pair based on mood\n accents = pickSurpriseAccents(baseVibe, mood).slice(0, 2);\n } else if (accents.includes(\"Surprise me\")){\n accents = pickSurpriseAccents(baseVibe, mood).slice(0, 2);\n }\n\n \/\/ Ensure max 2\n accents = accents.slice(0, 2);\n\n const rule = buildRule(mood, baseVibe, accents.length);\n const guidance = categoryGuidance(room, mood);\n\n return { room, mood, baseVibe, accents, existing, rule, guidance };\n }\n\n function render(){\n clearErrors();\n const state = buildState();\n lastState = state;\n\n \/\/ Analytics event (non-invasive)\n window.dataLayer.push({ event: \"tool_result_generated\", tool: TOOL_NAME });\n\n \/\/ Update header pills\n pillRoom.textContent = \"Room: \" + state.room;\n pillMood.textContent = \"Vibe: \" + state.mood;\n pillRule.textContent = \"Rule: \" + state.rule;\n\n resultsIntro.textContent = \"Here's a simple palette plan you can follow while browsing Hogai.\";\n\n \/\/ Build palette blocks\n const baseObj = PALETTES.base[state.baseVibe] || PALETTES.base[\"Neutral base\"];\n const accentObjs = state.accents\n .map(a => PALETTES.accents[a])\n .filter(Boolean);\n\n \/\/ If something odd happens, fall back safely\n if (accentObjs.length === 0){\n accentObjs.push(PALETTES.accents.Blue);\n }\n\n \/\/ Compose swatches: base + accents + one balancing neutral\n const neutral = state.baseVibe === \"Dark base\" ? PALETTES.neutrals[2] : PALETTES.neutrals[0];\n\n const swatchesHtml = `\n <div class=\"swatchCard\">\n <div class=\"swatches\" aria-label=\"Your palette swatches\">\n <div class=\"swatch\" style=\"background:${baseObj.hex}\" data-name=\"${baseObj.name}\" aria-label=\"Base: ${baseObj.name}\"><\/div>\n ${accentObjs.map(a => `\n <div class=\"swatch\" style=\"background:${a.hex}\" data-name=\"${a.name}\" aria-label=\"Accent: ${a.name}\"><\/div>\n `).join(\"\")}\n <div class=\"swatch\" style=\"background:${neutral.hex}\" data-name=\"${neutral.name}\" aria-label=\"Balancer: ${neutral.name}\"><\/div>\n <\/div>\n <div class=\"swatchLabel\">\n <strong>Your palette<\/strong>\n <span>\n Base: ${baseObj.name} • Accents: ${accentObjs.map(a => a.name).join(\" + \")} • Balancer: ${neutral.name}\n <\/span>\n <\/div>\n <div class=\"why\">\n <strong>Why this works:<\/strong>\n <span style=\"display:block;margin-top:4px;\">\n ${baseObj.note} Your rule today: <em>${state.rule}<\/em>.\n <\/span>\n <\/div>\n <\/div>\n `;\n\n const order = state.guidance.order;\n const tip = state.guidance.tip;\n\n const recHtml = `\n <div class=\"swatchCard\">\n <div class=\"swatchLabel\">\n <strong>Mini collection (what to shop first)<\/strong>\n <span>${tip}<\/span>\n <\/div>\n <ol class=\"recList\" style=\"margin-top:10px;\">\n <li><strong>${order[0]}<\/strong> \u2014 choose the main color moment.<\/li>\n <li><strong>${order[1]}<\/strong> \u2014 repeat the hero accent once for cohesion.<\/li>\n <li><strong>${order[2]}<\/strong> \u2014 browse supporting pieces in your base + accents.<\/li>\n <\/ol>\n <p class=\"note\">\n Quick pairing rule: repeat your hero accent <strong>twice<\/strong> (e.g., mirror + coffee table),\n and keep everything else close to your base.\n <\/p>\n <p class=\"note\" id=\"noteExistingInner\"><\/p>\n <\/div>\n `;\n\n liveResults.innerHTML = `<div class=\"palette\">${swatchesHtml}${recHtml}<\/div>`;\n\n \/\/ Show results panel + switch grid to two columns\n document.getElementById(\"results\").classList.add(\"visible\");\n document.querySelector(\".tool-grid\").classList.add(\"results-visible\");\n\n const noteEl = document.getElementById(\"noteExistingInner\");\n if (state.existing){\n noteEl.textContent = `You already have: \"${state.existing}\". Keep that as your base anchor and add accents via one statement piece.`;\n } else {\n noteEl.textContent = \"If you have nothing yet: start with a mirror or coffee table color you love, then build around it.\";\n }\n\n \/\/ Update CTA copy\n document.getElementById(\"ctaCopy\").textContent =\n `Open categories in a new tab. We'll pass your palette as a note in the URL (for your reference).`;\n\n \/\/ Update CTA URLs (with UTM + palette params)\n const paletteParam = [\n \"base:\" + state.baseVibe,\n \"accents:\" + state.accents.join(\"+\"),\n \"mood:\" + state.mood,\n \"room:\" + state.room\n ].join(\"|\");\n\n const commonParams = {\n utm_source: \"hogai_tool\",\n utm_medium: \"leadmagnet\",\n utm_campaign: \"color_combo_builder\",\n utm_content: \"category\",\n palette: paletteParam\n };\n\n ctaFurniture.dataset.url = appendParams(BASE_URLS.furniture, { ...commonParams, utm_content: \"furniture\" });\n ctaMirrors.dataset.url = appendParams(BASE_URLS.mirrors, { ...commonParams, utm_content: \"mirrors\" });\n ctaCoffee.dataset.url = appendParams(BASE_URLS.coffee, { ...commonParams, utm_content: \"coffee_tables\" });\n ctaTextiles.dataset.url = appendParams(BASE_URLS.textiles, { ...commonParams, utm_content: \"textiles\" });\n\n \/\/ Improve button label based on priority\n ctaFurniture.textContent = \"Shop Furniture in this palette\";\n ctaMirrors.textContent = \"Shop Mirrors\";\n ctaCoffee.textContent = \"Shop Coffee Tables\";\n ctaTextiles.textContent = \"Shop Textiles\";\n }\n\n form.addEventListener(\"submit\", (e) => {\n e.preventDefault();\n clearErrors();\n\n const problems = [];\n if (!roomEl.value) problems.push(\"Select a room type.\");\n if (!moodEl.value) problems.push(\"Select how you want the space to feel.\");\n if (!baseEl.value) problems.push(\"Select your base vibe.\");\n\n \/\/ Accent validation: max 2 already enforced; allow 0 -> we auto-pick.\n const selected = getAccentSelections();\n if (selected.length > 2) problems.push(\"Pick up to 2 accent colors.\");\n\n if (problems.length){\n showErrors(problems);\n return;\n }\n\n \/\/ Render + scroll to results for quick gratification\n render();\n document.getElementById(\"results\").scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n });\n\n document.getElementById(\"resetBtn\").addEventListener(\"click\", () => {\n form.reset();\n clearErrors();\n lastState = null;\n\n pillRoom.textContent = \"Room: \u2014\";\n pillMood.textContent = \"Vibe: \u2014\";\n pillRule.textContent = \"Rule: \u2014\";\n resultsIntro.textContent = \"Fill the form to see your results here.\";\n\n liveResults.innerHTML = `\n <div class=\"palette\" aria-label=\"Palette output\">\n <div class=\"swatchCard\">\n <div class=\"swatches\" aria-label=\"Base and accent swatches\">\n <div class=\"swatch\" style=\"background:#1f2937\" aria-hidden=\"true\"><\/div>\n <div class=\"swatch\" style=\"background:#3094ff\" aria-hidden=\"true\"><\/div>\n <div class=\"swatch\" style=\"background:#34d399\" aria-hidden=\"true\"><\/div>\n <\/div>\n <div class=\"swatchLabel\">\n <strong>Example palette (placeholder)<\/strong>\n <span>Submit to generate your custom version.<\/span>\n <\/div>\n <div class=\"why\">You'll get: 1 base + 1\u20132 accents, plus what to shop first.<\/div>\n <\/div>\n\n <div class=\"swatchCard\">\n <div class=\"swatchLabel\">\n <strong>Mini collection (starter set)<\/strong>\n <span>Categories chosen for your room + vibe.<\/span>\n <\/div>\n <ul class=\"recList\">\n <li>Mirror (strong statement, low clutter)<\/li>\n <li>Coffee table (anchors the room)<\/li>\n <li>Furniture category (browse matching pieces)<\/li>\n <\/ul>\n <p class=\"note\"><\/p>\n <\/div>\n <\/div>\n `;\n\n \/\/ Clear CTA URLs\n [ctaFurniture, ctaMirrors, ctaCoffee, ctaTextiles].forEach(btn => btn.dataset.url = \"\");\n\n \/\/ Hide results panel + revert grid to single column\n document.getElementById(\"results\").classList.remove(\"visible\");\n document.querySelector(\".tool-grid\").classList.remove(\"results-visible\");\n });\n\n \/\/ CTA button handlers\n ctaFurniture.addEventListener(\"click\", () => {\n const url = ctaFurniture.dataset.url || appendParams(BASE_URLS.furniture, {\n utm_source:\"hogai_tool\", utm_medium:\"leadmagnet\", utm_campaign:\"color_combo_builder\", utm_content:\"furniture\"\n });\n openCta(url, TOOL_NAME, \"furniture\");\n });\n\n ctaMirrors.addEventListener(\"click\", () => {\n const url = ctaMirrors.dataset.url || appendParams(BASE_URLS.mirrors, {\n utm_source:\"hogai_tool\", utm_medium:\"leadmagnet\", utm_campaign:\"color_combo_builder\", utm_content:\"mirrors\"\n });\n openCta(url, TOOL_NAME, \"mirrors\");\n });\n\n ctaCoffee.addEventListener(\"click\", () => {\n const url = ctaCoffee.dataset.url || appendParams(BASE_URLS.coffee, {\n utm_source:\"hogai_tool\", utm_medium:\"leadmagnet\", utm_campaign:\"color_combo_builder\", utm_content:\"coffee_tables\"\n });\n openCta(url, TOOL_NAME, \"coffee_tables\");\n });\n\n ctaTextiles.addEventListener(\"click\", () => {\n const url = ctaTextiles.dataset.url || appendParams(BASE_URLS.textiles, {\n utm_source:\"hogai_tool\", utm_medium:\"leadmagnet\", utm_campaign:\"color_combo_builder\", utm_content:\"textiles\"\n });\n openCta(url, TOOL_NAME, \"textiles\");\n });\n\n \/\/ Optional: improve UX by preventing over-selection of accents immediately\n Array.from(form.querySelectorAll('input[name=\"accent\"]')).forEach(cb => {\n cb.addEventListener(\"change\", () => {\n const selected = getAccentSelections();\n \/\/ Friendly micro-feedback via title (non-blocking)\n if (selected.length >= 2 && !selected.includes(\"Surprise me\")){\n form.querySelectorAll('input[name=\"accent\"]').forEach(x => {\n if (!x.checked) x.title = \"Max 2 accents for a cohesive palette.\";\n });\n } else {\n form.querySelectorAll('input[name=\"accent\"]').forEach(x => x.title = \"\");\n }\n });\n });\n\n \/\/ Accessibility: ensure focus is visible on keyboard navigation\n document.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Tab\") document.querySelector(\".hogai-tool-wrap\").classList.add(\"show-focus\");\n });\n <\/script>\n\n<\/div>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Hogai Color Combo Builder \u2014 Build a bold, cohesive mini collection Pick your vibe. Get a clear palette + what to shop first. Fill this in to get a simple, no-jargon color plan for your room \u2014 plus category links to start shopping. Note: This tool does not make discount claims or delivery promises. Your […]<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-parts\/page_full_width.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-21853","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages\/21853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/comments?post=21853"}],"version-history":[{"count":0,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages\/21853\/revisions"}],"wp:attachment":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/media?parent=21853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":21853,"date":"2026-03-21T18:51:49","date_gmt":"2026-03-21T17:51:49","guid":{"rendered":"https:\/\/hogai.store\/?page_id=21853"},"modified":"2026-03-21T18:51:52","modified_gmt":"2026-03-21T17:51:52","slug":"testey","status":"publish","type":"page","link":"https:\/\/hogai.store\/en\/testey\/","title":{"rendered":"Testey"},"content":{"rendered":"\n\n\n\n\n\n\n \n \n Hogai Color Combo Builder \u2014 Build a bold, cohesive mini collection<\/title>\n <meta name=\"description\" content=\"Pick your room, vibe, and color bravery to get a clear Hogai palette and a mini collection you can shop in one click.\" \/>\n\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Raleway:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n \/* \u2500\u2500 HOGAI WRAPPER + SCOPED VARIABLES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n \/* Wszystkie zmienne i style s\u0105 scoped do .hogai-tool-wrap\n \u017ceby nie wycieka\u0107 na WP theme (nav, linki, nag\u0142\u00f3wki etc.) *\/\n .hogai-tool-wrap {\n --black: #000000;\n --white: #ffffff;\n --off-white: #f9f9f9;\n --gray-light: #dddddd;\n --gray-border: #cccccc;\n --gray-medium: #999999;\n --text-primary: #212529;\n --text-dark: #040404;\n --orange: #ff5723;\n --font: 'Raleway', system-ui, -apple-system, sans-serif;\n --radius-sm: 4px;\n --radius-pill: 20px;\n --transition: 200ms ease;\n --container: 100%;\n\n width: 100%;\n font-family: var(--font);\n font-size: 16px;\n color: var(--text-primary);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n }\n\n \/* \u2500\u2500 SCOPED RESET \u2014 tylko wewn\u0105trz naszego toola \u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap *, .hogai-tool-wrap *::before, .hogai-tool-wrap *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n .hogai-tool-wrap img { display: block; max-width: 100%; height: auto; }\n .hogai-tool-wrap a { color: var(--black); text-decoration: none; transition: opacity var(--transition); }\n .hogai-tool-wrap a:hover { opacity: 0.6; }\n .hogai-tool-wrap ul, .hogai-tool-wrap ol { list-style: none; }\n .hogai-tool-wrap h1, .hogai-tool-wrap h2, .hogai-tool-wrap h3,\n .hogai-tool-wrap h4, .hogai-tool-wrap h5, .hogai-tool-wrap h6 {\n font-family: var(--font);\n font-weight: 400;\n color: var(--black);\n text-transform: uppercase;\n line-height: 1.15;\n }\n .hogai-tool-wrap ::selection { background: var(--black); color: var(--white); }\n\n \/* \u2500\u2500 LAYOUT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .container {\n width: 100%;\n max-width: var(--container);\n margin-inline: auto;\n padding-inline: clamp(20px, 4vw, 48px);\n padding-bottom: 80px;\n }\n\n \/* \u2500\u2500 PAGE HERO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .page-hero {\n padding: 56px 0 40px;\n border-bottom: 1px solid var(--gray-light);\n background: var(--off-white);\n width: 100%;\n }\n .hogai-tool-wrap .page-hero__inner {\n max-width: var(--container);\n margin-inline: auto;\n padding-inline: clamp(20px, 4vw, 48px);\n }\n .hogai-tool-wrap .page-hero__eyebrow {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 3px;\n color: var(--orange);\n margin-bottom: 16px;\n }\n .hogai-tool-wrap .page-hero__title {\n font-size: clamp(28px, 4.5vw, 48px);\n font-weight: 400;\n text-transform: uppercase;\n line-height: 1.05;\n margin-bottom: 16px;\n max-width: 700px;\n }\n .hogai-tool-wrap .page-hero__title em {\n font-style: normal;\n }\n .hogai-tool-wrap .page-hero__desc {\n font-size: 16px;\n color: #555;\n max-width: 560px;\n line-height: 1.7;\n }\n .hogai-tool-wrap .page-hero__desc small {\n display: block;\n margin-top: 8px;\n font-size: 12px;\n color: var(--gray-medium);\n letter-spacing: 0.3px;\n }\n\n \/* \u2500\u2500 MAIN GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .tool-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 0;\n margin-top: 0;\n }\n .hogai-tool-wrap .tool-grid.results-visible {\n grid-template-columns: 1fr;\n }\n @media (min-width: 900px) {\n .hogai-tool-wrap .tool-grid.results-visible {\n grid-template-columns: 1.05fr 0.95fr;\n align-items: start;\n }\n }\n\n .hogai-tool-wrap #results {\n display: none;\n }\n .hogai-tool-wrap #results.visible {\n display: block;\n }\n\n \/* \u2500\u2500 PANEL (replaces \"card\") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .panel {\n border-right: 1px solid var(--gray-light);\n padding: 32px 24px;\n }\n .hogai-tool-wrap .panel:last-child {\n border-right: none;\n padding: 32px 24px;\n }\n @media (max-width: 899px) {\n .hogai-tool-wrap .panel { border-right: none; padding: 28px 20px; }\n .hogai-tool-wrap .panel:first-child { border-bottom: 1px solid var(--gray-light); }\n .hogai-tool-wrap .panel:last-child { border-bottom: none; }\n .hogai-tool-wrap #results:not(.visible) + * { border-bottom: none; }\n .hogai-tool-wrap .panel:first-child:has(~ #results:not(.visible)) { border-bottom: none; }\n }\n\n .hogai-tool-wrap .panel__title {\n font-size: 22px;\n font-weight: 400;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 6px;\n }\n .hogai-tool-wrap .hint {\n font-size: 13px;\n color: var(--gray-medium);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 28px;\n }\n\n \/* \u2500\u2500 FORM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap form { display: grid; gap: 20px; }\n\n .hogai-tool-wrap .field { display: grid; gap: 6px; }\n\n .hogai-tool-wrap label {\n font-size: 12px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--black);\n }\n\n .hogai-tool-wrap .help {\n font-size: 12px;\n color: var(--gray-medium);\n line-height: 1.5;\n }\n\n .hogai-tool-wrap select, .hogai-tool-wrap input[type=\"text\"] {\n font-family: var(--font);\n font-size: 15px;\n color: var(--black);\n background: var(--white);\n border: 1px solid var(--gray-border);\n border-radius: var(--radius-sm);\n padding: 11px 14px;\n width: 100%;\n outline: none;\n transition: border-color var(--transition);\n appearance: none;\n -webkit-appearance: none;\n }\n .hogai-tool-wrap select {\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n padding-right: 36px;\n }\n .hogai-tool-wrap select:focus, .hogai-tool-wrap input[type=\"text\"]:focus {\n border-color: var(--black);\n }\n .hogai-tool-wrap select::placeholder, .hogai-tool-wrap input[type=\"text\"]::placeholder { color: var(--gray-medium); }\n\n \/* \u2500\u2500 CHIPS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding-top: 4px;\n }\n .hogai-tool-wrap .chip {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n padding: 7px 14px;\n border: 1px solid var(--gray-border);\n border-radius: var(--radius-pill);\n cursor: pointer;\n user-select: none;\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: border-color var(--transition), background var(--transition);\n }\n .hogai-tool-wrap .chip:hover { border-color: var(--black); }\n .hogai-tool-wrap .chip input {\n width: 15px;\n height: 15px;\n accent-color: var(--black);\n cursor: pointer;\n }\n .hogai-tool-wrap .chip:has(input:checked) {\n border-color: var(--black);\n background: var(--off-white);\n }\n\n \/* \u2500\u2500 BUTTONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }\n\n .hogai-tool-wrap .hogai-btn {\n display: inline-block;\n font-family: var(--font);\n font-size: 13px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n cursor: pointer;\n border-radius: var(--radius-sm);\n transition: all var(--transition);\n padding: 12px 20px;\n flex: 1;\n }\n \/* Primary = black fill *\/\n .hogai-tool-wrap .hogai-btn {\n color: var(--white);\n background: var(--black);\n border: 1px solid var(--black);\n }\n .hogai-tool-wrap .hogai-btn:hover { background: var(--text-primary); border-color: var(--text-primary); }\n .hogai-tool-wrap .hogai-btn:active { transform: translateY(1px); }\n\n \/* Secondary = outline *\/\n .hogai-tool-wrap .hogai-btn.secondary {\n color: var(--black);\n background: transparent;\n border: 1px solid var(--gray-border);\n }\n .hogai-tool-wrap .hogai-btn.secondary:hover { border-color: var(--black); }\n\n \/* Small variant *\/\n .hogai-tool-wrap .hogai-btn.small {\n padding: 9px 16px;\n flex: none;\n font-size: 12px;\n }\n\n .hogai-tool-wrap .note {\n font-size: 12px;\n color: var(--gray-medium);\n line-height: 1.6;\n margin-top: 4px;\n }\n\n \/* \u2500\u2500 ERRORS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .errors {\n border-left: 3px solid var(--orange);\n background: rgba(255,87,35,.06);\n padding: 12px 14px;\n border-radius: var(--radius-sm);\n display: none;\n }\n .hogai-tool-wrap .errors p { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }\n .hogai-tool-wrap .errors ul { margin: 8px 0 0 16px; font-size: 13px; color: var(--text-primary); list-style: disc; }\n\n \/* \u2500\u2500 RESULTS PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap #results { scroll-margin-top: 20px; border-top: none; }\n\n .hogai-tool-wrap .result-top {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n margin-bottom: 20px;\n }\n\n \/* Pills = category tags *\/\n .hogai-tool-wrap .kpis { display: flex; gap: 8px; flex-wrap: wrap; }\n .hogai-tool-wrap .pill {\n display: inline-block;\n padding: 3px 12px;\n border: 1px solid var(--gray-border);\n border-radius: var(--radius-pill);\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--gray-medium);\n }\n\n \/* \u2500\u2500 SWATCH CARDS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .palette {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n }\n @media (min-width: 520px) {\n .hogai-tool-wrap .palette { grid-template-columns: 1fr 1fr; }\n }\n @media (min-width: 900px) {\n .hogai-tool-wrap .palette { grid-template-columns: 1fr; }\n }\n\n .hogai-tool-wrap .swatchCard {\n border: 1px solid var(--gray-light);\n border-radius: var(--radius-sm);\n padding: 16px;\n display: grid;\n gap: 12px;\n background: var(--white);\n }\n .hogai-tool-wrap .swatches {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n align-items: center;\n }\n .hogai-tool-wrap .swatch {\n position: relative;\n width: 40px;\n height: 40px;\n border-radius: var(--radius-sm);\n border: 1px solid rgba(0,0,0,.12);\n cursor: default;\n }\n .hogai-tool-wrap .swatch::after {\n content: attr(data-name);\n position: absolute;\n bottom: calc(100% + 6px);\n left: 50%;\n transform: translateX(-50%);\n background: var(--black);\n color: var(--white);\n font-size: 11px;\n font-family: var(--font);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n white-space: nowrap;\n padding: 4px 8px;\n border-radius: var(--radius-sm);\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--transition);\n }\n .hogai-tool-wrap .swatch:hover::after {\n opacity: 1;\n }\n .hogai-tool-wrap .swatchLabel { display: grid; gap: 3px; }\n .hogai-tool-wrap .swatchLabel strong {\n font-size: 13px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n .hogai-tool-wrap .swatchLabel span {\n font-size: 13px;\n color: var(--gray-medium);\n }\n .hogai-tool-wrap .why {\n border-top: 1px solid var(--gray-light);\n padding-top: 10px;\n font-size: 13px;\n color: var(--gray-medium);\n line-height: 1.6;\n }\n .hogai-tool-wrap .why strong { color: var(--text-primary); }\n\n \/* \u2500\u2500 RECS LIST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .recList {\n padding-left: 0;\n display: grid;\n gap: 6px;\n }\n .hogai-tool-wrap .recList li {\n font-size: 14px;\n color: var(--text-primary);\n padding-left: 16px;\n position: relative;\n }\n .hogai-tool-wrap .recList li::before {\n content: counter(li-counter) \".\";\n counter-increment: li-counter;\n position: absolute;\n left: 0;\n color: var(--orange);\n font-weight: 700;\n font-size: 13px;\n }\n .hogai-tool-wrap ol.recList { counter-reset: li-counter; }\n\n \/* \u2500\u2500 CTA SECTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap #cta {\n margin-top: 20px;\n padding: 20px;\n border: 1px solid var(--gray-light);\n border-top: 3px solid var(--black);\n border-radius: var(--radius-sm);\n background: var(--off-white);\n }\n .hogai-tool-wrap #cta h3 {\n font-size: 15px;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 6px;\n }\n .hogai-tool-wrap #cta p {\n font-size: 13px;\n color: var(--gray-medium);\n margin-bottom: 14px;\n }\n\n .hogai-tool-wrap .ctaRow {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n }\n .hogai-tool-wrap .ctaRow .hogai-btn { flex: 1 1 auto; min-width: 160px; }\n\n \/* \u2500\u2500 STICKY CTA (mobile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .stickyCta {\n position: sticky;\n bottom: 0;\n margin-top: 16px;\n padding-top: 12px;\n background: linear-gradient(to bottom, transparent, var(--white) 30%);\n }\n\n \/* \u2500\u2500 PHOTO UPLOAD TABS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .input-tabs {\n display: flex;\n gap: 0;\n border-bottom: 1px solid var(--gray-light);\n margin-bottom: 24px;\n }\n .hogai-tool-wrap .input-tab {\n font-family: var(--font);\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--gray-medium);\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n margin-bottom: -1px;\n padding: 10px 16px 10px 0;\n cursor: pointer;\n transition: color var(--transition), border-color var(--transition);\n }\n .hogai-tool-wrap .input-tab.active {\n color: var(--black);\n border-bottom-color: var(--black);\n }\n .hogai-tool-wrap .input-tab:hover:not(.active) { color: var(--text-primary); }\n\n .hogai-tool-wrap .tab-pane { display: none; }\n .hogai-tool-wrap .tab-pane.active { display: block; }\n\n \/* \u2500\u2500 DROP ZONE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .drop-zone {\n border: 1.5px dashed var(--gray-border);\n border-radius: var(--radius-sm);\n padding: 36px 20px;\n text-align: center;\n cursor: pointer;\n transition: border-color var(--transition), background var(--transition);\n position: relative;\n }\n .hogai-tool-wrap .drop-zone:hover, .hogai-tool-wrap .drop-zone.drag-over {\n border-color: var(--black);\n background: var(--off-white);\n }\n .hogai-tool-wrap .drop-zone input[type=\"file\"] {\n position: absolute;\n inset: 0;\n opacity: 0;\n cursor: pointer;\n width: 100%;\n height: 100%;\n }\n .hogai-tool-wrap .drop-zone__icon {\n font-size: 28px;\n margin-bottom: 10px;\n line-height: 1;\n }\n .hogai-tool-wrap .drop-zone__label {\n font-size: 13px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: var(--black);\n display: block;\n margin-bottom: 4px;\n }\n .hogai-tool-wrap .drop-zone__sub {\n font-size: 12px;\n color: var(--gray-medium);\n }\n\n \/* \u2500\u2500 PHOTO PREVIEW \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .photo-preview {\n display: none;\n margin-top: 16px;\n gap: 12px;\n }\n .hogai-tool-wrap .photo-preview.visible { display: grid; }\n .hogai-tool-wrap .photo-preview__img {\n width: 100%;\n aspect-ratio: 16\/9;\n object-fit: cover;\n border-radius: var(--radius-sm);\n border: 1px solid var(--gray-light);\n }\n .hogai-tool-wrap .photo-preview__colors {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n align-items: center;\n }\n .hogai-tool-wrap .photo-preview__swatch {\n width: 28px;\n height: 28px;\n border-radius: var(--radius-sm);\n border: 1px solid rgba(0,0,0,.12);\n position: relative;\n cursor: default;\n }\n .hogai-tool-wrap .photo-preview__swatch::after {\n content: attr(data-name);\n position: absolute;\n bottom: calc(100% + 5px);\n left: 50%;\n transform: translateX(-50%);\n background: var(--black);\n color: var(--white);\n font-size: 10px;\n font-family: var(--font);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n white-space: nowrap;\n padding: 3px 7px;\n border-radius: var(--radius-sm);\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--transition);\n }\n .hogai-tool-wrap .photo-preview__swatch:hover::after { opacity: 1; }\n\n .hogai-tool-wrap .photo-status {\n font-size: 12px;\n color: var(--gray-medium);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-top: 4px;\n }\n .hogai-tool-wrap .photo-status strong { color: var(--orange); }\n\n .hogai-tool-wrap .hogai-btn-analyze {\n margin-top: 14px;\n width: 100%;\n }\n .hogai-tool-wrap .photo-note {\n font-size: 12px;\n color: var(--gray-medium);\n margin-top: 10px;\n line-height: 1.6;\n }\n\n \/* \u2500\u2500 DIVIDER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap .section-divider {\n border: none;\n border-top: 1px solid var(--gray-light);\n margin: 0;\n }\n\n \/* \u2500\u2500 KEYBOARD FOCUS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .hogai-tool-wrap.show-focus *:focus { outline: 2px solid var(--orange); outline-offset: 2px; }\n\n \/* \u2500\u2500 REDUCED MOTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n @media (prefers-reduced-motion: reduce) {\n .hogai-tool-wrap * { scroll-behavior: auto; }\n .hogai-tool-wrap .hogai-btn:active { transform: none; }\n }\n <\/style>\n<\/head>\n\n<body>\n\n<div class=\"hogai-tool-wrap\">\n\n \n <section class=\"page-hero\">\n <div class=\"page-hero__inner\">\n <h1 class=\"page-hero__title\">\n Pick your vibe. Get a clear palette<br>\n + what to shop first.\n <\/h1>\n <p class=\"page-hero__desc\">\n Fill this in to get a simple, no-jargon color plan for your room \u2014 plus category links to start shopping.\n <small>Note: This tool does not make discount claims or delivery promises.<\/small>\n <\/p>\n <\/div>\n <\/section>\n\n <hr class=\"section-divider\">\n\n \n <div class=\"container\">\n <div class=\"tool-grid\">\n\n \n <section class=\"panel\" aria-labelledby=\"formTitle\">\n <h2 class=\"panel__title\" id=\"formTitle\">Your room + color preferences<\/h2>\n\n \n <div class=\"input-tabs\" role=\"tablist\">\n <button class=\"input-tab active\" role=\"tab\" aria-selected=\"true\" id=\"tab-manual\" aria-controls=\"pane-manual\">Fill manually<\/button>\n <button class=\"input-tab\" role=\"tab\" aria-selected=\"false\" id=\"tab-photo\" aria-controls=\"pane-photo\">Upload a photo<\/button>\n <\/div>\n\n <div class=\"errors\" id=\"errors\" role=\"alert\" aria-live=\"assertive\">\n <p>Please fix the following:<\/p>\n <ul id=\"errorList\"><\/ul>\n <\/div>\n\n \n <div class=\"tab-pane active\" id=\"pane-manual\" role=\"tabpanel\" aria-labelledby=\"tab-manual\">\n <p class=\"hint\" style=\"margin-top:0\">3\u20135 quick choices. Results appear instantly.<\/p>\n\n <form id=\"builderForm\" novalidate>\n <div class=\"field\">\n <label for=\"room\">Room type<\/label>\n <select id=\"room\" name=\"room\" required>\n <option value=\"\">Select\u2026<\/option>\n <option value=\"Living room\">Living room<\/option>\n <option value=\"Bedroom\">Bedroom<\/option>\n <option value=\"Hallway\">Hallway<\/option>\n <option value=\"Home office\">Home office<\/option>\n <option value=\"Dining area\">Dining area<\/option>\n <\/select>\n <p class=\"help\">This helps choose what carries color best (mirror vs table vs accents).<\/p>\n <\/div>\n\n <div class=\"field\">\n <label for=\"mood\">How do you want the space to feel?<\/label>\n <select id=\"mood\" name=\"mood\" required>\n <option value=\"\">Select\u2026<\/option>\n <option value=\"Calm & collected\">Calm & collected<\/option>\n <option value=\"Playful + warm\">Playful + warm<\/option>\n <option value=\"Bold & graphic\">Bold & graphic<\/option>\n <option value=\"Gallery-like\">Gallery-like<\/option>\n <\/select>\n <p class=\"help\">Your mood drives the accent choice and how many colors we suggest.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label for=\"base\">Base vibe (your “canvas”)<\/label>\n <select id=\"base\" name=\"base\" required>\n <option value=\"\">Select\u2026<\/option>\n <option value=\"Light base\">Light base<\/option>\n <option value=\"Neutral base\">Neutral base<\/option>\n <option value=\"Dark base\">Dark base<\/option>\n <\/select>\n <p class=\"help\">Your base acts like a “canvas.” Accents do the talking.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label id=\"accentsLabel\">Accent colors (pick up to 2)<\/label>\n <div class=\"chips\" role=\"group\" aria-labelledby=\"accentsLabel\">\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Blue\" \/>\n <span>Blue<\/span>\n <\/label>\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Pink\" \/>\n <span>Pink<\/span>\n <\/label>\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Green\" \/>\n <span>Green<\/span>\n <\/label>\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Red\" \/>\n <span>Red<\/span>\n <\/label>\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Yellow\" \/>\n <span>Yellow<\/span>\n <\/label>\n <label class=\"chip\">\n <input type=\"checkbox\" name=\"accent\" value=\"Surprise me\" \/>\n <span>Surprise me<\/span>\n <\/label>\n <\/div>\n <p class=\"help\">Max 2 so it stays cohesive. If you pick “Surprise me” we’ll select accents for you.<\/p>\n <\/div>\n\n <div class=\"field\">\n <label for=\"existing\">What do you already have?<\/label>\n <input\n id=\"existing\"\n name=\"existing\"\n type=\"text\"\n placeholder='e.g., \"grey sofa\", \"wood floors\", \"white walls\", or \"nothing yet\"'\n maxlength=\"80\"\n autocomplete=\"off\"\n \/>\n <p class=\"help\">Optional. We’ll use it as a “don’t fight the room” constraint.<\/p>\n <\/div>\n\n <div class=\"row\">\n <button class=\"hogai-btn\" type=\"submit\" id=\"buildBtn\">Build my palette<\/button>\n <button class=\"hogai-btn secondary small\" type=\"button\" id=\"resetBtn\">Reset<\/button>\n <\/div>\n\n <p class=\"note\">\n Tip: After you get a palette, use the shop buttons to browse categories and pick colors that match your result.\n <\/p>\n <\/form>\n <\/div>\n\n \n <div class=\"tab-pane\" id=\"pane-photo\" role=\"tabpanel\" aria-labelledby=\"tab-photo\">\n <p class=\"hint\" style=\"margin-top:0\">We’ll read dominant colors from your photo and pre-fill the form.<\/p>\n\n <div class=\"drop-zone\" id=\"dropZone\">\n <input type=\"file\" id=\"photoInput\" accept=\"image\/*\" aria-label=\"Upload a room photo\">\n <div class=\"drop-zone__icon\" id=\"dropIcon\">\ud83d\udcf7<\/div>\n <span class=\"drop-zone__label\" id=\"dropLabel\">Drop a photo here or click to browse<\/span>\n <span class=\"drop-zone__sub\" id=\"dropSub\">JPG, PNG, WEBP \u2014 any size<\/span>\n <\/div>\n\n <div class=\"photo-preview\" id=\"photoPreview\">\n <img decoding=\"async\" class=\"photo-preview__img\" id=\"photoThumb\" src=\"\" alt=\"Your room photo\">\n <div>\n <p class=\"photo-status\" id=\"photoStatus\">Detecting colors\u2026<\/p>\n <div class=\"photo-preview__colors\" id=\"photoColors\"><\/div>\n <\/div>\n <\/div>\n\n <button class=\"hogai-btn hogai-btn-analyze\" id=\"analyzeBtn\" type=\"button\" style=\"display:none\">\n Apply to form + build palette\n <\/button>\n <p class=\"photo-note\">\n Room type is the only field you’ll need to confirm \u2014 color, mood and base are set automatically from your photo.\n <\/p>\n\n <canvas id=\"analyzeCanvas\" style=\"display:none\"><\/canvas>\n <\/div>\n\n <\/section>\n\n \n <section class=\"panel\" id=\"results\" aria-labelledby=\"resultsTitle\">\n <div class=\"result-top\">\n <div>\n <h2 class=\"panel__title\" id=\"resultsTitle\">Your palette + mini collection<\/h2>\n <p class=\"hint\" id=\"resultsIntro\">Fill the form to see your results here.<\/p>\n <\/div>\n <div class=\"kpis\" aria-label=\"Summary badges\">\n <span class=\"pill\" id=\"pillRoom\">Room: \u2014<\/span>\n <span class=\"pill\" id=\"pillMood\">Vibe: \u2014<\/span>\n <span class=\"pill\" id=\"pillRule\">Rule: \u2014<\/span>\n <\/div>\n <\/div>\n\n <div id=\"liveResults\" aria-live=\"polite\">\n <div class=\"palette\" aria-label=\"Palette output\">\n <div class=\"swatchCard\">\n <div class=\"swatches\" aria-label=\"Base and accent swatches\">\n <div class=\"swatch\" style=\"background:#1f2937\" aria-hidden=\"true\"><\/div>\n <div class=\"swatch\" style=\"background:#3094ff\" aria-hidden=\"true\"><\/div>\n <div class=\"swatch\" style=\"background:#34d399\" aria-hidden=\"true\"><\/div>\n <\/div>\n <div class=\"swatchLabel\">\n <strong>Example palette (placeholder)<\/strong>\n <span>Submit to generate your custom version.<\/span>\n <\/div>\n <div class=\"why\">\n You’ll get: 1 base + 1\u20132 accents, plus what to shop first.\n <\/div>\n <\/div>\n\n <div class=\"swatchCard\">\n <div class=\"swatchLabel\">\n <strong>Mini collection (starter set)<\/strong>\n <span>Categories chosen for your room + vibe.<\/span>\n <\/div>\n <ul class=\"recList\" id=\"recList\">\n <li>Mirror (strong statement, low clutter)<\/li>\n <li>Coffee table (anchors the room)<\/li>\n <li>Furniture category (browse matching pieces)<\/li>\n <\/ul>\n <p class=\"note\" id=\"noteExisting\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"stickyCta\" aria-hidden=\"false\">\n <section id=\"cta\" aria-labelledby=\"ctaTitle\">\n <h3 id=\"ctaTitle\">Ready to shop your palette?<\/h3>\n <p id=\"ctaCopy\">Open a category in a new tab. We’ll pass your palette as a note in the URL.<\/p>\n <div class=\"ctaRow\">\n <button class=\"hogai-btn\" id=\"ctaFurniture\" type=\"button\">\n Shop Furniture in this palette\n <\/button>\n <button class=\"hogai-btn secondary\" id=\"ctaMirrors\" type=\"button\">\n Shop Mirrors\n <\/button>\n <button class=\"hogai-btn secondary\" id=\"ctaCoffee\" type=\"button\">\n Shop Coffee Tables\n <\/button>\n <button class=\"hogai-btn secondary\" id=\"ctaTextiles\" type=\"button\">\n Shop Textiles\n <\/button>\n <\/div>\n <\/section>\n <\/div>\n <\/section>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ Basic DataLayer setup (for GTM \/ analytics)\n window.dataLayer = window.dataLayer || [];\n\n \/\/ \u2500\u2500 TAB SWITCHING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n document.getElementById(\"tab-manual\").addEventListener(\"click\", () => switchTab(\"manual\"));\n document.getElementById(\"tab-photo\").addEventListener(\"click\", () => switchTab(\"photo\"));\n\n function switchTab(which) {\n [\"manual\",\"photo\"].forEach(t => {\n document.getElementById(\"tab-\" + t).classList.toggle(\"active\", t === which);\n document.getElementById(\"tab-\" + t).setAttribute(\"aria-selected\", t === which);\n document.getElementById(\"pane-\" + t).classList.toggle(\"active\", t === which);\n });\n }\n\n \/\/ \u2500\u2500 PHOTO ANALYSIS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n const dropZone = document.getElementById(\"dropZone\");\n const photoInput = document.getElementById(\"photoInput\");\n const photoPreview = document.getElementById(\"photoPreview\");\n const photoThumb = document.getElementById(\"photoThumb\");\n const photoStatus = document.getElementById(\"photoStatus\");\n const photoColors = document.getElementById(\"photoColors\");\n const analyzeBtn = document.getElementById(\"analyzeBtn\");\n const canvas = document.getElementById(\"analyzeCanvas\");\n const ctx = canvas.getContext(\"2d\");\n\n \/\/ \u2500\u2500 MOBILE: swap to camera capture \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n const isMobile = window.matchMedia(\"(pointer: coarse)\").matches;\n if (isMobile) {\n photoInput.setAttribute(\"capture\", \"environment\");\n document.getElementById(\"dropIcon\").textContent = \"\ud83d\udcf8\";\n document.getElementById(\"dropLabel\").textContent = \"Tap to take a photo\";\n document.getElementById(\"dropSub\").textContent = \"Opens your camera directly\";\n }\n\n \/\/ Drag-over visual feedback\n dropZone.addEventListener(\"dragover\", e => { e.preventDefault(); dropZone.classList.add(\"drag-over\"); });\n dropZone.addEventListener(\"dragleave\", () => dropZone.classList.remove(\"drag-over\"));\n dropZone.addEventListener(\"drop\", e => {\n e.preventDefault();\n dropZone.classList.remove(\"drag-over\");\n const file = e.dataTransfer.files[0];\n if (file && file.type.startsWith(\"image\/\")) processPhoto(file);\n });\n photoInput.addEventListener(\"change\", () => {\n if (photoInput.files[0]) processPhoto(photoInput.files[0]);\n });\n\n let detectedPhotoState = null; \/\/ filled after analysis\n\n function processPhoto(file) {\n const url = URL.createObjectURL(file);\n photoThumb.src = url;\n photoPreview.classList.add(\"visible\");\n photoStatus.innerHTML = \"Detecting colors\u2026\";\n photoColors.innerHTML = \"\";\n analyzeBtn.style.display = \"none\";\n\n const img = new Image();\n img.onload = () => {\n \/\/ Sample at max 200x200 for speed\n const W = Math.min(img.width, 200);\n const H = Math.min(img.height, 200);\n canvas.width = W;\n canvas.height = H;\n ctx.drawImage(img, 0, 0, W, H);\n\n const data = ctx.getImageData(0, 0, W, H).data;\n const pixels = [];\n \/\/ Sample every 4th pixel row\/col\n for (let y = 0; y < H; y += 4) {\n for (let x = 0; x < W; x += 4) {\n const i = (y * W + x) * 4;\n const r = data[i], g = data[i+1], b = data[i+2], a = data[i+3];\n if (a < 128) continue; \/\/ skip transparent\n pixels.push([r, g, b]);\n }\n }\n\n \/\/ k-means clustering k=5 for dominant colors\n const clusters = kMeans(pixels, 5, 12);\n\n \/\/ Sort by cluster size (most dominant first)\n clusters.sort((a, b) => b.count - a.count);\n\n \/\/ Map each cluster center to nearest HOGAI color\n const hogaiMatches = clusters.map(c => nearestHogai(c.center));\n\n \/\/ Deduplicate (same HOGAI color may match multiple clusters)\n const seen = new Set();\n const uniqueMatches = [];\n for (const m of hogaiMatches) {\n if (!seen.has(m.name)) { seen.add(m.name); uniqueMatches.push(m); }\n if (uniqueMatches.length >= 3) break;\n }\n\n \/\/ Derive form values from image characteristics\n const avgBrightness = pixels.reduce((s, p) => s + (p[0]*0.299 + p[1]*0.587 + p[2]*0.114), 0) \/ pixels.length;\n const avgSaturation = pixels.reduce((s, p) => {\n const max = Math.max(...p), min = Math.min(...p);\n return s + (max === 0 ? 0 : (max - min) \/ max);\n }, 0) \/ pixels.length;\n\n let base, mood;\n if (avgBrightness > 180) base = \"Light base\";\n else if (avgBrightness > 100) base = \"Neutral base\";\n else base = \"Dark base\";\n\n if (avgSaturation > 0.45) mood = \"Bold & graphic\";\n else if (avgSaturation > 0.25) mood = \"Playful + warm\";\n else if (avgBrightness > 150) mood = \"Gallery-like\";\n else mood = \"Calm & collected\";\n\n \/\/ Pick accents: top 1\u20132 non-base colors from matches\n const baseColor = uniqueMatches[0];\n const accents = uniqueMatches.slice(1, 3);\n\n detectedPhotoState = { base, mood, baseColor, accents };\n\n \/\/ Render swatches\n photoColors.innerHTML = uniqueMatches.map(c =>\n `<div class=\"photo-preview__swatch\" style=\"background:${c.hex}\" data-name=\"${c.name}\" title=\"${c.name}\"><\/div>`\n ).join(\"\");\n\n photoStatus.innerHTML = `<strong>${uniqueMatches.length} HOGAI colors detected<\/strong> \u2014 Base: ${base} \u00b7 Mood: ${mood}`;\n analyzeBtn.style.display = \"block\";\n URL.revokeObjectURL(url);\n };\n img.src = url;\n }\n\n analyzeBtn.addEventListener(\"click\", () => {\n if (!detectedPhotoState) return;\n const { base, mood, accents } = detectedPhotoState;\n\n \/\/ Apply to form\n document.getElementById(\"base\").value = base;\n document.getElementById(\"mood\").value = mood;\n\n \/\/ Uncheck all accent checkboxes, then check matching ones\n document.querySelectorAll('input[name=\"accent\"]').forEach(cb => cb.checked = false);\n const accentNameMap = {\n \"Cobalt Love\": \"Blue\", \"Blue Jeans\": \"Blue\",\n \"Baby Blue\": \"Blue\",\n \"Pink Power\": \"Pink\",\n \"Green Bottle\": \"Green\", \"Dusty Sage\": \"Green\",\n \"Red Light\": \"Red\", \"Burgundy Star\": \"Red\",\n \"Orange Joy\": \"Yellow\", \"Ecru Lady\": \"Yellow\",\n \"Grey Flow\": null, \"Black Night\": null\n };\n accents.forEach(a => {\n const formVal = accentNameMap[a.name];\n if (formVal) {\n const cb = document.querySelector(`input[name=\"accent\"][value=\"${formVal}\"]`);\n if (cb) cb.checked = true;\n }\n });\n\n \/\/ Switch to manual tab so user sees + confirms room type\n switchTab(\"manual\");\n\n \/\/ Highlight room field\n const roomEl = document.getElementById(\"room\");\n roomEl.style.borderColor = \"var(--orange)\";\n roomEl.focus();\n setTimeout(() => roomEl.style.borderColor = \"\", 2500);\n\n window.dataLayer.push({ event: \"tool_photo_analyzed\", tool: TOOL_NAME });\n });\n\n \/\/ \u2500\u2500 K-MEANS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function kMeans(pixels, k, iterations) {\n \/\/ Init centers by picking spread-out pixels\n let centers = [];\n centers.push(pixels[Math.floor(Math.random() * pixels.length)]);\n while (centers.length < k) {\n \/\/ k-means++ init: pick pixel farthest from existing centers\n const dists = pixels.map(p => Math.min(...centers.map(c => colorDistSq(p, c))));\n const total = dists.reduce((a, b) => a + b, 0);\n let r = Math.random() * total, cum = 0;\n for (let i = 0; i < pixels.length; i++) {\n cum += dists[i];\n if (cum >= r) { centers.push(pixels[i]); break; }\n }\n }\n\n let clusters = [];\n for (let iter = 0; iter < iterations; iter++) {\n clusters = centers.map(c => ({ center: [...c], pixels: [], count: 0 }));\n for (const p of pixels) {\n let best = 0, bestD = Infinity;\n centers.forEach((c, i) => { const d = colorDistSq(p, c); if (d < bestD) { bestD = d; best = i; } });\n clusters[best].pixels.push(p);\n clusters[best].count++;\n }\n \/\/ Recompute centers\n centers = clusters.map(cl => {\n if (!cl.pixels.length) return cl.center;\n const avg = [0,0,0];\n cl.pixels.forEach(p => { avg[0]+=p[0]; avg[1]+=p[1]; avg[2]+=p[2]; });\n return avg.map(v => Math.round(v \/ cl.pixels.length));\n });\n }\n clusters.forEach((cl, i) => cl.center = centers[i]);\n return clusters;\n }\n\n function colorDistSq([r1,g1,b1], [r2,g2,b2]) {\n return (r1-r2)**2 + (g1-g2)**2 + (b1-b2)**2;\n }\n\n \/\/ \u2500\u2500 NEAREST HOGAI COLOR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function hexToRgb(hex) {\n const h = hex.replace(\"#\",\"\");\n return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)];\n }\n\n function nearestHogai(rgb) {\n const ALL_HOGAI = [\n { name: \"Cobalt Love\", hex: \"#1440b8\" },\n { name: \"Orange Joy\", hex: \"#DA6E00\" },\n { name: \"Red Light\", hex: \"#e0281a\" },\n { name: \"Burgundy Star\", hex: \"#6e1332\" },\n { name: \"Green Bottle\", hex: \"#375e30\" },\n { name: \"Blue Jeans\", hex: \"#2a5fa5\" },\n { name: \"Black Night\", hex: \"#000000\" },\n { name: \"Pink Power\", hex: \"#D8A0A6\" },\n { name: \"Baby Blue\", hex: \"#8ab4cc\" },\n { name: \"Grey Flow\", hex: \"#9ea3b0\" },\n { name: \"Dusty Sage\", hex: \"#a3b18a\" },\n { name: \"Ecru Lady\", hex: \"#d5c9a1\" }\n ];\n let best = ALL_HOGAI[0], bestD = Infinity;\n for (const c of ALL_HOGAI) {\n const d = colorDistSq(rgb, hexToRgb(c.hex));\n if (d < bestD) { bestD = d; best = c; }\n }\n return best;\n }\n\n \/\/ --- CTA destinations (confirmed Hogai category URLs) ---\n const BASE_URLS = {\n furniture: \"https:\/\/hogai.store\/en\/store\/\",\n mirrors: \"https:\/\/hogai.store\/en\/kategoria-produktu\/mirrors\/\",\n coffee: \"https:\/\/hogai.store\/en\/kategoria-produktu\/coffee-tables\/\",\n textiles: \"https:\/\/hogai.store\/en\/kategoria-produktu\/blankets\/\"\n };\n\n \/\/ --- Utilities ---\n function clamp(n, min, max){ return Math.max(min, Math.min(max, n)); }\n\n function safeSlug(str){\n return (str || \"\")\n .toLowerCase()\n .trim()\n .replace(\/\\s+\/g, \"-\")\n .replace(\/[^a-z0-9\\-]\/g, \"\")\n .slice(0, 60);\n }\n\n function appendParams(url, params){\n const u = new URL(url);\n Object.entries(params).forEach(([k,v]) => {\n if (v !== undefined && v !== null && String(v).length){\n u.searchParams.set(k, String(v));\n }\n });\n return u.toString();\n }\n\n function openCta(url, toolName, destinationLabel){\n window.dataLayer.push({ event: \"tool_cta_click\", tool: toolName, destination: destinationLabel });\n\n \/\/ Open in new tab safely\n const a = document.createElement(\"a\");\n a.href = url;\n a.target = \"_blank\";\n a.rel = \"noopener\";\n document.body.appendChild(a);\n a.click();\n a.remove();\n }\n\n \/\/ --- Tool logic (transparent, simple rules) ---\n const TOOL_NAME = \"Hogai Color Combo Builder\";\n\n \/\/ All 12 official HOGAI product colors\n const HOGAI_COLORS = {\n \"Cobalt Love\": { name: \"Cobalt Love\", hex: \"#1440b8\" },\n \"Orange Joy\": { name: \"Orange Joy\", hex: \"#DA6E00\" },\n \"Red Light\": { name: \"Red Light\", hex: \"#e0281a\" },\n \"Burgundy Star\": { name: \"Burgundy Star\", hex: \"#6e1332\" },\n \"Green Bottle\": { name: \"Green Bottle\", hex: \"#375e30\" },\n \"Blue Jeans\": { name: \"Blue Jeans\", hex: \"#2a5fa5\" },\n \"Black Night\": { name: \"Black Night\", hex: \"#000000\" },\n \"Pink Power\": { name: \"Pink Power\", hex: \"#D8A0A6\" },\n \"Baby Blue\": { name: \"Baby Blue\", hex: \"#8ab4cc\" },\n \"Grey Flow\": { name: \"Grey Flow\", hex: \"#9ea3b0\" },\n \"Dusty Sage\": { name: \"Dusty Sage\", hex: \"#a3b18a\" },\n \"Ecru Lady\": { name: \"Ecru Lady\", hex: \"#d5c9a1\" }\n };\n\n const PALETTES = {\n base: {\n \"Light base\": { name: \"Ecru Lady\", hex: \"#d5c9a1\", note: \"Keeps the room airy; accents pop cleanly.\" },\n \"Neutral base\": { name: \"Grey Flow\", hex: \"#9ea3b0\", note: \"Soft backdrop; works with most bold accents.\" },\n \"Dark base\": { name: \"Black Night\",hex: \"#000000\", note: \"Drama + contrast; use 1\u20132 sharp accents.\" }\n },\n accents: {\n Blue: HOGAI_COLORS[\"Cobalt Love\"],\n Pink: HOGAI_COLORS[\"Pink Power\"],\n Green: HOGAI_COLORS[\"Green Bottle\"],\n Red: HOGAI_COLORS[\"Red Light\"],\n Yellow: HOGAI_COLORS[\"Orange Joy\"]\n },\n neutrals: [\n HOGAI_COLORS[\"Baby Blue\"],\n HOGAI_COLORS[\"Dusty Sage\"],\n HOGAI_COLORS[\"Ecru Lady\"]\n ]\n };\n\n function pickSurpriseAccents(baseVibe, mood){\n \/\/ Simple deterministic selection based on mood + base\n const choices = Object.keys(PALETTES.accents);\n if (mood.includes(\"Calm\")) return baseVibe === \"Dark base\" ? [\"Green\"] : [\"Blue\", \"Green\"];\n if (mood.includes(\"Playful\")) return [\"Pink\", \"Blue\"];\n if (mood.includes(\"Bold\")) return [\"Red\", \"Blue\"];\n return [\"Blue\", \"Yellow\"]; \/\/ Gallery-like\n }\n\n function buildRule(mood, baseVibe, accentsCount){\n \/\/ Transparent rule summary for trust\n if (mood.includes(\"Calm\")) return accentsCount === 1 ? \"1 accent max, clean contrast\" : \"2 accents max, keep shapes simple\";\n if (mood.includes(\"Playful\")) return \"2 accents, mix shapes (but keep base quiet)\";\n if (mood.includes(\"Bold\")) return baseVibe === \"Dark base\" ? \"1\u20132 accents, high contrast\" : \"2 accents, one as hero\";\n return \"1 hero accent + 1 highlight, curated feel\";\n }\n\n function categoryGuidance(room, mood){\n \/\/ Keep it practical + consistent with your preferred categories\n const roomLower = room.toLowerCase();\n let first = \"Mirrors\";\n let second = \"Coffee tables\";\n let third = \"Furniture\";\n\n if (roomLower.includes(\"hallway\")){\n first = \"Mirrors\";\n second = \"Furniture\";\n third = \"Coffee tables\";\n } else if (roomLower.includes(\"bedroom\")){\n first = \"Mirrors\";\n second = \"Furniture\";\n third = \"Coffee tables\";\n } else if (roomLower.includes(\"office\")){\n first = \"Furniture\";\n second = \"Mirrors\";\n third = \"Coffee tables\";\n } else if (roomLower.includes(\"dining\")){\n first = \"Furniture\";\n second = \"Mirrors\";\n third = \"Coffee tables\";\n }\n\n let tip = \"Start with one statement piece, then add one supporting color.\";\n if (mood.includes(\"Calm\")) tip = \"Keep the base clean; let one accent carry the personality.\";\n if (mood.includes(\"Playful\")) tip = \"Use two accents \u2014 one main, one small highlight \u2014 so it stays intentional.\";\n if (mood.includes(\"Bold\")) tip = \"Pick a hero color, then repeat it once (mirror + table) for cohesion.\";\n if (mood.includes(\"Gallery\")) tip = \"Use a hero accent + a highlight; repeat shapes for a curated look.\";\n\n return { order: [first, second, third], tip };\n }\n\n \/\/ --- Form handling + validation ---\n const form = document.getElementById(\"builderForm\");\n const errorsBox = document.getElementById(\"errors\");\n const errorList = document.getElementById(\"errorList\");\n\n const roomEl = document.getElementById(\"room\");\n const moodEl = document.getElementById(\"mood\");\n const baseEl = document.getElementById(\"base\");\n const existingEl = document.getElementById(\"existing\");\n\n const resultsIntro = document.getElementById(\"resultsIntro\");\n const pillRoom = document.getElementById(\"pillRoom\");\n const pillMood = document.getElementById(\"pillMood\");\n const pillRule = document.getElementById(\"pillRule\");\n\n const recList = document.getElementById(\"recList\");\n const noteExisting = document.getElementById(\"noteExisting\");\n\n const ctaFurniture = document.getElementById(\"ctaFurniture\");\n const ctaMirrors = document.getElementById(\"ctaMirrors\");\n const ctaCoffee = document.getElementById(\"ctaCoffee\");\n const ctaTextiles = document.getElementById(\"ctaTextiles\");\n\n const liveResults = document.getElementById(\"liveResults\");\n\n \/\/ For live updates, we re-render results after any change once there is a valid baseline.\n let lastState = null;\n\n function getAccentSelections(){\n const boxes = Array.from(form.querySelectorAll('input[name=\"accent\"]'));\n return boxes.filter(b => b.checked).map(b => b.value);\n }\n\n function enforceAccentLimit(changedInput){\n const selected = getAccentSelections();\n \/\/ If \"Surprise me\" is selected, uncheck others and keep only it.\n if (selected.includes(\"Surprise me\")){\n const boxes = Array.from(form.querySelectorAll('input[name=\"accent\"]'));\n boxes.forEach(b => {\n if (b.value !== \"Surprise me\") b.checked = false;\n });\n return;\n }\n \/\/ Max 2 accents\n if (selected.length > 2 && changedInput){\n changedInput.checked = false;\n }\n }\n\n Array.from(form.querySelectorAll('input[name=\"accent\"]')).forEach(cb => {\n cb.addEventListener(\"change\", (e) => {\n enforceAccentLimit(e.target);\n \/\/ If we already have a state, live update\n if (lastState && isCoreValid()) render();\n });\n });\n\n [roomEl, moodEl, baseEl, existingEl].forEach(el => {\n el.addEventListener(\"change\", () => {\n if (lastState && isCoreValid()) render();\n });\n el.addEventListener(\"input\", () => {\n if (lastState && isCoreValid()) render();\n });\n });\n\n function isCoreValid(){\n return !!roomEl.value && !!moodEl.value && !!baseEl.value;\n }\n\n function showErrors(items){\n errorList.innerHTML = \"\";\n items.forEach(msg => {\n const li = document.createElement(\"li\");\n li.textContent = msg;\n errorList.appendChild(li);\n });\n errorsBox.style.display = \"block\";\n errorsBox.focus?.();\n }\n\n function clearErrors(){\n errorsBox.style.display = \"none\";\n errorList.innerHTML = \"\";\n }\n\n function buildState(){\n const room = roomEl.value;\n const mood = moodEl.value;\n const baseVibe = baseEl.value;\n const existing = (existingEl.value || \"\").trim();\n\n let accents = getAccentSelections();\n if (accents.length === 0) {\n \/\/ Default: if none selected, choose a safe pair based on mood\n accents = pickSurpriseAccents(baseVibe, mood).slice(0, 2);\n } else if (accents.includes(\"Surprise me\")){\n accents = pickSurpriseAccents(baseVibe, mood).slice(0, 2);\n }\n\n \/\/ Ensure max 2\n accents = accents.slice(0, 2);\n\n const rule = buildRule(mood, baseVibe, accents.length);\n const guidance = categoryGuidance(room, mood);\n\n return { room, mood, baseVibe, accents, existing, rule, guidance };\n }\n\n function render(){\n clearErrors();\n const state = buildState();\n lastState = state;\n\n \/\/ Analytics event (non-invasive)\n window.dataLayer.push({ event: \"tool_result_generated\", tool: TOOL_NAME });\n\n \/\/ Update header pills\n pillRoom.textContent = \"Room: \" + state.room;\n pillMood.textContent = \"Vibe: \" + state.mood;\n pillRule.textContent = \"Rule: \" + state.rule;\n\n resultsIntro.textContent = \"Here's a simple palette plan you can follow while browsing Hogai.\";\n\n \/\/ Build palette blocks\n const baseObj = PALETTES.base[state.baseVibe] || PALETTES.base[\"Neutral base\"];\n const accentObjs = state.accents\n .map(a => PALETTES.accents[a])\n .filter(Boolean);\n\n \/\/ If something odd happens, fall back safely\n if (accentObjs.length === 0){\n accentObjs.push(PALETTES.accents.Blue);\n }\n\n \/\/ Compose swatches: base + accents + one balancing neutral\n const neutral = state.baseVibe === \"Dark base\" ? PALETTES.neutrals[2] : PALETTES.neutrals[0];\n\n const swatchesHtml = `\n <div class=\"swatchCard\">\n <div class=\"swatches\" aria-label=\"Your palette swatches\">\n <div class=\"swatch\" style=\"background:${baseObj.hex}\" data-name=\"${baseObj.name}\" aria-label=\"Base: ${baseObj.name}\"><\/div>\n ${accentObjs.map(a => `\n <div class=\"swatch\" style=\"background:${a.hex}\" data-name=\"${a.name}\" aria-label=\"Accent: ${a.name}\"><\/div>\n `).join(\"\")}\n <div class=\"swatch\" style=\"background:${neutral.hex}\" data-name=\"${neutral.name}\" aria-label=\"Balancer: ${neutral.name}\"><\/div>\n <\/div>\n <div class=\"swatchLabel\">\n <strong>Your palette<\/strong>\n <span>\n Base: ${baseObj.name} • Accents: ${accentObjs.map(a => a.name).join(\" + \")} • Balancer: ${neutral.name}\n <\/span>\n <\/div>\n <div class=\"why\">\n <strong>Why this works:<\/strong>\n <span style=\"display:block;margin-top:4px;\">\n ${baseObj.note} Your rule today: <em>${state.rule}<\/em>.\n <\/span>\n <\/div>\n <\/div>\n `;\n\n const order = state.guidance.order;\n const tip = state.guidance.tip;\n\n const recHtml = `\n <div class=\"swatchCard\">\n <div class=\"swatchLabel\">\n <strong>Mini collection (what to shop first)<\/strong>\n <span>${tip}<\/span>\n <\/div>\n <ol class=\"recList\" style=\"margin-top:10px;\">\n <li><strong>${order[0]}<\/strong> \u2014 choose the main color moment.<\/li>\n <li><strong>${order[1]}<\/strong> \u2014 repeat the hero accent once for cohesion.<\/li>\n <li><strong>${order[2]}<\/strong> \u2014 browse supporting pieces in your base + accents.<\/li>\n <\/ol>\n <p class=\"note\">\n Quick pairing rule: repeat your hero accent <strong>twice<\/strong> (e.g., mirror + coffee table),\n and keep everything else close to your base.\n <\/p>\n <p class=\"note\" id=\"noteExistingInner\"><\/p>\n <\/div>\n `;\n\n liveResults.innerHTML = `<div class=\"palette\">${swatchesHtml}${recHtml}<\/div>`;\n\n \/\/ Show results panel + switch grid to two columns\n document.getElementById(\"results\").classList.add(\"visible\");\n document.querySelector(\".tool-grid\").classList.add(\"results-visible\");\n\n const noteEl = document.getElementById(\"noteExistingInner\");\n if (state.existing){\n noteEl.textContent = `You already have: \"${state.existing}\". Keep that as your base anchor and add accents via one statement piece.`;\n } else {\n noteEl.textContent = \"If you have nothing yet: start with a mirror or coffee table color you love, then build around it.\";\n }\n\n \/\/ Update CTA copy\n document.getElementById(\"ctaCopy\").textContent =\n `Open categories in a new tab. We'll pass your palette as a note in the URL (for your reference).`;\n\n \/\/ Update CTA URLs (with UTM + palette params)\n const paletteParam = [\n \"base:\" + state.baseVibe,\n \"accents:\" + state.accents.join(\"+\"),\n \"mood:\" + state.mood,\n \"room:\" + state.room\n ].join(\"|\");\n\n const commonParams = {\n utm_source: \"hogai_tool\",\n utm_medium: \"leadmagnet\",\n utm_campaign: \"color_combo_builder\",\n utm_content: \"category\",\n palette: paletteParam\n };\n\n ctaFurniture.dataset.url = appendParams(BASE_URLS.furniture, { ...commonParams, utm_content: \"furniture\" });\n ctaMirrors.dataset.url = appendParams(BASE_URLS.mirrors, { ...commonParams, utm_content: \"mirrors\" });\n ctaCoffee.dataset.url = appendParams(BASE_URLS.coffee, { ...commonParams, utm_content: \"coffee_tables\" });\n ctaTextiles.dataset.url = appendParams(BASE_URLS.textiles, { ...commonParams, utm_content: \"textiles\" });\n\n \/\/ Improve button label based on priority\n ctaFurniture.textContent = \"Shop Furniture in this palette\";\n ctaMirrors.textContent = \"Shop Mirrors\";\n ctaCoffee.textContent = \"Shop Coffee Tables\";\n ctaTextiles.textContent = \"Shop Textiles\";\n }\n\n form.addEventListener(\"submit\", (e) => {\n e.preventDefault();\n clearErrors();\n\n const problems = [];\n if (!roomEl.value) problems.push(\"Select a room type.\");\n if (!moodEl.value) problems.push(\"Select how you want the space to feel.\");\n if (!baseEl.value) problems.push(\"Select your base vibe.\");\n\n \/\/ Accent validation: max 2 already enforced; allow 0 -> we auto-pick.\n const selected = getAccentSelections();\n if (selected.length > 2) problems.push(\"Pick up to 2 accent colors.\");\n\n if (problems.length){\n showErrors(problems);\n return;\n }\n\n \/\/ Render + scroll to results for quick gratification\n render();\n document.getElementById(\"results\").scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n });\n\n document.getElementById(\"resetBtn\").addEventListener(\"click\", () => {\n form.reset();\n clearErrors();\n lastState = null;\n\n pillRoom.textContent = \"Room: \u2014\";\n pillMood.textContent = \"Vibe: \u2014\";\n pillRule.textContent = \"Rule: \u2014\";\n resultsIntro.textContent = \"Fill the form to see your results here.\";\n\n liveResults.innerHTML = `\n <div class=\"palette\" aria-label=\"Palette output\">\n <div class=\"swatchCard\">\n <div class=\"swatches\" aria-label=\"Base and accent swatches\">\n <div class=\"swatch\" style=\"background:#1f2937\" aria-hidden=\"true\"><\/div>\n <div class=\"swatch\" style=\"background:#3094ff\" aria-hidden=\"true\"><\/div>\n <div class=\"swatch\" style=\"background:#34d399\" aria-hidden=\"true\"><\/div>\n <\/div>\n <div class=\"swatchLabel\">\n <strong>Example palette (placeholder)<\/strong>\n <span>Submit to generate your custom version.<\/span>\n <\/div>\n <div class=\"why\">You'll get: 1 base + 1\u20132 accents, plus what to shop first.<\/div>\n <\/div>\n\n <div class=\"swatchCard\">\n <div class=\"swatchLabel\">\n <strong>Mini collection (starter set)<\/strong>\n <span>Categories chosen for your room + vibe.<\/span>\n <\/div>\n <ul class=\"recList\">\n <li>Mirror (strong statement, low clutter)<\/li>\n <li>Coffee table (anchors the room)<\/li>\n <li>Furniture category (browse matching pieces)<\/li>\n <\/ul>\n <p class=\"note\"><\/p>\n <\/div>\n <\/div>\n `;\n\n \/\/ Clear CTA URLs\n [ctaFurniture, ctaMirrors, ctaCoffee, ctaTextiles].forEach(btn => btn.dataset.url = \"\");\n\n \/\/ Hide results panel + revert grid to single column\n document.getElementById(\"results\").classList.remove(\"visible\");\n document.querySelector(\".tool-grid\").classList.remove(\"results-visible\");\n });\n\n \/\/ CTA button handlers\n ctaFurniture.addEventListener(\"click\", () => {\n const url = ctaFurniture.dataset.url || appendParams(BASE_URLS.furniture, {\n utm_source:\"hogai_tool\", utm_medium:\"leadmagnet\", utm_campaign:\"color_combo_builder\", utm_content:\"furniture\"\n });\n openCta(url, TOOL_NAME, \"furniture\");\n });\n\n ctaMirrors.addEventListener(\"click\", () => {\n const url = ctaMirrors.dataset.url || appendParams(BASE_URLS.mirrors, {\n utm_source:\"hogai_tool\", utm_medium:\"leadmagnet\", utm_campaign:\"color_combo_builder\", utm_content:\"mirrors\"\n });\n openCta(url, TOOL_NAME, \"mirrors\");\n });\n\n ctaCoffee.addEventListener(\"click\", () => {\n const url = ctaCoffee.dataset.url || appendParams(BASE_URLS.coffee, {\n utm_source:\"hogai_tool\", utm_medium:\"leadmagnet\", utm_campaign:\"color_combo_builder\", utm_content:\"coffee_tables\"\n });\n openCta(url, TOOL_NAME, \"coffee_tables\");\n });\n\n ctaTextiles.addEventListener(\"click\", () => {\n const url = ctaTextiles.dataset.url || appendParams(BASE_URLS.textiles, {\n utm_source:\"hogai_tool\", utm_medium:\"leadmagnet\", utm_campaign:\"color_combo_builder\", utm_content:\"textiles\"\n });\n openCta(url, TOOL_NAME, \"textiles\");\n });\n\n \/\/ Optional: improve UX by preventing over-selection of accents immediately\n Array.from(form.querySelectorAll('input[name=\"accent\"]')).forEach(cb => {\n cb.addEventListener(\"change\", () => {\n const selected = getAccentSelections();\n \/\/ Friendly micro-feedback via title (non-blocking)\n if (selected.length >= 2 && !selected.includes(\"Surprise me\")){\n form.querySelectorAll('input[name=\"accent\"]').forEach(x => {\n if (!x.checked) x.title = \"Max 2 accents for a cohesive palette.\";\n });\n } else {\n form.querySelectorAll('input[name=\"accent\"]').forEach(x => x.title = \"\");\n }\n });\n });\n\n \/\/ Accessibility: ensure focus is visible on keyboard navigation\n document.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Tab\") document.querySelector(\".hogai-tool-wrap\").classList.add(\"show-focus\");\n });\n <\/script>\n\n<\/div>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Hogai Color Combo Builder \u2014 Build a bold, cohesive mini collection Pick your vibe. Get a clear palette + what to shop first. Fill this in to get a simple, no-jargon color plan for your room \u2014 plus category links to start shopping. Note: This tool does not make discount claims or delivery promises. Your […]<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-parts\/page_full_width.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-21853","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages\/21853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/comments?post=21853"}],"version-history":[{"count":0,"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/pages\/21853\/revisions"}],"wp:attachment":[{"href":"https:\/\/hogai.store\/en\/wp-json\/wp\/v2\/media?parent=21853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}