@appartmint/css-mint 2.0.11 → 3.0.1

package/dist/index.css

@@ -333,7 +333,7 @@ textarea {
 .mint-footer {
   display: flex;
   flex-direction: column;
-  max-width: 100%;
+  margin: 0 calc(var(--mint-p-exit) * 4);
   background: var(--mint-footer-bg);
   box-shadow: var(--mint-footer-shadow-s) var(--mint-footer-shadow-c);
   transition: transform 300ms;
@@ -480,15 +480,18 @@ textarea {
 
 .mint-theme-dark {
   --mint-header-bg: var(--mint-c-brand-2);
+  --mint-header-fg: var(--mint-c-fg);
+  --mint-header-link-fg: var(--mint-c-fg);
+  --mint-menu-btn-fg: var(--mint-c-fg);
 }
 
-body.mint-fixed #mint-header {
+body.mint-fixed .mint-header {
   position: fixed;
   top: 0;
   left: 0;
 }
 
-#mint-header {
+.mint-header {
   position: relative;
   width: 100%;
   color: var(--mint-header-fg);
@@ -497,13 +500,13 @@ body.mint-fixed #mint-header {
   height: var(--mint-header-h);
 }
 @media (min-width: 768px) {
-  #mint-header .mint-expand .mint-scroller {
+  .mint-header .mint-expand .mint-scroller {
     display: contents;
   }
-  #mint-header .mint-expand [aria-controls=mint-wrapper] {
+  .mint-header .mint-expand .mint-menu-btn {
     display: none;
   }
-  #mint-header .mint-expand #mint-wrapper {
+  .mint-header .mint-expand .mint-wrapper {
     position: static;
     display: flex !important;
     height: 100%;
@@ -511,41 +514,41 @@ body.mint-fixed #mint-header {
     padding: 0;
     z-index: 0;
   }
-  #mint-header .mint-expand #mint-wrapper, #mint-header .mint-expand #mint-wrapper nav {
+  .mint-header .mint-expand .mint-wrapper, .mint-header .mint-expand .mint-wrapper nav {
     height: var(--mint-header-h);
     background: var(--mint-c-glow-0) !important;
     overflow: visible;
   }
-  #mint-header .mint-expand #mint-wrapper nav {
+  .mint-header .mint-expand .mint-wrapper nav {
     border: none;
   }
-  #mint-header .mint-expand #mint-wrapper nav::before {
+  .mint-header .mint-expand .mint-wrapper nav::before {
     display: none;
   }
-  #mint-header .mint-expand #mint-wrapper nav > ul {
+  .mint-header .mint-expand .mint-wrapper nav > ul {
     flex-direction: row !important;
     justify-content: flex-end;
     flex-wrap: nowrap;
     overflow: visible;
     gap: 1rem;
   }
-  #mint-header .mint-expand #mint-wrapper nav > ul > li {
+  .mint-header .mint-expand .mint-wrapper nav > ul > li {
     position: relative;
     display: flex;
     width: 100%;
     max-width: 200px;
     text-align: center;
   }
-  #mint-header .mint-expand #mint-wrapper nav > ul > li button,
-  #mint-header .mint-expand #mint-wrapper nav > ul > li ul {
+  .mint-header .mint-expand .mint-wrapper nav > ul > li button,
+  .mint-header .mint-expand .mint-wrapper nav > ul > li ul {
     width: 100%;
     max-width: 200px;
   }
-  #mint-header .mint-expand #mint-wrapper nav > ul > li button {
+  .mint-header .mint-expand .mint-wrapper nav > ul > li button {
     font-size: 1.5rem;
     padding-right: 2rem;
   }
-  #mint-header .mint-expand #mint-wrapper nav > ul > li button::after {
+  .mint-header .mint-expand .mint-wrapper nav > ul > li button::after {
     content: "\f054";
     font-family: "Font Awesome 6 Pro";
     font-weight: 900;
@@ -556,67 +559,67 @@ body.mint-fixed #mint-header {
     margin-left: 1rem;
     transition: transform 300ms;
   }
-  #mint-header .mint-expand #mint-wrapper nav > ul > li button:hover #mint-header .mint-expand #mint-wrapper nav > ul > li button:focus-visible #mint-header .mint-expand #mint-wrapper nav > ul > li button[aria-expanded=true]::after {
+  .mint-header .mint-expand .mint-wrapper nav > ul > li button:hover .mint-header .mint-expand .mint-wrapper nav > ul > li button:focus-visible .mint-header .mint-expand .mint-wrapper nav > ul > li button[aria-expanded=true]::after {
     transform: translate(-50%, -50%) rotate(90deg);
   }
-  #mint-header .mint-expand #mint-wrapper nav > ul > li ul {
+  .mint-header .mint-expand .mint-wrapper nav > ul > li ul {
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     background-color: var(--mint-header-bg);
   }
-  #mint-header .mint-expand #mint-wrapper a {
+  .mint-header .mint-expand .mint-wrapper a {
     font-size: 1.25rem;
   }
-  #mint-header .mint-expand #mint-wrapper a, #mint-header .mint-expand #mint-wrapper button {
+  .mint-header .mint-expand .mint-wrapper a, .mint-header .mint-expand .mint-wrapper button {
     margin: 0.25rem 0;
   }
 }
 @media (max-width: 767px) {
-  #mint-header .mint-spread #mint-wrapper [aria-controls] {
+  .mint-header .mint-spread .mint-wrapper [aria-controls] {
     display: none;
   }
-  #mint-header .mint-spread #mint-wrapper [aria-controls] + ul {
+  .mint-header .mint-spread .mint-wrapper [aria-controls] + ul {
     display: flex !important;
     height: auto !important;
     margin-bottom: 3rem;
   }
-  #mint-header .mint-spread #mint-wrapper [aria-controls] + ul > li:first-child {
+  .mint-header .mint-spread .mint-wrapper [aria-controls] + ul > li:first-child {
     font-size: 1.5em;
   }
 }
-#mint-header .mint-spread:not(.mint-expand) #mint-wrapper [aria-controls] {
+.mint-header .mint-spread:not(.mint-expand) .mint-wrapper [aria-controls] {
   display: none;
 }
-#mint-header .mint-spread:not(.mint-expand) #mint-wrapper [aria-controls] + ul {
+.mint-header .mint-spread:not(.mint-expand) .mint-wrapper [aria-controls] + ul {
   display: flex !important;
   height: auto !important;
   margin-bottom: 3rem;
   overflow: visible;
 }
-#mint-header .mint-spread:not(.mint-expand) #mint-wrapper [aria-controls] + ul > li:first-child {
+.mint-header .mint-spread:not(.mint-expand) .mint-wrapper [aria-controls] + ul > li:first-child {
   font-size: 1.5em;
 }
-#mint-header .mint-tray #mint-wrapper a, #mint-header .mint-tray #mint-wrapper button {
+.mint-header .mint-tray .mint-wrapper a, .mint-header .mint-tray .mint-wrapper button {
   padding: 0.75rem;
   margin: 0.25rem 0;
   line-height: 1;
   font-size: 2em;
   width: 100%;
 }
-#mint-header .mint-tray #mint-wrapper button {
+.mint-header .mint-tray .mint-wrapper button {
   font-size: 3em;
 }
-#mint-header .mint-tray #mint-wrapper nav > ul {
+.mint-header .mint-tray .mint-wrapper nav > ul {
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: flex-start;
 }
-#mint-header .mint-tray #mint-wrapper nav li {
+.mint-header .mint-tray .mint-wrapper nav li {
   width: 100%;
 }
-#mint-header:not(.mint-border)::before {
+.mint-header:not(.mint-border)::before {
   content: "";
   position: absolute;
   top: 0;
@@ -624,21 +627,21 @@ body.mint-fixed #mint-header {
   width: 100%;
   background: var(--mint-header-bg);
 }
-#mint-header::before {
+.mint-header::before {
   height: var(--mint-header-h);
   z-index: -1;
 }
-#mint-header #mint-navbar {
+.mint-header .mint-navbar {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   height: 100%;
 }
-#mint-header #mint-navbar > :not(.mint-btns) a {
+.mint-header .mint-navbar > :not(.mint-btns) a {
   color: var(--mint-header-link-fg);
   text-decoration: none;
 }
-#mint-header .mint-logo {
+.mint-header .mint-logo {
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -648,20 +651,20 @@ body.mint-fixed #mint-header {
   text-decoration: none;
   white-space: nowrap;
 }
-#mint-header .mint-logo span {
+.mint-header .mint-logo span {
   display: none;
   margin: 0;
 }
 @media (min-width: 480px) {
-  #mint-header .mint-logo span {
+  .mint-header .mint-logo span {
     display: inline;
   }
 }
-#mint-header .mint-logo img {
+.mint-header .mint-logo img {
   width: auto;
   height: 100%;
 }
-#mint-header [aria-controls=mint-wrapper] {
+.mint-header .mint-menu-btn {
   display: inline-block;
   position: relative;
   padding: var(--mint-menu-btn-p);
@@ -672,19 +675,19 @@ body.mint-fixed #mint-header {
   box-shadow: var(--mint-menu-btn-shadow-s) var(--mint-menu-btn-shadow-c);
   z-index: 1000;
 }
-#mint-header [aria-controls=mint-wrapper]:hover {
+.mint-header .mint-menu-btn:hover {
   background: var(--mint-menu-btn-bg-hover);
 }
-#mint-header [aria-controls=mint-wrapper]:hover .mint-menu-icon, #mint-header [aria-controls=mint-wrapper]:hover .mint-menu-icon::before, #mint-header [aria-controls=mint-wrapper]:hover .mint-menu-icon::after {
+.mint-header .mint-menu-btn:hover .mint-menu-icon, .mint-header .mint-menu-btn:hover .mint-menu-icon::before, .mint-header .mint-menu-btn:hover .mint-menu-icon::after {
   background-color: var(--mint-menu-btn-fg-hover);
 }
 
-#mint-header [aria-controls=mint-wrapper] .mint-menu-icon {
+.mint-header .mint-menu-btn .mint-menu-icon {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
-#mint-header [aria-controls=mint-wrapper] .mint-menu-icon, #mint-header [aria-controls=mint-wrapper] .mint-menu-icon::before, #mint-header [aria-controls=mint-wrapper] .mint-menu-icon::after {
+.mint-header .mint-menu-btn .mint-menu-icon, .mint-header .mint-menu-btn .mint-menu-icon::before, .mint-header .mint-menu-btn .mint-menu-icon::after {
   content: "";
   display: block;
   position: absolute;
@@ -694,47 +697,47 @@ body.mint-fixed #mint-header {
   background-color: var(--mint-menu-btn-fg);
   transition: 300ms;
 }
-#mint-header [aria-controls=mint-wrapper] .mint-menu-icon::before {
+.mint-header .mint-menu-btn .mint-menu-icon::before {
   transform: translate(-50%, -200%);
 }
-#mint-header [aria-controls=mint-wrapper] .mint-menu-icon::after {
+.mint-header .mint-menu-btn .mint-menu-icon::after {
   transform: translate(-50%, 200%);
 }
-#mint-header [aria-controls=mint-wrapper][aria-expanded=true] .mint-menu-icon {
+.mint-header .mint-menu-btn[aria-expanded=true] .mint-menu-icon {
   background: transparent;
 }
-#mint-header [aria-controls=mint-wrapper][aria-expanded=true] .mint-menu-icon::before {
+.mint-header .mint-menu-btn[aria-expanded=true] .mint-menu-icon::before {
   transform: translate(-50%, 0) rotate(45deg);
 }
-#mint-header [aria-controls=mint-wrapper][aria-expanded=true] .mint-menu-icon::after {
+.mint-header .mint-menu-btn[aria-expanded=true] .mint-menu-icon::after {
   transform: translate(-50%, 0) rotate(-45deg);
 }
-#mint-header #mint-wrapper {
+.mint-header .mint-wrapper {
   background: var(--mint-card-bg);
 }
-#mint-header #mint-wrapper nav {
+.mint-header .mint-wrapper nav {
   flex-grow: 1;
   height: auto;
   overflow: visible;
 }
 @media (min-width: 1440px) {
-  #mint-header #mint-wrapper nav {
+  .mint-header .mint-wrapper nav {
     display: flex;
     align-items: center;
     justify-content: center;
   }
 }
-#mint-header #mint-wrapper nav > :last-child {
+.mint-header .mint-wrapper nav > :last-child {
   margin-bottom: 0;
 }
-#mint-header #mint-wrapper nav > ul {
+.mint-header .mint-wrapper nav > ul {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: visible;
 }
 @media (min-width: 1024px) {
-  #mint-header #mint-wrapper nav > ul {
+  .mint-header .mint-wrapper nav > ul {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -743,14 +746,14 @@ body.mint-fixed #mint-header {
     width: 100%;
   }
 }
-#mint-header #mint-wrapper a {
+.mint-header .mint-wrapper a {
   display: flex;
 }
-#mint-header #mint-wrapper button {
+.mint-header .mint-wrapper button {
   border: none;
 }
-#mint-header #mint-wrapper a,
-#mint-header #mint-wrapper button {
+.mint-header .mint-wrapper a,
+.mint-header .mint-wrapper button {
   align-items: center;
   justify-content: center;
   width: 100%;
@@ -766,47 +769,47 @@ body.mint-fixed #mint-header {
   transition-duration: 300ms;
 }
 @media (min-width: 480px) {
-  #mint-header #mint-wrapper a,
-  #mint-header #mint-wrapper button {
+  .mint-header .mint-wrapper a,
+  .mint-header .mint-wrapper button {
     padding: 1rem 1.5rem;
   }
-  #mint-header #mint-wrapper a i,
-  #mint-header #mint-wrapper button i {
+  .mint-header .mint-wrapper a i,
+  .mint-header .mint-wrapper button i {
     font-size: 0.5em;
   }
 }
-#mint-header #mint-wrapper a:hover, #mint-header #mint-wrapper button:hover #mint-header #mint-wrapper a:focus-visible, #mint-header #mint-wrapper button:focus-visible {
+.mint-header .mint-wrapper a:hover, .mint-header .mint-wrapper button:hover .mint-header .mint-wrapper a:focus-visible, .mint-header .mint-wrapper button:focus-visible {
   background-color: var(--mint-header-link-bg-hover);
   color: var(--mint-header-link-fg-hover);
 }
 
-#mint-header #mint-wrapper a.mint-active, #mint-header #mint-wrapper button.mint-active {
+.mint-header .mint-wrapper a.mint-active, .mint-header .mint-wrapper button.mint-active {
   text-decoration: underline;
 }
 
-#mint-header #mint-wrapper ul {
+.mint-header .mint-wrapper ul {
   list-style: none;
   margin-top: 0;
   margin-bottom: 1rem;
   padding-left: 0;
 }
-#mint-header #mint-wrapper ul li:last-child {
+.mint-header .mint-wrapper ul li:last-child {
   margin-bottom: 0;
 }
-#mint-header #mint-wrapper ul li:last-child ul {
+.mint-header .mint-wrapper ul li:last-child ul {
   margin-bottom: 0 !important;
 }
-#mint-header .mint-btns {
+.mint-header .mint-btns {
   flex-wrap: nowrap;
   flex-shrink: 0;
   justify-content: flex-end;
   margin-left: auto;
   overflow: visible;
 }
-#mint-header .mint-dropdown {
+.mint-header .mint-dropdown {
   background: var(--mint-header-bg);
 }
-#mint-header .mint-dropdown button {
+.mint-header .mint-dropdown button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -814,19 +817,19 @@ body.mint-fixed #mint-header {
   height: var(--mint-header-h);
   padding: calc(var(--mint-header-h) / 2);
 }
-#mint-header .mint-dropdown li {
+.mint-header .mint-dropdown li {
   padding: calc(var(--mint-header-h) / 2);
   line-height: 1;
   cursor: pointer;
 }
-#mint-header [aria-controls]:not([aria-controls=mint-wrapper]) + ul {
+.mint-header [aria-controls]:not(.mint-menu-btn) + ul {
   display: flex;
   flex-direction: column;
   height: 0;
   overflow: hidden;
   transition: height 300ms, margin 300ms;
 }
-#mint-header [aria-controls]:not([aria-controls=mint-wrapper])[aria-expanded]:not([aria-expanded=true]) + ul {
+.mint-header [aria-controls]:not(.mint-menu-btn)[aria-expanded]:not([aria-expanded=true]) + ul {
   margin: 0;
 }
 
@@ -1099,6 +1102,8 @@ body.mint-fixed #mint-header {
 .mint-theme-dark {
   --mint-btn-fg: var(--mint-c-fg);
   --mint-btn-bg: var(--mint-c-brand-2);
+  --mint-btn-fg-alt: var(--mint-c-brand-9);
+  --mint-btn-fg-alt-hover: var(--mint-c-fg);
 }
 
 button,
@@ -1426,6 +1431,11 @@ a:hover a:focus-visible a:active a.mint-active .fa-vimeo {
   --mint-link-c-hover: var(--mint-c-accent-2);
 }
 
+.mint-theme-dark {
+  --mint-link-c: var(--mint-c-brand-8);
+  --mint-link-c-hover: var(--mint-c-accent-7);
+}
+
 a {
   color: var(--mint-link-c);
   transition-duration: 300ms;
@@ -1749,6 +1759,7 @@ img, video {
   border-radius: var(--mint-card-br);
   width: 100%;
   overflow: hidden;
+  z-index: 10;
 }
 .mint-card .mint-content > * {
   margin-top: 0;
@@ -3591,94 +3602,52 @@ html, body {
 
 p {
   line-height: var(--mint-font-h);
+  margin: 0;
 }
 
 h1,
 .mint-h1 {
   font-family: var(--mint-font-title), var(--mint-font-title-backups);
   line-height: 1;
-}
-h1:first-child,
-.mint-h1:first-child {
-  margin-top: 0;
-}
-h1:last-child,
-.mint-h1:last-child {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 h2,
 .mint-h2 {
   font-family: var(--mint-font-title), var(--mint-font-title-backups);
   line-height: 1;
-}
-h2:first-child,
-.mint-h2:first-child {
-  margin-top: 0;
-}
-h2:last-child,
-.mint-h2:last-child {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 h3,
 .mint-h3 {
   font-family: var(--mint-font-title), var(--mint-font-title-backups);
   line-height: 1;
-}
-h3:first-child,
-.mint-h3:first-child {
-  margin-top: 0;
-}
-h3:last-child,
-.mint-h3:last-child {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 h4,
 .mint-h4 {
   font-family: var(--mint-font-title), var(--mint-font-title-backups);
   line-height: 1;
-}
-h4:first-child,
-.mint-h4:first-child {
-  margin-top: 0;
-}
-h4:last-child,
-.mint-h4:last-child {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 h5,
 .mint-h5 {
   font-family: var(--mint-font-title), var(--mint-font-title-backups);
   line-height: 1;
-}
-h5:first-child,
-.mint-h5:first-child {
-  margin-top: 0;
-}
-h5:last-child,
-.mint-h5:last-child {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 h6,
 .mint-h6 {
   font-family: var(--mint-font-title), var(--mint-font-title-backups);
   line-height: 1;
-}
-h6:first-child,
-.mint-h6:first-child {
-  margin-top: 0;
-}
-h6:last-child,
-.mint-h6:last-child {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 h1, .mint-h1 {
-  margin: 1rem 0;
   font-size: min(var(--mint-font-min-h1), var(--mint-font-mobile-h1));
 }
 @media (min-width: 480px) {
@@ -3693,7 +3662,6 @@ h1, .mint-h1 {
 }
 
 h2, .mint-h2 {
-  margin: 1rem 0;
   font-size: min(var(--mint-font-min-h2), var(--mint-font-mobile-h2));
 }
 @media (min-width: 480px) {
@@ -3708,7 +3676,6 @@ h2, .mint-h2 {
 }
 
 h3, .mint-h3 {
-  margin: 1rem 0;
   font-size: min(var(--mint-font-min-h3), var(--mint-font-mobile-h3));
 }
 @media (min-width: 480px) {
@@ -3723,7 +3690,6 @@ h3, .mint-h3 {
 }
 
 h4, .mint-h4 {
-  margin: 1rem 0;
   font-size: min(var(--mint-font-min-h4), var(--mint-font-mobile-h4));
 }
 @media (min-width: 480px) {
@@ -3738,7 +3704,6 @@ h4, .mint-h4 {
 }
 
 h5, .mint-h5 {
-  margin: 1rem 0;
   font-size: min(var(--mint-font-min-h5), var(--mint-font-mobile-h5));
 }
 @media (min-width: 480px) {
@@ -3753,7 +3718,6 @@ h5, .mint-h5 {
 }
 
 h6, .mint-h6 {
-  margin: 1rem 0;
   font-size: min(var(--mint-font-min-h6), var(--mint-font-mobile-h6));
 }
 @media (min-width: 480px) {
@@ -3768,7 +3732,6 @@ h6, .mint-h6 {
 }
 
 p, .mint-p {
-  margin: 1rem 0;
   font-size: min(var(--mint-font-min-p), var(--mint-font-mobile-p));
 }
 @media (min-width: 480px) {
@@ -3795,40 +3758,6 @@ p, .mint-p {
   }
 }
 
-:root {
-  --mint-texture-bg: ;
-  --mint-texture-bg-s: cover;
-  --mint-texture-bg-pos: top;
-  --mint-texture-blend: normal;
-  --mint-texture-filter: none;
-  --mint-texture-opacity: 1;
-  --mint-texture-alt-bg-s: cover;
-  --mint-texture-alt-bg-pos: center;
-  --mint-texture-alt-blend: normal;
-  --mint-texture-alt-mask: none;
-  --mint-texture-alt-opacity: 1;
-  --mint-texture-p: 1rem;
-  --mint-texture-bw: 1.25rem;
-  --mint-texture-bc: ;
-  --mint-texture-bi: ;
-  --mint-texture-bis: 42 42;
-  --mint-texture-bir: round;
-  --mint-texture-bst: solid;
-}
-
-.mint-frame {
-  height: fit-content;
-  background-color: var(--mint-card-bg);
-}
-
-.mint-card-grid .mint-image {
-  position: absolute;
-}
-
-.mint-overlay .mint-border::before, .mint-overlay .mint-frame::before, .mint-overlay .mint-card .mint-content::before, .mint-card .mint-overlay .mint-content::before, .mint-overlay .mint-card-grid .mint-image::before, .mint-card-grid .mint-overlay .mint-image::before, .mint-overlay .mint-texture::before {
-  z-index: 100;
-}
-
 .mint-theme-success {
   background-color: var(--mint-c-success-2);
   border-color: var(--mint-c-success-4);