/*! * Gravitus Portal Theme v1.1 * --------------------------------------------------------------------------- * Corporate theme for the Gravitus ERP / HR & Payroll portal. * Loads AFTER css/sb-admin-2.min.css and only overrides it, so no PHP page * needs to change. Remove the in _top.php to go back to the old look. * * v1.1: ~190 portal pages also load Bootstrap 3.3.7 CSS from maxcdn after * _top.php. Bootstrap 3 sets html{font-size:10px}, which shrinks every rem-based * size to two-thirds and restyles buttons, forms and headings. This file is * therefore loaded twice: in _top.php (head) and again at the top of * _topnav.php, which every page includes AFTER the Bootstrap 3 link, so the * theme always has the last word. Section 0 neutralises Bootstrap 3's base * rules. * * Direction: a calm, dense "operations ledger" look for payroll offices, * stores counters and site offices. Built from the Gravitus logo: * brick red + plum (the "G"), signal yellow (the block), teal (the "A"). * - Dark plum header carries the white-lettered logo. * - Teal is the working colour (links, primary buttons, focus). * - Brand red is reserved for the brand stripe and destructive / report items. * - Yellow marks master data (the existing "warning" = MASTER convention). * * TYPE * Body / UI ......... Source Sans 3 (compact, very legible in tables) * Headings .......... Archivo (sturdy, slightly condensed grotesk) * Figures / codes ... JetBrains Mono (tabular amounts, stock codes, IDs) * Base size 15px; scale 0.72 / 0.8 / 0.875 / 1 / 1.15 / 1.35 / 1.65 rem * * SPACING * 4px grid: 4 · 8 · 12 · 16 · 24 · 32 · 48. Cards 16-20px inside, * 24px between page sections, table cells 10px x 12px. * * SEMANTIC COLOURS (keep the portal's existing meaning) * success green = transactions / save / approve * warning yellow = master data / caution * danger red = reports / delete / errors / variance * primary teal = navigation, neutral actions * info slate = information * ------------------------------------------------------------------------- */ /* ===== 1. Tokens ======================================================== */ :root { /* brand */ --g-red: #AE3133; --g-red-dark: #8E2729; --g-plum: #2B2122; --g-plum-2: #3A2D2F; --g-yellow: #F5C400; --g-teal: #0B6E80; --g-teal-dark: #08586A; /* neutrals (warm, biased toward the plum) */ --g-ink: #1F1819; --g-text: #3B3233; --g-muted: #6E6264; --g-faint: #9A8F90; --g-line: #E3DCDA; --g-line-strong: #CFC5C3; --g-canvas: #F4F1EF; --g-surface: #FFFFFF; --g-sunk: #F8F6F5; /* semantic */ --g-primary: var(--g-teal); --g-success: #1E7A4C; --g-success-dark: #17603C; --g-warning: #F2B705; --g-warning-text: #8A6400; --g-danger: #B42318; --g-danger-dark: #8F1C13; --g-info: #3E6D9C; --g-secondary: #6E6264; /* type */ --g-font-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --g-font-head: "Archivo", "Arial Narrow", "Segoe UI", Arial, sans-serif; --g-font-mono: "JetBrains Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace; /* shape */ --g-radius: 6px; --g-radius-sm: 4px; --g-shadow: 0 1px 2px rgba(31, 24, 25, .06), 0 2px 8px rgba(31, 24, 25, .05); --g-shadow-lg: 0 8px 28px rgba(31, 24, 25, .16); --g-focus: 0 0 0 3px rgba(11, 110, 128, .28); /* bootstrap variables used by some components */ --primary: #0B6E80; --success: #1E7A4C; --warning: #F2B705; --danger: #B42318; --info: #3E6D9C; --secondary: #6E6264; --font-family-sans-serif: var(--g-font-body); } /* ===== 0. Bootstrap 3 neutraliser (see v1.1 note above) ================= */ html { font-size: 15px !important; -webkit-tap-highlight-color: transparent; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-top: 0; margin-bottom: .5rem; } label { display: inline-block; max-width: none; } .row::before, .row::after { display: none !important; } /* BS3 clearfix breaks flex rows */ .navbar { border: 0; border-radius: 0; margin-bottom: 0; } .navbar-nav > li { float: none; } .nav > li > a:focus, .nav > li > a:hover { background-color: transparent; } .btn:hover, .btn:focus, .nav-link:hover, .nav-link:focus, .dropdown-item:hover, .dropdown-item:focus, .navbar a:hover, .card a:hover { text-decoration: none; } a:focus { outline: none; } .open > .dropdown-menu, .dropdown-menu.show { display: block; } /* works with BS3 or BS4 JavaScript */ input[type="checkbox"], input[type="radio"] { margin: 0 6px 0 0; vertical-align: middle; } .fade.in, .fade.show { opacity: 1; } .modal-backdrop.in, .modal-backdrop.show { opacity: .5; } /* Bootstrap 3 column names still used on a few pages */ .col-xs-1{flex:0 0 8.333%;max-width:8.333%}.col-xs-2{flex:0 0 16.667%;max-width:16.667%}.col-xs-3{flex:0 0 25%;max-width:25%} .col-xs-4{flex:0 0 33.333%;max-width:33.333%}.col-xs-5{flex:0 0 41.667%;max-width:41.667%}.col-xs-6{flex:0 0 50%;max-width:50%} .col-xs-7{flex:0 0 58.333%;max-width:58.333%}.col-xs-8{flex:0 0 66.667%;max-width:66.667%}.col-xs-9{flex:0 0 75%;max-width:75%} .col-xs-10{flex:0 0 83.333%;max-width:83.333%}.col-xs-11{flex:0 0 91.667%;max-width:91.667%}.col-xs-12{flex:0 0 100%;max-width:100%} .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12{position:relative;width:100%;padding-left:.75rem;padding-right:.75rem;float:none} /* ===== 2. Base & typography ============================================= */ html { font-size: 15px; } body { font-family: var(--g-font-body); font-size: 1rem; line-height: 1.5; color: var(--g-text); background: var(--g-canvas); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; /* figures line up everywhere */ } body.bg-gradient-light, .bg-gradient-light { background: var(--g-canvas) !important; background-image: none !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--g-font-head); color: var(--g-ink); font-weight: 700; letter-spacing: -.005em; line-height: 1.2; } h1, .h1 { font-size: 1.65rem; } h2, .h2 { font-size: 1.45rem; } h3, .h3 { font-size: 1.35rem; } h4, .h4 { font-size: 1.15rem; } h5, .h5 { font-size: 1.05rem; } h6, .h6 { font-size: .9rem; } /* page title row:

*/ #content > .d-sm-flex:first-child, #content > div > .d-sm-flex:first-child { padding: 22px 0 14px; margin-bottom: 20px !important; border-bottom: 1px solid var(--g-line); } #content h1.h3 { font-size: 1.55rem; font-weight: 750; text-transform: none; } small, .small { font-size: .875rem; } .text-xs { font-size: .72rem !important; } .text-sm { font-size: .875rem !important; } .text-lg { font-size: 1.1rem !important; } .text-uppercase { letter-spacing: .05em; } .text-xs.text-uppercase, .small.text-uppercase { letter-spacing: .07em; } .font-weight-bold { font-weight: 700 !important; } code, kbd, pre, samp, .font-mono, .text-monospace { font-family: var(--g-font-mono) !important; font-size: .85em; } hr { border-top-color: var(--g-line); } ::selection { background: rgba(245, 196, 0, .45); color: var(--g-ink); } a { color: var(--g-teal); } a:hover { color: var(--g-teal-dark); } /* ===== 3. Colour utilities (SB Admin uses these everywhere) ============== */ .text-primary { color: var(--g-teal) !important; } .text-success { color: var(--g-success) !important; } .text-warning { color: var(--g-warning-text) !important; } .text-danger { color: var(--g-danger) !important; } .text-info { color: var(--g-info) !important; } .text-secondary { color: var(--g-secondary) !important; } .text-gray-900, .text-dark { color: var(--g-ink) !important; } .text-gray-800 { color: var(--g-ink) !important; } .text-gray-700 { color: var(--g-text) !important; } .text-gray-600, .text-gray-500, .text-muted { color: var(--g-muted) !important; } .text-gray-400, .text-gray-300 { color: var(--g-faint) !important; } a.text-primary:hover, a.text-primary:focus { color: var(--g-teal-dark) !important; } a.text-success:hover, a.text-success:focus { color: var(--g-success-dark) !important; } a.text-danger:hover, a.text-danger:focus { color: var(--g-danger-dark) !important; } .bg-primary { background-color: var(--g-teal) !important; } .bg-success { background-color: var(--g-success) !important; } .bg-warning { background-color: var(--g-warning) !important; } .bg-danger { background-color: var(--g-danger) !important; } .bg-info { background-color: var(--g-plum-2) !important; } .bg-gray-100, .bg-light { background-color: var(--g-sunk) !important; } .bg-gray-200 { background-color: #EFEAE8 !important; } .bg-gradient-primary { background: var(--g-plum) linear-gradient(160deg, var(--g-plum-2) 0%, var(--g-plum) 60%) !important; } .bg-gradient-success { background: var(--g-success) linear-gradient(180deg, #23895A 0%, var(--g-success) 100%) !important; } .bg-gradient-danger { background: var(--g-danger) linear-gradient(180deg, #C42E22 0%, var(--g-danger) 100%) !important; } .bg-gradient-info { background: var(--g-plum) !important; background-image: none !important; } .border-primary { border-color: var(--g-teal) !important; } .border-success { border-color: var(--g-success) !important; } .border-warning { border-color: var(--g-warning) !important; } .border-danger { border-color: var(--g-danger) !important; } .border-bottom, .border-top { border-color: var(--g-line) !important; } /* coloured left edge on cards = record status stripe */ .border-left-primary { border-left: 4px solid var(--g-teal) !important; } .border-left-success { border-left: 4px solid var(--g-success) !important; } .border-left-warning { border-left: 4px solid var(--g-warning) !important; } .border-left-danger { border-left: 4px solid var(--g-danger) !important; } .border-left-info { border-left: 4px solid var(--g-info) !important; } .border-left-secondary { border-left: 4px solid var(--g-secondary) !important; } .border-left-dark { border-left: 4px solid var(--g-ink) !important; } /* ===== 4. Header / navigation (_topnav.php) ============================= */ #wrapper > .navbar, .navbar.bg-gradient-info { min-height: 64px !important; padding: 6px 24px; background: var(--g-plum) !important; border-bottom: 0 !important; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); position: relative; } /* brand stripe in the logo colours */ .navbar.bg-gradient-info::after { content: ""; display: block !important; clear: none; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; width: 100%; z-index: 1; background: linear-gradient(90deg, var(--g-red) 0 55%, var(--g-yellow) 55% 80%, var(--g-teal) 80% 100%); } .navbar.bg-gradient-info img[src*="Gravitus"] { max-width: 170px !important; height: auto; } .navbar .nav-link { font-family: var(--g-font-body); font-weight: 600; font-size: .95rem; letter-spacing: .01em; color: rgba(255, 255, 255, .82) !important; padding: 10px 14px !important; margin: 0 2px !important; border-radius: var(--g-radius-sm); } .navbar .nav-link:hover, .navbar .nav-item.show > .nav-link { color: #fff !important; background: rgba(255, 255, 255, .08); } .navbar .nav-item.show > .nav-link { box-shadow: inset 0 -2px 0 var(--g-yellow); } .navbar .img-profile { width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, .25); } .navbar .topbar-divider { border-right-color: rgba(255, 255, 255, .15); height: 32px; } /* current company badge in the header */ .navbar .btn-sm[class*="btn-"] { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .02em; padding: 5px 10px; border-radius: 999px; white-space: nowrap; } /* menus */ .dropdown-menu { font-size: .95rem; border: 1px solid var(--g-line); border-radius: var(--g-radius); box-shadow: var(--g-shadow-lg); padding: 6px; min-width: 15rem; max-height: calc(100vh - 90px); overflow-y: auto; } .dropdown-menu ul { margin: 0; padding: 0; list-style: none; } /* menu items are wrapped in