Footer

Site footer — logo, navigation columns, contact details, and legal bottom bar

The Footer closes every page with a complete information layer: brand identity (logo, tagline), quick-access navigation grouped by topic, contact details with icons, and a legal bottom bar (copyright + Privacy Policy / Cookie Policy / Terms). A "Back to top" button improves usability on long pages. Available in three variants: Dark (deep blue gradient — recommended), Neutral (dark charcoal), and Light (white / off-white).

Variant 1 — Dark (recommended)

Variant 2 — Neutral Dark

Variant 3 — Light

Mobile preview

On mobile the 4-column grid stacks to a single column. All sections are fully visible; the bottom bar stacks vertically.

Components used

• .site-footer — Footer root; theme variants: .f-dark, .f-neutral, .f-light
• .footer-body — Balanced 4-col grid, tight column-gap; contact col fits wrapped email; divider / bottom share same horizontal padding as body
• .footer-brand — Logo and tagline
• .footer-logo — Logo link; auto-inverted on dark variants via filter: brightness(0) invert(1)
• .footer-col + .footer-col-title — Navigation column with accent-coloured heading
• .footer-nav — Link list; .nav-new badge on new items
• .footer-contact-list / .footer-contact-item / .footer-contact-icon — Icon + label + value contact rows
• .footer-divider — Full-width separator line
• .footer-bottom — Copyright + legal links + back-to-top button
• .back-to-top — Ghost button that scrolls to top
• .section-mobile on .site-footer — Stacks grid to single column on mobile