/*-------------------------------------------------------------- # custom.css # # Site-specific overrides. Loaded last by css/global.css.php so these rules win # over style.css without editing the upstream theme file. # # Note: the desktop header only exists at >=1025px. Below that, style.css hides # .octf-main-header and .header-topbar and the .header_mobile block takes over, # so every rule here is scoped to the desktop header. --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Design tokens # # Same brand colors already in use throughout style.css (navy #2e3e98, orange # #f3491c, blue accent #43baff, purple #7141b1) - collected here as custom # properties so new rules can reference them by name instead of re-deriving hex # values, and so a future palette tweak only needs one edit. --------------------------------------------------------------*/ :root { --brand-navy: #2e3e98; --brand-orange: #f3491c; --brand-orange-hover: #d63d14; --brand-blue-accent: #43baff; --brand-purple: #7141b1; --ink: #1b1d21; --muted-on-light: #5c6270; --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --radius-sm: 4px; --radius-md: 6px; --shadow-card: 0 6px 18px rgba(14, 22, 66, 0.12); /* Typography */ --font-heading: "Sora", "Montserrat", sans-serif; --font-body: "Inter", "Nunito Sans", sans-serif; /* Links: one color pair used everywhere on light backgrounds, so a link reads as a link no matter which section it's in. Dark-surface sections (header CTA bar, footer, newsletter) keep their own white-on-navy rules below since --link's contrast fails against --brand-navy. */ --link: var(--brand-navy); --link-hover: var(--brand-orange); } /*-------------------------------------------------------------- ## Typography # # Swaps the theme's Montserrat/Nunito Sans for Sora/Inter (linked in # header.base.php's ) - a pairing more typical of contemporary managed # IT / SaaS sites, with better small-text legibility than Nunito Sans. --------------------------------------------------------------*/ body, button, input, select, optgroup, textarea { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6, .main-heading, .ot-heading span { font-family: var(--font-heading); } /*-------------------------------------------------------------- ## Links: one consistent color/underline/hover treatment # # style.css leaves plain tags (inside paragraphs, lists, cards) at the # body text color with no distinguishing treatment, so it's not obvious # they're clickable until hovered. This gives every in-content link the same # identity: brand navy, no underline, orange on hover/focus. Nav links, # buttons (.octf-btn) and anything already given an explicit color (header # CTA, footer, newsletter, .terms-consent) are unaffected - this only # targets plain inline/content links. --------------------------------------------------------------*/ .site-content a:not(.octf-btn):not([class*="btn"]) { color: var(--link); text-decoration: none; transition: color 0.2s linear; } .site-content a:not(.octf-btn):not([class*="btn"]):hover, .site-content a:not(.octf-btn):not([class*="btn"]):focus { color: var(--link-hover); } /*-------------------------------------------------------------- ## Header: keep the main bar on a single line # # Reclaim horizontal space before anything is forced to wrap. --------------------------------------------------------------*/ @media only screen and (min-width: 1025px) and (max-width: 1500px) { /* Main bar: tighten the nav and CTA so logo + menu + CTA stay on one row. */ .main-navigation > ul > li { margin: 0 12px; } .octf-btn-cta .btn-cta-group { margin-left: 20px; } .octf-btn-cta .contact-header { padding-left: 20px; } } /* The main bar is a nowrap flex row already; make sure the nav can shrink into it rather than pushing the CTA onto a second row. */ .octf-main-header .octf-mainbar-row { flex-wrap: nowrap; } .octf-mainbar-row .menu-col { min-width: 0; } /* The CTA phone number and its label are two lines by design, but neither line may wrap within itself. */ .octf-btn-cta .contact-header .cinfo-header span { white-space: nowrap; } .octf-btn-cta .contact-header .cinfo-header { display: flex; flex-direction: column; } .octf-btn-cta .contact-header .cinfo-header .main-text, .octf-btn-cta .contact-header .cinfo-header .main-text a { display: block; color: var(--brand-navy); font-size: 16px; line-height: 1.35; visibility: visible; opacity: 1; } .octf-btn-cta .btn-cta-header .octf-btn { white-space: nowrap; } /*-------------------------------------------------------------- ## Contact Us button: always present on desktop # # style.css:1835 hid .btn-cta-header below 1440px. The desktop header itself only # exists at >=1025px, so on every viewport between 1025px and 1440px - which is # most laptops, and the majority of desktop sessions - the header had no Contact # Us button at all. The single most important conversion control on the page was # invisible to the people most likely to click it. # # It is restored at every width the desktop header exists at. The phone block # (.contact-header) keeps its own 1265px cutoff from style.css:1840: when space is # tight the two-line phone number is the thing that gives way, not the button. --------------------------------------------------------------*/ @media (max-width: 1440px) { .octf-btn-cta .btn-cta-header { display: block; } } /* Below 1265px the phone block is gone, so the button no longer needs the gutter that separated it from the phone number. */ @media (max-width: 1265px) { .octf-btn-cta .btn-cta-header { margin-left: 0; } } /* base/nav.base.php renders a Contact Us
  • for the mobile hamburger, which has no CTA column of its own. The desktop nav already has the button beside it, so hide the duplicate there. */ .main-navigation .nav-contact-item { display: none; } /* Keep the header's contact links readable against the navy header surfaces. */ .octf-btn-cta .contact-header span a, .octf-btn-cta .contact-header span a:visited, .octf-btn-cta .contact-header span a:hover, .octf-btn-cta .contact-header span a:focus { color: #fff; } /*-------------------------------------------------------------- ## Contact page # # The consent text and its Privacy Policy link sit on a #f4f6f9 panel. The link # previously carried an inline `color: white !important`, which rendered it # invisible against that background. --------------------------------------------------------------*/ /* Fine print under the submit button. It carries the consent wording that used to sit beside a checkbox, so it must stay legible - small, but not a disclaimer nobody can read. Colour is deliberately not set here: inside the form it is white on the gradient panel (see "Contact form field contrast"), and this base rule is only the size and spacing shared by any other placement. */ .terms-consent { margin-top: 4px; font-size: 12.5px; line-height: 1.6; } .terms-consent a { color: #2e3e98; text-decoration: none; } .terms-consent a:hover, .terms-consent a:focus { color: #f3491c; } /* Honeypot. Must stay reachable in the DOM for bots but never be perceivable by a person, so it is moved off-screen rather than display:none - some bots skip fields that are explicitly hidden. Paired with aria-hidden and tabindex="-1" in the markup so keyboard and screen-reader users never land on it. */ .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Submission feedback. The form previously gave no confirmation at all. */ .contact-notice { padding: 14px 18px; margin-bottom: 22px; border-radius: 4px; border-left: 4px solid transparent; font-size: 15px; line-height: 1.5; } .contact-notice-success { background: #e8f6ee; border-left-color: #2e8b57; color: #1c5c39; } .contact-notice-error { background: #fdecea; border-left-color: #f3491c; color: #8c2410; } /*-------------------------------------------------------------- ## Contact form field contrast # # The panel itself is a cyan-to-purple gradient (style.css:5709), so the white copy # sitting on it is correct and stays white. The bug was one level in: the theme also # paints the INPUTS white-on-translucent (style.css:5724-5733), while # .conversion-panel-form gives those same inputs a near-white #f8fafc background. # White text and a white placeholder on a #f8fafc field is invisible - visitors could # not read the field hints or proof-read what they had typed. # # So: light fields with dark text and a dark placeholder, inside a panel whose # surrounding copy stays white. Overriding here rather than editing style.css keeps # the vendor theme file untouched - custom.css is concatenated last by # css/global.css.php, so it wins without !important. --------------------------------------------------------------*/ .contact-form .main-form input:not([type="checkbox"]):not([type="submit"]), .contact-form .main-form textarea { color: var(--ink); background: #f8fafc; } /* ::placeholder and the legacy vendor-prefixed selectors are listed separately. A browser that does not understand one selector in a group discards the whole rule, so combining them would silently drop the fix in older engines. */ .contact-form .main-form input::placeholder, .contact-form .main-form textarea::placeholder { color: #55607a; opacity: 1; /* Firefox dims placeholders to 0.54 by default. */ } .contact-form .main-form input::-webkit-input-placeholder, .contact-form .main-form textarea::-webkit-input-placeholder { color: #55607a; } .contact-form .main-form input::-moz-placeholder, .contact-form .main-form textarea::-moz-placeholder { color: #55607a; opacity: 1; } .contact-form .main-form input:-ms-input-placeholder, .contact-form .main-form textarea:-ms-input-placeholder { color: #55607a; } /* Consent fine print under the submit button. It sits directly on the gradient panel, not inside a field, so it is white - and at full opacity rather than a faded grey, because it is the wording that makes submitting the form an act of consent and it has to be readable to do that job. */ .contact-form .main-form .terms-consent { color: #fff; } .contact-form .main-form .terms-consent a { color: #fff; text-decoration: underline; } .contact-form .main-form .terms-consent a:hover, .contact-form .main-form .terms-consent a:focus { color: #ffd9cf; } /*-------------------------------------------------------------- ## Rich text message editor # # Enhancement over the plain