/* ════════════════════════════════════════════════════════════════ WEBCAMS MODULE — STYLES Tokens only. No hardcoded colors/fonts. Skin via hub-skin.css. ════════════════════════════════════════════════════════════════ */ /* ── HUB HEADER OVERRIDE ───────────────────────────────────────── Joe 2026-05-28: hub headers must NOT be sticky. Scrolls away with the page. Scoped to so root pages keep their fixed header. Specificity beats #main-header without !important. */ html[data-hub-module] #main-header { position: static; } html[data-hub-module] #main-header.scrolled { background: transparent; box-shadow: none; backdrop-filter: none; } .lpwd-hub { background: var(--lpwd-hub-bg); color: var(--lpwd-hub-ink); font-family: var(--lpwd-hub-font-body); font-size: var(--lpwd-hub-size-body); line-height: var(--lpwd-hub-lh-body); } /* ── HERO ────────────────────────────────────────────────────── */ .lpwd-hub__hero { padding: var(--lpwd-hub-section-py) var(--lpwd-hub-section-px); border-bottom: 1px solid var(--lpwd-hub-border); display: flex; align-items: flex-end; } .lpwd-hub__hero-inner { max-width: var(--lpwd-hub-maxw); margin: 0 auto; width: 100%; } /* Pin the meta row (Actualizado badge) flush to hero bottom — gap above it eats remaining space */ .lpwd-hub__hero-inner > .lpwd-hub__meta { margin-top: var(--lpwd-hub-gap-lg, 1.5rem); } .lpwd-hub__eyebrow { font-family: var(--lpwd-hub-font-mono); font-size: var(--lpwd-hub-size-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lpwd-hub-brand); margin: 0 0 var(--lpwd-hub-gap-md); } .lpwd-hub__title { font-family: var(--lpwd-hub-font-head); font-weight: var(--lpwd-hub-weight-head); font-size: var(--lpwd-hub-size-hero); line-height: var(--lpwd-hub-lh-head); letter-spacing: var(--lpwd-hub-track-head); margin: 0 0 var(--lpwd-hub-gap-md); color: var(--lpwd-hub-ink); } .lpwd-hub__lede { max-width: var(--lpwd-hub-maxw-prose); font-size: calc(var(--lpwd-hub-size-body) * 1.125); color: var(--lpwd-hub-ink-soft); margin: 0 0 var(--lpwd-hub-gap-lg); } .lpwd-hub__meta { display: flex; gap: var(--lpwd-hub-gap-md); flex-wrap: wrap; align-items: center; } .lpwd-hub__badge { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.4em 0.85em; background: var(--lpwd-hub-surface); border: 1px solid var(--lpwd-hub-border); border-radius: 999px; font-size: var(--lpwd-hub-size-small); color: var(--lpwd-hub-ink-soft); } .lpwd-hub__badge-dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--lpwd-hub-success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lpwd-hub-success) 18%, transparent); animation: lpwd-hub-pulse 2.5s var(--lpwd-hub-ease) infinite; } @keyframes lpwd-hub-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .lpwd-hub__count { font-family: var(--lpwd-hub-font-mono); font-size: var(--lpwd-hub-size-small); color: var(--lpwd-hub-ink-mute); } .lpwd-hub__count [data-hub-count] { color: var(--lpwd-hub-ink); font-weight: 600; } /* ── FILTER BAR ──────────────────────────────────────────────── */ .lpwd-hub__filters { display: flex; gap: var(--lpwd-hub-gap-sm); flex-wrap: wrap; max-width: var(--lpwd-hub-maxw); margin: 0 auto; padding: var(--lpwd-hub-gap-lg) var(--lpwd-hub-section-px) 0; } .lpwd-hub__filter { appearance: none; border: 1px solid var(--lpwd-hub-border); background: var(--lpwd-hub-bg); color: var(--lpwd-hub-ink-soft); padding: 0.55em 1.1em; border-radius: 999px; font: inherit; font-size: var(--lpwd-hub-size-small); cursor: pointer; transition: all var(--lpwd-hub-dur-base) var(--lpwd-hub-ease); } .lpwd-hub__filter:hover { border-color: var(--lpwd-hub-ink-soft); color: var(--lpwd-hub-ink); } .lpwd-hub__filter.is-active { background: var(--lpwd-hub-ink); color: var(--lpwd-hub-bg); border-color: var(--lpwd-hub-ink); } .lpwd-hub__filter:focus-visible { outline: 2px solid var(--lpwd-hub-brand); outline-offset: 2px; } /* ── GRID ────────────────────────────────────────────────────── */ .lpwd-hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--lpwd-hub-gap-md); max-width: var(--lpwd-hub-maxw); margin: 0 auto; padding: var(--lpwd-hub-gap-lg) var(--lpwd-hub-section-px) var(--lpwd-hub-section-py); } .lpwd-hub__empty { grid-column: 1 / -1; text-align: center; color: var(--lpwd-hub-ink-mute); padding: var(--lpwd-hub-section-py) 0; } /* ── CAM CARD ────────────────────────────────────────────────── */ .lpwd-cam { position: relative; background: var(--lpwd-hub-surface); border: 1px solid var(--lpwd-hub-border); border-radius: var(--lpwd-hub-radius-md); overflow: hidden; transition: transform var(--lpwd-hub-dur-base) var(--lpwd-hub-ease), box-shadow var(--lpwd-hub-dur-base) var(--lpwd-hub-ease), border-color var(--lpwd-hub-dur-base) var(--lpwd-hub-ease); } .lpwd-cam:hover { transform: translateY(-2px); box-shadow: var(--lpwd-hub-shadow-md); border-color: var(--lpwd-hub-ink-mute); } .lpwd-cam__frame { position: relative; aspect-ratio: 16 / 9; background: var(--lpwd-hub-surface-2); overflow: hidden; } .lpwd-cam__frame iframe, .lpwd-cam__frame img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; } .lpwd-cam__tag { position: absolute; top: var(--lpwd-hub-gap-sm); left: var(--lpwd-hub-gap-sm); background: rgb(0 0 0 / 0.65); color: #fff; padding: 0.25em 0.6em; border-radius: var(--lpwd-hub-radius-sm); font-size: var(--lpwd-hub-size-micro); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--lpwd-hub-font-mono); } .lpwd-cam__status { position: absolute; top: var(--lpwd-hub-gap-sm); right: var(--lpwd-hub-gap-sm); display: inline-flex; align-items: center; gap: 0.4em; padding: 0.25em 0.55em; background: rgb(0 0 0 / 0.65); color: #fff; border-radius: 999px; font-size: var(--lpwd-hub-size-micro); } .lpwd-cam__status-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--lpwd-hub-success); } .lpwd-cam[data-status="offline"] .lpwd-cam__status-dot { background: var(--lpwd-hub-danger); } .lpwd-cam__body { padding: var(--lpwd-hub-card-pad); } .lpwd-cam__name { margin: 0 0 0.25em; font-family: var(--lpwd-hub-font-head); font-size: var(--lpwd-hub-size-h3); font-weight: 600; color: var(--lpwd-hub-ink); } .lpwd-cam__loc { margin: 0; font-size: var(--lpwd-hub-size-small); color: var(--lpwd-hub-ink-mute); } .lpwd-cam__source { display: block; margin-top: var(--lpwd-hub-gap-md); font-size: var(--lpwd-hub-size-micro); color: var(--lpwd-hub-ink-mute); } .lpwd-cam__source a { color: inherit; text-decoration: underline; text-underline-offset: 0.25em; } /* ── HIDDEN BY FILTER ────────────────────────────────────────── */ .lpwd-cam[hidden] { display: none; } /* ── CROSS-MODULE RAIL ───────────────────────────────────────── */ .lpwd-hub-rail { border-top: 1px solid var(--lpwd-hub-border); background: var(--lpwd-hub-surface); padding: var(--lpwd-hub-section-py) var(--lpwd-hub-section-px); } .lpwd-hub-rail__inner { max-width: var(--lpwd-hub-maxw); margin: 0 auto; } .lpwd-hub-rail__heading { font-family: var(--lpwd-hub-font-head); font-weight: var(--lpwd-hub-weight-head); font-size: var(--lpwd-hub-size-h2); letter-spacing: var(--lpwd-hub-track-head); color: var(--lpwd-hub-ink); margin: 0 0 var(--lpwd-hub-gap-lg); } .lpwd-hub-rail__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--lpwd-hub-gap-md); } .lpwd-hub-rail__item { display: contents; } .lpwd-hub-rail__link { display: flex; flex-direction: column; gap: 0.4em; padding: var(--lpwd-hub-card-pad); background: var(--lpwd-hub-bg); border: 1px solid var(--lpwd-hub-border); border-radius: var(--lpwd-hub-radius-md); text-decoration: none; color: var(--lpwd-hub-ink); transition: transform var(--lpwd-hub-dur-base) var(--lpwd-hub-ease), box-shadow var(--lpwd-hub-dur-base) var(--lpwd-hub-ease), border-color var(--lpwd-hub-dur-base) var(--lpwd-hub-ease); } .lpwd-hub-rail__link:hover { transform: translateY(-2px); box-shadow: var(--lpwd-hub-shadow-md); border-color: var(--lpwd-hub-brand); } .lpwd-hub-rail__icon { font-size: 1.75rem; line-height: 1; } .lpwd-hub-rail__title { font-family: var(--lpwd-hub-font-head); font-weight: 600; font-size: var(--lpwd-hub-size-h3); letter-spacing: var(--lpwd-hub-track-head); } .lpwd-hub-rail__sub { font-size: var(--lpwd-hub-size-small); color: var(--lpwd-hub-ink-soft); } /* ── REDUCED MOTION ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .lpwd-hub__badge-dot, .lpwd-cam, .lpwd-hub-rail__link { animation: none; transition: none; } }