@ozdao/prometheus-framework 0.2.39 → 0.2.40

package/src/modules/orders/components/pages/Order.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="order && orderOrganization" class="pd-big"> 
+	<div v-if="order && orderOrganization" class="pd-thin"> 
 	  
 	
 
@@ -167,7 +167,7 @@
 	    <div class="bg-grey radius-big pd-medium  mn-r-bold pd-r-big br-right-dark w-100">
 	  		<h3 class="mn-b-small">Order Summary</h3>
 
-	  		<ul class="mn-b-semi">
+	  		<ul class="flex gap-thin flex-column mn-b-semi">
 	  			<CardOrderItem
 	  				v-for="(product, index) in orderProducts" :key="product._id"
 	  				:editable="false" 
@@ -197,7 +197,7 @@
 		    		route.name === 'Order Status' ? order.user?.name || 'User' : 'Weeder Support'
 		    	"
 		    	:chatID="order._id"
-		    	class="bg-black radius-big bg-white o-hidden"
+		    	class="radius-semi bg-white o-hidden"
 		    />
 
 	    </div>
@@ -244,7 +244,6 @@
 
 	})
 
-
 	let cartTotalPrice = computed(() => {
     return Number(order.value.positions.reduce((total, product) => {
       return total + product.price * product.quantity;

package/src/modules/organizations/components/blocks/CardOrganization.vue

@@ -16,10 +16,10 @@
         class="h-4r w-4r"
       />
       
-      <div class="pos-relative w-100 flex-child-1 flex-child mn-l-small w-100">
+      <div class="pos-relative w-100 flex-h-center flex flex-column flex-child-1 flex-child mn-l-thin w-100">
         
         <!-- <Text :text="organization.profile.name ? organization.profile.name : ''" :maxLen="18" class="h3 d-block"/> -->
-        <p class="h3 t-truncate">{{organization.profile.name}}</p>
+        <p class="h4 t-truncate">{{organization.profile.name}}</p>
         <!-- RATING -->
         <!-- <div v-if="showRating && organization.rating" class="w-max star-container flex-v-center flex">
           <img
@@ -38,8 +38,8 @@
           class="pos-relative p-small"
         />
 
-        <div v-if="showFollowers">
-          <p class="mn-b-thin">{{organization.numberOfSubscribers}} followers</p>
+        <div v-if="showFollowers" class="flex-center gap-thin pd-r-thin pd-l-thin flex-nowrap flex mn-t-thin bg-white radius-extra w-max">
+          <p class="mn-t-thin mn-b-thin">{{organization.numberOfSubscribers}} followers</p>
 
           <ButtonToggleMembership
             v-if="
@@ -51,9 +51,9 @@
             :role="'subscriber'" 
             :target="organization._id" 
             :status="organization.isSubscriber" 
-            :text="{create: 'Follow', remove: 'Unfollow'}"
+            :text="{create: '+', remove: '-'}"
             @updateMembership="event => handleMembershipUpdate(event, 'isSubscriber', 'numberOfSubscribers')"
-            class="w-min" 
+            class="i-semi" 
           />
         </div>
 

package/src/modules/organizations/components/pages/Organization.vue

@@ -191,7 +191,7 @@
 	const router 	= useRouter()
 	const route 	= useRoute()
 	// Accesing state
-	let tab = route.query.tab ? route.query.tab : 'community';
+	let tab = route.query.tab ? route.query.tab : 'products';
 
 	const organizationData = ref(null)
 

package/src/modules/organizations/components/sections/DetailsTab.vue

@@ -1,12 +1,12 @@
 <template>
 	<transition name="slide-fade">
-		<section class="t-center flex-center flex-column flex pd-medium radius-big bg-grey">
+		<section class="flex-center flex flex-column t-center pd-medium radius-big bg-grey">
 
 			<Dropdown 
 				v-if="user._id !== organization.owner"
-				:label="'...'" 
+				:label="{ component: IconEllipsis, class: 'i-regular t-transp' }"
 				:align="'right'"
-				class="cursor-pointer pos-absolute pos-r-0 pos-t-0 pd-thin radius-extra "
+				class="cursor-pointer pos-absolute pos-r-regular pos-t-regular pd-thin radius-extra "
 			>
 				<section 
 					class="bg-black pd-thin radius-small"
@@ -34,7 +34,7 @@
 				      :status="organization.isBlocked" 
 				      :text="{create: 'Block', remove: 'Unblock'}"
 				      @updateMembership="event => handleMembershipUpdate(event, 'isBlocked')"
-				       class="t-white  mn-t-thin bg-red" 
+				       class="t-white w-100 mn-t-thin bg-red" 
 			    	/>
 				</section>
       </Dropdown>
@@ -53,7 +53,7 @@
 			<img 
 				v-if="organization.profile.photo" 
 				:src="(FILE_SERVER_URL || '') + organization.profile.photo" 
-				class="radius-big bg-grey flex-center flex mn-b-small i-extra" 
+				class="radius-big bg-grey flex-center flex mn-b-small w-8r" 
 			/>
 
 			<PlaceholderOrganizationPic
@@ -61,48 +61,45 @@
 				class="radius-medium mn-b-small i-extra"
 			/>
 
-	        <h1
-	        	class="mn-b-thin"
-	        >
-	    		{{ organization.profile.name }}
-	    	</h1>
-
-	        <p class="mn-b-medium p-big">
-		     	<Text :text="organization.profile.description || ''" :maxLen="240" />
-	      	</p>  
-
-
-	        
-	    <Chips 
+      <h1
+      	class="mn-b-thin"
+      >
+	  		{{ organization.profile.name }}
+	  	</h1>
+
+     	<div class="flex-center  pd-r-thin pd-l-thin flex-nowrap flex mn-t-thin bg-white radius-extra w-max">
+     		<IconFollowing class="i-medium mn-r-micro t-transp"/>
+
+        <p class="mn-t-thin p-medium t-medium uppercase mn-b-thin">{{organization.numberOfSubscribers}} followers</p>
+
+        <ButtonToggleMembership
+          v-if="
+		      	user._id 
+		      	&& route.params._id 
+		      	&& route.params._id !== user._id
+		      	&& organization.owner !== user._id
+		      "
+          :user="user._id"
+          :type="'organization'" 
+          :role="'subscriber'" 
+          :target="organization._id" 
+          :status="organization.isSubscriber" 
+          :text="{create: '+', remove: '-'}"
+          @updateMembership="event => handleMembershipUpdate(event, 'isSubscriber', 'numberOfSubscribers')"
+          class=" mn-l-thin p-medium t-medium radius-extra i-semi" 
+        />
+      </div>
+
+      <p class="w-max-50r mn-t-regular mn-b-medium p-big">
+     		<Text :text="organization.profile.description || ''" :maxLen="240" />
+    	</p>  
+
+    	<Chips 
       	v-if="organization.profile?.tags?.length > 0" 
       	:chips="organization.profile.tags"
-      	class="mn-b-semi"
+      	class="p-medium"
      	/>
 
-		 	<p 
-				class="t-semi mn-b-small"
-			>
-				<!-- 👍 3 212 likes ·  -->
-				<!-- 💬 342 comments ·  -->
-				👨‍👨‍👧‍👧 {{organization.numberOfSubscribers}} followers
-			</p>
-
-		 	<ButtonToggleMembership
-    		v-if="
-	      	user._id 
-	      	&& route.params._id 
-	      	&& route.params._id !== user._id
-	      	&& organization.owner !== user._id
-	      "
-	      :user="user._id"
-	      :type="'organization'" 
-      	:role="'subscriber'" 
-	      :target="organization._id" 
-	      :status="organization.isSubscriber" 
-				:text="{create: 'Follow', remove: 'Unfollow'}"
-	      @updateMembership="event => handleMembershipUpdate(event, 'isSubscriber', 'numberOfSubscribers')"
-	      class="w-min mn-b-medium	mn-r-auto mn-l-auto" 
-    	/>
 
       <h4 
       	v-if="Object.values(organization.socials).some(value => value)" 
@@ -148,7 +145,9 @@
 	import Text  		from '@pf/src/components/Text/Text.vue'
 	import Chips  from '@pf/src/components/Chips/Chips.vue'
 	// Icons
+	import IconFollowing from '@pf/src/modules/icons/entities/IconFollowing.vue'
 	import IconEdit from '@pf/src/modules/icons/navigation/IconEdit.vue'
+	import IconEllipsis from '@pf/src/modules/icons/navigation/IconEllipsis.vue'
 	import PlaceholderOrganizationPic from '@pf/src/modules/icons/placeholders/PlaceholderOrganizationPic.vue'
 	// Org Module
 	import ButtonToggleMembership from '@pf/src/modules/organizations/components/elements/ButtonToggleMembership.vue'

package/src/modules/organizations/components/sections/Publics.vue

@@ -14,8 +14,8 @@
 	        	:key="organization._id" 
 		      	:organization="organization"
 		      	:user="auth.state.user"
-				@updateMembership="handleMembershipUpdate"
-				class="w-max"
+						@updateMembership="handleMembershipUpdate"
+						class="w-max-20r radius-big"
 		    />
 		</div>
 	</div>
@@ -35,9 +35,8 @@
 	onMounted(async () => {
 		publics.value = await organization.actions.read({
 			user: auth.state.user._id,
-			sort: "numberOfMemberships",
+			sortParam: "profile.tags",
 			limit: 10,
-			types: ['public']
 		});
 	});
 

package/src/modules/products/components/sections/HeroRecommendation.vue

@@ -13,8 +13,8 @@
 	const text = {
     messages: {
       "en": {
-		    "title": "Unlock Your Perfect High <br><b class='t-main'> with AI Budtender</b>",
-		    "description": "Say goodbye to endless browsing. Just tell us what you're want, and Weeder will find your ideal match.",
+		    "title": "Increase Your High <br><b class='t-main'>Boosted by AI Budtender</b>",
+		    "description": "Just tell us what you're want, and Weeder will find your ideal match.",
 		    "placeholderTexts": [
 		    	'Lowest THC, please!',
 		    	'Something with banana flavors?',
@@ -66,164 +66,7 @@
 		await products.actions.submitMood(moodToSend);
 	}
 
-	onMounted(() => {
-  //   const canvas = document.getElementById('glcanvas');
-  //   const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
-
-  //   const vsSource = `
-	//     attribute vec4 aVertexPosition;
-	//     void main() {
-	//       gl_Position = aVertexPosition;
-	//     }
-	// 	`;
-
-	// 	// Fragment shader (your GLSL code goes here)
-	// 	const fsSource = `
-	//     precision mediump float;
-
-	// 		const float PI = 3.14159265358979323846264;
-	// 		const float TWOPI = PI * 2.0;
-	// 		const vec4 WHITE = vec4(0.05, 0.05, 0.05, 1); // Для цвета F6F9F7
-	// 		const vec4 BLACK = vec4(0.0, 0.0, 0.0, 1); // Для цвета EBF2ED
-
-	// 		const int MAX_RINGS = 30;
-	// 		const float RING_DISTANCE = 0.03;
-	// 		const float WAVE_COUNT = 60.0;
-	// 		const float WAVE_DEPTH = 0.08;
-
-	// 		uniform float iTime;
-	// 		uniform vec2 iResolution;
-
-	// 		void main() {
-	// 		    float rot = mod(iTime * 0.6, TWOPI);
-	// 		    vec2 fragCoord = gl_FragCoord.xy;
-	// 		    vec2 pos = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y);
-	// 		    pos = vec2(3.0 * (pos.x - 0.5), 3.0 * (pos.y - 0.4));
-	// 		    float x = pos.x;
-	// 		    float y = pos.y;
-
-	// 		    bool black = false;
-	// 		    float prevRingDist = RING_DISTANCE;
-	// 		    for (int i = 0; i < MAX_RINGS; i++) {
-	// 		        vec2 center = vec2(0.0, 0.7 - RING_DISTANCE * float(i) * 1.2);
-	// 		        float radius = 0.5 + RING_DISTANCE / (pow(float(i + 5), 1.1) * 0.006);
-	// 		        float dist = distance(center, pos);
-	// 		        dist = pow(dist, 0.3);
-	// 		        float ringDist = abs(dist - radius);
-	// 		        if (ringDist < RING_DISTANCE * prevRingDist * 7.0) {
-	// 		            float angle = atan(y - center.y, x - center.x);
-	// 		            float thickness = 1.1 * abs(dist - radius) / prevRingDist;
-	// 		            float depthFactor = WAVE_DEPTH * sin((angle + rot * radius) * WAVE_COUNT);
-	// 		            if (dist > radius) {
-	// 		                black = (thickness < RING_DISTANCE * 5.0 - depthFactor * 2.0);
-	// 		            } else {
-	// 		                black = (thickness < RING_DISTANCE * 5.0 + depthFactor);
-	// 		            }
-	// 		            break;
-	// 		        }
-	// 		        if (dist > radius) break;
-	// 		        prevRingDist = ringDist;
-	// 		    }
-
-	// 		    gl_FragColor = black ? BLACK : WHITE;
-	// 		}
-
-	// 	`;
-
-	// 	function compileShader(gl, type, source) {
-	// 	    const shader = gl.createShader(type);
-	// 	    gl.shaderSource(shader, source);
-	// 	    gl.compileShader(shader);
-
-	// 	    // Check for compilation errors
-	// 	    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-	// 	        alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
-	// 	        gl.deleteShader(shader);
-	// 	        return null;
-	// 	    }
-
-	// 	    return shader;
-	// 	}
-
-	// 	const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vsSource);
-	// 	const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
-
-	// 	// Create the shader program
-	// 	const shaderProgram = gl.createProgram();
-
-	// 	gl.attachShader(shaderProgram, vertexShader);
-	// 	gl.attachShader(shaderProgram, fragmentShader);
-	// 	gl.linkProgram(shaderProgram);
-
-	// 	// Check for linking errors
-	// 	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-	// 	    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
-	// 	}
-
-	// 	function resizeCanvasToDisplaySize(canvas) {
-  //       const width = canvas.clientWidth * window.devicePixelRatio;
-  //       const height = canvas.clientHeight * window.devicePixelRatio;
-  //       if (canvas.width !== width || canvas.height !== height) {
-  //           canvas.width = width;
-  //           canvas.height = height;
-  //           return true; // размер изменился
-  //       }
-  //       return false; // размер не изменился
-  //   }
-
-
-	// 	function render() {
-	// 	 if (resizeCanvasToDisplaySize(gl.canvas)) {
-  //       gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
-  //     }
-	//     gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
-	//     gl.clearDepth(1.0);                 // Clear everything
-	//     gl.enable(gl.DEPTH_TEST);           // Enable depth testing
-	//     gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
-
-	//     // Clear the canvas before we start drawing on it
-	//     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-	//     // Set the shader program
-	//     gl.useProgram(shaderProgram);
-
-	//     // Set up geometry, attributes, uniforms here
-	//     // Create a buffer for the square's positions
-	//     const positionBuffer = gl.createBuffer();
-	//     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-
-	//     // Now create an array of positions for the square
-	//     const positions = [
-	//         -1.0,  1.0,
-	//         1.0,  1.0,
-	//         -1.0, -1.0,
-	//         1.0, -1.0,
-	//     ];
-
-	//     // Pass the positions to WebGL
-	//     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
-
-	//     // Tell WebGL how to pull out the positions from the position buffer
-	//     const vertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
-	//     gl.vertexAttribPointer(vertexPosition, 2, gl.FLOAT, false, 0, 0);
-	//     gl.enableVertexAttribArray(vertexPosition);
-
-	//     // Set the shader uniforms
-	//     var timeUniformLocation = gl.getUniformLocation(shaderProgram, 'iTime');
-	//     var resolutionUniformLocation = gl.getUniformLocation(shaderProgram, 'iResolution');
-
-	//     gl.uniform1f(timeUniformLocation, performance.now() / 3000.0);
-	//     gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
-
-	//     // Draw the scene
-	//     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-
-	//     // Call render again on the next frame
-	//     requestAnimationFrame(render);
-	// 	}
-	// requestAnimationFrame(render);
-
-});
+	
 </script>
 
 <template>
@@ -233,7 +76,7 @@
 	>
 
 		<div 
-			class="pd-big bg-black t-white pos-relative radius-big o-hidden "
+			class="pd-big bg-black t-white pos-relative radius-extra o-hidden "
 		>
 			<div class="flex-column flex-center flex t-center pos-relative z-index-1">
 				
@@ -243,13 +86,11 @@
 				/>
 
 				<p 
-					style="max-width: 40rem;"
-					class="mn-b-big p-big t-medium t-transp" 
+					class="mn-b-big p-big t-transp" 
 					v-html="t('description')"
 				/>
 				
 				<FieldBig 
-					style="max-width: 60rem;"
 					:input="mood" 
 			    :typingSpeed="100"
 			    :loopTyping="true"
@@ -258,11 +99,11 @@
 			    :action="t('action')"
 			    @update:input="mood = $event"
 			    @action="router.push({name: 'Product Recommmendation', query: {mood: mood}})"
-					class="mn-b-big pd-big bg-black-transp-50 bg-blur-thin w-100"
+					class="mn-b-big pd-big bg-black-transp-50 bg-blur-thin w-100 w-max-40r"
 				/>
 
 				<p 
-					class="w-m-60r t-medium t-transp mn-b-semi p-medium" 
+					class="w-m-60r t-transp mn-b-semi p-medium" 
 					v-html="t('subdescription')"
 				/>
 
@@ -275,7 +116,7 @@
 						class="
 							uppercase 
 							pd-thin
-							t-semi
+							t-medium
 							flex-center
 							flex-column
 							flex-nowrap
@@ -303,9 +144,7 @@
 			</div>
 
       <div class="w-100 h-100 flex flex-center pos-absolute pos-t-0 pos-r-0 z-index-0">
-      	
-      	  <div style="background-image: url(/spiral.jpg)" class="spiral"></div>
-      	<!-- <canvas id="glcanvas" class="w-100 h-100"></canvas> -->
+    	  <div style="background-image: url(/spiral.jpg)" class="spiral"></div>
       </div>
 
 		</div>

package/src/modules/products/components/sections/MenuSection.vue

@@ -1,7 +1,7 @@
 <template>
 	<section id="main-menu" class="pd-thin pos-relative">
 		<h2 class="w-m-60r mn-auto pd-t-big pd-b-big t-center">
-			Find Extraordinary <span class="t-main t-semi">Cannabis Flowers</span> and <span class="t-main t-semi">Accessories</span> to Enhance Your Smoking Experience
+			Weed and Accessories to <br><b>Enhance Your Smoking Experience</b> 
 		</h2>
 
 		<transition name="fade" mode="out-in"  appear>
@@ -38,7 +38,7 @@
 							<img 
 								v-if="category.url !== 'buds'"
 								:src="'/icons/categories/' + category.url + '.svg'"
-								class="i-extra mn-l-auto"
+								class="i-extra t-transp mn-l-auto"
 							>
 						
 						</div>
@@ -49,9 +49,9 @@
 						
 						<button 
 							v-if="category.url === 'buds'"
-			        class="mn-t-small br-2px br-solid hover-bg-main br-main t-black button-small button"
+			        class="mn-t-small radius-extra hover-bg-black t-medium t-black bg-main hover-t-white button-small button"
 			      >
-			        <span class="t-black">Check {{countProduct.count}} products →</span>
+			        <span>Check {{countProduct.count}} products →</span>
 			      </button>
 
 					</div>

package/src/modules/products/components/sections/PopularProducts.vue

@@ -2,12 +2,12 @@
 <div id="popularProducts" class="pd-thin">
 	<div class="bg-grey radius-big pd-t-big pd-b-big">
 
-		<h2 class="mn-b-semi t-center ">{{t('title')}}</h2>
+		<h2 class="mn-b-semi t-center " v-html="t('title')"/>
 		
 		<div class="embla" ref="emblaNode">
 		 	<div class="embla__container">
 		   
-		    <div class="embla__slide pd-thin" v-for="(value, key, index) in productsState" :key="key">
+		    <div class="embla__slide pd-nano" v-for="(value, key, index) in productsState" :key="key">
 		    	<transition name="fade" mode="out-in" appear>
 						<div 
 							v-if="!value.name" 
@@ -57,7 +57,7 @@
  	const text = {
     messages: {
       en: {
-      	title: 'Explore Hot Products 🔥',
+      	title: '<b>Best Sellers 🔥</b>',
       	subtitle: 'We attach great importance to high quality and customer satisfaction'
       },
       ru: {

package/src/modules/spots/components/layouts/Spots.vue

@@ -4,13 +4,13 @@
 		<div class="h-100 w-100 flex-nowrap flex-column flex gap-thin pd-thin">
 
 					<!-- Sorting section -->
-					<div class="pd-medium bg-grey radius-big">
+					<div class="pd-medium bg-main radius-big">
 						<div class="flex-nowrap flex flex-v-center">
 							<header class="mn-r-auto flex-v-center t-left flex-nowrap flex">
 				      	<h2 class="t-left">
 				      		<span class="">Weed in </span>
 
-				      		<span @click="a => { globals.state.isOpenLocationPopup = true }" v-if="localPosition.city || localPosition.state || localPosition.country" class="t-semi t-main">
+				      		<span @click="a => { globals.state.isOpenLocationPopup = true }" v-if="localPosition.city || localPosition.state || localPosition.country" class="t-semi t-black">
 			      				<span v-if="localPosition.city">{{localPosition.city}}, </span>
 			      				<span v-if="localPosition.state">{{localPosition.state}}, </span>
 			      				<span v-if="localPosition.country">{{localPosition.country}}</span>

package/src/modules/wallet/components/pages/Wallet.vue

@@ -102,7 +102,7 @@
         class="radius-medium bg-grey"
         v-for="income in state.rewards"
       > 
-        <div class="flex-nowrap flex pd-medium">
+        <div class="flex-nowrap bg-white flex pd-medium">
           <!-- <img src="/logo/wdt-plus.svg" class="mn-r-thin i-semi"> -->
           <p class="t-semi mn-r-auto">{{income.amount}} WDT</p>
           

package/src/styles/base/all.scss

@@ -191,6 +191,10 @@ body {
     &-items-baseline 	{ align-items: baseline; } 
 	}
 
+	.align-self-start {
+		align-self: start;
+	}
+
 	.flex-child {	
 		&-noresize 		{ flex: 0 } 
 		&-grow-0 			{ flex-grow: 0; }

package/src/styles/base/backgrounds.scss

@@ -42,13 +42,13 @@ body {
 	// Fills
 	.fill-l-main  	{ fill: var(--light-main); }
 	.fill-main  		{ fill: rgb(var(--main)); }
-	.fill-black  		{ fill: var(--black); }
+	.fill-black  		{ fill: rgb(var(--black)); }
 	.fill-dark  		{ fill: var(--dark); }
 	.fill-grey  		{ fill: var(--grey); }
 	.fill-light  		{ fill: var(--light); }
 	.fill-card 			{ fill: #F7F7F7; }
 	.fill-card-blue { fill: #eef2f6; }
-	.fill-white  		{ path { fill: var(--white); } }
+	.fill-white  		{ fill: rgb(var(--white));; }
 	.fill-t-white 	{ fill: rgba(var(--white),0.1); }
 	.fill-t-grey  	{ fill: rgba(var(--grey),0.1); }
 	.fill-t-darkgrey{ fill: rgba(var(--darkgrey),0.1); }

package/src/styles/base/shadow_transitions_hover_refactor.scss

@@ -5,15 +5,25 @@ body {
 	.hover-scale-3 {&:hover {transform: scale(1.2); 	} }
 
 
-
 	.hover-bg-main {&:hover {background: rgb(var(--main), 1);; } }
+	.hover-bg-second {&:hover {background: rgb(var(--second), 1);; } }
+	.hover-bg-third {&:hover {background: rgb(var(--second), 1);; } }
+	.hover-bg-fourth {&:hover {background: rgb(var(--third), 1);; } }
+	.hover-bg-fifth {&:hover {background: rgb(var(--fifth), 1);; } }
 	.hover-bg-white {&:hover {background: rgb(var(--white), 1);; } }
 	.hover-bg-black {&:hover {background: rgb(var(--black), 1);; } }
+
+	.hover-fill-main {&:hover {fill: rgb(var(--main)); } }
+	.hover-fill-white {&:hover {fill: rgb(var(--white)); } }
+	.hover-fill-black {&:hover {fill: rgb(var(--black)); } }
+
 	.hover-t-white {&:hover {color: rgba(var(--white), 1);; } }
 	.hover-t-black {&:hover {color: rgba(var(--black), 1);; } }
 	.hover-br-transp {&:hover {background: rgba(var(--white),0); } }
 	.hover-br-l-dark {&:hover {border: 1px solid rgba(var(--dark), 0.2) } }
 
+	.hover-t-underline {&:hover {text-decoration: underline;}}
+
 
 	.hover-translate-1 {&:hover {transform: translateY(-10px); } }
 	.hover-rotate-1 {&:hover {transform: rotate(-10deg); } }

package/src/styles/typography.scss

@@ -9,20 +9,27 @@
 .tx-zero  	{ padding: 0;   		} 
 // Font Styles
 .h0  		{ font-weight: 500; font-size: 8.000rem; 	line-height: 1.000; letter-spacing: -0.1rem; 	text-transform: none;				}
-h1,.h1  { font-weight: 500; font-size: 3.000rem; 	line-height: 1.000; letter-spacing: -0.1rem; 	text-transform: none;				}
-h2,.h2  { font-weight: 500; font-size: 2.500rem; 	line-height: 1.000; letter-spacing: -0.0rem;	text-transform: none;				}
-h3,.h3  { font-weight: 500; font-size: 1.500rem; 	line-height: 1.125; letter-spacing: -0.0rem;	text-transform: none;				}
-h4,.h4  { font-weight: 500; font-size: 1.250rem; 	line-height: 1.125; letter-spacing: +0.0rem; 	text-transform: none;	}
-h5,.h5 	{ font-weight: 500; font-size: 1.000rem; 	line-height: 1.125;	letter-spacing: -0.0rem; 	text-transform: none;				}
+h1,.h1  { font-weight: 500; font-size: 3.500rem; 	line-height: 1.000; letter-spacing: -0.1rem; 	text-transform: none;				}
+h2,.h2  { font-weight: 500; font-size: 3.000rem; 	line-height: 1.000; letter-spacing: -0.0rem;	text-transform: none;				}
+h3,.h3  { font-weight: 500; font-size: 1.750rem; 	line-height: 1.250; letter-spacing: -0.0rem;	text-transform: none;				}
+h4,.h4  { font-weight: 500; font-size: 1.250rem; 	line-height: 1.250; letter-spacing: +0.0rem; 	text-transform: none;				}
+h5,.h5 	{ font-weight: 500; font-size: 1.000rem; 	line-height: 1.250;	letter-spacing: -0.0rem; 	text-transform: none;				}
+
+// h1,.h1  { font-weight: 500; font-size: 3.000rem; 	line-height: 1.000; letter-spacing: -0.1rem; 	text-transform: none;				}
+// h2,.h2  { font-weight: 500; font-size: 2.500rem; 	line-height: 1.000; letter-spacing: -0.0rem;	text-transform: none;				}
+// h3,.h3  { font-weight: 500; font-size: 1.750rem; 	line-height: 1.250; letter-spacing: -0.0rem;	text-transform: none;				}
+// h4,.h4  { font-weight: 500; font-size: 1.250rem; 	line-height: 1.250; letter-spacing: +0.0rem; 	text-transform: none;				}
+// h5,.h5 	{ font-weight: 500; font-size: 1.000rem; 	line-height: 1.250;	letter-spacing: -0.0rem; 	text-transform: none;				}
+
 // Typogragy Styles
-		.p-small     	{ font-weight: 400;				font-size: 0.75rem;		line-height: 1.500; }
-p, 	.p-medium     { font-weight: 400;				font-size: 1.00rem;		line-height: 1.500	}
-		.p-big     		{ font-weight: 400; 			font-size: 1.50rem;		line-height: 1.500;	letter-spacing: +0.0rem;	}
+		.p-small     	{ font-weight: 400;				font-size: 0.75rem;		line-height: 1.250; }
+p, 	.p-medium     { font-weight: 400;				font-size: 1.00rem;		line-height: 1.250	}
+		.p-big     		{ font-weight: 400; 			font-size: 1.50rem;		line-height: 1.250;	letter-spacing: +0.0rem;	}
 
-b  { font-weight: 700}
+b  { font-weight: 600}
 
 a  				{	transition: all 0.233s ease; }
-a:hover   { cursor: pointer; color: rgb(var(--main));;} 
+a:hover   { cursor: pointer;} 
 a:active  { opacity: 0.75 }
 // Text align
 .t-left   	{ text-align: left; 	}
@@ -33,8 +40,8 @@ a:active  { opacity: 0.75 }
 .t-demi   	{ font-weight: 700;}
 .t-semi   	{ font-weight: 600;}
 .t-medium 	{ font-weight: 500;}
-.t-regular 	{ font-weight: 300;}
-.t-light  	{ font-weight: 200;}
+.t-regular 	{ font-weight: 400;}
+.t-light  	{ font-weight: 300;}
 // Linehegiht
 .t-lh-05		{ line-height: 0.5 }
 .t-lh-075		{ line-height: 0.75 }