/*
* EVALUATION WORLD - BRAND OVERRIDE STYLESHEET
* =============================================
* Add this to your existing form pages (apply.html, index-form.html, index-form-certified.html)
* to restyle them to match the new navy + orange brand design.
*
* INSTRUCTIONS:
* 1. Upload this file to your server (e.g., /css/brand-override.css)
* 2. Add these two lines to the of each form page, AFTER your existing stylesheets:
*
*
*
*
* This overrides ONLY visual styles — no form functionality, field names, or JS is changed.
*/
/* ===== CSS VARIABLES ===== */
:root {
--navy: #1B2A4A;
--navy-dark: #131E36;
--navy-mid: #243B63;
--navy-light: #2E4D7D;
--orange: #E8841A;
--orange-light: #F0A04E;
--orange-pale: #FFF5E9;
--orange-dark: #C96E0E;
--white: #FFFFFF;
--off-white: #F7F8FA;
--gray-100: #F1F3F5;
--gray-200: #E2E6EA;
--gray-300: #CED4DA;
--gray-500: #6C7A89;
--gray-700: #404D5B;
--gray-900: #1A1F25;
}
/* ===== GLOBAL RESETS ===== */
body {
font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif !important;
color: var(--gray-900) !important;
-webkit-font-smoothing: antialiased;
}
/* ===== TOP BAR ===== */
/* Ultra-broad selectors to catch any top bar structure */
.top-bar,
.topbar,
.top_bar,
header .top-area,
.header-top,
.header_top,
.header-topbar,
#top-bar,
#topbar,
.top-header,
.top-section,
.header-top-area,
.pre-header,
.pre_header,
.above-header,
.upper-header,
header > div:first-child,
header > section:first-child {
background: var(--navy-dark) !important;
color: #FFFFFF !important;
border-bottom: none !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* NUCLEAR FIX: Force ALL text in ANY dark-background header area to be white */
/* This catches every possible element regardless of class names */
header *,
.header *,
#header * {
/* Only override color if parent has dark background */
}
/* Target by background color — anything with dark bg gets white text */
[style*="background"],
.bg-dark,
.bg-primary {
color: #FFFFFF !important;
}
/* Force top bar area text white using structural selectors */
/* The top bar is typically the first major div/section inside header */
header > *:first-child,
header > *:first-child *,
.header > *:first-child,
.header > *:first-child *,
#header > *:first-child,
#header > *:first-child * {
color: #FFFFFF !important;
}
/* But links in top bar should be orange */
header > *:first-child a,
.header > *:first-child a,
#header > *:first-child a {
color: var(--orange-light) !important;
}
/* Compact all inner elements */
.top-bar .container,
.topbar .container,
.header-top .container,
#top-bar .container,
.top-header .container,
.pre-header .container,
header > div:first-child .container,
header > div:first-child > .container,
.top-bar .row,
.topbar .row,
.header-top .row,
#top-bar .row,
.top-header .row {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Make top bar headings (h5 "Call Us:", h6 phone number) clean */
.top-bar h5, .top-bar h6,
.topbar h5, .topbar h6,
.header-top h5, .header-top h6,
#top-bar h5, #top-bar h6,
.top-header h5, .top-header h6,
.pre-header h5, .pre-header h6,
header > div:first-child h5, header > div:first-child h6 {
font-weight: 600 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Reduce spacing on top bar icons */
.top-bar .col, .top-bar [class*="col-"],
.topbar .col, .topbar [class*="col-"],
.header-top .col, .header-top [class*="col-"],
#top-bar .col, #top-bar [class*="col-"],
.top-header .col, .top-header [class*="col-"],
header > div:first-child .col, header > div:first-child [class*="col-"] {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/* Compact the Apply Now button in top bar */
.top-bar .btn, .top-bar a.btn,
.topbar .btn, .topbar a.btn,
.header-top .btn, .header-top a.btn,
#top-bar .btn, #top-bar a.btn,
.top-header .btn, .top-header a.btn,
header > div:first-child .btn, header > div:first-child a.btn {
padding: 6px 18px !important;
font-size: 13px !important;
}
/* Ensure ALL text inside top bar is visible */
.top-bar *,
.topbar *,
.top_bar *,
header .top-area *,
.header-top *,
.header_top *,
.header-topbar *,
#top-bar *,
#topbar *,
.top-header *,
.top-section *,
.pre-header *,
.above-header *,
.upper-header * {
color: rgba(255,255,255,.85) !important;
}
/* Ensure headings inside top bar are visible */
.top-bar h1, .top-bar h2, .top-bar h3, .top-bar h4, .top-bar h5, .top-bar h6,
.topbar h1, .topbar h2, .topbar h3, .topbar h4, .topbar h5, .topbar h6,
.top_bar h1, .top_bar h2, .top_bar h3, .top_bar h4, .top_bar h5, .top_bar h6,
.header-top h1, .header-top h2, .header-top h3, .header-top h4, .header-top h5, .header-top h6,
.header_top h1, .header_top h2, .header_top h3, .header_top h4, .header_top h5, .header_top h6,
#top-bar h1, #top-bar h2, #top-bar h3, #top-bar h4, #top-bar h5, #top-bar h6,
#topbar h1, #topbar h2, #topbar h3, #topbar h4, #topbar h5, #topbar h6,
.top-header h1, .top-header h2, .top-header h3, .top-header h4, .top-header h5, .top-header h6,
.pre-header h1, .pre-header h2, .pre-header h3, .pre-header h4, .pre-header h5, .pre-header h6,
.above-header h1, .above-header h2, .above-header h3, .above-header h4, .above-header h5, .above-header h6 {
color: rgba(255,255,255,.85) !important;
font-family: 'Source Sans 3', sans-serif !important;
}
/* Links in top bar — make them orange for visibility */
.top-bar a,
.topbar a,
.top_bar a,
.header-top a,
.header_top a,
.header-topbar a,
#top-bar a,
#topbar a,
.top-header a,
.top-section a,
.pre-header a,
.above-header a,
.upper-header a,
header > div:first-child a,
header > section:first-child a {
color: var(--orange-light) !important;
}
/* Phone and email icons/text specifically */
.top-bar i, .topbar i, .header-top i, #top-bar i,
.top-bar .fa, .topbar .fa, .header-top .fa, #top-bar .fa,
.top-bar .icon, .topbar .icon, .header-top .icon, #top-bar .icon,
.top-bar span, .topbar span, .header-top span, #top-bar span {
color: rgba(255,255,255,.85) !important;
}
/* ===== NAVIGATION ===== */
/* Hide the entire header_01 element (contains logo + nav menu) */
/* The top contact bar is a separate element above this */
header.header_01,
.header_01 {
display: none !important;
height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
border: none !important;
}
.navbar a,
.main-nav a,
.nav-link,
nav a,
.navigation a {
font-family: 'Source Sans 3', sans-serif !important;
color: var(--gray-700) !important;
font-weight: 600 !important;
}
.navbar a:hover,
.main-nav a:hover,
.nav-link:hover,
nav a:hover,
.navigation a:hover {
color: var(--orange) !important;
}
/* Nav CTA button */
.navbar .btn,
.main-nav .btn,
nav .btn,
.nav-btn,
a.btn[href*="apply"],
a[href*="apply.html"].btn {
background: var(--orange) !important;
color: var(--white) !important;
border: none !important;
border-radius: 8px !important;
font-weight: 700 !important;
}
.navbar .btn:hover,
.main-nav .btn:hover,
nav .btn:hover {
background: var(--orange-dark) !important;
}
/* Dropdown menus */
.dropdown-menu,
.sub-menu,
ul.dropdown {
background: var(--white) !important;
border: 1px solid var(--gray-200) !important;
border-radius: 8px !important;
box-shadow: 0 4px 16px rgba(27,42,74,.08) !important;
}
.dropdown-menu a:hover,
.sub-menu a:hover,
ul.dropdown a:hover {
background: var(--orange-pale) !important;
color: var(--orange) !important;
}
/* ===== PAGE HEADER / BANNER ===== */
.page-header,
.page-title-area,
.page-banner,
.breadcrumb-area,
.inner-banner,
section.page-header,
.hero-section,
.page-title {
background: linear-gradient(165deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
padding: 48px 0 !important;
}
.page-header h1,
.page-header h2,
.page-title-area h1,
.page-title-area h2,
.page-banner h1,
.inner-banner h1,
.page-title h1 {
font-family: 'Playfair Display', Georgia, serif !important;
color: var(--white) !important;
}
.page-header p,
.page-title-area p,
.page-banner p {
color: rgba(255,255,255,.65) !important;
}
/* ===== HEADINGS ===== */
/* Scope to main content only — NOT top bar or footer (those are handled separately) */
main h1, main h2, main h3, main h4, main h5, main h6,
section h1, section h2, section h3, section h4, section h5, section h6,
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
article h1, article h2, article h3, article h4, article h5, article h6,
form h1, form h2, form h3, form h4, form h5, form h6 {
font-family: 'Playfair Display', Georgia, serif !important;
color: var(--navy) !important;
}
/* Ensure top bar headings stay white — higher specificity to override the above */
header h1, header h2, header h3, header h4, header h5, header h6 {
color: rgba(255,255,255,.85) !important;
font-family: 'Source Sans 3', sans-serif !important;
}
/* But navbar headings (if used as logo etc) should be navy */
.navbar h1, .navbar h2, .navbar h3, .navbar h4,
.main-nav h1, .main-nav h2, .main-nav h3, .main-nav h4,
nav.navbar h1, nav.navbar h2, nav.navbar h3 {
color: var(--navy) !important;
}
.section-title,
.section-header {
color: var(--navy) !important;
}
/* Section labels / eyebrows */
.section-subtitle,
.sub-title,
.section-label {
color: var(--orange-dark) !important;
background: var(--orange-pale) !important;
}
/* ===== FORM STYLING ===== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
border: 1.5px solid var(--gray-200) !important;
border-radius: 8px !important;
padding: 12px 14px !important;
font-family: 'Source Sans 3', sans-serif !important;
font-size: 15px !important;
color: var(--gray-900) !important;
background: var(--white) !important;
transition: border-color 0.2s !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
outline: none !important;
border-color: var(--orange) !important;
box-shadow: 0 0 0 3px rgba(232,132,26,.12) !important;
}
input[type="file"] {
border: 1.5px dashed var(--gray-300) !important;
border-radius: 8px !important;
padding: 12px !important;
background: var(--off-white) !important;
cursor: pointer !important;
font-family: 'Source Sans 3', sans-serif !important;
}
input[type="file"]:hover {
border-color: var(--orange) !important;
}
label {
font-family: 'Source Sans 3', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--gray-700) !important;
}
/* Form section dividers */
fieldset,
.form-section,
form hr,
form h4,
form h3 {
border-color: var(--gray-200) !important;
}
form h3,
form h4,
form .section-title {
font-family: 'Source Sans 3', sans-serif !important;
color: var(--navy) !important;
font-weight: 700 !important;
}
/* ===== BUTTONS ===== */
button[type="submit"],
input[type="submit"],
.btn-primary,
.btn-submit,
.submit-btn,
form .btn {
background: var(--orange) !important;
color: var(--white) !important;
border: none !important;
border-radius: 8px !important;
font-family: 'Source Sans 3', sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
padding: 16px 32px !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-primary:hover,
.btn-submit:hover,
.submit-btn:hover,
form .btn:hover {
background: var(--orange-dark) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 16px rgba(232,132,26,.3) !important;
}
/* Secondary / add buttons */
.btn-secondary,
.btn-default,
.btn-add,
.add-btn,
button.add,
a.add-field {
background: var(--off-white) !important;
color: var(--navy) !important;
border: 1.5px dashed var(--gray-300) !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-family: 'Source Sans 3', sans-serif !important;
}
.btn-secondary:hover,
.btn-default:hover,
.btn-add:hover,
.add-btn:hover,
button.add:hover,
a.add-field:hover {
border-color: var(--orange) !important;
color: var(--orange) !important;
background: var(--orange-pale) !important;
}
/* General link buttons / Read More */
.btn,
a.btn,
.read-more {
border-radius: 8px !important;
}
/* ===== CARDS / BOXES ===== */
.card,
.service-box,
.service-item,
.feature-box,
.pricing-box,
.price-card {
border: 1px solid var(--gray-200) !important;
border-radius: 16px !important;
box-shadow: 0 1px 3px rgba(27,42,74,.06) !important;
transition: all 0.3s !important;
}
.card:hover,
.service-box:hover,
.service-item:hover,
.feature-box:hover {
box-shadow: 0 4px 16px rgba(27,42,74,.08) !important;
transform: translateY(-3px) !important;
}
/* ===== TESTIMONIAL SECTION ===== */
.testimonial-area,
.testimonials,
.testimonial-section {
background: var(--off-white) !important;
}
/* ===== CALL TO ACTION SECTIONS ===== */
.cta-area,
.call-to-action,
.cta-section,
.action-area {
background: linear-gradient(165deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
}
.cta-area h2,
.call-to-action h2,
.cta-section h2,
.action-area h2 {
color: var(--white) !important;
}
.cta-area p,
.call-to-action p,
.cta-section p,
.action-area p {
color: rgba(255,255,255,.7) !important;
}
.cta-area .btn,
.call-to-action .btn,
.cta-section .btn,
.action-area .btn {
background: var(--orange) !important;
color: var(--white) !important;
}
/* ===== FOOTER ===== */
footer,
.footer,
.site-footer,
#footer {
background: var(--navy-dark) !important;
color: var(--gray-500) !important;
}
footer h3,
footer h4,
footer h5,
.footer h3,
.footer h4,
.footer h5 {
color: var(--white) !important;
font-family: 'Source Sans 3', sans-serif !important;
}
footer a,
.footer a {
color: var(--gray-500) !important;
transition: color 0.2s !important;
}
footer a:hover,
.footer a:hover {
color: var(--orange) !important;
}
/* Ensure all footer text is visible */
footer p,
footer span,
footer li,
footer div,
.footer p,
.footer span,
.footer li,
.footer div {
color: var(--gray-500) !important;
}
/* Footer logo */
footer .logo img,
.footer .logo img,
.footer-logo img {
filter: brightness(0) invert(1);
}
/* ===== TRUST BAR / PARTNERS ===== */
.partners-area,
.trust-area,
.clients-area {
background: var(--off-white) !important;
}
/* ===== PRICING TABLE OVERRIDE ===== */
.pricing-table,
.price-box,
.pricing-card {
border-radius: 16px !important;
}
.pricing-table .price,
.price-box .price,
.pricing-card .price {
color: var(--navy) !important;
font-family: 'Playfair Display', serif !important;
}
.pricing-table .btn,
.price-box .btn,
.pricing-card .btn {
background: var(--orange) !important;
color: var(--white) !important;
border-radius: 8px !important;
}
/* ===== ACCENT COLOR OVERRIDES ===== */
/* Replace any existing accent/primary colors */
.text-primary,
.text-theme,
.theme-color,
a.theme-color {
color: var(--orange) !important;
}
.bg-primary,
.bg-theme,
.theme-bg {
background: var(--orange) !important;
}
/* ===== LOADING OVERLAY ===== */
.loading-overlay,
.upload-overlay,
.spinner-overlay {
background: rgba(27,42,74,.8) !important;
}
/* ===== CHECKBOX STYLING ===== */
input[type="checkbox"] {
accent-color: var(--orange) !important;
}
/* ===== SCROLLBAR (webkit) ===== */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--gray-100);
}
::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gray-500);
}