Footer

The footer is a full-width organism that closes every page on the tinnitus information site. It uses a dark background (#2A2220, --semantic-color-footer-surface) with a breadcrumb bar at the top, four content columns — topics, legal, newsletter, and language — and a copyright bar at the bottom. The breadcrumb and copyright bars are each separated by a thin border line. On smaller viewports the layout wraps to a 2x2 grid (tablet) and then collapses to a single stacked column (mobile), where the topics and legal sections become accordions to reduce scroll depth.

This component uses naluma design system tokens (Plus Jakarta Sans font, warm earth palette).

BEM class: .tinnitus-footer

Showcase

Full-width footer (desktop)

Tablet layout (3-column wrap)

Mobile layout (single column, accordion sections)

Container Specs

Property	Value
Background	`#2A2220` (`--semantic-color-footer-surface`)
Padding	40px 32px 0
Font family	Plus Jakarta Sans, system-ui, sans-serif
Full width	Yes — spans the entire viewport

Property	Value
Border bottom	`1px solid var(--semantic-color-footer-border)`
Padding bottom	20px
Margin bottom	32px
Font size	14px
Link color	`#B09A90` (`--semantic-color-footer-text-muted`)
Current page color	`#FBFAF1` (`--semantic-color-footer-text`)
Separator	`»` (Rank Math default)
Text align	Left
Generated by	Rank Math SEO plugin (`rank-math-breadcrumb` class)

The breadcrumb bar sits at the top of the footer content area, separated from the column layout below by a thin border-bottom line. It mirrors the copyright bar’s visual treatment (same border color, same padding/margin values) but is left-aligned with the border on the bottom edge. In production, the breadcrumb markup is generated by the Rank Math SEO plugin.

Column Layout

The footer uses a horizontal flex row on desktop. On tablet viewports the columns wrap into a 2x2 grid, and on mobile they stack into a single column.

Breakpoint	Layout	Column width	Gap
Desktop (> 960px)	Flex row (no wrap)	Fixed per column (see below)	32px
Tablet (600-960px)	Flex wrap, 2x2 grid	50% minus gap	32px
Mobile (< 600px)	Flex column	100%	24px

Desktop column widths

Column	Width
Topics	240px
Legal	160px
Newsletter	280px
Language	120px

Column Headers (`__heading`)

All four columns share the same heading style.

Property	Value
Font size	14px
Font weight	600
Text transform	Uppercase
Letter spacing	0.05em
Color	`#B09A90` (`--semantic-color-footer-text-muted`)
Margin bottom	16px

Links (`__link`)

Used in the Topics and Legal columns.

Property	State	Value
Font size	All	14px
Font weight	All	400
Color	Default	`#FBFAF1` (`--semantic-color-footer-text`)
Color	Hover	`#FFFFFF`
Line height	All	1.4
List gap	All	10px

Topics column content

Five topic links with tinnitus-related labels: Understanding Tinnitus, Sound Therapy, Cognitive Behavioral Therapy, Sleep & Tinnitus, Latest Research.

Legal column content

Three links: Privacy Policy, Imprint, Terms of Use.

Element	Property	Value
Description	Font size	14px
Description	Color	`#B09A90` (`--semantic-color-footer-text-muted`)
Description	Margin bottom	12px
Input	Background	`rgba(255, 255, 255, 0.08)`
Input	Border	`1px solid rgba(255, 255, 255, 0.15)`
Input	Text color	`#FBFAF1` (`--semantic-color-footer-text`)
Input	Placeholder color	`#B09A90` (`--semantic-color-footer-text-muted`)
Input	Border radius	6px
Input	Padding	8px 12px
Button	Background	`#A55838` (`--semantic-color-action-primary`)
Button	Hover bg	`#914D31` (`--semantic-color-action-primary-hover`)
Button	Color	`#FFFFFF`
Button	Font weight	600
Button	Border radius	6px

The form uses a horizontal flex layout on desktop/tablet. On mobile, input and button stack vertically with the button at full width.

Language Toggle

Element	Property	Value
Inactive link	Color	`#B09A90` (`--semantic-color-footer-text-muted`)
Inactive link	Font weight	500
Active link	Color	`#FFFFFF`
Active link	Font weight	600
Separator	Color	`#B09A90` (`--semantic-color-footer-text-muted`)
Separator	Character	`/`

The toggle renders as two text links separated by a slash. The active language is highlighted in white; the inactive language uses the muted column-header color. Selecting the inactive language triggers a full page reload to the localized URL.

Copyright Bar

Property	Value
Border top	`1px solid rgba(255, 255, 255, 0.1)`
Margin top	32px
Padding	20px 0
Font size	13px
Color	`#FBFAF1` (`--semantic-color-footer-text`)
Text align	Center
Content	”© 2026 Naluma. All rights reserved.” (dynamic year in production)

BEM Structure

Class	Element	Purpose
`.tinnitus-footer`	Block	Full-width footer container
`__columns`	Container	Flex row holding the four columns
`__column`	Container	Individual column wrapper
`__column--topics`	Modifier	Topics column (240px)
`__column--legal`	Modifier	Legal column (160px)
`__column--newsletter`	Modifier	Newsletter column (280px)
`__column--language`	Modifier	Language column (120px)
`__breadcrumb-bar`	Child	Top bar with breadcrumb navigation and border separator
`__heading`	Child	Column header text
`__links`	Child	Unordered link list
`__link`	Child	Individual footer link
`__newsletter-description`	Child	Newsletter intro text
`__newsletter-form`	Child	Input + button flex container
`__newsletter-input`	Child	Email input field
`__newsletter-button`	Child	Subscribe button
`__lang-toggle`	Child	Language switch container
`__lang`	Child	Language link (DE or EN)
`__lang--active`	Modifier	Currently selected language
`__lang-separator`	Child	Slash between language options
`__copyright-bar`	Child	Bottom bar with border separator
`__copyright`	Child	Copyright text
`__accordion-header`	Child	Mobile: tappable header row with expand icon
`__accordion-icon`	Child	Mobile: plus/minus indicator

Usage Guidelines

Accordion behavior on mobile. The Topics and Legal columns collapse behind tap-to-expand headers on viewports below 600px. The Newsletter and Language columns remain always visible since their content is short and actionable. Use + for collapsed state and - for expanded. Only one section needs to be open at a time (exclusive accordion).
Newsletter form validation. The email input should validate on submit using the browser’s native type="email" constraint. On successful submission, replace the form with a confirmation message (“Check your inbox!”) rather than navigating away. Server-side validation is also required.
Language toggle triggers a full reload. The DE/EN toggle is not a client-side translation switch — it links to the localized version of the current page (e.g., /de/schalltherapie vs /en/sound-therapy). The active language is determined from the current URL path prefix.
Breadcrumb bar is conditionally rendered. The breadcrumb markup is generated by Rank Math SEO. The footer template should only render the __breadcrumb-bar wrapper when Rank Math provides output. On pages without a breadcrumb trail (e.g., the homepage), the bar should be omitted entirely rather than shown empty.
Copyright year should be dynamic. Use server-side or build-time logic to render the current year rather than hardcoding “2024”.
Dark background requires sufficient contrast. All text in the footer must meet WCAG AA contrast against #2A2220 (--semantic-color-footer-surface). The current palette achieves this: #FBFAF1 on #2A2220 ≈ 14:1 (AAA), #B09A90 on #2A2220 ≈ 5.84:1 (AA for all text sizes). Copyright text uses #FBFAF1 for the highest legibility at 13px regular weight.