From 6a35f4e869e2c20ca4b1b6c37a2a89bffbaa8923 Mon Sep 17 00:00:00 2001
From: Caio Fonseca <engcaiofonseca@protonmail.com>
Date: Sun, 26 Oct 2025 22:27:35 +0000
Subject: [PATCH 1/7] Add modern font transitions with dynamic hover effects

- Implement Lando Norris-style font-size transitions for interactive elements
- Add font-size-based hover effects for tabs, navigation, and sidebar items
- Include CSS variables for consistent transition timing and scaling
- Remove hover transitions from 8knot logo, title, and subtitle
- Support responsive adjustments for mobile devices
- Include accessibility features for reduced motion preferences
---
 8Knot/assets/font_transitions.css | 589 ++++++++++++++++++++++++++++++
 1 file changed, 589 insertions(+)
 create mode 100644 8Knot/assets/font_transitions.css

diff --git a/8Knot/assets/font_transitions.css b/8Knot/assets/font_transitions.css
new file mode 100644
index 00000000..a633c69c
--- /dev/null
+++ b/8Knot/assets/font_transitions.css
@@ -0,0 +1,589 @@
+/*
+    Dynamic Hover Transitions
+
+    This file contains smooth hover transitions for interactive elements
+    inspired by modern web design
+
+    Features:
+    - Smooth scale transitions on hover
+    - Dynamic transform effects
+    - Letter spacing animations
+    - Shadow and glow effects
+*/
+
+
+/* ==== GLOBAL TRANSITION VARIABLES ==== */
+
+:root {
+    /* Timing Functions */
+    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-ease: 0.3s ease-in-out;
+    /* Scale Values */
+    --hover-scale: 1.05;
+    --hover-scale-small: 1.03;
+    --hover-scale-medium: 1.02;
+    --hover-scale-tiny: 1.01;
+    --hover-scale-large: 1.08;
+    --hover-scale-press: 0.98;
+    /* Transform Values */
+    --hover-lift: -2px;
+    --hover-lift-small: -1px;
+    --hover-lift-large: -4px;
+    --hover-slide-small: 2px;
+    --hover-slide-medium: 4px;
+    --hover-slide-large: 6px;
+    /* Font Size Multipliers (Modern Dynamic Transition) */
+    --hover-font-scale: 1.15;
+    --hover-font-scale-small: 1.08;
+    --hover-font-scale-medium: 1.05;
+    --hover-font-scale-large: 1.2;
+    /* Letter Spacing Values */
+    --letter-spacing-tiny: 0.2px;
+    --letter-spacing-small: 0.3px;
+    --letter-spacing-medium: 0.4px;
+    --letter-spacing-base: 0.5px;
+    --letter-spacing-large: 0.8px;
+    --letter-spacing-xlarge: 1px;
+    --letter-spacing-xxlarge: 1.5px;
+    --letter-spacing-em-tiny: 0.02em;
+    --letter-spacing-em-small: 0.03em;
+    --letter-spacing-em-medium: 0.05em;
+    --letter-spacing-em-large: 0.08em;
+    /* Shadow Values */
+    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.2);
+    --shadow-medium: 0 2px 8px rgba(64, 64, 64, 0.2);
+    --shadow-large: 0 4px 12px rgba(0, 0, 0, 0.2);
+    --shadow-xlarge: 0 6px 16px rgba(0, 0, 0, 0.2);
+    --shadow-xxlarge: 0 8px 16px rgba(0, 0, 0, 0.2);
+    --shadow-huge: 0 8px 20px rgba(0, 0, 0, 0.3);
+    --shadow-button: 0 4px 12px rgba(64, 64, 64, 0.3);
+    --shadow-button-large: 0 8px 16px rgba(0, 0, 0, 0.3);
+    --shadow-tab: 0 4px 12px rgba(25, 154, 214, 0.3);
+    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.15);
+    --shadow-page-item: 0 6px 16px rgba(0, 0, 0, 0.2);
+    --shadow-hover-lift: 0 4px 10px rgba(0, 0, 0, 0.2);
+    /* Rotation Values */
+    --rotate-small: 2deg;
+    --rotate-full: 180deg;
+    /* Outline Values */
+    --outline-width: 2px;
+    --outline-offset: 2px;
+}
+
+
+/* ==== TAB TRANSITIONS ==== */
+
+
+/* Landing page tabs with dynamic font-size (Lando Norris style) */
+
+.tabs-header .nav-tabs .nav-link {
+    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast) !important;
+    transform-origin: center;
+    will-change: transform;
+}
+
+.tabs-header .nav-tabs .nav-link:hover {
+    transform: translateY(var(--hover-lift)) !important;
+    font-size: calc(1em * var(--hover-font-scale-medium));
+    letter-spacing: var(--letter-spacing-em-medium);
+    box-shadow: var(--shadow-tab) !important;
+}
+
+.tabs-header .nav-tabs .nav-link.active {
+    transform: translateY(0) !important;
+}
+
+
+/* Landing tab transitions */
+
+.landing-tab {
+    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast) !important;
+    transform-origin: center;
+    will-change: transform;
+}
+
+.landing-tab:hover {
+    font-size: calc(1em * var(--hover-font-scale-medium));
+    letter-spacing: var(--letter-spacing-em-medium);
+}
+
+
+/* ==== NAVIGATION ITEM TRANSITIONS ==== */
+
+
+/* Main navigation links - Modern font-size transition */
+
+.nav-link {
+    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast) !important;
+    transform-origin: left center;
+    will-change: transform;
+}
+
+.nav-link:hover {
+    font-size: calc(1em * var(--hover-font-scale-small));
+    letter-spacing: var(--letter-spacing-em-small);
+    box-shadow: var(--shadow-medium);
+}
+
+
+/* Sidebar navigation items - Modern font-size transition (Lando Norris style) */
+
+.sidebar-section {
+    transition: all var(--transition-ease), transform var(--transition-fast) !important;
+    transform-origin: left center;
+    will-change: transform;
+}
+
+.sidebar-section:hover {
+    transform: translateX(var(--hover-slide-medium)) !important;
+    box-shadow: var(--shadow-card);
+}
+
+.sidebar-section-text {
+    transition: font-size var(--transition-ease), letter-spacing var(--transition-ease), color var(--transition-fast) !important;
+    display: inline-block;
+}
+
+.sidebar-section:hover .sidebar-section-text {
+    font-size: calc(1em * var(--hover-font-scale-small));
+    letter-spacing: var(--letter-spacing-em-small);
+}
+
+
+/* Sidebar dropdown items - Modern font-size transition */
+
+.sidebar-dropdown-container .collapse a {
+    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast) !important;
+    transform-origin: left center;
+    will-change: transform;
+    display: inline-block;
+}
+
+.sidebar-dropdown-container .collapse a:hover {
+    transform: translateX(var(--hover-slide-large)) !important;
+    font-size: calc(1em * var(--hover-font-scale-small));
+    letter-spacing: var(--letter-spacing-em-small);
+}
+
+
+/* ==== BUTTON TRANSITIONS ==== */
+
+
+/* Landing learn button */
+
+.landing-learn-button {
+    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transform-origin: center;
+    will-change: transform;
+}
+
+.landing-learn-button:hover {
+    transform: scale(var(--hover-scale)) translateY(var(--hover-lift-large)) !important;
+    letter-spacing: var(--letter-spacing-xlarge);
+    box-shadow: var(--shadow-button-large) !important;
+}
+
+.landing-learn-button:active {
+    transform: scale(var(--hover-scale-press)) translateY(0) !important;
+}
+
+
+/* About graph button */
+
+.about-graph-button {
+    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transform-origin: center;
+    will-change: transform;
+}
+
+.about-graph-button:hover {
+    transform: scale(var(--hover-scale)) !important;
+    letter-spacing: var(--letter-spacing-base);
+    box-shadow: var(--shadow-button) !important;
+}
+
+
+/* Page navigation buttons */
+
+.page-nav-btn {
+    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transform-origin: center;
+    will-change: transform;
+}
+
+.page-nav-btn:hover {
+    transform: scale(var(--hover-scale-small)) translateY(var(--hover-lift)) !important;
+    letter-spacing: var(--letter-spacing-medium);
+    box-shadow: var(--shadow-hover-lift) !important;
+}
+
+.page-nav-btn:active {
+    transform: scale(var(--hover-scale-press)) translateY(0) !important;
+}
+
+
+/* ==== TITLE TRANSITIONS ==== */
+
+
+/* Welcome title */
+
+.landing-welcome-title {
+    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth) !important;
+    transform-origin: center;
+    cursor: default;
+}
+
+.landing-welcome-title:hover {
+    letter-spacing: var(--letter-spacing-xlarge);
+    transform: scale(var(--hover-scale-tiny));
+}
+
+
+/* Main title */
+
+.main-title h1 {
+    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth) !important;
+    transform-origin: left center;
+    cursor: default;
+}
+
+.main-title h1:hover {
+    letter-spacing: var(--letter-spacing-xlarge);
+    transform: scale(var(--hover-scale-tiny));
+}
+
+
+/* Section titles */
+
+.section-title h3 {
+    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth), color var(--transition-fast) !important;
+    transform-origin: left center;
+    cursor: default;
+}
+
+.section-title h3:hover {
+    letter-spacing: var(--letter-spacing-large);
+    transform: scale(var(--hover-scale-medium));
+}
+
+
+/* Card titles */
+
+.card h3.card-title {
+    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth), color var(--transition-fast) !important;
+    transform-origin: left center;
+    cursor: default;
+}
+
+.card h3.card-title:hover {
+    letter-spacing: var(--letter-spacing-large);
+    transform: scale(var(--hover-scale-tiny));
+}
+
+
+/* ==== CARD TRANSITIONS ==== */
+
+
+/* Info cards */
+
+.info_card {
+    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transform-origin: center;
+    will-change: transform;
+}
+
+.info_card:hover {
+    transform: scale(var(--hover-scale-small)) translateY(var(--hover-lift-large)) !important;
+    box-shadow: var(--shadow-xxlarge) !important;
+}
+
+
+/* Page items */
+
+.page-item {
+    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transform-origin: center;
+    will-change: transform;
+}
+
+.page-item:hover {
+    transform: scale(var(--hover-scale-small)) translateY(var(--hover-lift-large)) !important;
+    box-shadow: var(--shadow-page-item) !important;
+}
+
+
+/* Instruction cards */
+
+.instruction_card {
+    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transform-origin: center;
+    will-change: transform;
+}
+
+.instruction_card:hover {
+    transform: scale(var(--hover-scale-tiny)) !important;
+    box-shadow: var(--shadow-card) !important;
+}
+
+
+/* ==== DROPDOWN AND OPTION TRANSITIONS ==== */
+
+
+/* Multiselect items */
+
+.mantine-MultiSelect-item {
+    transition: all var(--transition-fast), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transform-origin: left center;
+    will-change: transform;
+}
+
+.mantine-MultiSelect-item[data-hovered] {
+    transform: scale(var(--hover-scale-medium)) translateX(var(--hover-slide-medium)) !important;
+    letter-spacing: var(--letter-spacing-tiny);
+}
+
+
+/* Search bar items */
+
+.search-bar-item {
+    transition: all var(--transition-fast), transform var(--transition-fast) !important;
+    transform-origin: left center;
+    will-change: transform;
+}
+
+.search-bar-item:hover {
+    transform: scale(var(--hover-scale-medium)) translateX(var(--hover-slide-medium)) !important;
+}
+
+
+/* Radio buttons */
+
+.custom-radio-buttons .form-check-label {
+    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transform-origin: left center;
+    will-change: transform;
+}
+
+.custom-radio-buttons .form-check:hover .form-check-label {
+    transform: scale(var(--hover-scale-small)) !important;
+    letter-spacing: var(--letter-spacing-small);
+}
+
+
+/* ==== LOGO TRANSITIONS ==== */
+
+
+/* Note: Logo transitions disabled for 8knot logo per requirements */
+
+
+/* ==== IMAGE TRANSITIONS ==== */
+
+
+/* Feature images */
+
+.feature-image {
+    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transform-origin: center;
+    will-change: transform;
+    cursor: pointer;
+}
+
+.feature-image:hover {
+    transform: scale(var(--hover-scale)) !important;
+    box-shadow: var(--shadow-huge) !important;
+}
+
+
+/* Instruction images */
+
+.instruction_image {
+    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transform-origin: center;
+    will-change: transform;
+    cursor: pointer;
+}
+
+.instruction_image:hover {
+    transform: scale(var(--hover-scale)) !important;
+    box-shadow: var(--shadow-xlarge) !important;
+}
+
+
+/* ==== TABLE TRANSITIONS ==== */
+
+
+/* Table rows */
+
+.dbc .table tbody tr {
+    transition: all var(--transition-fast), transform var(--transition-fast) !important;
+    transform-origin: left center;
+    will-change: transform;
+}
+
+.dbc .table-hover tbody tr:hover {
+    transform: scale(var(--hover-scale-tiny)) !important;
+}
+
+
+/* ==== SEARCH CONTROLS TRANSITIONS ==== */
+
+
+/* Search buttons */
+
+.search-help-button,
+.search-list-button {
+    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transform-origin: center;
+    will-change: transform;
+}
+
+.search-help-button:hover,
+.search-list-button:hover {
+    transform: scale(var(--hover-scale)) !important;
+    letter-spacing: var(--letter-spacing-small);
+}
+
+
+/* ==== SIDEBAR TOGGLE TRANSITIONS ==== */
+
+.sidebar-toggle {
+    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transform-origin: center;
+    will-change: transform;
+}
+
+.sidebar-toggle:hover {
+    transform: scale(1.15) rotate(var(--rotate-full)) !important;
+}
+
+
+/* ==== INPUT TRANSITIONS ==== */
+
+
+/* Dark inputs */
+
+.dark-input {
+    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transform-origin: center;
+    will-change: transform;
+}
+
+.dark-input:focus {
+    transform: scale(var(--hover-scale-medium)) !important;
+}
+
+
+/* ==== RESPONSIVE ADJUSTMENTS ==== */
+
+
+/* Reduce transitions on mobile for better performance */
+
+@media (max-width: 768px) {
+     :root {
+        --hover-scale: 1.03;
+        --hover-scale-small: 1.02;
+        --hover-scale-medium: 1.015;
+        --hover-scale-tiny: 1.01;
+        --hover-scale-large: 1.05;
+        --hover-lift: -1px;
+        --hover-slide-small: 2px;
+        --letter-spacing-small: 0.2px;
+        --letter-spacing-base: 0.3px;
+    }
+    /* Disable some intensive transitions on mobile */
+    .sidebar-section:hover {
+        transform: scale(var(--hover-scale-tiny)) translateX(var(--hover-slide-small)) !important;
+    }
+    .tabs-header .nav-tabs .nav-link:hover {
+        transform: scale(var(--hover-scale-medium)) !important;
+        letter-spacing: var(--letter-spacing-tiny);
+    }
+}
+
+
+/* ==== ACCESSIBILITY ==== */
+
+
+/* Respect reduced motion preference */
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        transition: none !important;
+        animation: none !important;
+        transform: none !important;
+        letter-spacing: initial !important;
+    }
+    /* Keep minimal hover feedback for usability */
+    .nav-link:hover,
+    .sidebar-section:hover,
+    .landing-learn-button:hover,
+    .tabs-header .nav-tabs .nav-link:hover {
+        opacity: 0.9;
+    }
+}
+
+
+/* ==== TOUCH DEVICE ADJUSTMENTS ==== */
+
+
+/* Disable hover effects on touch devices to prevent sticky states */
+
+@media (hover: none) and (pointer: coarse) {
+    /* Reset transforms but keep background/color changes */
+    .nav-link:hover,
+    .sidebar-section:hover,
+    .landing-learn-button:hover,
+    .tabs-header .nav-tabs .nav-link:hover,
+    .page-nav-btn:hover,
+    .about-graph-button:hover,
+    .info_card:hover,
+    .page-item:hover,
+    .feature-image:hover,
+    .instruction_image:hover {
+        transform: none !important;
+        letter-spacing: initial !important;
+    }
+}
+
+
+/* ==== FOCUS STATES ==== */
+
+
+/* Ensure focus states have similar visual feedback to hover */
+
+.nav-link:focus,
+.sidebar-section:focus,
+.landing-learn-button:focus,
+.tabs-header .nav-tabs .nav-link:focus,
+.page-nav-btn:focus,
+.about-graph-button:focus {
+    transform: scale(var(--hover-scale-small)) !important;
+    outline: var(--outline-width) solid var(--baby-blue-500);
+    outline-offset: var(--outline-offset);
+}
+
+
+/* ==== ANIMATION PERFORMANCE ==== */
+
+
+/* Use GPU acceleration for smoother animations */
+
+.nav-link,
+.sidebar-section,
+.landing-learn-button,
+.tabs-header .nav-tabs .nav-link,
+.page-nav-btn,
+.about-graph-button,
+.info_card,
+.page-item,
+.feature-image,
+.instruction_image {
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    perspective: 1000px;
+    -webkit-perspective: 1000px;
+}

