@repobit/dex-system-design 0.18.1 → 0.19.1

package/src/components/footer/footer-lp.css.js

@@ -10,6 +10,11 @@ export default css`
     line-height: var(--typography-lineHeight-normal); 
   }
 
+.footer-secondary-nav {
+padding-top: var(--spacing-12);
+padding-bottom: var(--spacing-12);
+}
+
   bd-divider-vertical {
     display: inline-block;
     width: var(--form-input-default-borderWidth);
@@ -21,6 +26,7 @@ export default css`
     display: block;
     background-color: var(--color-neutral-0);
     opacity: 0.25;
+    margin: var(--spacing-16) 0;
   }
 
   footer {
@@ -34,168 +40,15 @@ export default css`
     justify-content: space-between;
     align-items: center;
     background-color: var(--color-blue-500);
+    padding: var(--spacing-24) 0;
   }
 
-  .footer-nav-main {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: var(--spacing-16);
-    flex-wrap: wrap;
-    padding-top: var(--spacing-24);
-    padding-bottom: var(--spacing-24);
-    font-size: var(--typography-body-regular-fontSize);
-    font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
-  }
-    
-  bd-footer-nav.second-nav {
-    font-weight: var(--typography-fontWeight-medium);
-  }
-
-  .footer-links {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: var(--spacing-32);
-    margin-bottom: var(--spacing-24);
-    flex-wrap: nowrap;
-  }
-
-  .footer-middle-line-lp {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    gap: (--spacing-16);
-    padding-top: var(--spacing-24);
-    padding-bottom: var(--spacing-24);
-
-  }
-
-  .footer-middle-line-lp > :last-child {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-    align-items: baseline;
-    margin: 0;
-    font-size: var(--typography-body-small-fontSize);
-    font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
-    font-weight: var(--typography-fontWeight-normal);
-    color: white;
-  }
-
-  .footer-middle-line-lp > * {
-    line-height: var(--typography-lineHeight-normal);
+  .footer-main-content {
+    padding: var(--spacing-24) 0;
   }
 
-  .second-nav {
-    flex-shrink: 0;
-    max-width: 60%;
-  }
-
-  .footer-address {
-    flex-grow: 1;
-    text-align: right;
-    margin-bottom: var(--spacing-16);
-  }
-
-  .footer-links-left {
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-32);
-  }
-
-  .footer-links-right {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-16);
-    min-width: 200px
-  }
-
-  .quick-links-section {
-    flex: 1 1 auto;
-    min-width: 200px;
-  }
-
-  .quick-links-title {
-    font-weight: var(--typography-fontWeight-semibold);
-    margin-bottom: var(--spacing-8);
-  }
-
-  .quick-links-columns {
-    display: grid;
-    gap: var(--spacing-8) var(--spacing-16);
-  }
-
-  .quick-links-column {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-4);
-  }
-
-  .footer-social-legal {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: var(--spacing-16);
-    border-top: var(--form-input-default-borderWidth) solid rgba(255,255,255,0.2);
-    padding-top: var(--spacing-16);
-    margin-bottom: var(--spacing-16);
-  }
-
-  .legal-links {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-16);
-  }
-
-  .social-icons {
-    display: flex;
-    gap: var(--spacing-16);
-  }
-
-  .footer-bottom {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--spacing-16);
-    border-top: var(--form-input-default-borderWidth) solid rgba(255,255,255,0.2);
-    padding-top: var(--spacing-16);
-  }
-
-  .locale-select {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-8);
-  }
-
-  a {
-    color: var(--color-neutral-0);
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  ::slotted(a[slot="social-top"]) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--dimension-32px);
-    height: var(--dimension-32px);
-  }
-
-  ::slotted(a[slot="social-top"] svg) {
-    width: 100%;
-    height: 100%;
-    fill: white;
-    color: white !important;
-  }
-
-  .footer-links-right.social-icons {
-    margin-top: var(--spacing-16);
+  .footer-secondary-nav {
+    padding: var(--spacing-24) 0;
   }
 
   .footer-extra {
@@ -204,107 +57,7 @@ export default css`
     align-items: center;
     gap: var(--spacing-16);
     padding-top: var(--spacing-24);
-    padding-bottom: var(--spacing-24);
-        flex-wrap: wrap;
-  }
-
-  .footer-anpc-lp {
-    flex: 1;
-    text-align: center;
-  }
-
-  .footer-locale {
-    text-align: right;
-  }
-
-  .footer-countries {
-    text-align: right;
-    position: relative;
-    display: inline-block;
-  }
-
-  .dropdown-btn {
-    cursor: pointer;
-    padding: var(--spacing-8) var(--spacing-16);
-    background: transparent;
-    border: var(--form-input-default-borderWidth) solid #ccc;
-    border-radius: var(--radius-sm);
-    font-size: var(--typography-body-small-fontSize);
-    color: white;
-  }
-
-  .dropdown-list {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    background: white;
-    border: var(--form-input-default-borderWidth) solid #ccc;
-    border-radius: var(--radius-sm);
-    display: none;
-    min-width: 160px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    z-index: 1000;
-  }
-
-  .dropdown-list.open {
-    display: block;
-  }
-
-  .dropdown-list ::slotted(a) {
-    display: block;
-    padding: var(--spacing-8) var(--spacing-16);
-    color: #333;
-    text-decoration: none;
-  }
-
-  .dropdown-list ::slotted(a:hover) {
-    background: #f2f2f2;
-  }
-
-  .countries-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    background: white;
-    color: black;
-    padding: var(--spacing-8);
-    border: var(--form-input-default-borderWidth) solid #ccc;
-    z-index: 10;
-  }
-
-  .country-toggle {
-    background: none;
-    border: var(--form-input-default-borderWidth) solid white;
-    color: white;
-    padding: var(--spacing-8) var(--spacing-16);
-    cursor: pointer;
-    border-radius: var(--form-input-large-borderRadius);
-    font-family: 'IBM Plex Sans', sans-serif;
-    font-size: var(--typography-body-small-fontSize);
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacing-8);
-  }
-
-  .country-toggle img {
-    width: var(--dimension-20px);
-    height: var(--dimension-20px);
-    object-fit: contain;
-  }
-
-  .country-toggle .arrow {
-    margin-left: var(--spacing-4);
-  }
-
-  .arrow img {
-    display: inline-block;
-    width: var(--dimension-20px);
-    height: auto;
-    vertical-align: middle;
-  }
-
-  .countries-container {
-    margin-top: var(--spacing-4);
+    flex-wrap: wrap;
   }
 
   .footer-copy {
@@ -312,26 +65,9 @@ export default css`
     color: var(--color-gray-400);
   }
 
-  .footer-countries-container {
-    display: inline-flex;
-    gap: 10rem;
-  }
-
-  bd-footer-links-group a.selected {
-    font-weight: var(--typography-fontWeight-bold);
-    position: relative;
-    padding-left: var(--spacing-12);
-  }
-
-  bd-footer-links-group a.selected::before {
-    content: '•';
-    position: absolute;
-    left: 0;
-    color: white;
-  }
-
-  .footer-top-bleed {
-    background: var(--color-blue-500);
+  .footer-anpc-lp {
+    flex: 1;
+    text-align: center;
   }
 
   .container {
@@ -340,286 +76,66 @@ export default css`
     padding: 0 var(--spacing-16);
   }
 
