.footer { align-content: end; display: grid; position: relative; .footer__container { display: grid; margin-inline: auto; position: relative; width: min(100%, 48em); } .footer__svg { height: clamp(7rem, 15.5625vw, 7.475em); overflow: clip; position: relative; figure { height: 100%; left: 50%; position: absolute; transform: translateX(-50%); svg { height: 100%; max-height: 100%; overflow: visible; width: auto; } } #track stop { &:first-child { stop-color: oklch(var(--lch-ink-lightest)); } &:last-child { stop-color: oklch(var(--lch-ink-lightest) / 0); } } #path-01 stop, #path-02 stop, #path-03 stop, #path-04 stop, #path-05 stop, #path-06 stop, #path-07 stop, #path-08 stop, #path-09 stop, #path-10 stop, #path-11 stop, #path-12 stop, #path-13 stop, #path-14 stop, #path-15 stop, #path-16 stop, #path-17 stop, #path-18 stop, #path-19 stop, #path-20 stop, #path-21 stop, #path-22 stop, #path-23 stop, #path-24 stop, #path-25 stop, #path-26 stop, #path-27 stop, #path-28 stop, #path-29 stop, #path-30 stop, #path-31 stop, #path-32 stop, #path-33 stop, #path-34 stop, #path-35 stop, #path-36 stop, #path-37 stop, #path-38 stop, #path-39 stop, #path-40 stop, #path-41 stop, #path-42 stop, #path-43 stop, #path-44 stop, #path-45 stop, #path-46 stop, #path-47 stop, #path-48 stop, #path-49 stop, #path-50 stop { &:first-child { stop-color: oklch(var(--lch-ink-lighter)); } &:last-child { stop-color: oklch(var(--lch-ink-lightest)); } } } .footer__legal { display: grid; gap: var(--space-small); padding: 0 var(--space-small) var(--space-medium) var(--space-small); p, ul { font-size: var(--font-size-xxxx-small); letter-spacing: var(--letter-spacing); margin-bottom: -0.375em; margin-top: -0.375em; } p { .icon { display: inline-block; svg { display: inline-block; height: 1.15em; max-height: 100%; overflow: visible; pointer-events: none; vertical-align: -0.2125em; width: auto; } strong { display: inline-block; } &.icon--37signals { strong { margin-left: -0.1375em; } } &.icon--basecamp { strong { margin-left: -0.1125em; } } &.icon--taivel { strong { margin-left: -0.025em; } } &.icon--hey { svg { height: 1.2625em; vertical-align: -0.2625em; } strong { margin-left: -0.1375em; } } } } ul { display: flex; gap: var(--space-medium); } a { color: inherit; font-weight: inherit; text-decoration: none; } } @media (hover: hover) { #path-01 stop, #path-02 stop, #path-03 stop, #path-04 stop, #path-05 stop, #path-06 stop, #path-07 stop, #path-08 stop, #path-09 stop, #path-10 stop, #path-11 stop, #path-12 stop, #path-13 stop, #path-14 stop, #path-15 stop, #path-16 stop, #path-17 stop, #path-18 stop, #path-19 stop, #path-20 stop, #path-21 stop, #path-22 stop, #path-23 stop, #path-24 stop, #path-25 stop, #path-26 stop, #path-27 stop, #path-28 stop, #path-29 stop, #path-30 stop, #path-31 stop, #path-32 stop, #path-33 stop, #path-34 stop, #path-35 stop, #path-36 stop, #path-37 stop, #path-38 stop, #path-39 stop, #path-40 stop, #path-41 stop, #path-42 stop, #path-43 stop, #path-44 stop, #path-45 stop, #path-46 stop, #path-47 stop, #path-48 stop, #path-49 stop, #path-50 stop { transition: stop-color var(--transition); } &:has(.path-01:hover) #path-01 stop, &:has(.path-09:hover) #path-09 stop, &:has(.path-17:hover) #path-17 stop, &:has(.path-25:hover) #path-25 stop, &:has(.path-33:hover) #path-33 stop, &:has(.path-41:hover) #path-41 stop, &:has(.path-49:hover) #path-49 stop { &:first-child { stop-color: oklch(var(--lch-lime-medium)); } &:last-child { stop-color: oklch(var(--lch-lime-light)); } } &:has(.path-02:hover) #path-02 stop, &:has(.path-10:hover) #path-10 stop, &:has(.path-18:hover) #path-18 stop, &:has(.path-26:hover) #path-26 stop, &:has(.path-34:hover) #path-34 stop, &:has(.path-42:hover) #path-42 stop, &:has(.path-50:hover) #path-50 stop { &:first-child { stop-color: oklch(var(--lch-aqua-medium)); } &:last-child { stop-color: oklch(var(--lch-aqua-light)); } } &:has(.path-03:hover) #path-03 stop, &:has(.path-11:hover) #path-11 stop, &:has(.path-19:hover) #path-19 stop, &:has(.path-27:hover) #path-27 stop, &:has(.path-35:hover) #path-35 stop, &:has(.path-43:hover) #path-43 stop { &:first-child { stop-color: oklch(var(--lch-blue-medium)); } &:last-child { stop-color: oklch(var(--lch-blue-light)); } } &:has(.path-04:hover) #path-04 stop, &:has(.path-12:hover) #path-12 stop, &:has(.path-20:hover) #path-20 stop, &:has(.path-28:hover) #path-28 stop, &:has(.path-36:hover) #path-36 stop, &:has(.path-44:hover) #path-44 stop { &:first-child { stop-color: oklch(var(--lch-purple-medium)); } &:last-child { stop-color: oklch(var(--lch-purple-light)); } } &:has(.path-05:hover) #path-05 stop, &:has(.path-13:hover) #path-13 stop, &:has(.path-21:hover) #path-21 stop, &:has(.path-29:hover) #path-29 stop, &:has(.path-37:hover) #path-37 stop, &:has(.path-45:hover) #path-45 stop { &:first-child { stop-color: oklch(var(--lch-violet-medium)); } &:last-child { stop-color: oklch(var(--lch-violet-light)); } } &:has(.path-06:hover) #path-06 stop, &:has(.path-14:hover) #path-14 stop, &:has(.path-22:hover) #path-22 stop, &:has(.path-30:hover) #path-30 stop, &:has(.path-38:hover) #path-38 stop, &:has(.path-46:hover) #path-46 stop { &:first-child { stop-color: oklch(var(--lch-pink-medium)); } &:last-child { stop-color: oklch(var(--lch-pink-light)); } } &:has(.path-07:hover) #path-07 stop, &:has(.path-15:hover) #path-15 stop, &:has(.path-23:hover) #path-23 stop, &:has(.path-31:hover) #path-31 stop, &:has(.path-39:hover) #path-39 stop, &:has(.path-47:hover) #path-47 stop { &:first-child { stop-color: oklch(var(--lch-yellow-medium)); } &:last-child { stop-color: oklch(var(--lch-yellow-light)); } } &:has(.path-08:hover) #path-08 stop, &:has(.path-16:hover) #path-16 stop, &:has(.path-24:hover) #path-24 stop, &:has(.path-32:hover) #path-32 stop, &:has(.path-40:hover) #path-40 stop, &:has(.path-48:hover) #path-48 stop { &:first-child { stop-color: oklch(var(--lch-red-medium)); } &:last-child { stop-color: oklch(var(--lch-red-light)); } } .footer__legal { p a { &:focus, &:hover { strong { text-decoration: underline; } } } ul a { &:focus, &:hover { text-decoration: underline; } } } } @media (min-width: 64em) { .footer__legal { display: flex; gap: var(--space-medium); justify-content: space-between; } } }