@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap'); /* ============================================================ ProfylPages — THEME LAYER Re-maps the shared design tokens to the three design libraries. Apply by setting a class on : t-biotm | t-pulse | t-cognix. (Inter & Fraunces are already loaded by pp-shared.css.) ============================================================ */ /* ---------- token themes (override the Minimal :root) ---------- */ html.t-biotm{ --bg:#fbfbfa; --paper:#ffffff; --ink:#171717; --ink-soft:#525252; --muted:#9ca3af; --line:#ececef; --line-2:#e3e3e7; --indigo:#4d7c0f; --indigo-soft:#ecfccb; --indigo-ink:#1a2e05; --amber:#b7860f; --amber-soft:#fbf2dd; --wa:#1faa53; --wa-soft:#ecfccb; --wa-ink:#3f6212; --radius:20px; --display:"Geist",-apple-system,BlinkMacSystemFont,sans-serif; --sans:"Geist",-apple-system,BlinkMacSystemFont,sans-serif; --shadow:0 10px 30px -12px rgba(23,23,23,.12),0 2px 6px rgba(23,23,23,.04); --shadow-sm:0 2px 6px rgba(23,23,23,.04); } html.t-pulse{ --bg:#0a0e18; --paper:#111726; --ink:#f1f4fa; --ink-soft:#a9b3c6; --muted:#6e798f; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.055); --indigo:#38bdf8; --indigo-soft:rgba(56,189,248,.14); --indigo-ink:#7dd3fc; --amber:#fbbf24; --amber-soft:rgba(251,191,36,.12); --wa:#25d366; --wa-soft:rgba(52,211,153,.14); --wa-ink:#bff3df; --radius:18px; --display:"Plus Jakarta Sans",-apple-system,sans-serif; --sans:"Inter",-apple-system,sans-serif; --shadow:0 24px 60px -28px rgba(0,0,0,.7); --shadow-sm:0 1px 2px rgba(0,0,0,.4); } html.t-cognix{ --bg:#060409; --paper:#16131f; --ink:#f1f2f8; --ink-soft:#a3a7bd; --muted:#5f6377; --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.07); --indigo:#3ed0ef; --indigo-soft:rgba(62,208,239,.12); --indigo-ink:#bfeffb; --amber:#ffb3da; --amber-soft:rgba(255,58,160,.12); --wa:#25d366; --wa-soft:rgba(37,211,102,.14); --wa-ink:#a8f3c8; --radius:18px; --display:"Inter",-apple-system,sans-serif; --sans:"Inter",-apple-system,sans-serif; --shadow:0 30px 70px -34px rgba(0,0,0,.9); --shadow-sm:0 1px 2px rgba(0,0,0,.5); } /* ---------- theme switcher control (in the nav) ---------- */ .themesel{font-family:inherit;font-size:12.5px;font-weight:650;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:6px 9px;cursor:pointer;margin-left:8px} .themesel:hover{border-color:var(--muted)} /* ---------- brand mark per theme ---------- */ html.t-biotm .brand .mark{background:linear-gradient(140deg,#a3e635,#d9ff50);color:#1a2e05} html.t-pulse .brand .mark{background:linear-gradient(160deg,#38bdf8,#2563eb)} html.t-cognix .brand .mark{background:linear-gradient(150deg,#ff3aa0,#3ed0ef)} /* ---------- nav bar background per theme ---------- */ html.t-biotm .nav{background:rgba(251,251,250,.82)} html.t-pulse .nav{background:rgba(10,14,24,.82)} html.t-cognix .nav{background:rgba(6,4,9,.82)} /* ---------- primary button signature per theme ---------- */ html.t-biotm .btn.primary{background:#171717;border-color:#171717;color:#fff;box-shadow:0 10px 26px -10px rgba(23,23,23,.5)} html.t-biotm .btn.primary:hover{background:#000} html.t-pulse .btn.primary{background:linear-gradient(180deg,#3b82f6,#2563eb);border-color:transparent;color:#fff;box-shadow:0 14px 32px -12px rgba(37,99,235,.7)} html.t-cognix .btn.primary{background:rgba(62,208,239,.1);border-color:rgba(62,208,239,.5);color:#bfeffb;box-shadow:0 0 22px -3px rgba(62,208,239,.55)} html.t-cognix .btn.primary:hover{background:rgba(62,208,239,.16)} /* ============================================================ DARK THEMES (pulse + cognix) — shared overrides The app's per-page CSS hardcodes many light surfaces (#fff, #f3f3f8…); re-map the common ones to token surfaces so dark themes hold together. ============================================================ */ html.t-pulse, html.t-cognix{ color-scheme:dark; } /* default (non-primary) buttons on dark */ html.t-pulse .btn, html.t-cognix .btn{ background:rgba(255,255,255,.05); color:var(--ink); border-color:var(--line) } html.t-pulse .btn:hover, html.t-cognix .btn:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2) } html.t-pulse .btn.wa, html.t-cognix .btn.wa{ background:var(--wa); color:#04240f; border-color:var(--wa) } html.t-pulse .btn.dark, html.t-cognix .btn.dark{ background:#fff; color:#0a0e18; border-color:#fff } /* form controls (pages hardcode white inputs) */ html.t-pulse input, html.t-pulse select, html.t-pulse textarea, html.t-cognix input, html.t-cognix select, html.t-cognix textarea{ background:rgba(255,255,255,.05)!important; color:var(--ink); border-color:var(--line)!important } html.t-pulse input::placeholder, html.t-cognix input::placeholder{ color:var(--muted) } /* ---- panels: each dark library's SIGNATURE surface ---- */ /* Pulse — glassmorphism (translucent + blur) */ html.t-pulse .card, html.t-pulse .ncard, html.t-pulse .pcard, html.t-pulse .scard, html.t-pulse .qitem, html.t-pulse .aibar, html.t-pulse .lead, html.t-pulse .demo-card, html.t-pulse .litem, html.t-pulse .bare, html.t-pulse .not, html.t-pulse .yes, html.t-pulse .pickchip, html.t-pulse .ogcard, html.t-pulse .ledger, html.t-pulse .step, html.t-pulse .field{ background:rgba(255,255,255,.04)!important; border-color:rgba(255,255,255,.09)!important; backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 24px 60px -28px rgba(0,0,0,.7)!important } /* Cognix — solid gradient panel + inset top highlight + deep shadow */ html.t-cognix .card, html.t-cognix .ncard, html.t-cognix .pcard, html.t-cognix .scard, html.t-cognix .qitem, html.t-cognix .aibar, html.t-cognix .lead, html.t-cognix .demo-card, html.t-cognix .litem, html.t-cognix .bare, html.t-cognix .not, html.t-cognix .yes, html.t-cognix .pickchip, html.t-cognix .ogcard, html.t-cognix .ledger, html.t-cognix .step, html.t-cognix .field{ background:linear-gradient(180deg,#16131f,#0f0d17)!important; border-color:rgba(255,255,255,.11)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 50px -28px rgba(0,0,0,.95)!important } /* neutral grey surfaces (#f3f3f8 / #fafafc / #f7f7fb …) → faint translucent */ html.t-pulse .col, html.t-cognix .col, html.t-pulse .intent, html.t-cognix .intent, html.t-pulse .behind, html.t-cognix .behind, html.t-pulse .bar, html.t-cognix .bar, html.t-pulse .sig.exp, html.t-cognix .sig.exp, html.t-pulse .tag, html.t-cognix .tag, html.t-pulse .linkbox input, html.t-cognix .linkbox input{ background:rgba(255,255,255,.045)!important; border-color:var(--line)!important; color:var(--ink-soft) } /* light pastel type-pills → neutral on dark */ html.t-pulse .typepill, html.t-cognix .typepill{ background:rgba(255,255,255,.08); color:var(--ink-soft) } /* tinted disclosure cards → dark translucent */ html.t-pulse .info, html.t-cognix .info{ background:rgba(56,189,248,.1); color:#bcd6f5; border-color:rgba(56,189,248,.3) } html.t-pulse .charge, html.t-cognix .charge{ background:rgba(251,191,36,.1); color:#f0d9a0; border-color:rgba(251,191,36,.3) } /* verify / clean / vouch chips keep green but adjust borders for dark */ html.t-pulse .verify, html.t-cognix .verify, html.t-pulse .clean, html.t-cognix .clean, html.t-pulse .v, html.t-cognix .v{ border-color:rgba(52,211,153,.34) } /* toggle switch track */ html.t-pulse .sw, html.t-cognix .sw{ background:rgba(255,255,255,.16) } /* small light boxes (console readiness checklist, etc.) */ html.t-pulse .chk .b.no, html.t-cognix .chk .b.no{ background:rgba(255,255,255,.08); color:var(--muted) } html.t-pulse .bar, html.t-cognix .bar{ background:rgba(255,255,255,.08) } /* ---------- Bio.tm specifics ---------- */ html.t-biotm .navlinks a.on{ color:#3f6212; background:#ecfccb } html.t-biotm .verify{ border-color:#d7f2a8 } /* Bio.tm is LIGHT — recolor the app's dark headers/covers/banners to a lime wash with dark ink */ html.t-biotm .cover{ background:linear-gradient(168deg,#f7fee7,#ecfccb 72%,#e3f7b3)!important; color:#1a2e05 } html.t-biotm .cover .cred{ color:#3f6212; opacity:1 } html.t-biotm .cover h1 small{ color:#3f6212 } html.t-biotm .verify.onhero{ background:#fff; color:#3f6212; border-color:#d7f2a8 } /* trust-core chips (U-core): the default white-on-dark styling is invisible on Bio.tm's light cover/hero — render them as clear white pills with dark-green ink, like the ✓ Verified pill. */ html.t-biotm .cover .tcore, html.t-biotm #trustCore .htag{ background:#fff; color:#3f6212; border-color:#cfeaa3; opacity:1 } html.t-biotm .refstrip{ background:#ecfccb!important; color:#3f6212 } html.t-biotm .refstrip b{ color:#1a2e05 } html.t-biotm .endorse{ background:linear-gradient(135deg,#ecfccb,#f7fee7)!important; color:#1a2e05 } html.t-biotm .endorse h4{ color:#1a2e05 } html.t-biotm .endorse p{ color:#3f6212 } /* the dark MFD-console "log in as" select etc. already token-driven; lime the live pill */ html.t-biotm .pill, html.t-biotm .vis{ background:#ecfccb; color:#3f6212 } /* ---------- home hero per theme ---------- */ html.t-biotm .hero{ background:linear-gradient(180deg,#f7fee7,#ecfccb)!important; color:#1a2e05 } html.t-biotm .hero p{ color:#3f6212 } html.t-biotm .hero .eyebrow{ color:#4d7c0f } /* platform-scale line: default is light-on-dark — recolor to dark-green ink on the lime hero */ html.t-biotm .scaleline{ color:#4d7c0f } html.t-biotm .scaleline b{ color:#1a2e05 } html.t-biotm .hero .htag{ background:rgba(26,46,5,.06); border-color:rgba(26,46,5,.14); color:#3f6212 } html.t-pulse .hero{ background:radial-gradient(120% 85% at 50% -12%,#14294e,#0a0e18 62%)!important } html.t-cognix .hero{ background:radial-gradient(100% 85% at 50% -12%,#1c1030,#060409 64%)!important } /* ============================================================ AMBIENT PAGE BACKGROUNDS — each library's signature wash (fixed to the viewport so the whole app sits in its world) ============================================================ */ html.t-biotm body{ background:radial-gradient(120% 55% at 50% -8%, #f0ffc2, #f7fee7 30%, rgba(251,251,250,0) 64%) no-repeat, var(--bg); background-attachment:fixed } html.t-pulse body{ background: radial-gradient(120% 60% at 50% -6%, rgba(37,99,235,.20), transparent 44%), radial-gradient(70% 45% at 86% 2%, rgba(56,189,248,.14), transparent 46%), radial-gradient(90% 55% at 10% 2%, rgba(59,130,246,.10), transparent 42%), var(--bg); background-attachment:fixed } html.t-cognix body{ background: radial-gradient(72% 55% at 0% 30%, rgba(255,58,160,.16), transparent 60%), radial-gradient(72% 55% at 100% 30%, rgba(62,208,239,.16), transparent 60%), radial-gradient(60% 30% at 50% -6%, rgba(60,70,150,.14), transparent 60%), radial-gradient(90% 50% at 50% 116%, rgba(40,30,90,.22), transparent 64%), var(--bg); background-attachment:fixed } /* ---- profile cover → theme wash on dark themes ---- */ html.t-pulse .cover{ background:radial-gradient(120% 95% at 50% -25%, #1c3f73, #0a0e18 72%)!important } html.t-cognix .cover{ background: radial-gradient(85% 95% at 0% 0%, rgba(255,58,160,.34), transparent 55%), radial-gradient(85% 95% at 100% 0%, rgba(62,208,239,.34), transparent 55%), #0a0814 !important } /* ---- verified badge → theme accent + glow ---- */ html.t-cognix .verify{ background:rgba(62,208,239,.1); color:#bfeffb; border-color:rgba(62,208,239,.45); box-shadow:0 0 16px -3px rgba(62,208,239,.5) } html.t-pulse .verify{ box-shadow:0 0 14px rgba(52,211,153,.3) } /* eyebrow / section accents pick up a soft glow on Cognix */ html.t-cognix .eyebrow{ text-shadow:0 0 18px rgba(62,208,239,.5) }