# Gasser: Visible intro logo pulse and restrained hero title scale Session learning from mobile/homepage refinement on the Gasser Bauunternehmen Astro site. ## Trigger Use this when a client asks for a quick homepage logo intro/brand pulse but then reports that the pulse is not visible, or that the hero title/service taxonomy feels too large. ## Pattern For a non-blocking homepage intro, a too-subtle overlay can disappear before the user perceives it. Make the brand moment visibly intentional while still keeping it fast: - Homepage only. - Preload the mark image in `` on the homepage: - `` - Use a high stacking context (`z-index` above header/page transitions, e.g. `999`). - Set the intro shell initial opacity to `1`, not `0`; fade it out at the end. - Keep `pointer-events: none` so the page is never blocked. - Use CSS-only `opacity` and `transform`; avoid JS and WebGL for this intro. - Make the mark itself the focus, not a combined logo/text lockup. Hide the text inside the intro if it competes visually. - Put the bordeaux mark on a light circular plate or radial highlight so it remains visible on dark/complex hero backgrounds. - Duration around `1000–1150ms` is still perceived as quick but is more visible than ~700–800ms when image loading or client perception hides the first frames. - Respect `prefers-reduced-motion: reduce` by disabling the intro. Example keyframes: ```css .site-intro { opacity: 1; pointer-events: none; animation: gasser-intro-shell 1120ms cubic-bezier(.18,.9,.22,1) both; } .site-intro__mark { animation: gasser-intro-mark 1120ms cubic-bezier(.16,1,.28,1) both; } @keyframes gasser-intro-shell { 0% { opacity: 1; } 54% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } @keyframes gasser-intro-mark { 0% { opacity: 0; transform: scale(0.46); } 14% { opacity: 1; transform: scale(1.18); } 42% { opacity: 1; transform: scale(0.98); } 68% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.82); } } ``` ## Hero title scale correction When the hero h1 lists services such as `Umbauten, Kundenarbeiten und Baumeisterarbeiten`, avoid oversized agency-style typography. For this local construction site, the user prefers a quieter, more professional title scale. Recommended starting values: ```css h1 { max-width: 515px; font-size: clamp(1.95rem, 3.05vw, 3.2rem); line-height: 1.08; } @media (max-width: 900px) { h1 { font-size: clamp(1.9rem, 7.4vw, 2.65rem); } } @media (max-width: 640px) { h1 { max-width: 19rem; font-size: clamp(1.72rem, 8.2vw, 2.28rem); } } ``` ## QA checks - Verify the intro image URL returns 200. - Inspect computed styles immediately after page load: `.site-intro` exists, z-index is above header, animation names are applied. - Visually QA on mobile width around 390px. - Confirm no overlay remains after the animation and the homepage remains clickable. - Build before push.