/* Dark theme for the static site, layered over the original stylesheet. Loaded only by pages that carry .DarkSite on ; site-fixes.css carries the theme-agnostic fixes and is loaded by every page, light or dark. */ :root{color-scheme:dark;--site-bg:#08142e;--site-panel:#142445;--site-raised:#1f3460;--site-text:#edf2fb;--site-muted:#c3cee1;--site-accent:#50bcbd;--site-border:#405275} body.DarkSite{background:var(--site-bg);color:var(--site-text)} .DarkSite .Wrapper{background:var(--site-bg);overflow:clip} .DarkSite .Header{background:#1f3460;color:#fff} .DarkSite .Block:not(.Block--new){background:linear-gradient(150deg,#142445,#08142e);color:var(--site-text)} .DarkSite .Block--content,.DarkSite .Block--text{background:var(--site-bg)!important} .DarkSite .Block--grey,.DarkSite .Block--white,.DarkSite .Block--contact,.DarkSite .Block--offices{background-color:var(--site-bg);color:var(--site-text)} /* The rule above sets only background-color, so the gradient from .Block:not(.Block--new) still painted over these blocks. Restate it as the shorthand at matching specificity. */ .DarkSite .Block:not(.Block--new):is(.Block--grey,.Block--white,.Block--contact,.Block--offices){background:var(--site-bg)} .DarkSite :is(h1,h2,h3,h4,h5,h6,.Title,.Intro,.Column-title,.Country,.Office-title,.Quote-title){color:var(--site-text)} .DarkSite :is(.Text,.Column-text,.Listing-text,.Quote-body,.Office,.AccordionAnswer-body,.FaqAnswer-body){color:var(--site-text)} .DarkSite :is(.SubTitle,.Meta,.Quote-function,.Quote-meta,.Tile-company,.Label){color:var(--site-muted)} .DarkSite .u-textTurquoise{color:var(--site-accent)!important} .DarkSite .u-textPrimary,.DarkSite .u-textNavy{color:var(--site-text)!important} /* Some headings carry two accent classes at once. Both dark-theme overrides are !important at the same specificity, so the winner was decided by source order rather than by design, and the accent the light theme shows was lost. These pin each pair to the colour the light theme resolves to: turquoise over navy, coral over turquoise. */ .DarkSite .u-textNavy.u-textTurquoise{color:var(--site-accent)!important} .DarkSite .u-textCoral.u-textTurquoise{color:#e73458!important} .DarkSite .Text :is(a,a:visited),.DarkSite .Intro a,.DarkSite .Back{color:var(--site-accent)} .DarkSite .Text a:hover,.DarkSite .Intro a:hover,.DarkSite .Back:hover{color:#91e0df} .DarkSite :is(.Text,.Intro) a{text-decoration:underline;text-underline-offset:.18em} .DarkSite .Text [style*="color:"]{color:inherit!important} .DarkSite .Text :is(th,td){border-color:var(--site-border);background:transparent;color:var(--site-text)} .DarkSite .Text th{background:var(--site-raised)} .DarkSite hr{border-color:var(--site-border);background-color:var(--site-border)} .DarkSite .Legacy-banner{height:64px;padding:0;background:linear-gradient(120deg,#1f3460,#08142e)!important} .DarkSite .Legacy-banner>.Media-object{display:none} .DarkSite .Block--content h1{line-height:1.22;letter-spacing:-.02em} .DarkSite .Block--content .Intro{color:var(--site-muted);font-size:1.8rem;line-height:1.7} .DarkSite .Block--content .Text{line-height:1.8} .DarkSite .Block--content .Text :is(h2,h3,h4){line-height:1.3;margin-top:1.8em} .DarkSite :is(.Tile,.Quote,.Column){background:var(--site-panel);color:var(--site-text);border-color:var(--site-border)} /* .Featured sits at left:-15px, so clipping on the Tile would cut the badge off. Round and clip the image instead. */ .DarkSite .Tile{border:1px solid #304361;border-radius:12px;box-shadow:0 10px 30px #030a1926;transition:border-color .2s,transform .2s} .DarkSite .Tile>.Media-object{display:block;border-radius:12px;overflow:hidden} /* The legacy .Tile:before/:after overlays are inset 0 with no radius, so without the tile clipping them they square off the corners - most visibly on hover, where .Tile:hover:before takes the gradient to full opacity. Round them instead. */ .DarkSite .Tile::before,.DarkSite .Tile::after{border-radius:12px} .DarkSite .Tile:hover{border-color:var(--site-accent);transform:translateY(-3px)} .DarkSite .Tile :is(h2,h3,h4,p,.Title){color:var(--site-text)} .DarkSite .Quote{border:1px solid var(--site-border);border-radius:12px} .DarkSite :is(.Accordion-item,.Faq-item){color:var(--site-text);border-color:var(--site-border)} .DarkSite :is(.Accordion-question,.Faq-question){background:var(--site-panel);color:var(--site-text)} .DarkSite :is(.Accordion-answer,.Faq-answer){background:#0d1d39;color:var(--site-text)} .DarkSite :is(.Accordion-icon,.Faq-icon) path{stroke:var(--site-accent)} /* The share and author strip under an article was never themed: it still carries the light theme's navy, which is unreadable on the dark background. The social chips stay a light circle with a navy mark, which reads fine either way. */ .DarkSite .Share-prefix,.DarkSite .Share .Author{color:var(--site-text)} .DarkSite .Share .Author-prefix{color:var(--site-muted)} /* The item wrapper keeps the light theme's white from the base stylesheet: dark-site themed the question, the answer and the icon but never the box behind them. On the FAQ pages that is a white card; on the phishing accordion it appears the moment an item is opened. */ .DarkSite .Block--faq .Faq-item{background:var(--site-panel);box-shadow:none} .DarkSite .Block--default :is(.Accordion-item,.Faq-item).is-active{background:var(--site-panel);box-shadow:none} .DarkSite .Block:not(.Block--new) :is(.Logo img,.Quote-logo img,.Listing-icon img,.Column-icon img){filter:brightness(0) invert(1)} .DarkSite .Footer-form,.DarkSite .Footer-form:after{background:#142445;color:var(--site-text)} /* .Footer-form:after is a 10000px circle pinned at top:calc(100% - 9900px), so the dome it draws ends exactly 100px below the block - which is what the light theme's margin-bottom:100px reserves. Zeroing that margin did not shrink the dome, it only pulled the footer columns up underneath it, so the curve cut through the logo and the Menu/About headings. Keep the reserved space and the dome lands on it. */ .DarkSite .Footer-form{padding-bottom:7rem} .DarkSite :is(.Form input:not([type=submit]):not([type=checkbox]):not([type=radio]),.Form textarea,.Form select,.FieldGroup input){background:#08142e;color:var(--site-text);border:1px solid var(--site-border);border-radius:6px} .DarkSite :is(input,textarea)::placeholder{color:#aab8d0;opacity:1} .DarkSite .Form label,.DarkSite .Form .hs-richtext{color:var(--site-text)} .DarkSite .Form--hubspot{color:var(--site-text)} .DarkSite .Form--hubspot .hs-error-msg{color:#ffacb8} .DarkSite .Form--hubspot a{color:var(--site-accent)} .DarkSite .Form-status{color:var(--site-muted)} .DarkSite .Form-fallback{color:var(--site-muted)} .DarkSite .Form-fallback a{color:var(--site-accent)} .DarkSite .Button--primary{background:var(--site-accent);color:#08142e;border-color:var(--site-accent)} .DarkSite .Button--primary:hover{background:#91e0df;color:#08142e} .DarkSite .Button--primary path{fill:currentColor} .DarkSite .Button--secondary{color:#fff;font-weight:600} /* The legacy stylesheet paints this CTA label white on the brand teal and the live site ships it that way, so the migration keeps it white for parity. White on #50bcbd is only 2.27:1; darkening the teal itself is a brand decision, tracked separately rather than resolved by recolouring the label here. */ .DarkSite .Block--new .Button--secondary{color:#fff;font-weight:600} .DarkSite .Nav--main-header .Nav-dropdown,.DarkSite .Nav--search .Nav-dropdown{background:#142445;color:var(--site-text);border-color:var(--site-border)} .DarkSite .Nav-dropdown :is(.Nav-link,.Nav-title){color:var(--site-text)} .DarkSite .Nav-dropdown .Nav-link:hover{color:var(--site-accent)} .DarkSite .Nav--lang .Nav-dropdown{background:#142445} .DarkSite .Header :is(.Nav-toggle,.Contact-link){color:var(--site-text)} .DarkSite .Nav--pagination :is(.Nav-link,a){color:var(--site-text);border-color:var(--site-border)} .DarkSite .Nav--pagination :is(.is-active,.Nav-link:hover){background:var(--site-accent);color:#08142e} .DarkSite .Customer-logoFallback{display:flex;align-items:center;justify-content:center;min-height:64px;color:#fff;font-size:2.4rem;font-weight:700;text-align:center} .DarkSite :focus-visible{outline:2px solid #79e0df;outline-offset:4px} .DarkSite .Static-search{padding:8rem 0;min-height:65vh} .DarkSite .Static-search h1{margin:0 0 2.4rem} .DarkSite .Static-search-form{display:flex;gap:1.2rem;max-width:800px;margin:3rem 0} .DarkSite .Static-search-form input{flex:1;min-width:0;padding:1.5rem 2rem;background:#142445;color:#fff;border:1px solid #61799d;border-radius:8px;font:inherit} .DarkSite .Static-search-status{color:var(--site-muted);margin:2rem 0} .DarkSite .Static-results{display:grid;gap:1.6rem;padding:0;list-style:none} .DarkSite .Static-result{padding:2.4rem;background:#142445;border:1px solid #304361;border-radius:12px} .DarkSite .Static-result:before{display:none} .DarkSite .Static-result a{color:#78d7d6;text-decoration:none} .DarkSite .Static-result h2{font-size:2.4rem;margin:0 0 1rem;line-height:1.3} .DarkSite .Static-result p{color:var(--site-muted);margin:0;line-height:1.6} .DarkSite .Static-result small{display:block;color:#bac9df;margin-bottom:.8rem} @media(max-width:767px){.DarkSite .Legacy-banner{height:32px}.DarkSite .Block--content h1{font-size:3rem}.DarkSite .Block--content .Intro{font-size:1.7rem}.DarkSite .Static-search{padding:4rem 0}.DarkSite .Static-search-form{flex-direction:column}.DarkSite .Static-search-form .Button{align-self:flex-start}.DarkSite .Static-result{padding:1.8rem}.DarkSite .Text table{display:block;max-width:100%;overflow:auto}.DarkSite .Pricingcolumns-wrapper{gap:2.5rem}} .DarkSite .Header .Nav--trial>.Nav-item>.Nav-link{color:#d2d6df} .DarkSite .Header .Button--secondary{color:#fff;font-weight:600} .DarkSite .Back svg path{fill:var(--site-accent)} .DarkSite .Badge-item img[src*="NIST"]{filter:brightness(0) invert(1)} .DarkSite .Nav--main-header-mobile,.DarkSite .Nav--main-header-mobile .Mobile-child{background:#142445;color:#edf2fb} .DarkSite .Nav--main-header-mobile :is(.Nav-listWrapper--top,.Nav-listWrapper--middle,.Nav-listWrapper--footer){background:#142445;border-color:#405275} .DarkSite .Nav--main-header-mobile :is(.Nav-link,.Nav-back,.Nav-title,.Nav-title a,.Nav--search){color:#edf2fb!important} .DarkSite .Nav--main-header-mobile .Mobile-child:after{background:transparent;pointer-events:none} @media(max-width:1120px){.DarkSite .Navigation-body{background:#142445}.DarkSite .Nav--main-header-mobile .Nav--trial .Button--primary{background:#50bcbd;color:#08142e}} /* Legacy demo/pricing-request pages used an in-flow header; retain that spacing when dark. */ .DarkSite .Header.Header--dark.Header--withHideNav{position:relative;background:#1f3460} .DarkSite .Wrapper:has(.Header--withHideNav) .Block--form-and-content:first-child{padding-top:4rem} .DarkSite .Nav--main-header-mobile .Logo svg path[fill="#1B3A66"]{fill:#fff} .DarkSite .Nav--main-header-mobile :is(.Nav-link--icon,.Nav-back--icon,.Arrow-object,.Search-object) :is(path,circle){stroke:#c3cee1} .DarkSite .Nav--main-header-mobile .Nav--trial .Button--primary{color:#08142e!important} .DarkSite .Nav--main-header-mobile .Button--secondary{color:#fff!important} /* Dropdown panels do not use the legacy white diamond pointer. */ .DarkSite .Nav-dropdown::before{display:none;content:none} .DarkSite .Block.Block--new:not(.Block--white) .Button--primary{background:transparent;color:var(--site-text);border-color:var(--site-text)} .DarkSite .Block.Block--new:not(.Block--white) .Button--primary:is(:hover,:focus,:active){background:var(--site-text);color:var(--site-bg)} .DarkSite .Block.Block--new:not(.Block--white) .Button--primary .Icon path{fill:none;stroke:currentColor} .DarkSite .Block :is(.Button--text,.Link,.Office-title,.Office-item),.DarkSite .Block--stories-and-quotes :is(.Quote-title,.Quote-body){color:var(--site-text)} .DarkSite .Block :is(.Button--text,.Link):is(:hover,:focus){color:var(--site-accent)} .DarkSite .Block :is(.Button--text,.Link) svg{color:inherit} .DarkSite .Block :is(.Button--text,.Link) svg circle{fill:var(--site-accent)} .DarkSite .Block :is(.Button--text,.Link) svg path{stroke:var(--site-bg)} .DarkSite .Block--offices .Offices :is(.Office-title,.Office-item){color:var(--site-text)} .DarkSite :is(.Text,.Intro) li::before{color:var(--site-accent)} .DarkSite .Nav--pagination .Arrow-object path{stroke:var(--site-text);stroke-width:2} .DarkSite .Block--stories-and-quotes .Slider-item.is-next~.Slider-item::after{background:linear-gradient(90deg,rgba(8,20,46,.4) 10%,var(--site-bg))} .DarkSite :is(.Block--stories-and-quotes,.Block--gallery) .Slider-button{background-image:url('../img/icons/arrow-slider--white.svg');border-color:var(--site-text);opacity:1} .DarkSite :is(.Block--stories-and-quotes,.Block--gallery) .Slider-button.is-disabled{opacity:.35} .DarkSite .Faq-categories{background:var(--site-bg)} .DarkSite .Faq-categories-item{background:var(--site-panel);border:1px solid var(--site-border)} .DarkSite .Faq-categories-item h4{color:var(--site-text)} .DarkSite .Faq-categories-item:is(:hover,:focus){background:var(--site-raised)} .DarkSite .Faq-categories-item img{filter:brightness(0) invert(1)} .DarkSite .Faq-question[role="button"]{cursor:pointer} .DarkSite .Block .Button--link{color:var(--site-text)} .DarkSite .Block .Button--link:is(:hover,:focus){color:var(--site-accent)} .DarkSite .Block .Button--link::after{background:var(--site-accent)} .DarkSite .Block .Button--link .Icon path{stroke:var(--site-bg)} .DarkSite .Text ul>li::before{background-color:var(--site-accent)} /* The legacy stylesheet hovers this CTA to #e73458; that red is not in the dark palette. */ .DarkSite .Header--dark .Nav--trial .Button--secondary:hover{background-color:#91e0df;border-color:#91e0df;color:#08142e} /* .Tile.is-case only gets min-height:100% under .Block--cases.Block--new. The migrated overview and related grids are plain .Block--cases/.Block--related, so every card stopped at its own content height. Let the cell stretch and the tile fill it. */ /* Only the cells that hold a card: .Tiles grids also carry header cells whose full-width child right-aligns a Show all button, and that child must not become a shrink-to-content flex item. */ .DarkSite .Tiles>.Grid-cell:has(>.Tile){display:flex} .DarkSite .Tiles>.Grid-cell>.Tile{width:100%} /* .Tile images are dimmed to .4 and the legacy sheet only restores them inside .Block--grey/.Block--cases; the migrated blog overview grid sits outside any Block, so its thumbnails read as missing. The .Tile:before gradient still carries contrast. */ .DarkSite .Tiles>.Grid-cell>.Tile:not(.is-case) .Media-image{opacity:1} /* The mobile language panel is the light theme's white full-screen sheet (.Nav--lang .Nav-list is position:fixed with background-color:#fff), while .Nav--main-header-mobile forces every .Nav-link to #edf2fb. The language names were therefore near-white on white. Theme the sheet instead of the links. */ .DarkSite .Nav--main-header-mobile .Nav--lang .Nav-list{background-color:var(--site-panel);color:var(--site-text);box-shadow:none} .DarkSite .Nav--main-header-mobile .Nav--lang .Nav-link{padding:10px 20px} .DarkSite .Nav--main-header-mobile .Nav--lang .Nav-link:is(:hover,:focus){color:var(--site-accent)!important} .DarkSite .Nav--main-header-mobile .Nav--lang .Nav-link.is-active{color:var(--site-accent)!important;font-weight:700} .DarkSite .Nav--main-header-mobile .Nav--lang .Nav-toggle{color:var(--site-text)} .DarkSite .Nav--main-header-mobile .Nav--lang.is-active .Nav-toggle{color:var(--site-muted)} .DarkSite .Nav--main-header-mobile .Nav--lang .Nav-toggle :is(.Globe,.Arrow-object) path{stroke:var(--site-accent)} /* German labels are the longest of the five languages. .Nav-list wraps by default and nothing kept the CTA label on one line, so "Über uns" dropped below "Plattform" - out of menu order - on every DE page. Keep the desktop row on one line and tighten the item spacing in the range where DE would otherwise overflow. */ @media(min-width:77.5625em){ .DarkSite .Navigation-desktop .Nav--main-header>.Nav-list{flex-wrap:nowrap} .DarkSite .Navigation-desktop .Nav--main-header>.Nav-list>.Nav-item>.Nav-link{white-space:nowrap} .DarkSite .Header .Nav--trial .Button{white-space:nowrap} } @media(min-width:77.5625em) and (max-width:87.5em){ .DarkSite .Navigation-desktop .Nav--main-header .Nav-item{margin-left:24px} .DarkSite .Header .Nav--lang{margin-left:16px} } /* The blog overview filter tabs and their mobile select keep the light theme's navy (#1f3460) against the dark background - roughly 1.35:1 - so the filters for the whole overview read as invisible. Only the DE and ES overviews carry them. */ .DarkSite .Tabs{border-bottom-color:var(--site-border)} .DarkSite .Tabs .Tab{color:var(--site-text)} .DarkSite .Tabs .Tab:is(.is-active,:active,:focus,:hover){color:var(--site-accent)} .DarkSite .Theme-tabs .Browse{color:var(--site-muted)} .DarkSite .Theme-tabs .Form-field--select{background-color:var(--site-panel);color:var(--site-text);border-color:var(--site-border)} .DarkSite .Theme-tabs .Form-field--select option{background-color:var(--site-panel);color:var(--site-text)} /* The search panel's back control is laid out in site-fixes.css; this is its colour. */ @media(max-width:70em){ .DarkSite .Nav--search .Nav-back{color:var(--site-text)} .DarkSite .Nav--search .Nav-back:is(:hover,:focus){color:var(--site-accent)} } /* .Block:not(.Block--new) deliberately leaves .Block--new heroes on the inline gradient the migration carried over, but .u-textNavy is forced to --site-text regardless. Where that gradient is white on white - 230 blocks across the site, every other pairing in the markup is navy - the copy is near-white on white and reads as a blank hero. Match the inline pair and give those blocks the dark ground the rest of the page already has; !important is what beats the inline custom properties. */ .DarkSite .Block--new[style*="--startColor: #ffffff"][style*="--endColor: #ffffff"]{--startColor:var(--site-bg)!important;--endColor:var(--site-bg)!important;background:var(--site-bg)} /* .Block--stories-and-quotes.Block--grey .Quote paints the card white at three class selectors, which outranks the .Quote panel colour above, while .Quote-body and .Quote-title are still forced to --site-text. The quote slider therefore rendered near-white on white. Restate the panel at matching weight. */ .DarkSite .Block--stories-and-quotes.Block--grey .Quote{background-color:var(--site-panel)} /* The desktop language switcher renders its panel as .Nav--lang .Nav-list, not .Nav-dropdown, so the .Nav--lang .Nav-dropdown rule above matched nothing and the panel kept the base stylesheet's white card with navy links. The product menus beside it are #142445, so the header had one white dropdown and one blue one. Paint the real element, and drop the light card's shadow that went with the white. */ .DarkSite .NavWrapper .Nav--lang .Nav-list{background:#142445;color:var(--site-text);border:1px solid var(--site-border);box-shadow:none} .DarkSite .NavWrapper .Nav--lang .Nav-link{color:var(--site-text)} .DarkSite .NavWrapper .Nav--lang .Nav-link:is(:hover,:focus){color:var(--site-accent)} .DarkSite .NavWrapper .Nav--lang .Nav-link.is-active{color:var(--site-accent);font-weight:700} /* The answer panel is painted #0d1d39 while the card behind it is --site-panel, so an open question showed a darker rectangle inset in a lighter card, ragged against the card's own padding. The question shares the card colour; the answer should too. */ .DarkSite .Block--faq .Faq-answer{background:transparent} /* .Block--columns .Columns .Column-title pins the card heading to the light theme's navy at three classes, which outranks the two-class heading colour above, so the "Additional resources" cards on privacy & security rendered #1f3460 on the #142445 panel - 1.16:1, an invisible line above every readable link. */ .DarkSite .Block--columns .Columns .Column-title{color:var(--site-text)} /* .Block--grey .Tile .Media-object is z-index:-1: the legacy tile ground is rgba(31,52,96,.1), so an image behind it still reads through. The dark theme repaints .Tile with an opaque panel colour, which buries the thumbnail entirely - until :hover adds a transform, whose stacking context lifts the -1 child back above the tile's own background. That is the "image only appears on hover" the related and case grids showed. Put the media back in the tile's own stacking order. */ .DarkSite .Block.Block--grey .Tile .Media-object{z-index:auto}