/* ═══════════════════════════════════════════════════════════════════════════════════════ ap-glow.css — the shared "glow" design system (distilled from Pages/CommandView.razor) ═══════════════════════════════════════════════════════════════════════════════════════ Linked globally from _Host.cshtml AFTER Bootstrap, the scoped bundle and every other stylesheet. Two halves: PART 1 — GLOBAL readability fixes (NOT opt-in; every page). a-c are dark theme only (light renders exactly as before); d (soft brand fills) and e (the command orb stepping aside for modals) apply in both themes. See the section header. PART 2 — the opt-in glow system. Every class and token is prefixed "apg-", so nothing here touches a page that does not use it. Tokens (--apg-*) live on :root so apg components also work outside an .apg-page (e.g. inside a modal). Theme = data-bs-theme="light" | "dark" on (_Host's inline script always sets one). Accents: every accent-aware component reads --apg-acc (an "r,g,b" triplet) plus --apg-acc-fg (small text, >= 4.5:1 on its own tint in BOTH themes), --apg-acc-num (vivid, for big numbers / icons only) and --apg-acc-deep (filled backgrounds under white text). Set them with one .apg-acc- class on the element or any ancestor. Motion budget: transform / opacity only (plus the title's one-shot shimmer sweep). Decorative loops start ~1.6s late so the prerender -> circuit DOM swap lands while they rest. prefers-reduced-motion, or .apg-still on the page, stops every apg loop and transition; glows stay lit. Blur: only .apg-glass / .apg-card carry backdrop-filter. ═══════════════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════════════ PART 1 — GLOBAL DARK-MODE READABILITY FIXES (app-wide, dark theme only) ─────────────────────────────────────────────────────────────────────────────────────── Why these exist: · MainLayout/MinimalLayout inject `.text-primary { color: var(--brand-primary) !important }` (0,1,0 + !important, rendered by HeadOutlet AFTER this file). A deep-navy tenant brand (#083577) is ~1.3:1 on the dark pane — "Waiting-on" pills, channel chips, "also in →" links all vanished. The overrides below are [data-bs-theme] + class (0,2,0 + !important), so they win regardless of source order. · Bootstrap 5.3 keeps outline-button, text-success/-danger/-secondary and .text-dark inks at their LIGHT values in dark mode (~2.8-3:1, or dark-on-dark for .text-dark). · site.css flips .bg-light/.bg-white to near-black in dark, so "badge bg-light text-dark" (55 files) rendered #212529 text on a #212529 chip. color-mix() is guarded by @supports: a var() inside an unsupported function would make the whole declaration invalid at computed time (the property would silently inherit), so every brand-derived value has a plain fallback declared first. ═══════════════════════════════════════════════════════════════════════════════════════ */ /* ── a. Brand text / links / buttons stay legible on dark surfaces ─────────────────────── */ [data-bs-theme="dark"] .text-primary { color: #8bb9fe !important; } [data-bs-theme="dark"] .link-primary, [data-bs-theme="dark"] .link-primary:hover, [data-bs-theme="dark"] .link-primary:focus { color: #8bb9fe !important; text-decoration-color: rgba(139,185,254,.55) !important; } /* brand-filled buttons: a deep brand (navy) melts into the dark pane — lift the edge only (white label contrast is untouched; focus rings use box-shadow, which this leaves alone) */ [data-bs-theme="dark"] .btn-primary { border-color: rgba(255,255,255,.26) !important; } /* outline-primary: Bootstrap's #0d6efd ink is ~2.9:1 on a dark card */ [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #8bb9fe; --bs-btn-border-color: #6ea8fe; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0d6efd; --bs-btn-hover-border-color: #6ea8fe; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0a58ca; --bs-btn-active-border-color: #8bb9fe; --bs-btn-disabled-color: #6ea8fe; --bs-btn-disabled-border-color: #3d8bfd; } @supports (color: color-mix(in srgb, red 50%, blue)) { /* 35% brand into a pale blue: #083577 -> #91a9cf (5.6:1 on a dark card), #0d6efd -> #93bdfe */ [data-bs-theme="dark"] .text-primary { color: color-mix(in srgb, var(--brand-primary, #0d6efd) 35%, #dbe7ff) !important; } [data-bs-theme="dark"] .link-primary, [data-bs-theme="dark"] .link-primary:hover, [data-bs-theme="dark"] .link-primary:focus { color: color-mix(in srgb, var(--brand-primary, #0d6efd) 35%, #dbe7ff) !important; } [data-bs-theme="dark"] .btn-primary { border-color: color-mix(in srgb, var(--brand-primary, #0d6efd) 50%, #9ec5fe) !important; } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: color-mix(in srgb, var(--brand-primary, #0d6efd) 35%, #dbe7ff); --bs-btn-border-color: color-mix(in srgb, var(--brand-primary, #0d6efd) 50%, #9ec5fe); --bs-btn-hover-bg: var(--brand-primary, #0d6efd); --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary, #0d6efd) 50%, #9ec5fe); --bs-btn-active-bg: var(--brand-primary, #0d6efd); --bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary, #0d6efd) 35%, #dbe7ff); } } /* ── b. Outline buttons: Bootstrap keeps the light-mode inks in dark (~2.8-3:1, and outline-dark is #212529 on #212529). Resting ink + border raised; the filled hover / checked states keep Bootstrap's look so toggles still read as "on". ── */ [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #ced4da; --bs-btn-border-color: #868e96; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #5c636a; --bs-btn-hover-border-color: #adb5bd; --bs-btn-active-color: #fff; --bs-btn-active-bg: #6c757d; --bs-btn-active-border-color: #adb5bd; --bs-btn-disabled-color: #adb5bd; --bs-btn-disabled-border-color: #6c757d; } [data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #75b798; --bs-btn-border-color: #479f76; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #198754; --bs-btn-hover-border-color: #75b798; --bs-btn-active-color: #fff; --bs-btn-active-bg: #157347; --bs-btn-active-border-color: #75b798; --bs-btn-disabled-color: #75b798; --bs-btn-disabled-border-color: #479f76; } [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #ea868f; --bs-btn-border-color: #e35d6a; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #dc3545; --bs-btn-hover-border-color: #ea868f; --bs-btn-active-color: #fff; --bs-btn-active-bg: #b02a37; --bs-btn-active-border-color: #ea868f; --bs-btn-disabled-color: #ea868f; --bs-btn-disabled-border-color: #e35d6a; } [data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: #dee2e6; --bs-btn-border-color: #adb5bd; --bs-btn-hover-color: #212529; --bs-btn-hover-bg: #dee2e6; --bs-btn-hover-border-color: #dee2e6; --bs-btn-active-color: #212529; --bs-btn-active-bg: #f8f9fa; --bs-btn-active-border-color: #f8f9fa; --bs-btn-disabled-color: #adb5bd; --bs-btn-disabled-border-color: #6c757d; } /* ── c. Badges / chips / inks that went dark-on-dark ───────────────────────────────── */ /* site.css turns .bg-light/.bg-white near-black in dark; their .text-dark labels stayed #212529. */ [data-bs-theme="dark"] .bg-light.text-dark, [data-bs-theme="dark"] .bg-white.text-dark, [data-bs-theme="dark"] .text-bg-light { color: #e9ecef !important; } /* chips lift one step off the pane/card so they still read as chips */ [data-bs-theme="dark"] .badge.bg-light, [data-bs-theme="dark"] .badge.bg-white, [data-bs-theme="dark"] .text-bg-light { background-color: #343a40 !important; } [data-bs-theme="dark"] .badge.bg-light:not(.border), [data-bs-theme="dark"] .badge.bg-white:not(.border) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } /* a bare .text-dark (links, labels, icons) on a dark surface; colored fills keep their dark ink */ [data-bs-theme="dark"] .text-dark:not([class*="bg-"]):not(.btn) { color: #dee2e6 !important; } [data-bs-theme="dark"] :is(.bg-warning, .bg-info, .text-bg-warning, .text-bg-info, .btn-light, .btn-warning, .btn-info) .text-dark.text-dark { color: #212529 !important; } /* .badge.bg-secondary = the tenant ACCENT (MainLayout, !important). Render it as an accent-tinted chip with a light label + hairline ring: legible whether the accent is Bootstrap grey, a deep navy or a pale yellow. */ [data-bs-theme="dark"] .badge.bg-secondary { background-color: #3a414b !important; color: #f8f9fa; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } @supports (color: color-mix(in srgb, red 50%, blue)) { [data-bs-theme="dark"] .badge.bg-secondary { background-color: color-mix(in srgb, var(--brand-accent, #6c757d) 42%, #2b3035) !important; } } [data-bs-theme="dark"] .badge.bg-secondary.text-dark { color: #f8f9fa !important; } /* brand / dark-filled badges: the white label reads, but the chip shape vanished */ [data-bs-theme="dark"] .badge.bg-primary, [data-bs-theme="dark"] .badge.bg-dark { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } /* Bootstrap's own dark-mode emphasis inks (the defaults are the light values, ~2.9:1) */ [data-bs-theme="dark"] .text-secondary { color: #adb5bd !important; } [data-bs-theme="dark"] .text-success { color: #75b798 !important; } [data-bs-theme="dark"] .text-danger { color: #ea868f !important; } /* ── d. Soft brand fills (BOTH themes) ────────────────────────────────────────────────── MainLayout's `.bg-primary { background-color: var(--brand-primary) !important }` replaces Bootstrap's rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)), so every "bg-primary bg-opacity-N" tint (chat bubbles, selected autocomplete rows, pinned-nav rows) rendered SOLID brand: body text on a #083577 block was ~1.3:1 in light. (0,2,0) + !important puts the tint back regardless of source order. ── */ .bg-primary.bg-opacity-10 { background-color: rgba(13,110,253,.1) !important; } .bg-primary.bg-opacity-25 { background-color: rgba(13,110,253,.25) !important; } .bg-primary.bg-opacity-50 { background-color: rgba(13,110,253,.5) !important; } .bg-primary.bg-opacity-75 { background-color: rgba(13,110,253,.75) !important; } @supports (color: color-mix(in srgb, red 50%, blue)) { .bg-primary.bg-opacity-10 { background-color: color-mix(in srgb, var(--brand-primary, #0d6efd) 10%, transparent) !important; } .bg-primary.bg-opacity-25 { background-color: color-mix(in srgb, var(--brand-primary, #0d6efd) 25%, transparent) !important; } .bg-primary.bg-opacity-50 { background-color: color-mix(in srgb, var(--brand-primary, #0d6efd) 50%, transparent) !important; } .bg-primary.bg-opacity-75 { background-color: color-mix(in srgb, var(--brand-primary, #0d6efd) 75%, transparent) !important; } } /* ── e. The command orb steps aside while a page modal is open (BOTH themes) ──────────── #cmd-orb is fixed bottom-right at z 1080, above page modals (z 1055-1061): on a phone it sat on the attachment preview's corner and a tap opened the command panel instead. Ctrl+K still works (it clicks the orb from script; pointer-events never blocks that). */ html:has(.modal.show, .modal.d-block) #cmd-orb { opacity: 0; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════════════════════ PART 2 — THE GLOW SYSTEM (opt-in, "apg-" prefix) ═══════════════════════════════════════════════════════════════════════════════════════ */ /* ── Tokens ─────────────────────────────────────────────────────────────────────────── */ :root { --apg-strong: #0f172a; /* titles, row mains, focus rings */ --apg-text: #1e293b; /* body copy on glass */ --apg-sub: #475569; /* secondary copy */ --apg-muted: #56647a; /* labels */ --apg-faint: #5f6f86; /* meta lines, zero numbers (>= 4.5:1 on glass) */ --apg-on-aurora: #334155; /* small text sitting straight on the aurora (no glass) */ --apg-fill: rgba(99,102,241,.07); --apg-divider: rgba(15,23,42,.07); --apg-glass: rgba(255,255,255,.74); /* cards / panels (blurred) */ --apg-glass-2: rgba(255,255,255,.68); /* tiles, toolbar, chips (never blurred) */ --apg-solid: rgba(255,255,255,.94); /* .apg-solid cards (no blur, long lists) */ --apg-surface: rgba(255,255,255,.98); /* sticky bars, sheets: nearly opaque */ --apg-border: rgba(100,116,139,.2); --apg-glass-hi: rgba(255,255,255,.95); /* inner top highlight */ --apg-depth: 0 1px 2px rgba(15,23,42,.05), 0 14px 32px -20px rgba(30,41,99,.35); --apg-blur: blur(14px) saturate(115%); --apg-link: #0a58ca; --apg-link-hover: #084298; --apg-ease: cubic-bezier(.2,.8,.2,1); /* default accent = indigo */ --apg-acc: 99,102,241; --apg-acc-fg: #4338ca; --apg-acc-num: #4f46e5; --apg-acc-deep: #4338ca; } [data-bs-theme="dark"] { --apg-strong: #f1f5f9; --apg-text: #e2e8f0; --apg-sub: #c3cbd5; --apg-muted: #a7b1be; --apg-faint: #8f9aa9; --apg-on-aurora: #c3cbd5; --apg-fill: rgba(255,255,255,.05); --apg-divider: rgba(255,255,255,.07); --apg-glass: rgba(17,20,37,.58); --apg-glass-2: rgba(19,23,42,.55); --apg-solid: rgba(22,26,44,.94); --apg-surface: rgba(16,19,35,.97); --apg-border: rgba(148,163,255,.14); --apg-glass-hi: rgba(255,255,255,.06); --apg-depth: 0 1px 0 rgba(0,0,0,.25), 0 16px 36px -20px rgba(0,0,0,.9); --apg-blur: blur(14px) saturate(140%); --apg-link: #6ea8fe; --apg-link-hover: #8bb9fe; --apg-acc-fg: #a5b4fc; --apg-acc-num: #818cf8; } /* ── Accent palette ──────────────────────────────────────────────────────────────────── triplet | fg (light: 700-800 ink, dark: 300) | num (light: 600, dark: 400) | deep (white text) Light fg inks all sit at luminance ~.08-.12 so they hold 4.5:1 on their own tint over glass AND over the aurora; cyan/teal use their 800 shade (the 700s are ~.145 and fell to ~3.2-4.1 where the cool aurora's blobs pass under a pill). */ .apg-acc-blue { --apg-acc:59,130,246; --apg-acc-fg:#1d4ed8; --apg-acc-num:#2563eb; --apg-acc-deep:#1d4ed8; } .apg-acc-cyan { --apg-acc:6,182,212; --apg-acc-fg:#155e75; --apg-acc-num:#0891b2; --apg-acc-deep:#0e7490; } .apg-acc-violet { --apg-acc:139,92,246; --apg-acc-fg:#6d28d9; --apg-acc-num:#7c3aed; --apg-acc-deep:#6d28d9; } .apg-acc-amber { --apg-acc:245,158,11; --apg-acc-fg:#92400e; --apg-acc-num:#b45309; --apg-acc-deep:#b45309; } .apg-acc-rose { --apg-acc:244,63,94; --apg-acc-fg:#be123c; --apg-acc-num:#e11d48; --apg-acc-deep:#be123c; } .apg-acc-green { --apg-acc:34,197,94; --apg-acc-fg:#166534; --apg-acc-num:#15803d; --apg-acc-deep:#15803d; } .apg-acc-fuchsia { --apg-acc:217,70,239; --apg-acc-fg:#a21caf; --apg-acc-num:#c026d3; --apg-acc-deep:#a21caf; } .apg-acc-indigo { --apg-acc:99,102,241; --apg-acc-fg:#4338ca; --apg-acc-num:#4f46e5; --apg-acc-deep:#4338ca; } .apg-acc-teal { --apg-acc:20,184,166; --apg-acc-fg:#115e59; --apg-acc-num:#0d9488; --apg-acc-deep:#0f766e; } .apg-acc-yellow { --apg-acc:234,179,8; --apg-acc-fg:#854d0e; --apg-acc-num:#a16207; --apg-acc-deep:#a16207; } .apg-acc-slate { --apg-acc:100,116,139; --apg-acc-fg:#475569; --apg-acc-num:#64748b; --apg-acc-deep:#475569; } [data-bs-theme="dark"] .apg-acc-blue { --apg-acc-fg:#93c5fd; --apg-acc-num:#60a5fa; } [data-bs-theme="dark"] .apg-acc-cyan { --apg-acc-fg:#67e8f9; --apg-acc-num:#22d3ee; } [data-bs-theme="dark"] .apg-acc-violet { --apg-acc-fg:#c4b5fd; --apg-acc-num:#a78bfa; } [data-bs-theme="dark"] .apg-acc-amber { --apg-acc-fg:#fcd34d; --apg-acc-num:#fbbf24; } [data-bs-theme="dark"] .apg-acc-rose { --apg-acc-fg:#fda4af; --apg-acc-num:#fb7185; } [data-bs-theme="dark"] .apg-acc-green { --apg-acc-fg:#86efac; --apg-acc-num:#4ade80; } [data-bs-theme="dark"] .apg-acc-fuchsia { --apg-acc-fg:#f0abfc; --apg-acc-num:#e879f9; } [data-bs-theme="dark"] .apg-acc-indigo { --apg-acc-fg:#a5b4fc; --apg-acc-num:#818cf8; } [data-bs-theme="dark"] .apg-acc-teal { --apg-acc-fg:#5eead4; --apg-acc-num:#2dd4bf; } [data-bs-theme="dark"] .apg-acc-yellow { --apg-acc-fg:#fde047; --apg-acc-num:#facc15; } [data-bs-theme="dark"] .apg-acc-slate { --apg-acc-fg:#cbd5e1; --apg-acc-num:#94a3b8; } /* lit tile numbers, LIGHT: cyan + teal one step deeper — #0891b2 / #0d9488 on the tile's own tint under the same-hue halo only reached ~3.1-3.4:1. Dark keeps the vivid numbers above. */ .apg-tile.apg-acc-cyan { --apg-acc-num:#0e7490; } .apg-tile.apg-acc-teal { --apg-acc-num:#0f766e; } [data-bs-theme="dark"] .apg-tile.apg-acc-cyan { --apg-acc-num:#22d3ee; } [data-bs-theme="dark"] .apg-tile.apg-acc-teal { --apg-acc-num:#2dd4bf; } /* .apg-urgent without its own accent class reads rose */ .apg-urgent:not([class*="apg-acc-"]) { --apg-acc:244,63,94; --apg-acc-fg:#be123c; --apg-acc-num:#e11d48; --apg-acc-deep:#be123c; } [data-bs-theme="dark"] .apg-urgent:not([class*="apg-acc-"]) { --apg-acc-fg:#fda4af; --apg-acc-num:#fb7185; } /* small text helpers */ .apg-ink { color: var(--apg-acc-fg); } .apg-strong { color: var(--apg-strong); } .apg-sub { color: var(--apg-sub); } .apg-faint { color: var(--apg-faint); } /* legible brand ink in both themes (light = the brand itself, dark = the brand lifted) */ .apg-brand { color: var(--brand-primary, #0d6efd); } [data-bs-theme="dark"] .apg-brand { color: #8bb9fe; } @supports (color: color-mix(in srgb, red 50%, blue)) { [data-bs-theme="dark"] .apg-brand { color: color-mix(in srgb, var(--brand-primary, #0d6efd) 35%, #dbe7ff); } } /* bare in-text links on a glow page take the system link ink: Bootstrap's #0d6efd is ~4.3:1 on light glass and ~3.9:1 inside a tinted callout; #0a58ca (dark: #6ea8fe) holds 4.5+ */ .apg-page a:not([class]) { color: var(--apg-link); } .apg-page a:not([class]):hover { color: var(--apg-link-hover); } /* ── Page wrapper ────────────────────────────────────────────────────────────────────── Must be the page's OUTERMOST element (a direct child of MainLayout's .p-4). No isolation / z-index here on purpose: a stacking context would trap page-level modals (z 1055-1061) under the sticky mobile header. Instead the aurora paints first and every direct child is position:relative (zero-specificity :where, so .modal / .sticky-top / .position-* and inline styles still win) — tree order keeps content above the backdrop. --apg-bleed mirrors .p-4's padding (1.5rem, 1rem under 768px, 0 in pop-outs), so the aurora fills the content pane's padding box exactly and can never widen the page. Bottom padding clears the global command orb (fixed, 60px, 24px off the bottom-right corner at EVERY width): at max scroll the last row's right-aligned action lands >= ~92px above the viewport bottom instead of under the orb. Embedded pages keep the same clearance — they are usually the last thing in their host. */ .apg-page { position: relative; --apg-bleed: 1.5rem; min-height: min(70vh, 760px); padding-bottom: 4.5rem; } :where(.apg-page > :not(.apg-aurora)) { position: relative; } .apg-page.apg-narrow { max-width: 1180px; margin-left: auto; margin-right: auto; } /* hosted inside another shell (e.g. a tab of /communications): no backdrop of its own */ .apg-page.apg-embedded { --apg-bleed: 0px; min-height: 0; padding-bottom: 4rem; } .apg-page.apg-embedded > .apg-aurora { display: none; } html.floor-popout .apg-page, .ap-popout-body .apg-page { --apg-bleed: 0px; } @media (max-width: 767.98px) { .apg-page { --apg-bleed: 1rem; } } /* ── Aurora backdrop ─────────────────────────────────────────────────────────────────── Decorative only (aria-hidden, pointer-events:none). Radial blobs that fade to nothing at their own edge (no blur filter), drifting on transform only; faint tech grid on ::before; dark adds a slow-twinkling star field on ::after. Capped at 1600px tall so a long list never builds a page-height masked layer (iPhone DPR 3); the bottom fades. */ .apg-aurora { position: absolute; pointer-events: none; overflow: hidden; top: calc(-1 * var(--apg-bleed)); left: calc(-1 * var(--apg-bleed)); right: calc(-1 * var(--apg-bleed)); height: calc(100% + 2 * var(--apg-bleed)); max-height: 1600px; --apg-b1: 124,58,237; --apg-b2: 6,182,212; --apg-b3: 79,70,229; --apg-b4: 217,70,239; background: radial-gradient(120% 480px at 50% 0, rgba(224,231,255,.85), rgba(224,231,255,0) 72%); -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 320px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 320px), transparent); } /* palette variants — give each page its own weather, same family. DARK RULE: a high-luminance hue (amber, yellow, green) must NEVER be --apg-b1 in dark. Blob-1 rests right under the hero at .95 opacity; an amber core there washes the light subtitle / lede ink (#c3cbd5) down to ~3.3:1 (violet / indigo / rose / blue hold 4.6-6:1). Any variant that leads with one moves it to the small bottom-right blob (b4) in dark. */ .apg-aurora-warm { --apg-b1: 245,158,11; --apg-b2: 244,63,94; --apg-b3: 217,70,239; --apg-b4: 124,58,237; } .apg-aurora-cool { --apg-b1: 59,130,246; --apg-b2: 6,182,212; --apg-b3: 20,184,166; --apg-b4: 99,102,241; } .apg-aurora-green { --apg-b1: 34,197,94; --apg-b2: 20,184,166; --apg-b3: 6,182,212; --apg-b4: 59,130,246; } .apg-aurora-rose { --apg-b1: 244,63,94; --apg-b2: 217,70,239; --apg-b3: 124,58,237; --apg-b4: 245,158,11; } [data-bs-theme="dark"] .apg-aurora-warm { --apg-b1: 124,58,237; --apg-b4: 245,158,11; } [data-bs-theme="dark"] .apg-aurora-green { --apg-b1: 59,130,246; --apg-b4: 34,197,94; } .apg-aurora::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(79,70,229,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,70,229,.07) 1px, transparent 1px); background-size: 44px 44px; background-position: center top; -webkit-mask-image: radial-gradient(95% 560px at 50% 0, #000 25%, transparent 100%); mask-image: radial-gradient(95% 560px at 50% 0, #000 25%, transparent 100%); } /* light keeps the blobs airy (.45) so small text on glass holds 4.5:1; dark runs .95 */ .apg-blob { position: absolute; border-radius: 50%; opacity: .45; width: clamp(340px, 64vmax, 920px); height: clamp(340px, 64vmax, 920px); } .apg-blob-1 { top: -320px; left: -24%; background: radial-gradient(closest-side, rgba(var(--apg-b1),.55), rgba(var(--apg-b1),.16) 60%, rgba(var(--apg-b1),0)); animation: apgDrift1 34s ease-in-out infinite alternate; } .apg-blob-2 { top: -140px; right: -30%; background: radial-gradient(closest-side, rgba(var(--apg-b2),.42), rgba(var(--apg-b2),.12) 60%, rgba(var(--apg-b2),0)); animation: apgDrift2 40s ease-in-out infinite alternate; } .apg-blob-3 { top: 34%; left: -34%; width: clamp(420px, 82vmax, 1150px); height: clamp(300px, 56vmax, 780px); background: radial-gradient(closest-side, rgba(var(--apg-b3),.48), rgba(var(--apg-b3),.14) 60%, rgba(var(--apg-b3),0)); animation: apgDrift3 46s ease-in-out infinite alternate; } .apg-blob-4 { top: 64%; right: -32%; background: radial-gradient(closest-side, rgba(var(--apg-b4),.36), rgba(var(--apg-b4),.11) 60%, rgba(var(--apg-b4),0)); animation: apgDrift4 52s ease-in-out infinite alternate; } @keyframes apgDrift1 { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(10%,8%,0) scale(1.12); } 100% { transform: translate3d(-4%,14%,0) scale(.94); } } @keyframes apgDrift2 { 0% { transform: translate3d(0,0,0) scale(1.06); } 50% { transform: translate3d(-12%,10%,0) scale(.92); } 100% { transform: translate3d(-5%,-4%,0) scale(1.1); } } @keyframes apgDrift3 { 0% { transform: translate3d(0,0,0) rotate(-10deg) scale(1); } 100% { transform: translate3d(16%,-9%,0) rotate(16deg) scale(1.14); } } @keyframes apgDrift4 { 0% { transform: translate3d(0,0,0) scale(1.08); } 100% { transform: translate3d(-14%,-12%,0) scale(.9); } } /* nothing to watch behind an open modal — park the backdrop */ .apg-page:has(.modal.show) .apg-blob { animation-play-state: paused; } .apg-page:has(.modal.d-block) .apg-blob { animation-play-state: paused; } /* narrow pages on wide screens: fade the aurora's side edges into the pane */ @media (min-width: 1480px) { .apg-narrow > .apg-aurora { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, #000 calc(100% - 320px), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, #000 calc(100% - 320px), transparent); mask-composite: intersect; } } /* ── Hero ──────────────────────────────────────────────────────────────────────────── */ .apg-hero { display: flex; align-items: center; justify-content: space-between; gap: .9rem 1rem; flex-wrap: wrap; margin-bottom: 1.15rem; } .apg-hero-main { display: flex; align-items: center; gap: .85rem; min-width: 0; flex: 1 1 auto; } .apg-hero-text { min-width: 0; } .apg-hero-actions { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; } /* Icon orb: deep conic colours spinning inside a circle (a rotating circle never leaves its own bounds, so no clipping layer is needed), a gloss + rim on top, an accent halo. */ .apg-orb { position: relative; isolation: isolate; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; line-height: 1; background: #4338ca; box-shadow: 0 8px 22px -6px rgba(var(--apg-acc),.65), 0 0 0 1px rgba(var(--apg-acc),.2); } .apg-orb::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 50%; background: conic-gradient(from 0deg, #6d28d9, #4338ca, #0369a1, #0e7490, #7e22ce, #a21caf, #6d28d9); animation: apgSpin 9s linear 1.6s infinite; } .apg-orb::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.42), rgba(255,255,255,0) 55%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), inset 0 -6px 12px rgba(34,211,238,.28); } .apg-orb > i { text-shadow: 0 0 10px rgba(255,255,255,.7), 0 1px 2px rgba(15,10,50,.4); } @keyframes apgSpin { to { transform: rotate(360deg); } } .apg-title { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--apg-strong); --apg-title-grad: linear-gradient(90deg, #0f172a 0%, #312e81 48%, #6d28d9 78%, #0e7490 100%); --apg-glint: #7c3aed; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .apg-title { background-image: linear-gradient(100deg, transparent 42%, var(--apg-glint) 50%, transparent 58%), var(--apg-title-grad); background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 100% 0, 0 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: apgShimmer 10s ease-in-out 1.8s infinite; } /* never inherit the transparent fill into a chip placed inside the title */ .apg-title :is(.apg-pill, .apg-count, .apg-chip, .badge) { -webkit-text-fill-color: currentColor; } } @keyframes apgShimmer { 0% { background-position: 100% 0, 0 0; } 26% { background-position: 0% 0, 0 0; } 100% { background-position: 0% 0, 0 0; } } .apg-subtitle { margin-top: .15rem; font-size: .85rem; color: var(--apg-on-aurora); } /* "live / updated" pip */ .apg-live { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } .apg-live-pip { position: relative; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.15), 0 0 8px rgba(22,163,74,.7); } .apg-live-pip::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(34,197,94,.75); opacity: 0; animation: apgRing 2.4s cubic-bezier(.2,.6,.3,1) 1.6s infinite; } @keyframes apgRing { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } } /* Bootstrap outline-secondary buttons dropped into the hero get the glass-pill treatment */ .apg-hero .apg-hero-actions .btn-outline-secondary { --bs-btn-color: var(--apg-sub); --bs-btn-bg: var(--apg-glass-2); --bs-btn-border-color: var(--apg-border); --bs-btn-hover-color: var(--apg-strong); --bs-btn-hover-bg: rgba(139,92,246,.1); --bs-btn-hover-border-color: rgba(139,92,246,.5); --bs-btn-active-color: var(--apg-strong); --bs-btn-active-bg: rgba(139,92,246,.18); --bs-btn-active-border-color: rgba(139,92,246,.6); border-radius: 999px; padding: .38rem .85rem; font-weight: 600; box-shadow: inset 0 1px 0 var(--apg-glass-hi), var(--apg-depth); transition: color .2s, background-color .2s, border-color .2s, box-shadow .25s; } /* the resting shadow above outranks Bootstrap's .btn:focus-visible ring — restate it */ .apg-hero .apg-hero-actions .btn-outline-secondary:focus-visible { box-shadow: 0 0 0 3px rgba(139,92,246,.45); outline: 2px solid var(--apg-strong); outline-offset: 2px; } /* ── Buttons ───────────────────────────────────────────────────────────────────────── */ /* Primary action: the signature violet -> indigo -> cyan pill with a breathing halo. Add an accent class (.apg-acc-green …) to tint it with that accent's deep shade. */ .apg-btn-glow { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; padding: .5rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer; font-size: .9rem; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; color: #fff; background: linear-gradient(135deg, #6d28d9, #4338ca 55%, #0e7490); box-shadow: 0 8px 22px -6px rgba(79,70,229,.6); text-shadow: 0 1px 2px rgba(15,10,50,.35); transition: transform .22s var(--apg-ease), box-shadow .3s ease; -webkit-tap-highlight-color: transparent; } .apg-btn-glow:hover, .apg-btn-glow:focus, .apg-btn-glow:active { color: #fff; } .apg-btn-glow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 18px 2px rgba(124,58,237,.5), 0 0 36px 6px rgba(6,182,212,.2); opacity: .45; animation: apgBreathe 3.4s ease-in-out 1.6s infinite; } .apg-btn-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 58%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); } .apg-btn-glow[class*="apg-acc-"] { background: var(--apg-acc-deep); box-shadow: 0 8px 22px -6px rgba(var(--apg-acc),.65); } .apg-btn-glow[class*="apg-acc-"]::before { box-shadow: 0 0 18px 2px rgba(var(--apg-acc),.55), 0 0 36px 6px rgba(var(--apg-acc),.2); } .apg-btn-glow:disabled, .apg-btn-glow[aria-disabled="true"], .apg-btn-ghost:disabled, .apg-btn-ghost[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; } .apg-btn-glow:disabled::before, .apg-btn-glow[aria-disabled="true"]::before { animation: none; opacity: 0; } /* Secondary action: a glass pill that lights in the current accent on hover */ .apg-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 36px; padding: .4rem .9rem; border: 1px solid var(--apg-border); border-radius: 999px; cursor: pointer; font-size: .85rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; color: var(--apg-sub); background: var(--apg-glass-2); box-shadow: inset 0 1px 0 var(--apg-glass-hi), var(--apg-depth); transition: color .2s, background-color .2s, border-color .2s, box-shadow .25s, transform .15s; -webkit-tap-highlight-color: transparent; } .apg-btn-ghost:hover, .apg-btn-ghost:focus { color: var(--apg-sub); } .apg-btn-ghost.apg-on, .apg-btn-ghost[aria-pressed="true"] { color: var(--apg-acc-fg); border-color: rgba(var(--apg-acc),.45); background: linear-gradient(rgba(var(--apg-acc),.12), rgba(var(--apg-acc),.12)), var(--apg-glass-2); } .apg-btn-sm { min-height: 30px; padding: .26rem .7rem; font-size: .8rem; } /* Round glass disc for icon-only actions (and the pause toggle) */ .apg-icon-btn { position: relative; width: 38px; height: 38px; flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--apg-border); background: var(--apg-glass-2); color: var(--apg-sub); font-size: 1rem; line-height: 1; cursor: pointer; text-decoration: none; box-shadow: inset 0 1px 0 var(--apg-glass-hi), var(--apg-depth); transition: color .2s, border-color .2s, background-color .2s, box-shadow .25s, transform .15s; -webkit-tap-highlight-color: transparent; } .apg-icon-btn[aria-pressed="true"], .apg-icon-btn.apg-on { color: #6d28d9; border-color: rgba(139,92,246,.45); background: linear-gradient(rgba(139,92,246,.12), rgba(139,92,246,.12)), var(--apg-glass-2); } /* ── Glass surfaces ────────────────────────────────────────────────────────────────── Use INSTEAD of Bootstrap .card (never both: site.css's dark .card background and its .card:hover shadow !important would override the glass). backdrop-filter makes the element a containing block for position:fixed children — keep modals OUT of cards. */ .apg-glass, .apg-card { position: relative; isolation: isolate; min-width: 0; border-radius: 18px; padding: .85rem .95rem .8rem; background: var(--apg-glass); border: 1px solid var(--apg-border); box-shadow: inset 0 1px 0 var(--apg-glass-hi), var(--apg-depth); -webkit-backdrop-filter: var(--apg-blur); backdrop-filter: var(--apg-blur); } /* card = glass + accent wash in the icon corner + luminous hairline on top + accent glow */ .apg-card { background: radial-gradient(130% 110px at 0 0, rgba(var(--apg-acc),.11), rgba(var(--apg-acc),0) 70%), var(--apg-glass); box-shadow: inset 0 1px 0 var(--apg-glass-hi), var(--apg-depth), 0 18px 40px -30px rgba(var(--apg-acc),.6); transition: transform .28s var(--apg-ease), box-shadow .35s ease, border-color .35s ease; } .apg-card::before { content: ""; position: absolute; top: -1px; left: 1.25rem; right: 1.25rem; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--apg-acc),.8), transparent); opacity: .75; } /* many cards on one page: .apg-solid drops the blur (one blur per card adds up on a phone) */ .apg-glass.apg-solid, .apg-card.apg-solid { -webkit-backdrop-filter: none; backdrop-filter: none; } .apg-glass.apg-solid { background: var(--apg-solid); } .apg-card.apg-solid { background: radial-gradient(130% 110px at 0 0, rgba(var(--apg-acc),.11), rgba(var(--apg-acc),0) 70%), var(--apg-solid); } /* glass inside glass never stacks a second blur */ :is(.apg-glass, .apg-card) :is(.apg-glass, .apg-card) { -webkit-backdrop-filter: none; backdrop-filter: none; } .apg-flush { padding: 0; } .apg-flush > .apg-card-head { padding: .85rem .95rem 0; } /* a card holding focus or an open dropdown rises above its neighbours (each card is its own stacking context, so a menu would otherwise slide under the next card) */ :is(.apg-glass, .apg-card):focus-within { z-index: 2; } :is(.apg-glass, .apg-card):has(.dropdown-menu.show) { z-index: 6; } .apg-card.apg-new { border-color: rgba(var(--apg-acc),.45); } .apg-card.apg-new::before { opacity: 1; } .apg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: .9rem; } .apg-stack { display: flex; flex-direction: column; gap: .9rem; } .apg-card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .apg-card-head:last-child { margin-bottom: 0; } .apg-card-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .95rem; color: var(--apg-acc-num); background: rgba(var(--apg-acc),.13); box-shadow: inset 0 0 0 1px rgba(var(--apg-acc),.22), 0 6px 16px -6px rgba(var(--apg-acc),.55); } .apg-card-title { flex: 1; min-width: 0; margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: -.005em; line-height: 1.3; color: var(--apg-strong); } .apg-card-link { font-size: .8rem; font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--apg-link); } .apg-card-link:hover { color: var(--apg-link-hover); } .apg-card-link i { display: inline-block; transition: transform .2s ease; } .apg-count { display: inline-block; margin-left: .3rem; padding: .05rem .45rem; border-radius: 999px; vertical-align: 1px; font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--apg-sub); background: rgba(var(--apg-acc),.1); border: 1px solid rgba(var(--apg-acc),.2); } /* ── Section title ─────────────────────────────────────────────────────────────────── */ .apg-section-title { display: flex; align-items: center; gap: .5rem; margin: 1.4rem 0 .6rem; line-height: 1.2; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--apg-sub); } .apg-section-title:first-child { margin-top: 0; } .apg-section-title > i { font-size: .9rem; color: var(--apg-acc-num); } .apg-section-title::after { content: ""; flex: 1; min-width: 1.5rem; height: 1px; background: linear-gradient(90deg, rgba(var(--apg-acc),.45), rgba(var(--apg-acc),0)); } /* ── Stat tiles ──────────────────────────────────────────────────────────────────────── Zero = calm glass, grey number. .apg-lit (non-zero) = accent border + wash + neon number + signal dot. .apg-on / aria-pressed = the tile is the active filter. */ .apg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr)); gap: .6rem; margin-bottom: 1.15rem; } .apg-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .apg-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .apg-tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .apg-tiles-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .apg-tile { position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; padding: .7rem .4rem .62rem; border-radius: 14px; text-align: center; text-decoration: none; color: inherit; font: inherit; background: linear-gradient(165deg, rgba(var(--apg-acc),.06), rgba(var(--apg-acc),0) 55%), var(--apg-glass-2); border: 1px solid var(--apg-border); box-shadow: inset 0 1px 0 var(--apg-glass-hi), var(--apg-depth); transition: transform .25s var(--apg-ease), box-shadow .35s ease, border-color .35s ease; -webkit-tap-highlight-color: transparent; } :is(a, button).apg-tile, .apg-tile[role="button"] { cursor: pointer; } .apg-tile:hover, .apg-tile:focus { color: inherit; } .apg-tile::before { content: ""; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--apg-acc),.9), transparent); opacity: .28; transition: opacity .35s; } .apg-tile-n { font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--apg-faint); transition: color .35s, text-shadow .35s; } .apg-tile-l { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1.25; color: var(--apg-muted); overflow-wrap: anywhere; } .apg-tile.apg-lit { border-color: rgba(var(--apg-acc),.4); background: linear-gradient(165deg, rgba(var(--apg-acc),.14), rgba(var(--apg-acc),.02) 60%), var(--apg-glass-2); box-shadow: inset 0 1px 0 var(--apg-glass-hi), 0 10px 26px -14px rgba(var(--apg-acc),.65), 0 0 0 1px rgba(var(--apg-acc),.06); } .apg-tile.apg-lit::before, .apg-tile.apg-on::before, .apg-tile[aria-pressed="true"]::before { opacity: 1; } .apg-lit .apg-tile-n { color: var(--apg-acc-num); text-shadow: 0 0 18px rgba(var(--apg-acc),.35); } .apg-tile.apg-lit:not(.apg-urgent)::after { content: ""; position: absolute; top: 7px; right: 8px; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; background: rgb(var(--apg-acc)); box-shadow: 0 0 8px rgba(var(--apg-acc),.9); } .apg-tile.apg-on, .apg-tile[aria-pressed="true"] { border-color: rgba(var(--apg-acc),.7); box-shadow: inset 0 1px 0 var(--apg-glass-hi), 0 0 0 1px rgba(var(--apg-acc),.45), 0 10px 26px -12px rgba(var(--apg-acc),.7); } /* ── Rows ────────────────────────────────────────────────────────────────────────────── A soft accent wash + a glowing accent bar that grows in on hover / tap / selection. */ .apg-rows { display: flex; flex-direction: column; } .apg-row { position: relative; display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .5rem .55rem .5rem .8rem; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; } :is(a, button).apg-row, .apg-row[role="button"], .apg-row.apg-click { cursor: pointer; } button.apg-row { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; } .apg-row:hover, .apg-row:focus { color: inherit; } .apg-row::before { content: ""; position: absolute; left: 2px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; pointer-events: none; background: rgb(var(--apg-acc)); box-shadow: 0 0 10px rgba(var(--apg-acc),.85); opacity: 0; transform: scaleY(.3); transition: opacity .2s ease, transform .28s var(--apg-ease); } .apg-row + .apg-row { border-top: 1px solid var(--apg-divider); } .apg-row.apg-active, .apg-row[aria-current="true"], .apg-row[aria-current="page"], .apg-row[aria-selected="true"] { background-color: rgba(var(--apg-acc),.11); } .apg-row.apg-active::before, .apg-row[aria-current="true"]::before, .apg-row[aria-current="page"]::before, .apg-row[aria-selected="true"]::before { opacity: 1; transform: none; } .apg-row-lead { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--apg-acc-num); background: rgba(var(--apg-acc),.12); box-shadow: inset 0 0 0 1px rgba(var(--apg-acc),.2); } .apg-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .08rem; color: inherit; text-decoration: none; } a.apg-row-body, button.apg-row-body { cursor: pointer; } button.apg-row-body { border: 0; background: transparent; padding: 0; font: inherit; text-align: left; } .apg-row-body:hover, .apg-row-body:focus { color: inherit; } .apg-row-main { font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--apg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .apg-row-sub { font-size: .77rem; line-height: 1.35; color: var(--apg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* long titles on phones: allow two lines instead of an ellipsis */ .apg-row-main.apg-wrap, .apg-row-sub.apg-wrap { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; } .apg-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .22rem; } .apg-row-aside { flex-shrink: 0; font-size: .75rem; color: var(--apg-faint); white-space: nowrap; font-variant-numeric: tabular-nums; } .apg-row-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; } /* Green actions sit on Bootstrap's one-step-deeper #157347 in BOTH themes (Bootstrap keeps #198754 in dark): white on #198754 is only 4.54:1 flat, and under the gloss below it fell to ~3.8-4.2:1 mid-glyph. #157347 holds >= 4.8:1 under it. Covers page-local glossed green buttons too, not just row actions. */ :is(.apg-page, .apg-row-actions) .btn-success { --bs-btn-bg: #157347; --bs-btn-border-color: #157347; --bs-btn-hover-bg: #146c43; --bs-btn-hover-border-color: #13653f; --bs-btn-active-bg: #13653f; --bs-btn-active-border-color: #13653f; --bs-btn-disabled-bg: #157347; --bs-btn-disabled-border-color: #157347; } /* the one green glow in a row (Approve / Done); Dismiss stays quiet */ .apg-row-actions .btn-success { background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); box-shadow: 0 0 0 1px rgba(34,197,94,.35), 0 4px 14px -3px rgba(34,197,94,.65); transition: color .15s, background-color .15s, border-color .15s, box-shadow .25s, transform .15s; } /* (its focus ring is the system's neutral outline — see "Focus" below — never a green shadow: rgba(34,197,94,.5) was ~1.5:1 on light glass and melted into the resting halo in dark) */ /* unread / new: bolder title with a glowing lead dot and a faint wash */ .apg-row.apg-new { background-color: rgba(var(--apg-acc),.05); } .apg-row.apg-new .apg-row-main { font-weight: 750; } .apg-row.apg-new .apg-row-main::before, .apg-dot { content: ""; display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; margin-right: .45rem; vertical-align: 2px; background: rgb(var(--apg-acc)); box-shadow: 0 0 8px rgba(var(--apg-acc),.9); } .apg-dot { margin-right: 0; } .apg-more { display: block; width: 100%; margin-top: .5rem; padding: .4rem; border: 1px solid transparent; border-radius: 10px; cursor: pointer; background: var(--apg-fill); color: var(--apg-sub); font-size: .78rem; font-weight: 700; transition: background-color .2s, border-color .2s, box-shadow .25s; } /* ── Pills (status labels) & chips (interactive filters) ─────────────────────────────── */ .apg-pill { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .14rem .55rem; border-radius: 999px; vertical-align: 1px; font-size: .72rem; font-weight: 700; line-height: 1.35; letter-spacing: .01em; white-space: nowrap; text-decoration: none; color: var(--apg-acc-fg); background: rgba(var(--apg-acc),.12); border: 1px solid rgba(var(--apg-acc),.3); } .apg-pill > i { font-size: .9em; line-height: 1; } :is(a, button).apg-pill { cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .25s; } button.apg-pill { font-family: inherit; } .apg-pill:hover, .apg-pill:focus { color: var(--apg-acc-fg); } /* filled variant: the accent's deep shade under white text (>= 4.5:1 for every accent) */ .apg-pill.apg-pill-solid { color: #fff; background: var(--apg-acc-deep); border-color: transparent; box-shadow: 0 4px 12px -4px rgba(var(--apg-acc),.7); } /* Pills sitting STRAIGHT on the aurora (hero subtitle, section titles, or any strip marked .apg-over-aurora) get an opaque backing under their tint: the bare .12 tint over a bright blob fell to ~3.7:1. The blob opacity was tuned for text on glass — these have no glass. */ :is(.apg-subtitle, .apg-section-title, .apg-over-aurora) .apg-pill:not(.apg-pill-solid) { background: linear-gradient(rgba(var(--apg-acc),.14), rgba(var(--apg-acc),.14)), var(--apg-solid); } .apg-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .3rem .75rem; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: .8rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; color: var(--apg-sub); background: var(--apg-glass-2); border: 1px solid var(--apg-border); box-shadow: inset 0 1px 0 var(--apg-glass-hi); transition: color .2s, background-color .2s, border-color .2s, box-shadow .25s, transform .15s; -webkit-tap-highlight-color: transparent; } .apg-chip:hover, .apg-chip:focus { color: var(--apg-sub); } .apg-chip.apg-on, .apg-chip.active, .apg-chip[aria-pressed="true"], .apg-chip[aria-selected="true"], .apg-chip[aria-current="true"] { color: var(--apg-acc-fg); border-color: rgba(var(--apg-acc),.55); background: linear-gradient(rgba(var(--apg-acc),.15), rgba(var(--apg-acc),.15)), var(--apg-glass-2); box-shadow: inset 0 1px 0 var(--apg-glass-hi), 0 0 16px -6px rgba(var(--apg-acc),.8); } .apg-chip-n { display: inline-block; padding: 0 .4rem; border-radius: 999px; font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--apg-acc-fg); background: rgba(var(--apg-acc),.14); } /* ── Toolbar / segmented control / inputs ───────────────────────────────────────────── */ .apg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .5rem .55rem; border-radius: 16px; background: var(--apg-glass-2); border: 1px solid var(--apg-border); box-shadow: inset 0 1px 0 var(--apg-glass-hi), var(--apg-depth); } .apg-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-left: auto; } .apg-seg { position: relative; display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; background: var(--apg-fill); border: 1px solid var(--apg-border); } .apg-seg::-webkit-scrollbar { display: none; } .apg-seg > :is(button, a, label), .apg-seg-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; margin: 0; padding: .28rem .8rem; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: .8rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; color: var(--apg-sub); background: transparent; transition: color .2s, background-color .2s, box-shadow .25s; -webkit-tap-highlight-color: transparent; } .apg-seg > :is(button, a, label):hover, .apg-seg-btn:hover { color: var(--apg-strong); } .apg-seg > .apg-on, .apg-seg > .active, .apg-seg > [aria-pressed="true"], .apg-seg > [aria-selected="true"], .apg-seg > [aria-current="true"], .apg-seg > input:checked + label { color: var(--apg-strong); background: var(--apg-surface); box-shadow: 0 0 0 1px rgba(var(--apg-acc),.4), 0 4px 14px -6px rgba(var(--apg-acc),.7); } .apg-seg > input { position: absolute; opacity: 0; pointer-events: none; } .apg-seg-n { font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--apg-acc-fg); } .apg-input { display: block; min-height: 36px; padding: .4rem .8rem; font-size: .875rem; line-height: 1.4; color: var(--apg-strong); background-color: var(--apg-glass-2); border: 1px solid var(--apg-border); border-radius: 12px; box-shadow: inset 0 1px 2px rgba(15,23,42,.06); transition: border-color .2s, box-shadow .2s; } /* doubled class = (0,2,1): out-ranks site.css's dark `.form-control::placeholder` (#6c757d, ~3.8:1 on dark glass) on fields that are also .form-control, in both themes */ .apg-input.apg-input::placeholder, [data-bs-theme="dark"] .apg-input::placeholder { color: var(--apg-faint); opacity: 1; } /* the accent border + ring are decoration; the focus INDICATOR is the neutral outline under "Focus" below (an accent ring alone is 1.7-2.7:1 — amber/green/indigo fail 3:1) */ .apg-input:focus { outline: 0; color: var(--apg-strong); background-color: var(--apg-glass-2); border-color: rgba(var(--apg-acc),.7); box-shadow: 0 0 0 3px rgba(var(--apg-acc),.3); } select.apg-input { padding-right: 2rem; } .apg-search { position: relative; display: flex; align-items: center; flex: 1 1 200px; min-width: 0; max-width: 420px; } .apg-search > i { position: absolute; left: .8rem; font-size: .85rem; color: var(--apg-faint); pointer-events: none; } .apg-search > .apg-input { width: 100%; padding-left: 2.1rem; border-radius: 999px; } /* ── Empty state ───────────────────────────────────────────────────────────────────── */ .apg-empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2.2rem 1.25rem 2rem; border-radius: 18px; text-align: center; background: radial-gradient(60% 150px at 50% 0, rgba(var(--apg-acc),.13), rgba(var(--apg-acc),0) 75%), var(--apg-glass-2); border: 1px dashed rgba(var(--apg-acc),.32); } :is(.apg-card, .apg-glass) .apg-empty { padding: 1.5rem 1rem 1.2rem; border: 0; background: radial-gradient(60% 120px at 50% 0, rgba(var(--apg-acc),.1), rgba(var(--apg-acc),0) 75%); } .apg-empty-icon { width: 58px; height: 58px; margin-bottom: .45rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; color: var(--apg-acc-num); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(var(--apg-acc),.16) 72%); box-shadow: inset 0 0 0 1px rgba(var(--apg-acc),.3), 0 12px 28px -10px rgba(var(--apg-acc),.7); animation: apgFloat 6s ease-in-out 1.6s infinite alternate; } @keyframes apgFloat { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-5px,0); } } .apg-empty-title { font-size: 1.05rem; font-weight: 800; color: var(--apg-strong); } .apg-empty-text { max-width: 36ch; font-size: .86rem; color: var(--apg-sub); } .apg-empty > :is(.apg-btn-glow, .apg-btn-ghost, .btn) { margin-top: .6rem; } /* ── Urgent: a breathing accent glow (opacity-only, on ::after) ───────────────────────── Cards, tiles, glass panels and pills breathe; rows keep their bar lit and pulse it. */ :is(.apg-card, .apg-glass, .apg-tile, .apg-pill, .apg-chip).apg-urgent { position: relative; isolation: isolate; border-color: rgba(var(--apg-acc),.45); } :is(.apg-card, .apg-glass, .apg-tile, .apg-pill, .apg-chip).apg-urgent::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 18px 1px rgba(var(--apg-acc),.45), 0 0 40px 4px rgba(var(--apg-acc),.16); opacity: .45; animation: apgBreathe 3.6s ease-in-out 1.6s infinite; } :is(.apg-pill, .apg-chip).apg-urgent::after { box-shadow: 0 0 12px 1px rgba(var(--apg-acc),.55); } .apg-row.apg-urgent { background-color: rgba(var(--apg-acc),.07); } .apg-row.apg-urgent::before { opacity: 1; transform: none; animation: apgBreathe 3.6s ease-in-out 1.6s infinite; } @keyframes apgBreathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } /* ── Tables inside glass ────────────────────────────────────────────────────────────── */ .apg-table { --bs-table-bg: transparent; --bs-table-color: inherit; --bs-table-border-color: var(--apg-divider); --bs-table-hover-bg: rgba(var(--apg-acc),.08); --bs-table-hover-color: inherit; margin-bottom: 0; } .apg-table > thead th { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--apg-muted); border-bottom-color: var(--apg-border); } /* ── Entrance (prerender pass only) ────────────────────────────────────────────────────── Put .apg-intro on .apg-page ONLY during the prerender (see the classApi notes): the circuit's first render replaces the prerendered DOM, and replaying the rise there reads as a flash. backwards fill, so hover/active transforms work once it ends. */ @keyframes apgRise { from { opacity: 0; transform: translate3d(0,14px,0) scale(.985); } to { opacity: 1; transform: none; } } .apg-intro .apg-hero, .apg-intro .apg-rise { animation: apgRise .55s var(--apg-ease) backwards; } .apg-intro .apg-rise { animation-delay: calc(var(--apg-enter-base, 0s) + .12s); } .apg-intro .apg-enter > * { animation: apgRise .5s var(--apg-ease) backwards; animation-delay: calc(var(--apg-enter-base, 0s) + .6s); } .apg-intro .apg-enter > :nth-child(1) { animation-delay: calc(var(--apg-enter-base, 0s) + .06s); } .apg-intro .apg-enter > :nth-child(2) { animation-delay: calc(var(--apg-enter-base, 0s) + .11s); } .apg-intro .apg-enter > :nth-child(3) { animation-delay: calc(var(--apg-enter-base, 0s) + .16s); } .apg-intro .apg-enter > :nth-child(4) { animation-delay: calc(var(--apg-enter-base, 0s) + .21s); } .apg-intro .apg-enter > :nth-child(5) { animation-delay: calc(var(--apg-enter-base, 0s) + .26s); } .apg-intro .apg-enter > :nth-child(6) { animation-delay: calc(var(--apg-enter-base, 0s) + .31s); } .apg-intro .apg-enter > :nth-child(7) { animation-delay: calc(var(--apg-enter-base, 0s) + .36s); } .apg-intro .apg-enter > :nth-child(8) { animation-delay: calc(var(--apg-enter-base, 0s) + .41s); } .apg-intro .apg-enter > :nth-child(9) { animation-delay: calc(var(--apg-enter-base, 0s) + .46s); } .apg-intro .apg-enter > :nth-child(10) { animation-delay: calc(var(--apg-enter-base, 0s) + .51s); } .apg-intro .apg-enter > :nth-child(n+11) { animation-delay: calc(var(--apg-enter-base, 0s) + .56s); } /* a second staggered group further down the page starts after the first */ .apg-enter-late { --apg-enter-base: .3s; } /* ── Phones ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .apg-title { font-size: 1.3rem; } .apg-orb { width: 40px; height: 40px; font-size: 1.05rem; } .apg-hero-main { gap: .7rem; } .apg-tiles { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: .5rem; } .apg-tiles-5, .apg-tiles-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .apg-tile { padding: .62rem .3rem .55rem; border-radius: 13px; } .apg-tile-n { font-size: 1.32rem; } .apg-tile-l { font-size: .6rem; letter-spacing: .04em; } .apg-glass, .apg-card { border-radius: 16px; } /* actions stay beside the text (two 40px buttons fit at 375px); 3+ buttons wrap under it */ .apg-row { flex-wrap: wrap; } .apg-row-body { flex: 1 1 8.5rem; } .apg-row-actions { margin-left: auto; gap: .5rem; } .apg-search { max-width: none; flex-basis: 100%; } .apg-toolbar-end { margin-left: 0; } } /* Touch hardening — phones at ANY orientation (a landscape iPhone is 667-932px wide, past the layout breakpoint) and tablets: keyed to the pointer, not only the width. Layout-only phone rules stay in the width query above. Pages that shrink type for desktop should scope it to (pointer: fine) so these still win on touch. */ @media (max-width: 640px), (pointer: coarse) { /* finger-sized targets */ .apg-row-actions .btn, .apg-row-actions .apg-btn-ghost, .apg-row-actions .apg-icon-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } .apg-btn-glow, .apg-btn-ghost { min-height: 40px; } .apg-btn-sm { min-height: 34px; } .apg-chip { min-height: 36px; } .apg-seg > :is(button, a, label), .apg-seg-btn { min-height: 34px; } /* iOS zooms the page when a focused input is under 16px */ .apg-input { font-size: 16px; } } /* ── Dark theme: neon on glass ─────────────────────────────────────────────────────── */ [data-bs-theme="dark"] .apg-aurora { background: radial-gradient(130% 620px at 50% 0, rgba(49,46,129,.5), rgba(49,46,129,0) 72%), linear-gradient(180deg, rgba(7,9,22,.62), rgba(7,9,22,.3) 55%, rgba(7,9,22,0)); } [data-bs-theme="dark"] .apg-aurora::before { background-image: linear-gradient(rgba(148,163,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,255,.055) 1px, transparent 1px); } [data-bs-theme="dark"] .apg-aurora::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; opacity: .55; background-image: radial-gradient(1.3px 1.3px at 12% 18%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 68% 42%, rgba(199,210,254,.7), transparent), radial-gradient(1.5px 1.5px at 38% 76%, rgba(165,243,252,.6), transparent), radial-gradient(1px 1px at 86% 12%, rgba(255,255,255,.6), transparent), radial-gradient(1.2px 1.2px at 24% 58%, rgba(233,213,255,.6), transparent); background-size: 260px 260px, 330px 330px, 410px 410px, 290px 290px, 370px 370px; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); animation: apgTwinkle 6s ease-in-out 1.6s infinite alternate; } @keyframes apgTwinkle { from { opacity: .55; } to { opacity: .25; } } [data-bs-theme="dark"] .apg-blob { opacity: .95; } [data-bs-theme="dark"] .apg-title { --apg-title-grad: linear-gradient(90deg, #ffffff 0%, #ede9fe 42%, #c4b5fd 74%, #67e8f9 100%); --apg-glint: #a5f3fc; } /* a faint drop shadow carries small text over the aurora's brightest pass */ [data-bs-theme="dark"] .apg-subtitle, [data-bs-theme="dark"] .apg-section-title { text-shadow: 0 1px 2px rgba(0,0,0,.45); } /* Dark phones: blob-2's core (top:-140px; right:-30%) lands right under the hero subtitle at 375-430px, and a cyan/blue b2 took plain subtitle ink to ~3.8:1 (measured on My Tasks, TaskList, Briefings, Calendar, Voice Reps — each patched locally before this). Systemic fix: dim blob-2 there and give subtitle text a firmer backing. Pages may still recolor b2 locally. */ @media (max-width: 640px) { [data-bs-theme="dark"] .apg-blob-2 { opacity: .6; } [data-bs-theme="dark"] .apg-subtitle { text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 12px rgba(0,0,0,.35); } } [data-bs-theme="dark"] .apg-live-pip { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.18), 0 0 10px rgba(34,197,94,.9); } [data-bs-theme="dark"] .apg-orb { box-shadow: 0 0 0 1px rgba(var(--apg-acc),.3), 0 0 22px -2px rgba(var(--apg-acc),.65), 0 10px 26px -8px rgba(0,0,0,.8); } [data-bs-theme="dark"] .apg-icon-btn[aria-pressed="true"], [data-bs-theme="dark"] .apg-icon-btn.apg-on { color: #c4b5fd; border-color: rgba(167,139,250,.45); box-shadow: inset 0 1px 0 var(--apg-glass-hi), 0 0 16px -4px rgba(139,92,246,.6); } [data-bs-theme="dark"] .apg-card-icon { background: rgba(var(--apg-acc),.2); color: var(--apg-acc-fg); box-shadow: inset 0 0 0 1px rgba(var(--apg-acc),.3), 0 0 18px -3px rgba(var(--apg-acc),.6); } [data-bs-theme="dark"] .apg-card-icon > i, [data-bs-theme="dark"] .apg-row-lead > i, [data-bs-theme="dark"] .apg-section-title > i { text-shadow: 0 0 10px currentColor; } [data-bs-theme="dark"] .apg-row-lead { background: rgba(var(--apg-acc),.18); color: var(--apg-acc-fg); box-shadow: inset 0 0 0 1px rgba(var(--apg-acc),.28); } [data-bs-theme="dark"] .apg-section-title > i { color: var(--apg-acc-fg); } [data-bs-theme="dark"] .apg-tile.apg-lit { border-color: rgba(var(--apg-acc),.45); background: linear-gradient(165deg, rgba(var(--apg-acc),.2), rgba(var(--apg-acc),.03) 65%), var(--apg-glass-2); box-shadow: inset 0 1px 0 var(--apg-glass-hi), 0 0 0 1px rgba(var(--apg-acc),.08), 0 12px 28px -14px rgba(var(--apg-acc),.6), 0 0 24px -8px rgba(var(--apg-acc),.65); } [data-bs-theme="dark"] .apg-lit .apg-tile-n { color: var(--apg-acc-num); text-shadow: 0 0 10px rgba(var(--apg-acc),.8), 0 0 26px rgba(var(--apg-acc),.45); } [data-bs-theme="dark"] .apg-pill { background: rgba(var(--apg-acc),.18); border-color: rgba(var(--apg-acc),.4); text-shadow: 0 0 10px rgba(var(--apg-acc),.35); } [data-bs-theme="dark"] .apg-pill.apg-pill-solid { text-shadow: none; box-shadow: 0 0 14px -3px rgba(var(--apg-acc),.8); } [data-bs-theme="dark"] :is(.apg-subtitle, .apg-section-title, .apg-over-aurora) .apg-pill:not(.apg-pill-solid) { background: linear-gradient(rgba(var(--apg-acc),.2), rgba(var(--apg-acc),.2)), var(--apg-solid); } [data-bs-theme="dark"] .apg-chip.apg-on, [data-bs-theme="dark"] .apg-chip.active, [data-bs-theme="dark"] .apg-chip[aria-pressed="true"], [data-bs-theme="dark"] .apg-chip[aria-selected="true"], [data-bs-theme="dark"] .apg-chip[aria-current="true"] { background: linear-gradient(rgba(var(--apg-acc),.22), rgba(var(--apg-acc),.22)), var(--apg-glass-2); text-shadow: 0 0 10px rgba(var(--apg-acc),.45); } [data-bs-theme="dark"] .apg-seg > .apg-on, [data-bs-theme="dark"] .apg-seg > .active, [data-bs-theme="dark"] .apg-seg > [aria-pressed="true"], [data-bs-theme="dark"] .apg-seg > [aria-selected="true"], [data-bs-theme="dark"] .apg-seg > [aria-current="true"], [data-bs-theme="dark"] .apg-seg > input:checked + label { color: #fff; background: rgba(var(--apg-acc),.24); box-shadow: 0 0 0 1px rgba(var(--apg-acc),.45), 0 0 16px -4px rgba(var(--apg-acc),.7); } [data-bs-theme="dark"] .apg-input { box-shadow: inset 0 1px 2px rgba(0,0,0,.35); } [data-bs-theme="dark"] .apg-empty-icon { color: var(--apg-acc-fg); text-shadow: 0 0 12px rgba(var(--apg-acc),.8); background: radial-gradient(circle at 35% 30%, rgba(var(--apg-acc),.38), rgba(var(--apg-acc),.08) 72%); box-shadow: inset 0 0 0 1px rgba(var(--apg-acc),.35), 0 0 30px -6px rgba(var(--apg-acc),.7); } [data-bs-theme="dark"] .apg-row.apg-new .apg-row-main { color: #fff; } /* ── Interaction states (after the dark block so equal-weight dark rules never mask them; hover = pointer devices only, :active = the tap response on iPhone) ────────────── */ @media (hover: hover) { .apg-tile:is(a, button, [role="button"], [tabindex]):hover { transform: translateY(-3px); border-color: rgba(var(--apg-acc),.55); box-shadow: inset 0 1px 0 var(--apg-glass-hi), 0 16px 30px -14px rgba(var(--apg-acc),.6), 0 0 26px -6px rgba(var(--apg-acc),.55); } .apg-tile:is(a, button, [role="button"], [tabindex]):hover::before { opacity: 1; } .apg-card.apg-card:hover { transform: translateY(-2px); border-color: rgba(var(--apg-acc),.36); box-shadow: inset 0 1px 0 var(--apg-glass-hi), var(--apg-depth), 0 24px 48px -26px rgba(var(--apg-acc),.8), 0 0 0 1px rgba(var(--apg-acc),.08); } .apg-row:hover { background-color: rgba(var(--apg-acc),.09); } .apg-row:hover::before { opacity: 1; transform: none; } .apg-btn-glow:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 12px 30px -6px rgba(124,58,237,.75); } .apg-btn-glow[class*="apg-acc-"]:hover { box-shadow: 0 12px 30px -6px rgba(var(--apg-acc),.8); } .apg-btn-ghost:hover, .apg-icon-btn:hover, .apg-chip:hover { color: var(--apg-strong); border-color: rgba(var(--apg-acc),.5); background: linear-gradient(rgba(var(--apg-acc),.1), rgba(var(--apg-acc),.1)), var(--apg-glass-2); box-shadow: 0 0 0 1px rgba(var(--apg-acc),.18), 0 0 20px -4px rgba(var(--apg-acc),.6); } :is(a, button).apg-pill:hover { background: rgba(var(--apg-acc),.2); border-color: rgba(var(--apg-acc),.55); box-shadow: 0 0 14px -4px rgba(var(--apg-acc),.7); } :is(.apg-subtitle, .apg-section-title, .apg-over-aurora) :is(a, button).apg-pill:not(.apg-pill-solid):hover { background: linear-gradient(rgba(var(--apg-acc),.22), rgba(var(--apg-acc),.22)), var(--apg-solid); } .apg-more:hover { background: rgba(var(--apg-acc),.12); border-color: rgba(var(--apg-acc),.28); box-shadow: 0 0 18px -8px rgba(var(--apg-acc),.8); } .apg-card-link:hover i { transform: translateX(3px); } .apg-hero .apg-hero-actions .btn-outline-secondary:hover { box-shadow: 0 0 0 1px rgba(139,92,246,.18), 0 0 20px -4px rgba(139,92,246,.6); } .apg-row-actions .btn-success:hover { box-shadow: 0 0 0 1px rgba(74,222,128,.6), 0 0 20px rgba(34,197,94,.65); } [data-bs-theme="dark"] .apg-card-link:hover { text-shadow: 0 0 10px rgba(110,168,254,.6); } } .apg-tile:is(a, button, [role="button"], [tabindex]):active { transform: scale(.96); border-color: rgba(var(--apg-acc),.65); box-shadow: inset 0 1px 0 var(--apg-glass-hi), 0 0 30px -4px rgba(var(--apg-acc),.75); } .apg-card.apg-card:active { border-color: rgba(var(--apg-acc),.42); } .apg-row:active { background-color: rgba(var(--apg-acc),.14); } .apg-row:active::before { opacity: 1; transform: none; } .apg-btn-glow:active { transform: scale(.96); } .apg-btn-ghost:active, .apg-icon-btn:active, .apg-chip:active { transform: scale(.95); background: linear-gradient(rgba(var(--apg-acc),.16), rgba(var(--apg-acc),.16)), var(--apg-glass-2); } .apg-more:active { background: rgba(var(--apg-acc),.16); } .apg-row-actions .btn-success:active { transform: scale(.93); box-shadow: 0 0 0 1px rgba(74,222,128,.7), 0 0 24px rgba(34,197,94,.8); } /* Focus: a neutral high-contrast ring (never accent-coloured — yellow/amber/green fail 3:1 in light and melt into their own halo in dark), lifted above neighbouring glows. */ :is(.apg-tile, .apg-row, .apg-row-body, .apg-chip, .apg-pill, .apg-btn-glow, .apg-btn-ghost, .apg-icon-btn, .apg-card-link, .apg-seg-btn, .apg-more, .apg-card, .apg-glass):focus-visible { outline: 2px solid var(--apg-strong); outline-offset: 3px; z-index: 3; } .apg-seg > :is(button, a, label):focus-visible, .apg-seg > input:focus-visible + label { outline: 2px solid var(--apg-strong); outline-offset: 1px; } :is(.apg-row, .apg-row-body):focus-visible { outline-offset: 1px; } /* inputs keep their accent border as decoration; this is the indicator (text fields always match :focus-visible; selects do on keyboard focus) */ .apg-input:focus-visible { outline: 2px solid var(--apg-strong); outline-offset: 2px; } /* Bootstrap buttons + checkboxes/switches on a glow page get the same ring. Bootstrap's .btn:focus-visible drops the outline and relies on a tinted shadow (the green glow buttons' 50% green was ~1.5:1 on light glass, and :hover glows replaced it); an outline is never repainted by a hover box-shadow. */ :is(.apg-page, .apg-row-actions) .btn:focus-visible, .apg-page .form-check-input:focus-visible { outline: 2px solid var(--apg-strong); outline-offset: 2px; } /* ── Motion preferences ──────────────────────────────────────────────────────────────── On-page pause: put .apg-still on .apg-page (see classApi for the toggle). Same stop as prefers-reduced-motion below, for viewers who never set the OS switch. Glows stay lit. */ .apg-still [class*="apg-"], .apg-still [class*="apg-"]::before, .apg-still [class*="apg-"]::after, .apg-still [class*="apg-"] > i { animation: none !important; transition: none !important; } .apg-still :is(.apg-tile, .apg-card, .apg-btn-glow, .apg-btn-ghost, .apg-icon-btn, .apg-chip):is(:hover, :active), .apg-still .apg-card-link:hover i, .apg-still .apg-row-actions .btn-success:active { transform: none !important; } @media (prefers-reduced-motion: reduce) { [class*="apg-"], [class*="apg-"]::before, [class*="apg-"]::after, [class*="apg-"] > i { animation: none !important; transition: none !important; } :is(.apg-tile, .apg-card, .apg-btn-glow, .apg-btn-ghost, .apg-icon-btn, .apg-chip):is(:hover, :active), .apg-card-link:hover i, .apg-row-actions .btn-success:active { transform: none !important; } } /* ── Transparency / contrast preferences ───────────────────────────────────────────── */ @media (prefers-reduced-transparency: reduce) { :root { --apg-glass: #ffffff; --apg-glass-2: #ffffff; --apg-solid: #ffffff; --apg-surface: #ffffff; } [data-bs-theme="dark"] { --apg-glass: #1b2030; --apg-glass-2: #1b2030; --apg-solid: #1b2030; --apg-surface: #161a2a; } [class*="apg-"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* the dark selector matches the (0,2,0) dark .95 rule so the dimming lands in BOTH themes */ .apg-blob, [data-bs-theme="dark"] .apg-blob { opacity: .25; } } /* Windows Contrast themes: shadows, gradients and tinted borders are all dropped or forced to system colours, and every "selected / on" state here was drawn with exactly those. Give the controls a real boundary and the on-state a Highlight outline (never on the focused element, so the focus ring still reads as focus). */ @media (forced-colors: active) { .apg-aurora { display: none; } .apg-title { background: none; -webkit-text-fill-color: CanvasText; color: CanvasText; } .apg-orb::before, .apg-orb::after { display: none; } .apg-btn-glow, .apg-btn-ghost, .apg-icon-btn, .apg-chip, .apg-tile { border: 1px solid ButtonText; } :is(.apg-tile, .apg-chip, .apg-btn-ghost, .apg-icon-btn, .apg-seg > :is(button, a, label), .apg-seg-btn):is(.apg-on, .active, [aria-pressed="true"], [aria-selected="true"], [aria-current="true"]):not(:focus-visible), .apg-seg > input:checked:not(:focus-visible) + label { outline: 2px solid Highlight; outline-offset: 1px; } } /* Print: browsers skip background images by default, and the title's text is painted BY its gradient (fill: transparent) — without this every glow page's h1 printed blank. */ @media print { .apg-title { background: none !important; -webkit-text-fill-color: currentColor; color: #000; animation: none; } .apg-aurora { display: none; } }