From d07455b21f71464a94ab93fb8d35ce89d624f2f2 Mon Sep 17 00:00:00 2001
From: Caio Fonseca <engcaiofonseca@protonmail.com>
Date: Sun, 26 Oct 2025 22:32:23 +0000
Subject: [PATCH 2/7] Fix undefined CSS variable: add --baby-blue-500
 definition

- Add --baby-blue-500: #199AD6 to :root for focus outline color
- Ensures focus states use the intended brand color
- Makes font_transitions.css self-contained with all required variables
---
 8Knot/assets/font_transitions.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/8Knot/assets/font_transitions.css b/8Knot/assets/font_transitions.css
index a633c69c..f0356462 100644
--- a/8Knot/assets/font_transitions.css
+++ b/8Knot/assets/font_transitions.css
@@ -70,6 +70,8 @@
     /* Outline Values */
     --outline-width: 2px;
     --outline-offset: 2px;
+    /* Colors */
+    --baby-blue-500: #199AD6;
 }
 
 

From 115775a77e421774fb4e487537a6ccb87c2de675 Mon Sep 17 00:00:00 2001
From: Caio Fonseca <engcaiofonseca@protonmail.com>
Date: Sun, 26 Oct 2025 22:37:12 +0000
Subject: [PATCH 3/7] Optimize CSS: remove redundant color variable

