/* =========================================================================
Docutrax Brand Overrides — Header, Footer, Login page chrome
Loaded AFTER bootstrap.min.css and docutrax30.css via inc/head.php.
Matches www.docutrax.com/talk-to-a-specialist (Aug 2026).
Change log:
RMK017 Initial header refresh (Britti Sans + Deep Teal + CTA pill).
RMK018 Footer refresh (4-column brand footer).
RMK019 Match live docutrax.com chrome exactly: 80px nav, transparent
nav/footer over 270deg deep-teal → black BODY gradient, remove
cloud photo on login page, sage column headings, exact type
scale (15px light nav, 14px sage headings, 15px light links),
exact spacing (30px between nav items, 120px page inset, 1200px
content max-width).
========================================================================= */
/* ---------- Fonts ---------- */
@font-face {
font-family: 'Britti Sans';
src: url('../fonts/britti-sans/BrittiSans-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Britti Sans';
src: url('../fonts/britti-sans/BrittiSans-Semibold.otf') format('opentype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Britti Sans';
src: url('../fonts/britti-sans/BrittiSans-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Light 300 falls back to Regular OTF since the brand kit doesn't ship a
Light weight. Setting font-weight: 300 gives us a slightly lighter look
via faux-weight when supported, otherwise a graceful match. */
@font-face {
font-family: 'Britti Sans';
src: url('../fonts/britti-sans/BrittiSans-Regular.otf') format('opentype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Instrument Sans';
src: url('../fonts/instrument-sans/InstrumentSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Instrument Sans';
src: url('../fonts/instrument-sans/InstrumentSans-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Instrument Sans';
src: url('../fonts/instrument-sans/InstrumentSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* ---------- Design tokens ---------- */
:root {
--dtx-deep-teal: #033744;
--dtx-sage: #84D1BE;
--dtx-cream: #F5F0ED;
--dtx-warm-white: #FFF8F4;
--dtx-charcoal: #333333;
--dtx-ink: #000000;
--dtx-mid-grey: #A2A19F;
--dtx-mist: #C6D2D4;
--dtx-signal-orange: #E45838;
--dtx-white: #FFFFFF;
--dtx-header-h: 80px;
--dtx-page-inset: 120px; /* left/right gutter on desktop */
--dtx-content-max: 1200px; /* centered content width */
--dtx-body-bg: linear-gradient(270deg, #033744 0%, #000000 100%);
--dtx-font-brand: 'Britti Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
/* =========================================================================
BODY BACKGROUND — deep-teal → black gradient (matches docutrax.com)
Applied to and so it spans header, content, footer with no seams.
========================================================================= */
html,
body {
background: var(--dtx-body-bg);
background-attachment: fixed;
color: var(--dtx-white);
font-family: var(--dtx-font-brand);
overflow-x: hidden;
padding-top: 0;
}
/* =========================================================================
HEADER — opaque 80px bar, 1200px centered content row
RMK028 Made the fixed header opaque so form fields on portal register
pages no longer bleed through when scrolling.
Adds a subtle 1px bottom hairline for visual separation.
RMK029 Switched header background from solid deep-teal to the same
270deg deep-teal → black gradient used for the body, so the
header reads as a natural extension of the page rather than
a solid stripe on top.
========================================================================= */
#navbarSettings.dtx-navbar {
background: var(--dtx-body-bg) !important;
background-image: var(--dtx-body-bg) !important;
background-attachment: fixed; /* keep gradient aligned with body */
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
height: var(--dtx-header-h);
min-height: var(--dtx-header-h);
font-family: var(--dtx-font-brand);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
margin: 0;
}
/* Bootstrap 3 gives .navbar > .container a fixed responsive width. Override to
match Framer reference: 1200px max, centered, with 120px side padding on the
outer .navbar element via .navbar-header/collapse instead. */
#navbarSettings.dtx-navbar > .container {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--dtx-header-h);
width: 100%;
max-width: none;
padding: 20px var(--dtx-page-inset);
margin: 0 auto;
}
#navbarSettings.dtx-navbar .navbar-header {
display: flex;
align-items: center;
height: 40px;
float: none;
margin: 0;
flex: 0 0 auto;
}
#navbarSettings.dtx-navbar .navbar-brand {
padding: 0;
margin: 0;
height: 40px;
display: inline-flex;
align-items: center;
line-height: 1;
}
#navbarSettings.dtx-navbar .navbar-brand img.dtx-logo {
height: 30px;
width: auto;
max-height: 30px;
display: block;
}
/* Right cluster: nav links + Sign in + CTA pill, all vertically centered */
#navbarSettings.dtx-navbar .navbar-collapse {
padding: 0;
height: 40px;
flex: 0 0 auto;
box-shadow: none;
border: 0;
}
#navbarSettings.dtx-navbar .navbar-nav {
margin: 0;
display: flex;
align-items: center;
height: 40px;
gap: 30px; /* 30px between all nav items */
float: none;
}
#navbarSettings.dtx-navbar .navbar-nav > li {
display: flex;
align-items: center;
height: 40px;
margin: 0;
padding: 0;
float: none;
}
/* Nav links — Britti Sans "Light" 300, 15px, natural spacing, white */
#navbarSettings.dtx-navbar .navbar-nav > li > a {
color: var(--dtx-white);
font-family: var(--dtx-font-brand);
font-weight: 300;
font-size: 15px;
line-height: 18px;
letter-spacing: normal;
text-transform: none;
padding: 0;
height: 40px;
display: inline-flex;
align-items: center;
background: transparent;
transition: color 0.15s ease;
}
#navbarSettings.dtx-navbar .navbar-nav > li > a:hover,
#navbarSettings.dtx-navbar .navbar-nav > li > a:focus,
#navbarSettings.dtx-navbar .navbar-nav > li.active > a {
color: var(--dtx-sage);
background: transparent;
}
/* Sign in — same weight/size as the other nav links, wider gap before it */
#navbarSettings.dtx-navbar .dtx-signin {
margin-left: 100px; /* 30 (gap) + 100 = 130px between Company and Sign in */
}
#navbarSettings.dtx-navbar .dtx-signin > a {
color: var(--dtx-white);
font-weight: 300;
font-size: 15px;
}
#navbarSettings.dtx-navbar .dtx-signin > a:hover {
color: var(--dtx-sage);
}
/* CTA pill — outlined on the opaque deep-teal header (RMK028).
Before RMK028 the header was transparent so a solid deep-teal fill popped;
now the header IS deep-teal, so a solid fill would blend in. Use a
subtle overlay + hairline border so the pill still reads as a button. */
#navbarSettings.dtx-navbar .navbar-nav > li > a.dtx-cta {
background: rgba(255, 255, 255, 0.06);
color: var(--dtx-white);
padding: 12px 24px;
height: 40px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.35);
font-family: var(--dtx-font-brand);
font-weight: 400;
font-size: 16px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-flex;
align-items: center;
gap: 16px; /* between label and arrow */
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#navbarSettings.dtx-navbar .navbar-nav > li > a.dtx-cta:hover,
#navbarSettings.dtx-navbar .navbar-nav > li > a.dtx-cta:focus {
background: var(--dtx-sage);
color: var(--dtx-deep-teal);
border-color: var(--dtx-sage);
text-decoration: none;
}
#navbarSettings.dtx-navbar .navbar-nav > li > a.dtx-cta .fa {
font-size: 14px;
line-height: 1;
}
/* Mobile toggle */
#navbarSettings.dtx-navbar .navbar-toggle {
border-color: rgba(255,255,255,0.3);
margin: 20px 0;
padding: 8px 10px;
background: transparent;
}
#navbarSettings.dtx-navbar .navbar-toggle .icon-bar {
background-color: var(--dtx-white);
}
#navbarSettings.dtx-navbar .navbar-toggle:hover,
#navbarSettings.dtx-navbar .navbar-toggle:focus {
background-color: rgba(255,255,255,0.08);
}
/* Push page content below the fixed navbar */
#navbarSpaceBottom { height: var(--dtx-header-h); }
/* =========================================================================
MEGA-MENU DROPDOWNS (Who we serve / Services / Resources / Company)
Pure-CSS hover reveal. Matches docutrax.com behavior: full-width white
panel flush under the 80px nav, 1200px centered content, no border, no
shadow, dark-teal semibold titles + gray descriptions.
HOVER GEOMETRY: the trigger is stretched to fill the FULL height of
the 80px nav bar. That means the mouse can travel from the label all the
way down to y=80 without leaving the 's :hover state — no dead zone
between trigger and panel. The trigger link inside centers vertically
inside that full-height .
Note: the selector `.navbar-nav > li.dtx-has-menu` is used instead of just
`.dtx-has-menu` because the earlier rule `.navbar-nav > li { height: 40px }`
would otherwise win on specificity (it has a type selector we need to match). */
#navbarSettings.dtx-navbar .navbar-nav > li.dtx-has-menu {
position: static; /* let panel span the full nav width */
height: var(--dtx-header-h); /* fill nav height so hover has no gap */
display: flex;
align-items: center;
padding: 0; /* remove any inherited padding to keep hit area tight */
}
#navbarSettings.dtx-navbar .navbar-nav > li.dtx-has-menu > a.dtx-menu-trigger {
display: flex;
align-items: center;
height: 100%; /* fill the so the whole strip is hoverable */
cursor: default; /* purely a hover trigger — no navigation */
padding-top: 0;
padding-bottom: 0;
}
/* Ensure the fixed nav doesn't clip its overflowing descendants (mega panel). */
#navbarSettings.dtx-navbar,
#navbarSettings.dtx-navbar > .container,
#navbarSettings.dtx-navbar .navbar-collapse,
#navbarSettings.dtx-navbar .navbar-nav,
#navbarSettings.dtx-navbar .navbar-nav > li {
overflow: visible;
}
/* Because .dtx-has-menu is now full-height (80px) and the regular s are
not, we need to keep the entire navbar-nav row vertically centered. Flex
on .navbar-nav already handles this via align-items:center (declared in
the nav layout section above), so no extra work needed here. */
/* The panel itself — full-bleed strip fixed to the viewport, flush under nav.
Using `position: fixed` (not absolute) so nothing clips it and it doesn't
depend on any parent's positioning context. The panel is still a DOM
descendant of the , so `.dtx-has-menu:hover` remains true when the
cursor is on the panel — hover propagates up the DOM tree regardless of
visual position. */
#navbarSettings.dtx-navbar .dtx-mega {
position: fixed;
top: var(--dtx-header-h); /* flush under the 80px nav, zero gap */
left: 0;
right: 0;
width: 100vw;
background: #ffffff;
color: var(--dtx-form-ink, #2F3251);
padding: 32px 0;
z-index: 10000; /* above the nav (nav uses 9999) */
margin: 0;
/* hidden by default */
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.12s ease, visibility 0.12s ease;
}
#navbarSettings.dtx-navbar .dtx-mega-inner {
max-width: var(--dtx-content-max);
margin: 0 auto;
padding: 0 var(--dtx-page-inset);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 32px 48px;
}
#navbarSettings.dtx-navbar .dtx-mega-col > a {
display: block;
padding: 12px 0;
text-decoration: none;
border-radius: 6px;
transition: background 0.1s ease;
}
#navbarSettings.dtx-navbar .dtx-mega-col > a + a {
margin-top: 4px;
}
#navbarSettings.dtx-navbar .dtx-mega-col > a:hover,
#navbarSettings.dtx-navbar .dtx-mega-col > a:focus {
background: rgba(3,55,68,0.04);
}
#navbarSettings.dtx-navbar .dtx-mega-eyebrow {
font-family: var(--dtx-font-brand);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
color: #9EA8BA;
margin: 0 0 12px;
}
#navbarSettings.dtx-navbar .dtx-mega-title {
display: block;
font-family: var(--dtx-font-brand);
font-weight: 600;
font-size: 15px;
line-height: 18px;
color: var(--dtx-deep-teal);
letter-spacing: normal;
text-transform: none;
}
#navbarSettings.dtx-navbar .dtx-mega-desc {
display: block;
font-family: var(--dtx-font-brand);
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: #4D4D4D;
margin-top: 3px;
letter-spacing: normal;
text-transform: none;
}
/* Reveal on hover / focus-within of the parent , OR when the panel
itself is hovered. Because .dtx-mega is a DOM descendant of .dtx-has-menu,
hovering the panel keeps the parent's :hover state alive; the explicit
`.dtx-mega:hover` selector is a belt-and-suspenders backup. */
#navbarSettings.dtx-navbar .dtx-has-menu:hover > .dtx-mega,
#navbarSettings.dtx-navbar .dtx-has-menu:focus-within > .dtx-mega,
#navbarSettings.dtx-navbar .dtx-mega:hover {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Give the trigger link a subtle indicator + keep it "hot" while panel is open */
#navbarSettings.dtx-navbar .dtx-has-menu:hover > a.dtx-menu-trigger,
#navbarSettings.dtx-navbar .dtx-has-menu:focus-within > a.dtx-menu-trigger {
color: var(--dtx-sage);
}
/* =========================================================================
LOGIN PAGE — remove cloud photo, keep the login card on the body gradient
========================================================================= */
/* docutrax30.css sets .bg-1 { background-image: url("../img/login.jpg") }.
Override so no photo shows — we want the body gradient to bleed through. */
section.bg-1,
.bg-1 {
background-image: none !important;
background-color: transparent !important;
}
/* .bg-filter is an overlay dimmer for the photo. With no photo, drop it. */
section.bg-1 > .bg-filter,
section.section-fxd > .bg-filter {
background-color: transparent !important;
}
/* Sticky-footer fix: .section-fxd in docutrax30.css is position:absolute
which pulls it out of flow and the footer collapses to the top. Put it
back in normal flow, scoped to body's direct child so nested usages stay. */
body > section.section-fxd {
position: relative;
height: auto;
min-height: calc(100vh - var(--dtx-header-h));
}
body > section.section-fxd > .bg-filter {
min-height: calc(100vh - var(--dtx-header-h));
height: auto;
padding: 60px 0;
}
@media (max-width: 767px) {
body > section.section-fxd,
body > section.section-fxd > .bg-filter {
min-height: 0;
}
body > section.section-fxd > .bg-filter {
padding: 40px 0;
}
}
/* =========================================================================
LOGIN CARD — matches www.docutrax.com/talk-to-a-specialist form style
Dark rounded outer tile (same dark surface as the page gradient) with a
WHITE inner form panel. Inputs are white with dark text and a light-gray
border, submit is a solid deep-teal pill.
========================================================================= */
:root {
--dtx-form-ink: #2F3251; /* dark navy body text (from reference) */
--dtx-form-border: #C5CEDB; /* light gray input border (rgb 197,206,219) */
--dtx-form-placeholder: #9EA8BA;
}
.sign-up {
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
padding: 44px 56px;
max-width: 640px;
margin: 0 auto;
color: var(--dtx-white);
box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.sign-up .sign-up-hr {
display: none; /* the old top divider was for a light bg */
}
/* Heading — logo centered above small "Log in" subhead, still on the DARK tile */
.sign-up h1.dtx-login-heading {
text-align: center;
margin: 0 0 32px;
padding: 0;
line-height: 1;
color: var(--dtx-white);
font-family: var(--dtx-font-brand);
}
.sign-up h1.dtx-login-heading .dtx-login-logo {
height: 34px;
max-height: 34px;
width: auto;
display: block;
margin: 0 auto 14px;
}
.sign-up h1.dtx-login-heading .dtx-login-heading-text {
display: block;
color: var(--dtx-white);
font-family: var(--dtx-font-brand);
font-weight: 400;
font-size: 18px;
line-height: 1.2;
letter-spacing: normal;
text-transform: none;
}
/* Legacy fallback: if the old inline-span heading is ever rendered, style it too */
.sign-up h1 span {
color: var(--dtx-white) !important;
font-family: var(--dtx-font-brand);
letter-spacing: normal;
text-transform: none;
}
.sign-up h1 .text-primary {
color: var(--dtx-sage) !important;
}
/* ---- Force the form COLUMN to span the whole card ---------------------- */
/* login.php wraps the form in - ... */
/* The 2nd li holds an optional $special_notice (usually empty). Make the */
/* form li take the full width; stack the notice li below it. */
.sign-up .row,
.sign-up .thumb-box { margin: 0; padding: 0; }
.sign-up ul.thumbs {
list-style: none;
padding: 0;
margin: 0;
display: block;
}
.sign-up ul.thumbs > li,
.sign-up ul.thumbs > li.col-sm-6,
.sign-up ul.thumbs > li.col-md-6,
.sign-up ul.thumbs > li.col-xs-6 {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
display: block;
}
/* ---- White form panel (matches docutrax.com talk-to-a-specialist) ------ */
#coi_form {
background: #ffffff;
border: 1px solid #ffffff;
border-radius: 6px;
padding: 28px 32px;
color: var(--dtx-form-ink);
font-family: 'Inter', var(--dtx-font-brand);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#coi_form .form-group { margin-bottom: 18px; }
#coi_form .form-group .control { display: block; }
/* Inputs — white bg, dark navy text, light gray border, 4px radius */
#coi_form input.required_input {
width: 100%;
box-sizing: border-box;
background: #ffffff;
border: 1px solid var(--dtx-form-border);
border-radius: 4px;
padding: 10px 12px;
height: 40px;
color: var(--dtx-form-ink);
font-family: 'Inter', var(--dtx-font-brand);
font-size: 14px;
font-weight: 400;
line-height: 1.4;
letter-spacing: normal;
}
#coi_form input.required_input::placeholder { color: var(--dtx-form-placeholder); opacity: 1; }
#coi_form input.required_input:focus {
outline: none;
border-color: var(--dtx-deep-teal);
box-shadow: 0 0 0 3px rgba(3,55,68,0.15);
}
/* Checkbox row */
#coi_form input[type="checkbox"].terms_of_use {
accent-color: var(--dtx-deep-teal);
width: 16px; height: 16px;
margin: 3px 0 0;
vertical-align: top;
}
#coi_form label,
#coi_form label span,
#coi_form #accept {
color: var(--dtx-form-ink);
font-family: 'Inter', var(--dtx-font-brand);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
#coi_form p {
color: var(--dtx-form-ink);
font-family: 'Inter', var(--dtx-font-brand);
font-size: 14px;
margin: 8px 0;
}
#coi_form a {
color: var(--dtx-deep-teal);
text-decoration: underline;
}
#coi_form a:hover { color: #0a5a70; }
#coi_form .required { color: #c82520; }
#coi_form .error { color: #c82520; font-weight: 500; }
/* Submit — solid deep-teal 8px pill, matches reference button */
#coi_form input[type="submit"].special {
background: var(--dtx-deep-teal);
color: var(--dtx-white);
border: 0;
border-radius: 8px;
padding: 12px 24px;
height: auto;
font-family: 'Inter', var(--dtx-font-brand);
font-weight: 600;
font-size: 14px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
min-width: 120px;
}
#coi_form input[type="submit"].special:hover:not([disabled]) {
background: #0a5a70;
color: var(--dtx-white);
}
#coi_form input[type="submit"].special[disabled] {
opacity: 0.55;
cursor: not-allowed;
}
/* Ensure any inline width:50% wrappers around submit / spinner don't halve the button */
#coi_form div[style*="display: flex"] > div[style*="width:50%"] {
width: auto !important;
flex: 0 0 auto;
}
/* =========================================================================
Collapsed mobile menu
========================================================================= */
@media (max-width: 991px) {
#navbarSettings.dtx-navbar > .container {
padding: 20px 24px;
}
#navbarSettings.dtx-navbar .dtx-signin {
margin-left: 0;
}
}
@media (max-width: 767px) {
#navbarSettings.dtx-navbar .navbar-collapse {
background: rgba(0,0,0,0.9);
border-top: 1px solid rgba(255,255,255,0.08);
margin-left: -24px;
margin-right: -24px;
padding: 8px 16px 16px;
height: auto;
}
#navbarSettings.dtx-navbar .navbar-nav {
display: block;
height: auto;
gap: 0;
margin: 0;
}
#navbarSettings.dtx-navbar .navbar-nav > li {
display: block;
height: auto;
}
#navbarSettings.dtx-navbar .navbar-nav > li > a {
padding: 12px 8px;
height: auto;
line-height: 1.4;
}
#navbarSettings.dtx-navbar .navbar-nav > li > a.dtx-cta {
margin: 8px 0 4px;
height: 40px;
}
}
/* =========================================================================
FOOTER — transparent over body gradient, 1200px centered content, sage headings
========================================================================= */
.dtx-footer {
background: transparent;
color: var(--dtx-white);
font-family: var(--dtx-font-brand);
padding: 60px var(--dtx-page-inset);
margin-top: 80px;
border: 0;
}
.dtx-footer > .container {
max-width: var(--dtx-content-max);
width: 100%;
margin: 0 auto;
padding: 0;
}
.dtx-footer a {
color: var(--dtx-white);
text-decoration: none;
transition: color 0.15s ease;
}
.dtx-footer a:hover,
.dtx-footer a:focus {
color: var(--dtx-sage);
text-decoration: none;
}
/* Left brand block */
.dtx-footer .dtx-footer-brand {
margin-bottom: 20px;
}
.dtx-footer .dtx-footer-brand img {
height: 34px;
width: auto;
display: block;
margin-bottom: 20px;
max-height: 34px;
}
.dtx-footer .dtx-footer-tagline {
font-family: var(--dtx-font-brand);
font-weight: 400;
font-size: 18px;
line-height: 21.6px;
letter-spacing: normal;
color: var(--dtx-white);
max-width: 380px;
margin: 0 0 24px;
text-transform: none;
}
.dtx-footer .dtx-footer-contact {
font-family: var(--dtx-font-brand);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: var(--dtx-white);
}
.dtx-footer .dtx-footer-contact p,
.dtx-footer .dtx-footer-contact a {
font-family: var(--dtx-font-brand);
font-weight: 400;
font-size: 16px;
line-height: 19.2px;
color: var(--dtx-white);
letter-spacing: normal;
margin: 0 0 8px;
display: block;
}
.dtx-footer .dtx-footer-contact .fa,
.dtx-footer .dtx-footer-contact svg {
color: var(--dtx-sage);
margin-right: 8px;
width: 16px;
display: inline-block;
text-align: center;
}
.dtx-footer .dtx-footer-contact strong {
color: var(--dtx-white);
font-weight: 600;
display: block;
margin-top: 8px;
}
/* Column headings — sage/mint, Britti Sans Regular 400, 14px */
.dtx-footer .dtx-footer-col h5 {
font-family: var(--dtx-font-brand);
font-size: 14px;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
line-height: 1.2;
color: var(--dtx-sage);
margin: 0 0 18px;
}
.dtx-footer .dtx-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.dtx-footer .dtx-footer-col ul li {
margin-bottom: 12px;
}
.dtx-footer .dtx-footer-col ul li a {
font-family: var(--dtx-font-brand);
font-size: 15px;
font-weight: 300;
line-height: 15px;
letter-spacing: normal;
text-transform: none;
color: var(--dtx-white);
}
/* Bottom row (copyright + optional social) */
.dtx-footer-bottom {
margin-top: 48px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 13px;
color: var(--dtx-mist);
font-family: var(--dtx-font-brand);
font-weight: 300;
}
.dtx-footer-bottom a {
color: var(--dtx-mist);
}
.dtx-footer-bottom .dtx-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.25);
color: var(--dtx-white);
margin-left: 8px;
font-size: 14px;
line-height: 1;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dtx-footer-bottom .dtx-social a:hover {
background: var(--dtx-sage);
color: var(--dtx-deep-teal);
border-color: var(--dtx-sage);
}
@media (max-width: 991px) {
.dtx-footer { padding: 60px 24px; }
}
@media (max-width: 767px) {
.dtx-footer { padding: 40px 24px 24px; }
.dtx-footer .dtx-footer-col { margin-top: 28px; }
.dtx-footer-bottom { justify-content: flex-start; }
}
/* =========================================================================
PORTAL / REGISTRATION PAGES (prod_argo/register0.php etc.)
These pages use different section backgrounds (.bg-24) and existing
utility classes (.top-title, .text-block-v1, .btn-primary.special) that
were built for the old cloud-photo theme. We suppress the photos, restyle
the buttons as deep-teal pills, and force body text light so it reads on
the dark brand gradient.
RMK024
========================================================================= */
/* Suppress the section background photos so the body gradient bleeds through. */
.bg-24 {
background-image: none !important;
background-color: transparent !important;
}
.bg-24 .bg-filter {
background: transparent !important; /* remove the dim overlay */
}
/* The .section-lg wrappers already handle vertical spacing. On dark bg,
force headings + body copy to be light and legible. */
section .top-title,
section h1.top-title {
color: #ffffff !important;
font-family: var(--dtx-font-brand);
font-weight: 300;
letter-spacing: -0.5px;
text-transform: none; /* remove the capitalize rule */
font-size: 48px;
line-height: 1.1;
margin: 0 0 8px;
padding: 0;
}
section .top-title:after {
border-bottom-color: var(--dtx-sage) !important;
padding-top: 14px !important;
width: 96px !important;
}
/* The h3 subtitle "Getting Started" inside .bg-24 was blue (.text-primary =
#1eb9c1). Make it the light sage accent instead. */
section h3.text-primary,
section h3.text-center.text-primary {
color: var(--dtx-sage) !important;
font-family: var(--dtx-font-brand);
font-weight: 400;
font-size: 20px;
letter-spacing: 2px;
text-transform: uppercase;
margin: 12px 0 0;
}
/* Body copy (numbered list, paragraphs) on the dark gradient — bring color up. */
section .text-block-v1,
section p.text-block-v1,
section li.text-block-v1,
section ol li.text-block-v1 {
color: rgba(255, 255, 255, 0.88) !important;
font-family: var(--dtx-font-brand);
font-size: 16px;
line-height: 1.7;
}
section ol,
section ul {
color: rgba(255, 255, 255, 0.88);
}
section .text-block-v1 a,
section p a,
section ol li a {
color: var(--dtx-sage);
text-decoration: underline;
text-underline-offset: 2px;
}
section .text-block-v1 a:hover,
section p a:hover {
color: #ffffff;
}
/* Keep the "red warning" spans readable but tone down the pure red on dark. */
section .text-block-v1 span[style*="color:#ff0000"],
section .text-block-v1 span[style*="color: #ff0000"],
section p span[style*="color:#ff0000"] {
color: #FF8A80 !important; /* light coral, WCAG-passable on dark */
}
/* .btn-primary and .btn-primary.special --> deep-teal brand pill.
The existing rules set the old teal #1eb9c1; override with the same
deep-teal treatment used for the CTA and login submit. */
.btn-primary,
.btn-primary.special,
a.btn-primary,
a.btn-primary.special,
button.btn-primary,
button.btn-primary.special {
background-color: var(--dtx-deep-teal) !important;
border-color: var(--dtx-deep-teal) !important;
color: #ffffff !important;
font-family: var(--dtx-font-brand);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.3px;
text-transform: none;
border-radius: 8px !important;
padding: 12px 24px !important;
line-height: 1.2;
box-shadow: none;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.special:hover,
.btn-primary.special:focus,
.btn-primary.special:active,
a.btn-primary:hover,
a.btn-primary.special:hover,
button.btn-primary:hover,
button.btn-primary.special:hover {
background-color: #04525F !important; /* +12% lightness of deep teal */
border-color: #04525F !important;
color: #ffffff !important;
outline: none;
}
.btn-primary .fa {
margin-right: 8px;
}
.btn-primary.btn-xlg,
a.btn-primary.btn-xlg {
padding: 14px 28px !important;
font-size: 15px;
}
/* Numbered list items (register0 "four easy steps") — bullet color to sage. */
section ol {
padding-left: 24px;
margin: 20px 0 24px;
}
section ol > li {
padding-left: 8px;
margin-bottom: 8px;
}
section ol > li::marker {
color: var(--dtx-sage);
font-weight: 600;
}
/* Modal (registration_modal) — keep it on-brand: dark body text on white. */
.modal-content {
border-radius: 10px;
border: none;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.modal-body.text-block-v1,
.modal-body-text {
color: var(--dtx-form-ink) !important;
font-family: var(--dtx-font-brand);
font-size: 15px;
line-height: 1.55;
padding: 24px 24px 20px;
}
.modal-footer .btn-default {
background-color: #ffffff;
border: 1px solid var(--dtx-form-border);
color: var(--dtx-form-ink);
border-radius: 8px;
padding: 10px 18px;
font-family: var(--dtx-font-brand);
font-weight: 500;
}
.modal-footer .btn-default:hover {
background-color: #F5F7FA;
}
/* =========================================================================
ARGO CO-BRAND LOGO (nav-trn-argo.php only)
The Argo portal shows both Docutrax primary mark AND Argo logo, separated
by a subtle vertical divider. Both centered vertically at 22-28px height.
RMK024
========================================================================= */
#navbarSettings.dtx-navbar .navbar-brand-cluster {
display: flex;
align-items: center;
gap: 20px;
/* RMK032 Removed fixed 40px height so tall partner logos (e.g. SWIS at 48px)
aren't clipped. The overall 80px header still constrains vertically. */
min-height: 40px;
}
#navbarSettings.dtx-navbar .navbar-brand-cluster .dtx-cobrand-divider {
width: 1px;
height: 22px;
background: rgba(255, 255, 255, 0.25);
flex: 0 0 auto;
}
/* RMK032 Use max-height instead of height so the inline max-height attribute set
by nav-trn-*.php (from $portal_partner['logo_height']) controls the size.
Cap at 56px so a runaway config can't blow out the 80px header. */
#navbarSettings.dtx-navbar .navbar-brand-cluster img.dtx-cobrand-logo {
max-height: 56px;
width: auto;
display: block;
flex: 0 0 auto;
opacity: 0.95;
}
/* Mobile: stack sensibly, drop the divider, cap partner logo tightly */
@media (max-width: 767px) {
#navbarSettings.dtx-navbar .navbar-brand-cluster {
gap: 12px;
}
#navbarSettings.dtx-navbar .navbar-brand-cluster .dtx-cobrand-divider {
display: none;
}
#navbarSettings.dtx-navbar .navbar-brand-cluster img.dtx-cobrand-logo {
max-height: 28px;
}
}