rebly-sections 1.3.0 → 1.4.0

package/assets/data/component-library/image-gallery.liquid

@@ -1,32 +1,66 @@
-{%- comment -%} rebly-sections: Image Gallery | Category: media | OS2.0 {%- endcomment -%}
+{%- comment -%} rebly-sections: Image Gallery | Category: media | OS2.0 | Masonry + scroll-reveal {%- endcomment -%}
+{%- assign font = section.settings.heading_font -%}
+{%- assign heading_tag = section.settings.heading_tag -%}
 
-<section id="section-{{ section.id }}" class="image-gallery">
-  <div class="image-gallery__container">
+{{ font | font_face: font_display: 'swap' }}
+
+<section id="section-{{ section.id }}" class="image-gallery color-{{ section.settings.color_scheme }}">
+  <div class="image-gallery__container" style="
+    --pt: {{ section.settings.padding_top }}px;
+    --pb: {{ section.settings.padding_bottom }}px;
+    --heading-size: {{ section.settings.heading_font_size }}px;
+    --heading-font: {{ font.family }}, {{ font.fallback_families }};
+    --heading-weight: {{ font.weight }};
+  ">
 
     {%- if section.settings.heading != blank -%}
-      <h2 class="image-gallery__heading">{{ section.settings.heading | escape }}</h2>
+      <{{ heading_tag }} class="image-gallery__heading">{{ section.settings.heading | escape }}</{{ heading_tag }}>
     {%- endif -%}
 
-    <div class="image-gallery__grid" style="--cols: {{ section.settings.columns }};">
+    <div class="image-gallery__grid">
       {%- for block in section.blocks -%}
         {%- if block.type == 'gallery-item' -%}
-          <div class="image-gallery__item" {{ block.shopify_attributes }}>
+          {%- comment -%} Alternate tall rows for masonry rhythm: every 3rd item is taller {%- endcomment -%}
+          {%- assign is_tall = forloop.index | modulo: 3 -%}
+          <div
+            class="image-gallery__item{% if is_tall == 0 %} image-gallery__item--tall{% endif %} gallery-reveal"
+            {{ block.shopify_attributes }}
+          >
             {%- if block.settings.image != blank -%}
-              {%- if section.settings.enable_lightbox -%}
-                <a
-                  href="{{ block.settings.image | image_url: width: 1600 }}"
-                  class="image-gallery__link"
-                  data-lightbox="gallery-{{ section.id }}"
-                  data-title="{{ block.settings.caption | escape }}"
+              {%- comment -%} Lightbox via :target — pure CSS, zero JS {%- endcomment -%}
+              <a href="#gallery-{{ section.id }}-{{ forloop.index }}" class="image-gallery__zoom-trigger" aria-label="Open image">
+                <img
+                  src="{{ block.settings.image | image_url: width: 800 }}"
+                  srcset="
+                    {{ block.settings.image | image_url: width: 400 }} 400w,
+                    {{ block.settings.image | image_url: width: 800 }} 800w,
+                    {{ block.settings.image | image_url: width: 1200 }} 1200w"
+                  sizes="(max-width: 749px) 100vw, (max-width: 989px) 50vw, 33vw"
+                  loading="lazy"
+                  alt="{{ block.settings.caption | default: block.settings.image.alt | escape }}"
+                  class="image-gallery__img"
+                  width="{{ block.settings.image.width }}"
+                  height="{{ block.settings.image.height }}"
+                >
+                <div class="image-gallery__hover-overlay" aria-hidden="true">
+                  <span class="image-gallery__zoom-icon">&#x2B2C;</span>
+                </div>
+              </a>
+              {%- comment -%} Lightbox overlay — triggered by :target selector {%- endcomment -%}
+              <div id="gallery-{{ section.id }}-{{ forloop.index }}" class="image-gallery__lightbox" role="dialog">
+                <a href="#" class="image-gallery__lightbox-close" aria-label="Close">&times;</a>
+                <img
+                  src="{{ block.settings.image | image_url: width: 1600 }}"
+                  loading="lazy"
+                  alt="{{ block.settings.caption | default: block.settings.image.alt | escape }}"
+                  class="image-gallery__lightbox-img"
                 >
