/* ============================================================================ D3 Aurora Restrained — design tokens + Tabler/Bootstrap override bridge. Loaded after tabler.min.css in _Layout — these :root declarations win cascade. Reference: doc/Test/design/direction-3.html ============================================================================ */ /* Google Fonts — Inter. NOTE: @import removed for CWV. Font is loaded via in the layout with rel="preconnect" so it no longer blocks CSS parsing. Fallback stack below ensures text renders before the font loads. */ /* Dark default tokens */ :root, [data-bs-theme="dark"], [data-theme="dark"] { /* Base / surfaces — deep navy per DataForSEO-inspired redesign */ --c-bg: #0B1221; --c-surface-0: #0F1A2E; --c-surface-1: #162035; --c-surface-2: #1E2D46; --c-border: #1E2D46; --c-border-dim: #162035; /* Text */ --c-text-primary: #FFFFFF; --c-text-secondary:#A0AEBE; --c-text-tertiary: #8B9DB8; /* WCAG AA: ≥4.5:1 on all dark surfaces incl #162035 (#8B9DB8 ≈5.2:1) */ /* Accent — lime green (DataForSEO-inspired) */ --c-accent: #7DC800; --c-accent-dim: rgba(125,200,0,.12); --c-accent-hover: #8FD900; --c-accent-glow: rgba(125,200,0,.18); /* Aurora — hero ONLY — navy tones replace purple-blue */ --aurora-1: rgba(13,26,61,.35); --aurora-2: rgba(18,52,90,.25); --aurora-3: rgba(10,35,70,.20); /* Semantics */ --c-success: #34D399; --c-warn: #FBBF24; --c-danger: #F87171; /* Structure */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl:24px; --radius-pill:999px; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 20px rgba(0,0,0,.5); --shadow-lg: 0 12px 48px rgba(0,0,0,.6); --glow-accent: 0 0 32px rgba(125,200,0,.18); --nav-h: 62px; --container: 1240px; --gutter: clamp(20px, 4vw, 48px); --c-accent-grad: linear-gradient(135deg, #7DC800 0%, #A3E000 100%); --c-text-grad: linear-gradient(135deg, #7DC800 0%, #A3E000 100%); --font: 'Inter', system-ui, sans-serif; /* Tabler/Bootstrap bridge */ --tblr-body-bg: var(--c-bg); --tblr-body-color: var(--c-text-primary); --tblr-card-bg: var(--c-surface-1); --tblr-border-color: var(--c-border); --tblr-primary: #7DC800; --tblr-primary-rgb: 125, 200, 0; --tblr-success: #34D399; --tblr-success-rgb: 52, 211, 153; --tblr-warning: #FBBF24; --tblr-warning-rgb: 251, 191, 36; --tblr-danger: #F87171; --tblr-danger-rgb: 248, 113, 113; --tblr-link-color: var(--c-accent); --tblr-link-color-rgb: 125, 200, 0; --tblr-border-radius: 8px; --tblr-font-family-sans-serif: 'Inter', system-ui, sans-serif; } /* Light mode overrides */ [data-bs-theme="light"], [data-theme="light"] { --c-bg: #F4F7FB; --c-surface-0: #FFFFFF; --c-surface-1: #EEF2FA; --c-surface-2: #DDE3F2; --c-border: #DDE3F2; --c-border-dim: #EEF2FA; --c-text-primary: #0B1221; --c-text-secondary:#4A5872; --c-text-tertiary: #5A6B84; /* WCAG AA: ~5.8:1 on #F4F7FB light bg */ /* WCAG AA: #4A7F00 on #FFFFFF = ~4.7:1 PASS; on #F4F7FB ~5.0:1 PASS */ --c-accent: #4A7F00; --c-accent-dim: rgba(74,127,0,.1); --c-accent-hover: #3E6C00; --c-accent-glow: rgba(74,127,0,.12); --aurora-1: rgba(74,127,0,.08); --aurora-2: rgba(74,127,0,.05); --aurora-3: rgba(11,18,33,.04); --shadow-sm: 0 1px 2px rgba(11,18,33,.06); --shadow-md: 0 4px 20px rgba(11,18,33,.10); --shadow-lg: 0 12px 48px rgba(11,18,33,.14); --glow-accent: 0 0 32px rgba(74,127,0,.08); --c-accent-grad: linear-gradient(135deg, #4A7F00 0%, #66A800 100%); --c-text-grad: linear-gradient(135deg, #4A7F00 0%, #66A800 100%); /* WCAG AA: dark-mode --c-success #34D399 fails on light surfaces (1.9:1). Override to a dark accessible green for text/badge use in light theme. #1A6B40 on #EEF2FA ≈ 5.3:1 PASS; on #FFFFFF ≈ 5.9:1 PASS. */ --c-success: #1A6B40; /* WCAG AA: dark-mode --c-warn #FBBF24 fails on light surfaces (1.4:1). Override to dark amber. #7A5500 on #EEF2FA ≈ 5.6:1 PASS; on #FFFFFF ≈ 6.3:1 PASS. */ --c-warn: #7A5500; /* WCAG AA: dark-mode --c-danger #F87171 fails on light surfaces (2.46:1 vs large text, 1.96:1 vs normal). Override to dark accessible red. #B91C1C on #EEF2FA ≈ 5.1:1 PASS; on #FFFFFF ≈ 5.6:1 PASS. */ --c-danger: #B91C1C; --tblr-body-bg: var(--c-bg); --tblr-body-color: var(--c-text-primary); --tblr-card-bg: var(--c-surface-0); --tblr-border-color: var(--c-border); --tblr-primary: #4A7F00; --tblr-primary-rgb: 74, 127, 0; --tblr-link-color: var(--c-accent); } /* ── Global reset + typography ── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; } body { font-family: var(--font); background: var(--c-bg); color: var(--c-text-primary); font-size: clamp(16px, 1.06vw, 17px); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background .25s, color .25s; /* overflow-x moved to html — body overflow-x:hidden on iOS/Safari blocks child scroll containers (WebKit bug). html-level clip prevents page-level bleed while leaving descendant overflow-x:auto containers free to scroll. */ } /* ── Typography tokens — report & content blocks ── */ :root { --report-font-size: 17px; --report-line-height: 1.7; --text-measure: 70ch; /* comfortable reading line-length */ } /* Report body paragraphs / issue descriptions constrained to readable measure */ .orbi-r-impact, .orbi-r-fix, .orbi-r-desc, .orbi-insights-focus, .orbi-insights-recs li, .orbi-offpage-cta-text, .orbi-da-note, .orbi-da-proxy-note { max-width: var(--text-measure); } .orbi-r-desc { font-size: 14.5px; font-weight: 600; } .orbi-r-impact { font-size: 13px; line-height: 1.65; } .orbi-r-fix { font-size: 13px; line-height: 1.65; } /* Verdict block — slightly bigger, comfortable measure */ .orbi-verdict { font-size: 15px; line-height: 1.7; max-width: var(--text-measure); } /* Plan items — readable */ .orbi-plan-items { font-size: 13.5px; line-height: 1.75; max-width: var(--text-measure); } /* CTA sub — max measure */ .cta-sub { max-width: 560px; } /* Report h1 — tighter only on report page (override applied inline via .orbi-report-h1) */ /* ── NAVBAR ── */ /* Sticky nav base — transparent; .nav-scrolled added by JS on scroll > 20px */ .orbi-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; padding: 0 36px; background: transparent; /* overflow:hidden clips the nav to exactly var(--nav-h) — prevents the inner container from creating a transparent hit-area below the bar that would intercept clicks on the hero CTA and page content. */ overflow: hidden; transition: background .25s, border-color .25s, backdrop-filter .25s; } .orbi-nav.nav-scrolled { background: rgba(12,14,20,.78); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--c-border); } [data-theme="light"] .orbi-nav.nav-scrolled { background: rgba(248,250,255,.85); } .orbi-nav-inner { width: 100%; max-width: 1160px; margin: 0 auto; display: flex; align-items: center; /* The inner wrapper must not be a pointer-event sink on its non-interactive transparent background area. Interactive children restore pointer-events. */ pointer-events: none; } /* Restore pointer-events on every interactive child of orbi-nav-inner */ .orbi-nav-inner > *, .orbi-nav-collapse > *, .orbi-nav-links a, .orbi-nav-right > *, .orbi-nav-url, .orbi-brand, .orbi-nav-burger { pointer-events: auto; } /* Brand */ .orbi-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-text-primary); font-weight: 700; font-size: 15px; letter-spacing: -.4px; flex-shrink: 0; } .orbi-brand:hover { color: var(--c-text-primary); text-decoration: none; } .orbi-logo-mark { width: 30px; height: 30px; background: linear-gradient(135deg, var(--c-accent) 0%, #7B68EE 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(91,175,214,.3); flex-shrink: 0; } /* Centre links */ .orbi-nav-links { display: flex; align-items: center; margin: 0 auto; list-style: none; padding: 0; } .orbi-nav-links a { font-size: 13.5px; font-weight: 500; color: var(--c-text-secondary); text-decoration: none; padding: 6px 14px; border-radius: var(--radius-md); letter-spacing: -.1px; transition: color .15s, background .15s; } .orbi-nav-links a:hover { color: var(--c-text-primary); background: var(--c-surface-2); } /* Right cluster */ .orbi-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Inline theme toggle — lives inside navbar right cluster on marketing pages */ .orbi-theme-toggle { width: 35px; height: 35px; border-radius: var(--radius-md); border: 1px solid var(--c-border); background: rgba(255,255,255,.04); color: var(--c-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; } .orbi-theme-toggle:hover { background: var(--c-surface-2); color: var(--c-text-primary); } .orbi-theme-toggle svg { width: 15px; height: 15px; } /* Sun shown in dark mode (click to go light); moon shown in light mode (click to go dark) */ .orbi-icon-sun { display: block; } .orbi-icon-moon { display: none; } [data-theme="light"] .orbi-icon-sun { display: none; } [data-theme="light"] .orbi-icon-moon { display: block; } /* Ghost "Sign in" */ .orbi-btn-ghost { font-size: 13.5px; font-weight: 500; color: var(--c-text-secondary); text-decoration: none; padding: 7px 14px; border-radius: var(--radius-md); transition: color .15s, background .15s; } .orbi-btn-ghost:hover { color: var(--c-text-primary); background: var(--c-surface-2); text-decoration: none; } /* Primary CTA in navbar */ .orbi-btn-primary-nav { display: inline-flex; align-items: center; gap: 6px; background: var(--c-accent); color: #fff; font-size: 13.5px; font-weight: 600; padding: 8px 18px; border-radius: var(--radius-md); text-decoration: none; border: none; cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s; letter-spacing: -.1px; box-shadow: 0 1px 3px rgba(91,175,214,.25); /* TAP-2 WCAG 2.5.5 — minimum 44px tap target */ min-height: 44px; } .orbi-btn-primary-nav:hover { background: var(--c-accent-hover); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(91,175,214,.3); } /* Compact URL field that slides into the header on scroll (.nav-scrolled). Collapsed (width 0 / invisible) at top; expands when the centre links fade. */ .orbi-nav-url { display: flex; align-items: center; gap: 6px; margin-left: auto; background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 4px 4px 4px 10px; width: 0; opacity: 0; overflow: hidden; transform: translateY(-4px); pointer-events: none; transition: width .3s ease, opacity .25s ease, transform .25s ease; } .orbi-nav.nav-scrolled .orbi-nav-url { width: 320px; opacity: 1; transform: none; pointer-events: auto; } .orbi-nav.nav-scrolled .orbi-nav-links { opacity: 0; pointer-events: none; transition: opacity .2s; } .orbi-nav-url svg { width: 14px; height: 14px; color: var(--c-text-tertiary); flex: none; } .orbi-nav-url input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: var(--font); font-size: 12.5px; color: var(--c-text-primary); } .orbi-nav-url input::placeholder { color: var(--c-text-tertiary); } .orbi-nav-url-btn { padding: 6px 14px; font-size: 12.5px; box-shadow: none; flex: none; } @media (max-width: 720px) { /* On small screens the centre links already wrap/hide; keep the compact field hidden */ .orbi-nav.nav-scrolled .orbi-nav-url { width: 0; opacity: 0; pointer-events: none; } } /* Body offset for fixed nav */ .orbi-page { padding-top: var(--nav-h); } /* ── Audit button loading spinner ──────────────────────────────────────── CSP-safe: defined in this stylesheet, not inline style. .orbi-btn-loading adds a spin animation inside the button's ::after pseudo, keeping the DOM change minimal (one class toggle from JS). Works on both .orbi-btn-primary-lg (hero / free-audit-band) and .orbi-btn-primary-nav (compact nav URL form). */ @keyframes orbi-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .orbi-btn-loading { pointer-events: none; /* prevent double-submit */ } .orbi-btn-loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: orbi-spin .7s linear infinite; margin-left: 8px; vertical-align: middle; flex-shrink: 0; } /* Nav compact button: slightly smaller spinner */ .orbi-nav-url-btn.orbi-btn-loading::after { width: 11px; height: 11px; } /* ── CENTERED PAGE CONTAINER ───────────────────────────────────────── User refinement #1: content lives in a centered max-width container (~1200–1280px) with comfortable gutters on BOTH sides. Background aurora/dot-grid may still bleed full-width, but content is centered. */ .orbi-container { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); } /* Align the nav inner to the same content rhythm */ .orbi-nav-inner { max-width: 1240px; padding: 0 clamp(20px, 4vw, 48px); } /* ── HERO (split: left rotating carousel + right 3D live dashboard) ── */ .orbi-hero { position: relative; min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; padding: clamp(48px, 7vh, 96px) 0; overflow: hidden; isolation: isolate; } /* Centered content grid inside the bleeding background */ .orbi-hero-grid { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); display: grid; grid-template-columns: minmax(340px, 0.95fr) 1.25fr; gap: clamp(28px, 4vw, 64px); align-items: center; } @media (max-width: 980px) { .orbi-hero-grid { grid-template-columns: 1fr; gap: 40px; } } /* On mobile hide the dashboard mockup so there is no blank dead-zone below the copy */ @media (max-width: 760px) { .orbi-hero { min-height: auto; padding: clamp(36px, 8vh, 72px) 0; } .orbi-hero-right { display: none; } .orbi-hero-grid { gap: 0; } } /* ── HERO LEFT: rotating message carousel (STABILIZED) ── Slides are ALWAYS absolutely positioned and cross-fade in place inside a CONSTANT-height wrapper. The wrapper is sized to the TALLEST message at each breakpoint so the URL audit box + everything below NEVER moves on slide change. OVERLAP FIX: Slide 1's h1 is long (~18 words at max-width:14ch). At desktop font sizes (up to 58px × 1.05 lh) it wraps to 5–6 lines + a paragraph below, requiring ~420px of vertical space. Previous 290px was too short, causing the absolutely-positioned slide to overflow into the content below (URL form, dots, use-case badges). Heights below are sized to the tallest slide at each breakpoint with an 8px safety buffer. */ .orbi-hero-left { position: relative; z-index: 2; } .orbi-slides { position: relative; min-height: 430px; margin-bottom: 8px; } @media (max-width: 1280px) { .orbi-slides { min-height: 420px; } } @media (max-width: 980px) { .orbi-slides { min-height: 360px; } } @media (max-width: 760px) { .orbi-slides { min-height: 340px; } } @media (max-width: 600px) { .orbi-slides { min-height: 310px; } } @media (max-width: 440px) { .orbi-slides { min-height: 350px; } } .orbi-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; } .orbi-slide.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; /* stays position:absolute — wrapper height is fixed */ } /* A11Y: Slide 1 uses

— exactly one H1 per page. Remaining slides use

for identical visual styling without creating extra H1 violations. Both selectors share this rule. */ .orbi-slide h1, .orbi-slide-heading { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -1.2px; font-weight: 700; color: var(--c-text-primary); margin: 0 0 18px; max-width: 14ch; } .orbi-slide p { font-size: clamp(15px, 1.4vw, 17px); color: var(--c-text-secondary); max-width: 44ch; margin: 0; line-height: 1.65; } /* Big URL-audit field — the primary hero action (matches design-system .ds-url-field) */ .orbi-url-field { display: flex; align-items: center; gap: 8px; max-width: 520px; background: var(--c-surface-0); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 7px 7px 7px 16px; box-shadow: var(--shadow-md); transition: border-color .15s, box-shadow .15s; } .orbi-url-field:focus-within { border-color: var(--c-accent); box-shadow: var(--shadow-md), 0 0 0 3px var(--c-accent-dim); } .orbi-url-field .orbi-url-globe { width: 18px; height: 18px; color: var(--c-text-tertiary); flex: none; } .orbi-url-field input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: var(--font); font-size: 15px; color: var(--c-text-primary); } .orbi-url-field input::placeholder { color: var(--c-text-tertiary); } .orbi-url-field .orbi-btn-primary-lg { flex: none; } .orbi-url-micro { font-size: 13px; color: var(--c-text-tertiary); margin-top: 12px; } /* progress dots */ .orbi-dots { display: flex; gap: 10px; margin-top: 22px; align-items: center; } .orbi-dots button { width: 30px; height: 4px; border-radius: 100px; border: none; background: var(--c-border); cursor: pointer; padding: 0; transition: background .3s, width .3s; position: relative; overflow: hidden; } .orbi-dots button.active { width: 46px; background: rgba(125,200,0,.3); } .orbi-dots button.active::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--c-accent); transform-origin: left; animation: orbi-fill var(--orbi-dur, 6s) linear forwards; } @keyframes orbi-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .orbi-hero.paused .orbi-dots button.active::after { animation-play-state: paused; } .orbi-hero-trust { margin-top: 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--c-text-tertiary); font-size: 12.5px; } .orbi-hero-trust .orbi-sep { width: 1px; height: 14px; background: var(--c-border); } /* Use-case signal pills — hero section. Restyled: borderless inline labels separated by a mid-dot. No box, no chip — reads as a plain inline qualifier row. */ .orbi-usecase-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: 18px; } .orbi-usecase-pill { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); background: none; border: none; border-radius: 0; padding: 0; } /* Separate pills with a muted mid-dot spacer */ .orbi-usecase-pill + .orbi-usecase-pill::before { content: "·"; color: var(--c-text-tertiary); font-weight: 400; letter-spacing: 0; padding: 0 8px; font-size: 13px; line-height: 1; } [data-theme="light"] .orbi-usecase-pill { color: #3D6A00; /* #3D6A00 on #F4F7FB ~5.9:1 WCAG AA */ background: none; border: none; } /* Upgrade-note tier label — WCAG AA light-mode override */ .orbi-upgrade-tier-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 6px; } [data-theme="light"] .orbi-upgrade-tier-label { color: #3A6800; /* 5.1:1 on #eef2fa — WCAG AA */ } /* ── HERO RIGHT: 3D-tilted live dashboard composition ── */ /* R7 fix: pad-bottom accommodates the absolutely-positioned orbi-agentlog panel (bottom: -26px) so it never escapes the hero section and paints over orbi-desc or activity-feed text below. orbi-hero-right is a block-flow ancestor so extra padding here grows the section height rather than clipping the overflowing panel. */ .orbi-hero-right { position: relative; z-index: 1; min-height: 480px; padding-bottom: 60px; } .orbi-stage { position: relative; perspective: 1800px; display: flex; align-items: center; justify-content: center; } .orbi-stage::before { content: ""; position: absolute; width: 78%; height: 78%; top: 8%; right: 0; background: radial-gradient(circle, var(--c-accent-glow), transparent 65%); filter: blur(50px); z-index: 0; } .orbi-deck { position: relative; width: min(700px, 100%); transform: rotateY(-9deg) rotateX(3deg); transform-style: preserve-3d; } @media (max-width: 980px) { .orbi-deck { transform: none; } } .orbi-panel { background: var(--c-surface-0); border: 1px solid var(--c-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } /* browser-chrome dashboard */ .orbi-browser { overflow: hidden; } .orbi-browser-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-1); } .orbi-browser-bar .orbi-dotrow { display: flex; gap: 6px; } .orbi-browser-bar .orbi-dotrow i { width: 10px; height: 10px; border-radius: 50%; display: block; } .orbi-browser-bar .orbi-url { margin-left: 10px; flex: 1; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 7px; padding: 5px 12px; font-size: 11.5px; color: var(--c-text-tertiary); display: flex; align-items: center; gap: 7px; overflow: hidden; white-space: nowrap; } .orbi-browser-bar .orbi-url svg { width: 11px; height: 11px; color: var(--c-success); flex: none; } .orbi-dash-body { padding: 16px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 13px; } .orbi-mini-card { background: var(--c-surface-1); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 15px; } .orbi-mini-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; } .orbi-mini-h .orbi-t { font-size: 12px; font-weight: 600; color: var(--c-text-secondary); } .orbi-badge { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; } .orbi-badge.up { color: var(--c-success); background: rgba(52,211,153,.13); } /* health gauge */ .orbi-gauge-wrap { display: flex; align-items: center; gap: 14px; } .orbi-gauge { position: relative; width: 96px; height: 96px; flex: none; } .orbi-gauge svg { transform: rotate(-90deg); } .orbi-gauge .orbi-num { position: absolute; inset: 0; display: grid; place-items: center; } .orbi-gauge .orbi-num b { font-size: 28px; font-weight: 700; letter-spacing: -1px; color: var(--c-text-primary); } .orbi-gauge .orbi-num small { display: block; text-align: center; font-size: 9px; color: var(--c-text-tertiary); letter-spacing: .08em; text-transform: uppercase; margin-top: -2px; } .orbi-gauge-legend { font-size: 11px; color: var(--c-text-secondary); display: grid; gap: 7px; } .orbi-gauge-legend .orbi-row { display: flex; align-items: center; gap: 8px; } .orbi-gauge-legend .orbi-pip { width: 8px; height: 8px; border-radius: 3px; flex: none; } /* core web vitals */ .orbi-cwv { display: grid; gap: 12px; } .orbi-cwv .orbi-metric .orbi-lbl { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 6px; } .orbi-cwv .orbi-metric .orbi-lbl span:first-child { color: var(--c-text-secondary); } .orbi-cwv .orbi-metric .orbi-lbl b { font-weight: 700; } .orbi-mini-bar { height: 6px; border-radius: 100px; background: var(--c-surface-2); overflow: hidden; } .orbi-mini-bar i { display: block; height: 100%; border-radius: 100px; } /* issue list */ .orbi-issues { grid-column: 1 / -1; } .orbi-issue { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--c-border-dim); font-size: 12.5px; } .orbi-issue:last-child { border-bottom: none; } .orbi-issue .orbi-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; } .orbi-issue .orbi-ico svg { width: 13px; height: 13px; } .orbi-issue .orbi-desc { flex: 1; color: var(--c-text-primary); } .orbi-issue .orbi-desc small { display: block; color: var(--c-text-tertiary); font-size: 11px; } .orbi-pri { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 5px; flex: none; } .orbi-pri.high { color: var(--c-danger); background: rgba(248,113,113,.13); } .orbi-pri.med { color: var(--c-warn); background: rgba(251,191,36,.13); } .orbi-pri.low { color: var(--c-accent); background: var(--c-accent-dim); } /* floating rank chip (top-right of deck) */ .orbi-rankchip { position: absolute; top: -22px; right: -24px; z-index: 7; padding: 12px 15px; transform: translateZ(40px); display: flex; align-items: center; gap: 12px; } .orbi-rankchip .orbi-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; } .orbi-rankchip .orbi-spark i { width: 4px; border-radius: 2px; background: var(--c-accent); opacity: .55; } .orbi-rankchip .orbi-chip-lbl small { display: block; font-size: 9.5px; color: var(--c-text-tertiary); text-transform: uppercase; letter-spacing: .07em; } .orbi-rankchip .orbi-chip-lbl b { font-size: 16px; font-weight: 700; color: var(--c-text-primary); } .orbi-rankchip .orbi-chip-lbl b em { font-style: normal; font-size: 12px; color: var(--c-success); margin-left: 4px; } /* floating agent-activity ticker (bottom-left of deck) */ .orbi-agentlog { position: absolute; bottom: -26px; left: -32px; width: 290px; z-index: 7; padding: 14px 16px; transform: translateZ(60px); } .orbi-agentlog .orbi-alh { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .orbi-agentlog .orbi-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); position: relative; flex: none; } .orbi-agentlog .orbi-pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--c-success); opacity: .5; animation: orbi-ring 2s ease-out infinite; } @keyframes orbi-ring { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } } .orbi-agentlog .orbi-alh .orbi-t { font-size: 12px; font-weight: 600; color: var(--c-text-primary); } .orbi-agentlog .orbi-alh .orbi-t span { color: var(--c-text-tertiary); font-weight: 500; } .orbi-ticker { height: 70px; overflow: hidden; position: relative; mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); } .orbi-ticker ul { list-style: none; padding: 0; margin: 0; animation: orbi-scroll 14s linear infinite; } .orbi-hero.paused .orbi-ticker ul { animation-play-state: paused; } .orbi-ticker li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--c-text-secondary); padding: 5px 0; } .orbi-ticker li b { color: var(--c-text-primary); font-weight: 600; } .orbi-ticker li .orbi-ts { color: var(--c-text-tertiary); font-size: 10px; margin-left: auto; flex: none; } .orbi-ticker li .orbi-tick { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); flex: none; } @keyframes orbi-scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } @media (max-width: 600px) { .orbi-rankchip, .orbi-agentlog { display: none; } .orbi-dash-body { grid-template-columns: 1fr; } } /* legacy single-column hero content block (kept for fallback, now unused) */ .orbi-hero-content-legacy { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; } /* Aurora bg — hero ONLY — replaced blobs with single radial bloom; canvas does the particle work */ .orbi-aurora-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 40% 50%, rgba(18,52,90,.4) 0%, transparent 70%); } /* Old blob classes kept as no-ops so Razor markup doesn't break */ .orbi-aurora-blob, .orbi-aurora-blob-1, .orbi-aurora-blob-2, .orbi-aurora-blob-3 { display: none; } /* Dot grid removed — canvas constellation replaces it */ .orbi-hero::before { content: none; } /* Constellation canvas */ #orbiConstellation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 1; } [data-theme="light"] #orbiConstellation { opacity: 0.55; } /* Hero eyebrow — borderless prominent section-header style. No box, no pill, no background — reads as a bold location header. Largest/most prominent eyebrow on the page (bigger than .orbi-section-tag). */ .orbi-hero-badge { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); background: none; border: none; padding: 0; margin-bottom: 24px; word-break: keep-all; overflow-wrap: normal; max-width: 100%; white-space: normal; } /* Leading accent line — same rhythm as .orbi-section-tag */ .orbi-hero-badge::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--c-accent); flex-shrink: 0; } @media (max-width: 480px) { .orbi-hero-badge { font-size: 10.5px; letter-spacing: .09em; } /* Hide the long badge text on the smallest screens, show a shorter label */ .orbi-hero-badge .orbi-badge-full { display: none; } .orbi-hero-badge .orbi-badge-short { display: inline; } } @media (min-width: 481px) { .orbi-hero-badge .orbi-badge-short { display: none; } .orbi-hero-badge .orbi-badge-full { display: inline; } } /* Pulse dot hidden — hero badge now uses a ::before accent line instead */ .orbi-hero-badge-dot { display: none; } @keyframes orbi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* H1 — legacy single-column hero only (split hero uses .orbi-slide h1) */ .orbi-hero-content-legacy h1 { font-size: clamp(40px, 7vw, 72px); font-weight: 700; line-height: 1.04; letter-spacing: -3px; color: var(--c-text-primary); margin-bottom: 24px; } /* Gradient text — used sparingly on a single keyword per heading */ .orbi-gradient-text { background: linear-gradient(135deg, #7DC800 0%, #A3E000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; word-spacing: 0.22em; /* restore word gap lost to negative letter-spacing inheritance */ } /* Subhead — legacy single-column hero only */ .orbi-hero-content-legacy p.orbi-lead { font-size: 17px; font-weight: 400; line-height: 1.7; color: var(--c-text-secondary); max-width: 520px; margin: 0 auto 40px; } /* CTA row */ .orbi-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .orbi-btn-primary-lg { display: inline-flex; align-items: center; gap: 8px; background: var(--c-accent); color: #fff; font-size: 14.5px; font-weight: 600; padding: 12px 26px; border-radius: var(--radius-md); text-decoration: none; border: none; cursor: pointer; box-shadow: 0 2px 8px rgba(91,175,214,.3), var(--glow-accent); transition: background .15s, box-shadow .15s, transform .1s; letter-spacing: -.2px; } .orbi-btn-primary-lg:hover { background: var(--c-accent-hover); color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(91,175,214,.35), var(--glow-accent); } .orbi-btn-secondary-lg { display: inline-flex; align-items: center; gap: 8px; background: var(--c-surface-1); color: var(--c-text-primary); border: 1px solid var(--c-border); font-size: 14.5px; font-weight: 500; padding: 12px 24px; border-radius: var(--radius-md); text-decoration: none; transition: background .15s, border-color .15s; letter-spacing: -.2px; } .orbi-btn-secondary-lg:hover { background: var(--c-surface-2); border-color: var(--c-accent); color: var(--c-text-primary); text-decoration: none; } /* ── SECTIONS ── */ .orbi-section { padding: 96px 0; max-width: 1240px; margin: 0 auto; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); } /* Section eyebrow — borderless bold heading-level label. Slightly smaller than the hero eyebrow but same borderless treatment. No box, no pill — reads as a prominent section header. */ .orbi-section-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 16px; } .orbi-section-tag::before { content:''; width:22px; height:2px; background: var(--c-accent); flex-shrink:0; } .orbi-section-title { font-size: clamp(26px, 4vw, 46px); font-weight: 700; letter-spacing: -1.8px; line-height: 1.08; color: var(--c-text-primary); max-width: 560px; margin-bottom: 20px; } .orbi-section-sub { font-size: 15.5px; color: var(--c-text-secondary); max-width: 480px; line-height: 1.7; margin-bottom: 56px; } /* ── FEATURE CARDS ── */ .orbi-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 900px) { .orbi-features-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .orbi-features-grid { grid-template-columns: 1fr; } } .orbi-feat-card { background: var(--c-surface-0); border: 1px solid var(--c-border); border-radius: var(--radius-2xl); padding: 32px; position: relative; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .15s; } .orbi-feat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-accent-dim), transparent); opacity: 0; transition: opacity .3s; } .orbi-feat-card:hover { border-color: rgba(125,200,0,.3); box-shadow: var(--shadow-md), 0 0 24px rgba(125,200,0,.06); transform: translateY(-2px); } .orbi-feat-card:hover::before { opacity: 1; } .orbi-feat-icon { width: 44px; height: 44px; background: var(--c-accent-dim); border: 1px solid rgba(125,200,0,.2); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--c-accent); margin-bottom: 22px; } .orbi-feat-icon svg { width: 20px; height: 20px; } .orbi-feat-title { font-size: 15px; font-weight: 650; letter-spacing: -.3px; color: var(--c-text-primary); margin-bottom: 10px; } .orbi-feat-body { font-size: 13.5px; color: var(--c-text-secondary); line-height: 1.65; } /* Live badge on the instant-audit card */ .orbi-live-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-success); margin-top: 14px; } .orbi-live-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); animation: orbi-pulse 2s infinite; } /* ── AGENT ACTIVITY LOG (How it works section) ── */ .orbi-how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } @media (max-width: 900px) { .orbi-how-grid { grid-template-columns: 1fr; gap: 48px; } } .orbi-timeline { display: flex; flex-direction: column; position: relative; } .orbi-timeline::before { content: ''; position: absolute; left: 20px; top: 24px; bottom: 24px; width: 1px; background: var(--c-border); } .orbi-timeline-item { display: flex; gap: 20px; padding: 0 0 36px; position: relative; } .orbi-timeline-item:last-child { padding-bottom: 0; } .orbi-timeline-circle { width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-surface-1); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--c-text-tertiary); position: relative; z-index: 1; transition: border-color .2s, background .2s, color .2s; } .orbi-timeline-item:hover .orbi-timeline-circle { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-dim); } .orbi-timeline-body { padding-top: 10px; } .orbi-timeline-body h3 { font-size: 15px; font-weight: 650; letter-spacing: -.3px; color: var(--c-text-primary); margin-bottom: 8px; } .orbi-timeline-body p { font-size: 13.5px; color: var(--c-text-secondary); line-height: 1.65; } /* Log panel */ .orbi-log-panel { border: 1px solid var(--c-border); border-radius: var(--radius-2xl); background: var(--c-surface-0); overflow: hidden; box-shadow: var(--shadow-lg); } .orbi-log-header { padding: 14px 18px; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 10px; background: var(--c-surface-1); } .orbi-log-dot { width: 10px; height: 10px; border-radius: 50%; } .orbi-log-label { font-size: 12px; font-weight: 600; color: var(--c-text-secondary); margin-left: 4px; } .orbi-log-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; } .orbi-log-line { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; font-family: 'SF Mono','Fira Code',monospace; } .orbi-log-ts { color: var(--c-text-tertiary); flex-shrink: 0; } .orbi-log-msg { color: var(--c-text-secondary); line-height: 1.5; } .orbi-log-msg.accent { color: var(--c-accent); } .orbi-log-msg.success { color: var(--c-success); } .orbi-log-msg.dim { color: var(--c-text-tertiary); } .orbi-log-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-left: 6px; background: var(--c-accent-dim); color: var(--c-accent); font-family: var(--font); } .orbi-log-tag.warn { background: rgba(251,191,36,.12); color: var(--c-warn); } .orbi-log-tag.success { background: rgba(52,211,153,.12); color: var(--c-success); } /* ── CTA BAND ── */ .orbi-cta-band { position: relative; overflow: hidden; padding: 96px 40px; text-align: center; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } /* Single low-opacity radial — only one aurora-style element allowed in CTA band */ .orbi-cta-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(125,200,0,.06) 0%, transparent 70%); } .orbi-cta-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; } .orbi-cta-band h2 { font-size: clamp(26px, 4vw, 44px); font-weight: 700; letter-spacing: -1.8px; color: var(--c-text-primary); margin-bottom: 18px; /* Comfortable line-height so the accent underline drawn under a wrapped word never collides with the line below it (see .orbi-underline-accent). */ line-height: 1.28; } .orbi-cta-band p { font-size: 16px; color: var(--c-text-secondary); margin-bottom: 36px; line-height: 1.65; } .orbi-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Accent gradient underline drawn UNDER a single keyword in a heading. Uses an inline background-image confined to the text box (background-position bottom + box-decoration-break: clone) so when the heading wraps, the underline stays under the word's own line — it never overlaps the wrapped line above. The underline is parked just ABOVE the box bottom (background-position 0 calc(100% - .06em)) with matching padding-bottom, so the gradient band sits in the line's leading gap and never overlaps the glyphs of the word OR the wrapped line beneath it. box-decoration-break: clone makes each wrapped fragment carry its own underline. Works in both themes (keys off --c-accent). */ .orbi-underline-accent { position: relative; background-image: linear-gradient(90deg, var(--c-accent), var(--c-accent-hover)); background-repeat: no-repeat; background-position: 0 calc(100% - .06em); background-size: 100% .12em; padding-bottom: .18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } [data-theme="light"] .orbi-underline-accent { /* Slightly stronger band in light mode so it reads against the bright surface, but kept as a thin underline (not a full highlight) to avoid washing the text. */ background-size: 100% .14em; opacity: .85; } /* ── FOOTER ── */ .orbi-footer { padding: 56px 0 64px; } .orbi-footer-inner { max-width: 1240px; margin: 0 auto; padding-left: clamp(20px, 4vw, 48px); padding-right: clamp(20px, 4vw, 48px); } .orbi-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--c-border-dim); } @media (max-width: 800px) { .orbi-footer-top { grid-template-columns: 1fr 1fr; } } .orbi-footer-brand-desc { font-size: 13px; color: var(--c-text-tertiary); line-height: 1.7; max-width: 240px; margin-top: 12px; } .orbi-footer-col h5, .orbi-footer-col h3 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-tertiary); margin-bottom: 16px; } .orbi-footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .orbi-footer-col a { font-size: 13.5px; color: var(--c-text-secondary); text-decoration: none; transition: color .15s; } .orbi-footer-col a:hover { color: var(--c-text-primary); } .orbi-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 12px; } .orbi-footer-bottom p { font-size: 12px; color: var(--c-text-tertiary); margin: 0; } .orbi-footer-bottom a { color: var(--c-text-tertiary); text-decoration: none; transition: color .15s; } .orbi-footer-bottom a:hover { color: var(--c-text-secondary); } .orbi-footer-mor { font-size: 11.5px; color: var(--c-text-tertiary); margin: 12px 0 0; text-align: center; } .orbi-footer-mor a { color: var(--c-text-tertiary); text-decoration: underline; text-underline-offset: 2px; transition: color .15s; } .orbi-footer-mor a:hover { color: var(--c-text-secondary); } /* ── Legal mini-footer (_LegalFooter.cshtml) — marketing pages without a full footer ── */ .orbi-legal-mini-footer { border-top: 1px solid var(--c-border-dim); background: var(--c-surface-0, var(--c-bg)); padding: 16px clamp(20px, 4vw, 48px); } .orbi-legal-mini-inner { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--c-text-tertiary); } .orbi-legal-mini-inner nav { display: flex; gap: 16px; flex-wrap: wrap; } .orbi-legal-mini-inner a { color: var(--c-text-tertiary); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--c-border); transition: color .15s; } .orbi-legal-mini-inner a:hover { color: var(--c-text-secondary); } /* ===== Lane D — Onboarding (additive; aliases legacy step/tab classes to Tabler look) ===== */ /* Verify JS still toggles .tab-active on the .nav-link tabs — make the active highlight track .tab-active (the JS-driven class), not Bootstrap's .active plugin. */ .onboarding-verify .nav-tabs .nav-link.tab-active { color: var(--tblr-primary); border-bottom-color: var(--tblr-primary); background: transparent; } /* Verify JS adds .step-done / .step-active on success — alias to Tabler's completed/active step look so the inline verify JS stays byte-identical (markup/CSS-only, no logic change). */ .steps .step-item.step-active::before { background-color: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; } .steps .step-item.step-done { color: var(--tblr-success); } .steps .step-item.step-done::before { background-color: var(--tblr-success); border-color: var(--tblr-success); color: #fff; } /* ============================================================================ === Lane E: Dashboard === Minimal rules for things Tabler classes can't express. SignalR toggles the .ladder-step state classes (done/current/todo) live, so the marker colors key off those classes (not Tabler's internal .steps classes). Keyed off brand vars. ========================================================================== */ .dash-gauge { min-height: 200px; } /* Ladder step markers reflect SignalR-toggled state classes. */ .ladder-steps .ladder-step-marker { font-weight: 600; margin-right: .5rem; } .ladder-steps .ladder-step.done .ladder-step-marker { color: var(--tblr-success); } .ladder-steps .ladder-step.current .ladder-step-marker { color: var(--tblr-primary); } .ladder-steps .ladder-step.current .ladder-step-label { font-weight: 600; } .ladder-steps .ladder-step.todo .ladder-step-label { opacity: .6; } /* ============================================================================ === Homepage additions: "see the work" + trust strip === Centered-container sections; D3 token-driven; both themes via --c-* vars. ========================================================================== */ /* ── "SEE THE WORK" agent-activity section ── */ .orbi-work { position: relative; } .orbi-work-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; } @media (max-width: 900px) { .orbi-work-grid { grid-template-columns: 1fr; gap: 40px; } } .orbi-work-points { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 16px; } .orbi-work-points li { display: flex; gap: 12px; font-size: 13.5px; color: var(--c-text-secondary); line-height: 1.6; } .orbi-work-points li svg { width: 18px; height: 18px; color: var(--c-accent); flex: none; margin-top: 2px; } .orbi-work-points li b { color: var(--c-text-primary); font-weight: 600; } /* ── HONEST TRUST / SOCIAL-PROOF STRIP ── */ .orbi-trust-strip { border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); background: var(--c-surface-0); } .orbi-trust-inner { max-width: 1240px; margin: 0 auto; padding: 56px clamp(20px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; } @media (max-width: 760px) { .orbi-trust-inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; } } .orbi-trust-stat .orbi-stat-num { font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -1.4px; color: var(--c-text-primary); line-height: 1.1; } .orbi-trust-stat .orbi-stat-num .orbi-gradient-text { font-weight: 700; } /* Small trailing unit/qualifier on a stat number (e.g. "30s", "0 guarantees"). Sits on the baseline beside the big number; muted + smaller so the figure leads. */ .orbi-trust-stat .orbi-stat-num .orbi-stat-unit { font-size: .42em; font-weight: 600; letter-spacing: -.2px; color: var(--c-text-secondary); margin-left: 3px; } .orbi-trust-stat .orbi-stat-lbl { font-size: 12.5px; color: var(--c-text-secondary); margin-top: 8px; line-height: 1.5; } .orbi-trust-note { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px) 56px; text-align: center; font-size: 13px; color: var(--c-text-tertiary); } /* ============================================================================ === D3 APP SHELL — authenticated pages (_AppLayout) === Sticky LEFT sidebar + TOP bar. Dark default; both themes via --c-* tokens. Wide screens: sidebar is a fixed 248px rail, collapsible to a 70px icon rail. Narrow (<=920px): sidebar slides in off-canvas over a scrim. Vocabulary the page lanes consume: .orbi-app-container wraps page content; set ViewData["PageTitle"] for the top-bar H1. Use Tabler card/table/badge classes inside — Tabler tokens are bridged to --c-* in :root above. ========================================================================== */ :root { --orbi-side-w: 248px; --orbi-side-w-collapsed: 70px; --orbi-topbar-h: 60px; } .orbi-app { --side: var(--orbi-side-w); min-height: 100vh; background: var(--c-bg); color: var(--c-text-primary); } .orbi-app.orbi-app--collapsed { --side: var(--orbi-side-w-collapsed); } /* ── Sidebar ── */ .orbi-side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; width: var(--side); display: flex; flex-direction: column; background: var(--c-surface-0); border-right: 1px solid var(--c-border); transition: width .2s ease, transform .25s ease; overflow: hidden; } .orbi-side-head { height: var(--orbi-topbar-h); flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 18px; border-bottom: 1px solid var(--c-border); } .orbi-side-brand { gap: 10px; min-width: 0; } .orbi-side-brand-text { white-space: nowrap; overflow: hidden; } .orbi-side-collapse { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: transparent; color: var(--c-text-secondary); cursor: pointer; transition: color .15s, background .15s, transform .2s; } .orbi-side-collapse:hover { color: var(--c-text-primary); background: var(--c-surface-2); } .orbi-side-collapse svg { width: 15px; height: 15px; } .orbi-app--collapsed .orbi-side-collapse svg { transform: rotate(180deg); } .orbi-side-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; } .orbi-side-link { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-md); color: var(--c-text-secondary); text-decoration: none; font-size: 13.5px; font-weight: 500; letter-spacing: -.1px; white-space: nowrap; transition: color .15s, background .15s; } .orbi-side-link:hover { color: var(--c-text-primary); background: var(--c-surface-2); text-decoration: none; } .orbi-side-link.active { color: var(--c-accent); background: var(--c-accent-dim); } .orbi-side-link.active .orbi-side-ico { color: var(--c-accent); } .orbi-side-ico { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--c-text-tertiary); } .orbi-side-ico svg { width: 18px; height: 18px; } .orbi-side-link:hover .orbi-side-ico { color: var(--c-text-primary); } .orbi-side-foot { flex: none; padding: 14px 12px; border-top: 1px solid var(--c-border); } .orbi-side-cta { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-md); border: none; cursor: pointer; background: var(--c-accent-grad); color: #0B1221; font-size: 13px; font-weight: 600; letter-spacing: -.1px; box-shadow: 0 2px 8px rgba(125,200,0,.25); transition: transform .1s, box-shadow .15s; } .orbi-side-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(125,200,0,.3); } .orbi-side-cta svg { width: 18px; height: 18px; flex: none; } /* Collapsed (icon-only) rail — hide text labels, center the icons */ .orbi-app--collapsed .orbi-side-brand-text, .orbi-app--collapsed .orbi-side-label { display: none; } .orbi-app--collapsed .orbi-side-link, .orbi-app--collapsed .orbi-side-cta { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } .orbi-app--collapsed .orbi-side-head { padding: 0; justify-content: center; } .orbi-app--collapsed .orbi-side-brand { justify-content: center; } .orbi-app--collapsed .orbi-side-collapse { position: absolute; top: 16px; right: 10px; } /* Scrim — only visible when the off-canvas nav is open on narrow screens */ .orbi-side-scrim { position: fixed; inset: 0; z-index: 1039; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } /* ── Main column ── */ .orbi-main { margin-left: var(--side); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s ease; } .orbi-topbar { position: sticky; top: 0; z-index: 1030; height: var(--orbi-topbar-h); flex: none; display: flex; align-items: center; gap: 14px; padding: 0 clamp(16px, 3vw, 32px); background: rgba(17,20,32,.82); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--c-border); } [data-theme="light"] .orbi-topbar { background: rgba(255,255,255,.85); } .orbi-topbar-burger { display: none; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: transparent; color: var(--c-text-secondary); cursor: pointer; } .orbi-topbar-burger:hover { color: var(--c-text-primary); background: var(--c-surface-2); } .orbi-topbar-burger svg { width: 18px; height: 18px; } .orbi-topbar-title { font-size: 16px; font-weight: 650; letter-spacing: -.4px; color: var(--c-text-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .orbi-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Account menu (reuses .orbi-theme-toggle from the navbar block above) */ .orbi-account-btn { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: var(--radius-md); border: 1px solid var(--c-border); background: rgba(255,255,255,.04); color: var(--c-text-secondary); cursor: pointer; font-size: 13px; font-weight: 500; transition: color .15s, background .15s; } .orbi-account-btn:hover { color: var(--c-text-primary); background: var(--c-surface-2); } .orbi-account-avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-accent-grad); color: #0B1221; } .orbi-account-avatar svg { width: 16px; height: 16px; } /* ── Body container ── */ .orbi-app-body { flex: 1; padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 32px); } .orbi-app-container { width: 100%; max-width: 1240px; margin: 0 auto; } /* ── Responsive: off-canvas sidebar on narrow screens ── */ @media (max-width: 920px) { .orbi-side { transform: translateX(-100%); width: var(--orbi-side-w); } .orbi-app--navopen .orbi-side { transform: translateX(0); box-shadow: var(--shadow-lg); } .orbi-app--navopen .orbi-side-scrim { opacity: 1; visibility: visible; } .orbi-main { margin-left: 0; } .orbi-topbar-burger { display: flex; } /* The wide-screen collapse control is meaningless off-canvas — hide it */ .orbi-side-collapse { display: none; } /* Ignore any persisted collapsed state on narrow screens */ .orbi-app.orbi-app--collapsed { --side: var(--orbi-side-w); } .orbi-app.orbi-app--collapsed .orbi-side-brand-text, .orbi-app.orbi-app--collapsed .orbi-side-label { display: inline; } .orbi-app.orbi-app--collapsed .orbi-side-link, .orbi-app.orbi-app--collapsed .orbi-side-cta { justify-content: flex-start; gap: 12px; padding-left: 12px; padding-right: 12px; } } /* ============================================================================ WCAG / ACCESSIBILITY FIXES — Lane B (2026-07-02) ============================================================================ */ /* ── Skip navigation link (markup added by Lane A in _Layout.cshtml) ── */ .orbi-skip-nav { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999; text-decoration: none; } .orbi-skip-nav:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; overflow: visible; background: var(--c-accent); color: #fff; padding: 8px 16px; border-radius: var(--radius-md); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-md); } /* ── Global :focus-visible ring — WCAG SC 2.4.7 (systemic fix, all interactive elements) ── Adds a 2px solid accent outline with offset to EVERY button, link, and input that receives keyboard focus. Applies only to :focus-visible (keyboard navigation), not mouse clicks, so it doesn't affect mouse-driven hover states. This single declaration fixes WCAG 2.4.7 across the entire site for: .orbi-btn-ghost, .orbi-btn-primary-nav, .orbi-btn-primary-lg, .orbi-theme-toggle, .orbi-nav-burger, .orbi-side-collapse, .orbi-topbar-burger, .orbi-account-btn, .orbi-tier-cta, .legal-form-submit, .orbi-btn-google, .orbi-auth-link, footer links, sidebar links, and all others. */ *:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; } /* Elements that already implement compound :focus-within rings on the wrapper (the inner has outline:none intentionally — the parent row shows the ring). Suppress the redundant ring on the input itself so there's no double outline. */ .orbi-audit-input:focus-visible, .orbi-audit-input-row input:focus-visible, .orbi-nav-url input:focus-visible, .orbi-url-field input:focus-visible, .orbi-freeaudit-form input:focus-visible { outline: none; } /* Auth inputs use their own custom :focus border+shadow — don't add a second outline */ .orbi-auth-card .orbi-input:focus-visible { outline: none; } /* Legal form inputs use :focus border+shadow — suppress double outline */ .legal-form-row input:focus-visible, .legal-form-row select:focus-visible, .legal-form-row textarea:focus-visible { outline: none; } /* ── In-text link underline (WCAG SC 1.4.1 — distinguishable without colour) ── */ /* Covers: pricing footer, legal footer MoR note, legal content body, tier MoR note, contact page footer/card, and any legal-badge area links. */ .orbi-pricing-footer a, .orbi-pricing-footer .orbi-mor-note a, .orbi-tier-mor a, .orbi-footer-mor a, a.legal-email-link, .legal-content a, .legal-footer a, .legal-contact-form a, .legal-contact-section p a, .legal-contact-card a:not(.legal-email-link), /* SC 1.4.1 fix: inline links in /legal/refund and /legal/ai-systems prose paragraphs must be distinguishable by more than colour alone. Axe: link-in-text-block (6 nodes). .legal-card-body covers /legal/ai-systems cards (contact, note, risk, data sections). .legal-body-content kept for backward compat with any earlier templates. */ .legal-card-body a, .legal-body-content p a, .legal-body-content li a { text-decoration: underline; text-underline-offset: 2px; } /* ── Gradient text light-mode override ── */ [data-theme="light"] .orbi-gradient-text { background: linear-gradient(135deg, #4A7F00 0%, #6BAD00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Aurora bg light-mode override ── */ [data-theme="light"] .orbi-aurora-bg { background: radial-gradient(ellipse 70% 60% at 40% 50%, rgba(74,127,0,.06) 0%, transparent 70%); } /* ── log-msg accent/success in light mode: var(--c-accent) now #4A7F00 PASS ── */ /* success: #34D399 on white fails (3.6:1) → darken for light mode */ [data-theme="light"] .orbi-log-msg.success { color: #065F46; } .orbi-pricing-footer a:hover, .orbi-tier-mor a:hover, .orbi-footer-mor a:hover, .legal-content a:hover, .legal-footer a:hover { opacity: .8; } /* ── Section-tag (Capabilities / Process) accent color in light mode contrast fix ── Dark mode: --c-accent #7DC800 on page bg #0B1221 = ~9.8:1 PASS Light mode: --c-accent #4A7F00 on page bg #F4F7FB = ~5.9:1 PASS */ [data-theme="light"] .orbi-section-tag { color: #4A7F00; } /* Annual-badge chip: lime in light mode — darken text for WCAG AA on tinted bg #e3ebe2 */ [data-theme="light"] .orbi-annual-badge { color: #3D6A00; /* #3D6A00 on #e3ebe2 ~5.4:1 PASS */ } /* Hero badge eyebrow text in light mode — border/bg already none; just ensure contrast */ [data-theme="light"] .orbi-hero-badge { color: #3D6A00; /* #3D6A00 on #F4F7FB ~5.9:1 WCAG AA */ } /* Feature card icon color in light mode */ [data-theme="light"] .orbi-feat-icon { color: #3D6A00; } /* Pricing ghost CTA button in light mode — darken text for #EEF2FA surface */ [data-theme="light"] .orbi-tier-cta.ghost { color: #3D6A00; /* #3D6A00 on #EEF2FA ~5.3:1 PASS */ border-color: #3D6A00; } /* Legal badge (legal pages) in light mode */ [data-theme="light"] .legal-badge { color: #3D6A00; } /* Inline accent links on light surfaces (legal pages use style="color:var(--c-accent)") */ [data-theme="light"] .legal-content a[style*="color"], [data-theme="light"] a[style*="color:var(--c-accent)"], [data-theme="light"] .orbi-pricing-footer a, [data-theme="light"] .orbi-mcp-how-num { color: #3D6A00 !important; } /* Paddle footer links in pricing */ [data-theme="light"] .orbi-pricing-paddle-note a { color: #3D6A00; } [data-theme="light"] .orbi-tier-footer a { color: #3D6A00; } [data-theme="light"] .orbi-tier-mor a { color: #3D6A00; } /* Paddle link on #EEF2FA card bg: #3D6A00 ~5.3:1 PASS */ [data-theme="light"] .orbi-pricing-footer .orbi-mor-note a { color: #3D6A00; } [data-theme="light"] .orbi-tier-cta.ghost:hover { background: rgba(74,127,0,.1); } /* ── Primary CTA button — lime solid, dark text for WCAG AA 8.4:1 ── */ /* Dark mode: #7DC800 bg, #0B1221 text = ~8.4:1 PASS */ .orbi-btn-primary-nav, .orbi-btn-primary-lg { background: #7DC800; color: #0B1221 !important; } .orbi-btn-primary-nav:hover, .orbi-btn-primary-lg:hover { background: #8FD900; color: #0B1221 !important; box-shadow: 0 6px 24px rgba(125,200,0,.45); } /* Light mode: darker lime, white text = 5.9:1 PASS */ [data-theme="light"] .orbi-btn-primary-nav, [data-theme="light"] .orbi-btn-primary-lg { background: #4A7F00; color: #FFFFFF !important; } [data-theme="light"] .orbi-btn-primary-nav:hover, [data-theme="light"] .orbi-btn-primary-lg:hover { background: #437500; color: #FFFFFF !important; } /* Pricing tier CTA primary button — lime solid */ .orbi-tier-cta.primary { background: #7DC800; color: #0B1221 !important; } [data-theme="light"] .orbi-tier-cta.primary { background: #4A7F00; color: #FFFFFF !important; } /* ── Priority / log tag contrast — WCAG AA 4.5:1 ── */ /* Priority badges in the hero dashboard preview and report page */ .orbi-pri.high { color: #D94040; } /* darker red: ~5.2:1 on dark surface */ .orbi-pri.med { color: #C48A00; } /* darker amber: ~4.7:1 on dark surface */ .orbi-pri.low { color: #1A9060; } /* darker green: ~4.9:1 on dark surface */ [data-theme="light"] .orbi-pri.high { color: #B91C1C; } /* red-700: ~6.5:1 on #F8FAFF */ [data-theme="light"] .orbi-pri.med { color: #92400E; } /* amber-800: ~5.8:1 on #F8FAFF */ [data-theme="light"] .orbi-pri.low { color: #065F46; } /* green-800: ~7.1:1 on #F8FAFF */ /* Log panel tag badges: .orbi-log-tag.warn / .orbi-log-tag.success Dark mode uses CSS tokens (FBBF24 amber / 34D399 green) which pass on dark surfaces. Light mode: darken for contrast on near-white backgrounds. */ [data-theme="light"] .orbi-log-tag.warn { color: #7C3A00; background: rgba(124,58,0,.1); } [data-theme="light"] .orbi-log-tag.success { color: #065F46; background: rgba(6,95,70,.1); } /* ── Report page: ensure theme toggle floats above all content ── */ /* PublicAudit/Report.cshtml uses Layout=null with _ThemeToggle partial. The .fa-theme-toggle already has z-index:9999 in the partial — this belt-and-suspenders rule ensures pointer-events are never blocked. */ .fa-theme-toggle { pointer-events: auto !important; z-index: 9999 !important; } /* ── Nav collapse pointer-event guard (BLOCKER-4 fix) ───────────────────────── The #orbiNavCollapse is position:absolute at ≤720px with z-index:999. When closed it already has visibility:hidden + pointer-events:none (set in the ≤720px media block below) — this belt-and-suspenders block ensures the collapse layer NEVER intercepts clicks over the hero CTA or auth submit at any viewport width or transition frame. Collapse wrapper: pointer-events:none when NOT .is-open (global rule, applies at all breakpoints — eliminates interception at the 720px boundary and during CSS transition frames). Hero CTA + auth submit: elevate their stacking context above the nav so even a half-open transition frame cannot block them. z-index:1000 = 1 > 999. */ .orbi-nav-collapse:not(.is-open) { pointer-events: none !important; } /* ── Nav URL audit form — pointer-event override ────────────────────────── .orbi-nav-collapse:not(.is-open) sets pointer-events:none !important on the wrapper at all breakpoints (desktop + mobile). On desktop (≥721px) the collapse is never .is-open, so the !important rule would kill clicks on the compact URL form that lives inside it. Override it back to auto here. The form is only visible + hittable when .nav-scrolled makes its width > 0; browsers will not fire pointer events on zero-width/opacity:0 elements, so this override is harmless when the form is actually hidden. The inner and