/** Shopify CDN: Minification failed

Line 16:0 Unexpected "#"
Line 62:0 Unexpected "`"
Line 79:4 Unexpected "{"
Line 79:6 Expected identifier but found "'kingdom-pure.css'"
Line 80:3 Unexpected "`"
Line 159:0 Unexpected "`"
Line 233:71 Expected identifier but found "#packages"
Line 235:44 Unexpected "*"
Line 308:1 Expected identifier but found "%"
Line 309:0 Unexpected "{"
... and 85 more hidden warnings

**/
# Kingdom Pure — Luxury Cleaning Service

A complete starter kit to make Shopify’s **Horizon** theme look **flashy, high-end, and “pops”**—on a **white background**—using a gemstone color system.

> **Brand**: *Kingdom Pure*
> **Tagline**: *Luxury Cleaning Service*

---

## 1) Gemstone Color System

Paste these into a new CSS file (we’ll create it in step 2 as `assets/kingdom-pure.css`). These CSS variables power all gradients, buttons, and accents while keeping the **page background white**.

```css
:root {
  /* Core Neutrals */
  --kp-white: #ffffff;
  --kp-ink: #0e0f12;          /* near-black for headings */
  --kp-slate: #5a606b;        /* body text */
  --kp-mist: #eef2f7;         /* light UI lines */
  --kp-shadow: rgba(10, 18, 30, .08);

  /* Gemstones (approximated, luxe-friendly) */
  --gem-jasper: #d73c2c;        /* deep red */
  --gem-sapphire: #0f52ba;      /* royal blue */
  --gem-chalcedony: #a6cfe2;    /* pale blue-gray */
  --gem-emerald: #50c878;       /* vivid emerald */
  --gem-sardonyx: #8b3f1a;      /* warm brown-red */
  --gem-sardius: #e34234;       /* carnelian red-orange */
  --gem-chrysolite: #b5cc39;    /* peridot/olive */
  --gem-beryl: #7fd9d2;         /* aqua beryl */
  --gem-topaz: #ffc87c;         /* golden topaz */
  --gem-chrysoprasus: #39a96b;  /* apple green */
  --gem-jacinth: #e2735e;       /* red-orange */
  --gem-amethyst: #9966cc;      /* purple */

  /* Brand Accents (curated blends) */
  --kp-primary: var(--gem-sapphire);
  --kp-secondary: var(--gem-emerald);
  --kp-accent: var(--gem-amethyst);

  /* Gradient recipes */
  --grad-royal: linear-gradient(135deg, var(--gem-sapphire), var(--gem-amethyst));
  --grad-eden: linear-gradient(135deg, var(--gem-emerald), var(--gem-chrysoprasus));
  --grad-aurum: linear-gradient(135deg, var(--gem-topaz), var(--gem-jasper));
}
```

### Usage guidance

* Keep **page backgrounds `#fff`**. Use gemstone colors for lines, icons, buttons, and section headers.
* Alternate accent usage by section to make the page *pop* without getting messy: royal (blue–purple), eden (greens), aurum (gold–red).

---

## 2) Add the Custom CSS file in Horizon

1. In Shopify admin: **Online Store → Themes → (Horizon) → Edit code**.
2. In **Assets**, click **Add a new asset** → **Create a blank file** → choose **CSS** → name it `kingdom-pure.css`.
3. Paste the **full CSS** from below into `kingdom-pure.css` and save.
4. Open `layout/theme.liquid` and right before `</head>` add:

   ```liquid
   {{ 'kingdom-pure.css' | asset_url | stylesheet_tag }}
   ```

### Full CSS — buttons, cards, headers, accents

