ready faq

public/css/styles.css

@@ -38,56 +38,31 @@ html {
   --text-color: rgba(2, 0, 5, 0.80);
   --fz-default: 16px;
   --lh-default: 24px;
-  --h1: 44px;
-  --h2: 24px;
-  --h3: 20px;
-  --h4: 18px;
-  --l: 20px;
-  --m: 16px;
-  --s: 14px;
+  --h1: 24px;
+  --h2: 20px;
+  --h3: 18px;
+  --h4: 16px;
 }
 @media (max-width: 1199px) {
   :root {
     --container-width: 1199px;
     --fz-default: 16px;
     --lh-default: 26px;
-    --h1: 28px;
-    --h2: 20px;
-    --h3: 18px;
-    --h4: 16px;
-    --l: 20px;
-    --m: 16px;
-    --s: 14px;
-    --sp: 32px 0;
+    --h1: 22px;
+    --h2: 18px;
+    --h3: 16px;
+    --h4: 14px;
   }
 }
 @media (max-width: 768px) {
   :root {
     --container-width: 768px;
-    --fz-default: 16px;
-    --lh-default: 26px;
-    --h1: 28px;
-    --h2: 20px;
-    --h3: 18px;
-    --h4: 16px;
-    --l: 20px;
-    --m: 16px;
-    --s: 14px;
-    --sp: 32px 0;
-  }
-}
-@media (max-width: 575px) {
-  :root {
-    --container-width: 575px;
-    --fz-default: 16px;
-    --lh-default: 26px;
-    --h1: 24px;
+    --fz-default: 14px;
+    --lh-default: 20px;
+    --h1: 22px;
     --h2: 18px;
     --h3: 16px;
     --h4: 14px;
-    --l: 20px;
-    --m: 16px;
-    --s: 14px;
   }
 }
 
