New design

2025-08-02 23:39:14 +02:00
parent 0e90e1f409
commit 9634a3ea80
83 changed files with 7539 additions and 2471 deletions
--- a/rss/css/main.css
+++ b/rss/css/main.css
--- a/rss/css/main.css.map
+++ b/rss/css/main.css.map
--- a/rss/css/main.scss
+++ b/rss/css/main.scss
--- a/rss/css/theme.css
+++ b/rss/css/theme.css
@@ -0,0 +1,399 @@
+/* Grid system */
+/* Breakpoints */
+/* Display types */
+/* Color palette */
+/* Spacing scale */
+/* Shadows (soft shadows) */
+/* Flex utilities */
+/* Button component variables */
+/* Typography */
+header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.7rem 2rem;
+  background-color: #ffffff;
+  align-items: center;
+  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
+  position: relative;
+  z-index: 999;
+  font-family: "Nunito", sans-serif;
+}
+header .logo {
+  width: 100px;
+  display: flex;
+  cursor: pointer;
+}
+header .logo img {
+  width: 100%;
+  height: 100%;
+}
+header nav {
+  display: flex;
+  position: relative;
+}
+header nav .menu-item {
+  color: #000000;
+  font-weight: 500;
+  margin-right: 15px;
+  display: inline-block;
+  position: relative;
+  transition: color 0.3s;
+  font-size: 16px;
+}
+header nav .menu-item.active {
+  font-weight: bold;
+}
+header nav .menu-item::after {
+  content: "";
+  position: absolute;
+  top: 120%;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background: #B54418;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s;
+}
+header nav .menu-item:hover {
+  color: #B54418;
+  cursor: pointer;
+}
+header nav .menu-item:hover::after {
+  transform: scaleX(1);
+}
+
+.home-banner {
+  height: calc(100vh - 55px);
+  padding: 50px 0;
+  display: flex;
+  background-color: #ffffff;
+  opacity: 0;
+  animation: slideUp 1s ease-in-out forwards;
+}
+@media (max-width: 768px) {
+  .home-banner {
+    height: 100vh;
+  }
+}
+.home-banner .home-banner-inner {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.home-banner .home-banner-inner .container {
+  height: 100%;
+}
+.home-banner .home-banner-inner .inner-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  height: 100%;
+}
+@media (max-width: 768px) {
+  .home-banner .home-banner-inner .inner-row {
+    flex-direction: column;
+  }
+}
+.home-banner .home-banner-inner .image-col {
+  flex: 0 0 45%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.home-banner .home-banner-inner .image-col img {
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
+}
+.home-banner .home-banner-inner .text-col {
+  flex: 0 0 40%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+@media (max-width: 768px) {
+  .home-banner .home-banner-inner .text-col {
+    flex: 0 0 100%;
+    max-width: 100%;
+    text-align: center;
+    z-index: 9;
+  }
+}
+.home-banner .home-banner-inner .text-col .title {
+  font-weight: 800;
+  font-size: 3.7rem;
+  line-height: 1.2;
+  font-family: "Nunito", sans-serif;
+}
+@media (max-width: 768px) {
+  .home-banner .home-banner-inner .text-col .title {
+    font-size: 3.2rem;
+  }
+}
+.home-banner .home-banner-inner .text-col .lead {
+  font-size: 1.6rem;
+  font-weight: 400;
+}
+@media (max-width: 768px) {
+  .home-banner .home-banner-inner .text-col .lead {
+    font-size: 1.3rem;
+  }
+}
+.home-banner .home-banner-inner .text-col .cta-btn {
+  padding: 10px;
+  font-size: 1.4rem;
+}
+.home-banner .home-banner-inner .text-col .login-text {
+  display: inline-flex;
+  gap: 5px;
+  font-weight: 400;
+}
+.home-banner .home-banner-inner .text-col .login-text .login-link {
+  font-weight: 500;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.home-banner .home-banner-inner .image-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+@media (max-width: 768px) {
+  .home-banner .home-banner-inner .image-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    height: 100%;
+    z-index: 1;
+    opacity: 0.1;
+  }
+}
+.home-banner .home-banner-inner .image-wrapper img {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+
+.display-banner {
+  width: 100%;
+  padding: 120px 0px;
+}
+.display-banner.wedding-banner {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/rss/img/wedding.jpg");
+  padding: 180px 0px;
+  background-position: center center;
+  background-size: cover;
+}
+.display-banner.moving-banner {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/rss/img/couple.jpg");
+  background-position: center 40%;
+  background-size: cover;
+  padding: 180px 0px;
+}
+
+footer {
+  background-color: #212529;
+  color: #fff;
+  display: flex;
+  padding: 25px 0px;
+  font-size: 14px;
+  font-weight: 300;
+}
+footer .logo {
+  width: 125px;
+  cursor: pointer;
+}
+footer ul {
+  list-style: none;
+}
+
+.features-section h2 {
+  font-size: 1.8rem;
+  color: #212529;
+}
+.features-section .theme-card {
+  border-radius: 0.25rem;
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.features-section .theme-card .card-header {
+  padding: 0.5rem;
+  text-align: center;
+}
+.features-section .theme-card .card-header img {
+  width: 125px;
+  height: 125px;
+  border-radius: 50%;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin: 0 auto;
+}
+.features-section .theme-card .card-header img.object-left {
+  -o-object-position: left center;
+     object-position: left center;
+}
+.features-section .theme-card .card-header img.object-center {
+  -o-object-position: center center;
+     object-position: center center;
+}
+.features-section .theme-card .card-header img.object-bottom {
+  -o-object-position: bottom center;
+     object-position: bottom center;
+}
+.features-section .theme-card .card-body {
+  padding: 1rem;
+  text-align: center;
+}
+
+.styled-title {
+  font-family: "Nunito", sans-serif;
+}
+.styled-title.fw-900 {
+  font-weight: 900;
+}
+.styled-title.fw-600 {
+  font-weight: 600;
+}
+
+.filter-section {
+  padding: 2rem 0;
+}
+
+.filter-card {
+  background-color: #ffffff;
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+  padding: 1rem;
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  height: 100%;
+  margin: 15px 0px;
+}
+
+.filter-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  color: #aa0b3d;
+}
+
+.filter-title {
+  font-size: 1.3rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: #212529;
+}
+
+.filter-text {
+  font-size: 1rem;
+  line-height: 1.4;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .filter-card {
+    margin-bottom: 1.5rem;
+  }
+  .filter-icon {
+    font-size: 2rem;
+  }
+  .filter-title {
+    font-size: 1.1rem;
+  }
+}
+.rounded-col-image {
+  height: 450px;
+  width: 450px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+@media (max-width: 1200px) {
+  .rounded-col-image {
+    width: 300px;
+    height: 300px;
+  }
+}
+@media (max-width: 920px) {
+  .rounded-col-image {
+    width: 225px;
+    height: 225px;
+  }
+}
+.rounded-col-image:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  box-shadow: inset 0px 0px 27px -5px rgb(2, 2, 2);
+  z-index: 1;
+  pointer-events: none;
+}
+.rounded-col-image img {
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: right;
+     object-position: right;
+  width: 100%;
+  height: 100%;
+}
+
+section h2 {
+  font-size: 1.8rem;
+  font-weight: 500;
+}
+section h3 {
+  font-size: 1.6rem;
+  font-weight: 500;
+}
+section p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  line-height: 1.4;
+}
+section .bolder {
+  font-weight: 600;
+}
+
+.section-animation {
+  opacity: 0; /* Start hidden */
+  transform: translateY(50px); /* Slide up from 50px below */
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
+}
+
+.section-animation.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Accessibility for reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .section-animation {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+@keyframes slideUp {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}/*# sourceMappingURL=theme.css.map */
--- a/rss/css/theme.css.map
+++ b/rss/css/theme.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["variables.scss","theme.scss","theme.css"],"names":[],"mappings":"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","file":"theme.css"}
--- a/rss/css/theme.scss
+++ b/rss/css/theme.scss
@@ -0,0 +1,444 @@
+@import 'variables';
+
+header {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.7rem 2rem;
+    background-color: #ffffff;
+    align-items: center;
+    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
+    position: relative;
+    z-index: 999;
+    font-family: "Nunito", sans-serif;
+
+    .logo {
+        width: 100px;
+        display: flex;
+        cursor: pointer;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    nav {
+        display: flex;
+        position: relative;
+
+        .menu-item {
+            color: #000000;
+            font-weight: 500;
+            margin-right: 15px;
+            display: inline-block;
+            position: relative;
+            transition: color 0.3s;
+            font-size: 16px;
+
+            &.active {
+                font-weight: bold;
+                // color: #your-brand-color;
+            }
+
+            &::after {
+                content: "";
+                position: absolute;
+                top: 120%;
+                left: 0;
+                height: 2px;
+                width: 100%;
+                background: #B54418;
+                transform: scaleX(0);
+                transform-origin: left;
+                transition: transform 0.3s;
+            }
+
+            &:hover {
+                color: #B54418;
+                cursor: pointer;
+            }
+
+            &:hover::after {
+                transform: scaleX(1);
+            }
+        }
+    }
+}
+
+.home-banner {
+  height: calc(100vh - 55px);
+  padding: 50px 0;
+  display: flex;
+  background-color: #{map-get($colors, white)};
+  opacity: 0;
+  animation: slideUp 1s ease-in-out forwards;
+//   animation-delay: 0.2s;
+
+
+
+  @media(max-width:768px){
+    height: 100vh;
+  }
+
+  .home-banner-inner {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    
+    .container {
+        height: 100%;
+    }
+    
+    .inner-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: stretch;
+        height: 100%;
+        
+        @media(max-width:768px){
+            flex-direction: column;
+        }
+    }
+
+    .image-col {
+      flex: 0 0 45%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      img{
+        border-radius: 12px;
+        box-shadow: #{map-get($shadows, 3)};
+      }
+    }
+
+    .text-col {
+      flex: 0 0 40%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 10px;
+
+      @media(max-width: 768px){
+        flex: 0 0 100%;
+        max-width: 100%;
+        text-align: center;
+        z-index: 9;
+      }
+
+      .title{
+        font-weight: 800;
+        font-size: 3.7rem;
+        line-height: 1.2;
+        font-family: $font-family-base;
+
+        @media(max-width:768px){
+            font-size: 3.2rem;
+        }
+      }
+
+      .lead{
+        font-size: 1.6rem;
+        font-weight: 400;
+
+        @media(max-width:768px){
+            font-size: 1.3rem;
+        }
+      }
+      .cta-btn{
+        padding: 10px;
+        font-size: 1.4rem;
+      }
+      .login-text{
+        display: inline-flex;
+        gap: 5px;
+        font-weight: 400;
+        .login-link{
+            font-weight: 500;
+            text-decoration: underline;
+            cursor: pointer;
+        }
+      }
+    }
+
+    .image-wrapper {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      @media(max-width: 768px){
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        height: 100%;
+        z-index: 1;
+        opacity: 0.1;
+      }
+
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        display: block;
+      }
+    }
+  }
+}
+
+
+
+// Banners
+.display-banner {
+    width: 100%;
+    padding: 120px 0px;
+
+    &.wedding-banner {
+        background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
+            url('/rss/img/wedding.jpg');
+        padding: 180px 0px;
+        background-position: center center;
+        background-size: cover;
+    }
+
+    &.moving-banner {
+        background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
+            url('/rss/img/couple.jpg');
+        background-position: center 40%;
+        background-size: cover;
+        padding: 180px 0px;
+    }
+}
+
+// Footer
+footer {
+    background-color: #{map-get($colors, 'dark')};
+    color: #fff;
+    display: flex;
+    padding: 25px 0px;
+    font-size: 14px;
+    font-weight: 300;
+
+    .logo {
+        width: 125px;
+        cursor: pointer;
+    }
+
+    ul {
+        list-style: none;
+    }
+}
+
+.features-section {
+
+    h2 {
+        font-size: map-get($font-sizes, xl);
+        color: map-get($colors, dark);
+    }
+
+    .theme-card {
+        border-radius: map-get($border-radius-sizes, md);
+        overflow: hidden;
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+        .card-header {
+            padding: #{map-get($spacing, "2")};
+            text-align: center;
+
+            img {
+                width: 125px;
+                height: 125px;
+                border-radius: 50%;
+                box-shadow: map-get($shadows, 2);
+                object-fit: cover;
+                margin: 0 auto;
+
+                &.object-left{
+                    object-position: left center;
+                }
+                &.object-center{
+                    object-position: center center;
+                }
+                &.object-bottom{
+                    object-position: bottom center;
+                }
+            }
+        }
+
+        .card-body {
+            padding: #{map-get($spacing, "3")};
+            text-align: center;
+        }
+    }
+}
+
+// Fix before release
+// Theme fonts
+.styled-title{
+    font-family: "Nunito", sans-serif;
+
+    &.fw-900{
+        font-weight: 900;
+    }
+
+    &.fw-600{
+        font-weight: 600;
+    }
+}
+
+
+.filter-section {
+  padding: 2rem 0;
+}
+
+.filter-card {
+  background-color: #{map-get($colors, white)};
+  border-radius: map-get($border-radius-sizes, md);
+  box-shadow: map-get($shadows, 2);
+  padding: #{map-get($spacing, "3")};
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  height: 100%;
+  margin: 15px 0px;
+}
+
+.filter-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  color: #{map-get($colors, primary)};
+}
+
+.filter-title {
+  font-size: 1.3rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: map-get($colors, dark);
+}
+
+.filter-text {
+  font-size: 1rem;
+  color: map-get($colors, gray);
+  line-height: 1.4;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .filter-card {
+    margin-bottom: 1.5rem;
+  }
+  .filter-icon {
+    font-size: 2rem;
+  }
+  .filter-title {
+    font-size: 1.1rem;
+  }
+}
+
+
+
+
+
+
+
+// Images
+
+// Rounded col images
+.rounded-col-image{
+    height: 450px;
+    width: 450px;
+    border-radius: 50%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    @media(max-width:1200px){
+        width: 300px;
+        height:300px;
+    }
+
+    @media(max-width:920px){
+        width:225px;
+        height: 225px;
+    }
+
+    &:before{
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        -webkit-box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
+        -moz-box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
+        box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
+        z-index: 1;
+        pointer-events: none;
+
+    }
+
+    img{
+        object-fit: cover;
+        object-position: right;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+section{
+    h2{
+        font-size: 1.8rem;
+        font-weight: 500;
+    }
+    h3{
+        font-size: 1.6rem;
+        font-weight: 500;
+    }
+
+    p{
+        font-size: 1.2rem;
+    font-weight: 400;
+    line-height: 1.4;
+    }
+
+    .bolder{
+        font-weight: 600;
+    }
+}
+
+.section-animation {
+  opacity: 0; /* Start hidden */
+  transform: translateY(50px); /* Slide up from 50px below */
+  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
+}
+
+.section-animation.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Accessibility for reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .section-animation {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
--- a/rss/css/variables.css
+++ b/rss/css/variables.css
@@ -0,0 +1,9 @@
+/* Grid system */
+/* Breakpoints */
+/* Display types */
+/* Color palette */
+/* Spacing scale */
+/* Shadows (soft shadows) */
+/* Flex utilities */
+/* Button component variables */
+/* Typography *//*# sourceMappingURL=variables.css.map */
--- a/rss/css/variables.css.map
+++ b/rss/css/variables.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["variables.scss"],"names":[],"mappings":"AAAA,gBAAA;AAIA,gBAAA;AAmBA,kBAAA;AAGA,kBAAA;AAoBA,kBAAA;AAGA,2BAAA;AAoBA,mBAAA;AAyBA,+BAAA;AAQA,eAAA","file":"variables.css"}
--- a/rss/css/variables.scss
+++ b/rss/css/variables.scss
@@ -0,0 +1,165 @@
+/* Grid system */
+$container-padding: 1rem;
+$grid-columns: 12;
+
+/* Breakpoints */
+$breakpoints: (
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  xxxl: 1600px
+);
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px,
+  xxxl: 1520px
+);
+
+/* Display types */
+$display-types: block, flex, inline, inline-block, inline-flex, grid, none;
+
+/* Color palette */
+$colors: (
+  primary: #aa0b3d,
+  primary-alt: #aa0b3da8,
+  alt: #b5451896,
+  secondary: #333,
+  success: #34b97b,
+  warning: #ffc107,
+  danger: #dc3545,
+  info: #0dcaf0,
+  light: #e5e5e5,
+  dark: #212529,
+  white: #ffffff,
+  black: #000000,
+  muted: #C7C7C7,
+  accent-white: #f7f7f7,
+  accent: #08bbbb,
+  transparent: transparent
+);
+
+/* Spacing scale */
+$spacing-scale: 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem;
+
+/* Shadows (soft shadows) */
+$shadows: (
+  1: 0 1px 3px rgba(0, 0, 0, 0.12),
+  2: 0 2px 6px rgba(0, 0, 0, 0.16),
+  3: 0 4px 10px rgba(0, 0, 0, 0.18),
+  4: 0 6px 15px rgba(0, 0, 0, 0.20),
+  5: 0 10px 24px rgba(0, 0, 0, 0.22)
+);
+
+$drop-shadows: (
+  1: 0 2px 4px rgba(0, 0, 0, 0.14),
+  2: 0 4px 8px rgba(0, 0, 0, 0.18),
+  3: 0 8px 16px rgba(0, 0, 0, 0.20),
+  4: 0 12px 24px rgba(0, 0, 0, 0.22),
+  5: 0 20px 40px rgba(0, 0, 0, 0.24)
+);
+
+
+
+
+/* Flex utilities */
+$flex-directions: (
+  row: row,
+  row-reverse: row-reverse,
+  column: column,
+  column-reverse: column-reverse
+);
+
+$justify-content-values: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly
+);
+
+$align-items-values: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  baseline: baseline,
+  stretch: stretch
+);
+
+/* Button component variables */
+$btn-padding-y: 0.375rem;
+$btn-padding-x: 0.75rem;
+$btn-font-size: 1rem;
+$btn-border-radius: 0.25rem;
+$btn-border-width: 1px;
+$btn-hover-brightness: 0.9;
+
+/* Typography */
+$font-family-base: "Nunito", sans-serif;
+$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
+
+$font-sizes: (
+  xs: 0.75rem,
+  sm: 0.875rem,
+  base: 1.1rem,
+  lg: 1.35rem,
+  xl: 1.8rem,
+  xxl: 2.2rem
+);
+
+$font-weights: (
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+);
+
+$line-heights: (
+    tight: 1,
+    normal: 1.3,
+    heading: 1.5
+
+);
+
+
+$border-widths: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  3: 3px
+);
+
+$border-radius-sizes: (
+  none: 0,
+  sm: 0.125rem,
+  md: 0.25rem,
+  lg: 0.5rem,
+  xl: 1rem,
+  full: 9999px
+);
+
+$spacer: 1rem;
+$spacing: (
+    "0": 0,
+    "1": $spacer * 0.25,
+    "2": $spacer * 0.5,
+    "3": $spacer,
+    "4": $spacer * 1.5,
+    "5": $spacer * 3
+);
+
+$gutters: (
+  0: 0,
+  1: map-get($spacing, "1"),
+  2: map-get($spacing, "2"),
+  3: map-get($spacing, "3"),
+  4: map-get($spacing, "4"),
+  5: map-get($spacing, "5") 
+);
--- a/rss/favicon/apple-touch-icon.png
+++ b/rss/favicon/apple-touch-icon.png
--- a/rss/favicon/favicon-96x96.png
+++ b/rss/favicon/favicon-96x96.png
--- a/rss/favicon/favicon.ico
+++ b/rss/favicon/favicon.ico
--- a/rss/favicon/favicon.svg
+++ b/rss/favicon/favicon.svg
--- a/rss/favicon/site.webmanifest
+++ b/rss/favicon/site.webmanifest
@@ -1,21 +0,0 @@
-{
-  "name": "MyWebSite",
-  "short_name": "MySite",
-  "icons": [
-    {
-      "src": "/rss/favicon/web-app-manifest-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "/rss/favicon/web-app-manifest-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}
--- a/rss/favicon/web-app-manifest-192x192.png
+++ b/rss/favicon/web-app-manifest-192x192.png
--- a/rss/favicon/web-app-manifest-512x512.png
+++ b/rss/favicon/web-app-manifest-512x512.png
--- a/rss/img/couple-beach.jpg
+++ b/rss/img/couple-beach.jpg
--- a/rss/img/couple-luxury.jpg
+++ b/rss/img/couple-luxury.jpg
--- a/rss/img/couple.jpg
+++ b/rss/img/couple.jpg
--- a/rss/img/couple_sunset.jpg
+++ b/rss/img/couple_sunset.jpg
--- a/rss/img/dining.jpg
+++ b/rss/img/dining.jpg
--- a/rss/img/family-frame.jpg
+++ b/rss/img/family-frame.jpg
--- a/rss/img/family-pregnant.jpg
+++ b/rss/img/family-pregnant.jpg
--- a/rss/img/family.jpg
+++ b/rss/img/family.jpg
--- a/rss/img/fetish.jpg
+++ b/rss/img/fetish.jpg
--- a/rss/img/freedom.jpg
+++ b/rss/img/freedom.jpg
--- a/rss/img/kink.jpg
+++ b/rss/img/kink.jpg
--- a/rss/img/kisses.jpg
+++ b/rss/img/kisses.jpg
--- a/rss/img/kisses2.jpg
+++ b/rss/img/kisses2.jpg
--- a/rss/img/logo2.9f656f3d.png
+++ b/rss/img/logo2.9f656f3d.png
--- a/rss/img/logo_old.png
+++ b/rss/img/logo_old.png
--- a/rss/img/people.jpg
+++ b/rss/img/people.jpg
--- a/rss/img/save.png
+++ b/rss/img/save.png
--- a/rss/img/screenshot.png
+++ b/rss/img/screenshot.png
--- a/rss/img/search.png
+++ b/rss/img/search.png
--- a/rss/img/stella-hero1.jpg
+++ b/rss/img/stella-hero1.jpg
--- a/rss/img/sunset.webp
+++ b/rss/img/sunset.webp
--- a/rss/img/wedding.jpg
+++ b/rss/img/wedding.jpg
--- a/rss/img/yacht.jpg
+++ b/rss/img/yacht.jpg
--- a/rss/js/create-account.js
+++ b/rss/js/create-account.js
--- a/rss/js/home.js
+++ b/rss/js/home.js
@@ -1,128 +0,0 @@
-document.addEventListener('DOMContentLoaded', async (v) => {
-    let countries = await fetchCountries();
-
-    // Handlers
-    let countrySelector = document.getElementById('userCountry');
-    for(country of countries){
-        countrySelector.innerHTML += `<option value="${country.text}">${country.text}</option>`;
-    }
-
-    let signupForm = document.getElementById('signup');
-    signupForm.addEventListener('submit', (e) => {
-        e.preventDefault();
-        document.getElementById('spinner').classList.add('show');
-    
-        // Extract form data
-        let username = signupForm.querySelector('#username').value;
-        let dob = signupForm.querySelector('#u_dob').value;
-        let country = signupForm.querySelector('#userCountry').value;
-        let gender = signupForm.querySelector('#gender').value;
-        let email = signupForm.querySelector('#email').value;
-        let password = signupForm.querySelector('#password').value;
-        let password2 = signupForm.querySelector('#password2').value;
-        let tosInput = signupForm.querySelector('#tos');
-        let tos = tosInput.checked;
-
-        // Remove errors
-        document.getElementById('usernameError').innerText = null;
-        document.getElementById('countryError').innerText = null;
-        document.getElementById('emailError').innerText = null;
-        document.getElementById('dobError').innerText = null;
-        document.getElementById('genderError').innerText = null;
-        document.getElementById('passwordError').innerText = null;
-        document.getElementById('password2Error').innerText = null;
-
-    
-        let userData = {
-            username: username,
-            country: country,
-            gender: gender,
-            email: email,
-            dob: dob,
-            password: password,
-            password2: password2,
-            acceptTerms: tos
-        };
-    
-        let action = 'signup';
-    
-        let formData = JSON.stringify({
-            action: action,
-            userData: userData
-        });
-    
-        // Send request
-        fetch('https://api.stellaamor.com/users.php', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: formData
-        })
-        .then(response => {
-            if(response && response.length){
-                return response.json();
-            }else{
-                return null;
-            }
-        })
-        .then(msg => {
-            console.log(msg);
-            // If we have a JSON response, process it; otherwise, assume success
-            document.getElementById('spinner').classList.remove('show');
-            if (msg && msg.status === 'fail') {
-                let errorArea = msg.fail_status;
-    
-                if (errorArea === 'username') {
-                    document.getElementById('usernameError').innerText = msg.message;
-                }
-                if (errorArea === 'country') {
-                    document.getElementById('countryError').innerText = msg.message;
-                }
-                if (errorArea === 'email') {
-                    document.getElementById('emailError').innerText = msg.message;
-                }
-                if (errorArea === 'dob') {
-                    document.getElementById('dobError').innerText = msg.message;
-                }
-                if (errorArea === 'gender') {
-                    document.getElementById('genderError').innerText = msg.message;
-                }
-                if (errorArea === 'password') {
-                    document.getElementById('passwordError').innerText = msg.message;
-                }
-                if (errorArea === 'password2' || errorArea === 'passwords') {
-                    document.getElementById('password2Error').innerText = msg.message;
-                }
-            } else {
-                // Success: Redirect to signin page
-                setTimeout(() => {
-                    window.location.href = '/signin';
-                }, 2000);
-            }
-        })
-        .catch(error => {
-            console.error('Error during signup:', error);
-            document.getElementById('errors').innerText = 'An error occurred. Please try again later.';
-        });
-    });
-    
-
-
-    // Call init functions
-});
-
-async function fetchCountries() {
-    try {
-        const response = await fetch('https://restcountries.com/v3.1/all?fields=name');
-        const data = await response.json();
-
-        const countries = data.map(country => ({
-            text: country.name.common,
-            val: country.cca2,
-        })).sort((a, b) => a.text.localeCompare(b.text));
-
-        return countries;
-    } catch (error) {
-        console.error('Error fetching countries:', error);
-        return [];
-    }
-}
--- a/rss/js/index.js
+++ b/rss/js/index.js
--- a/rss/js/login.js
+++ b/rss/js/login.js
@@ -1,82 +0,0 @@
-document.addEventListener('DOMContentLoaded', async (v) =>{
-    await isAuth();
-    let loginForm = document.getElementById('loginForm');
-
-    loginForm.addEventListener('submit', async (e) =>{
-        e.preventDefault();
-        await login();
-    })
-})
-
-// Async login function in vanilla JS
-async function login() {
-    // Set login running state
-    let loginRunning = true;
-    let loginError = false;
-
-    // Get form data
-    let username = document.getElementById('username').value;
-    let password = document.getElementById('password').value;
-
-    let postFields = {
-        userData: {
-            username: username,
-            password: password
-        },
-        action: 'login'
-    };
-
-    try {
-        // Send request
-        const response = await fetch('https://api.stellaamor.com/users.php', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            credentials: 'include', // To handle cookies
-            body: JSON.stringify(postFields)
-        });
-
-        const data = await response.json();
-
-        if (data.status === 'fail') {
-            // Display error if login fails
-            loginError = true;
-            document.getElementById('loginError').innerText = data.message;
-            loginRunning = false;
-        } else {
-            // Successful login, redirect to /home
-            loginRunning = false;
-            setTimeout(() => {
-                window.location.href = '/home';
-
-                // Reset form fields and errors after login
-                document.getElementById('username').value = '';
-                document.getElementById('password').value = '';
-                document.getElementById('loginError').innerText = '';
-                loginRunning = false;
-            }, 1500);
-        }
-    } catch (error) {
-        console.error('Login error:', error);
-        loginError = true;
-        loginRunning = false;
-    }
-}
-
-// Async authentication check function in vanilla JS
-async function isAuth() {
-    try {
-        const response = await fetch('https://api.stellaamor.com/users.php?isAuth=true', {
-            method: 'GET',
-            credentials: 'include'
-        });
-        const data = await response.json();
-        
-        if (data.status === true) {
-            window.location.href = '/home';
-        } else {
-            return false;
-        }
-    } catch (error) {
-        return false;
-    }
-}
--- a/rss/js/main.js
+++ b/rss/js/main.js
@@ -1,4 +1,76 @@
-// Global functions
-async function mainFetch(fdata){
-    
+async function _post(formObj, target, func){
+    try{
+        const form = await createFormData(formObj, target, func)
+        const respJson = await fetch('/rss/php/handler.php', {
+            method: 'POST',
+            body: form
+        });
+
+        if(respJson){
+            return await(respJson.json());
+        }else{
+            return 'Error';
+        }
+    }catch(errno){
+        console.log('Post failed');
+        console.log(errno)
+    }
+}
+
+async function createFormData(data, target, func){
+    const formData = new FormData();
+    try{
+        for(const key in data){
+            if(data.hasOwnProperty(key)){
+                formData.append(key, data[key]);
+            }
+        }
+        formData.append('target', target);
+        formData.append('function', func)
+    }catch(errno){
+        console.log('Incorrect use of object');
+        return false;
+    }
+    return formData;
+}
+
+function createEl(el, classArr = null, elText = null, dtSet = null){
+    const element = document.createElement(el);
+    if(elText){
+        element.appendChild(document.createTextNode(elText));
+    }
+
+    if(classArr && classArr.length){
+        element.classList.add(...classArr);
+    }
+
+    if(dtSet && Object.keys(dtSet).length){
+        for(const [data, value] of Object.entries(dtSet)){
+            element.dataset[data] = value;
+        }
+    }
+
+    return element;
+}
+
+
+function getRandomID(){
+    return Math.random().toString(36).replace('0.', '');
+}
+
+async function generateAlert(type, text){
+    const alert = document.createElement('div');
+    alert.classList.add('alert');
+    alert.classList.add(type);
+    alert.appendChild(document.createTextNode(text));
+    return alert;
+}
+
+async function removeAlert(){
+    const alerts = document.querySelectorAll('.alert');
+    if(alerts && alerts.length){
+        for(const alert of alerts){
+            alert.remove();
+        }
+    }
 }
--- a/rss/js/menu.js
+++ b/rss/js/menu.js
@@ -1,7 +0,0 @@
-const burger = document.querySelector('.burger');
-const navLinks = document.querySelector('.nav-links');
-
-burger.addEventListener('click', () => {
-    navLinks.classList.toggle('nav-active');
-    burger.classList.toggle('toggle');
-});
--- a/rss/js/properties.js
+++ b/rss/js/properties.js
@@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', async () =>{
+    await getParams();
+})
+
+async function getParams() {
+    const queryString = window.location.search;
+    const params = new URLSearchParams(queryString);
+    const paramsObject = {};
+    for (const key of params.keys()) {
+        if (key.endsWith('[]')) {
+        
+            const cleanKey = key.replace('[]', '');
+            paramsObject[cleanKey] = params.getAll(key);
+        } else {
+        
+            paramsObject[key] = params.get(key);
+        }
+    }
+
+    return paramsObject;
+}
--- a/rss/json/countries.json
+++ b/rss/json/countries.json
--- a/rss/json/pages/404.json
+++ b/rss/json/pages/404.json
@@ -0,0 +1,8 @@
+{
+    "title": "Not found",
+    "long_desc": "Page or property was not found",
+    "short_desc": "Page or property was not found",
+    "template": "404",
+    "restricted": false,
+    "redirect_login": false
+}
--- a/rss/json/pages/create-account.json
+++ b/rss/json/pages/create-account.json
@@ -0,0 +1,8 @@
+{
+    "title": "Create account",
+    "long_desc": "Testing the description!",
+    "short_desc": "Test desc",
+    "template": "create-account",
+    "restricted": false,
+    "redirect_login": true
+}
--- a/rss/json/pages/index.json
+++ b/rss/json/pages/index.json
@@ -0,0 +1,8 @@
+{
+    "title": "Home",
+    "long_desc": "Testing the description!",
+    "short_desc": "Test desc",
+    "template": "index",
+    "restricted": false,
+    "redirect_login": false
+}
--- a/rss/json/pages/login.json
+++ b/rss/json/pages/login.json
@@ -0,0 +1,8 @@
+{
+    "title": "Login",
+    "long_desc": "Testing the description!",
+    "short_desc": "Test desc",
+    "template": "login",
+    "restricted": false,
+    "redirect_login": true
+}
--- a/rss/php/autoload.php
+++ b/rss/php/autoload.php
@@ -0,0 +1,11 @@
+<?php
+    spl_autoload_register(function ($class){
+        $class = str_replace('App\\', '', $class);
+        $class = str_replace('\\', '/', $class);
+
+        $file = $_SERVER['DOCUMENT_ROOT'] . '/rss/php/class/'.$class.'.php';
+
+        if(file_exists($file)){
+            require_once($file);
+        }
+    });
--- a/rss/php/class/Main.php
+++ b/rss/php/class/Main.php
@@ -0,0 +1,56 @@
+<?php
+namespace App;
+require_once($_SERVER['DOCUMENT_ROOT'] . '/rss/php/autoload.php');
+
+use PDO;
+use PDOException;
+use Exception;
+
+class Main extends Sys{
+
+
+    public function __construct(){
+        
+    }
+
+    public function getCountryData() {
+    $csvPath = $_SERVER['DOCUMENT_ROOT'] . '/rss/csv/worldcities.csv';
+    if (!file_exists($csvPath)) {
+        return ['status' => 'error', 'message' => 'CSV file not found'];
+    }
+
+    $handle = fopen($csvPath, 'r');
+    if (!$handle) {
+        return ['status' => 'error', 'message' => 'Failed to open CSV'];
+    }
+
+    $header = fgetcsv($handle);
+    $countryData = [];
+
+    while (($row = fgetcsv($handle)) !== false) {
+        $rowData = array_combine($header, $row);
+
+        $country = $rowData['country'] ?? null;
+        $city = $rowData['city'] ?? null;
+        $state = $rowData['admin_name'] ?? null;
+
+        if (!$country || !$city) {
+            continue;
+        }
+
+        $cityObj = ['city' => $city];
+        if ($state && $state !== $city) {
+            $cityObj['state'] = $state;
+        }
+
+        if (!isset($countryData[$country])) {
+            $countryData[$country] = [];
+        }
+
+        $countryData[$country][] = $cityObj;
+    }
+
+    fclose($handle);
+        return $this->createResponse('success', $countryData);
+    }
+}
--- a/rss/php/class/Sys.php
+++ b/rss/php/class/Sys.php
@@ -0,0 +1,34 @@
+<?php
+namespace App;
+require_once($_SERVER['DOCUMENT_ROOT'] . '/rss/php/autoload.php');
+require_once($_SERVER['DOCUMENT_ROOT'] . '/rss/php/conf.php');
+
+use PDO;
+use PDOException;
+use Exception;
+use stdClass;
+
+class Sys{
+    protected $conn;
+
+    public function __construct(){
+        global $conn;
+        $this->conn = $conn;
+    }
+
+    public function validateVar($val){
+        if(isset($val) && !empty($val) && $val){
+            return true;
+        }else{
+            return false;
+        }
+    }
+
+    protected function createResponse($status, $message = null, $info = null){
+        $resp = new stdClass();
+        $resp->status = $status;
+        $resp->message = $message;
+        $resp->info = $info;
+        return $resp;
+    }
+}
--- a/rss/php/conf.php
+++ b/rss/php/conf.php
@@ -0,0 +1,36 @@
+<?php
+    if(file_exists($_SERVER['DOCUMENT_ROOT'] . '/.env')){
+        $lines = file($_SERVER['DOCUMENT_ROOT'] . '/.env', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+
+        if(isset($lines) && !empty($lines)){
+            foreach($lines as $line){
+                if(strpos(trim($line), '#') === 0){
+                    continue;
+                }
+
+                list($name, $value) = explode('=', $line, 2);
+                $name = trim($name);
+                $value = trim($value);
+
+                $value = trim($value, '"\'');
+
+                putenv("$name=$value");
+            }
+        }
+    }
+    
+    try{
+        $db_user    = getenv("DB_USER");
+        $db_pass    = getenv("DB_PASS");
+        $db_server  = getenv("DB_SERVER");
+        $db_name    = getenv("DB_NAME");
+
+        $conn = new PDO("mysql:host=$db_server;dbname=$db_name;charset=utf8mb4", $db_user, $db_pass);
+        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+    }catch(PDOException $e){
+        var_dump($e);
+        echo json_encode('Connection exception');
+        exit();
+    }
+
+?>
--- a/rss/php/handler.php
+++ b/rss/php/handler.php
@@ -0,0 +1,58 @@
+<?php
+    require_once($_SERVER['DOCUMENT_ROOT'] . '/rss/php/autoload.php');
+    use App\Main;
+
+    $classList = array(
+        'Main' => Main::class,
+    );
+
+    session_start();
+
+    if(file_exists($_SERVER['DOCUMENT_ROOT'] . '/rss/php/conf.php')){
+        require_once($_SERVER['DOCUMENT_ROOT'] . '/rss/php/conf.php');
+    }
+    
+    if(isset($_POST['function']) && !empty($_POST['function']) && isset($_POST['target']) && !empty($_POST['target'])){
+        $t_class = trim($_POST['target']);
+        $t_func = trim($_POST['function']);
+        if(array_key_exists($t_class, $classList) && class_exists($classList[$t_class])){
+            if(method_exists($classList[$t_class], $t_func)){
+                $_class = new $classList[$t_class];
+
+                if(count($_POST) > 2){
+                    foreach($_POST as $prop => $val){
+                        if(property_exists($classList[$t_class], $prop)){
+                            $_class->$prop = $val;
+                        }
+                    }
+                }
+
+                if(isset($_FILES) && !empty($_FILES)){
+                    foreach($_FILES as $prop => $val){
+                        if(property_exists($classList[$t_class], $prop)){
+                            $_class->$prop = $val;
+                        }
+                    }
+                }
+
+                $response = $_class->$t_func();
+                if($response){
+                    $msg = $response;
+                }else{
+                    $msg = new stdClass();
+                    $msg->status = 'fail';
+                    $msg->message = $response;
+                }
+            }else{
+                $msg = new stdClass();
+                $msg->status = 'fail';
+                $msg->message = 'Invalid function';
+            }
+        }else{
+            $msg = new stdClass();
+            $msg->status = 'fail';
+            $msg->message = 'Invalid class';
+        }
+    }
+
+    die(json_encode($msg));
--- a/rss/php/includes/footer.php
+++ b/rss/php/includes/footer.php
@@ -1,45 +1,28 @@
-<script src="/rss/js/menu.js"></script>
-
 <?php
-    $pre_page = $_SERVER['PHP_SELF'];
-    $page = str_replace('/', '', $pre_page);
-    $page = str_replace('.php', '', $page);
-
-    if($page == 'index'){
-        echo '<script src="/rss/js/home.js"></script>';
-    }
-
-    if($page == 'signin'){
-        echo '<script src="/rss/js/login.js"></script>';
-    }
+global $pageInfo;
+if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/rss/js/' . $pageInfo['template'] .'.js')){
+    echo '<script src="/rss/js/' . $pageInfo['template'] .'.js"></script>';
+}
 ?>
