.site-footer { position: relative; margin-top: var(--space-8); overflow: hidden; background: var(--color-deep-navy); color: var(--color-foam); padding: 5.5rem 0 var(--space-6); }
.site-footer__reef { position: absolute; right: 0; bottom: 0; left: 0; height: 150px; overflow: hidden; background: linear-gradient(to bottom, transparent 0 38%, var(--color-lagoon-blue) 39% 57%, var(--color-sea-green) 58% 72%, var(--color-pineapple-yellow) 73%); opacity: 0.95; pointer-events: none; }
.site-footer__reef::before, .site-footer__reef::after { position: absolute; bottom: 55px; width: 140px; height: 105px; border-radius: 70% 70% 20% 20%; background: var(--color-coral-pink); content: ""; }
.site-footer__reef::before { left: 6%; transform: rotate(-12deg); } .site-footer__reef::after { right: 8%; width: 105px; height: 80px; background: var(--color-sea-green); transform: rotate(16deg); }
.site-footer__coral { position: absolute; bottom: 50px; width: 18px; height: 88px; border-radius: 18px 18px 0 0; background: var(--color-coral-pink); } .site-footer__coral--one { left: 18%; transform: rotate(15deg); } .site-footer__coral--two { right: 22%; height: 65px; background: var(--color-pineapple-yellow); transform: rotate(-16deg); }
.site-footer__bubble { position: absolute; border: 2px solid rgb(232 251 247 / 50%); border-radius: 50%; } .site-footer__bubble--one { right: 18%; bottom: 110px; width: 15px; height: 15px; } .site-footer__bubble--two { left: 29%; bottom: 84px; width: 9px; height: 9px; }
.site-footer__inner { position: relative; z-index: 1; display: grid; gap: var(--space-6); }
.site-footer__intro { display: grid; max-width: 42rem; gap: var(--space-2); } .site-footer__intro p, .site-footer__bottom p { margin: 0; } .site-footer__brand { width: fit-content; color: var(--color-pineapple-yellow); font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; text-decoration: none; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-2); } .site-footer__nav a { border-radius: var(--radius-sm); background: var(--color-lagoon-blue); color: var(--color-deep-navy); padding: 0.5rem 0.7rem; font-size: var(--text-sm); font-weight: 700; line-height: 1.3; text-decoration: none; } .site-footer__nav a:hover { background: var(--color-coral-pink); }
.site-footer__bottom { display: grid; max-width: 58rem; gap: var(--space-3); padding-bottom: 7rem; font-size: var(--text-sm); line-height: var(--leading-label); } .site-footer__copyright { color: var(--color-pineapple-yellow); font-weight: 700; }
.site-consent { position: fixed; z-index: 100; right: var(--space-4); bottom: var(--space-4); left: var(--space-4); max-width: 760px; margin-inline: auto; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-sand-white); box-shadow: var(--shadow-sm); color: var(--color-deep-navy); padding: var(--space-4); transition: opacity var(--transition-base), transform var(--transition-base); } .site-consent[hidden] { display: none; } .site-consent.is-hiding { opacity: 0; transform: translateY(12px); }
.site-consent__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .site-consent__copy { display: grid; gap: var(--space-2); } .site-consent__copy h2, .site-consent__copy p { margin: 0; } .site-consent__copy h2 { font-size: 1.1rem; } .site-consent__copy p { font-size: var(--text-sm); line-height: var(--leading-label); } .site-consent__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: var(--space-2); } .site-consent__actions .button { min-height: 42px; padding-inline: 1rem; font-size: 0.72rem; }
@media (max-width: 760px) { .site-footer { margin-top: var(--space-6); padding-top: 4rem; } .site-footer__reef { height: 110px; } .site-footer__bottom { padding-bottom: 5rem; } .site-consent { right: var(--space-3); bottom: var(--space-3); left: var(--space-3); } .site-consent__inner { align-items: stretch; flex-direction: column; } .site-consent__actions { width: 100%; } .site-consent__actions .button { flex: 1 1 9rem; } }
@media (prefers-reduced-motion: no-preference) { .site-footer__bubble--one { animation: site-footer-rise 6s ease-in-out infinite; } .site-footer__bubble--two { animation: site-footer-rise 5s ease-in-out -2s infinite; } } @keyframes site-footer-rise { 50% { transform: translateY(-7px); } }