Add pricing table and subscription page styles with hover effects and notifications

Author: ralyodio

public/css/theme.css

@@ -349,4 +349,133 @@ html, body {
 .bg-primary { background-color: var(--primary-color); }
 .bg-secondary { background-color: var(--secondary-color); }
 .bg-surface { background-color: var(--surface-color); }
-.bg-surface-variant { background-color: var(--surface-variant); }
+.bg-surface-variant { background-color: var(--surface-variant); }
+
+/* Subscription page styles */
+.pricing-table {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-lg);
+  justify-content: center;
+  margin: var(--spacing-xl) 0;
+}
+
+.pricing-plan {
+  flex: 1;
+  min-width: 280px;
+  max-width: 350px;
+  background-color: var(--card-background);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: var(--spacing-lg);
+  text-align: center;
+  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
+  border: 1px solid var(--border-color);
+}
+
+.pricing-plan:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--shadow-lg);
+}
+
+.pricing-plan.popular {
+  border: 2px solid var(--primary-color);
+  position: relative;
+  z-index: 1;
+}
+
+.pricing-plan.popular::before {
+  content: "Best Value";
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--primary-color);
+  color: var(--text-on-primary);
+  padding: 4px 12px;
+  border-radius: var(--border-radius-full);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+}
+
+.plan-name {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.plan-price {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--primary-color);
+  margin-bottom: var(--spacing-lg);
+}
+
+.plan-price small {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  color: var(--text-secondary);
+}
+
+.plan-features {
+  list-style-type: none;
+  padding: 0;
+  margin: 0 0 var(--spacing-lg) 0;
+  text-align: left;
+}
+
+.plan-features li {
+  padding: var(--spacing-sm) 0;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  position: relative;
+  padding-left: 25px;
+}
+
+.plan-features li::before {
+  content: "✓";
+  color: var(--success-color);
+  position: absolute;
+  left: 0;
+  font-weight: var(--font-weight-bold);
+}
+
+.payment-methods {
+  text-align: center;
+  margin: var(--spacing-xl) 0;
+}
+
+.payment-methods p {
+  margin-bottom: var(--spacing-md);
+  color: var(--text-secondary);
+}
+
+.back-link {
+  display: inline-block;
+  margin-top: var(--spacing-xl);
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: var(--font-weight-medium);
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+.offline-notification {
+  background-color: var(--warning-color);
+  color: white;
+  text-align: center;
+  padding: var(--spacing-sm);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(100%);
+  transition: transform var(--transition-normal);
+}
+
+.offline-notification.visible {
+  transform: translateY(0);
+}