+
 <footer>
-<div class="footer-inner">
-    <div class="footer-col">
-        <div class="footer-menu">
-            <h3 class="link-title">Links</h3>
-            <ul>
-                <li><a href="/">Home</li>
-                <li><a href="/signin">Sign in</a></li>
-                <li><a href="/about">About</a></li>
-            </ul>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12 col-md-3 d-flex align-center">
+                <a href="/"><img src="/rss/img/logo-light.png" class="logo"></a>
+            </div>
+            <div class="col-sm-12 col-md-3">
+                <h4>Links</h4>
+                <ul>
+                    <li>Home</li>
+                </ul>
+            </div>
+            <div class="col-sm-12 col-md-3">
+                <h4>Contact</h4>
+                <ul>
+                    <li>Info</li>
+                </ul>
+            </div>
        </div>
    </div>
-    <div class="footer-col">
-        <div class="footer-menu">
-            <h3 class="link-title">Contact</h3>
-            <ul>
-                <li>Support: <a href="mailto:support@stellaamor.com">support@stellaamor.com</li>
-                <li>Contact: <a href="mailto:info@stellaamor.com">info@stellaamor.com</a></li>
-            </ul>
-        </div>
-    </div>
-    <div class="footer-col img">
-        <div class="image-container">
-            <img src="/rss/img/logo-light.png">
-        </div>
-    </div>
-</div>
-</footer>
-</body>
-</html>
+</footer>
--- a/rss/php/includes/header.php
+++ b/rss/php/includes/header.php
@@ -1,72 +1,82 @@
+<?php
+$menu = array(
+    'Home' => '/',
+    'Create account' => '/create-account',
+    'Login' => '/login',
+    'About us' => '/about-us',
+);
+$pageTitle = htmlspecialchars($pageTitle ?? 'Stella Amor | Free Dating with Ultimate Match Filters', ENT_QUOTES, 'UTF-8');
+$pageDescription = htmlspecialchars($pageDescription ?? 'Free dating! Ultimate filters for wealth, kinks, fetishes, & passions. Meet your perfect match now!', ENT_QUOTES, 'UTF-8');
+?>
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <!-- Basic Meta Tags -->
+    <!-- Defaults -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Stella Amor | <?php echo $page_title;?></title>
+    <title><?php echo $pageTitle; ?></title>
+    <meta name="description" content="<?php echo $pageDescription; ?>">
+    <meta name="author" content="Stella Amor">
+    <meta name="keywords" content="free dating, online dating, match filters, finance, kinks, fetishes, lifestyle dating">
+    <link rel="canonical" href="https://stellaamor.com<?php echo isset($_GET['page']) ? '/' . htmlspecialchars(basename($_GET['page']), ENT_QUOTES, 'UTF-8') : ''; ?>">