```css
/* ===== Kingdom Pure — Luxe Flash on White ===== */
@supports (font-variation-settings: normal) {
  html { text-rendering: optimizeLegibility; }
}

/***** Typography *****/
.kp-eyebrow { letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--kp-secondary); }
.kp-display { font-size: clamp(36px, 6vw, 62px); line-height: 1.04; font-weight: 800; color: var(--kp-ink); }
.kp-subtitle { font-size: clamp(16px, 2vw, 20px); color: var(--kp-slate); }

/***** Buttons *****/
.kp-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.25rem; border-radius: 999px;
  font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 10px 20px var(--kp-shadow);
  transform: translateY(0); transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.kp-btn--primary { color: #fff; background-image: var(--grad-royal); }
.kp-btn--secondary { color: #0b2b1f; background-image: var(--grad-eden); }
.kp-btn--outline {
  color: var(--kp-ink); background: #fff; border: 2px solid var(--kp-ink);
}
.kp-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px var(--kp-shadow); }

/***** Cards *****/
.kp-card { background: #fff; border: 1px solid var(--kp-mist); border-radius: 20px; padding: 28px; box-shadow: 0 8px 22px var(--kp-shadow); }
.kp-card--glass { background: rgba(255,255,255,.75); backdrop-filter: blur(6px); }
.kp-chip { display: inline-block; padding: .45rem .8rem; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.kp-chip--royal { color:#fff; background-image: var(--grad-royal); }
.kp-chip--eden { color:#0b2b1f; background-image: var(--grad-eden); }
.kp-chip--aurum { color:#3b1a12; background-image: var(--grad-aurum); }

/***** Dividers & Accents *****/
.kp-divider { height: 3px; background-image: var(--grad-royal); border-radius: 3px; width: 96px; }
.kp-divider--eden { background-image: var(--grad-eden); }
.kp-divider--aurum { background-image: var(--grad-aurum); }

/***** Hero overlays *****/
.kp-hero-wrap { position: relative; }
.kp-hero-glow { position: absolute; inset: -20%; background: radial-gradient( circle at 30% 20%, rgba(15,82,186,.14), transparent 50%),
                                           radial-gradient( circle at 70% 60%, rgba(153,102,204,.12), transparent 55%),
                                           radial-gradient( circle at 40% 80%, rgba(80,200,120,.10), transparent 60%);
  filter: blur(40px); z-index: 0; pointer-events: none; }

/***** Lists *****/
.kp-list { list-style: none; padding: 0; margin: 0; }
.kp-list li { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: flex-start; margin: .45rem 0; }
.kp-list .dot { width: 12px; height: 12px; margin-top: .45rem; border-radius: 50%; background: var(--gem-emerald); box-shadow: 0 0 0 4px rgba(80,200,120,.12); }

/***** Pricing *****/
.kp-price { font-size: clamp(36px, 5vw, 54px); font-weight: 800; }
.kp-price .unit { font-size: .45em; color: var(--kp-slate); font-weight: 600; }

/***** Utility spacing *****/
.kp-stack > * + * { margin-top: clamp(12px, 2.2vw, 22px); }
.kp-grid { display: grid; gap: clamp(16px, 2.2vw, 28px); }
.kp-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .kp-grid--3 { grid-template-columns: 1fr; } }

/***** Section head styling *****/
.kp-section-head { display: grid; gap: .6rem; align-items: start; }
.kp-section-head .title { font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--kp-ink); }
.kp-section-head .subtitle { color: var(--kp-slate); }

/***** Badges *****/
.kp-badge-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.kp-badge { border-radius: 999px; border:1px solid var(--kp-mist); padding:.5rem .9rem; background:#fff; font-weight:700; }
.kp-badge--blue { color: var(--gem-sapphire); }
.kp-badge--green { color: var(--gem-emerald); }
.kp-badge--purple { color: var(--gem-amethyst); }

/* Make sure all main sections breathe on white */
.section, .shopify-section { background:#fff; }
```

---

## 3) Home Template (Horizon) — Section Structure & Content

Use Horizon’s built-in sections and copy the settings content below. You’ll create a strong **flashy on white** aesthetic without heavy images.

### A) Hero (use Horizon’s "Image banner" or "Rich text" section)

* **Heading**: `Kingdom Pure`
* **Subheading**: `Luxury Cleaning Service`
* **Description**:

  > Experience hotel-level sparkle in your home, delivered with white-glove care and gemstone-worthy finishes.
* **Buttons**:

  * Primary: `Get a Quote` → link to `/pages/book` — add class `kp-btn kp-btn--primary`
  * Secondary: `See Packages` → link to `#packages` — add class `kp-btn kp-btn--outline`
