.

css/styles.css

@@ -1,172 +1,191 @@
-/* Reset de estilos */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
+/* Estilos gerais */
 body {
   font-family: 'Taviraj', serif;
-  background-color: #f8f8f8;
-  color: #333;
+  background-color: #121212;
+  color: #fff;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Yeseva One', serif;
 }
 
 .container {
-  max-width: 960px;
+  max-width: 1200px;
   margin: 0 auto;
   padding: 2rem;
 }
 
-/* Hero Section */
-.hero {
-  background-color: #222;
-  color: #fff;
+/* Seção de preços */
+.pricing-section {
   padding: 4rem 0;
+}
+
+.pricing-header {
   text-align: center;
+  margin-bottom: 3rem;
 }
 
-.hero h2 {
-  font-family: 'Yeseva One', serif;
+.pricing-header h2 {
   font-size: 2.5rem;
   margin-bottom: 1rem;
 }
 
-.hero p {
-  font-size: 1.2rem;
-  line-height: 1.6;
-  margin-bottom: 2rem;
-}
-
-/* Toggle Button */
-.toggle {
+/* Toggle switch */
+.toggle-switch {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 3rem;
+  margin-bottom: 2rem;
 }
 
-.toggle span {
-  font-size: 1rem;
-  margin: 0 1rem;
+.toggle-switch span {
+  font-size: 0.9rem;
+  margin: 0 0.5rem;
 }
 
-.toggle button {
-  background-color: #ccc;
-  border: none;
-  border-radius: 2rem;
-  width: 4rem;
-  height: 2rem;
+/* The switch - the box around the slider */
+.switch {
   position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
   cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
 }
 
-.toggle-slider {
-  background-color: #fff;
-  border-radius: 50%;
-  width: 1.5rem;
-  height: 1.5rem;
+.slider:before {
   position: absolute;
-  left: 0.25rem;
-  top: 0.25rem;
-  transition: left 0.3s ease;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #8b5cf6;
 }
 
-.toggle button[aria-checked="true"] .toggle-slider {
-  left: 2.25rem;
+input:focus + .slider {
+  box-shadow: 0 0 1px #8b5cf6;
 }
 
-/* Plans Section */
-.plans {
+input:checked + .slider:before {
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+/* Planos de assinatura */
+.pricing-plans {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
 }
 
 .plan {
-  background-color: #fff;
-  border-radius: 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid #333;
   padding: 2rem;
-  text-align: center;
+  border-radius: 8px;
+  background-color: #27272a;
+  transition: border-color 0.3s ease;
+}
+
+.plan:hover {
+  border-color: #8b5cf6;
 }
 
 .plan h3 {
-  font-family: 'Yeseva One', serif;
-  font-size: 1.5rem;
+  font-size: 1.8rem;
   margin-bottom: 1rem;
 }
 
-.price {
+.plan .price {
   display: flex;
   align-items: baseline;
-  justify-content: center;
-  margin-bottom: 1.5rem;
+  font-size: 2rem;
+  margin-bottom: 1rem;
 }
 
-.price-value {
-  font-size: 2rem;
+.plan .price .value {
   font-weight: bold;
+  margin-right: 0.5rem;
 }
 
-.price-period {
-  font-size: 1rem;
-  color: #666;
-  margin-left: 0.5rem;
+.plan .annual-price {
+  font-size: 0.9rem;
+  color: #888;
+  margin-bottom: 1.5rem;
 }
 
-.features {
+.plan ul {
   list-style: none;
+  padding: 0;
   margin-bottom: 2rem;
 }
 
-.features li {
-  font-size: 1rem;
-  line-height: 1.6;
-  text-align: left;
+.plan ul li {
   margin-bottom: 0.5rem;
+  color: #a1a1aa;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
 }
 
-.features .unavailable {
-  color: #999;
+.plan ul li i {
+  margin-right: 0.5rem;
+  font-size: 1.2rem;
 }
 
-.features li::before {
-  content: "\2713"; /* Checkmark symbol */
-  color: #007bff;
-  margin-right: 0.5rem;
+.plan ul li .check {
+  color: #8b5cf6;
 }
 
-.features .unavailable::before {
-  content: "\2717"; /* X symbol */
-  color: #999;
+.plan ul li .x {
+  color: #ef4444;
 }
 
-.subscribe-button {
-  background-color: #007bff;
+.plan .subscribe-button {
+  background-color: #8b5cf6;
   color: #fff;
   border: none;
-  border-radius: 0.3rem;
   padding: 0.8rem 1.5rem;
+  border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.3s ease;
+  width: 100%;
 }
 
-.subscribe-button:hover {
-  background-color: #0069d9;
-}
-
-.subscribe-button a {
-  color: inherit;
-  text-decoration: none;
-}
-
-/* Media Queries */
-@media (max-width: 768px) {
-  .hero h2 {
-    font-size: 2rem;
-  }
-
-  .plans {
-    grid-template-columns: 1fr;
-  }
+.plan .subscribe-button:hover {
+  background-color: #a855f7;
 }