that will overflow/clip with
no way to see the cut-off columns. Wrapping the grid in lets it
scroll horizontally within its own box instead of blowing out the page layout. */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; }
.table-scroll table { min-width: 640px; }
/* ----- Offline mini-game overlay -----
Requirement: "If there is no internet its opens some engaging activity to play for customer" —
see Components/Layout/NoInternetOverlay.razor + wwwroot/js/offlineGame.js. */
.offline-overlay {
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(17, 24, 39, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.offline-overlay.hidden { display: none; }
.offline-panel {
background: var(--color-surface);
border-radius: var(--radius-card);
padding: 20px;
max-width: 360px;
width: 100%;
text-align: center;
}
.offline-panel canvas {
display: block;
width: 100%;
max-width: 320px;
height: 160px;
background: var(--color-primary-light);
border-radius: var(--radius-control);
margin: 10px auto;
touch-action: manipulation;
}
/* ----- Crop-before-upload modal -----
Requirement: "there should be option to crop the uploaded image" — see
Components/Layout/ImageCropModal.razor + wwwroot/js/interop.js's Cropper.js interop. Higher
z-index than .offline-overlay so a crop in progress still wins if connectivity drops mid-crop
(unlikely, but keeps the two overlays from fighting for the top slot). */
.crop-overlay {
position: fixed;
inset: 0;
z-index: 2100;
background: rgba(23, 33, 36, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.crop-panel {
background: var(--color-surface);
border-radius: var(--radius-card);
padding: 16px;
max-width: 420px;
width: 100%;
}
.crop-image-wrap {
height: 320px;
background: #000;
border-radius: var(--radius-control);
overflow: hidden;
}
.crop-image-wrap img { display: block; max-width: 100%; }
/* Requirement: "Add one more feature on business and service image if user click on it preview it
some larger for better visibility" — full-screen click-to-enlarge overlay (ImagePreviewService /
ImagePreviewModal.razor). Higher z-index than .crop-overlay (2100) so it always wins if somehow
both are ever open, though that shouldn't normally happen. */
.preview-overlay {
position: fixed;
inset: 0;
z-index: 2200;
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
cursor: zoom-out;
}
.preview-image {
max-width: 100%;
max-height: 100%;
border-radius: var(--radius-card);
object-fit: contain;
cursor: default;
}
.preview-close-btn {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.15);
color: #FFFFFF;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.preview-close-btn:hover { background: rgba(255, 255, 255, 0.28); }
/* Thumbnails that opt into click-to-preview (BusinessDetail's logo/gallery/service photos,
BusinessServices'/AdminServices' service-list thumbnails) get this so it's obvious they're
clickable, same affordance convention as other clickable cards in this app. */
.preview-thumb { cursor: zoom-in; }
/* Requirement: "Implement business to user one 2 one in app chat with respect to appointment" —
standard messaging-app bubble layout: my own messages right-aligned/primary color, the other
party's left-aligned/surface color. */
.chat-thread {
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 2px 90px;
min-height: 200px;
}
.chat-bubble-row { display: flex; }
.chat-bubble-row.mine { justify-content: flex-end; }
.chat-bubble-row.theirs { justify-content: flex-start; }
.chat-bubble {
max-width: 78%;
padding: 9px 13px;
border-radius: 14px;
word-break: break-word;
white-space: pre-wrap;
}
.chat-bubble-row.mine .chat-bubble {
background: var(--color-primary);
color: var(--color-text-on-primary);
border-bottom-right-radius: 4px;
}
.chat-bubble-row.theirs .chat-bubble {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text-primary);
border-bottom-left-radius: 4px;
}
.chat-bubble-time {
display: block;
font-size: 0.7rem;
margin-top: 4px;
opacity: 0.75;
}
.chat-composer {
position: sticky;
bottom: 0;
display: flex;
gap: 8px;
align-items: flex-end;
padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
background: var(--color-background);
}
.chat-composer textarea {
flex: 1;
resize: none;
max-height: 96px;
}
#blazor-error-ui {
background: var(--color-accent-light);
color: var(--color-text-primary);
bottom: 0;
box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
/* Requirement (2026-08-15): animated splash intro (Components/Pages/SplashIntro.razor) — the "/"
route shown once per cold start, right after the native MauiSplashScreen. Deliberately hardcoded
(not var(--color-*)) regardless of the user's selected theme — see that file's header comment for
why. Timings: logo scale/fade 600ms, wordmark follows at 350ms, tagline at 800ms (600ms logo +
200ms delay, per the design brief), loader at 1100ms, whole page navigates on to Landing at
1900ms (SplashIntro.razor's TotalDisplayMs).
Requirement (2026-09-16): rebrand SAMAYO -> HzVela, "based on" the uploaded HzMinds logo —
background is now near-black (was Neo-Indigo #4F46E5) to match that logo's icon. */
.splash-intro {
position: fixed;
inset: 0;
z-index: 5000;
background: #15120E;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
overflow: hidden;
}
.splash-intro-glow {
position: absolute;
top: 50%;
left: 50%;
width: 340px;
height: 340px;
transform: translate(-50%, -60%);
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 60%, rgba(255,255,255,0) 100%);
pointer-events: none;
}
.splash-intro-mark {
opacity: 0;
transform: scale(0.7);
animation: splashMarkIn 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
margin-bottom: 8px;
}
.splash-intro-wordmark {
opacity: 0;
transform: translateY(10px);
animation: splashFadeUp 500ms ease-out 350ms forwards;
color: #F3ECDD;
/* Requirement (2026-08-16): matches the Poppins wordmark font now used everywhere else
(.brand-wordmark) so the animated intro and the in-app header/hero read as the same
logotype instead of two different fonts. */
font-family: 'Poppins', 'OpenSansRegular', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
font-size: 34px;
font-weight: 800;
letter-spacing: 3px;
margin: 0;
}
.splash-intro-tagline {
opacity: 0;
animation: splashTaglineIn 400ms ease-out 800ms forwards;
color: #F3ECDD;
font-size: 14px;
letter-spacing: 0.5px;
margin: 2px 0 0;
}
.splash-intro-loader {
opacity: 0;
animation: splashFadeUp 300ms ease-out 1100ms forwards;
display: flex;
gap: 6px;
margin-top: 28px;
}
.splash-intro-loader span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #E4572E;
animation: splashDotPulse 1.1s ease-in-out infinite;
}
.splash-intro-loader span:nth-child(2) { animation-delay: 0.15s; }
.splash-intro-loader span:nth-child(3) { animation-delay: 0.3s; }
@keyframes splashMarkIn {
from { opacity: 0; transform: scale(0.7); }
to { opacity: 1; transform: scale(1); }
}
@keyframes splashFadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes splashTaglineIn {
from { opacity: 0; }
to { opacity: 0.8; }
}
@keyframes splashDotPulse {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
/* Requirement: "implement theme so the user can select based on their choice" — Profile.razor's
Appearance section. Cards themselves use the theme-neutral var(--color-*) tokens (so the picker
itself always matches whichever theme is currently active); only the small preview dots inside
each card are hardcoded per-theme (see Profile.razor's inline styles) since they need to show
what each NON-active theme actually looks like. */
.theme-picker {
display: flex;
flex-direction: column;
gap: 8px;
}
.theme-swatch {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 12px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-control);
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.theme-swatch.selected {
border-color: var(--color-primary);
box-shadow: 0 0 0 1px var(--color-primary);
}
.theme-swatch-dots {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.theme-swatch-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.theme-swatch-text {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.theme-swatch-name {
font-weight: 600;
font-size: 14px;
color: var(--color-text-primary);
}
.theme-swatch-check {
flex-shrink: 0;
color: var(--color-primary);
font-size: 18px;
}
/* Requirement (2026-08-15): "for Indian people prospective ... change the page background theme
based on graphical image that show some concept", then "something modern" — soft blurred
gradient "aurora" blobs (Stripe/Linear/PhonePe/CRED-style ambient glow, no literal pattern)
behind the first-impression screens (Landing, Login, Signup, BusinessLogin). Originally a
jali-lattice (Indian geometric latticework) pattern; replaced with this per user feedback.
Built as layered CSS radial-gradients rather than an image asset — scales perfectly at any
resolution/DPI, adds no download weight, and automatically re-tints per theme via
--color-pattern / --color-pattern-2 (set per theme block above) instead of needing 4 separate
exported images. Four large soft-edged blobs positioned at different corners, each fading to
transparent well before it reaches the opposite side of the screen, so they read as ambient
glow rather than a hard shape.
Applied via negative margins that exactly cancel .app-content's own padding (20px desktop /
14px mobile, matching the breakpoint below), so the glow bleeds edge-to-edge instead of
leaving a plain-background gap around it — deliberately not position:fixed (would need z-index
layering to sit behind content, more fragile) since a plain in-flow block with cancelled margins
achieves the same full-bleed look with no stacking-context risk. */
.pattern-bg {
margin: -20px -20px 0;
padding: 20px;
background-color: var(--color-background);
background-image:
radial-gradient(circle at 12% 8%, var(--color-pattern) 0%, transparent 45%),
radial-gradient(circle at 88% 18%, var(--color-pattern-2) 0%, transparent 42%),
radial-gradient(circle at 15% 78%, var(--color-pattern-2) 0%, transparent 40%),
radial-gradient(circle at 92% 88%, var(--color-pattern) 0%, transparent 45%);
background-repeat: no-repeat;
}
@media (max-width: 420px) {
.pattern-bg { margin: -14px -14px 0; padding: 14px; }
}