-  .footer-top {
-    padding-top: var(--spacing-24);
-    padding-bottom: var(--spacing-24);
+  .footer-top-bleed {
+    background: var(--color-blue-500);
   }
 
-  a.impressum {
-    display: none;
-    color: white;
+  /* Stiluri pentru link-uri */
+  a {
+    color: var(--color-neutral-0);
     text-decoration: none;
   }
 
-  a.impressum.visible {
-    display: inline;
-  }
-
-  .country-selected {
-    font-weight: var(--typography-fontWeight-bold);
-    position: relative;
-    padding-left: var(--spacing-24);
-  }
-
-  .country-selected .bullet {
-    position: absolute;
-    left: 0;
-    color: white;
-  }
-
-  slot[name="countries"]::slotted(a) {
-    color: black;
-    text-decoration: none;
-    padding: var(--spacing-4) var(--spacing-8);
-    display: inline-block;
+  a:hover {
+    text-decoration: underline;
   }
 
-  slot[name="countries"]::slotted(a.selected) {
-    background-color: #007bff;
-    color: white;
-    border-radius: var(--radius-sm);
+  /* Stiluri de accesibilitate */
+  a:focus {
+    outline: none;
+    border: 2px solid var(--color-blue-500);
+    box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
+    border-radius: 4px;
   }
 
-  .footer-countries-container a.selected {
-    font-weight: var(--typography-fontWeight-bold);
-    color: var(--color-primary);
-  }
-.footer-countries-container {
-    margin-top: var(--spacing-16);
-    padding: var(--spacing-24);
-    border-radius: var(--radius-lg);
-    transition: all 0.3s ease;
-    width: 90%;
+  /* Stiluri pentru navigație */
+  .footer-nav-main {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--spacing-16);
+    flex-wrap: wrap;
+    font-size: var(--typography-body-regular-fontSize);
+    font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
   }
-  .footer-countries-container {
-  position: relative;
-  padding-top: 40px;
-}
-
-.close-countries-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: var(--spacing-6);
-  z-index: 10;
-}
-
-.close-countries-button img {
-  width: var(--dimension-20px);
-  height: var(--dimension-20px);
-  display: block;
-}
- 
- @media (max-width: 768px) {
-    :host {
-      // background-color: var(--color-neutral-0) !important;
-      // color: #151719 !important;
-      // --nav-link-color: #151719 !important;
-    }
 
-    .footer-nav-main {
+  /* Responsive styles */
+  @media (max-width: 768px) {
+    .footer-top {
       flex-direction: column;
-      align-items: flex-start;
-      gap: var(--spacing-8);
-    }
-
-    .footer-nav-main bd-divider-vertical {
-      display: none !important;
-    }
-
-    // .footer-nav-main a {
-    //   color: #151719 !important;
-    //   padding: 0.25rem 0;
-    // }
-
-    // bd-footer a[slot="nav"] svg {
-    //   fill: #151719 !important;
-    // }
-
-    // * {
-    //   color: #151719 !important;
-    // }
-
-    // bd-divider-vertical,
-    // bd-divider-horizontal {
-    //   background-color: #151719 !important;
-    // }
-
-    // a {
-    //   color: #151719 !important;
-    // }
-
-    // a:hover {
-    //   color: #151719 !important;
-    // }
-
-    // ::slotted(a[slot="social-top"] svg) {
-    //   fill: #151719 !important;
-    //   color: #151719 !important;
-    // }
-
-    // nav.footer-nav-main ::slotted(a[slot="nav"]) {
-    //   color: #151719 !important;
-    // }
-
-    // .country-toggle {
-    //   color: #151719 !important;
-    //   border-color: #151719 !important;
-    // }
-
-    // .footer-top {
-    //   flex-direction: row;
-    //   align-items: flex-start;
-    //   gap: var(--spacing-16);
-    //   background-color: var(--color-neutral-0) !important;
-    //   padding: var(--spacing-32) 0 0;
-    // }
-
-    .footer-links {
-      flex-direction: column;
-      gap: var(--spacing-32);
-    }
-
-    .footer-middle-line-lp {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--spacing-16);
-    }
-
-    .footer-middle-line-lp > :last-child {
-      justify-content: flex-start;
-      text-align: left;
-    }
-
-    .footer-social-legal,
-    .footer-bottom {
-      flex-direction: column;
-      align-items: flex-start;
       gap: var(--spacing-16);
-    }
-
-    .footer-address {
-      text-align: left;
+      text-align: center;
     }
 
     .footer-extra {
       flex-direction: column;
-      align-items: flex-start;
-    }
-
-    .footer-anpc-lp,
-    .footer-locale,
-    .footer-countries {
-      text-align: left;
-      width: 100%;
-    }
-
-    .footer-nav-main a[slot="nav"] {
-      color: #151719 !important;
+      align-items: center;
+      text-align: center;
     }
 
-    bd-footer-links-group {
-      margin-bottom: 10px;
+    .footer-anpc-lp {
+      order: -1;
+      margin-bottom: var(--spacing-16);
     }
 
-    .second-nav .footer-nav-main {
+    .footer-nav-main {
       flex-direction: column;
       align-items: flex-start;
-      gap: var(--spacing-14);
+      gap: var(--spacing-8);
     }
 
-    .second-nav .footer-nav-main bd-divider-vertical {
+    .footer-nav-main bd-divider-vertical {
       display: none !important;
     }
-
-    .second-nav .footer-nav-main a {
-      color: #151719 !important;
-      padding: var(--spacing-4) 0;
-      display: block;
-    }
-    
-    .footer-links-right.social-icons a svg {
-      fill: #151719 !important;
-      color: #151719 !important;
-    }
-  //   .footer-top-bleed {
-  //   background: transparent;
-  // }
-  .social-icons {
-    gap: var(--spacing-40);
-    align-items: center;
-    margin:auto;
-}
-.second-nav {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-8);
-}
-.second-nav.footer-nav-main{
-display: inline-grid;}
-.second-nav bd-divider-vertical {
-  display: none !important;
-}
-
-.second-nav a {
-  color: #151719 !important;
-  padding: var(--spacing-4) 0;
-  display: block;
-}
-  .footer-countries-toggle{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    margin: var(--spacing-16) 0;
-    }
- .country-toggle{
-  width: 270px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0 auto;
-      }
-      .footer-countries-container {
-      display: block !important;
-      }
-}
-
-.footer-countries-container {
-  display: flex;
-  gap: var(--spacing-32);
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-/* Pentru desktop - 3 coloane */
-.footer-countries-container bd-footer-links-group {
-  flex: 1;
-  min-width: calc(33.33% - var(--spacing-32));
-}
-
-/* Pentru tableta - 2 coloane */
-@media (max-width: 1024px) and (min-width: 769px) {
-  .footer-countries-container bd-footer-links-group {
-    flex: 0 0 calc(50% - var(--spacing-16));
-    min-width: calc(50% - var(--spacing-16));
   }
-}
-
-/* Pentru mobil - 1 coloană */
-@media (max-width: 768px) {
-  .footer-countries-container {
-    flex-direction: column;
-    gap: var(--spacing-16);
-  }
-  
-  .footer-countries-container bd-footer-links-group {
-    flex: 0 0 100%;
-    width: 100%;
-  }
-}
 `;