---
 8Knot/assets/font_transitions.css | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/8Knot/assets/font_transitions.css b/8Knot/assets/font_transitions.css
index f0356462..9dff38f4 100644
--- a/8Knot/assets/font_transitions.css
+++ b/8Knot/assets/font_transitions.css
@@ -70,8 +70,6 @@
     /* Outline Values */
     --outline-width: 2px;
     --outline-offset: 2px;
-    /* Colors */
-    --baby-blue-500: #199AD6;
 }
 
 
@@ -484,15 +482,37 @@
 
 @media (max-width: 768px) {
      :root {
+        /* Scale Values - Reduced for mobile */
         --hover-scale: 1.03;
         --hover-scale-small: 1.02;
         --hover-scale-medium: 1.015;
         --hover-scale-tiny: 1.01;
         --hover-scale-large: 1.05;
+        --hover-scale-press: 0.99;
+        /* Transform Values - Reduced for mobile */
         --hover-lift: -1px;
+        --hover-lift-small: -0.5px;
+        --hover-lift-large: -2px;
         --hover-slide-small: 2px;
+        --hover-slide-medium: 3px;
+        --hover-slide-large: 4px;
+        /* Font Scale Values - Reduced for mobile */
+        --hover-font-scale: 1.08;
+        --hover-font-scale-small: 1.05;
+        --hover-font-scale-medium: 1.03;
+        --hover-font-scale-large: 1.1;
+        /* Letter Spacing Values - Reduced for mobile */
+        --letter-spacing-tiny: 0.1px;
         --letter-spacing-small: 0.2px;
+        --letter-spacing-medium: 0.25px;
         --letter-spacing-base: 0.3px;
+        --letter-spacing-large: 0.4px;
+        --letter-spacing-xlarge: 0.5px;
+        --letter-spacing-xxlarge: 0.8px;
+        --letter-spacing-em-tiny: 0.01em;
+        --letter-spacing-em-small: 0.02em;
+        --letter-spacing-em-medium: 0.03em;
+        --letter-spacing-em-large: 0.05em;
     }
     /* Disable some intensive transitions on mobile */
     .sidebar-section:hover {

From 8752c0120ab5b00a0482fcafcdb17ff9f1aeae76 Mon Sep 17 00:00:00 2001
From: Caio Fonseca <engcaiofonseca@protonmail.com>
Date: Sun, 26 Oct 2025 22:54:26 +0000
Subject: [PATCH 4/7] Updated review and formatting

---
 8Knot/assets/font_transitions.css | 130 +++++++++++++++---------------
 1 file changed, 65 insertions(+), 65 deletions(-)

diff --git a/8Knot/assets/font_transitions.css b/8Knot/assets/font_transitions.css
index 9dff38f4..2935a301 100644
--- a/8Knot/assets/font_transitions.css
+++ b/8Knot/assets/font_transitions.css
@@ -76,30 +76,30 @@
 /* ==== TAB TRANSITIONS ==== */
 
 
-/* Landing page tabs with dynamic font-size (Lando Norris style) */
+/* Landing page tabs with dynamic font-size */
 
 .tabs-header .nav-tabs .nav-link {
-    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast) !important;
+    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
 }
 
 .tabs-header .nav-tabs .nav-link:hover {
-    transform: translateY(var(--hover-lift)) !important;
+    transform: translateY(var(--hover-lift));
     font-size: calc(1em * var(--hover-font-scale-medium));
     letter-spacing: var(--letter-spacing-em-medium);
-    box-shadow: var(--shadow-tab) !important;
+    box-shadow: var(--shadow-tab);
 }
 
 .tabs-header .nav-tabs .nav-link.active {
-    transform: translateY(0) !important;
+    transform: translateY(0);
 }
 
 
 /* Landing tab transitions */
 
 .landing-tab {
-    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast) !important;
+    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
 }
