Error Page Styles

File Information

• Path: app/assets/scss/pages/_error.scss
• Purpose: Layout and type for the error page (.error-text)
• Type: Page-specific

Overview

.error-text is a centered flex column (flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: $gap-lg) used by Error.vue.

Selector	Rules
.error-text h1 (status code)	color: $black-color, font-size: 10vw, font-weight: $font-weight-black, font-family: $font-family-body, margin: 0
.error-text h4 (message)	color: $black-color-800, font-size: 1.5vw, font-weight: $font-weight-regular, font-family: $font-family-body, margin-bottom: 2vw

Before ee26b58 both headings used var(--primary); they now use fixed neutral colors, and only the "Back to Home" button (.btn-primary) still carries the brand color. Sizes are viewport-relative, so the code scales with window width.

Related Documentation

• Error Component
• SCSS Architecture Overview - Overall architecture
• Variables - Design tokens
• Mixins - Reusable mixins