/* theme-light.css Opt-in light theme for Desk Theory reading surfaces. A page activates it by adding class="theme-light" to and linking this file. Rules are scoped under body.theme-light so they only apply where opted in (the dark sales and landing pages never load or activate it), and so they out-specify the templates' inline dark styles without depending on load order. Design system (matches the /workflows prototype): page bg ........ #FFFFFF (white) body text ...... #1F2733 headings ....... #14233A (dark navy) secondary copy . #5C5346 (dark taupe) gold on white .. #9A6B12 (the bright #EFB940 is unreadable on white) gold hover ..... #7A540D dividers ....... rgba(20,35,58,0.12) light card ..... #EAEEF4 (soft navy tint), border rgba(20,35,58,0.10), hover #DFE5EF primary CTA .... navy #14233A fill, gold #FFC854 text The site header/nav stays dark: we never target header selectors, so it keeps its tokens.css values. Code blocks (article pre) are intentionally left dark: we do not override them, so they keep the navy var(--card) background. */ /* --- page + base text --- */ body.theme-light { background: #FFFFFF; color: #1F2733; } body.theme-light a { color: #9A6B12; } body.theme-light a:hover { color: #7A540D; } /* --- prose --- */ body.theme-light .article-eyebrow { color: #9A6B12; } body.theme-light article h1, body.theme-light article h2, body.theme-light article h3, body.theme-light article h4 { color: #14233A; } body.theme-light article h2 { border-top-color: rgba(20,35,58,0.12); } body.theme-light article h3 .step-num { color: #9A6B12; } body.theme-light article > p:first-of-type { color: #5C5346; border-bottom-color: rgba(20,35,58,0.12); } body.theme-light article p { color: #5C5346; } body.theme-light article p strong { color: #14233A; } body.theme-light article p em { color: #6B6357; } body.theme-light article ul, body.theme-light article ol { color: #5C5346; } body.theme-light article li::marker { color: #9A6B12; } body.theme-light article blockquote { border-left-color: #9A6B12; color: #5C5346; } /* inline code: faint amber chip with dark amber text (readable on white) */ body.theme-light article p code, body.theme-light article li code { background: rgba(154,107,18,0.10); color: #7A540D; } /* NOTE: article pre (code blocks) intentionally NOT overridden -> stays dark. */ /* --- table of contents --- */ body.theme-light .toc { background: #EAEEF4; border-color: rgba(20,35,58,0.10); } body.theme-light .toc summary { color: #9A6B12; } body.theme-light .toc a { color: #5C5346; } body.theme-light .toc a:hover { color: #7A540D; } /* --- read next cards --- */ body.theme-light .read-next { border-top-color: rgba(20,35,58,0.12); } body.theme-light .read-next .rn-label { color: #9A6B12; } body.theme-light .read-next-card { background: #EAEEF4; border-color: rgba(20,35,58,0.10); } body.theme-light .read-next-card:hover { background: #DFE5EF; border-color: rgba(20,35,58,0.20); } body.theme-light .read-next-card .rn-title { color: #14233A; } body.theme-light .read-next-card .rn-dek { color: #6B6357; } /* --- signup block: light card, navy+gold primary CTA --- */ body.theme-light .signup-block { background: #EAEEF4; border-color: rgba(20,35,58,0.10); color: #5C5346; } body.theme-light .signup-block .label { color: #9A6B12; } body.theme-light .signup-block h3 { color: #14233A; } body.theme-light .signup-block p { color: #5C5346; } body.theme-light .signup-block a.cta { background: #14233A; color: #FFC854; } body.theme-light .signup-block a.cta:hover { background: #1F3350; color: #FFD36B; } /* --- book block: light card, gold outline secondary CTA --- */ body.theme-light .book-block { background: #EAEEF4; border-color: rgba(20,35,58,0.10); color: #5C5346; } body.theme-light .book-block .label { color: #9A6B12; } body.theme-light .book-block h3 { color: #14233A; } body.theme-light .book-block p { color: #5C5346; } body.theme-light .book-block a.cta { border-color: #9A6B12; color: #9A6B12; } body.theme-light .book-block a.cta:hover { background: rgba(154,107,18,0.10); border-color: #7A540D; color: #7A540D; } body.theme-light .book-block-pro { border-top-color: rgba(20,35,58,0.12); color: #6B6357; } body.theme-light .book-block-pro a { color: #9A6B12; } /* ============================================================ Additional reading-surface selectors (news/blog reuse the article selectors above; these cover glossary, learn topic hubs, and start-here onramps). ============================================================ */ /* shared "back to index" link */ body.theme-light .index-link { color: #9A6B12; border-top-color: rgba(20,35,58,0.12); } body.theme-light .index-link:hover { color: #7A540D; } /* --- glossary --- */ body.theme-light .glossary-link { border-bottom-color: rgba(154,107,18,0.5); } body.theme-light .glossary-link:hover { border-bottom-color: #7A540D; } body.theme-light .gloss-extras { border-top-color: rgba(20,35,58,0.12); } body.theme-light .gloss-extras .ge-label { color: #9A6B12; } body.theme-light .gloss-extras .ge-chips a { border-color: rgba(20,35,58,0.14); color: #5C5346; } body.theme-light .gloss-extras .ge-chips a:hover { color: #9A6B12; border-color: rgba(20,35,58,0.28); } body.theme-light .gloss-extras .ge-list a { color: #5C5346; } body.theme-light .gloss-extras .ge-list a:hover { color: #9A6B12; } /* --- learn topic hub --- */ body.theme-light .hub-header > p:first-of-type { color: #5C5346; } body.theme-light .hero-cta { background: rgba(154,107,18,0.08); border-color: rgba(20,35,58,0.12); border-left-color: #9A6B12; } body.theme-light .hero-cta:hover { background: rgba(154,107,18,0.14); border-color: rgba(20,35,58,0.20); } body.theme-light .hero-cta .hero-cta-label { color: #9A6B12; } body.theme-light .hero-cta .hero-cta-desc { color: #5C5346; } body.theme-light .hero-cta .hero-cta-more { background: #14233A; color: #FFC854; } body.theme-light .hero-cta:hover .hero-cta-more { background: #1F3350; color: #FFD36B; } body.theme-light .featured-card { background: #EAEEF4; border-color: rgba(20,35,58,0.10); border-left-color: #9A6B12; } body.theme-light .featured-card:hover { background: #DFE5EF; border-color: rgba(20,35,58,0.20); } body.theme-light .featured-card .featured-eyebrow { color: #9A6B12; } body.theme-light .featured-card .featured-title { color: #14233A; } body.theme-light .featured-card:hover .featured-title { color: #7A540D; } body.theme-light .featured-card .featured-desc { color: #5C5346; } body.theme-light .featured-card .featured-date { color: #6B6357; } body.theme-light .hub-rail h2 { color: #14233A; } body.theme-light .hub-rail .rail-list li { border-bottom-color: rgba(20,35,58,0.12); } body.theme-light .hub-rail .rail-list a { color: #5C5346; } body.theme-light .hub-rail .rail-list a:hover { color: #9A6B12; } body.theme-light .hub-rail .rail-date { color: #9A6B12; } body.theme-light .rail-more { color: #9A6B12; } body.theme-light .rail-more:hover { color: #7A540D; } body.theme-light article ul.topic-aggregation li { border-bottom-color: rgba(20,35,58,0.12); } body.theme-light article ul.topic-aggregation .item-title { color: #14233A; } body.theme-light article ul.topic-aggregation .item-title:hover { color: #9A6B12; } body.theme-light article ul.topic-aggregation .item-date { color: #6B6357; } body.theme-light article ul.topic-aggregation .item-desc { color: #5C5346; } /* ============================================================ Section index pages (/news, /blog, /glossary, /learn, /start-here, /articles, /browse). Generated by the render scripts with their own inline list styles. NOTE: articles/ browse have a custom dark ".site" header we do NOT touch. ============================================================ */ body.theme-light .page-eyebrow, body.theme-light .section-eyebrow { color: #9A6B12; } body.theme-light .page-title { color: #14233A; } body.theme-light .page-lede, body.theme-light .section-blurb, body.theme-light .feed .section-lede { color: #5C5346; } body.theme-light .empty, body.theme-light .no-results { color: #6B6357; } /* list-item titles */ body.theme-light .posts h2, body.theme-light .posts h2 a, body.theme-light .hubs h2, body.theme-light .hubs h2 a, body.theme-light .onramps h2, body.theme-light .onramps h2 a, body.theme-light .entries a, body.theme-light .article-item h3, body.theme-light .feed h2, body.theme-light .facet-group h2, body.theme-light .letter-group h2, body.theme-light .guided > h2, body.theme-light .curated > h2 { color: #14233A; } body.theme-light .posts h2 a:hover, body.theme-light .hubs h2 a:hover, body.theme-light .onramps h2 a:hover, body.theme-light .entries a:hover, body.theme-light .article-item a.card-body:hover h3 { color: #9A6B12; } /* list-item body copy */ body.theme-light .posts p, body.theme-light .hubs p, body.theme-light .onramps p, body.theme-light .article-item p, body.theme-light .entries .def { color: #5C5346; } /* meta / dates */ body.theme-light .posts .meta, body.theme-light .hubs .meta, body.theme-light .onramps .meta, body.theme-light .article-item .meta, body.theme-light .article-item .meta .date, body.theme-light .posts .meta .topics span { color: #6B6357; } /* tag/topic/facet/back/toc links */ body.theme-light .posts .meta .topics a, body.theme-light .back-link, body.theme-light .toc a { color: #5C5346; } body.theme-light .posts .meta .topics a:hover, body.theme-light .back-link:hover, body.theme-light .toc a:hover { color: #9A6B12; } /* blog filter chips + browse facet chips */ body.theme-light .chip { border-color: rgba(20,35,58,0.16); color: #5C5346; } body.theme-light .chip:hover { color: #9A6B12; border-color: rgba(20,35,58,0.30); } body.theme-light .chip.is-active { background: #14233A; color: #FFC854; border-color: #14233A; } body.theme-light .facet-list a { background: rgba(20,35,58,0.04); border-color: rgba(20,35,58,0.12); color: #5C5346; } body.theme-light .facet-list a:hover { background: rgba(154,107,18,0.10); color: #9A6B12; } body.theme-light .facet-list .facet-count { color: #6B6357; } /* list dividers (were faint light = invisible on white) */ body.theme-light .posts li, body.theme-light .hubs li, body.theme-light .onramps li, body.theme-light .entries li, body.theme-light .article-item, body.theme-light .feed .article-item { border-bottom-color: rgba(20,35,58,0.12); } /* ============================================================ Learning paths (/learn/paths/*). The operator-gate paywall card is intentionally LEFT DARK (not overridden) so it stands apart from the light reading content as a premium prompt. ============================================================ */ body.theme-light .path-eyebrow { color: #9A6B12; } body.theme-light h1.path-title { color: #14233A; } body.theme-light .meta-pill { background: rgba(20,35,58,0.05); color: #6B6357; } body.theme-light .meta-pill-gold { background: rgba(154,107,18,0.10); color: #9A6B12; } body.theme-light .path-intro, body.theme-light .path-intro p:first-child { color: #5C5346; } body.theme-light .step-num { color: #9A6B12; } body.theme-light .step-title { color: #14233A; } body.theme-light .step-title:hover { color: #9A6B12; } body.theme-light .step-meta { color: #6B6357; } body.theme-light .step-prose { color: #5C5346; } body.theme-light .step-cta { color: #9A6B12; } body.theme-light .step-cta:hover { color: #7A540D; } body.theme-light .path-steps-section h2 { color: #14233A; border-top-color: rgba(20,35,58,0.12); } /* ============================================================ Homepage (content/homepage/index.template.html). A bespoke surface with its own inline dark styles, so every rule below out-specifies its inline counterpart (theme-light.css loads before the template's inline