/* ========================================================================= Qoasmi Theme — Light + Dark. - MudBlazor's MudThemeProvider flips --mud-palette-* on :root when IsDarkMode. - We add `qoasmi-dark` on ourselves (js/theme-toggle.js) to flip our custom --qoasmi-* tokens, since MudBlazor does not emit a dark-mode class. ========================================================================= */ /* ---- Brand tokens: LIGHT (default) ------------------------------------ */ :root { --qoasmi-primary: #7FA871; --qoasmi-primary-light: #A8C79E; --qoasmi-primary-dark: #5D8A56; --qoasmi-secondary: #D4A574; --qoasmi-secondary-light: #E8D5BB; --qoasmi-secondary-dark: #B8915F; --qoasmi-accent: #88D4AB; --qoasmi-accent-light: #B3E4C7; --qoasmi-info: #89C9D9; --qoasmi-info-dark: #5BA3C7; --qoasmi-warning: #E8C574; --qoasmi-error: #E0997E; --qoasmi-cream: #FAFAF8; --qoasmi-beige: #F5F2ED; --qoasmi-border: rgba(127, 168, 113, 0.18); --qoasmi-shadow: 0 12px 32px rgba(127, 168, 113, 0.15); --qoasmi-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05); --qoasmi-shadow-hover: 0 16px 40px rgba(127, 168, 113, 0.22); --qoasmi-appbar-bg: rgba(255, 255, 255, 0.85); --qoasmi-appbar-text: #3A3A3A; --qoasmi-hero-bg: linear-gradient(135deg, #ffffff 0%, #F5F2ED 60%, #E8F0E3 100%); --qoasmi-footer-bg: linear-gradient(135deg, #5D8A56 0%, #7FA871 100%); --qoasmi-footer-text: #ffffff; --qoasmi-card-bg: var(--mud-palette-surface); --qoasmi-image-fallback: linear-gradient(135deg, #F5F2ED 0%, #ffffff 100%); } /* ---- Brand tokens: DARK (when html.qoasmi-dark) ----------------------- We also override the most-used MudBlazor palette vars here so the page stays consistent even if MudThemeProvider hasn't flipped IsDarkMode yet (e.g. pre-render, screenshot harness, or before the Blazor circuit has replayed the preference). When the toggle is clicked through the normal flow, MudThemeProvider will re-emit the full palette on top of these. */ html.qoasmi-dark, html.qoasmi-dark body, html.qoasmi-dark :root { --mud-palette-background: #161D1A !important; --mud-palette-background-grey: #1E2A23 !important; --mud-palette-surface: #1E2A23 !important; --mud-palette-drawer-background: #232F28 !important; --mud-palette-drawer-text: #ECECEA !important; --mud-palette-drawer-icon: #9BC48D !important; --mud-palette-appbar-background: #1E2A23 !important; --mud-palette-appbar-text: #ECECEA !important; --mud-palette-text-primary: #ECECEA !important; --mud-palette-text-secondary: #B4B4B0 !important; --mud-palette-text-disabled: #6B6B6B !important; --mud-palette-action-default: #ECECEA !important; --mud-palette-action-default-hover: rgba(255, 255, 255, 0.06) !important; --mud-palette-action-disabled: #6B6B6B !important; --mud-palette-action-disabled-background: #2A372F !important; --mud-palette-lines-default: #2F3D34 !important; --mud-palette-lines-inputs: #2F3D34 !important; --mud-palette-table-lines: #2F3D34 !important; --mud-palette-divider: #2F3D34 !important; --mud-palette-divider-light: rgba(255, 255, 255, 0.06) !important; --mud-palette-overlay-light: rgba(30, 42, 35, 0.5) !important; --mud-palette-overlay-dark: rgba(0, 0, 0, 0.6) !important; --mud-palette-tooltip-background: #ECECEA !important; --mud-palette-tooltip-color: #1E2A23 !important; --qoasmi-primary: #9BC48D; --qoasmi-primary-light: #B5D6A6; --qoasmi-primary-dark: #6F9C64; --qoasmi-secondary: #E0B98A; --qoasmi-secondary-light: #EBCFA8; --qoasmi-secondary-dark: #C29869; --qoasmi-accent: #A5E2C2; --qoasmi-accent-light: #C5ECD3; --qoasmi-info: #A6D9E5; --qoasmi-info-dark: #7CBFD2; --qoasmi-warning: #F2D58A; --qoasmi-error: #F5B3A0; --qoasmi-cream: #1E2A23; --qoasmi-beige: #232F28; --qoasmi-border: rgba(155, 196, 141, 0.22); --qoasmi-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); --qoasmi-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.4); --qoasmi-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.6); --qoasmi-appbar-bg: rgba(22, 29, 26, 0.85); --qoasmi-appbar-text: #ECECEA; --qoasmi-hero-bg: linear-gradient(135deg, #1B2620 0%, #232F28 60%, #2A3A2F 100%); --qoasmi-footer-bg: linear-gradient(135deg, #0F1612 0%, #1E2A23 100%); --qoasmi-footer-text: #ECECEA; --qoasmi-image-fallback: linear-gradient(135deg, #232F28 0%, #1E2A23 100%); } /* ---- Base ------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { background-color: var(--mud-palette-background); color: var(--mud-palette-text-primary); font-family: 'Nunito', 'Poppins', sans-serif; } ::selection { background: var(--qoasmi-primary); color: #fff; } body, .mud-paper, .mud-card, .mud-appbar, .mud-drawer, .mud-input, .mud-button-root, .mud-nav-link { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ---- Logo ------------------------------------------------------------- */ .qoasmi-logo { height: 48px; width: auto; transition: transform 0.3s ease, opacity 0.3s ease; } .qoasmi-logo:hover { transform: scale(1.05); opacity: 0.9; } .qoasmi-logo-large { height: 120px; width: auto; } /* ---- AppBar ----------------------------------------------------------- */ .qoasmi-appbar.mud-appbar { background: var(--qoasmi-appbar-bg) !important; color: var(--qoasmi-appbar-text) !important; border-bottom: 1px solid var(--qoasmi-border); box-shadow: 0 1px 0 var(--mud-palette-divider), 0 6px 20px rgba(0, 0, 0, 0.04); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); } .qoasmi-appbar .mud-icon-button, .qoasmi-appbar .mud-typography, .qoasmi-appbar .mud-button-root { color: var(--qoasmi-appbar-text) !important; } html.qoasmi-dark .qoasmi-appbar.mud-appbar { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* ---- Drawer / nav ----------------------------------------------------- */ .mud-drawer { border-right: 1px solid var(--mud-palette-divider); background: var(--mud-palette-drawer-background) !important; } .mud-nav-link { border-radius: 12px; margin: 2px 8px; padding: 8px 12px !important; color: var(--mud-palette-drawer-text); transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease; } .mud-nav-link:hover { background-color: var(--mud-palette-action-default-hover); transform: translateX(2px); } .mud-nav-link.active { background-color: var(--qoasmi-primary) !important; color: #ffffff !important; } .mud-nav-link.active .mud-icon-root { color: #ffffff !important; } html.qoasmi-dark .mud-nav-link.active { background-color: var(--qoasmi-primary-dark) !important; } .mud-nav-group .mud-collapse .mud-nav-link { padding-left: 40px !important; } /* ---- Main / page background ------------------------------------------ */ .qoasmi-main { background: var(--mud-palette-background); min-height: calc(100vh - 64px); } /* ---- Cards / surfaces ------------------------------------------------- */ .mud-paper { border-radius: 16px !important; } .mud-card { border-radius: 20px !important; } .animal-card { border-radius: 20px; overflow: hidden; background: var(--qoasmi-card-bg); border: 1px solid var(--mud-palette-divider); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.25s ease; } .animal-card:hover { transform: translateY(-6px); box-shadow: var(--qoasmi-shadow-hover); border-color: var(--qoasmi-primary-light); } .stat-card { background: var(--qoasmi-card-bg); border-left: 4px solid var(--qoasmi-accent); border-radius: 16px; box-shadow: var(--qoasmi-shadow-soft); transition: transform 0.3s ease, box-shadow 0.3s ease; } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--qoasmi-shadow); } /* ---- Hero ------------------------------------------------------------- */ .hero-section { background: var(--qoasmi-hero-bg); border-radius: 28px; padding: clamp(2rem, 5vw, 4rem); color: var(--mud-palette-text-primary); box-shadow: var(--qoasmi-shadow-soft); border: 1px solid var(--mud-palette-divider); position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; inset: -50%; background: radial-gradient(circle at 30% 20%, rgba(127, 168, 113, 0.15), transparent 60%); pointer-events: none; z-index: 0; } html.qoasmi-dark .hero-section::before { background: radial-gradient(circle at 30% 20%, rgba(155, 196, 141, 0.18), transparent 60%); } .hero-section > * { position: relative; z-index: 1; } /* Page-header eyebrow */ .page-header { padding: 1.5rem 0 0.5rem; border-bottom: 1px solid var(--mud-palette-divider); margin-bottom: 1.5rem; } .page-header .eyebrow { color: var(--qoasmi-primary); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 0.25rem; } /* ---- Section header --------------------------------------------------- */ .section-header { color: var(--mud-palette-text-primary); position: relative; padding-bottom: 0.5rem; margin-bottom: 1.5rem; } .section-header::after { content: ''; display: block; width: 56px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--qoasmi-primary), var(--qoasmi-secondary)); margin-top: 0.5rem; } /* ---- Buttons ---------------------------------------------------------- */ .mud-button-filled.mud-button-filled-primary { background: linear-gradient(135deg, var(--qoasmi-primary) 0%, var(--qoasmi-primary-dark) 100%) !important; border-radius: 999px !important; padding: 10px 24px !important; box-shadow: 0 4px 14px rgba(127, 168, 113, 0.25) !important; color: #fff !important; } .mud-button-filled.mud-button-filled-secondary { background: linear-gradient(135deg, var(--qoasmi-accent) 0%, var(--qoasmi-primary-light) 100%) !important; border-radius: 999px !important; padding: 10px 24px !important; color: #fff !important; } .mud-button-outlined { border-radius: 999px !important; padding: 10px 24px !important; border-width: 1.5px !important; } .mud-button-text { border-radius: 999px !important; } .mud-button-filled.mud-button-filled-primary:hover, .mud-button-filled.mud-button-filled-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(127, 168, 113, 0.35) !important; opacity: 0.95; } .mud-button-root { transition: transform 0.15s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .mud-button-root:active { transform: translateY(0); } /* ---- Form inputs ------------------------------------------------------ */ .mud-input-control, .mud-input-outlined .mud-input-outlined-border, .mud-select, .mud-input-slot { border-radius: 14px; } .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--qoasmi-primary-light); } /* ---- Chips ------------------------------------------------------------ */ .mud-chip { border-radius: 999px; font-weight: 500; } /* ---- Animal image container ------------------------------------------ */ .animal-image-container { position: relative; overflow: hidden; height: 250px; background: var(--qoasmi-image-fallback); } .animal-image-container img, .animal-card .mud-card-media { transition: transform 0.5s cubic-bezier(.2,.8,.2,1); } .animal-card:hover .animal-image-container img, .animal-card:hover .mud-card-media { transform: scale(1.06); } /* ---- Footer ----------------------------------------------------------- */ .qoasmi-footer { background: var(--qoasmi-footer-bg); color: var(--qoasmi-footer-text); } .qoasmi-footer .mud-typography, .qoasmi-footer .mud-link { color: var(--qoasmi-footer-text) !important; } .qoasmi-footer .mud-link:hover { color: var(--qoasmi-accent-light) !important; } .qoasmi-footer .mud-text-secondary { color: rgba(255, 255, 255, 0.7) !important; } .qoasmi-footer .mud-icon-root { color: var(--qoasmi-footer-text); } /* ---- Decorative ------------------------------------------------------- */ .paw-decoration { opacity: 0.06; position: absolute; font-size: 100px; color: var(--qoasmi-primary); pointer-events: none; } /* ---- Loading shimmer (for skeletons) --------------------------------- */ @keyframes qoasmiShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .qoasmi-skeleton { background: linear-gradient(90deg, var(--mud-palette-action-disabled-background) 0%, var(--mud-palette-divider) 50%, var(--mud-palette-action-disabled-background) 100%); background-size: 800px 100%; animation: qoasmiShimmer 1.4s ease-in-out infinite; border-radius: 12px; } /* ---- Page fade-in ----------------------------------------------------- */ @keyframes qoasmiFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .qoasmi-fade-in { animation: qoasmiFadeIn 0.45s cubic-bezier(.2,.8,.2,1) both; } /* ---- Rich-text from editors ------------------------------------------ */ .qoasmi-rich-text { color: var(--mud-palette-text-primary); } .qoasmi-rich-text img { max-width: 100%; border-radius: 12px; } .qoasmi-rich-text a { color: var(--qoasmi-primary); } .qoasmi-rich-text a:hover { color: var(--qoasmi-primary-dark); } .qoasmi-rich-text blockquote { border-left: 4px solid var(--qoasmi-secondary); padding: 0.5rem 1rem; margin: 1rem 0; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-grey); border-radius: 0 12px 12px 0; } .mud-progress-circular.mud-primary-text { color: var(--qoasmi-primary) !important; } /* ---- Scroll-to-top floater ------------------------------------------ */ .qoasmi-scroll-top { position: fixed; right: 24px; bottom: 24px; z-index: 1100; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .qoasmi-scroll-top.visible { opacity: 1; pointer-events: auto; } .qoasmi-scroll-top:hover { transform: translateY(-3px); } /* ---- Soft surface helper for legacy hardcodes ------------------------- */ /* Use this class instead of background:white to stay theme-aware. */ .qoasmi-soft-surface { background: var(--mud-palette-surface); border-radius: 12px; } /* MudBlazor MudAlert in dark mode — keep filled alerts vivid */ html.qoasmi-dark .mud-alert-filled-error { color: #fff; } html.qoasmi-dark .mud-alert-filled-warning { color: #1B1B1B; } /* ---- Public hero — improve contrast for hero text -------------------- */ html.qoasmi-dark .hero-section { border-color: rgba(255, 255, 255, 0.05); } html.qoasmi-dark .hero-section .mud-typography { color: var(--mud-palette-text-primary); }