/* Inter (body) + Poppins (headings) - weights: Inter 300/400/600/700, Poppins 600/700 - using display=swap for faster text rendering */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Poppins:wght@600;700&display=swap'); /* --------------------------- Brand tokens - LIGHT MODE --------------------------- */ :root { /* Typography */ --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: 'Poppins', var(--font-body); /* YnFred brand tokens (light) */ --ynfred-blue: #2B7BB9; /* primary (muted) */ --ynfred-dark-blue: #1976D2; /* stronger blue for accents/cta */ --ynfred-gold: #C9A34A; /* accent gold (do not use for long text) */ --ynfred-gold-dark: #B07F2A; /* darker gold for badges/backgrounds */ --ynfred-background: #F6F8FB; /* soft/off-white background */ --ynfred-surface: #FFFFFF; /* cards / surfaces */ --ynfred-white: #F6F8FB; /* kept for compatibility */ --ynfred-text-primary: #083047; /* dark body text - high contrast on off-white */ --ynfred-text-secondary: rgba(8,48,71,0.7); --ynfred-text-disabled: rgba(8,48,71,0.45); /* helpers (previously referenced but undefined) */ --ynfred-gray: #E4E9EE; /* neutral border / input default */ --ynfred-blue-gradient: linear-gradient(145deg, rgba(43,123,185,0.12) 0%, rgba(25,118,210,0.08) 60%); --ynfred-gold-gradient: linear-gradient(145deg, rgba(201,163,74,0.08) 0%, rgba(176,127,42,0.08) 100%); /* accessible fallbacks for MudBlazor mapping (RGB versions derived from hex) */ --ynfred-blue-rgb: 43,123,185; --ynfred-dark-blue-rgb: 25,118,210; --ynfred-gold-rgb: 201,163,74; } /* --------------------------- Brand tokens - DARK MODE Apply by setting data-theme="dark" on or --------------------------- */ :root[data-theme="dark"] { --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: 'Poppins', var(--font-body); --ynfred-blue: #1976D2; /* we can reuse stronger blue for dark backgrounds */ --ynfred-dark-blue: #165EA8; --ynfred-gold: #F2C94C; /* brighter gold on dark bg (accent) */ --ynfred-gold-dark: #B07F2A; --ynfred-background: #071E2A; /* deep navy background */ --ynfred-surface: #0E2A3A; /* card/panel surface */ --ynfred-white: #EAF6FF; /* light text color for emphasis */ --ynfred-text-primary: #EAF6FF; /* body text (light on dark) */ --ynfred-text-secondary: #B7D6E6; --ynfred-text-disabled: rgba(234,246,255,0.55); --ynfred-gray: #22343D; --ynfred-blue-gradient: linear-gradient(145deg, rgba(25,118,210,0.12) 0%, rgba(43,123,185,0.06) 100%); --ynfred-gold-gradient: linear-gradient(145deg, rgba(242,201,76,0.06) 0%, rgba(176,127,42,0.04) 100%); --ynfred-blue-rgb: 25,118,210; --ynfred-dark-blue-rgb: 22,94,168; --ynfred-gold-rgb: 242,201,76; } /* --------------------------- Global base styles --------------------------- */ body { font-family: var(--font-body); color: var(--ynfred-text-primary); background-color: var(--ynfred-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; margin: 0; font-size: 16px; /* base for readability */ -webkit-font-feature-settings: "kern" 1; } /* Headings use Poppins for clearer hierarchy */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin-top: 0; color: var(--ynfred-dark-blue); } /* Fine-tune heading weights & spacing */ h1 { font-weight: 700; font-size: 2rem; line-height: 1.15; } h2 { font-weight: 700; font-size: 1.5rem; line-height: 1.2; } h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.25; } /* --------------------------- Map to MudBlazor theme variables (scoped when provider adds class) --------------------------- */ .mud-theme-root, .mud-theme-provider { --mud-palette-primary: var(--ynfred-dark-blue); --mud-palette-primary-text: #FFFFFF; /* text on primary */ --mud-palette-primary-rgb: var(--ynfred-dark-blue-rgb); --mud-palette-secondary: var(--ynfred-gold); --mud-palette-secondary-text: var(--ynfred-text-primary); --mud-palette-secondary-rgb: var(--ynfred-gold-rgb); --mud-palette-background: var(--ynfred-background); --mud-palette-surface: var(--ynfred-surface); --mud-palette-text-primary: var(--ynfred-text-primary); --mud-palette-text-secondary: var(--ynfred-text-secondary); --mud-palette-text-disabled: var(--ynfred-text-disabled); --mud-palette-action-default: var(--ynfred-dark-blue); } /* --------------------------- Helpers / Layout --------------------------- */ .ynfred-appbar { background-color: var(--ynfred-dark-blue) !important; color: var(--ynfred-surface) !important; border-bottom: 1px solid rgba(var(--ynfred-blue-rgb), 0.06) !important; } .ynfred-main-content { background-color: var(--ynfred-background); min-height: 100vh; } /* --------------------------- Login container & visuals --------------------------- */ .ynfred-login-container { /* softer blended gradient using the defined variables */ background: var(--ynfred-blue-gradient), var(--ynfred-gold-gradient); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } /* Card / Paper */ .ynfred-paper { background: var(--ynfred-surface); border-radius: 16px; box-shadow: 0 8px 24px rgba(8,48,71,0.06); /* subtle, non-saturating shadow */ border-top: 4px solid var(--ynfred-dark-blue); /* top accent for brand identity */ padding: 20px; max-width: 920px; width: 100%; } /* Logo */ .ynfred-logo { border-radius: 50%; filter: drop-shadow(0 6px 16px rgba(8,48,71,0.08)); transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s; } .ynfred-logo:hover { transform: scale(1.04); } /* --------------------------- Buttons Use white text on blue for accessibility --------------------------- */ .ynfred-button-primary .mud-button-root { background-color: var(--ynfred-dark-blue) !important; color: #FFFFFF !important; /* white text to ensure contrast */ font-weight: 600 !important; border-radius: 8px !important; min-height: 48px !important; text-transform: none !important; box-shadow: 0 6px 20px rgba(25,118,210,0.12) !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important; border: none !important; } .ynfred-button-primary .mud-button-root:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 28px rgba(25,118,210,0.16) !important; filter: brightness(1.03); } .ynfred-button-primary .mud-button-root:active { transform: translateY(0) !important; box-shadow: 0 6px 16px rgba(25,118,210,0.12) !important; } /* Secondary (gold) button variant - use dark text on gold backgrounds */ .ynfred-button-secondary .mud-button-root { background-color: var(--ynfred-gold) !important; color: var(--ynfred-text-primary) !important; /* dark text on gold for contrast */ font-weight: 600 !important; border-radius: 8px !important; min-height: 44px !important; text-transform: none !important; box-shadow: 0 6px 18px rgba(176,127,42,0.08) !important; } /* --------------------------- Input fields --------------------------- */ .ynfred-text-field .mud-input-outlined .mud-input-root { border-radius: 8px !important; background: transparent; } .ynfred-text-field .mud-input-outlined .mud-input-outlined-border { border-color: var(--ynfred-gray) !important; transition: border-color .22s ease, box-shadow .22s ease; } .ynfred-text-field .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--ynfred-gold) !important; /* subtle gold hover */ box-shadow: 0 4px 18px rgba(var(--ynfred-gold-rgb), 0.06); } .ynfred-text-field .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--ynfred-dark-blue) !important; /* focus state */ box-shadow: 0 6px 26px rgba(var(--ynfred-dark-blue-rgb), 0.08); } /* --------------------------- Welcome / Subtitle / Footer --------------------------- */ .ynfred-welcome-text { color: var(--ynfred-dark-blue) !important; font-weight: 700 !important; font-size: 1.25rem; font-family: var(--font-heading); } .ynfred-subtitle { color: var(--ynfred-text-secondary) !important; } .ynfred-footer { position: absolute; bottom: 16px; width: 100%; text-align: center; color: var(--ynfred-text-secondary); } /* --------------------------- Loading overlay --------------------------- */ .ynfred-global-loading { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: flex; align-items: center; justify-content: center; } .ynfred-loading-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; } .ynfred-loading-content { text-align: center; padding: 1.5rem; background: var(--ynfred-surface); border-radius: 14px; box-shadow: 0 10px 30px rgba(8,48,71,0.08); border: 2px solid rgba(var(--ynfred-gold-rgb), 0.14); max-width: 340px; animation: fadeInScale .28s ease-out; } .ynfred-loading-logo { margin-bottom: 1rem; } .ynfred-loading-logo-img { animation: bounce 1.5s ease-in-out infinite; } .ynfred-loading-spinner { margin: 1rem 0; } .ynfred-loading-text { color: var(--ynfred-text-primary); font-weight: 700; margin-bottom: .25rem; font-family: var(--font-heading); } .ynfred-loading-subtext { color: var(--ynfred-text-secondary); font-size: .9rem; } /* --------------------------- Animations --------------------------- */ @keyframes fadeInScale { 0% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } } /* --------------------------- Dark mode specific tweaks (overrides) Use by adding data-theme="dark" to root element --------------------------- */ [data-theme="dark"] .ynfred-loading-backdrop { background: rgba(8, 12, 16, 0.85); } [data-theme="dark"] .ynfred-loading-content { background: var(--ynfred-surface); border-color: rgba(var(--ynfred-gold-rgb), 0.18); } [data-theme="dark"] .ynfred-loading-text { color: var(--ynfred-gold); } [data-theme="dark"] .ynfred-loading-subtext { color: var(--ynfred-text-secondary); } /* ensure main content surfaces adjust on theme */ [data-theme="dark"] .ynfred-main-content { background-color: var(--ynfred-background) !important; }