/* ============================================================
CircleTrust · "Sunbeam" skin (jovial / bright / warm)
------------------------------------------------------------
Additive override layer. Loaded AFTER concept-bpp.css so it
wins. Re-colors + re-shapes the app via CSS variables and a
handful of component tweaks. Fully reversible: remove the
line in index.html to restore the
previous look. Does not alter any HTML/JS/data.
============================================================ */
/* ---- Fonts (Poppins for headings, Nunito for UI/body) ---- */
:root{
--sb-display:'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif;
--sb-body:'Nunito', 'Inter', ui-sans-serif, system-ui, sans-serif;
/* jovial palette */
--sb-coral:#FF6B5C; --sb-coral-deep:#F5476B;
--sb-tangerine:#FF9A3D; --sb-sun:#FFCB2E;
--sb-mint:#20C9A0; --sb-sky:#37BDF8; --sb-grape:#9B6BFF;
--sb-cream:#FFF7EC; --sb-cream-2:#FFF0DE;
--sb-ink:#2E2740; --sb-ink-2:#6E6683; --sb-line:#F0E7DA;
--grad-sunrise:linear-gradient(135deg,#FF9A3D 0%,#FF6B5C 55%,#FF74BE 100%);
--grad-mint:linear-gradient(135deg,#3AE0B0,#12B98E);
--grad-sun:linear-gradient(135deg,#FFD84D,#FF9A3D);
--grad-grape:linear-gradient(135deg,#B58CFF,#8A5BFF);
}
/* ---- Re-map the base app tokens (light theme is active) ---- */
html[data-theme="light"]{
--bg:#FFF7EC; --bg-soft:#FFF0DE;
--panel:rgba(255,255,255,.96); --panel-solid:#FFFFFF; --panel-2:#FFFDF9;
--text:#2E2740; --muted:#6E6683;
--line:rgba(120,90,60,.14);
--primary:#FF6B5C; --primary-strong:#F5476B; --primary-action:#FF6B5C;
--primary-soft:rgba(255,107,92,.14);
--success:#20C9A0; --success-soft:rgba(32,201,160,.14);
--warning:#FF9A3D; --warning-soft:rgba(255,154,61,.15);
--danger:#FF6B8A; --danger-soft:rgba(255,107,138,.14);
--food:#FF9A3D; --technology:#37BDF8; --home:#20C9A0; --health:#FF74BE; --education:#9B6BFF; --work:#FFCB2E;
--shadow:0 16px 38px rgba(255,140,90,.16);
--radius-sm:14px; --radius:20px; --radius-lg:26px;
}
/* ---- Also re-map concept-bpp's own palette so its !important
rules across Home/Discover/Vault/Me recolor too ---- */
:root{
--ct-indigo:#FF6B5C; --ct-indigo-soft:#FFE9E5;
--ct-coral:#FF9A3D; --ct-coral-soft:#FFF1E4;
--ct-emerald:#20C9A0;--ct-emerald-soft:#DBF7F0;
--ct-amber:#FFCB2E; --ct-navy:#2E2740;
--ct-self:#F2ECFF; --ct-ink:#2E2740; --ct-secondary:#5B5470;
--ct-muted:#9A93AD; --ct-line:#F0E7DA; --ct-surface:#FFFFFF;
}
/* ---- Warm, sunny canvas ---- */
html[data-theme="light"] body{
background:
radial-gradient(900px 600px at 6% 2%, #FFE7BE, transparent 55%),
radial-gradient(820px 620px at 98% 6%, #FFD9E6, transparent 55%),
radial-gradient(900px 760px at 82% 100%, #D9F6EC, transparent 55%),
linear-gradient(180deg, #FDEFDB, #F7E9F0) !important;
color:var(--ct-ink) !important;
font-family:var(--sb-body) !important;
}
html[data-theme="light"] button,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .button{ font-family:var(--sb-body) !important; }
/* ---- Friendly display type on headings ---- */
html[data-theme="light"] :is(
h1, h2, h3, h4, #profileHeading,
.page-title, .browse-hero h1, .home-hero h1, .greeting h1,
.section-head h2, .ct-bpp-home-head h1, .onboarding-step h2,
.business-card-body h3, .hero-title, .welcome-title
){
font-family:var(--sb-display) !important;
letter-spacing:-.02em;
}
/* ---- Primary buttons → coral sunrise gradient, pill ---- */
html[data-theme="light"] .button-primary,
.ct-bpp-vault-empty button,
.showcase-preview-primary,
.referral-pilot-primary{
background:var(--grad-sunrise) !important;
color:#fff !important;
border:0 !important;
border-radius:99px !important;
box-shadow:0 12px 26px rgba(255,107,92,.4) !important;
}
html[data-theme="light"] .button{ border-radius:99px !important; }
/* ---- Cards, sections, panels → rounder + warm shadow ---- */
html[data-theme="light"] .section,
html[data-theme="light"] .post-card,
html[data-theme="light"] .browse-card-row > .post-card,
html[data-theme="light"] .showcase-talent-card,
html[data-theme="light"] .ct-bpp-vault-card,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .settings-list,
html[data-theme="light"] .onboarding-choice-card,
html[data-theme="light"] .onboarding-category-option{
border-radius:22px !important;
box-shadow:0 12px 30px rgba(255,140,90,.12) !important;
}
/* ---- Header: warm & light ---- */
html[data-theme="light"] .app-header{
background:rgba(255,251,244,.92) !important;
border-bottom:1px solid var(--ct-line) !important;
}
html[data-theme="light"] .header-brand .brand-mark{
background:var(--grad-sunrise) !important;
box-shadow:0 8px 18px rgba(255,107,92,.4) !important;
}
html[data-theme="light"] .icon-button{
background:#fff !important; color:var(--ct-ink) !important;
border:1px solid var(--ct-line) !important; border-radius:14px !important;
box-shadow:0 4px 12px rgba(255,140,90,.1) !important;
}
/* ---- Bottom nav: white floating pill, coral active ---- */
html[data-theme="light"] .bottom-nav{
background:#fff !important;
border:1px solid rgba(255,235,215,.9) !important;
box-shadow:0 16px 40px rgba(150,90,60,.2) !important;
border-radius:24px !important;
}
html[data-theme="light"] .nav-button.active{
background:rgba(255,107,92,.12) !important;
color:var(--sb-coral) !important;
}
html[data-theme="light"] .nav-create{
background:var(--grad-sunrise) !important;
color:#fff !important;
box-shadow:0 12px 26px rgba(255,107,92,.5) !important;
}
/* ---- Trust tiers (concept-bpp badges) ---- */
.ct-trust-trusted, .showcase-tier-trusted{ background:rgba(32,201,160,.16) !important; color:#0E8F6E !important; }
.ct-trust-backed, .showcase-tier-backed { background:rgba(155,107,255,.16) !important; color:#7A4BE0 !important; }
/* ---- Circle switcher & chips: warm, rounded ---- */
html[data-theme="light"] .circle-switcher{
background:#fff !important; border:1px solid var(--ct-line) !important;
border-radius:14px !important; box-shadow:0 4px 12px rgba(255,140,90,.1) !important;
}
html[data-theme="light"] .chip{ border-radius:99px !important; }
html[data-theme="light"] .chip.active,
html[data-theme="light"] .browse-primary-tabs .chip.active{
background:var(--grad-sunrise) !important; color:#fff !important; border-color:transparent !important;
}
/* ---- Onboarding / welcome gate warmth ---- */
html[data-theme="light"] .onboarding-icon,
html[data-theme="light"] .brand-mark{ background:var(--grad-sunrise) !important; }
/* ---- Sports pulse card: keep depth but warm plum ---- */
html[data-theme="light"] .ct-bpp-sports{
background:linear-gradient(150deg,#3B2E52,#2E2740) !important;
}
/* ---- Links / accents ---- */
html[data-theme="light"] a{ color:var(--sb-coral); }
/* ---- Recolor leftover indigo accents (wordmark, eyebrows, gate) ---- */
html[data-theme="light"] .brand-name span{ color:var(--sb-coral) !important; }
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .auth-referral-kicker,
html[data-theme="light"] .onboarding-eyebrow{ color:#E85D3D !important; }
html[data-theme="light"] .auth-referral-gate{
background:linear-gradient(160deg,#FFF3E6,#FFEFF4) !important;
border:1px solid rgba(255,154,61,.28) !important;
border-radius:22px !important;
}
html[data-theme="light"] .auth-referral-signin,
html[data-theme="light"] .auth-referral-alt,
html[data-theme="light"] .auth-referral-secondary{
background:#FFFFFF !important; color:var(--sb-coral) !important;
border:1px solid rgba(255,107,92,.3) !important; border-radius:16px !important;
}
html[data-theme="light"] .auth-mode-button{
border-radius:16px !important; font-family:var(--sb-body) !important;
}
html[data-theme="light"] .auth-mode-button.active{
background:rgba(255,107,92,.12) !important; color:var(--sb-coral-deep) !important;
border:1px solid rgba(255,107,92,.35) !important;
}
/* input focus + carets warm */
html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus{
border-color:var(--sb-coral) !important; box-shadow:0 0 0 3px rgba(255,107,92,.18) !important;
}
/* =========================================================
Sunbeam v2 — mobile nav fix · purple tidy · WOW polish
(additive; still fully removable with the two lines)
========================================================= */
/* ---- leftover indigo: "Powered by CircleTrust" ---- */
html[data-theme="light"] .circle-powered{ color:#E85D3D !important; font-weight:800 !important; }
/* ---- Mobile bottom bar: guarantee a clean, comfy 5-button dock ---- */
@media (max-width:760px){
html[data-theme="light"] .bottom-nav{
display:flex !important; transform:none !important; position:fixed !important; margin:0 !important; align-items:center !important; justify-content:space-between !important;
gap:2px !important; left:10px !important; right:10px !important; width:auto !important;
padding:8px 10px !important; border-radius:26px !important; overflow:visible !important;
}
html[data-theme="light"] .bottom-nav .nav-button{
position:static !important; inset:auto !important; transform:none !important;
flex:1 1 0 !important; min-width:0 !important; margin:0 !important; height:auto !important;
display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important;
}
html[data-theme="light"] .bottom-nav .nav-button > span{ font-size:.6rem !important; line-height:1 !important; }
html[data-theme="light"] .bottom-nav .nav-create{
flex:0 0 auto !important; width:50px !important; height:50px !important;
margin:-22px 4px 0 !important; border-radius:17px !important;
}
html[data-theme="light"] .bottom-nav .nav-create > span:last-child{ display:none !important; }
html[data-theme="light"] .bottom-nav .nav-create > span:first-child{ font-size:1.5rem !important; color:#fff !important; }
}
/* ---- WOW: smooth motion, lift, glow (all safe — never hides content) ---- */
html[data-theme="light"] .post-card,
html[data-theme="light"] .section,
html[data-theme="light"] .showcase-talent-card,
html[data-theme="light"] .ct-bpp-vault-card,
html[data-theme="light"] .browse-card-row > .post-card,
html[data-theme="light"] .button{
transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .2s ease !important;
}
@media (hover:hover){
html[data-theme="light"] .post-card:hover,
html[data-theme="light"] .showcase-talent-card:hover,
html[data-theme="light"] .ct-bpp-vault-card:hover{
transform:translateY(-4px) !important;
box-shadow:0 20px 44px rgba(255,140,90,.20) !important;
}
html[data-theme="light"] .button-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); }
}
/* gentle entrance on view switch (base state stays fully visible) */
html[data-theme="light"] .view.active{ animation:sbViewIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes sbViewIn{ from{opacity:.55; transform:translateY(8px)} to{opacity:1; transform:none} }
/* create button: soft glowing pulse so it invites a tap */
html[data-theme="light"] .nav-create{ animation:sbFabGlow 3.2s ease-in-out infinite; }
@keyframes sbFabGlow{
0%,100%{ box-shadow:0 12px 26px rgba(255,107,92,.45); }
50%{ box-shadow:0 14px 34px rgba(255,107,92,.62), 0 0 0 6px rgba(255,154,61,.14); }
}
/* trusted answers: friendly mint gradient + soft glow */
html[data-theme="light"] .answer-preview,
html[data-theme="light"] .ct-bpp-conversation .answer-preview{
background:linear-gradient(135deg,#E4FBF3,#D3F6EA) !important;
border:1px solid rgba(32,201,160,.28) !important;
box-shadow:0 6px 18px rgba(32,201,160,.14) !important;
}
/* trust badges get a soft lift */
html[data-theme="light"] .ct-trust-trusted,
html[data-theme="light"] .showcase-tier-trusted{ box-shadow:0 4px 12px rgba(32,201,160,.22) !important; }
/* primary buttons: subtle top sheen for a premium feel */
html[data-theme="light"] .button-primary{ position:relative; overflow:hidden; }
html[data-theme="light"] .button-primary::after{
content:""; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 55%); pointer-events:none;
}
/* =========================================================
Sunbeam v3 — fix mobile tab switching
On <=860px the concept-bpp layer forces every main view to
display:flex, so all screens stack and tapping a tab never
changes the visible screen. Hide the non-active views so
Home / Browse / Vault / Me each show their own screen.
(Uses #id:not(.active) to out-rank #id{display:flex!important}.)
========================================================= */
@media (max-width:860px){
html[data-theme="light"] #homeView:not(.active),
html[data-theme="light"] #searchView:not(.active),
html[data-theme="light"] #vaultView:not(.active),
html[data-theme="light"] #profileView:not(.active){
display:none !important;
}
}
/* =========================================================
RC6.8.10G10.2.11 — mobile navigation theme parity
Geometry/visibility must never depend on Light vs Dark.
Both themes use the same 5-slot dock: Home / Browse / + / Vault / Me.
Theme selectors may style colours only, never remove or collapse slots.
========================================================= */
@media (max-width:860px){
.bottom-nav{
display:flex !important;
position:fixed !important;
left:10px !important;
right:10px !important;
width:auto !important;
transform:none !important;
margin:0 !important;
align-items:center !important;
justify-content:space-between !important;
gap:2px !important;
padding:8px 10px !important;
border-radius:26px !important;
overflow:visible !important;
bottom:max(9px,env(safe-area-inset-bottom)) !important;
}
.bottom-nav > .nav-button{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
position:static !important;
inset:auto !important;
transform:none !important;
flex:1 1 0 !important;
min-width:0 !important;
width:auto !important;
height:auto !important;
margin:0 !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:3px !important;
}
.bottom-nav > .nav-button > span:last-child{
display:block !important;
font-size:.6rem !important;
line-height:1 !important;
}
.bottom-nav > .nav-create{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
flex:0 0 58px !important;
width:58px !important;
height:58px !important;
margin:-22px 4px 0 !important;
border-radius:18px !important;
}
.bottom-nav > .nav-create > span:first-child{
display:block !important;
font-size:1.5rem !important;
color:#fff !important;
}
.bottom-nav > .nav-create > span:last-child{display:none !important;}
}
/* =========================================================
RC6.8.10G10.2.12 — mobile nav HARD LOCK
Structural invariant: Home / Browse / + / Vault / Me always occupy
five explicit grid columns in both Light and Dark. Theme changes colour only.
========================================================= */
@media (max-width:860px){
.bottom-nav{
display:grid !important;
grid-template-columns:repeat(5,minmax(0,1fr)) !important;
grid-template-rows:1fr !important;
align-items:end !important;
justify-items:stretch !important;
overflow:visible !important;
}
.bottom-nav > .nav-button{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
grid-row:1 !important;
position:relative !important;
inset:auto !important;
min-width:0 !important;
width:auto !important;
margin:0 !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}
.bottom-nav > .nav-button:nth-child(1){grid-column:1 !important;}
.bottom-nav > .nav-button:nth-child(2){grid-column:2 !important;}
.bottom-nav > #navCreateButton{grid-column:3 !important;grid-row:1 !important;width:58px !important;height:58px !important;justify-self:center !important;margin-top:-17px !important;}
.bottom-nav > .nav-button:nth-child(4){grid-column:4 !important;}
.bottom-nav > .nav-button:nth-child(5){grid-column:5 !important;}
}