/* =================================== FASTBLUE PORTAL - MAIN STYLESHEET Company Colors: - Primary Blue: #0074E0 - Light Blue: #C8E1FA - Dark Grey: #7C8690 - Light Grey: #EDF4FA - Dark Navy: #0B1926 =================================== */ /* Portal-wide fonts — same pairing as the homepage (the styling source of truth): Figtree for headlines, Inter for body text. Loaded here so every page that links style.css gets them without touching its . */ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700&family=Inter:wght@400;500;600&display=swap'); /* ── Global Design Tokens ── */ :root { /* Primary */ --fb-blue: #0074E0; --fb-blue-hover: #0060c0; --fb-blue-light: #C8E1FA; --fb-blue-bg: #EDF4FA; /* Neutrals */ --fb-text: #1A202C; --fb-grey-text: #4A5568; --fb-grey-dark: #7C8690; --fb-white: #ffffff; /* Card System */ --fb-card-bg: #EDF4FA; --fb-border: #C8E1FA; /* Status */ --fb-success: #16A34A; --fb-success-bg: #DCFCE7; --fb-warning: #E68A00; --fb-warning-bg: #FEF3C7; --fb-danger: #dc3545; --fb-danger-bg: #FEE2E2; /* Border Radius */ --fb-radius: 16px; --fb-radius-sm: 12px; --fb-radius-xs: 8px; /* Animation */ --fb-transition: all 0.2s ease; } /* Global Styles */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; margin: 0; padding: 0; /* "Fresh" theme 2026-07: white canvas portal-wide, like the dashboard / fastblue.com. Cards carry the blue tint now, not the page. */ background-color: #ffffff; } /* Slim scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #c9d6e2; border-radius: 8px; border: 2px solid #ffffff; } ::-webkit-scrollbar-thumb:hover { background: #a8bccd; } /* Headlines in Figtree to match the homepage. Inputs/buttons don't inherit the body font by default — pull them in line too. */ h1, h2, h3, h4, h5, h6 { font-family: 'Figtree', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; } button, input, select, textarea { font-family: inherit; } /* =================================== NEW NAVBAR STYLES (FastBlue Website Style) =================================== */ .main-navbar { /* Frosted-glass sticky bar ("Fresh" theme) */ background-color: rgba(255, 255, 255, 0.80); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 4px 20px rgba(11, 25, 38, 0.05); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(0, 116, 224, 0.10); } .navbar-wrapper { width: 100%; max-width: 1880px; box-sizing: border-box; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; height: clamp(48px, 4.5vw, 72px); } /* Logo */ .navbar-logo { display: flex; align-items: center; } .logo-img { height: clamp(32px, 3.2vw, 54px); width: auto; } /* Navigation Items — spread evenly across the bar between logo and user menu */ .navbar-nav { display: flex; align-items: center; flex: 1; justify-content: space-evenly; padding: 0 16px; } .nav-item { position: relative; padding: 8px 12px; color: #0B1926; text-decoration: none; font-size: clamp(12px, 1vw, 16px); font-weight: 500; cursor: pointer; border-radius: 10px; transition: background 0.18s ease, color 0.18s ease; white-space: nowrap; } .nav-item:hover, .nav-item.active { color: #0074E0; background: rgba(0, 116, 224, 0.06); } /* Single animated gradient underline (replaces the old border-bottom) */ .nav-item::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2.5px; border-radius: 3px; background: linear-gradient(135deg, #0074E0, #0056b3); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; } .nav-item:hover::after, .nav-item.active::after { transform: scaleX(1); } .nav-link { display: flex; align-items: center; gap: 5px; cursor: pointer; } .dropdown-icon { font-size: 10px; transition: transform 0.3s ease; } .nav-item.has-dropdown:hover .dropdown-icon { transform: rotate(180deg); } /* Dropdown Menu */ .dropdown-menu { position: absolute; top: 100%; left: 0; background-color: white; border: 1px solid #C8E1FA; border-radius: 14px; box-shadow: 0 16px 40px rgba(11, 25, 38, 0.12); min-width: 240px; padding: 6px; margin-top: 2px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1001; overflow: hidden; } .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: #0B1926; text-decoration: none; font-size: 13px; transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease; margin: 2px 4px; border-radius: 6px; } .dropdown-link:hover { padding-left: 20px; } .dropdown-link:hover { background-color: #EDF4FA; color: #0074E0; } .dropdown-link i { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background-color: #EDF4FA; border: 1px solid #C8E1FA; border-radius: 6px; color: #0074E0; font-size: 13px; flex-shrink: 0; } /* User Menu (Right Side) */ .navbar-user { display: flex; align-items: center; } .user-dropdown-wrapper { position: relative; } .user-menu-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background-color: #EDF4FA; border: 1px solid #C8E1FA; border-radius: 6px; cursor: pointer; font-size: clamp(12px, 0.95vw, 15px); font-weight: 500; color: #0B1926; transition: all 0.3s ease; } .user-menu-btn:hover { background-color: #C8E1FA; border-color: #0074E0; } .user-menu-btn i { font-size: 10px; } .user-name { color: #0074E0; } .user-dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; background-color: white; border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); min-width: 180px; padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1001; } .user-dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .user-dropdown-link { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: #0B1926; text-decoration: none; font-size: 13px; transition: background-color 0.2s ease; } .user-dropdown-link:hover { background-color: #EDF4FA; color: #0074E0; } .user-dropdown-link i { width: 16px; color: #0074E0; } .dropdown-divider { height: 1px; background-color: #e5e5e5; margin: 8px 0; } /* =================================== OLD HEADER STYLES (Keep for backwards compatibility) =================================== */ .header { background-color: #0074E0; color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .header h1 { margin: 0; font-size: 24px; } .header-links { display: flex; gap: 15px; } .header-links a { color: white; text-decoration: none; padding: 8px 15px; border-radius: 4px; transition: background-color 0.3s; } .header-links a:hover { background-color: rgba(255,255,255,0.2); } .logout-btn { background-color: #7C8690; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px; transition: background-color 0.3s; } .logout-btn:hover { background-color: #6a7380; } /* Container */ .container { max-width: 1400px; margin: 30px auto; padding: 0 20px; } /* Page Header */ .page-header { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 20px; } .page-header h2 { margin: 0 0 10px 0; color: #0B1926; } .account-info { color: #7C8690; font-size: 14px; } /* Welcome Box (Dashboard) */ .welcome-box { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 30px; } .welcome-box h2 { color: #0B1926; } /* Info Grid (Dashboard) */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .info-card { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); border-left: 4px solid #0074E0; } .info-card h3 { margin-top: 0; color: #0074E0; } .info-row { margin: 10px 0; padding: 10px 0; border-bottom: 1px solid #EDF4FA; } .info-row:last-child { border-bottom: none; } .label { font-weight: bold; color: #7C8690; } /* Login Container */ .login-container { background-color: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 100%; max-width: 400px; } .login-page { display: flex; justify-content: center; align-items: center; height: 100vh; } .login-container h2 { text-align: center; color: #0B1926; margin-bottom: 30px; } /* Forms */ .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; color: #7C8690; font-weight: 500; } input[type="email"], input[type="password"], input[type="text"] { width: 100%; padding: 10px; border: 1px solid #C8E1FA; border-radius: 4px; box-sizing: border-box; font-size: 14px; transition: border-color 0.3s; } input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus { outline: none; border-color: #0074E0; } /* Buttons — base look only. Width is each page's business; the old global width:100% (login-form styling) was stretching every button portal-wide and crushing modal titles (the ✕ close button ate the header row). */ button, .btn { padding: 12px; background-color: #0074E0; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover, .btn:hover { background-color: #0060c0; } /* Only the login/auth form stretches its submit button full-width */ .login-container button { width: 100%; } /* Messages */ .error { background-color: #fee; color: #c33; padding: 15px; border-radius: 4px; margin-bottom: 20px; text-align: center; border-left: 4px solid #c33; } .success { background-color: #efe; color: #2a7; padding: 15px; border-radius: 4px; margin-bottom: 20px; text-align: center; border-left: 4px solid #2a7; } /* Inventory Table */ .inventory-table { background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th { background-color: #0074E0; color: white; padding: 15px; text-align: left; font-weight: 600; position: sticky; top: 0; } td { padding: 12px 15px; border-bottom: 1px solid #EDF4FA; color: #0B1926; } tr:hover { background-color: #C8E1FA; } .no-data { text-align: center; padding: 40px; color: #7C8690; } .item-count { padding: 15px 20px; background-color: #EDF4FA; font-weight: 600; color: #0B1926; border-bottom: 2px solid #0074E0; } /* Utility Classes */ .text-primary { color: #0074E0; } .text-grey { color: #7C8690; } .text-dark { color: #0B1926; } .bg-light { background-color: #EDF4FA; } .bg-primary { background-color: #0074E0; } /* =================================== RESPONSIVE DESIGN =================================== */ @media (max-width: 1600px) { .navbar-wrapper { padding: 0 20px; } } @media (max-width: 1200px) { .navbar-nav { gap: 2px; } .nav-item { padding: 8px 8px; font-size: 12.5px; } } @media (max-width: 992px) { .navbar-wrapper { flex-wrap: wrap; height: auto; padding: 10px; } .navbar-nav { order: 3; width: 100%; flex-direction: column; margin-top: 10px; gap: 5px; } .nav-item { width: 100%; text-align: center; } .dropdown-menu { position: static; box-shadow: none; border: none; margin-top: 5px; padding-left: 20px; } } /* Shared portal footer */ body.has-portal-footer { min-height: 100vh; display: flex; flex-direction: column; } body.has-portal-footer > * { min-width: 0; } #footer-bar.portal-footer { clear: both; width: 100%; box-sizing: border-box; margin-top: auto; padding: 24px 20px; background: transparent; border: 0; box-shadow: none; color: #7C8690; text-align: center; font-size: 14px; } #footer-bar.portal-footer p { margin: 0; line-height: 1.7; } #footer-bar.portal-footer a { color: #0074E0; text-decoration: none; font-weight: 500; } #footer-bar.portal-footer a:hover { text-decoration: underline; }