From 22b8509ebe2479ce675b4ac267f797612b4e1cad Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Tue, 3 Mar 2026 02:29:27 +0100
Subject: [PATCH] refactor(styles): separated fonts and responsiveness to scss
 files; made global reference only once

---
 package.json                                  |  12 +-
 src/App.vue                                   |   9 +-
 src/components/app/AppModals.vue              |  17 +--
 src/components/app/MainContainer.vue          |   6 +-
 src/components/cards/MigrationInfoCard.vue    | 111 ++++++++++++++++++
 src/components/cards/RealStockCard.vue        |  10 +-
 src/components/sections/InputsSection.vue     |  10 +-
 src/components/sections/LogoSection.vue       |   2 +-
 src/components/sections/TabsSection.vue       |   4 +-
 src/components/sections/TrainImageSection.vue |  16 +--
 src/components/tabs/NumberGeneratorTab.vue    |   9 +-
 src/components/tabs/StockGeneratorTab.vue     |   6 +-
 src/components/tabs/StorageTab.vue            |   2 +-
 src/components/tabs/WikiListTab.vue           |   7 +-
 src/components/tabs/stock-list/StockList.vue  |  42 ++-----
 .../tabs/stock-list/StockThumbnails.vue       |   4 +-
 .../tabs/stock-list/StockWarnings.vue         |   2 +-
 src/locales/en.json                           |  11 +-
 src/locales/pl.json                           |  10 +-
 src/store.ts                                  |   1 +
 src/styles/_fonts.scss                        |  19 +++
 src/styles/_global.scss                       |  82 +++++--------
 src/styles/_responsive.scss                   |  20 ++++
 src/styles/_tab.scss                          |   4 +-
 vite.config.ts                                |   6 +-
 25 files changed, 278 insertions(+), 144 deletions(-)
 create mode 100644 src/components/cards/MigrationInfoCard.vue
 create mode 100644 src/styles/_fonts.scss
 create mode 100644 src/styles/_responsive.scss

