/*!
 * CatEye Website - "Dark" design (loaded after modern.css, active on <html data-design="dark">)
 *
 * Concept: the security operations room. The Modern design inverted: every page
 * sits on near-black indigo, text is light, amber marks the calls to action and
 * a faint grid runs behind the heroes. Same HTML, same fonts, same layout.
 *
 * Palette   void #0d0a1f · night / panel #191433 · violet #6239bd · lilac #b7a4f5 · amber #f2c230
 * Contrast  body text 9.4:1 · lilac links 7.6:1 · amber 11.6:1 on void
 */

/* ------------------------------------------------------------------ tokens */
html[data-design="dark"] .theme-modern {
    --void: #0d0a1f;
    --panel: #191433;
    --panel-2: #231b4a;
    --lilac: #b7a4f5;
    --mist: var(--panel);
    --ink: #f1f2f8;
    --slate: rgba(241, 242, 248, .74);
    --line: rgba(255, 255, 255, .11);

    --c-heading: var(--ink);
    --c-subheading: var(--ink);
    --c-text: var(--slate);
    --c-link: var(--lilac);
    --c-link-hover: #fff;
    --c-border: var(--line);
    --c-soft: var(--panel);

    background: var(--void);
    color: var(--slate);
}
html[data-design="dark"] { background: #0d0a1f; color-scheme: dark; }
html[data-design="dark"] .theme-modern ::selection { background: var(--amber); color: var(--void); }
html[data-design="dark"] .theme-modern :is(h1, h2, h3, h4, h5, h6) { color: var(--ink); }
html[data-design="dark"] .theme-modern .ce-section :is(p, li, td) > a:not(.ce-btn):not(.ce-more),
html[data-design="dark"] .theme-modern .entry-content a:not(.ce-btn) { color: var(--lilac); }
html[data-design="dark"] .theme-modern hr,
html[data-design="dark"] .theme-modern th,
html[data-design="dark"] .theme-modern td { border-color: var(--line); }

/* The faint grid behind heroes and page headers */
html[data-design="dark"] .theme-modern :is(.mx-hero, .page-header, .ce-prod-hero)::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 100%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 90% at 50% 100%, #000 30%, transparent 100%);
}
html[data-design="dark"] .theme-modern :is(.mx-hero, .page-header) { position: relative; }
html[data-design="dark"] .theme-modern .mx-hero .ce-slide { z-index: 1; }
html[data-design="dark"] .theme-modern .page-header > .ce-container { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ header */
html[data-design="dark"] .theme-modern .site-header {
    background: rgba(13, 10, 31, .82);
    box-shadow: 0 1px 0 var(--line);
}
html[data-design="dark"] .theme-modern .site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 12px 32px rgba(0, 0, 0, .4); }
html[data-design="dark"] .theme-modern .site-logo,
html[data-design="dark"] .mx-wordmark b { color: #fff; }
html[data-design="dark"] .mx-wordmark span { color: rgba(255, 255, 255, .55); }
html[data-design="dark"] .theme-modern .site-nav .menu > li > a,
html[data-design="dark"] .theme-modern .site-header.is-stuck .site-nav .menu > li > a { color: rgba(255, 255, 255, .86); }
html[data-design="dark"] .theme-modern .site-nav .menu > li:hover > a,
html[data-design="dark"] .theme-modern .site-nav .menu > li > a:focus,
html[data-design="dark"] .theme-modern .site-nav .menu > li.is-active > a { color: var(--amber); }
html[data-design="dark"] .theme-modern .site-nav .sub-menu {
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0, 0, 0, .5);
}
html[data-design="dark"] .theme-modern .site-nav .sub-menu a { color: rgba(255, 255, 255, .86); }
html[data-design="dark"] .theme-modern .site-nav .sub-menu a:hover,
html[data-design="dark"] .theme-modern .site-nav .sub-menu .is-active > a { background: var(--panel-2); color: var(--amber); }
html[data-design="dark"] .mx-cta { background: var(--amber); color: var(--void); }
html[data-design="dark"] .mx-cta:hover { background: #fff; color: var(--void); }
html[data-design="dark"] .theme-modern :is(.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after) { background: #fff; }
html[data-design="dark"] .theme-modern .nav-open .nav-toggle-bars { background: transparent; }

/* -------------------------------------------------------------------- hero */
html[data-design="dark"] .theme-modern .mx-hero {
    background:
        radial-gradient(900px 560px at 80% 40%, rgba(98, 57, 189, .5), transparent 62%),
        radial-gradient(640px 420px at 6% 100%, rgba(242, 194, 48, .07), transparent 60%),
        var(--void);
}
html[data-design="dark"] .mx-lens::before { border-color: rgba(242, 194, 48, .8); box-shadow: 0 0 40px rgba(242, 194, 48, .18); }
html[data-design="dark"] .mx-lens::after { border-color: rgba(255, 255, 255, .12); }
html[data-design="dark"] .theme-modern .mx-hero .ce-slide-sub { color: rgba(255, 255, 255, .72); }

/* ----------------------------------------------------------------- sections */
/* Plain sections sit on the void; the old pale-grey bands become raised panels */
html[data-design="dark"] .theme-modern .ce-section:is([style*="#f4f6f7"], [style*="#f6f6f6"], [style*="#eff1f2"], [style*="#f7f7f7"], [style*="#f2f2f2"]) {
    background-color: var(--panel) !important;
    box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}
/* "Night" bands get a violet cast so they still read as separate bands on a dark page */
html[data-design="dark"] .theme-modern .ce-section.ce-text-light { background-color: var(--night) !important; }
html[data-design="dark"] .theme-modern .ce-section.ce-text-light::before {
    background: linear-gradient(100deg, rgba(35, 27, 74, .96) 0%, rgba(25, 20, 51, .9) 45%, rgba(25, 20, 51, .7) 100%);
}
html[data-design="dark"] .theme-modern .ce-section.ce-text-light[style*="#6239bd"] { background-color: var(--violet-deep) !important; }

/* Colours written into the content for white pages, remapped for dark ones */
html[data-design="dark"] .theme-modern .ce-section:not(.ce-text-light) :is([style*="color:#404040"], [style*="color: #404040"], [style*="color: #404040"],
    [style*="color:#333333"], [style*="color: #333333"], [style*="color:#747474"], [style*="color: #747474"], [style*="color:#eeeded"], [style*="color: #eeeded"]) { color: var(--ink) !important; }
html[data-design="dark"] .theme-modern .ce-section:not(.ce-text-light) :is([style*="color:#768894"], [style*="color: #768894"], [style*="color:#666666"], [style*="color: #666666"]) { color: var(--slate) !important; }
html[data-design="dark"] .theme-modern .ce-section:not(.ce-text-light) :is([style*="color:#1b6dc4"], [style*="color: #1b6dc4"], [style*="color:#354d96"], [style*="color: #354d96"],
    [style*="color:#0162a3"], [style*="color: #0162a3"], [style*="color:blue"], [style*="color: blue"], [style*="color:#6239bd"], [style*="color: #6239bd"]) { color: var(--lilac) !important; }
html[data-design="dark"] .theme-modern .ce-section:not(.ce-text-light) [style*="#74c5da"]:not(hr) { color: var(--amber) !important; }
/* Headings written in the old blues stay headings: white, not link-coloured */
html[data-design="dark"] .theme-modern .ce-section:not(.ce-text-light) :is(h1, h2, h3, h4, h5, h6) :is([style*="color:#1b6dc4"], [style*="color: #1b6dc4"], [style*="color:#354d96"], [style*="color: #354d96"],
    [style*="color:#0162a3"], [style*="color: #0162a3"], [style*="color:blue"], [style*="color: blue"], [style*="color:#6239bd"], [style*="color: #6239bd"]) { color: var(--ink) !important; }
html[data-design="dark"] .theme-modern .ce-section:not(.ce-text-light) :is(.ce-headline strong, .ce-headline b) { color: var(--amber); }
html[data-design="dark"] .theme-modern .ce-section:not(.ce-text-light) hr.ce-sep { background: var(--amber); }
html[data-design="dark"] .theme-modern .ce-subheadline { color: var(--slate); }
/* White panels placed behind content */
html[data-design="dark"] .theme-modern .ce-col:is([style*="background-color:#ffffff"], [style*="background-color: #ffffff"], [style*="rgba(255,255,255"], [style*="rgba(255, 255, 255"]) {
    background: var(--panel) !important; border: 1px solid var(--line);
}
html[data-design="dark"] .theme-modern .ce-section.ce-text-light :is([style*="color:#ffffff"], [style*="color: #ffffff"]) { color: #fff !important; }

/* ----------------------------------------------------------------- buttons */
html[data-design="dark"] .theme-modern :where(.ce-btn, .ce-form button[type="submit"], .ce-section input[type="submit"]) {
    background: var(--amber); border-color: var(--amber); color: var(--void);
}
html[data-design="dark"] .theme-modern :where(.ce-btn, .ce-form button[type="submit"], .ce-section input[type="submit"]):hover {
    background: #fff; border-color: #fff; color: var(--void);
}
html[data-design="dark"] .theme-modern .ce-btn-outline-dark,
html[data-design="dark"] .theme-modern .ce-job .ce-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
html[data-design="dark"] .theme-modern .ce-btn-outline-dark:hover,
html[data-design="dark"] .theme-modern .ce-job .ce-btn:hover { background: var(--amber); border-color: var(--amber); color: var(--void); }
html[data-design="dark"] .theme-modern .ce-more { color: var(--amber); }
html[data-design="dark"] .theme-modern .ce-prod-closing .ce-btn { background: var(--amber); border-color: var(--amber); color: var(--void); }

/* ------------------------------------------------------- lists and boxes */
html[data-design="dark"] .theme-modern .ce-checklist li > i { background: rgba(242, 194, 48, .14); color: var(--amber); }
html[data-design="dark"] .theme-modern .ce-box-icon,
html[data-design="dark"] .theme-modern .ce-box-icon.ce-icon-circle { background: rgba(242, 194, 48, .12) !important; color: var(--amber) !important; }
html[data-design="dark"] .theme-modern .ce-box-body[style*="color"] { color: var(--slate) !important; }
html[data-design="dark"] .theme-modern .ce-box-link:hover .ce-box-title { color: var(--amber); }
html[data-design="dark"] .theme-modern .ce-feature-icon { background: var(--panel-2); color: var(--amber) !important; }
html[data-design="dark"] .theme-modern .ce-toggle summary::before { background: var(--panel-2); color: var(--amber); }
html[data-design="dark"] .theme-modern .ce-section[style*="#f4f6f7"] .ce-toggle summary::before { background: var(--void); }
html[data-design="dark"] .theme-modern .ce-alert { background: var(--panel); border-left-color: var(--amber); }
html[data-design="dark"] .theme-modern .ce-counter-ring { --ring: var(--amber); }
html[data-design="dark"] .theme-modern .ce-counter-ring::before { background: var(--void); }
html[data-design="dark"] .theme-modern .ce-flip-front { background: var(--panel); }
html[data-design="dark"] .theme-modern .ce-social a { color: #fff; border-color: var(--line); }
html[data-design="dark"] .theme-modern .ce-social a:hover { background: var(--amber); border-color: var(--amber); color: var(--void); }
html[data-design="dark"] .theme-modern .ce-journey > li::before { box-shadow: 0 0 0 10px var(--void); }
html[data-design="dark"] .theme-modern .ce-journey-when,
html[data-design="dark"] .theme-modern .ce-steps > li::before { color: var(--amber); }
html[data-design="dark"] .theme-modern .ce-steps > li { border-top-color: var(--amber); }
html[data-design="dark"] .theme-modern .ce-prod-tile b { color: #fff; }
html[data-design="dark"] .theme-modern .ce-404-code { color: var(--amber); }

/* Partner logos sit in light tiles so the ones with white backgrounds still look right */
html[data-design="dark"] .theme-modern .ce-logos img {
    filter: grayscale(1); opacity: .9; background: #fff; padding: 12px; border-radius: 14px; box-sizing: content-box;
}
html[data-design="dark"] .theme-modern .ce-logos a:hover img,
html[data-design="dark"] .theme-modern .ce-logos img:hover { opacity: 1; }

/* ------------------------------------------------------------ testimonials */
html[data-design="dark"] .theme-modern .ce-section:not(.ce-text-light) .ce-testimonial blockquote,
html[data-design="dark"] .theme-modern .ce-section:not(.ce-text-light) .ce-testimonial figcaption strong { color: #fff; }
html[data-design="dark"] .theme-modern .ce-section:not(.ce-text-light) .ce-testimonial figcaption { color: var(--slate); }
html[data-design="dark"] .theme-modern .ce-section:not(.ce-text-light) .ce-testimonial-dots button { background: rgba(255, 255, 255, .25); }

/* ------------------------------------------------------------- blog posts */
html[data-design="dark"] .theme-modern .ce-post-thumb { background: var(--panel); }
html[data-design="dark"] .theme-modern .ce-post-title a { color: #fff; }
html[data-design="dark"] .theme-modern .ce-post-title a:hover { color: var(--amber); }
html[data-design="dark"] .theme-modern .ce-post-meta a { color: var(--slate); text-decoration-color: rgba(255, 255, 255, .3); }
html[data-design="dark"] .theme-modern .ce-posts-large .ce-post-card { background: var(--panel); color: var(--slate); box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, .5); }
html[data-design="dark"] .theme-modern .ce-text-light .ce-posts-large .ce-post-card .ce-post-title a { color: #fff; }
html[data-design="dark"] .theme-modern .ce-text-light .ce-posts-large .ce-post-card .ce-more { color: var(--amber); }
html[data-design="dark"] .theme-modern .ce-pagination a { border-color: var(--line); color: var(--ink); }
html[data-design="dark"] .theme-modern .ce-pagination a:hover { border-color: var(--amber); color: var(--amber); }
html[data-design="dark"] .theme-modern .ce-pagination .current { background: var(--amber); border-color: var(--amber); color: var(--void); }
html[data-design="dark"] .theme-modern .post-share { background: var(--panel); }
html[data-design="dark"] .theme-modern .post-tags a { color: var(--slate); border-color: var(--line); }
html[data-design="dark"] .theme-modern .post-tags a:hover,
html[data-design="dark"] .theme-modern .post-nav a:hover { color: var(--amber); border-color: var(--amber); }
html[data-design="dark"] .theme-modern .post-tags i { color: var(--amber); }
html[data-design="dark"] .theme-modern .post-nav a { color: #fff; }
html[data-design="dark"] .theme-modern .related-posts { background-color: var(--panel) !important; }

/* ----------------------------------------------------------- page header */
html[data-design="dark"] .theme-modern .page-header {
    background: radial-gradient(900px 420px at 88% 0%, rgba(98, 57, 189, .55), transparent 62%), var(--void);
    box-shadow: inset 0 -1px 0 var(--line);
}

/* -------------------------------------------------------------------- jobs */
html[data-design="dark"] .theme-modern .ce-jobs { border-bottom-color: var(--line); }
html[data-design="dark"] .theme-modern .ce-job { border-top-color: var(--line); }
html[data-design="dark"] .theme-modern .ce-job-title a { color: #fff; }
html[data-design="dark"] .theme-modern .ce-job:hover .ce-job-title a,
html[data-design="dark"] .theme-modern .ce-job-specs i { color: var(--amber); }
html[data-design="dark"] .theme-modern .job-summary { background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
html[data-design="dark"] .theme-modern .job-summary :is(dt, dd, h3) { color: var(--ink); }
html[data-design="dark"] .theme-modern .job-summary dt { color: var(--slate); }
html[data-design="dark"] .theme-modern .job-apply { border-top-color: var(--line); }

/* ------------------------------------------------------------------- forms */
html[data-design="dark"] .theme-modern :is(.ce-form input[type="text"], .ce-form input[type="email"], .ce-form input[type="tel"], .ce-form input[type="file"],
.ce-form textarea, .ce-search-form input, .ce-section .form-control, .ce-section input[type="text"], .ce-section input[type="email"],
.ce-section input[type="tel"], .ce-section select, .ce-section textarea) {
    background: var(--panel); border-color: rgba(255, 255, 255, .16); color: #fff;
}
html[data-design="dark"] .theme-modern :is(.ce-form, .ce-section form) :is(input, textarea, select):focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(242, 194, 48, .16); }
html[data-design="dark"] .theme-modern :is(.ce-form, .ce-section form) :is(input, textarea)::placeholder { color: rgba(255, 255, 255, .4); }
html[data-design="dark"] .theme-modern .ce-form label,
html[data-design="dark"] .theme-modern .ce-section form .col-25 label { color: var(--ink); }
html[data-design="dark"] .theme-modern .ce-check { color: var(--slate) !important; }
html[data-design="dark"] .theme-modern .ce-form small { color: rgba(255, 255, 255, .5); }
html[data-design="dark"] .theme-modern .ce-form .req,
html[data-design="dark"] .theme-modern .field-error { color: #ff8a80; }
html[data-design="dark"] .theme-modern .ce-form .has-error :is(input, textarea) { border-color: #ff8a80; }
html[data-design="dark"] .theme-modern .ce-notice { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
html[data-design="dark"] .theme-modern .ce-notice.success { background: rgba(64, 214, 138, .12); color: #8ff0b8; box-shadow: 0 0 0 1px rgba(64, 214, 138, .3); }
html[data-design="dark"] .theme-modern .ce-notice.error { background: rgba(255, 138, 128, .12); color: #ffb4ad; box-shadow: 0 0 0 1px rgba(255, 138, 128, .3); }

/* ------------------------------------------------- closing call-to-action */
html[data-design="dark"] .mx-closing {
    background: radial-gradient(700px 300px at 20% 100%, rgba(98, 57, 189, .45), transparent 70%), var(--panel);
    border-top-color: var(--line);
}
html[data-design="dark"] .mx-closing h2 { color: #fff; }
html[data-design="dark"] .mx-closing p { color: var(--slate); }

/* ------------------------------------------------------------------ footer */
html[data-design="dark"] .mx-footer { background: #070512; box-shadow: inset 0 1px 0 var(--line); }
html[data-design="dark"] .mx-footer-bottom { border-top-color: var(--line); }
html[data-design="dark"] .theme-modern .to-top { background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
html[data-design="dark"] .theme-modern .to-top:hover { background: var(--amber); color: var(--void); }

/* -------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
    html[data-design="dark"] .theme-modern .site-nav { background: var(--void); }
    html[data-design="dark"] .theme-modern .site-nav .menu > li > a,
    html[data-design="dark"] .theme-modern .site-header.is-stuck .site-nav .menu > li > a { color: #fff; }
    html[data-design="dark"] .theme-modern .site-nav .sub-menu { background: var(--panel); }
}