@@ -116,7 +116,7 @@
 /* Main navigation links - Modern font-size transition */
 
 .nav-link {
-    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast) !important;
+    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast);
     transform-origin: left center;
     will-change: transform;
 }
@@ -131,18 +131,18 @@
 /* Sidebar navigation items - Modern font-size transition (Lando Norris style) */
 
 .sidebar-section {
-    transition: all var(--transition-ease), transform var(--transition-fast) !important;
+    transition: all var(--transition-ease), transform var(--transition-fast);
     transform-origin: left center;
     will-change: transform;
 }
 
 .sidebar-section:hover {
-    transform: translateX(var(--hover-slide-medium)) !important;
+    transform: translateX(var(--hover-slide-medium));
     box-shadow: var(--shadow-card);
 }
 
 .sidebar-section-text {
-    transition: font-size var(--transition-ease), letter-spacing var(--transition-ease), color var(--transition-fast) !important;
+    transition: font-size var(--transition-ease), letter-spacing var(--transition-ease), color var(--transition-fast);
     display: inline-block;
 }
 
@@ -155,14 +155,14 @@
 /* Sidebar dropdown items - Modern font-size transition */
 
 .sidebar-dropdown-container .collapse a {
-    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast) !important;
+    transition: all var(--transition-ease), font-size var(--transition-ease), letter-spacing var(--transition-ease), transform var(--transition-fast);
     transform-origin: left center;
     will-change: transform;
     display: inline-block;
 }
 
 .sidebar-dropdown-container .collapse a:hover {
-    transform: translateX(var(--hover-slide-large)) !important;
+    transform: translateX(var(--hover-slide-large));
     font-size: calc(1em * var(--hover-font-scale-small));
     letter-spacing: var(--letter-spacing-em-small);
 }
