/* Local Montserrat font (stop loading from Google) */ @font-face { font-family: 'Montserrat'; src: url('Schrift/Montserrat-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: block; } @font-face { font-family: 'Montserrat'; src: url('Schrift/Montserrat-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: block; } /* Ensure Montserrat is the default sans-serif font */ html, body { font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Ensure Tailwind's .font-sans on still uses Montserrat even if Tailwind CSS loads after this file */ body.font-sans { font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Custom overrides when Tailwind utilities are missing or not applied as expected */ /* Prevent horizontal overflow artifacts (e.g., 1px right stripe) */ html, body { overflow-x: hidden; } /* Premium entrance animations for navbar & hero */ @keyframes pm-logo-pop { 0% { transform: scale(0.8) rotate(10deg); opacity: 0; } 60% { transform: scale(1.12) rotate(-4deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes pm-nav-bounce { 0% { transform: translateY(-16px) scale(0.95); opacity: 0; } 60% { transform: translateY(-4px) scale(1.05); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes pm-hero-img-in { 0% { transform: translateX(28px) translateY(14px) scale(0.94) rotateY(14deg); filter: blur(6px); opacity: 0; } 100% { transform: translateX(0) translateY(0) scale(1) rotateY(0deg); filter: blur(0); opacity: 1; } } @keyframes pm-badge-drop { 0% { transform: translateY(-14px) rotate(6deg) scale(0.96); opacity: 0; } 60% { transform: translateY(-3px) rotate(-2deg) scale(1.04); opacity: 1; } 100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } } @keyframes pm-cta-pop { 0% { transform: translateY(18px) scale(0.9); opacity: 0; box-shadow: 0 0 0 rgba(59,130,246,0); } 60% { transform: translateY(-4px) scale(1.06); opacity: 1; box-shadow: 0 14px 36px rgba(59,130,246,0.25); } 100% { transform: translateY(0) scale(1); opacity: 1; box-shadow: 0 6px 20px rgba(59,130,246,0.15); } } @keyframes slideIn { 0% { transform: translateX(16px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } /* Distinct, subtle logo entrance (not like menu items) */ @keyframes pm-logo-fade { 0% { transform: translateX(-10px) scale(1); opacity: 0; } 100% { transform: translateX(0) scale(1); opacity: 1; } } /* Apply on reveal markers */ .navbar-logo.revealed { animation: pm-logo-fade 520ms ease-out both; } .navbar-item.revealed { animation: pm-nav-bounce 700ms cubic-bezier(.2,.8,.2,1) both; } .navbar-cta.revealed { animation: pm-cta-pop 820ms cubic-bezier(.2,.8,.2,1) both; } /* Hero: use simple default reveal (no extra keyframes) */ /* Optional reduced motion support */ @media (prefers-reduced-motion: reduce) { .navbar-logo.revealed, .navbar-item.revealed, .navbar-cta.revealed, .hero-badge.revealed, .hero-cta.revealed, .hero-image.revealed { animation: none !important; } } /* Hero image wrapper: crops horizontally to make the visual less wide */ .hero-media { width: 100%; max-width: 25rem; /* slightly smaller base width */ height: 20rem; /* slightly smaller base height */ overflow: hidden; } .hero-media .media-img { width: 100%; height: 100%; object-fit: cover; /* crop sides */ object-position: center; /* center focus */ display: block; } @media (min-width: 768px) { /* md */ .hero-media { max-width: 29rem; height: 22rem; } } @media (min-width: 1024px) { /* lg */ .hero-media { max-width: 31rem; height: 24rem; } } @media (min-width: 1280px) { /* xl */ .hero-media { max-width: 33rem; height: 26rem; } } @media (min-width: 1536px) { /* 2xl */ .hero-media { max-width: 35rem; height: 28rem; } } /* Tan CTA button used in About section */ .btn-tan { background-color: #bfa07a; /* warm tan */ } .btn-tan:hover { background-color: #a98962; } /* About image size (slightly smaller than the grid column) */ .about-media { max-width: 26rem; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { /* md */ .about-media { max-width: 28rem; } } @media (min-width: 1024px) { /* lg */ .about-media { max-width: 30rem; } } @media (min-width: 1280px) { /* xl */ .about-media { max-width: 32rem; } } /* Ensure bullet badges are perfect circles */ .bullet-badge { width: 2rem; /* 32px */ height: 2rem; /* 32px */ aspect-ratio: 1 / 1; /* guard against any scaling */ border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; /* avoid vertical stretching from line-height */ } /* CTA button animations: first pop, then gentle breathing */ @keyframes ctaPopOnce { 0% { transform: scale(0.97); } 52% { transform: scale(1.12); } 100% { transform: scale(1.00); } } @keyframes ctaBreath { 0% { transform: scale(1); } 100% { transform: scale(1.02); } } .cta-breath { will-change: transform; transform-origin: center; } .cta-breath.revealed { /* One-time smooth pop, then slower gentle breathing in one continuous flow */ animation: ctaPopOnce 2000ms cubic-bezier(0.16, 1, 0.3, 1) 120ms 1 both, ctaBreath 5s ease-in-out 2.12s infinite alternate; } /* Footer button: only breathing on hover */ .footer-cta-breath { will-change: transform; transform-origin: center; transition: transform 0.3s ease; } .footer-cta-breath:hover { animation: ctaBreath 2s ease-in-out infinite alternate; } /* CTA section background: garage door drop effect */ @keyframes ctaBackgroundDrop { 0% { height: 0; } 100% { height: var(--drop-height); } } .cta-background-drop { --drop-height: 340px; height: 0; transition: height 0s; } .cta-background-drop.revealed { animation: ctaBackgroundDrop 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms 1 both; } @media (min-width: 768px) { .cta-background-drop { --drop-height: 420px; } } @media (min-width: 1024px) { .cta-background-drop { --drop-height: 500px; } } @media (prefers-reduced-motion: reduce) { .cta-breath.revealed { animation: none; } .cta-background-drop.revealed { animation: none; height: var(--drop-height); } } /* Custom Scrollbar Design */ /* Webkit-based browsers (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #f1f5f9; /* slate-100 */ border-radius: 8px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #64748b 0%, #475569 100%); /* slate-500 to slate-600 */ border-radius: 8px; transition: background 0.3s ease; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #475569 0%, #334155 100%); /* slate-600 to slate-700 */ } /* Firefox */ html { scrollbar-width: thin; scrollbar-color: #64748b #f1f5f9; /* thumb track */ } /* For better contrast in dark areas */ .bg-slate-900 ::-webkit-scrollbar-track, .bg-blue-900 ::-webkit-scrollbar-track { background: #1e293b; /* slate-800 */ } .bg-slate-900 ::-webkit-scrollbar-thumb, .bg-blue-900 ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #475569 0%, #64748b 100%); /* slate-600 to slate-500 */ } .bg-slate-900 ::-webkit-scrollbar-thumb:hover, .bg-blue-900 ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #64748b 0%, #94a3b8 100%); /* slate-500 to slate-400 */ }