/* ================================================================= Quima.DEV — Unified Theme Layer ───────────────────────────────────────────────────────────────── Per-subsite professional palettes + cross-page layout stability. attributes set by FOUC pre-apply script (theme.js): data-qsite = "hub" | "rat" | "builder" | "loader" data-theme = "dark" | "light" ================================================================= */ :root { --qs-bar-h: 38px; } /* ================================================================= GLOBAL PREMIUM STYLES ================================================================= */ /* Custom Text Selection */ ::selection { background-color: rgba(62, 212, 255, 0.25); color: #fff; } ::-moz-selection { background-color: rgba(62, 212, 255, 0.25); color: #fff; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 10px; background-color: rgba(7, 9, 26, 1); } ::-webkit-scrollbar-thumb { background-color: #1b2239; border-radius: 5px; border: 2px solid rgba(7, 9, 26, 1); } ::-webkit-scrollbar-thumb:hover { background-color: #2a3354; } /* Scroll-to-Top Button */ .scroll-to-top { position: fixed; bottom: 80px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(7, 9, 26, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(62, 212, 255, 0.2); color: #8fa0c8; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(15px) scale(0.9); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .scroll-to-top:hover { background: rgba(62, 212, 255, 0.1); color: #fff; border-color: rgba(62, 212, 255, 0.4); transform: translateY(-3px) scale(1.05); } .scroll-to-top svg { width: 20px; height: 20px; fill: currentColor; } /* ================================================================= 1. SUITE-BAR — always inverse of the page theme ================================================================= */ html[data-theme="dark"] { --qs-bar-bg: #f3f5fb; --qs-bar-border: #d4d8e6; --qs-bar-fg: #1a1f2e; --qs-bar-fg-muted: #525876; --qs-bar-fg-hover: #0a0d1a; --qs-bar-hover-bg: rgba(101, 88, 211, .10); --qs-bar-active-bg: linear-gradient(135deg, rgba(101,88,211,.18), rgba(149,112,232,.18)); --qs-bar-logo-flt: none; } html[data-theme="light"] { --qs-bar-bg: #050816; --qs-bar-border: #1c2240; --qs-bar-fg: #e6ebff; --qs-bar-fg-muted: #9aa3c8; --qs-bar-fg-hover: #ffffff; --qs-bar-hover-bg: rgba(74, 158, 255, .12); --qs-bar-active-bg: linear-gradient(135deg, rgba(74,158,255,.22), rgba(124,92,255,.22)); --qs-bar-logo-flt: brightness(0) invert(1); } .qsuite-bar { background: var(--qs-bar-bg) !important; border-bottom: 1px solid var(--qs-bar-border) !important; height: var(--qs-bar-h) !important; box-sizing: border-box !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif !important; font-size: 12.5px !important; font-weight: 600 !important; } .qsuite-inner { height: var(--qs-bar-h) !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between !important; line-height: 1 !important; font-size: inherit !important; } .qsuite-home { display: inline-flex !important; align-items: center !important; gap: 8px !important; line-height: 1 !important; height: 22px !important; font-size: 12.5px !important; font-weight: 700 !important; } .qsuite-home, .qsuite-home span { color: var(--qs-bar-fg) !important; line-height: 1 !important; } .qsuite-home img { filter: var(--qs-bar-logo-flt) !important; width: 18px !important; height: 18px !important; display: block !important; flex-shrink: 0 !important; } .qsuite-nav { display: inline-flex !important; align-items: center !important; line-height: 1 !important; } .qsuite-nav a { color: var(--qs-bar-fg-muted) !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; } .qsuite-nav a:hover { background: var(--qs-bar-hover-bg) !important; color: var(--qs-bar-fg-hover) !important; } .qsuite-nav a.active { background: var(--qs-bar-active-bg) !important; color: var(--qs-bar-fg-hover) !important; } /* ================================================================= 2. CROSS-PAGE LAYOUT STABILITY Same brand block at the same Y on every subsite. ================================================================= */ html[data-qsite] body { padding-top: calc(var(--qs-bar-h) + 64px) !important; } /* RAT navbar top must clear the suite bar */ html[data-qsite="control"] .navbar { top: var(--qs-bar-h) !important; } html[data-qsite] .topbar, html[data-qsite] header.topbar, html[data-qsite] .navbar { height: 64px !important; min-height: 64px !important; top: var(--qs-bar-h) !important; } html[data-qsite] .topbar .inner, html[data-qsite] .topbar .container, html[data-qsite] .navbar .navbar-container, html[data-qsite] .navbar > .container, html[data-qsite] .navbar .nav-container { height: 64px !important; min-height: 64px !important; display: flex !important; align-items: center !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 32px !important; box-sizing: border-box !important; } html[data-qsite] .topbar .brand img, html[data-qsite] .navbar .nav-logo-img, html[data-qsite] .nav-logo .nav-logo-img { height: 32px !important; width: 32px !important; object-fit: contain; } html[data-qsite] .topbar .brand, html[data-qsite] .navbar .nav-logo { display: flex !important; align-items: center !important; gap: 12px !important; } /* Brand text — same visual weight & line-height across all subsites */ html[data-qsite] .topbar .brand .word, html[data-qsite] .navbar .nav-logo .word { font-size: 1.05rem !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -.02em !important; } html[data-qsite] .topbar .brand .word small, html[data-qsite] .navbar .nav-logo .word small { display: block !important; font-size: .58rem !important; font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase !important; margin-top: 3px !important; } /* Anchor scroll offset matches fixed header height (38 + 64 = 102 → 112 with breathing room) */ html[data-qsite] { scroll-padding-top: 112px !important; } html[data-qsite] .footer-logo { height: 28px !important; width: auto !important; } /* ================================================================= 3. HUB ================================================================= */ html[data-qsite="hub"][data-theme="dark"] { --page-bg: #030509; --page-fg: #e6ebff; --surface: #0c1226; --surface-2: #131a36; --border: #1c2240; --muted: #a8b0d4; --accent: #4a9eff; --accent-2: #7c5cff; } html[data-qsite="hub"][data-theme="light"] { --page-bg: #f3f5fb; --page-fg: #1a1f2e; --surface: #ffffff; --surface-2: #f7f8fc; --border: #dde1ee; --muted: #525876; --accent: #3b6cf5; --accent-2: #6e3eff; } /* ================================================================= 4. BUILDER ================================================================= */ html[data-qsite="builder"][data-theme="dark"] { --page-bg: #07091a; --page-fg: #e7ebff; --surface: #0e1226; --surface-2: #161b34; --border: #232a4a; --muted: #a3acd3; --accent: #4a9eff; --accent-2: #7c5cff; } html[data-qsite="builder"][data-theme="light"] { --page-bg: #eef0f8; --page-fg: #181c2e; --surface: #ffffff; --surface-2: #f4f6fc; --border: #d6dbeb; --muted: #4a5170; --accent: #4659e8; --accent-2: #7c5cff; /* builder.css uses its own var names — override them here */ --bg: #eef0f8; --bg-2: #e4e7f4; --sur: #ffffff; --sur-2: #f4f6fc; --brd: #d6dbeb; --brd-2: #c8cfde; --txt: #181c2e; --txt-2: #4a5170; --mut: #6a7299; } /* ================================================================= 5. LOADER ================================================================= */ html[data-qsite="loader"][data-theme="dark"] { --page-bg: #07091a; --page-fg: #e6ebff; --surface: #0e1326; --surface-2: #171c36; --border: #232944; --muted: #a3acd3; --accent: #4a9eff; --accent-2: #7c5cff; } html[data-qsite="loader"][data-theme="light"] { --page-bg: #eef1f7; --page-fg: #131626; --surface: #ffffff; --surface-2: #f5f7fc; --border: #d6dcec; --muted: #4a5170; --accent: #2f7df3; --accent-2: #6e3eff; /* Loader stylesheet uses these private var names — override for light */ --bg: #eef1f7; --bg-2: #e4e8f4; --sur: #ffffff; --sur-2: #f5f7fc; --brd: #d6dcec; --brd-2: #c8cfde; --txt: #131626; --txt-2: #4a5170; --mut: #6a7299; --blue: #2f7df3; --cyan: #0aa5d1; --violet: #6e3eff; --grn: #1a9d4f; --red: #d23a4a; } html[data-qsite="hub"][data-theme="light"] { /* hub.css uses these private var names — override for light */ --brd: #d6dbeb; --brd2: #c8cfde; --txt2: #4a5170; --blue: #2f7df3; --violet: #6e3eff; --cyan: #0aa5d1; } /* ================================================================= 6. RAT (light-native, dark complement added) ================================================================= */ html[data-qsite="control"][data-theme="light"] { --bg-primary: #eef0f6; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f6f7fc; --border: #d4d8e6; --border-hover: #b4bbd2; --text-primary: #1c1f2e; --text-secondary:#4d5270; --text-muted: #7a809b; --accent: #6558d3; --accent-light: #9570e8; } html[data-qsite="control"][data-theme="dark"] { --bg-primary: #0a0e1a; --bg-secondary: #11162a; --bg-card: #161c34; --bg-card-hover: #1d2440; --border: #242a48; --border-hover: #353d62; --text-primary: #e9ecff; --text-secondary:#aab1d4; --text-muted: #757ca0; --accent: #8a7df0; --accent-light: #b09bff; } /* ================================================================= 7. BODY / SURFACES — only for subsites that don't already wire body/section colors via their own --bg-* tokens. (RAT's stylesheet uses --bg-primary on body itself; nothing to do.) ================================================================= */ html[data-qsite="hub"] body, html[data-qsite="builder"] body, html[data-qsite="loader"] body { background: var(--page-bg) !important; color: var(--page-fg) !important; transition: background .25s ease, color .25s ease; } /* Light-mode topbar repaint for the originally-dark subsites */ html[data-qsite="hub"][data-theme="light"] .topbar, html[data-qsite="builder"][data-theme="light"] .topbar, html[data-qsite="loader"][data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.88) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: blur(12px); color: var(--page-fg) !important; } html[data-qsite="hub"][data-theme="light"] .topbar a, html[data-qsite="hub"][data-theme="light"] .topbar .brand, html[data-qsite="hub"][data-theme="light"] .topbar .brand .word, html[data-qsite="hub"][data-theme="light"] .top-links a, html[data-qsite="builder"][data-theme="light"] .topbar a, html[data-qsite="builder"][data-theme="light"] .topbar .brand, html[data-qsite="builder"][data-theme="light"] .topbar .brand .word, html[data-qsite="builder"][data-theme="light"] .top-links a, html[data-qsite="loader"][data-theme="light"] .topbar a, html[data-qsite="loader"][data-theme="light"] .topbar .brand, html[data-qsite="loader"][data-theme="light"] .topbar .brand .word, html[data-qsite="loader"][data-theme="light"] .top-links a { color: var(--page-fg) !important; } html[data-qsite="hub"][data-theme="light"] .topbar .brand .word small, html[data-qsite="builder"][data-theme="light"] .topbar .brand .word small, html[data-qsite="loader"][data-theme="light"] .topbar .brand .word small { color: var(--muted) !important; } html[data-qsite="hub"][data-theme="light"] .top-links a:hover, html[data-qsite="builder"][data-theme="light"] .top-links a:hover, html[data-qsite="loader"][data-theme="light"] .top-links a:hover { color: var(--accent) !important; } /* Dark-mode RAT navbar */ html[data-qsite="control"][data-theme="dark"] body { background: var(--bg-primary) !important; color: var(--text-primary) !important; } html[data-qsite="control"][data-theme="dark"] .navbar { background: rgba(10, 14, 26, .85) !important; border-bottom: 1px solid var(--border) !important; backdrop-filter: blur(12px); } html[data-qsite="control"][data-theme="dark"] .navbar .nav-logo .word { color: var(--text-primary) !important; } html[data-qsite="control"][data-theme="dark"] .navbar .nav-logo .word small { color: var(--text-muted) !important; } /* Light-mode RAT navbar text */ html[data-qsite="control"][data-theme="light"] .navbar .nav-logo .word { color: var(--text-primary) !important; } html[data-qsite="control"][data-theme="light"] .navbar .nav-logo .word small { color: var(--text-muted) !important; } /* Cards/sections light-mode soft repaint (no aggressive blanket) */ html[data-qsite="hub"][data-theme="light"] .pcard, html[data-qsite="hub"][data-theme="light"] .card, html[data-qsite="hub"][data-theme="light"] .legal-content, html[data-qsite="hub"][data-theme="light"] .legal-section, html[data-qsite="builder"][data-theme="light"] .pcard, html[data-qsite="builder"][data-theme="light"] .card, html[data-qsite="builder"][data-theme="light"] .mod, html[data-qsite="builder"][data-theme="light"] .feat, html[data-qsite="builder"][data-theme="light"] .step, html[data-qsite="builder"][data-theme="light"] .tech-card, html[data-qsite="builder"][data-theme="light"] .b-stat, html[data-qsite="builder"][data-theme="light"] .note, html[data-qsite="builder"][data-theme="light"] .use-card, html[data-qsite="builder"][data-theme="light"] .panel-frame, html[data-qsite="builder"][data-theme="light"] .panel-bar, html[data-qsite="builder"][data-theme="light"] .callout, html[data-qsite="builder"][data-theme="light"] .legal-content, html[data-qsite="builder"][data-theme="light"] .legal-section, html[data-qsite="loader"][data-theme="light"] .pcard, html[data-qsite="loader"][data-theme="light"] .card, html[data-qsite="loader"][data-theme="light"] .feat, html[data-qsite="loader"][data-theme="light"] .step, html[data-qsite="loader"][data-theme="light"] .how-card, html[data-qsite="loader"][data-theme="light"] .tech-card, html[data-qsite="loader"][data-theme="light"] .note, html[data-qsite="loader"][data-theme="light"] .callout, html[data-qsite="loader"][data-theme="light"] .panel-frame, html[data-qsite="loader"][data-theme="light"] .panel-bar, html[data-qsite="loader"][data-theme="light"] .legal-content, html[data-qsite="loader"][data-theme="light"] .legal-section { background: var(--surface) !important; border-color: var(--border) !important; color: var(--page-fg) !important; box-shadow: 0 2px 12px rgba(20, 30, 60, .06); } /* Inside-card text — make sure hard-coded white/grey stays readable in light */ html[data-qsite="builder"][data-theme="light"] .step *, html[data-qsite="builder"][data-theme="light"] .tech-card *, html[data-qsite="builder"][data-theme="light"] .b-stat *, html[data-qsite="builder"][data-theme="light"] .note *, html[data-qsite="builder"][data-theme="light"] .use-card *, html[data-qsite="builder"][data-theme="light"] .feat *, html[data-qsite="builder"][data-theme="light"] .mod *, html[data-qsite="loader"][data-theme="light"] .step *, html[data-qsite="loader"][data-theme="light"] .how-card *, html[data-qsite="loader"][data-theme="light"] .tech-card *, html[data-qsite="loader"][data-theme="light"] .feat *, html[data-qsite="loader"][data-theme="light"] .note *, html[data-qsite="loader"][data-theme="light"] .callout *, html[data-qsite="hub"][data-theme="light"] .pcard *, html[data-qsite="hub"][data-theme="light"] .card * { color: inherit; } /* But keep code/kbd visually distinct */ html[data-qsite="builder"][data-theme="light"] .step code, html[data-qsite="builder"][data-theme="light"] .tech-card code, html[data-qsite="builder"][data-theme="light"] .note code, html[data-qsite="loader"][data-theme="light"] .step code, html[data-qsite="loader"][data-theme="light"] .how-card code, html[data-qsite="loader"][data-theme="light"] .tech-card code { color: #e6ebff !important; } /* Spec tables */ html[data-qsite="builder"][data-theme="light"] table.spec-tbl, html[data-qsite="loader"][data-theme="light"] table.spec-tbl { background: var(--surface) !important; color: var(--page-fg) !important; border-color: var(--border) !important; } html[data-qsite="builder"][data-theme="light"] table.spec-tbl th, html[data-qsite="builder"][data-theme="light"] table.spec-tbl td, html[data-qsite="loader"][data-theme="light"] table.spec-tbl th, html[data-qsite="loader"][data-theme="light"] table.spec-tbl td { color: var(--page-fg) !important; border-color: var(--border) !important; } /* Alt strips */ html[data-qsite="hub"][data-theme="light"] section.alt, html[data-qsite="builder"][data-theme="light"] section.alt, html[data-qsite="loader"][data-theme="light"] section.alt { background: var(--surface-2) !important; color: var(--page-fg) !important; } /* Code / pre stays dark in both themes for legibility */ html[data-theme="light"] pre, html[data-theme="light"] code:not(.inline-light) { background: #0e1226 !important; color: #e6ebff !important; border-color: #232a4a !important; } /* Footer light mode for dark subsites */ html[data-qsite="hub"][data-theme="light"] footer, html[data-qsite="builder"][data-theme="light"] footer, html[data-qsite="loader"][data-theme="light"] footer { background: var(--surface-2) !important; border-top: 1px solid var(--border) !important; color: var(--muted) !important; } /* Hero / heading text — make sure it inherits readable color in light mode. The dark subsites hard-code white text on hero h1 etc. Override gracefully. */ html[data-qsite="hub"][data-theme="light"] .hero, html[data-qsite="builder"][data-theme="light"] .hero, html[data-qsite="loader"][data-theme="light"] .hero, html[data-qsite="hub"][data-theme="light"] section.hero, html[data-qsite="builder"][data-theme="light"] section.hero, html[data-qsite="loader"][data-theme="light"] section.hero { background: var(--surface-2) !important; } html[data-qsite="hub"][data-theme="light"] h1, html[data-qsite="hub"][data-theme="light"] h2, html[data-qsite="hub"][data-theme="light"] h3, html[data-qsite="hub"][data-theme="light"] h4, html[data-qsite="builder"][data-theme="light"] h1, html[data-qsite="builder"][data-theme="light"] h2, html[data-qsite="builder"][data-theme="light"] h3, html[data-qsite="builder"][data-theme="light"] h4, html[data-qsite="loader"][data-theme="light"] h1, html[data-qsite="loader"][data-theme="light"] h2, html[data-qsite="loader"][data-theme="light"] h3, html[data-qsite="loader"][data-theme="light"] h4 { color: var(--page-fg) !important; } /* builder.css hard-coded white text on elements not covered by heading rules */ html[data-qsite="builder"][data-theme="light"] .b-prose strong, html[data-qsite="builder"][data-theme="light"] .sib-name { color: var(--page-fg) !important; } /* .dim spans in hero headings — nearly invisible white on light bg, override */ html[data-qsite="hub"][data-theme="light"] .dim, html[data-qsite="builder"][data-theme="light"] .dim, html[data-qsite="loader"][data-theme="light"] .dim { color: rgba(20, 30, 70, 0.42) !important; } html[data-qsite="hub"][data-theme="light"] p, html[data-qsite="builder"][data-theme="light"] p, html[data-qsite="loader"][data-theme="light"] p, html[data-qsite="hub"][data-theme="light"] li, html[data-qsite="builder"][data-theme="light"] li, html[data-qsite="loader"][data-theme="light"] li { color: var(--page-fg) !important; } html[data-qsite="hub"][data-theme="light"] .muted, html[data-qsite="builder"][data-theme="light"] .muted, html[data-qsite="loader"][data-theme="light"] .muted, html[data-qsite="hub"][data-theme="light"] .lead, html[data-qsite="builder"][data-theme="light"] .lead, html[data-qsite="loader"][data-theme="light"] .lead, html[data-qsite="hub"][data-theme="light"] .sub, html[data-qsite="builder"][data-theme="light"] .sub, html[data-qsite="loader"][data-theme="light"] .sub { color: var(--muted) !important; } /* Anchors */ html[data-qsite="hub"][data-theme="light"] a:not([class]), html[data-qsite="builder"][data-theme="light"] a:not([class]), html[data-qsite="loader"][data-theme="light"] a:not([class]) { color: var(--accent); } /* Inline highlights / em used for accent words in headings */ html[data-qsite="builder"][data-theme="light"] h1 em, html[data-qsite="builder"][data-theme="light"] h2 em, html[data-qsite="builder"][data-theme="light"] .brand .word em, html[data-qsite="loader"][data-theme="light"] h1 em, html[data-qsite="loader"][data-theme="light"] h2 em, html[data-qsite="loader"][data-theme="light"] .brand .word em, html[data-qsite="hub"][data-theme="light"] h1 em, html[data-qsite="hub"][data-theme="light"] h2 em, html[data-qsite="hub"][data-theme="light"] .brand .word em { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; } /* ================================================================= 8. FOOTER LOGO — theme-aware filter Dark navbar → flip to white. Light navbar → natural. ================================================================= */ html[data-theme="dark"] .footer-logo { filter: brightness(0) invert(1) !important; } html[data-theme="light"] .footer-logo { filter: none !important; } /* Hub product cards: blue Q → black on light, white on dark (clean silhouette) */ html[data-qsite="hub"][data-theme="light"] .pcard-icon img { filter: brightness(0) saturate(0) !important; } html[data-qsite="hub"][data-theme="dark"] .pcard-icon img { filter: brightness(0) invert(1) !important; } /* ================================================================= 9. FLOATING THEME TOGGLE ================================================================= */ .qtheme-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 1200; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--qs-bar-border); background: var(--qs-bar-bg); color: var(--qs-bar-fg); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); transition: transform .18s ease, background .25s ease, color .25s ease, border-color .25s ease; font-family: 'Inter', sans-serif; } .qtheme-toggle:hover { transform: translateY(-2px) scale(1.06); } .qtheme-toggle svg { width: 22px; height: 22px; display: block; } .qtheme-toggle .qt-sun { display: none; } .qtheme-toggle .qt-moon { display: block; } html[data-theme="light"] .qtheme-toggle .qt-sun { display: block; } html[data-theme="light"] .qtheme-toggle .qt-moon { display: none; } @media (max-width: 480px) { .qtheme-toggle { width: 42px; height: 42px; right: 14px; bottom: 14px; } .qtheme-toggle svg { width: 18px; height: 18px; } } html { color-scheme: dark light; } /* ================================================================= 10. LIGHT-MODE INVISIBILITY OVERRIDES (PROJECT-WIDE) Targets all hard-coded white text and hidden ghost numbers in subsite stylesheets that don't pick up theme.css var changes. ================================================================= */ /* ---- HUB ----------------------------------------------------- */ /* Big background "01 02 03" ghost numbers — visible on light bg */ html[data-qsite="hub"][data-theme="light"] .pcard-num { color: rgba(20, 30, 70, 0.06) !important; } html[data-qsite="hub"][data-theme="light"] .pcard:hover .pcard-num { color: rgba(20, 30, 70, 0.10) !important; } /* pcard tag (REMOTE ADMINISTRATION TOOL etc.) accent already coloured */ html[data-qsite="hub"][data-theme="light"] .pcard-tag { color: var(--accent) !important; } html[data-qsite="hub"][data-theme="light"] .pr-rat .pcard-tag { color: #2f7df3 !important; } html[data-qsite="hub"][data-theme="light"] .pr-core .pcard-tag { color: #6e3eff !important; } html[data-qsite="hub"][data-theme="light"] .pr-loader .pcard-tag { color: #0aa5d1 !important; } /* pcard heading + body */ html[data-qsite="hub"][data-theme="light"] .pcard h3, html[data-qsite="hub"][data-theme="light"] .pcard-title { color: var(--page-fg) !important; } html[data-qsite="hub"][data-theme="light"] .pcard-desc, html[data-qsite="hub"][data-theme="light"] .pcard p { color: var(--muted) !important; } /* chips / tags inside hub cards and split-preview */ html[data-qsite="hub"][data-theme="light"] .chip, html[data-qsite="hub"][data-theme="light"] .sp-tags span { color: var(--page-fg) !important; background: rgba(20, 30, 70, 0.04) !important; border-color: var(--border) !important; } /* hero gray dim text — keep readable */ html[data-qsite="hub"][data-theme="light"] .hero h1 { color: var(--page-fg) !important; } html[data-qsite="hub"][data-theme="light"] .hero h1 .dim { color: rgba(26,31,46,.32) !important; } /* Enter Quima ... CTA buttons */ html[data-qsite="hub"][data-theme="light"] .pcard .btn-ghost, html[data-qsite="hub"][data-theme="light"] .btn-ghost { color: var(--page-fg) !important; border-color: var(--border) !important; } html[data-qsite="hub"][data-theme="light"] .pcard .btn-ghost:hover, html[data-qsite="hub"][data-theme="light"] .btn-ghost:hover { background: rgba(20, 30, 70, 0.04) !important; } /* pcard-enter CTA bar */ html[data-qsite="hub"][data-theme="light"] .pcard-enter { color: var(--muted) !important; border-color: var(--border) !important; } /* Suite panel is a terminal widget — stays dark even in light mode */ html[data-qsite="hub"][data-theme="light"] .suite-panel { color: #c8d0f0 !important; } html[data-qsite="hub"][data-theme="light"] .suite-panel .sp-prod-info strong { color: #e0e6ff !important; } html[data-qsite="hub"][data-theme="light"] .suite-panel .sp-prod-info span { color: #8890b8 !important; } html[data-qsite="hub"][data-theme="light"] .suite-panel .sp-tags span { color: #8890b8 !important; background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } html[data-qsite="hub"][data-theme="light"] .suite-panel .sp-idx { color: #6a7a9e !important; } html[data-qsite="hub"][data-theme="light"] .suite-panel .sp-title { color: #8890b8 !important; } html[data-qsite="hub"][data-theme="light"] .suite-panel .sp-cmd { color: #3ecf8e !important; } html[data-qsite="hub"][data-theme="light"] .suite-panel .sp-online { color: #3ecf8e !important; } /* ---- LOADER -------------------------------------------------- */ /* Hero h1, flow labels, card heads */ html[data-qsite="loader"][data-theme="light"] .hero h1, html[data-qsite="loader"][data-theme="light"] .flow-label, html[data-qsite="loader"][data-theme="light"] .how-card h4, html[data-qsite="loader"][data-theme="light"] .feat h4, html[data-qsite="loader"][data-theme="light"] .obf h3, html[data-qsite="loader"][data-theme="light"] .obf-name + p, html[data-qsite="loader"][data-theme="light"] .price-amt { color: var(--page-fg) !important; } /* Body paragraphs across cards */ html[data-qsite="loader"][data-theme="light"] .feat p, html[data-qsite="loader"][data-theme="light"] .how-card p, html[data-qsite="loader"][data-theme="light"] .obf p, html[data-qsite="loader"][data-theme="light"] .price-features li, html[data-qsite="loader"][data-theme="light"] .flow-sub, html[data-qsite="loader"][data-theme="light"] .price-sub, html[data-qsite="loader"][data-theme="light"] .price-period { color: var(--muted) !important; } /* Feat/how/obf/price card surfaces */ html[data-qsite="loader"][data-theme="light"] .feat, html[data-qsite="loader"][data-theme="light"] .how-card, html[data-qsite="loader"][data-theme="light"] .obf, html[data-qsite="loader"][data-theme="light"] .price-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--page-fg) !important; } /* Featured pricing card distinct */ html[data-qsite="loader"][data-theme="light"] .price-card.featured { background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%) !important; border-color: rgba(47, 125, 243, 0.30) !important; } /* Ghost / outline buttons (Telegram, Tox, request_access, price-btn) */ html[data-qsite="loader"][data-theme="light"] .btn-ghost, html[data-qsite="loader"][data-theme="light"] .price-btn { color: var(--page-fg) !important; border-color: var(--border) !important; background: transparent !important; } html[data-qsite="loader"][data-theme="light"] .btn-ghost:hover, html[data-qsite="loader"][data-theme="light"] .price-btn:hover { background: rgba(20, 30, 70, 0.04) !important; } /* Hard-coded white inside obf / strong / contact heading */ html[data-qsite="loader"][data-theme="light"] .obf-name { color: var(--accent) !important; } html[data-qsite="loader"][data-theme="light"] strong, html[data-qsite="loader"][data-theme="light"] b { color: var(--page-fg) !important; } /* Footer link hover — was color:#fff */ html[data-qsite="loader"][data-theme="light"] .foot a:hover { color: var(--page-fg) !important; } /* Big number ghost on hub-style elements (hero stat numbers) */ html[data-qsite="loader"][data-theme="light"] .stat-num { color: var(--page-fg) !important; } /* ---- BUILDER (remainders) ----------------------------------- */ /* hardcoded white on inline tags / chips / step h4 etc. already covered earlier; add remaining ones */ html[data-qsite="builder"][data-theme="light"] .chip, html[data-qsite="builder"][data-theme="light"] .tag, html[data-qsite="builder"][data-theme="light"] .b-stat-num, html[data-qsite="builder"][data-theme="light"] .b-cta h3 { color: var(--page-fg) !important; } html[data-qsite="builder"][data-theme="light"] .chip, html[data-qsite="builder"][data-theme="light"] .tag { background: rgba(20, 30, 70, 0.04) !important; border-color: var(--border) !important; }