@oslokommune/punkt-css 16.26.2 → 17.0.0

package/dist/css/components/footer.css

@@ -1,164 +1,288 @@
+@charset "UTF-8";
 /*
- * Footer element
+ * Footer: pkt-footer (sekundær + global) og pkt-footer-simple (kompakt + global)
+ *
+ *   --pkt-footer-bg           bakgrunn (default: grå sekundær)
+ *   --pkt-footer-fg           tekstfarge
+ *   --pkt-footer-link-hover   hover-farge på lenker (default: text-action-active)
  */
-.pkt-footer {
-  padding: 2.5rem 1.5rem;
-  background-color: var(--pkt-color-surface-strong-dark-blue);
-  color: var(--pkt-color-text-body-default);
-  display: flex;
-  align-items: center;
+.pkt-footer,
+.pkt-footer-simple {
+  display: block;
+  width: 100%;
+  container-type: inline-size;
+  container-name: pkt-footer;
+}
+
+.pkt-footer__band {
+  background-color: var(--pkt-footer-bg, var(--pkt-color-background-subtle, #f9f9f9));
+  color: var(--pkt-footer-fg, var(--pkt-color-text-body-default, #2a2859));
   letter-spacing: -0.2px;
   font-weight: 300;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer {
-    padding: 3.5rem 1.5rem;
-    justify-content: center;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 64rem) {
+    .pkt-footer__band {
+      letter-spacing: -0.2px;
+      font-weight: 300;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
   }
 }
-.pkt-footer__container {
-  max-width: 80rem;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 64rem) {
+    .pkt-footer__band {
+      letter-spacing: -0.2px;
+      font-weight: 300;
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+    }
+  }
+}
+.pkt-footer__band--global {
+  --pkt-footer-bg: var(--pkt-color-surface-strong-dark-blue, #2a2859);
+  --pkt-footer-fg: var(--pkt-color-text-body-light, #fff);
+  --pkt-footer-link-hover: var(--pkt-color-brand-blue-1000, #6fe9ff);
+}
+.pkt-footer__band a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-position: from-font;
 }
-.pkt-footer__title {
-  margin-bottom: 2rem;
-  margin-top: 0;
-  color: var(--pkt-color-text-body-default);
+.pkt-footer__band a:hover {
+  color: var(--pkt-footer-link-hover, var(--pkt-color-text-action-active, currentColor)) !important;
+}
+.pkt-footer__band h2 {
+  margin: 0 0 1rem;
+  color: inherit;
   letter-spacing: -0.2px;
   font-weight: 500;
-  font-size: 1.5rem;
-  line-height: 2.25rem;
+  font-size: 1.25rem;
+  line-height: 2rem;
 }
-.pkt-footer__text:last-child {
-  margin-bottom: 0;
-  margin-top: 2rem;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer__band h2 {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.375rem;
+      line-height: 2.125rem;
+    }
+  }
 }
-.pkt-footer__text:not(:last-child) {
-  margin-bottom: 2rem;
-  margin-top: 0;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer__band h2 {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.375rem;
+      line-height: 2.125rem;
+    }
+  }
 }
-.pkt-footer__list {
-  padding: 0;
-  margin: 0;
-  list-style: none;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 64rem) {
+    .pkt-footer__band h2 {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.5rem;
+      line-height: 2.25rem;
+    }
+  }
 }
-.pkt-footer__list-item {
-  word-break: break-word;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 64rem) {
+    .pkt-footer__band h2 {
+      letter-spacing: -0.2px;
+      font-weight: 500;
+      font-size: 1.5rem;
+      line-height: 2.25rem;
+    }
+  }
+}
+.pkt-footer__band p {
+  margin: 0 0 1rem;
 }
-.pkt-footer__list-item:not(:last-child) {
-  margin-bottom: 1rem;
+.pkt-footer__inner {
+  max-width: 75rem;
+  margin: 0 auto;
+  padding: 3.25rem 1rem;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer__list-item {
-    margin-bottom: 0;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer__inner {
+      padding: 3.25rem 2rem;
+    }
   }
 }
-.pkt-footer__link {
-  display: flex;
-  text-decoration: none !important;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer__inner {
+      padding: 3.25rem 2rem;
+    }
+  }
 }
-.pkt-footer__link:hover .pkt-footer__link-icon {
-  --fg-color: currentColor;
+.pkt-footer__inner--compact {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
-.pkt-footer__link-icon {
-  --fg-color: currentColor;
-  width: 24px;
-  height: 24px;
-  margin-right: 0.5rem;
-  flex-shrink: 0;
+.pkt-footer__sections {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+}
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer__sections {
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: 2rem;
+      row-gap: 3.25rem;
+    }
+  }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer__link-icon {
-    margin-top: 0;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer__sections {
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: 2rem;
+      row-gap: 3.25rem;
+    }
   }
 }
-.pkt-footer__social {
+.pkt-footer__link-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.pkt-footer__link-list > li {
+  word-break: break-word;
+}
+.pkt-footer__link-domain {
+  white-space: nowrap;
+}
+.pkt-footer__bottom {
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   gap: 2rem;
-  margin-top: 2.5rem;
+  margin-top: 1rem;
 }
-.pkt-footer__social:hover .pkt-footer__link-icon {
-  --fg-color: currentColor;
-}
-@media screen and (min-width: 80rem) {
-  .pkt-footer__social {
-    align-items: flex-end;
-    justify-content: end;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer__bottom {
+      grid-column: -2/-1;
+      margin-top: 0;
+    }
   }
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer__social-language {
-    justify-self: flex-start;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer__bottom {
+      grid-column: -2/-1;
+      margin-top: 0;
+    }
   }
 }
-.pkt-footer__social-icon {
-  --fg-color: currentColor;
-  width: 24px;
-  height: 24px;
+.pkt-footer__sections + .pkt-footer__bottom {
+  margin-top: 2rem;
 }
-.pkt-footer__social-icon-link:not(:last-child) {
-  margin-right: 1rem;
+.pkt-footer__bottom-links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 2rem;
 }
-
-.pkt-footer-simple {
-  padding: 2rem 1.5rem;
-  background-color: var(--pkt-color-surface-strong-dark-blue);
-  color: var(--pkt-color-text-body-default);
+.pkt-footer__some {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: flex;
   align-items: center;
-  letter-spacing: -0.2px;
-  font-weight: 300;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+  gap: 1rem;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer-simple {
-    justify-content: center;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer__some {
+      gap: 1.5rem;
+    }
   }
 }
-.pkt-footer-simple__container {
-  max-width: 80rem;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer__some {
+      gap: 1.5rem;
+    }
+  }
+}
+.pkt-footer__some a {
+  display: inline-flex;
+}
+.pkt-footer__some a:has(.pkt-footer__some-icon) {
+  text-decoration: none;
+}
+.pkt-footer__some-icon {
+  --fg-color: currentColor;
+  width: 2rem;
+  height: 2rem;
 }
+.pkt-footer__sections + .pkt-footer__consent {
+  margin-top: 2rem;
+}
+
 .pkt-footer-simple__list {
-  padding: 0;
-  margin: 0;
   list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer-simple__list-item {
-    display: inline-flex;
+@supports not (container-type: inline-size) {
+  @media screen and (min-width: 48rem) {
+    .pkt-footer-simple__list {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 1rem 2rem;
+    }
   }
 }
-.pkt-footer-simple__list-item:not(:last-child) {
-  margin-bottom: 1rem;
-}
-@media screen and (min-width: 80rem) {
-  .pkt-footer-simple__list-item:not(:last-child) {
-    margin-bottom: 0;
-    margin-right: 2rem;
+@supports (container-type: inline-size) {
+  @container pkt-footer (min-width: 48rem) {
+    .pkt-footer-simple__list {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 1rem 2rem;
+    }
   }
 }
-.pkt-footer-simple__link {
-  display: flex;
-  text-decoration: none !important;
+a.pkt-footer-simple__link {
+  display: inline-flex;
   align-items: flex-start;
+  gap: 0.5rem;
+  color: inherit;
+  text-decoration: none;
 }
-.pkt-footer-simple__link:hover .pkt-footer__link-icon {
-  --fg-color: currentColor;
+a.pkt-footer-simple__link:hover {
+  text-decoration: underline;
+  text-underline-position: from-font;
 }
+
 .pkt-footer-simple__link-icon {
   --fg-color: currentColor;
   width: 24px;
   height: 24px;
-  margin-right: 0.5rem;
   flex-shrink: 0;
 }
-@media screen and (min-width: 80rem) {
-  .pkt-footer-simple__link-icon {
-    margin-top: 0;
-  }
+.pkt-footer-simple__link-domain {
+  white-space: nowrap;
 }

package/dist/css/components/footer.min.css

@@ -1 +1 @@
-.pkt-footer{padding:2.5rem 1.5rem;background-color:var(--pkt-color-surface-strong-dark-blue);color:var(--pkt-color-text-body-default);display:flex;align-items:center;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}@media screen and (min-width: 80rem){.pkt-footer{padding:3.5rem 1.5rem;justify-content:center}}.pkt-footer__container{max-width:80rem}.pkt-footer__title{margin-bottom:2rem;margin-top:0;color:var(--pkt-color-text-body-default);letter-spacing:-0.2px;font-weight:500;font-size:1.5rem;line-height:2.25rem}.pkt-footer__text:last-child{margin-bottom:0;margin-top:2rem}.pkt-footer__text:not(:last-child){margin-bottom:2rem;margin-top:0}.pkt-footer__list{padding:0;margin:0;list-style:none}.pkt-footer__list-item{word-break:break-word}.pkt-footer__list-item:not(:last-child){margin-bottom:1rem}@media screen and (min-width: 80rem){.pkt-footer__list-item{margin-bottom:0}}.pkt-footer__link{display:flex;text-decoration:none !important}.pkt-footer__link:hover .pkt-footer__link-icon{--fg-color: currentColor}.pkt-footer__link-icon{--fg-color: currentColor;width:24px;height:24px;margin-right:.5rem;flex-shrink:0}@media screen and (min-width: 80rem){.pkt-footer__link-icon{margin-top:0}}.pkt-footer__social{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:2rem;margin-top:2.5rem}.pkt-footer__social:hover .pkt-footer__link-icon{--fg-color: currentColor}@media screen and (min-width: 80rem){.pkt-footer__social{align-items:flex-end;justify-content:end}}@media screen and (min-width: 80rem){.pkt-footer__social-language{justify-self:flex-start}}.pkt-footer__social-icon{--fg-color: currentColor;width:24px;height:24px}.pkt-footer__social-icon-link:not(:last-child){margin-right:1rem}.pkt-footer-simple{padding:2rem 1.5rem;background-color:var(--pkt-color-surface-strong-dark-blue);color:var(--pkt-color-text-body-default);display:flex;align-items:center;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}@media screen and (min-width: 80rem){.pkt-footer-simple{justify-content:center}}.pkt-footer-simple__container{max-width:80rem}.pkt-footer-simple__list{padding:0;margin:0;list-style:none}@media screen and (min-width: 80rem){.pkt-footer-simple__list-item{display:inline-flex}}.pkt-footer-simple__list-item:not(:last-child){margin-bottom:1rem}@media screen and (min-width: 80rem){.pkt-footer-simple__list-item:not(:last-child){margin-bottom:0;margin-right:2rem}}.pkt-footer-simple__link{display:flex;text-decoration:none !important;align-items:flex-start}.pkt-footer-simple__link:hover .pkt-footer__link-icon{--fg-color: currentColor}.pkt-footer-simple__link-icon{--fg-color: currentColor;width:24px;height:24px;margin-right:.5rem;flex-shrink:0}@media screen and (min-width: 80rem){.pkt-footer-simple__link-icon{margin-top:0}}
+.pkt-footer,.pkt-footer-simple{display:block;width:100%;container-type:inline-size;container-name:pkt-footer}.pkt-footer__band{background-color:var(--pkt-footer-bg, var(--pkt-color-background-subtle, #f9f9f9));color:var(--pkt-footer-fg, var(--pkt-color-text-body-default, #2a2859));letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}@supports not (container-type: inline-size){@media screen and (min-width: 64rem){.pkt-footer__band{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}}}@supports(container-type: inline-size){@container pkt-footer (min-width: 64rem){.pkt-footer__band{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}}}.pkt-footer__band--global{--pkt-footer-bg: var(--pkt-color-surface-strong-dark-blue, #2a2859);--pkt-footer-fg: var(--pkt-color-text-body-light, #fff);--pkt-footer-link-hover: var(--pkt-color-brand-blue-1000, #6fe9ff)}.pkt-footer__band a{color:inherit;text-decoration:underline;text-underline-position:from-font}.pkt-footer__band a:hover{color:var(--pkt-footer-link-hover, var(--pkt-color-text-action-active, currentColor)) !important}.pkt-footer__band h2{margin:0 0 1rem;color:inherit;letter-spacing:-0.2px;font-weight:500;font-size:1.25rem;line-height:2rem}@supports not (container-type: inline-size){@media screen and (min-width: 48rem){.pkt-footer__band h2{letter-spacing:-0.2px;font-weight:500;font-size:1.375rem;line-height:2.125rem}}}@supports(container-type: inline-size){@container pkt-footer (min-width: 48rem){.pkt-footer__band h2{letter-spacing:-0.2px;font-weight:500;font-size:1.375rem;line-height:2.125rem}}}@supports not (container-type: inline-size){@media screen and (min-width: 64rem){.pkt-footer__band h2{letter-spacing:-0.2px;font-weight:500;font-size:1.5rem;line-height:2.25rem}}}@supports(container-type: inline-size){@container pkt-footer (min-width: 64rem){.pkt-footer__band h2{letter-spacing:-0.2px;font-weight:500;font-size:1.5rem;line-height:2.25rem}}}.pkt-footer__band p{margin:0 0 1rem}.pkt-footer__inner{max-width:75rem;margin:0 auto;padding:3.25rem 1rem}@supports not (container-type: inline-size){@media screen and (min-width: 48rem){.pkt-footer__inner{padding:3.25rem 2rem}}}@supports(container-type: inline-size){@container pkt-footer (min-width: 48rem){.pkt-footer__inner{padding:3.25rem 2rem}}}.pkt-footer__inner--compact{padding-top:2rem;padding-bottom:2rem}.pkt-footer__sections{display:grid;grid-template-columns:1fr;gap:2rem}@supports not (container-type: inline-size){@media screen and (min-width: 48rem){.pkt-footer__sections{grid-template-columns:repeat(3, 1fr);column-gap:2rem;row-gap:3.25rem}}}@supports(container-type: inline-size){@container pkt-footer (min-width: 48rem){.pkt-footer__sections{grid-template-columns:repeat(3, 1fr);column-gap:2rem;row-gap:3.25rem}}}.pkt-footer__link-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}.pkt-footer__link-list>li{word-break:break-word}.pkt-footer__link-domain{white-space:nowrap}.pkt-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:2rem;margin-top:1rem}@supports not (container-type: inline-size){@media screen and (min-width: 48rem){.pkt-footer__bottom{grid-column:-2/-1;margin-top:0}}}@supports(container-type: inline-size){@container pkt-footer (min-width: 48rem){.pkt-footer__bottom{grid-column:-2/-1;margin-top:0}}}.pkt-footer__sections+.pkt-footer__bottom{margin-top:2rem}.pkt-footer__bottom-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1rem 2rem}.pkt-footer__some{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:1rem}@supports not (container-type: inline-size){@media screen and (min-width: 48rem){.pkt-footer__some{gap:1.5rem}}}@supports(container-type: inline-size){@container pkt-footer (min-width: 48rem){.pkt-footer__some{gap:1.5rem}}}.pkt-footer__some a{display:inline-flex}.pkt-footer__some a:has(.pkt-footer__some-icon){text-decoration:none}.pkt-footer__some-icon{--fg-color: currentColor;width:2rem;height:2rem}.pkt-footer__sections+.pkt-footer__consent{margin-top:2rem}.pkt-footer-simple__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}@supports not (container-type: inline-size){@media screen and (min-width: 48rem){.pkt-footer-simple__list{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:1rem 2rem}}}@supports(container-type: inline-size){@container pkt-footer (min-width: 48rem){.pkt-footer-simple__list{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:1rem 2rem}}}a.pkt-footer-simple__link{display:inline-flex;align-items:flex-start;gap:.5rem;color:inherit;text-decoration:none}a.pkt-footer-simple__link:hover{text-decoration:underline;text-underline-position:from-font}.pkt-footer-simple__link-icon{--fg-color: currentColor;width:24px;height:24px;flex-shrink:0}.pkt-footer-simple__link-domain{white-space:nowrap}