diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index 150e9efdd..bbf168e92 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -115,7 +115,11 @@ $color-alert:       #a94442 !default;
 $pdf-primary:       #0300ff !default;
 $pdf-secondary:     #ff9e00 !default;
 
-$outline-focus:     3px solid #ffbf47 !default;
+$focus-middle:       #ffbf47 !default;
+$focus-outer:        $brand !default;
+$focus-inner-width:  1px !default;
+$focus-middle-width: 3px !default;
+$focus-outer-width:  2px !default;
 
 $input-height:      $line-height * 2 !default;
 
diff --git a/app/assets/stylesheets/admin/budgets_wizard/headings/group_switcher.scss b/app/assets/stylesheets/admin/budgets_wizard/headings/group_switcher.scss
index e0c4109f3..c873c0e69 100644
--- a/app/assets/stylesheets/admin/budgets_wizard/headings/group_switcher.scss
+++ b/app/assets/stylesheets/admin/budgets_wizard/headings/group_switcher.scss
@@ -42,8 +42,8 @@
       &:focus,
       &:hover {
         @include brand-background;
+        @include no-outline;
         text-decoration: none;
-        outline: none;
       }
     }
   }
diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss
index 02c133a2e..74f816408 100644
--- a/app/assets/stylesheets/admin/menu.scss
+++ b/app/assets/stylesheets/admin/menu.scss
@@ -112,9 +112,6 @@
   }
 
   li {
-    margin: 0;
-    outline: 0;
-
     ul {
       margin-left: $line-height / 1.5;
       border-left: 1px solid $sidebar-hover;
diff --git a/app/assets/stylesheets/budgets/ballot/investment.scss b/app/assets/stylesheets/budgets/ballot/investment.scss
index 1685f7eb5..5dc193fd0 100644
--- a/app/assets/stylesheets/budgets/ballot/investment.scss
+++ b/app/assets/stylesheets/budgets/ballot/investment.scss
@@ -40,8 +40,6 @@
 
     span {
       color: inherit;
-      outline: 0;
-      text-decoration: none;
     }
   }
 }
diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss
index 6372debb0..dafc3317c 100644
--- a/app/assets/stylesheets/budgets/groups_and_headings.scss
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -9,13 +9,13 @@
 
   .heading {
     @include brand-color;
+    @include card;
     border: 2px solid $border;
     border-radius: rem-calc(6);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
     margin-bottom: $line-height / 2;
     margin-top: $line-height / 4;
     padding: $line-height / 2;
-    position: relative;
     width: 100%;
 
     @include breakpoint(medium) {
@@ -26,31 +26,9 @@
       width: calc(100% / 6 - #{$spacing});
     }
 
-    &:focus-within {
-      outline: $outline-focus;
-
-      a:focus {
-        outline: none;
-      }
-    }
-
     a {
       font-weight: bold;
 
-      &::after,
-      &::before {
-        bottom: 0;
-        content: "";
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-
       &:hover::before {
         background: $light;
         z-index: -1;
diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss
index a3f95ef04..7c67897a6 100644
--- a/app/assets/stylesheets/budgets/phases.scss
+++ b/app/assets/stylesheets/budgets/phases.scss
@@ -82,7 +82,7 @@
       }
 
       &:focus {
-        outline: none;
+        @include no-outline;
       }
 
       &[aria-selected="true"],
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index fcda6b480..ea7bba8bc 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -102,20 +102,20 @@ button,
 [type="button"],
 [type="submit"] {
   &:focus {
-    outline: $outline-focus;
+    @include focus-outline;
   }
 
   &:focus-visible {
-    outline: $outline-focus;
+    @include focus-outline;
   }
 
   &:focus:not(:focus-visible) {
-    outline: none;
+    @include no-outline;
   }
 
   &:active,
   &:focus:active {
-    outline: $outline-focus;
+    @include focus-outline;
   }
 }
 
@@ -1135,6 +1135,7 @@ form {
 
   .notification-link {
     @include text-colored-link;
+    display: inline-block;
   }
 
   &:hover {
@@ -1986,13 +1987,15 @@ table {
   }
 
   .recommendation {
+    @include card;
     background: $body-background;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     display: block;
     margin-bottom: $line-height / 4;
     padding: $line-height / 2;
+    z-index: 1;
 
-    &:hover {
+    &:hover:not(:focus-within) {
       box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
     }
   }
@@ -2003,6 +2006,7 @@ table {
   position: absolute;
   right: 12px;
   top: -18px;
+  z-index: 2;
 }
 
 // 20. Documents
@@ -2216,7 +2220,7 @@ table {
       }
     }
 
-    a:hover {
+    a:hover:not(:focus) {
       box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
       text-decoration: none;
 
diff --git a/app/assets/stylesheets/layout/locale_switcher.scss b/app/assets/stylesheets/layout/locale_switcher.scss
index 5b2bc8076..c403d15cc 100644
--- a/app/assets/stylesheets/layout/locale_switcher.scss
+++ b/app/assets/stylesheets/layout/locale_switcher.scss
@@ -36,11 +36,13 @@
       outline: none;
       padding-left: $line-height / 4;
       padding-right: calc(#{$line-height / 4} + 1em);
+      transition: none;
       width: auto;
 
       &:focus {
+        @include focus-outline;
         border: 0;
-        outline: $outline-focus;
+        transition: none;
       }
 
       option {
diff --git a/app/assets/stylesheets/legislation.scss b/app/assets/stylesheets/legislation.scss
index 699fe3417..6a9c728cf 100644
--- a/app/assets/stylesheets/legislation.scss
+++ b/app/assets/stylesheets/legislation.scss
@@ -57,6 +57,7 @@
 
   h3 a {
     color: inherit;
+    display: inline-block;
     margin-bottom: 1rem;
   }
 }
diff --git a/app/assets/stylesheets/mixins/links.scss b/app/assets/stylesheets/mixins/links.scss
new file mode 100644
index 000000000..5a841c062
--- /dev/null
+++ b/app/assets/stylesheets/mixins/links.scss
@@ -0,0 +1,80 @@
+@mixin focus-outline {
+  $total-width: $focus-inner-width + $focus-middle-width + $focus-outer-width;
+
+  box-shadow: 0 0 0 $total-width $focus-outer;
+  outline: $focus-middle-width solid $focus-middle;
+  outline-offset: $focus-inner-width;
+}
+
+@mixin no-outline {
+  box-shadow: none;
+  outline: none;
+}
+
+@mixin focus-outline-on-img {
+  &:focus {
+    @include no-outline;
+
+    img {
+      @include focus-outline;
+    }
+  }
+
+  &:focus-visible {
+    @include no-outline;
+
+    img {
+      @include focus-outline;
+    }
+  }
+
+  &:focus:not(:focus-visible) {
+    img {
+      @include no-outline;
+    }
+  }
+
+  &:active {
+    @include no-outline;
+
+    img {
+      @include focus-outline;
+    }
+  }
+
+  &:focus:active {
+    @include no-outline;
+
+    img {
+      @include focus-outline;
+    }
+  }
+}
+
+@mixin card {
+  position: relative;
+
+  &:focus-within {
+    @include focus-outline;
+
+    a:focus {
+      @include no-outline;
+    }
+  }
+
+  a {
+    &::after,
+    &::before {
+      bottom: 0;
+      content: "";
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/mixins/sdg.scss b/app/assets/stylesheets/mixins/sdg.scss
index ecb5de882..76442f551 100644
--- a/app/assets/stylesheets/mixins/sdg.scss
+++ b/app/assets/stylesheets/mixins/sdg.scss
@@ -24,6 +24,10 @@
   a:hover .sdg-goal-icon {
     filter: brightness(90%);
   }
+
+  a {
+    @include focus-outline-on-img;
+  }
 }
 
 %sdg-goal-list {
@@ -47,12 +51,8 @@
       width: 100%;
     }
 
-    a:focus {
-      outline: none;
-
-      img {
-        outline: $outline-focus;
-      }
+    a {
+      @include focus-outline-on-img;
     }
   }
 }
diff --git a/app/assets/stylesheets/mixins/uploads.scss b/app/assets/stylesheets/mixins/uploads.scss
index 692ec9b05..04db8ad91 100644
--- a/app/assets/stylesheets/mixins/uploads.scss
+++ b/app/assets/stylesheets/mixins/uploads.scss
@@ -22,7 +22,7 @@
       }
 
       &:focus-within label {
-        outline: $outline-focus;
+        @include focus-outline;
       }
     }
 
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 75a8e93fa..21a68e186 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -464,6 +464,7 @@
 
     a {
       color: inherit;
+      display: inline-block;
     }
   }
 
@@ -1284,6 +1285,7 @@
 }
 
 .budget-execution {
+  @include card;
   border: 1px solid $border;
   overflow: hidden;
   position: relative;
@@ -1332,7 +1334,7 @@
     font-size: rem-calc(24);
   }
 
-  &:hover {
+  &:hover:not(:focus-within) {
     box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
   }
 }
@@ -1595,6 +1597,7 @@
 
     a {
       color: inherit;
+      display: inline-block;
     }
   }
 }
diff --git a/app/assets/stylesheets/proposals/geozones.scss b/app/assets/stylesheets/proposals/geozones.scss
new file mode 100644
index 000000000..c259d7614
--- /dev/null
+++ b/app/assets/stylesheets/proposals/geozones.scss
@@ -0,0 +1,5 @@
+.proposals-geozones {
+  a {
+    @include focus-outline-on-img;
+  }
+}
diff --git a/app/assets/stylesheets/sdg/help.scss b/app/assets/stylesheets/sdg/help.scss
index 0d9b94df1..32608ac62 100644
--- a/app/assets/stylesheets/sdg/help.scss
+++ b/app/assets/stylesheets/sdg/help.scss
@@ -7,7 +7,7 @@
     li {
 
       &:focus {
-        outline: $outline-focus;
+        @include focus-outline;
       }
     }
   }
diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss
index 08f3a2438..5a959e576 100644
--- a/app/assets/stylesheets/sdg/related_list_selector.scss
+++ b/app/assets/stylesheets/sdg/related_list_selector.scss
@@ -34,7 +34,7 @@
       @include element-invisible;
 
       &:focus + label {
-        outline: $outline-focus;
+        @include focus-outline;
       }
 
       &:checked + label img {
diff --git a/app/components/proposals/geozones_component.html.erb b/app/components/proposals/geozones_component.html.erb
index efcbb7e93..8acfa91b6 100644
--- a/app/components/proposals/geozones_component.html.erb
+++ b/app/components/proposals/geozones_component.html.erb
@@ -1,6 +1,9 @@
 <div class="sidebar-divider"></div>
-<h2 class="sidebar-title"><%= t("shared.tags_cloud.districts") %></h2>
-<br>
-<%= link_to map_proposals_path, id: "map", title: t("shared.tags_cloud.districts_list") do %>
-  <%= image_tag(image_path_for("map.jpg"), alt: t("shared.tags_cloud.districts_list")) %>
-<% end %>
+
+<div class="proposals-geozones">
+  <h2 class="sidebar-title"><%= t("shared.tags_cloud.districts") %></h2>
+  <br>
+  <%= link_to map_proposals_path, id: "map", title: t("shared.tags_cloud.districts_list") do %>
+    <%= image_tag(image_path_for("map.jpg"), alt: t("shared.tags_cloud.districts_list")) %>
+  <% end %>
+</div>
diff --git a/app/views/budgets/executions/_investments.html.erb b/app/views/budgets/executions/_investments.html.erb
index 4a8d20834..e0f3abfdd 100644
--- a/app/views/budgets/executions/_investments.html.erb
+++ b/app/views/budgets/executions/_investments.html.erb
@@ -5,19 +5,20 @@
     <div class="row" data-equalizer-on="medium" data-equalizer>
       <% investments.each do |investment| %>
         <div class="small-12 medium-6 large-4 column end margin-bottom">
-          <div class="budget-execution">
-            <%= link_to budget_investment_path(@budget, investment, anchor: "tab-milestones"), data: { "equalizer-watch": true } do %>
-              <%= render Budgets::Executions::ImageComponent.new(investment) %>
-              <div class="budget-execution-info">
-                <div class="budget-execution-content">
-                  <h5><%= investment.title %></h5>
-                  <span class="author"><%= investment.author.name %></span>
-                </div>
-                <p class="price margin-top text-center">
-                  <strong><%= investment.formatted_price %></strong>
-                </p>
+          <div class="budget-execution" data-equalizer-watch>
+            <%= render Budgets::Executions::ImageComponent.new(investment) %>
+            <div class="budget-execution-info">
+              <div class="budget-execution-content">
+                <h5>
+                  <%= link_to investment.title,
+                              budget_investment_path(@budget, investment, anchor: "tab-milestones") %>
+                </h5>
+                <span class="author"><%= investment.author.name %></span>
               </div>
-            <% end %>
+              <p class="price margin-top text-center">
+                <strong><%= investment.formatted_price %></strong>
+              </p>
+            </div>
           </div>
         </div>
       <% end %>
diff --git a/app/views/shared/_recommended_index.html.erb b/app/views/shared/_recommended_index.html.erb
index e7c7d3835..4447a9ae4 100644
--- a/app/views/shared/_recommended_index.html.erb
+++ b/app/views/shared/_recommended_index.html.erb
@@ -18,11 +18,9 @@
 
       <% recommended.each_with_index do |recommended, index| %>
         <div class="small-12 medium-6 large-4 column end">
-          <%= link_to recommended_path(recommended) do %>
-            <div class="recommendation" data-equalizer-watch>
-              <h3><%= recommended.title %></h3>
-            </div>
-          <% end %>
+          <div class="recommendation" data-equalizer-watch>
+            <h3><%= link_to recommended.title, recommended_path(recommended) %></h3>
+          </div>
         </div>
       <% end %>