/* ========================================================= Buzzlect — LIGHT palette (white / black / red) ========================================================= The whole design is driven by the custom properties in style.css, so the palette is mostly a variable swap. What follows the variables are the handful of places where style.css hard-codes a dark value (white hairlines, dark glass panels, prose grey) that cannot flip on its own. Applied by adding .palette-light to . ========================================================= */ body.palette-light { /* Surfaces, lightest to darkest */ --black: #ffffff; --black-2: #f7f7f9; --black-3: #f1f1f4; --charcoal: #e9e9ee; --border: #e0e0e7; /* Ink */ --white: #0b0b0d; --grey: #52525b; --grey-dim: #7a7a85; /* Red stays the brand constant; the glow softens for a light ground */ --red: #d90711; --red-bright: #ff1f2c; --red-deep: #a10009; --red-glow: rgba(217, 7, 17, 0.22); } /* ---- global chrome ---------------------------------------------------- */ body.palette-light { background: var(--black); color: var(--white); } body.palette-light ::selection { background: var(--red); color: #fff; } body.palette-light ::-webkit-scrollbar-track { background: #eeeef2; } body.palette-light ::-webkit-scrollbar-thumb { background: #c9c9d2; } body.palette-light ::-webkit-scrollbar-thumb:hover { background: var(--red); } /* ---- header / footer -------------------------------------------------- */ body.palette-light .nav { background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid var(--border); } body.palette-light .nav.scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.07); } body.palette-light .nav-links { background: transparent; } body.palette-light .footer { background: var(--black-2); border-top: 1px solid var(--border); } /* Mobile drawer sits on glass in the dark theme. */ body.palette-light .nav-links.open { background: #ffffff; } body.palette-light .hamburger span { background: var(--white); } /* ---- hero ------------------------------------------------------------- */ /* The grid overlay draws white hairlines; invert to dark on a light ground. */ body.palette-light .grid-overlay { background-image: linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px); } body.palette-light .hero-glow { opacity: 0.5; } body.palette-light .ai-card { background: #ffffff; border: 1px solid var(--border); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1); } body.palette-light .ai-card-header { border-bottom: 1px solid var(--border); } body.palette-light .ai-a { background: var(--black-2); } body.palette-light .cite-chip { background: #ffffff; border-color: var(--border); } /* ---- panels that relied on dark glass --------------------------------- */ body.palette-light .section-dark { background: var(--black-2); } body.palette-light .service-card, body.palette-light .price-card, body.palette-light .value-card, body.palette-light .step, body.palette-light .result-card, body.palette-light .teaser-card, body.palette-light .blog-card, body.palette-light .featured-post, body.palette-light .info-card, body.palette-light .contact-form-card, body.palette-light .founder-card, body.palette-light .post-nav-link { background: #ffffff; border-color: var(--border); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04); } body.palette-light .service-card:hover, body.palette-light .price-card:hover, body.palette-light .blog-card:hover, body.palette-light .post-nav-link:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1), 0 0 34px rgba(217, 7, 17, 0.07); border-color: rgba(217, 7, 17, 0.4); } body.palette-light .price-card.popular { background: linear-gradient(170deg, rgba(217, 7, 17, 0.06), transparent 45%), #ffffff; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.09), 0 0 34px rgba(217, 7, 17, 0.1); } body.palette-light .trustbar { background: var(--black-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } body.palette-light .guarantee, body.palette-light .post-cta { background: linear-gradient(135deg, rgba(217, 7, 17, 0.06), transparent), #ffffff; border-color: rgba(217, 7, 17, 0.28); } body.palette-light .cta-section { background: var(--black-2); } /* ---- forms ------------------------------------------------------------ */ body.palette-light input, body.palette-light textarea, body.palette-light select { background: #ffffff; border-color: var(--border); color: var(--white); } body.palette-light input::placeholder, body.palette-light textarea::placeholder { color: var(--grey-dim); } body.palette-light input:focus, body.palette-light textarea:focus, body.palette-light select:focus { border-color: var(--red); } /* ---- buttons ---------------------------------------------------------- */ body.palette-light .btn-ghost { color: var(--white); border-color: #d3d3dc; } body.palette-light .btn-ghost:hover { border-color: var(--red); color: var(--red); } /* ---- article ---------------------------------------------------------- */ /* style.css hard-codes the prose grey for a dark ground. */ body.palette-light .post-content { color: #33333a; } body.palette-light .post-content strong { color: var(--white); } body.palette-light .post-content blockquote { background: var(--black-2); color: var(--white); } body.palette-light .post-content th { background: var(--black-2); } body.palette-light .post-content table { background: #ffffff; } body.palette-light .post-content tbody tr:hover { background: rgba(217, 7, 17, 0.035); } body.palette-light .post-content pre, body.palette-light .post-content .wp-block-code { background: var(--black-2); } body.palette-light .post-content img { border-color: var(--border); } body.palette-light .post-banner { background: radial-gradient(ellipse at 35% 50%, rgba(217, 7, 17, 0.32), transparent 62%), linear-gradient(120deg, #ffe3e5, var(--black-2)); } body.palette-light .blog-card-img { background: radial-gradient(ellipse at 30% 40%, rgba(217, 7, 17, 0.34), transparent 62%), linear-gradient(135deg, #ffd9dc, var(--black-2) 72%); } body.palette-light .blog-card-img.alt-1 { background: radial-gradient(ellipse at 70% 30%, rgba(217, 7, 17, 0.3), transparent 62%), linear-gradient(225deg, #ffe0e2, var(--black-2) 75%); } body.palette-light .blog-card-img.alt-2 { background: radial-gradient(ellipse at 50% 80%, rgba(255, 31, 44, 0.26), transparent 62%), linear-gradient(160deg, var(--charcoal), #ffd7da 92%); } body.palette-light .featured-img { background: radial-gradient(ellipse at 40% 50%, rgba(217, 7, 17, 0.34), transparent 65%), linear-gradient(120deg, #ffdfe1, var(--black-2)); } /* Card image grid lines were white hairlines. */ body.palette-light .blog-card-img::after { background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px); } body.palette-light .blog-tag { background: rgba(255, 255, 255, 0.9); border-color: rgba(217, 7, 17, 0.45); } /* ---- table of contents ------------------------------------------------ */ body.palette-light .post-toc { border-left-color: var(--border); } body.palette-light .post-toc-item a:hover { color: var(--white); } body.palette-light .post-toc-item.is-active > a { color: var(--red); } @media (max-width: 1080px) { body.palette-light .post-toc { background: #ffffff; } } /* ---- misc ------------------------------------------------------------- */ body.palette-light .filter-btn { color: var(--grey); border-color: #d3d3dc; } body.palette-light .filter-btn.active { color: #fff; } body.palette-light .share-btn { border-color: #d3d3dc; } body.palette-light .progress-bar { box-shadow: 0 0 10px rgba(217, 7, 17, 0.35); } body.palette-light .founder-avatar { color: #fff; } body.palette-light .step-num { color: rgba(217, 7, 17, 0.22); }