/* 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) .invite-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 { 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, [data-theme="light"] body:not(.dashboard-body) .invite-success h2 { 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) .invite-success p, [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: #081820; 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: 58px; padding: 9px 10px; color: var(--text); border: 1px solid transparent; border-radius: 8px; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .nav-drawer-link:hover, .nav-drawer-link:focus-visible { background: rgba(35, 209, 139, 0.07); border-color: rgba(35, 209, 139, 0.13); outline: none; } .nav-drawer-link-copy { display: grid; gap: 2px; min-width: 0; } .nav-drawer-link-title { color: var(--text); font-size: 0.96rem; font-weight: 700; line-height: 1.25; } .nav-drawer-link-description { color: rgba(154, 168, 186, 0.78); font-size: 0.76rem; font-weight: 500; line-height: 1.35; } .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:hover .nav-drawer-link-arrow, .nav-drawer-link:focus-visible .nav-drawer-link-arrow { color: var(--green); transform: translateX(2px); } .nav-drawer-actions { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; } .btn-drawer { display: inline-flex; align-items: center; justify-content: center; padding: 14px 18px; border-radius: 10px; font-family: var(--mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms ease; } .btn-drawer-primary { background: var(--green); color: #042514; border: 1px solid var(--green); } .btn-drawer-primary:hover, .btn-drawer-primary:focus-visible { background: #18e296; border-color: #18e296; 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.68); font-size: 0.73rem; 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; background: radial-gradient(circle at 18% 0%, rgba(35, 209, 139, 0.08), transparent 32%), #081820; } .nav-drawer-links { display: grid; gap: 3px; margin-top: 0; } /* Mobile footer: intentional and compact. Brand stacks vertically (logo, then muted copyright directly beneath it); links sit in a left-aligned 2-column grid below. Everything left-aligned, tight spacing, subtle divider. */ .site-footer { padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px)); } .footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .footer-brand { order: 1; } .footer-wordmark-img { width: 92px; } .footer-copy { order: 2; margin: 7px 0 0; padding: 0; border-top: 0; font-size: 0.7rem; line-height: 1.3; text-align: left; color: var(--dim); } .footer-copy-rights { display: none; } .footer-nav { order: 3; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; width: 100%; margin-top: 12px; padding-top: 11px; /* Subtle divider, not the heavy line the desktop layout uses. */ border-top: 1px solid rgba(207, 224, 255, 0.06); } /* Read the columns as About | Privacy / FAQs | Terms / Contact Us | Trader Login while leaving the desktop DOM order untouched (swaps Terms <-> FAQs). */ .footer-nav a:nth-child(3) { order: 4; } .footer-nav a:nth-child(4) { order: 3; } .footer-nav a { display: block; min-width: 0; min-height: 34px; padding: 6px 0; font-size: 0.82rem; line-height: 1.25; 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 { transition-duration: 0.001ms !important; } } /* ===================================================================== Session 67 — Invite-code page The /invite route is now a single-field "enter your code" form, not a request form. Styles below give the card a slightly wider, more formal look + the inline alert region used by Flask flashes. ===================================================================== */ .invite-card { width: min(520px, 100%); gap: 22px; } .invite-badge { align-self: center; display: inline-flex; align-items: center; padding: 5px 12px; margin-top: 4px; border-radius: 999px; background: rgba(35, 209, 139, 0.1); color: var(--green); font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .invite-intro { margin: 0 0 6px; text-align: center; font-size: 0.96rem; line-height: 1.6; color: var(--muted); } .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); } .invite-form { display: flex; flex-direction: column; gap: 14px; } /* Monospace, generously spaced code field — feels like entering a real access code instead of a normal text input. */ .invite-code-input { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; letter-spacing: 0.32em; text-align: center; text-transform: uppercase; padding: 18px 16px; } .invite-code-input::placeholder { color: rgba(154, 168, 186, 0.34); letter-spacing: 0.32em; } .form-hint { margin: 6px 2px 0; font-size: 0.78rem; color: var(--dim); } @media (max-width: 520px) { .invite-code-input { font-size: 1.18rem; letter-spacing: 0.26em; padding: 16px 14px; } .invite-intro { font-size: 0.92rem; } } /* ===================================================================== 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-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; color: var(--green); font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .legal-kicker::before { content: ""; display: block; width: 22px; height: 1px; background: currentColor; } .legal-kicker-red { color: #ff8a8a; } .legal-title { margin: 0; font-family: var(--head); font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: var(--text); } .legal-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); } .legal-meta strong { color: var(--text); font-weight: 700; } .legal-body { display: flex; flex-direction: column; gap: 26px; color: rgba(238, 244, 255, 0.78); font-size: 1rem; line-height: 1.72; } .legal-lead { font-size: 1.06rem; line-height: 1.72; color: rgba(238, 244, 255, 0.88); 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; font-family: var(--head); font-size: clamp(1.18rem, 2.4vw, 1.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.25; color: var(--text); 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; font-family: var(--head); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .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; line-height: 1.62; } .legal-contact { padding: 16px 18px; border: 1px solid rgba(238, 244, 255, 0.08); border-radius: 12px; background: rgba(13, 26, 36, 0.5); font-size: 0.96rem; line-height: 1.7; } .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; font-family: var(--head); font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 800; letter-spacing: -0.025em; color: var(--text); } .legal-disclaimer-sub { margin: 0; font-size: 0.86rem; color: rgba(238, 244, 255, 0.6); } @media (max-width: 640px) { .legal-page { padding: 96px 18px 64px; } .legal-wrap { gap: 36px; } .legal-body { font-size: 0.96rem; line-height: 1.7; } .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; }