/* * livedata.css — styles for the live + latest data module (livedata.js). * * Theme tokens ONLY. Every color is a product.css custom property so the * module flips with . No hardcoded hex — a prior bug * came from cream backgrounds that did not flip; this file avoids that. * All classes are prefixed .ti-ld-. */ .ti-ld-wrap { display: flex; flex-direction: column; gap: 18px; color: var(--text); } /* header */ .ti-ld-head { display: flex; flex-direction: column; gap: 4px; } .ti-ld-title { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text); } .ti-ld-sub { margin: 0; font-size: 0.9rem; color: var(--text-dim); } /* primary button */ .ti-ld-btn { align-self: flex-start; font: inherit; font-weight: 600; color: var(--paper); background: var(--accent); border: 1px solid var(--accent-deep); border-radius: 8px; padding: 10px 18px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .ti-ld-btn:hover { background: var(--accent-deep); } .ti-ld-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; } .ti-ld-btn:disabled { cursor: default; opacity: 0.65; } /* live weather grid */ .ti-ld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .ti-ld-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; } .ti-ld-card-title { font-size: 0.92rem; font-weight: 600; color: var(--text); } .ti-ld-card-body { display: flex; flex-direction: column; gap: 2px; min-height: 2.4em; } .ti-ld-temp { font-size: 1.45rem; font-weight: 700; color: var(--text); line-height: 1.1; } .ti-ld-cond { font-size: 0.85rem; color: var(--text-dim); } .ti-ld-muted { font-size: 0.85rem; color: var(--text-dim); } /* shared row list (cached market + go-live stubs) */ .ti-ld-list { display: flex; flex-direction: column; gap: 8px; } .ti-ld-section-head { margin: 6px 0 0 0; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); } .ti-ld-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .ti-ld-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ti-ld-row-name { font-size: 0.92rem; font-weight: 600; color: var(--text); } .ti-ld-row-facts { display: flex; flex-direction: column; gap: 2px; } .ti-ld-fact { font-size: 0.83rem; color: var(--text-dim); } .ti-ld-why { font-size: 0.83rem; color: var(--text-dim); } .ti-ld-row-stub { /* a calm, slightly recessed look for not-yet-live rows */ background: var(--bg-warm); border-style: dashed; } /* tags */ .ti-ld-tag-live, .ti-ld-tag-cache, .ti-ld-stub { flex: none; display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } /* live = the success token */ .ti-ld-tag-live { align-self: flex-start; color: var(--ok); background: transparent; border: 1px solid var(--ok); } /* cached + stub = dim, quiet */ .ti-ld-tag-cache { color: var(--text-dim); background: transparent; border: 1px solid var(--border); } .ti-ld-stub { color: var(--text-dim); background: var(--surface); border: 1px dashed var(--text-dim); }