/* Keep layout as-is; just ensure controls are clickable and visible */ .controls{ position:relative; z-index:100; display:flex; gap:10px; align-items:center } .controls .pill{ cursor:pointer; pointer-events:auto } /* Desktop: hide hamburger; Mobile: show it */ @media (min-width: 981px){ .hamb{ display:none !important; } } @media (max-width: 980px){ header{ position:fixed; top:0; left:0; right:0; z-index:60 } body{ padding-top:64px } } /* ---- Contrast fixes for dark mode (desktop + mobile) ---- */ [data-theme="dark"] .controls .pill, [data-theme="dark"] .controls .pill * { color: #f8fafc !important; /* bright text */ } [data-theme="dark"] .controls .pill { background: rgba(255,255,255,.10) !important; /* subtle translucent bg */ border-color: rgba(255,255,255,.28) !important; /* clearer outline */ } [data-theme="dark"] .controls .pill:hover { filter: brightness(1.08); } /* Ensure the hamburger glyph ☰ is clearly visible */ [data-theme="dark"] .hamb { color: #f8fafc !important; } /* Ensure the theme label text (🌓/☀️/🌙 + text) is bright */ [data-theme="dark"] #themeText { color: #f8fafc !important; } /* --- theme button click safety --- */ .controls{ position: relative; z-index: 1000 !important; } .controls .pill{ pointer-events: auto !important; } #themeBtn, #themeBtn *{ pointer-events: auto !important; } /* ==== Theme palettes driven by [data-theme] on ==== */ html, body { transition: background-color .2s ease, color .2s ease; } /* Light theme vars */ [data-theme="light"]{ --bg:#f8fafc; /* page bg */ --card:#ffffff; /* panels/cards */ --white:#0b1220; /* base text color on light */ --muted:#48556a; /* muted text */ --line:rgba(10,17,32,.12); } /* Dark theme vars (explicit to ensure consistency) */ [data-theme="dark"]{ --bg:#0b1220; --card:#0f1628; --white:#ffffff; --muted:#94a3b8; --line:rgba(255,255,255,.12); } /* Page background + text swap */ [data-theme="light"] body{ color:var(--white); background:linear-gradient(180deg,#f8fafc,#eef2ff 40%,#f8fafc); } [data-theme="dark"] body{ color:var(--white); background:linear-gradient(180deg,#0b1220,#0a1020 40%,#0b1220); } /* Panels/cards */ [data-theme="light"] .panel, [data-theme="light"] .card{ background:linear-gradient(180deg,#ffffff,#f8fafc); border-color:rgba(10,17,32,.08); } [data-theme="dark"] .panel, [data-theme="dark"] .card{ background:linear-gradient(180deg,#0f1628,#0b1220); border-color:rgba(255,255,255,.08); } /* Nav links */ [data-theme="light"] nav#primaryNav a{ color:#334155; } [data-theme="light"] nav#primaryNav a:hover{ color:#0b1220; } [data-theme="dark"] nav#primaryNav a{ color:#cbd5e1; } [data-theme="dark"] nav#primaryNav a:hover{ color:#ffffff; } /* Ghost button */ [data-theme="light"] .ghost{ color:#0b1220; background:rgba(10,17,32,.02); border-color:rgba(10,17,32,.16); } [data-theme="dark"] .ghost{ color:#e2e8f0; background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.16); } /* Feature tiles background tint */ [data-theme="light"] .feat{ background:rgba(10,17,32,.03); border-color:rgba(10,17,32,.10); } [data-theme="dark"] .feat{ background:rgba(255,255,255,.02); border-color:rgba(255,255,255,.06); } /* Controls (Theme pill + Hamburger) contrast */ [data-theme="light"] .controls .pill{ color:#0b1220; background:rgba(10,17,32,.04); border-color:rgba(10,17,32,.12); } [data-theme="dark"] .controls .pill{ color:#f8fafc; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); } [data-theme="light"] .hamb { color:#0b1220; } [data-theme="dark"] .hamb { color:#f8fafc; } [data-theme="light"] #themeText, [data-theme="dark"] #themeText { color:inherit; } /* ==== Pure white light theme ==== */ [data-theme="light"] body{ background:#ffffff !important; color:#0b1220; /* solid ink on white */ } [data-theme="light"] header{ background:#ffffff !important; border-bottom:1px solid rgba(10,17,32,.08) !important; } /* Panels/cards on white */ [data-theme="light"] .panel, [data-theme="light"] .card{ background:#ffffff !important; border-color:rgba(10,17,32,.08) !important; box-shadow:none !important; } /* Ghost buttons + feature tiles on white */ [data-theme="light"] .ghost{ background:rgba(10,17,32,.03) !important; border-color:rgba(10,17,32,.12) !important; color:#0b1220 !important; } [data-theme="light"] .feat{ background:rgba(10,17,32,.03) !important; border-color:rgba(10,17,32,.10) !important; } /* ========== Contrast fixes on LIGHT theme only ========== */ [data-theme="light"]{ --ink:#0b1220; /* primary text on white */ --muted:#475569; /* subdued body copy */ } /* Base text & section headings */ [data-theme="light"] body{ color:var(--ink) !important; } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3{ color:#0b1220 !important; } /* Hero eyebrow + subcopy + muted paragraphs */ [data-theme="light"] .eyebrow{ color:#334155 !important; } /* darker than before */ [data-theme="light"] .sub, [data-theme="light"] .muted{ color:var(--muted) !important; } /* Nav links on white */ [data-theme="light"] nav#primaryNav a{ color:#0f172a !important; } [data-theme="light"] nav#primaryNav a:hover{ color:#111827 !important; } /* Ghost/secondary button on white */ [data-theme="light"] .ghost{ color:#0b1220 !important; background:rgba(10,17,32,.03) !important; border-color:rgba(10,17,32,.14) !important; } /* CTA / Primary buttons (purple) — force bright text */ .cta, .btn{ color:#ffffff !important; text-shadow:0 1px 0 rgba(0,0,0,.08); } .cta:hover, .btn:hover{ filter:brightness(1.02); } /* Pills (theme, hamburger) on light */ [data-theme="light"] .controls .pill{ color:#0b1220 !important; background:rgba(10,17,32,.04) !important; border-color:rgba(10,17,32,.12) !important; } /* Feature tiles on white (slightly stronger contrast) */ [data-theme="light"] .feat{ background:rgba(10,17,32,.03) !important; border-color:rgba(10,17,32,.12) !important; } /* Header menu "Get Started" (nav) — white text only here */ header #primaryNav .cta, header nav#primaryNav .cta{ color:#fff !important; text-shadow:0 1px 0 rgba(0,0,0,.08); } header #primaryNav .cta:visited{ color:#fff !important; } /* ---- Mobile menu: light theme styling ---- */ [data-theme="light"] #mobileNav{ /* lighter backdrop on light mode */ background: rgba(0,0,0,.18) !important; } [data-theme="light"] #mobileNav .sheet{ background: #ffffff !important; border-bottom: 1px solid rgba(10,17,32,.10) !important; box-shadow: 0 10px 30px rgba(2,6,23,.08) !important; color: #0b1220 !important; } [data-theme="light"] #mobileNav a{ color: #0b1220 !important; } [data-theme="light"] #mobileNav a:hover{ color: #111827 !important; } /* Keep the mobile CTA readable on white */ [data-theme="light"] #mobileNav a.cta{ background: var(--brand) !important; color: #fff !important; border: 0 !important; } /* ====== FAQ (desktop & mobile, light/dark aware) ====== */ .faq{ display:grid; gap:14px; margin-top:16px; } .faq details{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; transition:box-shadow .18s ease, border-color .18s ease, background .18s ease; } .faq details:hover{ border-color:rgba(124,58,237,.35); box-shadow:0 8px 28px rgba(124,58,237,.08); } .faq details[open]{ border-color:rgba(124,58,237,.50); box-shadow:0 12px 36px rgba(124,58,237,.12); } .faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; font-weight:800; color:var(--white); font-size:18px; outline:none; } .faq summary::-webkit-details-marker{ display:none } .faq .chev{ margin-left:auto; width:22px; height:22px; border-radius:50%; background:rgba(124,58,237,.18); position:relative; flex:0 0 22px; } .faq .chev::before{ content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; border-right:2px solid #7c3aed; border-bottom:2px solid #7c3aed; transform:translate(-50%,-60%) rotate(45deg); transition:transform .18s ease; } .faq details[open] .chev::before{ transform:translate(-50%,-40%) rotate(-135deg); } .faq .a{ color:var(--muted); font-size:16px; line-height:1.6; padding:10px 2px 2px 2px; animation:faqFade .18s ease; } @keyframes faqFade{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} } @media (max-width:980px){ .faq summary{ font-size:17px } .faq .a{ font-size:15px } } /* Header nav "Log in" → ghost-style like "See Pricing" */ header nav#primaryNav a[href="/static/site/login.html"]{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; font-weight:700; border:1px solid var(--line); background:transparent; transition:filter .15s ease, background-color .15s ease, border-color .15s ease; } /* Light & dark theming to match ghost button */ [data-theme="light"] header nav#primaryNav a[href="/static/site/login.html"]{ color:#0b1220; background:rgba(10,17,32,.03); border-color:rgba(10,17,32,.12); } [data-theme="dark"] header nav#primaryNav a[href="/static/site/login.html"]{ color:#e2e8f0; background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.16); } /* Hover/focus */ header nav#primaryNav a[href="/static/site/login.html"]:hover{ filter:brightness(1.04); } header nav#primaryNav a[href="/static/site/login.html"]:focus{ outline:2px solid rgba(124,58,237,.55); outline-offset:2px; } header nav#primaryNav a[href="/static/site/login.html"]:visited{ color:inherit; } /* Bring "Get Started" closer to "Log in" (desktop only) */ @media (min-width:981px){ header nav#primaryNav .cta{ margin-left:-10px; /* tighten spacing by ~10px; tweak to taste */ } } /* Eyebrow pill visibility on both themes */ .eyebrow{ border-radius:999px; } /* Light theme: subtle gray chip on white */ [data-theme="light"] .eyebrow{ background: rgba(10,17,32,.05) !important; border: 1px solid rgba(10,17,32,.12) !important; color: #334155 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.65); } /* Dark theme: keep a soft tint and readable text */ [data-theme="dark"] .eyebrow{ background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #cbd5e1 !important; } /* Stronger meta line on LIGHT theme (the bullets row under Performance) */ [data-theme="light"] #performance [style*="color:#cbd5e1"], [data-theme="light"] #performance [style*="color: #cbd5e1"]{ color:#475569 !important; /* slate-600 */ font-weight:600; /* a touch bolder for readability */ } /* ===== Desktop nav: visually separate actions from menu ===== */ @media (min-width:981px){ header nav#primaryNav{ display:flex; align-items:center; column-gap:28px; } /* Add a subtle divider before "Log in" and give it breathing room */ header nav#primaryNav a[href="/static/site/login.html"]{ position:relative; /* for the divider */ margin-left:22px; /* space from the last menu item (FAQs) */ } header nav#primaryNav a[href="/static/site/login.html"]::before{ content:""; position:absolute; left:-14px; top:50%; width:1px; height:24px; transform:translateY(-50%); background:var(--line); border-radius:1px; } /* Keep Log in ↔ Get Started tight as a pair */ header nav#primaryNav .cta{ margin-left:8px; } } /* Smooth, consistent presentation for hero and performance art */ .hero .panel img, #performance .panel img{ display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 18px 40px rgba(2,6,23,.12); }