/* ============================================= HAUS EDELWEISS — Base Styles ============================================= */ /* --- Fonts (all self-hosted, no Google Fonts) --- */ @font-face { font-family: 'PP Eiko'; src: url('../assets/fonts/PPEiko-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraktur Font'; src: url('../assets/fonts/FetteUNZFraktur.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('../assets/fonts/Geist-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('../assets/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* --- Reset --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; } html.menu-open, html.menu-open body { overflow: hidden; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-medium); line-height: var(--leading-tight); color: var(--color-rust); } p { line-height: var(--leading-relaxed); } ::selection { background-color: var(--color-wine); color: var(--color-cream); } /* --- Typography --- */ .heading-display { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-rust); } .heading-1 { font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); color: var(--color-rust); } .heading-2 { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--weight-medium); line-height: var(--leading-snug); color: var(--color-rust); } .heading-3 { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: var(--leading-snug); color: var(--color-rust); } .label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-rust); } .label--light { color: var(--color-cream); } .label--yellow { color: var(--color-yellow); } .body-text { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-wine); } .display-text { font-family: var(--font-display); font-style: normal; } /* --- Layout --- */ .container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding-left: var(--container-px); padding-right: var(--container-px); } .container--full { max-width: var(--container-max); } .section { padding-top: var(--section-py); padding-bottom: var(--section-py); } /* Utility */ .text-center { text-align: center; } .mx-auto { margin-left: auto; margin-right: auto; } /* --- Scroll Animations --- GSAP is the primary driver. The CSS below is a no-JS / no-GSAP fallback. When GSAP is active it adds .gsap-active to and we disable these CSS transitions so the two systems never fight each other. */ /* Fallback: hide elements before they scroll into view */ [data-animate] { opacity: 0; } /* Fallback transitions — only when GSAP is NOT active */ html:not(.gsap-active) [data-animate] { transform: translateY(30px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } html:not(.gsap-active) [data-animate].is-visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); } html:not(.gsap-active) [data-animate="fade-up"] { transform: translateY(40px); } html:not(.gsap-active) [data-animate="fade-left"] { transform: translateX(40px); } html:not(.gsap-active) [data-animate="fade-right"] { transform: translateX(-40px); } html:not(.gsap-active) [data-animate="fade-in"] { transform: none; } html:not(.gsap-active) [data-animate="scale-in"] { transform: scale(0.95); } html:not(.gsap-active) [data-animate-delay="1"] { transition-delay: 100ms; } html:not(.gsap-active) [data-animate-delay="2"] { transition-delay: 200ms; } html:not(.gsap-active) [data-animate-delay="3"] { transition-delay: 300ms; } html:not(.gsap-active) [data-animate-delay="4"] { transition-delay: 400ms; } html:not(.gsap-active) [data-animate-delay="5"] { transition-delay: 500ms; }