/* * ═══════════════════════════════════════════════════════════════════ * FABCONNECT — GLOBAL DESIGN TOKENS v3 * File: frontend-assets/css/tokens.css * Load: SECOND in every , right after Bootstrap * ═══════════════════════════════════════════════════════════════════ */ /* ── Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&display=swap'); @font-face { font-family: 'Evogria'; src: url('../fonts/Evogria.woff2') format('woff2'), url('../fonts/Evogria.woff') format('woff'), url('../fonts/Evogria.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } :root { /* ── Primary Brand Blue ── */ --color-primary: #0057C0; --color-primary-fixed: #DCE8FF; --color-primary-dim: #A8C4F0; --color-primary-container: #1A6FD4; --color-primary-deep: #003E99; --color-primary-dark: #0A2540; /* updated to match design navy */ /* ── Secondary Accent Orange ── */ --color-accent: #FE820E; --color-accent-fixed: #FEE8D0; --color-accent-dim: #FDBA7A; --color-accent-deep: #B85800; --color-accent-dark: #6B2F00; /* ── Neutrals ── */ --color-white: #FFFFFF; --color-neutral-dim: #F6F9FC; /* updated to match design light-bg */ --color-neutral-container: #E5E8FC; --color-neutral-high: #E6EBF1; /* updated to match design border */ --color-neutral-variant: #B8B9EB; --color-neutral-border: #8E90C7; --color-neutral-outline: #6F71B8; --color-neutral-gray: #4B4D91; /* ── Semantic / Text ── */ --color-default: #0A2540; /* updated to match design navy */ --color-secondary: #0e1d34; --color-text-body: #425466; /* updated to match design muted */ --color-text-muted: #425466; /* same — Hanken Grotesk muted */ /* ── Status ── */ --color-success: #16a34a; --color-danger: #dc2626; --color-warning: #d97706; --color-info: #0284c7; /* ── Typography ── */ --font-heading: 'Cairo', sans-serif; /* Cairo for headings */ --font-body: 'Hanken Grotesk', 'Cairo', sans-serif; /* Hanken body */ /* ── Spacing ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ── Radius ── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* ── Shadows ── */ --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 16px rgba(0,30,90,.09); --shadow-lg: 0 8px 32px rgba(0,30,90,.13); --shadow-xl: 0 16px 48px rgba(0,30,90,.16); /* ── Transitions ── */ --transition-fast: .15s cubic-bezier(.4,0,.2,1); --transition-base: .22s cubic-bezier(.4,0,.2,1); --transition-slow: .38s cubic-bezier(.4,0,.2,1); /* ── Layout ── */ --header-height: 64px; --sidebar-width: 262px; --sidebar-width-mini: 68px; } /* ── Base resets ── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-body); color: var(--color-text-body); background-color: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-default); } a { color: var(--color-primary); transition: color var(--transition-fast); text-decoration: none; } a:hover { color: var(--color-primary-deep); } /* ── Bootstrap overrides ── */ .btn-primary, .bg-primary { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .btn-primary:hover { background-color: var(--color-primary-deep) !important; border-color: var(--color-primary-deep) !important; } .text-primary { color: var(--color-primary) !important; } .form-control:focus, .form-select:focus { border-color: var(--color-primary-dim) !important; box-shadow: 0 0 0 3px rgba(0,87,192,.12) !important; } .page-item.active .page-link { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .page-link { color: var(--color-primary) !important; } .page-link:hover { background-color: var(--color-primary-fixed) !important; } /* ── Brand buttons ── */ .btn-orange { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #fff !important; font-family: var(--font-body); font-weight: 700; border-radius: var(--radius-md); transition: background-color var(--transition-fast), transform .15s ease; } .btn-orange:hover { background-color: var(--color-accent-deep) !important; border-color: var(--color-accent-deep) !important; color: #fff !important; transform: translateY(-1px); } .btn-orange-outline { background-color: transparent !important; border: 2px solid var(--color-accent) !important; color: var(--color-accent) !important; font-family: var(--font-body); font-weight: 700; border-radius: var(--radius-md); } .btn-orange-outline:hover { background-color: var(--color-accent) !important; color: #fff !important; } .btn-blue { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; font-family: var(--font-body); font-weight: 700; border-radius: var(--radius-md); } .btn-blue:hover { background-color: var(--color-primary-deep) !important; border-color: var(--color-primary-deep) !important; } .btn-view { color: var(--color-primary) !important; border-color: var(--color-primary-dim) !important; } .btn-view:hover { background-color: var(--color-primary) !important; color: #fff !important; } /* ── Portal tokens (sidebar/dashboard) ── */ :root { --fc-sidebar-bg: #0A2540; --fc-sidebar-w: var(--sidebar-width); --fc-sidebar-w-mini: var(--sidebar-width-mini); --fc-header-h: var(--header-height); --fc-surface: var(--color-white); --fc-bg: var(--color-neutral-dim); --fc-border: var(--color-neutral-high); --fc-shadow-sm: var(--shadow-sm); --fc-shadow-md: var(--shadow-md); --fc-radius: var(--radius-lg); --fc-radius-sm: var(--radius-sm); --transition: var(--transition-base); } .dash-card-title .dot { background: var(--color-accent) !important; } .fc-tbl tbody tr:hover { background-color: var(--color-primary-fixed) !important; } .nav-count { background-color: var(--color-accent) !important; } .g-selects select:focus { border-color: var(--color-primary) !important; } /* ── Footer (dark) ── */ #footer { background-color: #0A2540 !important; } #footer .footer-top { background-color: #0A2540 !important; } #footer .footer-links h4 { font-family: var(--font-heading); color: #fff; font-weight: 700; font-size: .95rem; } #footer .footer-links ul li a { color: rgba(255,255,255,.65); font-family: var(--font-body); font-size: .92rem; } #footer .footer-links ul li a:hover { color: var(--color-accent) !important; } #footer .footericon { background-color: var(--color-primary-container); border-radius: var(--radius-sm); } #footer .footerdata p { color: rgba(255,255,255,.7); font-family: var(--font-body); font-size: .92rem; } .copyright-outer { border-top: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.15); } .copyright, .copyright a { color: rgba(255,255,255,.45); font-family: var(--font-body); font-size: .75rem; } .copyright a:hover { color: var(--color-accent); } /* ── Flash toast ── */ .flash { border-left-color: var(--color-accent) !important; font-family: var(--font-body); } .flash__icon { color: var(--color-accent) !important; } /* ── Floating contact button ── */ .contct-us { background-color: var(--color-accent) !important; color: #fff !important; font-family: var(--font-body); font-weight: 700; border-radius: var(--radius-full); box-shadow: var(--shadow-md); } .contct-us:hover { background-color: var(--color-accent-deep) !important; transform: translateY(-2px); } /* ── Utilities ── */ .text-brand-primary { color: var(--color-primary) !important; } .text-brand-accent { color: var(--color-accent) !important; } .text-brand-dark { color: var(--color-default) !important; } .bg-brand-primary { background-color: var(--color-primary) !important; } .bg-brand-accent { background-color: var(--color-accent) !important; } .bg-brand-dark { background-color: var(--color-primary-dark) !important; } .bg-brand-dim { background-color: var(--color-neutral-dim) !important; } .rounded-fc-sm { border-radius: var(--radius-sm) !important; } .rounded-fc-md { border-radius: var(--radius-md) !important; } .rounded-fc-lg { border-radius: var(--radius-lg) !important; } .shadow-fc-sm { box-shadow: var(--shadow-sm) !important; } .shadow-fc-md { box-shadow: var(--shadow-md) !important; } .shadow-fc-lg { box-shadow: var(--shadow-lg) !important; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }