/* Site-wide mobile baseline — include as the LAST stylesheet in so it wins equal-specificity rules. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img, video, canvas, picture { max-width: 100%; height: auto; } svg { max-width: 100%; } /* Do not force height:auto on iframes (breaks aspect-ratio embeds) */ iframe { max-width: 100%; } /* * Header logo + wordmark (this file is linked last sitewide so these win over page-local .nav-brand rules). * Larger mark and bold neon-green SEERROR across extension/docs-style pages using .nav-brand. */ .nav-brand { gap: 0.65rem; } .nav-brand img { height: 52px; width: auto; object-fit: contain; } .nav-brand-name { font-weight: 800; color: #00ff88; font-size: 1.45rem; letter-spacing: 0.14em; } /* * Flush with the viewport top — the old offset left a slit where scrolling hero/breadcrumb * could show through above the blurred bar on mobile (looked like stray text/glow). */ .nav { position: fixed !important; top: 0; left: 0 !important; right: 0 !important; z-index: 9500 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: env(safe-area-inset-top, 0px); padding-bottom: 0 !important; padding-left: max(2.5rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(2.5rem, env(safe-area-inset-right, 0px)) !important; box-sizing: border-box; height: auto; min-height: 64px; background: rgba(5, 5, 8, 0.92) !important; backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } body:has(.reading-progress) .nav { padding-top: calc(3px + env(safe-area-inset-top, 0px)); } .nav .nav-links { display: flex; align-items: center; gap: 1.5rem; flex-wrap: nowrap; } /* Top-row links only (exclude profile dropdown anchors inside .nav-account-menu) */ .nav .nav-links > a { font-family: ui-monospace, 'JetBrains Mono', 'Roboto Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #555566; text-decoration: none; } .nav .nav-links > a:hover { color: #00ff88; } .nav .nav-links > a.active { color: #00ff88; } .nav .nav-links .nav-cta { color: #00ff88; border: 1px solid rgba(0, 255, 136, 0.3); padding: 0.4rem 1.1rem !important; border-radius: 3px; font-weight: 700; } .nav .nav-links .nav-cta:hover { background: #00ff88; color: #000; box-shadow: 0 0 20px rgba(0, 255, 136, 0.2); } /* ═════════ App shell: index / dashboard / seerrveil (mode-switcher) — match nav.nav ═════════ */ header:has(.mode-switcher) { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9500 !important; padding-top: env(safe-area-inset-top, 0px) !important; padding-right: max(2.5rem, env(safe-area-inset-right, 0px)) !important; padding-bottom: 0 !important; padding-left: max(2.5rem, env(safe-area-inset-left, 0px)) !important; height: auto !important; min-height: 64px !important; box-sizing: border-box !important; } body:has(.reading-progress) header:has(.mode-switcher) { padding-top: calc(3px + env(safe-area-inset-top, 0px)) !important; } header:has(.mode-switcher) .logo { display: flex !important; align-items: center !important; gap: 0.65rem !important; margin: 0 !important; padding: 0 !important; } header:has(.mode-switcher) .logo img { height: 52px !important; width: auto !important; object-fit: contain !important; } header:has(.mode-switcher) .logo h1 { font-family: inherit !important; font-weight: 800 !important; font-size: 1.45rem !important; color: #00ff88 !important; letter-spacing: 0.14em !important; margin: 0 !important; line-height: 1.05 !important; } @media (max-width: 900px) { .nav { padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important; } header:has(.mode-switcher) { padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important; padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important; } } /* Admin grid header — visually align with blurred suite bar */ .dashboard-container .dashboard-header { border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; background: rgba(5, 5, 8, 0.92) !important; backdrop-filter: blur(24px) !important; box-shadow: none !important; min-height: 64px !important; } .dashboard-container .dashboard-header::before { display: none !important; } .dashboard-container .dashboard-header .logo-section { gap: 0.65rem !important; } .dashboard-container .dashboard-header .logo-section img { height: 52px !important; width: auto !important; object-fit: contain !important; } .dashboard-container .dashboard-header .logo-section h1 { font-size: 1.45rem !important; font-weight: 800 !important; color: #00ff88 !important; letter-spacing: 0.14em !important; } /* Profile: account dropdown lives inside collapsible nav panel */ .nav .nav-links .nav-account-menu { position: relative; flex-shrink: 0; } .nav .nav-links .nav-account-menu .user-menu-trigger { min-height: 44px; } @media (max-width: 768px) { .nav .nav-links .nav-account-menu { flex: 1 0 100%; width: 100%; padding: 0.65rem 0.35rem 0.95rem !important; } .nav .nav-links .nav-account-menu .dropdown-menu { position: static !important; width: 100% !important; margin-top: 0.4rem !important; } } /* Allow common wide content to wrap */ .hero h1, .hero h2, .article-body h1, .article-body h2 { overflow-wrap: anywhere; word-wrap: break-word; } /* —— Mobile hamburger (.nav / .header-menu-toggle) —— injected by responsive-global.js */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 46px; height: 46px; margin: 0; margin-left: auto; padding: 0; border-radius: 999px; border: 1px solid rgba(0, 255, 136, 0.42); background: linear-gradient(155deg, rgba(0, 255, 136, 0.14), rgba(0, 0, 0, 0.25)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 18px rgba(0, 0, 0, 0.4); cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .nav-toggle:active { transform: scale(0.96); } .nav-toggle:focus-visible { outline: 2px solid #00ff88; outline-offset: 3px; } .nav-toggle-bar { display: block; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #00ff88, #00c896); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin 0.2s ease; } .nav-toggle.is-open { border-color: rgba(0, 255, 136, 0.65); box-shadow: inset 0 0 0 1px rgba(0, 255, 136, 0.12), 0 0 24px rgba(0, 255, 136, 0.15); } .nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Legacy: older builds injected .nav-backdrop; keep hidden without body class */ .nav-backdrop { display: none !important; pointer-events: none !important; } @media (max-width: 768px) { /* * In-flow menu inside the fixed bar (no full-screen fixed layer). * Page styles often set .nav { height: 64px } which clips overlays; use auto height. */ .nav { gap: 0.5rem; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9500 !important; flex-wrap: wrap; align-items: center; align-content: flex-start; height: auto !important; min-height: 70px; max-height: none; overflow: visible; box-sizing: border-box; } /* Wide glow reads like phantom text/content under the notch */ .reading-progress { top: env(safe-area-inset-top, 0px); box-shadow: none; } @keyframes rg-nav-drawer-scrim-in { from { opacity: 0; } to { opacity: 1; } } /* Soft dim behind menus — drawer chrome stays above (z-index 9500). */ body.nav-drawer-open::before, body.site-header-drawer-open::before { content: ''; position: fixed; inset: 0; z-index: 9400; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.38) 45%, rgba(2, 8, 6, 0.2) 100% ); animation: rg-nav-drawer-scrim-in 0.26s ease-out forwards; } .nav-brand { flex: 1 1 auto; min-width: 0; order: 1; align-items: center; gap: 0.55rem; } .nav-brand img { height: clamp(42px, 12vw, 54px); } .nav-brand-name { font-size: clamp(1.12rem, 4.35vw, 1.42rem); font-weight: 800; color: #00ff88; letter-spacing: 0.1em; } .nav-toggle { display: inline-flex; order: 2; margin-left: 0; } .nav .nav-links { order: 3; flex: 1 0 100%; width: 100%; position: static; left: auto; right: auto; top: auto; bottom: auto; display: none; max-width: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; margin: 0; padding: 0.5rem max(0.6rem, env(safe-area-inset-left)) 1rem max(0.6rem, env(safe-area-inset-right)); background: linear-gradient(180deg, #0c0c12 0%, #07070c 52%, #040407 100%); border-top: none; border-radius: 0 0 18px 18px; border-left: 3px solid rgba(0, 255, 136, 0.34); max-height: min(78vh, 480px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(0, 255, 136, 0.1); box-sizing: border-box; } body.nav-drawer-open .nav .nav-links { display: flex; } .nav .nav-links > a { display: flex !important; align-items: center; justify-content: flex-start; flex-shrink: 0; white-space: normal; padding: 0.88rem 0.82rem; margin: 0 2px; border-radius: 12px; border-bottom: none; font-size: 0.78rem; text-decoration: none; letter-spacing: 0.06em; background: rgba(255, 255, 255, 0.03); transition: background 0.18s ease, color 0.18s ease; } .nav .nav-links > a:active { background: rgba(0, 255, 136, 0.09); } .nav .nav-links .nav-cta { margin-top: 0.65rem; justify-content: center; border: 1px solid rgba(0, 255, 136, 0.42); border-radius: 12px; padding: 0.78rem 1rem !important; background: linear-gradient(145deg, rgba(0, 255, 136, 0.12), rgba(0, 255, 136, 0.04)); box-shadow: 0 0 24px rgba(0, 255, 136, 0.08); } pre, code { overflow-x: auto; max-width: 100%; } .article-body .drop-cap::first-letter { font-size: clamp(2.5rem, 12vw, 4.5rem); line-height: 0.85; } .article-cta { padding: 2rem 1.25rem; } .article-cta .cta-btn { max-width: 100%; justify-content: center; text-align: center; flex-wrap: wrap; padding-left: 1.25rem; padding-right: 1.25rem; } } /* Horizontal scroll for wrapped tables (see responsive-global.js) */ .table-responsive { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; border-radius: 2px; } .table-responsive table { margin: 0; } @media (max-width: 768px) { /* * Index / dashboard / Seerrveil: .header-menu-toggle + collapsible .mode-switcher * (button injected by responsive-global.js — same bar styling as .nav-toggle) */ header:has(.mode-switcher) { height: auto !important; min-height: 70px !important; flex-wrap: wrap !important; align-items: center !important; align-content: flex-start !important; padding-top: calc(0.45rem + env(safe-area-inset-top, 0px)) !important; padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important; padding-bottom: 0.45rem !important; padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important; row-gap: 0.25rem !important; column-gap: 0.5rem !important; } header:has(.mode-switcher) .logo { order: 1 !important; flex: 1 1 auto !important; min-width: 0 !important; } header:has(.mode-switcher) .header-menu-toggle { order: 2 !important; margin-left: auto !important; flex-shrink: 0 !important; } body:not(.site-header-drawer-open) header:has(.mode-switcher) .mode-switcher, body:not(.site-header-drawer-open) header:has(.mode-switcher) .login-btn, body:not(.site-header-drawer-open) header:has(.mode-switcher) > #userDisplay { display: none !important; } body.site-header-drawer-open header:has(.mode-switcher) { border-radius: 0 0 22px 22px !important; overflow: visible !important; box-shadow: 0 28px 64px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(0, 255, 136, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important; border-bottom: 1px solid rgba(0, 255, 136, 0.14) !important; background: linear-gradient(180deg, rgba(10, 10, 16, 0.98) 0%, rgba(5, 5, 10, 0.96) 100%) !important; backdrop-filter: blur(26px) !important; -webkit-backdrop-filter: blur(26px) !important; padding-bottom: 0 !important; } body.site-header-drawer-open header:has(.mode-switcher) .mode-switcher { order: 10 !important; flex: 1 0 100% !important; width: 100% !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0.48rem !important; overflow-x: visible !important; overflow-y: auto !important; max-height: min(72vh, 520px) !important; padding: 0.5rem max(0.5rem, env(safe-area-inset-left)) 0.85rem max(0.5rem, env(safe-area-inset-right)) !important; margin: 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; background: transparent !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; } /* * Accordion stacks vertically (fixes absolute submenu + stray “neon box”). */ body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown { flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; border-radius: 14px !important; overflow: hidden !important; border: 1px solid rgba(0, 255, 136, 0.14) !important; background: linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, rgba(0, 0, 0, 0.28) 100%) !important; box-sizing: border-box !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown.open { border-color: rgba(0, 255, 136, 0.38) !important; box-shadow: 0 0 32px rgba(0, 255, 136, 0.1) !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown-toggle, body.site-header-drawer-open header:has(.mode-switcher) .mode-btn { font-size: 0.74rem !important; letter-spacing: 0.11em !important; padding: 0.75rem 0.85rem !important; min-height: 46px !important; width: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.5rem !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown-toggle { border: none !important; border-radius: 0 !important; background: transparent !important; color: rgba(230, 230, 240, 0.9) !important; transform: none !important; box-shadow: none !important; text-decoration: none !important; font-weight: 700 !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown-toggle::before { display: none !important; content: none !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown.open .resources-dropdown-toggle { color: #00ff88 !important; background: rgba(0, 255, 136, 0.09) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown-toggle i { font-size: 0.72rem !important; opacity: 0.9 !important; margin-left: 0 !important; flex-shrink: 0 !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown-menu { position: static !important; top: auto !important; left: auto !important; right: auto !important; margin-top: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 0.4rem 0.35rem 0.62rem !important; border: none !important; border-radius: 0 0 11px 11px !important; background: rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: none !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown-menu::before { display: none !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown:not(.open) .resources-dropdown-menu { display: none !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown.open .resources-dropdown-menu { display: block !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown-item { display: flex !important; align-items: center !important; gap: 0.45rem !important; width: 100% !important; box-sizing: border-box !important; margin: 3px 0 !important; padding: 0.68rem 0.74rem !important; border-radius: 11px !important; border-left: none !important; background: rgba(255, 255, 255, 0.03) !important; transform: none !important; text-decoration: none !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown-item::before { display: none !important; content: none !important; } body.site-header-drawer-open header:has(.mode-switcher) .resources-dropdown-item:hover { padding-left: 0.74rem !important; border-left: none !important; background: rgba(0, 255, 136, 0.1) !important; color: #00ff88 !important; } body.site-header-drawer-open header:has(.mode-switcher) .login-btn { order: 11 !important; margin-left: 0 !important; margin-top: 0.25rem !important; width: 100% !important; text-align: center !important; min-height: 44px !important; line-height: 44px !important; box-sizing: border-box !important; } body.site-header-drawer-open header:has(.mode-switcher) > #userDisplay { order: 12 !important; margin-left: 0 !important; margin-top: 0.25rem !important; width: 100% !important; } header:has(.mode-switcher) .logo h1 { font-size: clamp(1.12rem, 4.35vw, 1.42rem) !important; letter-spacing: 0.1em !important; font-weight: 800 !important; color: #00ff88 !important; } header:has(.mode-switcher) .logo img { height: clamp(42px, 12vw, 54px) !important; width: auto !important; object-fit: contain !important; } } /* * Floating Seerror AI chat widget (index.html) — tablets, narrow desktops, phones. * Wider breakpoint than header drawer: landscape phones/tablets above 768px still need fluid sizing. */ @media (max-width: 1024px) { .chat-bot-container { bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important; right: max(10px, env(safe-area-inset-right, 0px)) !important; z-index: 10000 !important; } .chat-toggle { width: 54px !important; height: 54px !important; flex-shrink: 0; } .chat-window { width: min(400px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; height: auto !important; min-height: 0 !important; max-height: min( 560px, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 108px) ) !important; right: 0 !important; left: auto !important; bottom: 64px !important; flex-direction: column !important; box-sizing: border-box !important; /* Let flex column distribute height so .chat-messages can scroll */ align-items: stretch !important; } .chat-messages { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; touch-action: pan-y !important; overscroll-behavior: contain !important; } .chat-header { flex-shrink: 0 !important; padding: 10px 12px !important; } .chat-header h3 { font-size: 0.72rem !important; } .chat-header .header-actions { gap: 6px !important; } .chat-header .header-btn { min-width: 40px !important; min-height: 40px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .chat-input { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; flex-shrink: 0 !important; gap: 8px !important; padding: 10px 12px !important; } .chat-input input { flex: 1 1 auto !important; min-width: 0 !important; /* 16px+ prevents iOS zoom on focus */ font-size: 16px !important; } .chat-input button { flex-shrink: 0 !important; padding: 10px 12px !important; white-space: nowrap !important; } .chat-footer { flex-shrink: 0 !important; padding: 6px 12px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; } .welcome-container { margin: 8px !important; padding: 16px 12px !important; } .chat-bot-container .suggestions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: stretch !important; gap: 10px !important; } .chat-bot-container .suggestion { text-align: center !important; word-break: break-word !important; } .chat-bot-container .chat-footer span { line-height: 1.35 !important; } .chat-bot-container .message-content { max-width: min(92%, 380px) !important; } .chat-bot-container .code-block pre { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } } @media (max-width: 480px) { .nav { min-height: 72px; } .nav-brand-name { font-size: clamp(1.02rem, 5.35vw, 1.38rem); letter-spacing: 0.072em; } .nav-brand img { height: clamp(40px, 13vw, 54px); } header:has(.mode-switcher) { min-height: 72px !important; } header:has(.mode-switcher) .logo h1 { font-size: clamp(1.02rem, 5.35vw, 1.38rem) !important; letter-spacing: 0.072em !important; } header:has(.mode-switcher) .logo img { height: clamp(40px, 13vw, 54px) !important; } .dashboard-container .dashboard-header .logo-section img { height: clamp(40px, 13vw, 54px) !important; } .dashboard-container .dashboard-header .logo-section h1 { font-size: clamp(1.02rem, 5.35vw, 1.38rem) !important; letter-spacing: 0.072em !important; } .hero, .article-layout, .featured-img, .back-strip { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } .verification-container { padding: 1.75rem 1.1rem; } .verification-container h1 { font-size: 1.35rem; letter-spacing: 0.08em; } .container { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } .privacy-container { padding-left: 1rem !important; padding-right: 1rem !important; } .privacy-header h1 { font-size: clamp(1.35rem, 6vw, 2.5rem); } .chat-window { width: calc(100vw - 16px) !important; max-width: none !important; } .chat-toggle { width: 50px !important; height: 50px !important; } .chat-bot-container .suggestion { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } } @media (prefers-reduced-motion: reduce) { .nav-toggle, .nav-toggle-bar, .nav .nav-links { transition: none !important; } body.nav-drawer-open::before, body.site-header-drawer-open::before { animation: none !important; opacity: 1; } }