/* ========================================================================== GeoScored "Mission Control" rebrand — shared design system -------------------------------------------------------------------------- Ported from the prototype in scratch/try-to-reskin-this-website-in/. Every rule is scoped under `.rb-page` (set on by rebrand_base.html) so legacy, not-yet-migrated pages are completely unaffected. ========================================================================== */ /* ---- Design tokens ------------------------------------------------------ */ .rb-page { --void: #05070d; --hull: #0b1220; --panel: #101927; --panel-2: #151f2f; --bone: #f0eadf; --paper: #c8d4e8; --edge: #31445c; --edge-hot: #70f4ff; --plasma: #ffb93f; --ion: #58e9ff; --matrix: #39ff9b; --warning: #f03a2f; --blood: #d91616; --text: #f2eee5; --muted: #9d978c; --shadow: rgba(0, 0, 0, 0.5); /* Icon system (geo-icon sprite) */ --icon-primary: #58e9ff; --icon-secondary: #ffb93f; --icon-tertiary: #39ff9b; --icon-alert: #d91616; --icon-ink: #f7fbff; color-scheme: dark; display: flex; flex-direction: column; min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: linear-gradient(118deg, rgba(88, 233, 255, 0.1), transparent 31%), linear-gradient(242deg, rgba(255, 185, 63, 0.08), transparent 30%), linear-gradient(180deg, #05070d 0%, #0b1018 48%, #05070d 100%); } .rb-page * { box-sizing: border-box; } /* Background overlays: faint grid + scanline noise (fixed, behind content) */ .rb-page::before, .rb-page::after { position: fixed; inset: 0; z-index: -2; content: ""; pointer-events: none; } .rb-page::before { background: linear-gradient(rgba(112, 244, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 244, 255, 0.05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 76%); mask-image: linear-gradient(to bottom, black 0%, transparent 76%); } .rb-page::after { z-index: -1; opacity: 0.55; background: radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(0, 0, 0, 0.55) 100%), repeating-linear-gradient(0deg, transparent 0, transparent 4px, rgba(255, 255, 255, 0.025) 5px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 7px); } /* ---- DaisyUI / Tailwind collision neutralizer -------------------------- tailwind.css ships DaisyUI components (.hero, .footer, .card, .ring ...) inside @layer daisyui. Unlayered CSS always beats layered CSS, so our .rb-page rules win for properties we declare — but DaisyUI's *child* rules (.hero > *, .footer > *) still apply where we declare nothing. DaisyUI's `.hero > * { grid-column-start:1; grid-row-start:1 }` stacks both hero columns into one cell. Re-assert prototype behavior here. */ .rb-page .hero { place-items: stretch; align-items: stretch; justify-items: stretch; } .rb-page .hero > * { grid-column-start: auto; grid-row-start: auto; } .rb-page .footer { display: block; width: auto; } .rb-page .footer > * { display: block; place-items: stretch; } .rb-page .ring { box-shadow: none; } .rb-page > :not(.asteroid-field) { position: relative; z-index: 1; } .rb-page a { color: inherit; text-decoration: none; } .rb-page button, .rb-page input { font: inherit; } /* ---- Asteroid field (physics-driven by asteroids.js) -------------------- */ .rb-page .asteroid-field { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; } .rb-page .asteroid { position: absolute; left: 0; top: 0; width: var(--size); aspect-ratio: 1; opacity: 0; contain: layout paint style; transform: translate3d(var(--from-x), var(--from-y), 0); will-change: transform; animation: rbAsteroidDrift var(--duration) linear infinite; animation-delay: var(--delay); } .rb-page .asteroid svg { display: block; width: 100%; height: 100%; overflow: visible; will-change: transform; animation: rbAsteroidSpin var(--spin) linear infinite; animation-direction: var(--spin-direction, normal); } .rb-page .asteroid path { fill: none; stroke: rgba(216, 226, 240, 0.58); stroke-linejoin: round; stroke-linecap: round; stroke-width: 2; vector-effect: non-scaling-stroke; } /* ---- Layout shell ------------------------------------------------------- */ .rb-page .site-shell { width: min(1220px, calc(100% - 48px)); margin: 0 auto; } .rb-page main.site-shell { display: block; flex: 1; } /* ---- Top navigation ----------------------------------------------------- */ .rb-page .nav { display: flex; align-items: center; justify-content: space-between; min-height: 76px; border-bottom: 1px solid rgba(112, 244, 255, 0.16); } .rb-page .brand { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 900; letter-spacing: 0; } .rb-page .brand-mark { position: relative; width: 38px; aspect-ratio: 1; overflow: hidden; border: 2px solid rgba(112, 244, 255, 0.42); border-radius: 50%; background: radial-gradient(circle at 50% 50%, #07090f 0 47%, rgba(88, 233, 255, 0.08) 48% 100%); box-shadow: 0 0 24px rgba(88, 233, 255, 0.28), 0 0 18px rgba(217, 22, 22, 0.22); } .rb-page .brand-mark::before { position: absolute; inset: -2px; content: ""; border-radius: 50%; background: conic-gradient( from 18deg, transparent 0 8%, var(--ion) 8% 24%, transparent 24% 43%, var(--plasma) 43% 52%, transparent 52% 64%, rgba(88, 233, 255, 0.58) 64% 69%, transparent 69% 82%, var(--plasma) 82% 88%, transparent 88% 100% ); animation: rbBrandOrbit 18s linear infinite; } .rb-page .brand-mark::after { position: absolute; z-index: 1; inset: 11px; content: ""; border: 2px solid var(--blood); border-left-color: transparent; border-radius: 50%; } .rb-page .brand-eye { position: absolute; left: 50%; top: 50%; z-index: 2; width: 20px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--blood) 0 48%, #330000 50% 72%, transparent 73%); box-shadow: 0 0 16px rgba(217, 22, 22, 0.42); transform: translate(-50%, -50%); } .rb-page .brand-eye::before { position: absolute; left: 50%; top: 50%; width: 6px; aspect-ratio: 1; content: ""; border-radius: 50%; background: #ffeded; box-shadow: 0 0 8px rgba(255, 237, 237, 0.78); transform: translate(-50%, -50%); animation: rbBrandEyeLook 7.5s ease-in-out infinite; } .rb-page .brand strong { color: #f9fbff; } .rb-page .brand span { color: var(--ion); text-shadow: 0 0 18px rgba(88, 233, 255, 0.55); } .rb-page .nav-actions { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 0.87rem; font-weight: 700; } .rb-page .nav-actions a.nav-link-strong { color: var(--text); } .rb-page .nav-actions a:hover { color: var(--ion); } .rb-page .nav-divider { width: 1px; height: 24px; background: rgba(112, 244, 255, 0.24); } .rb-page .sign-in { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(255, 185, 63, 0.85); border-radius: 4px; color: #090909; background: linear-gradient(180deg, #ffd363, var(--plasma)); box-shadow: 0 0 24px rgba(255, 185, 63, 0.24); cursor: pointer; } .rb-page .sign-in:hover { filter: brightness(1.05); color: #090909; } .rb-page .nav-geo-icon { --icon-primary: #06343c; --icon-secondary: #805300; --icon-alert: #d91616; --icon-ink: #fff6ec; width: 19px; height: 19px; overflow: visible; flex: 0 0 auto; } /* Nav dropdown (org switcher / user menu) — extends prototype style */ .rb-page .nav-menu { position: relative; } .rb-page .nav-menu > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--muted); } .rb-page .nav-menu > summary::-webkit-details-marker { display: none; } .rb-page .nav-menu > summary:hover { color: var(--ion); } .rb-page .nav-dropdown { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 200px; padding: 6px; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 6px; background: rgba(8, 13, 22, 0.97); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5); } .rb-page .nav-dropdown a, .rb-page .nav-dropdown button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 4px; color: var(--paper); text-align: left; background: transparent; font-size: 0.85rem; cursor: pointer; } .rb-page .nav-dropdown a:hover, .rb-page .nav-dropdown button:hover { background: rgba(88, 233, 255, 0.1); color: var(--text); } .rb-page .nav-dropdown .is-active { color: var(--ion); font-weight: 800; } .rb-page .nav-dropdown .danger:hover { background: rgba(240, 58, 47, 0.14); color: #ff6a5f; } /* Mobile nav toggle + drawer */ .rb-page .nav-toggle { display: none; width: 40px; height: 36px; align-items: center; justify-content: center; border: 1px solid rgba(112, 244, 255, 0.28); border-radius: 4px; color: var(--ion); background: rgba(8, 13, 22, 0.7); cursor: pointer; } .rb-page #mobile-nav { display: none; gap: 4px; padding: 14px 0 18px; border-bottom: 1px solid rgba(112, 244, 255, 0.16); } .rb-page #mobile-nav.is-open { display: grid; } .rb-page #mobile-nav a, .rb-page #mobile-nav button { padding: 8px 4px; border: 0; color: var(--paper); text-align: left; background: transparent; font-size: 0.95rem; font-weight: 600; cursor: pointer; } .rb-page #mobile-nav a:hover, .rb-page #mobile-nav button:hover { color: var(--ion); } .rb-page #mobile-nav .mobile-divider { height: 1px; margin: 6px 0; background: rgba(112, 244, 255, 0.16); } .rb-page #mobile-nav .mobile-label { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } /* ---- Buttons / inputs (shared primitives) ------------------------------ */ .rb-page .primary-action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; margin-top: 12px; border: 1px solid rgba(255, 185, 63, 0.95); border-radius: 4px; color: #060810; background: linear-gradient(180deg, #ffd466, #ff9f2d); font-weight: 950; cursor: pointer; box-shadow: 0 0 24px rgba(255, 185, 63, 0.2); } .rb-page .primary-action:hover { filter: brightness(1.05); color: #060810; } .rb-page .primary-action:disabled { filter: grayscale(0.4) brightness(0.85); cursor: progress; } .rb-page .ghost-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px; border: 1px solid rgba(112, 244, 255, 0.42); border-radius: 4px; color: var(--text); background: rgba(8, 13, 22, 0.6); font-weight: 800; cursor: pointer; } .rb-page .ghost-action:hover { border-color: var(--ion); color: var(--ion); } .rb-page label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 0.74rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; } .rb-page .url-input, .rb-page input[type="url"].url-input, .rb-page input[type="text"].url-input, .rb-page input[type="email"].url-input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid rgba(154, 174, 199, 0.42); border-radius: 4px; color: var(--text); background: #070707; outline: 0; } .rb-page .url-input:focus { border-color: var(--ion); box-shadow: 0 0 0 3px rgba(88, 233, 255, 0.16); } /* ---- Re-skin the live scan_form partial (DaisyUI markup, untouched) ---- scan_form.html emits .card/.input/.btn DaisyUI markup. We do not change its logic; we restyle whatever it renders inside the .scan-card shell. */ .rb-page .scan-card-inner .card { margin: 0; padding: 0; border: 0; border-radius: 0; max-width: none; min-width: 0; background: transparent; box-shadow: none; color: var(--text); } .rb-page .scan-card-inner label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 0.74rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; } .rb-page .scan-card-inner input[type="text"], .rb-page .scan-card-inner input[type="url"], .rb-page .scan-card-inner input[type="email"], .rb-page .scan-card-inner .input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid rgba(154, 174, 199, 0.42); border-radius: 4px; color: var(--text); background: #070707; outline: 0; font-size: 1rem; } .rb-page .scan-card-inner input:focus, .rb-page .scan-card-inner .input:focus { border-color: var(--ion); box-shadow: 0 0 0 3px rgba(88, 233, 255, 0.16); } .rb-page .scan-card-inner button[type="submit"], .rb-page .scan-card-inner .btn.bg-brand-accent { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 12px; border: 1px solid rgba(255, 185, 63, 0.95); border-radius: 4px; color: #060810; background: linear-gradient(180deg, #ffd466, #ff9f2d); font-weight: 950; cursor: pointer; box-shadow: 0 0 24px rgba(255, 185, 63, 0.2); text-transform: none; letter-spacing: 0; } .rb-page .scan-card-inner button[type="submit"]:hover { filter: brightness(1.05); } .rb-page .scan-card-inner button[type="submit"]:disabled, .rb-page .scan-card-inner button[aria-disabled="true"] { filter: grayscale(0.4) brightness(0.85); cursor: progress; } /* Help text, fine print, usage counters */ .rb-page .scan-card-inner .text-brand-muted, .rb-page .scan-card-inner .text-base-content\/50, .rb-page .scan-card-inner small, .rb-page .scan-card-inner p { color: var(--muted); } .rb-page .scan-card-inner a { color: var(--ion); } .rb-page .scan-card-inner a:hover { text-decoration: underline; } /* Tier toggle pills (authenticated) */ .rb-page .scan-card-inner .bg-base-200 { background: rgba(8, 13, 22, 0.7); border: 1px solid rgba(112, 244, 255, 0.16); } .rb-page .scan-card-inner [class*="tier-toggle-btn"] { color: var(--muted); } .rb-page .scan-card-inner [class*="tier-toggle-btn"].bg-brand-primary, .rb-page .scan-card-inner [class*="tier-toggle-btn"][aria-pressed="true"] { background: linear-gradient(180deg, #ffd466, #ff9f2d); color: #060810; } /* Inline confirmation strip / blocked partials keep readable on dark */ .rb-page .scan-card-inner .bg-base-200, .rb-page .scan-card-inner .bg-base-100 { color: var(--text); } .rb-page .fine-print { margin: 18px 0 0; color: var(--muted); text-align: center; font-size: 0.84rem; } /* ---- Icon system (geo-icon sprite, see components/rebrand_icons.html) -- */ .rb-page .geo-icon { width: 22px; height: 22px; overflow: visible; color: var(--icon-primary); filter: drop-shadow(0 0 7px rgba(88, 233, 255, 0.18)); flex: 0 0 auto; } .rb-page .geo-icon.is-large { width: 30px; height: 30px; } .rb-page .geo-icon.is-small { width: 18px; height: 18px; } .rb-page .geo-icon .glow { filter: drop-shadow(0 0 6px currentColor); } /* The sign-in button sits on a bright plasma fill — recolor the icon ink */ .rb-page .sign-in .geo-icon { --icon-primary: #06343c; --icon-secondary: #805300; --icon-tertiary: #0a5c3a; --icon-alert: #d91616; --icon-ink: #fff6ec; filter: none; } /* ---- Hero --------------------------------------------------------------- */ .rb-page .hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr); gap: 42px; min-height: 520px; margin-top: 38px; padding: 36px 48px 34px; overflow: hidden; border: 1px solid rgba(112, 244, 255, 0.24); border-radius: 8px; background: linear-gradient(90deg, rgba(88, 233, 255, 0.1) 0 2px, transparent 2px), linear-gradient(180deg, rgba(88, 233, 255, 0.08), transparent 28%), linear-gradient(135deg, rgba(16, 25, 39, 0.96), rgba(8, 11, 18, 0.98)), repeating-linear-gradient(90deg, rgba(112, 244, 255, 0.045) 0 1px, transparent 1px 120px); box-shadow: 0 36px 90px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(231, 224, 210, 0.045); } .rb-page .hero::before { position: absolute; inset: 18px; content: ""; border: 1px solid rgba(112, 244, 255, 0.18); border-radius: 6px; clip-path: polygon(0 0, 26% 0, 26% 1px, 74% 1px, 74% 0, 100% 0, 100% 100%, 78% 100%, 78% calc(100% - 1px), 22% calc(100% - 1px), 22% 100%, 0 100%); pointer-events: none; } .rb-page .hero-copy, .rb-page .hero-stage { position: relative; z-index: 1; } .rb-page .hero-stage { align-self: center; min-width: 0; } .rb-page .kicker { display: inline-grid; grid-template-columns: 9px auto; align-items: center; gap: 10px; margin: 6px 0 24px; color: var(--ion); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; } .rb-page .kicker::before { width: 9px; aspect-ratio: 1; content: ""; background: var(--blood); box-shadow: 0 0 16px var(--blood); } .rb-page h1 { max-width: 700px; margin: 0; font-size: 4.1rem; line-height: 1; letter-spacing: 0; } .rb-page .headline-accent { display: block; color: transparent; -webkit-text-stroke: 1px rgba(112, 244, 255, 0.9); text-shadow: 0 0 18px rgba(88, 233, 255, 0.18); } .rb-page .subcopy { max-width: 620px; margin: 18px 0 24px; color: #c2d0e2; font-size: 1.12rem; font-weight: 650; line-height: 1.55; } .rb-page .status-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 600px; margin-bottom: 24px; } .rb-page .status-chip { min-height: 76px; padding: 14px; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 6px; background: linear-gradient(180deg, rgba(231, 224, 210, 0.05), transparent), rgba(8, 8, 8, 0.82); } .rb-page .status-chip span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } .rb-page .status-chip strong { display: block; margin-top: 8px; color: var(--text); font-size: 1.2rem; letter-spacing: 0; } /* ---- Scan card (wraps the live scan_form partial) ---------------------- */ .rb-page .scan-card { position: relative; isolation: isolate; overflow: hidden; width: min(512px, 100%); padding: 8px; border: 1px solid rgba(255, 185, 63, 0.58); border-radius: 8px; background: linear-gradient(90deg, var(--plasma), var(--blood), var(--ion)) top / 100% 3px no-repeat, linear-gradient(90deg, rgba(255, 185, 63, 0.13), rgba(255, 185, 63, 0.036) 36%, transparent 64%), radial-gradient(ellipse at 0 50%, rgba(255, 185, 63, 0.14), transparent 56%), repeating-linear-gradient(90deg, rgba(255, 185, 63, 0.021) 0 1px, transparent 1px 28px), rgba(8, 9, 11, 0.94); box-shadow: 0 20px 70px rgba(0, 0, 0, 0.4), 0 0 42px rgba(255, 185, 63, 0.16), 0 0 30px rgba(88, 233, 255, 0.05); } .rb-page .scan-card::before, .rb-page .scan-card::after { position: absolute; content: ""; pointer-events: none; } .rb-page .scan-card::before { right: -58px; bottom: -72px; z-index: 0; width: 235px; aspect-ratio: 1; border: 1px solid rgba(255, 185, 63, 0.14); border-radius: 50%; background: linear-gradient(90deg, transparent 49.5%, rgba(255, 185, 63, 0.096) 50%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(255, 185, 63, 0.096) 50%, transparent 50.5%), radial-gradient(circle, transparent 0 31%, rgba(255, 185, 63, 0.08) 32% 33%, transparent 34%), radial-gradient(circle, transparent 0 52%, rgba(88, 233, 255, 0.1) 53% 54%, transparent 55%), conic-gradient(from 18deg, rgba(255, 185, 63, 0.2) 0 14%, transparent 14% 100%); filter: drop-shadow(0 0 18px rgba(255, 185, 63, 0.11)); animation: rbCtaRadarSweep 28s linear infinite; } .rb-page .scan-card::after { inset: 8px; z-index: 0; border-radius: 5px; background: linear-gradient(90deg, rgba(255, 185, 63, 0.11), transparent 44%), radial-gradient(ellipse at 0 58%, rgba(255, 185, 63, 0.16), transparent 54%), radial-gradient(ellipse at 80% 100%, rgba(255, 185, 63, 0.08), transparent 46%); opacity: 0.72; } .rb-page .scan-card-inner { position: relative; z-index: 1; overflow: hidden; padding: 28px 24px 24px; border: 1px solid rgba(112, 244, 255, 0.16); border-radius: 5px; background: linear-gradient(90deg, rgba(255, 185, 63, 0.1), rgba(255, 185, 63, 0.036) 42%, transparent 70%), radial-gradient(ellipse at 0 48%, rgba(255, 185, 63, 0.14), transparent 58%), radial-gradient(circle at 88% 78%, rgba(255, 185, 63, 0.088), transparent 30%), repeating-linear-gradient(90deg, rgba(255, 185, 63, 0.019) 0 1px, transparent 1px 26px), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent), rgba(5, 5, 5, 0.74); box-shadow: inset 20px 0 42px rgba(255, 185, 63, 0.064), inset 0 0 26px rgba(255, 185, 63, 0.032); } .rb-page .scan-card-inner > * { position: relative; z-index: 1; } /* ---- Section title ------------------------------------------------------ */ .rb-page .section-title { position: relative; margin: 42px 0 26px; color: #f7fbff; text-align: center; font-size: 1.6rem; letter-spacing: 0; } .rb-page .section-title::after { display: block; width: min(240px, 62vw); height: 1px; margin: 14px auto 0; content: ""; background: linear-gradient(90deg, transparent, rgba(112, 244, 255, 0.56), transparent); } /* ---- Intel grid (what you'll find out) --------------------------------- */ .rb-page .intel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; } .rb-page .intel-card { position: relative; min-height: 248px; overflow: hidden; padding: 22px; border: 1px solid rgba(112, 244, 255, 0.18); border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 54%), repeating-linear-gradient(90deg, rgba(88, 233, 255, 0.025) 0 1px, transparent 1px 32px), rgba(10, 16, 25, 0.88); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); } .rb-page .intel-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: var(--card-accent); box-shadow: 0 0 22px var(--card-accent); } .rb-page .intel-card::after { position: absolute; right: 12px; bottom: 12px; width: 110px; aspect-ratio: 1; content: ""; border: 1px solid rgba(112, 244, 255, 0.11); border-radius: 50%; background: radial-gradient(circle, transparent 0 44%, rgba(112, 244, 255, 0.08) 45% 48%, transparent 49%), conic-gradient(from 20deg, transparent 0 58%, color-mix(in srgb, var(--card-accent) 28%, transparent) 58% 72%, transparent 72%); transform-origin: 50% 50%; animation: rbIntelRadarSweep var(--radar-speed, 46s) linear infinite; } .rb-page .intel-card:nth-child(1) { --radar-start: 14deg; --radar-speed: 38s; } .rb-page .intel-card:nth-child(2) { --radar-start: 128deg; --radar-speed: 53s; } .rb-page .intel-card:nth-child(3) { --radar-start: 246deg; --radar-speed: 67s; } .rb-page .intel-topline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; } .rb-page .intel-glyph { position: relative; display: grid; width: 54px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(112, 244, 255, 0.22); border-radius: 6px; color: var(--card-accent); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent), rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 22px rgba(112, 244, 255, 0.06); } .rb-page .intel-glyph span, .rb-page .intel-glyph::before, .rb-page .intel-glyph::after { position: absolute; content: ""; } .rb-page .intel-glyph.scan span { width: 16px; aspect-ratio: 1; border: 2px solid var(--card-accent); border-radius: 50%; } .rb-page .intel-glyph.scan span::after { position: absolute; right: 0; bottom: -3px; width: 7px; height: 2px; content: ""; background: var(--card-accent); transform: rotate(45deg); transform-origin: left center; } .rb-page .intel-glyph.scan::before { width: 36px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--card-accent) 42%, transparent); border-radius: 50%; } .rb-page .intel-glyph.profile span { width: 22px; height: 13px; border: 2px solid var(--card-accent); border-radius: 2px; } .rb-page .intel-glyph.profile span::after { position: absolute; left: 3px; bottom: -7px; width: 9px; height: 7px; content: ""; border-left: 2px solid var(--card-accent); border-bottom: 2px solid var(--card-accent); } .rb-page .intel-glyph.profile::before, .rb-page .intel-glyph.profile::after { left: 33px; width: 10px; height: 1px; background: var(--card-accent); box-shadow: 0 0 12px var(--card-accent); } .rb-page .intel-glyph.profile::before { top: 20px; } .rb-page .intel-glyph.profile::after { top: 29px; width: 7px; } .rb-page .intel-glyph.priority span { left: 15px; width: 24px; height: 3px; background: var(--card-accent); box-shadow: 0 8px 0 color-mix(in srgb, var(--card-accent) 72%, transparent), 0 16px 0 color-mix(in srgb, var(--card-accent) 44%, transparent), 0 0 14px var(--card-accent); } .rb-page .intel-glyph.priority::before { left: 10px; top: 20px; width: 4px; aspect-ratio: 1; background: var(--blood); box-shadow: 0 8px 0 var(--plasma), 0 16px 0 var(--matrix); } .rb-page .intel-meta { display: grid; gap: 3px; min-width: 92px; text-align: right; } .rb-page .intel-meta span { color: var(--muted); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; } .rb-page .intel-meta strong { color: var(--card-accent); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; } .rb-page .intel-card h3 { position: relative; z-index: 1; margin: 0 0 12px; font-size: 1.1rem; line-height: 1.35; } .rb-page .intel-card p { position: relative; z-index: 1; margin: 0; color: #aebed2; line-height: 1.48; } /* ---- Payload (diagnostic summary) -------------------------------------- */ .rb-page .payload { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 24px; align-items: center; margin-bottom: 52px; padding: 24px 30px; border: 1px solid rgba(112, 244, 255, 0.18); border-radius: 8px; background: linear-gradient(90deg, rgba(217, 22, 22, 0.11), transparent 34%), repeating-linear-gradient(90deg, rgba(88, 233, 255, 0.025) 0 1px, transparent 1px 32px), rgba(7, 11, 18, 0.82); } .rb-page .payload-copy { display: grid; gap: 10px; } .rb-page .payload h2 { margin: 0; font-size: 1.8rem; } .rb-page .payload p { margin: 0; color: var(--muted); line-height: 1.55; } .rb-page .payload-bars { display: grid; gap: 12px; } .rb-page .bar-row { display: grid; grid-template-columns: 120px 1fr 46px; align-items: center; gap: 12px; color: var(--muted); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .rb-page .bar-track { height: 12px; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 2px; background: rgba(255, 255, 255, 0.04); } .rb-page .bar-fill { width: var(--width); height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--score-color) 72%, var(--ion)), var(--score-color)); box-shadow: 0 0 16px color-mix(in srgb, var(--score-color) 35%, transparent); } .rb-page .payload-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .rb-page .payload-chip { min-height: 64px; padding: 11px; border: 1px solid color-mix(in srgb, var(--score-color) 34%, rgba(112, 244, 255, 0.14)); border-radius: 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--score-color) 14%, transparent), transparent), rgba(5, 8, 13, 0.62); } .rb-page .payload-chip span { display: block; color: var(--muted); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .rb-page .payload-chip strong { display: block; margin-top: 6px; color: #f8fbff; font-size: 1.05rem; } /* ---- Mission HUD (hero stage visual) ----------------------------------- */ .rb-page .mission-hud { position: relative; display: grid; min-height: 390px; place-items: center; } .rb-page .orbit-display { position: relative; width: min(100%, 360px); aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(112, 244, 255, 0.16); border-radius: 50%; background: radial-gradient(circle at 46% 47%, rgba(217, 22, 22, 0.16) 0 10%, transparent 11%), radial-gradient(circle at 74% 31%, rgba(255, 185, 63, 0.18) 0 9%, transparent 10%), conic-gradient( from 17deg, rgba(112, 244, 255, 0.12) 0 7deg, transparent 7deg 25deg, rgba(112, 244, 255, 0.08) 25deg 31deg, transparent 31deg 48deg, rgba(112, 244, 255, 0.13) 48deg 54deg, transparent 54deg 95deg, rgba(112, 244, 255, 0.09) 95deg 102deg, transparent 102deg 122deg, rgba(112, 244, 255, 0.11) 122deg 130deg, transparent 130deg 176deg, rgba(112, 244, 255, 0.07) 176deg 181deg, transparent 181deg 218deg, rgba(112, 244, 255, 0.12) 218deg 226deg, transparent 226deg 258deg, rgba(112, 244, 255, 0.08) 258deg 263deg, transparent 263deg 316deg, rgba(112, 244, 255, 0.1) 316deg 324deg, transparent 324deg 360deg ), radial-gradient(circle at 50% 50%, #151d2a 0 46%, #05070d 69%); box-shadow: inset 0 0 55px rgba(88, 233, 255, 0.1), 0 0 55px rgba(217, 22, 22, 0.1); } .rb-page .orbit-display::before, .rb-page .orbit-display::after { position: absolute; content: ""; pointer-events: none; } .rb-page .orbit-display::before { inset: 12%; border: 1px solid rgba(112, 244, 255, 0.18); border-radius: 50%; } .rb-page .orbit-display::after { left: 12%; right: 12%; top: 52%; height: 2px; background: linear-gradient(90deg, transparent, rgba(57, 255, 155, 0.72), transparent); box-shadow: 0 0 18px rgba(57, 255, 155, 0.25); } .rb-page .ring { position: absolute; inset: var(--inset); border-radius: 50%; border: var(--size) solid rgba(68, 89, 118, 0.7); transform: rotate(var(--turn)); } .rb-page .ring::before { position: absolute; inset: calc(-1 * var(--size)); content: ""; border: var(--size) solid transparent; border-top-color: var(--color); border-right-color: var(--color); border-radius: 50%; filter: drop-shadow(0 0 13px var(--color)); } .rb-page .ring.one { --inset: 28px; --size: 11px; --turn: 28deg; --color: var(--plasma); animation: rbSpin 14s linear infinite; } .rb-page .ring.two { --inset: 66px; --size: 10px; --turn: 188deg; --color: #498dff; animation: rbSpin 11s linear infinite reverse; } .rb-page .ring.three { --inset: 104px; --size: 10px; --turn: 306deg; --color: var(--matrix); animation: rbSpin 9s linear infinite; } .rb-page .brand-core { position: absolute; inset: 34%; border: 2px solid rgba(112, 244, 255, 0.34); border-radius: 50%; background: conic-gradient( from 18deg, transparent 0 8%, var(--ion) 8% 24%, transparent 24% 43%, var(--plasma) 43% 52%, transparent 52% 64%, rgba(88, 233, 255, 0.58) 64% 69%, transparent 69% 82%, var(--plasma) 82% 88%, transparent 88% 100% ), radial-gradient(circle, #080b12 0 64%, transparent 65%); box-shadow: 0 0 24px rgba(88, 233, 255, 0.28), 0 0 42px rgba(217, 22, 22, 0.24); animation: rbPulse 3.4s ease-in-out infinite; } .rb-page .brand-core::before, .rb-page .brand-core::after { position: absolute; content: ""; border-radius: 50%; } .rb-page .brand-core::before { left: 50%; top: 50%; width: 54%; aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, var(--blood) 0 48%, #330000 52% 72%, transparent 73%); box-shadow: 0 0 24px rgba(217, 22, 22, 0.34); transform: translate(calc(-50% + var(--hero-iris-x, 0px)), calc(-50% + var(--hero-iris-y, 0px))); transition: transform 620ms ease-out; } .rb-page .brand-core::after { left: 50%; top: 50%; z-index: 1; width: 15%; aspect-ratio: 1; background: #ffeded; box-shadow: 0 0 12px rgba(255, 237, 237, 0.82); transform: translate(calc(-50% + var(--hero-pupil-x, 0px)), calc(-50% + var(--hero-pupil-y, 0px))); transition: transform 520ms ease-out; } .rb-page .hero-ship { position: absolute; left: 12%; top: 55%; width: 122px; height: 64px; filter: drop-shadow(0 0 18px rgba(88, 233, 255, 0.32)); isolation: isolate; transform: translate(var(--impact-x, 0px), var(--impact-y, 0px)) rotate(-10deg); animation: rbHeroShip 5.2s ease-in-out infinite; } .rb-page .hero-ship::before, .rb-page .hero-ship::after { position: absolute; content: ""; } .rb-page .hero-ship::before { z-index: 1; inset: 16px 8px 12px; border: 1px solid rgba(112, 244, 255, 0.42); background: linear-gradient(180deg, rgba(245, 248, 255, 0.18), transparent 40%), linear-gradient(90deg, #16263a, #08111d 66%, #030509); clip-path: polygon(0 34%, 66% 0, 100% 50%, 66% 100%, 0 66%); } .rb-page .hero-ship::after { z-index: 0; top: 29px; left: -24px; width: 44px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(88, 233, 255, 0.78)); filter: blur(1px); } .rb-page .ship-eye { position: absolute; left: 78px; top: 35px; z-index: 2; width: 18px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--blood) 0 46%, #5c0000 48% 70%, transparent 72%); box-shadow: 0 0 12px rgba(217, 22, 22, 0.64); transform: translate(-50%, -50%); } .rb-page .ship-eye::before { position: absolute; left: 50%; top: 50%; width: 5px; aspect-ratio: 1; content: ""; border-radius: 50%; background: #ffeded; box-shadow: 0 0 6px rgba(255, 237, 237, 0.72); transform: translate(-50%, -50%); animation: rbShipEyeLook 12s ease-in-out infinite; } .rb-page .signal-ray { position: absolute; left: 29%; top: 48%; width: 158px; height: 72px; background: linear-gradient(90deg, rgba(88, 233, 255, 0.48), rgba(57, 255, 155, 0.18), transparent), repeating-linear-gradient(90deg, rgba(245, 248, 255, 0.22) 0 2px, transparent 2px 16px); clip-path: polygon(0 48%, 100% 0, 100% 100%); opacity: 0.58; transform: rotate(-8deg); animation: rbRayPulse 2.6s ease-in-out infinite; } .rb-page .metric-stack { position: absolute; right: 8px; bottom: 36px; display: grid; gap: 10px; width: min(238px, 72%); } .rb-page .metric { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border: 1px solid rgba(112, 244, 255, 0.16); border-radius: 4px; background: linear-gradient(90deg, rgba(88, 233, 255, 0.06), transparent), rgba(7, 7, 7, 0.8); color: var(--text); font-size: 0.82rem; font-weight: 850; } .rb-page .metric i { width: 10px; aspect-ratio: 1; background: var(--dot); box-shadow: 0 0 16px var(--dot); } .rb-page .metric small { color: var(--muted); font-size: inherit; } /* ---- Footer (ported from report.html prototype) ------------------------ */ .rb-page .footer { margin-top: auto; padding: 36px 0 28px; border-top: 1px solid rgba(112, 244, 255, 0.16); background: rgba(8, 13, 22, 0.92); } .rb-page .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 42px; } .rb-page .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1.1rem; font-weight: 900; } .rb-page .footer-brand strong { color: #f9fbff; } .rb-page .footer-brand span { color: var(--ion); } .rb-page .footer-mark { width: 25px; aspect-ratio: 1; border: 2px solid var(--ion); border-left-color: transparent; border-radius: 50%; box-shadow: 0 0 16px rgba(88, 233, 255, 0.35); } .rb-page .footer p, .rb-page .footer a { color: #b5c2d4; } .rb-page .footer a:hover { color: var(--ion); } .rb-page .footer p { max-width: 260px; margin: 0 0 12px; line-height: 1.5; } .rb-page .footer h3 { margin: 0 0 12px; font-size: 1rem; color: #f7fbff; } .rb-page .footer-links { display: grid; gap: 7px; } .rb-page .footer-social { display: flex; gap: 14px; margin-top: 14px; } .rb-page .footer-social a { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(112, 244, 255, 0.22); border-radius: 50%; color: #b5c2d4; } .rb-page .footer-social a:hover { border-color: var(--ion); color: var(--ion); } .rb-page .footer-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(112, 244, 255, 0.14); color: #8391a5; text-align: center; font-size: 0.86rem; line-height: 1.6; } /* ========================================================================== Pricing page ("Same scanner. Wider view.") Ported from scratch/try-to-reskin-this-website-in/pricing.html. Scoped to .rb-page. .pricing-hero is a distinct shell (NOT DaisyUI .hero) so there is no generic-class collision. The hero h1 and hero-copy paragraph are scoped under .pricing-hero so the already-shipped index hero is untouched. ========================================================================== */ .rb-page .pricing-hero { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(430px, 1fr); gap: 34px; align-items: center; min-height: 520px; margin-top: 38px; padding: 40px 32px; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 8px; background: linear-gradient(135deg, rgba(217, 22, 22, 0.12), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 58%), rgba(8, 13, 21, 0.86); } .rb-page .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--ion); font-size: 0.72rem; font-weight: 950; letter-spacing: 0.16em; text-transform: uppercase; } .rb-page .eyebrow::before { width: 9px; aspect-ratio: 1; content: ""; background: var(--blood); box-shadow: 0 0 18px rgba(217, 22, 22, 0.85); } .rb-page .pricing-hero h1 { max-width: 640px; color: #f8fbff; font-size: clamp(2.85rem, 5.2vw, 4.25rem); line-height: 1; } .rb-page .pricing-hero .hero-copy { max-width: 650px; margin: 22px 0 0; color: #c7d6e8; font-size: 1.08rem; font-weight: 400; line-height: 1.58; } .rb-page .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .rb-page .button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 1px solid rgba(112, 244, 255, 0.24); border-radius: 6px; color: #f8fbff; background: rgba(255, 255, 255, 0.04); font-size: 0.86rem; font-weight: 950; letter-spacing: 0.05em; text-decoration: none; text-transform: uppercase; cursor: pointer; } .rb-page .button:hover { border-color: var(--ion); color: var(--ion); } .rb-page .button.primary { border-color: rgba(255, 185, 63, 0.8); color: #130f08; background: linear-gradient(135deg, var(--plasma), #ffe19a); box-shadow: 0 0 28px rgba(255, 185, 63, 0.22); } .rb-page .button.primary:hover { filter: brightness(1.05); color: #130f08; } /* ---- Range board (Free vs Pro signal-view comparison visual) ----------- */ .rb-page .range-board { position: relative; min-height: 390px; overflow: hidden; contain: paint; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 8px; background: radial-gradient(circle at 28% 34%, rgba(255, 185, 63, 0.16), transparent 27%), radial-gradient(circle at 75% 35%, rgba(88, 233, 255, 0.13), transparent 32%), repeating-linear-gradient(90deg, rgba(112, 244, 255, 0.05) 0 1px, transparent 1px 36px), repeating-linear-gradient(0deg, rgba(112, 244, 255, 0.035) 0 1px, transparent 1px 36px), rgba(3, 7, 10, 0.82); } .rb-page .range-board::before { position: absolute; inset: 0; z-index: 3; content: ""; pointer-events: none; background: linear-gradient(rgba(112, 244, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 244, 255, 0.04) 1px, transparent 1px), radial-gradient(circle at 50% 48%, transparent 0 58%, rgba(0, 0, 0, 0.54) 100%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 6px); background-size: 32px 32px, 32px 32px, 100% 100%, 100% 6px; mix-blend-mode: screen; opacity: 0.74; } .rb-page .signal-split { position: absolute; inset: 0; z-index: 1; } .rb-page .signal-panel { position: absolute; inset: 0; overflow: hidden; } .rb-page .signal-panel.free { clip-path: polygon(0 0, 56% 0, 42% 100%, 0 100%); --signal: var(--ion); --signal-x: 32%; --signal-y: 34%; } .rb-page .signal-panel.pro { clip-path: polygon(56% 0, 100% 0, 100% 100%, 42% 100%); --signal: var(--plasma); --signal-x: 72%; --signal-y: 36%; } .rb-page .signal-panel img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.36) brightness(0.64); opacity: 0.82; transform: scale(1.04); } .rb-page .signal-panel.free img { object-position: 88% 44%; transform: scale(1.34); } .rb-page .signal-panel.pro img { object-position: 53% 48%; } .rb-page .signal-panel::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(5, 7, 13, 0.18), rgba(5, 7, 13, 0.72)), radial-gradient(circle at var(--signal-x) var(--signal-y), color-mix(in srgb, var(--signal) 24%, transparent), transparent 31%), linear-gradient(90deg, rgba(5, 7, 13, 0.44), transparent 38%, rgba(5, 7, 13, 0.42)); } .rb-page .signal-divider { position: absolute; left: 48.7%; top: -12%; z-index: 5; width: 3px; height: 124%; background: linear-gradient(180deg, transparent, rgba(255, 185, 63, 0.9), rgba(88, 233, 255, 0.7), transparent); box-shadow: 0 0 18px rgba(255, 185, 63, 0.28), 0 0 24px rgba(88, 233, 255, 0.18); transform: rotate(11deg); transform-origin: center; } .rb-page .signal-receiver { position: absolute; z-index: 4; left: var(--x); top: var(--y); width: 9px; aspect-ratio: 1; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px var(--signal); transform: translate(-50%, -50%); } .rb-page .signal-receiver::before { position: absolute; left: 50%; top: 50%; content: ""; width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--signal) 62%, transparent); border-top-color: transparent; border-left-color: transparent; border-radius: 50%; opacity: 0.48; transform: translate(-50%, -50%) rotate(-135deg); } .rb-page .signal-receiver.free { --x: 17%; --y: 43%; --signal: var(--ion); } .rb-page .signal-receiver.pro { --x: 68%; --y: 44%; --signal: var(--plasma); } .rb-page .signal-receiver.pro-rear { --x: 86%; --y: 58%; --signal: var(--plasma); opacity: 0.56; } .rb-page .signal-receiver.pro-rear::before { opacity: 0.26; } .rb-page .incoming-signal { position: absolute; z-index: 4; left: var(--target-x); top: var(--target-y); width: var(--len); height: 2px; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--signal), transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--signal) 55%, transparent); opacity: 0; transform: translateX(-100%) rotate(var(--angle)); transform-origin: right center; animation: rbIncomingSignal var(--speed) linear infinite; animation-delay: var(--delay); } .rb-page .incoming-signal::before { display: block; width: 42%; height: 100%; content: ""; background: var(--signal); box-shadow: 0 0 12px var(--signal); transform: translateX(-120%); animation: rbSignalPacket var(--speed) linear infinite; animation-delay: var(--delay); } .rb-page .incoming-signal.free { --signal: var(--ion); } .rb-page .incoming-signal.pro { --signal: var(--plasma); } .rb-page .incoming-signal.rear { opacity: 0; filter: saturate(0.78); } .rb-page .incoming-signal.rear::before { opacity: 0.58; } .rb-page .range-labels { position: absolute; z-index: 6; left: 34px; right: 34px; top: 30px; display: flex; justify-content: space-between; gap: 16px; pointer-events: none; } .rb-page .range-label { max-width: 220px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--label) 50%, rgba(255, 255, 255, 0.1)); border-radius: 6px; background: rgba(5, 8, 13, 0.66); box-shadow: 0 0 22px color-mix(in srgb, var(--label) 18%, transparent); } .rb-page .range-label span { display: block; color: var(--label); font-size: 0.64rem; font-weight: 950; letter-spacing: 0.15em; text-transform: uppercase; } .rb-page .range-label strong { display: block; margin-top: 4px; color: #f8fbff; font-size: 1.05rem; line-height: 1.05; } .rb-page .range-meter { position: absolute; left: 34px; right: 34px; bottom: 28px; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 10px 12px; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 6px; background: rgba(3, 7, 10, 0.7); backdrop-filter: blur(4px); } .rb-page .range-meter-row { display: grid; grid-template-columns: 96px 1fr 48px; align-items: center; gap: 10px; color: #dbe8f6; font-size: 0.66rem; font-weight: 950; letter-spacing: 0.1em; text-transform: uppercase; } .rb-page .meter-track { height: 8px; border: 1px solid rgba(112, 244, 255, 0.22); border-radius: 2px; background: rgba(5, 8, 13, 0.72); } .rb-page .meter-fill { width: var(--width); height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--fuel) 62%, var(--ion)), var(--fuel)); box-shadow: 0 0 16px color-mix(in srgb, var(--fuel) 34%, transparent); } /* ---- Plan cards --------------------------------------------------------- */ .rb-page .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 28px; } .rb-page .plan-card { position: relative; display: grid; gap: 18px; min-height: 520px; padding: 24px; overflow: hidden; border: 1px solid rgba(112, 244, 255, 0.2); border-top: 4px solid var(--accent); border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent), rgba(8, 13, 21, 0.88); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28); } .rb-page .plan-card.pro { border-color: rgba(255, 185, 63, 0.58); box-shadow: 0 24px 60px rgba(255, 185, 63, 0.08), 0 20px 48px rgba(0, 0, 0, 0.28); } .rb-page .plan-kicker { color: var(--accent); font-size: 0.72rem; font-weight: 950; letter-spacing: 0.15em; text-transform: uppercase; } .rb-page .plan-card h2 { margin: 0; color: #f8fbff; font-size: 2rem; } .rb-page .price-line { display: flex; align-items: flex-end; gap: 10px; margin: 0; } .rb-page .price-line strong { color: #f8fbff; font-size: 3.2rem; line-height: 0.9; } .rb-page .price-line span { color: var(--muted); font-weight: 850; } .rb-page .scan-tank { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(112, 244, 255, 0.16); border-radius: 6px; background: rgba(5, 8, 13, 0.62); } .rb-page .tank-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rb-page .tank-top span { color: var(--muted); font-size: 0.66rem; font-weight: 950; letter-spacing: 0.13em; text-transform: uppercase; } .rb-page .tank-top strong { color: var(--accent); font-size: 1.25rem; } .rb-page .tank-track { height: 16px; overflow: hidden; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 2px; background: rgba(255, 255, 255, 0.04); } .rb-page .tank-fill { width: var(--fill); height: 100%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 14px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 56%, var(--ion)), var(--accent)); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 34%, transparent); } .rb-page .feature-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .rb-page .feature-list li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: start; color: #c8d6e8; font-size: 0.92rem; line-height: 1.38; } .rb-page .feature-list li::before { width: 8px; aspect-ratio: 1; margin-top: 6px; content: ""; background: var(--accent); box-shadow: 0 0 12px var(--accent); } .rb-page .same-manifest { margin: 10px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.45; } .rb-page .plan-card .button { align-self: end; } /* ---- Truth panel (pricing principle) ----------------------------------- */ .rb-page .truth-panel { position: relative; display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: 22px; overflow: hidden; margin: 28px 0 56px; padding: 24px; border: 1px solid rgba(112, 244, 255, 0.18); border-radius: 8px; background: linear-gradient(90deg, rgba(57, 255, 155, 0.1), transparent 32%), repeating-linear-gradient(90deg, rgba(88, 233, 255, 0.025) 0 1px, transparent 1px 32px), rgba(7, 11, 18, 0.84); } .rb-page .truth-panel::after { position: absolute; right: -42px; bottom: -62px; width: 190px; aspect-ratio: 1; content: ""; border: 1px solid rgba(112, 244, 255, 0.12); border-radius: 50%; background: radial-gradient(circle, transparent 0 44%, rgba(112, 244, 255, 0.08) 45% 48%, transparent 49%), conic-gradient(from 30deg, transparent 0 55%, rgba(57, 255, 155, 0.12) 55% 71%, transparent 71%); } .rb-page .truth-copy, .rb-page .truth-grid { position: relative; z-index: 1; } .rb-page .truth-panel h2 { margin: 0 0 10px; font-size: 1.7rem; } .rb-page .truth-panel p { margin: 0; color: var(--muted); line-height: 1.55; } .rb-page .truth-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .rb-page .truth-chip { position: relative; min-height: 82px; overflow: hidden; padding: 13px 13px 13px 42px; border: 1px solid color-mix(in srgb, var(--truth) 32%, rgba(112, 244, 255, 0.15)); border-radius: 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--truth) 13%, transparent), transparent), rgba(5, 8, 13, 0.62); } .rb-page .truth-chip::before { position: absolute; left: 13px; top: 17px; width: 15px; aspect-ratio: 1; content: ""; border: 1px solid var(--truth); border-radius: 50%; background: radial-gradient(circle, var(--truth) 0 24%, transparent 27%); box-shadow: 0 0 14px color-mix(in srgb, var(--truth) 42%, transparent); } .rb-page .truth-chip::after { position: absolute; left: 20px; top: 37px; bottom: 12px; width: 1px; content: ""; background: linear-gradient(var(--truth), transparent); } .rb-page .truth-chip span { display: block; color: var(--truth); font-size: 0.62rem; font-weight: 950; letter-spacing: 0.13em; text-transform: uppercase; } .rb-page .truth-chip strong { display: block; margin-top: 8px; color: #f8fbff; font-size: 0.98rem; line-height: 1.25; } /* ---- FAQ grid ----------------------------------------------------------- */ .rb-page .faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 64px; } .rb-page .faq-card { position: relative; min-height: 160px; overflow: hidden; padding: 18px 18px 18px 70px; border: 1px solid color-mix(in srgb, var(--faq) 28%, rgba(112, 244, 255, 0.16)); border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--faq) 11%, transparent), transparent 42%), rgba(8, 13, 21, 0.82); } .rb-page .faq-card::before { position: absolute; left: 18px; top: 22px; width: 34px; aspect-ratio: 1; content: ""; border: 1px solid color-mix(in srgb, var(--faq) 52%, rgba(255, 255, 255, 0.18)); border-radius: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent), rgba(5, 8, 13, 0.78); box-shadow: 0 0 18px color-mix(in srgb, var(--faq) 25%, transparent); } .rb-page .faq-card::after { position: absolute; left: 28px; top: 32px; width: 14px; height: 14px; content: ""; background: var(--faq); box-shadow: 0 0 12px var(--faq); clip-path: var(--icon); } .rb-page .faq-card h3 { margin: 0 0 10px; color: #f8fbff; font-size: 1rem; } .rb-page .faq-card p { margin: 0; color: var(--muted); line-height: 1.48; } .rb-page .faq-card a { color: var(--ion); } .rb-page .faq-card a:hover { text-decoration: underline; } /* ========================================================================== FAQ page ("Consult the stars. Read the signals.") Visual design ported from scratch/.../faq.html (inspiration only — the FAQ CONTENT is the full existing knowledge base, not the prototype's 7 cards). Scoped to .rb-page. .faq-hero is page-specific (NOT .hero) so the approved index hero is untouched. Reuses shared .eyebrow / .headline-accent. ========================================================================== */ .rb-page .faq-hero { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(400px, 1fr); gap: 34px; align-items: center; padding: 52px 0 38px; } .rb-page .faq-hero h1 { max-width: 660px; font-size: clamp(2.9rem, 5.6vw, 4.6rem); line-height: 0.98; } .rb-page .faq-hero .hero-copy { max-width: 600px; margin: 20px 0 0; color: #c7d6e8; font-size: 1.05rem; font-weight: 400; line-height: 1.58; } .rb-page .faq-hero .hero-copy a { color: var(--ion); } .rb-page .faq-hero .hero-copy a:hover { text-decoration: underline; } /* ---- Oracle stage (hero visual) ---------------------------------------- */ .rb-page .oracle-stage { position: relative; min-height: 620px; border: 1px solid rgba(112, 244, 255, 0.22); border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 50% 32%, rgba(255, 185, 63, 0.16), transparent 34%), radial-gradient(circle at 54% 58%, rgba(217, 22, 22, 0.18), transparent 30%), rgba(3, 7, 10, 0.82); box-shadow: inset 0 0 54px rgba(112, 244, 255, 0.06); } .rb-page .oracle-stage::before { position: absolute; inset: 0; content: ""; background: linear-gradient(rgba(112, 244, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 244, 255, 0.05) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(circle at center, black 0 56%, transparent 82%); mask-image: radial-gradient(circle at center, black 0 56%, transparent 82%); } .rb-page .oracle-machine { position: absolute; left: 50%; bottom: 12px; width: min(calc(100% - 42px), 560px); min-height: 586px; border: 1px solid rgba(255, 185, 63, 0.55); border-radius: 8px 8px 4px 4px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 20% 78%, rgba(0, 0, 0, 0.3)), linear-gradient(180deg, #8f4e24 0%, #512414 26%, #130b0b 100%); box-shadow: 0 0 34px rgba(255, 185, 63, 0.18), inset 0 0 0 7px rgba(38, 16, 9, 0.74), inset 0 0 42px rgba(0, 0, 0, 0.62); transform: translateX(-50%); animation: rbOracleCabinetGlow 8.5s ease-in-out infinite; } .rb-page .cabinet-lights { position: absolute; inset: 12px; z-index: 4; pointer-events: none; } .rb-page .cabinet-lights span { position: absolute; width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--light-color); box-shadow: 0 0 12px var(--light-color), 0 0 26px color-mix(in srgb, var(--light-color) 55%, transparent); opacity: 0.34; animation: rbCabinetLightPulse var(--pulse, 4.4s) ease-in-out infinite; animation-delay: var(--delay, 0s); } .rb-page .cabinet-lights span:nth-child(1) { --light-color: var(--plasma); --pulse: 5.4s; --delay: -0.8s; left: 12px; top: 74px; } .rb-page .cabinet-lights span:nth-child(2) { --light-color: var(--ion); --pulse: 6.2s; --delay: -2.2s; right: 14px; top: 96px; } .rb-page .cabinet-lights span:nth-child(3) { --light-color: var(--matrix); --pulse: 4.8s; --delay: -1.4s; left: 18px; top: 274px; } .rb-page .cabinet-lights span:nth-child(4) { --light-color: var(--blood); --pulse: 7.1s; --delay: -3.1s; right: 18px; top: 294px; } .rb-page .cabinet-lights span:nth-child(5) { --light-color: var(--plasma); --pulse: 5.9s; --delay: -4s; left: 52%; bottom: 24px; } .rb-page .cabinet-lights span:nth-child(6) { --light-color: var(--ion); --pulse: 4.2s; --delay: -1.9s; left: 31%; bottom: 25px; } .rb-page .oracle-window { position: relative; margin: 14px; height: 556px; min-height: 556px; overflow: hidden; border: 1px solid rgba(112, 244, 255, 0.28); border-radius: 8px; background: radial-gradient(circle at 50% 60%, rgba(88, 233, 255, 0.18), transparent 32%), linear-gradient(90deg, #32111b, #12080d 24% 76%, #32111b); box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.36), 0 0 26px rgba(88, 233, 255, 0.12); } .rb-page .oracle-window::before, .rb-page .oracle-window::after { position: absolute; inset: 0; z-index: 2; content: ""; pointer-events: none; } .rb-page .oracle-window::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 18% 82%, rgba(0, 0, 0, 0.46)), repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, 0.035) 5px), radial-gradient(circle at 52% 50%, transparent 0 42%, rgba(0, 0, 0, 0.18) 72%); opacity: 0.52; } .rb-page .oracle-window::after { background: radial-gradient(circle at 50% 48%, transparent 0 18%, rgba(88, 233, 255, 0.28) 18.4% 18.8%, transparent 19.4% 29%, rgba(255, 185, 63, 0.24) 29.4% 29.8%, transparent 30.4%), conic-gradient(from 18deg at 50% 48%, transparent 0 9%, rgba(88, 233, 255, 0.2) 9% 15%, transparent 15% 42%, rgba(255, 185, 63, 0.2) 42% 51%, transparent 51% 71%, rgba(57, 255, 155, 0.16) 71% 77%, transparent 77%); opacity: 0.48; } .rb-page .oracle-image { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(1.12) contrast(1.04) brightness(1.04); animation: rbOracleImageLamp 9s ease-in-out infinite; } .rb-page .crystal-orbit { position: absolute; left: 50.6%; top: 77.6%; z-index: 3; width: min(34%, 164px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at center, rgba(88, 233, 255, 0.12), transparent 52%); box-shadow: 0 0 20px rgba(88, 233, 255, 0.2), inset 0 0 18px rgba(88, 233, 255, 0.16); pointer-events: none; transform: translate(-50%, -50%); opacity: 0.78; } .rb-page .crystal-orbit::before, .rb-page .crystal-orbit::after { position: absolute; inset: 0; content: ""; border-radius: 50%; } .rb-page .crystal-orbit::before { border: 1px solid rgba(112, 244, 255, 0.24); background: conic-gradient(from 12deg, transparent 0 7%, var(--plasma) 7% 19%, transparent 19% 38%, var(--ion) 38% 54%, transparent 54% 69%, var(--matrix) 69% 82%, transparent 82% 100%); -webkit-mask-image: radial-gradient(circle, transparent 0 49%, black 51% 58%, transparent 60%); mask-image: radial-gradient(circle, transparent 0 49%, black 51% 58%, transparent 60%); animation: rbOracleCoreOrbit 12s linear infinite; } .rb-page .crystal-orbit::after { inset: -22%; background: conic-gradient(from 130deg, transparent 0 12%, rgba(255, 185, 63, 0.34) 12% 24%, transparent 24% 49%, rgba(88, 233, 255, 0.3) 49% 63%, transparent 63% 77%, rgba(57, 255, 155, 0.25) 77% 87%, transparent 87% 100%); -webkit-mask-image: radial-gradient(circle, transparent 0 58%, black 60% 66%, transparent 68%); mask-image: radial-gradient(circle, transparent 0 58%, black 60% 66%, transparent 68%); filter: blur(0.4px); animation: rbOracleCoreOrbit 20s linear infinite reverse; } /* ---- Content grid: question deck + side panel -------------------------- */ .rb-page .content-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.55fr); gap: 22px; align-items: start; padding: 0 0 64px; } .rb-page .panel { border: 1px solid rgba(112, 244, 255, 0.22); border-radius: 8px; background: linear-gradient(90deg, rgba(88, 233, 255, 0.04), transparent), rgba(8, 12, 19, 0.82); box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.24); } .rb-page .faq-board { padding: 20px; } .rb-page .board-head { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .rb-page .board-head h2, .rb-page .side-panel h2 { margin: 0; font-size: clamp(1.45rem, 2.8vw, 2rem); line-height: 1; } .rb-page .board-head p { max-width: 430px; margin: 0; color: var(--muted); line-height: 1.45; } .rb-page .question-list { display: grid; gap: 10px; } .rb-page .deck-section-title { margin: 18px 0 2px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 36%, rgba(112, 244, 255, 0.14)); color: var(--accent); font-size: 0.74rem; font-weight: 950; letter-spacing: 0.18em; text-transform: uppercase; } .rb-page .deck-section-title:first-child { margin-top: 0; } .rb-page .question-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; min-height: 76px; padding: 13px 14px; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 6px; color: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 44%), rgba(4, 8, 13, 0.68); cursor: pointer; font: inherit; text-align: left; } .rb-page .question-card[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 72%, white 10%); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent); } .rb-page .question-card .glyph { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent); border-radius: 5px; background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 30%, transparent), transparent 54%), rgba(0, 0, 0, 0.38); } .rb-page .glyph-orbit, .rb-page .glyph-scan, .rb-page .glyph-lock, .rb-page .glyph-ticket { position: relative; width: 23px; height: 23px; } .rb-page .glyph-orbit { border: 2px solid color-mix(in srgb, var(--accent) 72%, white 10%); border-left-color: transparent; border-radius: 50%; } .rb-page .glyph-orbit::after { position: absolute; right: 1px; top: 5px; width: 5px; aspect-ratio: 1; content: ""; border-radius: 50%; background: var(--accent); } .rb-page .glyph-scan { border-bottom: 3px solid var(--accent); } .rb-page .glyph-scan::before, .rb-page .glyph-scan::after { position: absolute; left: 2px; right: 2px; height: 2px; content: ""; background: color-mix(in srgb, var(--accent) 76%, white 10%); box-shadow: 0 7px 0 color-mix(in srgb, var(--accent) 55%, white 10%); } .rb-page .glyph-scan::before { top: 4px; } .rb-page .glyph-scan::after { top: 18px; opacity: 0.55; } .rb-page .glyph-lock { border: 2px solid color-mix(in srgb, var(--accent) 75%, white 10%); border-radius: 4px; transform: translateY(6px); } .rb-page .glyph-lock::before { position: absolute; left: 5px; top: -12px; width: 10px; height: 12px; content: ""; border: 2px solid color-mix(in srgb, var(--accent) 75%, white 10%); border-bottom: 0; border-radius: 10px 10px 0 0; } .rb-page .glyph-ticket { border: 2px solid color-mix(in srgb, var(--accent) 75%, white 10%); border-radius: 4px; transform: rotate(-5deg); } .rb-page .glyph-ticket::before { position: absolute; left: 4px; right: 4px; top: 6px; height: 2px; content: ""; background: color-mix(in srgb, var(--accent) 75%, white 10%); box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 48%, white 10%); } .rb-page .question-meta { margin: 0 0 5px; color: var(--accent); font-size: 0.65rem; font-weight: 950; letter-spacing: 0.18em; text-transform: uppercase; } .rb-page .question-card h3 { margin: 0; font-size: 1rem; line-height: 1.25; } .rb-page .question-card .answer { grid-column: 2 / -1; display: none; margin: 6px 0 0; color: #c9d6e8; font-size: 0.95rem; line-height: 1.5; } .rb-page .question-card[aria-expanded="true"] .answer { display: block; } .rb-page .question-card .answer p { margin: 0; } .rb-page .question-card .answer p + p { margin-top: 10px; } .rb-page .question-card .answer ul { margin: 10px 0; padding-left: 18px; } .rb-page .question-card .answer li { margin: 3px 0; } .rb-page .question-card .answer a { color: var(--ion); } .rb-page .question-card .answer a:hover { text-decoration: underline; } .rb-page .question-card .answer code { padding: 1px 5px; border-radius: 3px; background: rgba(112, 244, 255, 0.1); font-size: 0.85em; } .rb-page .card-arrow { align-self: start; color: var(--accent); font-size: 1.2rem; font-weight: 950; } .rb-page .question-card[aria-expanded="true"] .card-arrow { transform: rotate(45deg); } .rb-page .side-panel { position: sticky; top: 20px; padding: 20px; } .rb-page .meter-stack { display: grid; gap: 12px; margin-top: 18px; } .rb-page .meter { padding: 13px; border: 1px solid rgba(112, 244, 255, 0.18); border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 64%), rgba(0, 0, 0, 0.32); } .rb-page .meter strong { display: block; margin-bottom: 6px; color: var(--accent); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; } .rb-page .meter span { color: #dce6f3; font-weight: 700; } .rb-page .cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 56px; padding: 20px; border: 1px solid rgba(255, 185, 63, 0.42); border-radius: 8px; background: radial-gradient(circle at 82% 50%, rgba(255, 185, 63, 0.22), transparent 28%), linear-gradient(90deg, rgba(255, 185, 63, 0.12), transparent 48%), rgba(5, 7, 13, 0.74); } .rb-page .cta-strip h2 { margin: 0 0 6px; font-size: 1.65rem; } .rb-page .cta-strip p { margin: 0; color: var(--muted); } .rb-page .cta-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 1px solid rgba(255, 185, 63, 0.95); border-radius: 5px; color: #080808; background: linear-gradient(180deg, #ffd363, var(--plasma)); box-shadow: 0 0 26px rgba(255, 185, 63, 0.26); font-weight: 950; white-space: nowrap; cursor: pointer; } .rb-page .cta-button:hover { filter: brightness(1.05); color: #080808; } /* ========================================================================== DOCS HUB ("GeoScored field guide / getting started") Visual design ported from scratch/.../docs.html (inspiration only — every real doc link, the CollectionPage/BreadcrumbList schema, and the bottom CTA are preserved; the prototype's curated 3 cards are NOT the content source). Scoped to .rb-page. .docs-hero / .docs-section-title are page-specific (NOT the shared .hero / .section-title) so the approved index/pricing/FAQ are byte-for-byte untouched. Reuses shared .eyebrow / .headline-accent. ========================================================================== */ .rb-page .docs-breadcrumb { display: flex; align-items: center; gap: 8px; margin: 28px 0 0; color: var(--muted); font-size: 0.82rem; font-weight: 700; } .rb-page .docs-breadcrumb a { color: var(--muted); } .rb-page .docs-breadcrumb a:hover { color: var(--ion); } .rb-page .docs-breadcrumb [aria-current="page"] { color: var(--text); } .rb-page .docs-hero { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1fr); gap: 34px; align-items: center; margin-top: 38px; padding: 38px; position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(112, 244, 255, 0.22); border-radius: 8px; background: linear-gradient(90deg, rgba(242, 193, 47, 0.09), transparent 28%), linear-gradient(135deg, rgba(255, 185, 63, 0.12), transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 58%), rgba(8, 13, 21, 0.86); } .rb-page .docs-hero::after { position: absolute; right: 34px; top: 22px; content: "CAT. NO. GS-80 / REV. A"; color: rgba(239, 226, 191, 0.5); font-family: "Courier New", ui-monospace, monospace; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; } .rb-page .docs-hero > * { position: relative; z-index: 1; } .rb-page .docs-hero h1 { max-width: 650px; font-size: clamp(2.75rem, 5.4vw, 4.35rem); line-height: 1; } .rb-page .docs-hero .hero-copy { max-width: 630px; margin: 20px 0 0; color: #c7d6e8; font-size: 1.05rem; font-weight: 400; line-height: 1.58; } .rb-page .docs-hero .hero-copy a { color: var(--ion); } .rb-page .docs-hero .hero-copy a:hover { text-decoration: underline; } /* ---- Teletype printer (animated hero stage, driven by docs/index.html JS) */ .rb-page .teletype { position: relative; min-height: 430px; overflow: hidden; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(112, 244, 255, 0.05) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(112, 244, 255, 0.035) 0 1px, transparent 1px 34px), rgba(3, 7, 10, 0.84); box-shadow: inset 0 0 54px rgba(255, 185, 63, 0.05); } .rb-page .paper-window { position: absolute; left: 50%; top: 22px; width: min(78%, 420px); height: 318px; overflow: hidden; border: 1px solid rgba(240, 234, 223, 0.32); background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 14% 86%, rgba(0, 0, 0, 0.08)), rgba(221, 212, 189, 0.2); box-shadow: inset 0 24px 28px rgba(0, 0, 0, 0.12), inset 0 -28px 30px rgba(0, 0, 0, 0.18); transform: translateX(-50%); } .rb-page .paper { position: absolute; left: 0; top: 0; --paper-feed: 0px; width: 100%; height: 100%; color: #16202d; background: linear-gradient(90deg, rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0.07) 18% 82%, rgba(0, 0, 0, 0.11)), radial-gradient(ellipse at 18% 18%, rgba(178, 124, 36, 0.24), transparent 34%), radial-gradient(ellipse at 78% 38%, rgba(117, 80, 31, 0.18), transparent 40%), radial-gradient(ellipse at 42% 78%, rgba(214, 172, 75, 0.14), transparent 34%), linear-gradient(118deg, rgba(240, 194, 83, 0.13), transparent 31%, rgba(91, 60, 26, 0.13) 74%, transparent), linear-gradient(rgba(221, 212, 189, 0.16), rgba(221, 212, 189, 0.16)), url("/static/img/rebrand/paper.jpg"); background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, center var(--paper-feed); background-size: auto, auto, auto, auto, auto, auto, 100% auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 72%, transparent 96%); mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 72%, transparent 96%); transition: background-position 520ms ease-out; } .rb-page .paper::before { position: absolute; left: 0; right: 0; top: 0; height: 18px; content: ""; background: linear-gradient(rgba(0, 0, 0, 0.1), transparent); } .rb-page .printed-line, .rb-page .live-print { position: absolute; left: 34px; height: 18px; overflow: hidden; color: rgba(18, 25, 31, 0.88); font-family: "Courier New", "Lucida Console", ui-monospace, monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.055em; line-height: 18px; text-shadow: 0.35px 0 rgba(18, 25, 31, 0.52); text-transform: uppercase; white-space: nowrap; } .rb-page .printed-line { top: var(--line-top); opacity: 0.68; transition: top 520ms ease-out, opacity 520ms ease-out; } .rb-page .live-print { top: 270px; z-index: 3; width: 0; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 180ms ease-out; } .rb-page .carriage { position: absolute; left: 6%; right: 6%; top: 296px; height: 112px; z-index: 2; background: url("/static/img/rebrand/retro-printer-hood-v1.png") center bottom / contain no-repeat; filter: drop-shadow(0 11px 17px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 12px rgba(255, 185, 63, 0.08)); } .rb-page .print-head { position: absolute; left: 30px; top: 16px; width: 132px; height: 48px; background: url("/static/img/rebrand/retro-printer-head-v4.png") center / contain no-repeat; box-shadow: 0 9px 14px rgba(0, 0, 0, 0.34), 0 0 18px rgba(88, 233, 255, 0.12); filter: drop-shadow(0 0 9px rgba(255, 185, 63, 0.11)); transition: transform 900ms ease-in-out; will-change: transform; } /* ---- Docs section title (left-aligned manual heading) ------------------ */ .rb-page .docs-section-title { display: flex; align-items: center; gap: 14px; margin: 46px 0 18px; color: #f7fbff; font-size: 1.75rem; letter-spacing: 0; } .rb-page .docs-section-title::after { flex: 1; height: 1px; content: ""; background: linear-gradient(90deg, rgba(242, 193, 47, 0.74), rgba(88, 233, 255, 0.18), transparent); } /* ---- Manual cards + appendix panels ------------------------------------ */ .rb-page .doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .rb-page .lower-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: 16px; margin: 16px 0 16px; } .rb-page .doc-card, .rb-page .api-panel, .rb-page .scan-panel { position: relative; display: block; isolation: isolate; overflow: hidden; min-height: 190px; padding: 24px; border: 1px solid rgba(112, 244, 255, 0.18); border-radius: 8px; color: inherit; background: linear-gradient(90deg, rgba(239, 226, 191, 0.08), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--ion)) 14%, transparent), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 58%), rgba(8, 13, 21, 0.86); transition: transform 160ms ease-out, border-color 160ms ease-out; } .rb-page a.doc-card:hover, .rb-page a.api-panel:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent, var(--ion)) 60%, transparent); } .rb-page .doc-card::before, .rb-page .api-panel::before, .rb-page .scan-panel::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: var(--accent, var(--ion)); box-shadow: 0 0 22px var(--accent, var(--ion)); } .rb-page .doc-card::after, .rb-page .api-panel::after, .rb-page .scan-panel::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(132deg, rgba(5, 7, 13, var(--manual-shade-left, 0.9)) 0%, rgba(5, 7, 13, var(--manual-shade-mid, 0.66)) 45%, rgba(5, 7, 13, var(--manual-shade-right, 0.94)) 100%), linear-gradient(38deg, rgba(5, 7, 13, 0.9) 0%, rgba(5, 7, 13, 0.24) 42%, rgba(5, 7, 13, 0.86) 100%), radial-gradient(circle at var(--manual-glow-x, 22%) var(--manual-glow-y, 36%), color-mix(in srgb, var(--accent, var(--ion)) 24%, transparent), transparent 42%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px), var(--manual-image, none) var(--manual-pos, center) / var(--manual-size, cover) no-repeat; background-blend-mode: normal, multiply, screen, overlay, screen; filter: grayscale(0.18) contrast(1.05); opacity: var(--manual-opacity, 0.68); transform: rotate(var(--manual-rotate, 0deg)) scale(var(--manual-scale, 1.04)); transform-origin: center; } .rb-page .doc-card > *, .rb-page .api-panel > *, .rb-page .scan-panel > * { position: relative; z-index: 1; } .rb-page .doc-kicker { margin: 0 0 16px; color: var(--accent, var(--ion)); font-family: "Courier New", ui-monospace, monospace; font-size: 0.68rem; font-weight: 950; letter-spacing: 0.12em; text-transform: uppercase; } .rb-page .doc-card h3, .rb-page .api-panel h2, .rb-page .scan-panel h2 { margin: 0 0 10px; color: #f7fbff; font-size: 1.28rem; line-height: 1.12; letter-spacing: 0; } .rb-page .doc-card p, .rb-page .api-panel p, .rb-page .scan-panel p { margin: 0; color: var(--paper); line-height: 1.52; } .rb-page .doc-card .doc-readmore { display: inline-block; margin-top: 14px; color: var(--accent, var(--ion)); font-size: 0.82rem; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; } .rb-page .terminal { margin-top: 18px; padding: 15px; border: 1px solid rgba(57, 255, 155, 0.18); border-radius: 6px; color: #b9ffd9; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 4px), rgba(1, 7, 5, 0.72); font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.82rem; line-height: 1.55; } .rb-page .scan-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 18px; padding: 0 18px; border: 1px solid rgba(255, 185, 63, 0.86); border-radius: 6px; color: #090909; background: linear-gradient(180deg, #ffd363, var(--plasma)); font-weight: 950; box-shadow: 0 0 24px rgba(255, 185, 63, 0.24); } .rb-page .scan-button:hover { filter: brightness(1.05); color: #090909; } /* ========================================================================== DOCS SUB-PAGE READER SKIN Sub-pages (checks / getting-started / improving-your-score / understanding-your-report / glossary / api) keep their full DaisyUI/Tailwind markup, schema, and Jinja untouched. We only switch their {% extends %} to rebrand_base, opt out of asteroids, and wrap {% block content %} in .docs-reader. These scoped overrides re-skin the light Tailwind utilities onto the Mission Control dark surface — same technique as the scan_form re-skin above. Nothing here leaks past .rb-page .docs-reader. ========================================================================== */ .rb-page .docs-reader { margin: 30px auto 0; color: var(--text); } .rb-page .docs-reader h1, .rb-page .docs-reader h2, .rb-page .docs-reader h3, .rb-page .docs-reader h4, .rb-page .docs-reader .text-brand-dark, .rb-page .docs-reader strong.text-brand-dark { color: #f7fbff; } .rb-page .docs-reader h1 { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05; } .rb-page .docs-reader h2 { font-size: 1.6rem; } .rb-page .docs-reader h3 { font-size: 1.05rem; } .rb-page .docs-reader p, .rb-page .docs-reader li, .rb-page .docs-reader td, .rb-page .docs-reader .text-brand-muted, .rb-page .docs-reader .text-brand-dark\/50, .rb-page .docs-reader .text-brand-dark\/60, .rb-page .docs-reader .text-brand-dark\/70, .rb-page .docs-reader .text-brand-dark\/80 { color: #c2d0e2; } .rb-page .docs-reader .text-brand-muted, .rb-page .docs-reader .text-brand-dark\/50 { color: var(--muted); } .rb-page .docs-reader a { color: var(--ion); } .rb-page .docs-reader a:hover { text-decoration: underline; } .rb-page .docs-reader .text-brand-primary { color: var(--ion); } .rb-page .docs-reader .text-brand-secondary { color: var(--plasma); } /* Surfaces: white/base cards become dark manual panels */ .rb-page .docs-reader .card, .rb-page .docs-reader .bg-white, .rb-page .docs-reader .bg-base-100, .rb-page .docs-reader .bg-base-200 { border: 1px solid rgba(112, 244, 255, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%), rgba(8, 13, 21, 0.78); color: var(--text); box-shadow: none; } .rb-page .docs-reader .border-base-200, .rb-page .docs-reader .border-base-300, .rb-page .docs-reader .border-brand-primary\/10, .rb-page .docs-reader .border-brand-secondary\/20, .rb-page .docs-reader .border-brand-muted\/40 { border-color: rgba(112, 244, 255, 0.16); } /* Info callouts (e.g. "Free scan runs N of these checks") */ .rb-page .docs-reader .bg-brand-secondary\/10 { border: 1px solid rgba(255, 185, 63, 0.28); background: rgba(255, 185, 63, 0.07); color: var(--text); } .rb-page .docs-reader .bg-brand-primary\/10, .rb-page .docs-reader .bg-brand-accent\/20 { background: rgba(88, 233, 255, 0.1); } /* Badges */ .rb-page .docs-reader .badge { border: 1px solid rgba(112, 244, 255, 0.28); background: rgba(88, 233, 255, 0.08); color: var(--ion); } .rb-page .docs-reader .badge.bg-brand-accent\/20, .rb-page .docs-reader .badge.bg-brand-primary\/10 { border-color: rgba(255, 185, 63, 0.4); background: rgba(255, 185, 63, 0.1); color: var(--plasma); } .rb-page .docs-reader .badge-outline { background: transparent; color: var(--muted); } /* Code / pre / tables (API reference) */ .rb-page .docs-reader code, .rb-page .docs-reader pre, .rb-page .docs-reader kbd { border: 1px solid rgba(57, 255, 155, 0.16); background: rgba(1, 7, 5, 0.66); color: #b9ffd9; } .rb-page .docs-reader pre code { border: 0; background: transparent; } .rb-page .docs-reader table { border-color: rgba(112, 244, 255, 0.16); } .rb-page .docs-reader th { color: #f7fbff; background: rgba(8, 13, 21, 0.7); } .rb-page .docs-reader th, .rb-page .docs-reader td { border-color: rgba(112, 244, 255, 0.12); } /* Bottom CTA partial (bg-brand-primary block + gold btn) — shared partial, never edited; re-skinned only inside the docs reader scope. */ .rb-page .docs-reader .bg-brand-primary { border: 1px solid rgba(112, 244, 255, 0.22); background: linear-gradient(135deg, rgba(255, 185, 63, 0.1), transparent 40%), rgba(8, 13, 21, 0.9); } .rb-page .docs-reader .bg-brand-primary .text-brand-light, .rb-page .docs-reader .bg-brand-primary h2 { color: #f7fbff; } .rb-page .docs-reader .bg-brand-primary .text-brand-light\/70 { color: var(--muted); } .rb-page .docs-reader .btn.bg-brand-accent { border: 1px solid rgba(255, 185, 63, 0.95); background: linear-gradient(180deg, #ffd466, #ff9f2d); color: #060810; box-shadow: 0 0 24px rgba(255, 185, 63, 0.2); } .rb-page .docs-reader .btn.bg-brand-accent:hover { filter: brightness(1.05); } /* ========================================================================== BLOG LISTING — "Field transmissions" relay board + newsprint dispatches Scoped to .rb-page. All classes are page-specific (.blog-hero NOT the shared .hero, .blog-section-title NOT .section-title) so the approved index/pricing/FAQ/docs pages stay byte-for-byte. Reuses shared .eyebrow / .headline-accent / .hero-copy. Listing opts out of the asteroid field; its motion piece is the JS-driven radio-tower relay board. ========================================================================== */ .rb-page .blog-hero { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(430px, 1fr); gap: 34px; align-items: center; margin-top: 38px; padding: 38px; border: 1px solid rgba(112, 244, 255, 0.22); border-radius: 8px; background: linear-gradient(135deg, rgba(88, 233, 255, 0.12), transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 58%), rgba(8, 13, 21, 0.86); } .rb-page .blog-hero h1 { max-width: 650px; margin: 0; font-size: clamp(2.75rem, 5.4vw, 4.35rem); line-height: 1; } .rb-page .blog-hero .hero-copy { max-width: 630px; margin: 20px 0 0; color: #c7d6e8; font-size: 1.05rem; line-height: 1.58; } .rb-page .blog-relay-board { position: relative; min-height: 430px; overflow: hidden; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 8px; background: linear-gradient(90deg, rgba(5, 7, 13, 0.8), rgba(5, 7, 13, 0.2) 48%, rgba(5, 7, 13, 0.72)), url("/static/img/rebrand/radio-towers-loc.jpg") center 39% / 121% auto, radial-gradient(circle at 50% 46%, rgba(217, 22, 22, 0.16), transparent 30%), repeating-linear-gradient(90deg, rgba(112, 244, 255, 0.05) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(112, 244, 255, 0.035) 0 1px, transparent 1px 34px), rgba(3, 7, 10, 0.84); box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.48); } .rb-page .blog-relay-board::before, .rb-page .blog-relay-board::after { position: absolute; content: ""; pointer-events: none; } .rb-page .blog-relay-board::before { inset: 0; opacity: 0.78; background: repeating-linear-gradient(0deg, rgba(168, 255, 122, 0.026) 0 1px, transparent 1px 7px), radial-gradient(circle at 50% 50%, transparent 0 54%, rgba(0, 0, 0, 0.52) 100%); mix-blend-mode: screen; } .rb-page .blog-relay-board::after { inset: 0; background: linear-gradient(90deg, transparent, rgba(88, 233, 255, 0.08), transparent), repeating-linear-gradient(90deg, rgba(112, 244, 255, 0.04) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(112, 244, 255, 0.035) 0 1px, transparent 1px 34px); } .rb-page .blog-tower-beacon { position: absolute; left: var(--dot-x, var(--x)); top: var(--dot-y, var(--y)); z-index: 2; width: 10px; aspect-ratio: 1; border-radius: 50%; background: var(--signal); box-shadow: 0 0 18px var(--signal); transform: translate(-50%, -50%); } .rb-page .blog-tower-beacon::before { position: absolute; left: 50%; top: 50%; width: 2px; height: var(--stem, 185px); content: ""; background: linear-gradient(var(--signal), transparent); opacity: 0.34; transform: translate(-50%, 0); } .rb-page .blog-signal-wave { position: absolute; left: 50%; top: 50%; width: 22px; aspect-ratio: 1; border: 1px solid var(--signal); border-radius: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.25); will-change: opacity, transform; } .rb-page .blog-section-title { display: flex; align-items: center; gap: 14px; margin: 46px 0 18px; font-size: 1.6rem; } .rb-page .blog-section-title::before { width: 84px; height: 42px; content: ""; border: 0; border-radius: 0; background: url("/static/img/rebrand/rolled-newspaper-icon-crop.png") center / contain no-repeat; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.58)) sepia(0.08); transform: rotate(-4deg); } .rb-page .blog-section-title::after { width: min(180px, 24vw); height: 1px; content: ""; background: linear-gradient(90deg, rgba(255, 185, 63, 0.52), rgba(88, 233, 255, 0.16), transparent); } .rb-page .blog-post-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: 16px; margin-bottom: 58px; } .rb-page .blog-feature-post, .rb-page .blog-post-card { position: relative; isolation: isolate; display: block; overflow: hidden; padding: 22px; border: 1px solid rgba(112, 244, 255, 0.18); border-radius: 8px; color: inherit; text-decoration: none; background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--ion)) 14%, transparent), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 58%), rgba(8, 13, 21, 0.86); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.78), 0 0 18px rgba(0, 0, 0, 0.55); transition: border-color 0.18s ease, transform 0.18s ease; } .rb-page .blog-feature-post { /* Stretches to the card-column height (front-page broadsheet). Content is top-aligned (align-content:start); the lede teaser fills the upper band and the newsprint texture below is the intended newspaper motif, not dead space. */ min-height: 440px; display: grid; align-content: start; } .rb-page .blog-post-card:hover { border-color: color-mix(in srgb, var(--accent, var(--ion)) 60%, transparent); transform: translateY(-2px); } .rb-page .blog-post-card:focus-visible, .rb-page .blog-feature-post h2 a:focus-visible, .rb-page .blog-feature-post .blog-read-cue:focus-visible { outline: 2px solid var(--accent, var(--ion)); outline-offset: 3px; } .rb-page .blog-feature-post h2 a { color: inherit; text-decoration: none; } .rb-page .blog-feature-post h2 a:hover { color: var(--accent, var(--ion)); } .rb-page .blog-post-list { display: grid; gap: 16px; } .rb-page .blog-post-card::before, .rb-page .blog-feature-post::before { position: absolute; inset: 0 auto 0 0; width: 3px; z-index: 2; content: ""; background: var(--accent, var(--ion)); box-shadow: 0 0 22px var(--accent, var(--ion)); } .rb-page .blog-post-card::after, .rb-page .blog-feature-post::after { position: absolute; inset: 0; z-index: 0; content: ""; background: linear-gradient( 90deg, rgba(5, 8, 14, var(--news-shade-left, 0.78)), rgba(5, 8, 14, var(--news-shade-mid, 0.44)) 46%, rgba(5, 8, 14, var(--news-shade-right, 0.84)) ), radial-gradient(circle at var(--news-glow-x, 18%) var(--news-glow-y, 32%), color-mix(in srgb, var(--accent, var(--ion)) 28%, transparent), transparent 42%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 4px), var(--news-image) var(--news-pos, center) / var(--news-size, 190%) no-repeat; background-blend-mode: normal, screen, overlay, screen; filter: grayscale(1) contrast(1.18); opacity: var(--news-opacity, 0.62); transform: rotate(var(--news-rotate, 0deg)) scale(var(--news-layer-scale, 1)); transform-origin: center; } .rb-page .blog-feature-post::after { inset: -24px; } .rb-page .blog-post-card > *, .rb-page .blog-feature-post > * { position: relative; z-index: 1; } .rb-page .blog-post-meta { margin: 0 0 12px; color: var(--accent, var(--ion)); font-family: "Courier New", ui-monospace, monospace; font-size: 0.78rem; font-weight: 950; letter-spacing: 0.13em; line-height: 1.3; text-transform: uppercase; } .rb-page .blog-post-meta time { font-variant-numeric: tabular-nums; } .rb-page .blog-feature-post h2, .rb-page .blog-post-card h3 { margin: 0 0 10px; font-family: Georgia, "Times New Roman", Times, serif; letter-spacing: 0; color: var(--bone, #f0eadf); } .rb-page .blog-feature-post h2 { font-size: 2rem; line-height: 1.02; max-width: 560px; } .rb-page .blog-post-card h3 { font-size: 1.18rem; line-height: 1.12; } .rb-page .blog-feature-post p:not(.blog-post-meta), .rb-page .blog-post-card p:not(.blog-post-meta) { margin: 0; color: var(--paper, #c8d4e8); font-family: Georgia, "Times New Roman", Times, serif; line-height: 1.52; } .rb-page .blog-feature-teaser { margin: 0; } /* Match the post page's reading rhythm (.blog-prose p): looser line-height and a full paragraph gap. The tighter newspaper leading felt cramped here next to the real article. Serif face is kept (newspaper motif). Selector intentionally carries .blog-feature-post too, to outrank `.blog-feature-post p:not(.blog-post-meta)` (margin:0; line-height:1.52). */ .rb-page .blog-feature-post .blog-feature-teaser p { margin: 0 0 1rem; line-height: 1.75; } .rb-page .blog-feature-post .blog-feature-teaser p:last-child { margin-bottom: 0; } .rb-page .blog-feature-teaser a { color: var(--accent, var(--ion)); text-decoration: underline; text-underline-offset: 2px; } .rb-page .blog-read-cue { display: inline-block; justify-self: start; margin-top: 16px; color: var(--accent, var(--ion)); font-family: "Courier New", ui-monospace, monospace; font-size: 0.78rem; font-weight: 950; letter-spacing: 0.13em; text-decoration: none; text-transform: uppercase; } .rb-page .blog-read-cue:hover { text-decoration: underline; text-underline-offset: 3px; } .rb-page .blog-empty { margin: 40px 0 80px; color: var(--muted); font-size: 1rem; } @media (max-width: 980px) { .rb-page .blog-hero, .rb-page .blog-post-layout { grid-template-columns: 1fr; } .rb-page .blog-hero { padding: 34px 28px; } } @media (max-width: 620px) { .rb-page .blog-hero { margin-top: 22px; padding: 32px 28px; } .rb-page .blog-hero h1 { font-size: 2.55rem; } .rb-page .blog-relay-board { min-height: 340px; background-position: center 39%; background-size: 126% auto; } .rb-page .blog-tower-beacon { --stem: 135px; } .rb-page .blog-post-meta { font-size: 0.72rem; } .rb-page .blog-feature-post h2 { font-size: 1.55rem; } } /* ========================================================================== BLOG POST DETAIL READER SKIN post.html keeps its full Tailwind/DaisyUI markup, Article JSON-LD, OG/article meta and inline .blog-prose styles untouched. We only switch {% extends %} to rebrand_base (asteroids stay ON, like docs sub-pages) and wrap {% block content %} in .blog-reader. These scoped overrides re-skin the light prose + utilities onto the Mission Control dark surface — same technique as the docs-reader skin. Nothing here leaks past .rb-page .blog-reader. Specificity (0,3,1) beats the inline `.blog-prose x` (0,1,1) stylesheet, so dark theming wins without edits. ========================================================================== */ .rb-page .blog-reader { margin: 24px auto 0; color: var(--text); } .rb-page .blog-reader .text-brand-dark, .rb-page .blog-reader h1, .rb-page .blog-reader .blog-prose h2, .rb-page .blog-reader .blog-prose h3, .rb-page .blog-reader .blog-prose h4, .rb-page .blog-reader .blog-prose strong { color: #f7fbff; } .rb-page .blog-reader .text-brand-muted, .rb-page .blog-reader .text-brand-dark\/50, .rb-page .blog-reader .text-brand-dark\/80 { color: var(--muted); } .rb-page .blog-reader .blog-prose, .rb-page .blog-reader .blog-prose p, .rb-page .blog-reader .blog-prose li, .rb-page .blog-reader .blog-prose td { color: #c2d0e2; } .rb-page .blog-reader a, .rb-page .blog-reader .blog-prose a { color: var(--ion); } .rb-page .blog-reader .blog-prose a:hover { color: var(--plasma); } /* Category badge (Tailwind bg-brand-primary/10 + text-brand-primary) */ .rb-page .blog-reader .bg-brand-primary\/10 { border: 1px solid rgba(88, 233, 255, 0.28); background: rgba(88, 233, 255, 0.1); } .rb-page .blog-reader .text-brand-primary { color: var(--ion); } .rb-page .blog-reader .hover\:text-brand-dark:hover, .rb-page .blog-reader .text-brand-dark\/50:hover { color: #f7fbff; } /* Prose surfaces: code / pre / blockquote / tables / rule */ .rb-page .blog-reader .blog-prose code { border: 1px solid rgba(57, 255, 155, 0.16); background: rgba(1, 7, 5, 0.66); color: #b9ffd9; } .rb-page .blog-reader .blog-prose pre { border: 1px solid rgba(57, 255, 155, 0.16); background: rgba(1, 7, 5, 0.78); color: #d9ffec; } .rb-page .blog-reader .blog-prose pre code { border: 0; background: transparent; color: inherit; } .rb-page .blog-reader .blog-prose blockquote { border-left: 3px solid var(--ion); color: var(--muted); } .rb-page .blog-reader .blog-prose hr { border-top: 1px solid rgba(112, 244, 255, 0.16); } .rb-page .blog-reader .blog-prose th { color: #f7fbff; background: rgba(8, 13, 21, 0.7); border-bottom-color: rgba(112, 244, 255, 0.24); } .rb-page .blog-reader .blog-prose td { border-bottom-color: rgba(112, 244, 255, 0.12); } .rb-page .blog-reader .blog-prose hr ~ ul li { color: var(--muted); } /* Bottom CTA aside (bg-brand-primary block + gold btn) */ .rb-page .blog-reader .bg-brand-primary { border: 1px solid rgba(112, 244, 255, 0.22); background: linear-gradient(135deg, rgba(255, 185, 63, 0.1), transparent 40%), rgba(8, 13, 21, 0.9); } .rb-page .blog-reader .bg-brand-primary h2, .rb-page .blog-reader .text-brand-light { color: #f7fbff; } .rb-page .blog-reader .text-brand-light\/70 { color: var(--muted); } .rb-page .blog-reader .btn.bg-brand-accent { border: 1px solid rgba(255, 185, 63, 0.95); background: linear-gradient(180deg, #ffd466, #ff9f2d); color: #060810; box-shadow: 0 0 24px rgba(255, 185, 63, 0.2); } .rb-page .blog-reader .btn.bg-brand-accent:hover { filter: brightness(1.05); } /* ========================================================================== DASHBOARD ("Mission Control" flight console) + all 18 authenticated sub-pages. Visual design ported from scratch/.../dashboard.html (inspiration only — every real widget, HTMX endpoint, Jinja conditional and inline JS hook in the live templates is preserved). EVERYTHING here is scoped under `.rb-page .dash-shell`. `.dash-shell` is set only on the dashboard
by dashboard_base.html, so the approved index / pricing / FAQ / docs / blog page groups are byte-for-byte unaffected. The block has two halves: 1. Bespoke Mission Control component classes (.side-panel, .ops-head, .panel, .domain-table ...) used by the ported markup. 2. A scoped re-skin of the DaisyUI/Tailwind primitives the 17 sub-pages and HTMX partials still emit (.card, .btn, .badge, .alert, .table, .input, .menu, .tabs, .stat ...) so nothing renders dark-on-dark or unstyled even where bespoke markup was not rebuilt. ========================================================================== */ .rb-page .dash-shell { --dash-line: rgba(112, 244, 255, 0.18); --dash-line-strong: rgba(112, 244, 255, 0.34); --dash-dim: #718198; --dash-card: rgba(7, 11, 18, 0.86); --dash-card-2: rgba(9, 14, 23, 0.74); display: block; width: 100%; max-width: none; margin: 0; padding: 0; } /* ---- Shell layout ------------------------------------------------------- */ .rb-page .dash-shell .dash-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); width: min(1360px, calc(100% - 48px)); margin: 0 auto; } .rb-page .dash-shell .dash-main { min-width: 0; padding: 34px 0 56px 24px; } /* ---- Side navigation ---------------------------------------------------- */ .rb-page .dash-shell .side-nav { min-height: calc(100vh - 76px); padding: 28px 14px 36px 0; border-right: 1px solid rgba(112, 244, 255, 0.12); } .rb-page .dash-shell .side-panel { position: sticky; top: 18px; overflow: hidden; padding: 14px 10px; border: 1px solid rgba(112, 244, 255, 0.16); border-radius: 8px; background: linear-gradient(90deg, rgba(88, 233, 255, 0.052), transparent 38%), rgba(7, 11, 18, 0.74); } .rb-page .dash-shell .side-panel::after { position: absolute; right: -58px; bottom: -72px; width: 150px; aspect-ratio: 1; content: ""; border: 1px solid rgba(216, 225, 239, 0.12); border-radius: 50%; background: radial-gradient(circle, rgba(216, 225, 239, 0.08), transparent 62%); pointer-events: none; } .rb-page .dash-shell .nav-group { position: relative; z-index: 1; margin-bottom: 18px; } .rb-page .dash-shell .nav-group:last-child { margin-bottom: 0; } .rb-page .dash-shell .nav-label { margin: 0 0 8px; padding: 0 8px; color: rgba(174, 187, 208, 0.72); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; } .rb-page .dash-shell .side-link { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 36px; margin-bottom: 2px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; color: #dce7f5; font-size: 0.95rem; font-weight: 730; cursor: pointer; } .rb-page .dash-shell .side-link.is-active, .rb-page .dash-shell .side-link.active { border-color: rgba(88, 233, 255, 0.28); background: linear-gradient(90deg, rgba(88, 233, 255, 0.12), rgba(217, 22, 22, 0.06)), rgba(255, 255, 255, 0.025); box-shadow: inset 3px 0 0 var(--blood); } .rb-page .dash-shell .side-link:hover { border-color: rgba(112, 244, 255, 0.18); background: rgba(88, 233, 255, 0.055); } .rb-page .dash-shell .side-link.is-disabled { opacity: 0.4; pointer-events: none; } .rb-page .dash-shell .side-link .geo-icon { width: 22px; height: 22px; } /* Org switcher (form-based, preserves POST /dashboard/switch-org) */ .rb-page .dash-shell .side-org { position: relative; z-index: 1; margin-bottom: 18px; } .rb-page .dash-shell .side-org summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 7px 10px; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 6px; color: var(--text); background: rgba(88, 233, 255, 0.05); font-size: 0.9rem; font-weight: 760; list-style: none; cursor: pointer; } .rb-page .dash-shell .side-org summary::-webkit-details-marker { display: none; } .rb-page .dash-shell .side-org[open] summary { border-color: rgba(88, 233, 255, 0.42); } .rb-page .dash-shell .side-org .side-org-menu { margin-top: 6px; padding: 6px; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 6px; background: rgba(5, 8, 13, 0.96); } .rb-page .dash-shell .side-org .side-org-menu form { margin: 0; } .rb-page .dash-shell .side-org .side-org-menu button { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 5px; color: #dce7f5; background: transparent; text-align: left; font-size: 0.88rem; cursor: pointer; } .rb-page .dash-shell .side-org .side-org-menu button:hover { background: rgba(88, 233, 255, 0.08); } .rb-page .dash-shell .side-org .side-org-menu button.is-active { color: var(--plasma); font-weight: 820; } /* ---- Ops head (page title + status chips) ------------------------------ */ .rb-page .dash-shell .ops-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: end; margin-bottom: 24px; } .rb-page .dash-shell .dash-breadcrumb { margin: 0 0 13px; color: var(--dash-dim); font-size: 0.86rem; } .rb-page .dash-shell .dash-breadcrumb a { color: var(--dash-dim); } .rb-page .dash-shell .dash-breadcrumb a:hover { color: var(--ion); } .rb-page .dash-shell .ops-head h1 { margin: 0; font-size: 3rem; line-height: 1; letter-spacing: 0; color: var(--text); } .rb-page .dash-shell .ops-head .ops-sub { max-width: 780px; margin: 12px 0 0; color: #aebbd0; font-size: 1rem; line-height: 1.5; } .rb-page .dash-shell .base-status { display: grid; grid-template-columns: repeat(3, minmax(96px, 1fr)); gap: 8px; min-width: 360px; } .rb-page .dash-shell .status-chip { position: relative; overflow: hidden; min-height: 74px; padding: 11px; border: 1px solid color-mix(in srgb, var(--chip, var(--ion)) 34%, rgba(112, 244, 255, 0.14)); border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--chip, var(--ion)) 15%, transparent), transparent 52%), rgba(5, 8, 13, 0.74); } .rb-page .dash-shell .status-chip::after { position: absolute; top: 0; right: 24%; width: 20px; height: 100%; content: ""; background: color-mix(in srgb, var(--chip, var(--ion)) 18%, transparent); transform: skewX(-22deg); } .rb-page .dash-shell .status-chip span, .rb-page .dash-shell .status-chip strong { position: relative; z-index: 1; display: block; } .rb-page .dash-shell .status-chip span { color: #aebbd0; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.12em; } .rb-page .dash-shell .status-chip strong { margin-top: 9px; font-size: 1.28rem; color: var(--text); } /* ---- Panels (shared card chrome for landing + sub-pages) --------------- */ .rb-page .dash-shell .panel, .rb-page .dash-shell .command-grid > .panel { position: relative; overflow: hidden; border: 1px solid rgba(112, 244, 255, 0.18); border-radius: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 54%), rgba(7, 11, 18, 0.86); box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22); } .rb-page .dash-shell .command-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(380px, 0.86fr); gap: 20px; margin-bottom: 20px; } .rb-page .dash-shell .mid-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 20px; } .rb-page .dash-shell .panel-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--ion); font-size: 0.72rem; font-weight: 950; letter-spacing: 0.16em; text-transform: uppercase; } .rb-page .dash-shell .panel-kicker::before { width: 9px; aspect-ratio: 1; content: ""; background: var(--blood); box-shadow: 0 0 14px rgba(217, 22, 22, 0.72); } .rb-page .dash-shell .panel-radar { position: absolute; right: var(--radar-right, -28px); bottom: var(--radar-bottom, -34px); z-index: 0; width: var(--radar-size, 190px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--radar-color, var(--plasma)) 18%, transparent); border-radius: 50%; opacity: var(--radar-opacity, 0.7); pointer-events: none; background: linear-gradient(90deg, transparent 49.6%, color-mix(in srgb, var(--radar-color, var(--plasma)) 11%, transparent) 50%, transparent 50.4%), linear-gradient(0deg, transparent 49.6%, color-mix(in srgb, var(--radar-color, var(--plasma)) 11%, transparent) 50%, transparent 50.4%), radial-gradient(circle, transparent 0 48%, color-mix(in srgb, var(--radar-color, var(--plasma)) 12%, transparent) 49% 51%, transparent 52%); } .rb-page .dash-shell .panel-radar::after { position: absolute; inset: 0; border-radius: inherit; content: ""; background: conic-gradient(from 22deg, color-mix(in srgb, var(--radar-color, var(--plasma)) 24%, transparent) 0 15%, transparent 15% 100%); transform-origin: 50% 50%; animation: rbDashRadarSweep var(--radar-speed, 48s) linear infinite; } .rb-page .dash-shell .launch-radar { --radar-color: var(--plasma); --radar-speed: 42s; --radar-size: 190px; } .rb-page .dash-shell .telemetry-radar { --radar-color: var(--matrix); --radar-speed: 58s; --radar-size: 150px; --radar-right: -44px; --radar-bottom: -48px; --radar-opacity: 0.32; } .rb-page .dash-shell .roster-radar { --radar-color: var(--ion); --radar-speed: 74s; --radar-size: 210px; --radar-right: 12%; --radar-bottom: -116px; --radar-opacity: 0.2; } .rb-page .dash-shell .launch-panel { display: grid; grid-template-rows: auto auto 1fr; min-height: 356px; padding: 22px; border-color: rgba(255, 185, 63, 0.3); background: linear-gradient(90deg, rgba(255, 185, 63, 0.095), transparent 34%), repeating-linear-gradient(90deg, rgba(255, 185, 63, 0.025) 0 1px, transparent 1px 26px), linear-gradient(180deg, rgba(255, 255, 255, 0.052), transparent 54%), rgba(7, 11, 18, 0.9); box-shadow: 0 0 34px rgba(255, 185, 63, 0.08), 0 20px 42px rgba(0, 0, 0, 0.24); } .rb-page .dash-shell .launch-panel > div, .rb-page .dash-shell .launch-panel > form { position: relative; z-index: 1; } .rb-page .dash-shell .launch-panel .panel-kicker { color: var(--plasma); } .rb-page .dash-shell .launch-panel .panel-kicker::before { background: var(--plasma); box-shadow: 0 0 14px rgba(255, 185, 63, 0.72); } .rb-page .dash-shell .launch-panel h2, .rb-page .dash-shell .recon-panel h2, .rb-page .dash-shell .domain-panel h2, .rb-page .dash-shell .panel > h2, .rb-page .dash-shell .panel .panel-title { margin: 0; font-size: 1.45rem; color: var(--text); } .rb-page .dash-shell .launch-panel h2 { font-size: 1.7rem; } .rb-page .dash-shell .launch-panel p, .rb-page .dash-shell .recon-panel p { margin: 8px 0 0; color: #aebbd0; line-height: 1.46; } /* Live scan_form partial sits inside the launch panel; its DaisyUI markup is already re-skinned by the .scan-card-inner block above. Just space it. */ .rb-page .dash-shell .launch-panel .scan-form-host { position: relative; z-index: 1; align-self: start; margin-top: 24px; } .rb-page .dash-shell .recon-panel { position: relative; min-height: 356px; padding: 22px; background: linear-gradient(90deg, rgba(5, 8, 13, 0.94) 0 48%, rgba(5, 8, 13, 0.76)), linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 54%), rgba(7, 11, 18, 0.86); } .rb-page .dash-shell .recon-panel::before { position: absolute; inset: 0; z-index: 0; content: ""; background: linear-gradient(90deg, rgba(5, 8, 13, 0.36), rgba(5, 8, 13, 0.08)), url("/static/img/rebrand/mission-control-apollo13.jpg") 56% 72% / cover; filter: grayscale(1) contrast(1.08) brightness(0.86); opacity: 0.42; pointer-events: none; } .rb-page .dash-shell .recon-panel::after { position: absolute; inset: 0; z-index: 1; content: ""; background: repeating-linear-gradient(0deg, rgba(168, 255, 122, 0.026) 0 1px, transparent 1px 7px), linear-gradient(90deg, rgba(5, 8, 13, 0.76) 0 48%, rgba(5, 8, 13, 0.14)); pointer-events: none; } .rb-page .dash-shell .recon-panel > * { position: relative; z-index: 4; } .rb-page .dash-shell .recon-panel .recon-copy { width: min(72%, 380px); } .rb-page .dash-shell .score-stack { display: grid; gap: 10px; margin-top: 20px; } .rb-page .dash-shell .score-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 40px; gap: 10px; align-items: center; color: #aebbd0; font-size: 0.83rem; font-weight: 780; } .rb-page .dash-shell .score-row strong { color: var(--text); text-align: right; } .rb-page .dash-shell .score-track { height: 9px; border: 1px solid rgba(112, 244, 255, 0.18); border-radius: 999px; background: rgba(88, 233, 255, 0.06); } .rb-page .dash-shell .score-track span { display: block; width: var(--value, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent, var(--ion)), color-mix(in srgb, var(--accent, var(--ion)) 34%, #ffffff)); box-shadow: 0 0 16px color-mix(in srgb, var(--accent, var(--ion)) 34%, transparent); } /* ---- Domain roster panel + table --------------------------------------- */ .rb-page .dash-shell .domain-panel { padding: 0; } .rb-page .dash-shell .domain-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px 14px; } .rb-page .dash-shell .domain-head h2 { font-size: 1.35rem; } .rb-page .dash-shell .domain-head .domain-count { color: #aebbd0; font-size: 0.86rem; } .rb-page .dash-shell .domain-table { position: relative; z-index: 1; width: 100%; border-collapse: collapse; font-size: 0.9rem; } .rb-page .dash-shell .domain-table th, .rb-page .dash-shell .domain-table td { padding: 11px 14px; border-top: 1px solid rgba(112, 244, 255, 0.1); text-align: right; color: var(--text); } .rb-page .dash-shell .domain-table thead th { border-top: 0; color: #aebbd0; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .rb-page .dash-shell .domain-table thead th .inline-flex { white-space: nowrap; flex-wrap: nowrap; } .rb-page .dash-shell .domain-table th:first-child, .rb-page .dash-shell .domain-table td:first-child { text-align: left; } .rb-page .dash-shell .domain-table tbody tr { background: rgba(255, 255, 255, 0.018); } .rb-page .dash-shell .domain-table tbody tr:hover { background: rgba(88, 233, 255, 0.05); } .rb-page .dash-shell .domain-table tbody tr.domain-child-row { background: rgba(255, 255, 255, 0.04); } .rb-page .dash-shell .domain-table tbody tr.domain-child-row td { color: #aebbd0; } .rb-page .dash-shell .domain-table .score-search { color: var(--plasma); font-weight: 800; } .rb-page .dash-shell .domain-table .score-visibility { color: #6fb4ff; font-weight: 800; } .rb-page .dash-shell .domain-table .score-trust { color: var(--matrix); font-weight: 800; } .rb-page .dash-shell .url-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid rgba(112, 244, 255, 0.14); border-radius: 999px; color: #aebbd0; background: rgba(255, 255, 255, 0.035); font-size: 0.74rem; } .rb-page .dash-shell .filter-row { position: relative; z-index: 1; padding: 0 20px 16px; } .rb-page .dash-shell .dash-empty { position: relative; z-index: 1; padding: 56px 20px; text-align: center; color: #aebbd0; } .rb-page .dash-shell .dash-empty h3 { margin: 0 0 8px; color: var(--text); font-size: 1.15rem; } /* ========================================================================== Scoped DaisyUI / Tailwind primitive re-skin (inside .dash-shell only). Re-skins whatever the 17 sub-pages and HTMX partials still emit so the whole authenticated app reads as Mission Control even where bespoke prototype markup was not hand-rebuilt. Loaded after tailwind.css, so for equal specificity these win on source order; for DaisyUI @layer rules any unlayered selector here wins outright (see collision neutralizer above). ========================================================================== */ /* Cards / panels */ .rb-page .dash-shell .card { border: 1px solid var(--dash-line); border-radius: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 54%), var(--dash-card); box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22); color: var(--text); } .rb-page .dash-shell .card .card-body { color: var(--text); } .rb-page .dash-shell .card-title { color: var(--text); } .rb-page .dash-shell .bg-base-100, .rb-page .dash-shell .bg-base-200, .rb-page .dash-shell .bg-base-300, .rb-page .dash-shell .bg-white { background-color: transparent; } .rb-page .dash-shell .card.bg-base-100, .rb-page .dash-shell .card.bg-white { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 54%), var(--dash-card); } /* Text colour utilities used throughout the sub-pages */ .rb-page .dash-shell .text-brand-dark, .rb-page .dash-shell .text-base-content, .rb-page .dash-shell h1, .rb-page .dash-shell h2, .rb-page .dash-shell h3, .rb-page .dash-shell h4 { color: var(--text); } .rb-page .dash-shell .text-base-content\/70, .rb-page .dash-shell .text-base-content\/60, .rb-page .dash-shell .text-base-content\/50, .rb-page .dash-shell .text-brand-muted, .rb-page .dash-shell .text-brand-muted\/60, .rb-page .dash-shell .opacity-60, .rb-page .dash-shell .text-base-content\/40 { color: #aebbd0; } .rb-page .dash-shell .text-brand-primary, .rb-page .dash-shell .link-primary { color: var(--ion); } .rb-page .dash-shell .text-brand-secondary { color: var(--plasma); } .rb-page .dash-shell .text-success { color: var(--matrix); } .rb-page .dash-shell .text-error, .rb-page .dash-shell .text-error\/80 { color: #ff6a5f; } .rb-page .dash-shell .text-warning, .rb-page .dash-shell .text-yellow-600 { color: var(--plasma); } .rb-page .dash-shell .border-base-200, .rb-page .dash-shell .border-base-300, .rb-page .dash-shell [class*="border-base-200"] { border-color: var(--dash-line); } /* Buttons */ .rb-page .dash-shell .btn { border-radius: 6px; border: 1px solid rgba(112, 244, 255, 0.22); background: rgba(88, 233, 255, 0.06); color: var(--text); font-weight: 760; text-transform: none; } .rb-page .dash-shell .btn:hover { background: rgba(88, 233, 255, 0.12); border-color: rgba(112, 244, 255, 0.36); } .rb-page .dash-shell .btn.bg-brand-primary, .rb-page .dash-shell .btn-primary, .rb-page .dash-shell .btn.bg-brand-accent { border: 1px solid rgba(255, 185, 63, 0.92); background: linear-gradient(180deg, #ffd363, var(--plasma)); color: #080a0d; box-shadow: 0 0 24px rgba(255, 185, 63, 0.2); } .rb-page .dash-shell .btn.bg-brand-primary:hover, .rb-page .dash-shell .btn-primary:hover, .rb-page .dash-shell .btn.bg-brand-accent:hover { filter: brightness(1.06); background: linear-gradient(180deg, #ffd363, var(--plasma)); } .rb-page .dash-shell .btn.bg-brand-secondary { border: 1px solid rgba(88, 233, 255, 0.5); background: rgba(88, 233, 255, 0.12); color: var(--text); } .rb-page .dash-shell .btn-outline { background: transparent; border: 1px solid rgba(112, 244, 255, 0.4); color: var(--text); } .rb-page .dash-shell .btn-ghost { background: transparent; border-color: transparent; } .rb-page .dash-shell .btn-ghost:hover { background: rgba(88, 233, 255, 0.08); } .rb-page .dash-shell .btn-error, .rb-page .dash-shell .btn.btn-error { border: 1px solid rgba(217, 22, 22, 0.6); background: rgba(217, 22, 22, 0.16); color: #ff8b80; } /* Badges */ .rb-page .dash-shell .badge { border-radius: 999px; border: 1px solid rgba(112, 244, 255, 0.26); background: rgba(88, 233, 255, 0.08); color: #cfe6ff; font-weight: 700; } .rb-page .dash-shell .badge-success { border-color: rgba(57, 255, 155, 0.5); background: rgba(57, 255, 155, 0.12); color: var(--matrix); } .rb-page .dash-shell .badge-warning { border-color: rgba(255, 185, 63, 0.5); background: rgba(255, 185, 63, 0.14); color: var(--plasma); } .rb-page .dash-shell .badge-error { border-color: rgba(217, 22, 22, 0.55); background: rgba(217, 22, 22, 0.16); color: #ff8b80; } .rb-page .dash-shell .badge-ghost { border-color: rgba(174, 187, 208, 0.28); background: rgba(255, 255, 255, 0.04); color: #aebbd0; } /* Alerts */ .rb-page .dash-shell .alert { border-radius: 8px; border: 1px solid rgba(112, 244, 255, 0.26); background: rgba(8, 16, 26, 0.86); color: var(--text); } .rb-page .dash-shell .alert-success { border-color: rgba(57, 255, 155, 0.42); background: rgba(57, 255, 155, 0.09); } .rb-page .dash-shell .alert-warning { border-color: rgba(255, 185, 63, 0.42); background: rgba(255, 185, 63, 0.09); } .rb-page .dash-shell .alert-error { border-color: rgba(217, 22, 22, 0.45); background: rgba(217, 22, 22, 0.1); } .rb-page .dash-shell .alert-info { border-color: rgba(88, 233, 255, 0.38); background: rgba(88, 233, 255, 0.08); } /* Tables */ .rb-page .dash-shell table.table { color: var(--text); } .rb-page .dash-shell table.table th { color: #aebbd0; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; } .rb-page .dash-shell table.table td, .rb-page .dash-shell table.table th { border-color: rgba(112, 244, 255, 0.1); } .rb-page .dash-shell table.table-zebra tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.035); } .rb-page .dash-shell table.table tbody tr:hover { background: rgba(88, 233, 255, 0.05); } /* Form controls */ .rb-page .dash-shell .input, .rb-page .dash-shell .select, .rb-page .dash-shell .textarea, .rb-page .dash-shell input[type="text"], .rb-page .dash-shell input[type="url"], .rb-page .dash-shell input[type="email"], .rb-page .dash-shell input[type="password"], .rb-page .dash-shell input[type="search"], .rb-page .dash-shell input[type="number"], .rb-page .dash-shell select, .rb-page .dash-shell textarea { border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 6px; background: rgba(3, 7, 12, 0.74); color: var(--text); } .rb-page .dash-shell .input:focus, .rb-page .dash-shell .select:focus, .rb-page .dash-shell .textarea:focus, .rb-page .dash-shell input:focus, .rb-page .dash-shell select:focus, .rb-page .dash-shell textarea:focus { border-color: rgba(88, 233, 255, 0.58); box-shadow: 0 0 0 3px rgba(88, 233, 255, 0.1); outline: 0; } .rb-page .dash-shell .input::placeholder, .rb-page .dash-shell input::placeholder, .rb-page .dash-shell textarea::placeholder { color: #5f6e83; } .rb-page .dash-shell label, .rb-page .dash-shell .label-text { color: #aebbd0; } .rb-page .dash-shell .checkbox, .rb-page .dash-shell .radio { border-color: rgba(112, 244, 255, 0.4); } .rb-page .dash-shell .checkbox:checked, .rb-page .dash-shell .toggle:checked { background-color: var(--ion); } .rb-page .dash-shell .toggle { border-color: rgba(112, 244, 255, 0.3); } /* Menus / tabs / steps / stats / breadcrumbs / dropdowns */ .rb-page .dash-shell .menu :where(li > *:not(ul):not(.menu-title)) { color: var(--text); border-radius: 6px; } .rb-page .dash-shell .menu :where(li > *:not(ul):not(.menu-title)):hover { background: rgba(88, 233, 255, 0.08); } .rb-page .dash-shell .menu :where(li > *.active), .rb-page .dash-shell .menu :where(li > *):active { background: rgba(88, 233, 255, 0.14); color: var(--text); } .rb-page .dash-shell .tabs .tab { color: #aebbd0; --tab-border-color: rgba(112, 244, 255, 0.2); } .rb-page .dash-shell .tabs .tab.tab-active, .rb-page .dash-shell .tabs .tab-active { color: var(--ion); border-color: var(--ion); } .rb-page .dash-shell .stat { border-color: rgba(112, 244, 255, 0.12); } .rb-page .dash-shell .stat-title { color: #aebbd0; } .rb-page .dash-shell .stat-value { color: var(--text); } .rb-page .dash-shell .stat-desc { color: #8896ad; } .rb-page .dash-shell .breadcrumbs { color: var(--dash-dim); } .rb-page .dash-shell .breadcrumbs a { color: var(--dash-dim); } .rb-page .dash-shell .breadcrumbs a:hover { color: var(--ion); } .rb-page .dash-shell .breadcrumbs li > *:last-child { color: #aebbd0; } .rb-page .dash-shell .dropdown-content, .rb-page .dash-shell .menu.dropdown-content { border: 1px solid rgba(112, 244, 255, 0.2); background: rgba(5, 8, 13, 0.97); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } .rb-page .dash-shell .skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04)); border-radius: 6px; } .rb-page .dash-shell .divider { color: #aebbd0; } .rb-page .dash-shell .divider::before, .rb-page .dash-shell .divider::after { background: rgba(112, 244, 255, 0.16); } .rb-page .dash-shell .link { color: var(--ion); } .rb-page .dash-shell .loading { color: var(--ion); } .rb-page .dash-shell .steps .step::before, .rb-page .dash-shell .steps .step::after { background-color: rgba(112, 244, 255, 0.2); color: var(--text); } .rb-page .dash-shell .steps .step-primary::before, .rb-page .dash-shell .steps .step-primary::after { background-color: var(--ion); } .rb-page .dash-shell .modal-box { border: 1px solid rgba(112, 244, 255, 0.22); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 54%), rgba(7, 11, 18, 0.97); color: var(--text); } .rb-page .dash-shell .collapse { border: 1px solid rgba(112, 244, 255, 0.16); border-radius: 8px; background: rgba(7, 11, 18, 0.7); } .rb-page .dash-shell .collapse-title { color: var(--text); } .rb-page .dash-shell .collapse-content { color: #aebbd0; } .rb-page .dash-shell .tooltip::before { background: rgba(5, 8, 13, 0.96); color: var(--text); border: 1px solid rgba(112, 244, 255, 0.24); } /* Progress / scan status partial */ .rb-page .dash-shell .progress { background: rgba(88, 233, 255, 0.08); } .rb-page .dash-shell .progress::-webkit-progress-bar { background: rgba(88, 233, 255, 0.08); } .rb-page .dash-shell .progress::-webkit-progress-value { background: var(--ion); } .rb-page .dash-shell .progress::-moz-progress-bar { background: var(--ion); } /* ---- Responsive collapse (mirrors the prototype breakpoints) ----------- */ @media (max-width: 1120px) { .rb-page .dash-shell .dash-layout { grid-template-columns: 1fr; } .rb-page .dash-shell .side-nav { min-height: auto; padding: 16px 0 0; border-right: 0; } .rb-page .dash-shell .side-panel { position: relative; top: auto; } .rb-page .dash-shell .dash-main { padding: 24px 0 48px; } .rb-page .dash-shell .command-grid { grid-template-columns: 1fr; } .rb-page .dash-shell .base-status { min-width: 0; } } @media (max-width: 760px) { .rb-page .dash-shell .dash-layout { width: min(100% - 28px, 1360px); } .rb-page .dash-shell .ops-head, .rb-page .dash-shell .base-status { grid-template-columns: 1fr; } .rb-page .dash-shell .ops-head h1 { font-size: 2.3rem; } .rb-page .dash-shell .recon-panel .recon-copy { width: 100%; } .rb-page .dash-shell .domain-panel { overflow-x: auto; } .rb-page .dash-shell .domain-table { min-width: 680px; } } @media (prefers-reduced-motion: reduce) { .rb-page .dash-shell .panel-radar::after { animation: none; } } /* ========================================================================== SCAN IN PROGRESS ("Recon flight active" scan console) Visual design ported from scratch/.../scan.html (inspiration only — every functional state of the live scan_progress.html is preserved: scanning / error / timeout / FLAGGED-swap, the DB tips carousel, the polling JS, the auth reassurance banner and the preflight override/cancel listeners). EVERYTHING here is scoped under `.rb-page .scan-shell`. `.scan-shell` is set ONLY on this page's
(block main_class = "site-shell scan-shell"), so the approved index/pricing/FAQ/docs/blog/dashboard pages — which never carry .scan-shell — stay byte-for-byte. Keyframes are rbScan*-prefixed to avoid colliding with the prototype's generic names. Asteroids stay ON (founder call 2026-05-17: keep the user entertained while the scan runs). ========================================================================== */ .rb-page .scan-shell { padding: 54px 0 0; } .rb-page .scan-shell .hidden { display: none !important; } .rb-page .scan-shell .scan-heading { max-width: 820px; margin: 0 auto 28px; text-align: center; } .rb-page .scan-shell .kicker { display: inline-grid; grid-template-columns: 9px auto; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--ion); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; } .rb-page .scan-shell .kicker::before { width: 9px; aspect-ratio: 1; content: ""; background: var(--blood); box-shadow: 0 0 16px var(--blood); } .rb-page .scan-shell .scan-heading h1 { margin: 0; color: #f9fbff; font-size: 3.6rem; line-height: 1; letter-spacing: 0; } .rb-page .scan-shell .scan-url { display: block; margin-top: 12px; color: var(--ion); font-size: 1.15rem; font-weight: 750; word-break: break-word; } .rb-page .scan-shell .scan-console-shell { width: min(920px, 100%); margin: 0 auto 26px; } .rb-page .scan-shell .scan-console { position: relative; display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 34px; min-height: 360px; padding: 32px; overflow: hidden; border: 1px solid rgba(112, 244, 255, 0.24); border-radius: 8px; background: linear-gradient(90deg, rgba(88, 233, 255, 0.1) 0 2px, transparent 2px), linear-gradient(180deg, rgba(88, 233, 255, 0.08), transparent 28%), linear-gradient(135deg, rgba(16, 25, 39, 0.96), rgba(8, 11, 18, 0.98)), repeating-linear-gradient(90deg, rgba(112, 244, 255, 0.045) 0 1px, transparent 1px 120px); box-shadow: 0 36px 90px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(231, 224, 210, 0.045); } .rb-page .scan-shell .scan-console::before { position: absolute; inset: 18px; content: ""; border: 1px solid rgba(112, 244, 255, 0.18); border-radius: 6px; pointer-events: none; } .rb-page .scan-shell .scan-console::after { position: absolute; left: 22px; width: min(350px, calc(100% - 44px)); z-index: 0; height: 2px; content: ""; background: linear-gradient(90deg, transparent, rgba(217, 22, 22, 0.9), transparent); animation: rbScanSweep 4.8s ease-in-out infinite; } .rb-page .scan-shell .lens-bay, .rb-page .scan-shell .scan-status { position: relative; z-index: 1; } .rb-page .scan-shell .lens-bay { display: grid; min-height: 352px; place-items: center; } .rb-page .scan-shell .scanner-array { position: relative; width: min(100%, 320px); aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 8px; background: radial-gradient(circle at 72% 31%, rgba(217, 22, 22, 0.2) 0 3%, transparent 4%), radial-gradient(circle at 34% 66%, rgba(88, 233, 255, 0.22) 0 4%, transparent 5%), linear-gradient(90deg, rgba(217, 22, 22, 0.16) 0 1px, transparent 1px 50%, rgba(88, 233, 255, 0.16) 50% calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(180deg, rgba(88, 233, 255, 0.1), transparent 34%), repeating-linear-gradient(90deg, rgba(112, 244, 255, 0.075) 0 1px, transparent 1px 32px), repeating-linear-gradient(0deg, rgba(112, 244, 255, 0.048) 0 1px, transparent 1px 32px), radial-gradient(circle at 58% 45%, rgba(217, 22, 22, 0.11), transparent 52%), rgba(5, 8, 13, 0.84); box-shadow: inset 0 0 40px rgba(88, 233, 255, 0.1), 0 0 44px rgba(88, 233, 255, 0.12); } .rb-page .scan-shell .scanner-array::before, .rb-page .scan-shell .scanner-array::after { position: absolute; content: ""; } .rb-page .scan-shell .scanner-array::before { inset: 16px; border: 1px solid rgba(112, 244, 255, 0.2); border-radius: 6px; } .rb-page .scan-shell .scanner-array::after { left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(88, 233, 255, 0.82), rgba(57, 255, 155, 0.72), transparent); box-shadow: 0 0 18px rgba(88, 233, 255, 0.5); animation: rbScanBeamSweep 3.8s ease-in-out infinite; } .rb-page .scan-shell .starfield { position: absolute; inset: 0; opacity: 0.82; background: radial-gradient(circle at 18% 24%, rgba(245, 248, 255, 0.92) 0 1px, transparent 2px), radial-gradient(circle at 33% 82%, rgba(88, 233, 255, 0.72) 0 1px, transparent 2px), radial-gradient(circle at 59% 18%, rgba(245, 248, 255, 0.72) 0 1px, transparent 2px), radial-gradient(circle at 86% 72%, rgba(255, 185, 63, 0.78) 0 1px, transparent 2px), radial-gradient(circle at 77% 42%, rgba(245, 248, 255, 0.62) 0 1px, transparent 2px); animation: rbScanStarDrift 9s linear infinite; } .rb-page .scan-shell .target-halo { position: absolute; top: 52px; right: 44px; width: 118px; aspect-ratio: 1; border: 1px solid rgba(112, 244, 255, 0.34); border-left-color: rgba(255, 185, 63, 0.74); border-radius: 50%; opacity: 0.86; filter: drop-shadow(0 0 12px rgba(88, 233, 255, 0.28)); animation: rbScanTargetLock 3.8s ease-in-out infinite; } .rb-page .scan-shell .scan-beam { position: absolute; top: 171px; left: 126px; width: 116px; height: 66px; background: linear-gradient(90deg, rgba(88, 233, 255, 0.62), rgba(57, 255, 155, 0.24), rgba(255, 185, 63, 0.08)), repeating-linear-gradient(90deg, rgba(245, 248, 255, 0.25) 0 2px, transparent 2px 16px); clip-path: polygon(0 50%, 100% 0, 100% 100%); filter: blur(0.2px) drop-shadow(0 0 16px rgba(88, 233, 255, 0.42)); opacity: 0.68; transform: rotate(-49deg); transform-origin: left center; animation: rbScanBeamPulse 2.4s ease-in-out infinite; } .rb-page .scan-shell .scout-ship, .rb-page .scan-shell .target-ship { position: absolute; display: block; filter: drop-shadow(0 0 18px rgba(88, 233, 255, 0.22)); } .rb-page .scan-shell .scout-ship { left: 46px; bottom: 82px; width: 104px; height: 58px; animation: rbScanScoutBob 4.6s ease-in-out infinite; } .rb-page .scan-shell .target-ship { top: 89px; right: 58px; width: 96px; height: 52px; transform: rotate(8deg); animation: rbScanTargetBob 5.2s ease-in-out infinite; } .rb-page .scan-shell .ship-body { position: absolute; inset: 13px 10px 10px; background: linear-gradient(180deg, rgba(245, 248, 255, 0.18), transparent 35%), linear-gradient(90deg, #152234, #0a101b 64%, #030509); border: 1px solid rgba(112, 244, 255, 0.38); clip-path: polygon(0 34%, 63% 0, 100% 50%, 63% 100%, 0 66%); box-shadow: inset 0 0 20px rgba(88, 233, 255, 0.14), 0 0 24px rgba(88, 233, 255, 0.16); } .rb-page .scan-shell .target-ship .ship-body { background: linear-gradient(180deg, rgba(255, 185, 63, 0.2), transparent 36%), linear-gradient(90deg, #251815, #101927 58%, #05070d); border-color: rgba(255, 185, 63, 0.44); transform: scaleX(-1); } .rb-page .scan-shell .ship-core, .rb-page .scan-shell .ship-window, .rb-page .scan-shell .ship-fin, .rb-page .scan-shell .ship-trail { position: absolute; content: ""; } .rb-page .scan-shell .ship-core { top: 23px; right: 23px; width: 18px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff2e6 0 12%, var(--blood) 13% 42%, #330000 44% 68%, transparent 70%); box-shadow: 0 0 16px rgba(217, 22, 22, 0.72), 0 0 20px rgba(88, 233, 255, 0.16); } .rb-page .scan-shell .target-ship .ship-core { left: 20px; right: auto; } .rb-page .scan-shell .ship-window { top: 22px; left: 32px; width: 20px; height: 7px; border-radius: 50%; background: rgba(88, 233, 255, 0.86); box-shadow: 0 0 14px rgba(88, 233, 255, 0.82); } .rb-page .scan-shell .target-ship .ship-window { left: auto; right: 28px; background: rgba(255, 185, 63, 0.88); box-shadow: 0 0 14px rgba(255, 185, 63, 0.62); } .rb-page .scan-shell .ship-fin.top, .rb-page .scan-shell .ship-fin.bottom { left: 16px; width: 34px; height: 15px; background: linear-gradient(90deg, rgba(88, 233, 255, 0.82), rgba(88, 233, 255, 0.1)); clip-path: polygon(0 100%, 100% 44%, 28% 0); } .rb-page .scan-shell .ship-fin.top { top: 4px; } .rb-page .scan-shell .ship-fin.bottom { bottom: 0; transform: scaleY(-1); } .rb-page .scan-shell .target-ship .ship-fin.top, .rb-page .scan-shell .target-ship .ship-fin.bottom { left: auto; right: 14px; background: linear-gradient(90deg, rgba(255, 185, 63, 0.1), rgba(255, 185, 63, 0.82)); transform: scaleX(-1); } .rb-page .scan-shell .target-ship .ship-fin.bottom { transform: scale(-1, -1); } .rb-page .scan-shell .ship-trail { top: 25px; left: -22px; width: 38px; height: 9px; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(88, 233, 255, 0.74)); filter: blur(1px); animation: rbScanExhaustPulse 1.7s ease-in-out infinite; } .rb-page .scan-shell .target-ship .ship-trail { left: auto; right: -20px; background: linear-gradient(90deg, rgba(255, 185, 63, 0.68), transparent); opacity: 0.58; } .rb-page .scan-shell .ship-scan-lines { position: absolute; top: 58px; right: 63px; width: 84px; height: 88px; background: repeating-linear-gradient(180deg, rgba(57, 255, 155, 0.7) 0 2px, transparent 2px 13px), linear-gradient(90deg, transparent, rgba(88, 233, 255, 0.12), transparent); opacity: 0.34; transform: skewX(-14deg); animation: rbScanLines 1.4s linear infinite; } .rb-page .scan-shell .scan-arc { position: absolute; inset: var(--inset); border: 2px solid transparent; border-top-color: var(--color); border-right-color: rgba(112, 244, 255, 0.16); border-radius: 50%; filter: drop-shadow(0 0 12px var(--color)); transform: rotate(var(--turn)); animation: rbScanArcSpin var(--speed) linear infinite; } .rb-page .scan-shell .scan-arc.one { --inset: 28px; --turn: 16deg; --color: var(--plasma); --speed: 8s; } .rb-page .scan-shell .scan-arc.two { --inset: 58px; --turn: 212deg; --color: var(--ion); --speed: 5.8s; animation-direction: reverse; } .rb-page .scan-shell .signal-node { position: absolute; top: 50%; left: 50%; width: 12px; aspect-ratio: 1; border: 1px solid rgba(231, 224, 210, 0.56); border-radius: 50%; background: var(--node); box-shadow: 0 0 18px var(--node); transform: rotate(var(--angle)) translateX(120px); animation: rbScanNodeOrbit var(--speed) linear infinite; } .rb-page .scan-shell .signal-node.one { --angle: 30deg; --speed: 6.6s; --node: var(--matrix); } .rb-page .scan-shell .signal-node.two { --angle: 166deg; --speed: 8.2s; --node: var(--plasma); } .rb-page .scan-shell .signal-node.three { --angle: 284deg; --speed: 7.4s; --node: var(--ion); } .rb-page .scan-shell .packet-lane { position: absolute; left: 26px; right: 26px; height: 1px; background: rgba(112, 244, 255, 0.14); } .rb-page .scan-shell .packet-lane.one { top: 28%; } .rb-page .scan-shell .packet-lane.two { bottom: 28%; } .rb-page .scan-shell .packet-lane::before { position: absolute; top: -3px; width: 34px; height: 7px; content: ""; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--ion), transparent); box-shadow: 0 0 14px rgba(88, 233, 255, 0.55); animation: rbScanPacketMove 2.6s linear infinite; } .rb-page .scan-shell .packet-lane.two::before { animation-delay: -1.2s; } .rb-page .scan-shell .scan-status { align-self: center; min-width: 0; } .rb-page .scan-shell .status-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .rb-page .scan-shell .phase { color: var(--ion); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; } .rb-page .scan-shell .percent { color: var(--plasma); font-size: 1.55rem; font-weight: 950; text-shadow: 0 0 18px rgba(255, 185, 63, 0.4); font-variant-numeric: tabular-nums; } .rb-page .scan-shell .scan-status h2 { margin: 0 0 8px; font-size: 1.7rem; line-height: 1.18; color: #f5f8ff; } .rb-page .scan-shell .scan-detail { margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; line-height: 1.5; } .rb-page .scan-shell .scan-detail:empty { margin: 0; } .rb-page .scan-shell .progress-track { position: relative; height: 14px; overflow: hidden; border: 1px solid rgba(112, 244, 255, 0.24); border-radius: 2px; background: rgba(255, 255, 255, 0.045); } .rb-page .scan-shell .progress-fill { width: 5%; height: 100%; background: linear-gradient(90deg, var(--ion), var(--matrix), var(--plasma)); box-shadow: 0 0 22px rgba(88, 233, 255, 0.45); transition: width 0.6s ease; } .rb-page .scan-shell .progress-track::after { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(255, 255, 255, 0.12) 16px 17px); pointer-events: none; } .rb-page .scan-shell .scan-transmission { margin-top: 24px; padding: 16px 18px; border: 1px solid rgba(112, 244, 255, 0.16); border-left: 4px solid var(--ion); border-radius: 6px; background: linear-gradient(90deg, rgba(88, 233, 255, 0.06), transparent), rgba(7, 7, 7, 0.8); } .rb-page .scan-shell .transmission-badge { margin-bottom: 8px; } .rb-page .scan-shell .scan-transmission .badge { display: inline-block; padding: 3px 10px; border: 1px solid rgba(88, 233, 255, 0.4); border-radius: 999px; background: rgba(88, 233, 255, 0.1); color: var(--ion); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .rb-page .scan-shell #progress-tip { margin: 0; color: #d6e3f5; font-size: 0.9rem; line-height: 1.55; } .rb-page .scan-shell .tip-fade { transition: opacity 0.4s ease-in-out; } /* Error / timeout states — same container as the scanning console so the FLAGGED innerHTML swap (scanningDiv.parentElement) keeps working. */ .rb-page .scan-shell .scan-state { display: flex; flex-direction: column; align-items: center; text-align: center; width: min(560px, 100%); margin: 0 auto; padding: 40px 32px; border: 1px solid rgba(112, 244, 255, 0.22); border-radius: 8px; background: linear-gradient(135deg, rgba(16, 25, 39, 0.96), rgba(8, 11, 18, 0.98)); box-shadow: 0 36px 90px rgba(0, 0, 0, 0.42); } .rb-page .scan-shell .scan-state-icon { width: 48px; height: 48px; margin-bottom: 14px; } .rb-page .scan-shell .scan-state-icon.error { color: #ff6a5f; } .rb-page .scan-shell .scan-state-icon.warning { color: var(--plasma); } .rb-page .scan-shell .scan-state-title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 900; color: #f5f8ff; } .rb-page .scan-shell #progress-error .scan-state-title { color: #ff6a5f; } .rb-page .scan-shell #progress-timeout .scan-state-title { color: var(--plasma); } .rb-page .scan-shell .scan-state-detail { margin: 0 0 20px; color: var(--muted); font-size: 0.92rem; line-height: 1.5; } .rb-page .scan-shell .scan-state-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 18px; border: 1px solid rgba(255, 185, 63, 0.85); border-radius: 4px; color: #090909; background: linear-gradient(180deg, #ffd363, var(--plasma)); box-shadow: 0 0 24px rgba(255, 185, 63, 0.24); font-size: 0.9rem; font-weight: 800; cursor: pointer; } .rb-page .scan-shell .scan-state-cta:hover { filter: brightness(1.06); } /* Telemetry strip (static decorative — founder: keep decor, wire what maps) */ .rb-page .scan-shell .telemetry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(920px, 100%); margin: 0 auto 26px; } .rb-page .scan-shell .telemetry-card { min-height: 90px; padding: 18px; border: 1px solid rgba(112, 244, 255, 0.18); border-left: 4px solid var(--accent); border-radius: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), repeating-linear-gradient(90deg, rgba(88, 233, 255, 0.025) 0 1px, transparent 1px 32px), rgba(10, 16, 25, 0.88); } .rb-page .scan-shell .telemetry-card span { display: block; color: var(--muted); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } .rb-page .scan-shell .telemetry-card strong { display: block; margin-top: 8px; font-size: 1.2rem; color: #f5f8ff; } /* Reassurance banner (auth only) */ .rb-page .scan-shell .notice { display: flex; align-items: center; gap: 12px; width: min(920px, 100%); min-height: 58px; margin: 0 auto 52px; padding: 14px 18px; border: 1px solid rgba(88, 233, 255, 0.28); border-radius: 8px; background: linear-gradient(90deg, rgba(88, 233, 255, 0.08), rgba(217, 22, 22, 0.04)), rgba(8, 11, 18, 0.78); color: #d8e6f8; font-size: 0.95rem; } .rb-page .scan-shell .notice-icon { display: grid; flex: 0 0 auto; width: 28px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(88, 233, 255, 0.5); border-radius: 50%; color: var(--ion); font-weight: 900; } .rb-page .scan-shell .notice a { color: var(--ion); font-weight: 900; } /* FLAGGED state — scan_flagged.html (DaisyUI markup) is fetched and injected into .scan-console-shell. Re-skin its primitives so it reads Mission Control without touching the partial's logic. */ .rb-page .scan-shell .scan-console-shell .card { width: min(620px, 100%); margin: 0 auto; border: 1px solid rgba(112, 244, 255, 0.22); border-radius: 8px; background: linear-gradient(135deg, rgba(16, 25, 39, 0.96), rgba(8, 11, 18, 0.98)); box-shadow: 0 36px 90px rgba(0, 0, 0, 0.42); } .rb-page .scan-shell .scan-console-shell .card-body { padding: 28px; color: #d6e3f5; } .rb-page .scan-shell .scan-console-shell .card-title { color: #f5f8ff; font-weight: 900; } .rb-page .scan-shell .scan-console-shell .divider { margin: 12px 0; border-top: 1px solid rgba(112, 244, 255, 0.16); height: 0; } .rb-page .scan-shell .scan-console-shell .text-base-content, .rb-page .scan-shell .scan-console-shell .text-base-content\/70 { color: #d6e3f5; } .rb-page .scan-shell .scan-console-shell .text-warning { color: var(--plasma); } .rb-page .scan-shell .scan-console-shell .text-error { color: #ff6a5f; } .rb-page .scan-shell .scan-console-shell .text-info { color: var(--ion); } .rb-page .scan-shell .scan-console-shell .card-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .rb-page .scan-shell .scan-console-shell .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 18px; border-radius: 4px; font-size: 0.9rem; font-weight: 800; cursor: pointer; } .rb-page .scan-shell .scan-console-shell .btn-primary { border: 1px solid rgba(255, 185, 63, 0.85); color: #090909; background: linear-gradient(180deg, #ffd363, var(--plasma)); box-shadow: 0 0 24px rgba(255, 185, 63, 0.24); } .rb-page .scan-shell .scan-console-shell .btn-outline.btn-warning { border: 1px solid rgba(255, 185, 63, 0.6); color: var(--plasma); background: transparent; } .rb-page .scan-shell .scan-console-shell .btn.loading { opacity: 0.7; pointer-events: none; } @media (max-width: 900px) { .rb-page .scan-shell { padding-top: 42px; } .rb-page .scan-shell .scan-heading h1 { font-size: 2.8rem; } .rb-page .scan-shell .scan-console, .rb-page .scan-shell .telemetry { grid-template-columns: 1fr; } .rb-page .scan-shell .scan-console::after { display: none; } .rb-page .scan-shell .lens-bay { min-height: 300px; } } @media (max-width: 560px) { .rb-page .scan-shell .scan-heading h1 { font-size: 2.35rem; } .rb-page .scan-shell .scan-console { padding: 22px; } .rb-page .scan-shell .status-topline { align-items: flex-start; flex-direction: column; } .rb-page .scan-shell .notice { align-items: flex-start; flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .rb-page .scan-shell .scan-console::after, .rb-page .scan-shell .scanner-array::after, .rb-page .scan-shell .starfield, .rb-page .scan-shell .target-halo, .rb-page .scan-shell .scan-beam, .rb-page .scan-shell .scout-ship, .rb-page .scan-shell .target-ship, .rb-page .scan-shell .ship-trail, .rb-page .scan-shell .ship-scan-lines, .rb-page .scan-shell .scan-arc, .rb-page .scan-shell .signal-node, .rb-page .scan-shell .packet-lane::before { animation: none; } .rb-page .scan-shell .progress-fill { transition: none; } } /* ========================================================================== REPORT READER SKIN (report.html / report_waf.html / report_failed.html) -------------------------------------------------------------------------- The report is the largest, most partial-heavy page in the app (report_macros, triage/keywords bodies, ~15 component includes, HTMX poll partials). It keeps ALL real markup / Jinja / HTMX / JSON-LD / share+PDF conditionals / tab JS; only the surface is re-skinned, exactly like the docs sub-page reader and the dashboard .dash-shell. Every rule is scoped under `.rb-page .report-reader` (set ONLY by these templates' `{% block main_class %}site-shell report-reader`). Zero approved template carries `.report-reader` (verified by grep of faq/pricing/docs/blog/dashboard/scan_progress + index), so nothing here can leak past the report family and the byte-for-byte guarantee holds. The trailing @media print block is gated on the `.rb-print-light` body class (set only by the report family) so the WAF PDF leave-behind and browser print stay light without altering any approved page's print output. ========================================================================== */ .rb-page .report-reader { padding: 32px 0 64px; color: var(--text); } .rb-page .report-reader .max-w-5xl, .rb-page .report-reader .max-w-3xl, .rb-page .report-reader .max-w-lg { margin-left: auto; margin-right: auto; } /* Tab panels / share modal toggled via `.hidden` — a scoped `display` rule on an ancestor must never out-specify Tailwind `.hidden` (scan-shell gotcha). */ .rb-page .report-reader .hidden { display: none !important; } /* ---- Text ---------------------------------------------------------------- */ .rb-page .report-reader h1, .rb-page .report-reader h2, .rb-page .report-reader h3, .rb-page .report-reader h4, .rb-page .report-reader .text-brand-dark, .rb-page .report-reader .text-brand-primary, .rb-page .report-reader strong.text-brand-dark, .rb-page .report-reader .text-base-content { color: #f7fbff; } .rb-page .report-reader p, .rb-page .report-reader li, .rb-page .report-reader td, .rb-page .report-reader span, .rb-page .report-reader summary, .rb-page .report-reader .text-base-content\/70, .rb-page .report-reader .text-base-content\/80, .rb-page .report-reader .text-brand-dark\/70, .rb-page .report-reader .text-brand-dark\/80 { color: #c7d6e8; } .rb-page .report-reader .text-brand-muted, .rb-page .report-reader .text-base-content\/50, .rb-page .report-reader .text-base-content\/60, .rb-page .report-reader .text-brand-muted\/60, .rb-page .report-reader .text-brand-dark\/50, .rb-page .report-reader .text-brand-dark\/60 { color: var(--muted); } .rb-page .report-reader .text-brand-secondary { color: var(--plasma); } .rb-page .report-reader .text-brand-accent { color: var(--ion); } .rb-page .report-reader a:not(.btn):not(.badge) { color: var(--ion); } .rb-page .report-reader a:not(.btn):not(.badge):hover { text-decoration: underline; } .rb-page .report-reader .text-brand-secondary.break-all, .rb-page .report-reader a.text-brand-secondary { color: var(--plasma); } /* ---- Surfaces ------------------------------------------------------------ */ .rb-page .report-reader .card, .rb-page .report-reader section.card, .rb-page .report-reader .bg-white, .rb-page .report-reader .bg-base-100, .rb-page .report-reader .bg-base-200, .rb-page .report-reader details.collapse { border: 1px solid rgba(112, 244, 255, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%), rgba(8, 13, 21, 0.82); color: var(--text); box-shadow: none; } /* Nested surfaces (cards inside cards / inner wells) read a touch deeper. */ .rb-page .report-reader .card .bg-base-200, .rb-page .report-reader .card .bg-base-300, .rb-page .report-reader .bg-base-300, .rb-page .report-reader pre, .rb-page .report-reader .collapse-content { background: rgba(2, 6, 12, 0.6); } .rb-page .report-reader .shadow-sm, .rb-page .report-reader .shadow-md, .rb-page .report-reader .shadow-xl { box-shadow: none; } .rb-page .report-reader .border-base-200, .rb-page .report-reader .border-base-300, .rb-page .report-reader .divide-base-200 > * + *, .rb-page .report-reader .border-brand-primary\/10, .rb-page .report-reader .border-brand-secondary\/20, .rb-page .report-reader .border-brand-secondary\/30, .rb-page .report-reader .border-brand-muted\/40, .rb-page .report-reader .border-t, .rb-page .report-reader .border-b, .rb-page .report-reader .divider { border-color: rgba(112, 244, 255, 0.14); } .rb-page .report-reader .bg-brand-secondary\/10, .rb-page .report-reader .bg-brand-secondary\/5, .rb-page .report-reader [role="note"] { border: 1px solid rgba(255, 185, 63, 0.26); background: rgba(255, 185, 63, 0.07); color: var(--text); } .rb-page .report-reader .bg-brand-primary\/5, .rb-page .report-reader .bg-gradient-to-br { border-color: rgba(112, 244, 255, 0.2); background: linear-gradient(135deg, rgba(88, 233, 255, 0.1), transparent 42%), rgba(8, 13, 21, 0.86); } /* ---- Tab bar (DaisyUI .join .btn / report tab list) ---------------------- */ .rb-page .report-reader #main-tab-list, .rb-page .report-reader .join { gap: 6px; flex-wrap: wrap; } .rb-page .report-reader .btn { border: 1px solid rgba(112, 244, 255, 0.26); background: rgba(8, 13, 21, 0.66); color: #dce8f6; border-radius: 6px; box-shadow: none; text-transform: none; font-weight: 600; } .rb-page .report-reader .btn:hover { border-color: var(--edge-hot); color: #fff; } .rb-page .report-reader .btn-outline { background: transparent; } /* Active tab + primary CTAs use the plasma/ion identity. JS swaps the `bg-brand-secondary text-white border-brand-secondary` class set on the active tab — match that selector so the active state reads correctly. */ .rb-page .report-reader .btn.bg-brand-secondary, .rb-page .report-reader [role="tab"][aria-selected="true"], .rb-page .report-reader .btn-primary { border-color: rgba(88, 233, 255, 0.6); background: linear-gradient(180deg, rgba(88, 233, 255, 0.22), rgba(88, 233, 255, 0.08)); color: #eafcff; } .rb-page .report-reader .btn.bg-brand-accent, .rb-page .report-reader .btn-accent { border: 1px solid rgba(255, 185, 63, 0.95); background: linear-gradient(180deg, #ffd466, #ff9f2d); color: #060810; box-shadow: 0 0 22px rgba(255, 185, 63, 0.18); } .rb-page .report-reader .btn.bg-brand-accent:hover { filter: brightness(1.05); } .rb-page .report-reader .btn-ghost { border-color: transparent; background: transparent; color: var(--muted); } .rb-page .report-reader .btn-ghost:hover { background: rgba(112, 244, 255, 0.08); color: #fff; } .rb-page .report-reader .btn-disabled, .rb-page .report-reader .btn[aria-disabled="true"] { opacity: 0.45; filter: grayscale(0.4); } /* ---- Badges -------------------------------------------------------------- */ .rb-page .report-reader .badge { border: 1px solid rgba(112, 244, 255, 0.28); background: rgba(88, 233, 255, 0.08); color: var(--ion); } .rb-page .report-reader .badge-outline, .rb-page .report-reader .badge-ghost { background: transparent; border-color: rgba(157, 151, 140, 0.4); color: var(--muted); } /* Semantic severity — keep meaning, tune for the dark surface. */ .rb-page .report-reader .bg-emerald-50, .rb-page .report-reader .bg-emerald-100, .rb-page .report-reader .badge-success, .rb-page .report-reader .bg-success\/5, .rb-page .report-reader .bg-success\/10 { border: 1px solid rgba(57, 255, 155, 0.34); background: rgba(57, 255, 155, 0.1); color: #6ff0b6; } .rb-page .report-reader .text-emerald-600, .rb-page .report-reader .text-emerald-700, .rb-page .report-reader .text-success { color: #6ff0b6; } .rb-page .report-reader .bg-amber-50, .rb-page .report-reader .bg-amber-100, .rb-page .report-reader .bg-violet-50, .rb-page .report-reader .badge-warning, .rb-page .report-reader .badge-info { border: 1px solid rgba(255, 185, 63, 0.36); background: rgba(255, 185, 63, 0.12); color: #ffce7a; } .rb-page .report-reader .text-amber-500, .rb-page .report-reader .text-amber-700, .rb-page .report-reader .text-amber-900, .rb-page .report-reader .text-violet-700 { color: #ffce7a; } .rb-page .report-reader .bg-red-50, .rb-page .report-reader .bg-red-100, .rb-page .report-reader .badge-error, .rb-page .report-reader .badge-neutral { border: 1px solid rgba(255, 106, 95, 0.4); background: rgba(217, 22, 22, 0.16); color: #ff8f82; } .rb-page .report-reader .text-red-500, .rb-page .report-reader .text-red-700, .rb-page .report-reader .text-red-800, .rb-page .report-reader .text-error { color: #ff8f82; } .rb-page .report-reader .text-green-500 { color: #6ff0b6; } /* Status dots (w-2 h-2 rounded-full bg-*) keep solid signal colours. */ .rb-page .report-reader .bg-emerald-500, .rb-page .report-reader .bg-green-500 { background-color: #39ff9b !important; } .rb-page .report-reader .bg-amber-400 { background-color: #ffb93f !important; } .rb-page .report-reader .bg-red-500 { background-color: #ff5a4d !important; } .rb-page .report-reader .bg-base-300 { background-color: rgba(157, 151, 140, 0.4) !important; } /* Coloured left borders (WAF cards, accessibility card). */ .rb-page .report-reader .border-l-warning, .rb-page .report-reader .border-brand-accent { border-left-color: var(--plasma) !important; } .rb-page .report-reader .border-l-success, .rb-page .report-reader .border-primary { border-left-color: var(--matrix) !important; } .rb-page .report-reader .border-red-200 { border-color: rgba(255, 106, 95, 0.4) !important; } /* ---- Collapse / details accordions -------------------------------------- */ .rb-page .report-reader details.collapse, .rb-page .report-reader details.group\/check, .rb-page .report-reader details.group { border: 1px solid rgba(112, 244, 255, 0.16); border-radius: 8px; overflow: hidden; } .rb-page .report-reader .collapse-title, .rb-page .report-reader details > summary { color: #eaf3ff; } .rb-page .report-reader .collapse-title:hover, .rb-page .report-reader details > summary:hover { background: rgba(112, 244, 255, 0.05); } .rb-page .report-reader .check-card, .rb-page .report-reader .check-card .bg-base-100, .rb-page .report-reader .check-card .bg-base-200 { scroll-margin-top: 2rem; } /* ---- Code / pre / tables ------------------------------------------------- */ .rb-page .report-reader code, .rb-page .report-reader kbd, .rb-page .report-reader pre { border: 1px solid rgba(57, 255, 155, 0.16); background: rgba(1, 7, 5, 0.66); color: #b9ffd9; } .rb-page .report-reader pre code { border: 0; background: transparent; } .rb-page .report-reader table { border-color: rgba(112, 244, 255, 0.16); } .rb-page .report-reader th { color: #f7fbff; background: rgba(8, 13, 21, 0.7); } .rb-page .report-reader th, .rb-page .report-reader td { border-color: rgba(112, 244, 255, 0.12); } /* ---- Form controls (share modal, email gate, claim form) ----------------- */ .rb-page .report-reader .input, .rb-page .report-reader .input-bordered, .rb-page .report-reader input[type="text"], .rb-page .report-reader input[type="email"], .rb-page .report-reader select, .rb-page .report-reader textarea { border: 1px solid rgba(112, 244, 255, 0.26); background: rgba(2, 6, 12, 0.7); color: var(--text); } .rb-page .report-reader .input::placeholder, .rb-page .report-reader input::placeholder { color: var(--muted); } .rb-page .report-reader .checkbox { border: 1px solid rgba(112, 244, 255, 0.4); background: rgba(2, 6, 12, 0.7); } .rb-page .report-reader .checkbox:checked { background-color: var(--ion); border-color: var(--ion); } .rb-page .report-reader .divider { color: var(--muted); } /* Share modal: backdrop stays a dim scrim; the inner panel is a dark console (markup is `#share-modal` > `.bg-white`; logic untouched). */ .rb-page .report-reader #share-modal { background: rgba(0, 0, 0, 0.66); } .rb-page .report-reader #share-modal .bg-white { border: 1px solid rgba(112, 244, 255, 0.24); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 55%), rgba(10, 16, 26, 0.96); } .rb-page .report-reader #share-modal .text-gray-700, .rb-page .report-reader #share-modal label { color: #c7d6e8; } .rb-page .report-reader #share-modal .text-gray-500, .rb-page .report-reader #share-modal .text-gray-400 { color: var(--muted); } /* ---- HTMX poll partials (loading / progress / ready) --------------------- */ .rb-page .report-reader .loading { color: var(--ion); } .rb-page .report-reader [role="progressbar"], .rb-page .report-reader .bg-brand-secondary.h-1\.5 { background-color: var(--ion); } /* ---- Triple-ring legend + priority actions ------------------------------- */ .rb-page .report-reader [data-switch-tab]:hover { opacity: 0.85; } .rb-page .report-reader .hover\:bg-base-200\/60:hover, .rb-page .report-reader .hover\:bg-base-200:hover { background: rgba(112, 244, 255, 0.07); } /* ---- Print / PDF safety (gated on .rb-print-light body class) ------------ Playwright `page.pdf()` emulates `print`, so the WAF PDF leave-behind and any browser "Print" of the report revert to a clean light document. Scoped to `.rb-page.rb-print-light` (report family only) so no approved page's print output changes. report.html keeps its own @media print chrome rules; this only neutralises the dark Mission Control surface. */ @media print { .rb-page.rb-print-light { background: #fff !important; color: #111 !important; } .rb-page.rb-print-light::before, .rb-page.rb-print-light::after, .rb-page.rb-print-light .asteroid-field { display: none !important; } .rb-page.rb-print-light .report-reader, .rb-page.rb-print-light .report-reader p, .rb-page.rb-print-light .report-reader li, .rb-page.rb-print-light .report-reader span, .rb-page.rb-print-light .report-reader td, .rb-page.rb-print-light .report-reader summary, .rb-page.rb-print-light .report-reader h1, .rb-page.rb-print-light .report-reader h2, .rb-page.rb-print-light .report-reader h3, .rb-page.rb-print-light .report-reader h4 { color: #111 !important; } .rb-page.rb-print-light .report-reader .text-brand-muted, .rb-page.rb-print-light .report-reader .text-base-content\/60 { color: #6b7280 !important; } .rb-page.rb-print-light .report-reader .card, .rb-page.rb-print-light .report-reader .bg-white, .rb-page.rb-print-light .report-reader .bg-base-100, .rb-page.rb-print-light .report-reader .bg-base-200, .rb-page.rb-print-light .report-reader .bg-base-300, .rb-page.rb-print-light .report-reader pre, .rb-page.rb-print-light .report-reader code, .rb-page.rb-print-light .report-reader details.collapse { border-color: #e5e7eb !important; background: #fff !important; color: #111 !important; } } /* ========================================================================== PUBLIC CONTENT + LEGAL READER SKIN (about / methodology / privacy / terms) No prototype exists for these pages. They keep their full DaisyUI/Tailwind markup, schema, Jinja, in-page TOC anchors, and legal copy byte-for-byte. We only switch {% extends %} to rebrand_base, opt out of asteroids, and wrap {% block content %} in a page-prefixed ancestor (.about-reader / .methodology-reader / .legal-reader, the legal scope shared by privacy and terms). These scoped overrides re-skin the light brand utilities onto the Mission Control dark surface, exactly the docs-reader / report-reader technique. Nothing here leaks past the three reader scopes; no approved template carries those ancestor classes. ========================================================================== */ .rb-page .about-reader, .rb-page .methodology-reader, .rb-page .legal-reader { margin: 30px auto 0; color: #c2d0e2; } /* Widen the inner column to the full site-shell width (parity with the approved scan / pricing / FAQ pages, founder call). The legacy max-w-4xl (896px) is lifted; .site-shell still caps the line length at 1220px. */ .rb-page .about-reader .max-w-4xl, .rb-page .methodology-reader .max-w-4xl, .rb-page .legal-reader .max-w-4xl { max-width: none; } /* Headings + dark-emphasis text -> bright */ .rb-page .about-reader h1, .rb-page .about-reader h2, .rb-page .about-reader h3, .rb-page .about-reader h4, .rb-page .about-reader .text-brand-dark, .rb-page .about-reader strong.text-brand-dark, .rb-page .methodology-reader h1, .rb-page .methodology-reader h2, .rb-page .methodology-reader h3, .rb-page .methodology-reader h4, .rb-page .methodology-reader .text-brand-dark, .rb-page .methodology-reader strong.text-brand-dark, .rb-page .legal-reader h1, .rb-page .legal-reader h2, .rb-page .legal-reader h3, .rb-page .legal-reader h4, .rb-page .legal-reader .text-brand-dark, .rb-page .legal-reader strong.text-brand-dark { color: #f7fbff; } .rb-page .about-reader h1, .rb-page .methodology-reader h1, .rb-page .legal-reader h1 { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05; } .rb-page .about-reader h2, .rb-page .methodology-reader h2, .rb-page .legal-reader h2 { font-size: 1.6rem; } .rb-page .about-reader h3, .rb-page .methodology-reader h3, .rb-page .legal-reader h3 { font-size: 1.05rem; } /* Body copy + every brand-dark opacity tier -> readable on dark */ .rb-page .about-reader p, .rb-page .about-reader li, .rb-page .about-reader td, .rb-page .about-reader address, .rb-page .about-reader .text-brand-dark\/60, .rb-page .about-reader .text-brand-dark\/70, .rb-page .about-reader .text-brand-dark\/80, .rb-page .about-reader .text-brand-dark\/90, .rb-page .methodology-reader p, .rb-page .methodology-reader li, .rb-page .methodology-reader td, .rb-page .methodology-reader address, .rb-page .methodology-reader .text-brand-dark\/60, .rb-page .methodology-reader .text-brand-dark\/70, .rb-page .methodology-reader .text-brand-dark\/80, .rb-page .methodology-reader .text-brand-dark\/90, .rb-page .legal-reader p, .rb-page .legal-reader li, .rb-page .legal-reader td, .rb-page .legal-reader address, .rb-page .legal-reader .text-brand-dark\/60, .rb-page .legal-reader .text-brand-dark\/70, .rb-page .legal-reader .text-brand-dark\/80, .rb-page .legal-reader .text-brand-dark\/90 { color: #c2d0e2; } .rb-page .about-reader .text-brand-dark\/50, .rb-page .methodology-reader .text-brand-dark\/50, .rb-page .legal-reader .text-brand-dark\/50 { color: var(--muted); } /* Links (about/methodology use text-brand-primary; legal uses text-brand-secondary) -> ion */ .rb-page .about-reader a, .rb-page .about-reader .text-brand-primary, .rb-page .about-reader .text-brand-secondary, .rb-page .methodology-reader a, .rb-page .methodology-reader .text-brand-primary, .rb-page .methodology-reader .text-brand-secondary, .rb-page .legal-reader a, .rb-page .legal-reader .text-brand-primary, .rb-page .legal-reader .text-brand-secondary { color: var(--ion); } .rb-page .about-reader a:hover, .rb-page .methodology-reader a:hover, .rb-page .legal-reader a:hover { text-decoration: underline; } /* Surfaces: light panels / callout cards -> dark Mission Control panels */ .rb-page .about-reader .bg-brand-primary\/5, .rb-page .about-reader .bg-brand-secondary\/5, .rb-page .about-reader .bg-brand-dark\/5, .rb-page .methodology-reader .bg-brand-primary\/5, .rb-page .methodology-reader .bg-brand-secondary\/5, .rb-page .methodology-reader .bg-brand-dark\/5, .rb-page .legal-reader .bg-brand-primary\/5, .rb-page .legal-reader .bg-brand-secondary\/5, .rb-page .legal-reader .bg-brand-dark\/5 { border: 1px solid rgba(112, 244, 255, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%), rgba(8, 13, 21, 0.78); color: #c2d0e2; box-shadow: none; } /* Faint ion chips (pillar icon wells, step/number circles) */ .rb-page .about-reader .bg-brand-primary\/10, .rb-page .about-reader .bg-brand-accent\/20, .rb-page .methodology-reader .bg-brand-primary\/10, .rb-page .methodology-reader .bg-brand-accent\/20, .rb-page .legal-reader .bg-brand-primary\/10, .rb-page .legal-reader .bg-brand-accent\/20 { background: rgba(88, 233, 255, 0.1); color: #f7fbff; } /* about.html highlighted "Pro" plan card (gold accent) */ .rb-page .about-reader .bg-brand-accent\/5 { border: 1px solid rgba(255, 185, 63, 0.4); background: linear-gradient(135deg, rgba(255, 185, 63, 0.1), transparent 45%), rgba(8, 13, 21, 0.82); } /* Borders */ .rb-page .about-reader .border-brand-primary\/10, .rb-page .about-reader .border-brand-primary\/20, .rb-page .about-reader .border-brand-secondary\/20, .rb-page .about-reader .border-brand-secondary\/30, .rb-page .about-reader .border-brand-dark\/5, .rb-page .about-reader .border-brand-dark\/10, .rb-page .methodology-reader .border-brand-primary\/10, .rb-page .methodology-reader .border-brand-primary\/20, .rb-page .methodology-reader .border-brand-secondary\/20, .rb-page .methodology-reader .border-brand-secondary\/30, .rb-page .methodology-reader .border-brand-dark\/5, .rb-page .methodology-reader .border-brand-dark\/10, .rb-page .legal-reader .border-brand-primary\/10, .rb-page .legal-reader .border-brand-primary\/20, .rb-page .legal-reader .border-brand-secondary\/20, .rb-page .legal-reader .border-brand-secondary\/30, .rb-page .legal-reader .border-brand-dark\/5, .rb-page .legal-reader .border-brand-dark\/10 { border-color: rgba(112, 244, 255, 0.16); } .rb-page .about-reader .border-brand-accent { border-color: rgba(255, 185, 63, 0.55); } /* methodology check-list left rule + section bullet */ .rb-page .methodology-reader .border-l-2.border-brand-primary\/20 { border-color: rgba(88, 233, 255, 0.35); } .rb-page .methodology-reader .w-2.h-2.bg-brand-primary { background: var(--ion); } /* Tables (methodology grade/version, legal where present) */ .rb-page .methodology-reader table, .rb-page .legal-reader table { border-color: rgba(112, 244, 255, 0.16); } .rb-page .methodology-reader th, .rb-page .legal-reader th { color: #f7fbff; background: rgba(8, 13, 21, 0.7); } .rb-page .methodology-reader th, .rb-page .methodology-reader td, .rb-page .legal-reader th, .rb-page .legal-reader td { border-color: rgba(112, 244, 255, 0.12); } /* Shared bottom CTA partial (bg-brand-primary section + gold button): never edited; re-skinned only inside these reader scopes. The generic .bg-brand-primary above is the dot/section; the panel is the rounded
, targeted precisely so the methodology bullet stays a dot. */ .rb-page .about-reader section.bg-brand-primary, .rb-page .methodology-reader section.bg-brand-primary, .rb-page .legal-reader section.bg-brand-primary { border: 1px solid rgba(112, 244, 255, 0.22); background: linear-gradient(135deg, rgba(255, 185, 63, 0.1), transparent 40%), rgba(8, 13, 21, 0.9); } .rb-page .about-reader section.bg-brand-primary .text-brand-light, .rb-page .about-reader section.bg-brand-primary h2, .rb-page .methodology-reader section.bg-brand-primary .text-brand-light, .rb-page .methodology-reader section.bg-brand-primary h2, .rb-page .legal-reader section.bg-brand-primary .text-brand-light, .rb-page .legal-reader section.bg-brand-primary h2 { color: #f7fbff; } .rb-page .about-reader section.bg-brand-primary .text-brand-light\/70, .rb-page .methodology-reader section.bg-brand-primary .text-brand-light\/70, .rb-page .legal-reader section.bg-brand-primary .text-brand-light\/70 { color: var(--muted); } .rb-page .about-reader .btn.bg-brand-accent, .rb-page .methodology-reader .btn.bg-brand-accent, .rb-page .legal-reader .btn.bg-brand-accent { border: 1px solid rgba(255, 185, 63, 0.95); background: linear-gradient(180deg, #ffd466, #ff9f2d); color: #060810; box-shadow: 0 0 24px rgba(255, 185, 63, 0.2); } .rb-page .about-reader .btn.bg-brand-accent:hover, .rb-page .methodology-reader .btn.bg-brand-accent:hover, .rb-page .legal-reader .btn.bg-brand-accent:hover { filter: brightness(1.05); } /* Faintest brand-dark tier (legal footer note) + the brand-dark/20 border tier (legal tables / dividers). Appended as standalone additive rules so the rules above stay byte-for-byte (rebrand.css change is 0-deletion). */ .rb-page .about-reader .text-brand-dark\/40, .rb-page .methodology-reader .text-brand-dark\/40, .rb-page .legal-reader .text-brand-dark\/40 { color: var(--muted); } .rb-page .about-reader .border-brand-dark\/20, .rb-page .methodology-reader .border-brand-dark\/20, .rb-page .legal-reader .border-brand-dark\/20 { border-color: rgba(112, 244, 255, 0.16); } /* ===== Batch C — auth/flow pages (login / found / invite_accept) ========= Scoped reskins (no prototype exists for these). Each page keeps its narrow centered auth card (founder call 2026-05-18: keep narrow — the Batch B width-parity precedent does NOT apply, these are not max-w-4xl content pages). Asteroids opted out (flow-page precedent). One additive block appended after the Batch B legal rules so rebrand.css stays 0-deletion. Unique ancestors .login-reader / .found-reader / .invite-reader verified to have zero occurrences across every template + rebrand.css before this was written. */ /* ---- Typography --------------------------------------------------------- */ /* Headings + prominent labels (white). text-base-content (no opacity) is headings-only in found.html; text-brand-dark (no opacity) is the org name + h1 in invite_accept.html. */ .rb-page .login-reader h1, .rb-page .login-reader .text-brand-primary, .rb-page .found-reader h1, .rb-page .found-reader .text-base-content, .rb-page .invite-reader h1, .rb-page .invite-reader .text-brand-dark { color: #f7fbff; } /* Body copy */ .rb-page .login-reader label, .rb-page .login-reader p, .rb-page .found-reader p, .rb-page .found-reader .text-base-content\/70, .rb-page .invite-reader p, .rb-page .invite-reader .text-brand-dark\/60, .rb-page .invite-reader span { color: #c2d0e2; } /* Faintest tiers (help text, footer note, "as a {role}") */ .rb-page .login-reader .text-brand-muted, .rb-page .found-reader .text-base-content\/50, .rb-page .found-reader .text-base-content\/40, .rb-page .invite-reader .text-brand-dark\/50 { color: var(--muted); } /* Semantic state accents — keep meaning, tune for the dark surface */ .rb-page .found-reader .text-primary, .rb-page .invite-reader .text-brand-primary { color: var(--ion); } .rb-page .found-reader .text-success, .rb-page .invite-reader .text-success { color: #6ff0b6; } .rb-page .invite-reader .text-warning { color: var(--plasma); } .rb-page .invite-reader .text-error { color: #ff6a5f; } /* Links (terms / privacy / "learn more"). The legacy hover:text-brand-dark / hover:text-base-content would vanish on the dark surface — override. */ .rb-page .login-reader a.underline, .rb-page .found-reader a.underline, .rb-page .invite-reader a.underline { color: var(--ion); } .rb-page .login-reader a.underline:hover, .rb-page .found-reader a.underline:hover, .rb-page .invite-reader a.underline:hover { color: #eafcff; } /* found.html "What is GeoScored?" disclosure toggle stays quiet */ .rb-page .found-reader summary { color: var(--muted); } .rb-page .found-reader summary:hover { color: #c2d0e2; } /* ---- Surfaces (cards / icon wells) -------------------------------------- */ .rb-page .found-reader .card, .rb-page .found-reader .bg-base-100, .rb-page .invite-reader .card, .rb-page .invite-reader .bg-white { border: 1px solid rgba(112, 244, 255, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%), rgba(8, 13, 21, 0.82); color: var(--text); box-shadow: none; } .rb-page .found-reader .shadow-sm, .rb-page .invite-reader .shadow-lg { box-shadow: none; } /* Faint round icon wells (found discovery / already-claimed) */ .rb-page .found-reader .bg-primary\/10 { background: rgba(88, 233, 255, 0.12); } .rb-page .found-reader .bg-success\/10 { background: rgba(57, 255, 155, 0.12); } /* ---- Input (login email field) ------------------------------------------ */ .rb-page .login-reader .input { background: rgba(2, 6, 12, 0.6); border: 1px solid rgba(112, 244, 255, 0.22); color: var(--text); } .rb-page .login-reader .input::placeholder { color: var(--muted); } .rb-page .login-reader .input:focus, .rb-page .login-reader .input:focus-visible { outline: none; border-color: var(--edge-hot); box-shadow: 0 0 0 3px rgba(88, 233, 255, 0.18); } /* ---- Divider ------------------------------------------------------------ */ .rb-page .login-reader .divider, .rb-page .found-reader .divider { color: var(--muted); } .rb-page .login-reader .divider:before, .rb-page .login-reader .divider:after, .rb-page .found-reader .divider:before, .rb-page .found-reader .divider:after { background-color: rgba(112, 244, 255, 0.16); } /* ---- Buttons ------------------------------------------------------------ */ /* Outline (OAuth providers + invite "create an account to accept") */ .rb-page .login-reader .btn-outline, .rb-page .found-reader .btn-outline, .rb-page .invite-reader .btn-outline { border: 1px solid rgba(112, 244, 255, 0.26); background: rgba(8, 13, 21, 0.66); color: #dce8f6; box-shadow: none; text-transform: none; } .rb-page .login-reader .btn-outline:hover, .rb-page .found-reader .btn-outline:hover, .rb-page .invite-reader .btn-outline:hover { border-color: var(--edge-hot); color: #fff; } /* Primary gold action — the single "do this" button on each page (login "Send magic link", found "Claim/Sign in/Go to dashboard", invite "Accept Invitation"/"Sign in to accept"). Matches the founder-approved gold primary CTA on pricing/about/report. */ .rb-page .login-reader .btn.bg-brand-accent, .rb-page .found-reader .btn-primary, .rb-page .invite-reader .btn.bg-brand-accent { border: 1px solid rgba(255, 185, 63, 0.95); background: linear-gradient(180deg, #ffd466, #ff9f2d); color: #060810; box-shadow: 0 0 22px rgba(255, 185, 63, 0.18); text-transform: none; } .rb-page .login-reader .btn.bg-brand-accent:hover, .rb-page .found-reader .btn-primary:hover, .rb-page .invite-reader .btn.bg-brand-accent:hover { filter: brightness(1.05); } /* Secondary ion action — invite "Go to GeoScored" / "Go to Dashboard" (.bg-brand-primary; text-brand-light sits on the same element). */ .rb-page .invite-reader .btn.bg-brand-primary { border: 1px solid rgba(88, 233, 255, 0.6); background: linear-gradient(180deg, rgba(88, 233, 255, 0.22), rgba(88, 233, 255, 0.08)); color: #eafcff; box-shadow: none; } .rb-page .invite-reader .btn.bg-brand-primary:hover { border-color: var(--edge-hot); } /* ---- Alerts (login error / success states) ------------------------------ */ .rb-page .login-reader .alert { border: 1px solid rgba(112, 244, 255, 0.2); background: rgba(8, 13, 21, 0.7); color: var(--text); } .rb-page .login-reader .alert-warning { border-color: rgba(255, 185, 63, 0.4); background: rgba(255, 185, 63, 0.1); color: #ffd9a0; } .rb-page .login-reader .alert-success { border-color: rgba(57, 255, 155, 0.34); background: rgba(57, 255, 155, 0.1); color: #6ff0b6; } /* ========================================================================== BATCH D — DEVELOPER DOCS AUDIT LANDING (.audit-reader) docs-audit.html (/docs-audit) is a marketing/conversion landing page. It keeps its full DaisyUI/Tailwind markup, OG/JSON-LD schema, scan CTA and the shared bottom_cta partial untouched; we only switch {% extends %} to rebrand_base, keep asteroids ON (founder call), and wrap {% block content %} in .audit-reader. These scoped overrides re-skin the light Tailwind utilities onto the Mission Control dark surface — same proven technique as the docs-reader skin above. Nothing here leaks past .rb-page .audit-reader. ========================================================================== */ .rb-page .audit-reader { margin: 30px auto 0; color: var(--text); } /* Width parity: founder precedent — content landings render as wide as scan/pricing/FAQ (site-shell = min(1220px, 100% - 48px)), not the legacy 896px max-w-4xl cap. */ .rb-page .audit-reader .max-w-4xl { max-width: none; } .rb-page .audit-reader h1, .rb-page .audit-reader h2, .rb-page .audit-reader h3, .rb-page .audit-reader .text-brand-dark { color: #f7fbff; } .rb-page .audit-reader h1 { font-size: clamp(2.4rem, 4.6vw, 3.3rem); line-height: 1.05; } .rb-page .audit-reader h2 { font-size: 1.7rem; } .rb-page .audit-reader h3 { font-size: 1.05rem; } .rb-page .audit-reader p, .rb-page .audit-reader li, .rb-page .audit-reader .text-brand-dark\/60, .rb-page .audit-reader .text-brand-dark\/70, .rb-page .audit-reader .text-brand-dark\/80 { color: #c2d0e2; } .rb-page .audit-reader .text-brand-muted, .rb-page .audit-reader .text-brand-dark\/50 { color: var(--muted); } .rb-page .audit-reader a { color: var(--ion); } .rb-page .audit-reader nav[aria-label="Breadcrumb"] a:hover { color: #eafcff; } .rb-page .audit-reader .text-brand-primary { color: var(--ion); } .rb-page .audit-reader .text-brand-secondary { color: var(--plasma); } .rb-page .audit-reader .text-red-500 { color: #ff7a6f; } /* Surfaces: white/base cards become dark instrument panels */ .rb-page .audit-reader .card, .rb-page .audit-reader .bg-white, .rb-page .audit-reader .bg-base-100 { border: 1px solid rgba(112, 244, 255, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%), rgba(8, 13, 21, 0.78); color: var(--text); box-shadow: none; } .rb-page .audit-reader .border-gray-100, .rb-page .audit-reader .border-base-200, .rb-page .audit-reader .border-brand-primary\/10 { border-color: rgba(112, 244, 255, 0.16); } /* Card top-accent rules (border-t-4 + colored top border) */ .rb-page .audit-reader .border-t-brand-accent, .rb-page .audit-reader .border-t-brand-secondary { border-top-color: var(--plasma); } .rb-page .audit-reader .border-t-red-400 { border-top-color: #ff7a6f; } /* Icon wells */ .rb-page .audit-reader .bg-sky-50, .rb-page .audit-reader .bg-brand-primary\/10 { background: rgba(88, 233, 255, 0.12); } .rb-page .audit-reader .bg-red-50 { background: rgba(217, 22, 22, 0.16); } /* "+ N more checks" callout (bg-brand-primary/5 + border-brand-primary/10) */ .rb-page .audit-reader .bg-brand-primary\/5 { border: 1px solid rgba(88, 233, 255, 0.22); background: rgba(88, 233, 255, 0.08); } /* Scan CTA button + bottom_cta gold button */ .rb-page .audit-reader .btn.bg-brand-accent { border: 1px solid rgba(255, 185, 63, 0.95); background: linear-gradient(180deg, #ffd466, #ff9f2d); color: #060810; box-shadow: 0 0 24px rgba(255, 185, 63, 0.2); } .rb-page .audit-reader .btn.bg-brand-accent:hover { filter: brightness(1.05); } /* Bottom CTA partial (bg-brand-primary block) — shared partial, never edited; re-skinned only inside the audit reader scope (mirrors docs-reader). */ .rb-page .audit-reader .bg-brand-primary { border: 1px solid rgba(112, 244, 255, 0.22); background: linear-gradient(135deg, rgba(255, 185, 63, 0.1), transparent 40%), rgba(8, 13, 21, 0.9); } .rb-page .audit-reader .bg-brand-primary .text-brand-light, .rb-page .audit-reader .bg-brand-primary h2 { color: #f7fbff; } .rb-page .audit-reader .bg-brand-primary .text-brand-light\/70 { color: var(--muted); } /* ========================================================================== BATCH D — ERROR PAGES (.error-reader): "signal lost / system fault" 404.html, 500.html, error.html render via Starlette exception handlers, NOT routes. They switch {% extends %} to rebrand_base, opt OUT asteroids.js (these must stay robust even on a degraded server) and rewrite their content block as a bespoke Mission Control hero. All animation is CSS-only and bails under prefers-reduced-motion. Every functional byte (feedback_cta block, data-feedback-trigger button, error.html's status_code/title/message Jinja, CTAs) is preserved in the templates. Scoped under .error-reader (verified absent from every approved template). --err: accent per variant. ========================================================================== */ .rb-page .error-reader { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64vh; padding: 52px 0 68px; text-align: center; } .rb-page .error-stage { --err: var(--ion); --err-soft: rgba(88, 233, 255, 0.16); --err-line: rgba(88, 233, 255, 0.34); width: min(640px, 100%); display: flex; flex-direction: column; align-items: center; } .rb-page .error-stage--fault { --err: #ff5a4d; --err-soft: rgba(217, 22, 22, 0.18); --err-line: rgba(255, 90, 77, 0.36); } /* ---- Radar scope -------------------------------------------------------- */ .rb-page .error-scope { position: relative; width: clamp(220px, 52vw, 300px); aspect-ratio: 1; margin-bottom: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(8, 13, 21, 0.2), rgba(5, 7, 13, 0.92) 72%), rgba(5, 7, 13, 0.9); border: 1px solid var(--err-line); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 0 60px -12px var(--err-soft), 0 30px 70px -40px rgba(0, 0, 0, 0.9); overflow: hidden; } .rb-page .error-scope-grid { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 27px, var(--err-soft) 27px 28px), conic-gradient(from 0deg, transparent 0 89deg, var(--err-soft) 89deg 90deg, transparent 90deg 179deg, var(--err-soft) 179deg 180deg, transparent 180deg 269deg, var(--err-soft) 269deg 270deg, transparent 270deg 359deg, var(--err-soft) 359deg 360deg); opacity: 0.5; } .rb-page .error-scope-ring { position: absolute; inset: 24%; border-radius: 50%; border: 1px solid var(--err-line); opacity: 0.55; } .rb-page .error-scope-ring--outer { inset: 10%; opacity: 0.32; } .rb-page .error-scope-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, color-mix(in srgb, var(--err) 42%, transparent) 0deg, transparent 56deg, transparent 360deg); mix-blend-mode: screen; animation: rbErrSweep 4.6s linear infinite; } .rb-page .error-scope-blip { position: absolute; top: 33%; left: 63%; width: 11px; height: 11px; border-radius: 50%; background: var(--err); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--err) 70%, transparent); animation: rbErrBlip 4.6s ease-in-out infinite; } .rb-page .error-scope-static { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0.5; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px); animation: rbErrStatic 5.2s steps(8) infinite; } .rb-page .error-code { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-family: "JetBrains Mono", ui-monospace, "Courier New", monospace; font-size: clamp(3.2rem, 9vw, 5rem); font-weight: 800; letter-spacing: 0.04em; color: #f7fbff; text-shadow: 0 0 18px color-mix(in srgb, var(--err) 60%, transparent), 0 0 4px rgba(0, 0, 0, 0.8); } /* ---- Copy --------------------------------------------------------------- */ .rb-page .error-eyebrow { margin: 0 0 14px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.28em; color: var(--err); } .rb-page .error-headline { margin: 0 0 16px; font-size: clamp(1.9rem, 4.4vw, 2.85rem); line-height: 1.08; font-weight: 800; color: #f7fbff; } .rb-page .error-copy { margin: 0 auto 10px; max-width: 30rem; font-size: 1.05rem; line-height: 1.6; color: #c2d0e2; } .rb-page .error-subcopy { margin: 0 auto 34px; max-width: 28rem; font-size: 0.85rem; color: var(--muted); } /* ---- Actions ------------------------------------------------------------ */ .rb-page .error-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .rb-page .error-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border-radius: 8px; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: filter 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .rb-page .error-btn--primary { border: 1px solid rgba(255, 185, 63, 0.95); background: linear-gradient(180deg, #ffd466, #ff9f2d); color: #060810; box-shadow: 0 0 24px rgba(255, 185, 63, 0.2); } .rb-page .error-btn--primary:hover { filter: brightness(1.05); } .rb-page .error-btn--ghost { border: 1px solid var(--err-line); background: transparent; color: #c2d0e2; } .rb-page .error-btn--ghost:hover { border-color: var(--err); color: #f7fbff; } /* ---- Report affordance (preserves data-feedback-trigger button) --------- */ .rb-page .error-report { margin-top: 38px; padding-top: 26px; width: min(420px, 100%); border-top: 1px solid rgba(112, 244, 255, 0.16); } .rb-page .error-report p { margin: 0 0 12px; font-size: 0.85rem; color: var(--muted); } .rb-page .error-report-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--err); cursor: pointer; transition: color 0.15s ease; } .rb-page .error-report-btn:hover { color: #f7fbff; } .rb-page .error-report-btn svg { width: 16px; height: 16px; } @keyframes rbErrSweep { to { transform: rotate(360deg); } } @keyframes rbErrBlip { 0%, 38% { opacity: 0; transform: scale(0.5); } 44% { opacity: 1; transform: scale(1.15); } 62% { opacity: 0.85; transform: scale(1); } 100% { opacity: 0; transform: scale(0.6); } } @keyframes rbErrStatic { 0% { opacity: 0.5; transform: translateY(0); } 50% { opacity: 0.28; transform: translateY(-2px); } 100% { opacity: 0.5; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .rb-page .error-scope-sweep, .rb-page .error-scope-blip, .rb-page .error-scope-static { animation: none; } .rb-page .error-scope-blip { opacity: 0.9; } } /* ========================================================================== BATCH D — DARK-ON-DARK CONTRAST FIXES The light->dark surface flip left a few dark text utilities uncovered by their scope's reskin (each scope enumerates specific opacity tiers and missed these). A static audit of every reskin scope x dark text utility found exactly these gaps. Each is added as a NEW standalone scoped rule so rebrand.css stays 0-deletion and approved pages are byte-for-byte safe. (login-reader's apparent text-brand-dark "gap" is a false positive — .login-reader label/p already recolor it structurally.) ========================================================================== */ /* dash-shell: text-base-content/80 is emphasis text (batch_confirm URL list, project_detail priority) — make it bright. /30 /20 (ghost remove button, empty-state icon) — muted but visible, never invisible. */ .rb-page .dash-shell .text-base-content\/80 { color: var(--text); } .rb-page .dash-shell .text-base-content\/30, .rb-page .dash-shell .text-base-content\/20 { color: #8c99af; } /* docs-reader: glossary "#" permalink anchors use text-brand-dark/30. */ .rb-page .docs-reader .text-brand-dark\/30 { color: var(--muted); } /* report-reader: a dismiss control's hover:text-gray-600 went invisible on hover (base text-gray-400 is already covered by the report-reader skin). */ .rb-page .report-reader .text-gray-600, .rb-page .report-reader .hover\:text-gray-600:hover { color: #aebbd0; } /* ========================================================================== REPORT + DASHBOARD POLISH (founder review 2026-05-18) Additive, scope-prefixed. Six issues: pill contrast, AI-visibility box surface, button font uniformity, schedule modal skin, hero-ring glow, dashboard telemetry layout. rebrand.css stays 0-deletion. ========================================================================== */ /* (1) Effort pills + "Informational" badge: keep the tint, make text readable. effort_badge low/medium use bg-green-100/bg-orange-100 + dark text that the report-reader skin did not map; severity_badge "Informational" is a badge-ghost dimmed further by opacity-75. */ .rb-page .report-reader .bg-green-100 { border: 1px solid rgba(57, 255, 155, 0.34); background: rgba(57, 255, 155, 0.12); } .rb-page .report-reader .text-green-800 { color: #79ffbb; } .rb-page .report-reader .bg-orange-100 { border: 1px solid rgba(255, 185, 63, 0.36); background: rgba(255, 185, 63, 0.14); } .rb-page .report-reader .text-orange-800 { color: #ffce7a; } .rb-page .report-reader .badge.opacity-75 { opacity: 1; } .rb-page .report-reader .badge-ghost { color: #c7d3e3; } /* (2) AI Visibility Overview hero metric box: bg-blue-50 light card + its gray-200 bar track were never mapped. (number/bar/legend recolored to MC in visibility_readiness_preview.html). */ .rb-page .report-reader .bg-blue-50 { border: 1px solid rgba(88, 233, 255, 0.22); background: linear-gradient(135deg, rgba(88, 233, 255, 0.1), transparent 42%), rgba(8, 13, 21, 0.86); } .rb-page .report-reader .border-blue-200 { border-color: rgba(88, 233, 255, 0.28); } .rb-page .report-reader .bg-gray-200 { background-color: rgba(2, 6, 12, 0.6); } /* (3) Action bar: every tab + action button shares btn-sm but rendered at inconsistent sizes. Pin them all to one size (the rescan/btn-sm size). */ .rb-page .report-reader #action-bar .btn, .rb-page .report-reader #action-bar .btn.btn-sm, .rb-page .report-reader #action-bar .join-item { font-size: 0.875rem; line-height: 1.2; } /* (4) Schedule Recurring Scan modal — DaisyUI dialog injected via HTMX into the report (.report-reader) and the dashboard (.dash-shell). Scope by its stable dialog id so it skins correctly in both. */ .rb-page #schedule-modal .modal-box { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%), rgba(11, 19, 34, 0.98); border: 1px solid rgba(112, 244, 255, 0.2); color: var(--text); } .rb-page #schedule-modal h3 { color: #f7fbff; } .rb-page #schedule-modal .label-text { color: #c2d0e2; } .rb-page #schedule-modal .input, .rb-page #schedule-modal .input-bordered { background: rgba(2, 6, 12, 0.6); border: 1px solid rgba(112, 244, 255, 0.2); color: var(--text); } .rb-page #schedule-modal .radio { border-color: rgba(112, 244, 255, 0.4); } .rb-page #schedule-modal .radio-primary:checked, .rb-page #schedule-modal .radio:checked { background-color: var(--ion); border-color: var(--ion); box-shadow: 0 0 0 4px rgba(11, 19, 34, 0.98) inset; } .rb-page #schedule-modal .toggle-primary:checked, .rb-page #schedule-modal .toggle:checked { background-color: var(--ion); border-color: var(--ion); } .rb-page #schedule-modal .btn-primary { border: 1px solid rgba(88, 233, 255, 0.6); background: linear-gradient(180deg, rgba(88, 233, 255, 0.26), rgba(88, 233, 255, 0.1)); color: #eafcff; } .rb-page #schedule-modal .btn-ghost { border-color: transparent; background: transparent; color: var(--muted); } .rb-page #schedule-modal .btn-ghost:hover { background: rgba(112, 244, 255, 0.08); color: #fff; } .rb-page #schedule-modal .btn-error.btn-outline { border: 1px solid rgba(255, 106, 95, 0.5); background: transparent; color: #ff8f82; } .rb-page #schedule-modal .modal-backdrop { background: rgba(2, 5, 11, 0.72); } /* (5) Report hero rings (recolored to plasma/ion/matrix in triple_rings.html): add a soft Mission Control glow + a faint core so it reads like the main-page orbital instead of a flat health donut. */ .rb-page .report-reader #triple-rings-svg { filter: drop-shadow(0 0 7px rgba(88, 233, 255, 0.28)); } .rb-page .report-reader #hero-rings-col { position: relative; } .rb-page .report-reader #hero-rings-col::before { content: ""; position: absolute; left: 26%; top: 50%; width: 90px; height: 90px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(217, 22, 22, 0.5), rgba(255, 89, 60, 0.18) 45%, transparent 70%); pointer-events: none; z-index: 0; } .rb-page .report-reader #triple-rings-svg { position: relative; z-index: 1; } /* (6) Dashboard "Latest telemetry" companion: AI Visibility / AI Trust labels wrap to two rows; founder wants single-row labels, the score cluster centred, and a little air below the panel kicker. */ .rb-page .dash-shell .recon-panel .gap-1\.5 .text-xs { white-space: nowrap; } .rb-page .dash-shell .recon-panel .card { margin-top: 14px; align-items: center; } .rb-page .dash-shell .recon-panel .card > .flex { justify-content: center; } /* (7) Spot-fix batch 2026-05-18 (founder screenshot review): Site Info grey wells + status-pill wrap + score-breakdown bar track. */ /* (7a) Site Link Structure / External Domains / Third-Party Scripts wells and the two "Note:" caveat callouts all use bg-base-200/50 — a tier the surface reskin (bare .bg-base-200) never enumerated, so they rendered as light DaisyUI grey with washed-out, near-invisible muted Note text. Give them the same Mission Control panel as .bg-base-200. */ .rb-page .report-reader .bg-base-200\/50 { border: 1px solid rgba(112, 244, 255, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 60%), rgba(8, 13, 21, 0.82); color: var(--text); } /* (7b) Status pills (severity_badge / pill_badge: "Could improve", "Looks good", "Needs work", "Informational") render display:flex via the macro's Tailwind `flex` class, which drops DaisyUI's default nowrap, so in a compressed card-header row the label broke onto two lines. Keep every report badge on one line and stop it being squeezed. */ .rb-page .report-reader .badge { white-space: nowrap; flex-shrink: 0; } .rb-page .report-reader .badge svg { flex-shrink: 0; } /* (7c) Score Breakdown By Test sub-score bars: the track is bg-gray-100 (Tailwind cream, never mapped) and the not-applicable inner fill is bg-gray-300. .overflow-hidden uniquely marks the bar track — the keyword "Long Tail"/"Low" badges also use bg-gray-100 but never overflow-hidden, so they keep the .badge reskin. Scored fill colours are inline-styled and intentionally left untouched. */ .rb-page .report-reader .bg-gray-100.overflow-hidden { background: rgba(112, 244, 255, 0.1); } .rb-page .report-reader .bg-gray-100.overflow-hidden .bg-gray-300 { background: rgba(157, 151, 140, 0.45); } /* (8) Report cards lost their identity (founder screenshot review): the legacy report cards carried `border-l-4 border-l-brand-secondary` (a 4px left accent rail), but the surface reskin's `border: 1px solid ...` shorthand expands to all four sides and flattened that rail to a uniform faint 1px, so adjacent dark cards blur together. Restore a 3px ion left rail so each card reads as distinct (founder call: cohesive cyan, dark panel kept). border-left longhand, appended after the shorthand at equal specificity, wins the left edge only; top/right/bottom keep the faint 1px. Nested bg-base-200/.../50 wells are not .card, so they stay clean. */ .rb-page .report-reader .card, .rb-page .report-reader section.card { border-left: 3px solid rgba(88, 233, 255, 0.85); } /* (9) Dashboard "Latest telemetry" card sits hard left in the recon-panel (founder screenshot review). .recon-copy is width-constrained to min(72%, 380px) and, as a plain block child of the non-flex .recon-panel, defaults to the left edge with the apollo13 backdrop showing on the right. The companion card fills .recon-copy, so centring the wrapper centres the card. Additive: keeps the existing width rule untouched, only adds the auto side margins. (Mobile override sets width:100% so this is a no-op there.) */ .rb-page .dash-shell .recon-panel .recon-copy { margin-left: auto; margin-right: auto; } /* (10) User-menu / org-switch flyout rendered BEHIND page content (founder screenshot review, seen on the dashboard). Root cause: the global `.rb-page > :not(.asteroid-field) { position:relative; z-index:1 }` puts
AND
in sibling stacking contexts at the SAME level (z:1), so they paint in DOM order and
(later in the DOM) covers the header. The .nav-dropdown's z-index:50 is trapped inside the header's z:1 context and can never rise above main's. Lift the header's stacking context above its siblings (position:relative is already applied by the shared rule, so the context already exists; only the z-index needs raising). Safe: nothing in the rebrand sits above z:50 except this very dropdown, the in-flow #mobile-nav rides inside the header, and native modals use the top layer so they are unaffected. `header.nav` (0,2,1) beats the shared selector (0,2,0). Fixes the flyout site-wide, not just the dashboard. */ .rb-page header.nav { z-index: 60; } /* (11) Report hero red core glow was off-centre and vague (founder screenshot review). The block-(5) glow was a #hero-rings-col::before positioned at a hardcoded `left:26%` -- a guess at where the rings SVG centre falls inside the flex row (svg + gap + score legend). Measured ~19px right of the true ring centre on desktop, and the percentage is completely wrong on mobile (the row goes flex-col, svg on top) or with different score-grade text widths. The SVG's rings are dead-centre of its own square box (viewBox 0 0 220 220, every circle cx/cy 110), so the only layout-independent anchor is the SVG box itself. triple_rings .html (report-only; included solely by report.html, NOT report_pdf / score_card) now wraps the in a tight `span.rb-rings-core`; centre the glow on THAT. Additive + 0-deletion: the old ::before is neutralised by re-declaring the identical selector with content:none (same specificity, later in source wins) rather than editing block 5. Sizing: innermost ring r49 sw16 -> inner clear edge r41 in a 220 viewBox rendered at 208px (scale .945) ~= 77px hole; a ~60px blurred core sits cleanly inside it and reads as a deliberate reactor core. The svg keeps #triple-rings-svg id/aria/click-handler + its z-index:1 from block 5, so it still paints above the glow and the click-to- switch-tab getScreenCTM math is unaffected. */ .rb-page .report-reader #hero-rings-col::before { content: none; } .rb-page .report-reader .rb-rings-core { position: relative; display: inline-flex; line-height: 0; } .rb-page .report-reader .rb-rings-core::before { content: ""; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(229, 32, 32, 0.62) 0, rgba(255, 89, 60, 0.24) 52%, transparent 76%); filter: blur(2px) brightness(1); pointer-events: none; z-index: 0; /* Slow pulse: trough dims well below the static state, peak burns a touch brighter than it currently sits. ~4.2s full cycle reads as a breath, not a heartbeat. Suppressed below for prefers-reduced-motion. */ animation: rbRingsCorePulse 4.2s ease-in-out infinite; will-change: opacity, filter; } @keyframes rbRingsCorePulse { 0%, 100% { opacity: 0.55; filter: blur(2px) brightness(0.85); } 50% { opacity: 1; filter: blur(2px) brightness(1.35); } } @media (prefers-reduced-motion: reduce) { .rb-page .report-reader .rb-rings-core::before { animation: none; opacity: 1; filter: blur(2px) brightness(1); } } /* (12) Per-check status icons redesigned (founder call: "Neon ring + glyph"). The status_fail/warning/pass/info/na glyphs in report_macros.html (report-only; that macro file is NOT imported by the excluded report_pdf.html / score_card.html) were flat solid Heroicon-mini blobs dimmed to opacity-50 -> muddy on the dark MC surface. Redesigned in the macro to thin-stroke 24x24 ring+glyph (fill:none, stroke:currentColor) and the opacity-50/60 dropped at the call sites. Here: punchy MC palette (the generic .report-reader text-* remap is a softer pastel) + a soft signal-glow. Scoped to the check summary row's col-1 icon only; .check-summary-row (0,4,0) out-specifies the .report-reader text-* remap (0,3,0). status_warning is also reused by the severity/pill badges but those sit in .badge, not .check-summary-row, so they keep the badge reskin (unaffected). */ .rb-page .report-reader .check-summary-row > svg:first-child { filter: drop-shadow(0 0 4px currentColor); } .rb-page .report-reader .check-summary-row .text-red-500 { color: #ff5a4d; } .rb-page .report-reader .check-summary-row .text-amber-500 { color: #ffb93f; } .rb-page .report-reader .check-summary-row .text-emerald-500 { color: #39ff9b; } .rb-page .report-reader .check-summary-row .text-blue-300 { color: #58e9ff; } .rb-page .report-reader .check-summary-row .text-gray-300 { color: #7d8aa3; } /* (13) Header wordmark in Orbitron (founder request). Scoped to the logo GeoScored only; font-family inherits to the nested span so both words switch font while their colours (.rb-page .brand strong = #f9fbff "Geo", .rb-page .brand span = ion + glow "Scored") and the inherited weight:900 from .brand are left byte-for-byte. Standalone ruleset appended (not merged into the existing .brand strong colour rule) so rebrand.css stays 0-deletion. Orbitron is added to the existing base.html Google Fonts request (same domains/preconnect/CSP); falls back to the prior Inter stack if it fails to load. */ .rb-page .brand strong { font-family: "Orbitron", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; } /* (14) Footer wordmark in Orbitron (founder request) -- the exact counterpart of (13) for the second 'GeoScored' lockup that lives in the footer. Markup is GeoScored inside .footer-brand; font-family is scoped to the only and inherits to the nested so both words switch font while their colours (.footer-brand strong = #f9fbff "Geo", .footer-brand span = ion "Scored") and the inherited weight:900 from .footer-brand are left byte-for-byte. Nothing else in the header or footer is touched. .footer-brand strong is also weight 900, so the existing Orbitron:wght@700;900 base.html request already covers it -- no font request change needed. Standalone ruleset so rebrand.css stays 0-deletion; falls back to the prior Inter stack if Orbitron fails. */ .rb-page .footer-brand strong { font-family: "Orbitron", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; } /* (15) Rajdhani 'HUD layer' (founder-approved type system A: Orbitron wordmarks + Rajdhani instrument layer + Inter body). Rajdhani is scoped to the chrome/headline/control surfaces only -- headings (h1-h4), header + mobile-nav links, the nav dropdown items, the sign-in / primary action buttons, and footer column headers -- so the site reads like a control panel while paragraph body, table data, form fields, fine print and footer link lists stay Inter for readability (they are not listed here and keep inheriting the .rb-page Inter stack). ONLY font-family is declared: every existing size / weight / colour / letter-spacing rule on these selectors is untouched, and (13)/(14) still pin the two Orbitron wordmarks (they are .brand strong / .footer-brand strong, more specific paths than any selector here, so they win the cascade and stay Orbitron). Standalone ruleset appended so rebrand.css stays 0-deletion; Rajdhani 500/600/700 added to the existing base.html Google Fonts request (same domains/preconnect/CSP). Falls back to the prior Inter stack if Rajdhani fails to load. */ .rb-page h1, .rb-page h2, .rb-page h3, .rb-page h4, .rb-page header nav a, .rb-page .nav-actions a, .rb-page .nav-link-strong, .rb-page #mobile-nav a, .rb-page .nav-dropdown button, .rb-page .sign-in, .rb-page .cta-button, .rb-page .scan-button, .rb-page .button, .rb-page .footer h3 { font-family: "Rajdhani", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; } /* (16) Header nav size bump (founder request). Rajdhani is semi-condensed and reads visibly smaller than the Inter it replaced at the same px, so the desktop header links/sign-in felt undersized after (15). The size lives on .rb-page .nav-actions (0.87rem ~= 13.9px, inherited by the links + sign-in). Re-declared here at 1rem in a NEW standalone ruleset (equal specificity, later in source, so it wins for font-size only) rather than editing the original block, keeping rebrand.css 0-deletion. ONLY font-size changes; family (Rajdhani from 15), weight 700, colours, the 36px sign-in pill and the 24px Orbitron logo lockup are all left exactly as approved. */ .rb-page .nav-actions { font-size: 1rem; } /* (17) Pricing decal HUD labels (founder request). The .range-board decal on pricing.html holds the tier badges (.range-label > span kicker 'FREE'/'PRO' + strong title 'Listening Post'/'Scanning Array') and the meter bar (.range-meter-row > span label + strong value '3/day'/'50/day'). These are bare span/strong with no class, so the (15) HUD selector list never reached them and they stayed Inter while the rest of the chrome went Rajdhani -- the same uppercase-tracked instrument labels (15)/System A intentionally puts in Rajdhani. Scoped under .pricing-hero .range-board, which grep confirms exists ONLY in pricing.html (no other approved page has these classes, so byte-for-byte safety holds). ONLY font-family is declared; the page hero copy (.eyebrow/.hero-copy) and h1 are NOT in this selector -- body stays Inter and h1 keeps its (15) Rajdhani. Standalone ruleset so rebrand.css stays 0-deletion; Inter fallback. */ .rb-page .pricing-hero .range-board .range-label span, .rb-page .pricing-hero .range-board .range-label strong, .rb-page .pricing-hero .range-board .range-meter-row span, .rb-page .pricing-hero .range-board .range-meter-row strong { font-family: "Rajdhani", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; } /* (18) Report control strip in Rajdhani (founder request -- make the report page consistent with the rest of the HUD layer). The report tab labels (Site Info / Search / AI Visibility / AI Trust / Fix Prompt ...) are