/* * Nubryx Production Pre-Launch Mode — visual styling for the global banner * and gate toast. Only renders when assets/js/prelaunch.js injects the * elements, which only happens when window.NUBRYX_PRE_LAUNCH is true. * Safe to delete this file (and its tag) once pre-launch mode is * retired for good. * * This file is linked in , so it's parsed and applied before * ever paints — that's what lets the two rules below apply from the very * first rendered frame, with no dependency on prelaunch.js having run yet. */ #nubryx-prelaunch-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; background: #0f2647; color: #f3f1ec; padding: 10px 20px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.4; position: relative; z-index: 20; /* Explicit box model + min-height keeps the banner's footprint stable (no CLS) even if a web-font swap (Inter loading in after a fallback font paints first) would otherwise change the wrapped text's height. */ box-sizing: border-box; min-height: 40px; } #nubryx-prelaunch-banner .nn-pl-badge { display: inline-block; background: #e0983f; color: #1a1206; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; white-space: nowrap; } #nubryx-prelaunch-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px); max-width: 420px; width: calc(100% - 32px); background: #0f2647; color: #f3f1ec; padding: 16px 20px; border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(15, 38, 71, 0.5); font-family: "Inter", sans-serif; font-size: 14px; line-height: 1.5; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } #nubryx-prelaunch-toast.nn-pl-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } #nubryx-prelaunch-toast button { background: none; border: none; color: #c9d3e2; font-size: 12px; font-weight: 700; cursor: pointer; margin-top: 10px; padding: 0; text-decoration: underline; } @media (max-width: 600px) { #nubryx-prelaunch-banner { font-size: 12px; padding: 10px 14px; /* The badge is more likely to wrap onto its own line at this width (flex-wrap + reduced padding), so the reserved floor is taller here to still cover that common two-line case without shifting. */ min-height: 64px; } } /* * Visually mark gated CTAs (data-prelaunch-gate, see prelaunch.js) as * inactive from first paint — before prelaunch.js has run, and even if it * never runs at all (blocked script, JS disabled). Reuses the same muted * grey already used elsewhere on the site for disabled form controls * (contact.html, shield.html), for visual consistency. The color rules use * !important because these elements already carry their own hover/color * utility classes (e.g. get-help-now.html's Tailwind `text-amber * hover:text-amberDark`) that must not be able to make the link look active * regardless of stylesheet load order. */ [data-prelaunch-gate] { color: #8a8f9b !important; cursor: not-allowed; } [data-prelaunch-gate]:hover { color: #8a8f9b !important; }