/* ═══════════════════════════════════════════════════════════════ COMMUNE — Light Mode Warm ivory + soft glass. Same premium feel, different palette. Applied via [data-theme="light"] on ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* Base surfaces — warm ivory */ --night-0: #F5F2ED; --night-1: #EDE9E2; --night-2: #E4DFD7; --night-3: #D8D2C8; --night-4: #C9C2B6; /* Glass layers — lighter, warmer */ --gl-0: rgba(255, 255, 255, 0.55); --gl-1: rgba(255, 255, 255, 0.70); --gl-2: rgba(255, 255, 255, 0.82); --gl-3: rgba(255, 255, 255, 0.92); --gl-bd-0: rgba(0, 0, 0, 0.07); --gl-bd-1: rgba(0, 0, 0, 0.12); --gl-bd-2: rgba(0, 0, 0, 0.18); --gl-shine: rgba(255, 255, 255, 0.90); /* Text */ --tx-0: #1A1814; --tx-1: #4A4640; --tx-2: #7A7570; --tx-3: #A8A39E; /* Brand — slightly deeper for contrast on light */ --iris: #5B4FE8; --iris-d: rgba(91,79,232,0.10); --iris-g: rgba(91,79,232,0.25); --teal: #0EA89A; --teal-d: rgba(14,168,154,0.10); --coral: #E8445A; --coral-d: rgba(232,68,90,0.10); --amber: #D97706; --amber-d: rgba(217,119,6,0.10); --sage: #16A34A; /* Shadows — softer, warm-tinted */ --sh-sm: 0 2px 12px rgba(0,0,0,0.08); --sh-md: 0 6px 28px rgba(0,0,0,0.12); --sh-lg: 0 14px 50px rgba(0,0,0,0.16); --sh-iris: 0 0 40px rgba(91,79,232,0.18); --sh-teal: 0 0 36px rgba(14,168,154,0.15); --sh-glass:0 4px 24px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9) inset; } /* ── Override components for light mode ───────────────────── */ /* Glass surfaces look different in light — more frosted than dark */ [data-theme="light"] .glass { background: rgba(255,255,255,0.55); border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.9) inset; } [data-theme="light"] .glass-md { background: rgba(255,255,255,0.70); border-color: rgba(0,0,0,0.09); box-shadow: 0 4px 24px rgba(0,0,0,0.09), 0 1px 0 rgba(255,255,255,0.9) inset; } [data-theme="light"] .glass-heavy { background: rgba(255,255,255,0.82); border-color: rgba(0,0,0,0.11); box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.95) inset; } [data-theme="light"] .glass-ultra { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.14); box-shadow: 0 12px 50px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255,0.98) inset; } /* Specular highlight becomes a bottom shadow instead in light */ [data-theme="light"] .glass::after, [data-theme="light"] .glass-md::after, [data-theme="light"] .glass-heavy::after, [data-theme="light"] .glass-ultra::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent); } /* Nav */ [data-theme="light"] .site-nav { background: rgba(245,242,237,0.82); border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .site-nav.scrolled { background: rgba(245,242,237,0.96); box-shadow: 0 4px 40px rgba(0,0,0,0.10); } /* Body noise overlay is too dark in light mode */ [data-theme="light"] body::before { opacity: 0.15; } /* Orbs are subtler in light */ [data-theme="light"] .orb-1 { background: radial-gradient(circle,rgba(91,79,232,.14) 0%,transparent 65%); } [data-theme="light"] .orb-2 { background: radial-gradient(circle,rgba(14,168,154,.11) 0%,transparent 65%); } [data-theme="light"] .orb-3 { background: radial-gradient(circle,rgba(232,68,90,.09) 0%,transparent 65%); } [data-theme="light"] .orb-4 { background: radial-gradient(circle,rgba(217,119,6,.08) 0%,transparent 65%); } /* Cards */ [data-theme="light"] .card { background: rgba(255,255,255,0.60); border-color: rgba(0,0,0,0.07); } [data-theme="light"] .card:hover { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.12); box-shadow: 0 14px 40px rgba(0,0,0,0.12); } /* Buttons */ [data-theme="light"] .btn-glass { background: rgba(255,255,255,0.65); border-color: rgba(0,0,0,0.12); color: var(--tx-0); } [data-theme="light"] .btn-glass:hover { background: rgba(255,255,255,0.90); } /* Inputs */ [data-theme="light"] .fc { background: rgba(255,255,255,0.65); border-color: rgba(0,0,0,0.12); color: var(--tx-0); } [data-theme="light"] .fc:focus { background: rgba(255,255,255,0.90); border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-d); } [data-theme="light"] .fc::placeholder { color: var(--tx-3); } /* Scrollbar */ [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.20); } [data-theme="light"] * { scrollbar-color: rgba(0,0,0,0.12) transparent; } /* Dividers and borders */ [data-theme="light"] .hr { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); } [data-theme="light"] .sb-sep { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); } /* Sidebar */ [data-theme="light"] .p-sidebar { border-right-color: rgba(0,0,0,0.08); } [data-theme="light"] .sb-a:hover, [data-theme="light"] .sb-a.on, [data-theme="light"] .room-a:hover, [data-theme="light"] .room-a.on { background: rgba(0,0,0,0.05); } [data-theme="light"] .sb-story:hover { background: rgba(0,0,0,0.04); } /* Chat bubbles */ [data-theme="light"] .bubble-in { background: rgba(255,255,255,0.80); border-color: rgba(0,0,0,0.09); color: var(--tx-0); } /* Chat input */ [data-theme="light"] .input-wrap { background: rgba(255,255,255,0.70); border-color: rgba(0,0,0,0.10); } [data-theme="light"] .chat-ta { color: var(--tx-0); } [data-theme="light"] .chat-ta::placeholder { color: var(--tx-3); } /* Portal right panel */ [data-theme="light"] .mem-row:hover { background: rgba(0,0,0,0.04); } [data-theme="light"] .notif-row.unread { background: rgba(91,79,232,0.07); } [data-theme="light"] .notif-row:hover { background: rgba(0,0,0,0.04); } /* Cat chips */ [data-theme="light"] .cat-chip { background: rgba(255,255,255,0.60); border-color: rgba(0,0,0,0.09); color: var(--tx-2); } [data-theme="light"] .cat-chip:hover, [data-theme="light"] .cat-chip.on { background: rgba(255,255,255,0.90); border-color: rgba(0,0,0,0.14); color: var(--tx-0); } [data-theme="light"] .cat-chip.on { color: var(--iris); border-color: rgba(91,79,232,.35); } /* Cat strip sticky bg */ [data-theme="light"] .cat-strip { background: rgba(245,242,237,0.88); border-bottom-color: rgba(0,0,0,0.08); } /* Auth pages */ [data-theme="light"] .auth-left { background: linear-gradient(160deg,rgba(91,79,232,.05) 0%,transparent 55%); border-right-color: rgba(0,0,0,0.08); } /* Toast */ [data-theme="light"] .toast { background: rgba(255,255,255,0.90); border-color: rgba(0,0,0,0.10); color: var(--tx-0); box-shadow: 0 8px 32px rgba(0,0,0,0.14); } /* Mobile menu */ [data-theme="light"] .mob-menu { background: rgba(245,242,237,0.98); } [data-theme="light"] .mob-menu .nav-a { border-bottom-color: rgba(0,0,0,0.08); } /* Portal body bg */ [data-theme="light"] .chat-top { border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .chat-input-zone { border-top-color: rgba(0,0,0,0.08); } [data-theme="light"] .date-chip span { background: rgba(255,255,255,0.70); border-color: rgba(0,0,0,0.08); } [data-theme="light"] .date-chip::before, [data-theme="light"] .date-chip::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08)); } /* Footer */ [data-theme="light"] .site-footer { border-top-color: rgba(0,0,0,0.08); } [data-theme="light"] .ft-btm { border-top-color: rgba(0,0,0,0.08); } /* Section title gradient text works in both modes */ [data-theme="light"] .hero-h1 strong { background: linear-gradient(135deg, var(--iris), var(--teal)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Pill overrides */ [data-theme="light"] .pill-cat { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); color: var(--tx-1); } [data-theme="light"] .pill-tag { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); color: var(--tx-2); } /* Article body in light */ [data-theme="light"] .article-body { color: var(--tx-1); } [data-theme="light"] .article-body blockquote { background: rgba(91,79,232,0.04); border-left-color: var(--iris); } [data-theme="light"] .article-body code { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.09); color: var(--iris); } [data-theme="light"] .article-body pre { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); } /* Gate card */ [data-theme="light"] .gate-icon { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.20); } /* Stat bar */ [data-theme="light"] .stat-bar { background: rgba(255,255,255,0.60); border-color: rgba(0,0,0,0.08); } [data-theme="light"] .stat-sep { background: rgba(0,0,0,0.08); } /* Hero kicker pill */ [data-theme="light"] .kicker { background: rgba(255,255,255,0.65); border-color: rgba(0,0,0,0.09); } /* Online dot — same in both modes */ [data-theme="light"] .av-ring::after { border-color: var(--night-1); } /* Buttons that adapt */ [data-theme="light"] .btn-nav-login, [data-theme="light"] .btn-nav-join { color: var(--tx-0); } /* ── Light mode mobile auth ──────────────────────────────── */ @media (max-width: 768px) { [data-theme="light"] .auth-right, [data-theme="light"] .auth-shell { background: var(--night-0); /* uses light mode --night-0 = #F5F2ED */ } } /* ── Light mode selection ────────────────────────────────────── */ [data-theme="light"] ::selection { background: rgba(91, 79, 232, 0.18); color: var(--tx-0); } /* Founder section */ [data-theme="light"] .founder-section { background: rgba(240,237,232,.6); } [data-theme="light"] .founder-photo-frame { background: rgba(245,242,237,.9); border-color: rgba(0,0,0,.1); } [data-theme="light"] .founder-credential { background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.08); color: var(--tx-0); } [data-theme="light"] .founder-quote-block { background: rgba(196,154,60,.07); } [data-theme="light"] .founder-quote-block blockquote { color: var(--tx-0); } /* Mobile drawer light mode */ [data-theme="light"] .mob-menu { background: rgba(250,246,239,.98); border-left-color: rgba(0,0,0,.08); box-shadow: -8px 0 48px rgba(0,0,0,.12); } [data-theme="light"] .mob-menu-head { border-bottom-color: rgba(0,0,0,.08); } [data-theme="light"] .mob-menu .nav-a { color: var(--tx-1); } [data-theme="light"] .mob-menu .nav-a:hover, [data-theme="light"] .mob-menu .nav-a.on { background: rgba(0,0,0,.05); color: var(--tx-0); } [data-theme="light"] .mob-menu-sep { background: rgba(0,0,0,.07); } [data-theme="light"] .mob-menu-foot { border-top-color: rgba(0,0,0,.08); } [data-theme="light"] .mob-menu-theme { background: rgba(255,255,255,.6); border-color: rgba(0,0,0,.08); } [data-theme="light"] .mob-menu-theme-label { color: var(--tx-1); } [data-theme="light"] .mob-menu-brand-name { color: var(--forest, #1C3A2E); }