footer.site-footer { background-color: var(--bg-light-primary); border-top: 1px solid var(--border-primary-dark); position: absolute; bottom: 0; width: 100%; @include body-sm; height: $footer-height; ul { list-style: none; margin: var(--spacing-00); li { display: inline-block; margin: var(--spacing-07) var(--spacing-04); } i { font-size: var(--font-size-05); } } li.lngOption { text-align: left; display: list-item; img { vertical-align: text-bottom; } a:hover, a:focus { color: var(--content-primary-dark); &:visited { color: var(--content-primary-dark); } } } a { color: var(--content-secondary-dark); &:hover, &:focus { color: var(--content-secondary-dark); } } } .site-footer-content { @extend .container-fluid; } .sprite-icon-lang { display: inline-block; vertical-align: middle; } .fat-footer { background: var(--bg-dark-primary); color: var(--content-secondary-dark); display: flex; flex-direction: column; .fat-footer-container { margin: var(--spacing-11) auto; @include media-breakpoint-down(sm) { margin: var(--spacing-11) 0; } } a { color: var(--content-secondary-dark); text-decoration: none; &:hover { color: var(--content-secondary-dark); text-decoration: underline; } &:visited { color: var(--content-secondary-dark); } } .footer-brand-container { flex: 1; } .fat-footer-sections { display: grid; column-gap: var(--spacing-07); padding: 0 var(--spacing-07) var(--spacing-07); } .footer-brand { display: block; height: 37px; width: 130px; background-image: url('../../../../public/img/ol-brand/overleaf-white.svg'); background-size: contain; background-repeat: no-repeat; background-position: left center; } .footer-section-heading { color: var(--content-secondary-dark); @include heading-sm; margin-bottom: var(--spacing-07); margin-top: var(--spacing-07); } .footer-section ul { @include body-sm; } .footer-section li { padding-bottom: var(--spacing-04); } #footer-brand { grid-column: 1/-1; margin-top: var(--spacing-07); } .fat-footer-base { color: var(--content-disabled); @include body-sm; #language-picker-toggle { color: var(--content-secondary-dark); } .fat-footer-base-meta a:not(.dropdown-toggle) { color: inherit; } .language-picker .dropdown-menu { .dropdown-header { display: none; /* hiding rather than removing as still needed in the thin footer */ } .dropdown-item { &.active { color: var(--green-70); } &:hover { text-decoration: none; } } } } .fat-footer-base-item { display: flex; white-space: nowrap; } @include media-breakpoint-down(md) { .fat-footer-sections { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, auto); } .fat-footer-base { display: flex; flex-direction: column; align-items: center; .fat-footer-base-section { display: flex; align-items: center; } .fat-footer-base-social { order: 1; } .fat-footer-base-meta { display: flex; flex-direction: column-reverse; align-items: center; order: 2; } .fat-footer-base-item { flex-wrap: wrap; padding: var(--spacing-02); margin: var(--spacing-06); } .fat-footer-base-meta .fat-footer-base-item { gap: var(--spacing-09); justify-content: center; @include media-breakpoint-down(sm) { gap: var(--spacing-06); } } .fat-footer-base-social .fat-footer-base-item { gap: var(--spacing-07); margin-top: var(--spacing-00); } .fat-footer-social { @include heading-lg; } .fat-footer-base-copyright { order: 2; } } } @include media-breakpoint-up(md) { .fat-footer-container { width: (map-get($grid-breakpoints, 'md') - ($spacing-04 * 2)); } #footer-brand { grid-column: auto; grid-row: 1/-1; } .fat-footer-sections { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); } .footer-section:last-of-type { grid-column: 4; } .fat-footer-base { display: flex; justify-content: space-between; margin: var(--spacing-07) auto; .fat-footer-base-section { display: flex; align-items: center; } .fat-footer-base-item { padding: var(--spacing-02); margin: var(--spacing-02); } .fat-footer-base-meta .fat-footer-base-item { gap: var(--spacing-07); } .fat-footer-social { margin: var(--spacing-07) var(--spacing-02); @include heading-lg; } } } @include media-breakpoint-up(lg) { .fat-footer-container { width: (map-get($grid-breakpoints, 'lg') - $spacing-07); } .fat-footer-sections { grid-template-columns: repeat(4, 1fr); } } @include media-breakpoint-up(xl) { .fat-footer-container { width: (map-get($grid-breakpoints, 'xl') - $spacing-09); } .fat-footer-sections { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; } .footer-section:last-of-type { grid-column: 6; } } } .cookie-banner { @include body-sm; padding: var(--spacing-05) var(--spacing-07); position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; color: var(--content-secondary); background: var(--bg-light-secondary); box-shadow: var(--spacing-00) var(--spacing-02) var(--spacing-04) var(--spacing-00) #0000001a; .cookie-banner-actions { padding-top: var(--spacing-04); } @include media-breakpoint-up(md) { align-items: center; display: flex; flex-wrap: wrap; .cookie-banner-content { flex: 1; } .cookie-banner-actions { flex-shrink: 0; white-space: nowrap; padding-top: var(--spacing-00); } } } .website-redesign-fat-footer { .fat-footer-container { @include media-breakpoint-down(sm) { margin: var(--spacing-11) 0; } } &.fat-footer { background: var(--content-primary-dark); color: var(--content-primary); a { color: var(--content-primary); &:visited { color: var(--content-primary); } } .footer-section-heading { color: var(--content-primary); } h2 { font-weight: 400; } .fat-footer-base { color: var(--content-primary); } } .footer-brand { background-image: url('../../../../public/img/ol-brand/overleaf-black.svg'); } @include media-breakpoint-down(sm) { .fat-footer-sections { grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(6, auto); } } }