/* Plus Jakarta Sans is self-hosted in assets/css/fonts.css, which every page carrying this header links directly from its — including the four simulators whose body copy is Inter. Loading it from here through an @import would delay the request until this file has been fetched and parsed. */ /* * Focus ring for the form controls on every simulator (WCAG 2.4.7, 1.4.11). * * The inputs carry Tailwind's `focus:outline-none` and signal focus with a * border-colour change alone — a hue shift on a one-pixel edge. This restores a * real ring. `!important` is what it takes to beat a utility class from the * stylesheet the Tailwind CDN injects at runtime, after this file. * * The colour has to clear 3:1 against whatever sits behind it, and these pages * are not all the same: the dark app shells get the brand cyan (9.7:1 on the * slate the inputs sit on) and the light ones a deep teal (9.9:1 on white). */ :root { --simulator-focus-ring: #0b4a5c; } body.bg-navy-950, body.bg-slate-950 { --simulator-focus-ring: #22d3ee; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--simulator-focus-ring) !important; outline-offset: 2px !important; } .simulator-site-header { position: sticky; top: 0; z-index: 50; flex: 0 0 auto; border-bottom: 1px solid rgb(101 183 199 / 0.38) !important; background: #003366 !important; color: #ffffff; box-shadow: 0 8px 24px rgb(9 91 115 / 0.08) !important; backdrop-filter: blur(12px); } /* * The header row. * * The flexbox lives here rather than in `flex items-center justify-between` on * nine header elements, because two of the nine simulators are hand-written CSS * with no utility framework to supply those classes -- which is how they ended * up with a local `.header-container` whose own padding stacked on this * min-height and made those two headers visibly taller than the other seven. */ .simulator-site-header-inner { display: flex; width: 100%; max-width: 80rem; min-height: 5rem; margin: 0 auto; padding: 0 1rem; align-items: center; justify-content: space-between; } .simulator-brand-block { display: flex; min-width: 0; align-items: center; gap: 0.35rem; } .simulator-brand-logo { width: 2.75rem !important; height: 2.75rem !important; flex: 0 0 auto; /* * Both stylesheets a simulator can be built on -- the hand-written Tailwind * subset and the Play CDN's preflight -- reset every image to * `max-width: 100%`, and a max-width beats a width no matter how many * `!important`s the width carries. The brand block is a shrinkable flex item * with `min-width: 0`, so on a crowded header the block narrowed past 2.75rem * and took the logo down with it: the mark shrank toward nothing and read as * simply missing. `flex: 0 0 auto` was never enough on its own, because the * logo was not being shrunk as a flex item -- it was being clamped by its * parent's width. Opting out of that clamp keeps the mark at its declared * size and lets the brand wordmark beside it absorb the squeeze instead. */ max-width: none; padding: 0 !important; border: 4px solid rgb(255 255 255 / 0.18) !important; border-radius: 1.5rem !important; object-fit: cover; box-shadow: 0 14px 35px rgb(0 0 0 / 0.2) !important; transition: transform 220ms ease; } .simulator-brand-block:hover .simulator-brand-logo { transform: rotate(-2deg) scale(1.03); } .simulator-brand-copy { min-width: 0; } .simulator-product-copy { min-width: 0; margin-right: auto; margin-left: 1.25rem; padding-left: 1.25rem; border-left: 1px solid rgb(101 183 199 / 0.38); } .simulator-product-copy .simulator-title-row { margin-top: 0; } .simulator-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0.5rem; } /* * Label of an icon-only header tab. * * The Data Literacy header is the only one of the nine carrying a tab switcher * as well as a brand block, a title, a sound toggle and a home link, and the two * spelled-out tab labels were the widest thing in it that nothing else needed: * on a crowded row they pushed the brand block narrow enough that the logo went * with it. Dropping the labels to icons buys that room back without the header * growing a second line or a taller row. * * The words stay in the DOM rather than being deleted. They are what names each * button for a screen reader, and each button also carries a `title` so a * sighted visitor can hover an icon they do not recognise. */ .simulator-tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* * Wording beside a header action's icon. * * Each simulator hid this its own way: Tailwind's `hidden sm:inline` on one, * `hidden md:inline` on another, a local media query on a third page's own class * -- and one label that was never hidden at all, which is why the English * Day-to-Day header wrapped where the others did not. One class, one * breakpoint, so a sound toggle is the same width on all nine pages. */ .simulator-action-label { white-space: nowrap; } .simulator-brand-name { display: block; max-width: 6rem; color: #ffffff !important; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.57rem !important; font-weight: 800 !important; font-synthesis: none; font-kerning: normal; font-optical-sizing: auto; letter-spacing: 0.045em !important; line-height: 1.25 !important; text-transform: uppercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .simulator-brand-name::after { display: block; width: 2.5rem; height: 2px; margin-top: 0.35rem; border-radius: 9999px; background: linear-gradient(90deg, #e95d24, #65b7c7); content: ""; } .simulator-title-row { display: flex; min-width: 0; align-items: center; gap: 0.5rem; margin-top: 0.35rem; } .simulator-title { color: #ffffff !important; font-size: 0.95rem !important; font-weight: 800 !important; letter-spacing: -0.015em !important; line-height: 1.15 !important; } .simulator-subtitle { margin-top: 0.2rem; color: #b9dce4 !important; /* Size and weight live here, not on the pages. Three of the nine simulators used to say text-xs and one said text-sm, which is why the subtitles never lined up across simulators. */ font-size: 0.75rem !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.35 !important; } /* `.workspace-banner-actions button` appears alongside the header selectors throughout this section rather than being restyled separately: inside a private space assets/js/workspace-context.js moves these very buttons out of the hidden header and into the client strip, and a control that changes colour because it moved would read as a different control. The strip is the same dark navy family as the header, so the same treatment holds. */ .simulator-site-header button, .workspace-banner-actions button, .simulator-home-link { border-color: rgb(101 183 199 / 0.38) !important; background-color: #f1f5f9 !important; color: rgb(9 91 115 / 0.88) !important; box-shadow: 0 4px 12px rgb(9 91 115 / 0.08); } .simulator-site-header button:hover, .simulator-home-link:hover { background-color: rgb(101 183 199 / 0.2) !important; color: #003366 !important; } /* * The same hover, kept opaque inside a private space. * * The rule above fades the button to a 20% wash, which reads as a highlight on * the fixed navy of the public header. The strip behind these buttons is now the * client's own colour, and on a pale one that wash left the control all but * invisible at the moment somebody pointed at it. Opaque white keeps the * pressable shape on every colour a client can pick. */ .workspace-banner-actions button:hover { background-color: #ffffff !important; color: #003366 !important; } .simulator-site-header button:focus-visible, .simulator-home-link:focus-visible { outline: 2px solid #65b7c7; outline-offset: 2px; } /* Cyan on a cyan header is not a focus ring, so inside a space the ring is the ink the strip already picked for its own text. */ .workspace-banner-actions button:focus-visible { outline: 2px solid rgb(var(--workspace-brand-ink-rgb, 255 255 255)); outline-offset: 2px; } .simulator-home-link { display: inline-flex; min-height: 2.25rem; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.45rem 0.7rem; border: 1px solid; border-radius: 0.5rem; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.75rem; font-weight: 700; line-height: 1; text-decoration: none; transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; } .simulator-home-link:hover { transform: translateY(-1px); } .simulator-home-link svg { width: 1rem; height: 1rem; flex: 0 0 auto; } /* * Icon-only tab switcher (Data Literacy is the only header with one). * * Which tab is open has to be readable from the pill, because there is no longer * a word to tint: the two icons are the whole control. The generic * `.simulator-site-header button` rule above paints every header button the same * light grey with `!important`, which left both pills identical and the * `text-white` / `text-slate-400` pair in the markup with no effect at all -- * survivable while the labels were spelled out, not survivable now. So the open * tab is a filled white pill on the dark switcher track and the closed one is * bare, and the icons take their colour from the pill they sit in rather than * from the hard-coded cyan, which would have landed at about 1.9:1 on white. * * Driven off `aria-selected`, which switchMainTab() already keeps in step for * screen readers, so the visible state and the announced state cannot drift. */ .simulator-site-header [role="tablist"] button, .workspace-banner-actions [role="tablist"] button { background-color: transparent !important; color: #b9dce4 !important; box-shadow: none; } .simulator-site-header [role="tablist"] button:hover, .workspace-banner-actions [role="tablist"] button:hover { background-color: rgb(101 183 199 / 0.22) !important; color: #ffffff !important; } .simulator-site-header [role="tablist"] button[aria-selected="true"], .workspace-banner-actions [role="tablist"] button[aria-selected="true"] { background-color: #ffffff !important; color: #003366 !important; } /* * The same switcher, on a client's colour rather than on the fixed navy. * * The three rules above are written against a dark navy background and hard-code * a pale blue, a white and a navy to suit it. Inside a space the strip is the * company's own colour, so each of them is redirected at the ink that colour was * measured against: the closed tab is that ink held back, the open one is a * filled pill of it with the band colour showing through the icon. */ .workspace-banner-actions [role="tablist"] button { color: rgb(var(--workspace-brand-ink-rgb, 255 255 255) / 0.8) !important; } .workspace-banner-actions [role="tablist"] button:hover { background-color: rgb(var(--workspace-brand-ink-rgb, 255 255 255) / 0.22) !important; color: rgb(var(--workspace-brand-ink-rgb, 255 255 255)) !important; } .workspace-banner-actions [role="tablist"] button[aria-selected="true"] { background-color: rgb(var(--workspace-brand-ink-rgb, 255 255 255)) !important; color: var(--workspace-brand-bg, #04223f) !important; } .simulator-site-header [role="tablist"] button i, .workspace-banner-actions [role="tablist"] button i { color: inherit !important; } @media (min-width: 640px) { .simulator-site-header-inner { padding-right: 1.5rem; padding-left: 1.5rem; } .simulator-brand-block { gap: 0.8rem; } .simulator-brand-logo { width: 4rem !important; height: 4rem !important; } .simulator-brand-name { max-width: 13rem; font-size: 0.82rem !important; } .simulator-title { font-size: 1.05rem !important; } .simulator-header-actions { gap: 0.75rem; } } @media (max-width: 760px) { .simulator-site-header-inner { gap: 0.65rem; } .simulator-brand-block { gap: 0.55rem; } .simulator-brand-name, .simulator-subtitle { display: none !important; } .simulator-title-row { margin-top: 0; } .simulator-title { max-width: 10rem; font-size: 0.82rem !important; } } @media (max-width: 1100px) { .simulator-home-link span { display: none; } } @media (max-width: 900px) { .simulator-product-copy .simulator-subtitle { display: none !important; } .simulator-action-label { display: none; } } @media (max-width: 640px) { /* * A phone header is a logo and two or three icon-only controls, and none of * them needs 5rem of room. The header is sticky on every simulator, so each * pixel it holds is a pixel the game below never gets back -- which is why * this is a height reduction rather than only a padding one. */ .simulator-site-header-inner { min-height: 3.25rem; } .simulator-product-copy { display: none; } .simulator-home-link { min-width: 2.25rem; padding-right: 0.55rem; padding-left: 0.55rem; } } /* * The site navigation, borrowed whole. * * These pages link /assets/css/site-chrome.css for it, because the drawer, its * accordions and the button that opens it are the same component every other * page on the site renders, and a second copy of a hundred lines of drawer * styling is how two copies of one component stop looking alike. Nothing else * in that file touches anything here -- its rules are scoped to `.site-*`, * `.dejourney-brand*` and `.lang-*`, none of which this header uses -- so it * costs these pages one small stylesheet and the two overrides below. * * Both exist because site-chrome.css hides the toggle and the drawer above * 1180px with `!important`: up there the desktop bar takes over. This header has * no bar at any width -- there is no room for one beside a brand block, a * simulator title and the app's own controls -- so the drawer is the whole * navigation on a 27-inch monitor as much as on a phone, and both have to * survive the breakpoint. The drawer override names `:not([hidden])` rather * than `display: block` so that the attribute the script toggles still closes * it; an unconditional `!important` here would have pinned it open. */ @media (min-width: 1180px) { .simulator-site-header .site-nav__toggle { display: inline-flex !important; } .simulator-site-header .site-drawer:not([hidden]) { display: block !important; } } /* Cross-language and cross-simulator navigation appended to every simulator page. */ .simulator-locale-nav { border-top: 1px solid rgba(148, 163, 184, 0.25); background: rgba(15, 23, 42, 0.92); color: #cbd5f5; font-size: 0.8125rem; } .simulator-locale-nav-inner { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: flex-start; justify-content: space-between; max-width: 80rem; margin: 0 auto; padding: 1rem 1.25rem; } .simulator-locale-nav span { display: block; margin-bottom: 0.4rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; } .simulator-locale-nav ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; padding: 0; list-style: none; } .simulator-locale-nav a { color: #e2e8f0; text-decoration: none; border-bottom: 1px solid transparent; } .simulator-locale-nav a:hover, .simulator-locale-nav a:focus-visible { color: #22d3ee; border-bottom-color: currentColor; } .simulator-locale-nav-languages a[aria-current="page"] { color: #22d3ee; font-weight: 700; } /* * Bypass block (WCAG 2.4.1). Every simulator opens with a header of brand, * title, sound toggle, tab switcher and home link before the simulation itself, * and a keyboard visitor had to tab through all of it on every page. This is * off-canvas until it takes focus, so it costs the visual design nothing. */ .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100; transform: translateY(-200%); padding: 0.75rem 1.25rem; border-radius: 0.5rem; background: #ffffff; color: #003366; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.8rem; font-weight: 700; text-decoration: none; } .skip-link:focus { transform: none; outline: 3px solid #65b7c7; outline-offset: 2px; } /* * Breadcrumb. Each simulator already declared a BreadcrumbList in its JSON-LD, * so search engines were shown a trail the visitor never was — and a simulator * opened from a search result is a page with no other route back into the site * apart from the single home icon. Colours sit on the strip's own background, * which is a shade of the header rather than the varying page backgrounds. */ .simulator-breadcrumb { flex: 0 0 auto; border-bottom: 1px solid rgb(101 183 199 / 0.28); background: #04223f; } .simulator-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; max-width: 80rem; margin: 0 auto; padding: 0.55rem 1rem; list-style: none; font-family: "Plus Jakarta Sans", sans-serif; font-size: 0.72rem; font-weight: 600; } .simulator-breadcrumb li { display: flex; align-items: center; gap: 0.5rem; } .simulator-breadcrumb li + li::before { color: #65b7c7; content: "/"; } .simulator-breadcrumb a { border-bottom: 1px solid transparent; color: #cfe9f1; text-decoration: none; } .simulator-breadcrumb a:hover, .simulator-breadcrumb a:focus-visible { border-bottom-color: currentColor; color: #ffffff; } .simulator-breadcrumb a:focus-visible { outline: 2px solid #65b7c7; outline-offset: 2px; } .simulator-breadcrumb [aria-current="page"] { color: #ffffff; } @media (min-width: 640px) { .simulator-breadcrumb ol { padding-right: 1.5rem; padding-left: 1.5rem; } } /* * Deferred site footer. * * Every simulator lays its page out as a full-height flex column, so the * cross-language and cross-simulator footer nav sat pinned to the bottom of the * viewport from the moment the page opened -- it looked fixed, and on a phone it * spent a strip of a small screen on navigation nobody is looking for while they * are mid-game. It now stays out of the way until the visitor asks to move down * the page -- a scroll, a swipe, a wheel turn or a Tab press -- which is the * point at which they are plausibly looking for a way onward, and it leaves * again a few seconds after they stop, which is the point at which the screen * space is worth more to the game than to the navigation. * * The collapsed class is applied by assets/js/simulator-footer-reveal.js rather * than sitting in the markup on purpose: with no JavaScript, and for anything * reading the page without running it, the footer is simply present. Hiding * navigation is only safe when the thing that hides it can also be relied on to * bring it back. */ .simulator-site-footer, .simulator-locale-nav { transition: opacity 220ms ease; } .simulator-site-footer--collapsed, .simulator-locale-nav--collapsed { display: none; } /* * One simulator scrolls as a document instead of filling the viewport: the * ownership exercise runs ten scenarios and an explainer down a single page, * where the other two keep the whole game inside one screen and scroll a pane * within it. On those two the revealed footer lands on the bottom edge of the * viewport and stays there; on a document-length page the same markup put it at * the very end of the page instead, so it was only ever seen by scrolling past * everything else. * * Pinning it to the bottom edge gives it the behaviour it has everywhere else: * hidden until the visitor asks to move down the page, a strip along the bottom * of the screen while they are moving, and gone again once they stop. * * position:fixed rather than sticky, for two reasons. Sticky only holds if * every one of the footer's ancestors cooperates -- the containing block has to * be the full-height body, and nothing above it may quietly become a scrollport * -- and it was reported as still landing at the end of the page. Fixed depends * on nothing but the viewport. It also takes the footer out of the layout for * good, so appearing and disappearing moves no content at all on that page: no * jump under the reader, and no scroll position for the browser to clamp, which * is the one thing the reveal would otherwise mistake for a request to come * back. * * The z-index clears the page content it now sits over while staying below the * 50 the sticky site header and the in-page modals use. */ .simulator-site-footer--pinned { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; } /* Laid out, but transparent. The same class runs the fade in both directions: * the footer is laid out at opacity 0 and then faded up on the way in, and * faded down before it is taken out of the layout on the way out, so the page * never jumps while the footer is still visible. The duration above is the one * FADE_MS in assets/js/simulator-footer-reveal.js waits for. */ .simulator-site-footer--fading, .simulator-locale-nav--fading { opacity: 0; } @media (prefers-reduced-motion: reduce) { .simulator-site-footer, .simulator-locale-nav { transition: none; } /* No fade either way: the footer appears and disappears outright, which is what someone who asked for less motion is asking for. */ .simulator-site-footer--fading, .simulator-locale-nav--fading { opacity: 1; } } /* --------------------------------------------------------------------------- * Inside a private space, the public chrome comes off. * * A participant who licensed a space arrives from their own hub -- their logo, * their colour, their company's name -- and the simulator underneath used to * reintroduce the Data Governance Journey header, the breadcrumb back to our * marketing site, the SEO explainer and the site footer. The exercise read as a * visit to somebody else's product with a client strip bolted on top. * * So the public chrome is hidden for a seated browser and only for a seated * browser. Hidden rather than removed from the markup: the same nine files serve * every public visitor, where that chrome is the navigation and the only thing a * crawler can read (see the explainer's own comment), and this feature must not * cost them either. * * Two attributes, because there are two moments to cover: * * * `data-workspace` is set by assets/js/workspace-context.js once the server * has confirmed the seat. That is the authoritative one, and it arrives * after a round trip. * * `data-workspace-pending` is set synchronously in each page's from * the `?space=` link the hub generates or the non-secret `dgj_space_hint` * cookie, and removed again the moment the server says there is no seat. It * exists so the DG logo does not paint for a third of a second before being * taken away -- a flash of somebody else's brand is exactly the thing this * feature is meant to remove. * * These rules live in this file rather than in workspace.css because this one is * already in the of all nine pages. workspace.css is fetched only after * the seat is confirmed, which would be too late to prevent the flash. * * `!important` for the same reason the rules above it use it: the Tailwind CDN * injects its utilities after this file on several of these pages, and a * `display:flex` utility on a header would otherwise win. */ /* Class only, no tag names: the same block is a
on seven of these pages and the markup is hand-written per page, so a selector that also depended on the element would be one rewrite away from silently not hiding anything. */ html[data-workspace] .simulator-site-header, html[data-workspace-pending] .simulator-site-header, html[data-workspace] .simulator-breadcrumb, html[data-workspace-pending] .simulator-breadcrumb, html[data-workspace] .simulator-site-footer, html[data-workspace-pending] .simulator-site-footer, html[data-workspace] .simulator-locale-nav, html[data-workspace-pending] .simulator-locale-nav, html[data-workspace] .simulator-explainer, html[data-workspace-pending] .simulator-explainer { display: none !important; } /* The strip is the whole header now, so it takes over the sticky slot the public header had. Same z-index for the same reason: these pages open modals at z-50 and the strip must not sit above one. */ html[data-workspace] .workspace-banner { position: sticky; top: 0; z-index: 50; }