so a plain width:100% on the button only fills half the row. Override BOTH
the inline-styled wrappers so the button parent expands to 100%. */
#coi_form div[style*="display: flex"] {
flex-wrap: wrap;
display: block !important; /* drop the flex row entirely on mobile */
}
#coi_form div[style*="display: flex"] > div[style*="width:50%"] {
width: 100% !important;
display: block;
}
/* Hide the spinner column noise on mobile -- it's the 2nd 50% wrapper */
#coi_form div[style*="display: flex"] > div[style*="width:50%"]:nth-child(2) {
display: none;
}
#coi_form input[type="submit"].special {
/* The base rule at line ~720 sets height:auto with padding:12px 24px which
collapses to ~38px on mobile. That base rule appears LATER in the file
at the same specificity, so it wins the cascade at 767px unless we
force these overrides. Use !important to preserve intent regardless
of where this @media block sits in the file. */
width: 100% !important;
min-width: 0 !important;
height: 44px !important; /* meets 44px touch-target guideline */
padding: 0 16px !important; /* remove vertical padding so height controls */
font-size: 15px !important;
}
#coi_form p {
font-size: 13px;
}
}
/* =========================================================================
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;
}
}
/* =========================================================================
RMK035 DOCUTRAX WHITE THEME
Full-portal recolor to match Figma "TR" variant (all-white login mockup)
from `Docutrax - Shayan's Edit` file, node 6249:13077.
Scope
- Applies globally: every page that includes docutrax-brand.css picks up
the white theme (login, portal /register0/, prod_argo/*, prod_swis/*,
etc.)
- Nothing is scoped to `body.login-page` — the whole portal turns white.
Rollback
- Delete this block (everything below the `RMK035 START` marker) to
revert to the RMK029 deep-teal → black theme.
Notes / follow-ups
- inc/_nav-trn-core.php was updated in the same drop to reference
primary-mark-deep-teal.svg (the dark Docutrax mark) instead of
primary-mark-white.svg. Rollback = revert that one line too.
- Partner co-brand logos that ship as WHITE artwork (Argo, SWIS,
Coaction/Prosight) become invisible on a white header. This block
applies `filter: invert(1) hue-rotate(180deg)` as a stopgap so
partners are still identifiable. For production, request the
partner-supplied dark-on-transparent variants and update
nav-trn-*.php `logo` paths.
- Login card is intentionally left NARROW per Shayan's decision
(matches RMK033 mobile fix). Figma's wide right-column layout
is not implemented.
RMK035 START
========================================================================= */
/* ---------- Font stack pivot to the Figma faces ---------- */
:root {
/* Overrides the RMK017 --dtx-font-brand */
--dtx-font-brand: 'Instrument Sans', 'Britti Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--dtx-font-display: 'Britti Sans', 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
/* ---------- White theme tokens ---------- */
:root {
/* Body flips from teal→black gradient to pure white */
--dtx-body-bg: #FFFFFF;
/* Card / surface tokens (Figma TR) */
--dtx-w-body-ink: #4D4D4D; /* body copy on white */
--dtx-w-heading-ink: #033744; /* deep-teal headings, retained */
--dtx-w-muted-ink: #A3A2A0; /* placeholder / secondary text */
--dtx-w-divider: #F0F0F0; /* card vertical rule, footer separator */
--dtx-w-input-border:#A3A2A0; /* Figma input border */
/* Sage stays as the primary accent; Log In button, footer link labels */
--dtx-w-accent: #84D1BF;
--dtx-w-accent-ink: #033744; /* dark label on sage pill */
}
/* =========================================================================
PAGE BACKGROUND — flip to white
========================================================================= */
html,
body {
background: var(--dtx-body-bg) !important;
background-image: none !important;
color: var(--dtx-w-body-ink);
font-family: var(--dtx-font-brand);
}
/* =========================================================================
HEADER — white bar, dark deep-teal logo + nav links
========================================================================= */
#navbarSettings.dtx-navbar {
background: #FFFFFF !important;
background-image: none !important;
border-bottom: 1px solid var(--dtx-w-divider);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
/* Docutrax primary mark — served from _nav-trn-core.php as deep-teal SVG.
No CSS filter needed. Partner co-brand images (Argo/SWIS/Coaction white
artwork) don't have dark variants shipped, so invert them as a stopgap. */
#navbarSettings.dtx-navbar .navbar-brand-cluster img.dtx-cobrand-logo {
/* WARNING: stopgap. Partner logos are still white artwork; inversion
converts white pixels to dark so the partner is visible on a white
header. This looks acceptable for solid-color wordmarks (SWIS, Argo,
Coaction) but degrades on color logos. Request partner-supplied dark
artwork and remove this filter. */
filter: invert(1) hue-rotate(180deg);
opacity: 1;
}
/* Divider between Docutrax mark and partner logo — was 25% white,
invisible on white. Use a soft gray. */
#navbarSettings.dtx-navbar .navbar-brand-cluster .dtx-cobrand-divider {
background: var(--dtx-w-divider);
}
/* Nav links — Instrument Sans 400 15px deep-teal */
#navbarSettings.dtx-navbar .navbar-nav > li > a {
color: var(--dtx-w-heading-ink);
font-family: var(--dtx-font-brand);
font-weight: 400;
font-size: 15px;
line-height: 18.3px;
}
#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-w-accent);
}
/* "Sign in" — same treatment as nav links */
#navbarSettings.dtx-navbar .dtx-signin > a {
color: var(--dtx-w-heading-ink);
font-weight: 400;
font-size: 15px;
}
#navbarSettings.dtx-navbar .dtx-signin > a:hover {
color: var(--dtx-w-accent);
}
/* "Talk to a specialist" CTA — Figma shows solid sage pill on white */
#navbarSettings.dtx-navbar .navbar-nav > li > a.dtx-cta {
background: var(--dtx-w-accent);
color: var(--dtx-w-accent-ink);
border: 1px solid var(--dtx-w-accent);
font-family: var(--dtx-font-brand);
font-weight: 400;
font-size: 15px;
line-height: 1;
}
#navbarSettings.dtx-navbar .navbar-nav > li > a.dtx-cta:hover,
#navbarSettings.dtx-navbar .navbar-nav > li > a.dtx-cta:focus {
background: var(--dtx-w-heading-ink);
color: #FFFFFF;
border-color: var(--dtx-w-heading-ink);
}
#navbarSettings.dtx-navbar .navbar-nav > li > a.dtx-cta .fa {
color: inherit;
}
/* Mobile toggle icon bars — flip to deep-teal */
#navbarSettings.dtx-navbar .navbar-toggle .icon-bar {
background-color: var(--dtx-w-heading-ink);
}
#navbarSettings.dtx-navbar .navbar-toggle {
border-color: var(--dtx-w-divider);
}
#navbarSettings.dtx-navbar .navbar-toggle:hover,
#navbarSettings.dtx-navbar .navbar-toggle:focus {
background-color: rgba(3,55,68,0.04);
}
/* Collapsed mobile menu — light panel with hairline top */
@media (max-width: 767px) {
#navbarSettings.dtx-navbar .navbar-collapse {
background: #FFFFFF;
border-top: 1px solid var(--dtx-w-divider);
}
}
/* =========================================================================
MEGA-MENU DROPDOWNS — already white in RMK022, just tighten shadow
========================================================================= */
#navbarSettings.dtx-navbar .dtx-mega {
background: #FFFFFF;
box-shadow: 0 8px 24px rgba(3, 55, 68, 0.10);
border-top: 1px solid var(--dtx-w-divider);
}
#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-w-accent);
}
/* =========================================================================
LOGIN PAGE
- Remove the dark card shell — Figma shows the form directly on white
- Keep the WHITE inner form panel (that's the whole card now)
- Section-fxd padding scales down since there's no dark tile framing it
========================================================================= */
/* Kill the dark bg-1 overlay entirely (was already transparent from RMK019,
but re-declare for safety in case cascade order shifts). */
section.bg-1,
.bg-1,
section.bg-1 > .bg-filter,
section.section-fxd > .bg-filter {
background: transparent !important;
background-image: none !important;
}
/* Outer dark card — became a plain container. Remove dark tile, keep sizing. */
.sign-up {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 40px 0; /* was 44 56, dark padding no longer needed */
color: var(--dtx-w-body-ink) !important;
}
/* Card heading — the "Docutrax Log In" wordmark row.
In dark theme this was white centered text. On white, use the deep-teal
Docutrax SVG (already served from primary-mark-deep-teal.svg via login.php
references — see notes) and dark label. */
.sign-up h1.dtx-login-heading {
color: var(--dtx-w-heading-ink);
}
.sign-up h1.dtx-login-heading .dtx-login-heading-text {
color: var(--dtx-w-heading-ink);
font-family: var(--dtx-font-display);
font-weight: 400;
font-size: 20px;
line-height: 22px;
}
.sign-up h1 span {
color: var(--dtx-w-heading-ink) !important;
}
.sign-up h1 .text-primary {
color: var(--dtx-w-accent) !important;
}
/* login.php now references primary-mark-deep-teal.svg directly (RMK035);
no filter needed. Kept selector for future overrides. */
.sign-up h1.dtx-login-heading .dtx-login-logo {
/* intentionally empty -- see comment above */
}
/* Inner white form panel — Figma shows form on white directly, no card border.
Keep the panel but drop the shadow so it blends into the page. */
#coi_form {
background: #FFFFFF;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0; /* was 28 32, the card padding is now on .sign-up */
color: var(--dtx-w-body-ink);
font-family: var(--dtx-font-brand);
}
/* Inputs — Figma: white bg, muted-gray border, deep-teal ink */
#coi_form input.required_input {
background: #FFFFFF;
border: 1px solid var(--dtx-w-input-border);
border-radius: 6px;
padding: 12px 14px;
height: 44px;
color: var(--dtx-w-heading-ink);
font-family: var(--dtx-font-brand);
font-size: 16px; /* prevent iOS zoom */
font-weight: 400;
line-height: 1.3;
}
#coi_form input.required_input::placeholder {
color: var(--dtx-w-muted-ink);
opacity: 1;
}
#coi_form input.required_input:focus {
outline: none;
border-color: var(--dtx-w-heading-ink);
box-shadow: 0 0 0 3px rgba(3, 55, 68, 0.12);
}
/* Checkbox and TOS row */
#coi_form input[type="checkbox"].terms_of_use {
accent-color: var(--dtx-w-heading-ink);
}
#coi_form label,
#coi_form label span,
#coi_form #accept,
#coi_form p {
color: var(--dtx-w-body-ink);
font-family: var(--dtx-font-brand);
font-size: 15px;
line-height: 1.5;
}
#coi_form a {
color: var(--dtx-w-accent); /* Figma shows teal/mint link color */
text-decoration: underline;
text-underline-offset: 2px;
}
#coi_form a:hover {
color: var(--dtx-w-heading-ink);
}
/* Log In button — Figma pill: sage fill, dark deep-teal label, 8px radius */
#coi_form input[type="submit"].special {
background: var(--dtx-w-accent) !important;
color: var(--dtx-w-accent-ink) !important;
border: 0;
border-radius: 8px;
padding: 10px 20px;
font-family: var(--dtx-font-brand);
font-weight: 500;
font-size: 15px;
line-height: 1;
min-width: 100px;
box-shadow: none;
transition: background 0.15s ease, color 0.15s ease;
}
#coi_form input[type="submit"].special:hover:not([disabled]) {
background: var(--dtx-w-heading-ink) !important;
color: #FFFFFF !important;
}
/* =========================================================================
PORTAL / REGISTRATION PAGES (prod_argo/register0.php, etc.)
These pages were designed on dark gradient with light text. Flip them.
========================================================================= */
/* Section big headings ("Register", "Getting Started") — dark on white */
section .top-title,
section h1.top-title {
color: var(--dtx-w-heading-ink) !important;
font-family: var(--dtx-font-display);
font-weight: 400;
}
section .top-title:after {
border-bottom-color: var(--dtx-w-accent) !important;
}
section h3.text-primary,
section h3.text-center.text-primary {
color: var(--dtx-w-heading-ink) !important;
font-family: var(--dtx-font-display);
}
/* Body copy on portals — was white 88% on dark. Flip to gray on white. */
section .text-block-v1,
section p.text-block-v1,
section li.text-block-v1,
section ol li.text-block-v1,
section ol,
section ul {
color: var(--dtx-w-body-ink) !important;
font-family: var(--dtx-font-brand);
}
section .text-block-v1 a,
section p a,
section ol li a {
color: var(--dtx-w-accent);
text-decoration: underline;
}
section .text-block-v1 a:hover,
section p a:hover {
color: var(--dtx-w-heading-ink);
}
/* Red-warning spans — restore to real red on white (was tinted coral for dark) */
section .text-block-v1 span[style*="color:#ff0000"],
section .text-block-v1 span[style*="color: #ff0000"],
section p span[style*="color:#ff0000"] {
color: #C82520 !important;
}
/* Numbered list marker — keep sage */
section ol > li::marker {
color: var(--dtx-w-accent);
}
/* Primary buttons on portals — sage pill matches 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-w-accent) !important;
border-color: var(--dtx-w-accent) !important;
color: var(--dtx-w-accent-ink) !important;
font-family: var(--dtx-font-brand);
font-weight: 500;
text-decoration: none !important; /* kill link underline on button-styled */
}
a.btn-primary,
a.btn-primary.special {
text-decoration: none !important;
}
.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: var(--dtx-w-heading-ink) !important;
border-color: var(--dtx-w-heading-ink) !important;
color: #FFFFFF !important;
}
/* =========================================================================
FOOTER — flip from transparent-over-dark to white with subtle top border
========================================================================= */
.dtx-footer {
background: #FFFFFF !important;
color: var(--dtx-w-body-ink);
border-top: 1px solid var(--dtx-w-divider);
}
.dtx-footer a {
color: var(--dtx-w-body-ink);
}
.dtx-footer a:hover,
.dtx-footer a:focus {
color: var(--dtx-w-accent);
}
/* footer.php now references primary-mark-deep-teal.svg directly (RMK035);
no filter needed. */
.dtx-footer .dtx-footer-brand img {
/* intentionally empty -- see comment above */
}
.dtx-footer .dtx-footer-tagline,
.dtx-footer .dtx-footer-contact,
.dtx-footer .dtx-footer-contact p,
.dtx-footer .dtx-footer-contact a,
.dtx-footer .dtx-footer-contact strong {
color: var(--dtx-w-body-ink);
font-family: var(--dtx-font-brand);
}
.dtx-footer .dtx-footer-contact .fa,
.dtx-footer .dtx-footer-contact svg {
color: var(--dtx-w-accent);
}
/* Column headings — Figma shows these in deep-teal on white footer */
.dtx-footer .dtx-footer-col h5 {
color: var(--dtx-w-heading-ink);
font-family: var(--dtx-font-display);
font-weight: 400;
font-size: 14px;
}
.dtx-footer .dtx-footer-col ul li a {
color: var(--dtx-w-body-ink);
font-family: var(--dtx-font-brand);
font-weight: 400; /* Figma is 400 not 300 for links */
font-size: 15px;
}
.dtx-footer .dtx-footer-col ul li a:hover {
color: var(--dtx-w-accent);
}
/* Bottom row / copyright */
.dtx-footer-bottom {
border-top: 1px solid var(--dtx-w-divider);
color: var(--dtx-w-muted-ink);
}
.dtx-footer-bottom a {
color: var(--dtx-w-muted-ink);
}
.dtx-footer-bottom .dtx-social a {
color: var(--dtx-w-heading-ink);
border-color: var(--dtx-w-divider);
}
.dtx-footer-bottom .dtx-social a:hover {
background: var(--dtx-w-accent);
color: var(--dtx-w-accent-ink);
border-color: var(--dtx-w-accent);
}
/* =========================================================================
MODAL — the registration_modal was already light; keep it, retype the fonts
========================================================================= */
.modal-body.text-block-v1,
.modal-body-text {
color: var(--dtx-w-heading-ink) !important;
font-family: var(--dtx-font-brand);
}
.modal-footer .btn-default {
font-family: var(--dtx-font-brand);
border-color: var(--dtx-w-divider);
color: var(--dtx-w-heading-ink);
}
/* =========================================================================
RMK035 END
========================================================================= */