/* Barquecon Queue — brand theme aligned to www.barquecontech.com (LIGHT). Poppins · gold #f1b621 · #333 text · white/light backgrounds · navy only for accent bands. Loaded last in so it overrides the stock CodeKernel themes. */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); :root { --gold: #f1b621; --gold-d: #d69f14; --ink: #1a2330; --text: #333333; --navy: #0d1b2a; --line: #e7ebf0; --soft: #f7f8fa; } /* ---------- Base ---------- */ /* The bundled Bootstrap build pins `html { font-size: 10px }`, which makes 1rem = 10px and shrank every rem-based size in this theme (hero/footer/ marketing text) to ~62% of intent. No other stylesheet uses rem, so we restore the standard 16px root. Body stays 14px via Bootstrap (px). */ html { font-size: 16px !important; } body, body#page-top, .cm-login { font-family: 'Poppins', -apple-system, "Segoe UI", Roboto, sans-serif !important; color: var(--text); background: #ffffff; font-size: 15px; } h1, h2, h3, h4, h5, .navbar-brand, .panel-heading, .btn { font-family: 'Poppins', sans-serif !important; } h1, h2, h3 { color: var(--ink); font-weight: 700; } a { color: var(--ink); } a:hover, a:focus { color: var(--gold-d); } /* ---------- GOLD top nav (matches main site) ---------- */ .navbar, .navbar-default, .navbar-inverse, #navbar-menu { background-color: var(--gold) !important; border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,.08); } .navbar .navbar-nav > li > a, .navbar-brand, .nav-link, .navbar-default .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a { color: #1a1a1a !important; font-weight: 500; } .navbar .navbar-nav > .active > a, .navbar .navbar-nav > li > a:hover, .navbar .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a { background: #111 !important; color: #fff !important; border-radius: 6px; } .navbar-brand > img { height: 42px; width: auto; } .dropdown-menu { border: none; box-shadow: 0 8px 26px rgba(0,0,0,.14); } .dropdown-menu > li > a { color: var(--ink); } .dropdown-menu > li > a:hover { background: var(--soft); color: var(--gold-d); } /* ---------- Buttons: gold w/ dark text; .btn-dark = black pill ---------- */ .btn-primary, .btn-success, .thm-btn, .btn.thm-btn { background-color: var(--gold) !important; border-color: var(--gold-d) !important; color: #1a1a1a !important; font-weight: 600; border-radius: 6px; } .btn-primary:hover, .btn-primary:focus, .btn-success:hover, .thm-btn:hover { background-color: var(--gold-d) !important; border-color: var(--gold-d) !important; color: #1a1a1a !important; } .btn-default { border-radius: 6px; border-color: var(--line); color: var(--ink); } .btn-dark, .btn-pill-dark { background: #111 !important; color: #fff !important; border: none; border-radius: 24px; font-weight: 600; } /* ---------- Panels / cards: light, gold accent ---------- */ .panel { border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 4px rgba(13,27,42,.05); } .panel-primary { border-color: var(--line) !important; } .panel-primary > .panel-heading, .panel-default > .panel-heading { background: #fff !important; color: var(--ink) !important; border-bottom: 2px solid var(--gold) !important; border-radius: 10px 10px 0 0; } .panel-primary > .panel-heading h1, .panel-primary > .panel-heading h2, .panel-primary > .panel-heading h3, .panel-primary > .panel-heading a { color: var(--ink) !important; } .panel-body { background: #fff; color: var(--text); } /* ---------- Tables / labels ---------- */ .table { background: #fff; } .table > thead > tr > th, .datatable thead th { background: var(--soft); color: var(--ink); border-bottom: 2px solid var(--gold) !important; font-weight: 600; } .table-bordered { border-color: var(--line); } .label-primary { background-color: var(--navy) !important; } .label-success { background-color: #2e7d32 !important; } /* ---------- Forms ---------- */ .form-control { border-color: var(--line); border-radius: 6px; box-shadow: none; } .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(241,182,33,.18); } /* ---------- Gold "eyebrow" pill (like the main site labels) ---------- */ .bqt-eyebrow { display: inline-block; background: var(--gold); color: #1a1a1a; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; padding: 6px 14px; border-radius: 6px; } /* ---------- Backend admin shell -> light ---------- */ .page-container, .main-content, .content-wrapper, body.cm-backend { background: var(--soft) !important; } .sidebar, aside, .page-sidebar, .main-menu, .sidebar-inner { background: #fff !important; border-right: 1px solid var(--line); } .sidebar a, aside a, .page-sidebar a { color: var(--ink) !important; } .sidebar li.active > a, aside .active > a, .cm-submenu.open > a { background: var(--soft) !important; border-left: 3px solid var(--gold) !important; color: var(--gold-d) !important; } /* ================= FRONTEND LANDING ================= */ body#page-top { background: #fff; } .owl-carousel:not(.owl-loaded) { display: none; } /* Hero — light with a soft tint, gold nav sits on top */ .bqt-hero { background: linear-gradient(180deg, #fffdf6 0%, #ffffff 100%); color: var(--ink); padding: 80px 0 64px; text-align: center; border-bottom: 1px solid var(--line); } .bqt-hero .bqt-hero-logo { height: 60px; width: auto; margin-bottom: 22px; } .bqt-hero h1 { font-size: 2.7rem; font-weight: 800; margin: 0 0 16px; color: var(--ink); line-height: 1.15; } .bqt-hero h1 .g { color: var(--gold-d); } .bqt-hero p { font-size: 1.12rem; color: #55636f; max-width: 720px; margin: 0 auto 26px; } .bqt-hero .btn { padding: 12px 30px; font-size: 1.02rem; } .bqt-verticals { margin-top: 24px; color: #7a8794; font-size: .96rem; } .bqt-verticals span { display: inline-block; margin: 4px 12px; } @media (max-width: 600px) { .bqt-hero h1 { font-size: 1.9rem; } } /* Get-started / login card (kill website.css gold overlay + white text) */ #get-started { background: var(--soft) !important; padding: 60px 0; } #get-started:before { display: none !important; } #get-started .header-content { padding: 40px 0 !important; } #get-started .header-content .header-content-inner { color: var(--text) !important; max-width: 560px; } #get-started .header-content .header-content-inner h1 { color: var(--ink) !important; font-weight: 800; } #get-started .form-area { background: #fff; border-radius: 12px; padding: 28px; box-shadow: 0 12px 40px rgba(13,27,42,.10); border-top: 4px solid var(--gold); } #get-started .form-head h3 { color: var(--ink); font-weight: 800; margin-top: 0; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--ink); border-bottom: 2px solid var(--gold); } #get-started .form-control { height: 44px; } .common-section, #explore, #about-us, #contact-us { padding: 52px 0; background: #fff; } /* ================= IA3: mobile / responsive guards (customer + landing) ================= */ /* Never allow horizontal scroll; the CodeKernel template pins .container to a fixed width — release it on small screens so nothing gets clipped. */ html, body { max-width: 100%; overflow-x: hidden; } @media (max-width: 767px) { .container { width: 100% !important; padding-left: 16px; padding-right: 16px; } .bqt-hero { padding: 54px 0 42px; } .bqt-hero h1 { font-size: 1.7rem !important; } .bqt-hero p { font-size: 1rem; } #get-started { padding: 40px 0; } #get-started .header-content { padding: 10px 0 24px !important; } #get-started .header-content-inner h1, #explore h1, #about-us h1, #contact-us h1, .common-section h1 { font-size: 1.5rem !important; } #get-started .form-area { padding: 20px; } /* Long words in headings should wrap, never overflow */ h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; } /* Client app nav: let the section links wrap instead of pushing width */ .navbar-inverse .navbar-nav { float: none; } .navbar-inverse .navbar-nav > li { display: inline-block; float: none; } } /* Stat/KPI + lane grids already collapse via their own media queries. */ /* ================= GTM: marketing pages ================= */ .mk-hero { background: linear-gradient(180deg,#fffdf6 0%,#fff 100%); padding: 64px 0 48px; text-align: center; border-bottom: 1px solid var(--line); } .mk-hero .bqt-eyebrow { margin-bottom: 16px; } .mk-hero h1 { font-size: 2.4rem; font-weight: 800; margin: 6px 0 14px; } .mk-hero h1 .g { color: var(--gold-d); } .mk-hero p { font-size: 1.1rem; color: #55636f; max-width: 680px; margin: 0 auto 22px; } .mk-section { padding: 56px 0; } .mk-section.alt { background: var(--soft); } .mk-section h2 { text-align: center; font-size: 1.8rem; font-weight: 800; margin: 0 0 8px; } .mk-section h2 .g { color: var(--gold-d); } .mk-section .mk-sub { text-align: center; color: #6b7683; max-width: 640px; margin: 0 auto 36px; } .mk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } @media (max-width: 900px){ .mk-grid { grid-template-columns: 1fr; } } .mk-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; box-shadow: 0 2px 10px rgba(13,27,42,.05); } .mk-card .mk-ico { width: 46px; height: 46px; border-radius: 12px; background: #fff7e2; color: var(--gold-d); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 14px; } .mk-card h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 8px; } .mk-card p { color: #6b7683; font-size: .95rem; margin: 0; line-height: 1.6; } /* Numbered steps */ .mk-step .mk-ico { background: var(--navy); color: var(--gold); font-weight: 800; } /* Pricing tiers */ .mk-tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: stretch; } @media (max-width: 900px){ .mk-tiers { grid-template-columns: 1fr; } } .mk-tier { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 30px 26px; display: flex; flex-direction: column; } .mk-tier.featured { border: 2px solid var(--gold); box-shadow: 0 14px 40px rgba(13,27,42,.12); position: relative; } .mk-tier .mk-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--ink); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; } .mk-tier h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 4px; } .mk-tier .mk-price { font-size: 2.3rem; font-weight: 800; color: var(--ink); margin: 10px 0 2px; } .mk-tier .mk-price small { font-size: .9rem; font-weight: 600; color: #8a95a2; } .mk-tier .mk-note { color: #8a95a2; font-size: .85rem; margin-bottom: 16px; } .mk-tier ul { list-style: none; padding: 0; margin: 0 0 22px; } .mk-tier ul li { padding: 7px 0 7px 26px; position: relative; color: #445; font-size: .93rem; border-top: 1px solid var(--line); } .mk-tier ul li:before { content: '✓'; position: absolute; left: 0; color: var(--gold-d); font-weight: 800; } .mk-tier .btn { margin-top: auto; } /* Feature matrix */ .mk-matrix { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .mk-matrix th, .mk-matrix td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: center; } .mk-matrix th:first-child, .mk-matrix td:first-child { text-align: left; } .mk-matrix thead th { background: var(--soft); font-weight: 700; } .mk-matrix .yes { color: #2f9e6b; font-weight: 700; } .mk-matrix .no { color: #c9d0d8; } /* CTA band */ .mk-cta { background: var(--navy); color: #fff; text-align: center; padding: 54px 0; } .mk-cta h2 { font-size: 1.7rem; font-weight: 800; margin: 0 0 10px; color: #fff; } .mk-cta p { color: #c3cdd8; margin: 0 0 22px; } .mk-cta .btn { margin: 0 6px; } /* FAQ */ .mk-faq { max-width: 760px; margin: 0 auto; } .mk-faq .mk-q { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin-bottom: 12px; } .mk-faq .mk-q h4 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; } .mk-faq .mk-q p { margin: 0; color: #6b7683; font-size: .93rem; } /* Industry cards */ .mk-ind .mk-card { text-align: left; } .mk-ind .mk-emoji { font-size: 1.9rem; margin-bottom: 10px; } .mk-ind .mk-card ul { margin: 10px 0 0; padding-left: 18px; color: #6b7683; font-size: .9rem; } .mk-ind .mk-card ul li { margin: 4px 0; } /* Footer -> dark navy accent band (like main site) */ .bqt-footer { background: var(--navy); color: #c3cdd8; padding: 52px 0 22px; } .bqt-footer .bqt-foot-col { margin-bottom: 24px; } .bqt-footer .bqt-foot-logo { height: 42px; width: auto; margin-bottom: 14px; } .bqt-footer p { color: #aeb9c5; font-size: .93rem; line-height: 1.7; } .bqt-footer h5 { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin: 0 0 14px; } .bqt-footer a { color: #d7dee6; } .bqt-footer a:hover { color: var(--gold); } .bqt-footer .fa { color: var(--gold); width: 18px; } .bqt-social { margin-top: 12px; } .bqt-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); margin-right: 8px; } .bqt-social a:hover { background: var(--gold); } .bqt-social a:hover .fa { color: var(--navy); } .bqt-foot-map { width: 100%; height: 168px; border: 0; border-radius: 8px; } .bqt-foot-bottom { border-top: 1px solid rgba(255,255,255,.10); margin-top: 14px; padding-top: 16px; font-size: .85rem; color: #8fa0b1; } .bqt-foot-right { float: right; } @media (max-width: 767px) { .bqt-foot-right { float: none; display: block; margin-top: 6px; } } /* Admin login page -> light with gold accent */ .cm-login { background: var(--soft) !important; } .cm-login .btn, .btn-login { background-color: var(--gold) !important; color: #1a1a1a !important; border: none; font-weight: 600; } /* ================= UX3: backend polish ================= */ /* Off-brand "MY QUEUE" loader caused an overlap in the sidebar header — hide it */ .loader { display: none !important; } /* Sidebar brand: clean, sized, no overlap with the toggle */ .cm-navbar.cm-navbar-primary { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); } .cm-logo img { max-width: 150px; height: auto; } .md-menu-white, .cm-navbar .btn.md-menu-white { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--ink) !important; } /* Action buttons -> on-brand: EDIT neutral, DISABLE amber-outline, DELETE red, primary stays gold */ .btn-info { background: #eef1f5 !important; color: var(--ink) !important; border: 1px solid var(--line) !important; } .btn-info:hover, .btn-info:focus { background: #e3e8ee !important; color: var(--ink) !important; } .btn-warning { background: #fff !important; color: #a86a12 !important; border: 1px solid #e6c163 !important; } .btn-warning:hover, .btn-warning:focus { background: #fdf6e3 !important; color: #8a5d10 !important; } .btn-danger { background: #e5484d !important; border-color: #c93b40 !important; color: #fff !important; } .btn-xs { border-radius: 5px; } /* Content area + page title */ .cm-topbar, .cm-header { background: var(--gold) !important; } .cm-topbar h1, .cm-header h1, .cm-page-title { color: #1a1a1a !important; font-weight: 700; } /* UX3: remove stale "My Queue" background-logo overlapping the sidebar brand */ .cm-navbar .cm-logo, .cm-navbar .cm-flex, .cm-logo:before, .cm-logo:after, .md-menu-white:before, .md-menu-white:after { background: none !important; background-image: none !important; border: none !important; box-shadow: none !important; content: none !important; } body.loader-process:before, body.loader-process:after { display: none !important; } .cm-logo img { max-width: 150px !important; height: auto !important; } /* ================= UX5: reusable dashboard/section primitives ================= */ /* Page header — title + subtitle, gold underline accent */ .bqt-page-head { margin: 4px 0 22px; } .bqt-page-head h1, .bqt-page-head h2 { font-size: 1.55rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; } .bqt-page-head h1 .g, .bqt-page-head h2 .g { color: var(--gold-d); } .bqt-page-head p { color: #6b7683; font-size: .95rem; margin: 0; } .bqt-head-rule { height: 3px; width: 54px; background: var(--gold); border-radius: 3px; margin-top: 10px; } /* Section heading (replaces oversized

chart titles) */ .bqt-section-h { font-size: 1.05rem !important; font-weight: 700; color: var(--ink) !important; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .bqt-section-h .fa { color: var(--gold-d); } /* KPI stat tiles — light cards with gold accent bar */ .bqt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 24px; } @media (max-width: 900px) { .bqt-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .bqt-stats { grid-template-columns: 1fr; } } .bqt-stat { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(13,27,42,.05); position: relative; overflow: hidden; } .bqt-stat:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); } .bqt-stat .bqt-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #7a8794; font-weight: 600; margin: 0 0 6px; } .bqt-stat .bqt-stat-value { font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1; } .bqt-stat .bqt-stat-sub { font-size: .8rem; color: #8a95a2; margin-top: 6px; } .bqt-stat.is-ok:before { background: #2f9e6b; } .bqt-stat.is-wait:before { background: var(--gold); } .bqt-stat.is-stop:before { background: #e5484d; } .bqt-stat.is-navy:before { background: var(--navy); } /* Chart card wrapper */ .bqt-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; box-shadow: 0 1px 4px rgba(13,27,42,.05); margin-bottom: 22px; } /* Empty state */ .bqt-empty { text-align: center; color: #8a95a2; padding: 34px 16px; } .bqt-empty .fa { font-size: 1.8rem; color: var(--line); display: block; margin-bottom: 10px; } .bqt-empty p { margin: 0; font-size: .95rem; } /* Report DataTable: softer filter row + roomier filter controls */ table.dataTables thead tr:nth-child(2) th, table.dataTables thead tr:nth-child(2) td { background: var(--soft) !important; padding: 8px !important; } table.dataTables thead .form-control, table.dataTables thead .select2-container { min-width: 130px; } table.dataTables thead .select2-container { width: 100% !important; } .dataTables_wrapper .dt-buttons .btn { margin-bottom: 8px; }