/* ============================================================= framework.css — Dark-theme overrides for Bootstrap cascade Loaded LAST in so these rules beat bootstrap.min.css. Theme: glass/translucent — NO solid grey boxes. ============================================================= */ /* ---------------------------------------------------------- 1. CARD — glass / translucent (not solid grey) Bootstrap defines .card { background-color: #fff } ---------------------------------------------------------- */ .card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 2px; color: var(--text, #e8e8e8); } .card-accent { background: rgba(0, 255, 136, 0.03); border-color: rgba(0, 255, 136, 0.18); } .card-accent:hover { border-color: rgba(0, 255, 136, 0.38); background: rgba(0, 255, 136, 0.05); } .card-hover { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 255, 136, 0.06); border-color: rgba(0, 255, 136, 0.28); } .card-body { background: transparent; color: inherit; } /* ---------------------------------------------------------- 2. TEXT-MUTED — Bootstrap forces #6c757d !important which is near-invisible on a dark background. Override it. ---------------------------------------------------------- */ .text-muted { color: rgba(255, 255, 255, 0.55) !important; } /* ---------------------------------------------------------- 3. PRE / CODE — dark, never inherit Bootstrap's light bg ---------------------------------------------------------- */ pre { background: rgba(0, 0, 0, 0.35); color: #b8f5d8; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 2px; } code { background: transparent; color: var(--accent, #00ff88); } pre code { background: transparent; color: inherit; } /* ---------------------------------------------------------- 4. LANGUAGE TAB BUTTON STATES ---------------------------------------------------------- */ .fw-tab { color: rgba(255, 255, 255, 0.38); background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 1.1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } .fw-tab:hover { color: rgba(255, 255, 255, 0.65); } .fw-tab.fw-tab-active { color: #00ff88; border-bottom-color: #00ff88; } /* ---------------------------------------------------------- 5. BODY TEXT READABILITY — global framework page rules Ensure no text colour reverts to a Bootstrap default that would be dark on dark. ---------------------------------------------------------- */ p, li, span, div { /* Do not set a catch-all color here — too broad. */ } /* Bootstrap sets body color to #212529 which would affect any element that inherits. Force the body to stay light. */ body { color: var(--text, #e8e8e8); } /* Bootstrap's .text-secondary is also dark */ .text-secondary { color: rgba(255, 255, 255, 0.5) !important; } /* ---------------------------------------------------------- 6. HERO HEADING SPACING — match .section-hero padding Qore gives .section-hero .sect-title { padding-top: 219px } which creates the dramatic open dark space before the heading. .section-framework-main does not inherit that so we add it here. ---------------------------------------------------------- */ .section-framework-main .sect-title { padding-top: 219px; padding-bottom: 63px; } @media (max-width: 1199px) { .section-framework-main .sect-title { padding-top: 88px; padding-bottom: 48px; } } /* ---------------------------------------------------------- 7. LIST GROUP inside cards ---------------------------------------------------------- */ .card .list-group-item { background: transparent; border-color: rgba(255, 255, 255, 0.06); color: var(--text, #e8e8e8); }