Pakiety tematyczne

src/styles/jambox-tematyczne.css

@@ -0,0 +1,87 @@
+/* ===========================
+   TV ADDONS — LAYOUT FIXES
+   =========================== */
+
+/* f-section-grid ma u Ciebie items-center (centrowanie w pionie),
+   więc dla addonów wymuszamy start (od góry). */
+.f-addon-section {
+  align-items: start; /* override dla grid items */
+}
+
+/* Gdy island stwierdzi brak ikon i brak fallback image:
+   - 1 kolumna
+   - ukryj pusty blok mediów
+   UWAGA: NIE dodawaj margin:0, bo zabijesz mx-auto z f-section-grid */
+[data-addon-section][data-has-media="0"] {
+  grid-template-columns: 1fr !important;
+}
+
+[data-addon-section][data-has-media="0"] .f-addon-media {
+  display: none;
+}
+
+/* ===========================
+   KANAŁY / MEDIA — STYLE
+   (wyniesione z island)
+   =========================== */
+
+.f-channels-grid{
+  display:grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: .65rem;
+  padding: .75rem;
+  border-radius: 1.25rem;
+  border: 1px solid var(--f-border-color);
+  background: color-mix(in oklab, var(--f-background) 92%, black 8%);
+}
+@media (min-width: 520px){
+  .f-channels-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
+}
+@media (min-width: 768px){
+  .f-channels-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
+}
+@media (min-width: 1024px){
+  .f-channels-grid{ grid-template-columns: repeat(5, minmax(0,1fr)); }
+}
+
+.f-channel-item{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  text-align:center;
+  gap:.35rem;
+  min-width:0;
+}
+.f-channel-logo{
+  /* width: 86px;
+  height: 86px; */
+  object-fit: contain;
+  /* border-radius: 1rem; */
+  padding: .25rem;
+  /* border: 1px solid color-mix(in oklab, var(--f-border-color) 85%, transparent 15%); */
+  /* background: color-mix(in oklab, var(--f-background) 95%, black 5%); */
+}
+.f-channel-logo-placeholder{
+  width:56px;height:56px;border-radius:1rem;
+  /* border:1px dashed var(--f-border-color); */
+  opacity:.6;
+}
+.f-channel-label{
+  font-size: .78rem;
+  line-height: 1.0rem;
+  opacity:.85;
+  max-width: 9rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.f-addon-fallback-image{
+  width:100%;
+  height: 280px;
+  object-fit: cover;
+  border-radius: 1.25rem;
+  border: 1px solid var(--f-border-color);
+}

src/styles/map-google.css

@@ -14,23 +14,24 @@
 }
 
 /* Mała karta mapy (inne sekcje) */
-.fuz-map--card {
+/* .fuz-map--card {
   @apply w-full h-[350px] overflow-hidden mt-8;
-}
-
+} */
 
+/*
 .map-range-container {
   @apply sticky top-[67px] z-[999] flex justify-center w-full pointer-events-auto;
-  /* position: absolute;
+   position: absolute;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 9000;
   display: flex;
-  justify-content: center; */
-
+  justify-content: center;
 }
+ */
 
+ 
 /* Pulsująca obwódka budynku */
 .pulse-marker {
   width: 22px;

src/styles/sections.css

@@ -7,7 +7,7 @@
   }
 
   .f-section {
-    @apply pt-1 pb-1 mx-2;
+    @apply pt-1 pb-1 mx-2 my-6;;
   }
 
   .f-section-center {

src/styles/theme.css

@@ -43,10 +43,6 @@
 
   --card-ring: hsla(217 91% 60% / 0.45);
   --card-shadow-deep: hsla(221 47% 11% / 0.18);
-  /*
-
-
-  */
 
   --surface-shadow-dark: var(--brand-hue) 50% 3%;
   --shadow-strength-dark: .8;
@@ -69,7 +65,7 @@
 
   /* --- Background and Text --- */
   --f-background: var(--surface3-light);
-  --f-text: var(--text1-light);
+  --f-text: var(--text2-light);
   --f-header: var(--text1-light);
   --f-header-items: (var(--text1-light));
   /*--- Navbar --- */
@@ -130,7 +126,7 @@
 
   /* --- Background and Text --- */
   --f-background: var(--surface1-dark);
-  --f-text: var(--text1-dark);
+  --f-text: var(--text2-dark);
   --f-header: var(--text1-dark);
   --f-header-items: (var(--text1-dark));
   /*--- Navbar --- */