/* ═══════════════════════════════════════════════════════ Jobs Drivers — GLOBAL light theme Applies the mockup's light style to the ENTIRE site: theme chrome (header/footer/content) + plugin UI (auth, registration, dashboards, search, modals). Loaded on every page. ═══════════════════════════════════════════════════════ */ :root { --jd-navy: #0c2d4a; --jd-navy2: #071e33; --jd-blue: #1a73e8; --jd-blue-dk: #1558b0; --jd-green: #1e8e4a; --jd-green-dk: #167a3d; --jd-text: #334155; --jd-muted: #64748b; --jd-border: #e2e8f0; --jd-bg: #ffffff; --jd-bg-soft: #f4f7fb; } /* ── Base ───────────────────────────────────────────── */ body { background: #ffffff; color: var(--jd-navy); /* Re-map ALL plugin design tokens to the light palette. Set on so every descendant (incl. JS-appended modals) inherits these, regardless of stylesheet order. */ --dc-bg: #ffffff; --dc-bg2: #f4f7fb; --dc-surface: #ffffff; --dc-surface2: #f4f7fb; --dc-border: #e2e8f0; --dc-text: #0c2d4a; --dc-text2: #64748b; --dc-text3: #94a3b8; --dc-accent: #1a73e8; --dc-accent2: #1558b0; --dc-orange: #1e8e4a; /* company colour → green (mockup) */ --dc-orange2: #167a3d; --dc-green: #1e8e4a; --dc-shadow: 0 4px 24px rgba(12,45,74,0.10); } /* kill the dark mesh + grain overlays */ body::before, body::after { display: none !important; } a { color: var(--jd-blue); } a:hover { color: var(--jd-blue-dk); } /* ── Header (white) ─────────────────────────────────── */ .site-header { background: #fff; border-bottom: 1px solid var(--jd-border); backdrop-filter: none; box-shadow: 0 1px 0 rgba(12,45,74,0.04); } .logo-text { color: var(--jd-navy); font-weight: 800; } .logo-text span { color: var(--jd-blue); } .logo-mark { background: linear-gradient(135deg, var(--jd-navy), var(--jd-blue)); border-radius: 8px; } .site-nav a { color: var(--jd-text); font-weight: 500; } .site-nav a:hover { color: var(--jd-blue); background: rgba(26,115,232,0.06); } .site-nav a.current-menu-item { color: var(--jd-blue); font-weight: 700; background: transparent; box-shadow: inset 0 -2px 0 var(--jd-blue); border-radius: 0; } .nav-btn-login { border-color: var(--jd-border); color: var(--jd-navy); background: #fff; } .nav-btn-login:hover { border-color: var(--jd-blue); color: var(--jd-blue); } .nav-btn-register { background: var(--jd-blue); } .nav-btn-register:hover { background: var(--jd-blue-dk); } .nav-btn-dashboard { background: var(--jd-blue); } .nav-btn-dashboard:hover { background: var(--jd-blue-dk); opacity: 1; } .nav-btn-admin { background: var(--jd-green); } .nav-toggle { border-color: var(--jd-border); } .nav-toggle span { background: var(--jd-navy); } @media (max-width: 768px) { .site-nav-wrap.is-nav-open { background: #fff; border-color: var(--jd-border); box-shadow: 0 12px 32px rgba(12,45,74,0.14); } .nav-ctas, .nav-ctas-admin { border-color: var(--jd-border); } } /* ── Page content ───────────────────────────────────── */ .site-content { background: #fff; } .entry-content { color: var(--jd-navy); } .entry-content p { color: var(--jd-text); } .entry-content h1, .entry-content h2, .entry-content h3 { color: var(--jd-navy); } .entry-content a { color: var(--jd-blue); } /* Plugin page wrappers: ensure light canvas */ .dc-wrap { background: #fff; color: var(--jd-navy); } .dc-dashboard { background: #f4f7fb; } .dc-sidebar { background: #fff; } /* ── Footer (dark navy, always) ─────────────────────── */ .site-footer { background: var(--jd-navy2); border-top: none; margin-top: 64px; color: #fff; } .site-footer .logo-text { color: #fff; } .site-footer .logo-text span { color: #60a5fa; } .footer-brand p { color: rgba(255,255,255,0.55); } .footer-col h4 { color: rgba(255,255,255,0.45); } .footer-col a { color: rgba(255,255,255,0.7); } .footer-col a:hover { color: #fff; } .footer-bottom { border-color: rgba(255,255,255,0.1); } .footer-bottom p { color: rgba(255,255,255,0.45); } /* ── Plugin hardcoded-dark fixes ────────────────────── */ /* `body` prefix raises specificity so these win over the plugin stylesheet regardless of load order. */ /* tabs (login I'm a Driver / Company) */ body .dc-tab:hover { background: rgba(12,45,74,0.05); } body .dc-tab.active { box-shadow: 0 2px 8px rgba(12,45,74,0.12); } body .dc-tab[data-tab="login-company"].active, body .dc-login #dc-login-as-company:checked ~ .dc-login-tabs label[for="dc-login-as-company"] { color: var(--jd-green); border-color: rgba(30,142,74,0.3); background: rgba(30,142,74,0.08); } /* badges that assumed dark bg */ body .dc-badge-grey { background: rgba(12,45,74,0.06); color: var(--jd-muted); } /* upgrade banner → blue/green tint */ body .dc-upgrade-banner { background: linear-gradient(135deg, rgba(30,142,74,0.08), rgba(26,115,232,0.08)); border-color: rgba(30,142,74,0.2); } /* contact-locked info box */ body .dc-contact-locked { background: rgba(26,115,232,0.06); border-color: rgba(26,115,232,0.2); } /* modal backdrop softer on light UI */ body .dc-modal-overlay { background: rgba(12,45,74,0.55); }