@nappr/nappr-styles 0.3.3 → 0.3.5

package/dist/styles.css

@@ -1,10 +1,21 @@
 @charset "UTF-8";
-/*! @nappr/styles v0.3.3 | @see https://github.com/sixertoy/nappr-styles.git | @since 2025-11-20 */
+/*! @nappr/styles v0.3.5 | @see https://github.com/sixertoy/nappr-styles.git | @since 2026-06-20 */
 :root{
   --nappr-xl-base:1em;
   --nappr-body-width:100vw;
   --nappr-border-radius:0.25rem;
   --nappr-default-theme:dark-theme;
+  --nappr-text-font-size:1rem;
+  --nappr-text-font-family:Helvetica, Arial, Verdana, sans-serif;
+  --nappr-text-font-family--alt:"Spectral", Georgia, serif;
+  --nappr-text-weights-light:300;
+  --nappr-text-weights-regular:400;
+  --nappr-text-weights-medium:500;
+  --nappr-text-weights-bold:700;
+  --nappr-text-weight:400;
+  --nappr-text-weight--alt:500;
+  --nappr-text-line-height:1.5rem;
+  --nappr-text-spacing:0 0 1.5rem 0;
   --nappr-palette-black:#000000;
   --nappr-palette-white:#ffffff;
   --nappr-palette-grey:#7f7f7f;
@@ -57,7 +68,9 @@
   --nappr-breakpoint-lg:62em;
   --nappr-breakpoint-xl:78em;
   --nappr-grid-columns:12;
+  --nappr-grid-columns-sm:6;
   --nappr-grid-max-width:1200px;
+  --nappr-grid-max-width-sm:600px;
   --nappr-grid-gutter-gap-sm:1rem;
   --nappr-grid-gutter-gap-md:1rem;
   --nappr-grid-gutter-gap-lg:1.5rem;
@@ -358,6 +371,7 @@ html{
 }
 
 body{
+  background-color:var(--nappr-theme-background);
   min-height:100vh;
   text-rendering:optimizespeed;
   width:100vw;
@@ -512,10 +526,16 @@ fieldset{
   width:100%;
 }
 
-a:active,a:link,a:visited{
+[href]{
+  color:var(--nappr-theme-text-primary);
+  font-size:1rem;
+  -webkit-tap-highlight-color:transparent;
+  text-decoration:none;
+}
+[href]:active,[href]:link,[href]:visited{
   text-decoration:none;
 }
-a:hover{
+[href]:hover{
   text-decoration:underline;
 }
 dl,ol,ul{
@@ -557,18 +577,28 @@ table caption{
   caption-side:top;
 }
 
-.is-full-layout,.is-full-width,.scrollbox,.scrollbox-x,.scrollbox-y{
+.is-layout,.is-layout-width,.scrollbox,.scrollbox-x,.scrollbox-y{
   max-width:100%;
   min-width:100%;
   width:100%;
 }
 
-.is-full-height,.is-full-layout,.scrollbox,.scrollbox-x,.scrollbox-y{
+.is-layout,.is-layout-height,.scrollbox,.scrollbox-x,.scrollbox-y{
   height:100%;
   max-height:100%;
   min-height:100%;
 }
 
+.is-viewport,.is-viewport-height{
+  height:100vh;
+  height:100dvh;
+}
+
+.is-viewport,.is-viewport-width{
+  width:100vw;
+  width:100dvw;
+}
+
 .flex-columns,.flex-rows,.flex-wrapper,.wrap-1,.wrap-2,.wrap-3,.wrap-4,.wrap-5{
   display:flex;
   flex:1;
@@ -635,19 +665,30 @@ h6{
   font-size:1.125rem;
   line-height:1.625rem;
 }
-.grid,.grid--fluid{
+.grid,.grid--fluid,.grid-sm,.grid-sm--fluid{
   display:grid;
   gap:1rem;
-  grid-template-columns:repeat(12, 1fr);
   width:100%;
 }
 
+.grid--fluid,.grid-sm--fluid{
+  max-width:none;
+}
+
+.grid,.grid--fluid{
+  grid-template-columns:repeat(12, 1fr);
+}
+
+.grid-sm,.grid-sm--fluid{
+  grid-template-columns:repeat(6, 1fr);
+}
+
 .grid{
   max-width:1200px;
 }
 
-.grid--fluid{
-  max-width:none;
+.grid-sm{
+  max-width:600px;
 }
 
 .grid-items-top{
@@ -802,209 +843,388 @@ h6{
   place-self:stretch;
 }
 
-.grid--col-1{
+.grid-col-1{
   grid-column:span 1;
 }
 
-.grid--col-2{
+.grid-col-2{
   grid-column:span 2;
 }
 
-.grid--col-3{
+.grid-col-3{
   grid-column:span 3;
 }
 
-.grid--col-4{
+.grid-col-4{
   grid-column:span 4;
 }
 
-.grid--col-5{
+.grid-col-5{
   grid-column:span 5;
 }
 
-.grid--col-6{
+.grid-col-6{
   grid-column:span 6;
 }
 
-.grid--col-7{
+.grid-col-7{
   grid-column:span 7;
 }
 
-.grid--col-8{
+.grid-col-8{
   grid-column:span 8;
 }
 
-.grid--col-9{
+.grid-col-9{
   grid-column:span 9;
 }
 
-.grid--col-10{
+.grid-col-10{
   grid-column:span 10;
 }
 
-.grid--col-11{
+.grid-col-11{
   grid-column:span 11;
 }
 
-.grid--col-12{
+.grid-col-12{
   grid-column:span 12;
 }
 
-.grid--cols-1{
+.grid-cols-1{
   grid-template-columns:repeat(1, 1fr);
 }
 
-.grid--cols-2{
+.grid-cols-2{
   grid-template-columns:repeat(2, 1fr);
 }
 
-.grid--cols-3{
+.grid-cols-3{
   grid-template-columns:repeat(3, 1fr);
 }
 
-.grid--cols-4{
+.grid-cols-4{
   grid-template-columns:repeat(4, 1fr);
 }
 
-.grid--cols-5{
+.grid-cols-5{
   grid-template-columns:repeat(5, 1fr);
 }
 
-.grid--cols-6{
+.grid-cols-6{
   grid-template-columns:repeat(6, 1fr);
 }
 
-.grid--cols-7{
+.grid-cols-7{
   grid-template-columns:repeat(7, 1fr);
 }
 
-.grid--cols-8{
+.grid-cols-8{
   grid-template-columns:repeat(8, 1fr);
 }
 
-.grid--cols-9{
+.grid-cols-9{
   grid-template-columns:repeat(9, 1fr);
 }
 
-.grid--cols-10{
+.grid-cols-10{
   grid-template-columns:repeat(10, 1fr);
 }
 
-.grid--cols-11{
+.grid-cols-11{
   grid-template-columns:repeat(11, 1fr);
 }
 
-.grid--cols-12{
+.grid-cols-12{
   grid-template-columns:repeat(12, 1fr);
 }
-.grid--gap{
+.grid-gap{
   gap:var(--nappr-grid-gutter-gap-md, 1rem);
 }
 .grid--no-gap{
   gap:0;
 }
-.grid--col-offset-0{
+.grid-col-offset-0{
   grid-column-start:1;
 }
 
-.grid--col-offset-1{
+.grid-col-offset-1{
   grid-column-start:2;
 }
 
-.grid--col-offset-2{
+.grid-col-offset-2{
   grid-column-start:3;
 }
 
-.grid--col-offset-3{
+.grid-col-offset-3{
   grid-column-start:4;
 }
 
-.grid--col-offset-4{
+.grid-col-offset-4{
   grid-column-start:5;
 }
 
-.grid--col-offset-5{
+.grid-col-offset-5{
   grid-column-start:6;
 }
 
-.grid--col-offset-6{
+.grid-col-offset-6{
   grid-column-start:7;
 }
 
-.grid--col-offset-7{
+.grid-col-offset-7{
   grid-column-start:8;
 }
 
-.grid--col-offset-8{
+.grid-col-offset-8{
   grid-column-start:9;
 }
 
-.grid--col-offset-9{
+.grid-col-offset-9{
   grid-column-start:10;
 }
 
-.grid--col-offset-10{
+.grid-col-offset-10{
   grid-column-start:11;
 }
 
-.grid--col-offset-11{
+.grid-col-offset-11{
   grid-column-start:12;
 }
 
-.grid--col-offset-12{
+.grid-col-offset-12{
   grid-column-start:13;
 }
-.grid--col-offset-0__right{
+.grid-col--offset-0__right{
   grid-column-end:1;
 }
 
-.grid--col-offset-1__right{
+.grid-col--offset-1__right{
   grid-column-end:2;
 }
 
-.grid--col-offset-2__right{
+.grid-col--offset-2__right{
   grid-column-end:3;
 }
 
-.grid--col-offset-3__right{
+.grid-col--offset-3__right{
   grid-column-end:4;
 }
 
-.grid--col-offset-4__right{
+.grid-col--offset-4__right{
   grid-column-end:5;
 }
 
-.grid--col-offset-5__right{
+.grid-col--offset-5__right{
   grid-column-end:6;
 }
 
-.grid--col-offset-6__right{
+.grid-col--offset-6__right{
   grid-column-end:7;
 }
 
-.grid--col-offset-7__right{
+.grid-col--offset-7__right{
   grid-column-end:8;
 }
 
-.grid--col-offset-8__right{
+.grid-col--offset-8__right{
   grid-column-end:9;
 }
 
-.grid--col-offset-9__right{
+.grid-col--offset-9__right{
   grid-column-end:10;
 }
 
-.grid--col-offset-10__right{
+.grid-col--offset-10__right{
   grid-column-end:11;
 }
 
-.grid--col-offset-11__right{
+.grid-col--offset-11__right{
   grid-column-end:12;
 }
 
-.grid--col-offset-12__right{
+.grid-col--offset-12__right{
   grid-column-end:13;
 }
+.btn{
+  align-items:center;
+  border:0;
+  border-radius:.25rem;
+  cursor:pointer;
+  display:inline-flex;
+  font-family:inherit;
+  font-size:1rem;
+  font-weight:500;
+  gap:.5rem;
+  justify-content:center;
+  line-height:1.2;
+  padding:.75rem 1rem;
+  text-align:center;
+  text-decoration:none;
+  user-select:none;
+  vertical-align:middle;
+  white-space:nowrap;
+}
+.btn--rounded.btn{
+  border-radius:9999px;
+}
+.btn:focus-visible{
+  outline:2px solid var(--nappr-theme-accent);
+  outline-offset:2px;
+}
+.btn--no-outline.btn:focus-visible{
+  outline:none;
+}
+
+.btn.disabled,.btn:disabled{
+  cursor:not-allowed;
+  opacity:.65;
+  pointer-events:none;
+}
+
+.btns-group,.btns-group--inline{
+  align-items:center;
+  display:flex;
+  flex-direction:column;
+  gap:.5rem;
+  justify-content:center;
+}
+
+.btn{
+  transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+.btn .icon{
+  align-items:center;
+  display:inline-flex;
+  flex-shrink:0;
+  justify-content:center;
+}
+.btn.btn--icon-only{
+  aspect-ratio:1;
+}
+.btn.btn--icon-only .icon{
+  margin:0;
+}
+.btn.btn--icon-left .icon{
+  order:-1;
+}
+.btn.btn--icon-right .icon{
+  order:1;
+}
+.btn:not(:disabled,.disabled):hover{
+  text-decoration:none;
+}
+.btn,.btn--primary{
+  background-color:var(--nappr-theme-accent);
+  border:0;
+  color:var(--nappr-theme-text-primary);
+}
+.btn--primary:not(:disabled,.disabled):hover,.btn:not(:disabled,.disabled):hover{
+  background-color:color-mix(in srgb, var(--nappr-theme-accent) 90%, black 10%);
+}
+.btn--primary:not(:disabled,.disabled):active,.btn:not(:disabled,.disabled):active{
+  background-color:color-mix(in srgb, var(--nappr-theme-accent) 85%, black 15%);
+}
+
+.btn--secondary{
+  background-color:transparent;
+  border:1px solid var(--nappr-theme-accent);
+  color:var(--nappr-theme-accent);
+}
+.btn--secondary:not(:disabled,.disabled):hover{
+  background-color:var(--nappr-theme-accent);
+  color:var(--nappr-theme-text-primary);
+}
+.btn--secondary:not(:disabled,.disabled):active{
+  background-color:color-mix(in srgb, var(--nappr-theme-accent) 90%, black 10%);
+  border-color:color-mix(in srgb, var(--nappr-theme-accent) 90%, black 10%);
+  color:var(--nappr-theme-text-primary);
+}
+
+.btn--tertiary{
+  background-color:transparent;
+  border:1px solid var(--nappr-theme-accent);
+  color:var(--nappr-theme-accent);
+}
+.btn--tertiary:not(:disabled,.disabled):hover{
+  background-color:var(--nappr-theme-accent);
+  border-color:var(--nappr-theme-accent);
+  color:var(--nappr-theme-text-primary);
+}
+.btn--tertiary:not(:disabled,.disabled):active{
+  background-color:color-mix(in srgb, var(--nappr-theme-accent) 90%, black 10%);
+  border-color:color-mix(in srgb, var(--nappr-theme-accent) 90%, black 10%);
+  color:var(--nappr-theme-text-primary);
+}
+
+.btns-group>*{
+  width:100%;
+}
+
+.btns-group--inline{
+  flex-direction:row;
+}
+.btns-group--inline>*{
+  width:auto;
+}
+
+.nav .nav__list,.navbar .nav__list{
+  display:flex;
+  flex-direction:column;
+  list-style-type:none;
+  margin:0;
+  margin-block:0;
+  padding:0;
+  padding-inline-start:0;
+}
+.nav .nav__item,.navbar .nav__item{
+  align-items:stretch;
+  display:flex;
+  flex:0 1 auto;
+  flex-direction:column;
+  padding-bottom:0;
+  position:relative;
+}
+.nav .nav__btn,.nav .nav__link,.navbar .nav__btn,.navbar .nav__link{
+  align-items:center;
+  color:var(--nappr-theme-text-primary);
+  display:flex;
+  flex-direction:row;
+  font-size:1rem;
+  font-weight:700;
+  height:100%;
+  justify-content:space-between;
+  line-height:1.5rem;
+  margin:0;
+  padding:.75rem 1rem;
+  text-align:left;
+  text-decoration:none;
+  width:100%;
+}
+
+.navbar{
+  justify-content:flex-start;
+}
+.navbar .nav__list{
+  flex-flow:row nowrap;
+  gap:1rem;
+  margin:0 -1rem;
+  max-width:calc(100% + 1rem);
+}
+.navbar .nav__item{
+  align-items:flex-start;
+  flex:1 1 0%;
+  position:static;
+}
+.navbar .nav__btn,.navbar .nav__link{
+  font-size:.875rem;
+  font-weight:400;
+  justify-content:center;
+  line-height:1.5rem;
+  min-height:3.5rem;
+  padding:1rem;
+  text-align:center;
+}
 .nappr-w-0{
   width:0;
 }
@@ -1335,9 +1555,46 @@ h6{
   align-self:baseline;
 }
 
-.clearfix{
-  *zoom:1;
+.gap-3v{
+  gap:3rem;
+}
+
+.gap-4v{
+  gap:4rem;
+}
+
+.gap-5v{
+  gap:5rem;
 }
+
+.gap-6v{
+  gap:6rem;
+}
+
+.gap-0v{
+  gap:0;
+}
+
+.gap-0-75v{
+  gap:.75rem;
+}
+
+.gap-1v{
+  gap:1rem;
+}
+
+.gap-1-5v{
+  gap:1.5rem;
+}
+
+.gap-2v{
+  gap:2rem;
+}
+
+.gap-2-5v{
+  gap:2.5rem;
+}
+
 .clearfix:after,.clearfix:before{
   content:".";
   display:block;
@@ -1572,6 +1829,11 @@ h6{
   cursor:default;
 }
 
+.scroll-x-auto,.scroll-y-auto,.scrollbox,.scrollbox-x,.scrollbox-y{
+  -webkit-overflow-scrolling:touch;
+  overscroll-behavior:contain;
+}
+
 .scrollbox,.scrollbox-x,.scrollbox-y{
   overflow:auto;
 }
@@ -4603,76 +4865,76 @@ body{
 }
 
 @media (min-width:36em){
-  .grid-sm--col-1{
+  .grid-sm-col-1{
     grid-column:span 1;
   }
-  .grid-sm--col-2{
+  .grid-sm-col-2{
     grid-column:span 2;
   }
-  .grid-sm--col-3{
+  .grid-sm-col-3{
     grid-column:span 3;
   }
-  .grid-sm--col-4{
+  .grid-sm-col-4{
     grid-column:span 4;
   }
-  .grid-sm--col-5{
+  .grid-sm-col-5{
     grid-column:span 5;
   }
-  .grid-sm--col-6{
+  .grid-sm-col-6{
     grid-column:span 6;
   }
-  .grid-sm--col-7{
+  .grid-sm-col-7{
     grid-column:span 7;
   }
-  .grid-sm--col-8{
+  .grid-sm-col-8{
     grid-column:span 8;
   }
-  .grid-sm--col-9{
+  .grid-sm-col-9{
     grid-column:span 9;
   }
-  .grid-sm--col-10{
+  .grid-sm-col-10{
     grid-column:span 10;
   }
-  .grid-sm--col-11{
+  .grid-sm-col-11{
     grid-column:span 11;
   }
-  .grid-sm--col-12{
+  .grid-sm-col-12{
     grid-column:span 12;
   }
-  .grid-sm--cols-1{
+  .grid-sm-cols-1{
     grid-template-columns:repeat(1, 1fr);
   }
-  .grid-sm--cols-2{
+  .grid-sm-cols-2{
     grid-template-columns:repeat(2, 1fr);
   }
-  .grid-sm--cols-3{
+  .grid-sm-cols-3{
     grid-template-columns:repeat(3, 1fr);
   }
-  .grid-sm--cols-4{
+  .grid-sm-cols-4{
     grid-template-columns:repeat(4, 1fr);
   }
-  .grid-sm--cols-5{
+  .grid-sm-cols-5{
     grid-template-columns:repeat(5, 1fr);
   }
-  .grid-sm--cols-6{
+  .grid-sm-cols-6{
     grid-template-columns:repeat(6, 1fr);
   }
-  .grid-sm--cols-7{
+  .grid-sm-cols-7{
     grid-template-columns:repeat(7, 1fr);
   }
-  .grid-sm--cols-8{
+  .grid-sm-cols-8{
     grid-template-columns:repeat(8, 1fr);
   }
-  .grid-sm--cols-9{
+  .grid-sm-cols-9{
     grid-template-columns:repeat(9, 1fr);
   }
-  .grid-sm--cols-10{
+  .grid-sm-cols-10{
     grid-template-columns:repeat(10, 1fr);
   }
-  .grid-sm--cols-11{
+  .grid-sm-cols-11{
     grid-template-columns:repeat(11, 1fr);
   }
-  .grid-sm--cols-12{
+  .grid-sm-cols-12{
     grid-template-columns:repeat(12, 1fr);
   }
   .grid-sm--gap{
@@ -4681,82 +4943,82 @@ body{
   .grid-sm--no-gap{
     gap:0;
   }
-  .grid-sm--col-offset-0{
+  .grid-sm-col--offset-0{
     grid-column-start:1;
   }
-  .grid-sm--col-offset-1{
+  .grid-sm-col--offset-1{
     grid-column-start:2;
   }
-  .grid-sm--col-offset-2{
+  .grid-sm-col--offset-2{
     grid-column-start:3;
   }
-  .grid-sm--col-offset-3{
+  .grid-sm-col--offset-3{
     grid-column-start:4;
   }
-  .grid-sm--col-offset-4{
+  .grid-sm-col--offset-4{
     grid-column-start:5;
   }
-  .grid-sm--col-offset-5{
+  .grid-sm-col--offset-5{
     grid-column-start:6;
   }
-  .grid-sm--col-offset-6{
+  .grid-sm-col--offset-6{
     grid-column-start:7;
   }
-  .grid-sm--col-offset-7{
+  .grid-sm-col--offset-7{
     grid-column-start:8;
   }
-  .grid-sm--col-offset-8{
+  .grid-sm-col--offset-8{
     grid-column-start:9;
   }
-  .grid-sm--col-offset-9{
+  .grid-sm-col--offset-9{
     grid-column-start:10;
   }
-  .grid-sm--col-offset-10{
+  .grid-sm-col--offset-10{
     grid-column-start:11;
   }
-  .grid-sm--col-offset-11{
+  .grid-sm-col--offset-11{
     grid-column-start:12;
   }
-  .grid-sm--col-offset-12{
+  .grid-sm-col--offset-12{
     grid-column-start:13;
   }
-  .grid-sm--col-offset-0__right{
+  .grid-sm-col--offset-0__right{
     grid-column-end:1;
   }
-  .grid-sm--col-offset-1__right{
+  .grid-sm-col--offset-1__right{
     grid-column-end:2;
   }
-  .grid-sm--col-offset-2__right{
+  .grid-sm-col--offset-2__right{
     grid-column-end:3;
   }
-  .grid-sm--col-offset-3__right{
+  .grid-sm-col--offset-3__right{
     grid-column-end:4;
   }
-  .grid-sm--col-offset-4__right{
+  .grid-sm-col--offset-4__right{
     grid-column-end:5;
   }
-  .grid-sm--col-offset-5__right{
+  .grid-sm-col--offset-5__right{
     grid-column-end:6;
   }
-  .grid-sm--col-offset-6__right{
+  .grid-sm-col--offset-6__right{
     grid-column-end:7;
   }
-  .grid-sm--col-offset-7__right{
+  .grid-sm-col--offset-7__right{
     grid-column-end:8;
   }
-  .grid-sm--col-offset-8__right{
+  .grid-sm-col--offset-8__right{
     grid-column-end:9;
   }
-  .grid-sm--col-offset-9__right{
+  .grid-sm-col--offset-9__right{
     grid-column-end:10;
   }
-  .grid-sm--col-offset-10__right{
+  .grid-sm-col--offset-10__right{
     grid-column-end:11;
   }
-  .grid-sm--col-offset-11__right{
+  .grid-sm-col--offset-11__right{
     grid-column-end:12;
   }
-  .grid-sm--col-offset-12__right{
+  .grid-sm-col--offset-12__right{
     grid-column-end:13;
   }
   .is-hidden-sm{
@@ -4780,76 +5042,76 @@ body{
   }}
 
 @media (min-width:48em){
-  .grid-md--col-1{
+  .grid-md-col-1{
     grid-column:span 1;
   }
-  .grid-md--col-2{
+  .grid-md-col-2{
     grid-column:span 2;
   }
-  .grid-md--col-3{
+  .grid-md-col-3{
     grid-column:span 3;
   }
-  .grid-md--col-4{
+  .grid-md-col-4{
     grid-column:span 4;
   }
-  .grid-md--col-5{
+  .grid-md-col-5{
     grid-column:span 5;
   }
-  .grid-md--col-6{
+  .grid-md-col-6{
     grid-column:span 6;
   }
-  .grid-md--col-7{
+  .grid-md-col-7{
     grid-column:span 7;
   }
-  .grid-md--col-8{
+  .grid-md-col-8{
     grid-column:span 8;
   }
-  .grid-md--col-9{
+  .grid-md-col-9{
     grid-column:span 9;
   }
-  .grid-md--col-10{
+  .grid-md-col-10{
     grid-column:span 10;
   }
-  .grid-md--col-11{
+  .grid-md-col-11{
     grid-column:span 11;
   }
-  .grid-md--col-12{
+  .grid-md-col-12{
     grid-column:span 12;
   }
-  .grid-md--cols-1{
+  .grid-md-cols-1{
     grid-template-columns:repeat(1, 1fr);
   }
-  .grid-md--cols-2{
+  .grid-md-cols-2{
     grid-template-columns:repeat(2, 1fr);
   }
-  .grid-md--cols-3{
+  .grid-md-cols-3{
     grid-template-columns:repeat(3, 1fr);
   }
-  .grid-md--cols-4{
+  .grid-md-cols-4{
     grid-template-columns:repeat(4, 1fr);
   }
-  .grid-md--cols-5{
+  .grid-md-cols-5{
     grid-template-columns:repeat(5, 1fr);
   }
-  .grid-md--cols-6{
+  .grid-md-cols-6{
     grid-template-columns:repeat(6, 1fr);
   }
-  .grid-md--cols-7{
+  .grid-md-cols-7{
     grid-template-columns:repeat(7, 1fr);
   }
-  .grid-md--cols-8{
+  .grid-md-cols-8{
     grid-template-columns:repeat(8, 1fr);
   }
-  .grid-md--cols-9{
+  .grid-md-cols-9{
     grid-template-columns:repeat(9, 1fr);
   }
-  .grid-md--cols-10{
+  .grid-md-cols-10{
     grid-template-columns:repeat(10, 1fr);
   }
-  .grid-md--cols-11{
+  .grid-md-cols-11{
     grid-template-columns:repeat(11, 1fr);
   }
-  .grid-md--cols-12{
+  .grid-md-cols-12{
     grid-template-columns:repeat(12, 1fr);
   }
   .grid-md--gap{
@@ -4858,82 +5120,82 @@ body{
   .grid-md--no-gap{
     gap:0;
   }
-  .grid-md--col-offset-0{
+  .grid-md-col--offset-0{
     grid-column-start:1;
   }
-  .grid-md--col-offset-1{
+  .grid-md-col--offset-1{
     grid-column-start:2;
   }
-  .grid-md--col-offset-2{
+  .grid-md-col--offset-2{
     grid-column-start:3;
   }
-  .grid-md--col-offset-3{
+  .grid-md-col--offset-3{
     grid-column-start:4;
   }
-  .grid-md--col-offset-4{
+  .grid-md-col--offset-4{
     grid-column-start:5;
   }
-  .grid-md--col-offset-5{
+  .grid-md-col--offset-5{
     grid-column-start:6;
   }
-  .grid-md--col-offset-6{
+  .grid-md-col--offset-6{
     grid-column-start:7;
   }
-  .grid-md--col-offset-7{
+  .grid-md-col--offset-7{
     grid-column-start:8;
   }
-  .grid-md--col-offset-8{
+  .grid-md-col--offset-8{
     grid-column-start:9;
   }
-  .grid-md--col-offset-9{
+  .grid-md-col--offset-9{
     grid-column-start:10;
   }
-  .grid-md--col-offset-10{
+  .grid-md-col--offset-10{
     grid-column-start:11;
   }
-  .grid-md--col-offset-11{
+  .grid-md-col--offset-11{
     grid-column-start:12;
   }
-  .grid-md--col-offset-12{
+  .grid-md-col--offset-12{
     grid-column-start:13;
   }
-  .grid-md--col-offset-0__right{
+  .grid-md-col--offset-0__right{
     grid-column-end:1;
   }
-  .grid-md--col-offset-1__right{
+  .grid-md-col--offset-1__right{
     grid-column-end:2;
   }
-  .grid-md--col-offset-2__right{
+  .grid-md-col--offset-2__right{
     grid-column-end:3;
   }
-  .grid-md--col-offset-3__right{
+  .grid-md-col--offset-3__right{
     grid-column-end:4;
   }
-  .grid-md--col-offset-4__right{
+  .grid-md-col--offset-4__right{
     grid-column-end:5;
   }
-  .grid-md--col-offset-5__right{
+  .grid-md-col--offset-5__right{
     grid-column-end:6;
   }
-  .grid-md--col-offset-6__right{
+  .grid-md-col--offset-6__right{
     grid-column-end:7;
   }
-  .grid-md--col-offset-7__right{
+  .grid-md-col--offset-7__right{
     grid-column-end:8;
   }
-  .grid-md--col-offset-8__right{
+  .grid-md-col--offset-8__right{
     grid-column-end:9;
   }
-  .grid-md--col-offset-9__right{
+  .grid-md-col--offset-9__right{
     grid-column-end:10;
   }
-  .grid-md--col-offset-10__right{
+  .grid-md-col--offset-10__right{
     grid-column-end:11;
   }
-  .grid-md--col-offset-11__right{
+  .grid-md-col--offset-11__right{
     grid-column-end:12;
   }
-  .grid-md--col-offset-12__right{
+  .grid-md-col--offset-12__right{
     grid-column-end:13;
   }
   .m-md-auto{
@@ -7050,76 +7312,76 @@ body{
   }}
 
 @media (min-width:62em){
-  .grid-lg--col-1{
+  .grid-lg-col-1{
     grid-column:span 1;
   }
-  .grid-lg--col-2{
+  .grid-lg-col-2{
     grid-column:span 2;
   }
-  .grid-lg--col-3{
+  .grid-lg-col-3{
     grid-column:span 3;
   }
-  .grid-lg--col-4{
+  .grid-lg-col-4{
     grid-column:span 4;
   }
-  .grid-lg--col-5{
+  .grid-lg-col-5{
     grid-column:span 5;
   }
-  .grid-lg--col-6{
+  .grid-lg-col-6{
     grid-column:span 6;
   }
-  .grid-lg--col-7{
+  .grid-lg-col-7{
     grid-column:span 7;
   }
-  .grid-lg--col-8{
+  .grid-lg-col-8{
     grid-column:span 8;
   }
-  .grid-lg--col-9{
+  .grid-lg-col-9{
     grid-column:span 9;
   }
-  .grid-lg--col-10{
+  .grid-lg-col-10{
     grid-column:span 10;
   }
-  .grid-lg--col-11{
+  .grid-lg-col-11{
     grid-column:span 11;
   }
-  .grid-lg--col-12{
+  .grid-lg-col-12{
     grid-column:span 12;
   }
-  .grid-lg--cols-1{
+  .grid-lg-cols-1{
     grid-template-columns:repeat(1, 1fr);
   }
-  .grid-lg--cols-2{
+  .grid-lg-cols-2{
     grid-template-columns:repeat(2, 1fr);
   }
-  .grid-lg--cols-3{
+  .grid-lg-cols-3{
     grid-template-columns:repeat(3, 1fr);
   }
-  .grid-lg--cols-4{
+  .grid-lg-cols-4{
     grid-template-columns:repeat(4, 1fr);
   }
-  .grid-lg--cols-5{
+  .grid-lg-cols-5{
     grid-template-columns:repeat(5, 1fr);
   }
-  .grid-lg--cols-6{
+  .grid-lg-cols-6{
     grid-template-columns:repeat(6, 1fr);
   }
-  .grid-lg--cols-7{
+  .grid-lg-cols-7{
     grid-template-columns:repeat(7, 1fr);
   }
-  .grid-lg--cols-8{
+  .grid-lg-cols-8{
     grid-template-columns:repeat(8, 1fr);
   }
-  .grid-lg--cols-9{
+  .grid-lg-cols-9{
     grid-template-columns:repeat(9, 1fr);
   }
-  .grid-lg--cols-10{
+  .grid-lg-cols-10{
     grid-template-columns:repeat(10, 1fr);
   }
-  .grid-lg--cols-11{
+  .grid-lg-cols-11{
     grid-template-columns:repeat(11, 1fr);
   }
-  .grid-lg--cols-12{
+  .grid-lg-cols-12{
     grid-template-columns:repeat(12, 1fr);
   }
   .grid-lg--gap{
@@ -7128,85 +7390,85 @@ body{
   .grid-lg--no-gap{
     gap:0;
   }
-  .grid--gap,.grid-md--gap,.grid-sm--gap{
+  .grid-gap,.grid-md-gap,.grid-sm-gap{
     gap:var(--nappr-grid-gutter-gap-lg, 1.5rem);
   }
-  .grid-lg--col-offset-0{
+  .grid-lg-col--offset-0{
     grid-column-start:1;
   }
-  .grid-lg--col-offset-1{
+  .grid-lg-col--offset-1{
     grid-column-start:2;
   }
-  .grid-lg--col-offset-2{
+  .grid-lg-col--offset-2{
     grid-column-start:3;
   }
-  .grid-lg--col-offset-3{
+  .grid-lg-col--offset-3{
     grid-column-start:4;
   }
-  .grid-lg--col-offset-4{
+  .grid-lg-col--offset-4{
     grid-column-start:5;
   }
-  .grid-lg--col-offset-5{
+  .grid-lg-col--offset-5{
     grid-column-start:6;
   }
-  .grid-lg--col-offset-6{
+  .grid-lg-col--offset-6{
     grid-column-start:7;
   }
-  .grid-lg--col-offset-7{
+  .grid-lg-col--offset-7{
     grid-column-start:8;
   }
-  .grid-lg--col-offset-8{
+  .grid-lg-col--offset-8{
     grid-column-start:9;
   }
-  .grid-lg--col-offset-9{
+  .grid-lg-col--offset-9{
     grid-column-start:10;
   }
-  .grid-lg--col-offset-10{
+  .grid-lg-col--offset-10{
     grid-column-start:11;
   }
-  .grid-lg--col-offset-11{
+  .grid-lg-col--offset-11{
     grid-column-start:12;
   }
-  .grid-lg--col-offset-12{
+  .grid-lg-col--offset-12{
     grid-column-start:13;
   }
-  .grid-lg--col-offset-0__right{
+  .grid-lg-col--offset-0__right{
     grid-column-end:1;
   }
-  .grid-lg--col-offset-1__right{
+  .grid-lg-col--offset-1__right{
     grid-column-end:2;
   }
-  .grid-lg--col-offset-2__right{
+  .grid-lg-col--offset-2__right{
     grid-column-end:3;
   }
-  .grid-lg--col-offset-3__right{
+  .grid-lg-col--offset-3__right{
     grid-column-end:4;
   }
-  .grid-lg--col-offset-4__right{
+  .grid-lg-col--offset-4__right{
     grid-column-end:5;
   }
-  .grid-lg--col-offset-5__right{
+  .grid-lg-col--offset-5__right{
     grid-column-end:6;
   }
-  .grid-lg--col-offset-6__right{
+  .grid-lg-col--offset-6__right{
     grid-column-end:7;
   }
-  .grid-lg--col-offset-7__right{
+  .grid-lg-col--offset-7__right{
     grid-column-end:8;
   }
-  .grid-lg--col-offset-8__right{
+  .grid-lg-col--offset-8__right{
     grid-column-end:9;
   }
-  .grid-lg--col-offset-9__right{
+  .grid-lg-col--offset-9__right{
     grid-column-end:10;
   }
-  .grid-lg--col-offset-10__right{
+  .grid-lg-col--offset-10__right{
     grid-column-end:11;
   }
-  .grid-lg--col-offset-11__right{
+  .grid-lg-col--offset-11__right{
     grid-column-end:12;
   }
-  .grid-lg--col-offset-12__right{
+  .grid-lg-col--offset-12__right{
     grid-column-end:13;
   }
   .is-hidden-lg{
@@ -7229,6 +7491,27 @@ body{
     width:1px;
   }}
 
+@media (width >= 62em){
+  .nav{
+    justify-content:flex-start;
+  }
+  .nav .nav__list{
+    flex-flow:row nowrap;
+    margin:0 -1rem;
+    max-width:calc(100% + 1rem);
+  }
+  .nav .nav__item{
+    align-items:flex-start;
+    position:static;
+  }
+  .nav .nav__btn,.nav .nav__link{
+    font-size:.875rem;
+    font-weight:400;
+    line-height:1.5rem;
+    min-height:3.5rem;
+    padding:1rem;
+  }}
+
 @media (min-width:78em){
   h1{
     font-size:2.5rem;
@@ -7254,76 +7537,76 @@ body{
     font-size:1.25rem;
     line-height:1.75rem;
   }
-  .grid-xl--col-1{
+  .grid-xl-col-1{
     grid-column:span 1;
   }
-  .grid-xl--col-2{
+  .grid-xl-col-2{
     grid-column:span 2;
   }
-  .grid-xl--col-3{
+  .grid-xl-col-3{
     grid-column:span 3;
   }
-  .grid-xl--col-4{
+  .grid-xl-col-4{
     grid-column:span 4;
   }
-  .grid-xl--col-5{
+  .grid-xl-col-5{
     grid-column:span 5;
   }
-  .grid-xl--col-6{
+  .grid-xl-col-6{
     grid-column:span 6;
   }
-  .grid-xl--col-7{
+  .grid-xl-col-7{
     grid-column:span 7;
   }
-  .grid-xl--col-8{
+  .grid-xl-col-8{
     grid-column:span 8;
   }
-  .grid-xl--col-9{
+  .grid-xl-col-9{
     grid-column:span 9;
   }
-  .grid-xl--col-10{
+  .grid-xl-col-10{
     grid-column:span 10;
   }
-  .grid-xl--col-11{
+  .grid-xl-col-11{
     grid-column:span 11;
   }
-  .grid-xl--col-12{
+  .grid-xl-col-12{
     grid-column:span 12;
   }
-  .grid-xl--cols-1{
+  .grid-xl-cols-1{
     grid-template-columns:repeat(1, 1fr);
   }
-  .grid-xl--cols-2{
+  .grid-xl-cols-2{
     grid-template-columns:repeat(2, 1fr);
   }
-  .grid-xl--cols-3{
+  .grid-xl-cols-3{
     grid-template-columns:repeat(3, 1fr);
   }
-  .grid-xl--cols-4{
+  .grid-xl-cols-4{
     grid-template-columns:repeat(4, 1fr);
   }
-  .grid-xl--cols-5{
+  .grid-xl-cols-5{
     grid-template-columns:repeat(5, 1fr);
   }
-  .grid-xl--cols-6{
+  .grid-xl-cols-6{
     grid-template-columns:repeat(6, 1fr);
   }
-  .grid-xl--cols-7{
+  .grid-xl-cols-7{
     grid-template-columns:repeat(7, 1fr);
   }
-  .grid-xl--cols-8{
+  .grid-xl-cols-8{
     grid-template-columns:repeat(8, 1fr);
   }
-  .grid-xl--cols-9{
+  .grid-xl-cols-9{
     grid-template-columns:repeat(9, 1fr);
   }
-  .grid-xl--cols-10{
+  .grid-xl-cols-10{
     grid-template-columns:repeat(10, 1fr);
   }
-  .grid-xl--cols-11{
+  .grid-xl-cols-11{
     grid-template-columns:repeat(11, 1fr);
   }
-  .grid-xl--cols-12{
+  .grid-xl-cols-12{
     grid-template-columns:repeat(12, 1fr);
   }
   .grid-xl--gap{
@@ -7332,82 +7615,82 @@ body{
   .grid-xl--no-gap{
     gap:0;
   }
-  .grid-xl--col-offset-0{
+  .grid-xl-col--offset-0{
     grid-column-start:1;
   }
-  .grid-xl--col-offset-1{
+  .grid-xl-col--offset-1{
     grid-column-start:2;
   }
-  .grid-xl--col-offset-2{
+  .grid-xl-col--offset-2{
     grid-column-start:3;
   }
-  .grid-xl--col-offset-3{
+  .grid-xl-col--offset-3{
     grid-column-start:4;
   }
-  .grid-xl--col-offset-4{
+  .grid-xl-col--offset-4{
     grid-column-start:5;
   }
-  .grid-xl--col-offset-5{
+  .grid-xl-col--offset-5{
     grid-column-start:6;
   }
-  .grid-xl--col-offset-6{
+  .grid-xl-col--offset-6{
     grid-column-start:7;
   }
-  .grid-xl--col-offset-7{
+  .grid-xl-col--offset-7{
     grid-column-start:8;
   }
-  .grid-xl--col-offset-8{
+  .grid-xl-col--offset-8{
     grid-column-start:9;
   }
-  .grid-xl--col-offset-9{
+  .grid-xl-col--offset-9{
     grid-column-start:10;
   }
-  .grid-xl--col-offset-10{
+  .grid-xl-col--offset-10{
     grid-column-start:11;
   }
-  .grid-xl--col-offset-11{
+  .grid-xl-col--offset-11{
     grid-column-start:12;
   }
-  .grid-xl--col-offset-12{
+  .grid-xl-col--offset-12{
     grid-column-start:13;
   }
-  .grid-xl--col-offset-0__right{
+  .grid-xl-col--offset-0__right{
     grid-column-end:1;
   }
-  .grid-xl--col-offset-1__right{
+  .grid-xl-col--offset-1__right{
     grid-column-end:2;
   }
-  .grid-xl--col-offset-2__right{
+  .grid-xl-col--offset-2__right{
     grid-column-end:3;
   }
-  .grid-xl--col-offset-3__right{
+  .grid-xl-col--offset-3__right{
     grid-column-end:4;
   }
-  .grid-xl--col-offset-4__right{
+  .grid-xl-col--offset-4__right{
     grid-column-end:5;
   }
-  .grid-xl--col-offset-5__right{
+  .grid-xl-col--offset-5__right{
     grid-column-end:6;
   }
-  .grid-xl--col-offset-6__right{
+  .grid-xl-col--offset-6__right{
     grid-column-end:7;
   }
-  .grid-xl--col-offset-7__right{
+  .grid-xl-col--offset-7__right{
     grid-column-end:8;
   }
-  .grid-xl--col-offset-8__right{
+  .grid-xl-col--offset-8__right{
     grid-column-end:9;
   }
-  .grid-xl--col-offset-9__right{
+  .grid-xl-col--offset-9__right{
     grid-column-end:10;
   }
-  .grid-xl--col-offset-10__right{
+  .grid-xl-col--offset-10__right{
     grid-column-end:11;
   }
-  .grid-xl--col-offset-11__right{
+  .grid-xl-col--offset-11__right{
     grid-column-end:12;
   }
-  .grid-xl--col-offset-12__right{
+  .grid-xl-col--offset-12__right{
     grid-column-end:13;
   }
   heading-h1{