/* ============================================================ THEME — light ("bright") mode overrides. The base stylesheets are authored dark. The site now defaults to the BRIGHT theme: an inline script sets document.documentElement.dataset.theme = 'light' before paint (falling back to a stored preference). The toggle in the nav flips between 'light' and 'dark'. All rules here are scoped under [data-theme="light"] so the dark design is untouched when that attribute is 'dark' or absent. ============================================================ */ :root[data-theme="light"]{ /* Canvas / surfaces */ --c-bg: #F4F5F7; --c-bg-raised: #FFFFFF; --c-bg-sunken: #ECEEF2; --c-surface-btn: #FFFFFF; /* Foreground text */ --c-fg: #16181F; --c-fg-1: #16181F; --c-fg-2: #2E323C; --c-fg-3: #5C6270; --c-fg-4: #8C92A0; --c-fg-inverse: #FFFFFF; /* Lines */ --c-line: rgba(20,22,31,0.12); --c-line-strong: rgba(20,22,31,0.24); /* Overlays */ --c-scrim: rgba(20,22,31,0.45); --c-overlay-shadow: 0 12px 40px rgba(20,30,60,0.16); --shadow-overlay: 0 12px 40px rgba(20,30,60,0.16); /* Accent text reads darker on white */ --op-accent-soft: rgba(10,55,216,0.10); /* Category tones — darkened for contrast on white surfaces */ --cat-enterprise-1:#2563EB; --cat-enterprise-2:#1D4FD6; --cat-enterprise-bg:rgba(37,99,235,0.10); --cat-dagnation-1: #0E8FA8; --cat-dagnation-2: #0B7488; --cat-dagnation-bg: rgba(14,143,168,0.10); --cat-traders-1: #0E9F6E; --cat-traders-2: #0B7F58; --cat-traders-bg: rgba(14,159,110,0.10); --cat-federal-1: #DC2626; --cat-federal-2: #B91C1C; --cat-federal-bg: rgba(220,38,38,0.10); --cat-web3-1: #7C3AED; --cat-web3-2: #6428C7; --cat-web3-bg: rgba(124,58,237,0.10); --cat-health-1: #B45309; --cat-health-2: #92400E; --cat-health-bg: rgba(180,83,9,0.10); --cat-ai-1: #C026A3; --cat-ai-2: #A01D87; --cat-ai-bg: rgba(192,38,163,0.10); } /* --op-accent-text lives in community.css :root; flip it for light */ :root[data-theme="light"]{ --op-accent-text:#2563EB; } /* ---------- Chrome surfaces ---------- */ [data-theme="light"] .op-ticker{ background:#E9ECF1; } [data-theme="light"] .op-ticker__label{ background:linear-gradient(180deg, rgba(0,0,0,0.04), transparent); } [data-theme="light"] .op-nav{ background:rgba(255,255,255,0.82); } [data-theme="light"] .op-filters{ background:rgba(255,255,255,0.92); } [data-theme="light"] .op-foot{ background:#E9ECF1; } /* Subtle white-on-dark fills → black-on-light fills */ [data-theme="light"] .op-nav__sec:hover{ background:rgba(20,22,31,0.05); } [data-theme="light"] .op-nav__sec.is-active{ background:rgba(20,22,31,0.06); } [data-theme="light"] .op-tool:hover, [data-theme="light"] .op-rail__item:hover, [data-theme="light"] .op-card:hover, [data-theme="light"] .op-chapter:hover, [data-theme="light"] .op-actions button:hover, [data-theme="light"] .dn-forum__topic:hover, [data-theme="light"] .dn-forum__filter:hover{ background:rgba(20,22,31,0.04); } [data-theme="light"] .op-tool.is-active, [data-theme="light"] .dn-forum__filter.is-active, [data-theme="light"] .dn-forum__cat.is-active{ background:rgba(20,22,31,0.06); } [data-theme="light"] .cn-btn--ghost:hover{ background:rgba(20,22,31,0.04); } [data-theme="light"] .cn-badge{ background:rgba(20,22,31,0.04); } /* Cards / rails that lean on white tints */ [data-theme="light"] .op-rail__head{ background:linear-gradient(180deg, rgba(20,22,31,0.03), transparent); } [data-theme="light"] .dn-cat:hover{ background:rgba(20,22,31,0.03); } [data-theme="light"] .dn-cat__icon{ background:rgba(20,22,31,0.03); } /* Hero — keep light canvas, soften the blue glow */ [data-theme="light"] .dn-hero{ background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37,99,235,0.10) 0%, transparent 60%); } [data-theme="light"] .dn-hero__bg{ opacity:0.14; } [data-theme="light"] .dn-cathead__bg{ opacity:0.14; } /* Category header bands — flip dark bands to white with a colored top glow */ [data-theme="light"] .dn-cathead--enterprise{ background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37,99,235,0.14) 0%, transparent 60%), #FFFFFF; } [data-theme="light"] .dn-cathead--dagnation { background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(14,143,168,0.12) 0%, transparent 60%), #FFFFFF; } [data-theme="light"] .dn-cathead--traders { background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(14,159,110,0.14) 0%, transparent 60%), #FFFFFF; } [data-theme="light"] .dn-cathead--federal { background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(220,38,38,0.12) 0%, transparent 60%), #FFFFFF; } [data-theme="light"] .dn-cathead--web3 { background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,58,237,0.13) 0%, transparent 60%), #FFFFFF; } [data-theme="light"] .dn-cathead--ai { background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(192,38,163,0.12) 0%, transparent 60%), #FFFFFF; } [data-theme="light"] .dn-cathead--health { background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(180,83,9,0.12) 0%, transparent 60%), #FFFFFF; } /* Forum board */ [data-theme="light"] .dn-forum{ background:radial-gradient(ellipse 60% 100% at 0% 0%, rgba(124,58,237,0.05) 0%, transparent 50%), radial-gradient(ellipse 60% 100% at 100% 100%, rgba(14,159,110,0.05) 0%, transparent 50%); } [data-theme="light"] .dn-forum__board{ background:#FFFFFF; } [data-theme="light"] .dn-forum__cats{ background:rgba(20,22,31,0.025); } [data-theme="light"] .dn-forum__cat:hover{ background:rgba(20,22,31,0.04); } [data-theme="light"] .dn-forum__main-head{ background:linear-gradient(180deg, rgba(20,22,31,0.03), transparent); } [data-theme="light"] .dn-forum__user{ background:rgba(20,22,31,0.03); } /* Signup modal → light card */ [data-theme="light"] .dn-modal__card{ background:#FFFFFF; } /* Blank placeholder cards */ [data-theme="light"] .op-blank__pill, [data-theme="light"] .op-blank__h{ background:rgba(20,22,31,0.07); } [data-theme="light"] .op-blank__line{ background:rgba(20,22,31,0.05); } [data-theme="light"] .op-blank__media{ background:repeating-linear-gradient(135deg, rgba(20,22,31,0.03) 0 12px, rgba(20,22,31,0.05) 12px 24px); } /* ---------- Theme toggle button (lives in nav) ---------- */ .op-themetoggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0; background:var(--c-bg-sunken); border:1px solid var(--c-line); color:var(--c-fg-3); cursor:pointer; transition:color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); } .op-themetoggle:hover{ color:var(--c-fg); border-color:var(--c-line-strong); } .op-themetoggle svg{ width:17px; height:17px; } .op-themetoggle .op-themetoggle__sun{ display:none; } .op-themetoggle .op-themetoggle__moon{ display:block; } [data-theme="light"] .op-themetoggle .op-themetoggle__sun{ display:block; } [data-theme="light"] .op-themetoggle .op-themetoggle__moon{ display:none; }