-              {%- endif -%}
-              {{- block.settings.image | image_url: width: 600 | image_tag: loading: 'lazy', alt: block.settings.caption, class: 'image-gallery__img' -}}
-              {%- if section.settings.enable_lightbox -%}</a>{%- endif -%}
-              {%- if block.settings.caption != blank -%}
-                <p class="image-gallery__caption">{{ block.settings.caption | escape }}</p>
-              {%- endif -%}
+                {%- if block.settings.caption != blank -%}
+                  <p class="image-gallery__lightbox-caption">{{ block.settings.caption | escape }}</p>
+                {%- endif -%}
+              </div>
             {%- else -%}
-              {{ 'image' | placeholder_svg_tag: 'image-gallery__img' }}
+              {{ 'image' | placeholder_svg_tag: 'image-gallery__placeholder' }}
             {%- endif -%}
           </div>
         {%- endif -%}
@@ -37,26 +71,117 @@
 </section>
 
 <style>
-  #section-{{ section.id }} .image-gallery__container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
-  #section-{{ section.id }} .image-gallery__heading { font-size: 2rem; text-align: center; margin: 0 0 2rem; color: inherit; }
-  #section-{{ section.id }} .image-gallery__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1rem; }
-  #section-{{ section.id }} .image-gallery__item { position: relative; overflow: hidden; border-radius: 4px; }
-  #section-{{ section.id }} .image-gallery__img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform 0.3s; }
-  #section-{{ section.id }} .image-gallery__item:hover .image-gallery__img { transform: scale(1.04); }
-  #section-{{ section.id }} .image-gallery__link { display: block; overflow: hidden; }
-  #section-{{ section.id }} .image-gallery__caption { font-size: 0.85rem; opacity: 0.7; padding: 0.4rem 0; text-align: center; color: inherit; }
-  @media (max-width: 749px) { #section-{{ section.id }} .image-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
+  /* ── Layout ── */
+  #section-{{ section.id }} .image-gallery__container {
+    max-width: 1280px; margin: 0 auto;
+    padding: var(--pt, 64px) 2rem var(--pb, 64px);
+  }
+  #section-{{ section.id }} .image-gallery__heading {
+    font-family: var(--heading-font); font-weight: var(--heading-weight);
+    font-size: clamp(1.75rem, 3vw, var(--heading-size, 2.5rem));
+    text-align: center; margin: 0 0 2.5rem; color: rgb(var(--color-foreground));
+  }
+  /* ── CSS Grid masonry via grid-auto-rows ── */
+  #section-{{ section.id }} .image-gallery__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 260px;
+    gap: 0.875rem;
+  }
+  #section-{{ section.id }} .image-gallery__item { position: relative; overflow: hidden; border-radius: 6px; }
+  #section-{{ section.id }} .image-gallery__item--tall { grid-row: span 2; }
+  /* ── Image zoom on hover — GPU transform only ── */
+  #section-{{ section.id }} .image-gallery__img {
+    width: 100%; height: 100%; object-fit: cover; display: block;
+    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    will-change: transform;
+  }
+  #section-{{ section.id }} .image-gallery__item:hover .image-gallery__img { transform: scale(1.06); }
+  /* ── Hover overlay ── */
+  #section-{{ section.id }} .image-gallery__zoom-trigger { display: block; height: 100%; }
+  #section-{{ section.id }} .image-gallery__hover-overlay {
+    position: absolute; inset: 0; display: grid; place-items: center;
+    background: rgba(0,0,0,0.35); opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  #section-{{ section.id }} .image-gallery__item:hover .image-gallery__hover-overlay { opacity: 1; }
+  #section-{{ section.id }} .image-gallery__zoom-icon { font-size: 2rem; color: #fff; line-height: 1; }
+  /* ── CSS-only lightbox via :target ── */
+  #section-{{ section.id }} .image-gallery__lightbox {
+    position: fixed; inset: 0; z-index: 9999; display: none;
+    background: rgba(0,0,0,0.92); place-items: center;
+    flex-direction: column; gap: 1rem; padding: 2rem;
+  }
+  #section-{{ section.id }} .image-gallery__lightbox:target { display: flex; }
+  #section-{{ section.id }} .image-gallery__lightbox-close {
+    position: absolute; top: 1rem; right: 1.5rem; color: #fff;
+    font-size: 2.5rem; text-decoration: none; line-height: 1;
+  }
+  #section-{{ section.id }} .image-gallery__lightbox-img {
+    max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 4px;
+  }
+  #section-{{ section.id }} .image-gallery__lightbox-caption { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
+  #section-{{ section.id }} .image-gallery__placeholder { width: 100%; height: 100%; }
+  /* ── Scroll-reveal — starts hidden, JS adds .is-visible ── */
+  #section-{{ section.id }} .gallery-reveal {
+    opacity: 0; transform: translateY(32px);
+    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  #section-{{ section.id }} .gallery-reveal.is-visible { opacity: 1; transform: translateY(0); }
+  /* ── Reduced motion ── */
+  @media (prefers-reduced-motion: reduce) {
+    #section-{{ section.id }} .gallery-reveal { opacity: 1; transform: none; transition: none; }
+    #section-{{ section.id }} .image-gallery__img { transition: none; }
+    #section-{{ section.id }} .image-gallery__hover-overlay { transition: none; }
+  }
+  /* ── Responsive breakpoints ── */
+  @media (max-width: 989px) {
+    #section-{{ section.id }} .image-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
+  }
+  @media (max-width: 749px) {
+    #section-{{ section.id }} .image-gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
+    #section-{{ section.id }} .image-gallery__item--tall { grid-row: span 1; }
+  }
 </style>
 
