@ozdao/martyrs 0.2.571 → 0.2.574

package/src/modules/core/views/classes/core.app.js

@@ -259,7 +259,7 @@ export function createUniversalApp({
     }
     
     // FOR SSR / SERVER ENTRY
-    async function renderApp({ url, cookies, languages, ssrContext }) {
+    async function renderApp({ url, cookies, headers, languages, ssrContext }) {
       const { app, router, store, i18n, meta, moduleManager } = await createApp();
       
       // Set SSR store for useStore calls
@@ -305,6 +305,7 @@ export function createUniversalApp({
       const result = await appRenderer.render({
         url,
         cookies,
+        headers,
         createApp: () => ({ app, router, store, i18n, meta }),
         ssrContext
       });

package/src/modules/core/views/components/blocks/BlockSorting.vue

@@ -48,7 +48,7 @@ const order = defineModel('order')
         :class="{
           'bg-white t-black': order === 'asc'
         }"
-        class="radius-semi flex-center w-100 uppercase p-small flex-nowrap flex gap-thin pd-thin br-solid br-1px br-grey-transp-25 w-100"
+        class="radius-semi flex-center w-100 uppercase p-small flex-nowrap flex gap-thin pd-thin br-1px br-grey-transp-25 w-100"
       >
         <IconSort
           :order="'asc'"
@@ -63,7 +63,7 @@ const order = defineModel('order')
         :class="{
           'bg-white t-black': order === 'desc'
         }"
-        class="radius-semi flex-center w-100 uppercase p-small flex-nowrap flex gap-thin pd-thin br-solid br-1px br-grey-transp-25 w-100"
+        class="radius-semi flex-center w-100 uppercase p-small flex-nowrap flex gap-thin pd-thin br-1px br-grey-transp-25 w-100"
       >
         <IconSort
           :order="'desc'"

package/src/modules/core/views/components/blocks/CardFooter.vue

@@ -1,16 +1,16 @@
 <template>
-  <footer class="t-semi br-top-dark flex-nowrap flex-nojustify flex">
+  <footer class="fw-semi br-top-dark flex-nowrap flex-justify-start flex">
     👁️ {{ views }}
     <span class="mn-r-small mn-l-small d-block">·</span>
     <div class="cursor-pointer">
-      <div class="cursor-pointer hover-bg-white" @click="addReaction('like')" v-if="!isReacted">
+      <div class="cursor-pointer hover:bg-white" @click="addReaction('like')" v-if="!isReacted">
         👍 {{ reactionsCount }}
       </div>
-      <div class="cursor-pointer hover-bg-white" @click="deleteReaction('like')" v-if="isReacted">
+      <div class="cursor-pointer hover:bg-white" @click="deleteReaction('like')" v-if="isReacted">
         👍 {{ reactionsCount }}
       </div>
     </div>
-    <span class="mn-r-small hover-bg-white mn-l-small d-block">·</span>
+    <span class="mn-r-small hover:bg-white mn-l-small d-block">·</span>
     💬 {{ commentsCount }}
   </footer>
 </template>

package/src/modules/core/views/components/blocks/CardHeader.vue

@@ -4,7 +4,7 @@
 		class="pd-b-zero "
 	>
 		<div 
-			class="w-100 flex-v-center flex-nojustify flex"
+			class="w-100 flex-v-center flex-justify-start flex"
 		>
 
 			<div
@@ -37,7 +37,7 @@
 
 				<div 
 					v-if="type !== 'short'"
-					class="gap-thin  flex flex-nowrap t-medium w-100 pos-relative"
+					class="gap-thin  flex flex-nowrap fw-medium w-100 pos-relative"
 				>
 					<span 
 						@click.stop="$router.push({
@@ -46,7 +46,7 @@
 								_id: owner.target._id
 							}
 						})" 
-						class="cursor-pointer w-max t-trim"
+						class="cursor-pointer w-max truncate"
 					>
 						{{owner.target?.profile?.name || creator.target?.username || 'Anonymous'}}
 					</span>
@@ -61,7 +61,7 @@
 								_id: creator.target?._id
 							}
 						})" 
