/* =========================================================================== sky-hub-bridge.css — pull the legacy static site toward the Sky Hub look. WHY A BRIDGE INSTEAD OF A REWRITE This site loads twelve stylesheets accumulated across several redesigns (style.css 198KB, dashboard.css 215KB, home-v2.css 149KB, plus sky-nav.css AND skyhub-nav.css, which are two generations of the same component). Any of them may still be load-bearing on a page nobody has checked. Deleting them on a site that serves real customers is how you find out the hard way. So this file is ADDITIVE and loads LAST. It re-skins the legacy class vocabulary using the Hub design tokens, and it can be removed by deleting one from each page — with the old appearance returning exactly. WHAT IT TARGETS — the legacy dashboard's real vocabulary, by frequency: .lg-glass-card (22) .lg-btn (27) .lg-btn-glass (16) .lg-btn-primary (11) .dash-card (8) .nav-item (8) .sp-section (12) .sett-input (10) .ticket-filter-pill (7) Requires styles/sky-hub-design-system.css to be loaded FIRST — that file defines every --sky-* token used below. TWO HUB RULES THAT ARE EASY TO GET WRONG, BOTH OBSERVED HERE: · Hub card edges are RINGS (outset box-shadow), never borders. Porting them as `border:1px` adds 2px to every card and reflows the grids. · Hub's primary button is INK (#0F172A) that inverts to white in dark mode. It is not a blue button. Blue is for fills and small secondary CTAs. =========================================================================== */ /* ── Surfaces: cards ────────────────────────────────────────────────────── Opaque, flat at rest, one hairline ring, 16px radius, 20px padding. The legacy "glass" cards carry blur + gradient + resting shadow; Hub dropped all three because stacked translucency makes text contrast unpredictable. */ /* NOTE ON SELECTOR STRENGTH — learned by measuring, not guessing. The first version of this file wrapped everything in :where(), which has ZERO specificity. That is the right instinct for an override layer (it stays easy to override later) but it loses to the legacy stylesheets wherever they are even slightly specific. Measured result: the card kept backdrop-filter blur(8px) and .sett-input kept border-radius 0. So rules that MUST win are written as plain selector lists with !important; rules that are merely preferences stay in :where(). */ .lg-glass-card, .dash-card, .sp-section, .glass-card { background: var(--sky-surface) !important; border: none !important; box-shadow: 0 0 0 1px var(--sky-ring) !important; border-radius: var(--sky-r-card, 16px) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: box-shadow var(--sky-dur-settle, 220ms) var(--sky-ease-settle, cubic-bezier(.2,.8,.2,1)); } :where(.lg-glass-card, .dash-card):hover { box-shadow: 0 0 0 1px var(--sky-ring-hover), 0 24px 50px -28px rgba(2, 6, 23, 0.55) !important; } /* ── Buttons ────────────────────────────────────────────────────────────── Primary = ink, inverting in dark. Ghost = FILLED slate chip, not an outline. */ :where(.lg-btn) { border-radius: var(--sky-r-control, 12px) !important; font-weight: 600; letter-spacing: 0; transition: opacity var(--sky-dur-settle, 220ms) ease, background var(--sky-dur-settle, 220ms) ease; } :where(.lg-btn-primary) { background: var(--sky-ink, #0F172A) !important; color: var(--sky-on-ink, #FFFFFF) !important; border: none !important; box-shadow: none !important; } :where(.lg-btn-primary):hover { opacity: 0.9; } :where(.lg-btn-primary):active { transform: scale(0.98); } :where(.lg-btn-glass) { background: var(--sky-chip, #F1F5F9) !important; color: var(--sky-text-secondary) !important; border: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } :where(.lg-btn-glass):hover { background: var(--sky-chip-hover, #E2E8F0) !important; } /* ── Pills / filters ─────────────────────────────────────────────────────── */ :where(.ticket-filter-pill) { border-radius: 9999px !important; border: none !important; background: var(--sky-chip, #F1F5F9); color: var(--sky-text-secondary); font-size: 12.5px; font-weight: 600; } :where(.ticket-filter-pill).active, :where(.ticket-filter-pill)[aria-selected="true"] { background: var(--sky-ink, #0F172A) !important; color: var(--sky-on-ink, #FFFFFF) !important; } /* ── Inputs ──────────────────────────────────────────────────────────────── */ .sett-input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], textarea, select { border-radius: var(--sky-r-control, 12px) !important; background: var(--sky-surface-2, #F8FAFC); border: none !important; box-shadow: 0 0 0 1px var(--sky-ring); color: var(--sky-text); } .sett-input:focus, input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 1px var(--sky-accent) !important; } /* ── Sidebar nav ─────────────────────────────────────────────────────────── */ :where(.nav-item) { border-radius: var(--sky-r-control, 12px); font-weight: 600; color: var(--sky-text-secondary); } :where(.nav-item):hover { background: var(--sky-chip, #F1F5F9); } :where(.nav-item).active, :where(.nav-item)[aria-current="page"] { background: var(--sky-chip, #F1F5F9); color: var(--sky-text); } /* ── Type ────────────────────────────────────────────────────────────────── */ :where(.sp-section-title) { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--sky-text); } :where(.muted) { color: var(--sky-text-muted) !important; } :where(.text-sm) { font-size: 13px; } /* ── Focus ─────────────────────────────────────────────────────────────── Hub removes focus outlines in several places. That is an accessibility bug, so it is deliberately NOT ported — one visible ring for everything instead. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--sky-accent); outline-offset: 2px; } /* ── Fixes for defects found while auditing this site ────────────────────── */ /* Duplicate of the form-control font reset in glass-tokens.css. Neither file covers every page: glass-tokens is absent from 404.html and privacy.html, and this bridge is deliberately not loaded on admin.html (whose dense toolbars should not be restyled wholesale). Having the rule in both is the only way every page gets the brand typeface on its buttons. */ button, input, select, textarea, optgroup { font-family: inherit; } /* The mobile sidebar rendered a permanent red "0" badge on Tickets and Support that no code path could clear, so every mobile visit looked like it had unread items. Hide a badge whose text is literally zero. */ @media (max-width: 900px) { body[data-page="dashboard"] .sidebar-nav .nav-item .lg-badge:empty { display: none !important; } } /* REMOVED — `img[src=""], img:not([src]) { display: none !important }`. * * This was my mistake and it broke the image preview. * * I detected "broken images" with `complete && naturalWidth === 0`, which is * also true of an image that simply has not been given a source yet. The only * two empty-src images on this entire site are the LIGHTBOX VIEWERS — * #lightbox-img (index.html:1383) and #gallery-viewer-image * (dashboard.html:1373). Both are empty by design and get their src assigned * when you click a thumbnail. Hiding them disabled viewing any image. * * It was also subtly worse than a plain break: once JS assigned a src the * selector stopped matching and display returned, so the element flipped from * `display:none` to `block` mid-open — which kills any CSS fade/scale * transition and gives zero dimensions to anything measuring it first. * * There is no rule here now. If genuinely broken images turn up later, the fix * is a per-image `onerror` handler (which fires only on a real load failure), * never a blanket selector that cannot tell "failed" from "not loaded yet". */