@@ -174,53 +174,53 @@
 /* Landing learn button */
 
 .landing-learn-button {
-    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth);
     transform-origin: center;
     will-change: transform;
 }
 
 .landing-learn-button:hover {
-    transform: scale(var(--hover-scale)) translateY(var(--hover-lift-large)) !important;
+    transform: scale(var(--hover-scale)) translateY(var(--hover-lift-large));
     letter-spacing: var(--letter-spacing-xlarge);
-    box-shadow: var(--shadow-button-large) !important;
+    box-shadow: var(--shadow-button-large);
 }
 
 .landing-learn-button:active {
-    transform: scale(var(--hover-scale-press)) translateY(0) !important;
+    transform: scale(var(--hover-scale-press)) translateY(0);
 }
 
 
 /* About graph button */
 
 .about-graph-button {
-    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth);
     transform-origin: center;
     will-change: transform;
 }
 
 .about-graph-button:hover {
-    transform: scale(var(--hover-scale)) !important;
+    transform: scale(var(--hover-scale));
     letter-spacing: var(--letter-spacing-base);
-    box-shadow: var(--shadow-button) !important;
+    box-shadow: var(--shadow-button);
 }
 
 
 /* Page navigation buttons */
 
 .page-nav-btn {
-    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth);
     transform-origin: center;
     will-change: transform;
 }
 
 .page-nav-btn:hover {
-    transform: scale(var(--hover-scale-small)) translateY(var(--hover-lift)) !important;
+    transform: scale(var(--hover-scale-small)) translateY(var(--hover-lift));
     letter-spacing: var(--letter-spacing-medium);
-    box-shadow: var(--shadow-hover-lift) !important;
+    box-shadow: var(--shadow-hover-lift);
 }
 
 .page-nav-btn:active {
-    transform: scale(var(--hover-scale-press)) translateY(0) !important;
+    transform: scale(var(--hover-scale-press)) translateY(0);
 }
 
 
