/* Current site-level theme, mobile navigation, invite, FAQ, and legal-page overrides. */ /* ===================================================================== Session 53 — landing/site theme toggle button + light theme overrides Theme system is scoped: `bloqbot:theme:site` controls these rules, `bloqbot:theme:dashboard` controls dashboard.css. The `` attribute is set by the inline pre-paint script using the right key. Light theme here applies only to non-dashboard pages thanks to the `body:not(.dashboard-body)` guard. ===================================================================== */ /* Theme toggle button in the landing navbar */ .nav-theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: transparent; cursor: pointer; transition: color var(--ease), border-color var(--ease), background var(--ease), transform var(--ease); } .nav-theme-toggle:hover { color: var(--green); border-color: var(--green); background: var(--green-soft); transform: translateY(-1px); } .nav-theme-toggle .theme-icon-sun, .nav-theme-toggle .theme-icon-moon { display: none; } [data-theme="light"] .nav-theme-toggle .theme-icon-moon, :root:not([data-theme="dark"]) .nav-theme-toggle .theme-icon-moon { display: block; } [data-theme="dark"] .nav-theme-toggle .theme-icon-sun { display: block; } @media (max-width: 720px) { .nav-theme-toggle { width: 32px; height: 32px; } } /* ---- LIGHT THEME for site (non-dashboard) pages ---- */ [data-theme="light"] body:not(.dashboard-body) { --bg: #fbfbfd; --bg-2: #ffffff; --panel: #ffffff; --panel-2: #f4f5f8; --panel-3: #ecedf2; --line: rgba(15, 17, 21, 0.10); --line-strong: rgba(15, 17, 21, 0.18); --text: #0f1216; --muted: #4a4e58; --dim: #898d97; --blue: #0891b2; --blue-2: #0e7490; --green: #15c384; --green-soft: rgba(21, 195, 132, 0.10); --red: #b91c1c; --red-soft: rgba(185, 28, 28, 0.10); --amber: #b45309; --amber-soft: rgba(180, 83, 9, 0.10); --shadow: 0 18px 48px rgba(15, 17, 21, 0.12); background: linear-gradient(rgba(15, 17, 21, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 17, 21, 0.04) 1px, transparent 1px), radial-gradient(circle at 15% 8%, rgba(21, 195, 132, 0.08), transparent 28rem), radial-gradient(circle at 88% 0%, rgba(8, 145, 178, 0.08), transparent 30rem), #fbfbfd; background-size: 44px 44px, 44px 44px, auto, auto, auto; color: #0f1216; } /* Replace the ambient overlay so it stays subtle in light mode */ [data-theme="light"] body:not(.dashboard-body)::before { background: linear-gradient(115deg, rgba(15, 17, 21, 0.02), transparent 38%), radial-gradient(circle at 50% 100%, rgba(245, 189, 79, 0.04), transparent 34rem); } /* Navbar surfaces in light mode */ [data-theme="light"] body:not(.dashboard-body):not(.landing-3d) .navbar, [data-theme="light"] body:not(.dashboard-body) .navbar.scrolled { background: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(15, 17, 21, 0.08); box-shadow: 0 1px 0 rgba(15, 17, 21, 0.04); } [data-theme="light"] body:not(.dashboard-body) .logo-b { color: var(--text); } [data-theme="light"] body:not(.dashboard-body) .logo-bot { color: var(--green); } [data-theme="light"] body:not(.dashboard-body) .logo-product { color: var(--muted); } [data-theme="light"] body:not(.dashboard-body) .nav-link { color: var(--muted); } [data-theme="light"] body:not(.dashboard-body) .nav-link:hover, [data-theme="light"] body:not(.dashboard-body) .nav-link.is-active { color: var(--text); } [data-theme="light"] body:not(.dashboard-body) .btn-nav-secondary { color: var(--text); border-color: var(--line-strong); background: transparent; } [data-theme="light"] body:not(.dashboard-body) .btn-nav-secondary:hover { border-color: var(--green); background: var(--green-soft); } [data-theme="light"] body:not(.dashboard-body) .btn-nav-primary { color: #06110d; background: var(--green); border-color: var(--green); } [data-theme="light"] body:not(.dashboard-body) .btn-nav-primary:hover { background: #10a972; border-color: #10a972; } /* Hero, sections, cards: flip the most visible panels via the variables. Anything that uses var(--panel), var(--panel-2), var(--text), etc. flips automatically. Override hardcoded color usage below. */ [data-theme="light"] body:not(.dashboard-body) section, [data-theme="light"] body:not(.dashboard-body) .stats-strip, [data-theme="light"] body:not(.dashboard-body) .features-grid, [data-theme="light"] body:not(.dashboard-body) .pricing-section, [data-theme="light"] body:not(.dashboard-body) .founder-section, [data-theme="light"] body:not(.dashboard-body) .cta-section { color: var(--text); } /* Pricing / cards / panels — flip backgrounds that used rgba(255,255,255,low alpha) to something readable on light background */ [data-theme="light"] body:not(.dashboard-body) .pricing-tier, [data-theme="light"] body:not(.dashboard-body) .feature-item, [data-theme="light"] body:not(.dashboard-body) .founder-profile, [data-theme="light"] body:not(.dashboard-body) .cta-panel, [data-theme="light"] body:not(.dashboard-body) .signal-card, [data-theme="light"] body:not(.dashboard-body) .auth-card, [data-theme="light"] body:not(.dashboard-body) .market-ticker-strip, [data-theme="light"] body:not(.dashboard-body) .trade-radar, [data-theme="light"] body:not(.dashboard-body) .hero-radar-stage { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); } /* Featured pricing tier keeps a soft green tint */ [data-theme="light"] body:not(.dashboard-body) .pricing-tier-featured { background: linear-gradient(180deg, rgba(21, 195, 132, 0.06), var(--panel)); border-color: rgba(21, 195, 132, 0.35); } /* Hero waveform / background-decoration text colors */ [data-theme="light"] body:not(.dashboard-body) .hero h1, [data-theme="light"] body:not(.dashboard-body) .section-heading, [data-theme="light"] body:not(.dashboard-body) .pricing-heading, [data-theme="light"] body:not(.dashboard-body) .founder-heading, [data-theme="light"] body:not(.dashboard-body) .cta-heading { color: var(--text); } [data-theme="light"] body:not(.dashboard-body) .hero p, [data-theme="light"] body:not(.dashboard-body) .section-sub, [data-theme="light"] body:not(.dashboard-body) .founder-bio, [data-theme="light"] body:not(.dashboard-body) .cta-sub { color: var(--muted); } /* Footer surface */ [data-theme="light"] body:not(.dashboard-body) .site-footer { background: var(--panel); border-top: 1px solid var(--line); } [data-theme="light"] body:not(.dashboard-body) .footer-nav a, [data-theme="light"] body:not(.dashboard-body) .footer-copy, [data-theme="light"] body:not(.dashboard-body) .footer-statement, [data-theme="light"] body:not(.dashboard-body) .footer-disclaimer { color: var(--muted); } /* Auth-card legibility (login, invite, contact, about) */ [data-theme="light"] body:not(.dashboard-body) .auth-card input, [data-theme="light"] body:not(.dashboard-body) .auth-card textarea { color: var(--text); background: var(--bg); border-color: var(--line-strong); } [data-theme="light"] body:not(.dashboard-body) .auth-card label, [data-theme="light"] body:not(.dashboard-body) .auth-card .auth-sub { color: var(--muted); } /* Reduce the heavy ambient orbs & glows used in dark hero so they don't stain the light background. */ [data-theme="light"] body:not(.dashboard-body) .hero::before, [data-theme="light"] body:not(.dashboard-body) .hero::after, [data-theme="light"] body:not(.dashboard-body) .cta-panel::before, [data-theme="light"] body:not(.dashboard-body) .cta-panel::after { opacity: 0.4; mix-blend-mode: multiply; } /* ================================================================= Session 54 completion - verified light mode for auth/about pages ================================================================= */ [data-theme="light"] body:not(.dashboard-body) .auth-page { background: transparent; } [data-theme="light"] body:not(.dashboard-body) .auth-card { color: var(--text); background: #ffffff; border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(15, 17, 21, 0.10); } [data-theme="light"] body:not(.dashboard-body) .auth-title, [data-theme="light"] body:not(.dashboard-body) .auth-logo .logo-b { color: var(--text); } [data-theme="light"] body:not(.dashboard-body) .auth-logo-sub, [data-theme="light"] body:not(.dashboard-body) .auth-footer-note, [data-theme="light"] body:not(.dashboard-body) .form-label { color: var(--muted); } [data-theme="light"] body:not(.dashboard-body) .form-input, [data-theme="light"] body:not(.dashboard-body) .form-textarea { color: var(--text); background: var(--bg); border-color: var(--line-strong); } [data-theme="light"] body:not(.dashboard-body) .form-input::placeholder, [data-theme="light"] body:not(.dashboard-body) .form-textarea::placeholder { color: var(--dim); } [data-theme="light"] body:not(.dashboard-body) .form-input:focus, [data-theme="light"] body:not(.dashboard-body) .form-textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); } [data-theme="light"] body:not(.dashboard-body) .btn-ghost { color: var(--text); background: #ffffff; border-color: var(--line-strong); } [data-theme="light"] body:not(.dashboard-body) .btn-ghost:hover { color: var(--text); background: var(--green-soft); border-color: var(--green); } [data-theme="light"] body:not(.dashboard-body) .about-page { color: var(--text); } [data-theme="light"] body:not(.dashboard-body) .about-title, [data-theme="light"] body:not(.dashboard-body) .about-content h2, [data-theme="light"] body:not(.dashboard-body) .about-founder-name { color: var(--text); } [data-theme="light"] body:not(.dashboard-body) .about-body, [data-theme="light"] body:not(.dashboard-body) .about-body p, [data-theme="light"] body:not(.dashboard-body) .about-founder-role { color: var(--muted); } [data-theme="light"] body:not(.dashboard-body) .about-photo-frame { background: var(--green-soft); border-color: rgba(21, 195, 132, 0.34); box-shadow: 0 18px 48px rgba(15, 17, 21, 0.08); } /* ===================================================================== Session 62 — Site-wide dark surface styling ===================================================================== */ /* Standalone site pages (about, contact, login, invite) share the same dark surface as the landing hero so the visual flow between sections of the marketing site stays consistent. */ body.site-sub { --panel: #0d1a24; --panel-2: #102230; --panel-3: #162b3a; --line: rgba(222, 238, 230, 0.13); --line-strong: rgba(222, 238, 230, 0.2); --text: #deeee6; --muted: rgba(222, 238, 230, 0.68); --dim: rgba(222, 238, 230, 0.42); min-height: 100vh; background: radial-gradient(circle at 20% 22%, rgba(15, 168, 110, 0.12), transparent 28rem), radial-gradient(circle at 82% 76%, rgba(204, 143, 66, 0.08), transparent 32rem), linear-gradient(135deg, rgba(222, 238, 230, 0.03), transparent 35%, rgba(15, 168, 110, 0.04)), #061116; } body.site-sub::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 20% 22%, rgba(15, 168, 110, 0.12), transparent 28%), radial-gradient(circle at 82% 76%, rgba(204, 143, 66, 0.08), transparent 32%), linear-gradient(135deg, rgba(222, 238, 230, 0.03), transparent 35%, rgba(15, 168, 110, 0.04)); } body.site-sub::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; height: min(38vh, 380px); pointer-events: none; opacity: 0.16; background: linear-gradient(135deg, transparent 0 13%, rgba(222, 238, 230, 0.34) 13.2%, transparent 13.5% 31%, rgba(18, 184, 121, 0.32) 31.2%, transparent 31.55% 50%, rgba(222, 238, 230, 0.22) 50.2%, transparent 50.55%), linear-gradient(180deg, transparent, #061116 88%); } body.site-sub .navbar { background: linear-gradient(180deg, rgba(6, 17, 22, 0.96), rgba(6, 17, 22, 0.42) 72%, transparent); } body.site-sub .navbar.scrolled { background: rgba(6, 17, 22, 0.9); border-bottom-color: rgba(222, 238, 230, 0.08); } body.site-sub .nav-center { background: rgba(13, 26, 36, 0.84); border-color: rgba(222, 238, 230, 0.12); } body.site-sub .auth-card { border: 1px solid rgba(222, 238, 230, 0.12); background: rgba(13, 26, 36, 0.94); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035); } body.site-sub .site-footer { border-top-color: rgba(222, 238, 230, 0.1); background: #061116; } /* Session 64 - align all pre-login pages with the dashboard's dark base. */ body.site-sub { --panel: #0d1a24; --panel-2: #102230; --panel-3: #162131; --line: rgba(207, 224, 255, 0.12); --line-strong: rgba(207, 224, 255, 0.2); --text: #eef4ff; --muted: #9aa8ba; --dim: #5f6d80; background: linear-gradient(rgba(115, 199, 255, 0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(115, 199, 255, 0.026) 1px, transparent 1px), radial-gradient(circle at 15% 8%, rgba(115, 199, 255, 0.10), transparent 30rem), radial-gradient(circle at 84% 2%, rgba(35, 209, 139, 0.075), transparent 28rem), #061116; background-size: 48px 48px, 48px 48px, auto, auto, auto; } body.site-sub::before { background: linear-gradient(115deg, rgba(255, 255, 255, 0.028), transparent 38%), radial-gradient(circle at 50% 100%, rgba(47, 140, 255, 0.08), transparent 34rem); } body.site-sub::after { opacity: 0.1; background: linear-gradient(135deg, transparent 0 13%, rgba(115, 199, 255, 0.34) 13.2%, transparent 13.5% 31%, rgba(35, 209, 139, 0.22) 31.2%, transparent 31.55% 50%, rgba(207, 224, 255, 0.2) 50.2%, transparent 50.55%), linear-gradient(180deg, transparent, #061116 88%); } body.site-sub .navbar { background: linear-gradient(180deg, rgba(6, 17, 22, 0.96), rgba(6, 17, 22, 0.48) 72%, transparent); } body.site-sub .navbar.scrolled { background: rgba(6, 17, 22, 0.9); border-bottom-color: rgba(207, 224, 255, 0.1); } body.site-sub .nav-center { background: rgba(13, 26, 36, 0.84); border-color: rgba(207, 224, 255, 0.12); } body.site-sub .auth-card { border-color: rgba(207, 224, 255, 0.12); background: rgba(13, 26, 36, 0.94); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035); } body.site-sub .about-body p { color: rgba(238, 244, 255, 0.78); } .about-body p { font-size: 1.18rem; line-height: 1.78; margin: 0 0 1.2em; } .about-body p:last-child { margin-bottom: 0; } body.site-sub .site-footer { border-top-color: rgba(207, 224, 255, 0.1); background: #061116; } /* ===================================================================== Session 65 — Mobile navigation drawer Hamburger button + slide-in left drawer. The hamburger is hidden on desktop; the drawer sits in the DOM at all times but is opacity-0 and pointer-events-none until aria-hidden flips to false. ===================================================================== */ .nav-burger { display: none; position: relative; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--text); transition: border-color 180ms ease, background 180ms ease; } .nav-burger:hover, .nav-burger:focus-visible { border-color: var(--green); background: rgba(35, 209, 139, 0.08); outline: none; } .nav-burger span { position: absolute; left: 9px; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease, top 240ms cubic-bezier(0.4, 0, 0.2, 1); } .nav-burger span:nth-child(1) { top: 12px; } .nav-burger span:nth-child(2) { top: 18px; } .nav-burger span:nth-child(3) { top: 24px; } .nav-burger[aria-expanded="true"] span:nth-child(1) { top: 18px; transform: rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { top: 18px; transform: rotate(-45deg); } /* --- Drawer container --- */ .nav-drawer { position: fixed; inset: 0; z-index: 2000; pointer-events: none; visibility: hidden; } .nav-drawer[aria-hidden="false"] { pointer-events: auto; visibility: visible; } .nav-drawer-backdrop { position: absolute; inset: 0; background: rgba(2, 4, 7, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 280ms ease; } .nav-drawer[aria-hidden="false"] .nav-drawer-backdrop { opacity: 1; } .nav-drawer-panel { position: absolute; inset: 0 auto 0 0; width: min(400px, 100vw); height: 100vh; height: 100dvh; box-sizing: border-box; background: #040b14; border-right: 1px solid rgba(238, 244, 255, 0.08); padding: max(16px, env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; transform: translateX(-105%); transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; overscroll-behavior: contain; box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45); } .nav-drawer[aria-hidden="false"] .nav-drawer-panel { transform: translateX(0); } .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; padding-bottom: 14px; border-bottom: 1px solid rgba(238, 244, 255, 0.08); } .nav-drawer-brand { display: inline-flex; align-items: center; text-decoration: none; } .nav-drawer-brand .logo-mark { font-size: 1.35rem; } .nav-drawer-close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); cursor: pointer; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; } .nav-drawer-close:hover, .nav-drawer-close:focus-visible { color: var(--text); border-color: var(--green); background: rgba(35, 209, 139, 0.06); outline: none; } .nav-drawer-link { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 12px; min-height: 62px; padding: 12px 12px; color: var(--text); border: 1px solid transparent; border-radius: 8px; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } button.nav-drawer-link { width: 100%; background: transparent; font: inherit; text-align: left; } /* Keyboard focus only — pointer :hover lives in the hover-capable media query below so touch scrolling can't light rows up. */ .nav-drawer-link:focus-visible { background: rgba(35, 209, 139, 0.07); border-color: rgba(35, 209, 139, 0.13); outline: none; } /* Selected page: minimal and discrete — no boxed chip. The label turns green and a short green accent bar marks the row at its left edge. */ .nav-drawer-link.is-active { position: relative; background: none; border-color: transparent; box-shadow: none; } .nav-drawer-link.is-active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 3px; background: var(--green); } .nav-drawer-link-copy { display: grid; gap: 3px; min-width: 0; } .nav-drawer-link-title { color: var(--text); font-size: 1.06rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .nav-drawer-link.is-active .nav-drawer-link-title { color: var(--green); } .nav-drawer-link-description { color: rgba(154, 168, 186, 0.82); font-size: 0.8rem; font-weight: 500; line-height: 1.4; } .nav-drawer-link-arrow { width: 16px; height: 16px; color: var(--dim); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: color 180ms ease, transform 180ms ease; } .nav-drawer-link:focus-visible .nav-drawer-link-arrow { color: var(--green); transform: translateX(2px); } .nav-drawer-link.is-active .nav-drawer-link-arrow { color: var(--green); } .nav-drawer-resource { display: grid; gap: 2px; } .nav-drawer-resource-toggle { grid-template-columns: minmax(0, 1fr) 18px; } .nav-drawer-resource-chevron { width: 16px; height: 16px; justify-self: center; color: var(--dim); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: color 180ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-drawer-resource-toggle:focus-visible .nav-drawer-resource-chevron, .nav-drawer-resource-toggle.is-active .nav-drawer-resource-chevron { color: var(--green); } .nav-drawer-resource.is-open .nav-drawer-resource-chevron { transform: rotate(180deg); } .nav-drawer-resource-panel { display: grid; gap: 2px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: max-height 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms ease, transform 190ms cubic-bezier(0.16, 1, 0.3, 1); } .nav-drawer-resource.is-open .nav-drawer-resource-panel { max-height: 160px; opacity: 1; transform: translateY(0); } .nav-drawer-resource-link { display: flex; align-items: center; min-height: 42px; margin-left: 18px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; color: rgba(238, 244, 255, 0.78); font-size: 0.9rem; font-weight: 650; line-height: 1.2; transition: color 180ms ease, background 180ms ease, border-color 180ms ease; } .nav-drawer-resource-link:focus-visible { color: var(--text); background: rgba(35, 209, 139, 0.06); border-color: rgba(35, 209, 139, 0.12); outline: none; } /* Selected submenu item: same minimal treatment — green label and a short green accent bar, no boxed chip. */ .nav-drawer-resource-link.is-active { position: relative; color: var(--green); } .nav-drawer-resource-link.is-active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 3px; background: var(--green); } /* Pointer hover feedback for the drawer's links is confined to devices with a real pointer (mouse/trackpad). On touch, `hover: none` means these never apply, so scrolling a thumb across the rows no longer lights them green — they stay simply tappable. Keyboard focus is handled by the :focus-visible rules above. */ @media (hover: hover) and (pointer: fine) { .nav-drawer-link:hover { background: rgba(35, 209, 139, 0.07); border-color: rgba(35, 209, 139, 0.13); } .nav-drawer-link:hover .nav-drawer-link-arrow { color: var(--green); transform: translateX(2px); } .nav-drawer-resource-toggle:hover .nav-drawer-resource-chevron { color: var(--green); } .nav-drawer-resource-link:hover { color: var(--text); background: rgba(35, 209, 139, 0.06); border-color: rgba(35, 209, 139, 0.12); } } .nav-drawer-actions { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; } /* Matches the refined mobile hero CTA (.hero-cta-block .depth-btn-primary): same 12px radius, ~54px height, sentence-case Inter at weight 800 / 0.14em tracking, and the same dimensional green fill — so the drawer's Request Access reads as the same button as the hero's. */ .btn-drawer { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 15px 18px; border-radius: 12px; font-family: 'Inter', system-ui, sans-serif; font-size: 0.98rem; font-weight: 800; letter-spacing: 0.028em; text-transform: none; transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease; } .btn-drawer-primary { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 38%), linear-gradient(135deg, #2ccc91, #16a86f); color: #042514; border: 1px solid rgba(39, 200, 137, 0.3); box-shadow: 0 13px 26px -15px rgba(24, 190, 126, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .btn-drawer-primary:hover, .btn-drawer-primary:focus-visible { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 38%), linear-gradient(135deg, #30d497, #18b074); border-color: rgba(39, 200, 137, 0.38); box-shadow: 0 16px 31px -15px rgba(24, 190, 126, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.18); outline: none; } .nav-drawer-login-line { margin: 0; color: rgba(154, 168, 186, 0.78); font-size: 0.78rem; line-height: 1.4; text-align: center; } .nav-drawer-login-line a { margin-left: 0.2em; color: var(--text); font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(35, 209, 139, 0.45); transition: color 160ms ease, border-color 160ms ease; } .nav-drawer-login-line a:hover, .nav-drawer-login-line a:focus-visible { color: var(--green); border-color: var(--green); outline: none; } .nav-drawer-utility { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 18px; } .nav-drawer-utility a { display: inline-flex; align-items: center; min-height: 40px; color: rgba(154, 168, 186, 0.72); font-size: 0.78rem; font-weight: 600; text-decoration: none; transition: color 160ms ease; } .nav-drawer-utility a:hover, .nav-drawer-utility a:focus-visible { color: var(--green); outline: none; } /* --- Body lock while drawer is open --- */ body.nav-drawer-open { overflow: hidden; } /* Hide the scroll-progress bar (fixed under the navbar, z-index above the drawer) while the menu is open; it returns when the drawer closes. */ body.nav-drawer-open #scroll-progress { display: none; } /* --- Drawer brand --- */ .nav-drawer-brand { display: inline-flex; align-items: center; text-decoration: none; } /* --- Activate hamburger + reflow navbar at the mobile breakpoint --- */ @media (max-width: 860px) { /* The shared drawer occupies the full mobile viewport and scrolls naturally on short browser heights instead of manufacturing empty vertical space. */ .nav-drawer-panel { width: 100vw; /* Match the landing page background exactly (--depth-bg #040b14) with a whisper of the landing's cool steel-blue depth pool at the top — never a green wash, which read off-theme. */ background: radial-gradient(circle at 18% 0%, rgba(72, 112, 158, 0.10), transparent 34%), #040b14; } /* The nav list packs directly under the header divider — a short, intentional offset (~48–64px including the panel gap) instead of the previous center-in-panel behavior, which dropped the first item to the vertical middle and left a dead zone beneath the divider. Generous row gaps keep each item a premium tap target rather than a compressed list line. */ .nav-drawer-links { display: grid; flex: 0 0 auto; align-content: start; gap: 10px; margin-top: clamp(36px, 5vh, 48px); } /* The conversion cluster (CTA + login + footer) travels to the lower portion as ONE connected unit: margin-top:auto absorbs the panel's free space above the group so the button, login line, and utility links stay joined at the base instead of the footer detaching to the very bottom edge. On short viewports the auto margin collapses to 0 and the panel scrolls normally. */ .nav-drawer-actions { margin-top: auto; padding-top: clamp(20px, 4vh, 32px); } /* Mobile footer keeps the four information groups visible without reducing the links to an unreadable utility strip. Fixed bottom padding (was `22px + env(safe-area-inset-bottom)`): the env inset changes with the iOS bottom toolbar and, on the last in-flow element, grew the page height mid-scroll. 34px clears the home indicator on every device and stays put. */ .site-footer { padding: 34px 0 34px; } .footer-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } .footer-intro { gap: 10px; } .footer-wordmark-img { width: 104px; } .footer-statement, .footer-disclaimer { max-width: 42ch; font-size: 0.78rem; line-height: 1.55; } .footer-disclaimer { color: var(--dim); } .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; width: 100%; padding-top: 24px; border-top: 1px solid rgba(207, 224, 255, 0.06); } .footer-nav-group { gap: 8px; } .footer-nav-group h2 { font-size: 0.68rem; } .footer-nav-group a { min-height: 26px; font-size: 0.8rem; } .footer-copy { margin: 0; padding-top: 18px; font-size: 0.68rem; line-height: 1.4; text-align: left; } /* Slim the bar down. Desktop .navbar adds 18px top/bottom and .navbar.scrolled adds 11px; both stack with .nav-inner's padding to ~94px on mobile, which is what was clipping BloqBot. Killing the outer padding here keeps the total ~50px. */ .navbar, .navbar.scrolled { padding: 0; background: rgba(6, 17, 22, 0.94); border-bottom: 1px solid rgba(207, 224, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .nav-burger { display: inline-flex; width: 34px; height: 34px; } /* Center the three bars optically inside the 34x34 button. Inner content area is 32x32 (1px border each side). A 14px-tall group (3 bars × 2px + 2 × 4px gaps) sits at top=9, with bars at 9, 15, 21. The 18px-wide bars sit at left=7 to be horizontally centered ((32 - 18) / 2 = 7). */ .nav-burger span { left: 7px; } .nav-burger span:nth-child(1) { top: 9px; } .nav-burger span:nth-child(2) { top: 15px; } .nav-burger span:nth-child(3) { top: 21px; } .nav-burger[aria-expanded="true"] span:nth-child(1) { top: 15px; } .nav-burger[aria-expanded="true"] span:nth-child(3) { top: 15px; } /* 3-column grid pins the brand to the visual center of the navbar regardless of how wide the burger or action buttons are. The auto middle column hugs the brand, and the two minmax(0,1fr) side columns split the remaining width symmetrically. */ .nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 14px; min-height: 50px; } /* Burger sits at the left edge of its column. */ .nav-burger { justify-self: start; } /* Brand keeps both wordmark + tagline, scaled small and stacked center-aligned so the tagline sits visually under the wordmark. */ .nav-logo { justify-self: center; align-items: center; min-width: 0; gap: 1px; text-align: center; } .nav-logo .logo-mark { font-size: 1.02rem; } .nav-logo .logo-product { display: block; font-size: 0.5rem; letter-spacing: 0.13em; color: rgba(154, 168, 186, 0.78); } /* Hide the desktop center nav — those links live in the drawer now. */ .nav-center { display: none !important; } /* Hide the right-side action buttons (Sign Up + Trader Login, or Dashboard + Log Out when authed) entirely on mobile. The same actions live in the hero section and in the drawer, so showing them in the navbar too is redundant and clutters the top bar. */ .nav-right { display: none !important; } } /* Tighter phones: drop the tagline so the centered brand wordmark keeps clearance from the right action buttons. The drawer still shows BloqBot + tagline. */ @media (max-width: 480px) { .nav-logo .logo-product { display: none; } } @media (max-width: 360px) { .nav-logo .logo-mark { font-size: 0.95rem; } } @media (prefers-reduced-motion: reduce) { .nav-drawer-backdrop, .nav-drawer-panel, .nav-burger span, .nav-drawer-resource-chevron, .nav-drawer-resource-panel { transition-duration: 0.001ms !important; } } /* ===================================================================== Flash alert region (shared) Inline alert styling used by the Flask flash blocks on the login, contact, forgot, and request-access forms. Named .invite-* for historical reasons — the invite-code page it originated on is retired. ===================================================================== */ .invite-alerts { display: flex; flex-direction: column; gap: 8px; } .invite-alert { padding: 12px 14px; border-radius: 10px; font-size: 0.9rem; line-height: 1.45; border: 1px solid transparent; } .invite-alert-error { background: rgba(255, 99, 112, 0.08); border-color: rgba(255, 99, 112, 0.36); color: #ffb0b6; } .invite-alert-success { background: rgba(35, 209, 139, 0.08); border-color: rgba(35, 209, 139, 0.36); color: var(--green); } /* ===================================================================== Session 68 — Legal pages (Privacy Policy, Terms of Service) Long-form text pages. The wrap is capped at ~760px for comfortable line length, generous vertical rhythm, numbered section headings. ===================================================================== */ /* Legal pages follow the landing depth theme, not the blue dashboard base that body.site-sub otherwise paints (Session-64 grid + streaks). Match the about/contact atmosphere: deep near-black navy, a faint GREEN 82px grid, and quiet green + cool blue-gray depth radials — no diagonal signal streaks. */ body.site-sub.legal-page-body { background: #03070d; } body.site-sub.legal-page-body::before { background: linear-gradient(rgba(15, 168, 110, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 168, 110, 0.028) 1px, transparent 1px), radial-gradient(circle at 16% 14%, rgba(35, 209, 139, 0.06), transparent 32rem), radial-gradient(circle at 84% 82%, rgba(70, 108, 150, 0.05), transparent 34rem); background-size: 82px 82px, 82px 82px, auto, auto; } body.site-sub.legal-page-body::after { content: none; } .legal-page { min-height: 100vh; padding: 124px 22px 96px; display: flex; justify-content: center; } .legal-wrap { width: min(760px, 100%); display: grid; gap: 48px; } .legal-header { display: flex; flex-direction: column; gap: 16px; } .legal-kicker { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; } .legal-kicker::before { content: ""; display: block; width: 22px; height: 1px; background: currentColor; } .legal-kicker-red { color: #ff8a8a; } .legal-title { margin: 0; } .legal-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; } .legal-meta strong { color: var(--text); font-weight: 700; } .legal-body { display: flex; flex-direction: column; gap: 26px; } .legal-lead { margin: 0; } .legal-body > p { margin: 0; } .legal-section { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(238, 244, 255, 0.08); } .legal-section:first-of-type { border-top: 0; padding-top: 0; } .legal-section > h2 { margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; } .legal-num { flex-shrink: 0; color: var(--green); font-family: var(--mono); font-size: 0.86em; font-weight: 700; } .legal-section > h3 { margin: 8px 0 0; } .legal-section > p { margin: 0; } .legal-section strong { color: var(--text); font-weight: 700; } .legal-section ul { margin: 4px 0 4px; padding-left: 22px; display: grid; gap: 6px; } .legal-section li { padding-left: 4px; } .legal-contact { padding: 16px 18px; border: 1px solid rgba(238, 244, 255, 0.08); border-radius: 12px; background: rgba(13, 26, 36, 0.5); } .legal-contact strong { color: var(--text); } /* Highlighted disclaimer block at the bottom of Terms */ .legal-divider { border: 0; border-top: 1px solid rgba(238, 244, 255, 0.1); margin: 18px 0 6px; } .legal-disclaimer { border-top: 0; padding: 26px 24px 22px; border: 1px solid rgba(255, 138, 138, 0.28); background: linear-gradient(180deg, rgba(255, 138, 138, 0.05), rgba(255, 138, 138, 0.01)), rgba(13, 26, 36, 0.5); border-radius: 16px; gap: 14px; } .legal-disclaimer-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .legal-disclaimer-head h2 { margin: 0; } .legal-disclaimer-sub { margin: 0; } @media (max-width: 640px) { .legal-page { padding: 96px 18px 64px; } .legal-wrap { gap: 36px; } .legal-body { } .legal-section { gap: 10px; padding-top: 14px; } .legal-section > h2 { gap: 8px; } } /* --- Social sign-in (login page) ------------------------------------------ The login page offers Google OAuth. The button reuses the global .btn / .btn-full sizing and sits on a dark surface that matches the auth card, with Google's full-color logo kept intact for instant recognition. The developer/demo form is collapsed beneath it. */ .oauth-buttons { display: grid; gap: 12px; } .oauth-btn { gap: 12px; min-height: 50px; padding: 13px 18px; font-size: 0.92rem; font-weight: 700; color: var(--text); background: rgba(238, 244, 255, 0.045); border: 1px solid var(--line-strong, rgba(222, 238, 230, 0.16)); } .oauth-btn:hover { background: rgba(238, 244, 255, 0.08); border-color: rgba(35, 209, 139, 0.45); transform: translateY(-1px); } .oauth-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto; } /* Mobile login context belongs beside authentication, not in the public landing flow. It stays unframed so it reads as guidance within the auth card instead of becoming a nested card. */ .auth-mobile-experience { display: none; } @media (max-width: 860px) { .auth-mobile-experience { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 13px; padding-block: 16px; border-block: 1px solid rgba(207, 224, 255, 0.1); text-align: left; } .auth-mobile-experience-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(35, 209, 139, 0.28); border-radius: 50%; color: var(--green); background: rgba(35, 209, 139, 0.055); } .auth-mobile-experience-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .auth-mobile-experience strong { display: block; margin-bottom: 5px; color: var(--text); font-size: 0.86rem; line-height: 1.3; } .auth-mobile-experience p { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; } } /* Collapsed developer/demo sign-in: present for local access before the OAuth apps are configured, but visually de-emphasized so it stays out of the way. */ .auth-dev-login { border-top: 1px solid var(--line, rgba(222, 238, 230, 0.1)); padding-top: 14px; } .auth-dev-login > summary { cursor: pointer; list-style: none; /* Subtle, low-priority text link — must not compete with the Google button. */ color: var(--dim); font-size: 0.74rem; text-align: center; text-decoration: underline; text-underline-offset: 0.2em; } .auth-dev-login > summary:hover { color: var(--muted); } .auth-dev-login > summary::-webkit-details-marker { display: none; } .auth-dev-login[open] > summary { margin-bottom: 16px; }