btn back to top

assets/css/style.css

@@ -62,10 +62,10 @@
 
 @media screen and (max-width: 768px) {
   :root {
-    --fs-xsmall: 13px;
-    --fs-small: 16px;
-    --fs-normal: 20px;
-    --fs-text: 20px;
+    --fs-xsmall: 12px;
+    --fs-small: 14px;
+    --fs-normal: 18px;
+    --fs-text: 18px;
     --fs-medium: 24px;
     --fs-big: 34px;
     --header-h: 60px;
@@ -579,42 +579,67 @@ button:disabled {
     transform: translateX(0);
   }
 }
-.btn--back-to-top {
-  display: flex;
-  border-color: var(--color-txt);
+#btn--back-to-top {
   width: -moz-fit-content;
   width: fit-content;
-  margin: var(--spacing) auto;
-  font-size: var(--fs-xsmall);
+  margin-bottom: var(--spacing);
+  margin-left: auto;
+  margin-right: var(--padding-body);
 }
-@media screen and (max-width: 768px) {
-  .btn--back-to-top {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
+#btn--back-to-top a {
+  display: flex;
+  align-items: center;
+  gap: 1ch;
 }
-.btn--back-to-top .icon {
-  width: 12px;
-  height: 12px;
+#btn--back-to-top .text {
+  font-size: var(--fs-small);
+  padding-top: 2px;
+}
+#btn--back-to-top .icon {
+  flex-shrink: 0;
+  --size: 26px;
+  border: 1px solid var(--color-txt);
+  background-color: var(--color-bg);
+  border-radius: 50%;
+  width: var(--size);
+  height: var(--size);
   transform: rotate(-90deg);
-  transform-origin: center;
-  position: relative;
-  top: -1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.btn--back-to-top .icon svg {
+#btn--back-to-top .icon svg {
   width: 12px;
   height: 12px;
 }
-.btn--back-to-top:hover {
-  background-color: var(--grey-950);
-  color: var(--grey-100);
-  border-color: var(--grey-100);
+#btn--back-to-top:hover {
+  opacity: 0.8;
 }
-.btn--back-to-top:hover a {
-  background-color: var(--grey-950);
-  color: var(--grey-100);
-}
-.btn--back-to-top:hover svg {
-  fill: var(--grey-100);
+@media screen and (max-width: 560px) {
+  #btn--back-to-top {
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    position: fixed;
+    bottom: calc(var(--padding-body) * 1.5);
+    right: var(--padding-body);
+    z-index: var(--z-header);
+    margin-right: 0;
+    margin-bottom: 0;
+  }
+  #btn--back-to-top .icon {
+    --size: 32px;
+    border-width: 2px;
+  }
+  #btn--back-to-top .icon svg {
+    width: 19px;
+    height: 19px;
+  }
+  #btn--back-to-top .text {
+    display: none;
+  }
+  #btn--back-to-top.is-visible {
+    opacity: 1;
+  }
 }
 
 .btn--support {
@@ -2959,6 +2984,7 @@ main .page__header .description {
   #investigation__content .subsection-w-media .media {
     margin-inline: auto;
     max-width: var(--max-w-content);
+    min-width: 0;
     position: sticky;
     top: calc(var(--header-h) + var(--spacing));
     align-self: start;