/* Dark mode: the same pages, the same layout, on dark grounds. theme.js puts data-theme="dark" on before the page paints. Every colour comes from the tokens below, so the palette is set in one place; the rules only swap colours, never size or place anything. Inline colours in the generated pages need !important. */ [data-theme="dark"] { color-scheme: dark; /* Adaface has no dark mode; these are the greys, navy and blues in its stylesheet (sass/final.css). Their white on #209cee buttons stay as the light pages have them. The red is lifted toward white until small text on it passes 4.5:1, and the two tints mix a colour into the page. */ --dk-ground: #292929; --dk-raised: #363636; --dk-sunk: #242424; --dk-band: #011f8a; --dk-on-band: #ffffff; --dk-line: #4a4a4a; --dk-ink: #f5f5f5; --dk-text: #dbdbdb; --dk-muted: #b5b5b5; --dk-accent: #209cee; --dk-on-accent: #ffffff; --dk-link: #3eb0ef; --dk-figure: #3eb0ef; --dk-pop: #f14668; --dk-select: #011f8a; --dk-good: #48c78e; --dk-good-bg: #2e4239; --dk-bad: #f67791; --dk-bad-bg: #492e33; /* The hero illustration's own colours (ill.css). */ --ill-ink: var(--dk-ink); --ill-muted: var(--dk-muted); --ill-blue: var(--dk-link); --ill-sky: var(--dk-select); --ill-blue-3: var(--dk-line); background: var(--dk-ground); } /* The page, its header and footer. */ [data-theme="dark"] body, [data-theme="dark"] #adaface-app, [data-theme="dark"] .adaface-app-inner, [data-theme="dark"] main { background: var(--dk-ground) !important; color: var(--dk-text) !important; } [data-theme="dark"] .ours-bar, [data-theme="dark"] .mobile-header-content.is-active { background: var(--dk-ground) !important; } [data-theme="dark"] :is(h1, h2, h3, h4, h5, h6, strong, b, dt, th), [data-theme="dark"] .ours-brand, [data-theme="dark"] .footer-heading, [data-theme="dark"] .ours-doc-nav a[aria-current="page"] { color: var(--dk-ink); } [data-theme="dark"] a:where(:not([class])), [data-theme="dark"] .ours-doc-nav a, [data-theme="dark"] .footer-link a, [data-theme="dark"] .footer-link-horizontal { color: var(--dk-link); } [data-theme="dark"] :is(.header-anchor, .header-key, .header-word, .heading-content, .ours-theme), [data-theme="dark"] .mobile-header-content .heading-content, [data-theme="dark"] .navbar-burger, [data-theme="dark"] .post-full-content, [data-theme="dark"] .footer-link, [data-theme="dark"] .adaface-gray, [data-theme="dark"] .ours-tool { color: var(--dk-text); } [data-theme="dark"] :is(.header-anchor, .ours-theme):hover, [data-theme="dark"] .header-item:hover > .header-key > .header-word { color: var(--dk-link); } [data-theme="dark"] .heading-l1 > .heading-content { border-bottom-color: var(--dk-line); } [data-theme="dark"] .header-dropdown > div { border-color: var(--dk-line) !important; background: var(--dk-raised) !important; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .header-dropdown-link { color: var(--dk-text) !important; } [data-theme="dark"] .header-dropdown-link[aria-current] { color: var(--dk-link) !important; } [data-theme="dark"] .header-dropdown-link:hover { background: var(--dk-ground) !important; } [data-theme="dark"] .mainfooter, [data-theme="dark"] .mainfooter > div:last-child { border-top-color: var(--dk-line) !important; } /* Buttons. */ [data-theme="dark"] .dark-button, [data-theme="dark"] .dark-button:hover, [data-theme="dark"] .ours-bill button.on, [data-theme="dark"] .ours-stage .lnk .cp { border-color: var(--dk-accent); background: var(--dk-accent); color: var(--dk-on-accent); } [data-theme="dark"] .light-button { border-color: var(--dk-ink); background: none; color: var(--dk-ink); } [data-theme="dark"] .first-fold a[href$="#how"] { color: var(--dk-link) !important; } /* The hero illustration. */ [data-theme="dark"] .ill .front, [data-theme="dark"] .ill .bub, [data-theme="dark"] .ill rect[fill="#fff"] { fill: var(--dk-raised); } [data-theme="dark"] .ill .front.sky { fill: var(--ill-sky); } [data-theme="dark"] .ill .band.real { fill: var(--dk-good-bg); } [data-theme="dark"] .ill .band.decoy { fill: var(--dk-bad-bg); } [data-theme="dark"] .ill .t-cap.real { fill: var(--dk-good); } [data-theme="dark"] .ill .t-cap.decoy { fill: var(--dk-bad); } [data-theme="dark"] .ill-labels > span { background: var(--dk-bad-bg); color: var(--dk-bad); } [data-theme="dark"] .ill-labels > span.amn { background: var(--dk-select); color: var(--dk-ink); } /* The figures and the video call tools. */ [data-theme="dark"] .ours-figures .tag { background: var(--dk-raised); color: var(--dk-muted); } [data-theme="dark"] .ours-figures .n, [data-theme="dark"] .ours-slider-head b, [data-theme="dark"] .ours-price { color: var(--dk-figure); } [data-theme="dark"] .ours-figures .n.pop { color: var(--dk-pop); } [data-theme="dark"] .ours-figures .k { color: var(--dk-text); } [data-theme="dark"] .ours-tool img[src*="webex"] { filter: invert(1); } /* The two bands: features, and the closing call to action. */ [data-theme="dark"] #features, [data-theme="dark"] .ours-cta { background-color: var(--dk-band) !important; } [data-theme="dark"] #features > div:first-child :is(h2, p), [data-theme="dark"] .ours-cta :is(div, p) { color: var(--dk-on-band) !important; } [data-theme="dark"] .ours-cta .button.is-outlined { border-color: var(--dk-on-band) !important; color: var(--dk-on-band); } [data-theme="dark"] .ours-cta .button.is-outlined:hover { background: var(--dk-on-band); color: var(--dk-band); } [data-theme="dark"] #features .ours-pin { background: var(--dk-ground); } [data-theme="dark"] .test-library-card { background: var(--dk-raised); color: var(--dk-text); } /* How it works. */ [data-theme="dark"] #how { background-color: var(--dk-sunk) !important; } [data-theme="dark"] .ours-type { color: var(--dk-link); } [data-theme="dark"] .ours-type.on { border-color: var(--dk-link); background: var(--dk-raised); } [data-theme="dark"] .onhover { background: var(--dk-raised); } [data-theme="dark"] .onhover.onhover-select-parent, [data-theme="dark"] .onhover:hover { background: var(--dk-select); } [data-theme="dark"] .onhover .onhover-deselect { color: var(--dk-link); } [data-theme="dark"] .onhover-select-parent :is(h3, p, .icon) { color: var(--dk-ink) !important; } [data-theme="dark"] .ours-panel { border-color: var(--dk-line); background: var(--dk-raised); box-shadow: 0 18px 50px -30px rgba(0, 0, 0, 0.8); color: var(--dk-text); } [data-theme="dark"] .ours-panel-h { border-bottom-color: var(--dk-line); background: var(--dk-ground); } [data-theme="dark"] :is(.ours-stage .ed .row, .ours-stage .rev .r, .ours-stage .lnk .bar), [data-theme="dark"] :is(.ours-stage .share .wbody, .ours-stage .prot .q) { border-color: var(--dk-line); background: var(--dk-ground); } [data-theme="dark"] .ours-stage .share .win { border-color: var(--dk-line); } [data-theme="dark"] :is(.ours-stage .ed .num, .ours-stage .rev .av), [data-theme="dark"] .ours-flag { background: var(--dk-select); color: var(--dk-ink); } [data-theme="dark"] .ours-stage .ed .add { color: var(--dk-link); } [data-theme="dark"] .ours-panel-h .pdot, [data-theme="dark"] .ours-stage .ed .row.live .qt::after { background: var(--dk-accent); } [data-theme="dark"] .ours-stage .lnk .u { color: var(--dk-muted); } [data-theme="dark"] .ours-stage .prot .q.ocr { color: var(--dk-text); } [data-theme="dark"] .ours-stage .prot .noise { background-image: radial-gradient(circle, var(--dk-text) 0.6px, transparent 0.7px); } [data-theme="dark"] :is(.ours-stage .lnk .sent, .ours-bill .save, .ours-pricing .ours-incl) { color: var(--dk-good); } [data-theme="dark"] .ours-stage .lnk .pulse { background: var(--dk-good); } [data-theme="dark"] .ours-stage .rev .pill.ok, [data-theme="dark"] .ours-flag.free { background: var(--dk-good-bg); color: var(--dk-good); } [data-theme="dark"] .ours-stage .rev .pill.flag { background: var(--dk-bad-bg); color: var(--dk-bad); } /* The FAQ, help center and contact cards. */ [data-theme="dark"] .main-adaface-lp .blog-content { background-color: var(--dk-raised); } [data-theme="dark"] .ours-card p, [data-theme="dark"] :is(.ours-result, .ours-details dd) { color: var(--dk-text); } [data-theme="dark"] .ours-hc-band { background: var(--dk-sunk); } /* Pricing. */ [data-theme="dark"] :is(.ours-price-hero, .ours-price-cost) { color: var(--dk-ink) !important; } [data-theme="dark"] :is(.ours-price-hero, .ours-price-cost) b { color: var(--dk-link) !important; } [data-theme="dark"] .ours-price-controls { border-color: var(--dk-line); background: linear-gradient(180deg, var(--dk-raised), var(--dk-ground)); } [data-theme="dark"] .ours-slider input { accent-color: var(--dk-accent); } [data-theme="dark"] .ours-bill { border-color: var(--dk-line); } [data-theme="dark"] .ours-bill button { color: var(--dk-text); } [data-theme="dark"] .ours-bill button.on .save { color: var(--dk-on-accent); } [data-theme="dark"] .ours-plan { border-color: var(--dk-line); background: var(--dk-raised); box-shadow: none; } [data-theme="dark"] .ours-plan.pop { border-color: var(--dk-accent); } [data-theme="dark"] .ours-plan.rec { border-color: var(--dk-figure); box-shadow: 0 0 0 2px var(--dk-figure); } [data-theme="dark"] .ours-flag.none { background: none; } [data-theme="dark"] .ours-cap { border-color: var(--dk-line); } [data-theme="dark"] .ours-plan li svg { color: var(--dk-link); } [data-theme="dark"] .ours-info { border-color: var(--dk-link); background: var(--dk-raised); color: var(--dk-link); } [data-theme="dark"] .ours-modal { background: var(--dk-raised); color: var(--dk-text); } [data-theme="dark"] .ours-modal::backdrop { background: rgba(0, 0, 0, 0.6); } /* Secondary text, wherever the light pages use their greys. */ [data-theme="dark"] :is( .ours-figures .tag, .ours-figures .per, .ours-foot, .ours-type .ts, .ours-slider-head span, .ours-ticks, .ours-incl span, .ours-price s, .ours-price small, .ours-psub, .ours-cap span, .ours-price-note, .ours-modal-x, .ours-modal .ours-modal-note, .ours-form .help ), [data-theme="dark"] .ours-table td[data-label]::before { color: var(--dk-muted); } /* The help center, contact, terms and privacy pages. */ [data-theme="dark"] .ours-doc-body :is(kbd, code) { border-color: var(--dk-line); background: var(--dk-raised); color: var(--dk-ink); } [data-theme="dark"] .ours-table :is(th, td), [data-theme="dark"] .ours-table.ours-wide tr { border-bottom-color: var(--dk-line); } [data-theme="dark"] .ours-form :is(.input, .textarea) { border-color: var(--dk-line); background: var(--dk-raised); color: var(--dk-ink); } [data-theme="dark"] .ours-form :is(.input, .textarea)::placeholder { color: var(--dk-muted); } [data-theme="dark"] .ours-form .label { color: var(--dk-ink); } [data-theme="dark"] :is(.ours-req, .ours-result.bad) { color: var(--dk-bad); }