/* ============================================================ Shared overrides for LIGHT service colours (cyan / yellow / orange). Loaded AFTER the page's own .css. The page must also carry and its nav JS must add nav-bar--light on the "svc" theme (see the light pages). Gives dark "ink" text so the bright background stays legible. ============================================================ */ .pm-hero-title { color: #171818; } .pm-hero-title .word { text-shadow: none; } .pm-hero .overline { color: rgba(0, 0, 0, 0.6); } .pm-spec { border-top-color: rgba(0, 0, 0, 0.22); } /* light pages: the animated top line fades to the dark border color (overrides the white default in v2.css) */ body.loaded .pm-hero .pm-spec { border-top-color: rgba(0, 0, 0, 0.22); } .pm-spec-row { border-bottom-color: rgba(0, 0, 0, 0.18); } .pm-spec dt { color: rgba(0, 0, 0, 0.55); } .pm-spec dd { color: #171818; } .pm-hero-cta { color: #171818; border-color: #171818; } .pm-hero-cta::before { background: #171818; } .pm-hero-cta:hover { color: var(--svc); } /* big backdrop wordmark: dark chunky-gradient shades instead of white tints. Must reset background-size/blend too — the base rule tiles a 150px noise, which otherwise repeats the gradient and makes the 'g' descenders go dark. */ .pm-hero-bg { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0 25%, rgba(0, 0, 0, 0.12) 25% 50%, rgba(0, 0, 0, 0.08) 50% 75%, rgba(0, 0, 0, 0.045) 75% 100%); background-size: 100% 100%; background-blend-mode: normal; } /* nav over the light hero -> dark text (bar bg is the light colour via JS) */ .nav-bar--light .navlink, .nav-bar--light .wordmark, .nav-bar--light .nav-caret { color: #171818 !important; } .nav-bar--light .nav-contact { color: #171818 !important; border-color: rgba(0, 0, 0, 0.4) !important; } /* on hover the dark fill rises, so the label flips to the service colour */ .nav-bar--light .nav-contact:hover { color: var(--svc) !important; border-color: #171818 !important; } /* dropdown sheet over the light hero -> dark text on the light panel */ body.svc-light .mega--svc .mega-eyebrow, body.svc-light .mega--svc .mega-card-name, body.svc-light .mega--svc .mega-card-desc, body.svc-light .mega--svc .mega-all { color: #171818 !important; } /* lighter hover wash (white barely shows on a light panel) + darker resting dots (the dot is currentColor, which is dark here) */ body.svc-light .mega--svc .mega-card:hover { background: rgba(255, 255, 255, 0.28); } body.svc-light .mega--svc .mega-dot { background: #171818; opacity: 0.42; } body.svc-light .mega--svc .mega-card:hover .mega-dot { background: var(--accent); opacity: 1; }