-    <!-- Meta Description -->
-    <meta name="description" content="<?php echo $page_description;?> ">
-    <meta name="keywords" content="dating">
-
-    <!-- Open Graph Tags for Social Media -->
-    <meta property="og:title" content="Stella Amor |  <?php echo $page_title;?>">
-    <meta property="og:description" content="<?php echo $page_description;?>">
-    <meta property="og:image" content="https://stellaamor.com/rss/img/logo.png">
-    <meta property="og:url" content="https://stellaamor.com<?php echo $_SERVER['REQUEST_URI'];?>">
-    <meta property="og:type" content="website">
-
-    <!-- Twitter Card Meta Tags -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="Stella Amor |  <?php echo $page_title;?>">
-    <meta name="twitter:description" content="<?php echo $page_description;?>">
-    <meta name="twitter:image" content="https://stellaamor.com/rss/img/logo.png">
-
-
-    <link rel="icon" type="image/png" href="/rss/favicon/favicon-96x96.png" sizes="96x96" />
-    <link rel="icon" type="image/svg+xml" href="/rss/favicon/favicon.svg" />
-    <link rel="shortcut icon" href="/rss/favicon/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/rss/favicon/apple-touch-icon.png" />
-    <link rel="manifest" href="/rss/favicon/site.webmanifest" />
-    
-    <!-- Canonical Link (for duplicate pages) -->
-    <link rel="canonical" href="https://stellaamor.com<?php echo rtrim($_SERVER['REQUEST_URI'], '/'); ?>">
-    <!-- Google tag (gtag.js) -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-7LSPWJ1YKX"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-
-  gtag('config', 'G-7LSPWJ1YKX');
-</script>
-
-    <!-- Favicon -->
-    <link rel="icon" href="/favicon.ico" type="image/x-icon">
-
-    <!-- Robots Meta Tag (for search engine crawling control) -->
+    <!-- Robots -->
    <meta name="robots" content="index, follow">

