Offers, tabelka z uslugami

src/styles/markdown.css

@@ -21,7 +21,7 @@
 }
 
 .fuz-markdown ul {
-  @apply list-disc pl-6 mb-4;
+  @apply list-disc pl-10 mb-4;
 }
 
 .fuz-markdown ol {
@@ -32,6 +32,14 @@
   @apply mb-1;
 }
 
+.fuz-markdown ul li::marker {
+  color: var(--fuz-accent);
+}
+
+.dark .fuz-markdown ul li::marker {
+  color: var(--fuz-accent);
+}
+
 .fuz-markdown a {
   @apply text-blue-600 dark:text-blue-400 underline hover:no-underline;
 }

src/styles/offers/offers-extra.css

@@ -0,0 +1,27 @@
+.fuz-extra-services {
+  @apply mt-16;
+  color: var(--fuz-text);
+}
+
+.fuz-title-small {
+  @apply text-xl font-semibold mb-4;
+  color: var(--fuz-text);
+}
+
+.fuz-expand-details {
+  @apply px-4 py-4;
+  background: rgba(0, 0, 0, 0.04);
+}
+
+:root.dark .fuz-expand-details {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.btn-link {
+  @apply underline cursor-pointer;
+  color: var(--fuz-accent);
+}
+
+.btn-link:hover {
+  opacity: 0.7;
+}

src/styles/offers/offers-main.css

@@ -0,0 +1,14 @@
+.fuz-offers-section {
+  @apply py-12;
+  background: var(--fuz-bg);
+  color: var(--fuz-text);
+}
+
+.fuz-offers-container {
+  @apply max-w-7xl mx-auto px-6;
+}
+
+.fuz-offers-description {
+  @apply mb-10 text-base leading-relaxed;
+  color: var(--fuz-text);
+}

src/styles/offers/offers-switches.css

@@ -0,0 +1,31 @@
+.fuz-switches-wrapper {
+  @apply flex flex-wrap justify-center gap-6 mb-12;
+}
+
+.fuz-switch-group {
+  @apply inline-flex rounded-full overflow-hidden relative;
+  background: rgba(0, 0, 0, 0.08);
+}
+
+:root.dark .fuz-switch-group {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+
+
+.fuz-switch {
+  @apply px-6 py-2 text-sm font-semibold cursor-pointer select-none transition-all;
+  color: var(--fuz-text);
+  opacity: 0.7;
+}
+
+.fuz-switch:hover {
+  opacity: 0.9;
+}
+
+.fuz-switch.active {
+  background: var(--fuz-accent);
+  color: var(--btn-text);
+  opacity: 1;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+}

src/styles/offers/offers-table.css

@@ -0,0 +1,212 @@
+/* =========================================
+   TABELA — KONTENER
+   ========================================= */
+
+.fuz-table-wrapper {
+  @apply overflow-x-auto rounded-3xl shadow-lg mb-0;
+  background: var(--fuz-bg);
+  border: 1px solid rgba(0,0,0,0.07);
+}
+
+:root.dark .fuz-table-wrapper {
+  border: 1px solid rgba(255,255,255,0.12);
+}
+
+.fuz-table {
+  @apply min-w-full border-collapse;
+  color: var(--fuz-text);
+}
+
+
+
+/* =========================================
+   NAGŁÓWEK
+   ========================================= */
+
+.fuz-table-head {
+  background: color-mix(in srgb, var(--fuz-text) 6%, transparent);
+}
+
+:root.dark .fuz-table-head {
+  background: color-mix(in srgb, var(--fuz-text) 12%, transparent);
+}
+
+.fuz-table-heading {
+  @apply text-center font-semibold  py-4 px-4 text-lg;
+  color: var(--fuz-text);
+}
+
+
+
+/* =========================================
+   NAGŁÓWEK PLANU
+   ========================================= */
+
+.fuz-plan-heading {
+  @apply text-center py-4 px-4 align-bottom;
+  position: relative;
+}
+
+.fuz-plan-title {
+  @apply text-lg font-semibold mb-1;
+  color: var(--fuz-text);
+}
+
+.fuz-plan-price {
+  @apply text-2xl font-extrabold mb-1;
+  color: var(--fuz-accent);
+}
+
+.fuz-plan-speed {
+  @apply text-xs;
+  opacity: 0.7;
+}
+
+
+/* Badge popularności – jeśli używasz */
+.fuz-plan-badge {
+  @apply text-[10px] px-2 py-0.5 rounded-full uppercase tracking-wide inline-block mb-2;
+  background: var(--fuz-accent);
+  color: var(--fuz-accent-text);
+}
+
+
+
+/* =========================================
+   WIERSZE
+   ========================================= */
+
+.fuz-row-even {
+  background: color-mix(in srgb, var(--fuz-text) 4%, transparent);
+}
+
+:root.dark .fuz-row-even {
+  background: color-mix(in srgb, var(--fuz-text) 10%, transparent);
+}
+
+.fuz-row-odd {
+  background: transparent;
+}
+
+.fuz-feature-name {
+  @apply py-3 px-4 text-lg font-medium;
+  color: var(--fuz-text);
+  border-top: 1px solid rgba(0,0,0,0.07);
+}
+
+:root.dark .fuz-feature-name {
+  border-top: 1px solid rgba(255,255,255,0.12);
+}
+
+.fuz-feature-cell {
+  @apply py-3 px-4 text-center text-lg;
+  color: var(--fuz-text);
+  border-top: 1px solid rgba(0,0,0,0.07);
+}
+
+:root.dark .fuz-feature-cell {
+  border-top: 1px solid rgba(255,255,255,0.12);
+}
+
+.fuz-feature-cell-btn {
+  @apply py-3 px-4 text-center text-sm;
+}
+
+
+
+/* =========================================
+   CHECKMARKS
+   ========================================= */
+
+/* ✔ = kolor accent */
+.fuz-feature-yes {
+  @apply py-3 px-4 text-center font-bold text-base;
+  color: var(--fuz-accent);
+  border-top: 1px solid rgba(0,0,0,0.07);
+}
+
+:root.dark .fuz-feature-yes {
+  border-top: 1px solid rgba(255,255,255,0.12);
+}
+
+/* ✕ = szary / low opacity */
+.fuz-feature-no {
+  @apply py-3 px-4 text-center font-bold text-base;
+  opacity: 0.45;
+  border-top: 1px solid rgba(0,0,0,0.07);
+}
+
+:root.dark .fuz-feature-no {
+  border-top: 1px solid rgba(255,255,255,0.12);
+}
+
+
+
+/* =========================================
+   POPULARNY PLAN — WARIANT C (MOCNY)
+   ========================================= */
+
+/* pełne tło pastel na ACCENT (mocniejsze – C) */
+.is-popular,
+.fuz-popular-col {
+  background: color-mix(in srgb, var(--fuz-accent) 22%, transparent) !important;
+  border-left: 2px solid var(--fuz-accent);
+  border-right: 2px solid var(--fuz-accent);
+  position: relative;
+  z-index: 10;
+}
+
+:root.dark .is-popular,
+:root.dark .fuz-popular-col {
+  background: color-mix(in srgb, var(--fuz-accent) 32%, transparent) !important;
+}
+
+/* górny border */
+.fuz-popular-top {
+  border-top: 2px solid var(--fuz-accent);
+}
+
+/* dolny border */
+.fuz-popular-bottom {
+  border-bottom: 2px solid var(--fuz-accent);
+}
+
+/* zbijamy border wewnątrz popularnych */
+.fuz-popular-col.fuz-feature-cell,
+.fuz-popular-col.fuz-feature-yes,
+.fuz-popular-col.fuz-feature-no {
+  border-top: none !important;
+}
+
+/* USŁUGI DODATKOWE */
+/* Górny border pierwszego wiersza sekcji */
+.fuz-extra-services table tbody tr:first-child td {
+  border-top: 1px solid rgba(0,0,0,0.07);
+}
+:root.dark .fuz-extra-services table tbody tr:first-child td {
+  border-top: 1px solid rgba(255,255,255,0.15);
+}
+
+/* Wiersz "Szczegóły" (opis) — zawsze pełny border-top */
+.fuz-expand-details {
+  border-top: 0px solid rgba(0,0,0,0.1);
+}
+:root.dark .fuz-expand-details {
+  border-top: 1px solid rgba(255,255,255,0.15);
+}
+
+/* I zawsze ładny border-bottom na końcu sekcji */
+.fuz-extra-services table tbody tr:last-child td {
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+:root.dark .fuz-extra-services table tbody tr:last-child td {
+  border-bottom: 1px solid rgba(255,255,255,0.15);
+}
+
+/* Usunięcie "pustych" borderów kolumny szczegóły */
+.fuz-feature-cell-btn {
+  border-top: 1px solid rgba(0,0,0,0.07);
+}
+:root.dark .fuz-feature-cell-btn {
+  border-top: 1px solid rgba(255,255,255,0.12);
+}