-						class="cursor-pointer w-max t-trim"
+						class="cursor-pointer w-max truncate"
 					>
 						<div>by {{creator.target?.profile?.name || creator.target?.username || 'Anonymous'}}</div>
 					</span>
@@ -108,7 +108,7 @@
 							class="w-100"
 						>
 							<button 
-								class="w-100 bg-black br-solid br-1px br-white-transp-20 t-white button-small button"
+								class="w-100 bg-black br-1px br-white-transp-20 t-white button-small button"
 							>
 								Report
 							</button>
@@ -122,7 +122,7 @@
 			          v-if="action.to"
 			          :key="action.to"
 			          :to="action.to"
-			          :class="action.class || 'w-100 bg-black br-solid br-1px br-white-transp-20 t-white button-small button'"
+			          :class="action.class || 'w-100 bg-black br-1px br-white-transp-20 t-white button-small button'"
 			        >
 			          {{ action.label }}
 			        </router-link>
@@ -130,7 +130,7 @@
 			        <button
 			          v-if="action.method"
 			          @click="action.method"
-			          :class="action.class || 'w-100 bg-black br-solid br-1px br-white-transp-20 t-white button-small button'"
+			          :class="action.class || 'w-100 bg-black br-1px br-white-transp-20 t-white button-small button'"
 			        >
 			          {{ action.label }}
 			        </button>

package/src/modules/core/views/components/blocks/HelpCard.vue

@@ -7,7 +7,7 @@
     class="help-card pd-small mn-small radius-small bg-light cursor-pointer"
   >
     <div class="help-icon mn-b-thin" style="font-size: 2rem;">💬</div>
-    <div class="help-title t-medium mn-b-micro">Need help?</div>
+    <div class="help-title fw-medium mn-b-micro">Need help?</div>
     <div class="help-subtitle t-small t-transp">24/7 online support</div>
   </a>
 </template>

package/src/modules/core/views/components/blocks/PopupAuth.vue

@@ -20,7 +20,7 @@
         
         <span>
           Already have an account? 
-          <a @click="handleSignIn" class="t-second cursor-pointer">Sign in</a>
+          <a @click="handleSignIn" class="t-grey cursor-pointer">Sign in</a>
         </span>
       </div>
     </div>

package/src/modules/core/views/components/elements/ButtonDate.vue

@@ -4,7 +4,7 @@
     class="cursor-pointer flex-center flex"
   >
     <IconDate class="w-1r h-auto"/>
-    <span class="desktop-only mn-l-thin t-semi">{{ formattedDate }}</span>
+    <span class="desktop-only mn-l-thin fw-semi">{{ formattedDate }}</span>
   </div>
 </template>
 

package/src/modules/core/views/components/elements/PhotoStack.vue

