Add :focus styles

src/scss/_card.scss

@@ -186,6 +186,7 @@
   }
 
   &__image {
+    --focus-offset: 2px;
     position: relative;
     background: var(--placeholder-background);
     border-radius: var(--layout-border-radius-small);
@@ -273,6 +274,10 @@
       padding: 2px 4px 2px 0;
       border-radius: var(--layout-border-radius-small);
       min-width: 0; // Fix whitespace nowrap issue
+
+      a:focus-visible {
+        outline: none;
+      }
     }
 
     .card__left {

src/scss/_navigation.scss

@@ -86,6 +86,8 @@
 }
 
 .main-navigation {
+  --focus-border-radius: 0;
+  --focus-offset: -2px;
   position: sticky;
   top: -1px;
   z-index: 1000;
@@ -184,7 +186,7 @@
     height: fit-content;
     transition: background-color .1s;
 
-    &:not(:hover) {
+    &:not(:hover, :focus-within) {
       .sub-menu {
         pointer-events: none;
         opacity: 0;

src/scss/_pagination.scss

@@ -5,6 +5,7 @@
   gap: 3px;
 
   > * {
+    --focus-offset: -2px;
     @extend %button;
     background: var(--pagination-background);
     color: var(--pagination-text);

src/scss/_socialmedia.scss

@@ -3,6 +3,7 @@
   gap: 16px get_clamp(12, 16, 320, 480);
 
   > * {
+    --focus-offset: 1px;
     cursor: pointer;
     display: block;
     color: var(--media-button-color);
@@ -12,7 +13,8 @@
     transition: opacity var(--transition-duration), color var(--transition-duration);
     height: get_clamp(22, 24, 320, 480);
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       color: var(--media-button-color-hover);
       opacity: 1;
     }

src/scss/comments.scss

@@ -425,7 +425,7 @@
     border-radius: var(--layout-border-radius-small);
     padding: .75rem;
 
-    &:not(:hover) {
+    &:not(:hover, :focus-within) {
       .hide-unless-hover-on-desktop {
         @include bp(desktop) {
           opacity: 0;
@@ -447,9 +447,10 @@
   }
 
   &__author {
+    --focus-offset: -2px;
     font-size: 13px;
     line-height: 1.2;
-    padding-top: 1px;
+    padding-top: 2px;
     margin-bottom: 2px;
 
     > :is(span, a) {
@@ -641,7 +642,13 @@
       position: relative;
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 8px;
+      margin-right: -2px;
+
+      > * {
+        padding-left: 2px;
+        padding-right: 2px;
+      }
 
       @include bp(desktop) {
         gap: 8px;
@@ -655,7 +662,7 @@
     color: var(--comment-button-color);
     transition: opacity var(--transition-duration);
 
-    &:not(:hover) {
+    &:not(:hover, :focus-visible) {
       opacity: .2;
     }
   }
@@ -690,7 +697,7 @@
     color: var(--comment-button-color);
     transition: opacity var(--transition-duration);
 
-    &:not(:hover, .on) {
+    &:not(:hover, :focus-visible, .on) {
       opacity: .2;
     }
 
@@ -704,7 +711,7 @@
     color: var(--comment-button-color);
     transition: opacity var(--transition-duration);
 
-    &:not(:hover, .last-clicked) {
+    &:not(:hover, :focus-visible, .last-clicked) {
       opacity: .2;
     }
 

src/scss/common/_base.scss

@@ -172,9 +172,11 @@ button[type=submit] {
 }
 
 .button {
+  --focus-offset: 2px;
   @extend %button;
 
   &._secondary {
+    --focus-offset: -2px;
     background: var(--button-secondary-background);
     color: var(--button-secondary-text);
     border: var(--button-secondary-border);
@@ -272,6 +274,7 @@ button[type=submit] {
   cursor: pointer;
 
   &:not(._inline) {
+    --focus-offset: -2px;
     display: block;
     background: var(--tag-background);
     color: var(--tag-text);
@@ -425,6 +428,7 @@ button[type=submit] {
 .popup-menu {
   --translateX: translateX(0);
   --translateY: translateY(0);
+  --focus-offset: -2px;
   position: absolute;
   background: var(--popup-menu-background);
   color: var(--tooltip-text);

src/scss/common/_blocks.scss

@@ -538,6 +538,7 @@ figure {
 // =============================================================================
 
 .wp-block-file {
+  --focus-offset: 2px;
   display: flex;
   gap: 0 1px;
   flex-direction: row-reverse;
@@ -548,6 +549,12 @@ figure {
   overflow: hidden;
   width: fit-content;
 
+  &:focus-within {
+    a:focus-visible {
+      outline: none;
+    }
+  }
+
   &-wrapper {
     margin: 0;
 

src/scss/common/_inputs.scss

@@ -10,13 +10,10 @@
   font-family: var(--font-base);
   font-weight: var(--font-weight-normal);
   border-style: solid;
-
-  &:focus {
-    outline: 0;
-  }
 }
 
 select {
+  --focus-offset: -2px;
   cursor: pointer;
   font-family: var(--font-base);
 
@@ -104,6 +101,7 @@ select {
 }
 
 input[type=range] {
+  --focus-offset: -2px;
   cursor: pointer;
   padding: 5px;
   margin: 0;
@@ -154,6 +152,7 @@ input[type=number] {
 
 input[type=checkbox],
 input[type=radio] {
+  --focus-offset: 2px;
   cursor: pointer;
   position: relative;
   background: var(--input-background);
@@ -184,6 +183,7 @@ input[type=checkbox] {
 }
 
 input[type=radio] {
+  --focus-border-radius: 50%;
   border-radius: 50%;
 
   &:checked {

src/scss/common/_properties.scss

@@ -162,9 +162,9 @@
   --code-background-inline: rgb(0 0 0 / 15%);
   --code-color: var(--fg-800);
   --warning: #f66055;
-  --warning-caption: white;
+  --warning-caption: #fff;
   --success: #7ebb4e;
-  --success-caption: white;
+  --success-caption: #fff;
   --invert-filter: invert(0);
   --red: #ef4d4d;
   --litrpg-bg: var(--fg-400);
@@ -175,6 +175,10 @@
   --lit-rpg-polygon: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
   --paragraph-spacing: 1.5rem; // Fallback if not defined deeper
 
+  // === FOCUS =================================================================
+  --focus-background: var(--red);
+  --focus-outline: 2px solid var(--focus-background);
+
   // === ELEVATIONS ============================================================
   --e-body: var(--bg-1000);
   --e-fullscreen: var(--e-1);

src/scss/common/_setup.scss

@@ -9,6 +9,26 @@ html:is(:root) {
   -webkit-tap-highlight-color: transparent;
 }
 
+:focus {
+  outline: none;
+}
+
+*:not(input, textarea, .wp-block-file a):focus-visible,
+input:is([type=checkbox], [type=radio], [type=range]):focus-visible,
+.button:focus-visible,
+.card__link-list li:focus-within {
+  border-radius: var(--focus-border-radius, var(--layout-border-radius-small));
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset, 0);
+}
+
+// Split off for browsers without support
+.wp-block-file:has(a:focus-visible) {
+  border-radius: var(--focus-border-radius, var(--layout-border-radius-small));
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset, 0);
+}
+
 body {
   background: {
     color: var(--e-body);

src/scss/common/_utility.scss

@@ -70,6 +70,7 @@ body:not(.is-editor):not(.is-admin) {
 }
 
 .truncate {
+  --focus-offset: -2px;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;