with old links (Home/Services/Academy CTA/etc.). Until js/mega-menu.js rebuilds them, the browser paints those legacy links — that is the "flash of old menu" + "raw HTML on screen" Fernando reported. Because js/global.js sits at the end of with `defer`, its inline style guard only activates AFTER the legacy nav has painted. Fix: ship the flash-guard inside global.css (loaded in on every page, so it's active from the very first frame). Hide the nav contents until mega-menu.js adds .mega-rendered to the

; mobile drawer stays hidden until mega-menu.js adds .mega-mobile to it. This is the single source of truth for the navigation visibility window. ============================================ */ /* Hide legacy markup until mega-menu rebuilds it. We use opacity+pointer-events instead of visibility:hidden!important so a CSS-only failsafe animation can override it 3s later if mega-menu.js never runs (ad-blocker, JS error). */ .nav:not(.mega-rendered) .nav-links { opacity: 0; pointer-events: none; animation: drFlashGuardReveal 0s 3s forwards; } #mobileMenu:not(.mega-mobile) { opacity: 0; pointer-events: none; animation: drFlashGuardReveal 0s 3s forwards; } @keyframes drFlashGuardReveal { to { opacity: 1; pointer-events: auto; } } :root { --bg-primary: #0D1B2A; --bg-secondary: #1B2838; --bg-card: #162232; --bg-card-hover: #1d2e42; --accent-blue: #4A9EFF; --accent-blue-hover: #6DB3FF; --accent-purple: #7B68EE; --accent-purple-hover: #9180FF; --accent-green: #4ADE80; --accent-orange: #F59E0B; --text-primary: #FFFFFF; --text-secondary: #B0BEC5; --text-muted: #6B7D8D; --border-color: rgba(74, 158, 255, 0.12); --border-color-strong: rgba(74, 158, 255, 0.25); --gradient-blue-purple: linear-gradient(135deg, #4A9EFF, #7B68EE); --gradient-bg: linear-gradient(180deg, #0D1B2A 0%, #1B2838 100%); --shadow-glow: 0 0 40px rgba(74, 158, 255, 0.15); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.28); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --nav-height: 72px; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); font-size: 16px; } body { font-family: var(--font-family); background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-blue); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--accent-blue-hover); } h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } ul { list-style: none; } .container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; } .section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; text-align: center; margin-bottom: 1rem; } .section-subtitle { text-align: center; color: var(--text-secondary); font-size: 1.05rem; max-width: 700px; margin: 0 auto 3rem; line-height: 1.7; } .text-gradient { background: var(--gradient-blue-purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section { padding: 100px 0; position: relative; } .section-alt { background: var(--bg-secondary); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; font-size: 1rem; font-weight: 600; font-family: var(--font-family); border-radius: var(--radius-sm); border: none; cursor: pointer; transition: all 0.25s ease; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--accent-blue); color: #fff; box-shadow: 0 4px 16px rgba(74,158,255,0.3); } .btn-primary:hover { background: var(--accent-blue-hover); color: #fff; box-shadow: 0 6px 24px rgba(74,158,255,0.45); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color-strong); } .btn-ghost:hover { color: var(--text-primary); border-color: var(--accent-blue); background: rgba(74,158,255,0.06); } .btn-outline { background: transparent; color: var(--accent-blue); border: 2px solid var(--accent-blue); } .btn-outline:hover { background: var(--accent-blue); color: #fff; } .btn-lg { padding: 16px 36px; font-size: 1.1rem; border-radius: var(--radius-md); } .btn-sm { padding: 10px 20px; font-size: 0.9rem; } /* ---- RIDE Agent Top Banner ---- */ /* RIDE Agent banner — removed fixed top bar; now in-body section */ /* ---- Navigation (always visible, sticky on every page) ---- */ .nav { position: fixed !important; /* !important defeats any per-page overrides */ top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; background: rgba(13, 27, 42, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-color); height: var(--nav-height); transition: background 0.3s ease, box-shadow 0.3s ease; /* Never allow the nav to be hidden by transforms or visibility rules */ transform: none !important; visibility: visible !important; opacity: 1 !important; } .nav.scrolled { background: rgba(13, 27, 42, 0.98); box-shadow: 0 4px 30px rgba(0,0,0,0.3); } /* Reserve space at the top of every page for the fixed nav so content below starts after it and no page can accidentally overlap it. */ body { padding-top: 0; } /* `.page-hero` and hero sections that use top:0 positioning already account for the nav via `padding: 140px 0 80px`, so this is a low-impact guard. */ .nav-inner { width: min(1200px, calc(100% - 48px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-logo-img { height: 40px; width: auto; } .nav-logo-text { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; } .nav-logo-accent { color: var(--text-primary); } .nav-links { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; } .nav-link { color: var(--text-secondary); padding: 6px 10px; font-size: 0.82rem; font-weight: 500; border-radius: var(--radius-sm); transition: all 0.2s ease; text-decoration: none; white-space: nowrap; } .nav-link:hover, .nav-link.active { color: var(--text-primary); background: rgba(74,158,255,0.08); } .nav-link-cta { background: var(--accent-blue); color: #fff !important; font-weight: 600; } .nav-link-cta:hover { background: var(--accent-blue-hover); } .nav-link-agents { background: linear-gradient(135deg, #7B68EE, #E040A0); color: #fff !important; font-weight: 600; } .nav-link-agents:hover { background: linear-gradient(135deg, #9180FF, #E860B8); box-shadow: 0 0 16px rgba(123,104,238,0.35); } /* Dropdown */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 6px 10px; font-size: 0.82rem; font-weight: 500; font-family: var(--font-family); display: flex; align-items: center; gap: 4px; border-radius: var(--radius-sm); transition: all 0.2s; white-space: nowrap; } .nav-dropdown-trigger:hover { color: var(--text-primary); background: rgba(74,158,255,0.08); } .nav-dropdown-arrow { font-size: 0.6rem; transition: transform 0.2s; } .nav-dropdown.open .nav-dropdown-arrow { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--bg-card); border: 1px solid var(--border-color-strong); border-radius: var(--radius-md); padding: 8px; box-shadow: var(--shadow-elevated); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s; z-index: 100; } .nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text-secondary); font-size: 0.88rem; border-radius: var(--radius-sm); transition: all 0.15s; text-decoration: none; } .nav-dropdown-item:hover { color: var(--text-primary); background: rgba(74,158,255,0.08); } .nav-dropdown-item i { width: 16px; text-align: center; color: var(--accent-blue); font-size: 0.85rem; } .nav-dropdown-divider { height: 1px; background: var(--border-color); margin: 6px 8px; } /* ---- Agents Dropdown (auto-injected on every page by js/global.js) ---- Sprint 2026-04-27G30 — the single "Agents/Agentes" link is replaced at runtime by a full dropdown listing all 11 production agents in commercial priority order. CSS lives here (in global.css) so it's available on every one of the 166 pages, not only on agent landing pages. */ .nav-dropdown.agents-dropdown .nav-dropdown-trigger.nav-link-agents { background: linear-gradient(135deg, #7B68EE, #E040A0); color: #fff; font-weight: 600; padding: 6px 14px; border-radius: 999px; box-shadow: 0 0 14px rgba(123, 104, 238, 0.25); } .nav-dropdown.agents-dropdown .nav-dropdown-trigger.nav-link-agents:hover { background: linear-gradient(135deg, #9180FF, #E860B8); box-shadow: 0 0 16px rgba(123, 104, 238, 0.45); color: #fff; } .nav-dropdown.agents-dropdown .nav-dropdown-trigger.nav-link-agents.active { box-shadow: 0 0 0 2px rgba(255,255,255,0.18) inset, 0 0 16px rgba(123,104,238,0.5); } .nav-dropdown.agents-dropdown .nav-dropdown-trigger .nav-dropdown-arrow { color: #fff; margin-left: 2px; } /* Position the menu to the right so the long agent list doesn't overflow the viewport — the trigger sits near the right edge of the nav. */ .nav-dropdown.agents-dropdown .nav-dropdown-menu { min-width: 280px; left: auto; right: 0; max-height: calc(100vh - var(--nav-height, 72px) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(123, 104, 238, 0.45) transparent; /* Sprint 2026-04-27G31 — extra padding-bottom (150px) reserves a safe gutter at the end of the scrollable agents dropdown so the DR Agent chat launcher (fixed bottom-right) never overlaps the last agents in the list when the dropdown is fully scrolled. Mirrors the 120px gutter applied to .mobile-menu (sprint G25). */ padding-bottom: 150px; } .nav-dropdown.agents-dropdown .nav-dropdown-menu::-webkit-scrollbar { width: 6px; } .nav-dropdown.agents-dropdown .nav-dropdown-menu::-webkit-scrollbar-thumb { background: rgba(123, 104, 238, 0.4); border-radius: 999px; } .nav-dropdown.agents-dropdown .nav-dropdown-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 0.86rem; } .nav-dropdown.agents-dropdown .nav-dropdown-menu img.nav-agent-icon { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.04); } /* "All Agents" entry sits at the top with a subtle separator */ .nav-dropdown.agents-dropdown .nav-dropdown-menu a:first-child { font-weight: 600; color: var(--text-primary, #fff); border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08)); margin-bottom: 6px; padding-bottom: 10px; } .nav-dropdown.agents-dropdown .nav-dropdown-menu a:first-child:hover { background: rgba(123, 104, 238, 0.12); } /* ---- Mobile menu — agent items injected by JS ---- */ .mobile-menu .mobile-link.mobile-link-agent { display: flex; align-items: center; gap: 10px; } .mobile-menu .mobile-link.mobile-link-agent .mobile-agent-icon { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.04); } .mobile-menu .mobile-link.mobile-link-agent.mobile-link-agent-all { font-weight: 600; color: var(--text-primary, #fff); } .mobile-menu .mobile-link.mobile-link-agent.mobile-link-agent-all i { width: 22px; text-align: center; color: var(--accent-blue, #4A9EFF); } /* ---- Language Switcher — flag icons (no blue pill) ---- */ /* The switcher renders ISO country flags (PT = Brazil, EN = United Kingdom) as rounded-rectangle icons. Original "PT" / "EN" text is hidden via text-indent; aria-label stays via the button's native textContent for screen readers. Using inline SVG data URIs so no extra HTTP request. */ .lang-switch { display: inline-flex; align-items: center; gap: 6px; background: transparent; padding: 0; margin-left: 8px; } .lang-btn { /* Flag-shaped button: 28×20, rounded corners */ width: 28px; height: 20px; padding: 0; border: 1px solid rgba(255,255,255,0.12); background: transparent center / cover no-repeat; color: transparent; font-size: 0; line-height: 0; text-indent: -9999px; overflow: hidden; cursor: pointer; border-radius: 4px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease; filter: grayscale(0.35) brightness(0.9); opacity: 0.75; flex-shrink: 0; display: inline-block; font-family: inherit; vertical-align: middle; } .lang-btn:hover:not(.active) { filter: grayscale(0) brightness(1); opacity: 1; transform: translateY(-1px); border-color: rgba(74,158,255,0.5); } .lang-btn.active { filter: grayscale(0) brightness(1); opacity: 1; border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(74,158,255,0.22); background-color: transparent; /* defeat any legacy blue fill */ color: transparent !important; } .lang-btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; } /* ---- Flag backgrounds: match button TEXT (PT = Brazil, EN = UK) ---- Rule order: the PT button has visible text "PT" — match by :first-child since the lang-switch always renders [PT, EN]. Also support aria-label and onclick patterns for robustness. */ /* Brazilian flag — SVG (green field, yellow rhombus, blue circle) */ .lang-switch .lang-btn:first-child, .lang-btn[onclick*="pt-br"], .lang-btn[data-lang="pt"] { background-image: url('data:image/svg+xml;utf8,'); } /* United Kingdom flag — Union Jack SVG (simplified but accurate proportions) */ .lang-switch .lang-btn:nth-child(2), .lang-btn[onclick*="/en/"], .lang-btn[onclick*="'./'"], .lang-btn[data-lang="en"] { background-image: url('data:image/svg+xml;utf8,'); } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; /* Sprint 2026-04-22G6 — keep hamburger clickable ABOVE the opened mobile menu, which itself sits above third-party widgets (Mindstudio chat bar uses z-index up to 2147483647). */ z-index: 2147483646; position: relative; } .nav-hamburger span { width: 24px; height: 2px; background: var(--text-primary); transition: all 0.3s; border-radius: 2px; } .nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav-hamburger.active span:nth-child(2) { opacity: 0; } .nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile Menu NOTE: The .mobile-menu lives inside

which has backdrop-filter. backdrop-filter creates a new containing block, so "position:fixed; bottom:0" is relative to the nav (72px), NOT the viewport. We use height:calc(100vh - nav) and also set height/top via JS after moving it outside the nav on open. */ .mobile-menu { position: fixed; top: var(--nav-height); left: 0; right: 0; height: calc(100vh - var(--nav-height)); height: calc(100dvh - var(--nav-height)); background: rgba(13, 27, 42, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); /* Sprint 2026-04-25G25 — extra padding-bottom (120px) reserves a safe gutter at the end of the scrollable menu so the DR Agent chat launcher (fixed bottom-right, ~50px tall + ~60px offset) never overlaps the last menu items even when the menu is fully scrolled to the bottom. The G6 belt-and-suspenders rule above HIDES the launcher while the menu is open, but on Android Chrome users can sometimes see it briefly during the open transition; this gutter removes that edge case entirely. */ padding: 24px 24px 120px; box-sizing: border-box; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Sprint 2026-04-22G6 — mobile menu MUST render above the Mindstudio chat bar widget (iframe injected by dataridersagent.msagent.ai/widget.js which uses the int32 ceiling z-index 2147483647). We sit one notch below that ceiling so that a fresh OS-level alert/toast can still outrank us, but every third-party embed bar stays behind the open menu. */ z-index: 2147483645; } .mobile-menu.active { transform: translateX(0); } /* Sprint 2026-04-22G6 — Belt-and-suspenders: while the mobile menu is open, hide the Mindstudio chat-bar widget entirely so that (a) it never peeks through on browsers that clamp third-party iframe z-index to a max value different from ours, and (b) users can't accidentally tap the chat bar while scrolling the menu. The selectors match the exact iframe/launcher signatures emitted by the msagent.ai loader. */ body.dr-mobile-menu-open iframe[src*="msagent.ai"], body.dr-mobile-menu-open iframe[src*="mindstudio.ai"], body.dr-mobile-menu-open [id*="msagent" i], body.dr-mobile-menu-open [class*="msagent" i], body.dr-mobile-menu-open [id*="dataridersagent" i], body.dr-mobile-menu-open [id*="dr-agent" i], body.dr-mobile-menu-open [class*="dr-agent" i] { visibility: hidden !important; pointer-events: none !important; } .mobile-menu-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 16px 0 8px; font-weight: 600; } .mobile-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--text-secondary); font-size: 1rem; border-radius: var(--radius-sm); transition: all 0.15s; text-decoration: none; } .mobile-link:hover, .mobile-link.active { color: var(--text-primary); background: rgba(74,158,255,0.08); } .mobile-link i { width: 20px; text-align: center; color: var(--accent-blue); } .mobile-cta { display: block; text-align: center; margin-top: 20px; padding: 14px; background: var(--accent-blue); color: #fff; font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; } .mobile-agents { display: block; text-align: center; margin-top: 10px; padding: 14px; background: linear-gradient(135deg, #7B68EE, #E040A0); color: #fff; font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; } .mobile-lang-switch { display: flex; gap: 8px; margin-top: 16px; } .mobile-lang-btn { flex: 1; text-align: center; padding: 10px; border: 1px solid var(--border-color-strong); border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; cursor: pointer; font-family: var(--font-family); font-size: 0.9rem; font-weight: 500; text-decoration: none; } .mobile-lang-btn.active { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); } /* ---- Footer ---- */ .footer { background: #060e18; padding: 60px 0 0; border-top: 1px solid var(--border-color); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } /* New 5-column layout built by footer-sync.js v2: Brand | Services | Platforms & Agents | Knowledge | Trust */ .footer-grid-5 { display: grid; grid-template-columns: 1.6fr 1fr 1.15fr 1fr 1.15fr; gap: 36px; } @media (max-width: 1100px) { .footer-grid-5 { grid-template-columns: 1fr 1fr 1fr; gap: 28px; } .footer-grid-5 .footer-brand { grid-column: 1 / -1; } } @media (max-width: 640px) { .footer-grid-5 { grid-template-columns: 1fr 1fr; } .footer-grid-5 .footer-brand { grid-column: 1 / -1; } } /* ============================================ Newsletter promoted to top of footer — HORIZONTAL BAR (v3) ============================================ Layout (desktop): one single row [ 📧 Stay Updated ] [ name input ] [ email input ] [ Subscribe ] All legacy `.footer-newsletter` rules (320px max-width, flex-column, right-align, grid-column auto) are defeated with !important. ============================================ */ .footer .footer-newsletter-priority, .footer > .container > .footer-newsletter.footer-newsletter-priority, .footer-grid > .footer-newsletter.footer-newsletter-priority { display: flex !important; flex-direction: row !important; /* Allow wrap so the status message can drop to its own line below the form. Previously `nowrap` forced the

to sit ON TOP of the inputs + button on success, producing a visual overlap like "Thank you[your@email.com]Subscribe". */ flex-wrap: wrap !important; align-items: center !important; gap: 16px !important; width: 100% !important; max-width: 100% !important; margin: 0 0 32px 0 !important; padding: 18px 24px !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(16,31,47,0.96), rgba(10,22,34,0.9)) !important; border: 1px solid rgba(74,158,255,0.18) !important; box-shadow: 0 14px 36px rgba(0,0,0,0.22) !important; grid-column: 1 / -1 !important; } .footer-newsletter-priority h4 { margin: 0 !important; display: flex; align-items: center; gap: 10px; font-size: 1rem; line-height: 1.25; color: var(--text-primary); font-weight: 600; white-space: nowrap; flex: 0 0 auto; } .footer-newsletter-priority h4 i { color: var(--accent-blue); font-size: 1.15rem; } .footer-newsletter-priority .footer-newsletter-form { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; } .footer-newsletter-priority .footer-newsletter-form input { flex: 1 1 0 !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 10px 14px !important; background: var(--bg-card); border: 1px solid var(--border-color-strong); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-family); font-size: 0.9rem; } .footer-newsletter-priority .footer-newsletter-form input[type="email"] { flex: 1.4 1 0 !important; } .footer-newsletter-priority .footer-newsletter-form button { flex: 0 0 auto !important; min-height: 44px !important; padding: 0 22px !important; white-space: nowrap !important; background: var(--accent-blue); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font-family); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s; display: inline-flex; align-items: center; gap: 8px; } .footer-newsletter-priority .footer-newsletter-form button:hover { background: var(--accent-blue-hover); } /* Status message — detached below the row. Uses flex-basis 100% + order 99 so it drops onto its own line. Requires `flex-wrap: wrap` on the parent (set above). */ .footer-newsletter-priority .footer-newsletter-msg { flex: 1 0 100% !important; width: 100% !important; margin: 4px 0 0 0 !important; padding: 8px 12px !important; min-height: 0; font-size: 0.85rem; line-height: 1.4; order: 99; border-radius: 8px; color: var(--text-secondary); } .footer-newsletter-priority .footer-newsletter-msg.success { color: #86efac; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.25); } .footer-newsletter-priority .footer-newsletter-msg.error { color: #fca5a5; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25); } .footer-newsletter-priority .footer-newsletter-msg:empty { display: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; } /* Privacy-policy link that security-bottombar.js injects after the form. Make sure it also goes below the row (not in the middle). */ .footer-newsletter-priority .form-privacy-link { flex: 1 0 100% !important; width: 100% !important; margin: 2px 0 0 0 !important; order: 100; font-size: 0.72rem; color: var(--text-muted); } /* Tablet: heading on top, form below (form stays horizontal) */ @media (max-width: 960px) { .footer .footer-newsletter-priority, .footer > .container > .footer-newsletter.footer-newsletter-priority, .footer-grid > .footer-newsletter.footer-newsletter-priority { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; } .footer-newsletter-priority h4 { justify-content: flex-start; } } /* Mobile: stack inputs & button */ @media (max-width: 560px) { .footer .footer-newsletter-priority, .footer > .container > .footer-newsletter.footer-newsletter-priority, .footer-grid > .footer-newsletter.footer-newsletter-priority { padding: 16px 18px !important; } .footer-newsletter-priority .footer-newsletter-form { flex-direction: column !important; align-items: stretch !important; } .footer-newsletter-priority .footer-newsletter-form input, .footer-newsletter-priority .footer-newsletter-form input[type="email"] { flex: 1 1 auto !important; width: 100% !important; } .footer-newsletter-priority .footer-newsletter-form button { width: 100% !important; justify-content: center; } } /* Footer brand: logo + "Data Riders" text side-by-side */ .footer-brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); } .footer-brand-logo { height: 36px; width: auto; } .footer-brand-name { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; white-space: nowrap; } .footer-brand-name-accent { /* Match nav-logo-accent styling for consistency */ color: var(--text-primary); } .footer-brand p { color: var(--text-secondary); font-size: 0.9rem; margin-top: 16px; line-height: 1.7; } .footer-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 16px; font-weight: 600; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a { color: var(--text-secondary); font-size: 0.9rem; transition: color 0.2s; text-decoration: none; } .footer-links a:hover { color: var(--accent-blue); } .footer-social { display: flex; gap: 12px; margin-top: 16px; } .footer-social a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-color-strong); color: var(--text-secondary); transition: all 0.2s; } .footer-social a:hover { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); } .footer-bottom { margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-bottom p { color: var(--text-muted); font-size: 0.85rem; } /* --- 3-column bottom strip: Left / Center / Right on one line (v3) --- */ .footer-bottom.footer-bottom-3col { display: grid; grid-template-columns: 1fr minmax(auto, 2fr) 1fr; align-items: center; gap: 20px; text-align: left; } .footer-bottom-3col .footer-bottom-left { text-align: left; } .footer-bottom-3col .footer-bottom-center { text-align: center; } .footer-bottom-3col .footer-bottom-right { text-align: right; } .footer-bottom-3col p { margin: 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.5; } /* Shared blue accent for every footer-bottom icon (©, pin, tag) */ .footer-bottom-3col .footer-bottom-icon { color: var(--accent-blue); margin-right: 6px; font-size: 0.78rem; } .footer-bottom-3col .footer-bottom-right p { white-space: nowrap; } /* On narrower screens, stack gracefully */ @media (max-width: 960px) { .footer-bottom.footer-bottom-3col { grid-template-columns: 1fr; text-align: center; gap: 12px; } .footer-bottom-3col .footer-bottom-left, .footer-bottom-3col .footer-bottom-right { text-align: center; } .footer-bottom-3col .footer-bottom-right p { white-space: normal; } } /* ---- RIDE Agent highlight banner (top of Build-Your-Agent page) ---- */ .ride-highlight { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; max-width: 1080px; margin: 0 auto 36px; padding: 20px 26px; text-align: left; background: radial-gradient(1200px 220px at 0% 0%, rgba(123,104,238,0.22), transparent 60%), radial-gradient(900px 220px at 100% 100%, rgba(224,64,160,0.18), transparent 60%), linear-gradient(180deg, rgba(16,31,47,0.96), rgba(10,22,34,0.92)); border: 1px solid rgba(123,104,238,0.35); border-radius: 20px; box-shadow: 0 18px 48px rgba(123,104,238,0.18), 0 2px 0 rgba(255,255,255,0.03) inset; position: relative; overflow: hidden; } .ride-highlight::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(123,104,238,0) 0%, rgba(224,64,160,0.06) 50%, rgba(123,104,238,0) 100%); pointer-events: none; } .ride-highlight-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: linear-gradient(135deg, #7B68EE 0%, #E040A0 100%); color: #fff; font-size: 1.5rem; box-shadow: 0 10px 24px rgba(123,104,238,0.38); flex-shrink: 0; } .ride-highlight-body { min-width: 0; } .ride-highlight-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #E040A0; background: rgba(224,64,160,0.12); padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; } .ride-highlight-eyebrow i { font-size: 0.7rem; } .ride-highlight-title { margin: 0 0 6px; font-size: 1.35rem; line-height: 1.3; font-weight: 700; color: var(--text-primary); } .ride-highlight-text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-secondary); max-width: 640px; } .ride-highlight-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .ride-highlight-cta .btn { white-space: nowrap; } .ride-highlight-meta { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; } @media (max-width: 820px) { .ride-highlight { grid-template-columns: 1fr; text-align: center; padding: 22px 20px; gap: 14px; } .ride-highlight-icon { margin: 0 auto; } .ride-highlight-text { margin-left: auto; margin-right: auto; } .ride-highlight-cta { align-items: center; } } /* ---- Page Hero ---- */ .page-hero { padding: 140px 0 80px; text-align: center; background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 50% 0%, rgba(74,158,255,0.08) 0%, transparent 70%); } .page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: 1rem; position: relative; } .page-hero p { color: var(--text-secondary); font-size: 1.15rem; max-width: 700px; margin: 0 auto; position: relative; line-height: 1.8; } .breadcrumb { position: relative; margin-bottom: 24px; } .breadcrumb a, .breadcrumb span { font-size: 0.9rem; color: var(--text-muted); } .breadcrumb a:hover { color: var(--accent-blue); } .breadcrumb .sep { margin: 0 8px; } /* ---- Cards ---- */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 32px; transition: all 0.3s ease; } .card:hover { border-color: var(--border-color-strong); transform: translateY(-4px); box-shadow: var(--shadow-elevated); } .card-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: rgba(74,158,255,0.1); color: var(--accent-blue); font-size: 1.4rem; margin-bottom: 20px; } .card h3 { font-size: 1.2rem; margin-bottom: 12px; } .card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; } .cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .cards-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* ---- Check List ---- */ .check-list { display: flex; flex-direction: column; gap: 12px; } .check-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; } .check-list li i { color: var(--accent-green); margin-top: 4px; flex-shrink: 0; } /* ---- Certifications ---- */ .cert-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; } .cert-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; transition: all 0.3s; } .cert-item:hover { border-color: var(--border-color-strong); transform: translateY(-4px); box-shadow: var(--shadow-elevated); } .cert-item img { height: 60px; width: auto; opacity: 0.85; transition: opacity 0.3s; margin: 0 auto 16px; } .cert-item img:hover { opacity: 1; } .cert-item h4 { font-size: 1.1rem; margin-bottom: 4px; color: var(--text-primary); } .cert-item span { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; display: block; } /* ---- Team ---- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .team-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; text-align: center; transition: all 0.3s; } .team-card:hover { border-color: var(--border-color-strong); transform: translateY(-4px); box-shadow: var(--shadow-elevated); } .team-card-img { width: 100%; aspect-ratio: 2/3; object-fit: cover; } .team-card-body { padding: 20px; } .team-card-body h4 { font-size: 1rem; margin-bottom: 4px; } .team-card-body p { color: var(--text-muted); font-size: 0.85rem; } .team-card-social { margin-top: 10px; } .team-card-social a { color: var(--accent-blue); font-size: 1rem; } /* ---- Team (unified: leads + members) ---- 2026-04-22E2: fixed 3 columns on desktop (3+3 for our 6 consultants), 2 columns on tablet (≤1024px), 1 column on phone (≤640px). */ .team-grid-unified { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; max-width: 1100px; margin-left: auto; margin-right: auto; } .team-grid-unified .team-card { display: flex; flex-direction: column; } .team-grid-unified .team-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 20px; } @media (max-width: 1024px) { .team-grid-unified { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .team-grid-unified { grid-template-columns: 1fr; } } .team-card-lead { border-color: var(--border-color-strong); } .team-card-role { color: var(--accent-blue); font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; } .team-card-bio { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.55; margin-bottom: 12px; flex: 1; } .team-card-linkedin { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-blue); font-size: 0.85rem; font-weight: 600; margin-top: auto; text-decoration: none; } .team-card-linkedin:hover { text-decoration: underline; } .team-card-linkedin i { font-size: 1rem; } /* ---- Blog Cards ---- */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* ---- Service Card with Image ---- */ .service-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 16px; border: 1px solid var(--border-color); } .cards-grid .card { padding: 24px; } .cards-grid .card h3 { font-size: 1.05rem; } .cards-grid .card p { font-size: 0.88rem; } /* ---- GISTM.ai Banner ---- */ .gistm-banner { background: linear-gradient(135deg, #1a3a5c 0%, #0D1B2A 100%); border: 1px solid var(--border-color-strong); border-radius: var(--radius-xl); padding: 48px; display: flex; align-items: center; gap: 48px; position: relative; overflow: hidden; } .gistm-banner::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(74,158,255,0.1) 0%, transparent 70%); pointer-events: none; } .gistm-banner-logo { max-width: 320px; flex-shrink: 0; position: relative; z-index: 1; } .gistm-banner-logo img { width: 100%; height: auto; } .gistm-banner-text { position: relative; z-index: 1; } .gistm-banner-text h3 { font-size: 1.5rem; margin-bottom: 12px; } .gistm-banner-text p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; margin-bottom: 16px; } /* ---- YouTube Section (original grid + carousel) ---- */ .yt-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; } .yt-card { flex: 0 1 calc(33.333% - 16px); min-width: 280px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s; text-decoration: none; color: inherit; display: block; } .yt-card:hover { border-color: var(--border-color-strong); transform: translateY(-4px); box-shadow: var(--shadow-elevated); color: inherit; } .yt-card-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; } .yt-card-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.3s; } .yt-card:hover .yt-card-thumb img { opacity: 1; } .yt-card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .yt-card-play i { font-size: 3rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.5); transition: transform 0.3s; } .yt-card:hover .yt-card-play i { transform: scale(1.15); } .yt-card-body { padding: 20px; } .yt-card-body h4 { font-size: 1rem; margin-bottom: 6px; line-height: 1.4; } .yt-card-body p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; } /* ---- YouTube Carousel ---- */ .yt-carousel { position: relative; overflow: hidden; } .yt-carousel-track { display: flex; gap: 24px; transition: transform 0.4s ease; scroll-behavior: smooth; } .yt-carousel .yt-card { flex: 0 0 calc(33.333% - 16px); min-width: 0; } .yt-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; border-radius: 50%; background: rgba(13,27,42,0.85); border: 1px solid var(--border-color-strong); color: #fff; font-size: 1rem; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .yt-carousel-btn:hover { background: var(--accent-blue); border-color: var(--accent-blue); } .yt-carousel-prev { left: 8px; } .yt-carousel-next { right: 8px; } @media (max-width: 1024px) { .yt-carousel .yt-card { flex: 0 0 calc(50% - 12px); } } @media (max-width: 768px) { .yt-carousel .yt-card { flex: 0 0 100%; } } /* ---- Footer Company Info ---- */ .footer-company-info { margin-top: 32px; padding: 16px 0; border-top: 1px solid var(--border-color); text-align: center; } .footer-company-info p { color: var(--text-muted); font-size: 0.82rem; line-height: 1.6; } .footer-company-info p strong { color: var(--text-secondary); } .footer-company-info i { margin-right: 6px; color: var(--accent-blue); font-size: 0.8rem; } /* ---- Footer Newsletter ---- */ .footer-newsletter { margin-top: 24px; } .footer-newsletter h4 { font-size: 0.95rem; color: var(--text-primary); margin-bottom: 12px; font-weight: 600; } .footer-newsletter h4 i { margin-right: 6px; color: var(--accent-blue); } .footer-newsletter-form { display: flex; flex-direction: column; gap: 8px; } /* * Footer Newsletter placement normalization * -------------------------------------------- * On the home page, `.footer-newsletter` is nested inside the last column of * `.footer-grid` (the "Contact" column), so it inherits the 1fr column width * and visually sits in the right portion of the footer. * * Many other pages place `.footer-newsletter` either: * (a) as a sibling of `.footer-grid` (breaks out of the 4-column layout), or * (b) as a 5th direct child of `.footer-grid` (wraps to a new row with full width). * * The rules below force those cases to render compact and aligned to the right * (matching the home layout) instead of stretching side-to-side. */ /* Case (a): newsletter placed OUTSIDE .footer-grid, as a direct child of .footer .container (legacy pages that didn't nest it in a column). The new footer-sync.js v2 puts the newsletter inside .footer-secondary, which is already wide by design, so this direct-child selector won't match the new layout. */ .footer > .container > .footer-newsletter, .footer .container > .footer-newsletter { max-width: 320px; margin-left: auto; margin-right: 0; margin-top: 32px; } /* Case (b): newsletter placed as 5th+ direct child inside .footer-grid. */ .footer-grid > .footer-newsletter { grid-column: 4 / 5; max-width: 100%; margin-top: 0; } /* Responsive: on smaller screens, let legacy newsletter stretch full-width. */ @media (max-width: 768px) { .footer > .container > .footer-newsletter, .footer .container > .footer-newsletter, .footer-grid > .footer-newsletter { max-width: 100%; margin-left: 0; grid-column: 1 / -1; } } .footer-newsletter-form input { padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-color-strong); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-family); font-size: 0.9rem; transition: border-color 0.2s; } .footer-newsletter-form input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(74,158,255,0.15); } .footer-newsletter-form input::placeholder { color: var(--text-muted); } .footer-newsletter-form button { padding: 10px 20px; background: var(--accent-blue); color: #fff; border: none; border-radius: var(--radius-sm); font-family: var(--font-family); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.25s; } .footer-newsletter-form button:hover { background: var(--accent-blue-hover); } .footer-newsletter-msg { font-size: 0.8rem; margin-top: 4px; } .footer-newsletter-msg.success { color: var(--accent-green); } .footer-newsletter-msg.error { color: #ef4444; } /* ---- Cases page: theme headers (replaces old "tier" labels) ---- */ .cases-theme-header { display: flex; align-items: flex-start; gap: 18px; margin: 48px 0 24px; padding: 24px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(74,158,255,0.07), rgba(123,104,238,0.05)); border: 1px solid var(--border-color); } .cases-theme-header:first-of-type { margin-top: 8px; } .cases-theme-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(74,158,255,0.18), rgba(123,104,238,0.14)); border: 1px solid rgba(74,158,255,0.22); color: var(--accent-blue); font-size: 1.4rem; } .cases-theme-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 6px; color: var(--text-primary); line-height: 1.3; } .cases-theme-sub { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.55; margin: 0; max-width: 720px; } @media (max-width: 600px) { .cases-theme-header { flex-direction: column; gap: 14px; padding: 20px; margin: 32px 0 18px; } .cases-theme-title { font-size: 1.15rem; } } /* ---- Case Card with Image ---- */ .case-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s; } .case-card:hover { border-color: var(--border-color-strong); transform: translateY(-4px); box-shadow: var(--shadow-elevated); } .case-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .case-card-body { padding: 28px; } .case-card-body h3 { font-size: 1.2rem; margin-bottom: 12px; } .case-card-body p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; margin-bottom: 16px; } .blog-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s; text-decoration: none; color: inherit; display: flex; flex-direction: column; } .blog-card:hover { border-color: var(--border-color-strong); transform: translateY(-4px); box-shadow: var(--shadow-elevated); color: inherit; } .blog-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .blog-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .blog-card-tag { display: inline-block; background: rgba(74,158,255,0.1); color: var(--accent-blue); font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; width: fit-content; } .blog-card-body h3 { font-size: 1.1rem; margin-bottom: 10px; line-height: 1.4; } .blog-card-body p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; flex: 1; } .blog-card-meta { margin-top: 16px; font-size: 0.8rem; color: var(--text-muted); display: flex; gap: 16px; } /* ---- Related Cards (cases & blog related reads) ---- */ .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 24px 0 8px; } .related-grid.three-cols { grid-template-columns: repeat(3, 1fr); } .related-grid.four-cols { grid-template-columns: repeat(4, 1fr); } .related-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: all 0.3s ease; position: relative; overflow: hidden; } .related-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--accent-blue), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; } .related-card:hover { border-color: var(--border-color-strong); transform: translateY(-3px); box-shadow: var(--shadow-elevated); color: inherit; } .related-card:hover::after { transform: scaleX(1); } .related-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(74,158,255,0.10); color: var(--accent-blue); font-size: 1.05rem; margin-bottom: 6px; } .related-card-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-blue); } .related-card h4 { font-size: 1.02rem; line-height: 1.35; margin: 0; color: var(--text-primary); } .related-card p { font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); margin: 4px 0 0; } .related-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 6px; } /* ---- Related Side Nav (sticky left rail with thumbnail list) ---- */ .side-nav-layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: flex-start; } .side-nav-layout .side-nav-main { min-width: 0; } .related-sidenav { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 18px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); } .related-sidenav h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 14px; font-weight: 700; } .related-sidenav-item { display: grid; grid-template-columns: 60px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-color); text-decoration: none; color: inherit; } .related-sidenav-item:first-of-type { border-top: none; padding-top: 0; } .related-sidenav-item img { width: 60px; height: 45px; object-fit: cover; border-radius: 8px; display: block; } .related-sidenav-item span { font-size: 0.82rem; line-height: 1.35; color: var(--text-primary); } .related-sidenav-item:hover span { color: var(--accent-blue); } /* ---- Narrower image utility for article bodies ---- */ .article-content img:not(.related-card-img):not(.related-sidenav-item img) { max-width: 780px; width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; border-radius: var(--radius-md); } @media (max-width: 900px) { .related-grid.three-cols, .related-grid.four-cols { grid-template-columns: repeat(2, 1fr); } .side-nav-layout { grid-template-columns: 1fr; } .related-sidenav { position: static; max-height: none; } } @media (max-width: 560px) { .related-grid, .related-grid.three-cols, .related-grid.four-cols { grid-template-columns: 1fr; } } .blog-page-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 4px; border-radius: var(--radius-sm); border: 1px solid var(--border-color-strong); background: transparent; color: var(--text-secondary); font-family: var(--font-family); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .blog-page-btn:hover { background: rgba(74,158,255,0.1); color: var(--text-primary); border-color: var(--accent-blue); } .blog-page-btn.active { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); } /* ---- Article ---- */ .article-header { padding: 140px 0 52px; text-align: center; } .article-header .container { max-width: 940px; } .article-header h1 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 900px; margin: 0 auto 1.1rem; line-height: 1.08; text-wrap: balance; } .article-subtitle { color: #C6D3DB !important; font-size: clamp(1.04rem, 1.6vw, 1.2rem) !important; max-width: 820px !important; margin: 0 auto 1.25rem !important; line-height: 1.8 !important; text-wrap: balance; } .article-meta { color: var(--text-muted); font-size: 0.92rem; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; } .article-meta span { display: inline-flex; align-items: center; gap: 7px; } .article-content { max-width: 860px; margin: 0 auto; padding: 0 24px 88px; } .article-content > p:first-child { font-size: 1.14rem; color: #D3DDE4; } .article-content p { color: #C1D0D8; font-size: 1.06rem; line-height: 1.9; margin-bottom: 1.5rem; } .article-content h2 { font-size: 1.72rem; margin: 2.9rem 0 1rem; color: var(--text-primary); scroll-margin-top: calc(var(--nav-height) + 28px); } .article-content h3 { font-size: 1.3rem; margin: 2rem 0 0.8rem; color: var(--text-primary); } .article-content ul, .article-content ol { margin: 1rem 0 1.75rem 1.5rem; } .article-content li { color: #C1D0D8; font-size: 1rem; line-height: 1.85; margin-bottom: 0.55rem; list-style: disc; } .article-content ol li { list-style: decimal; } .article-content img { border-radius: var(--radius-md); margin: 2rem 0; } .article-content blockquote { border-left: 4px solid var(--accent-blue); padding: 16px 24px; margin: 2rem 0; background: rgba(74,158,255,0.05); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .article-content blockquote p { color: #D3DDE4; font-style: italic; margin-bottom: 0; } .article-content a { color: var(--accent-blue); text-decoration: underline; } .article-content strong { color: var(--text-primary); } .article-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; } .article-content th, .article-content td { padding: 12px 16px; border: 1px solid var(--border-color); text-align: left; } .article-content th { background: var(--bg-card); color: var(--text-primary); font-weight: 600; } .article-content td { color: #C1D0D8; } /* native details/summary FAQ used across many blog and service pages */ .article-content details, .article-content .faq-item { background: linear-gradient(180deg, rgba(27,40,56,0.92) 0%, rgba(20,31,45,0.98) 100%); border: 1px solid rgba(74,158,255,0.18); border-radius: 14px; padding: 0; margin: 14px 0; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.18); } .article-content details[open], .article-content .faq-item[open] { border-color: rgba(74,158,255,0.34); box-shadow: 0 14px 34px rgba(0,0,0,0.22); } .article-content details > summary, .article-content .faq-item > summary { list-style: none; cursor: pointer; padding: 18px 22px; color: #F4F8FB; font-weight: 600; line-height: 1.55; background: rgba(74,158,255,0.08); } .article-content details > summary::-webkit-details-marker, .article-content .faq-item > summary::-webkit-details-marker { display: none; } .article-content details > summary:hover, .article-content .faq-item > summary:hover { background: rgba(74,158,255,0.12); } .article-content details > p, .article-content details > div, .article-content .faq-item > p, .article-content .faq-item > div { padding: 18px 22px 20px; margin: 0; color: #D8E3EA; background: transparent; } /* Generic sticky in-page TOC used by article/case/blog pages */ .article-layout, .content-with-toc, .article-shell { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 28px; align-items: start; } .article-toc, .page-toc, .in-page-toc, .blog-toc, .toc-card, aside[aria-label="Nesta página"], aside[aria-label="On this page"] { position: sticky; top: calc(var(--nav-height) + 18px); align-self: start; background: linear-gradient(180deg, rgba(12, 25, 39, 0.92), rgba(11, 22, 34, 0.88)); border: 1px solid rgba(74,158,255,0.14); border-radius: 18px; padding: 12px; max-height: calc(100vh - 108px); overflow: auto; backdrop-filter: blur(10px); box-shadow: 0 18px 40px rgba(0,0,0,0.18); } .article-toc h3, .article-toc h4, .page-toc h3, .page-toc h4, .in-page-toc h3, .in-page-toc h4, .blog-toc h3, .blog-toc h4, .toc-card h3, .toc-card h4, aside[aria-label="Nesta página"] h3, aside[aria-label="Nesta página"] h4, aside[aria-label="On this page"] h3, aside[aria-label="On this page"] h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-blue); margin: 0 0 10px; padding: 2px 4px 8px; border-bottom: 1px solid rgba(74,158,255,0.10); } .article-toc a, .page-toc a, .in-page-toc a, .blog-toc a, .toc-card a, aside[aria-label="Nesta página"] a, aside[aria-label="On this page"] a { display: block; color: #C7D6DE; font-size: 0.86rem; line-height: 1.4; padding: 7px 9px; border-radius: 10px; text-decoration: none; transition: background-color .18s ease, color .18s ease, transform .18s ease; } .article-toc a:hover, .page-toc a:hover, .in-page-toc a:hover, .blog-toc a:hover, .toc-card a:hover, aside[aria-label="Nesta página"] a:hover, aside[aria-label="On this page"] a:hover, .article-toc a.active, .page-toc a.active, .in-page-toc a.active, .blog-toc a.active, .toc-card a.active, aside[aria-label="Nesta página"] a.active, aside[aria-label="On this page"] a.active { color: #fff; background: rgba(74,158,255,0.14); transform: translateX(2px); } @media (max-width: 1024px) { .article-layout, .content-with-toc, .article-shell { grid-template-columns: 1fr; gap: 20px; } .article-toc, .page-toc, .in-page-toc, .blog-toc, .toc-card, aside[aria-label="Nesta página"], aside[aria-label="On this page"] { position: static; max-height: none; order: -1; margin-bottom: 24px; padding: 14px; } } @media (max-width: 768px) { .article-header { padding: 118px 0 38px; } .article-header h1 { font-size: clamp(1.9rem, 8vw, 2.8rem); } .article-content { padding: 0 20px 70px; } .article-content p, .article-content li { font-size: 1rem; } } .video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-md); margin: 2rem 0; } .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ---- Contact Form ---- */ .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; } .form-control { width: 100%; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-color-strong); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-family); font-size: 1rem; transition: border-color 0.2s; } .form-control:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(74,158,255,0.15); } textarea.form-control { min-height: 140px; resize: vertical; } .form-status { margin-top: 12px; font-size: 0.9rem; } .form-status.success { color: var(--accent-green); } .form-status.error { color: #ef4444; } /* ---- Two-col layout ---- */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .two-col-text h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: 1rem; } .two-col-text p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1rem; } .two-col-img { border-radius: var(--radius-lg); overflow: hidden; } .two-col-img img { width: 100%; display: block; } /* ---- Animations ---- */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ---- Homepage Hero ---- */ .home-hero { display: flex; align-items: center; position: relative; background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); overflow: hidden; padding: calc(var(--nav-height) + 60px) 0 80px; } .home-hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(74,158,255,0.12) 0%, transparent 70%); pointer-events: none; } .home-hero::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(123,104,238,0.08) 0%, transparent 70%); pointer-events: none; } .home-hero .container { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero-text h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); font-weight: 800; margin-bottom: 1.2rem; line-height: 1.1; } .hero-text p { color: var(--text-secondary); font-size: 1.15rem; line-height: 1.8; margin-bottom: 2rem; max-width: 540px; } .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .hero-visual { position: relative; } .hero-visual img { border-radius: var(--radius-xl); box-shadow: var(--shadow-elevated); } /* ---- Stats Row ---- */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 40px 0; max-width: 900px; margin: 0 auto; } .stat-item { text-align: center; padding: 24px 16px; background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border-color); } .stat-number { font-size: 2.5rem; font-weight: 800; background: var(--gradient-blue-purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-label { color: var(--text-secondary); font-size: 0.9rem; margin-top: 4px; font-weight: 500; } /* ---- CTA Banner ---- */ .cta-banner { background: var(--gradient-blue-purple); border-radius: var(--radius-xl); padding: 60px; text-align: center; position: relative; overflow: hidden; } .cta-banner h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: #fff; margin-bottom: 1rem; } .cta-banner p { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 600px; margin: 0 auto 2rem; } .cta-banner .btn { background: #fff; color: var(--bg-primary); font-weight: 700; } .cta-banner .btn:hover { background: #f0f0f0; transform: translateY(-2px); } /* ---- Responsive ---- */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .hero-grid { grid-template-columns: 1fr; text-align: center; } .hero-text p { margin-left: auto; margin-right: auto; } .hero-buttons { justify-content: center; } .hero-visual { max-width: 500px; margin: 0 auto; } .two-col { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 1200px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nav-links { display: none; } .nav-hamburger { display: flex; } .lang-switch { display: none; } .section { padding: 60px 0; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; text-align: center; } .blog-grid { grid-template-columns: 1fr; } .cards-grid { grid-template-columns: 1fr; } .cards-grid-3 { grid-template-columns: 1fr; } .yt-card { flex: 0 1 100%; min-width: 0; } .cert-row { grid-template-columns: 1fr; } .gistm-banner { flex-direction: column; text-align: center; padding: 32px 24px; gap: 24px; } .gistm-banner-logo { max-width: 240px; margin: 0 auto; } .team-grid { grid-template-columns: repeat(2, 1fr); } .stats-row { grid-template-columns: repeat(2, 1fr); gap: 16px; } .cta-banner { padding: 40px 24px; } } @media (max-width: 480px) { .container { width: calc(100% - 32px); } .team-grid { grid-template-columns: 1fr; } } /* ============================================ RIDE Agent — Mobile Floating Button On mobile: hide embedded iframe, show floating icon ============================================ */ /* Desktop: show embed, hide mobile button */ .ride-agent-embed-desktop { display: block; } .ride-agent-mobile-fab { display: none; } /* Mobile: hide embed, show floating button */ @media (max-width: 768px) { .ride-agent-embed-desktop { display: none !important; } .ride-agent-mobile-fab { display: flex !important; } /* Mobile CTA card that replaces the iframe section */ .ride-agent-mobile-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 24px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(74,158,255,0.08) 0%, rgba(123,104,238,0.08) 100%); border: 1px solid rgba(74,158,255,0.18); text-align: center; } .ride-agent-mobile-cta .ride-mobile-icon { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, #4A9EFF, #7B68EE); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; box-shadow: 0 8px 24px rgba(74,158,255,0.35); } .ride-agent-mobile-cta .ride-mobile-label { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; } .ride-agent-mobile-cta .ride-mobile-sub { font-size: 0.85rem; color: var(--text-secondary); margin-top: -8px; } .ride-agent-mobile-cta .ride-mobile-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 999px; background: linear-gradient(135deg, #4A9EFF, #7B68EE); color: #fff; font-size: 0.95rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 20px rgba(74,158,255,0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .ride-agent-mobile-cta .ride-mobile-btn:hover, .ride-agent-mobile-cta .ride-mobile-btn:active { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(74,158,255,0.5); color: #fff; } } /* Floating Action Button — persistent on mobile */ .ride-fab { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #4A9EFF, #7B68EE); color: #fff; display: none; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 6px 28px rgba(74,158,255,0.45), 0 0 0 0 rgba(74,158,255,0.3); text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; animation: ride-fab-pulse 3s ease-in-out infinite; } .ride-fab:hover, .ride-fab:active { transform: scale(1.08); box-shadow: 0 8px 36px rgba(74,158,255,0.55); color: #fff; } .ride-fab img { width: 32px; height: 32px; border-radius: 8px; } /* Tooltip on hover (desktop won't see this since it's display:none by default) */ .ride-fab::after { content: attr(data-tooltip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--bg-card, #162232); color: var(--text-primary, #fff); font-size: 0.8rem; font-weight: 500; padding: 6px 14px; border-radius: 8px; border: 1px solid rgba(74,158,255,0.2); box-shadow: 0 4px 16px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .ride-fab:hover::after { opacity: 1; } @keyframes ride-fab-pulse { 0%, 100% { box-shadow: 0 6px 28px rgba(74,158,255,0.45), 0 0 0 0 rgba(74,158,255,0.3); } 50% { box-shadow: 0 6px 28px rgba(74,158,255,0.45), 0 0 0 8px rgba(74,158,255,0); } } @media (max-width: 768px) { .ride-fab { display: flex; } } /* ============================================ ONDA 4 — FIXES FOR NEW SERVICE PAGES (FAQ legibility, btn-secondary, CTA titles, diagram backgrounds, two-col alignment) ============================================ */ /* 1) Missing .btn-secondary variant (was producing unstyled buttons on new pages) */ .btn-secondary { background: transparent; color: var(--accent-blue); border: 2px solid var(--accent-blue); } .btn-secondary:hover { background: var(--accent-blue); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(74,158,255,0.35); } /* Inside the gradient CTA banner, secondary button needs to stand out on blue */ .cta-banner .btn-secondary { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.75); } .cta-banner .btn-secondary:hover { background: #fff; color: var(--bg-primary); border-color: #fff; } /* 2) CTA banner: neutralise text-gradient so titles don't end up blue-on-blue. The .text-gradient span inside .cta-banner now shows as solid white. */ .cta-banner h1 .text-gradient, .cta-banner h2 .text-gradient, .cta-banner h3 .text-gradient, .cta-banner p .text-gradient { background: none; -webkit-background-clip: initial; -webkit-text-fill-color: currentColor; background-clip: initial; color: #fff; } /* 3) FAQ

accordion used on service / AI / audit pages. The older inline-style markup set background:white on a dark-theme page, which produced white-on-white text. Override those inline styles so the FAQ blocks use the same dark-panel look as .article-content details. */ details[open] > summary > .fa-plus:before { content: "\f068"; } /* plus → minus */ .section details { background: linear-gradient(180deg, rgba(27,40,56,0.92) 0%, rgba(20,31,45,0.98) 100%) !important; border: 1px solid rgba(74,158,255,0.18) !important; border-radius: 14px !important; padding: 0 !important; margin: 14px 0 !important; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.18); color: #F4F8FB; } .section details[open] { border-color: rgba(74,158,255,0.34) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.22); } .section details > summary { padding: 18px 22px !important; color: #F4F8FB !important; background: rgba(74,158,255,0.08) !important; font-weight: 600; line-height: 1.55; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .section details > summary::-webkit-details-marker { display: none; } .section details > summary:hover { background: rgba(74,158,255,0.14) !important; } .section details > p, .section details > div, .section details > ul, .section details > ol { padding: 18px 22px 20px !important; margin: 0 !important; color: #D8E3EA !important; background: transparent !important; line-height: 1.7; } .section details li { color: #D8E3EA !important; } .section details summary i.fa-plus, .section details summary i.fa-minus { color: var(--accent-blue); transition: transform 0.2s ease; flex-shrink: 0; } .section details[open] summary i.fa-plus { transform: rotate(45deg); } /* 4) White-background diagram images: frame them in a white rounded canvas so their white bg no longer clashes with the dark page. Applies to inline diagram wrappers used on Onda 4 pages. */ .diagram-frame, .section img[src*="/diagram-"], .section img[alt*="Jornada"], .section img[alt*="readiness"] { background: #fff; padding: 16px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); } /* 5) Two-column alignment: make sure .two-col children stretch and the "right column" cards align with the text on the left */ .two-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } .two-col .two-col-text > * + * { margin-top: 16px; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; gap: 32px; } } /* 6) Page-hero CTA row: make sure the buttons don't collapse awkwardly */ .page-hero .btn { min-height: 48px; } /* 7) Generic `.btn` without a variant (defensive): give it the primary look so no button on the site ever renders without background colour. */ .btn:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-outline):not([class*="agent-btn"]):not(.mobile-cta):not(.nav-link-cta):not(.nav-link-agents) { background: var(--accent-blue); color: #fff; box-shadow: 0 4px 16px rgba(74,158,255,0.3); } .btn:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-outline):not([class*="agent-btn"]):not(.mobile-cta):not(.nav-link-cta):not(.nav-link-agents):hover { background: var(--accent-blue-hover); color: #fff; transform: translateY(-1px); } /* Inside the gradient CTA banner, the naked .btn keeps the white pill defined above (.cta-banner .btn) — those rules win by specificity. */ /* 8) Centred grid for odd card counts (5, 7, 11...): switch .cards-grid to a flex layout so any orphan cards sit centred on the last row instead of left-aligned. Cards keep their original widths. */ .cards-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 24px; } .cards-grid > .card, .cards-grid > .case-card, .cards-grid > .blog-card { flex: 1 1 calc(25% - 24px); min-width: 240px; max-width: calc(25% - 18px); } .cards-grid-3 { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 24px; } .cards-grid-3 > .card { flex: 1 1 calc(33.333% - 24px); min-width: 260px; max-width: calc(33.333% - 16px); } @media (max-width: 1200px) { .cards-grid > .card, .cards-grid > .case-card, .cards-grid > .blog-card { flex-basis: calc(33.333% - 16px); max-width: calc(33.333% - 16px); } } @media (max-width: 900px) { .cards-grid > .card, .cards-grid > .case-card, .cards-grid > .blog-card { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); } } @media (max-width: 640px) { .cards-grid > .card, .cards-grid > .case-card, .cards-grid > .blog-card, .cards-grid-3 > .card { flex-basis: 100%; max-width: 100%; } } /* 9) Center button rows everywhere — hero + in-text CTA groups. Many new pages use inline flex with `gap:12px` on the page-hero CTA row. Ensure they stay centered on every viewport. */ .page-hero > .container > div[style*="display:flex"], .page-hero > .container > div[style*="display: flex"] { justify-content: center !important; } /* ============================================ CASE STUDY — EVIDENCE & SOURCE-BACKED FACTS Sprint 2026-04-20x — enhancement from 16-case editorial pack (verified-facts block + evidence level badge + conservative editorial note). ============================================ */ /* Evidence level badge shown in .article-meta */ .evidence-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(74, 222, 128, 0.14); color: var(--accent-green); border: 1px solid rgba(74, 222, 128, 0.35); border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; } .evidence-badge i { font-size: 0.8rem; } .evidence-badge.moderate { background: rgba(245, 158, 11, 0.12); color: var(--accent-orange); border-color: rgba(245, 158, 11, 0.35); } /* Verified-facts block — teal/blue hue to distinguish from regular prose */ .evidence-block { margin: 40px 0; padding: 28px 32px; background: linear-gradient(135deg, rgba(74, 158, 255, 0.06), rgba(123, 104, 238, 0.06)); border: 1px solid var(--border-color-strong); border-left: 4px solid var(--accent-blue); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .evidence-block h2, .evidence-block h3 { display: flex; align-items: center; gap: 10px; color: var(--text-primary); margin-top: 0; margin-bottom: 16px; font-size: 1.3rem; } .evidence-block h2 i, .evidence-block h3 i { color: var(--accent-blue); } .evidence-block p, .evidence-block li { color: var(--text-secondary); line-height: 1.75; } .evidence-block ul { margin: 12px 0 0 0; padding-left: 20px; } .evidence-block ul li { margin-bottom: 10px; } .evidence-block .evidence-source-note { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border-color-strong); font-size: 0.88rem; color: var(--text-muted); font-style: italic; } /* Editorial caution note — discreet grey panel at the bottom of the article */ .editorial-note { margin: 32px 0; padding: 18px 22px; background: rgba(107, 125, 141, 0.08); border: 1px solid rgba(107, 125, 141, 0.22); border-radius: var(--radius-sm); font-size: 0.92rem; color: var(--text-muted); line-height: 1.65; } .editorial-note i { color: var(--text-muted); margin-right: 6px; } .editorial-note strong { color: var(--text-secondary); } @media (max-width: 640px) { .evidence-block { padding: 20px 18px; } .evidence-block h2, .evidence-block h3 { font-size: 1.1rem; } } /* ============================================ Sprint 2026-04-20z — per user feedback: Hide the "side HTML" blocks that did not render well inside blog posts and case pages: - evidence-badge (pill in article-meta) - evidence-block (verified-facts box) - editorial-note (grey caveat panel) Kept in DOM for accessibility/SEO history, but visually removed so they no longer appear. ============================================ */ .evidence-badge, .evidence-block, .editorial-note { display: none !important; }