/* ========================================================= * ROIthink shared site CSS — light theme override + toggle UI * Loaded on top of each page's inline styles. * Pages remain dark by default; setting data-theme="light" on * swaps the variables. * =========================================================*/ /* Light theme variable overrides */ html[data-theme="light"] { --bg: #FAFAFA; --ink: #0A0A0A; --ink-2: rgba(10,10,10,.74); --ink-3: rgba(10,10,10,.55); --ink-4: rgba(10,10,10,.32); --line: rgba(10,10,10,.10); --line-2: rgba(10,10,10,.18); --card: rgba(0,0,0,.025); --card-hover: rgba(0,0,0,.05); --black: #FFFFFF; /* Yellow stays the same in both themes */ /* yellow-soft and yellow-line are slightly stronger on light bg */ --yellow-soft: rgba(248,204,13,.18); --yellow-line: rgba(248,204,13,.45); } /* Light-mode adjustments for components that hard-code dark colors */ html[data-theme="light"] body { background: var(--bg); color: var(--ink); } html[data-theme="light"] .bg::before { background: radial-gradient(circle, rgba(248,204,13,.30), transparent 60%); opacity: .6; } html[data-theme="light"] .bg::after { background: radial-gradient(circle, rgba(248,204,13,.18), transparent 60%); opacity: .4; } html[data-theme="light"] .bg-grid { background-image: linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px); } /* Topbar in light mode: white blur instead of black */ html[data-theme="light"] nav.top, html[data-theme="light"] header.topbar, html[data-theme="light"] nav.nav-bar { background: rgba(255,255,255,.82); } /* Hero marks etc that use white logos need to swap to dark in light mode */ html[data-theme="light"] .logo img, html[data-theme="light"] .hero-mark { filter: invert(1) hue-rotate(180deg); } /* Don't invert assets explicitly tagged as "no-invert" (e.g. SVG icons that read both modes) */ html[data-theme="light"] .no-invert, html[data-theme="light"] .no-invert img { filter: none; } /* Buttons: ghost button text needs to be dark in light mode */ html[data-theme="light"] .btn-ghost { color: var(--ink); } /* Marquee bar: yellow stays, but the · separator already uses var(--yellow) */ /* ========================================================= * Toggle UI — shared across all marketing pages * =========================================================*/ .site-toggles { display: inline-flex; align-items: center; gap: 8px; } .toggle-pill { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 11px; background: rgba(0,0,0,.18); } html[data-theme="light"] .toggle-pill { background: rgba(255,255,255,.6); } .toggle-pill button { background: transparent; border: 0; color: var(--ink-3); padding: 6px 11px; cursor: pointer; font: inherit; font-weight: 600; letter-spacing: .12em; transition: all .12s ease; line-height: 1; } .toggle-pill button.active { background: var(--yellow); color: #000; } .toggle-pill button:hover:not(.active) { color: var(--ink); } /* Theme toggle: single icon button alternating ☀ / ☾ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; transition: all .15s ease; font-size: 14px; line-height: 1; } .theme-toggle:hover { color: var(--yellow); border-color: var(--yellow-line); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } html[data-theme="light"] .theme-toggle .icon-sun { display: inline; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* On mobile, hide the toggles' labels but keep the controls compact */ @media (max-width: 700px) { .site-toggles { gap: 6px; } .toggle-pill button { padding: 5px 9px; font-size: 10px; } .theme-toggle { width: 28px; height: 28px; } } /* ========================================================= * Bilingual content visibility helpers * =========================================================*/ [data-es] { display: none; } html[lang="es"] [data-en] { display: none; } html[lang="es"] [data-es] { display: inline; } /* For block-level Spanish content (sections, divs), allow display:block */ html[lang="es"] section[data-es], html[lang="es"] div[data-es], html[lang="es"] aside[data-es], html[lang="es"] li[data-es] { display: block; } /* When marking individual lines/blocks, sometimes you need block display */ html[lang="es"] .es-block[data-es] { display: block; }