@@ -230,7 +230,7 @@
 /* Welcome title */
 
 .landing-welcome-title {
-    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth) !important;
+    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth);
     transform-origin: center;
     cursor: default;
 }
@@ -244,7 +244,7 @@
 /* Main title */
 
 .main-title h1 {
-    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth) !important;
+    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth);
     transform-origin: left center;
     cursor: default;
 }
@@ -258,7 +258,7 @@
 /* Section titles */
 
 .section-title h3 {
-    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth), color var(--transition-fast) !important;
+    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth), color var(--transition-fast);
     transform-origin: left center;
     cursor: default;
 }
@@ -272,7 +272,7 @@
 /* Card titles */
 
 .card h3.card-title {
-    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth), color var(--transition-fast) !important;
+    transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth), color var(--transition-fast);
     transform-origin: left center;
     cursor: default;
 }
@@ -289,42 +289,42 @@
 /* Info cards */
 
 .info_card {
-    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
 }
 
 .info_card:hover {
-    transform: scale(var(--hover-scale-small)) translateY(var(--hover-lift-large)) !important;
-    box-shadow: var(--shadow-xxlarge) !important;
+    transform: scale(var(--hover-scale-small)) translateY(var(--hover-lift-large));
+    box-shadow: var(--shadow-xxlarge);
 }
 
 
 /* Page items */
 
 .page-item {
-    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
 }
 
 .page-item:hover {
-    transform: scale(var(--hover-scale-small)) translateY(var(--hover-lift-large)) !important;
-    box-shadow: var(--shadow-page-item) !important;
+    transform: scale(var(--hover-scale-small)) translateY(var(--hover-lift-large));
+    box-shadow: var(--shadow-page-item);
 }
 
 
 /* Instruction cards */
 
 .instruction_card {
-    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
 }
 
 .instruction_card:hover {
-    transform: scale(var(--hover-scale-tiny)) !important;
-    box-shadow: var(--shadow-card) !important;
+    transform: scale(var(--hover-scale-tiny));
+    box-shadow: var(--shadow-card);
 }
 
 
@@ -334,13 +334,13 @@
 /* Multiselect items */
 
 .mantine-MultiSelect-item {
-    transition: all var(--transition-fast), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transition: all var(--transition-fast), transform var(--transition-fast), letter-spacing var(--transition-smooth);
     transform-origin: left center;
     will-change: transform;
 }
 
 .mantine-MultiSelect-item[data-hovered] {
-    transform: scale(var(--hover-scale-medium)) translateX(var(--hover-slide-medium)) !important;
+    transform: scale(var(--hover-scale-medium)) translateX(var(--hover-slide-medium));
     letter-spacing: var(--letter-spacing-tiny);
 }
 
@@ -348,26 +348,26 @@
 /* Search bar items */
 
 .search-bar-item {
-    transition: all var(--transition-fast), transform var(--transition-fast) !important;
+    transition: all var(--transition-fast), transform var(--transition-fast);
     transform-origin: left center;
     will-change: transform;
 }
 
 .search-bar-item:hover {
-    transform: scale(var(--hover-scale-medium)) translateX(var(--hover-slide-medium)) !important;
+    transform: scale(var(--hover-scale-medium)) translateX(var(--hover-slide-medium));
 }
 
 
 /* Radio buttons */
 
 .custom-radio-buttons .form-check-label {
-    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth);
     transform-origin: left center;
     will-change: transform;
 }
 
 .custom-radio-buttons .form-check:hover .form-check-label {
-    transform: scale(var(--hover-scale-small)) !important;
+    transform: scale(var(--hover-scale-small));
     letter-spacing: var(--letter-spacing-small);
 }
 
@@ -384,30 +384,30 @@
 /* Feature images */
 
 .feature-image {
-    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
     cursor: pointer;
 }
 
 .feature-image:hover {
-    transform: scale(var(--hover-scale)) !important;
-    box-shadow: var(--shadow-huge) !important;
+    transform: scale(var(--hover-scale));
+    box-shadow: var(--shadow-huge);
 }
 
 
 /* Instruction images */
 
 .instruction_image {
-    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
     cursor: pointer;
 }
 
 .instruction_image:hover {
-    transform: scale(var(--hover-scale)) !important;
-    box-shadow: var(--shadow-xlarge) !important;
+    transform: scale(var(--hover-scale));
+    box-shadow: var(--shadow-xlarge);
 }
 
 
