/* ============================================================================ FCE brand layer — a MODERN design system on Bootstrap 5.3.3. Goal: a clean, contemporary look & feel (not a pixel reproduction of the legacy purchased marketing template), keeping the FCE green brand identity. Load order: bootstrap.min.css -> fce-brand.css -> site.css ========================================================================== */ :root { /* ---- Brand palette ---- */ --fce-green: #24a828; --fce-green-hover: #1f9123; --fce-green-dark: #18761b; --fce-green-soft: #e8f6e9; /* tints for badges / active states */ --fce-green-rgb: 36, 168, 40; /* ---- Neutrals (modern, slightly cool gray scale) ---- */ --fce-ink: #1f2733; /* primary text */ --fce-muted: #6b7785; /* secondary text */ --fce-line: #e6e9ed; /* hairline borders */ --fce-surface: #ffffff; /* cards / panels */ --fce-canvas: #f5f7fa; /* page background */ --fce-header-top: #1f2733; /* utility bar (modern dark slate) */ --fce-header-top-border: #2a3340; --fce-footer: #1b222c; --fce-footer-text: #aab3c0; /* ---- Design tokens ---- */ --fce-radius: .6rem; --fce-radius-sm: .4rem; --fce-radius-pill: 50rem; --fce-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); --fce-shadow: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05); --fce-shadow-lg: 0 12px 32px rgba(16,24,40,.14); --fce-transition: .18s ease; /* ---- Bootstrap variable overrides ---- */ --bs-body-color: var(--fce-ink); --bs-body-bg: var(--fce-canvas); --bs-link-color-rgb: var(--fce-green-rgb); --bs-link-hover-color-rgb: 31, 145, 35; --bs-border-color: var(--fce-line); --bs-primary-rgb: var(--fce-green-rgb); --bs-border-radius: var(--fce-radius-sm); --bs-border-radius-lg: var(--fce-radius); } /* ============================ Base typography ============================ */ body { font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fce-ink); background-color: var(--fce-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', system-ui, sans-serif; font-weight: 600; color: var(--fce-ink); letter-spacing: -0.01em; } .navbar, .nav, .breadcrumb { font-family: 'Raleway', system-ui, sans-serif; } .logo-font { font-family: 'Raleway', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; } a { transition: color var(--fce-transition); } .text-fce { color: var(--fce-green) !important; } .bg-fce-soft { background-color: var(--fce-green-soft) !important; } /* Consistent page-title rhythm (views use

after a breadcrumb) */ main > .container, main > .container-fluid, main { } main h1.h3, main h1:first-of-type { margin-bottom: 1.25rem; } /* ============================ Buttons (modern) ============================ */ .btn { --bs-btn-border-radius: var(--fce-radius-sm); font-weight: 500; transition: background-color var(--fce-transition), border-color var(--fce-transition), box-shadow var(--fce-transition), transform var(--fce-transition); } .btn:active { transform: translateY(1px); } .btn-primary, .btn-fce { --bs-btn-bg: var(--fce-green); --bs-btn-border-color: var(--fce-green); --bs-btn-hover-bg: var(--fce-green-hover); --bs-btn-hover-border-color: var(--fce-green-hover); --bs-btn-active-bg: var(--fce-green-dark); --bs-btn-active-border-color: var(--fce-green-dark); --bs-btn-disabled-bg: var(--fce-green); --bs-btn-disabled-border-color: var(--fce-green); box-shadow: 0 1px 2px rgba(var(--fce-green-rgb), .35); } .btn-primary:hover, .btn-fce:hover { box-shadow: 0 4px 10px rgba(var(--fce-green-rgb), .30); } .btn-outline-primary { --bs-btn-color: var(--fce-green-hover); --bs-btn-border-color: var(--fce-green); --bs-btn-hover-bg: var(--fce-green); --bs-btn-hover-border-color: var(--fce-green); --bs-btn-active-bg: var(--fce-green-hover); } .btn-success { --bs-btn-bg: var(--fce-green); --bs-btn-border-color: var(--fce-green); --bs-btn-hover-bg: var(--fce-green-hover); --bs-btn-hover-border-color: var(--fce-green-hover); } /* ============================ Cards / panels (modern) ============================ */ .card { --bs-card-border-color: var(--fce-line); --bs-card-border-radius: var(--fce-radius); --bs-card-bg: var(--fce-surface); box-shadow: var(--fce-shadow-sm); transition: box-shadow var(--fce-transition), transform var(--fce-transition); } .card-header { background-color: #fbfcfd; border-bottom-color: var(--fce-line); font-weight: 600; } /* Subtle lift on cards that act as links/tiles (role hubs, nav cards) */ .card.card-hover:hover, a.card:hover, .card > a.stretched-link:hover ~ * { } a.text-decoration-none .card:hover, .card-hover:hover { box-shadow: var(--fce-shadow); transform: translateY(-2px); } /* ============================ Tables (modern) ============================ */ .table { --bs-table-border-color: var(--fce-line); --bs-table-striped-bg: #fafbfc; --bs-table-hover-bg: rgba(var(--fce-green-rgb), .06); vertical-align: middle; } .table > thead { --bs-table-bg: #f3f5f8; color: var(--fce-muted); } .table > thead th { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--fce-line); white-space: nowrap; } /* Soften the heavy default grid of table-bordered for a cleaner look */ .table-bordered { --bs-table-border-color: var(--fce-line); } /* Wrap server-rendered tables in a clean rounded surface */ .table-responsive, .fce-table-card { background: var(--fce-surface); border: 1px solid var(--fce-line); border-radius: var(--fce-radius); box-shadow: var(--fce-shadow-sm); overflow: hidden; } .table-responsive > .table, .fce-table-card > .table { margin-bottom: 0; } .table-colored > thead { --bs-table-bg: var(--fce-green); color: #fff; } /* ============================ Forms (modern) ============================ */ .form-control, .form-select { border-color: var(--fce-line); border-radius: var(--fce-radius-sm); transition: border-color var(--fce-transition), box-shadow var(--fce-transition); } .form-control:focus, .form-select:focus { border-color: var(--fce-green); box-shadow: 0 0 0 .2rem rgba(var(--fce-green-rgb), .18); } .form-label { font-weight: 500; color: var(--fce-ink); margin-bottom: .35rem; } .form-check-input:checked { background-color: var(--fce-green); border-color: var(--fce-green); } .form-check-input:focus { border-color: var(--fce-green); box-shadow: 0 0 0 .2rem rgba(var(--fce-green-rgb), .18); } .input-group-text { background-color: #f3f5f8; border-color: var(--fce-line); } /* ============================ Badges / status pills ============================ */ .badge { font-weight: 600; border-radius: var(--fce-radius-pill); padding: .4em .7em; } .badge.bg-success, .badge.text-bg-success { background-color: var(--fce-green) !important; } .fce-pill-active { background-color: var(--fce-green-soft); color: var(--fce-green-dark); } .fce-pill-inactive { background-color: #f1f3f5; color: var(--fce-muted); } /* ============================ Top utility bar ============================ */ .fce-header-top { background-color: var(--fce-header-top); border-bottom: 1px solid var(--fce-header-top-border); color: #c8d0da; font-size: .82rem; padding: 6px 0; } .fce-header-top a { color: #e9ecef; text-decoration: none; transition: color var(--fce-transition); } .fce-header-top a:hover { color: #fff; } .fce-header-top .fa { color: var(--fce-green); } /* ============================ Header band (white, sticky) ============================ */ .fce-header { padding-top: 8px; padding-bottom: 8px; box-shadow: var(--fce-shadow-sm); transition: padding var(--fce-transition), box-shadow var(--fce-transition); } header { position: sticky; top: 0; z-index: 1030; } /* modern sticky header */ .fce-header.fce-header--scrolled { padding-top: 4px; padding-bottom: 4px; box-shadow: var(--fce-shadow); } .fce-header .navbar-brand img { max-height: 46px; width: auto; transition: max-height var(--fce-transition); } .fce-header.fce-header--scrolled .navbar-brand img { max-height: 38px; } .fce-header .nav-link { color: #3c4654; font-weight: 500; border-radius: var(--fce-radius-sm); padding-left: .85rem; padding-right: .85rem; transition: color var(--fce-transition), background-color var(--fce-transition); } .fce-header .nav-link:hover, .fce-header .nav-link:focus { color: var(--fce-green); } .fce-header .nav-link.active, .fce-header .show > .nav-link { color: var(--fce-green-dark); background-color: var(--fce-green-soft); } .fce-header .dropdown-menu { border: 1px solid var(--fce-line); border-radius: var(--fce-radius); box-shadow: var(--fce-shadow); padding: .35rem; } .fce-header .dropdown-item { border-radius: var(--fce-radius-sm); padding: .45rem .75rem; } .fce-header .dropdown-item:hover, .fce-header .dropdown-item:focus { background-color: var(--fce-green-soft); color: var(--fce-green-dark); } .fce-header .dropdown-item.active, .fce-header .dropdown-item:active { background-color: var(--fce-green); color: #fff; } /* ============================ Hero / banner (modern) ============================ */ .fce-hero { position: relative; background-size: cover; background-position: 50% 35%; min-height: 200px; padding: 48px 0 28px; margin-bottom: 1.75rem; } .fce-hero::after { /* modern gradient overlay (richer than flat black) */ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,24,40,.45) 0%, rgba(16,24,40,.62) 100%); z-index: 1; } .fce-hero > .container { position: relative; z-index: 2; } .fce-hero, .fce-hero p, .fce-hero .title { color: #fff; } .fce-hero .title { font-weight: 700; margin: 0; text-shadow: 0 1px 12px rgba(0,0,0,.25); } .fce-hero .title.logo-font { font-size: 2.4rem; } .fce-hero p { margin: 0; opacity: .92; } .fce-hero-home { min-height: 450px; } /* home landing hero — legacy parity (Revolution Slider startheight: 450) */ .fce-hero-home p { font-size: 42px; line-height: 1.2; font-family: 'Raleway', sans-serif; } /* tagline — legacy parity (.large_white) */ /* ClientAdmin landing only: shorter banner (full width retained; overrides the 450px fce-hero-home). */ .fce-hero-short { min-height: 150px; padding-top: 24px; padding-bottom: 20px; } .separator { width: 48px; height: 3px; background-color: var(--fce-green); border-radius: 3px; margin: 14px auto; } /* Login card title underline — legacy parity (.separator-2 fading gradient line) */ .login-separator { height: 1px; border: 0; margin: 0 0 1.5rem; opacity: 1; background: linear-gradient(to right, rgba(0,0,0,.18) 0%, rgba(0,0,0,.12) 35%, rgba(0,0,0,.05) 70%, rgba(0,0,0,0) 100%); } /* Per-client logo chip overlaid on the hero (white plate so any logo reads on the photo) */ .fce-hero-logo { display: inline-block; } .fce-hero-logo img { max-height: 76px; max-width: 220px; width: auto; background: #fff; padding: 8px 14px; border-radius: var(--fce-radius); box-shadow: var(--fce-shadow); } .fce-hero .breadcrumb { background: transparent; padding: 0 0 12px; margin: 0; font-size: .85rem; } .fce-hero .breadcrumb a { color: #e9ecef; text-decoration: none; } .fce-hero .breadcrumb a:hover { color: #fff; } .fce-hero .breadcrumb-item.active { color: #cfd3d4; } .fce-hero .breadcrumb-item + .breadcrumb-item::before { color: #aeb4b6; } /* In-page breadcrumbs (views render a plain