rizzo-css 0.0.85 → 0.0.87

package/scaffold/svelte/variants/full/src/routes/+layout.svelte

@@ -8,8 +8,21 @@
   let { children }: { children: Snippet } = $props();
 </script>
 
+<a href="#main-content" class="skip-link">Skip to main content</a>
 <Navbar siteName="Rizzo CSS" />
-{@render children()}
-<Footer />
+<main id="main-content">
+  {@render children()}
+</main>
+<Footer
+  siteName="Rizzo CSS"
+  links={[
+    { href: '/docs/getting-started', label: 'Getting Started' },
+    { href: '/docs', label: 'Docs' },
+    { href: '/docs/components', label: 'Components' },
+    { href: '/blocks', label: 'Blocks' },
+    { href: '/themes', label: 'Themes' },
+    { href: 'https://github.com', label: 'GitHub' },
+  ]}
+/>
 <BackToTop />
 <Settings />

package/scaffold/svelte/variants/full/src/routes/docs/+layout.svelte

@@ -48,27 +48,35 @@
 </script>
 
 <div class="docs" data-docs>
-  <div id="docs-sidebar-container">
-    <button
-      type="button"
-      class="docs__sidebar-toggle"
-      aria-label="Open documentation menu"
-      aria-expanded="false"
-      aria-controls="docs-sidebar"
-      data-docs-sidebar-toggle
-    >
-      <span class="docs__sidebar-toggle-icon" aria-hidden="true">
-        <span></span><span></span><span></span>
-      </span>
-      <span class="docs__sidebar-toggle-text">Docs</span>
-    </button>
-    <div class="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true"></div>
-    <DocsSidebar currentPath={currentPath} pathPrefix="/docs" />
-  </div>
-  <div class="docs__main">
-    <div class="docs__container">
-      <div class="docs__content">
+  <div class="docs__outer">
+    <div id="docs-sidebar-container">
+      <button
+        type="button"
+        class="docs__sidebar-toggle"
+        aria-label="Open documentation menu"
+        aria-expanded="false"
+        aria-controls="docs-sidebar"
+        data-docs-sidebar-toggle
+      >
+        <span class="docs__sidebar-toggle-icon" aria-hidden="true">
+          <span></span><span></span><span></span>
+        </span>
+        <span class="docs__sidebar-toggle-text">Docs</span>
+      </button>
+      <div class="docs__sidebar-overlay" data-docs-sidebar-overlay aria-hidden="true"></div>
+      <DocsSidebar currentPath={currentPath} pathPrefix="/docs" />
+    </div>
+    <div class="docs__main">
+      <div class="docs__container">
+        <header class="docs__header">
+          <h1 class="docs__title">{$page.data.title ?? 'Docs'}</h1>
+          {#if $page.data.description}
+            <p class="docs__description">{$page.data.description}</p>
+          {/if}
+        </header>
+        <div class="docs__content">
         {@render children()}
+        </div>
       </div>
     </div>
   </div>
@@ -76,10 +84,21 @@
 <BackToTop threshold={300} />
 
 <svelte:head>
-  <title>Docs — Rizzo CSS</title>
+  <title>{$page.data.title ?? 'Docs'} — Rizzo CSS</title>
 </svelte:head>
 
 <style>
+  :global(.docs__outer) {
+    width: 100%;
+    max-width: var(--container-default);
+    margin: 0 auto;
+    padding: 0 var(--content-padding-x);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    min-width: 0;
+  }
   :global(.docs__container) {
     box-sizing: border-box;
     width: 100%;
@@ -88,12 +107,34 @@
     margin: 0 auto;
     padding: 0 var(--content-padding-x);
   }
+  :global(.docs__header) {
+    margin-bottom: var(--section-spacing-lg);
+    padding-bottom: var(--spacing-8);
+    border-bottom: 1px solid var(--border);
+  }
+  :global(.docs__title) {
+    font-size: var(--font-size-5xl);
+    font-weight: var(--font-weight-bold);
+    color: var(--text);
+    margin: 0 0 var(--spacing-4) 0;
+    line-height: var(--line-height-tight);
+  }
+  :global(.docs__description) {
+    font-size: var(--font-size-xl);
+    color: var(--text);
+    margin: 0;
+    line-height: var(--line-height-relaxed);
+  }
   :global(.docs__content) {
     width: 100%;
     min-width: 0;
     color: var(--text);
     line-height: var(--line-height-relaxed);
   }
+  :global(.docs__content h2),
+  :global(.docs__content h3) {
+    scroll-margin-top: var(--scroll-margin-below-header);
+  }
   :global(.docs__content h2) {
     font-size: var(--font-size-4xl);
     font-weight: var(--font-weight-bold);
@@ -110,20 +151,80 @@
     margin-bottom: var(--spacing-4);
     color: var(--text);
   }
+  :global(.docs__content h4) {
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-semibold);
+    margin-top: var(--spacing-6);
+    margin-bottom: var(--spacing-3);
+    color: var(--text);
+  }
   :global(.docs__content p) {
     font-size: var(--font-size-base);
     margin-bottom: var(--spacing-5);
   }
-  :global(.docs__content ul) {
+  :global(.docs__content ul),
+  :global(.docs__content ol) {
     margin-bottom: var(--spacing-5);
     padding-left: var(--spacing-8);
   }
+  :global(.docs__content li) {
+    margin-bottom: var(--spacing-2);
+  }
+  :global(.docs__content code) {
+    background-color: var(--background-alt);
+    color: var(--accent-fg);
+    padding: var(--spacing-0-125) var(--spacing-0-375);
+    border-radius: var(--radius);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+  }
+  :global(.docs__content pre) {
+    background-color: var(--background-alt);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-6);
+    overflow-x: auto;
+    margin-bottom: var(--spacing-6);
+    font-size: var(--font-size-sm);
+  }
+  :global(.docs__content pre code) {
+    background-color: transparent;
+    color: var(--text);
+    padding: 0;
+    font-size: inherit;
+  }
+  :global(.docs__content blockquote) {
+    border-left: var(--spacing-1) solid var(--accent);
+    padding-left: var(--spacing-6);
+    margin: var(--spacing-6) 0;
+    color: var(--text-dim);
+    font-style: italic;
+  }
+  :global(.docs__content table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: var(--spacing-6);
+  }
+  :global(.docs__content th),
+  :global(.docs__content td) {
+    padding: var(--spacing-3);
+    text-align: left;
+    border-bottom: 1px solid var(--border);
+  }
+  :global(.docs__content th) {
+    font-weight: var(--font-weight-semibold);
+    background-color: var(--background-alt);
+  }
   :global(.docs__content a) {
+    text-decoration: none;
+  }
+  :global(.docs__content a:not(.docs-sidebar__link):not(.docs-sidebar__sublink):not(.dashboard__nav-link):not(.component-card-link):not(.block-card-link):not(.navbar__link):not(.navbar__brand-link):not(.footer__link):not(.breadcrumb__link):not(.pagination__link)) {
     color: var(--accent-fg);
     text-decoration: underline;
     text-underline-offset: 0.15em;
+    transition: color var(--transition-base);
   }
-  :global(.docs__content a:hover) {
+  :global(.docs__content a:not(.docs-sidebar__link):not(.docs-sidebar__sublink):not(.dashboard__nav-link):not(.component-card-link):not(.block-card-link):not(.navbar__link):not(.navbar__brand-link):not(.footer__link):not(.breadcrumb__link):not(.pagination__link)):hover {
     color: var(--accent-fg-hover);
   }
   :global(.docs__content .component-card-link),
@@ -134,4 +235,30 @@
   :global(.docs__content .block-card-link *) {
     text-decoration: none;
   }
+  :global(.docs__content hr) {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: var(--spacing-8) 0;
+  }
+  :global(.docs__content .example) {
+    background-color: var(--background-alt);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-6);
+    margin: var(--spacing-6) 0;
+  }
+  :global(.docs__content section) {
+    margin-bottom: var(--section-spacing-lg);
+  }
+  :global(.docs__content section:last-child) {
+    margin-bottom: 0;
+  }
+  @media (width <= 640px) {
+    :global(.docs__title) {
+      font-size: var(--font-size-4xl);
+    }
+    :global(.docs__description) {
+      font-size: var(--font-size-lg);
+    }
+  }
 </style>

package/scaffold/svelte/variants/full/src/routes/docs/+layout.ts

@@ -0,0 +1,3 @@
+export function load() {
+  return { title: 'Docs', description: '' };
+}

package/scaffold/svelte/variants/full/src/routes/docs/+page.svelte

@@ -7,7 +7,6 @@
 </svelte:head>
 
 <section class="docs-overview">
-  <h1 class="docs__title">Docs overview</h1>
   <p class="docs-overview__intro">
     Rizzo CSS is a design system built on semantic theming and 14 themes. One CSS codebase, 53 accessible BEM components — for <strong>Vanilla JS</strong>, <strong>Astro</strong>, <strong>Svelte</strong>, <strong>React</strong>, and <strong>Vue</strong>.
   </p>

package/scaffold/svelte/variants/full/src/routes/docs/+page.ts

@@ -0,0 +1,7 @@
+export function load() {
+  return {
+    title: 'Docs overview',
+    description:
+      'Rizzo CSS is a design system built on semantic theming and 14 themes. One CSS codebase, 53 accessible BEM components — for Vanilla JS, Astro, Svelte, React, and Vue.',
+  };
+}

package/scaffold/svelte/variants/full/src/routes/docs/components/+page.svelte

@@ -6,12 +6,7 @@
   const DOCS_BASE = 'https://rizzo-css.vercel.app';
 </script>
 
-<svelte:head>
-  <title>Components — Rizzo CSS</title>
-</svelte:head>
-
 <section class="docs-components-intro">
-  <h1 class="docs__title">Components</h1>
   <p class="docs-components-intro__tagline">
     Browse the collection of accessible, themeable components. Same CSS and BEM for Astro, Svelte, and Vanilla.
   </p>

package/scaffold/svelte/variants/full/src/routes/docs/components/+page.ts

@@ -0,0 +1,6 @@
+export function load() {
+  return {
+    title: 'Components',
+    description: 'Browse all components by category',
+  };
+}

package/scaffold/svelte/variants/full/src/routes/docs/getting-started/+page.svelte

@@ -1,11 +1,6 @@
 <script lang="ts">
 </script>
 
-<svelte:head>
-  <title>Getting started — Rizzo CSS</title>
-</svelte:head>
-
-<h1 class="docs__title">Getting started</h1>
 <p>This project was created with the <strong>Full</strong> template. You have the home page, docs overview, components index, blocks, and themes.</p>
 
 <h2 id="installation">Installation</h2>

package/scaffold/svelte/variants/full/src/routes/docs/getting-started/+page.ts

@@ -0,0 +1,6 @@
+export function load() {
+  return {
+    title: 'Getting Started',
+    description: 'Installation, project structure, and quick start guide',
+  };
+}

package/scaffold/svelte/variants/full/src/routes/docs/overview/+page.ts

@@ -0,0 +1,6 @@
+export function load() {
+  return {
+    title: 'Overview',
+    description: 'Introduction to Rizzo CSS and the design system',
+  };
+}

package/scaffold/svelte/variants/full/src/routes/themes/+page.svelte

@@ -154,13 +154,6 @@
     margin-right: auto;
     line-height: var(--line-height-relaxed);
   }