@@ -417,13 +417,13 @@
 /* Table rows */
 
 .dbc .table tbody tr {
-    transition: all var(--transition-fast), transform var(--transition-fast) !important;
+    transition: all var(--transition-fast), transform var(--transition-fast);
     transform-origin: left center;
     will-change: transform;
 }
 
 .dbc .table-hover tbody tr:hover {
-    transform: scale(var(--hover-scale-tiny)) !important;
+    transform: scale(var(--hover-scale-tiny));
 }
 
 
@@ -434,14 +434,14 @@
 
 .search-help-button,
 .search-list-button {
-    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast), letter-spacing var(--transition-smooth);
     transform-origin: center;
     will-change: transform;
 }
 
 .search-help-button:hover,
 .search-list-button:hover {
-    transform: scale(var(--hover-scale)) !important;
+    transform: scale(var(--hover-scale));
     letter-spacing: var(--letter-spacing-small);
 }
 
@@ -449,13 +449,13 @@
 /* ==== SIDEBAR TOGGLE TRANSITIONS ==== */
 
 .sidebar-toggle {
-    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
 }
 
 .sidebar-toggle:hover {
-    transform: scale(1.15) rotate(var(--rotate-full)) !important;
+    transform: scale(1.15) rotate(var(--rotate-full));
 }
 
 
@@ -465,13 +465,13 @@
 /* Dark inputs */
 
 .dark-input {
-    transition: all var(--transition-smooth), transform var(--transition-fast) !important;
+    transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
 }
 
 .dark-input:focus {
-    transform: scale(var(--hover-scale-medium)) !important;
+    transform: scale(var(--hover-scale-medium));
 }
 
 
@@ -516,10 +516,10 @@
     }
     /* Disable some intensive transitions on mobile */
     .sidebar-section:hover {
-        transform: scale(var(--hover-scale-tiny)) translateX(var(--hover-slide-small)) !important;
+        transform: scale(var(--hover-scale-tiny)) translateX(var(--hover-slide-small));
     }
     .tabs-header .nav-tabs .nav-link:hover {
-        transform: scale(var(--hover-scale-medium)) !important;
+        transform: scale(var(--hover-scale-medium));
         letter-spacing: var(--letter-spacing-tiny);
     }
 }
@@ -534,10 +534,10 @@
     *,
     *::before,
     *::after {
-        transition: none !important;
-        animation: none !important;
-        transform: none !important;
-        letter-spacing: initial !important;
+        transition: none;
+        animation: none;
+        transform: none;
+        letter-spacing: initial;
     }
     /* Keep minimal hover feedback for usability */
     .nav-link:hover,
@@ -566,8 +566,8 @@
     .page-item:hover,
     .feature-image:hover,
     .instruction_image:hover {
-        transform: none !important;
-        letter-spacing: initial !important;
+        transform: none;
+        letter-spacing: initial;
     }
 }
 
@@ -583,7 +583,7 @@
 .tabs-header .nav-tabs .nav-link:focus,
 .page-nav-btn:focus,
 .about-graph-button:focus {
-    transform: scale(var(--hover-scale-small)) !important;
+    transform: scale(var(--hover-scale-small));
     outline: var(--outline-width) solid var(--baby-blue-500);
     outline-offset: var(--outline-offset);
 }

From 78c5090586e1217177d96ef90443e96fc638a6f4 Mon Sep 17 00:00:00 2001
From: Caio Fonseca <engcaiofonseca@protonmail.com>
Date: Mon, 27 Oct 2025 11:15:52 +0000
Subject: [PATCH 5/7] removing logo transitions mentions

---
 8Knot/assets/font_transitions.css | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/8Knot/assets/font_transitions.css b/8Knot/assets/font_transitions.css
index 2935a301..17102f94 100644
--- a/8Knot/assets/font_transitions.css
+++ b/8Knot/assets/font_transitions.css
@@ -372,12 +372,6 @@
 }
 
 
-/* ==== LOGO TRANSITIONS ==== */
-
-
-/* Note: Logo transitions disabled for 8knot logo per requirements */
-
-
 /* ==== IMAGE TRANSITIONS ==== */
 
 

From fb7e5cd4bf1b6a96bd93d873073bb589823dc391 Mon Sep 17 00:00:00 2001
From: Caio Fonseca <engcaiofonseca@protonmail.com>
Date: Mon, 3 Nov 2025 14:58:03 +0000
Subject: [PATCH 6/7] Scaling down font transitions and removing transitions
 for the graphs inside tabs

---
 8Knot/assets/font_transitions.css | 62 +++++++++++++++----------------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/8Knot/assets/font_transitions.css b/8Knot/assets/font_transitions.css
index 17102f94..f153e6eb 100644
--- a/8Knot/assets/font_transitions.css
+++ b/8Knot/assets/font_transitions.css
@@ -35,10 +35,10 @@
     --hover-slide-medium: 4px;
     --hover-slide-large: 6px;
     /* Font Size Multipliers (Modern Dynamic Transition) */
