/* Theme Name: GrowStream Media Theme URI: https://growstreammedia.com Author: GrowStream Media Description: A modern, full-featured news/publication theme for GrowStream Media — fintech & AI coverage with a contrarian editorial voice. Includes homepage sections, article template with related posts, author pages, newsletter signup, and ad-slot zones. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: growstream */ /* ========================================================================== Design tokens ========================================================================== */ :root { --gs-ink: #10151c; --gs-ink-soft: #1b232f; --gs-parchment: #ede7d8; --gs-parchment-soft: #f5f1e6; --gs-amber: #c89b3c; --gs-amber-soft: #e0c179; --gs-brick: #a8412e; --gs-slate: #2b3240; --gs-slate-soft: #5a6273; --gs-border: rgba(16, 21, 28, 0.12); --gs-border-dark: rgba(237, 231, 216, 0.14); --gs-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif; --gs-font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; --gs-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --gs-radius: 2px; --gs-max-width: 1180px; --gs-heading: #10151c; /* strong text — flips light in dark mode */ --gs-accent-text: #a8412e; /* brick used AS TEXT — lightened in dark mode */ } /* ========================================================================== Dark mode — toggled via [data-theme="dark"] on IMPORTANT: --gs-parchment stays LIGHT (it's a text color on dark surfaces like the header/footer/newsletter). Only page/content surfaces flip. ========================================================================== */ [data-theme="dark"] { --gs-slate: #d6d2c4; /* body text -> light */ --gs-slate-soft: #9aa2b1; /* secondary text -> readable grey */ --gs-border: rgba(237, 231, 216, 0.14); --gs-heading: #f2efe6; /* headings -> light */ --gs-accent-text: #d97b66; /* brick text -> lighter for contrast */ } [data-theme="dark"] body { background: #14181f; } [data-theme="dark"] .gs-ad-slot { background: #10151c; border-color: var(--gs-border); color: var(--gs-slate-soft); } [data-theme="dark"] .gs-author-box { background: #1b232f; } [data-theme="dark"] .gs-side-story { border-color: var(--gs-border); } [data-theme="dark"] .gs-card__thumb { background: #10151c; } [data-theme="dark"] .gs-contact-form input, [data-theme="dark"] .gs-contact-form textarea { background: #10151c !important; color: var(--gs-slate); border-color: var(--gs-border) !important; } [data-theme="dark"] .gs-pagination a, [data-theme="dark"] .gs-pagination span { border-color: var(--gs-border); } [data-theme="dark"] .gs-pagination .current { background: #c89b3c; color: #10151c; } /* Safety net: force strong contrast on every text-bearing surface in dark mode, rather than relying on each component to inherit correctly. */ [data-theme="dark"] body, [data-theme="dark"] .gs-article__body, [data-theme="dark"] .gs-article__body p, [data-theme="dark"] .gs-article__body li, [data-theme="dark"] .gs-card__excerpt, [data-theme="dark"] .gs-widget-list a, [data-theme="dark"] .gs-hero__dek, [data-theme="dark"] .gs-article__dek { color: var(--gs-slate); } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] .gs-hero__headline a, [data-theme="dark"] .gs-card__title a, [data-theme="dark"] .gs-side-story__title a, [data-theme="dark"] .gs-article__title, [data-theme="dark"] .gs-widget__title, [data-theme="dark"] .gs-related__title, [data-theme="dark"] .gs-section__title { color: var(--gs-heading); } body, .gs-ad-slot, .gs-author-box { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* Theme toggle button */ .gs-theme-toggle { background: none; border: 1px solid var(--gs-border-dark); color: var(--gs-parchment); width: 34px; height: 34px; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .gs-theme-toggle:hover { border-color: var(--gs-amber); } /* ========================================================================== Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--gs-parchment-soft); color: var(--gs-slate); font-family: var(--gs-font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--gs-brick); } :focus-visible { outline: 2px solid var(--gs-brick); outline-offset: 2px; } .gs-container { max-width: var(--gs-max-width); margin: 0 auto; padding: 0 24px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } /* ========================================================================== Header ========================================================================== */ .gs-header { background: var(--gs-ink); color: var(--gs-parchment); border-bottom: 1px solid var(--gs-border-dark); position: relative; /* anchors the absolute-positioned mobile dropdown */ } .gs-header__top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 24px; flex-wrap: wrap; } .gs-logo { font-family: var(--gs-font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.01em; color: var(--gs-parchment); } .gs-logo span { color: var(--gs-amber); } .gs-logo-tag { font-family: var(--gs-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gs-slate-soft); display: block; margin-top: 2px; } .gs-nav { display: block; } .gs-nav-list { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; list-style: none; margin: 0; padding: 0; } /* wp_nav_menu now outputs a real