{"id":194,"date":"2026-09-21T11:22:28","date_gmt":"2026-09-21T11:22:28","guid":{"rendered":"https:\/\/rubystep.us.cc\/?page_id=194"},"modified":"2026-09-21T11:55:29","modified_gmt":"2026-09-21T11:55:29","slug":"code-page","status":"publish","type":"page","link":"https:\/\/rubystep.us.cc\/?page_id=194","title":{"rendered":"Code page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"194\" class=\"elementor elementor-194\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4854e64 e-con e-atomic-element e-flexbox-base e-92809fe \" data-id=\"4854e64\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4854e64\">\n    \t\t<div class=\"elementor-element elementor-element-b528fa2 elementor-widget elementor-widget-html\" data-id=\"b528fa2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n\r\n  <!-- SEO -->\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <meta name=\"description\" content=\"RubyStep - Discover stylish shoes, heels, sneakers, sandals and premium footwear for women, men and students. Step with style and walk with confidence.\">\r\n  <meta name=\"keywords\" content=\"RubyStep, footwear, shoes, heels, women's shoes, men's shoes, sneakers, sandals, stylish footwear, premium footwear\">\r\n  <meta name=\"author\" content=\"RubyStep\">\r\n\r\n  <title>RubyStep | Stylish Shoes & Heels for Every Step<\/title>\r\n\r\n  <style>\r\n    \/* =========================\r\n       RESET\r\n    ========================= *\/\r\n    * {\r\n      margin: 0;\r\n      padding: 0;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    html {\r\n      scroll-behavior: smooth;\r\n    }\r\n\r\n    body {\r\n      font-family: Arial, Helvetica, sans-serif;\r\n      background: #ffffff;\r\n      color: #111111;\r\n      overflow-x: hidden;\r\n    }\r\n\r\n    a {\r\n      text-decoration: none;\r\n    }\r\n\r\n    \/* =========================\r\n       HERO SECTION\r\n    ========================= *\/\r\n\r\n    .ruby-hero {\r\n      position: relative;\r\n      min-height: 720px;\r\n      display: flex;\r\n      align-items: center;\r\n      overflow: hidden;\r\n      background:\r\n        linear-gradient(\r\n          115deg,\r\n          #0b0b0b 0%,\r\n          #111111 48%,\r\n          #1b1b1b 100%\r\n        );\r\n      color: #ffffff;\r\n    }\r\n\r\n    \/* Decorative background circle *\/\r\n    .ruby-hero::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      width: 600px;\r\n      height: 600px;\r\n      border-radius: 50%;\r\n      right: -180px;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      background: rgba(177, 18, 38, 0.16);\r\n      filter: blur(2px);\r\n    }\r\n\r\n    .ruby-hero::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      width: 280px;\r\n      height: 280px;\r\n      border: 1px solid rgba(255,255,255,0.12);\r\n      border-radius: 50%;\r\n      right: 80px;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n    }\r\n\r\n    .hero-container {\r\n      width: min(1180px, 92%);\r\n      margin: auto;\r\n      display: grid;\r\n      grid-template-columns: 1.05fr 0.95fr;\r\n      align-items: center;\r\n      gap: 60px;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    \/* =========================\r\n       HERO CONTENT\r\n    ========================= *\/\r\n\r\n    .hero-content {\r\n      max-width: 620px;\r\n    }\r\n\r\n    .hero-label {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      margin-bottom: 22px;\r\n      padding: 9px 16px;\r\n      border: 1px solid rgba(255,255,255,0.18);\r\n      border-radius: 50px;\r\n      background: rgba(255,255,255,0.05);\r\n      color: #f0f0f0;\r\n      font-size: 13px;\r\n      font-weight: 600;\r\n      letter-spacing: 1.5px;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .hero-label span {\r\n      width: 7px;\r\n      height: 7px;\r\n      border-radius: 50%;\r\n      background: #b11226;\r\n      box-shadow: 0 0 12px rgba(177,18,38,0.8);\r\n    }\r\n\r\n    .hero-title {\r\n      font-size: clamp(48px, 6vw, 82px);\r\n      line-height: 0.98;\r\n      letter-spacing: -3px;\r\n      font-weight: 800;\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .hero-title .accent {\r\n      color: #b11226;\r\n    }\r\n\r\n    .hero-description {\r\n      max-width: 540px;\r\n      color: #c9c9c9;\r\n      font-size: 18px;\r\n      line-height: 1.7;\r\n      margin-bottom: 34px;\r\n    }\r\n\r\n    \/* =========================\r\n       BUTTONS\r\n    ========================= *\/\r\n\r\n    .hero-buttons {\r\n      display: flex;\r\n      align-items: center;\r\n      flex-wrap: wrap;\r\n      gap: 14px;\r\n    }\r\n\r\n    .hero-btn {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-height: 52px;\r\n      padding: 0 26px;\r\n      border-radius: 6px;\r\n      font-size: 15px;\r\n      font-weight: 700;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .primary-btn {\r\n      background: #b11226;\r\n      color: #ffffff;\r\n      border: 1px solid #b11226;\r\n    }\r\n\r\n    .primary-btn:hover {\r\n      background: #ffffff;\r\n      color: #b11226;\r\n      transform: translateY(-3px);\r\n    }\r\n\r\n    .secondary-btn {\r\n      color: #ffffff;\r\n      border: 1px solid #555555;\r\n      background: transparent;\r\n    }\r\n\r\n    .secondary-btn:hover {\r\n      border-color: #ffffff;\r\n      background: #ffffff;\r\n      color: #111111;\r\n      transform: translateY(-3px);\r\n    }\r\n\r\n    \/* =========================\r\n       TRUST ITEMS\r\n    ========================= *\/\r\n\r\n    .hero-trust {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 25px;\r\n      margin-top: 42px;\r\n      padding-top: 24px;\r\n      border-top: 1px solid rgba(255,255,255,0.12);\r\n    }\r\n\r\n    .trust-item {\r\n      color: #bdbdbd;\r\n      font-size: 13px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n    }\r\n\r\n    .trust-item strong {\r\n      color: #ffffff;\r\n    }\r\n\r\n    .check {\r\n      color: #b11226;\r\n      font-size: 17px;\r\n      font-weight: bold;\r\n    }\r\n\r\n    \/* =========================\r\n       PRODUCT VISUAL\r\n    ========================= *\/\r\n\r\n    .hero-visual {\r\n      position: relative;\r\n      min-height: 500px;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    .shoe-card {\r\n      position: relative;\r\n      width: min(430px, 90%);\r\n      height: 470px;\r\n      border-radius: 220px 220px 30px 30px;\r\n      background:\r\n        linear-gradient(\r\n          145deg,\r\n          #242424,\r\n          #101010\r\n        );\r\n      border: 1px solid rgba(255,255,255,0.12);\r\n      box-shadow:\r\n        0 30px 80px rgba(0,0,0,0.55),\r\n        inset 0 1px 0 rgba(255,255,255,0.08);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      overflow: hidden;\r\n      transform: rotate(2deg);\r\n    }\r\n\r\n    .shoe-card::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      width: 330px;\r\n      height: 330px;\r\n      border-radius: 50%;\r\n      background: rgba(177,18,38,0.18);\r\n      filter: blur(40px);\r\n    }\r\n\r\n    \/* Replace this with your real product image *\/\r\n    .shoe-image {\r\n      position: relative;\r\n      z-index: 2;\r\n      width: 88%;\r\n      height: auto;\r\n      object-fit: contain;\r\n      filter:\r\n        drop-shadow(0 25px 25px rgba(0,0,0,0.7));\r\n    }\r\n\r\n    .visual-tag {\r\n      position: absolute;\r\n      z-index: 5;\r\n      background: #ffffff;\r\n      color: #111111;\r\n      padding: 14px 18px;\r\n      border-radius: 8px;\r\n      box-shadow: 0 15px 35px rgba(0,0,0,0.3);\r\n      font-size: 12px;\r\n      font-weight: 800;\r\n      letter-spacing: 1px;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .tag-top {\r\n      top: 45px;\r\n      left: -15px;\r\n    }\r\n\r\n    .tag-bottom {\r\n      right: -15px;\r\n      bottom: 45px;\r\n      background: #b11226;\r\n      color: #ffffff;\r\n    }\r\n\r\n    \/* =========================\r\n       MOBILE\r\n    ========================= *\/\r\n\r\n    @media (max-width: 900px) {\r\n\r\n      .ruby-hero {\r\n        min-height: auto;\r\n        padding: 80px 0;\r\n      }\r\n\r\n      .hero-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 55px;\r\n      }\r\n\r\n      .hero-content {\r\n        max-width: 700px;\r\n        text-align: center;\r\n        margin: auto;\r\n      }\r\n\r\n      .hero-buttons {\r\n        justify-content: center;\r\n      }\r\n\r\n      .hero-trust {\r\n        justify-content: center;\r\n      }\r\n\r\n      .hero-visual {\r\n        min-height: 430px;\r\n      }\r\n\r\n      .shoe-card {\r\n        height: 400px;\r\n      }\r\n\r\n      .tag-top {\r\n        left: 5px;\r\n      }\r\n\r\n      .tag-bottom {\r\n        right: 5px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n\r\n      .ruby-hero {\r\n        padding: 60px 0;\r\n      }\r\n\r\n      .hero-container {\r\n        width: 90%;\r\n      }\r\n\r\n      .hero-title {\r\n        font-size: clamp(42px, 13vw, 60px);\r\n        letter-spacing: -2px;\r\n      }\r\n\r\n      .hero-description {\r\n        font-size: 16px;\r\n        line-height: 1.6;\r\n      }\r\n\r\n      .hero-buttons {\r\n        flex-direction: column;\r\n        width: 100%;\r\n      }\r\n\r\n      .hero-btn {\r\n        width: 100%;\r\n      }\r\n\r\n      .hero-trust {\r\n        gap: 15px;\r\n        flex-direction: column;\r\n        align-items: center;\r\n      }\r\n\r\n      .hero-visual {\r\n        min-height: 350px;\r\n      }\r\n\r\n      .shoe-card {\r\n        width: 85%;\r\n        height: 350px;\r\n      }\r\n\r\n      .visual-tag {\r\n        font-size: 10px;\r\n        padding: 10px 12px;\r\n      }\r\n\r\n      .tag-top {\r\n        top: 25px;\r\n        left: -5px;\r\n      }\r\n\r\n      .tag-bottom {\r\n        right: -5px;\r\n        bottom: 25px;\r\n      }\r\n    }\r\n\r\n    \/* Accessibility *\/\r\n    @media (prefers-reduced-motion: reduce) {\r\n      * {\r\n        scroll-behavior: auto !important;\r\n        transition: none !important;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n  <!-- =========================\r\n       RUBYSTEP HERO SECTION\r\n  ========================== -->\r\n\r\n  <header class=\"ruby-hero\" id=\"home\">\r\n\r\n    <div class=\"hero-container\">\r\n\r\n      <!-- HERO TEXT -->\r\n      <div class=\"hero-content\">\r\n\r\n        <div class=\"hero-label\">\r\n          <span><\/span>\r\n          Premium Footwear Collection\r\n        <\/div>\r\n\r\n        <h1 class=\"hero-title\">\r\n          Step Into<br>\r\n          <span class=\"accent\">Your Style.<\/span>\r\n        <\/h1>\r\n\r\n        <p class=\"hero-description\">\r\n          Discover stylish shoes, elegant heels and everyday footwear\r\n          designed for comfort, confidence and effortless style.\r\n          From students to trendsetters \u2014 find the perfect pair for every step.\r\n        <\/p>\r\n\r\n        <div class=\"hero-buttons\">\r\n\r\n          <a\r\n            href=\"#collection\"\r\n            class=\"hero-btn primary-btn\"\r\n            aria-label=\"Explore RubyStep footwear collection\">\r\n            Explore Collection\r\n          <\/a>\r\n\r\n          <a\r\n            href=\"#heels\"\r\n            class=\"hero-btn secondary-btn\"\r\n            aria-label=\"Shop RubyStep heels\">\r\n            Shop Heels \u2192\r\n          <\/a>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"hero-trust\">\r\n\r\n          <div class=\"trust-item\">\r\n            <span class=\"check\">\u2713<\/span>\r\n            <span><strong>Premium<\/strong> Quality<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"trust-item\">\r\n            <span class=\"check\">\u2713<\/span>\r\n            <span><strong>Modern<\/strong> Designs<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"trust-item\">\r\n            <span class=\"check\">\u2713<\/span>\r\n            <span><strong>Everyday<\/strong> Comfort<\/span>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- PRODUCT VISUAL -->\r\n      <div class=\"hero-visual\">\r\n\r\n        <div class=\"shoe-card\">\r\n\r\n          <!--\r\n            IMPORTANT:\r\n            Replace this URL with your actual shoe\/heels image.\r\n\r\n            Example:\r\n            images\/rubystep-hero-heels.webp\r\n          -->\r\n\r\n          <img fetchpriority=\"high\" decoding=\"async\"\r\n            class=\"shoe-image\"\r\n            src=\"https:\/\/images.unsplash.com\/photo-1543163521-1bf539c55dd2?auto=format&fit=crop&w=900&q=85\"\r\n            alt=\"RubyStep elegant women's heels and premium footwear\"\r\n            loading=\"eager\"\r\n            fetchpriority=\"high\"\r\n            width=\"900\"\r\n            height=\"900\"\r\n          >\r\n\r\n          <div class=\"visual-tag tag-top\">\r\n            RubyStep\r\n          <\/div>\r\n\r\n          <div class=\"visual-tag tag-bottom\">\r\n            Walk With Confidence\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/header>\r\n\r\n\r\n  <!-- Example section targets -->\r\n  <section id=\"collection\"><\/section>\r\n  <section id=\"heels\"><\/section>\r\n\r\n\r\n  <script>\r\n    \/* =========================\r\n       RUBYSTEP HERO JAVASCRIPT\r\n    ========================== *\/\r\n\r\n    document.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n      const buttons = document.querySelectorAll(\".hero-btn\");\r\n\r\n      buttons.forEach(function (button) {\r\n\r\n        button.addEventListener(\"click\", function (event) {\r\n\r\n          const targetID = this.getAttribute(\"href\");\r\n\r\n          if (targetID && targetID.startsWith(\"#\")) {\r\n\r\n            const target = document.querySelector(targetID);\r\n\r\n            if (target) {\r\n              event.preventDefault();\r\n\r\n              target.scrollIntoView({\r\n                behavior: \"smooth\",\r\n                block: \"start\"\r\n              });\r\n            }\r\n\r\n          }\r\n\r\n        });\r\n\r\n      });\r\n\r\n    });\r\n  <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-11dddae e-con e-atomic-element e-flexbox-base e-e5fe257 \" data-id=\"11dddae\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"11dddae\">\n    \t\t<div class=\"elementor-element elementor-element-84578e7 elementor-widget elementor-widget-html\" data-id=\"84578e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n\r\n  <!-- SEO -->\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n  <title>RubyStep | Stylish Shoes & Heels for Every Step<\/title>\r\n\r\n  <meta\r\n    name=\"description\"\r\n    content=\"Discover RubyStep's stylish shoes, elegant heels and everyday footwear designed for comfort, confidence and modern fashion.\"\r\n  >\r\n\r\n  <meta\r\n    name=\"keywords\"\r\n    content=\"RubyStep, shoes, heels, footwear, women's shoes, sneakers, sandals, stylish footwear, student footwear, luxury shoes\"\r\n  >\r\n\r\n  <meta name=\"author\" content=\"RubyStep\">\r\n\r\n  <!-- Social SEO -->\r\n  <meta property=\"og:title\" content=\"RubyStep | Step Into Your Style\">\r\n  <meta\r\n    property=\"og:description\"\r\n    content=\"Stylish shoes and elegant heels designed for your everyday style.\"\r\n  >\r\n  <meta property=\"og:type\" content=\"website\">\r\n\r\n  <style>\r\n\r\n    \/* =========================================\r\n       RUBYSTEP \u2014 PASTEL LUXURY HERO\r\n       ========================================= *\/\r\n\r\n    * {\r\n      margin: 0;\r\n      padding: 0;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    html {\r\n      scroll-behavior: smooth;\r\n    }\r\n\r\n    body {\r\n      margin: 0;\r\n      font-family: Arial, Helvetica, sans-serif;\r\n      background: #f8f4f0;\r\n      color: #292522;\r\n      overflow-x: hidden;\r\n    }\r\n\r\n    a {\r\n      text-decoration: none;\r\n    }\r\n\r\n    \/* =========================================\r\n       HERO\r\n       ========================================= *\/\r\n\r\n    .rubystep-hero {\r\n      position: relative;\r\n      min-height: 760px;\r\n      display: flex;\r\n      align-items: center;\r\n      overflow: hidden;\r\n\r\n      background:\r\n        radial-gradient(\r\n          circle at 82% 35%,\r\n          rgba(225, 190, 194, 0.55),\r\n          transparent 28%\r\n        ),\r\n        radial-gradient(\r\n          circle at 10% 80%,\r\n          rgba(205, 218, 201, 0.45),\r\n          transparent 25%\r\n        ),\r\n        linear-gradient(\r\n          135deg,\r\n          #f8f4f0,\r\n          #f4e8e4 50%,\r\n          #f8f5ef\r\n        );\r\n    }\r\n\r\n    \/* Decorative organic shape *\/\r\n\r\n    .rubystep-hero::before {\r\n      content: \"\";\r\n      position: absolute;\r\n\r\n      width: 520px;\r\n      height: 520px;\r\n\r\n      right: -180px;\r\n      top: -120px;\r\n\r\n      border-radius: 48% 52% 60% 40%;\r\n\r\n      background: #ead1d4;\r\n\r\n      opacity: 0.55;\r\n\r\n      transform: rotate(25deg);\r\n    }\r\n\r\n    .rubystep-hero::after {\r\n      content: \"\";\r\n\r\n      position: absolute;\r\n\r\n      width: 250px;\r\n      height: 250px;\r\n\r\n      left: -90px;\r\n      bottom: -100px;\r\n\r\n      border-radius: 50%;\r\n\r\n      background: #dce6d7;\r\n\r\n      opacity: 0.7;\r\n    }\r\n\r\n    \/* =========================================\r\n       MAIN CONTAINER\r\n       ========================================= *\/\r\n\r\n    .rubystep-container {\r\n      position: relative;\r\n      z-index: 2;\r\n\r\n      width: min(1180px, 90%);\r\n\r\n      margin: auto;\r\n\r\n      display: grid;\r\n\r\n      grid-template-columns: 1fr 1fr;\r\n\r\n      align-items: center;\r\n\r\n      gap: 70px;\r\n    }\r\n\r\n    \/* =========================================\r\n       LEFT CONTENT\r\n       ========================================= *\/\r\n\r\n    .rubystep-content {\r\n      max-width: 570px;\r\n    }\r\n\r\n    \/* Small badge *\/\r\n\r\n    .rubystep-badge {\r\n      display: inline-flex;\r\n\r\n      align-items: center;\r\n\r\n      gap: 9px;\r\n\r\n      padding: 9px 16px;\r\n\r\n      margin-bottom: 24px;\r\n\r\n      border: 1px solid #d9c8c4;\r\n\r\n      border-radius: 100px;\r\n\r\n      background: rgba(255,255,255,0.55);\r\n\r\n      backdrop-filter: blur(10px);\r\n\r\n      color: #6d5d59;\r\n\r\n      font-size: 12px;\r\n\r\n      font-weight: 700;\r\n\r\n      letter-spacing: 1.5px;\r\n\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .rubystep-badge-dot {\r\n      width: 7px;\r\n      height: 7px;\r\n\r\n      border-radius: 50%;\r\n\r\n      background: #b96f78;\r\n\r\n      box-shadow:\r\n        0 0 0 5px rgba(185,111,120,0.12);\r\n    }\r\n\r\n    \/* =========================================\r\n       HEADING\r\n       ========================================= *\/\r\n\r\n    .rubystep-title {\r\n      margin: 0 0 25px;\r\n\r\n      font-family: Georgia, \"Times New Roman\", serif;\r\n\r\n      font-size: clamp(52px, 6vw, 86px);\r\n\r\n      font-weight: 400;\r\n\r\n      line-height: 0.98;\r\n\r\n      letter-spacing: -4px;\r\n\r\n      color: #302927;\r\n    }\r\n\r\n    .rubystep-title em {\r\n      color: #ad6871;\r\n\r\n      font-weight: 400;\r\n    }\r\n\r\n    .rubystep-title .line {\r\n      display: block;\r\n    }\r\n\r\n    \/* =========================================\r\n       DESCRIPTION\r\n       ========================================= *\/\r\n\r\n    .rubystep-description {\r\n      max-width: 520px;\r\n\r\n      margin-bottom: 32px;\r\n\r\n      color: #716864;\r\n\r\n      font-size: 17px;\r\n\r\n      line-height: 1.75;\r\n    }\r\n\r\n    \/* =========================================\r\n       BUTTONS\r\n       ========================================= *\/\r\n\r\n    .rubystep-actions {\r\n      display: flex;\r\n\r\n      align-items: center;\r\n\r\n      gap: 13px;\r\n\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .rubystep-btn {\r\n      min-height: 52px;\r\n\r\n      padding: 0 26px;\r\n\r\n      display: inline-flex;\r\n\r\n      align-items: center;\r\n\r\n      justify-content: center;\r\n\r\n      border-radius: 6px;\r\n\r\n      font-size: 14px;\r\n\r\n      font-weight: 700;\r\n\r\n      transition:\r\n        transform 0.3s ease,\r\n        box-shadow 0.3s ease,\r\n        background 0.3s ease;\r\n    }\r\n\r\n    \/* Main button *\/\r\n\r\n    .rubystep-primary {\r\n      color: white;\r\n\r\n      background: #a9636d;\r\n\r\n      box-shadow:\r\n        0 12px 30px rgba(169,99,109,0.20);\r\n    }\r\n\r\n    .rubystep-primary:hover {\r\n      transform: translateY(-3px);\r\n\r\n      background: #91535c;\r\n\r\n      box-shadow:\r\n        0 18px 35px rgba(169,99,109,0.28);\r\n    }\r\n\r\n    \/* Secondary button *\/\r\n\r\n    .rubystep-secondary {\r\n      color: #493e3b;\r\n\r\n      border: 1px solid #cfc0bb;\r\n\r\n      background: rgba(255,255,255,0.45);\r\n    }\r\n\r\n    .rubystep-secondary:hover {\r\n      transform: translateY(-3px);\r\n\r\n      background: #ffffff;\r\n    }\r\n\r\n    \/* =========================================\r\n       TRUST \/ MINI FEATURES\r\n       ========================================= *\/\r\n\r\n    .rubystep-features {\r\n      display: flex;\r\n\r\n      flex-wrap: wrap;\r\n\r\n      gap: 25px;\r\n\r\n      margin-top: 38px;\r\n\r\n      padding-top: 23px;\r\n\r\n      border-top: 1px solid rgba(80,70,65,0.14);\r\n    }\r\n\r\n    .rubystep-feature {\r\n      display: flex;\r\n\r\n      align-items: center;\r\n\r\n      gap: 9px;\r\n\r\n      color: #766c68;\r\n\r\n      font-size: 12px;\r\n\r\n      font-weight: 600;\r\n    }\r\n\r\n    .rubystep-feature-icon {\r\n      display: flex;\r\n\r\n      width: 25px;\r\n      height: 25px;\r\n\r\n      align-items: center;\r\n      justify-content: center;\r\n\r\n      border-radius: 50%;\r\n\r\n      background: #ead5d7;\r\n\r\n      color: #9e5d66;\r\n\r\n      font-size: 12px;\r\n    }\r\n\r\n    \/* =========================================\r\n       PRODUCT VISUAL\r\n       ========================================= *\/\r\n\r\n    .rubystep-visual {\r\n      position: relative;\r\n\r\n      min-height: 590px;\r\n\r\n      display: flex;\r\n\r\n      align-items: center;\r\n\r\n      justify-content: center;\r\n    }\r\n\r\n    \/* Large pastel circle *\/\r\n\r\n    .rubystep-product-bg {\r\n      position: absolute;\r\n\r\n      width: 470px;\r\n      height: 470px;\r\n\r\n      border-radius: 50%;\r\n\r\n      background:\r\n        radial-gradient(\r\n          circle,\r\n          #ffffff 0%,\r\n          #f4e2df 52%,\r\n          #ead1d3 100%\r\n        );\r\n\r\n      box-shadow:\r\n        0 35px 70px rgba(91,73,67,0.13);\r\n    }\r\n\r\n    \/* Product card *\/\r\n\r\n    .rubystep-product-card {\r\n      position: relative;\r\n\r\n      z-index: 3;\r\n\r\n      width: 420px;\r\n      height: 510px;\r\n\r\n      display: flex;\r\n\r\n      align-items: center;\r\n      justify-content: center;\r\n\r\n      overflow: hidden;\r\n\r\n      border-radius: 210px 210px 25px 25px;\r\n\r\n      background:\r\n        linear-gradient(\r\n          145deg,\r\n          rgba(255,255,255,0.78),\r\n          rgba(244,231,226,0.72)\r\n        );\r\n\r\n      border: 1px solid rgba(255,255,255,0.8);\r\n\r\n      box-shadow:\r\n        0 35px 80px rgba(70,55,50,0.16);\r\n\r\n      backdrop-filter: blur(15px);\r\n\r\n      transform: rotate(2deg);\r\n\r\n      transition:\r\n        transform 0.5s ease;\r\n    }\r\n\r\n    .rubystep-product-card:hover {\r\n      transform:\r\n        rotate(0deg)\r\n        translateY(-8px);\r\n    }\r\n\r\n    \/* =========================================\r\n       PRODUCT IMAGE\r\n       ========================================= *\/\r\n\r\n    .rubystep-product-image {\r\n      position: relative;\r\n\r\n      z-index: 4;\r\n\r\n      width: 92%;\r\n\r\n      height: auto;\r\n\r\n      object-fit: contain;\r\n\r\n      filter:\r\n        drop-shadow(\r\n          0 25px 25px\r\n          rgba(57,44,40,0.22)\r\n        );\r\n\r\n      transition:\r\n        transform 0.5s ease;\r\n    }\r\n\r\n    .rubystep-product-card:hover\r\n    .rubystep-product-image {\r\n      transform: scale(1.04);\r\n    }\r\n\r\n    \/* =========================================\r\n       FLOATING LABELS\r\n       ========================================= *\/\r\n\r\n    .rubystep-floating-label {\r\n      position: absolute;\r\n\r\n      z-index: 6;\r\n\r\n      padding: 13px 17px;\r\n\r\n      border-radius: 8px;\r\n\r\n      background: rgba(255,255,255,0.85);\r\n\r\n      border: 1px solid rgba(255,255,255,0.9);\r\n\r\n      box-shadow:\r\n        0 15px 35px rgba(70,55,50,0.13);\r\n\r\n      backdrop-filter: blur(12px);\r\n\r\n      color: #4c413e;\r\n\r\n      font-size: 11px;\r\n\r\n      font-weight: 800;\r\n\r\n      letter-spacing: 1px;\r\n\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .rubystep-label-one {\r\n      left: 0;\r\n\r\n      top: 105px;\r\n    }\r\n\r\n    .rubystep-label-two {\r\n      right: -10px;\r\n\r\n      bottom: 100px;\r\n\r\n      background: #b8757d;\r\n\r\n      color: #ffffff;\r\n\r\n      border: none;\r\n    }\r\n\r\n    \/* =========================================\r\n       DECORATIVE STAR\r\n       ========================================= *\/\r\n\r\n    .rubystep-star {\r\n      position: absolute;\r\n\r\n      z-index: 7;\r\n\r\n      top: 60px;\r\n\r\n      right: 55px;\r\n\r\n      font-size: 30px;\r\n\r\n      color: #b8757d;\r\n\r\n      animation: rubyFloat 4s ease-in-out infinite;\r\n    }\r\n\r\n    @keyframes rubyFloat {\r\n\r\n      0%,100% {\r\n        transform: translateY(0) rotate(0deg);\r\n      }\r\n\r\n      50% {\r\n        transform: translateY(-12px) rotate(8deg);\r\n      }\r\n\r\n    }\r\n\r\n    \/* =========================================\r\n       SMALL TEXT UNDER PRODUCT\r\n       ========================================= *\/\r\n\r\n    .rubystep-edition {\r\n      position: absolute;\r\n\r\n      z-index: 5;\r\n\r\n      bottom: 15px;\r\n\r\n      left: 50%;\r\n\r\n      transform: translateX(-50%);\r\n\r\n      white-space: nowrap;\r\n\r\n      color: #887b76;\r\n\r\n      font-family: Georgia, \"Times New Roman\", serif;\r\n\r\n      font-size: 13px;\r\n\r\n      letter-spacing: 3px;\r\n\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    \/* =========================================\r\n       TABLET\r\n       ========================================= *\/\r\n\r\n    @media (max-width: 950px) {\r\n\r\n      .rubystep-hero {\r\n        padding: 80px 0;\r\n      }\r\n\r\n      .rubystep-container {\r\n        grid-template-columns: 1fr;\r\n\r\n        gap: 55px;\r\n\r\n        text-align: center;\r\n      }\r\n\r\n      .rubystep-content {\r\n        margin: auto;\r\n      }\r\n\r\n      .rubystep-actions {\r\n        justify-content: center;\r\n      }\r\n\r\n      .rubystep-features {\r\n        justify-content: center;\r\n      }\r\n\r\n      .rubystep-visual {\r\n        min-height: 520px;\r\n      }\r\n\r\n      .rubystep-product-card {\r\n        width: 390px;\r\n        height: 470px;\r\n      }\r\n\r\n      .rubystep-product-bg {\r\n        width: 430px;\r\n        height: 430px;\r\n      }\r\n    }\r\n\r\n    \/* =========================================\r\n       MOBILE\r\n       ========================================= *\/\r\n\r\n    @media (max-width: 600px) {\r\n\r\n      .rubystep-hero {\r\n        min-height: auto;\r\n\r\n        padding: 55px 0 70px;\r\n      }\r\n\r\n      .rubystep-container {\r\n        width: 90%;\r\n\r\n        gap: 35px;\r\n      }\r\n\r\n      .rubystep-badge {\r\n        font-size: 10px;\r\n\r\n        padding: 8px 13px;\r\n\r\n        letter-spacing: 1.1px;\r\n      }\r\n\r\n      .rubystep-title {\r\n        font-size: clamp(48px, 14vw, 65px);\r\n\r\n        letter-spacing: -3px;\r\n\r\n        margin-bottom: 20px;\r\n      }\r\n\r\n      .rubystep-description {\r\n        font-size: 15px;\r\n\r\n        line-height: 1.7;\r\n\r\n        margin-bottom: 27px;\r\n      }\r\n\r\n      .rubystep-actions {\r\n        width: 100%;\r\n\r\n        flex-direction: column;\r\n      }\r\n\r\n      .rubystep-btn {\r\n        width: 100%;\r\n      }\r\n\r\n      .rubystep-features {\r\n        flex-direction: column;\r\n\r\n        align-items: center;\r\n\r\n        gap: 13px;\r\n\r\n        margin-top: 30px;\r\n      }\r\n\r\n      .rubystep-visual {\r\n        min-height: 390px;\r\n      }\r\n\r\n      .rubystep-product-bg {\r\n        width: 310px;\r\n        height: 310px;\r\n      }\r\n\r\n      .rubystep-product-card {\r\n        width: 285px;\r\n        height: 350px;\r\n\r\n        border-radius: 150px 150px 20px 20px;\r\n      }\r\n\r\n      .rubystep-label-one {\r\n        left: 0;\r\n\r\n        top: 55px;\r\n      }\r\n\r\n      .rubystep-label-two {\r\n        right: -3px;\r\n\r\n        bottom: 55px;\r\n      }\r\n\r\n      .rubystep-floating-label {\r\n        padding: 10px 12px;\r\n\r\n        font-size: 9px;\r\n      }\r\n\r\n      .rubystep-star {\r\n        top: 25px;\r\n\r\n        right: 30px;\r\n\r\n        font-size: 22px;\r\n      }\r\n\r\n      .rubystep-edition {\r\n        font-size: 9px;\r\n\r\n        letter-spacing: 2px;\r\n      }\r\n    }\r\n\r\n    \/* =========================================\r\n       ACCESSIBILITY\r\n       ========================================= *\/\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n\r\n      html {\r\n        scroll-behavior: auto;\r\n      }\r\n\r\n      *,\r\n      *::before,\r\n      *::after {\r\n        animation: none !important;\r\n\r\n        transition: none !important;\r\n      }\r\n\r\n    }\r\n\r\n  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n  <!-- =========================================\r\n       RUBYSTEP HERO SECTION\r\n       ========================================= -->\r\n\r\n  <header\r\n    class=\"rubystep-hero\"\r\n    id=\"home\"\r\n    aria-label=\"RubyStep footwear introduction\"\r\n  >\r\n\r\n    <div class=\"rubystep-container\">\r\n\r\n      <!-- =====================================\r\n           LEFT SIDE\r\n           ===================================== -->\r\n\r\n      <div class=\"rubystep-content\">\r\n\r\n        <div class=\"rubystep-badge\">\r\n          <span class=\"rubystep-badge-dot\"><\/span>\r\n          New Season \u00b7 RubyStep\r\n        <\/div>\r\n\r\n        <h1 class=\"rubystep-title\">\r\n\r\n          <span class=\"line\">\r\n            Walk\r\n          <\/span>\r\n\r\n          <span class=\"line\">\r\n            <em>Your Way.<\/em>\r\n          <\/span>\r\n\r\n        <\/h1>\r\n\r\n        <p class=\"rubystep-description\">\r\n\r\n          Shoes that match your mood, your moments and your\r\n          everyday style. Discover elegant heels, comfortable\r\n          footwear and trend-forward designs made for every\r\n          generation.\r\n\r\n        <\/p>\r\n\r\n        <div class=\"rubystep-actions\">\r\n\r\n          <a\r\n            href=\"#collection\"\r\n            class=\"rubystep-btn rubystep-primary\"\r\n            aria-label=\"Explore RubyStep footwear collection\"\r\n          >\r\n            Explore Collection\r\n          <\/a>\r\n\r\n          <a\r\n            href=\"#heels\"\r\n            class=\"rubystep-btn rubystep-secondary\"\r\n            aria-label=\"Shop RubyStep heels\"\r\n          >\r\n            Discover Heels \u2192\r\n          <\/a>\r\n\r\n        <\/div>\r\n\r\n        <!-- FEATURES -->\r\n\r\n        <div class=\"rubystep-features\">\r\n\r\n          <div class=\"rubystep-feature\">\r\n\r\n            <span class=\"rubystep-feature-icon\">\r\n              \u2661\r\n            <\/span>\r\n\r\n            Comfortable Designs\r\n\r\n          <\/div>\r\n\r\n          <div class=\"rubystep-feature\">\r\n\r\n            <span class=\"rubystep-feature-icon\">\r\n              \u2726\r\n            <\/span>\r\n\r\n            Trend-Led Style\r\n\r\n          <\/div>\r\n\r\n          <div class=\"rubystep-feature\">\r\n\r\n            <span class=\"rubystep-feature-icon\">\r\n              \u2713\r\n            <\/span>\r\n\r\n            Made For Every Step\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- =====================================\r\n           RIGHT SIDE \u2014 PRODUCT\r\n           ===================================== -->\r\n\r\n      <div\r\n        class=\"rubystep-visual\"\r\n        aria-label=\"RubyStep featured footwear\"\r\n      >\r\n\r\n        <div class=\"rubystep-product-bg\"><\/div>\r\n\r\n        <div class=\"rubystep-star\">\r\n          \u2726\r\n        <\/div>\r\n\r\n        <div class=\"rubystep-product-card\">\r\n\r\n          <!--\r\n            REPLACE THIS IMAGE URL\r\n            WITH YOUR OWN RUBYSTEP SHOE\/HEEL IMAGE.\r\n\r\n            Recommended:\r\n            WebP\r\n            Transparent background\r\n            1000px+ resolution\r\n          -->\r\n\r\n          <img fetchpriority=\"high\" decoding=\"async\"\r\n            class=\"rubystep-product-image\"\r\n\r\n            src=\"https:\/\/images.unsplash.com\/photo-1543163521-1bf539c55dd2?auto=format&fit=crop&w=1000&q=90\"\r\n\r\n            alt=\"RubyStep elegant women's heels and premium footwear\"\r\n\r\n            width=\"1000\"\r\n\r\n            height=\"1000\"\r\n\r\n            loading=\"eager\"\r\n\r\n            fetchpriority=\"high\"\r\n          >\r\n\r\n          <div class=\"rubystep-floating-label rubystep-label-one\">\r\n            Effortless Style\r\n          <\/div>\r\n\r\n          <div class=\"rubystep-floating-label rubystep-label-two\">\r\n            Made To Move\r\n          <\/div>\r\n\r\n          <div class=\"rubystep-edition\">\r\n            RubyStep \u00b7 Everyday Luxury\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/header>\r\n\r\n\r\n  <!-- =========================================\r\n       PLACEHOLDER SECTIONS\r\n       Replace these with your actual sections\r\n       ========================================= -->\r\n\r\n  <section id=\"collection\"><\/section>\r\n\r\n  <section id=\"heels\"><\/section>\r\n\r\n\r\n  <!-- =========================================\r\n       JAVASCRIPT\r\n       ========================================= -->\r\n\r\n  <script>\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      function () {\r\n\r\n        \/* Smooth scrolling *\/\r\n\r\n        const links =\r\n          document.querySelectorAll(\r\n            '.rubystep-btn[href^=\"#\"]'\r\n          );\r\n\r\n        links.forEach(function (link) {\r\n\r\n          link.addEventListener(\r\n            \"click\",\r\n            function (event) {\r\n\r\n              const targetId =\r\n                this.getAttribute(\"href\");\r\n\r\n              const target =\r\n                document.querySelector(targetId);\r\n\r\n              if (target) {\r\n\r\n                event.preventDefault();\r\n\r\n                target.scrollIntoView({\r\n                  behavior: \"smooth\",\r\n                  block: \"start\"\r\n                });\r\n\r\n              }\r\n\r\n            }\r\n          );\r\n\r\n        });\r\n\r\n\r\n        \/* Small product movement *\/\r\n\r\n        const product =\r\n          document.querySelector(\r\n            \".rubystep-product-card\"\r\n          );\r\n\r\n        if (product &&\r\n            !window.matchMedia(\r\n              \"(prefers-reduced-motion: reduce)\"\r\n            ).matches) {\r\n\r\n          document.addEventListener(\r\n            \"mousemove\",\r\n            function (event) {\r\n\r\n              const x =\r\n                (window.innerWidth \/ 2 -\r\n                event.clientX) \/ 80;\r\n\r\n              const y =\r\n                (window.innerHeight \/ 2 -\r\n                event.clientY) \/ 100;\r\n\r\n              product.style.transform =\r\n                \"rotate(2deg) translate(\" +\r\n                x + \"px,\" +\r\n                y + \"px)\";\r\n\r\n            }\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n    );\r\n\r\n  <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>RubyStep | Stylish Shoes &#038; Heels for Every Step Premium Footwear Collection Step Into Your Style. Discover stylish shoes, elegant [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-194","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rubystep.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rubystep.us.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rubystep.us.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rubystep.us.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rubystep.us.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=194"}],"version-history":[{"count":7,"href":"https:\/\/rubystep.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/194\/revisions"}],"predecessor-version":[{"id":203,"href":"https:\/\/rubystep.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/194\/revisions\/203"}],"wp:attachment":[{"href":"https:\/\/rubystep.us.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}