-    --hover-font-scale: 1.15;
-    --hover-font-scale-small: 1.08;
-    --hover-font-scale-medium: 1.05;
-    --hover-font-scale-large: 1.2;
+    --hover-font-scale: 1.1;
+    --hover-font-scale-small: 1.05;
+    --hover-font-scale-medium: 1.03;
+    --hover-font-scale-large: 1.12;
     /* Letter Spacing Values */
     --letter-spacing-tiny: 0.2px;
     --letter-spacing-small: 0.3px;
@@ -271,7 +271,8 @@
 
 /* Card titles */
 
-.card h3.card-title {
+
+/* .card h3.card-title {
     transition: letter-spacing var(--transition-smooth), transform var(--transition-smooth), color var(--transition-fast);
     transform-origin: left center;
     cursor: default;
@@ -280,15 +281,16 @@
 .card h3.card-title:hover {
     letter-spacing: var(--letter-spacing-large);
     transform: scale(var(--hover-scale-tiny));
-}
+} */
 
 
 /* ==== CARD TRANSITIONS ==== */
 
 
-/* Info cards */
+/* Info cards - hover effects disabled for graphs */
+
 
-.info_card {
+/* .info_card {
     transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
@@ -300,9 +302,10 @@
 }
 
 
-/* Page items */
+/* Page items - hover effects disabled for graphs */
 
-.page-item {
+
+/* .page-item {
     transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
@@ -311,12 +314,13 @@
 .page-item:hover {
     transform: scale(var(--hover-scale-small)) translateY(var(--hover-lift-large));
     box-shadow: var(--shadow-page-item);
-}
+} */
+
 
+/* Instruction cards - hover effects disabled for graphs */
 
-/* Instruction cards */
 
-.instruction_card {
+/* .instruction_card {
     transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
@@ -325,7 +329,7 @@
 .instruction_card:hover {
     transform: scale(var(--hover-scale-tiny));
     box-shadow: var(--shadow-card);
-}
+} */
 
 
 /* ==== DROPDOWN AND OPTION TRANSITIONS ==== */
@@ -377,7 +381,8 @@
 
 /* Feature images */
 
-.feature-image {
+
+/* .feature-image {
     transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
@@ -390,9 +395,10 @@
 }
 
 
-/* Instruction images */
+/* Instruction images - hover effects disabled for graphs */
+
 
-.instruction_image {
+/* .instruction_image {
     transition: all var(--transition-smooth), transform var(--transition-fast);
     transform-origin: center;
     will-change: transform;
@@ -402,7 +408,7 @@
 .instruction_image:hover {
     transform: scale(var(--hover-scale));
     box-shadow: var(--shadow-xlarge);
-}
+} */
 
 
 /* ==== TABLE TRANSITIONS ==== */
@@ -491,10 +497,10 @@
         --hover-slide-medium: 3px;
         --hover-slide-large: 4px;
         /* Font Scale Values - Reduced for mobile */
-        --hover-font-scale: 1.08;
-        --hover-font-scale-small: 1.05;
-        --hover-font-scale-medium: 1.03;
-        --hover-font-scale-large: 1.1;
+        --hover-font-scale: 1.05;
+        --hover-font-scale-small: 1.03;
+        --hover-font-scale-medium: 1.02;
+        --hover-font-scale-large: 1.08;
         /* Letter Spacing Values - Reduced for mobile */
         --letter-spacing-tiny: 0.1px;
         --letter-spacing-small: 0.2px;
@@ -555,11 +561,7 @@
     .landing-learn-button:hover,
     .tabs-header .nav-tabs .nav-link:hover,
     .page-nav-btn:hover,
-    .about-graph-button:hover,
-    .info_card:hover,
-    .page-item:hover,
-    .feature-image:hover,
-    .instruction_image:hover {
+    .about-graph-button:hover {
         transform: none;
         letter-spacing: initial;
     }
@@ -593,11 +595,7 @@
 .landing-learn-button,
 .tabs-header .nav-tabs .nav-link,
 .page-nav-btn,
-.about-graph-button,
-.info_card,
-.page-item,
-.feature-image,
-.instruction_image {
+.about-graph-button {
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     perspective: 1000px;

From 6893c326ae936f3072de6fc47baa7e290fc17f3f Mon Sep 17 00:00:00 2001
From: Caio Fonseca <engcaiofonseca@protonmail.com>
Date: Tue, 4 Nov 2025 23:48:50 +0000
Subject: [PATCH 7/7] changing tabs hover color to baby blue

---
 8Knot/assets/landing_page.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/8Knot/assets/landing_page.css b/8Knot/assets/landing_page.css
index fcee6ed2..b2396e29 100644
--- a/8Knot/assets/landing_page.css
+++ b/8Knot/assets/landing_page.css
@@ -241,9 +241,12 @@
     white-space: nowrap !important;
 }
 
+
+/* font_transition: Updated hover color to baby-blue-300 for better UX */
+
 .tabs-header .nav-tabs .nav-link:hover {
-    background: var(--multiselect-hover-bg) !important;
-    color: var(--text-primary) !important;
+    background: var(--baby-blue-300) !important;
+    color: var(--color-white) !important;
     border-color: var(--baby-blue-500) !important;
 }