* **Image**: optional light, airy photo; or none. Turn on **white** background.
* **Custom HTML (optional)**: add a `div.kp-hero-glow` inside the section container for subtle color glow:

  ```html
  <div class="kp-hero-wrap">
    <div class="kp-hero-glow"></div>
  </div>
  ```

### B) Trust Badges (Use "Custom liquid")

```liquid
<div class="kp-badge-row">
  <div class="kp-badge kp-badge--blue">Insured</div>
  <div class="kp-badge kp-badge--green">Eco-Safe</div>
  <div class="kp-badge kp-badge--purple">5-Star Rated</div>
  <div class="kp-badge kp-badge--blue">Checked Pros</div>
</div>
```

### C) Services Grid (Use "Multicolumn")

* **Heading**: `Premium Cleaning, Tailored to You`
* **Intro**: short subtitle using gemstone chips:

  ```html
  <span class="kp-chip kp-chip--royal">Residences</span>
  <span class="kp-chip kp-chip--eden">Luxury Rentals</span>
  <span class="kp-chip kp-chip--aurum">Commercial Suites</span>
  ```
* **Columns (example 6)**:

  1. **Deep Clean Revive** — One-time full reset that makes surfaces gleam.
  2. **Weekly Signature Clean** — Consistent, hotel-level polish.
  3. **Move-In Brilliance** — From empty to immaculate.
  4. **Post-Construction Shine** — Dust-free, photo-ready.
  5. **Luxury Rental Turnover** — Fast, flawless, guest-wow.
  6. **Office & Showroom** — White-glove commercial care.

### D) Why Kingdom Pure (Use "Rich text" or "Image with text")

```html
<div class="kp-section-head">
  <div class="kp-eyebrow">Why Choose Us</div>
  <div class="title">Gemstone-Level Standards</div>
  <div class="kp-divider"></div>
  <p class="subtitle">We finish with precision and pride—quiet, careful, meticulous.</p>
</div>
<ul class="kp-list">
  <li><span class="dot"></span><div>Hotel-style bed turns & towel presentation.</div></li>
  <li><span class="dot"></span><div>Non-toxic, surface-safe products with luxury scent profiles.</div></li>
  <li><span class="dot"></span><div>Photo & checklist upon completion for peace of mind.</div></li>
</ul>
```

### E) Packages (Use "Featured collection" or "Rich text" with cards) {#packages}

If you don’t have products yet, showcase **service tiers** as cards with the class `kp-card`.

```liquid
<div class="kp-grid kp-grid--3">
  <div class="kp-card">
    <div class="kp-chip kp-chip--eden">Emerald — Essentials</div>
    <h3>Weekly Signature</h3>
    <div class="kp-price">$149<span class="unit">/visit</span></div>
    <ul class="kp-list">
      <li><span class="dot"></span><div>Kitchen & baths detailed</div></li>
      <li><span class="dot"></span><div>Dusting & floors perfected</div></li>
      <li><span class="dot"></span><div>Hotel bed turn</div></li>
    </ul>
    <a href="/pages/book" class="kp-btn kp-btn--secondary">Book Emerald</a>
  </div>
  <div class="kp-card kp-card--glass" style="border-color: transparent;">
    <div class="kp-chip kp-chip--royal">Sapphire — Most Popular</div>
    <h3>Deep Clean Revive</h3>
    <div class="kp-price">$329<span class="unit">/visit</span></div>
    <ul class="kp-list">
      <li><span class="dot"></span><div>Appliance exteriors & baseboards</div></li>
      <li><span class="dot"></span><div>Shower glass & tile polish</div></li>
      <li><span class="dot"></span><div>Detail dusting & vents</div></li>
    </ul>
    <a href="/pages/book" class="kp-btn kp-btn--primary">Book Sapphire</a>
  </div>
  <div class="kp-card">
    <div class="kp-chip kp-chip--aurum">Topaz — Premium</div>
    <h3>Move-In Brilliance</h3>
    <div class="kp-price">$499<span class="unit">/job</span></div>
    <ul class="kp-list">
      <li><span class="dot"></span><div>Inside cabinets & fridge</div></li>
      <li><span class="dot"></span><div>Detail walls, doors, trim</div></li>
      <li><span class="dot"></span><div>Window interiors (basic)</div></li>
    </ul>
    <a href="/pages/book" class="kp-btn kp-btn--outline">Book Topaz</a>
  </div>
</div>
```

