/* Blazor-specific styles */ h1:focus { outline: none; } /* ===== Toast Notification Styles ===== */ /* Explicit light and dark theme toast variants via CSS custom properties. Light = any data-theme ending in "-light", or no data-theme at all. Dark = any data-theme that does NOT end with "-light". ORDER MATTERS: The explicit light block must come AFTER the dark block. In the showcase, a toast inside a light container also has a dark ancestor (). Both selectors match at equal specificity, so the last block in the file wins — which must be the light one. */ /* ── Base defaults (no data-theme at all) ── */ .toast-success { --toast-bg: #f0fdf4; --toast-border: #86efac; --toast-icon: #15803d; --toast-title: #14532d; --toast-message: #166534; --toast-close: #14532d; --toast-close-hover: rgba(0,0,0,0.06); --toast-track: rgba(22,101,52,0.12); } .toast-error { --toast-bg: #fef2f2; --toast-border: #fca5a5; --toast-icon: #dc2626; --toast-title: #7f1d1d; --toast-message: #991b1b; --toast-close: #7f1d1d; --toast-close-hover: rgba(0,0,0,0.06); --toast-track: rgba(220,38,38,0.12); } .toast-warning { --toast-bg: #fefce8; --toast-border: #fde047; --toast-icon: #a16207; --toast-title: #713f12; --toast-message: #854d0e; --toast-close: #713f12; --toast-close-hover: rgba(0,0,0,0.06); --toast-track: rgba(202,138,4,0.15); } .toast-info { --toast-bg: #eff6ff; --toast-border: #93c5fd; --toast-icon: #2563eb; --toast-title: #1e3a5f; --toast-message: #1e40af; --toast-close: #1e3a5f; --toast-close-hover: rgba(0,0,0,0.06); --toast-track: rgba(37,99,235,0.12); } .toast-default { --toast-bg: rgb(var(--color-surface-1, 255 255 255)); --toast-border: rgb(var(--color-surface-border, 209 213 219)); --toast-icon: rgb(var(--color-text-strong, 15 23 42)); --toast-title: rgb(var(--color-text-strong, 15 23 42)); --toast-message: rgb(var(--color-text-muted, 71 85 105)); --toast-close: rgb(var(--color-text-muted, 71 85 105)); --toast-close-hover: rgba(128,128,128,0.1); --toast-track: rgba(128,128,128,0.15); } /* ── Dark theme ── */ /* :where() zeroes out the specificity of :not(), so dark and light selectors both land at 0,2,0 — then source order (light last) wins. */ [data-theme]:where(:not([data-theme$="-light"])) .toast-success { --toast-bg: rgba(22, 101, 52, 0.2); --toast-border: #166534; --toast-icon: #4ade80; --toast-title: #bbf7d0; --toast-message: #86efac; --toast-close: #bbf7d0; --toast-close-hover: rgba(255,255,255,0.05); --toast-track: rgba(255,255,255,0.1); } [data-theme]:where(:not([data-theme$="-light"])) .toast-error { --toast-bg: rgba(127, 29, 29, 0.2); --toast-border: #991b1b; --toast-icon: #f87171; --toast-title: #fecaca; --toast-message: #fca5a5; --toast-close: #fecaca; --toast-close-hover: rgba(255,255,255,0.05); --toast-track: rgba(255,255,255,0.1); } [data-theme]:where(:not([data-theme$="-light"])) .toast-warning { --toast-bg: rgba(113, 63, 18, 0.2); --toast-border: #92400e; --toast-icon: #facc15; --toast-title: #fef08a; --toast-message: #fde047; --toast-close: #fef08a; --toast-close-hover: rgba(255,255,255,0.05); --toast-track: rgba(255,255,255,0.1); } [data-theme]:where(:not([data-theme$="-light"])) .toast-info { --toast-bg: rgba(30, 58, 95, 0.2); --toast-border: #1e40af; --toast-icon: #60a5fa; --toast-title: #bfdbfe; --toast-message: #93c5fd; --toast-close: #bfdbfe; --toast-close-hover: rgba(255,255,255,0.05); --toast-track: rgba(255,255,255,0.1); } [data-theme]:where(:not([data-theme$="-light"])) .toast-default { --toast-bg: rgb(var(--color-surface-1, 11 16 32)); --toast-border: rgb(var(--color-surface-border, 31 41 55)); --toast-icon: rgb(var(--color-text-strong, 249 250 251)); --toast-title: rgb(var(--color-text-strong, 249 250 251)); --toast-message: rgb(var(--color-text-muted, 156 163 175)); --toast-close: rgb(var(--color-text-muted, 156 163 175)); --toast-close-hover: rgba(255,255,255,0.05); --toast-track: rgba(255,255,255,0.1); } /* ── Explicit light theme (MUST come after dark to win the cascade tie) ── */ [data-theme$="-light"] .toast-success { --toast-bg: #f0fdf4; --toast-border: #86efac; --toast-icon: #15803d; --toast-title: #14532d; --toast-message: #166534; --toast-close: #14532d; --toast-close-hover: rgba(0,0,0,0.06); --toast-track: rgba(22,101,52,0.12); } [data-theme$="-light"] .toast-error { --toast-bg: #fef2f2; --toast-border: #fca5a5; --toast-icon: #dc2626; --toast-title: #7f1d1d; --toast-message: #991b1b; --toast-close: #7f1d1d; --toast-close-hover: rgba(0,0,0,0.06); --toast-track: rgba(220,38,38,0.12); } [data-theme$="-light"] .toast-warning { --toast-bg: #fefce8; --toast-border: #fde047; --toast-icon: #a16207; --toast-title: #713f12; --toast-message: #854d0e; --toast-close: #713f12; --toast-close-hover: rgba(0,0,0,0.06); --toast-track: rgba(202,138,4,0.15); } [data-theme$="-light"] .toast-info { --toast-bg: #eff6ff; --toast-border: #93c5fd; --toast-icon: #2563eb; --toast-title: #1e3a5f; --toast-message: #1e40af; --toast-close: #1e3a5f; --toast-close-hover: rgba(0,0,0,0.06); --toast-track: rgba(37,99,235,0.12); } [data-theme$="-light"] .toast-default { --toast-bg: #ffffff; --toast-border: #d1d5db; --toast-icon: #0f172a; --toast-title: #0f172a; --toast-message: #475569; --toast-close: #475569; --toast-close-hover: rgba(0,0,0,0.06); --toast-track: rgba(128,128,128,0.15); } /* ── Apply toast custom properties to elements ── */ .toast-success, .toast-error, .toast-warning, .toast-info, .toast-default { background-color: var(--toast-bg); border-color: var(--toast-border); } .toast-icon { color: var(--toast-icon); } .toast-title { color: var(--toast-title); } .toast-message { color: var(--toast-message); } .toast-close-btn { color: var(--toast-close); } .toast-close-btn:hover { background-color: var(--toast-close-hover); } .toast-progress-track { background-color: var(--toast-track); } /* Toast animations */ @keyframes toast-slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes toast-progress { from { width: 100%; } to { width: 0%; } } /* ===== Chat Widget Styles ===== */ @keyframes chat-slide-up { from { transform: translateY(1rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .chat-panel-enter { animation: chat-slide-up 0.2s ease-out; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } /* Custom Scrollbar with data-theme attribute for tenant theming */ /* WebKit browsers (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 10px; } /* Default scrollbar styling */ ::-webkit-scrollbar-track { background: #0f172a; border-radius: 5px; } ::-webkit-scrollbar-thumb { background: #f59e0b; border-radius: 5px; border: 2px solid #0f172a; } ::-webkit-scrollbar-thumb:hover { background: #fbbf24; } /* Firefox - default */ html { scrollbar-width: thin; scrollbar-color: #f59e0b #0f172a; } /* Smooth scrolling for anchor links */ html { scroll-behavior: smooth; } /* Hide the layout footer on snap pages - it's included inside the snap container instead */ body:has(.snap-container) .site-footer { display: none; } /* Desktop-only snap scrolling - scoped to home page */ @media (min-width: 768px) { /* Hide outer scrollbar when snap container is active */ body:has(.snap-container) { overflow: hidden; } .snap-container { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; } .snap-container .snap-section { scroll-snap-align: start; scroll-snap-stop: always; } } /* ===== Section Scroll Animations ===== */ /* Keyframe Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Scroll-driven animations for sections (modern browsers) */ @supports (animation-timeline: view()) { .animate-on-scroll { animation: fadeInUp 0.6s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 40%; } .animate-scale-on-scroll { animation: fadeInScale 0.6s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 40%; } .animate-left-on-scroll { animation: slideInLeft 0.6s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 40%; } .animate-right-on-scroll { animation: slideInRight 0.6s ease-out both; animation-timeline: view(); animation-range: entry 0% entry 40%; } } /* Fallback for browsers without scroll-driven animations */ @supports not (animation-timeline: view()) { .animate-on-scroll, .animate-scale-on-scroll, .animate-left-on-scroll, .animate-right-on-scroll { opacity: 0; transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } .animate-scale-on-scroll.is-visible { opacity: 1; transform: scale(1); } .animate-left-on-scroll.is-visible, .animate-right-on-scroll.is-visible { opacity: 1; transform: translateX(0); } } /* Staggered animation delays for child elements */ .stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.2s; } .stagger-3 { animation-delay: 0.3s; } .stagger-4 { animation-delay: 0.4s; } .stagger-5 { animation-delay: 0.5s; } /* Smooth section transitions */ section { transition: opacity 0.5s ease-out; } /* Card hover animations */ .card-animate { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-animate:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } /* Glow pulse animation for accent elements */ @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); } 50% { box-shadow: 0 0 40px rgba(245, 158, 11, 0.5); } } .glow-pulse { animation: glowPulse 2s ease-in-out infinite; } /* Float animation for decorative elements */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 3s ease-in-out infinite; } /* ===== Avatar 3D Turn Animation ===== */ /* Simulates a head turning from side profile to face-on */ @keyframes avatarTurnToFace { 0% { transform: perspective(500px) rotateY(-70deg) scaleX(0.3); opacity: 0.6; filter: brightness(0.7); } 40% { opacity: 1; } 100% { transform: perspective(500px) rotateY(0deg) scaleX(1); opacity: 1; filter: brightness(1); } } /* Avatar container needs perspective for 3D effect */ .avatar-3d-container { perspective: 600px; perspective-origin: center center; } .avatar-3d { transform-style: preserve-3d; transform-origin: center center; /* Start position: looking to the side */ transform: perspective(500px) rotateY(-70deg) scaleX(0.3); opacity: 0.6; filter: brightness(0.7); /* Animation setup - paused until triggered */ animation: avatarTurnToFace 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation-play-state: paused; } /* When avatar becomes visible - trigger the turn animation */ .avatar-3d.is-turned { animation-play-state: running; } /* Desktop stagger delays - each person turns sequentially */ @media (min-width: 768px) { .avatar-stagger-1 .avatar-3d { animation-delay: 0s; } .avatar-stagger-2 .avatar-3d { animation-delay: 0.35s; } .avatar-stagger-3 .avatar-3d { animation-delay: 0.7s; } .avatar-stagger-4 .avatar-3d { animation-delay: 1.05s; } } /* Mobile - slightly faster, no stagger */ @media (max-width: 767px) { .avatar-3d { animation-delay: 0s; animation-duration: 1s; } } /* Subtle hover effect - slight head tilt towards viewer */ .avatar-3d-container:hover .avatar-3d.is-turned { transform: perspective(500px) rotateY(8deg) rotateZ(-2deg) scale(1.05); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── SVG Checkbox (native HTML, used in showcase template) ── */ .cbx-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .cbx-svg { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .cbx-svg svg { stroke: #9ca3af; transition: stroke 0.2s ease; } .cbx-svg .cbx-box { stroke-dasharray: 60; stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s linear; } .cbx-svg .cbx-tick { stroke-dasharray: 22; stroke-dashoffset: 66; transition: stroke-dashoffset 0.2s linear 0.15s; } .cbx-native:checked ~ .cbx-svg svg { stroke: #6366f1; } .cbx-native:checked ~ .cbx-svg .cbx-box { stroke-dashoffset: 60; } .cbx-native:checked ~ .cbx-svg .cbx-tick { stroke-dashoffset: 42; } #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #b32121; color: white; padding: 1rem; text-align: center; } #blazor-error-ui .dismiss { cursor: pointer; margin-left: 1rem; }