/* Hero component — full-viewport-width with CSS background parallax */ .hero { position: relative; min-height: 80svh; display: flex; align-items: center; background-color: var(--color-primary); /* URL injected via --hero-bg custom property set in the inline style */ background-image: var(--hero-bg); background-size: cover; /* * 65% vertical position frames toward the lower half of the image * so the mountain subject is visible rather than just sky. */ background-position: center 65%; color: white; } /* * Break the hero out of the max-width page container so it spans * the full viewport width. overflow-x: clip on prevents * a horizontal scrollbar. */ .page > .hero { width: 100vw; margin-left: calc(50% - 50vw); box-sizing: border-box; } /* * Parallax: on pointer devices the background stays fixed to the viewport * while the page scrolls. The hero acts as a window into a stationary image. * On touch/mobile background-attachment:fixed is unreliable (iOS Safari * renders it as scroll), so we only enable it where hover is available. */ @media (hover: hover) { .hero { background-attachment: fixed; /* fixed backgrounds size relative to the viewport, not the element */ background-size: cover; } } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.55) 100% ); } .hero__content { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-lg); width: 100%; } .hero__headline { font-size: clamp(2rem, 5vw, 3.5rem); color: white; margin-bottom: var(--spacing-md); line-height: 1.1; max-width: 750px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } .hero__subheadline { font-size: clamp(var(--font-size-base), 2vw, var(--font-size-xl)); color: rgba(255, 255, 255, 0.92); margin-bottom: var(--spacing-lg); max-width: 600px; line-height: 1.6; } .hero__buttons { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } /* Light / ghost button variants for use on the hero */ .btn--light { background-color: white; color: var(--color-primary); } .btn--light:hover { background-color: rgba(255, 255, 255, 0.92); color: var(--color-primary); text-decoration: none; } .btn--secondary.btn--light { background-color: transparent; color: white; border: 2px solid rgba(255, 255, 255, 0.8); } .btn--secondary.btn--light:hover { background-color: rgba(255, 255, 255, 0.12); border-color: white; text-decoration: none; }