@ebrains/components 3.0.0 → 3.2.0

package/dist/collection/components/eds-footer/eds-footer.css

@@ -1,283 +1,223 @@
 /*
-Removes the default spacing and border for appropriate elements.
-*/
-p {
-  margin: 0;
-}
-
-footer {
-    position: relative;
+ * EBRAINS-wide footer styles. Mirrors the eds-docs landing-page design
+ * (4-column grid: brand + 3 link columns) so every consumer that drops
+ * `<eds-footer></eds-footer>` on a page renders the same canonical
+ * footer. Dark theme (`theme-inverse`) is the default; `theme-default`
+ * is the light variant for consumers whose page palette demands it.
+ *
+ * Token strategy: prefer existing EBRAINS CSS custom properties
+ * (--brand-black, --grey-light, --white, --brand-green) with literal
+ * fallbacks so the component renders consistently even when consumed
+ * outside the design-system token context.
+ */
+
+:host {
+  display: block;
 }
 
-.cursor-pointer {
-    cursor: pointer;
-}
-
-.ml-4 {
-    margin-left: 0.25rem;
-  }
-
-.container {
-    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
-    margin-right: auto;
-    margin-left: auto;
-}
-
-.container>* {
-    --container-outer-gutter: 0;
-    --breakout-container-outer-gutter: 0;
-}
-
-.bg-darker {
-    background-color: var(--grey-light);
-}
-
-.bg-strongest {
-    background-color: var(--brand-black);
-}
-
-.border-softest {
-    border-color: rgba(0, 0, 0, .05);
-}
-
-.border-inverse-softer {
-    border-color: rgba(255, 255, 255, .15);
-}
-
-.border-t-2 {
-    border-top-width: 2px;
-}
-
-.pt-20 {
-    padding-top: 1.25rem;
-}
-
-.pb-28 {
-    padding-bottom: 1.75rem;
-}
-
-.grid-layout {
-    display: grid;
-    grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
-    grid-gap: var(--inner-gutter);
+p {
+  margin: 0;
 }
 
-.grid-col-span-12 {
-    --container-grid-columns: 12;
-    grid-column: span 12 / span 12;
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
-.mt-28 {
-    margin-top: 1.75rem;
+.eds-footer-root {
+  position: relative;
+  padding: 4rem 4rem 2rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  font-family: var(--f-ui-02-fontFamily);
 }
 
-.gap-y-12 {
-    row-gap: 0.75rem;
-}
+/* ---- Theme variants ---- */
 
-.gap-x-12 {
-    -moz-column-gap: 0.75rem;
-    column-gap: 0.75rem;
+.eds-footer-root.theme-inverse {
+  background-color: var(--brand-black, #000000);
+  color: var(--grey-light, rgba(255, 255, 255, 0.7));
+  border-top-color: rgba(255, 255, 255, 0.06);
 }
 
-.inline {
-    display: inline;
+.eds-footer-root.theme-default {
+  background-color: var(--white, #ffffff);
+  color: var(--grey-dark, #4b5563);
+  border-top-color: rgba(0, 0, 0, 0.06);
 }
 
-.flex {
-    display: flex;
-}
+/* ---- Layout: container + grid ---- */
 
-.inline-flex {
-    display: inline-flex;
+.footer-container {
+  max-width: 1400px;
+  margin: 0 auto;
 }
 
-.flex-wrap {
-    flex-wrap: wrap;
+/* 4-column at desktop: brand (wide) + 3 link columns. Identical
+ * proportions to the original eds-docs hand-rolled footer
+ * (2fr repeat(3, 1fr)) so the visual result on the eds-docs landing
+ * is byte-for-byte the same as before the refactor. */
+.footer-grid {
+  display: grid;
+  grid-template-columns: 2fr repeat(3, 1fr);
+  gap: 4rem;
+  margin-bottom: 4rem;
 }
 
-.items-center {
-    align-items: center;
-}
+/* ---- Brand column ---- */
 
-.justify-center {
-    justify-content: center;
+.footer-brand-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
-.justify-between {
-    justify-content: space-between;
+.footer-flag-link {
+  display: inline-block;
+  width: 54px;
+  flex-shrink: 0;
+  border-radius: 4px;
 }
 
-.gap-20 {
-    gap: 1.25rem;
+.footer-flag-link:focus-visible {
+  outline: 3px solid var(--brand-green);
+  outline-offset: 2px;
 }
 
-.effect-focus {
-    outline-width: 3px;
-    outline-offset: 2px;
-    outline-color: var(--brand-green);
+.footer-flag-svg {
+  height: auto;
+  width: 100%;
+  display: block;
 }
 
-.effect-focus:focus-visible {
-    outline-style: solid;
+.footer-funded {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  max-width: 300px;
 }
 
-.focus-visible\:rounded-xs:focus-visible {
-    border-radius: 4px;
+.theme-inverse .footer-funded {
+  color: var(--grey-dark, rgba(255, 255, 255, 0.55));
 }
 
-.flex {
-    display: flex;
+.theme-default .footer-funded {
+  color: var(--grey-dark, #4b5563);
 }
 
-.w-\[54px\] {
-    width: 54px;
+.footer-copyright {
+  font-size: 0.875rem;
+  margin-top: 0.75rem;
 }
 
-.ml-0 {
-    margin-left: 0rem;
+.theme-inverse .footer-copyright {
+  color: var(--grey-dark, rgba(255, 255, 255, 0.55));
 }
 
-.order-last {
-    order: 9999;
+.theme-default .footer-copyright {
+  color: var(--grey-dark, #4b5563);
 }
 
-.w-full {
-    width: 100%;
-}
+/* ---- Link columns ---- */
 
-.h-auto {
-    height: auto;
+.footer-column-heading {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  margin: 0 0 1.5rem 0;
 }
 
-.f-ui-02 {
-    font-family: var(--f-ui-02-fontFamily);
-    font-weight: var(--f-ui-02-fontWeight);
-    font-size: var(--f-ui-02-fontSize);
-    line-height: var(--f-ui-02-lineHeight);
-    letter-spacing: var(--f-ui-02-letterSpacing);
+.theme-inverse .footer-column-heading {
+  color: var(--white, #ffffff);
 }
 
-.f-ui-04 {
-    font-family: var(--f-ui-04-fontFamily);
-    font-weight: var(--f-ui-04-fontWeight);
-    font-size: var(--f-ui-04-fontSize);
-    line-height: var(--f-ui-04-lineHeight);
-    letter-spacing: var(--f-ui-04-letterSpacing);
+.theme-default .footer-column-heading {
+  color: var(--brand-black, #111827);
 }
 
-.text-light {
-    color: var(--grey-light);
+.footer-column-list li {
+  margin-bottom: 0.75rem;
 }
 
-.text-default {
-    color: var(--brand-black);
+.footer-column-list li:last-child {
+  margin-bottom: 0;
 }
 
-.text-inverse {
-    color: var(--white);
+.footer-link,
+.footer-text-item {
+  font-size: 0.875rem;
+  text-decoration: none;
+  transition: color 0.3s ease;
 }
 
-.mt-4 {
-    margin-top: 0.25rem;
+.footer-link {
+  cursor: pointer;
 }
 
-.mr-4 {
-    margin-right: 0.25rem;
+.theme-inverse .footer-link,
+.theme-inverse .footer-text-item {
+  color: var(--grey-dark, rgba(255, 255, 255, 0.55));
 }
 
-.gap-12 {
-    gap: 0.75rem;
+.theme-default .footer-link,
+.theme-default .footer-text-item {
+  color: var(--grey-dark, #4b5563);
 }
 
-.inline-block {
-    display: inline-block;
+.footer-link:hover {
+  color: var(--brand-green);
 }
 
-.\!no-underline {
-    text-decoration-line: none !important;
+.footer-link:focus-visible {
+  outline: 2px solid var(--brand-green);
+  outline-offset: 2px;
+  border-radius: 2px;
 }
 
-.decoration-2 {
-    text-decoration-thickness: 2px;
-}
+/* ---- Social section (optional, above the grid) ---- */
 
-.underline-offset-4 {
-    text-underline-offset: 4px;
+.footer-social {
+  padding-bottom: 2rem;
+  margin-bottom: 2rem;
 }
 
-.hover\:\!underline:hover {
-    text-decoration-line: underline !important;
+.theme-inverse .footer-social {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
-.ml-auto {
-    margin-left: auto;
+.theme-default .footer-social {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 }
 
-.pl-12 {
-    padding-left: 0.75rem;
-}
+/* ---- Back-to-top floating button ---- */
 
-.opacity-0 {
+.footer-back-to-top {
+  position: absolute;
+  top: 1.5rem;
+  right: 2rem;
   opacity: 0;
+  transition: opacity 75ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.transition-all {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-}
-
-.transition {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-}
-
-.duration-75 {
-    transition-duration: 75ms;
-}
+/* ---- Responsive collapses ---- */
 
-@media (min-width: 750px) {
-    .md\:pt-28 {
-        padding-top: 1.75rem;
-    }
+@media (max-width: 1200px) {
+  .footer-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 3rem;
+  }
 }
 
-@media (min-width: 900px) {
-    .lg\:grid-col-span-5 {
-        --container-grid-columns: 5;
-        grid-column: span 5 / span 5;
-    }
-
-    .lg\:grid-col-span-6 {
-        --container-grid-columns: 6;
-        grid-column: span 6 / span 6;
-    }
-
-    .lg\:grid-col-start-7 {
-        grid-column-start: 7;
-    }
-
-    .lg\:mt-0 {
-        margin-top: 0rem;
-    }
-
-    .lg\:flex-nowrap {
-        flex-wrap: nowrap;
-    }
+@media (max-width: 768px) {
+  .eds-footer-root {
+    padding: 3rem 2rem 2rem;
+  }
 
-    .lg\:order-none {
-        order: 0;
-    }
+  .footer-grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    margin-bottom: 2rem;
+  }
 
-    .lg\:w-auto {
-        width: auto;
-    }
+  .footer-funded {
+    max-width: none;
+  }
 }
-
-@media (min-width: 1024px) {
-    .xl\:pb-40 {
-        padding-bottom: 2.5rem;
-    }
-}