@@ -106,7 +81,6 @@ body {
   min-width: 360px;
   color: var(--text-color);
   position: relative;
-  background-color: #FFF;
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -118,6 +92,7 @@ h1 {
   font-weight: 600;
   font-size: var(--h1);
   line-height: 106%;
+  text-transform: uppercase;
 }
 
 h2 {
@@ -125,6 +100,7 @@ h2 {
   font-weight: 600;
   font-size: var(--h2);
   line-height: 125%;
+  text-transform: uppercase;
 }
 
 h3 {
@@ -213,6 +189,112 @@ h1, h2, h3, h4, h5, h6 {
 .text ol {
   list-style: decimal;
 }
+.text img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 12px;
+}
+.text .table-wrapper-scroll {
+  margin: 30px 0;
+}
+@media (max-width: 575px) {
+  .text .table-wrapper-scroll {
+    background: none;
+    border-radius: 0;
+    padding-bottom: 8px;
+    overflow-x: auto;
+    margin: 20px 0;
+  }
+  .text .table-wrapper-scroll::-webkit-scrollbar {
+    height: 4px;
+  }
+  .text .table-wrapper-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .text .table-wrapper-scroll::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-color);
+  }
+}
+.text .table-wrapper {
+  background: #E0E5EF;
+  border-radius: 9px;
+}
+@media (max-width: 575px) {
+  .text .table-wrapper.large-table {
+    width: 640px;
+  }
+}
+.text .table-wrapper table {
+  margin: 0;
+  padding: 0;
+}
+.text table {
+  margin: 0;
+  position: relative;
+  width: 100%;
+  table-layout: auto;
+  border-collapse: collapse;
+  border-radius: 9px;
+  overflow: hidden;
+  border: 1px solid var(--Solid-Black-10, rgba(2, 0, 5, 0.1));
+}
+.text table thead th, .text table thead td {
+  padding: 12px;
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.2em;
+  vertical-align: middle;
+  background: transparent;
+}
+@media (max-width: 575px) {
+  .text table thead th, .text table thead td {
+    vertical-align: middle;
+    font-size: 13px;
+    padding: 8px;
+  }
+}
+.text table tr:first-child th {
+  padding: 12px;
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.2em;
+  vertical-align: middle;
+}
+@media (max-width: 575px) {
+  .text table tr:first-child th {
+    vertical-align: middle;
+    font-size: 13px;
+    padding: 8px;
+  }
+}
+.text table tr:first-child:has(th) {
+  overflow: hidden;
+  height: auto !important;
+  background: #E0E5EF;
+}
+.text table tbody td {
+  padding: 12px;
+  vertical-align: middle;
+  word-wrap: break-word;
+}
+@media (max-width: 1199px) {
+  .text table tbody td {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media (max-width: 575px) {
+  .text table tbody td {
+    font-size: 13px;
+    padding: 8px;
+  }
+}
 
 .header {
   position: fixed;
@@ -221,6 +303,7 @@ h1, h2, h3, h4, h5, h6 {
   left: 0;
   height: 70px;
   z-index: 1000;
+  background: var(--header-color);
 }
 .header .container {
   display: flex;
@@ -328,6 +411,7 @@ h1, h2, h3, h4, h5, h6 {
 .header__burger-line {
   width: 100%;
   height: 3px;
+  background: #fff;
   border-radius: 2px;
   transition: all 0.3s ease;
 }
@@ -374,19 +458,35 @@ h1, h2, h3, h4, h5, h6 {
     transition: transform 0.3s ease;
     padding: 40px 20px;
     overflow-y: auto;
-    backdrop-filter: blur(10px);
   }
+}
+@media (max-width: 768px) and (max-width: 768px) {
+  .header__nav {
+    background: var(--body-bg-color);
+  }
+}
+@media (max-width: 768px) {
   .header__nav.active {
     transform: translateX(0);
   }
   .header__menu {
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
+    width: 100%;
     gap: 24px;
   }
   .header__menu-link {
     font-size: 18px;
   }
+}
+@media (max-width: 768px) and (max-width: 768px) {
+  .header__menu-link {
+    font-size: 16px;
+    background: var(--body-bg-color);
+    color: var(--text-color);
+  }
+}
+@media (max-width: 768px) {
   .header__actions {
     gap: 8px;
   }
@@ -400,50 +500,399 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-.container {
-  max-width: var(--container-width);
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
+.footer {
+  background: var(--footer-bg-color);
   display: flex;
+  gap: 32px;
+  padding: 48px 0;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  position: relative;
-  padding: 0 16px;
+  color: var(--text-color);
 }
-
-button.accent-color {
-  transition: filter 0.3s ease;
+@media (max-width: 768px) {
+  .footer {
+    gap: 24px;
+    padding: 32px 0;
+  }
 }
-button.accent-color:hover {
-  filter: brightness(0.85);
+.footer__content-inner {
+  display: flex;
+  align-items: flex-start;
+  gap: 60px;
+  align-self: stretch;
 }
-
-.main__btn {
-  position: relative;
-  margin: auto;
+@media (max-width: 768px) {
+  .footer__content-inner {
+    gap: 20px;
+    flex-direction: column;
+  }
+}
+.footer__text {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px; /* 142.857% */
+}
+@media (max-width: 768px) {
+  .footer__text {
+    font-size: 12px;
+    line-height: 18px;
+  }
+}
+.footer__logo {
+  width: 210px;
+  height: 48px;
+}
+@media (max-width: 768px) {
+  .footer__logo {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.footer__logo img {
+  width: 190px;
+  height: 44px;
+  display: block;
+  cursor: pointer;
+  -o-object-fit: contain;
+  object-fit: contain;
+  transition: opacity 0.3s ease;
+}
+.footer__bottom-imgs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;
+  align-self: stretch;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.footer__bottom-imgs img {
+  opacity: 0.4;
 }
-.main__btn a {
+@media (max-width: 768px) {
+  .footer__bottom-imgs {
+    gap: 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.footer__menu-list {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
+  gap: 24px;
+}
+@media (max-width: 768px) {
+  .footer__menu-list {
+    gap: 16px;
+  }
+}
+.footer__menu-item {
+  list-style: none;
+}
+.footer__menu-link {
+  color: var(--Main-White, #FFF);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+}
+.footer__menu-link:hover {
+  color: #fff;
+  opacity: 0.9;
+}
+.footer__copyright {
+  color: var(--Main-White, #FFF);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.btn-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 14px 32px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.5;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: none;
+}
+.btn--accent {
+  background: var(--accent-color);
+  color: #fff;
+}
+.btn--accent:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  opacity: 0.9;
+}
+.btn--accent:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.author {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-radius: 8px;
+}
+.author__img {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.author__img img {
   width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
 }
-.bottom-btn {
-  margin: auto;
-  width: 200px;
-  background: #c30054;
+.author__info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.author__name {
+  font-size: 14px;
+  font-weight: 600;
+}
+.author__date {
+  font-size: 12px;
+}
+
+.faq {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.faq__title {
+  margin: 0;
+  margin-bottom: 24px;
+  font-weight: 600;
+  color: var(--text-color);
+}
+.faq__item {
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid var(--content-border-color);
+  background: var(--content-bg-color);
+}
+.faq__item.active .faq__question::after {
+  transform: rotate(45deg);
+}
+.faq__item.active .faq__question::before {
+  transform: rotate(-45deg);
+}
+.faq__item.active .faq__answer {
+  max-height: 500px;
+  opacity: 1;
+}
+.faq__question {
+  padding: 20px 56px 20px 24px;
+  cursor: pointer;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  transition: background-color 0.2s ease;
+}
+.faq__question h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--text-color);
+}
+.faq__question::before, .faq__question::after {
+  content: "";
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  width: 16px;
+  height: 2px;
+  background-color: var(--text-color);
+  transition: transform 0.3s ease;
+}
+.faq__question::before {
+  transform: translateY(-50%);
+}
+.faq__question::after {
+  transform: translateY(-50%) rotate(90deg);
+}
+.faq__answer {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border-top: 1px dashed var(--content-border-color);
+}
+.faq__answer p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--text-color);
+  opacity: 0.8;
+}
+.faq__answer-inner {
+  padding: 24px;
+}
+
+.toc {
+  border-radius: 12px;
+  border: 1px solid var(--content-border-color);
+  background: var(--content-bg-color);
+  overflow: hidden;
+}
+.toc__header {
+  padding: 20px 56px 20px 24px;
+  cursor: pointer;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  transition: background-color 0.2s ease;
+}
+.toc__header:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+.toc__header::before, .toc__header::after {
+  content: "";
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  width: 16px;
+  height: 2px;
+  background-color: var(--text-color);
+  transition: transform 0.3s ease;
+}
+.toc__header::before {
+  transform: translateY(-50%) rotate(90deg);
+}
+.toc__header::after {
+  transform: translateY(-50%);
+}
+.toc__title {
+  margin: 0;
+  color: var(--Main-Back, #000);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  text-transform: uppercase;
+  color: var(--text-color);
+}
+@media (max-width: 768px) {
+  .toc__title {
+    font-size: 16px;
+  }
+}
+.toc__content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+.toc__list {
+  list-style: none;
+  margin: 0;
+  padding: 0 24px 24px 24px;
+  counter-reset: toc-counter;
+}
+.toc__list--nested {
+  padding: 8px 0 0 28px;
+  list-style: disc;
+  padding-left: 40px;
+}
+.toc__item {
+  margin-bottom: 8px;
+  position: relative;
+}
+.toc__item:last-child {
+  margin-bottom: 0;
+}
+.toc__item > .toc__link::before {
+  counter-increment: toc-counter;
+  content: counter(toc-counter) ". ";
+  font-weight: 600;
+  margin-right: 4px;
+}
+.toc__list--nested > .toc__item > .toc__link::before {
+  content: none;
+}
+.toc__link {
+  display: block;
+  color: var(--text-color);
+  text-decoration: none;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+.toc__link:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+  color: var(--link-color);
+}
+.toc__list--nested > .toc__item > .toc__link {
+  font-size: 13px;
+  padding-left: 8px;
+}
+.toc.active .toc__header::before {
+  transform: translateY(-50%) rotate(45deg);
+}
+.toc.active .toc__header::after {
+  transform: translateY(-50%) rotate(-45deg);
+}
+.toc.active .toc__content {
+  max-height: 1000px;
 }
 
 body {
-  background: #fff !important;
   padding-top: 70px;
-  color: #000;
+  background-color: var(--body-bg-color);
+  color: var(--text-color);
   font-style: normal;
   font-weight: 400;
   line-height: 24px; /* 150% */
 }
+body.menu-open {
+  overflow: hidden;
+}
+
+.container {
+  max-width: var(--container-width);
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
 
 .banner {
   background: #000;
@@ -453,6 +902,8 @@ body {
 }
 .banner__img-wrp {
   max-width: 1920px;
+  max-height: 540px;
+  overflow: hidden;
   margin: 0 auto;
 }
 .banner__img {
@@ -473,13 +924,326 @@ body {
 @media (max-width: 768px) {
   .section-wrapper {
     gap: 24px;
+    padding: 24px 0;
   }
 }
 
 .section {
   padding: 32px;
   border-radius: 16px;
-  border: 1px solid #E4E4E4;
-  background: #F6F6F6;
+  border: 1px solid var(--content-border-color);
+  background: var(--content-bg-color);
+}
+@media (max-width: 768px) {
+  .section {
+    padding: 24px;
+  }
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+a:hover {
+  opacity: 0.8;
+}
+
+table {
+  background: var(--table-bg-color);
+  color: var(--text-color);
+}
+
+th,
+thead,
+table thead tr {
+  background-color: var(--table-header-color);
+  color: var(--text-color);
+}
+
+caption {
+  background: var(--table-header-color);
+  color: var(--text-color);
+}
+
+.game-item {
+  border-radius: var(--border-radius-main);
+  overflow: hidden;
+  position: relative;
+  padding-top: 52%;
+  box-shadow: 0px 2px 44px 0px rgba(188, 188, 188, 0.15);
+  background: #fff;
+}
+@media (max-width: 768px) {
+  .game-item {
+    padding-top: 60%;
+    border-radius: 12px;
+    box-shadow: 0px 1.4px 30.803px 0px rgba(188, 188, 188, 0.15);
+  }
+}
+.game-item__inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  height: calc(100% - 45px);
+}
+@media (max-width: 768px) {
+  .game-item__inner {
+    height: calc(100% - 40px);
+  }
+}
+.game-item__inner:hover .game-item__hover {
+  opacity: 1;
+  visibility: visible;
+}
+.game-item__title {
+  color: rgba(2, 0, 5, 0.8);
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.1em;
+  width: 100%;
+  height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  position: relative;
+  padding: 0 12px;
+}
+@media (max-width: 1199px) {
+  .game-item__title {
+    font-size: 14px;
+  }
+}
+@media (max-width: 768px) {
+  .game-item__title {
+    font-size: 12px;
+    height: 40px;
+  }
+}
+.game-item__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none !important;
+  color: rgba(2, 0, 5, 0.8) !important;
+}
+@media (max-width: 768px) {
+  .game-item__link {
+    gap: 4px;
+  }
+}
+.game-item__link:before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.game-item__link:hover {
+  color: var(--color-theme-red) !important;
+}
+.game-item__link:hover .icon {
+  fill: url("#icon-gradient-red");
+}
+.game-item__link .icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  fill: #0076CC;
+}
+@media (max-width: 768px) {
+  .game-item__link .icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+.game-item__link-text {
+  display: inline-flex;
+  align-items: center;
+}
+.game-item__link-icon {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: #0076CC;
+}
+.game-item__picture {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.game-item__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+  transition: 0.3s ease-out;
+}
+.game-item__tags {
+  position: absolute;
+  top: 0;
+  left: 12px;
+  display: flex;
+}
+.game-item__tagsItm {
+  margin-right: 8px;
+  border-radius: 0px 0px 8px 8px;
+  background: linear-gradient(90deg, #2D2BA7 0%, #BA73D1 100%);
+  text-transform: uppercase;
+  overflow: hidden;
+}
+@media (max-width: 768px) {
+  .game-item__tagsItm {
+    border-radius: 0px 0px 5px 5px;
+  }
+}
+.game-item__tagsItm--hot {
+  background: #F5294D;
+}
+.game-item__tagsLink {
+  display: block;
+  color: #fff;
+  padding: 8px 16px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1em;
+}
+@media (max-width: 768px) {
+  .game-item__tagsLink {
+    padding: 3px 11px;
+    font-size: 9px;
+  }
+}
+.game-item__info {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+}
+.game-item__provide {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px;
+  margin-right: 8px;
+}
+@media (max-width: 768px) {
+  .game-item__provide {
+    width: 24px;
+    height: 24px;
+    margin-right: 5px;
+  }
+}
+.game-item__provide .icon {
+  fill: #fff;
+}
+.game-item__rating {
+  width: 36px;
+  height: 36px;
+  position: relative;
+}
+@media (max-width: 768px) {
+  .game-item__rating {
+    width: 28px;
+    height: 28px;
+  }
+}
+.game-item__ratingVal {
+  font-size: 12px;
+}
+@media (max-width: 768px) {
+  .game-item__ratingVal {
+    font-size: 10px;
+  }
+}
+.game-item__rtp {
+  padding: 4px 8px;
+  background: linear-gradient(var(--gradient-theme-red));
+  border-radius: 8px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  color: #fff;
+  line-height: 1em;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+}
+.game-item__countPlay {
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 1em;
+  font-weight: 600;
+  border-radius: 8px;
+  background: rgba(2, 0, 5, 0.8);
+  position: relative;
+  display: flex;
+  height: 24px;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+}
+.game-item__countPlay .icon {
+  fill: #fff;
+}
+.game-item__countTxt {
+  padding-left: 5px;
+}
+.game-item__btn {
+  margin-top: 16px;
+  width: 100%;
+  max-width: 120px;
+}
+@media (max-width: 768px) {
+  .game-item__btn {
+    margin-top: 8px;
+    font-size: 12px;
+    padding: 8px 20px;
+    max-width: 100px;
+  }
+}
+.game-item__hover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(2, 0, 5, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 20px;
+  opacity: 0;
+  z-index: 1;
+  transition: 0.5s ease-out;
+  visibility: hidden;
+  cursor: pointer;
 }
 /*# sourceMappingURL=styles.css.map */

public/js/script.js

@@ -31,6 +31,35 @@ document.addEventListener("DOMContentLoaded", function() {
             }
         });
     }
+
+    // FAQ Accordion
+    const faqItems = document.querySelectorAll(".faq__item");
+    console.log("FAQ items found:", faqItems.length);
+
+    faqItems.forEach(item => {
+        const question = item.querySelector(".faq__question");
+
+        if (question) {
+            question.addEventListener("click", function() {
+                console.log("FAQ item clicked");
+                // Toggle active class on the item
+                item.classList.toggle("active");
+            });
+        }
+    });
+
+    // Table of Contents
+    const tocElement = document.querySelector(".toc");
+
+    if (tocElement) {
+        const tocHeader = tocElement.querySelector(".toc__header");
+
+        if (tocHeader) {
+            tocHeader.addEventListener("click", function() {
+                tocElement.classList.toggle("active");
+            });
+        }
+    }
 });
 
 //# sourceMappingURL=script.js.map

resources/sass/base/_mixins.scss

@@ -90,83 +90,3 @@
 	}
 }
 
-@mixin effectBox{
-		border-radius: var(--border-radius-main);
-		border: 1px solid rgba(120, 88, 173, 0.20);
-		background: rgba(147, 122, 189, 0.10);
-		backdrop-filter: blur(32px);
-		overflow:hidden;
-		position:relative;
-		&:before{
-			content:'';
-			width: 335px;
-			height: 141px;
-			position: absolute;
-			right: -25px;
-			top: -146px;
-			border-radius: 335px;
-			background: radial-gradient(178.52% 78.07% at 41.32% 26.64%, #EBBFFB 0%, #C570E3 85%);
-			filter: blur(60px);
-			transition: 0.3s ease-out;
-		}
-		&:after{
-			content:'';
-			width: 273px;
-			height: 136px;
-			position: absolute;
-			left: 0;
-			top: -110px;
-			background:#937ABD;
-			filter: blur(60px);
-			border-radius: 335px;
-			visibility: hidden;
-			opacity: 0;
-			transition: 0.6s ease-out;
-			background: radial-gradient(178.52% 78.07% at 41.32% 26.64%, #EBBFFB 0%, #937ABD 85%);
-
-		}
-		&:hover{
-			&:before{
-				opacity:0;
-			}
-			&:after{
-				content:'';
-				left: -69px;
-				top: -75px;
-				opacity: 0.8;
-				visibility: visible;
-			}
-		}
-
-}
-
-@mixin styleScrollH{
-	&::-webkit-scrollbar {
-		height: 3px;
-	}
-
-	&::-webkit-scrollbar-track {
-		background:transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background-color: rgba(177, 163, 199, 0.5);
-		border-radius:15px;
-		background:transparent;
-	}
-}
-
-@mixin styleScrollV{
-	&::-webkit-scrollbar {
-		width: 3px;
-	}
-
-	&::-webkit-scrollbar-track {
-		background:transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background-color: rgba(177, 163, 199, 0.5);
-		border-radius:15px;
-	}
-}

resources/sass/base/_typography.scss

@@ -15,8 +15,6 @@ body {
 	min-width: 360px;
 	color: var(--text-color);
 	position: relative;
-	//background-color: var(--bg);
-	background-color:#FFF;
 	scroll-behavior: smooth; // плавный скролл
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
@@ -29,6 +27,7 @@ h1 {
 	font-weight: 600;
 	font-size: var(--h1);
 	line-height: 106%;
+	text-transform: uppercase;
 }
 
 h2 {
@@ -36,6 +35,7 @@ h2 {
 	font-weight: 600;
 	font-size: var(--h2);
 	line-height: 125%;
+	text-transform: uppercase;
 }
 
 h3 {
@@ -129,4 +129,121 @@ h1, h2, h3, h4, h5, h6{
 	 list-style:decimal;
  }
 
+ img{
+	 max-width:100%;
+	 height:auto;
+	 border-radius: 12px;
+ }
+
+
+ // блок врапер для скролла таблицы
+ .table-wrapper-scroll{
+	 margin:30px 0;
+	 @include mobile-sm{
+		 background:none;
+		 border-radius:0;
+		 padding-bottom:8px;
+		 overflow-x: auto;
+		 margin:20px 0;
+		 &::-webkit-scrollbar {
+			 height: 4px;
+		 }
+		 &::-webkit-scrollbar-track {
+			 background:transparent;
+		 }
+		 &::-webkit-scrollbar-thumb {
+			 background:var(--scrollbar-color);
+		 }
+	 }
+	//  &.has-caption{
+	// 	 padding-top:25px;
+	//  }
+ }
+
+ // дополнительный блок врапер для стилизации таблицы (border-radius gradient)
+ .table-wrapper{
+	 background: #E0E5EF;
+	 //padding:1px;
+	 border-radius:9px;
+	 &.large-table{
+			@include mobile-sm{
+				width:640px;
+			}
+	 }
+	 table{
+		 margin:0;
+		 padding:0;
+	 }
+ }
+
+ // стили таблицы по умолчанию
+table{
+	 margin:0;
+	 position:relative;
+	 width:100%;
+	 //table-layout: fixed;
+	 table-layout: auto;
+	 border-collapse: collapse;
+	 border-radius:9px;
+	 overflow:hidden;
+	 border: 1px solid var(--Solid-Black-10, rgba(2, 0, 5, 0.10));
+
+	 thead{
+		 th, td{
+			 padding:12px;
+			 text-align: center;
+			 font-size: 16px;
+			 font-style: normal;
+			 font-weight: 600;
+			 line-height:1.2em;
+			 vertical-align: middle;
+			 background:transparent;
+			 @include mobile-sm{
+				 vertical-align: middle;
+				 font-size:13px;
+				 padding:8px;
+			 }
+		 }
+	 }
+  tr:first-child{
+    th{
+			 padding:12px;
+			 text-align: center;
+			 font-size: 16px;
+			 font-style: normal;
+			 font-weight: 600;
+			 line-height:1.2em;
+			 vertical-align: middle;
+			 @include mobile-sm{
+				 vertical-align: middle;
+				 font-size:13px;
+				 padding:8px;
+			 }
+		}
+    &:has(th){
+            overflow:hidden;
+            height: auto !important;
+            //background:transparent;
+            background: #E0E5EF;
+        }
+     }
+	 tbody{
+		 td{
+			 padding:12px;
+			 vertical-align: middle;
+			 word-wrap: break-word;
+			 @include tablet{
+				 font-size: 14px;
+				 font-style: normal;
+				 font-weight: 400;
+				 line-height: 16px;
+			 }
+			 @include mobile-sm{
+				 font-size:13px;
+				 padding:8px;
+			 }
+		 }
+	 }
+ }
+
 }

resources/sass/base/_variables.scss

@@ -12,50 +12,27 @@
 	--fz-default: 16px; // default font size
 	--lh-default: 24px;// default line-height
 
-	--h1: 44px; // h1 font size
-	--h2: 24px; // h2 font size
-	--h3: 20px; // h3 font size
-	--h4: 18px; // h3 font size
-	--l: 20px; // large font size
-	--m: 16px; // medium font size
-	--s: 14px; // small font size
+	--h1: 24px; // h1 font size
+	--h2: 20px; // h2 font size
+	--h3: 18px; // h3 font size
+	--h4: 16px; // h3 font size
 
 	@include tablet {
 		--container-width: 1199px;
 		--fz-default: 16px; // default font size
 		--lh-default: 26px;// default line-height
-		--h1: 28px; // h1 font size
-		--h2: 20px; // h2 font size
-		--h3: 18px; // h3 font size
-		--h4: 16px; // h3 font size
-		--l: 20px; // large font size
-		--m: 16px; // medium font size
-		--s: 14px; // small font size
-		--sp: 32px 0;
+		--h1: 22px; // h1 font size
+		--h2: 18px; // h2 font size
+		--h3: 16px; // h3 font size
+		--h4: 14px; // h3 font size
 	}
 	@include mobile{
 		--container-width: 768px;
-		--fz-default: 16px; // default font size
-		--lh-default: 26px;// default line-height
-		--h1: 28px; // h1 font size
-		--h2: 20px; // h2 font size
-		--h3: 18px; // h3 font size
-		--h4: 16px; // h3 font size
-		--l: 20px; // large font size
-		--m: 16px; // medium font size
-		--s: 14px; // small font size
-		--sp: 32px 0;
-	}
-	@include mobile-sm {
-		--container-width: 575px;
-		--fz-default: 16px; // default font size
-		--lh-default: 26px;// default line-height
-		--h1: 24px; // h1 font size
+		--fz-default: 14px; // default font size
+		--lh-default: 20px;// default line-height
+		--h1: 22px; // h1 font size
 		--h2: 18px; // h2 font size
 		--h3: 16px; // h3 font size
 		--h4: 14px; // h3 font size
-		--l: 20px; // large font size
-		--m: 16px; // medium font size
-		--s: 14px; // small font size
 	}
 }

resources/sass/components/_author.scss

@@ -0,0 +1,34 @@
+.author {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border-radius: 8px;
+    &__img {
+        flex-shrink: 0;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        overflow: hidden;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    &__info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+    }
+
+    &__name {
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    &__date {
+        font-size: 12px;
+    }
+}

resources/sass/components/_buttons.scss

@@ -1,38 +1,38 @@
 // Buttons
-button {
-    &.accent-color {
-        transition: filter 0.3s ease;
-
-        &:hover {
-            filter: brightness(0.85);
-        }
-    }
+.btn-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-top: 24px;
 }
 
-.main__btn {
-    position: relative;
-    margin: auto;
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 14px 32px;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.5;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    border: none;
 
-    a {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        width: 100%;
-        // color will be set dynamically
+    &--accent {
+        background: var(--accent-color);
+        color: #fff;
 
         &:hover {
-            // color will be set dynamically
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            opacity: 0.9;
         }
-    }
-}
 
-.bottom-btn {
-    margin: auto;
-    width: 200px;
-    background: #c30054;
+        &:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        }
+    }
 }
 
-.pulse__btn {
-    // Pulse animation will be added if needed
-}

resources/sass/components/_faq.scss

@@ -0,0 +1,94 @@
+.faq {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    &__title {
+        margin:0;
+        margin-bottom: 24px;
+        font-weight: 600;
+        color: var(--text-color);
+    }
+
+    &__item {
+        border-radius: 12px;
+        overflow: hidden;
+        transition: all 0.3s ease;
+        border: 1px solid var(--content-border-color);
+        background: var(--content-bg-color);
+
+        &.active {
+            .faq__question::after {
+                transform: rotate(45deg);
+            }
+
+            .faq__question::before {
+                transform: rotate(-45deg);
+            }
+
+            .faq__answer {
+                max-height: 500px;
+                opacity: 1;
+            }
+        }
+    }
+
+    &__question {
+        padding: 20px 56px 20px 24px;
+        cursor: pointer;
+        position: relative;
+        user-select: none;
+        transition: background-color 0.2s ease;
+
+        
+
+        h3 {
+            margin: 0;
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 24px;
+            color: var(--text-color);
+        }
+
+        // Крестик с псевдоэлементами
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            right: 24px;
+            top: 50%;
+            width: 16px;
+            height: 2px;
+            background-color: var(--text-color);
+            transition: transform 0.3s ease;
+        }
+
+        &::before {
+            transform: translateY(-50%);
+        }
+
+        &::after {
+            transform: translateY(-50%) rotate(90deg);
+        }
+    }
+
+    &__answer {
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+        transition: all 0.3s ease;
+        border-top:1px dashed var(--content-border-color); 
+
+        p {
+            margin: 0;
+            font-size: 14px;
+            line-height: 22px;
+            color: var(--text-color);
+            opacity: 0.8;
+        }
+    }
+
+    &__answer-inner{
+        padding:  24px;
+    }
+}

resources/sass/components/_toc.scss

@@ -0,0 +1,132 @@
+.toc {
+    border-radius: 12px;
+    border: 1px solid var(--content-border-color);
+    background: var(--content-bg-color);
+    overflow: hidden;
+
+    &__header {
+        padding: 20px 56px 20px 24px;
+        cursor: pointer;
+        position: relative;
+        user-select: none;
+        transition: background-color 0.2s ease;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.02);
+        }
+
+        // Крестик с псевдоэлементами
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            right: 24px;
+            top: 50%;
+            width: 16px;
+            height: 2px;
+            background-color: var(--text-color);
+            transition: transform 0.3s ease;
+        }
+
+        &::before {
+            transform: translateY(-50%) rotate(90deg);
+        }
+
+        &::after {
+            transform: translateY(-50%);
+        }
+    }
+
+    &__title {
+        margin: 0;
+        color: var(--Main-Back, #000);
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        text-transform: uppercase;
+        color: var(--text-color);
+        @include mobile{
+            font-size:16px;
+        }
+    }
+
+    &__content {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+    }
+
+    &__list {
+        list-style: none;
+        margin: 0;
+        padding: 0 24px 24px 24px;
+        counter-reset: toc-counter;
+
+        // Вложенный список (второй уровень) - с маркерами
+        &--nested {
+            padding: 8px 0 0 28px;
+            list-style: disc;
+            padding-left: 40px;
+        }
+    }
+
+    &__item {
+        margin-bottom: 8px;
+        position: relative;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        // Нумерация только для первого уровня
+        > .toc__link::before {
+            counter-increment: toc-counter;
+            content: counter(toc-counter) ". ";
+            font-weight: 600;
+            margin-right: 4px;
+        }
+
+        // Убираем нумерацию для вложенного уровня
+        .toc__list--nested > & > .toc__link::before {
+            content: none;
+        }
+    }
+
+    &__link {
+        display: block;
+        color: var(--text-color);
+        text-decoration: none;
+        font-size: 14px;
+        line-height: 20px;
+        padding: 6px 12px;
+        border-radius: 6px;
+        transition: all 0.2s ease;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.03);
+            color: var(--link-color);
+        }
+
+        // Стили для вложенного уровня
+        .toc__list--nested > .toc__item > & {
+            font-size: 13px;
+            padding-left: 8px;
+        }
+    }
+
+    // Active state (открыто)
+    &.active {
+        .toc__header::before {
+            transform: translateY(-50%) rotate(45deg);
+        }
+
+        .toc__header::after {
+            transform: translateY(-50%) rotate(-45deg);
+        }
+
+        .toc__content {
+            max-height: 1000px;
+        }
+    }
+}

resources/sass/layout/_container.scss

@@ -1,12 +0,0 @@
-// Container
-.container {
-    max-width: var(--container-width);
-    width: 100%;
-    height: 100%;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-    padding: 0 16px;
-}

resources/sass/layout/_footer.scss

@@ -1,4 +1,109 @@
 // Footer
 .footer {
-    // background will be set dynamically via PHP
+    background: var(--footer-bg-color);
+    display: flex;
+    gap:32px;
+    padding: 48px 0;
+    flex-direction: column;
+    align-items: center;
+    color: var(--text-color);
+    @include mobile{
+        gap: 24px;
+        padding: 32px 0;
+    }
+    &__content-inner{
+        display: flex;
+        align-items: flex-start;
+        gap: 60px;
+        align-self: stretch;
+        @include mobile{
+            gap: 20px;
+            flex-direction: column;
+        }
+    }
+    &__text{
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+        @include mobile{
+            font-size:12px;
+            line-height: 18px;
+        }
+    }
+    &__logo{
+        width: 210px;
+        height: 48px;
+        @include mobile{
+            width:100%;
+            display:flex;
+            align-items: center;
+            justify-content: center;
+        }
+        img {
+            width: 190px;
+            height: 44px;
+            display: block;
+            cursor: pointer;
+            object-fit: contain;
+            transition: opacity 0.3s ease;
+        }
+    }
+
+    &__bottom-imgs{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 40px;
+        align-self: stretch;
+        list-style:none;
+        margin:0;
+        padding:0;
+        img{
+            opacity: 0.4;
+        }
+        @include mobile{
+            gap:20px;
+            display:grid;
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+
+    &__menu-list{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 24px;
+        @include mobile{
+            gap:16px;
+        }
+    }
+    &__menu-item{
+        list-style: none;
+    }
+    &__menu-link{
+        color: var(--Main-White, #FFF);
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        text-decoration-line: underline;
+        text-decoration-style: solid;
+        text-decoration-skip-ink: none;
+        text-decoration-thickness: auto;
+        text-underline-offset: auto;
+        text-underline-position: from-font;
+        &:hover{
+            color:#fff;
+            opacity:0.9;
+        }
+    }
+
+    &__copyright{
+        color: var(--Main-White, #FFF);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+    }
 }

resources/sass/layout/_header.scss

@@ -6,7 +6,7 @@
     left: 0;
     height: 70px;
     z-index: 1000;
-    // background will be set dynamically via styles.php
+    background: var(--header-color);
 
     .container {
         @include flex(space-between, center);
@@ -128,6 +128,7 @@
         &-line {
             width: 100%;
             height: 3px;
+            background:#fff;
             border-radius: 2px;
             // background will be set dynamically
             transition: all 0.3s ease;
@@ -194,20 +195,31 @@
             transition: transform 0.3s ease;
             padding: 40px 20px;
             overflow-y: auto;
-            backdrop-filter: blur(10px);
+            //backdrop-filter: blur(10px);
+
+            @include mobile{
+                background: var(--body-bg-color);
+            }
 
             &.active {
                 transform: translateX(0);
+
             }
         }
 
         &__menu {
             flex-direction: column;
-            align-items: flex-start;
+            align-items: center;
+            width: 100%;;
             gap: 24px;
 
             &-link {
                 font-size: 18px;
+                @include mobile{
+                    font-size: 16px;
+                    background: var(--body-bg-color);
+                    color:var(--text-color);
+                }
             }
         }
 

resources/sass/styles.scss

@@ -9,18 +9,33 @@
 
 @import 'layout/header';
 @import 'layout/footer';
-@import 'layout/container';
 
 @import 'components/buttons';
 @import 'components/tables';
+@import 'components/author';
+@import 'components/faq';
+@import 'components/toc';
 
 body{
-	background:#fff !important;    
 	padding-top:70px;
-	color:#000;
+	background-color: var(--body-bg-color);
+	color: var(--text-color);
 	font-style: normal;
 	font-weight: 400;
 	line-height: 24px; /* 150% */
+
+	&.menu-open {
+		overflow: hidden;
+	}
+}
+// Container
+.container {
+    max-width: var(--container-width);
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+		padding-left: 16px !important;
+		padding-right:16px !important;
 }
 
 //banner
@@ -31,6 +46,8 @@ body{
 	justify-content: center;
 	&__img-wrp{
 		max-width:1920px;
+		max-height:540px;
+		overflow: hidden;
 		margin:0 auto;
 	}
 	&__img{
@@ -49,12 +66,308 @@ body{
 	width:100%;
 	@include mobile{
 		gap:24px;
+		padding:24px 0;
 	}
 }
 
 .section{
 	padding:32px;
-  border-radius: 16px;
-	border: 1px solid #E4E4E4;
-	background: #F6F6F6;
+	border-radius: 16px;
+	border: 1px solid var(--content-border-color);
+	background: var(--content-bg-color);
+	@include mobile{
+		padding:24px;
+	}
+}
+
+// Links
+a {
+	color: var(--link-color);
+	text-decoration: none;
+	transition: color 0.3s ease;
+
+	&:hover {
+		opacity: 0.8;
+	}
+}
+
+// Tables
+table {
+	background: var(--table-bg-color);
+	color: var(--text-color);
+}
+
+th,
+thead,
+table thead tr {
+	background-color: var(--table-header-color);
+	color: var(--text-color);
+}
+
+caption {
+	background: var(--table-header-color);
+	color: var(--text-color);
+}
+
+
+
+.game-item{
+	border-radius: var(--border-radius-main);
+	overflow:hidden;
+	position:relative;
+	//padding:0 12px 0 12px;
+	padding-top:52%;
+	box-shadow: 0px 2px 44px 0px rgba(188, 188, 188, 0.15);
+	background:#fff;
+	@include mobile{
+		padding-top:60%;
+		border-radius:12px;
+		box-shadow: 0px 1.4px 30.803px 0px rgba(188, 188, 188, 0.15);
+	}
+	&__inner{
+		position:absolute;
+		top:0;
+		left:0;
+		width:100%;
+        overflow:hidden;
+		height:calc(100% - 45px); // 45px - height title
+		@include mobile{
+			height:calc(100% - 40px);
+		}
+        &:hover{
+            .game-item__hover{
+                opacity:1;
+                visibility: visible;
+            }
+	    }
+	}
+	&__title{
+		color: rgba(2, 0, 5, 0.80);
+		text-align: center;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 1.1em;
+		width:100%;
+		height:45px;
+		display:flex;
+		align-items: center;
+		justify-content: center;
+		background:#fff;
+        position:relative;
+        padding:0 12px;
+		@include tablet{
+			font-size:14px;
+		}
+		@include mobile{
+			font-size:12px;
+			height:40px;
+		}
+	}
+	&__link{
+        display:inline-flex;
+        align-items: center;
+        gap:8px;
+        text-decoration: none !important;
+		color: rgba(2, 0, 5, 0.80) !important;
+        @include mobile{
+            gap:4px;
+        }
+        &:before{
+            content:'';
+            display:block;
+            width:100%;
+            height:100%;
+            position:absolute;
+            top:0;
+            left:0;
+        }
+		&:hover{
+			color:var(--color-theme-red) !important;
+            .icon{
+                fill:url('#icon-gradient-red');
+            }
+		}
+        .icon{
+            width:20px;
+            height:20px;
+            flex-shrink: 0;
+            fill:#0076CC;
+            @include mobile{
+                width:12px;
+                height:12px;
+            }
+        }
+	}
+    &__link-text{
+        display:inline-flex;
+        align-items: center;
+    }
+    &__link-icon{
+        width:20px;
+        height:20px;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        fill:#0076CC;
+    }
+	&__picture{
+		position:absolute;
+		top:0;
+		left:0;
+		bottom:0;
+		right:0;
+	}
+	&__image{
+		display:block;
+		width:100%;
+		height:100%;
+		object-fit: cover;
+		transition: 0.3s ease-out;
+	}
+	&__tags{
+		position:absolute;
+		top:0;
+		left:12px;
+		display:flex;
+	}
+	&__tagsItm{
+		margin-right:8px;
+		border-radius: 0px 0px 8px 8px;
+		background: linear-gradient(90deg, #2D2BA7 0%, #BA73D1 100%);
+		text-transform: uppercase;
+		overflow:hidden;
+		@include mobile{
+			border-radius: 0px 0px 5px 5px;
+		}
+		&--hot{
+			background: #F5294D;
+		}
+	}
+	&__tagsLink{
+		display:block;
+		color:#fff;
+		padding:8px 16px;
+		color:#fff;
+		font-size: 12px;
+		font-weight: 900;
+		line-height: 1em;
+		@include mobile{
+			padding:3px 11px;
+			font-size:9px;
+		}
+	}
+	&__info{
+		position:absolute;
+		top:8px;
+		right:8px;
+		display:flex;
+		align-items: center;
+		justify-content: end;
+	}
+	&__provide{
+		width:32px;
+		height:32px;
+		border-radius:50%;
+		background:#000;
+		display:flex;
+		justify-content: center;
+		align-items: center;
+		//padding:8px;
+		padding:2px;
+		margin-right:8px;
+		@include mobile{
+			width:24px;
+			height:24px;
+			margin-right:5px;
+		}
+		.icon{
+			fill:#fff;
+		}
+	}
+	&__rating{
+		width: 36px;
+		height: 36px;
+		position:relative;
+		@include mobile{
+			width: 28px;
+			height: 28px;
+		}
+	}
+	&__ratingVal{
+		font-size: 12px;
+		@include mobile{
+			font-size:10px;
+		}
+	}
+	&__rtp{
+		padding:4px 8px;
+		background: linear-gradient(var(--gradient-theme-red));
+		border-radius:8px;
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 600;
+		color:#fff;
+		line-height:1em;
+		height:24px;
+		display:flex;
+		align-items: center;
+		position:absolute;
+		bottom:8px;
+		right:8px;
+	}
+	&__countPlay{
+		color:#fff;
+		font-size:12px;
+		padding:4px 8px;
+		font-size: 12px;
+		line-height:1em;
+		font-weight: 600;
+		border-radius:8px;
+		background:rgba(2, 0, 5, 0.80);
+		position:relative;
+		display:flex;
+		height:24px;
+		align-items: center;
+		justify-content: space-between;
+		position:absolute;
+		bottom:8px;
+		left:8px;
+		.icon{
+			fill:#fff;
+		}
+	}
+	&__countTxt{
+		padding-left:5px;
+	}
+	&__btn{
+		margin-top:16px;
+		width:100%;
+		max-width:120px;
+		@include mobile{
+			margin-top:8px;
+			font-size:12px;
+			padding:8px 20px;
+			max-width:100px;
+		}
+
+	}
+	&__hover{
+		position:absolute;
+		top:0;
+		left:0;
+		bottom:0;
+		right:0;
+		background:rgba(2, 0, 5, 0.80);
+		display:flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		padding:20px;
+		opacity:0;
+		z-index: 1;
+		transition: 0.5s ease-out;
+		visibility: hidden;
+        cursor:pointer;
+	}
 }

resources/view/admin/index.php

@@ -1,636 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Admin Panel</title>
-    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.15.0/cdn.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/8.1.2/tinymce.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-    <link rel="stylesheet" href="/css/admin/style.css">
-</head>
-
-<body class="bg-gray-100 font-sans">
-    <div x-data="{ sidebarOpen: false }" class="flex h-screen">
-        <!-- Sidebar -->
-        <div :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" 
-             class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0">
-            <div class="flex items-center justify-center h-16 bg-blue-600">
-                <h1 class="text-xl font-semibold text-white">Admin Panel</h1>
-            </div>
-            <nav class="mt-5">
-                <div class="px-2">
-                    <a href="index.php" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-blue-600 bg-blue-50">
-                        <svg class="mr-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-                            <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
-                        </svg>
-                        Site Settings
-                    </a>
-                    <a href="pages.php" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50 mt-1">
-                        <svg class="mr-3 h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
-                        </svg>
-                        Dynamic Pages
-                    </a>
-                </div>
-            </nav>
-        </div>
-
-        <!-- Mobile sidebar overlay -->
-        <div x-show="sidebarOpen" 
-             @click="sidebarOpen = false" 
-             class="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
-             x-transition:enter="transition-opacity ease-linear duration-300"
-             x-transition:enter-start="opacity-0"
-             x-transition:enter-end="opacity-100"
-             x-transition:leave="transition-opacity ease-linear duration-300"
-             x-transition:leave-start="opacity-100"
-             x-transition:leave-end="opacity-0"></div>
-
-        <!-- Main content -->
-        <div class="flex-1 overflow-hidden">
-            <!-- Top bar -->
-            <div class="bg-white shadow-sm lg:hidden">
-                <div class="px-4 py-2">
-                    <button @click="sidebarOpen = true" class="text-gray-500 hover:text-gray-600">
-                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
-                        </svg>
-                    </button>
-                </div>
-            </div>
-            
-            <!-- Page content -->
-            <main class="flex-1 overflow-y-auto p-6">
-
-                <div class="bg-white rounded-lg shadow-sm">
-                    <div class="border-b border-gray-200">
-                        <nav class="-mb-px flex space-x-8" x-data="{ activeTab: 'content' }">
-                            <button @click="activeTab = 'content'" 
-                                    :class="activeTab === 'content' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
-                                    class="py-2 px-1 border-b-2 font-medium text-sm">
-                                Content
-                            </button>
-                            <button @click="activeTab = 'options'" 
-                                    :class="activeTab === 'options' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
-                                    class="py-2 px-1 border-b-2 font-medium text-sm">
-                                Options
-                            </button>
-                            <button @click="activeTab = 'styles'" 
-                                    :class="activeTab === 'styles' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
-                                    class="py-2 px-1 border-b-2 font-medium text-sm">
-                                Styles
-                            </button>
-                            <button @click="activeTab = 'seo'" 
-                                    :class="activeTab === 'seo' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
-                                    class="py-2 px-1 border-b-2 font-medium text-sm">
-                                SEO & Meta
-                            </button>
-                        </nav>
-                    </div>
-
-                    <form method="POST" action="" enctype="multipart/form-data">
-                        <input type="hidden" name="form_submitted" value="1">
-
-                        <!-- Content Tab -->
-                        <div x-show="activeTab === 'content'" class="p-6">
-                            <h2 class="text-lg font-medium text-gray-900 mb-6">Page Content</h2>
-
-                            <div class="grid grid-cols-1 gap-6">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-2">Page Title (H1)</label>
-                                    <input type="text" name='content[title]' value="<?= $content['title'] ?? '' ?>" 
-                                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
-                                </div>
-
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-2">Top Text</label>
-                                    <textarea name='content[top_text]' rows="6" 
-                                              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"><?= urldecode($content['top_text'] ?? '') ?></textarea>
-                                </div>
-
-                    <div class="item">
-                        <h3>Bottom Text</h3>
-                        <textarea class="secondary-content" name='content[bottom_text]'><?= htmlspecialchars($content['bottom_text'] ?? '', ENT_QUOTES, 'UTF-8') ?></textarea>
-                    </div>
-
-                    <div class="item">
-                        <span>Author name</span>
-                        <input type="text" name='content[author-name]' value="<?= $content['author-name'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Modified date</span>
-                        <input type="text" name='content[modified-date]' value="<?= $content['modified-date'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Text login button</span>
-                        <input type="text" name='content[login]' value="<?= $content['login'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Text password button</span>
-                        <input type="text" name='content[password]' value="<?= $content['password'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Faq title</span>
-                        <input type="text" name='content[faq-title]' value="<?= $content['faq-title'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Footer text</span>
-                        <textarea name='content[footer__text]'><?= $content['footer__text'] ?? '' ?></textarea>
-                    </div>
-
-                    <div class="item">
-                        <span>Copyright</span>
-                        <textarea name='content[copyright]'><?= $content['copyright'] ?? '' ?></textarea>
-                    </div>
-
-
-                    <h3>Casino/Review Settings</h3>
-                    <hr>
-
-                    <div class="item">
-                        <span>Review casino count</span>
-                        <input type="text" name='content[review-count]' value="<?= $content['review-count'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>h2 - Casino listing</span>
-                        <input type="text" name='content[listing]' value="<?= $content['listing'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Text content button</span>
-                        <input type="text" name='content[content_btn]' value="<?= $content['content_btn'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Hide login-password btns</span>
-                        <input type="hidden" name="content[hide-btns]" value="0">
-                        <input type="checkbox" name="content[hide-btns]" value="1" <?= !empty($content['hide-btns']) ? 'checked' : '' ?>>
-                    </div>
-
-
-                    <h3>Images & Media</h3>
-                    <hr>
-
-                    <div class="img-block">
-                        <div class="item">
-                            <?php 
-                            $headerLogo = [];
-                            if (isset($content['header-logo']) && !empty($content['header-logo'])) {
-                                $headerLogo = json_decode($content['header-logo'], true) ?: [];
-                            }
-                            ?>
-                            <?php if (!empty($headerLogo['src'])): ?>
-                                <img class="img-thumb" src="../<?= $headerLogo['src'] ?>" alt="Header Logo">
-                            <?php endif; ?>
-                            <span>Header logo</span>
-                            <input type="file" name="content[header-logo]">
-                        </div>
-                        <div>
-                            <span>Header logo title</span>
-                            <input type="text" name='content[header-logo][title]' value="<?= htmlspecialchars($headerLogo['title'] ?? '') ?>">
-                            <span>Header logo alt</span>
-                            <input type="text" name='content[header-logo][alt]' value="<?= htmlspecialchars($headerLogo['alt'] ?? '') ?>">
-                        </div>
-                    </div>
-
-                    <div class="img-block">
-                        <div class="item">
-                            <?php 
-                            $bannerLogo = [];
-                            if (isset($content['banner-logo']) && !empty($content['banner-logo'])) {
-                                $bannerLogo = json_decode($content['banner-logo'], true) ?: [];
-                            }
-                            ?>
-                            <?php if (!empty($bannerLogo['src'])): ?>
-                                <img class="img-thumb" src="../<?= $bannerLogo['src'] ?>" alt="Banner Image">
-                            <?php endif; ?>
-                            <span>Banner Image</span>
-                            <input type="file" name="content[banner-logo]">
-                        </div>
-                        <div>
-                            <span>Banner logo title</span>
-                            <input type="text" name='content[banner-logo][title]' value="<?= htmlspecialchars($bannerLogo['title'] ?? '') ?>">
-                            <span>Banner logo alt</span>
-                            <input type="text" name='content[banner-logo][alt]' value="<?= htmlspecialchars($bannerLogo['alt'] ?? '') ?>">
-                            <span>Banner logo width</span>
-                            <input type="text" name='content[banner-logo][width]' value="<?= htmlspecialchars($bannerLogo['width'] ?? '') ?>">
-                            <span>Banner logo height</span>
-                            <input type="text" name='content[banner-logo][height]' value="<?= htmlspecialchars($bannerLogo['height'] ?? '') ?>">
-                        </div>
-                    </div>
-
-                    <div class="img-block">
-                        <div class="item">
-                            <?php 
-                            $footerLogo = [];
-                            if (isset($content['footer-logo']) && !empty($content['footer-logo'])) {
-                                $footerLogo = json_decode($content['footer-logo'], true) ?: [];
-                            }
-                            ?>
-                            <?php if (!empty($footerLogo['src'])): ?>
-                                <img class="img-thumb" src="../<?= $footerLogo['src'] ?>" alt="Footer Logo">
-                            <?php endif; ?>
-                            <span>Footer logo</span>
-                            <input type="file" name="content[footer-logo]">
-                        </div>
-                        <div>
-                            <span>Footer logo title</span>
-                            <input type="text" name='content[footer-logo][title]' value="<?= htmlspecialchars($footerLogo['title'] ?? '') ?>">
-                            <span>Footer logo alt</span>
-                            <input type="text" name='content[footer-logo][alt]' value="<?= htmlspecialchars($footerLogo['alt'] ?? '') ?>">
-                        </div>
-                    </div>
-
-                    <div class="item">
-                        <?php if (!empty($content['favicon'])): ?>
-                            <img class="img-thumb" src="../<?= $content['favicon'] ?>" alt="Favicon">
-                        <?php endif; ?>
-                        <span>Favicon</span>
-                        <input type="file" name="content[favicon]">
-                    </div>
-
-                    <div class="item">
-                        <?php if (!empty($content['author-img'])): ?>
-                            <img class="img-thumb" src="../<?= $content['author-img'] ?>" alt="author-img">
-                        <?php endif; ?>
-                        <span>Author img</span>
-                        <input type="file" name="content[author-img]">
-                    </div>
-
-
-                    <h3>Dynamic Content</h3>
-                    <hr>
-
-                    <!-- FAQ Section -->
-                    <div x-data="{ 
-                        faqItems: <?= htmlspecialchars(json_encode($faqItems ?? []), ENT_QUOTES, 'UTF-8'); ?> || []
-                    }">
-                        <h4>FAQ Items</h4>
-                        <button type="button" @click="faqItems.push({ question: '', answer: '' })" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; margin-bottom: 15px; cursor: pointer; font-size: 14px;">+ Add FAQ Item</button>
-
-                        <template x-for="(item, index) in faqItems" :key="index">
-                            <div style="margin-bottom: 15px; padding: 15px; border: 1px solid #ddd;">
-                                <div style="display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: start;">
-                                    <div style="display: flex; flex-direction: column; gap: 10px;">
-                                        <div>
-                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Question</label>
-                                            <input type="text" x-model="item.question" :name="`content[faq][${index}][question]`" placeholder="Question" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
-                                        </div>
-                                        <div>
-                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Answer</label>
-                                            <textarea x-model="item.answer" :name="`content[faq][${index}][answer]`" placeholder="Answer" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; min-height: 80px;"></textarea>
-                                        </div>
-                                    </div>
-                                    <button type="button" @click="faqItems.splice(index, 1)" style="background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 4px;">Remove</button>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-
-                    <!-- Menu Section -->
-                    <div x-data="{ 
-                        menuItems: <?= htmlspecialchars(json_encode($menuItems ?? []), ENT_QUOTES, 'UTF-8'); ?> || []
-                    }">
-                        <h4>Menu Items</h4>
-                        <button type="button" @click="menuItems.push({ title: '', anchor: '' })" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; margin-bottom: 15px; cursor: pointer; font-size: 14px;">+ Add Menu Item</button>
-
-                        <template x-for="(item, index) in menuItems" :key="index">
-                            <div style="margin-bottom: 15px; padding: 15px; border: 1px solid #ddd;">
-                                <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 15px; align-items: center;">
-                                    <div>
-                                        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Menu Title</label>
-                                        <input type="text" x-model="item.title" :name="`content[menu][${index}][title]`" placeholder="Menu Title" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
-                                    </div>
-                                    <div>
-                                        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Anchor Link</label>
-                                        <input type="text" x-model="item.anchor" :name="`content[menu][${index}][anchor]`" placeholder="#section" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
-                                    </div>
-                                    <button type="button" @click="menuItems.splice(index, 1)" style="background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 4px; margin-top: 25px;">Remove</button>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-
-                    <!-- Casino List Section -->
-                    <div x-data="{ 
-                        casinoItems: <?= htmlspecialchars(json_encode($casinoItems ?? []), ENT_QUOTES, 'UTF-8'); ?> || []
-                    }">
-                        <h4>Casino List</h4>
-                        <button type="button" @click="casinoItems.push({ heading: '', text: '', button: '', rating: '' })" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; margin-bottom: 15px; cursor: pointer; font-size: 14px;">+ Add Casino</button>
-
-                        <template x-for="(item, index) in casinoItems" :key="index">
-                            <div style="margin-bottom: 20px; padding: 15px; border: 1px solid #ddd;">
-                                <div style="display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: start;">
-                                    <div style="display: flex; flex-direction: column; gap: 10px;">
-                                        <div>
-                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Casino Name</label>
-                                            <input type="text" x-model="item.heading" :name="`content[casino_list][${index}][heading]`" placeholder="Casino Name" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
-                                        </div>
-                                        <div>
-                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Bonus Text</label>
-                                            <input type="text" x-model="item.text" :name="`content[casino_list][${index}][text]`" placeholder="Bonus Text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
-                                        </div>
-                                        <div>
-                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Button Text</label>
-                                            <input type="text" x-model="item.button" :name="`content[casino_list][${index}][button]`" placeholder="Button Text" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
-                                        </div>
-                                        <div>
-                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Rating</label>
-                                            <input type="text" x-model="item.rating" :name="`content[casino_list][${index}][rating]`" placeholder="Rating (e.g. 9.5)" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
-                                        </div>
-                                        <div>
-                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Casino Image</label>
-                                            <input type="file" :name="`casino_image_${index}`" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
-                                        </div>
-                                    </div>
-                                    <button type="button" @click="casinoItems.splice(index, 1)" style="background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 4px;">Remove</button>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                </div>
-
-                <!-- Options Tab -->
-                <div x-show="activeTab === 'options'" x-transition class="tab-content">
-                    <h2>Additional Options</h2>
-                    <hr>
-
-                    <h3>Hash Fields</h3>
-                    <hr>
-
-                    <div class="item">
-                        <span>Hash:</span>
-                        <input type="text" name='content[hash]' value="<?= $content['hash'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Hash-1:</span>
-                        <input type="text" name='content[hash-1]' value="<?= $content['hash-1'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Hash-2:</span>
-                        <input type="text" name='content[hash-2]' value="<?= $content['hash-2'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Hash-3:</span>
-                        <input type="text" name='content[hash-3]' value="<?= $content['hash-3'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Hash-4:</span>
-                        <input type="text" name='content[hash-4]' value="<?= $content['hash-4'] ?? '' ?>">
-                    </div>
-
-                    <div class="item">
-                        <span>Hash-5:</span>
-                        <input type="text" name='content[hash-5]' value="<?= $content['hash-5'] ?? '' ?>">
-                    </div>
-                </div>
-
-                <!-- Styles Tab -->
-                <div x-show="activeTab === 'styles'" x-transition class="tab-content">
-                    <h2>Design & Colors</h2>
-                    <hr>
-
-                    <div class="style-grid">
-                        <div class="item">
-                            <span>Main color (body background)</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[main_color]' value="<?= $styles['main_color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Secondary color</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[secondary_color]' value="<?= $styles['secondary_color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Accent color</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[accent_color]' value="<?= $styles['accent_color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Font color</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[font_color]' value="<?= $styles['font_color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Link color</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[link_color]' value="<?= $styles['link_color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Header background</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[header_color]' value="<?= $styles['header_color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Footer background</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[footer_color]' value="<?= $styles['footer_color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Hover link color</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[hover_link_color]' value="<?= $styles['hover_link_color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Login btn font color</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[login_btn_color]' value="<?= $styles['login_btn_color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Password btn font color</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[pass_btn_color]' value="<?= $styles['pass_btn_color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Table bgcolor</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[table]' value="<?= $styles['table'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Table caption bgcolor</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[caption]' value="<?= $styles['caption'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Faq title font color</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[faq-title-font-color]' value="<?= $styles['faq-title-font-color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Faq title hover font color</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[faq-title-hover-font-color]' value="<?= $styles['faq-title-hover-font-color'] ?? '' ?>">
-                            </div>
-                        </div>
-
-                        <div class="item">
-                            <span>Mobile burger menu color</span>
-                            <div>
-                                <input type="color" class="inp-color">
-                                <input type="text" class="inp-color-text" name='styles[burger-color]' value="<?= $styles['burger-color'] ?? '' ?>">
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="item">
-                        <span>Font-family</span>
-                        <input type="text" name='styles[main-fz]' value="<?= $styles['main-fz'] ?? '' ?>">
-                    </div>
-                </div>
-
-                <!-- SEO Tab -->
-                <div x-show="activeTab === 'seo'" x-transition class="tab-content">
-                        <h2>SEO & Meta Data</h2>
-                        <hr>
-
-                        <!-- Debug: <?= json_encode($seo) ?> -->
-                        <div class="item">
-                            <span>SEO Title:</span>
-                            <input type="text" name='seo[title]' value="<?= $seo['title'] ?? '' ?>">
-                        </div>
-
-                        <div class="item">
-                            <span>Meta Description:</span>
-                            <textarea name='seo[description]'><?= $seo['description'] ?? '' ?></textarea>
-                        </div>
-
-                        <div class="item">
-                            <span>Meta Keywords:</span>
-                            <textarea name='seo[keywords]'><?= $seo['keywords'] ?? '' ?></textarea>
-                        </div>
-
-                        <div class="item">
-                            <span>Canonical URL:</span>
-                            <input type="text" name='seo[canonical]' value="<?= $seo['canonical'] ?? '' ?>">
-                        </div>
-
-                        <h3>Open Graph Data</h3>
-                        <hr>
-
-                        <div class="item">
-                            <span>og:type</span>
-                            <input type="text" name='seo[og-type]' value="<?= $seo['og-type'] ?? '' ?>">
-                        </div>
-                        <div class="item">
-                            <span>og:title</span>
-                            <input type="text" name='seo[og-title]' value="<?= $seo['og-title'] ?? '' ?>">
-                        </div>
-                        <div class="item">
-                            <span>og:description</span>
-                            <textarea name='seo[og-description]'><?= $seo['og-description'] ?? '' ?></textarea>
-                        </div>
-                        <div class="item">
-                            <span>og:locale</span>
-                            <input type="text" name='seo[og-locale]' value="<?= $seo['og-locale'] ?? '' ?>">
-                        </div>
-                        <div class="item">
-                            <?php if (!empty($seo['og-image'])): ?>
-                                <img class="img-thumb" src="../<?= $seo['og-image'] ?>" alt="OG Image">
-                            <?php endif; ?>
-                            <span>og:image</span>
-                            <input type="file" name="seo[og-image]">
-                        </div>
-
-                        <h3>Language & Localization</h3>
-                        <hr>
-
-                        <div class="item">
-                            <span>Lang home:</span>
-                            <input type="text" name='seo[lang]' value="<?= $seo['lang'] ?? '' ?>">
-                        </div>
-
-                        <div class="item">
-                            <span>Lang page:</span>
-                            <input type="text" name='seo[lang-page]' value="<?= $seo['lang-page'] ?? '' ?>">
-                        </div>
-
-                        <h3>Hreflang Settings</h3>
-                        <hr>
-
-                        <div x-data="{ 
-                            hreflangItems: <?= htmlspecialchars(json_encode(isset($seo['hreflang']) ? json_decode($seo['hreflang'], true) ?? [] : []), ENT_QUOTES, 'UTF-8'); ?> || []
-                        }">
-                            <button type="button" @click="hreflangItems.push({ hreflang: '', href: '' })" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; margin-bottom: 15px; cursor: pointer; font-size: 14px;">+ Add Hreflang Item</button>
-
-                            <template x-for="(item, index) in hreflangItems" :key="index">
-                                <div style="margin-bottom: 15px; padding: 15px; border: 1px solid #ddd;">
-                                    <div style="display: grid; grid-template-columns: 1fr 1fr auto; gap: 15px; align-items: center;">
-                                        <div>
-                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Hreflang</label>
-                                            <input type="text" x-model="item.hreflang" :name="`seo[hreflang][${index}][hreflang]`" placeholder="en, es, fr, etc." style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
-                                        </div>
-                                        <div>
-                                            <label style="display: block; margin-bottom: 5px; font-weight: bold;">Href URL</label>
-                                            <input type="text" x-model="item.href" :name="`seo[hreflang][${index}][href]`" placeholder="https://example.com/en/" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
-                                        </div>
-                                        <button type="button" @click="hreflangItems.splice(index, 1)" style="background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 4px; margin-top: 25px;">Remove</button>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-
-                </div>
-                
-                <div class="form__btn-block">
-                    <button type="submit" class="form__submit">Save All Changes</button>
-                </div>
-            </form>
-        </div>
-    </div>
-
-    <script src='/js/admin/scripts.js'></script>
-</body>
-
-</html>

resources/view/admin/index_new.php

@@ -370,6 +370,19 @@ ob_start();
                                             </div>
                                         </div>
 
+                                        <!-- Акцентный цвет -->
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-700 mb-2">Акцентный цвет (для важных элементов)</label>
+                                            <div class="flex gap-3">
+                                                <input type="color" value="<?= $styles['accent_color'] ?? '#FF6B35' ?>"
+                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
+                                                       onchange="this.nextElementSibling.value = this.value">
+                                                <input type="text" name='styles[accent_color]' value="<?= htmlspecialchars($styles['accent_color'] ?? '') ?>"
+                                                       placeholder="#FF6B35"
+                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                            </div>
+                                        </div>
+
                                         <!-- Цвет таблицы -->
                                         <div>
                                             <label class="block text-sm font-medium text-gray-700 mb-2">Цвет таблицы (фон)</label>
@@ -408,6 +421,19 @@ ob_start();
                                                        class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                             </div>
                                         </div>
+
+                                        <!-- Цвет рамки контента -->
+                                        <div>
+                                            <label class="block text-sm font-medium text-gray-700 mb-2">Цвет рамки контента</label>
+                                            <div class="flex gap-3">
+                                                <input type="color" value="<?= $styles['content_border_color'] ?? '#E4E4E4' ?>"
+                                                       class="w-12 h-10 rounded border border-gray-300 cursor-pointer"
+                                                       onchange="this.nextElementSibling.value = this.value">
+                                                <input type="text" name='styles[content_border_color]' value="<?= htmlspecialchars($styles['content_border_color'] ?? '') ?>"
+                                                       placeholder="#E4E4E4"
+                                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
 

resources/view/home.php

@@ -21,26 +21,160 @@ ob_start();
 <?php endif; ?>
 
 
-<div class="section-wrapper">
-    <div class="container">
-        <section class="content-bg section text">
-            <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. </h2>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
-                Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
-                accusamus eos doloremque, a quam dolorum culpa, aliquid
-                deserunt impedit ex possimus illo.</p>
-            <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. </h2>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
-                Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
-                accusamus eos doloremque, a quam dolorum culpa, aliquid
-                deserunt impedit ex possimus illo.</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
-                Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
-                accusamus eos doloremque, a quam dolorum culpa, aliquid
-                deserunt impedit ex possimus illo.</p>
-        </section>
+<div class="section-wrapper container">
+    <!-- Table of Contents -->
+    <div class="toc">
+        <div class="toc__header">
+            <h2 class="toc__title">Contents</h2>
+        </div>
+        <div class="toc__content">
+            <ol class="toc__list">
+                <li class="toc__item">
+                    <a href="#section1" class="toc__link">Introduction to the Topic</a>
+                </li>
+                <li class="toc__item">
+                    <a href="#section2" class="toc__link">Main Features and Benefits</a>
+                    <ul class="toc__list toc__list--nested">
+                        <li class="toc__item">
+                            <a href="#section2-1" class="toc__link">Feature Overview</a>
+                        </li>
+                        <li class="toc__item">
+                            <a href="#section2-2" class="toc__link">Key Benefits</a>
+                        </li>
+                        <li class="toc__item">
+                            <a href="#section2-3" class="toc__link">Comparison with Competitors</a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="toc__item">
+                    <a href="#section3" class="toc__link">How to Get Started</a>
+                    <ul class="toc__list toc__list--nested">
+                        <li class="toc__item">
+                            <a href="#section3-1" class="toc__link">Installation Process</a>
+                        </li>
+                        <li class="toc__item">
+                            <a href="#section3-2" class="toc__link">Initial Configuration</a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="toc__item">
+                    <a href="#section4" class="toc__link">Advanced Tips and Tricks</a>
+                </li>
+                <li class="toc__item">
+                    <a href="#section5" class="toc__link">Common Questions</a>
+                </li>
+                <li class="toc__item">
+                    <a href="#section6" class="toc__link">Conclusion</a>
+                </li>
+            </ol>
+        </div>
     </div>
 
+    <section class="section text">
+        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. </h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
+            accusamus eos doloremque, a quam dolorum culpa, aliquid
+            deserunt impedit ex possimus illo.</p>
+        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. </h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
+            accusamus eos doloremque, a quam dolorum culpa, aliquid
+            deserunt impedit ex possimus illo.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
+            accusamus eos doloremque, a quam dolorum culpa, aliquid
+            deserunt impedit ex possimus illo.</p>
+        <div class="btn-wrapper">
+            <button class="btn btn--accent">Click Here to Learn More</button>
+        </div>
+    </section>
+    <section class="section text">
+        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. </h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
+            accusamus eos doloremque, a quam dolorum culpa, aliquid
+            deserunt impedit ex possimus illo.</p>
+        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. </h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
+            accusamus eos doloremque, a quam dolorum culpa, aliquid
+            deserunt impedit ex possimus illo.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Quis dolore qui nemo quaerat aperiam aliquam nobis inventore,
+            accusamus eos doloremque, a quam dolorum culpa, aliquid
+            deserunt impedit ex possimus illo.</p>
+        <div class="btn-wrapper">
+            <button class="btn btn--accent">Get Started Now</button>
+        </div>
+    </section>
+
+
+    <!-- FAQ Section -->
+    <section class="section">
+        <h2 class="faq__title">Frequently Asked Questions</h2>
+        <div class="faq">
+            <div class="faq__item">
+                <div class="faq__question">
+                    <div class="faq__question-title">What is your refund policy?</div>
+                </div>
+                <div class="faq__answer">
+                    <div class="faq__answer-inner">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="faq__item">
+                <div class="faq__question">
+                    <div class="faq__question-title">How long does shipping take?</div>
+                </div>
+                <div class="faq__answer">
+                    <div class="faq__answer-inner">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="faq__item">
+                <div class="faq__question">
+                    <div class="faq__question-title">Do you offer customer support?</div>
+                </div>
+                <div class="faq__answer">
+                    <div class="faq__answer-inner">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="faq__item">
+                <div class="faq__question">
+                    <div class="faq__question-title">Can I change my order after placing it?</div>
+                </div>
+                <div class="faq__answer">
+                    <div class="faq__answer-inner">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+    <?php if (!empty($settingsContent['author-img'])): ?>
+        <section class=" section">
+            <div class="author">
+                <div class="author__img">
+                    <img src="<?= htmlspecialchars($settingsContent['author-img']) ?>" alt="<?= htmlspecialchars($settingsContent['author-name'] ?? '') ?>" title="<?= htmlspecialchars($settingsContent['author-name'] ?? '') ?>">
+                </div>
+                <div class="author__info">
+                    <div class="author__name"><?= htmlspecialchars($settingsContent['author-name'] ?? '') ?></div>
+                    <div class="author__date"><?= $settingsContent['modified-date'] ?? '' ?></div>
+                </div>
+            </div>
+        </section>
+    <?php endif; ?>
+
 </div>
 
 

resources/view/layouts/partials/footer.php

@@ -2,42 +2,64 @@
 $content = (new \App\Settings('content'))->getAll();
 $footerLogo = json_decode($content['footer-logo'] ?? '{}', true);
 $currentDomain = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'];
+$menuItems = json_decode($content['menu'] ?? '[]', true);
 ?>
 <footer class="footer">
-        <div class="container">
+        
 
             <div class="footer__content">
-                <div class="footer__logo">
-                    <?php if (!empty($footerLogo['src'])): ?>
-                        <a href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] ?>">
-                            <img src="<?= htmlspecialchars($footerLogo['src']) ?>" alt="<?= $footerLogo['alt'] ?? '' ?>" title="<?= $footerLogo['title'] ?? '' ?>">
-                        </a>
-                    <?php endif; ?>
-                </div>
-                <div class="footer__text">
-                    <?= $content['footer__text'] ?? '' ?>
+                <div class="container footer__content-inner">
+                    <div class="footer__logo">
+                        <?php if (!empty($footerLogo['src'])): ?>
+                            <a href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] ?>">
+                                <img src="<?= htmlspecialchars($footerLogo['src']) ?>" alt="<?= $footerLogo['alt'] ?? '' ?>" title="<?= $footerLogo['title'] ?? '' ?>">
+                            </a>
+                        <?php endif; ?>
+                    </div>
+                    <div class="footer__text">
+                        <p>Casino.online is an independent team providing information about Megaways slots in the UK.
+                        We provide the latest and safest information about casino games.
+                        On our website you will find free Megaways slots, casino bonuses and a list of online casinos to play.
+                        We offer honest information that we verify ourselves.</p>
+                    </div>
                 </div>
             </div>
 
+            <!-- footer partners -->
+             <div class="footer__partners">
+                <div class="container">
+                    <ul class="footer__bottom-imgs">
+                        <li><span><img data-src="images/18+.png" class="lazy" alt="18+" title="18+" width="40" height="40"></span></li>
+                        <li><a href="https://www.begambleaware.org/" rel="nofollow noopener" target="_blank"><img height="40" width="252" class="lazy" data-src="images/GA.png" alt="BeGambleAware" title="BeGambleAware"></a></li>
+                        <li><a href="https://itechlabs.com/" rel="nofollow noopener" target="_blank"><img height="40" width="40" class="lazy" data-src="images/itechlabs.png" alt="iTech Labs" title="iTech Labs"></a></li>
+                        <li><a href="https://www.mga.org.mt/" rel="nofollow noopener" target="_blank"><img height="40" width="92" class="lazy" data-src="images/mga.png" alt="MGA" title="MGA"></a></li>
+                        <li><img height="40" width="126" class="lazy" data-src="images/ecogra.png" alt="eCOGRA" title="eCOGRA"></li>
+                        <li><a href="https://gaminglabs.com/" rel="nofollow noopener" target="_blank"><img height="46" width="86" class="lazy" data-src="images/GLI.png" alt="GLI" title="GLI"></a></li>
+                    </ul>
+                </div>
+             </div>
+
+
             <!-- footer menu -->
-            <ul class="footer__menu">
-                <li><a href="<?= $currentDomain . '/contacts' ?>"><?= $content['contact-menu-name'] ?? '' ?></a></li>
-            </ul>
+            <div class="footer__menu">
+                <div class="container">
+                    <ul class="footer__menu-list">
+                        <?php foreach ($menuItems as $menuItem): ?>
+                            <li class="footer__menu-item">
+                                <a href="<?= htmlspecialchars($menuItem['anchor'] ?? '') ?>" class="footer__menu-link">
+                                    <?= htmlspecialchars($menuItem['title'] ?? '') ?>
+                                </a>
+                            </li>
+                        <?php endforeach; ?>
+                    </ul>
+                </div>
+            </div>
 
-            <!-- footer partners -->
-            <ul class="footer__bottom-imgs">
-                <li><span><img data-src="images/18+.png" class="lazy" alt="18+" title="18+" width="40" height="40"></span></li>
-                <li><a href="https://www.begambleaware.org/" rel="nofollow noopener" target="_blank"><img height="40" width="252" class="lazy" data-src="images/GA.png" alt="BeGambleAware" title="BeGambleAware"></a></li>
-                <li><a href="https://itechlabs.com/" rel="nofollow noopener" target="_blank"><img height="40" width="40" class="lazy" data-src="images/itechlabs.png" alt="iTech Labs" title="iTech Labs"></a></li>
-                <li><a href="https://www.mga.org.mt/" rel="nofollow noopener" target="_blank"><img height="40" width="92" class="lazy" data-src="images/mga.png" alt="MGA" title="MGA"></a></li>
-                <li><img height="40" width="126" class="lazy" data-src="images/ecogra.png" alt="eCOGRA" title="eCOGRA"></li>
-                <li><a href="https://gaminglabs.com/" rel="nofollow noopener" target="_blank"><img height="46" width="86" class="lazy" data-src="images/GLI.png" alt="GLI" title="GLI"></a></li>
-            </ul>
 
             <!-- footer copyrights -->
             <div class="footer__copyright">
                 <?= $content['copyright'] ?? '' ?>
             </div>
 
-        </div>
+
     </footer>

resources/view/layouts/partials/styles.php

@@ -1,79 +1,18 @@
 <?php
-$styles = (new \App\Settings('styles'))->getAll(); 
+$styles = (new \App\Settings('styles'))->getAll();
 ?>
 <style>
-    /* Основные цвета */
-    body {
-        background-color: <?= $styles['body_bg_color'] ?? '#0A0A0A' ?>;
-        color: <?= $styles['text_color'] ?? '#FFFFFF' ?>; 
-    }
-
-    /* Цвет хедера (шапки сайта) */
-    .header,
-    .header-color {
-        background: <?= $styles['header_color'] ?? '#1E1E1E' ?>;
-    }
-
-
-    /* Цвет контентной части */
-    .content-bg{
-        background-color: <?= $styles['content_bg_color'] ?? '#1A1A1A' ?>;
-    }
-
-    /* Цвет текста основного */
-    body,
-    .text-color {
-        color: <?= $styles['text_color'] ?? '#FFFFFF' ?>;
-    }
-
-    /* Цвет текста ссылок в контенте */
-    a {
-        color: <?= $styles['link_color'] ?? '#4A9EFF' ?>;
-        text-decoration: none;
-        transition: color 0.3s ease;
-    }
-
-    a:hover {
-        color: <?= $styles['link_color'] ?? '#4A9EFF' ?>;
-        opacity: 0.8;
-    }
-
-    /* Цвет таблицы (фон) */
-    table {
-        background: <?= $styles['table_bg_color'] ?? '#1A1A1A' ?>;
-        color: <?= $styles['text_color'] ?? '#FFFFFF' ?>;
-    }
-
-    /* Цвет шапки таблицы (thead) */
-    th,
-    thead,
-    table thead tr {
-        background-color: <?= $styles['table_header_color'] ?? '#2A2A2A' ?>;
-        color: <?= $styles['text_color'] ?? '#FFFFFF' ?>;
-    }
-
-    caption {
-        background: <?= $styles['table_header_color'] ?? '#2A2A2A' ?>;
-        color: <?= $styles['text_color'] ?? '#FFFFFF' ?>;
-    }
-
-    /* Цвет фона футера */
-    .footer,
-    .footer-color {
-        background: <?= $styles['footer_bg_color'] ?? '#1E1E1E' ?>;
-    }
-
-    /* Header buttons - you can customize these colors in admin panel later */
-    .header__btn--primary {
-        color: #FFFFFF;
-    }
-
-    .header__btn--secondary {
-        color: #FFFFFF;
-    }
-
-    /* Prevent body scroll when mobile menu is open */
-    body.menu-open {
-        overflow: hidden;
+    :root {
+        /* Color variables from admin panel */
+        --body-bg-color: <?= $styles['body_bg_color'] ?? '#0A0A0A' ?>;
+        --text-color: <?= $styles['text_color'] ?? '#FFFFFF' ?>;
+        --header-color: <?= $styles['header_color'] ?? '#1E1E1E' ?>;
+        --content-bg-color: <?= $styles['content_bg_color'] ?? '#1A1A1A' ?>;
+        --content-border-color: <?= $styles['content_border_color'] ?? '#E4E4E4' ?>;
+        --link-color: <?= $styles['link_color'] ?? '#4A9EFF' ?>;
+        --accent-color: <?= $styles['accent_color'] ?? '#FF6B35' ?>;
+        --table-bg-color: <?= $styles['table_bg_color'] ?? '#1A1A1A' ?>;
+        --table-header-color: <?= $styles['table_header_color'] ?? '#2A2A2A' ?>;
+        --footer-bg-color: <?= $styles['footer_bg_color'] ?? '#1E1E1E' ?>;
     }
 </style>