### F) Social Proof (Use "Testimonials")

* **Title**: `Reviews that Sparkle`
* Aim for short, punchy 1–2 line quotes.

### G) CTA Banner (Use "Custom liquid")

```liquid
<section class="kp-card kp-cta" style="text-align:center; padding: 42px;">
  <div class="kp-eyebrow">Ready for Brilliance?</div>
  <h2 class="kp-display" style="margin: 10px 0 14px;">Book Your First Luxury Clean</h2>
  <p class="kp-subtitle">We’ll tailor a gemstone-tier package for your space.</p>
  <div style="margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;">
    <a class="kp-btn kp-btn--primary" href="/pages/book">Get a Quote</a>
    <a class="kp-btn kp-btn--secondary" href="/pages/contact">Talk to a Specialist</a>
  </div>
</section>
```

### H) Footer

* Keep minimal: links to Services, Pricing, Contact, FAQs, Policies.
* Use **accent divider** `kp-divider kp-divider--eden` above newsletter.

---

## 4) Optional: Custom Sections (Drop-in)

If you want **bespoke** sections beyond Horizon’s defaults, add the following Liquid sections.

### File: `sections/kp-hero-gem.liquid`

```liquid
{% schema %}
{
  "name": "KP — Hero Gem",
  "settings": [
    {"type":"text","id":"eyebrow","label":"Eyebrow","default":"Luxury Cleaning Service"},
    {"type":"text","id":"title","label":"Title","default":"Kingdom Pure"},
    {"type":"text","id":"subtitle","label":"Subtitle","default":"Hotel-level sparkle on a white backdrop"},
    {"type":"url","id":"primary_link","label":"Primary Button Link"},
    {"type":"text","id":"primary_label","label":"Primary Button Label","default":"Get a Quote"},
    {"type":"url","id":"secondary_link","label":"Secondary Button Link"},
    {"type":"text","id":"secondary_label","label":"Secondary Button Label","default":"See Packages"}
  ],
  "blocks": [],
  "presets": [{"name":"KP — Hero Gem"}]
}
{% endschema %}

<section class="kp-hero-wrap" style="position:relative; padding: clamp(48px, 8vw, 120px) 0;">
  <div class="kp-hero-glow"></div>
  <div class="page-width">
    <div class="kp-stack" style="max-width: 920px;">
      <div class="kp-eyebrow">{{ section.settings.eyebrow }}</div>
      <h1 class="kp-display">{{ section.settings.title }}</h1>
      <p class="kp-subtitle">{{ section.settings.subtitle }}</p>
      <div style="display:flex; gap:12px; flex-wrap:wrap;">
        {% if section.settings.primary_label and section.settings.primary_link %}
          <a class="kp-btn kp-btn--primary" href="{{ section.settings.primary_link }}">{{ section.settings.primary_label }}</a>
        {% endif %}
        {% if section.settings.secondary_label and section.settings.secondary_link %}
          <a class="kp-btn kp-btn--outline" href="{{ section.settings.secondary_link }}">{{ section.settings.secondary_label }}</a>
        {% endif %}
      </div>
    </div>
  </div>
</section>
```

### File: `sections/kp-services-gems.liquid`

