/** * Header Component Styles for Wings Healing Ministries * Include this file in the of each page */ :root { --header-safe-top: env(safe-area-inset-top, 0px); --header-safe-bottom: env(safe-area-inset-bottom, 0px); --header-offset-desktop: calc(110px + var(--header-safe-top)); --header-offset-mobile: var(--header-offset-desktop); --header-offset-mobile-compact: calc(96px + var(--header-safe-top)); --header-menu-offset-mobile: calc(110px + var(--header-safe-top)); --header-menu-offset-mobile-compact: calc(96px + var(--header-safe-top)); } .nav { --header-surface-color: var(--color-surface); --header-surface-alpha-closed: 82%; --header-surface-alpha-open: 95%; --header-surface-alpha: var(--header-surface-alpha-closed); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: calc(0.78rem + var(--header-safe-top)) 5% 0.78rem 3.25%; background-color: color-mix( in srgb, var(--header-surface-color) var(--header-surface-alpha), transparent ); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-card); transition: padding var(--duration-base) var(--ease-out-expo), background-color 450ms var(--ease-out-expo); } .nav.scrolled { padding: calc(0.38rem + var(--header-safe-top)) 5% 0.38rem 3.25%; } .nav.menu-open { --header-surface-alpha: var(--header-surface-alpha-open); } .nav-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 108px; height: 85px; text-decoration: none; } .nav-logo-crop { display: block; width: 108px; height: 85px; overflow: hidden; } .nav-logo-image { display: block; width: 306px; max-width: none; height: auto; transform: translate(-99px, -42px); transition: transform var(--duration-base) var(--ease-out-expo), opacity 300ms ease; } .nav.scrolled .nav-logo { width: 94px; height: 75px; } .nav.scrolled .nav-logo-crop { width: 94px; height: 75px; } .nav.scrolled .nav-logo-image { width: 266px; transform: translate(-86px, -37px); } .nav-menu { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; } .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; } .nav-links li { display: flex; } .nav-links a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; position: relative; font-family: var(--font-sans); font-size: var(--font-body-sm); font-weight: 500; line-height: 1.4; color: var(--color-text-primary); text-decoration: none; transition: color var(--duration-base) var(--ease-out-expo); } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0.25rem; width: 0; height: 2px; background: var(--color-coral); transition: width var(--duration-base) var(--ease-out-expo); } @media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--color-coral); } .nav-links a:hover::after { width: 100%; } } .nav-links a.active::after { width: 100%; } .nav-cta-link { flex-shrink: 0; text-decoration: none; } .nav-links a:focus-visible, .nav-cta-link:focus-visible, .nav-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .nav-links a:focus-visible { border-radius: var(--radius-sm); } .nav-cta-link:focus-visible, .nav-toggle:focus-visible { border-radius: var(--radius-pill); } .nav-toggle { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 44px; height: 44px; flex-shrink: 0; background: none; border: none; padding: 0; cursor: pointer; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-text-primary); transition: transform var(--duration-base) var(--ease-out-expo), opacity var(--duration-base) var(--ease-out-expo); } .nav.nav-intro-active .nav-logo-image { opacity: 0; } .nav.nav-intro-active.nav-intro-revealing .nav-logo-image { opacity: 1; } .nav.nav-logo-bounce .nav-logo-crop { animation: header-logo-load-bounce 980ms cubic-bezier(0.18, 0.78, 0.22, 1); } .nav.nav-intro-active.nav-intro-revealing.nav-intro-landing .nav-logo-crop { animation: header-logo-land-pop 1040ms cubic-bezier(0.18, 0.78, 0.22, 1); } .header-intro { position: fixed; inset: 0; z-index: 1600; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: auto; background: radial-gradient(ellipse at center, rgba(196, 151, 119, 0.28) 0%, rgba(245, 225, 207, 0.2) 34%, rgba(255, 249, 241, 0) 68%), linear-gradient(135deg, rgba(118, 132, 91, 0.18) 0%, rgba(255, 249, 241, 0.96) 42%, rgba(186, 118, 98, 0.16) 100%); transition: opacity 420ms ease, background 520ms ease; } .header-intro.is-visible { opacity: 1; } .header-intro.is-transitioning { opacity: 0; background: radial-gradient(ellipse at center, rgba(196, 151, 119, 0.08) 0%, rgba(245, 225, 207, 0.05) 34%, rgba(255, 249, 241, 0) 68%), linear-gradient(135deg, rgba(118, 132, 91, 0.04) 0%, rgba(255, 249, 241, 0.14) 42%, rgba(186, 118, 98, 0.04) 100%); } .header-intro-stage { display: flex; flex-direction: column; align-items: center; gap: 20px; opacity: 0; transform: translateY(18px) scale(0.97); transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease; } .header-intro-stage.is-entered { opacity: 1; transform: translateY(0) scale(1); } .header-intro-stage.is-handing-off { opacity: 0; transform: scale(0.985); } .header-intro-logo { width: min(280px, 66vw); height: auto; display: block; filter: drop-shadow(0 18px 38px rgba(73, 106, 32, 0.18)); transform: translate3d(0, 0, 0) scale(1); transform-origin: center center; will-change: transform; animation: header-intro-float 1.8s ease-in-out infinite alternate; transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1), opacity 520ms ease, filter 520ms ease; } .header-intro-logo.is-handing-off { transform: scale(1.06); opacity: 0; filter: drop-shadow(0 0 36px rgba(131, 203, 64, 0.42)); animation: none; } .header-intro-wordmark { display: flex; flex-direction: column; align-items: center; gap: 0.18rem; color: #3a2822; text-align: center; transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms ease; } .header-intro-wordmark-en { font-family: "Noto Serif TC", serif; font-size: clamp(2rem, 5.2vw, 3rem); font-weight: 600; line-height: 0.94; letter-spacing: 0.32rem; } .header-intro-wordmark-sub { font-family: "Noto Sans TC", sans-serif; font-size: clamp(0.72rem, 1.55vw, 0.9rem); font-weight: 500; line-height: 1.2; letter-spacing: 0.22rem; opacity: 0.76; } .header-intro-wordmark-zh { font-family: "Noto Serif TC", serif; font-size: clamp(0.92rem, 2vw, 1.2rem); font-weight: 600; line-height: 1.2; letter-spacing: 0.1rem; opacity: 0.9; } .header-intro-wordmark.is-exiting { opacity: 0; transform: translateY(0) scale(0.985); filter: blur(8px); } .header-intro-progress { width: min(238px, 54vw); height: 5px; border-radius: 999px; overflow: hidden; background: rgba(110, 160, 36, 0.16); box-shadow: inset 0 0 0 1px rgba(110, 160, 36, 0.12); transition: opacity 220ms ease, transform 320ms ease; } .header-intro-progress.is-exiting { opacity: 0; transform: scaleX(0.96); } .header-intro.is-transitioning .header-intro-progress { opacity: 0; } .header-intro-progress-fill { --header-intro-progress-scale: 0; display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #0fb58f 0%, #88d33d 54%, #a3e64f 100%); transform: scaleX(var(--header-intro-progress-scale)); transform-origin: left center; transition: transform 980ms cubic-bezier(0.22, 1, 0.36, 1); } .header-intro-progress-fill.is-complete { transition-duration: 180ms; transition-timing-function: ease-out; } @keyframes header-intro-float { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(0, -10px, 0) scale(1.02); } } @keyframes header-logo-load-bounce { 0% { transform: scale(0.92) translate3d(0, 0, 0); filter: drop-shadow(0 0 0 rgba(131, 203, 64, 0)); } 32% { transform: scale(1.1) translate3d(0, -2px, 0); filter: drop-shadow(0 0 28px rgba(131, 203, 64, 0.26)); } 60% { transform: scale(0.98) translate3d(0, 1px, 0); filter: drop-shadow(0 0 14px rgba(131, 203, 64, 0.16)); } 82% { transform: scale(1.022) translate3d(0, 0, 0); filter: drop-shadow(0 0 8px rgba(131, 203, 64, 0.1)); } 100% { transform: scale(1) translate3d(0, 0, 0); filter: drop-shadow(0 0 0 rgba(131, 203, 64, 0)); } } @keyframes header-logo-land-pop { 0% { transform: scale(0.9) translate3d(0, 0, 0); filter: drop-shadow(0 0 0 rgba(131, 203, 64, 0)); } 30% { transform: scale(1.14) translate3d(0, -2px, 0); filter: drop-shadow(0 0 30px rgba(131, 203, 64, 0.3)); } 56% { transform: scale(0.975) translate3d(0, 1px, 0); filter: drop-shadow(0 0 18px rgba(131, 203, 64, 0.2)); } 78% { transform: scale(1.026) translate3d(0, 0, 0); filter: drop-shadow(0 0 12px rgba(131, 203, 64, 0.16)); } 100% { transform: scale(1) translate3d(0, 0, 0); filter: drop-shadow(0 0 0 rgba(131, 203, 64, 0)); } } @media (max-width: 768px) { .nav { gap: var(--space-md); padding: calc(0.68rem + var(--header-safe-top)) 20px 0.68rem 14px; } .nav-menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: var(--space-lg); width: 100%; max-height: 0; overflow: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px; background-color: color-mix( in srgb, var(--header-surface-color) var(--header-surface-alpha), transparent ); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-card); opacity: 0; transform: translateY(-0.75rem); pointer-events: none; transition: max-height var(--duration-slow) var(--ease-out-expo), opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo), padding var(--duration-slow) var(--ease-out-expo), background-color var(--duration-slow) var(--ease-out-expo); } .nav.menu-open .nav-menu { max-height: calc(100dvh - var(--header-menu-offset-mobile)); padding: 1rem 20px calc(1.5rem + var(--header-safe-bottom)); opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-links { flex-direction: column; align-items: flex-start; gap: var(--space-lg); width: 100%; } .nav-links li { width: 100%; } .nav-links a { display: flex; width: 100%; font-size: clamp(1.15rem, 4.4vw, var(--font-h3)); line-height: 1.35; padding: 0.65rem 0; } .nav-links a::after { bottom: 0; } .nav-cta-link { width: 100%; justify-content: center; } .nav-toggle { display: flex; margin-left: auto; } .header-intro-logo { width: min(252px, 70vw); } .header-intro-wordmark-en { letter-spacing: 0.22rem; } .header-intro-progress { width: min(220px, 58vw); } } @media (max-width: 430px) { :root { --header-offset-mobile: var(--header-offset-mobile-compact); --header-menu-offset-mobile: var(--header-menu-offset-mobile-compact); } .nav { padding: calc(0.6rem + var(--header-safe-top)) 16px 0.6rem 12px; } .nav-logo { width: 92px; height: 73px; } .nav-logo-crop { width: 92px; height: 73px; } .nav-logo-image { width: 260px; transform: translate(-84px, -36px); } .nav.scrolled .nav-logo { width: 86px; height: 68px; } .nav.scrolled .nav-logo-crop { width: 86px; height: 68px; } .nav.scrolled .nav-logo-image { width: 244px; transform: translate(-79px, -34px); } .nav-menu { padding-right: 16px; padding-left: 16px; } .nav.menu-open .nav-menu { max-height: calc(100dvh - var(--header-menu-offset-mobile)); padding-right: 16px; padding-left: 16px; } .header-intro-logo { width: min(220px, 74vw); } .header-intro-wordmark-en { letter-spacing: 0.14rem; } .header-intro-wordmark-sub { letter-spacing: 0.1rem; } .header-intro-progress { width: min(188px, 60vw); } } @media (max-width: 375px) { .nav-links a { font-size: 1.1rem; } } @media (prefers-reduced-motion: reduce) { .header-intro, .header-intro-logo, .header-intro-progress, .header-intro-progress-fill, .nav-logo-image, .nav-logo-crop { transition: none; animation: none; } }