api done

frontend/src/components/navbar/HomeNav.module.css

@@ -22,7 +22,7 @@ nav{
     background: linear-gradient(117deg, rgba(34,34,34,1) 0%, rgba(59,54,54,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#222222",endColorstr="#3b3636",GradientType=1);*/
 
-    color: #fff;
+    color: var(--c-text);
     text-align: center;
 
     margin: auto;
@@ -52,7 +52,7 @@ nav a{
     text-decoration: none;
 }
 nav a:hover{
-    color: #fff;
+    color: var(--c-text);
 }
 /* Unify link/summary layout to prevent distortion */
 nav a,
@@ -75,7 +75,7 @@ nav a::before {
     height: 2px;
     bottom: 0;
     left: 0;
-    background-color: #fff;
+    background-color: var(--c-other);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }
@@ -83,7 +83,7 @@ nav a:hover::before {
     transform: scaleX(1);
 }
 nav summary:hover {
-    color: #fff;
+    color: var(--c-text);
 }
 
 /* underline effect shared for links and summary */
@@ -96,7 +96,7 @@ nav summary::before {
     height: 2px;
     bottom: 0;
     left: 0;
-    background-color: #fff;
+    background-color: var(--c-other);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

frontend/src/components/navbar/HomeNav.tsx

@@ -9,12 +9,14 @@ export default function HomeNav() {
 
   return (
     <nav className={styles.nav}>
-      <FaBars
-        className={`${styles.toggle} ${navOpen ? styles.toggleRotated : ""}`}
+      <div
+        className={`inline-flex items-center justify-center w-12 h-12 rounded-xl bg-brandGradient text-white shadow-glow cursor-pointer ${styles.toggle} ${navOpen ? styles.toggleRotated : ""}`}
         onClick={toggleNav}
         aria-label="Toggle navigation"
         aria-expanded={navOpen}
-      />
+      >
+        <FaBars />
+      </div>
 
       <ul className={`${styles.navList} ${navOpen ? styles.open : ""}`}>
         <li id="nav-logo" className={styles.logo}>
@@ -30,7 +32,9 @@ export default function HomeNav() {
           <details>
             <summary>
               Services
-              <FaChevronDown className={`${styles.caret} ml-2 inline-block`} aria-hidden="true" />
+              <span className="inline-flex items-center justify-center w-6 h-6 rounded-md bg-brandGradient text-white ml-2 shadow-glow">
+                <FaChevronDown className={styles.caret} aria-hidden="true" />
+              </span>
             </summary>
             <ul className={styles.submenu}>
               <li><a href="#web">Web development</a></li>

frontend/src/components/navbar/SiteNav.tsx

@@ -16,19 +16,19 @@ export default function SiteNav() {
   }, []);
 
   return (
-    <header className={`sticky top-0 z-50 transition-all ${scrolled ? 'bg-slate-800/95 backdrop-blur-md shadow-lg' : 'bg-transparent'}`}>
-      <nav className="relative container mx-auto px-4 flex items-center justify-between h-16 text-[var(--c-text)] font-medium">
+    <header className={`sticky top-0 z-50 transition-all ${scrolled ? 'bg-brand-bg/95 backdrop-blur-md shadow-lg' : 'bg-transparent'}`}>
+      <nav className="relative container mx-auto px-4 flex items-center justify-between h-16 text-brand-text font-medium">
         <div className="text-xl tracking-wide font-semibold">
           <NavLink to="/" className="inline-block px-2 py-1 rounded nav-item text-rainbow font-bold">vontor.cz</NavLink>
         </div>
         <button
           aria-label="Toggle navigation"
           onClick={() => setOpen(o => !o)}
-          className="md:hidden p-2 rounded glow focus:outline-none"
+          className="md:hidden p-2 rounded-xl glow focus:outline-none bg-brandGradient text-white shadow-glow"
         >
           {open ? <FaTimes /> : <FaBars />}
         </button>
-  <ul className={`md:flex md:items-center md:gap-8 md:static absolute left-0 w-full md:w-auto transition-all duration-300 ${open ? 'top-16 bg-slate-800/95 pb-6 rounded-lg backdrop-blur-md' : 'top-[-500px]'}`}>
+  <ul className={`md:flex md:items-center md:gap-8 md:static absolute left-0 w-full md:w-auto transition-all duration-300 ${open ? 'top-16 bg-brand-bg/95 pb-6 rounded-lg backdrop-blur-md' : 'top-[-500px]'}`}>
           <li className="flex"><NavLink to="/" onClick={()=>setOpen(false)} className={linkCls}>Home</NavLink></li>
           <li className="flex"><NavLink to="/portfolio" onClick={()=>setOpen(false)} className={linkCls}>Portfolio</NavLink></li>
           <li className="flex"><NavLink to="/skills" onClick={()=>setOpen(false)} className={linkCls}>Skills</NavLink></li>
@@ -42,7 +42,7 @@ export default function SiteNav() {
               className={`nav-item px-3 py-2 flex items-center gap-1`}
               aria-haspopup="true" aria-expanded={servicesOpen}
             >
-              More <FaChevronDown className={`transition-transform ${servicesOpen ? 'rotate-180' : ''}`} />
+              <span className="inline-flex items-center gap-1">More <span className="inline-flex items-center justify-center w-6 h-6 rounded-md bg-brandGradient text-white"><FaChevronDown className={`transition-transform ${servicesOpen ? 'rotate-180' : ''}`} /></span></span>
             </button>
             {/* Mobile inline dropdown */}
             <div className={`md:hidden w-full mt-2 ${servicesOpen ? 'block' : 'hidden'}`}>
@@ -69,5 +69,5 @@ export default function SiteNav() {
   );
 }
 
-const linkCls = ({ isActive }: { isActive: boolean }) => `nav-item px-3 py-2 rounded transition-colors ${isActive ? 'active text-[var(--c-other)] font-semibold' : 'hover:text-[var(--c-other)]'}`;
+const linkCls = ({ isActive }: { isActive: boolean }) => `nav-item px-3 py-2 rounded transition-colors ${isActive ? 'active text-brand-accent font-semibold' : 'hover:text-brand-accent'}`;
 const dropdownCls = "block px-2 py-1 rounded hover:bg-[color-mix(in_hsl,var(--c-other),transparent_85%)]";