/* ========================================= READ MODE A second presentation of the same site for people who came to read rather than to look at it: solid grounds, no motion, longer line-height, capped measure. It keeps the brand - Space Grotesk for display, Inter for copy, the deep purple #2F086D for headings, the violet for accents. It is not a greyscale or a generic "reader"; it is this site with the artwork and the animation taken out. Everything hangs off html.dni-read, applied by an inline script in before first paint so switching pages does not flash the normal theme first. Why the ground has to be forced rather than inherited: several blocks on this site are light-text-on-artwork (the capability list, the Industry Applications panel, the Platforms block, the footer). Removing the artwork without recolouring that text would leave white-on-white - the exact failure this site has already had three times. So read mode sets both sides of every pairing. ========================================= */ html.dni-read { --rm-page: #FBFAFF; /* off-white with a lilac cast - easier than pure white */ --rm-surface: #FFFFFF; --rm-heading: #2F086D; --rm-body: #333333; --rm-muted: #5F5A6B; --rm-accent: #5B1FBF; /* the brand violet, darkened to read on light */ --rm-rule: rgba(47, 8, 109, .14); } /* ---- 1. solid ground, no artwork ---------------------------- */ html.dni-read, html.dni-read body { background: var(--rm-page) !important; } html.dni-read .e-con, html.dni-read [class*="elementor-element-"] { background-image: none !important; background-blend-mode: normal !important; box-shadow: none !important; } /* Containers go transparent so the page ground shows through. Buttons, form controls and the menu panel are excluded - they need their own fills. */ html.dni-read .e-con:not(.dni-rm-keep), html.dni-read [class*="elementor-element-"]:not(.elementor-widget-button):not(.dni-rm-keep) { background-color: transparent !important; } /* the decorative layers this site paints over its sections */ html.dni-read .grid-trail-canvas, html.dni-read .elementor-background-video-container, html.dni-read .elementor-absolute, html.dni-read .uc-card-surface, html.dni-read .elementor-element-a879560::after, html.dni-read .elementor-element-3852bf6 { background: none !important; } html.dni-read .grid-trail-canvas, html.dni-read .elementor-background-video-container, html.dni-read .elementor-absolute { display: none !important; } html.dni-read .elementor-element-a879560::after { content: none !important; } /* the masks and bleeds those layers used are meaningless now */ html.dni-read .uc-card-surface, html.dni-read .elementor-element-3852bf6 { -webkit-mask-image: none !important; mask-image: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; } /* ---- 2. no motion ------------------------------------------ */ html.dni-read *, html.dni-read *::before, html.dni-read *::after { animation: none !important; transition: none !important; } /* transform has to be split out of that. Two glyphs on this site are positioned by a transform rather than moved by one, and blanking it broke both: the dropdown caret is a 7px box rotated 45deg, so without the rotation it renders as a bare corner beside "Use cases", and the diamond in every button is a path whose own transform attribute is what centres it in a 26-unit viewBox - unset, it draws at x=100 in that box and shows as a fragment at the button's edge. Elements themselves still get transform:none, because here an element transform is always an animation's start state: the per-character headline spans sit translated and blurred until a script clears them. Kept as two rules so a browser that cannot parse :not(svg *) drops only that one. */ html.dni-read *::before, html.dni-read *::after { transform: none !important; } html.dni-read *:not(svg *):not(.dni-caret) { transform: none !important; } /* The hero headline is 48 per-character spans that start invisible and wait for a script. With animation off they must be shown outright. */ html.dni-read .split-h1 .char { opacity: 1 !important; filter: none !important; } /* ---- 3. one text polarity ---------------------------------- */ html.dni-read h1, html.dni-read h2, html.dni-read h3, html.dni-read h4, html.dni-read h5, html.dni-read h6, html.dni-read .elementor-heading-title, html.dni-read .heading-2-style, html.dni-read .heading-3-style, html.dni-read .heading-4-styling, html.dni-read .elementor-icon-box-title, html.dni-read .dni-uc-gap, html.dni-read .dni-uc-item-title, html.dni-read .dni-ways-heading { color: var(--rm-heading) !important; } html.dni-read p, html.dni-read li, html.dni-read .elementor-icon-box-description, html.dni-read .dni-uc-item-body, html.dni-read .dni-f-copy, html.dni-read .dni-f-mail { color: var(--rm-body) !important; } html.dni-read .eyebrow-text, html.dni-read .solution-numbers, html.dni-read .dni-uc-eyebrow, html.dni-read .dni-uc-subtab, html.dni-read .dni-way-num { color: var(--rm-muted) !important; } html.dni-read a:not(.elementor-button), html.dni-read .dni-f-link, html.dni-read .dni-f-legal-link, html.dni-read .elementor-item { color: var(--rm-accent) !important; } /* The two feature panels (dni-section-design.css) set their text with .elementor .elementor-element-XXXX .class - specificity (0,3,0), which outranks the generic read-mode rules above at (0,2,1) even though this file loads later. So the panels need naming explicitly: read mode removes their violet ground, and without this their light text would sit on the light field at 1.1:1. Prefixing with html.dni-read takes these to (0,3,1) and they win. */ html.dni-read .elementor-element-2265245 .heading-2-style, html.dni-read .elementor-element-503ca20 .heading-2-style, html.dni-read .elementor-element-2265245 .heading-3-style, html.dni-read .elementor-element-503ca20 .heading-3-style, html.dni-read .elementor-element-2265245 .elementor-icon-box-title, html.dni-read .elementor-element-503ca20 .elementor-icon-box-title { color: var(--rm-heading) !important; } html.dni-read .elementor-element-2265245 p, html.dni-read .elementor-element-503ca20 p, html.dni-read .elementor-element-2265245 .elementor-icon-box-description, html.dni-read .elementor-element-503ca20 .elementor-icon-box-description { color: var(--rm-body) !important; } html.dni-read .elementor-element-2265245 .eyebrow-text, html.dni-read .elementor-element-503ca20 .eyebrow-text, html.dni-read .elementor-element-2265245 .solution-numbers, html.dni-read .elementor-element-503ca20 .solution-numbers { color: var(--rm-muted) !important; } /* and the panel loses its rounding along with its ground */ html.dni-read .elementor-element-2265245, html.dni-read .elementor-element-503ca20 { border-radius: 0 !important; padding-inline: 0 !important; } /* ---- 4. components that were dark surfaces ------------------ */ html.dni-read .dni-uc { --dni-uc-accent: var(--rm-accent); --dni-uc-frame: var(--rm-rule); --dni-uc-hair: var(--rm-rule); --dni-uc-head: var(--rm-heading); --dni-uc-body: var(--rm-body); --dni-uc-muted: var(--rm-muted); --dni-uc-panel: var(--rm-surface); --dni-uc-raised: var(--rm-surface); background: var(--rm-surface) !important; border-color: var(--rm-rule) !important; } html.dni-read .dni-uc-lane1 .dni-uc-tab, html.dni-read .dni-uc-lane2 .dni-uc-subtab, html.dni-read .dni-uc-panel { background: var(--rm-surface) !important; border-color: var(--rm-rule) !important; } html.dni-read .dni-uc-lane1 .dni-uc-tab[aria-selected="true"], html.dni-read .dni-uc-lane2 .dni-uc-subtab[aria-selected="true"] { color: var(--rm-accent) !important; border-bottom-color: var(--rm-accent) !important; } /* hover surface would be invisible on this ground; a rule reads better */ html.dni-read .elementor-icon-box-wrapper { background-color: transparent !important; border-bottom: 1px solid var(--rm-rule); border-radius: 0 !important; } html.dni-read .elementor-icon-box-wrapper:hover { background-color: var(--rm-surface) !important; } /* ---- 5. reading comfort ------------------------------------ */ html.dni-read p, html.dni-read li, html.dni-read .elementor-icon-box-description { font-size: 18px !important; line-height: 1.7 !important; max-width: 68ch; } html.dni-read h1, html.dni-read h2, html.dni-read h3, html.dni-read .elementor-heading-title { line-height: 1.25 !important; } /* the divider images between sections are decoration */ html.dni-read hr, html.dni-read .elementor-widget-divider { border-color: var(--rm-rule) !important; } /* ---- 6. the switch itself ---------------------------------- */ .dni-rm-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 14px; border: 1px solid rgba(47, 8, 109, .28); border-radius: 999px; background: transparent; font-family: "Space Grotesk", sans-serif; font-size: 13px; font-weight: 400; letter-spacing: -.01em; text-transform: uppercase; color: #2F086D; cursor: pointer; white-space: nowrap; transition: background-color .12s ease-out, border-color .12s ease-out; } .dni-rm-toggle:hover { background: rgba(47, 8, 109, .06); border-color: rgba(47, 8, 109, .45); } .dni-rm-toggle:focus-visible { outline: 2px solid #7E29FE; outline-offset: 2px; } .dni-rm-toggle svg { width: 15px; height: 15px; flex: none; } .dni-rm-toggle[aria-pressed="true"] { background: #ECE7FF; border-color: rgba(47, 8, 109, .45); } /* On the dark hero of the inside pages the header sits on light artwork, so the button stays dark-on-light throughout - no variant needed. */ /* The mobile menu is a dark panel (#241046) with light text. Read mode has to flip it too, or opening the menu drops you back into the dark theme mid-session. */ html.dni-read .e-off-canvas__content, html.dni-read .e-off-canvas__content > .elementor-element { background-color: var(--rm-surface) !important; } html.dni-read .e-off-canvas .elementor-nav-menu--dropdown a.elementor-item { color: var(--rm-heading) !important; } html.dni-read .e-off-canvas .elementor-nav-menu ul.sub-menu a.elementor-sub-item { color: var(--rm-body) !important; border-left-color: var(--rm-rule) !important; } html.dni-read .e-off-canvas .elementor-nav-menu--dropdown li { border-color: var(--rm-rule) !important; } html.dni-read .e-off-canvas .elementor-nav-menu ul.sub-menu { background: transparent !important; } /* the copy inside the off-canvas panel, which is dark until read mode */ .e-off-canvas .dni-rm-toggle { margin: 0 20px 4px; color: #ECE7FF; border-color: rgba(196, 158, 255, .4); } .e-off-canvas .dni-rm-toggle:hover { background: rgba(236, 231, 255, .1); } html.dni-read .e-off-canvas .dni-rm-toggle { color: #2F086D; border-color: rgba(47, 8, 109, .28); } /* one switch per breakpoint */ .dni-rm-toggle--header { display: none; } @media (min-width: 768px) { .dni-rm-toggle--header { display: inline-flex; } .dni-rm-toggle--menu { display: none; } }