.footer { background: linear-gradient(135deg, var(--color-footer-bg), color-mix(in srgb, var(--color-footer-bg), black 2%)); color: var(--color-footer-text); font-family: GoogleSansFlex, "Google Sans", ui-sans-serif,system-ui,sans-serif; font-size: 18px; line-height: 28px; position: relative; z-index: 150; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary) 50%, var(--color-primary)); opacity: 0.6; } .footer-columns + .footer-copy { background-color: rgba(0, 0, 0, 0.25); border-top: 1px solid rgba(255, 255, 255, 0.05); } .footer-copy { font-size: 0.9em; opacity: 0.9; } :where(.footer) a:not(.button) { color: var(--color-footer-links); transition: all var(--transition); position: relative; } :where(.footer) a:not(.button)::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: currentColor; transition: width var(--transition); } :where(.footer) a:not(.button):hover { color: var(--color-footer-title); transform: translateX(2px); } :where(.footer) a:not(.button):hover::after { width: 100%; } :where(.footer .widget) ul { list-style: none; margin-inline-start: 0; } :where(.footer .widget) ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: var(--space-third) 0; transition: all var(--transition); position: relative; } :where(.footer .widget) ul li:last-child { border: 0; } :where(.footer .widget) ul li::before { content: '\e80f'; font-family: 'md-icon'; position: absolute; left: 0; opacity: 0; transform: translateX(-10px); transition: all var(--transition); color: var(--color-primary); font-size: 0.75em; } :where(.footer .widget) ul li:hover { padding-inline-start: var(--space-half); } :where(.footer .widget) ul li:hover::before { opacity: 1; transform: translateX(0); } :where(.footer) .footer-title { color: var(--color-footer-title); font-size: 27px; letter-spacing: 0.05em; line-height: 39px; margin-block-end: var(--space-half); position: relative; padding-block-end: var(--space-third); } :where(.footer) .footer-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: linear-gradient(90deg, var(--color-primary), transparent); border-radius: var(--radius-full); } :where(.footer) [class*="md-icon-"] { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-m); margin-inline-end: var(--space-xs); transition: all var(--transition); font-size: 1.1em; } :where(.footer) [class*="md-icon-"]:hover { background: var(--color-primary); transform: translateY(-3px) rotate(5deg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .footer-copy p { margin: 0; } .footer-copy a:not(.button) { font-weight: 600; } :where(.footer) .menu { list-style: none; margin: 0; padding: 0; } :where(.footer) .menu li { margin: 0; padding: 0; } :where(.footer) .menu li::before { display: none; } :where(.footer) .menu a { padding: var(--space-third) var(--space-half); border-radius: var(--radius-s); background: rgba(255, 255, 255, 0.05); transition: all var(--transition); } :where(.footer) .menu a:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); } @media (max-width: 992px) { .footer { font-size: 17px; line-height: 26px; } :where(.footer) .col:not(:first-child) { margin-block-start: var(--space-single); } .footer-title { font-size: 27px; line-height: 39px; } :where(.footer) .widget { padding: var(--space-half) var(--space-single); } } @media (max-width: 640px) { .footer { font-size: 16px; line-height: 25px; } .footer::before { height: 3px; } .footer-title { font-size: 20px; line-height: 29px; margin-block-end: var(--space-third); } :where(.footer) .widget { padding: var(--space-third) var(--space-half); } :where(.footer) .widget ul li { padding: var(--space-xs) 0; } :where(.footer) .menu a { display: block; text-align: center; } .footer-copy { text-align: center; } }