/* ==========================================================================
REPROHAUS — Homepage Redesign Overrides
Load this file AFTER custom.css and style.css (last in )
so these rules win without needing !important everywhere.
==========================================================================
Covers:
1. Montserrat font
3. Uniform featured-projects grid (hover-reveal titles already exist
in style-2 .dz-box — see note below)
5. Darker background theme (CMYK 75,68,67,90)
NOT covered here (need PHP/markup edits, not just CSS):
2. Reducing header nav to 5 sections
4. Updating the services list content
========================================================================== */
/* -------------------------------------------------------------------------
1. FONT — Montserrat replacing Lato
Add this Google Fonts link in (in header.php or head.php),
ideally with a preconnect for speed:
If you'd rather keep everything in one file, the @import below works too,
but a in loads faster (no render-blocking @import chain).
------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root {
--font-body: "Montserrat", sans-serif;
--font-heading: "Montserrat", sans-serif;
/* Shared type scale for homepage (and site) sections */
--rh-section-title-size: 36px;
--rh-section-title-size-mobile: 28px;
--rh-section-title-weight: 700;
--rh-body-size: 16px;
--rh-body-line-height: 1.7;
/* ---- 5. Dark theme background ----
Exact CMYK 75,68,67,90 -> RGB(6,8,8) -> #060808 (reads as near-pure black on screen)
Practical on-screen variant (slightly lifted so panels read as "dark charcoal"
rather than pure black, keeping the same hue balance): #101214
Swap the variable below to #060808 if you want the literal print-accurate value. */
--rh-dark-bg: #101214;
--rh-dark-bg-exact: #060808;
--rh-dark-bg-alt: #16191c; /* one step lighter, for stacking sections/cards on top of --rh-dark-bg */
}
/* -------------------------------------------------------------------------
GLOBAL TYPE — one family + shared section sizes
------------------------------------------------------------------------- */
html, body,
body, p, span, a, li, div, label, input, textarea, select, button,
h1, h2, h3, h4, h5, h6,
.title, .section-title, .rh-section-title, .sub-title {
font-family: var(--font-body) !important;
}
h1, h2, h3, h4, h5, h6,
.title, .section-title, .rh-section-title,
.rh-services-heading h2,
.section-head h2,
.section-head .h2 {
font-family: var(--font-heading) !important;
}
/* Lightgallery icons use the "lg" icon font — must not inherit Montserrat
or arrows/close/zoom/share render as empty boxes */
.lg-icon,
.lg-actions .lg-next,
.lg-actions .lg-prev,
.lg-toolbar .lg-icon,
.lg-outer .lg-toogle-thumb,
.lg-outer .lg-dropdown .lg-icon,
a.lg-icon,
#lg-counter {
font-family: lg !important;
speak: none;
font-style: normal !important;
font-weight: 400 !important;
font-variant: normal;
text-transform: none !important;
letter-spacing: normal !important;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Counter text stays readable (not icon font) */
#lg-counter {
font-family: var(--font-body) !important;
}
/* Section titles — same size across Services / Projects / About / Contact */
.rh-section-title,
.rh-services-heading h2,
.section-head.style-1 h2,
.section-head.style-1 .h2,
.rh-section-head .rh-section-title {
font-size: var(--rh-section-title-size) !important;
font-weight: var(--rh-section-title-weight) !important;
line-height: 1.2 !important;
letter-spacing: 0.02em;
text-transform: capitalize !important;
margin: 0 0 24px;
}
/* When title sits beside a button, drop bottom margin so flex row stays centered */
.rh-section-head .rh-section-title {
margin-bottom: 0;
}
/* Body copy inside homepage content bands */
.rh-services-list li a,
.rh-about-band p,
.rh-contact-list li,
.rh-hero-content p {
font-size: var(--rh-body-size) !important;
line-height: var(--rh-body-line-height);
font-weight: 400;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.rh-section-title,
.rh-services-heading h2,
.section-head.style-1 h2,
.section-head.style-1 .h2,
.rh-section-head .rh-section-title {
font-size: var(--rh-section-title-size-mobile) !important;
}
}
/* -------------------------------------------------------------------------
5. DARKER BACKGROUND THEME
Applied to safe, already-dark-friendly sections (footer, header, page
background) rather than every .bg-white on the page — flipping every
white section to near-black would also require re-checking all body/
heading text colors for contrast, which needs a visual pass, not a
blanket CSS swap. Start here, then extend section-by-section once you
see it live.
------------------------------------------------------------------------- */
body#bg {
background-color: var(--rh-dark-bg);
}
.site-header.style-2,
.site-footer,
.services-header {
background-color: var(--rh-dark-bg) !important;
}
.content-inner-2 {
background-color: var(--rh-dark-bg-alt);
}
.content-inner-2 .rh-section-title,
.content-inner-2 .title {
color: #ffffff;
}
/* -------------------------------------------------------------------------
3. FEATURED PROJECTS — uniform grid, hover-reveal titles
The theme's .dz-box.style-2 already hides .dz-info (translateY(100%))
until :hover, so titles already only appear on hover — no change needed
there. This section only forces every tile to the SAME size instead of
the current 2-large/3-small mix.
ONE-LINE MARKUP CHANGE NEEDED in index.php:
Find the Featured Projects section's:
and add a unique class so this only targets that grid (not Products/
Capabilities, which reuse the same theme classes):
------------------------------------------------------------------------- */
.rh-projects-grid > li.card-container {
flex: 0 0 33.3333% !important;
max-width: 33.3333% !important;
}
.rh-projects-grid .dz-box.style-2 .dz-media {
height: 340px;
width: 100%;
object-fit: cover;
}
@media (max-width: 991px) {
.rh-projects-grid > li.card-container {
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
@media (max-width: 576px) {
.rh-projects-grid > li.card-container {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.rh-projects-grid .dz-box.style-2 .dz-media {
height: 260px;
}
}
/* -------------------------------------------------------------------------
HERO — Video / Catalogue banner
------------------------------------------------------------------------- */
.rh-hero-slide {
position: relative;
width: 100%;
height: 640px;
overflow: hidden;
}
.rh-hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rh-hero-slide::after {
content: "";
position: absolute;
inset: 0;
background: rgba(6, 8, 8, 0.35);
}
.rh-hero-tag {
position: absolute;
top: 30px;
left: 30px;
z-index: 2;
color: #ffffff;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.85;
}
.rh-hero-caption {
position: absolute;
left: 50%;
bottom: 70px;
transform: translateX(-50%);
z-index: 2;
text-align: center;
color: #ffffff;
}
.rh-hero-caption h1 {
font-size: 42px;
font-weight: 700;
margin-bottom: 6px;
color: #ffffff;
}
.rh-hero-caption p {
font-size: 16px;
letter-spacing: 0.04em;
margin: 0;
color: #ffffff;
}
@media (max-width: 767px) {
.rh-hero-slide { height: 380px; }
.rh-hero-caption h1 { font-size: 26px; }
}
/* -------------------------------------------------------------------------
OUR SERVICES — dark band, two-column list
------------------------------------------------------------------------- */
.rh-services-band {
background-color: var(--rh-dark-bg);
padding: 90px 0;
}
.rh-services-heading {
text-align: center;
margin-bottom: 40px;
}
.rh-services-heading h2 {
color: #ffffff;
margin: 0;
}
.rh-services-columns {
max-width: 760px;
margin: 0 auto;
}
.rh-services-list {
list-style: none;
margin: 0;
padding: 0;
}
.rh-services-list li {
margin-bottom: 18px;
padding-left: 22px;
position: relative;
}
.rh-services-list li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary, #EA5501);
}
.rh-services-list li a {
color: #e6e6e6;
}
.rh-services-list li a:hover {
color: var(--primary, #EA5501);
}
/* -------------------------------------------------------------------------
ABOUT US
------------------------------------------------------------------------- */
.rh-about-band {
background-color: var(--rh-dark-bg-alt);
padding: 90px 0 0;
color: #e6e6e6;
}
.rh-about-band .rh-section-title {
color: #ffffff;
}
.rh-about-band p {
max-width: 900px;
margin: 0 auto 14px;
color: #cfcfcf;
}
.rh-about-media {
position: relative;
margin-top: 50px;
width: 100%;
max-width: 100%;
height: auto;
overflow: visible;
display: flex;
flex-direction: column;
gap: 16px;
}
.rh-about-media .about-image-item {
width: 100%;
line-height: 0;
}
.rh-about-media img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
.rh-about-media-caption {
position: absolute;
bottom: 24px;
right: 30px;
color: #ffffff;
font-size: 14px;
background: rgba(6, 8, 8, 0.55);
padding: 6px 14px;
}
/* -------------------------------------------------------------------------
CONTACT US
------------------------------------------------------------------------- */
.rh-contact-band {
background-color: var(--rh-dark-bg);
padding: 80px 0 90px;
}
.rh-contact-band .rh-section-title {
color: #ffffff;
}
.rh-contact-list {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
text-align: left;
}
.rh-contact-list li {
color: #e6e6e6;
margin-bottom: 14px;
}
.rh-contact-list li i {
color: var(--primary, #EA5501);
margin-right: 10px;
}
/* -------------------------------------------------------------------------
HEADER — logo left, menu right, vertically centered
Items: Projects · Products · Services · About · Express Order
------------------------------------------------------------------------- */
.rh-header,
.rh-header .sticky-header,
.rh-header .main-bar {
background-color: var(--rh-dark-bg) !important;
overflow: visible !important;
}
.rh-header .main-bar {
min-height: 90px;
overflow: visible !important;
}
.rh-header .rh-header-bar,
.rh-header .rh-header-nav,
.rh-header .rh-final-menu {
overflow: visible !important;
}
/* Desktop bar: logo + nav on one line, vertically centered */
@media (min-width: 992px) {
.rh-header .rh-header-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between;
flex-wrap: nowrap;
min-height: 90px;
padding-left: 40px;
padding-right: 40px;
float: none !important;
width: 100%;
clear: none !important;
}
/* Logo — no theme left offset; vertical center via flex parent */
.rh-header .logo-header {
float: none !important;
display: flex !important;
align-items: center;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
max-width: 240px;
flex: 0 0 auto;
position: relative;
z-index: 9;
}
.rh-header .logo-header a {
display: flex !important;
align-items: center;
height: auto !important;
}
.rh-header .logo-header img {
width: 210px !important;
max-width: 100% !important;
height: auto !important;
display: block;
}
/* Nav on the right, same vertical center as logo */
.rh-header .rh-header-nav.header-nav {
float: none !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end;
flex: 1 1 auto;
margin: 0 !important;
padding: 0 !important;
background-color: transparent !important;
position: static !important;
height: auto !important;
overflow: visible !important;
}
.rh-header .rh-final-menu.nav {
display: flex !important;
align-items: center !important;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 2px 4px;
margin: 0 !important;
padding: 0 !important;
float: none !important;
width: auto !important;
height: auto !important;
font-size: inherit !important;
}
.rh-header .rh-final-menu > li {
float: none !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
font-family: var(--font-body) !important;
}
/* Compact padding keeps links on the logo midline */
.rh-header .rh-final-menu > li > a:not(.btn),
.rh-header.site-header.style-2 .header-nav .nav > li > a:not(.btn) {
color: #ffffff !important;
font-family: var(--font-body) !important;
font-size: 15px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
padding: 8px 16px !important;
line-height: 1.2 !important;
display: flex !important;
align-items: center !important;
height: auto !important;
}
.rh-header .rh-final-menu > li > a:not(.btn):hover,
.rh-header.site-header.style-2 .header-nav .nav > li > a:not(.btn):hover {
color: #2e9ed6 !important;
}
/* Hide theme chevrons that throw off vertical centering */
.rh-header .rh-final-menu > li.sub-menu-down > a:after {
display: none !important;
}
.rh-header .express-order-desktop {
display: flex !important;
align-items: center;
margin-left: 10px !important;
}
.rh-header .rh-express-btn,
.rh-header .express-order-desktop .btn,
.rh-header.site-header.style-2 .header-nav .nav > li.express-order-desktop > a.btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 10px 22px !important;
margin: 0 !important;
background-color: #2e9ed6 !important;
border: none !important;
border-radius: 2px !important;
color: #ffffff !important;
font-family: var(--font-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
line-height: 1.2 !important;
box-shadow: none !important;
white-space: nowrap;
height: auto !important;
}
.rh-header .rh-express-btn:hover,
.rh-header .express-order-desktop .btn:hover {
background-color: #2589bd !important;
color: #ffffff !important;
}
}
/* Dropdowns open BELOW the nav item (not upward / overlapping the bar) */
.rh-header .rh-final-menu > li {
position: relative !important;
}
.rh-header .rh-final-menu > li > .sub-menu,
.rh-header .rh-final-menu > li > .final-mega,
.rh-header.site-header.style-2 .header-nav .nav > li > .sub-menu {
top: 100% !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
transform: none !important;
position: absolute !important;
z-index: 1000;
min-width: 220px;
width: max-content;
max-width: 320px;
padding: 10px 0 !important;
background-color: var(--rh-dark-bg-alt) !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
border: 1px solid rgba(255, 255, 255, 0.06);
}
/* Keep last items from overflowing off the right edge */
.rh-header .rh-final-menu > li:nth-last-child(-n+2) > .sub-menu,
.rh-header .rh-final-menu > li:nth-last-child(-n+2) > .final-mega {
left: auto !important;
right: 0 !important;
}
.rh-header .rh-final-menu .final-mega {
background-color: var(--rh-dark-bg-alt);
}
.rh-header .rh-final-menu .final-mega .final-mega-grid {
display: block;
width: 100%;
}
.rh-header .rh-final-menu .final-mega li a {
color: #e6e6e6;
white-space: normal;
padding: 10px 22px !important;
line-height: 1.35;
}
.rh-header .rh-final-menu .final-mega li a:hover {
color: #2e9ed6;
}
/* Mobile bar: logo + hamburger vertically centered; off-canvas nav is black */
@media (max-width: 991px) {
.rh-header .rh-header-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between;
min-height: 70px;
padding-left: 16px;
padding-right: 16px;
}
.rh-header .logo-header {
float: none !important;
margin: 0 !important;
height: auto !important;
display: flex !important;
align-items: center;
max-width: 160px;
}
.rh-header .logo-header img {
width: 150px !important;
height: auto !important;
}
.rh-header .navbar-toggler {
margin-left: auto;
align-self: center;
z-index: 100;
}
/* Off-canvas mobile drawer — full-height panel with breathing room at top.
Closed: keep theme off-screen slide. Open: wider panel + top padding. */
.rh-header .header-nav,
.rh-header .rh-header-nav,
.rh-header.mo-left .header-nav,
.mo-left .header-nav,
.site-header.mo-left .header-nav {
background-color: var(--rh-dark-bg) !important;
background: var(--rh-dark-bg) !important;
height: 100% !important;
height: 100dvh !important;
top: 0 !important;
padding: calc(env(safe-area-inset-top, 0px) + 72px) 0 calc(env(safe-area-inset-bottom, 0px) + 28px) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.rh-header .header-nav.show,
.rh-header .rh-header-nav.show,
.rh-header.mo-left .header-nav.show,
.mo-left .header-nav.show,
.site-header.mo-left .header-nav.show {
left: 0 !important;
width: min(86vw, 320px) !important;
max-width: 320px !important;
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
}
.rh-header .header-nav .nav,
.rh-header .rh-final-menu {
background-color: transparent !important;
float: none !important;
width: 100% !important;
padding: 0 18px !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0;
}
.rh-header .rh-final-menu > li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background-color: transparent !important;
width: 100% !important;
margin: 0 !important;
float: none !important;
}
.rh-header .rh-final-menu > li:last-child {
border-bottom: none;
}
.rh-header .rh-final-menu > li > a:not(.btn) {
color: #ffffff !important;
font-family: var(--font-body) !important;
font-size: 16px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
padding: 16px 48px 16px 4px !important;
line-height: 1.35 !important;
background-color: transparent !important;
display: flex !important;
align-items: center !important;
min-height: 52px;
width: 100%;
position: relative;
}
.rh-header .rh-final-menu > li > a:not(.btn):hover,
.rh-header .rh-final-menu > li > a:not(.btn):active {
color: #2e9ed6 !important;
}
/* Nested mobile accordion menus */
.rh-header .header-nav .nav > li .sub-menu,
.rh-header .header-nav .nav > li .final-mega,
.rh-header .rh-final-menu > li > .sub-menu,
.rh-header .rh-final-menu > li > .final-mega {
background-color: var(--rh-dark-bg-alt) !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
box-shadow: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
position: static !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
top: auto !important;
left: auto !important;
right: auto !important;
margin: 0 0 8px !important;
padding: 8px 0 12px !important;
border-radius: 6px;
}
.rh-header .rh-final-menu .final-mega li a,
.rh-header .header-nav .nav > li .sub-menu li a {
color: #d0d0d0 !important;
background-color: transparent !important;
border: none !important;
padding: 10px 12px 10px 16px !important;
font-size: 14px !important;
line-height: 1.4 !important;
display: block !important;
}
.rh-header .rh-final-menu .final-mega li a:hover,
.rh-header .header-nav .nav > li .sub-menu li a:hover {
color: #2e9ed6 !important;
}
/* Chevron / arrow buttons — right-aligned, vertically centered */
.rh-header .header-nav .nav > li.sub-menu-down > a:after,
.rh-header .rh-final-menu > li.sub-menu-down > a:after {
content: "\f054" !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
background-color: #2e9ed6 !important;
color: #ffffff !important;
border: none !important;
border-radius: 4px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
text-align: center !important;
float: none !important;
margin: 0 !important;
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%);
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 12px !important;
}
.rh-header .header-nav .nav > li.sub-menu-down.open > a:after,
.rh-header .rh-final-menu > li.sub-menu-down.open > a:after {
content: "\f078" !important;
background-color: #2589bd !important;
}
/* Hide nested submenu chevrons on mobile — cleaner list */
.rh-header .header-nav .nav > li .sub-menu li a:after {
display: none !important;
}
.rh-header .express-order-desktop {
display: list-item !important;
margin: 28px 0 8px !important;
padding: 0 !important;
border-bottom: none !important;
list-style: none;
}
.rh-header .express-order-desktop > a.btn,
.rh-header .rh-express-btn {
display: flex !important;
align-items: center;
justify-content: center;
padding: 14px 22px !important;
background-color: #2e9ed6 !important;
border: none !important;
border-radius: 6px !important;
color: #ffffff !important;
font-family: var(--font-body) !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.03em !important;
text-transform: none !important;
width: 100%;
min-height: 48px;
box-shadow: 0 6px 18px rgba(46, 158, 214, 0.28);
}
.rh-header .express-order-desktop > a.btn:hover,
.rh-header .rh-express-btn:hover {
background-color: #2589bd !important;
color: #ffffff !important;
}
}
/* Extra safety: any open mobile drawer inherits dark bg */
@media (max-width: 991px) {
.site-header.mo-left .header-nav,
.site-header.mo-left .header-nav.show,
.header-nav.navbar-collapse,
.header-nav.navbar-collapse.show,
.header-nav.navbar-collapse.collapsing {
background-color: var(--rh-dark-bg) !important;
background: var(--rh-dark-bg) !important;
}
}
/* -------------------------------------------------------------------------
HERO VIDEO — full width, natural height (no fixed vh crop)
Overlay dim stays; caption text is hidden for now.
------------------------------------------------------------------------- */
.rh-hero {
position: relative;
width: 100%;
height: auto;
min-height: 0;
max-height: none;
overflow: hidden;
background: #000;
margin: 0;
padding: 0;
}
.rh-video-wrapper {
position: relative;
width: 100%;
height: auto;
line-height: 0;
overflow: hidden;
background: #000;
}
/* Full width — height follows the video’s aspect ratio so nothing is cropped */
.rh-video-wrapper video {
position: static;
display: block;
width: 100%;
max-width: 100%;
height: auto;
object-fit: contain;
object-position: center center;
border: 0;
background: #000;
transform: none;
}
/* Keep the dark overlay; text captions are off for now */
.rh-video-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.45);
pointer-events: none;
display: block !important;
}
.rh-hero-content {
display: none !important;
}
@media (max-width: 991px) {
.rh-hero,
.rh-video-wrapper {
width: 100%;
height: auto;
min-height: 0;
max-height: none;
}
.rh-video-wrapper video {
width: 100%;
max-width: 100%;
height: auto;
object-fit: contain;
}
}
/* ==========================================================================
GLOBAL DARK MODE — whole site black background, white text
Strategy: force ONE dark background on , make every generic
wrapper/section/card transparent so that single background shows through
consistently, then force white text everywhere by default. A short list
of exceptions at the bottom keeps things that MUST stay readable in their
own colors (buttons, form fields, the project-card hover overlay).
========================================================================== */
html, body {
background-color: var(--rh-dark-bg) !important;
}
.header-nav .nav > li .sub-menu,
.rh-capabilities-page ,
.site-footer.style-2 .footer-bottom ,
.card .card-body{
background-color: var(--rh-dark-bg-alt) !important;
}
/* Strip backgrounds off every generic wrapper so the body color shows through */
section,
.page-content,
.bg-white,
.bg-light,
.bg-gray,
.content-inner,
.content-inner-2,
.content-inner-3,
.container,
.container-fluid,
.widget,
.dz-card,
.resource-card,
.resources-section,
.apply-container,
.careers-hero,
.contact-container,
.about-history-pane .bg-light,
.swiper-slide,
.dz-box:not(.style-2) {
background-color: transparent !important;
background-image: none !important;
}
/* Force white/light text everywhere by default */
body,
p, span, li, div, label,
h1, h2, h3, h4, h5, h6,
.title, .sub-title, .text, .dz-title, .dz-post-text,
td, th,
.form-note, .info-block, .info-block span, .info-block strong,
.current-job, .current-job strong, .big-phone,
.rh-section-title, .ts-project-gallery__title,
.hero-title-box h2, .form-group label, .contact-form label {
color: #f2f2f2 !important;
}
/* Links: light gray by default, accent color on hover
(!important so theme-specific link colors buried in paragraphs/cards
don't override this with higher specificity) */
a {
color: #e6e6e6 !important;
}
a:hover {
color: var(--primary, #EA5501) !important;
}
/* Keep the brand accent color where it's meant to stand out */
.text-primary {
color: var(--primary, #EA5501) !important;
}
/* Buttons keep their own (usually colored-bg + white-text) contrast */
.btn, .btn * {
color: #ffffff !important;
}
/* Form fields need a dark field color, not pure transparent/black-on-black */
input, textarea, select {
background-color: #1b1e21 !important;
color: #f2f2f2 !important;
border-color: #3a3f44 !important;
}
input::placeholder, textarea::placeholder {
color: #9a9a9a !important;
}
/* EXCEPTION: the project-card hover panel (.dz-box.style-2 .dz-info) sits on
a near-white translucent background by design — keep its own text dark
so titles stay legible against that light panel instead of turning
white-on-white. */
.dz-box.style-2 .dz-info,
.dz-box.style-2 .dz-info * {
color: #16191c !important;
}
/* EXCEPTION: the project-detail hero title callout (.hero-title-box) is a
solid white chip laid over the hero image by design (custom.css) — keep
its text dark so it doesn't turn into white-on-white. */
.hero-title-box,
.hero-title-box * {
color: #16191c !important;
background-color: black;
}
/* Soften box-shadows so they read correctly on black instead of looking like
muddy gray boxes */
.resource-card, .dz-card, .apply-container {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.rh-projects-grid .dz-box.style-2 .dz-media {
height: 400px;
width: 100%;
object-fit: fill;
}