{"id":17523,"date":"2026-09-30T15:18:51","date_gmt":"2026-09-30T15:18:51","guid":{"rendered":"https:\/\/soibibotanicals.com\/?page_id=17523"},"modified":"2026-10-06T11:24:52","modified_gmt":"2026-10-06T11:24:52","slug":"find-your-skin-strategy","status":"publish","type":"page","link":"https:\/\/soibibotanicals.com\/?page_id=17523","title":{"rendered":"FIND YOUR SKIN STRATEGY"},"content":{"rendered":"<!-- ==========================================================================\r\n   SOIBI SKIN QUIZ - ALL-IN-ONE WORDPRESS EMBED\r\n   ========================================================================== -->\r\n\r\n<!-- 1. STYLES (CSS) -->\r\n<style>\r\n.soibi-quiz-container {\r\n    --soibi-bg: #FAF9F6;\r\n    --soibi-card-bg: #FFFFFF;\r\n    --soibi-text-primary: #1A1A1A;\r\n    --soibi-text-muted: #6B6B6B;\r\n    --soibi-border: #E8E6E1;\r\n    --soibi-accent: #1A1A1A;\r\n    --soibi-radius: 12px;\r\n    --soibi-transition: cubic-bezier(0.16, 1, 0.3, 1);\r\n\r\n    max-width: 640px;\r\n    margin: 40px auto;\r\n    padding: 40px;\r\n    background-color: var(--soibi-bg);\r\n    border: 1px solid var(--soibi-border);\r\n    border-radius: 16px;\r\n    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.03);\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n    color: var(--soibi-text-primary);\r\n    box-sizing: border-box;\r\n}\r\n\r\n.soibi-quiz-container * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\/* Brand Header *\/\r\n.soibi-quiz-brand {\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: var(--soibi-text-muted);\r\n    text-align: center;\r\n    margin-bottom: 24px;\r\n}\r\n\r\n\/* Progress Track *\/\r\n.soibi-quiz-progress-track {\r\n    height: 3px;\r\n    background: var(--soibi-border);\r\n    border-radius: 2px;\r\n    margin-bottom: 32px;\r\n    overflow: hidden;\r\n}\r\n\r\n.soibi-quiz-progress-bar {\r\n    height: 100%;\r\n    width: 25%;\r\n    background: var(--soibi-accent);\r\n    transition: width 0.4s var(--soibi-transition);\r\n}\r\n\r\n\/* Step Container & Animations *\/\r\n.soibi-quiz-step {\r\n    display: none;\r\n    opacity: 0;\r\n    transform: translateY(8px);\r\n    transition: opacity 0.4s var(--soibi-transition), transform 0.4s var(--soibi-transition);\r\n}\r\n\r\n.soibi-quiz-step.active {\r\n    display: block;\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n.soibi-step-indicator {\r\n    font-size: 12px;\r\n    font-weight: 600;\r\n    color: var(--soibi-text-muted);\r\n    letter-spacing: 1px;\r\n    margin-bottom: 8px;\r\n}\r\n\r\n.soibi-quiz-header {\r\n    font-size: 24px;\r\n    font-weight: 500;\r\n    line-height: 1.3;\r\n    letter-spacing: -0.02em;\r\n    margin: 0 0 8px 0;\r\n}\r\n\r\n.soibi-quiz-subtitle {\r\n    font-size: 14px;\r\n    color: var(--soibi-text-muted);\r\n    line-height: 1.5;\r\n    margin: 0 0 28px 0;\r\n}\r\n\r\n\/* Option Buttons *\/\r\n.soibi-quiz-options {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n    margin-bottom: 32px;\r\n}\r\n\r\n.soibi-option-btn {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: 100%;\r\n    padding: 18px 20px;\r\n    background: var(--soibi-card-bg);\r\n    border: 1px solid var(--soibi-border);\r\n    border-radius: var(--soibi-radius);\r\n    cursor: pointer;\r\n    text-align: left;\r\n    transition: all 0.25s var(--soibi-transition);\r\n}\r\n\r\n.soibi-option-text {\r\n    font-size: 15px;\r\n    font-weight: 450;\r\n    color: var(--soibi-text-primary);\r\n}\r\n\r\n.soibi-option-radio {\r\n    width: 18px;\r\n    height: 18px;\r\n    border: 1.5px solid var(--soibi-border);\r\n    border-radius: 50%;\r\n    position: relative;\r\n    transition: all 0.2s ease;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.soibi-option-btn:hover {\r\n    border-color: var(--soibi-accent);\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.soibi-option-btn.selected {\r\n    border-color: var(--soibi-accent);\r\n    background-color: #F3F1EC;\r\n}\r\n\r\n.soibi-option-btn.selected .soibi-option-radio {\r\n    border-color: var(--soibi-accent);\r\n    background-color: var(--soibi-accent);\r\n    box-shadow: inset 0 0 0 3px #F3F1EC;\r\n}\r\n\r\n\/* Navigation Buttons *\/\r\n.soibi-nav-btns {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding-top: 20px;\r\n    border-top: 1px solid var(--soibi-border);\r\n}\r\n\r\n.soibi-btn {\r\n    padding: 12px 24px;\r\n    border-radius: 30px;\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    transition: all 0.25s var(--soibi-transition);\r\n    border: none;\r\n}\r\n\r\n.soibi-btn-secondary {\r\n    background: transparent;\r\n    color: var(--soibi-text-muted);\r\n}\r\n\r\n.soibi-btn-secondary:hover {\r\n    color: var(--soibi-text-primary);\r\n}\r\n\r\n.soibi-btn-primary {\r\n    background: var(--soibi-accent);\r\n    color: #FFFFFF;\r\n}\r\n\r\n.soibi-btn-primary:hover:not(:disabled) {\r\n    background: #333333;\r\n    transform: translateY(-1px);\r\n}\r\n\r\n.soibi-btn:disabled {\r\n    opacity: 0.35;\r\n    cursor: not-allowed;\r\n    transform: none;\r\n}\r\n\r\n\/* Results Step *\/\r\n.soibi-results-header {\r\n    text-align: center;\r\n    margin-bottom: 32px;\r\n}\r\n\r\n.soibi-badge {\r\n    display: inline-block;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 1.5px;\r\n    text-transform: uppercase;\r\n    color: var(--soibi-text-muted);\r\n    background: #EAE8E1;\r\n    padding: 4px 10px;\r\n    border-radius: 20px;\r\n    margin-bottom: 12px;\r\n}\r\n\r\n.soibi-results-title {\r\n    font-size: 26px;\r\n    font-weight: 500;\r\n    letter-spacing: -0.02em;\r\n    margin: 0 0 10px 0;\r\n}\r\n\r\n.soibi-results-desc {\r\n    font-size: 14px;\r\n    color: var(--soibi-text-muted);\r\n    max-width: 480px;\r\n    margin: 0 auto;\r\n    line-height: 1.5;\r\n}\r\n\r\n\/* Routine Cards *\/\r\n.soibi-routine-grid {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 16px;\r\n    margin-bottom: 32px;\r\n}\r\n\r\n.soibi-routine-card {\r\n    display: flex;\r\n    gap: 20px;\r\n    padding: 20px;\r\n    background: var(--soibi-card-bg);\r\n    border: 1px solid var(--soibi-border);\r\n    border-radius: var(--soibi-radius);\r\n    align-items: flex-start;\r\n}\r\n\r\n.soibi-card-number {\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: var(--soibi-text-muted);\r\n    opacity: 0.6;\r\n    padding-top: 2px;\r\n}\r\n\r\n.soibi-role-tag {\r\n    display: inline-block;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    letter-spacing: 1px;\r\n    text-transform: uppercase;\r\n    color: var(--soibi-text-muted);\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.soibi-card-title {\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    margin: 0 0 6px 0;\r\n}\r\n\r\n.soibi-card-desc {\r\n    font-size: 13px;\r\n    color: var(--soibi-text-muted);\r\n    line-height: 1.5;\r\n    margin: 0;\r\n}\r\n\r\n\/* Call To Action Button *\/\r\n.soibi-cta-btn {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: 100%;\r\n    padding: 18px;\r\n    background: var(--soibi-accent);\r\n    color: #FFFFFF !important;\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    letter-spacing: 1px;\r\n    text-transform: uppercase;\r\n    border-radius: var(--soibi-radius);\r\n    text-decoration: none !important;\r\n    transition: all 0.25s var(--soibi-transition);\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.soibi-cta-btn:hover {\r\n    background: #333333;\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .soibi-quiz-container {\r\n        padding: 24px;\r\n        margin: 20px 12px;\r\n    }\r\n    .soibi-quiz-header {\r\n        font-size: 20px;\r\n    }\r\n    .soibi-routine-card {\r\n        gap: 12px;\r\n        padding: 16px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!-- 2. MARKUP (HTML) -->\r\n<div class=\"soibi-quiz-container\">\r\n    <div class=\"soibi-quiz-brand\">SOIBI BOTANICALS<\/div>\r\n\r\n    <div class=\"soibi-quiz-progress-track\">\r\n        <div class=\"soibi-quiz-progress-bar\" id=\"soibiProgressBar\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- STEP 1 -->\r\n    <div class=\"soibi-quiz-step active\" data-step=\"1\">\r\n        <div class=\"soibi-step-indicator\">01 \/ 03<\/div>\r\n        <h2 class=\"soibi-quiz-header\">What is your primary body-skin concern?<\/h2>\r\n        <p class=\"soibi-quiz-subtitle\">Select the main concern you would like to target.<\/p>\r\n\r\n        <div class=\"soibi-quiz-options\">\r\n            <button type=\"button\" class=\"soibi-option-btn\">\r\n                <span class=\"soibi-option-text\">Body dullness &amp; lack of natural glow<\/span>\r\n                <span class=\"soibi-option-radio\"><\/span>\r\n            <\/button>\r\n            <button type=\"button\" class=\"soibi-option-btn\">\r\n                <span class=\"soibi-option-text\">Hyperpigmentation &amp; uneven skin tone<\/span>\r\n                <span class=\"soibi-option-radio\"><\/span>\r\n            <\/button>\r\n            <button type=\"button\" class=\"soibi-option-btn\">\r\n                <span class=\"soibi-option-text\">Rough texture &amp; clogged pores<\/span>\r\n                <span class=\"soibi-option-radio\"><\/span>\r\n            <\/button>\r\n            <button type=\"button\" class=\"soibi-option-btn\">\r\n                <span class=\"soibi-option-text\">Persistent dryness &amp; moisture barrier depletion<\/span>\r\n                <span class=\"soibi-option-radio\"><\/span>\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <div class=\"soibi-nav-btns\">\r\n            <div><\/div>\r\n            <button type=\"button\" class=\"soibi-btn soibi-btn-primary\" id=\"nextBtn1\" disabled>Continue &rarr;<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- STEP 2 -->\r\n    <div class=\"soibi-quiz-step\" data-step=\"2\">\r\n        <div class=\"soibi-step-indicator\">02 \/ 03<\/div>\r\n        <h2 class=\"soibi-quiz-header\">How does your body skin currently feel?<\/h2>\r\n        <p class=\"soibi-quiz-subtitle\">Select all that apply to help tailor your care routine.<\/p>\r\n\r\n        <div class=\"soibi-quiz-options\">\r\n            <button type=\"button\" class=\"soibi-option-btn\">\r\n                <span class=\"soibi-option-text\">Feels dry or tight shortly after applying lotion<\/span>\r\n                <span class=\"soibi-option-radio\"><\/span>\r\n            <\/button>\r\n            <button type=\"button\" class=\"soibi-option-btn\">\r\n                <span class=\"soibi-option-text\">Looks less luminous or vibrant than desired<\/span>\r\n                <span class=\"soibi-option-radio\"><\/span>\r\n            <\/button>\r\n            <button type=\"button\" class=\"soibi-option-btn\">\r\n                <span class=\"soibi-option-text\">Feels rough or bumpy to the touch<\/span>\r\n                <span class=\"soibi-option-radio\"><\/span>\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <div class=\"soibi-nav-btns\">\r\n            <button type=\"button\" class=\"soibi-btn soibi-btn-secondary\">&larr; Back<\/button>\r\n            <button type=\"button\" class=\"soibi-btn soibi-btn-primary\" id=\"nextBtn2\" disabled>Continue &rarr;<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- STEP 3 -->\r\n    <div class=\"soibi-quiz-step\" data-step=\"3\">\r\n        <div class=\"soibi-step-indicator\">03 \/ 03<\/div>\r\n        <h2 class=\"soibi-quiz-header\">What is your ideal approach to body care?<\/h2>\r\n        <p class=\"soibi-quiz-subtitle\">Choose the routine style that fits your daily ritual.<\/p>\r\n\r\n        <div class=\"soibi-quiz-options\">\r\n            <button type=\"button\" class=\"soibi-option-btn\">\r\n                <span class=\"soibi-option-text\">A complete, purposeful 4-step routine that delivers glowing results<\/span>\r\n                <span class=\"soibi-option-radio\"><\/span>\r\n            <\/button>\r\n            <button type=\"button\" class=\"soibi-option-btn\">\r\n                <span class=\"soibi-option-text\">A targeted botanical regimen focusing on hydration &amp; tone balance<\/span>\r\n                <span class=\"soibi-option-radio\"><\/span>\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <div class=\"soibi-nav-btns\">\r\n            <button type=\"button\" class=\"soibi-btn soibi-btn-secondary\">&larr; Back<\/button>\r\n            <button type=\"button\" class=\"soibi-btn soibi-btn-primary\" id=\"nextBtn3\" disabled>Reveal My Routine &rarr;<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- RESULTS STEP -->\r\n    <div class=\"soibi-quiz-step\" data-step=\"4\">\r\n        <div class=\"soibi-results-header\">\r\n            <span class=\"soibi-badge\">Curated Botanical Routine<\/span>\r\n            <h2 class=\"soibi-results-title\">The Soibi Body Renewal System<\/h2>\r\n            <p class=\"soibi-results-desc\">\r\n                A high-performance botanical body care regimen expertly formulated to purify, hydrate, brighten, and lock in lasting moisture.\r\n            <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"soibi-routine-grid\">\r\n            <div class=\"soibi-routine-card\">\r\n                <div class=\"soibi-card-number\">01<\/div>\r\n                <div class=\"soibi-card-content\">\r\n                    <span class=\"soibi-role-tag\">Cleanse &amp; Clarify<\/span>\r\n                    <h3 class=\"soibi-card-title\">Clear Complexion Body Wash<\/h3>\r\n                    <p class=\"soibi-card-desc\">Deeply purifies and clarifies the skin, removing daily impurities and surface dullness while preserving essential skin moisture.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"soibi-routine-card\">\r\n                <div class=\"soibi-card-number\">02<\/div>\r\n                <div class=\"soibi-card-content\">\r\n                    <span class=\"soibi-role-tag\">Brighten &amp; Hydrate<\/span>\r\n                    <h3 class=\"soibi-card-title\">Vitamin C Brightening Body Lotion<\/h3>\r\n                    <p class=\"soibi-card-desc\">Infused with potent Vitamin C derivatives, Niacinamide, Hyaluronic Acid, and Squalane to brighten tone and replenish moisture.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"soibi-routine-card\">\r\n                <div class=\"soibi-card-number\">03<\/div>\r\n                <div class=\"soibi-card-content\">\r\n                    <span class=\"soibi-role-tag\">Renew &amp; Smooth<\/span>\r\n                    <h3 class=\"soibi-card-title\">Daily Renew Skin Lotion<\/h3>\r\n                    <p class=\"soibi-card-desc\">Supports cellular renewal to smooth rough texture, refine skin elasticity, and maintain a soft, supple finish.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"soibi-routine-card\">\r\n                <div class=\"soibi-card-number\">04<\/div>\r\n                <div class=\"soibi-card-content\">\r\n                    <span class=\"soibi-role-tag\">Nourish &amp; Seal<\/span>\r\n                    <h3 class=\"soibi-card-title\">Even Tone Body Oil<\/h3>\r\n                    <p class=\"soibi-card-desc\">A rich, lightweight oil formulation that seals in hydration, unifies skin tone, and provides an all-day luminous glow.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <a href=\"https:\/\/soibibotanicals.com\/?post_type=product&amp;v=66e10e9ff65e\" class=\"soibi-cta-btn\" target=\"_blank\" rel=\"noopener\">\r\n           FIND YOUR SKIN STRATEGY &rarr;\r\n        <\/a>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- 3. LOGIC (JAVASCRIPT) -->\r\n<script>\r\n(function () {\r\n    'use strict';\r\n\r\n    function initQuiz() {\r\n        var quizContainer = document.querySelector('.soibi-quiz-container');\r\n        if (!quizContainer) return;\r\n\r\n        \/\/ Prevent duplicate initialization\r\n        if (quizContainer.dataset.ready === 'true') return;\r\n        quizContainer.dataset.ready = 'true';\r\n\r\n        var progressBar = document.getElementById('soibiProgressBar');\r\n        var steps = Array.prototype.slice.call(quizContainer.querySelectorAll('.soibi-quiz-step'));\r\n        var totalSteps = steps.length;\r\n        var currentStep = 1;\r\n\r\n        function updateProgress() {\r\n            if (progressBar) {\r\n                var percentage = (currentStep \/ totalSteps) * 100;\r\n                progressBar.style.width = percentage + '%';\r\n            }\r\n        }\r\n\r\n        function goToStep(targetStep) {\r\n            if (targetStep < 1 || targetStep > totalSteps) return;\r\n\r\n            var currentElem = quizContainer.querySelector('.soibi-quiz-step[data-step=\"' + currentStep + '\"]');\r\n            var targetElem = quizContainer.querySelector('.soibi-quiz-step[data-step=\"' + targetStep + '\"]');\r\n\r\n            if (currentElem) currentElem.classList.remove('active');\r\n            if (targetElem) {\r\n                targetElem.classList.add('active');\r\n                currentStep = targetStep;\r\n                updateProgress();\r\n            }\r\n        }\r\n\r\n        function handleOptionSelection(selectedBtn, isMultiSelect) {\r\n            var parentOptions = selectedBtn.closest('.soibi-quiz-options');\r\n            if (!parentOptions) return;\r\n\r\n            if (!isMultiSelect) {\r\n                var allButtons = parentOptions.querySelectorAll('.soibi-option-btn');\r\n                allButtons.forEach(function (btn) { btn.classList.remove('selected'); });\r\n                selectedBtn.classList.add('selected');\r\n            } else {\r\n                selectedBtn.classList.toggle('selected');\r\n            }\r\n\r\n            var nextBtn = document.getElementById('nextBtn' + currentStep);\r\n            if (nextBtn) {\r\n                var hasSelected = parentOptions.querySelectorAll('.soibi-option-btn.selected').length > 0;\r\n                nextBtn.disabled = !hasSelected;\r\n            }\r\n        }\r\n\r\n        quizContainer.addEventListener('click', function (event) {\r\n            var optionBtn = event.target.closest('.soibi-option-btn');\r\n            if (optionBtn) {\r\n                var stepElem = optionBtn.closest('.soibi-quiz-step');\r\n                var isMultiSelect = stepElem && stepElem.getAttribute('data-step') === '2';\r\n                handleOptionSelection(optionBtn, isMultiSelect);\r\n                return;\r\n            }\r\n\r\n            var target = event.target;\r\n            if (target.id && target.id.indexOf('nextBtn') === 0) {\r\n                if (currentStep < totalSteps - 1) {\r\n                    goToStep(currentStep + 1);\r\n                } else if (currentStep === totalSteps - 1) {\r\n                    goToStep(totalSteps);\r\n                }\r\n                return;\r\n            }\r\n\r\n            if (target.classList.contains('soibi-btn-secondary')) {\r\n                goToStep(currentStep - 1);\r\n                return;\r\n            }\r\n        });\r\n\r\n        updateProgress();\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n        document.addEventListener('DOMContentLoaded', initQuiz);\r\n    } else {\r\n        initQuiz();\r\n    }\r\n})();\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-17523","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/soibibotanicals.com\/index.php?rest_route=\/wp\/v2\/pages\/17523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soibibotanicals.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/soibibotanicals.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/soibibotanicals.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/soibibotanicals.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17523"}],"version-history":[{"count":6,"href":"https:\/\/soibibotanicals.com\/index.php?rest_route=\/wp\/v2\/pages\/17523\/revisions"}],"predecessor-version":[{"id":17568,"href":"https:\/\/soibibotanicals.com\/index.php?rest_route=\/wp\/v2\/pages\/17523\/revisions\/17568"}],"wp:attachment":[{"href":"https:\/\/soibibotanicals.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}