+<script>
+/* Stagger scroll-reveal via Intersection Observer */
+(function() {
+  var items = document.querySelectorAll('#section-{{ section.id }} .gallery-reveal');
+  if (!items.length) return;
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    items.forEach(function(el) { el.classList.add('is-visible'); });
+    return;
+  }
+  var observer = new IntersectionObserver(function(entries) {
+    entries.forEach(function(entry, i) {
+      if (entry.isIntersecting) {
+        /* Stagger each item by 80ms */
+        setTimeout(function() { entry.target.classList.add('is-visible'); }, i * 80);
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.12 });
+  items.forEach(function(el) { observer.observe(el); });
+})();
+</script>
+
 {% schema %}
 {
   "name": "Image Gallery",
   "tag": "section",
   "class": "section-image-gallery",
   "settings": [
-    { "type": "text", "id": "heading", "label": "Heading" },
-    { "type": "range", "id": "columns", "label": "Columns", "min": 2, "max": 5, "step": 1, "default": 3 },
-    { "type": "checkbox", "id": "enable_lightbox", "label": "Enable Lightbox Links", "default": false }
+    { "type": "color_scheme", "id": "color_scheme", "label": "Color Scheme", "default": "scheme-1" },
+    { "type": "font_picker", "id": "heading_font", "label": "Heading Font", "default": "helvetica_n4" },
+    { "type": "range", "id": "heading_font_size", "label": "Heading Size (px)", "min": 20, "max": 56, "step": 2, "default": 40 },
+    { "type": "select", "id": "heading_tag", "label": "Heading Tag", "options": [
+      { "value": "h1", "label": "H1" }, { "value": "h2", "label": "H2" },
+      { "value": "h3", "label": "H3" }, { "value": "h4", "label": "H4" }
+    ], "default": "h2" },
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Our Gallery" },
+    { "type": "range", "id": "padding_top", "label": "Padding Top (px)", "min": 0, "max": 120, "step": 8, "default": 64 },
+    { "type": "range", "id": "padding_bottom", "label": "Padding Bottom (px)", "min": 0, "max": 120, "step": 8, "default": 64 }
   ],
   "blocks": [
     {
@@ -71,7 +196,10 @@
   ],
   "presets": [{
     "name": "Image Gallery",
-    "blocks": [{ "type": "gallery-item" }, { "type": "gallery-item" }, { "type": "gallery-item" }, { "type": "gallery-item" }, { "type": "gallery-item" }, { "type": "gallery-item" }]
+    "blocks": [
+      { "type": "gallery-item" }, { "type": "gallery-item" }, { "type": "gallery-item" },
+      { "type": "gallery-item" }, { "type": "gallery-item" }, { "type": "gallery-item" }
+    ]
   }]
 }
 {% endschema %}

package/assets/data/component-library/pricing-table.liquid

@@ -1,44 +1,90 @@
-{%- comment -%} rebly-sections: Pricing Table | Category: conversion | OS2.0 {%- endcomment -%}
+{%- comment -%} rebly-sections: Pricing Table | Category: conversion | OS2.0 | Toggle + animations {%- endcomment -%}
+{%- assign font = section.settings.heading_font -%}
+{%- assign heading_tag = section.settings.heading_tag -%}
 
-<section id="section-{{ section.id }}" class="pricing-table">
-  <div class="pricing-table__container">
+{{ font | font_face: font_display: 'swap' }}
 
-    {%- if section.settings.heading != blank or section.settings.subheading != blank -%}
-      <div class="pricing-table__header">
-        {%- if section.settings.heading != blank -%}
-          <h2 class="pricing-table__heading">{{ section.settings.heading | escape }}</h2>
-        {%- endif -%}
-        {%- if section.settings.subheading != blank -%}
-          <p class="pricing-table__subheading">{{ section.settings.subheading | escape }}</p>
-        {%- endif -%}
-      </div>
-    {%- endif -%}
+<section id="section-{{ section.id }}" class="pricing-table color-{{ section.settings.color_scheme }}">
+  <div class="pricing-table__container" style="
+    --pt: {{ section.settings.padding_top }}px;
+    --pb: {{ section.settings.padding_bottom }}px;
+    --heading-size: {{ section.settings.heading_font_size }}px;
+    --heading-font: {{ font.family }}, {{ font.fallback_families }};
+    --heading-weight: {{ font.weight }};
+  ">
+
+    <div class="pricing-table__header">
+      {%- if section.settings.heading != blank -%}
+        <{{ heading_tag }} class="pricing-table__heading">{{ section.settings.heading | escape }}</{{ heading_tag }}>
+      {%- endif -%}
+      {%- if section.settings.subheading != blank -%}
+        <p class="pricing-table__subheading">{{ section.settings.subheading | escape }}</p>
+      {%- endif -%}
+
+      {%- comment -%} CSS-only monthly/annual toggle via checkbox + label {%- endcomment -%}
+      {%- if section.settings.show_toggle -%}
+        <div class="pricing-table__toggle-wrap">
+          <span class="pricing-table__toggle-label{% unless section.settings.default_annual %} is-active{% endunless %}">
+            {{ section.settings.label_monthly | default: 'Monthly' }}
+          </span>
+          <input type="checkbox" id="pt-toggle-{{ section.id }}" class="pricing-table__toggle-input"
+            {% if section.settings.default_annual %}checked{% endif %}>
+          <label for="pt-toggle-{{ section.id }}" class="pricing-table__toggle-pill" aria-label="Toggle billing period"></label>
+          <span class="pricing-table__toggle-label{% if section.settings.default_annual %} is-active{% endif %}">
+            {{ section.settings.label_annual | default: 'Annual' }}
+            <em class="pricing-table__toggle-badge">{{ section.settings.annual_badge | default: 'Save 20%' }}</em>
+          </span>
+        </div>
+      {%- endif -%}
+    </div>
 
     <div class="pricing-table__tiers">
       {%- for block in section.blocks -%}
         {%- if block.type == 'pricing-tier' -%}
-          <div class="pricing-table__tier{% if block.settings.highlighted %} pricing-table__tier--featured{% endif %}" {{ block.shopify_attributes }}>
+          <div class="pricing-table__tier pricing-reveal{% if block.settings.highlighted %} pricing-table__tier--featured{% endif %}"
+            {{ block.shopify_attributes }}>
+
+            {%- if block.settings.highlighted and section.settings.popular_badge != blank -%}
+              <div class="pricing-table__badge">{{ section.settings.popular_badge | escape }}</div>
+            {%- endif -%}
+
             {%- if block.settings.plan_name != blank -%}
               <h3 class="pricing-table__plan-name">{{ block.settings.plan_name | escape }}</h3>
             {%- endif -%}
+
+            {%- comment -%} Monthly / annual price swap controlled by CSS sibling selector on checkbox {%- endcomment -%}
             <div class="pricing-table__price-wrap">
-              <span class="pricing-table__price">{{ block.settings.price | escape }}</span>
+              <span class="pricing-table__price pricing-table__price--monthly">
+                {{ block.settings.price_monthly | default: block.settings.price | escape }}
+              </span>
+              <span class="pricing-table__price pricing-table__price--annual">
+                {{ block.settings.price_annual | default: block.settings.price | escape }}
+              </span>
               {%- if block.settings.period != blank -%}
                 <span class="pricing-table__period">/ {{ block.settings.period | escape }}</span>
               {%- endif -%}
             </div>
+
+            {%- if block.settings.description != blank -%}
+              <p class="pricing-table__desc">{{ block.settings.description | escape }}</p>
+            {%- endif -%}
+
             {%- if block.settings.features != blank -%}
               <ul class="pricing-table__features">
                 {%- assign feature_list = block.settings.features | split: "\n" -%}
                 {%- for feature in feature_list -%}
                   {%- if feature != blank -%}
-                    <li>{{ feature | escape }}</li>
+                    <li class="pricing-table__feature-item">
+                      <span class="pricing-table__check" aria-hidden="true">&#10003;</span>
+                      {{ feature | escape }}
+                    </li>
                   {%- endif -%}
                 {%- endfor -%}
               </ul>
             {%- endif -%}
+
             {%- if block.settings.button_label != blank -%}
-              <a href="{{ block.settings.button_link }}" class="pricing-table__btn">
+              <a href="{{ block.settings.button_link }}" class="pricing-table__btn{% if block.settings.highlighted %} pricing-table__btn--featured{% endif %}">
                 {{ block.settings.button_label | escape }}
               </a>
             {%- endif -%}
@@ -51,44 +97,186 @@
 </section>
 
 <style>
-  #section-{{ section.id }} .pricing-table__container { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; }
+  /* ── Layout ── */
+  #section-{{ section.id }} .pricing-table__container {
+    max-width: 1100px; margin: 0 auto;
+    padding: var(--pt, 80px) 2rem var(--pb, 80px);
+  }
   #section-{{ section.id }} .pricing-table__header { text-align: center; margin-bottom: 3rem; }
-  #section-{{ section.id }} .pricing-table__heading { font-size: 2rem; margin: 0 0 0.75rem; color: inherit; }
-  #section-{{ section.id }} .pricing-table__subheading { opacity: 0.7; margin: 0; color: inherit; }
-  #section-{{ section.id }} .pricing-table__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; align-items: start; }
-  #section-{{ section.id }} .pricing-table__tier { border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; padding: 2rem; }
-  #section-{{ section.id }} .pricing-table__tier--featured { border-color: #000; border-width: 2px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
-  #section-{{ section.id }} .pricing-table__plan-name { font-size: 1.25rem; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: inherit; }
-  #section-{{ section.id }} .pricing-table__price-wrap { margin-bottom: 1.5rem; }
-  #section-{{ section.id }} .pricing-table__price { font-size: 2.5rem; font-weight: 700; color: inherit; }
-  #section-{{ section.id }} .pricing-table__period { opacity: 0.6; color: inherit; }
+  #section-{{ section.id }} .pricing-table__heading {
+    font-family: var(--heading-font); font-weight: var(--heading-weight);
+    font-size: clamp(1.75rem, 3vw, var(--heading-size, 2.5rem));
+    margin: 0 0 0.75rem; color: rgb(var(--color-foreground));
+  }
+  #section-{{ section.id }} .pricing-table__subheading {
+    opacity: 0.7; margin: 0 0 1.5rem; color: rgb(var(--color-foreground));
+  }
+  /* ── CSS-only toggle ── */
+  #section-{{ section.id }} .pricing-table__toggle-input { display: none; }
+  #section-{{ section.id }} .pricing-table__toggle-wrap {
+    display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem;
+  }
+  #section-{{ section.id }} .pricing-table__toggle-label { font-size: 0.9rem; opacity: 0.65; }
+  #section-{{ section.id }} .pricing-table__toggle-label.is-active { opacity: 1; font-weight: 600; }
+  #section-{{ section.id }} .pricing-table__toggle-pill {
+    display: inline-block; width: 48px; height: 26px; border-radius: 13px;
+    background: rgb(var(--color-button)); cursor: pointer; position: relative;
+    transition: background 0.3s;
+  }
+  #section-{{ section.id }} .pricing-table__toggle-pill::after {
+    content: ''; position: absolute; top: 3px; left: 3px;
+    width: 20px; height: 20px; border-radius: 50%; background: #fff;
+    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
+  }
+  #section-{{ section.id }} .pricing-table__toggle-input:checked ~ .pricing-table__tiers .pricing-table__toggle-pill::after { transform: translateX(22px); }
+  /* Price visibility controlled by checkbox state via general sibling */
+  #section-{{ section.id }} .pricing-table__price--annual { display: none; }
+  #section-{{ section.id }} .pricing-table__toggle-input:checked ~ .pricing-table__tiers .pricing-table__price--monthly { display: none; }
+  #section-{{ section.id }} .pricing-table__toggle-input:checked ~ .pricing-table__tiers .pricing-table__price--annual { display: inline; }
+  #section-{{ section.id }} .pricing-table__toggle-badge {
+    display: inline-block; font-size: 0.7rem; font-style: normal; font-weight: 600;
+    background: rgb(var(--color-button)); color: rgb(var(--color-button-text));
+    padding: 0.15em 0.5em; border-radius: 20px; margin-left: 0.35rem; vertical-align: middle;
+  }
+  /* ── Cards ── */
+  #section-{{ section.id }} .pricing-table__tiers {
+    display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+    gap: 1.5rem; align-items: start;
+  }
+  #section-{{ section.id }} .pricing-table__tier {
+    border: 1px solid rgba(var(--color-foreground), 0.12); border-radius: 12px;
+    padding: 2rem; position: relative; background: rgb(var(--color-background));
+    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
+    will-change: transform;
+  }
+  #section-{{ section.id }} .pricing-table__tier:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 16px 48px rgba(var(--color-foreground), 0.12);
+  }
+  /* ── Featured card with pulse-glow ── */
+  #section-{{ section.id }} .pricing-table__tier--featured {
+    border-color: rgb(var(--color-button)); border-width: 2px;
+    box-shadow: 0 8px 32px rgba(var(--color-button), 0.2);
+    animation: pricingGlow 3s ease-in-out infinite;
+  }
+  @keyframes pricingGlow {
+    0%, 100% { box-shadow: 0 8px 32px rgba(var(--color-button), 0.2); }
+    50% { box-shadow: 0 8px 48px rgba(var(--color-button), 0.45); }
+  }
+  #section-{{ section.id }} .pricing-table__badge {
+    position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
+    background: rgb(var(--color-button)); color: rgb(var(--color-button-text));
+    font-size: 0.75rem; font-weight: 700; padding: 0.25em 1em; border-radius: 20px;
+    white-space: nowrap; letter-spacing: 0.05em;
+  }
+  #section-{{ section.id }} .pricing-table__plan-name {
+    font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
+    color: rgb(var(--color-foreground)); margin: 0 0 1rem; opacity: 0.65;
+  }
+  #section-{{ section.id }} .pricing-table__price-wrap { margin-bottom: 0.5rem; }
+  #section-{{ section.id }} .pricing-table__price {
+    font-size: 3rem; font-weight: 800; line-height: 1; color: rgb(var(--color-foreground));
+  }
+  #section-{{ section.id }} .pricing-table__period { opacity: 0.55; color: rgb(var(--color-foreground)); font-size: 0.9rem; }
+  #section-{{ section.id }} .pricing-table__desc { font-size: 0.9rem; opacity: 0.65; margin: 0.5rem 0 1.25rem; color: rgb(var(--color-foreground)); }
   #section-{{ section.id }} .pricing-table__features { list-style: none; margin: 0 0 2rem; padding: 0; }
