/** * OTROTL Network Overlay - Shared Frontend Styles * ================================================ * Copied to each partner site's static directories. * * Design rules: * - ALL rem units, ZERO px values * - Mobile-first: 360px (22.5rem) minimum viewport * - Touch targets: min 2.75rem * - Dark/Light support via `dark` class on * - Font Awesome icons assumed available * - Designed to scale to 100+ network sites */ /* ========================================================================== CSS Custom Properties ========================================================================== */ :root { /* --- overlay geometry --- */ --otrotl-panel-max-width: min(92vw, 72rem); --otrotl-panel-max-height: 85vh; --otrotl-z-backdrop: 9999; --otrotl-z-panel: 10000; --otrotl-z-toast: 10001; /* --- light-mode palette (default) --- */ --otrotl-bg-panel: #ffffff; --otrotl-bg-card: #ffffff; --otrotl-bg-card-hover: #f8fafc; --otrotl-bg-header: #ffffff; --otrotl-bg-footer: #ffffff; --otrotl-bg-trigger: rgba(241, 245, 249, 0.9); --otrotl-bg-trigger-hover: rgba(226, 232, 240, 1); --otrotl-bg-input: #f1f5f9; --otrotl-text-primary: #0f172a; --otrotl-text-secondary: #475569; --otrotl-text-muted: #94a3b8; --otrotl-border: #e2e8f0; --otrotl-border-hover: #cbd5e1; --otrotl-shadow-panel: 0 1.25rem 3.75rem -0.75rem rgba(0, 0, 0, 0.25); --otrotl-shadow-card: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.06); --otrotl-shadow-card-hover: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); } /* --- dark-mode palette --- */ html.dark { --otrotl-bg-panel: #0f172a; --otrotl-bg-card: #1e293b; --otrotl-bg-card-hover: #263548; --otrotl-bg-header: #0f172a; --otrotl-bg-footer: #0f172a; --otrotl-bg-trigger: rgba(30, 41, 59, 0.7); --otrotl-bg-trigger-hover: rgba(51, 65, 85, 0.9); --otrotl-bg-input: #1e293b; --otrotl-text-primary: #f1f5f9; --otrotl-text-secondary: #94a3b8; --otrotl-text-muted: #64748b; --otrotl-border: #334155; --otrotl-border-hover: #475569; --otrotl-shadow-panel: 0 1.25rem 3.75rem -0.75rem rgba(0, 0, 0, 0.5); --otrotl-shadow-card: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2); --otrotl-shadow-card-hover: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35); } /* ========================================================================== Trigger Button ========================================================================== */ .otrotl-network-trigger { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: none; border-radius: 0.5rem; background: var(--otrotl-bg-trigger); color: #3b82f6; font-size: 1.125rem; cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease, filter 0.2s ease; flex-shrink: 0; position: relative; z-index: 1; } .otrotl-network-trigger:hover { transform: scale(1.05); background: var(--otrotl-bg-trigger-hover); filter: brightness(1.1); } .otrotl-network-trigger:focus-visible { outline: 0.125rem solid #3b82f6; outline-offset: 0.125rem; } .otrotl-network-trigger:active { transform: scale(0.97); } /* ========================================================================== Backdrop ========================================================================== */ .otrotl-overlay-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(0.25rem); -webkit-backdrop-filter: blur(0.25rem); z-index: var(--otrotl-z-backdrop); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .otrotl-overlay-backdrop.otrotl-active { opacity: 1; visibility: visible; } /* ========================================================================== Centered Modal Panel (was: left-sliding drawer) ========================================================================== */ .otrotl-overlay-panel { position: fixed; left: 50%; top: 50%; width: var(--otrotl-panel-max-width); max-height: var(--otrotl-panel-max-height); background: var(--otrotl-bg-panel); border: 0.0625rem solid var(--otrotl-border); border-radius: 1rem; box-shadow: var(--otrotl-shadow-panel); z-index: var(--otrotl-z-panel); display: flex; flex-direction: column; overflow: hidden; /* slide-up animation — starts slightly below center */ transform: translate(-50%, -50%) translateY(2rem); opacity: 0; visibility: hidden; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; } .otrotl-overlay-panel.otrotl-active { transform: translate(-50%, -50%) translateY(0); opacity: 1; visibility: visible; } /* ========================================================================== Panel Header ========================================================================== */ .otrotl-overlay-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 0.0625rem solid var(--otrotl-border); background: var(--otrotl-bg-header); flex-shrink: 0; gap: 0.75rem; } .otrotl-overlay-title { font-size: 1.125rem; font-weight: 700; color: var(--otrotl-text-primary); white-space: nowrap; letter-spacing: 0.025em; } .otrotl-overlay-controls { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; } /* --- header icon buttons (grid/list toggle, close) --- */ .otrotl-view-btn, .otrotl-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0.0625rem solid var(--otrotl-border); border-radius: 0.5rem; background: transparent; color: var(--otrotl-text-muted); font-size: 0.875rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .otrotl-view-btn:hover, .otrotl-close-btn:hover { color: var(--otrotl-text-primary); border-color: var(--otrotl-border-hover); background: var(--otrotl-bg-card-hover); } .otrotl-view-btn:focus-visible, .otrotl-close-btn:focus-visible { outline: 0.125rem solid #3b82f6; outline-offset: 0.0625rem; } .otrotl-view-btn.otrotl-view-active { color: #3b82f6; border-color: #3b82f6; background: rgba(59, 130, 246, 0.1); } .otrotl-close-btn:hover { color: #ef4444; border-color: #ef4444; } /* ========================================================================== Filter Bar (between header and body) ========================================================================== */ .otrotl-filter-bar { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem 1.25rem; border-bottom: 0.0625rem solid var(--otrotl-border); background: var(--otrotl-bg-header); flex-shrink: 0; } /* --- search input wrapper --- */ .otrotl-search-wrap { position: relative; display: flex; align-items: center; } .otrotl-search-icon { position: absolute; left: 0.75rem; color: var(--otrotl-text-muted); font-size: 0.875rem; pointer-events: none; } .otrotl-search-input { width: 100%; padding: 0.625rem 2.5rem 0.625rem 2.25rem; border: 0.0625rem solid var(--otrotl-border); border-radius: 0.5rem; background: var(--otrotl-bg-input); color: var(--otrotl-text-primary); font-size: 0.875rem; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .otrotl-search-input::placeholder { color: var(--otrotl-text-muted); } .otrotl-search-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 0.1875rem rgba(59, 130, 246, 0.15); } .otrotl-search-clear { position: absolute; right: 0.5rem; display: none; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border: none; border-radius: 50%; background: var(--otrotl-border); color: var(--otrotl-text-secondary); font-size: 0.625rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .otrotl-search-clear.otrotl-visible { display: inline-flex; } .otrotl-search-clear:hover { background: var(--otrotl-border-hover); color: var(--otrotl-text-primary); } /* --- category pills row --- */ .otrotl-category-pills { display: flex; align-items: center; gap: 0.375rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.125rem; } .otrotl-category-pills::-webkit-scrollbar { display: none; } .otrotl-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; border: 0.0625rem solid var(--otrotl-border); border-radius: 1.25rem; background: transparent; color: var(--otrotl-text-secondary); font-size: 0.75rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; min-height: 2rem; } .otrotl-pill:hover { border-color: var(--otrotl-border-hover); background: var(--otrotl-bg-card-hover); color: var(--otrotl-text-primary); } .otrotl-pill:focus-visible { outline: 0.125rem solid #3b82f6; outline-offset: 0.0625rem; } .otrotl-pill.otrotl-pill-active { background: #3b82f6; border-color: #3b82f6; color: #ffffff; } .otrotl-pill.otrotl-pill-active:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; } .otrotl-pill-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; border-radius: 0.5625rem; background: rgba(0, 0, 0, 0.08); font-size: 0.625rem; font-weight: 700; } .otrotl-pill.otrotl-pill-active .otrotl-pill-count { background: rgba(255, 255, 255, 0.25); } /* --- result count --- */ .otrotl-result-count { font-size: 0.75rem; color: var(--otrotl-text-muted); flex-shrink: 0; } /* ========================================================================== Panel Body (scrollable card area) ========================================================================== */ .otrotl-overlay-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } /* --- custom thin scrollbar --- */ .otrotl-overlay-body::-webkit-scrollbar { width: 0.375rem; } .otrotl-overlay-body::-webkit-scrollbar-track { background: transparent; } .otrotl-overlay-body::-webkit-scrollbar-thumb { background: var(--otrotl-border); border-radius: 0.1875rem; } .otrotl-overlay-body::-webkit-scrollbar-thumb:hover { background: var(--otrotl-border-hover); } /* Firefox scrollbar */ .otrotl-overlay-body { scrollbar-width: thin; scrollbar-color: var(--otrotl-border) transparent; } /* --- loading spinner --- */ .otrotl-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; gap: 1rem; color: var(--otrotl-text-muted); font-size: 0.875rem; } .otrotl-loading .otrotl-spinner { width: 2rem; height: 2rem; border: 0.1875rem solid var(--otrotl-border); border-top-color: #3b82f6; border-radius: 50%; animation: otrotl-spin 0.7s linear infinite; } @keyframes otrotl-spin { to { transform: rotate(360deg); } } /* --- error / empty state --- */ .otrotl-error, .otrotl-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; gap: 0.75rem; color: var(--otrotl-text-muted); text-align: center; font-size: 0.875rem; } .otrotl-error { color: #ef4444; } .otrotl-error i, .otrotl-empty-state i { font-size: 1.5rem; } .otrotl-retry-btn, .otrotl-clear-filters-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border: 0.0625rem solid var(--otrotl-border); border-radius: 0.5rem; background: transparent; color: var(--otrotl-text-secondary); font-size: 0.8125rem; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .otrotl-retry-btn:hover, .otrotl-clear-filters-btn:hover { border-color: var(--otrotl-border-hover); color: var(--otrotl-text-primary); } /* ========================================================================== Grid / List View Containers — responsive columns for 100+ sites ========================================================================== */ .otrotl-sites-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } /* 2 columns at 30rem (480px) */ @media (min-width: 30rem) { .otrotl-sites-grid.otrotl-grid-view { grid-template-columns: repeat(2, 1fr); } } /* 3 columns at 48rem (768px) */ @media (min-width: 48rem) { .otrotl-sites-grid.otrotl-grid-view { grid-template-columns: repeat(3, 1fr); } } /* 4 columns at 64rem (1024px) */ @media (min-width: 64rem) { .otrotl-sites-grid.otrotl-grid-view { grid-template-columns: repeat(4, 1fr); } } .otrotl-sites-grid.otrotl-list-view { grid-template-columns: 1fr; } /* 2-column list view on wider screens */ @media (min-width: 48rem) { .otrotl-sites-grid.otrotl-list-view { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== Site Card ========================================================================== */ .otrotl-site-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border: 0.0625rem solid var(--otrotl-border); border-radius: 0.75rem; background: var(--otrotl-bg-card); box-shadow: var(--otrotl-shadow-card); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; cursor: default; position: relative; } .otrotl-site-card:hover { border-color: var(--otrotl-border-hover); box-shadow: var(--otrotl-shadow-card-hover); transform: translateY(-0.0625rem); } /* --- hidden by filter --- */ .otrotl-site-card.otrotl-hidden { display: none; } /* --- list-view compact card adjustments --- */ .otrotl-list-view .otrotl-site-card { padding: 0.75rem; border-radius: 0.5rem; } .otrotl-list-view .otrotl-site-icon { width: 2rem; height: 2rem; font-size: 0.875rem; border-radius: 0.375rem; } .otrotl-list-view .otrotl-site-content { flex-direction: row; align-items: center; gap: 0.75rem; } .otrotl-list-view .otrotl-site-name { font-size: 0.8125rem; margin-bottom: 0; } .otrotl-list-view .otrotl-site-desc { display: none; } .otrotl-list-view .otrotl-site-category { display: none; } .otrotl-list-view .otrotl-site-actions { margin-top: 0; } /* ========================================================================== Site Icon ========================================================================== */ .otrotl-site-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; flex-shrink: 0; font-size: 1rem; transition: transform 0.2s ease; } .otrotl-site-card:hover .otrotl-site-icon { transform: scale(1.05); } /* ========================================================================== Site Content (middle section) ========================================================================== */ .otrotl-site-content { display: flex; flex-direction: column; flex: 1; min-width: 0; } .otrotl-site-name { font-size: 0.875rem; font-weight: 600; color: var(--otrotl-text-primary); margin-bottom: 0.125rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .otrotl-site-desc { font-size: 0.75rem; color: var(--otrotl-text-secondary); line-height: 1.4; margin-bottom: 0.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .otrotl-site-category { display: inline-block; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--otrotl-text-muted); margin-bottom: 0.375rem; } /* ========================================================================== Site Actions (FAV, SHARE, SAVE) ========================================================================== */ .otrotl-site-actions { display: flex; align-items: center; gap: 0.125rem; margin-top: 0.375rem; } .otrotl-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: none; border-radius: 0.375rem; background: transparent; color: var(--otrotl-text-muted); font-size: 0.75rem; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; } .otrotl-action-btn:hover { background: var(--otrotl-bg-card-hover); transform: scale(1.1); } .otrotl-action-btn:focus-visible { outline: 0.125rem solid #3b82f6; outline-offset: 0.0625rem; } .otrotl-action-btn:active { transform: scale(0.95); } /* FAV heart */ .otrotl-action-btn.otrotl-fav-btn:hover { color: #f87171; } .otrotl-action-btn.otrotl-fav-btn.otrotl-active { color: #ef4444; } /* SHARE */ .otrotl-action-btn.otrotl-share-btn:hover { color: #60a5fa; } /* SAVE bookmark */ .otrotl-action-btn.otrotl-save-btn:hover { color: #facc15; } .otrotl-action-btn.otrotl-save-btn.otrotl-active { color: #eab308; } /* ========================================================================== Site Status (right column: checkbox or registered check) ========================================================================== */ .otrotl-site-status { display: flex; align-items: flex-start; flex-shrink: 0; padding-top: 0.125rem; } /* --- checkbox for unregistered sites --- */ .otrotl-site-checkbox { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border: 0.0625rem solid var(--otrotl-border); border-radius: 0.25rem; background: transparent; cursor: pointer; transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; opacity: 0; color: transparent; font-size: 0.625rem; } .otrotl-site-card:hover .otrotl-site-checkbox { opacity: 1; } /* keep checkbox visible when checked even without hover */ .otrotl-site-checkbox.otrotl-checked { opacity: 1; background: #3b82f6; border-color: #3b82f6; color: #ffffff; } .otrotl-site-checkbox:hover { border-color: #3b82f6; } .otrotl-site-checkbox:focus-visible { outline: 0.125rem solid #3b82f6; outline-offset: 0.0625rem; opacity: 1; } /* --- registered green check --- */ .otrotl-site-registered { display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: #22c55e; font-size: 0.875rem; } /* ========================================================================== Panel Footer ========================================================================== */ .otrotl-overlay-footer { padding: 1rem 1.25rem; border-top: 0.0625rem solid var(--otrotl-border); background: var(--otrotl-bg-footer); flex-shrink: 0; } .otrotl-register-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1rem; border: none; border-radius: 0.5rem; background: #2563eb; color: #ffffff; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease; min-height: 2.75rem; } .otrotl-register-btn:hover:not(:disabled) { background: #1d4ed8; } .otrotl-register-btn:active:not(:disabled) { transform: scale(0.98); } .otrotl-register-btn:focus-visible { outline: 0.125rem solid #3b82f6; outline-offset: 0.125rem; } .otrotl-register-btn:disabled { opacity: 0.5; cursor: not-allowed; } .otrotl-register-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 0.625rem; background: rgba(255, 255, 255, 0.25); font-size: 0.6875rem; font-weight: 700; } /* ========================================================================== Toast System ========================================================================== */ .otrotl-toast-container { position: absolute; bottom: 5rem; right: 1rem; left: 1rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: var(--otrotl-z-toast); pointer-events: none; } .otrotl-toast { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: #ffffff; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2); pointer-events: auto; opacity: 0; transform: translateY(0.5rem); animation: otrotl-toast-in 0.25s ease forwards; } .otrotl-toast.otrotl-toast-out { animation: otrotl-toast-out 0.2s ease forwards; } .otrotl-toast-success { background: #16a34a; } .otrotl-toast-error { background: #dc2626; } .otrotl-toast-info { background: #2563eb; } @keyframes otrotl-toast-in { to { opacity: 1; transform: translateY(0); } } @keyframes otrotl-toast-out { to { opacity: 0; transform: translateY(0.5rem); } } /* ========================================================================== Keyboard-only focus styles (no outline on mouse click) ========================================================================== */ .otrotl-overlay-panel *:focus:not(:focus-visible) { outline: none; } /* ========================================================================== Reduced motion preference ========================================================================== */ @media (prefers-reduced-motion: reduce) { .otrotl-overlay-backdrop, .otrotl-overlay-panel, .otrotl-site-card, .otrotl-site-icon, .otrotl-action-btn, .otrotl-site-checkbox, .otrotl-network-trigger, .otrotl-toast { transition-duration: 0.01s !important; animation-duration: 0.01s !important; } }