@@ -21,7 +21,7 @@ defineProps({
         top: '0px', 
         right: '0px' 
       }"
-      class="br-solid br-2px br-white z-index-1 radius-big i-medium bg-second flex flex-center t-white p-small t-semi"
+      class="br-2px br-white z-index-1 radius-big i-medium bg-second flex flex-center t-white p-small fw-semi"
     >
       {{number}}
     </span>
@@ -38,7 +38,7 @@ defineProps({
           right: (index * 20 + 20) + '%', 
           zIndex: 1 - index 
         }"
-        class="br-solid br-2px br-white i-medium bg-light radius-big"
+        class="br-2px br-white i-medium bg-light radius-big"
       />
 
       <PlaceholderUserpic
@@ -49,7 +49,7 @@ defineProps({
           right: (index * 20 + 20) + '%', 
           zIndex: 1 - index 
         }"
-        class="br-solid br-2px br-white i-medium bg-light radius-big"
+        class="br-2px br-white i-medium bg-light radius-big"
       />
     </template>
   </div>

package/src/modules/core/views/components/layouts/App.vue

@@ -108,13 +108,37 @@
 
   useHead(metadata)
 
-  onBeforeMount(async()=>{
+  onBeforeMount(async () => {
     if (process.env.MOBILE_APP === 'ios') Keyboard.setAccessoryBarVisible({ isVisible: false })
 
-    const { value } = await Preferences.get({ key: 'darkmode' });
+    // Для Mobile (Capacitor) - читаем из Preferences
+    if (process.env.MOBILE_APP) {
+      const { value } = await Preferences.get({ key: 'theme' });
+      const mode = value || 'system';
+      store.core.actions.setTheme(mode);
+    } else {
+      // Для SSR/SPA - инициализируем state из уже проставленного SSR атрибута
+      const root = document.documentElement;
+      const dataTheme = root.getAttribute('data-theme');
 
-    const isDarkMode = value ? JSON.parse(value) : false;
+      if (dataTheme === 'dark') {
+        store.core.state.theme.mode = 'dark';
+      } else if (dataTheme === 'light') {
+        store.core.state.theme.mode = 'light';
+      } else {
+        store.core.state.theme.mode = 'system';
+      }
+    }
+  })
 
-    store.core.actions.setTheme(isDarkMode);
+  onMounted(() => {
+    // Слушаем изменения системной темы
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', (e) => {
+      // При изменении системной темы, если режим 'system' - обновляем CSS
+      if (store.core.state.theme.mode === 'system') {
+        store.core.actions.setTheme('system');
+      }
+    });
   })
 </script>

package/src/modules/core/views/components/layouts/Client.vue

@@ -74,11 +74,11 @@
 	  	<LocationSelection />
 	  </Popup>
 
-	  <!-- class="flex flex-nowrap transition-ease-in-out o-hidden pos-relative" -->
+	  <!-- class="flex flex-nowrap ease-in-out o-hidden pos-relative" -->
 		<section 
 			id="screen" 
 			ref="screen"
-			class="flex flex-nowrap h-100 pos-relative o-hidden  transition-ease-in-out"
+			class="flex flex-nowrap h-100 pos-relative o-hidden  ease-in-out"
 			:class="{
 				'': MOBILE_APP === 'ios',
       }"
@@ -127,8 +127,8 @@
 	    		/>
 	    	</template>
 	    </component>
-		  <!-- rows-1-min0_max1 z-index-1 pos-relative w-100 h-100 -->
-		  <div class="rows-1-min0_max1 z-index-1 pos-relative w-100 h-100">
+		  <!-- rows-[minmax(0,1fr)] z-index-1 pos-relative w-100 h-100 -->
+		  <div class="rows-[minmax(0,1fr)] z-index-1 pos-relative w-100 h-100">
 		  	<div id="scrollview" ref="scrollview" @scroll="handleScroll" class="o-y-scroll o-x-hidden h-100">
 	  			<Status
 	  				v-if="store.core.state.error.show"

package/src/modules/core/views/components/partials/BottomNavigationBar.vue

@@ -3,61 +3,61 @@
         <nav class="t-black w-100 flex-justify-between flex-v-center flex">
           <!-- Home -->
           <router-link 
-            class="no-hover-color t-center t-medium" 
-            :class="{ 't-second': $route.path === '/', 't-transp': $route.path !== '/' }"
+            class="no-hover-color t-center fw-medium" 
+            :class="{ 't-grey': $route.path === '/', 't-transp': $route.path !== '/' }"
             to="/"
           >
             <IconHome 
               class="mn-r-auto mn-l-auto i-big mn-b-thin"
               :fill="$route.path === '/' ? 'rgb(var(--second))' : 'currentColor'"
             />
-            <p class="t-semi p-small w-100">{{t('navigation.home')}}</p>
+            <p class="fw-semi p-small w-100">{{t('navigation.home')}}</p>
           </router-link>
 
           <!-- Gallery -->
           <router-link 
-            class="no-hover-color t-center t-medium"
-            :class="{ 't-second': $route.path === '/marketplac', 't-transp': $route.path !== '/marketplac' }"
+            class="no-hover-color t-center fw-medium"
+            :class="{ 't-grey': $route.path === '/marketplac', 't-transp': $route.path !== '/marketplac' }"
             to="/marketplac"
           >
             <IconCatalog 
               class="mn-r-auto mn-l-auto i-big mn-b-thin"
               :fill="$route.path === '/catalog' ? 'rgb(var(--second))' : 'currentColor'"
             />
-            <p class=" t-semi p-small w-100">{{t('navigation.marketplac')}}</p>
+            <p class=" fw-semi p-small w-100">{{t('navigation.marketplac')}}</p>
           </router-link>
 
           <!-- Events -->
           <router-link 
-            class="no-hover-color t-center t-medium"
-            :class="{ 't-second': $route.path === '/rents', 't-transp': $route.path !== '/rents' }"
+            class="no-hover-color t-center fw-medium"
+            :class="{ 't-grey': $route.path === '/rents', 't-transp': $route.path !== '/rents' }"
             to="/rents"
           >
             <IconShopcart 
               class="mn-r-auto mn-l-auto i-big mn-b-thin"
               :fill="$route.path === '/rents' ? 'rgb(var(--second))' : 'currentColor'"
             />
-            <p class=" t-semi p-small w-100">{{t('navigation.rents')}}</p>
+            <p class=" fw-semi p-small w-100">{{t('navigation.rents')}}</p>
           </router-link>
 
           <!-- Community -->
           <router-link 
-            class="no-hover-color t-center t-medium"
-            :class="{ 't-second': $route.path === '/community', 't-transp': $route.path !== '/community' }"
+            class="no-hover-color t-center fw-medium"
+            :class="{ 't-grey': $route.path === '/community', 't-transp': $route.path !== '/community' }"
             to="/community"
           >
             <IconCommunity 
               class="mn-r-auto mn-l-auto i-big mn-b-thin"
               :fill="$route.path === '/community' ? 'rgb(var(--second))' : 'currentColor'"
             />
-            <p class=" t-semi p-small w-100">{{t('navigation.community')}}</p>
+            <p class=" fw-semi p-small w-100">{{t('navigation.community')}}</p>
           </router-link>
 
           <!-- Account -->
           <router-link 
-            class="no-hover-color t-center t-medium"
+            class="no-hover-color t-center fw-medium"
             :class="{ 
-              't-second': $route.path.startsWith('/auth/') || $route.path.startsWith('/users/'),
+              't-grey': $route.path.startsWith('/auth/') || $route.path.startsWith('/users/'),
               't-transp': !$route.path.startsWith('/auth/') && !$route.path.startsWith('/users/')
             }"
             :to="auth.state.access.status === false ? {name: 'Sign In'} : { name: 'User Profile', params: { _id: auth.state.user._id }}"
@@ -66,7 +66,7 @@
               class="mn-r-auto mn-l-auto i-big mn-b-thin"
               :fill="$route.path.startsWith('/auth/') || $route.path.startsWith('/users/') ? 'rgb(var(--second))' : 'currentColor'"
             />
-            <p class="t-semi p-small w-100">{{t('navigation.profile')}}</p>
+            <p class="fw-semi p-small w-100">{{t('navigation.profile')}}</p>
           </router-link>
         </nav>
     </footer>

package/src/modules/core/views/components/partials/CitySelection.vue

@@ -16,7 +16,7 @@
     <!-- Coming soon cities -->
     <p class="mn-b-small">{{t('comingsoon')}}</p>
     
-    <div class="cols-4 gap-small mn-b-semi">
+    <div class="cols-4 mobile:cols-2 gap-small mn-b-semi">
       <!-- Input -->
       <div class="flex-nowrap flex pd-small radius-small bg-light">
         <span class="d-block">{{t('cscities[0]')}}</span>

package/src/modules/core/views/components/partials/Footer.centered.vue

@@ -157,7 +157,7 @@ const iconComponents = {
   <footer 
     class="
       w-100
-      br-t br-solid
+      br-t-1px
       mobile:t-center
     "
     :class="{
@@ -175,16 +175,16 @@ const iconComponents = {
         class="cursor-pointer h-3r mn-b-medium"
       />
 
-      <div class="grid cols-3-footer tablet:cols-2 mobile:cols-1 gap-extra mobile:gap-big">
+      <div class="d-grid cols-3-footer tablet:cols-2 mobile:cols-1 gap-extra mobile:gap-big">
         
         <!-- Contact Block -->
         <div class="flex flex-column mobile:flex-h-center w-max-15r mobile:mn-auto">
-          <p class="p-medium t-medium mn-b-semi">{{ t('description') }}</p>
+          <p class="p-medium fw-medium mn-b-semi">{{ t('description') }}</p>
           
           <div class="mn-b-semi mobile:flex-v-center flex flex-column gap-small">
             <a 
               :href="`tel:${t('phoneNumber').replace(/\s/g, '')}`" 
-              class="flex mn-b-micro gap-micro flex-v-center transition-opacity hover-opacity-70"
+              class="flex mn-b-micro gap-micro flex-v-center ease hover:opacity-70"
               :class="theme === 'light' ? 't-black' : 't-white'"
             >
               <IconPhone class="i-medium" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" />
@@ -193,7 +193,7 @@ const iconComponents = {
             
             <a 
               :href="`mailto:${t('emailAddress')}`" 
-              class="flex mn-b-micro gap-micro flex-v-center transition-opacity hover-opacity-70"
+              class="flex mn-b-micro gap-micro flex-v-center ease hover:opacity-70"
               :class="theme === 'light' ? 't-black' : 't-white'"
             >
               <IconEmail class="i-medium" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" />
@@ -206,7 +206,7 @@ const iconComponents = {
             </div>
           </div>
 
-          <h4 class="h5 t-medium mn-b-regular">{{ t('app') }}</h4>
+          <h4 class="h5 fw-medium mn-b-regular">{{ t('app') }}</h4>
           <div class="w-100 flex-nowrap flex gap-thin">
             <a 
               v-if="te('linkAppStore') || te('label')"
@@ -216,7 +216,7 @@ const iconComponents = {
             > 
               <span 
                 v-if="te('label')"
-                class="z-index-2 radius-medium bg-main t-medium uppercase pd-thin pos-absolute pos-r-10-negative pos-t-10-negative"
+                class="z-index-2 radius-medium bg-main fw-medium uppercase pd-thin pos-absolute pos-r-10-negative pos-t-10-negative"
               >
                 {{ t('label') }}
               </span>
@@ -231,7 +231,7 @@ const iconComponents = {
             > 
               <span 
                 v-if="te('label')"
-                class="z-index-2 pd-thin radius-medium bg-main t-medium uppercase pos-absolute pos-r-10-negative pos-t-10-negative"
+                class="z-index-2 pd-thin radius-medium bg-main fw-medium uppercase pos-absolute pos-r-10-negative pos-t-10-negative"
               >
                 {{ t('label') }}
               </span>
@@ -244,13 +244,13 @@ const iconComponents = {
         <div class="cols-2 gap-big">
           <div v-for="(column, colIndex) in tm('navigationColumns')" :key="colIndex" class="flex flex-column gap-regular">
             <div v-for="(section, sectionIndex) in column.sections" :key="sectionIndex" class="">
-              <h4 class="h5 t-medium mn-b-regular">{{ section.title }}</h4>
+              <h4 class="h5 fw-medium mn-b-regular">{{ section.title }}</h4>
               <nav>
                 <ul class="flex flex-column gap-thin">
                   <li v-for="item in section.items" :key="item.url">
                     <router-link 
                       :to="`/${item.url}`" 
-                      class="t-small transition-opacity hover-opacity-70" 
+                      class="t-small ease hover:opacity-70" 
                       :class="theme === 'light' ? 't-black' : 't-white'"
                     >
                       {{ item.name }}
@@ -264,7 +264,7 @@ const iconComponents = {
 
         <!-- Subscribe Block -->
         <div class="col">
-          <h4 class="h5 t-medium mn-b-regular">{{ t('subscribe') }}</h4>
+          <h4 class="h5 fw-medium mn-b-regular">{{ t('subscribe') }}</h4>
           <p class="t-small mn-b-small t-transp">{{ t('subscribe_text') }}</p>
           
           <FieldSubscribeNewsletter
@@ -274,7 +274,7 @@ const iconComponents = {
             class="d-inline-flex mn-b-medium bg-light t-black w-100"
           />
 
-          <h4 class="h5 t-medium mn-b-regular">{{ t('follow') }}</h4>
+          <h4 class="h5 fw-medium mn-b-regular">{{ t('follow') }}</h4>
           <!-- Social Links -->
           <div class="flex mobile:flex-h-center gap-thin">
             <a 
@@ -287,8 +287,8 @@ const iconComponents = {
                 flex flex-center 
                 radius-small
                 bg-light 
-                transition-opacity
-                hover-opacity-70
+                ease
+                hover:opacity-70
               "
             >
               <component
@@ -305,7 +305,7 @@ const iconComponents = {
     <!-- Bottom Section -->
     <div class="
       pd-medium 
-      br-t br-solid
+      br-t-1px
       flex flex-justify-between flex-v-center
       flex-nowrap
       mobile:flex-column mobile:gap-small
@@ -317,13 +317,13 @@ const iconComponents = {
     }"
     >
       <!-- Copyright -->
-      <p class="t-small t-medium uppercase mobile:t-center">
+      <p class="t-small fw-medium uppercase mobile:t-center">
         {{ t('year') }} 
         <span class="t-main copyleft">{{ t('heart') }}</span> 
         {{ t('copyright') }} 
       </p>
 
-      <a href="https://ozdao.dev" target="_blank" rel="noopener" class="flex-nowrap flex-v-center flex t-medium gap-thin br-1px br-light pd-thin radius-thin">
+      <a href="https://ozdao.dev" target="_blank" rel="noopener" class="flex-nowrap flex-v-center flex fw-medium gap-thin br-1px br-light pd-thin radius-thin">
         <Logotype class="h-1r w-auto"/>
         <span>{{ t('ozdao') }}</span>
       </a>

package/src/modules/core/views/components/partials/Footer.vue

@@ -57,7 +57,7 @@ const iconComponents = {
   <footer 
     class="
       w-100
-      br-t br-solid
+      br-t-1px
     "
     :class="{
       't-black bg-white br-light': theme === 'light',
@@ -74,16 +74,16 @@ const iconComponents = {
         class="cursor-pointer h-3r mn-b-medium"
       />
 
-      <div class="grid cols-3-footer tablet:cols-2 mobile:cols-1 gap-extra mobile:gap-big">
+      <div class="d-grid cols-3-footer tablet:cols-2 mobile:cols-1 gap-extra mobile:gap-big">
         
         <!-- Contact Block -->
         <div class="col w-max-15r">
-          <p class="p-medium t-medium mn-b-semi">{{ t('footer.description') }}</p>
+          <p class="p-medium fw-medium mn-b-semi">{{ t('footer.description') }}</p>
           
           <div class="mn-b-semi flex flex-column gap-small">
             <a 
               :href="`tel:${t('footer.phoneNumber').replace(/\s/g, '')}`" 
-              class="flex mn-b-micro gap-micro flex-v-center transition-opacity hover-opacity-70"
+              class="flex mn-b-micro gap-micro flex-v-center ease hover:opacity-70"
               :class="theme === 'light' ? 't-black' : 't-white'"
             >
               <IconPhone class="i-medium" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" />
@@ -92,7 +92,7 @@ const iconComponents = {
             
             <a 
               :href="`mailto:${t('footer.emailAddress')}`" 
-              class="flex mn-b-micro gap-micro flex-v-center transition-opacity hover-opacity-70"
+              class="flex mn-b-micro gap-micro flex-v-center ease hover:opacity-70"
               :class="theme === 'light' ? 't-black' : 't-white'"
             >
               <IconEmail class="i-medium" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" />
@@ -105,7 +105,7 @@ const iconComponents = {
             </div>
           </div>
 
-          <h4 class="h5 t-medium mn-b-regular">{{ t('footer.app') }}</h4>
+          <h4 class="h5 fw-medium mn-b-regular">{{ t('footer.app') }}</h4>
           <div class="w-100 flex-nowrap flex gap-thin">
             <a 
               v-if="te('footer.linkAppStore') || te('footer.label')"
@@ -115,7 +115,7 @@ const iconComponents = {
             > 
               <span 
                 v-if="te('footer.label')"
-                class="z-index-2 radius-medium bg-main t-medium uppercase pd-thin pos-absolute pos-r-10-negative pos-t-10-negative"
+                class="z-index-2 radius-medium bg-main fw-medium uppercase pd-thin pos-absolute pos-r-10-negative pos-t-10-negative"
               >
                 {{ t('footer.label') }}
               </span>
@@ -130,7 +130,7 @@ const iconComponents = {
             > 
               <span 
                 v-if="te('footer.label')"
-                class="z-index-2 pd-thin radius-medium bg-main t-medium uppercase pos-absolute pos-r-10-negative pos-t-10-negative"
+                class="z-index-2 pd-thin radius-medium bg-main fw-medium uppercase pos-absolute pos-r-10-negative pos-t-10-negative"
               >
                 {{ t('footer.label') }}
               </span>
@@ -143,13 +143,13 @@ const iconComponents = {
         <div class="cols-2 gap-big">
           <div v-for="(column, colIndex) in tm('footer.navigationColumns')" :key="colIndex" class="flex flex-column gap-regular">
             <div v-for="(section, sectionIndex) in column.sections" :key="sectionIndex" class="">
-              <h4 class="h5 t-medium mn-b-regular">{{ section.title }}</h4>
+              <h4 class="h5 fw-medium mn-b-regular">{{ section.title }}</h4>
               <nav>
                 <ul class="flex flex-column gap-thin">
                   <li v-for="item in section.items" :key="item.url">
                     <router-link 
                       :to="`/${item.url}`" 
-                      class="t-small transition-opacity hover-opacity-70" 
+                      class="t-small ease hover:opacity-70" 
                       :class="theme === 'light' ? 't-black' : 't-white'"
                     >
                       {{ item.name }}
@@ -163,7 +163,7 @@ const iconComponents = {
 
         <!-- Subscribe Block -->
         <div class="col">
-          <h4 class="h5 t-medium mn-b-regular">{{ t('footer.subscribe') }}</h4>
+          <h4 class="h5 fw-medium mn-b-regular">{{ t('footer.subscribe') }}</h4>
           <p class="t-small mn-b-small t-transp">{{ t('footer.subscribe_text') }}</p>
           
           <FieldSubscribeNewsletter
@@ -173,7 +173,7 @@ const iconComponents = {
             class="d-inline-flex mn-b-medium bg-light t-black w-100"
           />
 
-          <h4 class="h5 t-medium mn-b-regular">{{ t('footer.follow') }}</h4>
+          <h4 class="h5 fw-medium mn-b-regular">{{ t('footer.follow') }}</h4>
           <!-- Social Links -->
           <div class="flex gap-thin">
             <a 
@@ -186,8 +186,8 @@ const iconComponents = {
                 flex flex-center 
                 radius-small
                 bg-light 
-                transition-opacity
-                hover-opacity-70
+                ease
+                hover:opacity-70
               "
             >
               <component
@@ -204,8 +204,8 @@ const iconComponents = {
     <!-- Bottom Section -->
     <div class="
       pd-medium 
-      br-t 
-      br-solid
+      br-t-1px 
+     
       flex 
       flex-justify-between 
       flex-v-center
@@ -220,13 +220,13 @@ const iconComponents = {
     }"
     >
       <!-- Copyright -->
-      <p class="t-small t-medium uppercase">
+      <p class="t-small fw-medium uppercase">
         {{ t('footer.year') }} 
         <span class="t-main copyleft">{{ t('footer.heart') }}</span> 
         {{ t('footer.copyright') }} 
       </p>
 
-      <a href="https://ozdao.dev" target="_blank" rel="noopener" class="flex-nowrap flex-v-center flex t-medium gap-thin br-1px br-light pd-thin radius-thin">
+      <a href="https://ozdao.dev" target="_blank" rel="noopener" class="flex-nowrap flex-v-center flex fw-medium gap-thin br-1px br-light pd-thin radius-thin">
         <Logotype class="h-1r w-auto"/>
         <span>{{ t('footer.ozdao') }}</span>
       </a>