-  #section-{{ section.id }} .pricing-table__features li { padding: 0.4rem 0; border-bottom: 1px solid rgba(0,0,0,0.07); font-size: 0.95rem; color: inherit; }
-  #section-{{ section.id }} .pricing-table__btn { display: block; text-align: center; padding: 0.85rem 1.5rem; background: #000; color: #fff; text-decoration: none; border-radius: 4px; font-weight: 600; }
-  #section-{{ section.id }} .pricing-table__tier--featured .pricing-table__btn { background: #000; }
+  #section-{{ section.id }} .pricing-table__feature-item {
+    display: flex; align-items: flex-start; gap: 0.5rem;
+    padding: 0.45rem 0; border-bottom: 1px solid rgba(var(--color-foreground), 0.07);
+    font-size: 0.9375rem; color: rgb(var(--color-foreground));
+  }
+  #section-{{ section.id }} .pricing-table__check { color: rgb(var(--color-button)); flex-shrink: 0; }
+  #section-{{ section.id }} .pricing-table__btn {
+    display: block; text-align: center; padding: 0.875rem 1.5rem; border-radius: 6px;
+    font-weight: 600; text-decoration: none; font-size: 0.9375rem;
+    border: 2px solid rgb(var(--color-foreground)); color: rgb(var(--color-foreground));
+    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
+  }
+  #section-{{ section.id }} .pricing-table__btn:hover { transform: translateY(-2px); background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); }
+  #section-{{ section.id }} .pricing-table__btn--featured {
+    background: rgb(var(--color-button)); color: rgb(var(--color-button-text)); border-color: transparent;
+  }
+  #section-{{ section.id }} .pricing-table__btn--featured:hover { background: rgb(var(--color-button)); opacity: 0.88; }
+  /* ── Scroll-reveal ── */
+  #section-{{ section.id }} .pricing-reveal {
+    opacity: 0; transform: translateY(28px);
+    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
+  }
+  #section-{{ section.id }} .pricing-reveal.is-visible { opacity: 1; transform: translateY(0); }
+  /* ── Reduced motion ── */
+  @media (prefers-reduced-motion: reduce) {
+    #section-{{ section.id }} .pricing-reveal { opacity: 1; transform: none; transition: none; }
+    #section-{{ section.id }} .pricing-table__tier { transition: none; }
+    #section-{{ section.id }} .pricing-table__tier--featured { animation: none; }
+  }
+  /* ── Responsive ── */
+  @media (max-width: 749px) {
+    #section-{{ section.id }} .pricing-table__tiers { grid-template-columns: 1fr; }
+  }
+  @media (min-width: 750px) and (max-width: 989px) {
+    #section-{{ section.id }} .pricing-table__tiers { grid-template-columns: repeat(2, 1fr); }
+  }
 </style>
 