-    <!-- Include css and JS -->
+    <!-- Open Graph -->
+    <meta property="og:title" content="<?php echo $pageTitle; ?>">
+    <meta property="og:description" content="<?php echo $pageDescription; ?>">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://stellaamor.com<?php echo htmlspecialchars($_SERVER['REQUEST_URI'], ENT_QUOTES, 'UTF-8'); ?>">
+    <meta property="og:image" content="https://stellaamor.com/rss/img/logo.png">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="<?php echo $pageTitle; ?>">
+    <meta name="twitter:description" content="<?php echo $pageDescription; ?>">
+    <meta name="twitter:image" content="https://stellaamor.com/rss/img/logo.png">
+
+    <!-- Favicon -->
+    <link rel="icon" href="/rss/img/favicon.ico" type="image/x-icon">
+    <link rel="apple-touch-icon" href="/rss/img/apple-touch-icon.png">
+
+    <!-- Stylesheets -->
+    <link rel="preload" href="/rss/css/main.css" as="style">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
-     <link href="/rss/css/main.css" rel="stylesheet">
-    <body>
-    
-    <!-- Begin menu -->
-    <nav class="navbar">
-    <div class="container">
-        <a href="/" class="logo"><img src="/rss/img/logo.png"></a>
-        <ul class="nav-links">
-            <li><a href="/">Home</a></li>
-            <li><a href="signin">Login</a></li>
-            <li><a href="/about">About us</a></li>
-        </ul>
-        <div class="burger">
-            <span></span>
-            <span></span>
-            <span></span>
-        </div>
+    <link rel="stylesheet" href="/rss/css/main.css">
+    <link rel="stylesheet" href="/rss/css/theme.css" media="print" onload="this.media='all'">
+
+    <!-- JavaScript -->
+    <script src="/rss/js/main.js" defer></script>
+
+    <!-- Structured Data (JSON-LD) -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Organization",
+      "name": "Stella Amor",
+      "url": "https://stellaamor.com",
+      "logo": "https://stellaamor.com/rss/img/logo.png",
+      "description": "Stella Amor: Free online dating with advanced filters for lifestyle, finance, kinks, and more. Find your perfect match today."
+    }
+    </script>
+</head>
+<body>
+<header>
+    <div class="logo">
+        <a href="/">
+            <img src="/rss/img/logo.png" alt="Stella Amor Logo" width="150" height="50">
+        </a>
    </div>
