word-games-theme 2.1.7 → 2.1.8

data/assets/css/wordgames-home.css

@@ -0,0 +1,948 @@
+/* headings css */
+.main-header {
+  background: url(/assets/images/background.svg) no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.pageHeaderBg {
+  background-position: center;
+  background-size: cover;
+  margin-bottom: 30vh;
+  padding: 15px 0;
+}
+
+.pageHeading h1 {
+  font-size: 43px;
+  font-weight: 600;
+  color: #000;
+  line-height: 64.5px;
+}
+
+#containerWd {
+  max-width: 100%;
+  width: 800px !important;
+  padding: 0px;
+  position: relative;
+}
+
+#result-page-data {
+  max-width: 100%;
+  width: 950px !important;
+  padding: 0px;
+  position: relative;
+}
+
+
+.st0 {
+  fill: var(--primary-color)
+}
+
+.serachSection {
+  position: relative;
+}
+
+.serachSection .serachBox .txtBox {
+  height: 80px;
+  border: solid 3px #313131;
+  border-radius: 74px;
+  background: #fff;
+  padding: 2rem;
+  width: 100%;
+  font-size: 15px;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  color: var(--txtColor);
+  text-indent: 15px;
+  position: relative;
+  box-shadow: 3px 6px 1px 0px var(--primary-color);
+}
+
+.serachSection .serachBox .letter-close-button {
+  position: absolute;
+  right: 300px;
+  top: 24px;
+  font-size: 18px;
+  cursor: pointer;
+  display: none;
+}
+
+.serachSection .serachBox .close_ltr_icon {
+  display: block;
+}
+
+.serachSection .serachBox .serachBtn {
+  background-color: var(--primary-color) !important;
+  background: url(/assets/images/search.svg) no-repeat center center;
+  background-size: 35px 35px;
+  height: 64px;
+  width: 112px;
+  border: none;
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  outline: none;
+  border-radius: 74px;
+}
+
+.serachSection .serachBox .select_dropDown2 {
+  height: 80px;
+  position: absolute;
+  top: 0px;
+  font-size: 15px;
+  width: 142px;
+  overflow: hidden;
+  object-fit: cover;
+  right: 142px;
+  border-bottom: 0 !important;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  border-top: 1px solid rgba(0, 0, 0, 0.11);
+}
+
+
+.serachSection .serachBox .select_dropDown2:focus {
+  outline: none;
+  box-shadow: unset;
+}
+
+input:focus-visible {
+  outline: none;
+  box-shadow: unset;
+}
+
+
+.serachSection .serachBox .advancedFilter .filterButton {
+  background: #f8f9fa;
+  box-shadow: 0 0 2px #343a4063;
+  width: 210px;
+  border-radius: 10px;
+  cursor: pointer;
+  border: none;
+  padding: 12px;
+  text-align: left;
+  color: #1c1107;
+  font-size: 13px;
+  font-weight: 600;
+  font-stretch: normal;
+  font-style: normal;
+  outline: none;
+}
+
+.angle-arrow2 {
+  background: url(/assets/images/angle-arrow-down.svg) no-repeat center center;
+  background-size: contain;
+  object-fit: cover;
+  width: 10px;
+  height: 10px;
+  font-weight: 900;
+  position: absolute;
+  top: 19px;
+  right: 9px;
+  margin: -3px 0;
+  cursor: pointer;
+  /* z-index: 9999; */
+}
+
+
+.startsWith,
+.mustInclude,
+.endsWith,
+.exculdeWith,
+.inculdeWith,
+.wordLength {
+  position: relative;
+}
+
+.actives {
+  z-index: 999;
+  top: 90px;
+  background: #fff;
+  box-shadow: 0 0 5px rgb(0 0 0 / 40%);
+  padding: 15px 15px;
+  border-radius: 15px;
+  height: auto;
+  position: absolute;
+  right: -16px;
+  margin: 1rem 0;
+  flex-direction: column;
+  width: 240px;
+  display: inline-flex !important;
+  gap: 5px;
+}
+
+.fillterWrapper {
+  flex-wrap: wrap;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
+}
+
+.fillterWrapper input {
+  border-radius: 74px;
+  border: solid 2px #313131;
+  background-color: #fff;
+  font-size: 17px;
+  padding: 5px 12px;
+  width: 200px;
+  outline: none;
+  box-shadow: none;
+  padding: 1.5rem 2.5rem;
+}
+
+.fillterWrapper .filter-tooltip {
+  /* opacity: .5; */
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.filter-tooltip i {
+  color: var(--white-color);
+  background-color: var(--primary-color);
+  border-radius: 100px;
+  width: 30px;
+  padding: 3px;
+  display: block;
+  text-align: center;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+
+.filter-tooltip::after,
+.filter-tooltip::before {
+  right: 0px;
+  opacity: 0;
+  position: absolute;
+  z-index: -100;
+
+}
+
+.filter-tooltip:focus::after,
+.filter-tooltip:focus::before,
+.filter-tooltip:hover::after,
+.filter-tooltip:hover::before {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  z-index: 100
+}
+
+.filter-tooltip::before {
+  border-style: var(--tooltip-border-style);
+  ;
+  border-width: 1em .75em 0 .75em;
+  border-color: #3e474f transparent transparent transparent;
+  transition: 0 !important;
+  bottom: 100%;
+  content: '';
+  margin-left: -.5em;
+  transform: scale(.6) translateY(-90%);
+  font-size: 12px;
+  top: -10px;
+}
+
+.filter-tooltip:focus::before,
+.filter-tooltip:hover::before {
+  transition: all .65s cubic-bezier(.84, -.18, .31, 1.26) .2s
+}
+
+.filter-tooltip::after {
+  font-size: 10px;
+  text-align: center;
+  background: #000;
+  border-radius: .25em;
+  bottom: 120%;
+  color: #edeff0;
+  content: attr(data-tip);
+  margin-left: -4em;
+  padding: var(--tooltip-padding);
+  transition: all .65s cubic-bezier(.84, -.18, .31, 1.26);
+  transform: scale(.6) translateY(50%);
+  width: 150px;
+}
+
+.filter-tooltip:focus::after,
+.filter-tooltip:hover::after {
+  transition: all .65s cubic-bezier(.84, -.18, .31, 1.26)
+}
+
+/* Feature highlightes section css */
+.feature-highlight-title,
+.howto,
+.infographics-title,
+.related_post_heading,.points-table {
+  font-size: 35px;
+  font-weight: 900;
+  border-bottom: 4px solid var(--primary-color);
+  width: 644px;
+}
+
+.features_data .card-body .card-title {
+  box-shadow: 2px 2px 0px 0 rgba(0, 0, 0, 1);
+  padding: 5px 1.2rem;
+  transition: all 0.5s ease;
+  font-size: 1.5rem;
+  line-height: 25px;
+  color: var(--secondary-color-1);
+  font-weight: 600;
+  margin-bottom: 8px;
+  margin-top: 5px;
+  text-align: left;
+  background-color: var(--primary-color);
+  border-radius: 4px;
+}
+
+.features_data .card-body:hover i {
+  transform: scale(1.2);
+  transition: all 0.5s linear;
+}
+
+/* FAQ's section css */
+.faqs {
+  width: 100%;
+}
+
+.faqs details {
+  margin: 25px 0;
+}
+
+.faqs summary {
+  list-style: none;
+  font-size: 16px;
+  font-weight: 600;
+  color: #000;
+  padding: 0;
+  margin-bottom: 1rem;
+  outline: 0;
+  border-radius: 0.25rem;
+  text-align: left;
+  cursor: pointer;
+  position: relative;
+  border-radius: 0;
+}
+
+details[open]>summary::after {
+  font-family: "Font Awesome 5 Free";
+  top: 0;
+  position: absolute;
+  content: '\2212';
+  right: 0;
+  font-size: 24px;
+  color: var(--primary-color);
+  border: 3px solid;
+  /* background-color: var(--primary-color); */
+  width: 29px;
+  height: 29px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+}
+
+details>summary::after {
+  font-family: "Font Awesome 5 Free";
+  position: absolute;
+  content: '\002B';
+  right: 0;
+  top: 0;
+  font-size: 24px;
+  color: var(--primary-color);
+  border: 3px solid;
+  width: 29px;
+  height: 29px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+}
+
+.faqList-container {
+  margin-top: 50px;
+  margin-bottom: 120px;
+}
+
+ .faq-question {
+  margin: 0 0 25px;
+  font-size: 19px;
+  font-weight: 600;
+  color: #1E1E1E;
+  position: relative;
+  line-height: 28px;
+  cursor: pointer;
+}
+
+ .faq-answer {
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+  color: #3E3E3E;
+  margin: 0 0 25px;
+  height: auto;
+  overflow: hidden;
+  width: 890px;
+}
+
+/* How to section design css */
+
+
+.how-to-section {
+  background-color: var(--secondary-color);
+}
+
+.how-to-section .how-to-leftimg {
+  margin-bottom: 24px;
+}
+
+.how-to-title {
+  background-color: #1E1E1E;
+  color: var(--white-color);
+  font-size: 22px;
+  line-height: 33px;
+  max-width: fit-content;
+  padding: 0 8px;
+  letter-spacing: 2px;
+}
+
+.how-to-section .how-to-list {
+  margin: 0;
+  padding: 6px 0;
+  list-style: none;
+  text-align: left;
+  margin-top: 1.5rem;
+}
+
+.youtubeVideoPlayer {
+  border-radius: 7px;
+  border: 2px solid black;
+  box-shadow: 3px 6px 1px 0px var(--primary-color);
+}
+
+.how-to-section .how-to-list-item {
+  line-height: 24px;
+  font-size: 15px;
+  font-weight: 400;
+  display: flex;
+  padding: 6px 0;
+}
+
+.how-to-section .how-to-list-item span {
+  min-width: 24px;
+}
+
+.how-to-right {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+
+/* infographicss css */
+.inforgraphics_section {
+  width: 100%;
+  padding: 50px 0px 50px 0px;
+  /* border-top: 1px solid rgb(224, 224, 224); */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.inforgraphics_section .wrapper {
+  display: flex;
+  max-width: 700px;
+  position: relative;
+}
+
+.inforgraphics_section .wrapper svg {
+  top: 50%;
+  height: 44px;
+  width: 44px;
+  color: #343F4F;
+  cursor: pointer;
+  font-size: 1.15rem;
+  position: absolute;
+  text-align: center;
+  line-height: 44px;
+  background: #eee;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.1s linear;
+}
+
+.inforgraphics_section .wrapper svg:active {
+  transform: translateY(-50%) scale(0.9);
+}
+
+.inforgraphics_section .wrapper svg:hover {
+  background: #f2f2f2;
+}
+
+.inforgraphics_section .wrapper svg:first-child {
+  left: 0px;
+  display: none;
+  z-index: 999;
+}
+
+.inforgraphics_section .wrapper svg:last-child {
+  right: 0px;
+}
+
+.carousel {
+  display: flex;
+  max-width: 700px;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+}
+
+.carousel-inner {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.slide {
+  flex: 0 0 calc(100% / 3);
+  scroll-snap-align: start;
+  padding: 20px;
+}
+
+.carousel img {
+  width: 100%;
+  object-fit: contain;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.carousel-inner p {
+  text-align: center;
+  margin: 10px 0;
+  font-size: 14px;
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+/* recent and related posts on home page css */
+.recent-post-card,
+.related-post-card {
+  /* padding: 1rem; */
+  border: 3px solid var(--black-color);
+  border-radius: 10px;
+  box-shadow: 3px 6px 1px 0px var(--primary-color);
+}
+
+.related_post_heading {
+  /* width: 100%; */
+  font-size: 46px;
+  font-weight: 800;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.24;
+  letter-spacing: normal;
+  color: #11304e;
+  margin-bottom: 45px;
+  padding-top: 75px;
+  display: inline-block;
+}
+.card-body{
+  padding: 1rem !important;
+}
+
+.card-body .anchor_link {
+  text-decoration: none !important;
+  color: #343a40 !important;
+}
+.post-desc{
+  font-size: 16px;
+  color: #3E3E3E;
+  line-height: 24px;
+}
+.card-body .anchor_link .card-title {
+  font-weight: 600;
+  font-size: 35px;
+  background-color: var(--primary-color);
+  line-height: 43px;
+  border-radius: 10px;
+  height: 166px;
+  padding: 15px;
+}
+
+.card-footer {
+  border: none;
+}
+
+.wrapfooter {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.wrapfooter img {
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+}
+
+.wrapfooter .author-meta {
+  flex: 1 1 auto;
+  padding: 0 15px;
+}
+
+.wrapfooter .author-meta a {
+  font-size: 15px;
+  color: #000;
+  text-transform: capitalize;
+}
+
+/* Rating tool css */
+.rating-tool {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0px 20px 0px;
+  border-top: 1px solid rgb(221, 221, 221);
+  border-bottom: 1px solid rgb(221, 221, 221);
+  margin-bottom: 60px;
+  position: relative;
+  top: 30px;
+}
+
+.rating-tool #rating-img {
+  height: 1px;
+  width: 1px;
+  filter: brightness(100);
+}
+
+.rating {
+  font-size: 30px;
+}
+
+.rating-tool .rating-text {
+  font-size: 35px;
+  font-weight: 700;
+  color: rgb(33, 33, 33);
+  padding: 6px;
+}
+
+.rating-tool .rating-stars {
+  color: #9d9d9d !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin: 1rem 0px;
+}
+
+.rating-tool .rating-stars i {
+  padding: 5px;
+  font-size: 40px;
+}
+
+.rating-tool .rating-value {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 400;
+  color: rgb(33, 33, 33);
+  padding: 6px;
+}
+
+/* internatiionalization css */
+#int-modal-btn {
+  border: none;
+  padding: 0px 1rem;
+}
+
+/* word meaning page css */
+.information-title {
+  font-size: 43px;
+  font-weight: 900;
+}
+
+.section-gap {
+  padding: 60px 0;
+  font-size: 25px;
+  color: var(--black-color);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 30px;
+}
+
+.card-footer:last-child{
+  border-radius: 40px !important;
+}
+summary::-webkit-details-marker {
+  display: none;
+}
+
+
+@media (max-width: 768px) {
+  .overlay{
+    display: none;
+  }
+  .txt-box-container{
+    padding:0 1rem;
+  }
+
+  .main-header {
+    background: #22e2c0;
+    height: auto !important;
+  }
+
+  .fillterWrapper input {
+    width: 150px;
+    font-size: 12px;
+    font-weight: 900;
+  }
+
+  /* navbar ||| pageheading || searchsection css for mobile */
+  .navbar {
+    padding: 1.2rem 15px !important;
+  }
+
+  .pageHeaderBg {
+    background: unset;
+  }
+
+  .pageHeading h1 {
+    font-size: 2.1875rem;
+  }
+
+  .pageHeading>h2 {
+    font-size: 1.4rem;
+  }
+
+  #containerWd {
+    width: 100% !important;
+    /* padding: 0px 15px; */
+  }
+
+  .serachSection .serachBox .txtBox {
+    height: 70px !important;
+    font-size: 12px;
+    padding: 1rem !important;
+  }
+
+  .serachSection .serachBox .letter-close-button {
+    right: 45%;
+    top: 15px;
+    font-size: 15px;
+  }
+
+  .serachSection .serachBox .serachBtn {
+    height: 50px !important;
+    width: 50px !important;
+    top: 10px;
+    background-size: 20px 20px;
+    right: 24px;
+  }
+
+  .serachSection .serachBox .select_dropDown2 {
+    height: 50px;
+    width: 22%;
+    right: 77px;
+    border: none;
+    font-size: 12px;
+    top: 10px;
+  }
+
+  .filter-tooltip img{
+    width: 23.37px;
+    height: 23.37px;
+  }
+  .wrapper_dropDown {
+    align-items: flex-end;
+    /* flex-direction: column; */
+    gap: 5px !important;
+  }
+
+  .actives {
+    top: 102px;
+    right: -5px;
+  }
+  .letter-close-button svg{
+    width: 30px;
+  }
+
+  /* Feature Highlights ||  How to || Faq css for mobile */
+  .features_data .card-body {
+    border-radius: 10px;
+    background-color: #fff;
+    box-shadow: unset;
+    /* margin: 20px 0; */
+  }
+
+  .feature-highlight-title,
+  .howto,
+  .infographics-title,
+  .related_post_heading {
+    width: 120px !important;
+    font-size: 28px;
+    text-align: center;
+    margin: 0 auto
+  }
+  .card-text{
+    font-size: 12px !important;
+  }
+
+
+
+  .faqList-container {
+    margin-bottom: 0px !important;
+  }
+   .faq-question{
+    font-size: 15px;
+    padding-right: 5rem;
+  }
+  .faq-answer{
+    font-size: 12px;
+    width: auto !important;
+  }
+
+  .how-to-section .how-to-leftimg {
+    margin-bottom: 24px;
+    width: 100%;
+  }
+
+  /* rating and social media  share icons css for mobile */
+
+
+  .social-icons {
+    position: static;
+    width: 100%;
+    font-size: 16px;
+    gap: 50px;
+    flex-direction: row;
+    z-index: 999;
+    box-shadow: unset;
+    border-top: 1px solid rgb(221, 221, 221);
+    border-bottom: 1px solid rgb(221, 221, 221);
+    height: auto;
+    padding: 20px;
+
+  }
+
+  .share-icon {
+    width: 14px;
+  }
+
+  .share-this {
+    font-weight: 900;
+    font-size: 14px;
+    display: block !important;
+    color: #000;
+    text-align: center;
+  }
+
+  /* youtube video how css */
+  .how-to-video-wrapper .youtubeVideoPlayer {
+    width: 100%;
+  }
+
+  .how-to-img-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  /* infographics css */
+  .inforgraphics_section .wrapper {
+    max-width: 100%;
+  }
+
+  .carousel-inner p {
+    font-size: 20px;
+  }
+
+  .inforgraphics_section .wrapper svg:first-child {
+    left: 0;
+    z-index: 99;
+  }
+
+  .inforgraphics_section .wrapper svg:last-child {
+    right: 0;
+    z-index: 99;
+    display: block !important;
+  }
+
+  .carousel {
+    overflow-x: hidden;
+  }
+
+  .carousel img {
+    height: 600px;
+  }
+
+  .slide {
+    flex: 0 0 100%;
+    margin-right: 0;
+  }
+
+  /* footer css for mobile */
+  .footer-section .language-drop-down-item {
+    width: 100% !important;
+  }
+  .email_heaidng{
+    margin-top: 3rem;
+  }
+  .relatedPosts{
+    padding: 0 1.5rem;
+  }
+}
+
+
+@media (max-width: 992px) {
+
+  .wordgametheme-sidebar-right,
+  .wordgametheme-sidebar-left {
+    display: none;
+  }
+
+  .navbar-nav {
+    margin-left: 0rem;
+  }
+
+  .navbar-nav .nav-item {
+    padding: 0px !important;
+  }
+
+  .dropdown-menu.show {
+    display: block !important;
+    padding: 15px !important;
+  }
+}
+
+
+@media screen and (min-width: 1450px) {
+  .wordgametheme-sidebar-left {
+    left: 194px !important;
+  }
+
+  .wordgametheme-sidebar-right {
+    right: 194px !important;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  .wordgametheme-sidebar-left {
+    left: 313px !important;
+  }
+
+  .wordgametheme-sidebar-right {
+    right: 313px !important;
+  }
+}