/* PhD Square - Open Opportunities Finder Floating "Find Opportunities" button plus a popover panel. Self-contained: the JS injects all markup into , so there is nothing to place in the page except this stylesheet and the script. Colours reuse the site's own CSS variables (--accent, --gold, etc.) with fallbacks, so the widget matches every page automatically. Everything is scoped under the .opf- prefix to avoid cascade conflicts. */ .opf-root { --opf-green: var(--accent, #2d5f3f); --opf-green-dark: var(--accent-2, #1f4a2c); --opf-gold: var(--gold, #b08530); --opf-surface: var(--surface, #ffffff); --opf-elev: var(--bg-elev, #fbf7ec); --opf-ink: var(--ink, #1a1611); --opf-ink-2: var(--ink-2, #3a3328); --opf-ink-3: var(--ink-3, #7a6c54); --opf-ink-4: var(--ink-4, #a3957c); --opf-border: var(--border-soft, #e8dfc8); --opf-head: 'Fraunces', Georgia, serif; --opf-body: 'Manrope', system-ui, sans-serif; position: fixed; right: 24px; bottom: 24px; z-index: 9000; font-family: var(--opf-body); } /* ===== Launcher (FAB) ===== */ .opf-fab { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--opf-body); font-size: 0.85rem; font-weight: 600; color: #fff; background: var(--opf-green); border: none; border-radius: 999px; padding: 0.7rem 1.15rem; cursor: pointer; box-shadow: 0 8px 24px rgba(26,22,17,0.18); transition: background 0.2s ease, transform 0.15s ease; } .opf-fab:hover { background: var(--opf-green-dark); } .opf-fab:active { transform: translateY(1px); } .opf-fab:focus-visible { outline: 2px solid var(--opf-green-dark); outline-offset: 2px; } .opf-fab svg { width: 17px; height: 17px; flex-shrink: 0; } .opf-fab-label { white-space: nowrap; } /* ===== Panel ===== */ .opf-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: 380px; max-width: calc(100vw - 32px); max-height: 72vh; background: var(--opf-surface); border: 1px solid var(--opf-border); border-radius: 14px; box-shadow: 0 20px 60px rgba(26,22,17,0.22); display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; opacity: 0; transform: scale(0.96) translateY(6px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; } .opf-root.opf-open .opf-panel { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } .opf-root.opf-open .opf-fab { background: var(--opf-green-dark); } /* ===== Header ===== */ .opf-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem 1.1rem 0.85rem; border-bottom: 1px solid var(--opf-border); } .opf-head h2 { font-family: var(--opf-head); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; color: var(--opf-ink); margin: 0; } .opf-close { background: none; border: none; cursor: pointer; color: var(--opf-ink-3); padding: 4px; line-height: 0; border-radius: 6px; } .opf-close:hover { color: var(--opf-ink); } .opf-close:focus-visible { outline: 2px solid var(--opf-green); outline-offset: 2px; } .opf-close svg { width: 18px; height: 18px; } /* ===== Category chips ===== */ .opf-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--opf-border); } .opf-chip { font-family: var(--opf-body); font-size: 0.76rem; font-weight: 600; color: var(--opf-ink-2); background: var(--opf-elev); border: 1px solid var(--opf-border); border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .opf-chip:hover { border-color: var(--opf-green); } .opf-chip:focus-visible { outline: 2px solid var(--opf-green); outline-offset: 2px; } .opf-chip[aria-pressed="true"] { background: var(--opf-green); border-color: var(--opf-green); color: #fff; } /* ===== Results ===== */ .opf-results { padding: 0 1.1rem 1rem; overflow-y: auto; } .opf-count { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--opf-ink-4); padding: 0.9rem 0 0.3rem; } .opf-card { padding: 0.85rem 0; border-bottom: 1px solid var(--opf-border); } .opf-card:last-child { border-bottom: none; } .opf-card-title { font-family: var(--opf-head); font-size: 1rem; font-weight: 500; line-height: 1.3; margin: 0 0 0.45rem; } .opf-card-title a { color: var(--opf-ink); text-decoration: none; } .opf-card-title a:hover { color: var(--opf-green); text-decoration: underline; } .opf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--opf-ink-3); } .opf-deadline { font-weight: 600; color: var(--opf-ink-2); } .opf-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; background: rgba(45,95,63,0.10); color: var(--opf-green); white-space: nowrap; } .opf-badge.opf-urgent { background: rgba(161,68,47,0.13); color: #a1442f; } .opf-badge.opf-ongoing { background: rgba(176,133,48,0.16); color: #8a6717; } .opf-empty, .opf-error { font-size: 0.85rem; color: var(--opf-ink-3); padding: 1rem 0; line-height: 1.5; } /* ===== Mobile ===== */ @media (max-width: 480px) { .opf-root { right: 16px; bottom: 16px; } .opf-panel { position: fixed; right: 16px; left: 16px; bottom: 76px; width: auto; max-width: none; max-height: 70vh; } .opf-fab-label { display: none; } .opf-fab { padding: 0.85rem; } } @media (prefers-reduced-motion: reduce) { .opf-panel, .opf-fab { transition: none; } }