:root{ --bg:#f6f7f9; --card:#ffffff; --text:#141a22; --muted:#667085; --border:rgba(0,0,0,.08); /* Accent derived from your logo SVG (rgb(0,156,255)) */ --accent:#009cff; --accent-dark:#0b3a5d; --shadow:0 10px 30px rgba(15,23,42,.08); } html, body { height: 100%; } body{ background: radial-gradient(1100px 520px at 18% -10%, rgba(32,128,192,.14), transparent 60%), radial-gradient(900px 480px at 85% 0%, rgba(11,58,93,.08), transparent 55%), var(--bg); color:var(--text); } .navbar{ background:rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); } .navbar .navbar-brand{ padding-top:.25rem; padding-bottom:.25rem; } .brand-mark{height:44px;width:auto;display:block} /* Slightly smaller on very small screens to avoid wrapping */ @media (max-width: 360px){ .brand-mark{height:44px;width:auto;display:block} } .kicker{ text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; color:var(--muted); } .hero-title{ font-weight:720; letter-spacing:-.02em; } .hero-sub{ color:var(--muted); font-size:1.05rem; } .card{ background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); } .section-title{ font-weight:650; letter-spacing:-.01em; } .pill{ border:1px solid var(--border); border-radius:999px; padding:.38rem .78rem; font-size:.85rem; color:var(--muted); background:rgba(255,255,255,.65); } .btn-accent{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:650; } .btn-accent:hover{opacity:.92;color:#fff;} .btn-ghost:hover{ border-color: rgba(32,128,192,.45); color: var(--accent-dark); background: rgba(0,156,255,.08); } /* Readable hover/focus for the primary action button in light theme */ .btn-accent:focus,.btn-accent:hover{filter:brightness(.95);} /* Labels (e.g. OIB, Director) */ .text-label{color:var(--accent) !important;} /* Normal (non-monospace) emphasis callout */ .callout{ background: rgba(0,0,0,.03); padding: 1rem; border-radius: 12px; border:1px solid var(--border); } a.link-subtle{ color: var(--accent-dark); text-decoration:none; border-bottom:1px solid rgba(32,128,192,.35); } a.link-subtle:hover{border-bottom-color: rgba(32,128,192,.75);} .footer{ border-top:1px solid var(--border); color:var(--muted); background:rgba(255,255,255,.72); } .code-block{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background:#f1f3f5; padding:1rem; border-radius:12px; border:1px solid var(--border); color:#0f172a;} .badge-soft{ border:1px solid var(--border); background:rgba(255,255,255,.7); color:var(--accent-dark); font-weight:650; } .list-tight li{margin-bottom:.45rem;} .case-meta{color:var(--muted); font-size:.92rem;} .small-muted{color:var(--muted);} /* Theme toggle button */ .theme-toggle{ border:1px solid var(--border); background: rgba(255,255,255,.8); border-radius: 12px; padding: .45rem .6rem; line-height: 1; } /* ---------------- DARK THEME ---------------- */ /* Supports: (1) explicit via data-bs-theme="dark" on (2) automatic via prefers-color-scheme */ html[data-bs-theme="dark"], html[data-theme="dark"]{ --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#a7b0bf; --border:rgba(255,255,255,.12); --accent:#009cff; --accent-dark:#cfe9ff; --shadow:0 16px 40px rgba(0,0,0,.35); } html[data-theme="dark"] body{ background: radial-gradient(1000px 520px at 18% -10%, rgba(69,163,230,.18), transparent 60%), radial-gradient(900px 480px at 85% 0%, rgba(255,255,255,.05), transparent 55%), var(--bg); color:var(--text); } html[data-theme="dark"] .navbar{ background:rgba(11,18,32,.72); } html[data-theme="dark"] html[data-theme="dark"] .btn-ghost:hover{ border-color:rgba(69,163,230,.5); } html[data-theme="dark"] .pill{ background:rgba(255,255,255,.04); } html[data-theme="dark"] .code-block{background:rgba(255,255,255,.04); color:var(--text);} html[data-theme="dark"] .footer{ background:rgba(11,18,32,.65); } html[data-theme="dark"] .callout{background:rgba(255,255,255,.04);} /* Dark: pills must have blue text */ html[data-bs-theme="dark"] .pill, html[data-theme="dark"] .pill{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: var(--accent); } @media (prefers-color-scheme: dark){ html:not([data-theme]){ --bg:#0b1220; --card:#0f172a; --text:#e5e7eb; --muted:#a7b0bf; --border:rgba(255,255,255,.12); --accent:#009cff; --accent-dark:#cfe9ff; --shadow:0 16px 40px rgba(0,0,0,.35); } html:not([data-theme]) body{ background: radial-gradient(1000px 520px at 18% -10%, rgba(69,163,230,.18), transparent 60%), radial-gradient(900px 480px at 85% 0%, rgba(255,255,255,.05), transparent 55%), var(--bg); color:var(--text); } html:not([data-theme]) .navbar{ background:rgba(11,18,32,.72); } html:not([data-theme]) html:not([data-theme]) .btn-ghost:hover{ border-color:rgba(69,163,230,.5); } html:not([data-theme]) .pill{ background:rgba(255,255,255,.04); } html:not([data-theme]) .code-block{background:rgba(255,255,255,.04); color:var(--text);} html:not([data-theme]) .footer{ background:rgba(11,18,32,.65); } html:not([data-theme]) .callout{background:rgba(255,255,255,.04);} } @media (max-width: 576px){.brand-mark{height:36px}} .navbar-brand{display:flex;align-items:center;gap:.6rem} html[data-bs-theme="dark"] body{ background: radial-gradient(1000px 520px at 18% -10%, rgba(69,163,230,.18), transparent 60%), radial-gradient(900px 480px at 85% 0%, rgba(255,255,255,.05), transparent 55%), var(--bg); color:var(--text); } /* Restored btn-ghost baseline */ .btn-ghost{ border:1px solid var(--border); background:#fff; color:var(--accent-dark); font-weight:600; } /* --- Theme fixes (v9) --- */ :root[data-theme="light"] .btn-ghost{ background: #ffffff; color: var(--ink-strong); border: 1px solid rgba(12,18,28,.12); } :root[data-theme="light"] .btn-ghost:hover, :root[data-theme="light"] .btn-ghost:focus{ background: rgba(12,18,28,.04); border-color: rgba(12,18,28,.22); color: var(--ink-strong); } :root[data-theme="light"] .btn-accent:hover, :root[data-theme="light"] .btn-accent:focus{ filter: brightness(.92); } /* Make label/value pairs readable in dark mode cards */ :root[data-theme="dark"] .text-label{ color: rgba(152, 197, 255, .92); /* subtle logo-blue tint */ } :root[data-theme="dark"] .small-muted{ color: rgba(230, 238, 255, .82); } :root[data-theme="dark"] .card .muted, :root[data-theme="dark"] .muted{ color: rgba(230, 238, 255, .78); } .navbar .navbar-brand{ color: var(--ink-strong); } /* Dark: badges (including rounded-pill) must have blue text */ html[data-bs-theme="dark"] .badge, html[data-theme="dark"] .badge{ color: var(--accent) !important; background: rgba(255,255,255,.06) !important; /* subtle chip */ border: 1px solid rgba(255,255,255,.12); } /* Auto-dark (no explicit data-theme) */ @media (prefers-color-scheme: dark){ html:not([data-theme]) .badge{ color: var(--accent) !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12); } } /* Dark: secondary buttons subtle by default */ html[data-bs-theme="dark"] .btn-ghost, html[data-theme="dark"] .btn-ghost{ background: rgba(255,255,255,.06); color: var(--accent); border-color: rgba(255,255,255,.18); } /* On hover → clean white */ html[data-bs-theme="dark"] .btn-ghost:hover, html[data-bs-theme="dark"] .btn-ghost:focus, html[data-theme="dark"] .btn-ghost:hover, html[data-theme="dark"] .btn-ghost:focus{ background: #ffffff; color: var(--accent); border-color: rgba(12,18,28,.12); } /* Dark: theme toggle must be clearly readable */ html[data-bs-theme="dark"] .theme-toggle, html[data-theme="dark"] .theme-toggle{ background: rgba(255,255,255,.06); color: var(--accent); border-color: rgba(255,255,255,.18); } html[data-bs-theme="dark"] .theme-toggle:hover, html[data-theme="dark"] .theme-toggle:hover{ background: rgba(0,156,255,.12); border-color: rgba(0,156,255,.4); color: #fff; } /* ---- Make badges read as tags (not buttons) ---- */ .badge{ font-weight: 550; font-size: .82rem; letter-spacing: .01em; padding: .42rem .72rem; } /* Dark: badges stay blue text, but more subtle surface than buttons */ html[data-bs-theme="dark"] .badge, html[data-theme="dark"] .badge{ background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.10); color: rgba(0,156,255,.82) !important; /* still blue, less “CTA” */ } /* Auto-dark */ @media (prefers-color-scheme: dark){ html:not([data-theme]) .badge{ background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.10); color: rgba(0,156,255,.82) !important; } }