@ivds/core 0.1.1 → 1.1.0

package/lib/components/footer/footer.css

@@ -1,466 +1,201 @@
-/* Footer component styles*/
-/* Provides styling for the IVDS footer component with multi-column layout and responsive stacking*/
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-descending-specificity */
 .ivds-footer {
-  padding: var(--spacing-8, 2rem) var(--spacing-6, 1.5rem);
-  background-color: var(--color-semantic-neutral-900, #0f172a);
-  color: var(--color-semantic-neutral-300, #cbd5e1);
-  line-height: var(--lineHeight-relaxed, 1.625);
-}
-@media (max-width: 768px) {
-  .ivds-footer .ivds-footer__grid {
-    grid-template-columns: 1fr 1fr;
-    gap: var(--spacing-6, 1.5rem) var(--spacing-4, 1rem);
-  }
+  --background-color: var(--ivds-surface-strong, #121a24);
+  --color: rgba(246, 248, 251, 0.88);
+  --border-color: rgba(255, 255, 255, 0.12);
+  position: relative;
+  padding: var(--spacing-12, 3rem) var(--spacing-8, 2rem) var(--spacing-6, 1.5rem);
+  background-color: var(--background-color);
+  color: var(--color);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  border-top: 1px solid var(--border-color);
 }
-@media (max-width: 480px) {
-  .ivds-footer .ivds-footer__grid {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-6, 1.5rem);
-  }
-  .ivds-footer .ivds-footer__section {
-    text-align: center;
-  }
-  .ivds-footer .ivds-footer__section:first-child {
-    text-align: left;
+@media (max-width: var(--breakpoint-lg, 1024px)) {
+  .ivds-footer {
+    padding: var(--spacing-10, 2.5rem) var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
   }
 }
-.ivds-footer {
-  /* Content container*/
-}
-.ivds-footer__content {
-  max-width: 1200px;
-  margin: 0 auto;
-  width: 100%;
-}
-.ivds-footer {
-  /* Multi-column grid layout*/
-}
 .ivds-footer__grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-gap: var(--spacing-8, 2rem);
-  gap: var(--spacing-8, 2rem);
-  margin-bottom: var(--spacing-8, 2rem);
-}
-@media (max-width: 1024px) {
-  .ivds-footer__grid {
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: var(--spacing-6, 1.5rem);
-    margin-bottom: var(--spacing-6, 1.5rem);
-  }
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--spacing-10, 2.5rem);
+  margin-bottom: var(--spacing-10, 2.5rem);
 }
-@media (max-width: 768px) {
+@media (max-width: var(--breakpoint-lg, 1024px)) {
   .ivds-footer__grid {
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: var(--spacing-4, 1rem);
-    margin-bottom: var(--spacing-4, 1rem);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacing-8, 2rem);
   }
 }
-@media (max-width: 480px) {
+@media (max-width: var(--breakpoint-sm, 640px)) {
   .ivds-footer__grid {
     grid-template-columns: 1fr;
-    gap: var(--spacing-6, 1.5rem);
   }
 }
-.ivds-footer {
-  /* Individual footer sections*/
+.ivds-footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3, 0.75rem);
+}
+.ivds-footer__brand-logo {
+  height: 38px;
+  width: auto;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.ivds-footer__brand-description {
+  max-width: 340px;
+  color: rgba(246, 248, 251, 0.78);
+  font-size: var(--fontSize-sm, 0.875rem);
+  line-height: var(--lineHeight-relaxed, 1.625);
+}
+.ivds-footer__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4, 1rem);
 }
 .ivds-footer__section-title {
-  margin: 0 0 var(--spacing-4, 1rem) 0;
-  font-size: var(--fontSize-lg, 1.125rem);
+  margin: 0;
+  color: rgba(246, 248, 251, 0.96);
+  font-size: var(--fontSize-xs, 0.75rem);
   font-weight: var(--fontWeight-semibold, 600);
-  color: var(--color-semantic-neutral-25, #fcfcfd);
-  line-height: var(--lineHeight-tight, 1.25);
-}
-@media (max-width: 768px) {
-  .ivds-footer__section-title {
-    font-size: var(--fontSize-base, 1rem);
-    margin-bottom: var(--spacing-3, 0.75rem);
-  }
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
 }
 .ivds-footer__section-list {
+  display: grid;
+  gap: var(--spacing-2, 0.5rem);
+  list-style: none;
   margin: 0;
   padding: 0;
-  list-style: none;
-}
-.ivds-footer__section-item {
-  margin-bottom: var(--spacing-2, 0.5rem);
-}
-.ivds-footer__section-item:last-child {
-  margin-bottom: 0;
 }
 .ivds-footer__section-link {
-  color: var(--color-semantic-neutral-300, #cbd5e1);
-  text-decoration: none;
+  color: rgba(246, 248, 251, 0.78);
   font-size: var(--fontSize-sm, 0.875rem);
-  transition: color 0.2s ease-in-out;
-  display: inline-flex;
-  align-items: center;
-}
-.ivds-footer__section-link:hover {
-  color: var(--color-semantic-neutral-25, #fcfcfd);
-}
-.ivds-footer__section-link:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-  border-radius: var(--borderRadius-sm, 0.25rem);
-}
-.ivds-footer__section-link svg {
-  margin-right: var(--spacing-2, 0.5rem);
-  flex-shrink: 0;
-}
-.ivds-footer {
-  /* Bottom section with copyright and legal links*/
-}
-.ivds-footer__bottom {
-  padding-top: var(--spacing-8, 2rem);
-  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-700, #374151);
-  text-align: center;
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-400, #9ca3af);
-}
-@media (max-width: 768px) {
-  .ivds-footer__bottom {
-    padding-top: var(--spacing-6, 1.5rem);
-    text-align: left;
-  }
-}
-.ivds-footer__bottom a {
-  color: var(--color-semantic-neutral-300, #cbd5e1);
+  font-weight: var(--fontWeight-normal, 400);
   text-decoration: none;
+  transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
-.ivds-footer__bottom a:hover {
-  color: var(--color-semantic-neutral-25, #fcfcfd);
+.ivds-footer__section-link:hover {
+  color: #fff;
   text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 0.12em;
 }
-.ivds-footer__bottom a:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-  border-radius: var(--borderRadius-sm, 0.25rem);
-}
-.ivds-footer__bottom--inline-links, .ivds-footer--bottom-inline .ivds-footer__bottom {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-4, 1rem);
-  flex-wrap: wrap;
+.ivds-footer__section-link:focus-visible {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
 }
-@media (max-width: 768px) {
-  .ivds-footer__bottom--inline-links, .ivds-footer--bottom-inline .ivds-footer__bottom {
-    justify-content: flex-start;
-    gap: var(--spacing-3, 0.75rem);
-  }
-}
-.ivds-footer {
-  /* Brand section elements*/
-}
-.ivds-footer__brand-logo {
-  height: 2rem;
-  width: auto;
-  margin-bottom: var(--spacing-3, 0.75rem);
-}
-@media (max-width: 768px) {
-  .ivds-footer__brand-logo {
-    height: calc(2rem * 0.875);
-  }
-}
-.ivds-footer__brand-name {
-  font-size: var(--fontSize-xl, 1.25rem);
-  font-weight: var(--fontWeight-bold, 700);
-  color: var(--color-semantic-neutral-25, #fcfcfd);
-  margin-bottom: var(--spacing-2, 0.5rem);
-}
-@media (max-width: 768px) {
-  .ivds-footer__brand-name {
-    font-size: var(--fontSize-lg, 1.125rem);
-  }
-}
-.ivds-footer__brand-description {
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-400, #9ca3af);
-  line-height: var(--lineHeight-relaxed, 1.625);
-  margin-bottom: var(--spacing-4, 1rem);
-}
-.ivds-footer {
-  /* Social links container*/
+.ivds-footer__section-link:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
 .ivds-footer__social {
   display: flex;
-  gap: var(--spacing-3, 0.75rem);
-  margin-top: var(--spacing-4, 1rem);
-}
-@media (max-width: 768px) {
-  .ivds-footer__social {
-    justify-content: center;
-    margin-top: var(--spacing-3, 0.75rem);
-  }
+  flex-wrap: wrap;
+  gap: var(--spacing-2, 0.5rem);
 }
-.ivds-footer__social a {
+.ivds-footer__social-link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: var(--borderRadius-md, 0.375rem);
-  background-color: var(--color-semantic-neutral-800, #1e293b);
-  color: var(--color-semantic-neutral-300, #cbd5e1);
-  transition: all 0.2s ease-in-out;
-}
-.ivds-footer__social a:hover {
-  background-color: var(--color-brand-primary-500, #f97316);
-  color: var(--color-semantic-neutral-25, #fcfcfd);
-  transform: translateY(-2px);
-}
-.ivds-footer__social a:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-}
-.ivds-footer__social a svg {
-  width: 1.25rem;
-  height: 1.25rem;
-  margin: 0;
-}
-.ivds-footer {
-  /* Newsletter signup elements*/
+  width: 36px;
+  height: 36px;
+  border: 1px solid rgba(255, 255, 255, 0.32);
+  border-radius: var(--ivds-radius-s, 0.125rem);
+  color: rgba(246, 248, 251, 0.92);
+  background-color: transparent;
+  transition: background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+}
+.ivds-footer__social-link:hover {
+  background-color: rgba(255, 255, 255, 0.09);
+  border-color: rgba(255, 255, 255, 0.45);
+  color: #fff;
+}
+.ivds-footer__social-link:focus-visible {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
+}
+.ivds-footer__social-link:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+.ivds-footer__social-link svg {
+  width: 18px;
+  height: 18px;
 }
-.ivds-footer__newsletter-form {
+.ivds-footer__bottom {
   display: flex;
-  gap: var(--spacing-2, 0.5rem);
-  margin-top: var(--spacing-3, 0.75rem);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4, 1rem);
+  padding-top: var(--spacing-6, 1.5rem);
+  border-top: 1px solid rgba(255, 255, 255, 0.16);
+  color: rgba(246, 248, 251, 0.74);
+  font-size: var(--fontSize-xs, 0.75rem);
 }
-@media (max-width: 480px) {
-  .ivds-footer__newsletter-form {
+@media (max-width: var(--breakpoint-md, 768px)) {
+  .ivds-footer__bottom {
     flex-direction: column;
+    align-items: flex-start;
   }
 }
-.ivds-footer__newsletter-input {
-  flex: 1;
-  padding: var(--spacing-3, 0.75rem);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-600, #475569);
-  border-radius: var(--borderRadius-md, 0.375rem);
-  background-color: var(--color-semantic-neutral-800, #1e293b);
-  color: var(--color-semantic-neutral-100, #f1f5f9);
-  font-size: var(--fontSize-sm, 0.875rem);
-}
-.ivds-footer__newsletter-input::-moz-placeholder {
-  color: var(--color-semantic-neutral-500, #64748b);
-}
-.ivds-footer__newsletter-input::placeholder {
-  color: var(--color-semantic-neutral-500, #64748b);
-}
-.ivds-footer__newsletter-input:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-  border-color: var(--color-brand-primary-500, #f97316);
-}
-@media (max-width: 480px) {
-  .ivds-footer__newsletter-input {
-    width: 100%;
-  }
-}
-.ivds-footer__newsletter-button {
-  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
-  background-color: var(--color-brand-primary-500, #f97316);
-  color: var(--color-semantic-neutral-25, #fcfcfd);
-  border: none;
-  border-radius: var(--borderRadius-md, 0.375rem);
-  font-size: var(--fontSize-sm, 0.875rem);
-  font-weight: var(--fontWeight-medium, 500);
-  cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-  white-space: nowrap;
-}
-.ivds-footer__newsletter-button:hover {
-  background-color: var(--color-brand-primary-600, #ea580c);
-}
-.ivds-footer__newsletter-button:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-}
-@media (max-width: 480px) {
-  .ivds-footer__newsletter-button {
-    width: 100%;
-  }
-}
-.ivds-footer__newsletter-description {
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-400, #9ca3af);
-  margin-bottom: var(--spacing-3, 0.75rem);
-  line-height: var(--lineHeight-relaxed, 1.625);
-}
-.ivds-footer {
-  /* Address styling*/
+.ivds-footer__bottom-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-4, 1rem);
 }
-.ivds-footer address {
-  font-style: normal;
-  line-height: var(--lineHeight-relaxed, 1.625);
+.ivds-footer__bottom-links a {
+  color: inherit;
+  text-decoration: none;
 }
-.ivds-footer address p {
-  margin-bottom: var(--spacing-2, 0.5rem);
+.ivds-footer__bottom-links a:hover {
+  color: #fff;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 0.12em;
 }
-.ivds-footer address p:last-child {
-  margin-bottom: 0;
+.ivds-footer__bottom-links a:focus-visible {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
 }
-.ivds-footer address strong {
-  color: var(--color-semantic-neutral-200, #e2e8f0);
-  font-weight: var(--fontWeight-medium, 500);
-}
-.ivds-footer {
-  /* Variants*/
+.ivds-footer__bottom-links a:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
 .ivds-footer--light {
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  color: var(--color-semantic-neutral-600, #475569);
+  --background-color: var(--ivds-surface-base, #fff);
+  --color: var(--ivds-text-secondary, #36414f);
+  --border-color: var(--ivds-border-subtle, #e2e7ec);
 }
 .ivds-footer--light .ivds-footer__section-title {
-  color: var(--color-semantic-neutral-900, #0f172a);
+  color: var(--ivds-text-primary, #121a24);
 }
 .ivds-footer--light .ivds-footer__section-link {
-  color: var(--color-semantic-neutral-600, #475569);
+  color: var(--ivds-text-secondary, #36414f);
 }
 .ivds-footer--light .ivds-footer__section-link:hover {
-  color: var(--color-semantic-neutral-900, #0f172a);
-}
-.ivds-footer--light .ivds-footer__bottom {
-  border-top-color: var(--color-semantic-neutral-200, #e2e8f0);
-  color: rgba(var(--color-semantic-neutral-600, #475569), 0.8);
-}
-.ivds-footer--minimal {
-  padding: var(--spacing-6, 1.5rem) var(--spacing-4, 1rem);
-  text-align: center;
-}
-.ivds-footer--minimal .ivds-footer__bottom {
-  padding-top: 0;
-  border-top: none;
+  color: var(--color-brand-accent-700, #0b4593);
 }
-@media (max-width: 768px) {
-  .ivds-footer--minimal {
-    padding: var(--spacing-4, 1rem);
-  }
-}
-.ivds-footer {
-  /* Grid layout variants*/
+.ivds-footer--light .ivds-footer__social-link {
+  border-color: var(--ivds-border-strong, #a1adba);
+  color: var(--ivds-text-secondary, #36414f);
 }
-.ivds-footer--two-columns .ivds-footer__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  grid-gap: var(--spacing-8, 2rem);
-  gap: var(--spacing-8, 2rem);
-  margin-bottom: var(--spacing-8, 2rem);
-}
-@media (max-width: 1024px) {
-  .ivds-footer--two-columns .ivds-footer__grid {
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: var(--spacing-6, 1.5rem);
-    margin-bottom: var(--spacing-6, 1.5rem);
-  }
+.ivds-footer--light .ivds-footer__social-link:hover {
+  border-color: var(--color-brand-accent-600, #1058b8);
+  background-color: var(--color-brand-accent-50, #eef4ff);
+  color: var(--color-brand-accent-700, #0b4593);
 }
-@media (max-width: 768px) {
-  .ivds-footer--two-columns .ivds-footer__grid {
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: var(--spacing-4, 1rem);
-    margin-bottom: var(--spacing-4, 1rem);
-  }
-}
-@media (max-width: 480px) {
-  .ivds-footer--two-columns .ivds-footer__grid {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-6, 1.5rem);
-  }
-}
-.ivds-footer--three-columns .ivds-footer__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-gap: var(--spacing-8, 2rem);
-  gap: var(--spacing-8, 2rem);
-  margin-bottom: var(--spacing-8, 2rem);
-}
-@media (max-width: 1024px) {
-  .ivds-footer--three-columns .ivds-footer__grid {
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: var(--spacing-6, 1.5rem);
-    margin-bottom: var(--spacing-6, 1.5rem);
-  }
-}
-@media (max-width: 768px) {
-  .ivds-footer--three-columns .ivds-footer__grid {
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: var(--spacing-4, 1rem);
-    margin-bottom: var(--spacing-4, 1rem);
-  }
-}
-@media (max-width: 480px) {
-  .ivds-footer--three-columns .ivds-footer__grid {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-6, 1.5rem);
-  }
-}
-.ivds-footer--five-columns .ivds-footer__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  grid-gap: var(--spacing-6, 1.5rem);
-  gap: var(--spacing-6, 1.5rem);
-  margin-bottom: var(--spacing-8, 2rem);
-}
-@media (max-width: 1024px) {
-  .ivds-footer--five-columns .ivds-footer__grid {
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: var(--spacing-6, 1.5rem);
-    margin-bottom: var(--spacing-6, 1.5rem);
-  }
-}
-@media (max-width: 768px) {
-  .ivds-footer--five-columns .ivds-footer__grid {
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: var(--spacing-4, 1rem);
-    margin-bottom: var(--spacing-4, 1rem);
-  }
-}
-@media (max-width: 480px) {
-  .ivds-footer--five-columns .ivds-footer__grid {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-6, 1.5rem);
-  }
-}
-.ivds-footer {
-  /* Bottom section variants*/
-}
-.ivds-footer--bottom-inline .ivds-footer__bottom {
-  padding-top: var(--spacing-8, 2rem);
-  border-top: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-700, #374151);
-  text-align: center;
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-400, #9ca3af);
-}
-@media (max-width: 768px) {
-  .ivds-footer--bottom-inline .ivds-footer__bottom {
-    padding-top: var(--spacing-6, 1.5rem);
-    text-align: left;
-  }
-}
-.ivds-footer--bottom-inline .ivds-footer__bottom a {
-  color: var(--color-semantic-neutral-300, #cbd5e1);
-  text-decoration: none;
-}
-.ivds-footer--bottom-inline .ivds-footer__bottom a:hover {
-  color: var(--color-semantic-neutral-25, #fcfcfd);
-  text-decoration: underline;
-}
-.ivds-footer--bottom-inline .ivds-footer__bottom a:focus {
-  outline: 2px solid var(--color-brand-primary-500, #f97316);
-  outline-offset: 2px;
-  border-radius: var(--borderRadius-sm, 0.25rem);
-}
-.ivds-footer--bottom-inline .ivds-footer__bottom--inline-links, .ivds-footer--bottom-inline .ivds-footer__bottom {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-4, 1rem);
-  flex-wrap: wrap;
+.ivds-footer--light .ivds-footer__bottom {
+  border-top-color: var(--ivds-border-subtle, #e2e7ec);
+  color: var(--ivds-text-muted, #4d5968);
 }
-@media (max-width: 768px) {
-  .ivds-footer--bottom-inline .ivds-footer__bottom--inline-links, .ivds-footer--bottom-inline .ivds-footer__bottom {
-    justify-content: flex-start;
-    gap: var(--spacing-3, 0.75rem);
-  }
+.ivds-footer__container {
+  width: 100%;
+  max-width: var(--container-max-width, 1440px);
+  margin: 0 auto;
 }

package/lib/components/footer/footer.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/footer/footer.scss%23sass","../../../src/components/footer/_footer-mixin.scss","../../../src/components/footer/footer.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AAEA,gDAAA;ACDA,gDAAA;ADKA;ECCE,uDAAA;ECHF,kCDIE;EACA,yCAAA;ECHF,kBAAA;EDME,gFAAA;EACA,yCAAA;EACA,mBAAA;EACA,6DAAA;EACA,yCAAA;ACJF;ADME;EDZF;ICaI,mFAAA;ECHF;AACF;AFPE;ECcA,aAAA;EACA,gDAAA;EACA,8BAAA;EACA,wCAAA;ACJF;ADME;EDnBA;IEgBA,gDAAA;IDKE,2BAAA;ECHF;AACF;ADKE;EDxBA;ICyBE,0BAAA;ECFF;AACF;AFpBE;EC0BA,aAAA;EACA,sBAAA;EACA,8BAAA;ACHF;ADKE;ECHF,YAAA;EDKI,WAAA;EACA,sBAAA;KAAA,mBAAA;ACHJ;ADME;EACE,gBAAA;EACA,gCAAA;EACA,uCAAA;EACA,6CAAA;ACJJ;AFhCE;ECyCA,aAAA;EACA,sBAAA;EACA,2BAAA;ACNF;ADQE;EACE,SAAA;EACA,gCAAA;EACA,sCAAA;EACA,4CAAA;EACA,yBAAA;EACA,sBAAA;ACNJ;ADSE;EACE,aAAA;EACA,6BAAA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;ACPJ;ADUE;EACE,gCAAA;EACA,uCAAA;EACA,0CAAA;EACA,qBAAA;EACA,8EAAA;ACRJ;ADUI;EACE,WAAA;EACA,0BAAA;EACA,8BAAA;EACA,6BAAA;ACRN;AC9EE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;ADgFJ;AC7EE;EACE,aAAA;EACA,gBAAA;AD+EJ;AFtEE;EC6EA,aAAA;EACA,eAAA;EACA,6BAAA;ACJF;ADME;EACE,oBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,2CAAA;EACA,6CAAA;EACA,gCAAA;EACA,6BAAA;EACA,wOACE;ACLN;ADSI;EACE,2CAAA;EACA,uCAAA;EACA,WAAA;ACPN;AC7GE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;AD+GJ;AC5GE;EACE,aAAA;EACA,gBAAA;AD8GJ;ADGI;EACE,WAAA;EACA,YAAA;ACDN;AFrGE;EC4GA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,2BAAA;EACA,qCAAA;EACA,+CAAA;EACA,gCAAA;EACA,sCAAA;ACJF;ADME;EDrHA;ICsHE,sBAAA;IACA,uBAAA;ECHF;AACF;ADKE;EACE,aAAA;EACA,eAAA;EACA,2BAAA;ACHJ;ADKI;EACE,cAAA;EACA,qBAAA;ACHN;ADKM;EACE,WAAA;EACA,0BAAA;EACA,8BAAA;EACA,6BAAA;ACHR;ACzJE;EACE,qHAAA;EACA,kDAAA;EACA,gBAAA;AD2JJ;ACxJE;EACE,aAAA;EACA,gBAAA;AD0JJ;AFxIE;EC2IA,kDAAA;EACA,4CAAA;EACA,kDAAA;ACAF;ADEE;EACE,wCAAA;ACAJ;ADGE;EACE,0CAAA;ACDJ;ADGI;EACE,6CAAA;ACDN;ADKE;EACE,gDAAA;EACA,0CAAA;ACHJ;ADKI;EACE,oDAAA;EACA,uDAAA;EACA,6CAAA;ACHN;ADOE;EACE,oDAAA;EACA,sCAAA;ACLJ;AF9JE;EACE,WAAA;EACA,6CAAA;EACA,cAAA;AEgKJ","file":"footer.css","sourcesContent":["// Footer component styles\r\n// Core styling for the IVDS footer including grid layouts, brand identity, and social links\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_footer-mixin' as footer;\r\n\r\n.ivds-footer {\r\n  @include footer.footer-base;\r\n  \r\n  // Elements\r\n  &__grid {\r\n    @include footer.footer-grid;\r\n  }\r\n  \r\n  &__brand {\r\n    @include footer.footer-brand;\r\n  }\r\n  \r\n  &__section {\r\n    @include footer.footer-section;\r\n  }\r\n  \r\n  &__social {\r\n    @include footer.footer-social;\r\n  }\r\n  \r\n  &__bottom {\r\n    @include footer.footer-bottom;\r\n  }\r\n  \r\n  // Variants\r\n  &--light {\r\n    @include footer.footer-light;\r\n  }\r\n\r\n  // Nested container support\r\n  &__container {\r\n    width: 100%;\r\n    max-width: var(--container-max-width, 1440px);\r\n    margin: 0 auto;\r\n  }\r\n}","// Footer component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin footer-base {\n  // Per-component CSS variable API\n  --background-color: var(--ivds-surface-strong, #121a24);\n  --color: rgba(246, 248, 251, 0.88);\n  --border-color: rgba(255, 255, 255, 0.12);\n\n  position: relative;\n  padding: var(--spacing-12, 3rem) var(--spacing-8, 2rem) var(--spacing-6, 1.5rem);\n  background-color: var(--background-color);\n  color: var(--color);\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n  border-top: 1px solid var(--border-color);\n\n  @media (max-width: var(--breakpoint-lg, 1024px)) {\n    padding: var(--spacing-10, 2.5rem) var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);\n  }\n}\n\n@mixin footer-grid($columns: 4) {\n  display: grid;\n  grid-template-columns: repeat($columns, minmax(0, 1fr));\n  gap: var(--spacing-10, 2.5rem);\n  margin-bottom: var(--spacing-10, 2.5rem);\n\n  @media (max-width: var(--breakpoint-lg, 1024px)) {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: var(--spacing-8, 2rem);\n  }\n\n  @media (max-width: var(--breakpoint-sm, 640px)) {\n    grid-template-columns: 1fr;\n  }\n}\n\n@mixin footer-brand {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-3, 0.75rem);\n\n  &-logo {\n    height: 38px;\n    width: auto;\n    object-fit: contain;\n  }\n\n  &-description {\n    max-width: 340px;\n    color: rgba(246, 248, 251, 0.78);\n    font-size: var(--fontSize-sm, 0.875rem);\n    line-height: var(--lineHeight-relaxed, 1.625);\n  }\n}\n\n@mixin footer-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-4, 1rem);\n\n  &-title {\n    margin: 0;\n    color: rgba(246, 248, 251, 0.96);\n    font-size: var(--fontSize-xs, 0.75rem);\n    font-weight: var(--fontWeight-semibold, 600);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n  }\n\n  &-list {\n    display: grid;\n    gap: var(--spacing-2, 0.5rem);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  &-link {\n    color: rgba(246, 248, 251, 0.78);\n    font-size: var(--fontSize-sm, 0.875rem);\n    font-weight: var(--fontWeight-normal, 400);\n    text-decoration: none;\n    transition: color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n    &:hover {\n      color: #fff;\n      text-decoration: underline;\n      text-decoration-thickness: 2px;\n      text-underline-offset: 0.12em;\n    }\n\n    @include focus-ring;\n  }\n}\n\n@mixin footer-social {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-2, 0.5rem);\n\n  &-link {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: 1px solid rgba(255, 255, 255, 0.32);\n    border-radius: var(--ivds-radius-s, 0.125rem);\n    color: rgba(246, 248, 251, 0.92);\n    background-color: transparent;\n    transition:\n      background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n      border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n      color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n    &:hover {\n      background-color: rgba(255, 255, 255, 0.09);\n      border-color: rgba(255, 255, 255, 0.45);\n      color: #fff;\n    }\n\n    @include focus-ring;\n\n    svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n}\n\n@mixin footer-bottom {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--spacing-4, 1rem);\n  padding-top: var(--spacing-6, 1.5rem);\n  border-top: 1px solid rgba(255, 255, 255, 0.16);\n  color: rgba(246, 248, 251, 0.74);\n  font-size: var(--fontSize-xs, 0.75rem);\n\n  @media (max-width: var(--breakpoint-md, 768px)) {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &-links {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing-4, 1rem);\n\n    a {\n      color: inherit;\n      text-decoration: none;\n\n      &:hover {\n        color: #fff;\n        text-decoration: underline;\n        text-decoration-thickness: 2px;\n        text-underline-offset: 0.12em;\n      }\n\n      @include focus-ring;\n    }\n  }\n}\n\n@mixin footer-light {\n  --background-color: var(--ivds-surface-base, #fff);\n  --color: var(--ivds-text-secondary, #36414f);\n  --border-color: var(--ivds-border-subtle, #e2e7ec);\n\n  .ivds-footer__section-title {\n    color: var(--ivds-text-primary, #121a24);\n  }\n\n  .ivds-footer__section-link {\n    color: var(--ivds-text-secondary, #36414f);\n\n    &:hover {\n      color: var(--color-brand-accent-700, #0b4593);\n    }\n  }\n\n  .ivds-footer__social-link {\n    border-color: var(--ivds-border-strong, #a1adba);\n    color: var(--ivds-text-secondary, #36414f);\n\n    &:hover {\n      border-color: var(--color-brand-accent-600, #1058b8);\n      background-color: var(--color-brand-accent-50, #eef4ff);\n      color: var(--color-brand-accent-700, #0b4593);\n    }\n  }\n\n  .ivds-footer__bottom {\n    border-top-color: var(--ivds-border-subtle, #e2e7ec);\n    color: var(--ivds-text-muted, #4d5968);\n  }\n}\n","// Footer component styles\r\n// Core styling for the IVDS footer including grid layouts, brand identity, and social links\r\n/* stylelint-disable no-descending-specificity */\r\n\r\n@use '_footer-mixin' as footer;\r\n\r\n.ivds-footer {\r\n  @include footer.footer-base;\r\n  \r\n  // Elements\r\n  &__grid {\r\n    @include footer.footer-grid;\r\n  }\r\n  \r\n  &__brand {\r\n    @include footer.footer-brand;\r\n  }\r\n  \r\n  &__section {\r\n    @include footer.footer-section;\r\n  }\r\n  \r\n  &__social {\r\n    @include footer.footer-social;\r\n  }\r\n  \r\n  &__bottom {\r\n    @include footer.footer-bottom;\r\n  }\r\n  \r\n  // Variants\r\n  &--light {\r\n    @include footer.footer-light;\r\n  }\r\n\r\n  // Nested container support\r\n  &__container {\r\n    width: 100%;\r\n    max-width: var(--container-max-width, 1440px);\r\n    margin: 0 auto;\r\n  }\r\n}","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n"]}

package/lib/components/footer/footer.min.css

@@ -1 +1 @@
-.ivds-footer{background-color:var(--color-semantic-neutral-900,#0f172a);color:var(--color-semantic-neutral-300,#cbd5e1);line-height:var(--lineHeight-relaxed,1.625);padding:var(--spacing-8,2rem) var(--spacing-6,1.5rem)}@media (max-width:768px){.ivds-footer .ivds-footer__grid{gap:var(--spacing-6,1.5rem) var(--spacing-4,1rem);grid-template-columns:1fr 1fr}}@media (max-width:480px){.ivds-footer .ivds-footer__grid{gap:var(--spacing-6,1.5rem);grid-template-columns:1fr}.ivds-footer .ivds-footer__section{text-align:center}.ivds-footer .ivds-footer__section:first-child{text-align:left}}.ivds-footer__content{margin:0 auto;max-width:1200px;width:100%}.ivds-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:var(--spacing-8,2rem);gap:var(--spacing-8,2rem);margin-bottom:var(--spacing-8,2rem)}@media (max-width:1024px){.ivds-footer__grid{gap:var(--spacing-6,1.5rem);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:var(--spacing-6,1.5rem)}}@media (max-width:768px){.ivds-footer__grid{gap:var(--spacing-4,1rem);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:var(--spacing-4,1rem)}}@media (max-width:480px){.ivds-footer__grid{gap:var(--spacing-6,1.5rem);grid-template-columns:1fr}}.ivds-footer__section-title{color:var(--color-semantic-neutral-25,#fcfcfd);font-size:var(--fontSize-lg,1.125rem);font-weight:var(--fontWeight-semibold,600);line-height:var(--lineHeight-tight,1.25);margin:0 0 var(--spacing-4,1rem) 0}@media (max-width:768px){.ivds-footer__section-title{font-size:var(--fontSize-base,1rem);margin-bottom:var(--spacing-3,.75rem)}}.ivds-footer__section-list{list-style:none;margin:0;padding:0}.ivds-footer__section-item{margin-bottom:var(--spacing-2,.5rem)}.ivds-footer__section-item:last-child{margin-bottom:0}.ivds-footer__section-link{align-items:center;color:var(--color-semantic-neutral-300,#cbd5e1);display:inline-flex;font-size:var(--fontSize-sm,.875rem);text-decoration:none;transition:color .2s ease-in-out}.ivds-footer__section-link:hover{color:var(--color-semantic-neutral-25,#fcfcfd)}.ivds-footer__section-link:focus{border-radius:var(--borderRadius-sm,.25rem);outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}.ivds-footer__section-link svg{flex-shrink:0;margin-right:var(--spacing-2,.5rem)}.ivds-footer__bottom{border-top:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-700,#374151);color:var(--color-semantic-neutral-400,#9ca3af);font-size:var(--fontSize-sm,.875rem);padding-top:var(--spacing-8,2rem);text-align:center}@media (max-width:768px){.ivds-footer__bottom{padding-top:var(--spacing-6,1.5rem);text-align:left}}.ivds-footer__bottom a{color:var(--color-semantic-neutral-300,#cbd5e1);text-decoration:none}.ivds-footer__bottom a:hover{color:var(--color-semantic-neutral-25,#fcfcfd);text-decoration:underline}.ivds-footer__bottom a:focus{border-radius:var(--borderRadius-sm,.25rem);outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}.ivds-footer--bottom-inline .ivds-footer__bottom,.ivds-footer__bottom--inline-links{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-4,1rem);justify-content:center}@media (max-width:768px){.ivds-footer--bottom-inline .ivds-footer__bottom,.ivds-footer__bottom--inline-links{gap:var(--spacing-3,.75rem);justify-content:flex-start}}.ivds-footer__brand-logo{height:2rem;margin-bottom:var(--spacing-3,.75rem);width:auto}@media (max-width:768px){.ivds-footer__brand-logo{height:1.75rem}}.ivds-footer__brand-name{color:var(--color-semantic-neutral-25,#fcfcfd);font-size:var(--fontSize-xl,1.25rem);font-weight:var(--fontWeight-bold,700);margin-bottom:var(--spacing-2,.5rem)}@media (max-width:768px){.ivds-footer__brand-name{font-size:var(--fontSize-lg,1.125rem)}}.ivds-footer__brand-description{color:var(--color-semantic-neutral-400,#9ca3af);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-relaxed,1.625);margin-bottom:var(--spacing-4,1rem)}.ivds-footer__social{display:flex;gap:var(--spacing-3,.75rem);margin-top:var(--spacing-4,1rem)}@media (max-width:768px){.ivds-footer__social{justify-content:center;margin-top:var(--spacing-3,.75rem)}}.ivds-footer__social a{align-items:center;background-color:var(--color-semantic-neutral-800,#1e293b);border-radius:var(--borderRadius-md,.375rem);color:var(--color-semantic-neutral-300,#cbd5e1);display:inline-flex;height:2.5rem;justify-content:center;transition:all .2s ease-in-out;width:2.5rem}.ivds-footer__social a:hover{background-color:var(--color-brand-primary-500,#f97316);color:var(--color-semantic-neutral-25,#fcfcfd);transform:translateY(-2px)}.ivds-footer__social a:focus{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}.ivds-footer__social a svg{height:1.25rem;margin:0;width:1.25rem}.ivds-footer__newsletter-form{display:flex;gap:var(--spacing-2,.5rem);margin-top:var(--spacing-3,.75rem)}@media (max-width:480px){.ivds-footer__newsletter-form{flex-direction:column}}.ivds-footer__newsletter-input{background-color:var(--color-semantic-neutral-800,#1e293b);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-600,#475569);border-radius:var(--borderRadius-md,.375rem);color:var(--color-semantic-neutral-100,#f1f5f9);flex:1;font-size:var(--fontSize-sm,.875rem);padding:var(--spacing-3,.75rem)}.ivds-footer__newsletter-input::-moz-placeholder{color:var(--color-semantic-neutral-500,#64748b)}.ivds-footer__newsletter-input::placeholder{color:var(--color-semantic-neutral-500,#64748b)}.ivds-footer__newsletter-input:focus{border-color:var(--color-brand-primary-500,#f97316);outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}@media (max-width:480px){.ivds-footer__newsletter-input{width:100%}}.ivds-footer__newsletter-button{background-color:var(--color-brand-primary-500,#f97316);border:none;border-radius:var(--borderRadius-md,.375rem);color:var(--color-semantic-neutral-25,#fcfcfd);cursor:pointer;font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-medium,500);padding:var(--spacing-3,.75rem) var(--spacing-4,1rem);transition:background-color .2s ease-in-out;white-space:nowrap}.ivds-footer__newsletter-button:hover{background-color:var(--color-brand-primary-600,#ea580c)}.ivds-footer__newsletter-button:focus{outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}@media (max-width:480px){.ivds-footer__newsletter-button{width:100%}}.ivds-footer__newsletter-description{color:var(--color-semantic-neutral-400,#9ca3af);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-relaxed,1.625);margin-bottom:var(--spacing-3,.75rem)}.ivds-footer address{font-style:normal;line-height:var(--lineHeight-relaxed,1.625)}.ivds-footer address p{margin-bottom:var(--spacing-2,.5rem)}.ivds-footer address p:last-child{margin-bottom:0}.ivds-footer address strong{color:var(--color-semantic-neutral-200,#e2e8f0);font-weight:var(--fontWeight-medium,500)}.ivds-footer--light{background-color:var(--color-semantic-neutral-50,#f8fafc);color:var(--color-semantic-neutral-600,#475569)}.ivds-footer--light .ivds-footer__section-title{color:var(--color-semantic-neutral-900,#0f172a)}.ivds-footer--light .ivds-footer__section-link{color:var(--color-semantic-neutral-600,#475569)}.ivds-footer--light .ivds-footer__section-link:hover{color:var(--color-semantic-neutral-900,#0f172a)}.ivds-footer--light .ivds-footer__bottom{border-top-color:var(--color-semantic-neutral-200,#e2e8f0);color:rgba(var(--color-semantic-neutral-600,#475569),.8)}.ivds-footer--minimal{padding:var(--spacing-6,1.5rem) var(--spacing-4,1rem);text-align:center}.ivds-footer--minimal .ivds-footer__bottom{border-top:none;padding-top:0}@media (max-width:768px){.ivds-footer--minimal{padding:var(--spacing-4,1rem)}}.ivds-footer--two-columns .ivds-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:var(--spacing-8,2rem);gap:var(--spacing-8,2rem);margin-bottom:var(--spacing-8,2rem)}@media (max-width:1024px){.ivds-footer--two-columns .ivds-footer__grid{gap:var(--spacing-6,1.5rem);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:var(--spacing-6,1.5rem)}}@media (max-width:768px){.ivds-footer--two-columns .ivds-footer__grid{gap:var(--spacing-4,1rem);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:var(--spacing-4,1rem)}}@media (max-width:480px){.ivds-footer--two-columns .ivds-footer__grid{gap:var(--spacing-6,1.5rem);grid-template-columns:1fr}}.ivds-footer--three-columns .ivds-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:var(--spacing-8,2rem);gap:var(--spacing-8,2rem);margin-bottom:var(--spacing-8,2rem)}@media (max-width:1024px){.ivds-footer--three-columns .ivds-footer__grid{gap:var(--spacing-6,1.5rem);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:var(--spacing-6,1.5rem)}}@media (max-width:768px){.ivds-footer--three-columns .ivds-footer__grid{gap:var(--spacing-4,1rem);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:var(--spacing-4,1rem)}}@media (max-width:480px){.ivds-footer--three-columns .ivds-footer__grid{gap:var(--spacing-6,1.5rem);grid-template-columns:1fr}}.ivds-footer--five-columns .ivds-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:var(--spacing-6,1.5rem);gap:var(--spacing-6,1.5rem);margin-bottom:var(--spacing-8,2rem)}@media (max-width:1024px){.ivds-footer--five-columns .ivds-footer__grid{gap:var(--spacing-6,1.5rem);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:var(--spacing-6,1.5rem)}}@media (max-width:768px){.ivds-footer--five-columns .ivds-footer__grid{gap:var(--spacing-4,1rem);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:var(--spacing-4,1rem)}}@media (max-width:480px){.ivds-footer--five-columns .ivds-footer__grid{gap:var(--spacing-6,1.5rem);grid-template-columns:1fr}}.ivds-footer--bottom-inline .ivds-footer__bottom{border-top:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-700,#374151);color:var(--color-semantic-neutral-400,#9ca3af);font-size:var(--fontSize-sm,.875rem);padding-top:var(--spacing-8,2rem);text-align:center}@media (max-width:768px){.ivds-footer--bottom-inline .ivds-footer__bottom{padding-top:var(--spacing-6,1.5rem);text-align:left}}.ivds-footer--bottom-inline .ivds-footer__bottom a{color:var(--color-semantic-neutral-300,#cbd5e1);text-decoration:none}.ivds-footer--bottom-inline .ivds-footer__bottom a:hover{color:var(--color-semantic-neutral-25,#fcfcfd);text-decoration:underline}.ivds-footer--bottom-inline .ivds-footer__bottom a:focus{border-radius:var(--borderRadius-sm,.25rem);outline:2px solid var(--color-brand-primary-500,#f97316);outline-offset:2px}.ivds-footer--bottom-inline .ivds-footer__bottom,.ivds-footer--bottom-inline .ivds-footer__bottom--inline-links{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-4,1rem);justify-content:center}@media (max-width:768px){.ivds-footer--bottom-inline .ivds-footer__bottom,.ivds-footer--bottom-inline .ivds-footer__bottom--inline-links{gap:var(--spacing-3,.75rem);justify-content:flex-start}}
+.ivds-footer{--background-color:var(--ivds-surface-strong,#121a24);--color:rgba(246,248,251,.88);--border-color:hsla(0,0%,100%,.12);background-color:var(--background-color);border-top:1px solid var(--border-color);color:var(--color);font-family:var(--fontFamily-primary,system-ui,sans-serif);padding:var(--spacing-12,3rem) var(--spacing-8,2rem) var(--spacing-6,1.5rem);position:relative}@media (max-width:var(--breakpoint-lg,1024px)){.ivds-footer{padding:var(--spacing-10,2.5rem) var(--spacing-4,1rem) var(--spacing-5,1.25rem)}}.ivds-footer__grid{display:grid;gap:var(--spacing-10,2.5rem);grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--spacing-10,2.5rem)}@media (max-width:var(--breakpoint-lg,1024px)){.ivds-footer__grid{gap:var(--spacing-8,2rem);grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:var(--breakpoint-sm,640px)){.ivds-footer__grid{grid-template-columns:1fr}}.ivds-footer__brand{display:flex;flex-direction:column;gap:var(--spacing-3,.75rem)}.ivds-footer__brand-logo{height:38px;-o-object-fit:contain;object-fit:contain;width:auto}.ivds-footer__brand-description{color:rgba(246,248,251,.78);font-size:var(--fontSize-sm,.875rem);line-height:var(--lineHeight-relaxed,1.625);max-width:340px}.ivds-footer__section{display:flex;flex-direction:column;gap:var(--spacing-4,1rem)}.ivds-footer__section-title{color:rgba(246,248,251,.96);font-size:var(--fontSize-xs,.75rem);font-weight:var(--fontWeight-semibold,600);letter-spacing:.08em;margin:0;text-transform:uppercase}.ivds-footer__section-list{display:grid;gap:var(--spacing-2,.5rem);list-style:none;margin:0;padding:0}.ivds-footer__section-link{color:rgba(246,248,251,.78);font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-normal,400);text-decoration:none;transition:color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease)}.ivds-footer__section-link:hover{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}.ivds-footer__section-link:focus-visible{box-shadow:none;outline:var(--ivds-focus-ring-width,3px) solid var(--ivds-focus-ring-color,var(--color-brand-accent-600,#1058b8));outline-offset:var(--ivds-focus-ring-offset,2px)}.ivds-footer__section-link:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-footer__social{display:flex;flex-wrap:wrap;gap:var(--spacing-2,.5rem)}.ivds-footer__social-link{align-items:center;background-color:transparent;border:1px solid hsla(0,0%,100%,.32);border-radius:var(--ivds-radius-s,.125rem);color:rgba(246,248,251,.92);display:inline-flex;height:36px;justify-content:center;transition:background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:36px}.ivds-footer__social-link:hover{background-color:hsla(0,0%,100%,.09);border-color:hsla(0,0%,100%,.45);color:#fff}.ivds-footer__social-link:focus-visible{box-shadow:none;outline:var(--ivds-focus-ring-width,3px) solid var(--ivds-focus-ring-color,var(--color-brand-accent-600,#1058b8));outline-offset:var(--ivds-focus-ring-offset,2px)}.ivds-footer__social-link:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-footer__social-link svg{height:18px;width:18px}.ivds-footer__bottom{align-items:center;border-top:1px solid hsla(0,0%,100%,.16);color:rgba(246,248,251,.74);display:flex;font-size:var(--fontSize-xs,.75rem);gap:var(--spacing-4,1rem);justify-content:space-between;padding-top:var(--spacing-6,1.5rem)}@media (max-width:var(--breakpoint-md,768px)){.ivds-footer__bottom{align-items:flex-start;flex-direction:column}}.ivds-footer__bottom-links{display:flex;flex-wrap:wrap;gap:var(--spacing-4,1rem)}.ivds-footer__bottom-links a{color:inherit;text-decoration:none}.ivds-footer__bottom-links a:hover{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}.ivds-footer__bottom-links a:focus-visible{box-shadow:none;outline:var(--ivds-focus-ring-width,3px) solid var(--ivds-focus-ring-color,var(--color-brand-accent-600,#1058b8));outline-offset:var(--ivds-focus-ring-offset,2px)}.ivds-footer__bottom-links a:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-footer--light{--background-color:var(--ivds-surface-base,#fff);--color:var(--ivds-text-secondary,#36414f);--border-color:var(--ivds-border-subtle,#e2e7ec)}.ivds-footer--light .ivds-footer__section-title{color:var(--ivds-text-primary,#121a24)}.ivds-footer--light .ivds-footer__section-link{color:var(--ivds-text-secondary,#36414f)}.ivds-footer--light .ivds-footer__section-link:hover{color:var(--color-brand-accent-700,#0b4593)}.ivds-footer--light .ivds-footer__social-link{border-color:var(--ivds-border-strong,#a1adba);color:var(--ivds-text-secondary,#36414f)}.ivds-footer--light .ivds-footer__social-link:hover{background-color:var(--color-brand-accent-50,#eef4ff);border-color:var(--color-brand-accent-600,#1058b8);color:var(--color-brand-accent-700,#0b4593)}.ivds-footer--light .ivds-footer__bottom{border-top-color:var(--ivds-border-subtle,#e2e7ec);color:var(--ivds-text-muted,#4d5968)}.ivds-footer__container{margin:0 auto;max-width:var(--container-max-width,1440px);width:100%}