-  .themes-page__subtitle code {
-    background: var(--background-alt);
-    color: var(--accent-fg);
-    padding: var(--spacing-0-125) var(--spacing-0-375);
-    border-radius: var(--radius);
-    font-size: var(--font-size-sm);
-  }
   .themes-page__hero-demo {
     margin-top: var(--spacing-6);
     text-align: left;

package/scaffold/svelte/variants/full/static/favicon.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <g>
+    <path d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"/>
+  </g>
+  <path fill="url(#a)" d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"/>
+  <defs>
+    <linearGradient id="a" x1="64.7" x2="77.4" y1="119.2" y2="77.4" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D83333"/>
+      <stop offset="1" stop-color="#F041FF"/>
+    </linearGradient>
+  </defs>
+  <style>
+    g { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+      g { fill: #FFF; }
+    }
+  </style>
+</svg>

package/scaffold/vanilla/README-RIZZO.md

@@ -28,7 +28,7 @@ If you prefer to load CSS from a CDN instead of the local file, replace the `<li
 - `<link rel="stylesheet" href="https://unpkg.com/rizzo-css@latest/dist/rizzo.min.css" />`  
 - Or jsDelivr: `https://cdn.jsdelivr.net/npm/rizzo-css@latest/dist/rizzo.min.css`  
 
-(Replace `@latest` with a specific version, e.g. `@0.0.85`, in production.)
+(Replace `@latest` with a specific version, e.g. `@0.0.87`, in production.)
 
 The CLI replaces placeholders in `index.html` (e.g. `{{DATA_THEME}}`, `{{TITLE}}`) when you run `rizzo-css init`. The theme selected during init is used on first load when you have no saved preference in the browser.
 

package/scaffold/vanilla/components/accordion.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{{TITLE}}</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   <!-- Theme flash prevention: apply saved theme/settings before first paint (same as main site) -->
   <script>
     (function() {
@@ -520,6 +521,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -890,6 +898,31 @@
 
 
 
+
+
+
+
+
+
+
+  <footer class="footer" role="contentinfo">
+    <div class="footer__container">
+      <div class="footer__inner">
+        <p class="footer__copyright">
+          <span class="footer__site-name">Rizzo CSS</span> · <span class="footer__year">© 2026</span>
+        </p>
+        <nav class="footer__nav" aria-label="Footer">
+          <ul class="footer__links">
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/getting-started">Getting Started</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/components">Components</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/blocks">Blocks</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/theming">Theming</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://github.com">GitHub</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </footer>
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
     <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
       <span class="back-to-top__icon" aria-hidden="true">

package/scaffold/vanilla/components/alert-dialog.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{{TITLE}}</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   <!-- Theme flash prevention: apply saved theme/settings before first paint (same as main site) -->
   <script>
     (function() {
@@ -520,6 +521,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -890,6 +898,31 @@
 
 
 
+
+
+
+
+
+
+
+  <footer class="footer" role="contentinfo">
+    <div class="footer__container">
+      <div class="footer__inner">
+        <p class="footer__copyright">
+          <span class="footer__site-name">Rizzo CSS</span> · <span class="footer__year">© 2026</span>
+        </p>
+        <nav class="footer__nav" aria-label="Footer">
+          <ul class="footer__links">
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/getting-started">Getting Started</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/components">Components</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/blocks">Blocks</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/theming">Theming</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://github.com">GitHub</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </footer>
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
     <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
       <span class="back-to-top__icon" aria-hidden="true">

package/scaffold/vanilla/components/alert.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{{TITLE}}</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   <!-- Theme flash prevention: apply saved theme/settings before first paint (same as main site) -->
   <script>
     (function() {
@@ -520,6 +521,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -890,6 +898,31 @@
 
 
 
+
+
+
+
+
+
+
+  <footer class="footer" role="contentinfo">
+    <div class="footer__container">
+      <div class="footer__inner">
+        <p class="footer__copyright">
+          <span class="footer__site-name">Rizzo CSS</span> · <span class="footer__year">© 2026</span>
+        </p>
+        <nav class="footer__nav" aria-label="Footer">
+          <ul class="footer__links">
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/getting-started">Getting Started</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/components">Components</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/blocks">Blocks</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/theming">Theming</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://github.com">GitHub</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </footer>
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
     <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
       <span class="back-to-top__icon" aria-hidden="true">

package/scaffold/vanilla/components/aspect-ratio.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{{TITLE}}</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   <!-- Theme flash prevention: apply saved theme/settings before first paint (same as main site) -->
   <script>
     (function() {
@@ -520,6 +521,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -890,6 +898,31 @@
 
 
 
+
+
+
+
+
+
+
+  <footer class="footer" role="contentinfo">
+    <div class="footer__container">
+      <div class="footer__inner">
+        <p class="footer__copyright">
+          <span class="footer__site-name">Rizzo CSS</span> · <span class="footer__year">© 2026</span>
+        </p>
+        <nav class="footer__nav" aria-label="Footer">
+          <ul class="footer__links">
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/getting-started">Getting Started</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/components">Components</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/blocks">Blocks</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/theming">Theming</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://github.com">GitHub</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </footer>
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
     <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
       <span class="back-to-top__icon" aria-hidden="true">

package/scaffold/vanilla/components/avatar.html

@@ -4,6 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{{TITLE}}</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
   <!-- Theme flash prevention: apply saved theme/settings before first paint (same as main site) -->
   <script>
     (function() {
@@ -520,6 +521,13 @@
   
   
   
+  
+  
+  
+  
+  
+  
+  
   
   
   
@@ -890,6 +898,31 @@
 
 
 
+
+
+
+
+
+
+
+  <footer class="footer" role="contentinfo">
+    <div class="footer__container">
+      <div class="footer__inner">
+        <p class="footer__copyright">
+          <span class="footer__site-name">Rizzo CSS</span> · <span class="footer__year">© 2026</span>
+        </p>
+        <nav class="footer__nav" aria-label="Footer">
+          <ul class="footer__links">
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/getting-started">Getting Started</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/components">Components</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/blocks">Blocks</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://rizzo-css.vercel.app/docs/theming">Theming</a></li>
+            <li class="footer__link-item"><a class="footer__link" href="https://github.com">GitHub</a></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </footer>
   <div class="back-to-top" data-back-to-top data-threshold="400" aria-hidden="true">
     <button type="button" class="back-to-top__btn" aria-label="Back to top" data-back-to-top-btn>
       <span class="back-to-top__icon" aria-hidden="true">