+<script>
+/* Stagger entrance on scroll */
+(function() {
+  var items = document.querySelectorAll('#section-{{ section.id }} .pricing-reveal');
+  if (!items.length) return;
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    items.forEach(function(el) { el.classList.add('is-visible'); });
+    return;
+  }
+  var observer = new IntersectionObserver(function(entries) {
+    entries.forEach(function(entry, i) {
+      if (entry.isIntersecting) {
+        setTimeout(function() { entry.target.classList.add('is-visible'); }, i * 100);
+        observer.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.1 });
+  items.forEach(function(el) { observer.observe(el); });
+})();
+</script>
+
 {% schema %}
 {
   "name": "Pricing Table",
   "tag": "section",
   "class": "section-pricing-table",
   "settings": [
+    { "type": "color_scheme", "id": "color_scheme", "label": "Color Scheme", "default": "scheme-1" },
+    { "type": "font_picker", "id": "heading_font", "label": "Heading Font", "default": "helvetica_n4" },
+    { "type": "range", "id": "heading_font_size", "label": "Heading Size (px)", "min": 20, "max": 56, "step": 2, "default": 40 },
+    { "type": "select", "id": "heading_tag", "label": "Heading Tag", "options": [
+      { "value": "h1", "label": "H1" }, { "value": "h2", "label": "H2" },
+      { "value": "h3", "label": "H3" }, { "value": "h4", "label": "H4" }
+    ], "default": "h2" },
     { "type": "text", "id": "heading", "label": "Heading", "default": "Simple, Transparent Pricing" },
-    { "type": "text", "id": "subheading", "label": "Subheading" }
+    { "type": "text", "id": "subheading", "label": "Subheading", "default": "Choose the plan that works for you." },
+    { "type": "checkbox", "id": "show_toggle", "label": "Show Monthly/Annual Toggle", "default": true },
+    { "type": "text", "id": "label_monthly", "label": "Monthly Label", "default": "Monthly" },
+    { "type": "text", "id": "label_annual", "label": "Annual Label", "default": "Annual" },
+    { "type": "text", "id": "annual_badge", "label": "Annual Badge Text", "default": "Save 20%" },
+    { "type": "checkbox", "id": "default_annual", "label": "Default to Annual", "default": false },
+    { "type": "text", "id": "popular_badge", "label": "Popular Badge Text", "default": "Most Popular" },
+    { "type": "range", "id": "padding_top", "label": "Padding Top (px)", "min": 0, "max": 160, "step": 8, "default": 80 },
+    { "type": "range", "id": "padding_bottom", "label": "Padding Bottom (px)", "min": 0, "max": 160, "step": 8, "default": 80 }
   ],
   "blocks": [
     {
       "type": "pricing-tier",
       "name": "Pricing Tier",
       "settings": [
-        { "type": "text", "id": "plan_name", "label": "Plan Name", "default": "Basic" },
-        { "type": "text", "id": "price", "label": "Price", "default": "$9" },
-        { "type": "text", "id": "period", "label": "Period", "default": "month" },
-        { "type": "textarea", "id": "features", "label": "Features (one per line)", "default": "Feature one\nFeature two\nFeature three" },
+        { "type": "text", "id": "plan_name", "label": "Plan Name", "default": "Starter" },
+        { "type": "text", "id": "price_monthly", "label": "Monthly Price", "default": "$9" },
+        { "type": "text", "id": "price_annual", "label": "Annual Price", "default": "$7" },
+        { "type": "text", "id": "period", "label": "Period Label", "default": "mo" },
+        { "type": "text", "id": "description", "label": "Short Description", "default": "Perfect for individuals" },
+        { "type": "textarea", "id": "features", "label": "Features (one per line)", "default": "5 projects\n10 GB storage\nEmail support" },
         { "type": "text", "id": "button_label", "label": "Button Label", "default": "Get Started" },
         { "type": "url", "id": "button_link", "label": "Button Link" },
-        { "type": "checkbox", "id": "highlighted", "label": "Highlight this tier", "default": false }
+        { "type": "checkbox", "id": "highlighted", "label": "Highlight as Popular", "default": false }
       ]
     },
     { "type": "@app" }