@repobit/dex-system-design 0.11.0 → 0.14.0

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

@@ -0,0 +1,625 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: block;
+    background-color: var(--color-blue-600);
+    color: var(--color-neutral-0);
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: var(--typography-body-small-fontSize);
+    line-height: var(--typography-lineHeight-normal); 
+  }
+
+  bd-divider-vertical {
+    display: inline-block;
+    width: var(--form-input-default-borderWidth);
+    height: var(--dimension-20px);
+    background-color: var(--color-neutral-0);
+  }
+
+  bd-divider-horizontal {
+    display: block;
+    background-color: var(--color-neutral-0);
+    opacity: 0.25;
+  }
+
+  footer {
+    padding: var(--spacing-32) var(--spacing-16);
+    max-width: 1200px;
+    margin: auto;
+  }
+
+  .footer-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--color-blue-500);
+  }
+
+  .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);
+  }
+
+  .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-extra {
+    display: flex;
+    justify-content: space-between;
+    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);
+  }
+
+  .footer-copy {
+    font-size: var(--typography-fontSize-sm);
+    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);
+  }
+
+  .container {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-16);
+  }
+
+  .footer-top {
+    padding-top: var(--spacing-24);
+    padding-bottom: var(--spacing-24);
+  }
+
+  a.impressum {
+    display: none;
+    color: white;
+    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;
+  }
+
+  slot[name="countries"]::slotted(a.selected) {
+    background-color: #007bff;
+    color: white;
+    border-radius: var(--radius-sm);
+  }
+
+  .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%;
+  }
+  .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 {
+      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;
+    }
+
+    .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;
+    }
+
+    bd-footer-links-group {
+      margin-bottom: 10px;
+    }
+
+    .second-nav .footer-nav-main {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--spacing-14);
+    }
+
+    .second-nav .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%;
+  }
+}
+`;