/* AppGantry site styles. * * Brand colour: vivid purple #9000FF. The same hue drives the docs * site (see docs/stylesheets/brand.css) so the two surfaces feel like * one product. * * Light/dark mode uses Bootstrap 5.3's native data-bs-theme attribute * set on . Default scheme follows the OS preference; users can * flip it via the theme toggle in the navbar (preference is persisted * to localStorage). * * Kept small on purpose \u2014 Bootstrap does the heavy lifting. */ :root, [data-bs-theme="light"] { --df-brand: #9000ff; --df-brand-hover: #7a00d9; --df-brand-soft: rgba(144, 0, 255, 0.08); /* Bootstrap colour-mode overrides. We only redirect the primary * channel; the rest of the palette stays Bootstrap default. */ --bs-primary: var(--df-brand); --bs-primary-rgb: 144, 0, 255; --bs-link-color: var(--df-brand); --bs-link-hover-color: var(--df-brand-hover); --bs-link-color-rgb: 144, 0, 255; --df-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Inter", "Roboto", sans-serif; } [data-bs-theme="dark"] { /* Slightly lighter brand on dark for legibility on darker * backgrounds without losing the purple identity. */ --df-brand: #a64dff; --df-brand-hover: #c080ff; --df-brand-soft: rgba(166, 77, 255, 0.16); --bs-primary: var(--df-brand); --bs-primary-rgb: 166, 77, 255; --bs-link-color: var(--df-brand); --bs-link-hover-color: var(--df-brand-hover); --bs-link-color-rgb: 166, 77, 255; } html, body { font-family: var(--df-font-sans); } a { color: var(--df-brand); } a:hover { color: var(--df-brand-hover); } .btn-primary { background-color: var(--df-brand); border-color: var(--df-brand); color: #ffffff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--df-brand-hover); border-color: var(--df-brand-hover); color: #ffffff; } .btn-outline-primary { color: var(--df-brand); border-color: var(--df-brand); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--df-brand); border-color: var(--df-brand); color: #ffffff; } .navbar-brand { font-weight: 600; letter-spacing: 0.01em; } /* Brand-tinted hairline so the navbar reads as belonging to the page * rather than floating Bootstrap-default. */ .navbar.border-bottom { border-bottom-color: var(--df-brand-soft) !important; } /* Theme toggle button. Icon-only, swaps glyph based on current scheme * (handled in site.js). */ .df-theme-toggle { border: 0; background: transparent; color: var(--bs-body-color); padding: 0.25rem 0.5rem; border-radius: 0.375rem; cursor: pointer; font-size: 1.1rem; line-height: 1; } .df-theme-toggle:hover, .df-theme-toggle:focus { background-color: var(--df-brand-soft); color: var(--df-brand); outline: none; } /* Dashboard org cards */ .org-card { transition: transform 0.15s ease, box-shadow 0.15s ease; } .org-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important; } /* Dashed border for empty states */ .border-dashed { border-style: dashed !important; } /* Clickable table rows */ .cursor-pointer { cursor: pointer; }