/**
* OTROTL Network Overlay - Shared Frontend Styles
* ================================================
* Served from a shared mount at /SHARED_NETWORK_OVERLAY/css/
* Source of truth: tools/SHARED_NETWORK_OVERLAY/frontend/css/
*
* 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
*
* Site integration contract:
* Set --otrotl-trigger-accent on :root to tint the trigger icon
* with the site's brand accent color. Falls back to #3b82f6 blue.
*
* Markup (inside a .nav-brand-group or equivalent flex/grid zone):
*
*/
/* ==========================================================================
CSS Custom Properties
========================================================================== */
:root {
/* --- overlay geometry ---
Fluid width: 92vw up to a hard cap of 100rem (1600px) so the panel
uses ~all the horizontal space on phones/tablets, breathes on
laptops, and doesn't become a cinemascope strip on 4K. */
--otrotl-panel-max-width: min(92vw, 100rem);
--otrotl-panel-max-height: 90vh;
/* Card grid: minimum card width before we wrap to a new row.
Override per-site if a brand wants denser/looser packing. */
--otrotl-card-min-width: 16rem;
--otrotl-card-min-width-list: 24rem;
--otrotl-z-backdrop: 9999;
--otrotl-z-panel: 10000;
--otrotl-z-toast: 10001;
/* --- trigger accent (override per-site for brand tint) --- */
--otrotl-trigger-accent: #3b82f6;
--otrotl-trigger-accent-soft: rgba(59, 130, 246, 0.12);
--otrotl-trigger-accent-ring: rgba(59, 130, 246, 0.35);
/* --- 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 — polished (icon + badge, no wrapper needed)
========================================================================== */
.otrotl-network-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
padding: 0;
border: 0.0625rem solid transparent;
border-radius: 0.75rem;
background: var(--otrotl-bg-trigger);
color: var(--otrotl-trigger-accent);
cursor: pointer;
transition: transform 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.otrotl-network-trigger:hover {
transform: scale(1.06);
background: var(--otrotl-trigger-accent-soft);
border-color: var(--otrotl-trigger-accent-ring);
box-shadow: 0 0 0 0.1875rem var(--otrotl-trigger-accent-ring);
}
.otrotl-network-trigger:focus-visible {
outline: 0.125rem solid var(--otrotl-trigger-accent);
outline-offset: 0.125rem;
}
.otrotl-network-trigger:active {
transform: scale(0.97);
}
/* --- Icon sub-element --- */
.otrotl-network-trigger__icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.375rem;
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
}
/* --- Count badge (top-right) --- */
.otrotl-network-trigger__badge {
position: absolute;
top: -0.25rem;
right: -0.25rem;
min-width: 1.125rem;
height: 1.125rem;
padding: 0 0.25rem;
border-radius: 1rem;
background: var(--otrotl-trigger-accent);
color: #ffffff;
font-size: 0.625rem;
font-weight: 700;
line-height: 1.125rem;
text-align: center;
pointer-events: none;
box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.15);
}
.otrotl-network-trigger__badge[hidden] {
display: none;
}
/* ==========================================================================
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 ---
flex-wrap means every pill is visible regardless of viewport, no
hidden horizontal scroll for users to discover. Wraps cleanly to
1 row on wide screens, 2-3 rows on phones. */
.otrotl-category-pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
padding-bottom: 0.125rem;
}
.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;
/* Prevent any child (card, role-select, long description) from forcing
horizontal overflow on the whole overlay body. */
overflow-x: hidden;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
/* --- 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 — fluid auto-fill, scales to any width
Key idea: the column count is derived from the CONTAINER WIDTH and a
MINIMUM CARD WIDTH, not from hard-coded viewport breakpoints. That
means the same layout works at 360px (phone), 1440px (laptop), and
3840px (4K TV) with zero cut-off cards, zero horizontal scroll, and
card widths that stay within a known readable band.
auto-fill + minmax(, 1fr):
- fits as many -wide tracks as possible into the container,
then stretches each one equally (1fr) to consume the leftover.
- Adding/removing a card never changes the width of the others.
- Works identically for 5 sites or 500.
========================================================================== */
.otrotl-sites-grid {
display: grid;
gap: 0.75rem;
/* min-width: 0 prevents grid blow-out when a card's content is wider
than its track (long descriptions, role-selects on narrow phones). */
min-width: 0;
width: 100%;
}
.otrotl-sites-grid.otrotl-grid-view {
grid-template-columns: repeat(auto-fill, minmax(var(--otrotl-card-min-width), 1fr));
}
.otrotl-sites-grid.otrotl-list-view {
grid-template-columns: repeat(auto-fill, minmax(var(--otrotl-card-min-width-list), 1fr));
}
/* Phones with very narrow viewports: force single column so cards don't
shrink below the 16rem minimum and clip content. */
@media (max-width: 22.5rem) {
.otrotl-sites-grid.otrotl-grid-view,
.otrotl-sites-grid.otrotl-list-view {
grid-template-columns: 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;
/* grid items: min-width: 0 lets the track shrink below content size,
so long names / descriptions truncate (via ellipsis on .site-name,
line-clamp on .site-desc) instead of widening the column. */
min-width: 0;
}
.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 1 0;
min-width: 0;
/* Hide overflow so a stubborn inline child (e.g. long unbroken URL)
can't push the flex track wider than its share. */
overflow: hidden;
}
.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: 0.75rem 1rem;
border-top: 0.0625rem solid var(--otrotl-border);
background: var(--otrotl-bg-footer);
flex-shrink: 0;
/* respect mobile safe-area at the bottom */
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0rem));
}
.otrotl-register-btn,
.otrotl-login-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0 1rem;
border: 0.0625rem solid transparent;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
/* lock height so grid stretch / content differences cannot resize one button */
height: 2.75rem;
min-height: 2.75rem;
max-height: 2.75rem;
box-sizing: border-box;
align-self: center;
white-space: nowrap;
}
.otrotl-register-btn {
background: #2563eb;
color: #ffffff;
}
.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,
.otrotl-login-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
box-shadow: none;
}
.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);
}
}
/* ==========================================================================
Card State Borders (unregistered / registered / logged in)
========================================================================== */
.otrotl-card--unregistered {
border-left: 0.1875rem solid #3b82f6;
}
.otrotl-card--registered {
border-left: 0.1875rem solid #f59e0b;
}
.otrotl-card--active {
border-left: 0.1875rem solid #22c55e;
}
/* ==========================================================================
Role Selector & Role Badge
========================================================================== */
.otrotl-role-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.otrotl-role-select {
display: block;
width: 100%;
max-width: 12rem;
padding: 0.25rem 0.5rem;
border: 0.0625rem solid var(--otrotl-border);
border-radius: 0.375rem;
background: var(--otrotl-bg-input);
color: var(--otrotl-text-primary);
font-size: 0.6875rem;
line-height: 1.4;
cursor: pointer;
min-height: 1.75rem;
transition: border-color 0.15s ease;
}
.otrotl-role-select:focus {
border-color: #3b82f6;
outline: none;
box-shadow: 0 0 0 0.125rem rgba(59, 130, 246, 0.15);
}
.otrotl-role-badge {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.5rem;
border-radius: 1rem;
background: rgba(245, 158, 11, 0.15);
color: #d97706;
font-size: 0.625rem;
font-weight: 600;
white-space: nowrap;
}
html.dark .otrotl-role-badge {
background: rgba(245, 158, 11, 0.2);
color: #fbbf24;
}
/* ==========================================================================
Per-Card Action Buttons (Register / Login / Go)
========================================================================== */
.otrotl-card-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.25rem 0.625rem;
border: 0.0625rem solid transparent;
border-radius: 0.375rem;
font-size: 0.6875rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
min-height: 1.75rem;
transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.otrotl-card-action-btn:active {
transform: scale(0.95);
}
.otrotl-card-action-btn:focus-visible {
outline: 0.125rem solid #3b82f6;
outline-offset: 0.0625rem;
}
/* Register (per-card) */
.otrotl-card-register-btn {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
border-color: rgba(59, 130, 246, 0.2);
}
.otrotl-card-register-btn:hover {
background: rgba(59, 130, 246, 0.2);
}
html.dark .otrotl-card-register-btn {
background: rgba(59, 130, 246, 0.15);
color: #60a5fa;
}
/* Login (per-card) */
.otrotl-card-login-btn {
background: rgba(245, 158, 11, 0.1);
color: #d97706;
border-color: rgba(245, 158, 11, 0.2);
}
.otrotl-card-login-btn:hover {
background: rgba(245, 158, 11, 0.2);
}
html.dark .otrotl-card-login-btn {
background: rgba(245, 158, 11, 0.15);
color: #fbbf24;
}
/* Go / Hop (per-card) */
.otrotl-hop-btn {
background: rgba(34, 197, 94, 0.1);
color: #16a34a;
border-color: rgba(34, 197, 94, 0.2);
}
.otrotl-hop-btn:hover {
background: rgba(34, 197, 94, 0.2);
}
html.dark .otrotl-hop-btn {
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
}
/* ==========================================================================
Enhanced Footer — Dual Bulk Action Bar
Layout ladder:
- Phones ( < 30rem ): stack — select-all on top, buttons side-by-side row
- Tablets / desktops: single row [ select-all | Register | Login ]
- Smart TVs ( >= 80rem ): larger tap targets and font sizes
========================================================================== */
.otrotl-bulk-bar {
display: grid;
grid-template-columns: auto 1fr 1fr;
align-items: center;
gap: 0.5rem 0.75rem;
}
/* Phone: stack select-all above, buttons share row below */
@media (max-width: 29.9375rem) {
.otrotl-bulk-bar {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"select select"
"reg login";
gap: 0.625rem;
}
.otrotl-bulk-bar .otrotl-select-all { grid-area: select; }
.otrotl-bulk-bar .otrotl-register-btn { grid-area: reg; }
.otrotl-bulk-bar .otrotl-login-btn { grid-area: login; }
}
.otrotl-select-all {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--otrotl-text-secondary);
cursor: pointer;
white-space: nowrap;
user-select: none;
min-height: 2.75rem;
padding: 0 0.25rem;
}
.otrotl-select-all input[type="checkbox"] {
width: 1.125rem;
height: 1.125rem;
cursor: pointer;
accent-color: #3b82f6;
flex-shrink: 0;
}
.otrotl-login-btn {
background: #d97706;
color: #ffffff;
}
.otrotl-login-btn:hover:not(:disabled) {
background: #b45309;
}
.otrotl-login-btn:active:not(:disabled) {
transform: scale(0.98);
}
.otrotl-login-btn:focus-visible {
outline: 0.125rem solid #f59e0b;
outline-offset: 0.125rem;
}
/* Register button inside bulk bar uses grid cell width, not 100% */
.otrotl-bulk-bar .otrotl-register-btn,
.otrotl-bulk-bar .otrotl-login-btn {
width: 100%;
}
/* ==========================================================================
Site Status — enhanced for login checkbox + action buttons
========================================================================== */
.otrotl-site-status {
flex-direction: column;
gap: 0.375rem;
align-items: center;
}
/* Login checkbox (orange accent) */
.otrotl-login-checkbox {
border-color: var(--otrotl-border);
}
.otrotl-login-checkbox.otrotl-checked {
background: #f59e0b;
border-color: #f59e0b;
color: #ffffff;
}
.otrotl-login-checkbox:hover {
border-color: #f59e0b;
}
/* ==========================================================================
Keyboard-only focus styles (no outline on mouse click)
========================================================================== */
.otrotl-overlay-panel *:focus:not(:focus-visible) {
outline: none;
}
/* ==========================================================================
Responsive — phones, tablets, desktops, Smart TVs
Breakpoints (all rem-based, mobile-first):
< 30rem → small phones: full-screen panel, actions stack
< 48rem → tablets / large phones: checkboxes always visible, tighter chrome
>= 80rem → Smart TVs / 4K: bigger type, roomier cards, stronger focus rings
========================================================================== */
/* --- Phones: full-height sheet, edge-to-edge --- */
@media (max-width: 29.9375rem) {
:root {
--otrotl-panel-max-width: 100vw;
--otrotl-panel-max-height: 100vh;
}
.otrotl-overlay-panel {
border-radius: 0;
border: 0;
width: 100vw;
max-height: 100dvh;
}
.otrotl-overlay-header {
padding: 0.75rem 1rem;
}
.otrotl-overlay-title {
font-size: 1rem;
}
.otrotl-overlay-body {
padding: 0.75rem;
}
.otrotl-filter-bar {
padding: 0.625rem 1rem;
gap: 0.5rem;
}
/* Per-card bottom row: icon narrower, status column not stretched */
.otrotl-site-card {
padding: 0.75rem;
gap: 0.625rem;
}
/* Touch: make checkboxes visible without hover on mobile */
.otrotl-site-checkbox {
opacity: 1;
}
/* Role select: full width of content column */
.otrotl-role-select {
max-width: 100%;
font-size: 0.75rem;
}
}
/* --- Tablets / large phones: keep checkboxes visible (no hover on touch) --- */
@media (hover: none) and (pointer: coarse) {
.otrotl-site-checkbox {
opacity: 1;
}
.otrotl-site-card:hover {
transform: none;
}
}
/* --- Smart TVs / 4K: bigger everything, stronger focus for D-pad ---
Two activation paths:
1. Viewport >= 80rem (automatic for large screens)
2. or (manual opt-in for partner sites
that know they're rendering on a TV — e.g. Roku/Tizen/WebOS wrappers
where the useragent viewport may not reliably signal TV context).
*/
@media (min-width: 80rem) {
.otrotl-overlay-title { font-size: 1.375rem; }
.otrotl-site-name { font-size: 1rem; }
.otrotl-site-desc { font-size: 0.875rem; }
.otrotl-site-category { font-size: 0.75rem; }
.otrotl-card-action-btn {
font-size: 0.8125rem;
padding: 0.5rem 1rem;
min-height: 2.5rem;
}
.otrotl-pill {
font-size: 0.875rem;
padding: 0.5rem 1rem;
min-height: 2.5rem;
}
.otrotl-search-input {
font-size: 1rem;
padding: 0.875rem 2.75rem 0.875rem 2.5rem;
}
.otrotl-register-btn,
.otrotl-login-btn {
font-size: 1rem;
height: 3rem;
min-height: 3rem;
max-height: 3rem;
padding: 0 1.25rem;
}
/* On TV-scale viewports, bump the minimum card width so cards stay
legible at 10-foot distance. auto-fill handles the column count. */
:root {
--otrotl-card-min-width: 20rem;
--otrotl-card-min-width-list: 28rem;
}
}
/* Manual TV mode — mirrors the min-width: 80rem rules so partners can force
TV-sized chrome even when the viewport doesn't cross the breakpoint. */
html[data-tv] .otrotl-overlay-title { font-size: 1.375rem; }
html[data-tv] .otrotl-site-name { font-size: 1rem; }
html[data-tv] .otrotl-site-desc { font-size: 0.875rem; }
html[data-tv] .otrotl-site-category { font-size: 0.75rem; }
html[data-tv] .otrotl-card-action-btn {
font-size: 0.8125rem;
padding: 0.5rem 1rem;
min-height: 2.5rem;
}
html[data-tv] .otrotl-pill {
font-size: 0.875rem;
padding: 0.5rem 1rem;
min-height: 2.5rem;
}
html[data-tv] .otrotl-search-input {
font-size: 1rem;
padding: 0.875rem 2.75rem 0.875rem 2.5rem;
}
html[data-tv] .otrotl-register-btn,
html[data-tv] .otrotl-login-btn {
font-size: 1rem;
height: 3rem;
min-height: 3rem;
max-height: 3rem;
padding: 0 1.25rem;
}
html[data-tv] {
--otrotl-card-min-width: 20rem;
--otrotl-card-min-width-list: 28rem;
}
/* --- TV / D-pad focus: thicker ring that survives bright backgrounds --- */
@media (min-width: 80rem) {
.otrotl-view-btn:focus-visible,
.otrotl-close-btn:focus-visible,
.otrotl-pill:focus-visible,
.otrotl-site-checkbox:focus-visible,
.otrotl-card-action-btn:focus-visible,
.otrotl-register-btn:focus-visible,
.otrotl-login-btn:focus-visible,
.otrotl-action-btn:focus-visible,
.otrotl-search-input:focus,
.otrotl-role-select:focus {
outline: 0.25rem solid #60a5fa;
outline-offset: 0.1875rem;
box-shadow: 0 0 0 0.375rem rgba(96, 165, 250, 0.35);
}
}
html[data-tv] .otrotl-view-btn:focus-visible,
html[data-tv] .otrotl-close-btn:focus-visible,
html[data-tv] .otrotl-pill:focus-visible,
html[data-tv] .otrotl-site-checkbox:focus-visible,
html[data-tv] .otrotl-card-action-btn:focus-visible,
html[data-tv] .otrotl-register-btn:focus-visible,
html[data-tv] .otrotl-login-btn:focus-visible,
html[data-tv] .otrotl-action-btn:focus-visible,
html[data-tv] .otrotl-search-input:focus,
html[data-tv] .otrotl-role-select:focus {
outline: 0.25rem solid #60a5fa;
outline-offset: 0.1875rem;
box-shadow: 0 0 0 0.375rem rgba(96, 165, 250, 0.35);
}
/* ==========================================================================
Reduced motion preference
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.otrotl-overlay-backdrop,
.otrotl-overlay-panel,
.otrotl-site-card,
.otrotl-site-icon,
.otrotl-action-btn,
.otrotl-card-action-btn,
.otrotl-site-checkbox,
.otrotl-network-trigger,
.otrotl-register-btn,
.otrotl-login-btn,
.otrotl-hop-btn,
.otrotl-toast {
transition-duration: 0.01s !important;
animation-duration: 0.01s !important;
}
}