```liquid
{% schema %}
{
  "name": "KP — Services Gems",
  "max_blocks": 8,
  "settings": [
    {"type":"text","id":"title","label":"Heading","default":"Premium Cleaning, Tailored to You"},
    {"type":"richtext","id":"intro","label":"Intro HTML","default":"<span class=\"kp-chip kp-chip--royal\">Residences</span> <span class=\"kp-chip kp-chip--eden\">Luxury Rentals</span> <span class=\"kp-chip kp-chip--aurum\">Commercial Suites</span>"}
  ],
  "blocks": [
    {"type":"service","name":"Service","settings":[
      {"type":"text","id":"name","label":"Service name","default":"Deep Clean Revive"},
      {"type":"textarea","id":"desc","label":"Description","default":"One-time full reset that makes surfaces gleam."},
      {"type":"url","id":"link","label":"Button link"},
      {"type":"text","id":"label","label":"Button label","default":"Book Now"}
    ]}
  ],
  "presets": [{"name":"KP — Services Gems","blocks": [{"type":"service"},{"type":"service"},{"type":"service"}]}]
}
{% endschema %}

<section class="section" style="padding: clamp(36px, 6vw, 80px) 0;">
  <div class="page-width kp-stack">
    <div class="kp-section-head">
      <div class="title">{{ section.settings.title }}</div>
      <div class="kp-divider"></div>
      <div class="subtitle">{{ section.settings.intro }}</div>
    </div>
    <div class="kp-grid kp-grid--3">
      {% for block in section.blocks %}
      <div class="kp-card">
        <h3 style="margin:0 0 8px;">{{ block.settings.name }}</h3>
        <p class="kp-subtitle" style="margin:0 0 14px;">{{ block.settings.desc }}</p>
        {% if block.settings.link %}
          <a class="kp-btn kp-btn--secondary" href="{{ block.settings.link }}">{{ block.settings.label }}</a>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
</section>
```

### File: `sections/kp-cta-gem.liquid`

```liquid
{% schema %}
{
  "name": "KP — CTA Gem",
  "settings": [
    {"type":"text","id":"eyebrow","label":"Eyebrow","default":"Ready for Brilliance?"},
    {"type":"text","id":"title","label":"Title","default":"Book Your First Luxury Clean"},
    {"type":"text","id":"subtitle","label":"Subtitle","default":"We’ll tailor a gemstone-tier package for your space."},
    {"type":"url","id":"primary_link","label":"Primary Button Link"},
    {"type":"text","id":"primary_label","label":"Primary Button Label","default":"Get a Quote"},
    {"type":"url","id":"secondary_link","label":"Secondary Button Link"},
    {"type":"text","id":"secondary_label","label":"Secondary Button Label","default":"Talk to a Specialist"}
  ],
  "presets": [{"name":"KP — CTA Gem"}]
}
{% endschema %}

<section class="page-width">
  <div class="kp-card" style="text-align:center; padding: clamp(28px, 4vw, 48px);">
    <div class="kp-eyebrow">{{ section.settings.eyebrow }}</div>
    <h2 class="kp-display" style="margin: 10px 0 14px;">{{ section.settings.title }}</h2>
    <p class="kp-subtitle">{{ section.settings.subtitle }}</p>
    <div style="margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;">
      {% if section.settings.primary_link %}
      <a class="kp-btn kp-btn--primary" href="{{ section.settings.primary_link }}">{{ section.settings.primary_label }}</a>
      {% endif %}
      {% if section.settings.secondary_link %}
      <a class="kp-btn kp-btn--secondary" href="{{ section.settings.secondary_link }}">{{ section.settings.secondary_label }}</a>
      {% endif %}
    </div>
  </div>
</section>
```

---

## 5) Navigation & Pages

Create these pages to complete the flow:

* **/pages/book** — Embed a scheduling or quote form (e.g., contact form + fields for number of rooms, bathrooms, sqft, preferred date/time). Use the `kp-card` class around the form.
* **/pages/services** — Use `kp-services-gems` section and expand each service detail.
* **/pages/contact** — Simple form; add `kp-badge` items (Insured, Eco-Safe, 5‑Star Rated).

---

## 6) Quick Brand Checklist

* Logo wordmark: bold serif or modern sans in **sapphire**; small emerald underline.
* Icons & lines: **mist** strokes with **emerald/sapphire** accents.
* Photography: bright whites, reflective surfaces, pops of green/blue towels or florals.
* Keep whitespace generous; let the **color live in accents**.

---

## 7) Fast Install Summary

1. Add `assets/kingdom-pure.css` (paste full CSS above) and include it in `theme.liquid`.
2. Build the homepage with Horizon sections using the content snippets provided.
3. (Optional) Add the three custom sections for a super-polished look: `kp-hero-gem`, `kp-services-gems`, `kp-cta-gem`.
4. Keep the **background white** and rotate accents using **Royal / Eden / Aurum** gradients for that luxury pop.

---

Need me to tailor copy or set real package pricing for your market? I can draft it and wire it up to products/variants when you’re ready.