/* Reblock — shared navbar + footer styles. Loaded via in every page's so the static nav/footer markup is styled on first paint (previously injected by partials.js, which caused a flash of unstyled nav before the script ran). partials.js only swaps the markup / sets the active link now. */ /* Mount slots must span full width themselves. On pages whose is a flex container with align-items != stretch (the static pages), a plain block child shrink-wraps to its content instead of filling the page — which then makes the footer's own width:100% resolve against that shrunk parent instead of the real page width. Pin it explicitly so nav and footer render identically regardless of the host page's body CSS. */ [data-mount] { width: 100%; } /* Spacer below the fixed nav so page content doesn't slide under it. */ .rb-nav-spacer { width: 100%; height: 88px; } /* Nav */ .rb-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px 0; pointer-events: none; } .rb-nav-inner { width: min(1200px, calc(100% - 32px)); display: flex; align-items: center; justify-content: center; padding: 14px 22px; position: relative; border-radius: 999px; background: rgba(14,11,20,0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 12px 36px rgba(0,0,0,0.4); pointer-events: auto; } .rb-nav-logo { position: absolute; left: 22px; display: inline-flex; align-items: baseline; gap: 0; font-family: "Outfit","Syne",system-ui,sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.04em; color: #f2f0f7; line-height: 1; text-decoration: none; } .rb-nav-logo .disc { display: inline-block; width: 18.72px; height: 18.72px; border-radius: 50%; background: #9b59ff; transform: translateY(2.4px); box-shadow: inset 0 0 0 2.4px #f2f0f7; position: relative; } .rb-nav-logo .disc::after { content: ''; position: absolute; left: 50%; top: 24%; transform: translateX(-50%); width: 4.1px; height: 4.1px; border: 1.44px solid #f2f0f7; border-bottom: none; border-top-left-radius: 999px; border-top-right-radius: 999px; } .rb-nav-links { display: flex; align-items: center; gap: 32px; } .rb-nav-links a { font-family: "Outfit","Space Grotesk",sans-serif; font-size: 14px; color: #8b8499; font-weight: 500; transition: color 0.2s; text-decoration: none; } .rb-nav-links a:hover { color: #f2f0f7; } .rb-nav-links a.active { color: #f2f0f7; } @media (max-width: 960px) { .rb-nav-inner { justify-content: space-between; } .rb-nav-logo { position: static; } .rb-nav-links { gap: 20px; } .rb-nav-links a { font-size: 13px; } } /* Mobile: keep all 3 links (Home/Pricing/About) always visible, with a slightly wider bar and more breathing room between each link. */ @media (max-width: 600px) { .rb-nav-inner { width: calc(100% - 20px); padding: 10px 14px; } .rb-nav-logo { font-size: 17px; } .rb-nav-logo .disc { width: 13.3px; height: 13.3px; transform: translateY(1.7px); box-shadow: inset 0 0 0 1.7px #f2f0f7; } .rb-nav-logo .disc::after { width: 2.9px; height: 2.9px; border-width: 1px; } .rb-nav-links { gap: 18px; } .rb-nav-links a { font-size: 12px; padding: 4px 0; } .rb-nav-spacer { height: 78px; } } @media (max-width: 380px) { .rb-nav-inner { padding: 9px 12px; } .rb-nav-logo { font-size: 15px; } .rb-nav-links { gap: 12px; } .rb-nav-links a { font-size: 11px; } } /* Footer */ .rb-footer { width: 100%; max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.10); padding: 28px 24px 36px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; box-sizing: border-box; } .rb-footer-logo { display: inline-flex; align-items: baseline; gap: 0; font-family: "Outfit","Syne",system-ui,sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.04em; color: #f2f0f7; line-height: 1; text-decoration: none; } .rb-footer-logo .disc { display: inline-block; width: 15.6px; height: 15.6px; border-radius: 50%; background: #9b59ff; transform: translateY(2px); box-shadow: inset 0 0 0 2px #f2f0f7; position: relative; } .rb-footer-logo .disc::after { content: ''; position: absolute; left: 50%; top: 24%; transform: translateX(-50%); width: 3.4px; height: 3.4px; border: 1.2px solid #f2f0f7; border-bottom: none; border-top-left-radius: 999px; border-top-right-radius: 999px; } .rb-footer-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* Footer text: ≥4.5:1 contrast on #0e0b14 (WCAG AA / Lighthouse). */ .rb-footer-right a { font-family: "Outfit","Space Grotesk",sans-serif; font-size: 13px; color: #8b8499; transition: color 0.2s; text-decoration: none; } .rb-footer-right a:hover { color: #c6c0d2; } .rb-footer-copy { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #8b8499; letter-spacing: 0.06em; } @media (max-width: 600px) { .rb-footer { padding: 20px 18px 26px; gap: 12px; } .rb-footer-right { gap: 14px; } .rb-footer-right a, .rb-footer-copy { font-size: 12px; } .rb-footer-secondary { display: none; } }