-</nav>
+    <button class="menu-toggle" aria-label="Toggle navigation">☰</button>
+    <nav>
+        <?php 
+        $currentPage = $_SERVER['REQUEST_URI'];
+        foreach($menu as $name => $link): 
+            $isActive = ($currentPage === $link) ? 'active' : '';
+            $ariaCurrent = ($currentPage === $link) ? ' aria-current="page"' : '';
+        ?>
+            <a href="<?php echo $link; ?>" class="menu-item <?php echo $isActive; ?>"<?php echo $ariaCurrent; ?>><?php echo $name; ?></a>
+        <?php endforeach; ?>
+    </nav>
+</header>
--- a/rss/php/pageHandler.php
+++ b/rss/php/pageHandler.php
@@ -0,0 +1,33 @@
+<?php
+    session_start();
+    require_once($_SERVER['DOCUMENT_ROOT'] . '/rss/php/autoload.php');
+    // require_once($_SERVER['DOCUMENT_ROOT'] . '/rss/php/conf.php');
+    $page = isset($_GET['page']) && !empty($_GET['page']) ? str_replace('.php', '', $_GET['page']) : 'index';
+    if($page == '404'){
+        http_response_code(404);
+    }
+
+    if(file_exists($_SERVER['DOCUMENT_ROOT'] . '/rss/json/pages/' . $page . '.json')){
+        // Load page configuration
+        $jsonInfo = file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/rss/json/pages/' . $page .'.json');
+        $pageInfo = json_decode($jsonInfo, true);
+        
+    }else{
+        http_response_code(404);
+        header('location:/404');
+        die('Not found');
+    }
+?>
+
+<?php
+    function loadContents(){
+        global $pageInfo;
+        if(file_exists($_SERVER['DOCUMENT_ROOT'] . '/rss/php/templates/'.$pageInfo['template'].'.php')){
+            include($_SERVER['DOCUMENT_ROOT'] . '/rss/php/templates/'.$pageInfo['template'].'.php');
+        }else{
+            http_response_code(404);
+            header('location:/404');
+            exit();
+        }
+    }
+?>
--- a/rss/php/templates/404.php
+++ b/rss/php/templates/404.php
@@ -0,0 +1 @@
+<h2>This page was not found</h2>
--- a/rss/php/templates/index.php
+++ b/rss/php/templates/index.php
@@ -0,0 +1,322 @@
+<main>
+    <div class="home-banner">
+        <div class="home-banner-inner">
+            <div class="container">
+                <div class="inner-row">
+                    <div class="text-col">
+                        <h1 class="title mb-3">Discover <span class="text-primary">Your Love Story</span> with Stella Amor</h1>
+                        <p class="lead mb-1">Join free today with unique date filters for finance, kinks, lifestyle, and beyond. Start exploring now!</p>
+                        <a href="/signup" class="mb-3 btn btn-dark cta-btn">Sign up today</a>
+                        <p class="login-text">Already have an account? <a href="/login" class="login-link">Login now</a></p>
+                    </div>
+                    <div class="image-col">
+                        <div class="image-wrapper">
+                            <img src="/rss/img/couple_sunset.jpg" alt="Couple at sunset">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <section class="features-section py-4 bg-white">
+        <div class="container border-top text-light py-4">
+            <h2 class="text-center mb-2 fw-light text-black">Discover Your Ideal Match Today</h2>
+            <div class="row text-black">
+                <div class="col-12 col-md-4">
+                    <div class="theme-card primary card-hover">
+                        <div class="card-header theme-header">
+                            <img src="/rss/img/yacht.jpg" alt="Financial compatibility couple" class="rounded-image object-bottom">
+                        </div>
+                        <div class="card-body">
+                            <h3 class="h3 fw-light">Financial Harmony</h3>
+                            <p class="text">Match with singles who align with your financial dreams, from savings to luxury lifestyles.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-md-4">
+                    <div class="theme-card secondary card-hover">
+                        <div class="card-header theme-header">
+                            <img src="/rss/img/kink.jpg" alt="Kinks and fetishes compatibility couple" class="rounded-image object-left">
+                        </div>
+                        <div class="card-body">
+                            <h3 class="h3 fw-light">Unique Preferences</h3>
+                            <p class="text">Find love with filters for kinks and personal desires tailored just for you.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-md-4">
+                    <div class="theme-card primary card-hover">
+                        <div class="card-header theme-header">
+                            <img src="/rss/img/family-frame.jpg" alt="Lifestyle compatibility couple" class="rounded-image object-bottom">
+                        </div>
+                        <div class="card-body">
+                            <h3 class="h3 fw-light">Lifestyle Connections</h3>
+                            <p class="text">Connect with partners who share your passion for pets, fitness, or family values.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex justify-center mt-3">
+                <a href="/create-account" class="btn btn-dark" title="Explore Stella Amor filters" aria-label="Explore filters">Explore Your Options</a>
+            </div>
+        </div>
+    </section>
+
+
+    <section>
+        <div class="py-5 display-banner wedding-banner">
+            <div class="container">
+                <div class="flex-column justify-center align-center">
+                    <h3 class="text-white">Uncover True Love and Marriage with Free Dating</h3>
+                    <p class="text-white">Join free today at Stella Amor to connect with your lifelong partner using unique date filters for finance, kinks, lifestyle, and much more.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+    <section class="bg-white py-4">
+        <div class="container my-3">
+            <div class="row align-items-center">
+                <div class="col-12 col-md-5">
+                    <div class="rounded-col-image">
+                        <img src="/rss/img/couple-beach.jpg" alt="Stella Amor dating experience">
+                    </div>
+                </div>
+                <div class="col-12 col-md-7 flex-column justify-center">
+                    <h2 class="mb-3">Join the Best <span class="bolder text-primary">Dating Platform </span> with Advanced Filters</h2>
+                    <p>Stella Amor offers free dating with advanced filters for finance, kinks, lifestyle, and more. Connect with singles who truly align with your values and passions. Start your journey to love today with a platform designed for your unique preferences!</p>
+                    <div class="d-flex mt-3">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <div class="container border-top text-light" aria-hidden="true"></div>
+
+    <section class="py-2 bg-white">
+        <div class="container my-5">
+            <div class="row align-items-center">
+                <div class="col-12 col-md-5">
+                    <img src="/rss/img/couple-luxury.jpg" alt="Free dating with economy filters on Stella Amor" class="img-w-100 img-rounded-lg shadow-2">
+                </div>
+                <div class="col-12 col-md-7 flex-column justify-center">
+                    <h2 class="mb-3">Find Love with Economy Compatibility</h2>
+                    <p>Stella Amor’s free dating platform lets you filter for financial compatibility, connecting you with singles who share your economic goals. Start building a stable future with the right partner today!</p>
+                    <div class="d-flex mt-3">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="container my-5">
+            <div class="row align-items-center">
+                <div class="col-12 col-md-7 flex-column justify-center">
+                    <h2 class="mb-3">Explore Love with Kinks & Preferences</h2>
+                    <p>Discover your ideal match on Stella Amor with advanced filters for kinks and unique preferences. Join free to find a partner who embraces your desires on this top dating site!</p>
+                </div>
+                <div class="col-12 col-md-5">
+                    <img src="/rss/img/fetish.jpg" alt="Free dating with kinks filters on Stella Amor" class="img-w-100 img-rounded-lg shadow-2">
+                </div>
+            </div>
+        </div>
+
+        <div class="container my-5">
+            <div class="row align-items-center">
+                <div class="col-12 col-md-5">
+                    <img src="/rss/img/family-pregnant.jpg" alt="Free dating with family filters on Stella Amor" class="img-w-100 img-rounded-lg shadow-2">
+                </div>
+                <div class="col-12 col-md-7 flex-column justify-center">
+                    <h2 class="mb-3">Build a Family with Lifestyle Matching</h2>
+                    <p>Stella Amor offers free dating with filters for family values and lifestyle, helping you find a lifelong partner ready for marriage and a shared future. Join now!</p>
+                    <div class="d-flex mt-3">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="success-stories bg-white">
+    <div class="container text-light border-top border-bottom py-4 mb-3">
+        <div class="text-black">
+            <h2 class="mb-4 text-center">Love Found on Stella Amor</h2>
+            <div class="row">
+                <div class="col-12 col-md-4">
+                    <div class="theme-card primary">
+                        <div class="inner">
+                            <p class="text">“The finance filter helped us align our goals!” – K & M</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-md-4">
+                    <div class="theme-card secondary">
+                        <div class="inner">
+                            <p class="text">“Kink filters made finding my match effortless!” – P & J</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-12 col-md-4">
+                    <div class="theme-card primary">
+                        <div class="inner">
+                            <p class="text">“Found my pet-loving soulmate!” – S & T</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex justify-center mt-4">
+                <a href="/success-stories" class="btn btn-outline-primary" title="Read more Stella Amor success stories" aria-label="Read more success stories">Read More Stories</a>
+            </div>
+        </div>
+        <script type="application/ld+json">
+            {
+                "@context": "https://schema.org",
+                "@type": "Review",
+                "itemReviewed": {
+                    "@type": "Organization",
+                    "name": "Stella Amor"
+                },
+                "reviewRating": {
+                    "@type": "Rating",
+                    "ratingValue": 5
+                },
+                "author": {
+                    "@type": "Person",
+                    "name": "K & M"
+                },
+                "reviewBody": "The finance filter helped us align our goals!"
+            }
+        </script>
+        </div>
+</section>
+
+
+    <section class="filter-section bg-accent-white py-4">
+        <div class="container my-5">
+            <h2 class="mb-4 text-center">What You Can Filter By</h2>
+            <div class="row g-4">
+                <div class="col-12 col-md-6 col-lg-4 my-2">
+                    <div class="filter-card">
+                        <div class="filter-icon">
+                            <i class="mdi mdi-currency-usd"></i> <!-- Finance icon -->
+                        </div>
+                        <h3 class="filter-title">Financial Goals & Spending Habits</h3>
+                        <p class="filter-text">Find partners aligned with your wealth dreams, from savings to luxury lifestyles.</p>
+                    </div>
+                </div>
+                <div class="col-12 col-md-6 col-lg-4 my-2">
+                    <div class="filter-card">
+                        <div class="filter-icon">
+                            <i class="mdi mdi-handcuffs"></i> <!-- Kinks icon -->
+                        </div>
+                        <h3 class="filter-title">Fetishes & Personalities</h3>
+                        <p class="filter-text">Connect with those who share your unique desires and preferences.</p>
+                    </div>
+                </div>
+                <div class="col-12 col-md-6 col-lg-4 my-2">
+                    <div class="filter-card">
+                        <div class="filter-icon">
+                            <i class="mdi mdi-paw"></i> <!-- Lifestyle icon -->
+                        </div>
+                        <h3 class="filter-title">Lifestyle (Pets, Fitness, Diets)</h3>
+                        <p class="filter-text">Match with partners who vibe with your pet love, fitness, or dietary choices.</p>
+                    </div>
+                </div>
+                <div class="col-12 col-md-6 col-lg-4 my-2">
+                    <div class="filter-card">
+                        <div class="filter-icon">
+                            <i class="mdi mdi-eye"></i> <!-- Eye Colors icon -->
+                        </div>
+                        <h3 class="filter-title">Eye Colors & Hair Styles</h3>
+                        <p class="filter-text">Filter by physical traits to find your visually perfect match.</p>
+                    </div>
+                </div>
+                <div class="col-12 col-md-6 col-lg-4 my-2">
+                    <div class="filter-card">
+                        <div class="filter-icon">
+                            <i class="mdi mdi-human-male-female"></i> <!-- Body Types icon -->
+                        </div>
+                        <h3 class="filter-title">Body Types & Ethnicities</h3>
+                        <p class="filter-text">Discover love based on body preferences and cultural backgrounds.</p>
+                    </div>
+                </div>
+                <div class="col-12 col-md-6 col-lg-4 my-2">
+                    <div class="filter-card">
+                        <div class="filter-icon">
+                            <i class="mdi mdi-school"></i> <!-- Education icon -->
+                        </div>
+                        <h3 class="filter-title">Education & Travel Preferences</h3>
+                        <p class="filter-text">Connect with those who share your academic and travel passions.</p>
+                    </div>
+                </div>
+                <div class="col-12 col-md-6 col-lg-4 my-2">
+                    <div class="filter-card">
+                        <div class="filter-icon">
+                            <i class="mdi mdi-heart-pulse"></i> <!-- Health icon -->
+                        </div>
+                        <h3 class="filter-title">Health Habits & Exercise Frequency</h3>
+                        <p class="filter-text">Find matches with similar health and fitness routines.</p>
+                    </div>
+                </div>
+                <div class="col-12 col-md-6 col-lg-4 my-2">
+                    <div class="filter-card">
+                        <div class="filter-icon">
+                            <i class="mdi mdi-briefcase"></i> <!-- Job Roles icon -->
+                        </div>
+                        <h3 class="filter-title">Job Roles & Living Arrangements</h3>
+                        <p class="filter-text">Align with partners based on career and living situations.</p>
+                    </div>
+                </div>
+                <div class="col-12 col-md-6 col-lg-4 my-2">
+                    <div class="filter-card">
+                        <div class="filter-icon">
+                            <i class="mdi mdi-church"></i> <!-- Religion icon -->
+                        </div>
+                        <h3 class="filter-title">Religion & Languages</h3>
+                        <p class="filter-text">Meet those who share your faith and linguistic background.</p>
+                    </div>
+                </div>
+                <div class="col-12 col-md-6 col-lg-4 my-2">
+                    <div class="filter-card">
+                        <div class="filter-icon">
+                            <i class="mdi mdi-movie"></i> <!-- Hobbies icon -->
+                        </div>
+                        <h3 class="filter-title">Hobbies & Movie Genres</h3>
+                        <p class="filter-text">Bond over shared interests and favorite films.</p>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex justify-center mt-4 pt-5">
+                <a href="/create-account" class="btn btn-white me-2">Join Free Now</a>
+            </div>
+            <p class="text-center mt-3">Stella Amor offers the best free dating filters to customize your search and start your love journey today!</p>
+        </div>
+    </section>
+</main>
+
+<!-- FIX THIS BEFORE RELASE -->
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const sections = document.querySelectorAll('section');
+
+        const observer = new IntersectionObserver(
+            (entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('visible');
+                        observer.unobserve(entry.target); // Stop observing after animation
+                    }
+                });
+            }, {
+                threshold: 0.05, // Trigger when 10% of section is visible
+                rootMargin: '0px 0px -50px 0px' // Trigger 50px before fully in view
+            }
+        );
+
+        sections.forEach(section => {
+            section.classList.add('section-animation');
+            observer.observe(section);
+        });
+    });
+</script>
--- a/rss/php/templates/login.php
+++ b/rss/php/templates/login.php
@@ -0,0 +1,37 @@
+<div class="bg-light full-height d-flex align-center">
+    <div class="container">
+        <div class="row py-4 no-wrap">
+            <div class="col-12 col-md-6 rel neg-col d-flex align-center">
+                <div class="card shadow-3">
+                    <h2>Login</h2>
+                    <form method="POST" action="#" id="loginForm">
+                        <div class="form-group">
+                            <label for="email">Email</label>
+                            <input type="email" class="form-input" id="email" name="email">
+                        </div>
+
+                        <div class="form-group">
+                            <label for="password">Passowrd</label>
+                            <input type="password" class="form-input" id="password" name="password">
+                        </div>
+                        <div class="row">
+                            <div class="col-sm-4">
+                                <div class="form-group">
+                                    <button class="btn secondary">Login</button>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            <div class="col-12 col-md-8">
+                <div class="card bg-alt rel has-neg-col shadow-4 py-5">
+                    <h2 class="text-white">Log In to Your Real Estate Account</h2>
+                    <p class="text-white">Ready to manage your properties? Log in to Globalestatenet and get started in seconds. From your dashboard, you can update your global property listings, respond to inquiries, and connect with buyers and renters across the world—all from one easy-to-use platform.</p>
+                    <p class="text-white">For broker agency members, this platform is built to help you grow. After logging in, add your team members to your account, so each employee can create and manage listings that reach international clients. It’s a simple way to expand your agency’s presence in the global real estate market.</p>
+                    <p class="text-white">Listing with us is budget-friendly: every property listing costs the same price, whether it’s a small apartment or a luxury estate. You can add up to 100 photos to each listing for free, with no hidden fees. Want more visibility? The only extra cost is for featured listings to help your properties stand out. Don’t have an account yet?<br><a href="/create-account.php" class="btn secondary">Create account</a></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["variables.scss","theme.scss","theme.css"],"names":[],"mappings":"AAAA,gBAAA;AAIA,gBAAA;AAmBA,kBAAA;AAGA,kBAAA;AAmBA,kBAAA;AAGA,2BAAA;AAoBA,mBAAA;AAyBA,+BAAA;AAQA,eAAA;ACnGA;EACI,aAAA;EACA,8BAAA;EACA,oBAAA;EACA,yBAAA;EACA,mBAAA;EACA,+CAAA;EACA,kBAAA;EACA,YAAA;EACA,iCAAA;ACQJ;ADNI;EACI,YAAA;EACA,aAAA;EACA,eAAA;ACQR;ADNQ;EACI,WAAA;EACA,YAAA;ACQZ;ADJI;EACI,aAAA;EACA,kBAAA;ACMR;ADJQ;EACI,cAAA;EACA,gBAAA;EACA,kBAAA;EACA,qBAAA;EACA,kBAAA;EACA,sBAAA;EACA,eAAA;ACMZ;ADJY;EACI,iBAAA;ACMhB;ADFY;EACI,WAAA;EACA,kBAAA;EACA,SAAA;EACA,OAAA;EACA,WAAA;EACA,WAAA;EACA,mBAAA;EACA,oBAAA;EACA,sBAAA;EACA,0BAAA;ACIhB;ADDY;EACI,cAAA;EACA,eAAA;ACGhB;ADAY;EACI,oBAAA;ACEhB;;ADIA;EACE,0BAAA;EACA,eAAA;EACA,aAAA;EACA,yBAAA;EACA,UAAA;EACA,0CAAA;ACDF;ADME;EAXF;IAYI,aAAA;ECHF;AACF;ADKE;EACE,OAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACHJ;ADMI;EACI,YAAA;ACJR;ADOI;EACI,aAAA;EACA,8BAAA;EACA,oBAAA;EACA,YAAA;ACLR;ADOQ;EANJ;IAOQ,sBAAA;ECJV;AACF;ADOI;EACE,aAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;ACLN;ADOM;EACE,mBAAA;EACA,0CAAA;ACLR;ADSI;EACE,aAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,SAAA;ACPN;ADSM;EAPF;IAQI,cAAA;IACA,eAAA;IACA,kBAAA;IACA,UAAA;ECNN;AACF;ADQM;EACE,gBAAA;EACA,iBAAA;EACA,gBAAA;EACA,iCDhCW;AE0BnB;ADQQ;EANF;IAOM,iBAAA;ECLV;AACF;ADQM;EACE,iBAAA;EACA,gBAAA;ACNR;ADQQ;EAJF;IAKM,iBAAA;ECLV;AACF;ADOM;EACE,aAAA;EACA,iBAAA;ACLR;ADOM;EACE,oBAAA;EACA,QAAA;EACA,gBAAA;ACLR;ADMQ;EACI,gBAAA;EACA,0BAAA;EACA,eAAA;ACJZ;ADSI;EACE,OAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,YAAA;ACPN;ADSM;EAPF;IAQI,kBAAA;IACA,MAAA;IACA,OAAA;IACA,YAAA;IACA,YAAA;IACA,UAAA;IACA,YAAA;ECNN;AACF;ADQM;EACE,YAAA;EACA,WAAA;EACA,oBAAA;KAAA,iBAAA;EACA,cAAA;ACNR;;ADeA;EACI,WAAA;EACA,kBAAA;ACZJ;ADcI;EACI,sGAAA;EAEA,kBAAA;EACA,kCAAA;EACA,sBAAA;ACbR;ADgBI;EACI,qGAAA;EAEA,+BAAA;EACA,sBAAA;EACA,kBAAA;ACfR;;ADoBA;EACI,yBAAA;EACA,WAAA;EACA,aAAA;EACA,iBAAA;EACA,eAAA;EACA,gBAAA;ACjBJ;ADmBI;EACI,YAAA;EACA,eAAA;ACjBR;ADoBI;EACI,gBAAA;AClBR;;ADwBI;EACI,iBAAA;EACA,cAAA;ACrBR;ADwBI;EACI,sBAAA;EACA,gBAAA;EACA,qDAAA;ACtBR;ADwBQ;EACI,eAAA;EACA,kBAAA;ACtBZ;ADwBY;EACI,YAAA;EACA,aAAA;EACA,kBAAA;EACA,yCAAA;EACA,oBAAA;KAAA,iBAAA;EACA,cAAA;ACtBhB;ADwBgB;EACI,+BAAA;KAAA,4BAAA;ACtBpB;ADwBgB;EACI,iCAAA;KAAA,8BAAA;ACtBpB;ADwBgB;EACI,iCAAA;KAAA,8BAAA;ACtBpB;AD2BQ;EACI,aAAA;EACA,kBAAA;ACzBZ;;ADgCA;EACI,iCAAA;AC7BJ;AD+BI;EACI,gBAAA;AC7BR;ADgCI;EACI,gBAAA;AC9BR;;ADmCA;EACE,eAAA;AChCF;;ADmCA;EACE,yBAAA;EACA,sBAAA;EACA,yCAAA;EACA,aAAA;EACA,kBAAA;EACA,qDAAA;EACA,YAAA;EACA,gBAAA;AChCF;;ADmCA;EACE,iBAAA;EACA,mBAAA;EACA,cAAA;AChCF;;ADmCA;EACE,iBAAA;EACA,gBAAA;EACA,qBAAA;EACA,cAAA;AChCF;;ADmCA;EACE,eAAA;EAEA,gBAAA;ACjCF;;ADoCA,2BAAA;AACA;EACE;IACE,qBAAA;ECjCF;EDmCA;IACE,eAAA;ECjCF;EDmCA;IACE,iBAAA;ECjCF;AACF;AD6CA;EACI,aAAA;EACA,YAAA;EACA,kBAAA;EACA,gBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,kBAAA;AC3CJ;AD6CI;EAVJ;IAWQ,YAAA;IACA,aAAA;EC1CN;AACF;AD4CI;EAfJ;IAgBQ,YAAA;IACA,aAAA;ECzCN;AACF;AD2CI;EACI,WAAA;EACA,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EAGA,gDAAA;EACA,UAAA;EACA,oBAAA;ACzCR;AD6CI;EACI,oBAAA;KAAA,iBAAA;EACA,yBAAA;KAAA,sBAAA;EACA,WAAA;EACA,YAAA;AC3CR;;ADgDI;EACI,iBAAA;EACA,gBAAA;AC7CR;AD+CI;EACI,iBAAA;EACA,gBAAA;AC7CR;ADgDI;EACI,iBAAA;EACJ,gBAAA;EACA,gBAAA;AC9CJ;ADiDI;EACI,gBAAA;AC/CR;;ADmDA;EACE,UAAA,EAAA,iBAAA;EACA,2BAAA,EAAA,6BAAA;EACA,0DAAA,EAAA,sBAAA;AChDF;;ADmDA;EACE,UAAA;EACA,wBAAA;AChDF;;ADmDA,qCAAA;AACA;EACE;IACE,UAAA;IACA,eAAA;IACA,gBAAA;EChDF;AACF;ADmDA;EACE;IACE,2BAAA;IACA,UAAA;ECjDF;EDmDA;IACE,wBAAA;IACA,UAAA;ECjDF;AACF","file":"theme.css"}
				`@@ -0,0 +1 @@`
				`{"version":3,"sources":["variables.scss"],"names":[],"mappings":"AAAA,gBAAA;AAIA,gBAAA;AAmBA,kBAAA;AAGA,kBAAA;AAoBA,kBAAA;AAGA,2BAAA;AAoBA,mBAAA;AAyBA,+BAAA;AAQA,eAAA","file":"variables.css"}`