diff --git a/package.json b/package.json
index bcc1daa..19b46e6 100644
--- a/package.json
+++ b/package.json
@@ -13,22 +13,22 @@
   },
   "dependencies": {
     "axios": "^1.4.0",
-    "lucide-vue-next": "^0.552.0",
+    "lucide-vue-next": "^0.576.0",
     "pinia": "^3.0.3",
     "prettier": "^3.0.3",
     "vue": "^3.2.37",
-    "vue-i18n": "11.1.12",
-    "vue-router": "4"
+    "vue-i18n": "11.2.8",
+    "vue-router": "5.0.3"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
-    "@types/node": "^24.10.0",
+    "@types/node": "^25.3.3",
     "@vite-pwa/assets-generator": "^1.0.2",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "@vue/tsconfig": "^0.8.1",
-    "eslint": "^9.39.1",
+    "@vue/tsconfig": "^0.9.0",
+    "eslint": "^10.0.2",
     "eslint-plugin-vue": "^10.5.1",
     "sass": "^1.59.3",
     "typescript": "^5.0.2",
diff --git a/src/App.vue b/src/App.vue
index 194e7ea..29a2bf8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,19 +65,22 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@use './styles/global';
+@use './styles/responsive';
+
 /* APP */
 #app {
   margin: 0 auto;
 
-  color: global.$textColor;
+  color: var(--textColor);
   font-size: 1em;
   padding: 0;
 
-  @media screen and (max-width: global.$breakpointMd) {
+  @include responsive.midScreen {
     font-size: calc(0.7rem + 0.75vw);
   }
 
-  @media screen and (orientation: landscape) and (max-width: global.$breakpointMd) {
+  @include responsive.midScreenLandscape {
     font-size: calc(0.75rem + 0.4vw);
   }
 }
diff --git a/src/components/app/AppModals.vue b/src/components/app/AppModals.vue
index 761c640..b71bf6d 100644
--- a/src/components/app/AppModals.vue
+++ b/src/components/app/AppModals.vue
@@ -3,22 +3,15 @@
     <keep-alive>
       <RealStockCard v-if="store.isRealStockListCardOpen" />
     </keep-alive>
+
+    <MigrationInfoCard v-if="store.isMigrationCardOpen" />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import { useStore } from '../../store';
 import RealStockCard from '../cards/RealStockCard.vue';
+import MigrationInfoCard from '../cards/MigrationInfoCard.vue';
 
-export default defineComponent({
-  components: { RealStockCard },
-  data() {
-    return {
-      store: useStore(),
-    };
-  },
-});
+const store = useStore();
 </script>
-
-<style scoped></style>
diff --git a/src/components/app/MainContainer.vue b/src/components/app/MainContainer.vue
index bbd73e5..3a924e1 100644
--- a/src/components/app/MainContainer.vue
+++ b/src/components/app/MainContainer.vue
@@ -20,6 +20,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/responsive';
+
 main {
   display: grid;
   gap: 1em;
@@ -30,7 +32,7 @@ main {
   grid-template-columns: 1fr 2fr;
   grid-template-rows: auto 360px minmax(300px, 1fr);
 
-  background-color: global.$bgColorDarker;
+  background-color: var(--bgColorDarker);
   border-radius: 1em;
 
   min-height: 950px;
@@ -38,7 +40,7 @@ main {
   padding: 1em;
 }
 
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
   main {
     display: flex;
     flex-direction: column;
diff --git a/src/components/cards/MigrationInfoCard.vue b/src/components/cards/MigrationInfoCard.vue
new file mode 100644
index 0000000..8d633e4
--- /dev/null
+++ b/src/components/cards/MigrationInfoCard.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="migration-card g-card" @toggle-card="toggleCard">
+    <div class="g-card_bg" @click="store.isMigrationCardOpen = false"></div>
+
+    <div class="card-content">
+      <div class="content-top">
+        <!-- <img src="/images/icon-loading.svg" alt="loading" height="125" /> -->
+        <h1>{{ t('migrate-info.header-text') }}</h1>
+      </div>
+
+      <div>
+        <p v-html="t('migrate-info.paragraph-1-html')"></p>
+
+        <p>
+          <a class="new-link" href="https://stacjownik-td2.spythere.eu/" target="_blank">
+            {{ t('migrate-info.paragraph-2-link-text') }}
+          </a>
+        </p>
+
+        <p>
+          {{ t('migrate-info.paragraph-3-text') }}
+        </p>
+
+        <p class="info-bottom" v-html="t('migrate-info.paragraph-4-html')"></p>
+      </div>
+
+      <div class="content-actions">
+        <button class="btn" @click="toggleCard">PRZYJĄŁEM!</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { useStore } from '../../store';
+
+const { t } = useI18n();
+const store = useStore();
+
+function toggleCard() {
+  store.isMigrationCardOpen = !store.isMigrationCardOpen;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/responsive';
+
+.migration-card {
+  align-items: center;
+  top: 0;
+  padding: 0.5em;
+}
+
+.card-content {
+  background-color: #1c1c1c;
+  z-index: 100;
+  border-radius: 1em;
+
+  max-width: 800px;
+  min-height: 500px;
+  padding: 1em 0.5em;
+
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 0.5em;
+
+  text-align: center;
+  font-size: 1.1em;
+}
+
+p {
+  padding: 0.5em 0;
+}
+
+a.new-link {
+  font-size: 1.2em;
+  color: var(--clr-primary);
+  color: transparent;
+
+  background: var(--clr-primary);
+  background: linear-gradient(90deg, var(--clr-primary), #ffffff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  text-shadow: var(--clr-primary) 0 0 10px;
+}
+
+.info-bottom {
+  font-size: 0.9em;
+  color: #ccc;
+}
+
+.content-actions {
+  display: flex;
+  justify-content: center;
+  font-size: 1.2em;
+}
+
+.content-actions > button {
+  background-color: #111;
+  padding: 0.5em;
+}
+
+@include responsive.smallScreen {
+  .migration-card {
+    // top: 0;
+  }
+}
+</style>
diff --git a/src/components/cards/RealStockCard.vue b/src/components/cards/RealStockCard.vue
index 8a86aa9..dcda4af 100644
--- a/src/components/cards/RealStockCard.vue
+++ b/src/components/cards/RealStockCard.vue
@@ -220,6 +220,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/responsive';
+
 .action-exit {
   display: flex;
   background-color: #333;
@@ -247,7 +249,7 @@ export default defineComponent({
 
   z-index: 100;
 
-  @media screen and (max-width: global.$breakpointSm) {
+  @include responsive.smallScreen {
     height: 80vh;
   }
 }
@@ -279,7 +281,7 @@ export default defineComponent({
     width: 35%;
   }
 
-  @media screen and (max-width: global.$breakpointSm) {
+  @include responsive.smallScreen {
     flex-wrap: wrap;
 
     input {
@@ -307,7 +309,7 @@ ul {
     padding: 0.1em;
 
     &[data-last-selected='true'] .stock-title {
-      border: 1px solid global.$accentColor;
+      border: 1px solid var(--accentColor);
     }
 
     .stock-title {
@@ -323,7 +325,7 @@ ul {
       background: #222;
     }
 
-    @media screen and (max-width: global.$breakpointSm) {
+    @include responsive.smallScreen {
       grid-template-columns: 1fr;
       // grid-template-rows: 1fr 1fr;
     }
diff --git a/src/components/sections/InputsSection.vue b/src/components/sections/InputsSection.vue
index 033c9c1..b731a43 100644
--- a/src/components/sections/InputsSection.vue
+++ b/src/components/sections/InputsSection.vue
@@ -224,6 +224,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/responsive';
+
 .inputs-section {
   display: flex;
   justify-content: center;
@@ -242,7 +244,7 @@ button.btn--choice {
   padding: 0.3em 0.6em;
 
   &[data-selected='true'] {
-    background-color: global.$accentColor;
+    background-color: var(--accentColor);
     color: black;
   }
 
@@ -260,12 +262,12 @@ button.btn--choice {
     display: block;
 
     font-weight: bold;
-    color: global.$accentColor;
+    color: var(--accentColor);
     margin-bottom: 0.3em;
   }
 
   select:focus {
-    border-color: global.$accentColor;
+    border-color: var(--accentColor);
   }
 }
 
@@ -290,7 +292,7 @@ button.btn--choice {
   }
 }
 
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
   .inputs-section {
     justify-content: center;
     text-align: center;
diff --git a/src/components/sections/LogoSection.vue b/src/components/sections/LogoSection.vue
index 456e767..392d1be 100644
--- a/src/components/sections/LogoSection.vue
+++ b/src/components/sections/LogoSection.vue
@@ -58,7 +58,7 @@ export default {
 
   button[data-selected='true'] {
     font-weight: bold;
-    color: global.$accentColor;
+    color: var(--accentColor);
     text-decoration: underline;
   }
 }
diff --git a/src/components/sections/TabsSection.vue b/src/components/sections/TabsSection.vue
index 057fff8..7b8166e 100644
--- a/src/components/sections/TabsSection.vue
+++ b/src/components/sections/TabsSection.vue
@@ -69,6 +69,8 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
+@use '@/styles/responsive';
+
 // Tab change animation
 .tab-change {
   &-enter-from,
@@ -105,7 +107,7 @@ onMounted(() => {
   margin-bottom: 1em;
 }
 
-@media screen and (max-width: global.$breakpointSm) {
+@include responsive.smallScreen {
   .tabs-modes {
     grid-template-areas:
       'stock wiki'
diff --git a/src/components/sections/TrainImageSection.vue b/src/components/sections/TrainImageSection.vue
index e85d4a2..fab5856 100644
--- a/src/components/sections/TrainImageSection.vue
+++ b/src/components/sections/TrainImageSection.vue
@@ -152,7 +152,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-
+@use '@/styles/responsive';
 
 .train-image-section {
   display: flex;
@@ -178,11 +178,11 @@ img {
   }
 
   &[data-sponsor-only='true'] {
-    border: 1px solid global.$sponsorColor;
+    border: 1px solid var(--accentColor);
   }
 
   &[data-team-only='true'] {
-    border: 1px solid global.$teamColor;
+    border: 1px solid var(--teamColor);
   }
 }
 
@@ -216,25 +216,25 @@ img {
   width: 100%;
   max-width: 380px;
 
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
   font-weight: bold;
 }
 
 .placeholder {
   height: 250px;
 
-  background-color: global.$bgColor;
+  background-color: var(--bgColor);
 }
 
 .sponsor-only {
-  color: global.$sponsorColor;
+  color: var(--accentColor);
 }
 
 .team-only {
-  color: global.$teamColor;
+  color: var(--teamColor);
 }
 
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
   .train-image-section {
     justify-content: center;
   }
diff --git a/src/components/tabs/NumberGeneratorTab.vue b/src/components/tabs/NumberGeneratorTab.vue
index 2bdf778..1ff3b21 100644
--- a/src/components/tabs/NumberGeneratorTab.vue
+++ b/src/components/tabs/NumberGeneratorTab.vue
@@ -224,7 +224,8 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 </script>
 
 <style lang="scss" scoped>
-@use '../../styles/tab';
+@use '@/styles/tab';
+@use '@/styles/responsive';
 
 .category-select {
   select {
@@ -263,7 +264,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 
   margin: 0.5em 0;
   padding: 0.5em;
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
 }
 
 .category-rules {
@@ -281,13 +282,13 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
   margin: 0.25em 0;
 }
 
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
   .number-generator {
     min-height: 100vh;
   }
 }
 
-@media screen and (max-width: global.$breakpointSm) {
+@include responsive.smallScreen {
   .regions-select {
     flex-wrap: wrap;
   }
diff --git a/src/components/tabs/StockGeneratorTab.vue b/src/components/tabs/StockGeneratorTab.vue
index 9f46e58..719ac82 100644
--- a/src/components/tabs/StockGeneratorTab.vue
+++ b/src/components/tabs/StockGeneratorTab.vue
@@ -335,7 +335,7 @@ h2 {
     text-transform: uppercase;
     font-weight: bold;
 
-    background-color: global.$secondaryColor;
+    background-color: var(--secondaryColor);
 
     &[data-excluded='true'] {
       background-color: gray;
@@ -349,7 +349,7 @@ h2 {
       padding: 5px;
 
       transform: translate(-8px, -50%);
-      background-color: global.$bgColor;
+      background-color: var(--bgColor);
       color: white;
     }
   }
@@ -390,7 +390,7 @@ h2 {
 }
 
 .generator_warning {
-  background-color: global.$accentColor;
+  background-color: var(--accentColor);
   padding: 0.5em;
   text-align: justify;
   font-weight: bold;
diff --git a/src/components/tabs/StorageTab.vue b/src/components/tabs/StorageTab.vue
index b9c1dc3..f433f69 100644
--- a/src/components/tabs/StorageTab.vue
+++ b/src/components/tabs/StorageTab.vue
@@ -165,7 +165,7 @@ ul.storage-list {
 
 ul.storage-list > li {
   padding: 0.5em;
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
 
   &[data-current='true'] {
     background-color: #3b3b3b;
diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue
index 9966ade..ab08af8 100644
--- a/src/components/tabs/WikiListTab.vue
+++ b/src/components/tabs/WikiListTab.vue
@@ -245,6 +245,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @use '@/styles/tab';
+@use '@/styles/responsive';
 
 .actions {
   display: grid;
@@ -318,7 +319,7 @@ export default defineComponent({
 }
 
 .sponsor-only {
-  color: global.$sponsorColor;
+  color: var(--accentColor);
 
   &::after {
     content: '*';
@@ -326,7 +327,7 @@ export default defineComponent({
 }
 
 .team-only {
-  color: global.$teamColor;
+  color: var(--teamColor);
 
   &::after {
     content: '*';
@@ -343,7 +344,7 @@ export default defineComponent({
   background-color: #161c2e;
 }
 
-@media screen and (max-width: global.$breakpointSm) {
+@include responsive.smallScreen {
   .actions-panel {
     align-items: stretch;
     flex-direction: column;
diff --git a/src/components/tabs/stock-list/StockList.vue b/src/components/tabs/stock-list/StockList.vue
index 6900cc4..ef99807 100644
--- a/src/components/tabs/stock-list/StockList.vue
+++ b/src/components/tabs/stock-list/StockList.vue
@@ -20,13 +20,7 @@
           @keydown.backspace="stockListUtils.removeStock(i)"
           ref="itemRefs"
         >
-          <div
-            class="stock-info"
-            @dragstart="onDragStart(i)"
-            @drop="onDrop($event, i)"
-            @dragover="allowDrop"
-            draggable="true"
-          >
+          <div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
             <span class="stock-info-no" :data-selected="i == store.chosenStockListIndex">
               <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
               {{ i + 1 }}.
@@ -34,17 +28,10 @@
 
             <span
               class="stock-info-type"
-              :data-sponsor-only="
-                stock.vehicleRef.sponsorOnlyTimestamp &&
-                stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
-              "
+              :data-sponsor-only="stock.vehicleRef.sponsorOnlyTimestamp && stock.vehicleRef.sponsorOnlyTimestamp > Date.now()"
               :data-team-only="stock.vehicleRef.teamOnly"
             >
-              {{
-                isTractionUnit(stock.vehicleRef)
-                  ? stock.vehicleRef.type
-                  : getCarSpecFromType(stock.vehicleRef.type)
-              }}
+              {{ isTractionUnit(stock.vehicleRef) ? stock.vehicleRef.type : getCarSpecFromType(stock.vehicleRef.type) }}
             </span>
 
             <span class="stock-info-cargo" v-if="stock.cargo">
@@ -53,9 +40,7 @@
 
             <span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
 
-            <span class="stock-info-mass">
-              {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
-            </span>
+            <span class="stock-info-mass"> {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t </span>
             <span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
           </div>
         </li>
@@ -123,10 +108,7 @@ export default defineComponent({
       const stock = this.store.stockList[stockID];
 
       this.store.chosenStockListIndex =
-        this.store.chosenStockListIndex == stockID &&
-        this.store.chosenVehicle?.type == stock.vehicleRef.type
-          ? -1
-          : stockID;
+        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.vehicleRef.type ? -1 : stockID;
 
       if (this.store.chosenStockListIndex == -1) {
         this.store.chosenVehicle = null;
@@ -154,12 +136,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@use '@/styles/responsive';
+
 .list-wrapper {
   position: relative;
 }
 
 .list-empty {
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
   border-radius: 0.5em;
   padding: 0.75em;
   font-weight: bold;
@@ -202,14 +186,14 @@ li > .stock-info {
 
 .stock-info-no,
 .stock-info-type {
-  background-color: global.$secondaryColor;
+  background-color: var(--secondaryColor);
 
   &[data-team-only='true'] {
-    color: global.$teamColor;
+    color: var(--teamColor);
   }
 
   &[data-sponsor-only='true'] {
-    color: global.$sponsorColor;
+    color: var(--accentColor);
   }
 }
 
@@ -218,7 +202,7 @@ li > .stock-info {
   text-align: right;
 
   &[data-selected='true'] {
-    color: global.$accentColor;
+    color: var(--accentColor);
   }
 }
 
@@ -253,7 +237,7 @@ li > .stock-info {
   }
 }
 
-@media screen and (max-width: global.$breakpointMd) {
+@include responsive.midScreen {
   ul {
     min-height: auto;
   }
diff --git a/src/components/tabs/stock-list/StockThumbnails.vue b/src/components/tabs/stock-list/StockThumbnails.vue
index 5b850ab..bce7fc8 100644
--- a/src/components/tabs/stock-list/StockThumbnails.vue
+++ b/src/components/tabs/stock-list/StockThumbnails.vue
@@ -199,11 +199,11 @@ ul {
   }
 
   &[data-sponsor-only='true'] > b {
-    color: global.$sponsorColor;
+    color: var(--accentColor);
   }
 
   &[data-team-only='true'] > b {
-    color: global.$teamColor;
+    color: var(--teamColor);
   }
 
   img {
diff --git a/src/components/tabs/stock-list/StockWarnings.vue b/src/components/tabs/stock-list/StockWarnings.vue
index dbf3e13..e331e30 100644
--- a/src/components/tabs/stock-list/StockWarnings.vue
+++ b/src/components/tabs/stock-list/StockWarnings.vue
@@ -91,7 +91,7 @@ export default defineComponent({
 .warning {
   padding: 0.25em;
   margin: 0.25em 0;
-  background: global.$accentColor;
+  background: var(--accentColor);
   color: black;
 
   font-weight: bold;
diff --git a/src/locales/en.json b/src/locales/en.json
index 636605c..d68cd7f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -339,5 +339,14 @@
     "warning_un1965_tn": "TN: LPG - empty tank (UN 1965)",
     "warning_un1202_tn": "TN: diesel fuel (UN 1202)",
     "warning_military_pn": "PN: military transport"
+  },
+  "migrate-info": {
+    "tooltip-content": "Information about migration of\nStacjownik site!",
+    "header-text": "Attention!",
+    "paragraph-1-html": "Due to the growing interest in Stacjownik and other applications I have made, <b>as of January 1, 2026, Stacjownik will be <u>permanently moved</u> to a new dedicated domain:</b>",
+    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
+    "paragraph-3-text": "This website will no longer receive future updates and after the New Year it will only redirect to the address above.",
+    "paragraph-4-italic-text": "\"Why are you messing this up? It's been fine for so long!\"",
+    "paragraph-4-html": "<i>\"Why are you messing this up? It's been fine for so long!\"</i> <br /> The change is mainly caused by the growing website interest and exceeding the free limit plan of the current Google hosting, which forces additional fees for each use of the service above a certain threshold (or otherwise blocks access to it). By moving the site to a dedicated domain (which has already been purchased and is maintained with the financial help of <span class=\"text--donator\">Supporters</span>), I will get rid of unnecessary expenses for a large corporation that can shut down my application at any given time."
   }
-}
\ No newline at end of file
+}
diff --git a/src/locales/pl.json b/src/locales/pl.json
index fd8c6f0..d6d0272 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -338,5 +338,13 @@
     "warning_un1965_tn": "TN: gazy węglowodorowe skroplone - puste cysterny (UN 1965)",
     "warning_un1202_tn": "TN: olej napędowy (UN 1202)",
     "warning_military_pn": "PN: transport wojskowy"
+  },
+  "migrate-info": {
+    "tooltip-content": "Informacja o migracji\nstrony Stacjownika!",
+    "header-text": "Uwaga!",
+    "paragraph-1-html": "Ze względu na coraz większe zainteresowanie Stacjownikiem oraz innymi aplikacjami mojego autorstwa <b>z dniem 1 stycznia 2026r. Stacjownik zostaje <u>permamentnie przeniesiony</u> na nową dedykowaną domenę:</b>",
+    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
+    "paragraph-3-text": "Obecna strona nie będzie otrzymywać już przyszłych aktualizacji, a po Nowym Roku będzie jedynie przenosić na powyższy adres.",
+    "paragraph-4-html": "<i>\"Po co psujesz? Przecież było dobrze tyle czasu!\"</i> <br /> Zmiana podyktowana jest głównie wzrostem zainteresowania stroną i przekraczaniem darmowego limitu obecnego hostingu Google'a, który wymusza płatność za każde użycie serwisu ponad określoną wartość (lub w przeciwnym wypadku blokuje do niego dostęp). Przenosząc stronę na dedykowaną domenę (która jest już wykupiona i utrzymywana dzięki pomocy <span class=\"text--donator\">Wspierających</span>), pozbędę się niepotrzebnego wydatku dla wielkiej korporacji, która w każdej chwili może mi wyłączyć aplikację."
   }
-}
\ No newline at end of file
+}
diff --git a/src/store.ts b/src/store.ts
index 9bfaed3..4f70133 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -52,6 +52,7 @@ export const useStore = defineStore('store', {
 
     vehiclePreviewSrc: '',
 
+    isMigrationCardOpen: false,
     isRandomizerCardOpen: false,
     isRealStockListCardOpen: false,
 
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
new file mode 100644
index 0000000..22823b2
--- /dev/null
+++ b/src/styles/_fonts.scss
@@ -0,0 +1,19 @@
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('/fonts/Lato-Bold.woff2') format('woff2'),
+    url('/fonts/Lato-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('/fonts/Lato-Regular.woff2') format('woff2'),
+    url('/fonts/Lato-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index fe52510..527884f 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -1,33 +1,15 @@
-$breakpointMd: 960px;
-$breakpointSm: 550px;
+@use 'fonts';
+@use 'responsive';
 
-$bgColor: #2b3552;
-$bgColorDarker: #1f263b;
-$textColor: #fff;
-$secondaryColor: #1b1b1b;
-$accentColor: #e4c428;
+:root {
+  --bgColor: #2b3552;
+  --bgColorDarker: #1f263b;
+  --textColor: #fff;
+  --secondaryColor: #1b1b1b;
+  --accentColor: #e4c428;
 
-$sponsorColor: gold;
-$teamColor: #ff4848;
-
-@font-face {
-  font-family: 'Lato';
-  src:
-    url('/fonts/Lato-Bold.woff2') format('woff2'),
-    url('/fonts/Lato-Bold.woff') format('woff');
-  font-weight: bold;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src:
-    url('/fonts/Lato-Regular.woff2') format('woff2'),
-    url('/fonts/Lato-Regular.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
+  --sponsorColor: gold;
+  --teamColor: #ff4848;
 }
 
 ::-webkit-scrollbar {
@@ -56,7 +38,7 @@ html {
 
   font-family: Lato, sans-serif;
 
-  background-color: $bgColor;
+  background-color: var(--bgColor);
   overflow-x: hidden;
 }
 
@@ -78,7 +60,7 @@ a {
 
   &:hover,
   &:focus {
-    color: $accentColor;
+    color: var(--accentColor);
   }
 }
 
@@ -104,11 +86,11 @@ button {
   color: white;
 
   &:hover {
-    color: $accentColor;
+    color: var(--accentColor);
   }
 
   &:focus-visible {
-    outline: 1px solid $accentColor;
+    outline: 1px solid var(--accentColor);
   }
 }
 
@@ -130,7 +112,7 @@ button {
 
     z-index: 100;
 
-    @media screen and (max-width: $breakpointSm) {
+    @include responsive.smallScreen {
       left: 50%;
       transform: translate(-50%, 3ex);
       text-align: center;
@@ -165,7 +147,7 @@ button {
   padding: 0.4em 0.75em;
 
   outline: none;
-  background-color: $secondaryColor;
+  background-color: var(--secondaryColor);
   border-radius: 8px;
   font-weight: bold;
 
@@ -174,25 +156,25 @@ button {
     background-color 150ms;
 
   &:hover {
-    color: $accentColor;
+    color: var(--accentColor);
   }
 
   &.btn--outline {
     background: none;
     font-weight: bold;
-    outline: 1px solid $accentColor;
+    outline: 1px solid var(--accentColor);
   }
 
   &:focus-visible {
-    color: $accentColor;
+    color: var(--accentColor);
     outline: 1px solid white;
   }
 
   &[data-chosen='true'] {
-    background-color: $accentColor;
+    background-color: var(--accentColor);
     color: black;
 
-    box-shadow: 0 0 5px 1px $accentColor;
+    box-shadow: 0 0 5px 1px var(--accentColor);
   }
 
   &[data-disabled='true'] {
@@ -240,13 +222,13 @@ button {
 }
 
 .link-btn.router-link-exact-active {
-  color: $accentColor;
+  color: var(--accentColor);
 }
 
 select,
 input[type='text'],
 input[type='number'] {
-  background: $bgColor;
+  background: var(--bgColor);
   border: 2px solid #aaa;
   outline: none;
 
@@ -257,7 +239,7 @@ input[type='number'] {
   font-size: 1em;
 
   &:focus-visible {
-    border-color: $accentColor;
+    border-color: var(--accentColor);
   }
 
   &::placeholder {
@@ -268,7 +250,7 @@ input[type='number'] {
 option {
   color: white;
   border: none;
-  background-color: $bgColor;
+  background-color: var(--bgColor);
 }
 
 ul {
@@ -279,7 +261,7 @@ ul {
 
 .text {
   &--accent {
-    color: $accentColor;
+    color: var(--accentColor);
   }
 
   &--grayed {
@@ -336,19 +318,18 @@ hr {
   }
 
   span:focus {
-    color: $accentColor;
+    color: var(--accentColor);
     outline: none;
   }
 
-  label>input:checked+span {
-    color: $accentColor;
-    border-color: $accentColor;
+  label > input:checked + span {
+    color: var(--accentColor);
+    border-color: var(--accentColor);
   }
 }
 
 // Vue Transition anims
 .slide-top {
-
   &-enter-from,
   &-leave-to {
     transform: translateY(-100%);
@@ -361,7 +342,6 @@ hr {
 }
 
 .card-appear {
-
   &-enter-from,
   &-leave-to {
     opacity: 0;
@@ -371,4 +351,4 @@ hr {
   &-leave-active {
     transition: all 100ms ease-in-out;
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/_responsive.scss b/src/styles/_responsive.scss
new file mode 100644
index 0000000..ec5df4d
--- /dev/null
+++ b/src/styles/_responsive.scss
@@ -0,0 +1,20 @@
+$breakpointMd: 960px;
+$breakpointSm: 550px;
+
+@mixin smallScreen() {
+  @media only screen and (max-width: $breakpointSm) {
+    @content;
+  }
+}
+
+@mixin midScreen() {
+  @media only screen and (max-width: $breakpointMd) {
+    @content;
+  }
+}
+
+@mixin midScreenLandscape() {
+  @media only screen and (orientation: landscape) and (max-device-height: $breakpointMd) {
+    @content;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/_tab.scss b/src/styles/_tab.scss
index 062de8a..c6b41a7 100644
--- a/src/styles/_tab.scss
+++ b/src/styles/_tab.scss
@@ -1,5 +1,3 @@
-@use 'global';
-
 .tab {
   height: 100%;
   margin-top: 1px;
@@ -7,7 +5,7 @@
   &_header {
     padding: 0.5em 1em;
 
-    background-color: global.$secondaryColor;
+    background-color: var(--secondaryColor);
     text-align: center;
 
     h2 {
diff --git a/vite.config.ts b/vite.config.ts
index 7da23e9..02eb32b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,7 +10,7 @@ export default defineConfig({
   preview: { port: 4138 },
   css: {
     preprocessorOptions: {
-      scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] },
+      scss: { silenceDeprecations: ['legacy-js-api'] },
     },
   },
   resolve: {
@@ -23,13 +23,11 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
 
-      includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2,ttf}'],
-
       devOptions: { suppressWarnings: true, enabled: true },
 
       workbox: {
         cleanupOutdatedCaches: true,
-        globPatterns: ['**/*.{js,css,html,jpg,png,svg,img,woff,woff2}'],
+        globPatterns: ['**/*.{js,css,html,ico,woff,woff2,ttf}', '**/*.{png,jpg,jpeg,svg,webp,gif}'],
 
         runtimeCaching: [
           {