/* WLF Systems Dashboard - Lighthouse · Organic tab (plugin 1.22.0, docs/lighthouse-organic-spec.md §5; 1.22.1 colours, sub-tabs, insights; 1.22.2 Traffic + Maps; 1.23.0 visual pass). Every rule is scoped under .lh-org-root and uses the page's --lh-* tokens, so the dark tokens (#wlf-lighthouse[data-theme="dark"]) apply without extra rules. Neutral colours only. */ #wlf-lighthouse .lh-org-root { display: flex; flex-direction: column; gap: var(--lh-sp-4); min-width: 0; } #wlf-lighthouse .lh-org-root .lh-org-sec { display: flex; flex-direction: column; gap: var(--lh-sp-3); } #wlf-lighthouse .lh-org-root .lh-org-head { margin-bottom: 0; } #wlf-lighthouse .lh-org-root .lh-org-h3 { font: 600 16px/24px var(--lh-f-sans); color: var(--lh-ink); margin: var(--lh-sp-3) 0 0; } #wlf-lighthouse .lh-org-root .lh-org-h4 { font: 600 14px/20px var(--lh-f-sans); color: var(--lh-ink); margin: var(--lh-sp-2) 0 0; } #wlf-lighthouse .lh-org-root .lh-org-note { margin: 0; font-size: 13px; line-height: 18px; max-width: 100ch; } #wlf-lighthouse .lh-org-root .lh-org-last { margin: 0; color: var(--lh-ink); font-weight: 600; } #wlf-lighthouse .lh-org-root .lh-org-empty { background: var(--lh-info-bg); border: 1px solid var(--lh-border); border-radius: var(--lh-r-md); padding: var(--lh-sp-3) var(--lh-sp-4); color: var(--lh-ink); } #wlf-lighthouse .lh-org-root .lh-org-empty span { color: var(--lh-ink-muted); } /* tiles */ #wlf-lighthouse .lh-org-root .lh-org-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--lh-sp-3); } #wlf-lighthouse .lh-org-root .lh-org-tile { padding: var(--lh-sp-3) var(--lh-sp-4); } #wlf-lighthouse .lh-org-root .lh-org-val { font: 600 24px/32px var(--lh-f-sans); color: var(--lh-ink); font-variant-numeric: tabular-nums; } #wlf-lighthouse .lh-org-root .lh-org-tiles-sm .lh-org-val { font-size: 20px; line-height: 28px; } #wlf-lighthouse .lh-org-root .lh-org-sub, #wlf-lighthouse .lh-org-root .lh-org-delta { font-size: 12px; line-height: 16px; } #wlf-lighthouse .lh-org-root .lh-org-delta { color: var(--lh-ink-faint); font-variant-numeric: tabular-nums; } /* bars (bucket, device) */ #wlf-lighthouse .lh-org-root .lh-org-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #wlf-lighthouse .lh-org-root .lh-org-bars li { display: grid; grid-template-columns: minmax(140px, 240px) minmax(80px, 1fr) minmax(120px, auto); gap: var(--lh-sp-3); align-items: center; font-size: 13px; } #wlf-lighthouse .lh-org-root .lh-org-bar-track { display: block; height: 10px; background: var(--lh-band); border-radius: var(--lh-r-pill); overflow: hidden; } #wlf-lighthouse .lh-org-root .lh-org-bar-fill { display: block; height: 100%; width: 0; background: var(--lh-step-2); border-radius: var(--lh-r-pill); } #wlf-lighthouse .lh-org-root .lh-org-bar-n { color: var(--lh-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* tables */ #wlf-lighthouse .lh-org-root .lh-org-tbl { display: flex; flex-direction: column; gap: var(--lh-sp-2); min-width: 0; } #wlf-lighthouse .lh-org-root .lh-org-tbl-bar { display: flex; flex-wrap: wrap; gap: var(--lh-sp-2) var(--lh-sp-3); align-items: center; justify-content: space-between; } #wlf-lighthouse .lh-org-root .lh-org-showing { margin: 0; font-size: 13px; color: var(--lh-ink); } #wlf-lighthouse .lh-org-root .lh-org-showing .lh-caps { margin-right: 4px; } #wlf-lighthouse .lh-org-root .lh-org-scroll { max-height: 520px; overflow: auto; border: 1px solid var(--lh-border); border-radius: var(--lh-r-md); } #wlf-lighthouse .lh-org-root .lh-org-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; color: var(--lh-ink); } #wlf-lighthouse .lh-org-root .lh-org-table thead th { position: sticky; top: 0; background: var(--lh-surface-2); border-bottom: 1px solid var(--lh-card-border); padding: 0; text-align: left; z-index: 1; } #wlf-lighthouse .lh-org-root .lh-org-table thead th.lh-n { text-align: right; } #wlf-lighthouse .lh-org-root .lh-org-sort { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 8px 10px; font: 600 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); cursor: pointer; text-align: inherit; white-space: nowrap; } #wlf-lighthouse .lh-org-root .lh-org-sort.lh-on { color: var(--lh-ink); } #wlf-lighthouse .lh-org-root .lh-org-sort:hover { background: var(--lh-hover-bg); } #wlf-lighthouse .lh-org-root .lh-org-sort:focus-visible { outline: 2px solid var(--lh-focus); outline-offset: -2px; } #wlf-lighthouse .lh-org-root .lh-org-table tbody th, #wlf-lighthouse .lh-org-root .lh-org-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--lh-grid); vertical-align: top; } #wlf-lighthouse .lh-org-root .lh-org-table tbody th { font-weight: 400; text-align: left; max-width: 520px; overflow-wrap: anywhere; } #wlf-lighthouse .lh-org-root .lh-org-table td.lh-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } #wlf-lighthouse .lh-org-root .lh-org-table tbody tr:hover th, #wlf-lighthouse .lh-org-root .lh-org-table tbody tr:hover td { background: var(--lh-surface-2); } #wlf-lighthouse .lh-org-root .lh-org-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lh-sp-4); } #wlf-lighthouse .lh-org-root .lh-org-sub-head { display: flex; align-items: center; justify-content: space-between; gap: var(--lh-sp-3); } #wlf-lighthouse .lh-org-root .lh-org-sub-head h3 { font: 600 16px/24px var(--lh-f-sans); margin: 0; } /* uploader */ #wlf-lighthouse .lh-org-root .lh-org-uploader { display: flex; flex-wrap: wrap; gap: var(--lh-sp-2) var(--lh-sp-3); align-items: center; padding: var(--lh-sp-3); background: var(--lh-surface-2); border: 1px solid var(--lh-border); border-radius: var(--lh-r-md); } #wlf-lighthouse .lh-org-root .lh-org-file { font: inherit; font-size: 13px; color: var(--lh-ink); max-width: 100%; } #wlf-lighthouse .lh-org-root .lh-org-upmsg { font-size: 13px; color: var(--lh-ink-muted); } #wlf-lighthouse .lh-org-root .lh-org-nc { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--lh-ink-muted); } #wlf-lighthouse .lh-org-root .lh-org-nc strong { color: var(--lh-ink); } #wlf-lighthouse .lh-org-root .lh-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 900px) { #wlf-lighthouse .lh-org-root .lh-org-2col { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { #wlf-lighthouse .lh-org-root .lh-org-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } #wlf-lighthouse .lh-org-root .lh-org-bars li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #wlf-lighthouse .lh-org-root .lh-org-bar-n { grid-column: 1 / -1; white-space: normal; } #wlf-lighthouse .lh-org-root .lh-org-val { font-size: 20px; line-height: 28px; } } @media print { #wlf-lighthouse .lh-org-root .lh-org-uploader, #wlf-lighthouse .lh-org-root .lh-export { display: none !important; } #wlf-lighthouse .lh-org-root .lh-org-scroll { max-height: none; overflow: visible; } } /* ===== 1.22.1: semantic colours (Organic tab only), sub-tabs, insights, lag banner, stacked chart ===== */ #wlf-lighthouse .lh-org-root { --org-good: #17663a; --org-good-bg: #e3f3e8; --org-bad: #a8231c; --org-bad-bg: #fbe9e7; --org-warn: #8a5300; --org-warn-bg: #fdf0dc; --org-info: #1a5ea8; --org-info-bg: #e8f1fc; --org-neutral: var(--lh-ink-muted); --org-neutral-bg: var(--lh-surface-2); --org-bk-google: #2f6fdb; --org-bk-bing: #00838f; --org-bk-gbp: #6553c8; --org-bk-ai: #c2479a; --org-bk-direct: #b26a00; --org-bk-site: #6f7d1c; --org-us: #2f6fdb; --org-them: #b4554b; --org-eng-chatgpt: #0b6e55; --org-eng-chatgpt-bg: #e2f5ef; --org-eng-gemini: #1a5ea8; --org-eng-gemini-bg: #e6effc; --org-eng-perplexity: #5b3fb3; --org-eng-perplexity-bg: #eee9fb; --org-eng-claude: #9a4a1c; --org-eng-claude-bg: #fbeee5; --org-eng-copilot: #0d6b6e; --org-eng-copilot-bg: #e0f3f3; --org-dom-ugc: #7a2ea8; --org-dom-ugc-bg: #f4e9fb; --org-dom-inst: #0d6b6e; --org-dom-inst-bg: #e0f3f3; --org-dom-corp: #3d4a6b; --org-dom-corp-bg: #e9edf5; } #wlf-lighthouse[data-theme="dark"] .lh-org-root { --org-good: #86d6a2; --org-good-bg: #133a24; --org-bad: #f5a59d; --org-bad-bg: #44191a; --org-warn: #f3c47c; --org-warn-bg: #3f2c0f; --org-info: #9fc6f4; --org-info-bg: #15304f; --org-bk-google: #7aa7f0; --org-bk-bing: #4fc3cc; --org-bk-gbp: #a597ee; --org-bk-ai: #e58cc6; --org-bk-direct: #e0a34a; --org-bk-site: #b5c25a; --org-us: #7aa7f0; --org-them: #e0928a; --org-eng-chatgpt: #7fd8bd; --org-eng-chatgpt-bg: #123a30; --org-eng-gemini: #9fc6f4; --org-eng-gemini-bg: #15304f; --org-eng-perplexity: #c3b3f5; --org-eng-perplexity-bg: #2b2250; --org-eng-claude: #f0b48f; --org-eng-claude-bg: #40261a; --org-eng-copilot: #7fd3d5; --org-eng-copilot-bg: #123b3c; --org-dom-ugc: #d6a6f2; --org-dom-ugc-bg: #36204a; --org-dom-inst: #7fd3d5; --org-dom-inst-bg: #123b3c; --org-dom-corp: #c3cbe0; --org-dom-corp-bg: #26314f; } /* tones: text + tint, always paired with a word, arrow or number */ #wlf-lighthouse .lh-org-root .lh-org-chip { display: inline-block; padding: 1px 8px; border-radius: var(--lh-r-pill); font: 600 12px/18px var(--lh-f-sans); white-space: nowrap; color: var(--c, var(--lh-ink)); background: var(--cb, var(--lh-surface-2)); } #wlf-lighthouse .lh-org-root .lh-org-t-good { --c: var(--org-good); --cb: var(--org-good-bg); --tc: var(--org-good); } #wlf-lighthouse .lh-org-root .lh-org-t-bad { --c: var(--org-bad); --cb: var(--org-bad-bg); --tc: var(--org-bad); } #wlf-lighthouse .lh-org-root .lh-org-t-warn { --c: var(--org-warn); --cb: var(--org-warn-bg); --tc: var(--org-warn); } #wlf-lighthouse .lh-org-root .lh-org-t-neutral { --c: var(--org-neutral); --cb: var(--org-neutral-bg); --tc: var(--lh-ink-faint); } #wlf-lighthouse .lh-org-root .lh-org-t-info { --c: var(--org-info); --cb: var(--org-info-bg); --tc: var(--org-info); } #wlf-lighthouse .lh-org-root .lh-org-d-good { color: var(--org-good); font-weight: 600; } #wlf-lighthouse .lh-org-root .lh-org-d-bad { color: var(--org-bad); font-weight: 600; } #wlf-lighthouse .lh-org-root .lh-org-d-flat { color: var(--lh-ink-faint); } #wlf-lighthouse .lh-org-root .lh-org-pos-p1 { --c: var(--org-good); --cb: var(--org-good-bg); } #wlf-lighthouse .lh-org-root .lh-org-pos-p2 { --c: var(--org-info); --cb: var(--org-info-bg); } #wlf-lighthouse .lh-org-root .lh-org-pos-p3 { --c: var(--org-warn); --cb: var(--org-warn-bg); } #wlf-lighthouse .lh-org-root .lh-org-pos-p4 { --c: var(--org-neutral); --cb: var(--org-neutral-bg); } #wlf-lighthouse .lh-org-root .lh-org-table td.lh-org-cell-warn, #wlf-lighthouse .lh-org-root .lh-org-legend .lh-org-cell-warn { color: var(--org-warn); background: var(--org-warn-bg); font-weight: 600; } #wlf-lighthouse .lh-org-root .lh-org-table td.lh-org-cell-good, #wlf-lighthouse .lh-org-root .lh-org-legend .lh-org-cell-good { color: var(--org-good); background: var(--org-good-bg); font-weight: 600; } #wlf-lighthouse .lh-org-root .lh-org-legend { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--lh-ink-muted); } #wlf-lighthouse .lh-org-root .lh-org-eng-chatgpt { --c: var(--org-eng-chatgpt); --cb: var(--org-eng-chatgpt-bg); } #wlf-lighthouse .lh-org-root .lh-org-eng-gemini { --c: var(--org-eng-gemini); --cb: var(--org-eng-gemini-bg); } #wlf-lighthouse .lh-org-root .lh-org-eng-perplexity { --c: var(--org-eng-perplexity); --cb: var(--org-eng-perplexity-bg); } #wlf-lighthouse .lh-org-root .lh-org-eng-claude { --c: var(--org-eng-claude); --cb: var(--org-eng-claude-bg); } #wlf-lighthouse .lh-org-root .lh-org-eng-copilot { --c: var(--org-eng-copilot); --cb: var(--org-eng-copilot-bg); } #wlf-lighthouse .lh-org-root .lh-org-dom-you { --c: var(--org-good); --cb: var(--org-good-bg); } #wlf-lighthouse .lh-org-root .lh-org-dom-competitor { --c: var(--org-bad); --cb: var(--org-bad-bg); } #wlf-lighthouse .lh-org-root .lh-org-dom-reference { --c: var(--org-info); --cb: var(--org-info-bg); } #wlf-lighthouse .lh-org-root .lh-org-dom-ugc { --c: var(--org-dom-ugc); --cb: var(--org-dom-ugc-bg); } #wlf-lighthouse .lh-org-root .lh-org-dom-institutional { --c: var(--org-dom-inst); --cb: var(--org-dom-inst-bg); } #wlf-lighthouse .lh-org-root .lh-org-dom-corporate { --c: var(--org-dom-corp); --cb: var(--org-dom-corp-bg); } #wlf-lighthouse .lh-org-root .lh-org-dom-editorial { --c: var(--org-warn); --cb: var(--org-warn-bg); } #wlf-lighthouse .lh-org-root .lh-org-dom-other { --c: var(--org-neutral); --cb: var(--org-neutral-bg); } #wlf-lighthouse .lh-org-root .lh-org-table tr.lh-org-own > th, #wlf-lighthouse .lh-org-root .lh-org-table tr.lh-org-own > td { background: var(--org-info-bg); font-weight: 600; } #wlf-lighthouse .lh-org-root .lh-org-tile-warn .lh-org-val { color: var(--org-warn); } #wlf-lighthouse .lh-org-root .lh-org-tile-good .lh-org-val { color: var(--org-good); } /* lead buckets: one colour each (tiles, bars, swatches, the stacked chart) */ #wlf-lighthouse .lh-org-root .lh-org-bk-google { --bk: var(--org-bk-google); } #wlf-lighthouse .lh-org-root .lh-org-bk-bing { --bk: var(--org-bk-bing); } #wlf-lighthouse .lh-org-root .lh-org-bk-gbp { --bk: var(--org-bk-gbp); } #wlf-lighthouse .lh-org-root .lh-org-bk-ai { --bk: var(--org-bk-ai); } #wlf-lighthouse .lh-org-root .lh-org-bk-direct { --bk: var(--org-bk-direct); } #wlf-lighthouse .lh-org-root .lh-org-bk-site { --bk: var(--org-bk-site); } #wlf-lighthouse .lh-org-root .lh-org-bar-fill[class*="lh-org-bk-"] { background: var(--bk); } #wlf-lighthouse .lh-org-root .lh-org-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--bk, var(--lh-step-2)); margin-right: 6px; vertical-align: -1px; } #wlf-lighthouse .lh-org-root .lh-org-bk-tile { border-top: 4px solid var(--bk); } #wlf-lighthouse .lh-org-root .lh-org-stack rect.lh-org-bk { fill: var(--bk); } #wlf-lighthouse .lh-org-root .lh-org-stack .lh-org-day-hit { fill: transparent; } #wlf-lighthouse .lh-org-root .lh-org-stack .lh-org-day:hover .lh-org-day-hit { fill: var(--lh-hover-bg); } #wlf-lighthouse .lh-org-root .lh-org-stack .lh-org-axis { stroke: var(--lh-card-border); } #wlf-lighthouse .lh-org-root .lh-org-stack .lh-org-axis-t { fill: var(--lh-ink-faint); font: 11px/1 var(--lh-f-sans); } #wlf-lighthouse .lh-org-root .lh-org-stack { display: block; max-width: 100%; height: auto; } #wlf-lighthouse .lh-org-root .lh-org-total { margin: 0; font-size: 14px; color: var(--lh-ink-muted); } #wlf-lighthouse .lh-org-root .lh-org-total strong { color: var(--lh-ink); font-size: 18px; } /* inline bars (visibility, us vs them) */ #wlf-lighthouse .lh-org-root .lh-org-mini { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; } #wlf-lighthouse .lh-org-root .lh-org-mini-track { display: inline-block; width: 64px; height: 8px; border-radius: var(--lh-r-pill); background: var(--lh-band); overflow: hidden; } #wlf-lighthouse .lh-org-root .lh-org-mini-fill { display: block; height: 100%; width: 0; background: var(--lh-step-2); } #wlf-lighthouse .lh-org-root .lh-org-mini-fill.lh-org-mini-own { background: var(--org-us); } #wlf-lighthouse .lh-org-root .lh-org-mini-fill.lh-org-mini-them { background: var(--org-them); } #wlf-lighthouse .lh-org-root .lh-org-mini-n { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; } #wlf-lighthouse .lh-org-root .lh-org-twin { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-end; } #wlf-lighthouse .lh-org-root .lh-org-twin-row { display: inline-flex; align-items: center; gap: 6px; } #wlf-lighthouse .lh-org-root .lh-org-twin-k { font-size: 11px; color: var(--lh-ink-faint); min-width: 2.8em; text-align: right; } /* sub-tabs: sticky under the shell's sticky block (the SHOWING bar) */ #wlf-lighthouse .lh-org-root .lh-org-subnav { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--lh-sticky-h, 0px) + 6px); z-index: 4; display: flex; gap: 4px; overflow-x: auto; padding: 6px; background: var(--lh-card); border: 1px solid var(--lh-card-border); border-radius: var(--lh-r-lg); box-shadow: var(--lh-e0); } #wlf-lighthouse .lh-org-root .lh-org-subtab { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--lh-r-md); font: 600 14px/20px var(--lh-f-sans); color: var(--lh-ink-muted); cursor: pointer; white-space: nowrap; } #wlf-lighthouse .lh-org-root .lh-org-subtab:hover { background: var(--lh-hover-bg); color: var(--lh-ink); } #wlf-lighthouse .lh-org-root .lh-org-subtab.lh-on { background: var(--lh-selected-bg); color: var(--lh-selected-ink); } #wlf-lighthouse .lh-org-root .lh-org-subtab:focus-visible { outline: 2px solid var(--lh-focus); outline-offset: 2px; } #wlf-lighthouse .lh-org-root .lh-org-badge { display: inline-block; padding: 0 8px; border-radius: var(--lh-r-pill); font: 600 12px/18px var(--lh-f-sans); color: var(--c, var(--lh-ink)); background: var(--cb, var(--lh-chip-bg)); } #wlf-lighthouse .lh-org-root .lh-org-subtab.lh-on .lh-org-badge { box-shadow: 0 0 0 1px var(--lh-selected-ink); } #wlf-lighthouse .lh-org-root .lh-org-panel { display: flex; flex-direction: column; gap: var(--lh-sp-4); min-width: 0; } #wlf-lighthouse .lh-org-root .lh-org-panel:focus { outline: none; } /* lag banner and insights */ #wlf-lighthouse .lh-org-root .lh-org-lag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-radius: var(--lh-r-md); background: var(--org-info-bg); color: var(--lh-ink); border: 1px solid var(--org-info); } #wlf-lighthouse .lh-org-root .lh-org-lag-k { color: var(--org-info); } #wlf-lighthouse .lh-org-root .lh-org-lag-btn { margin-left: auto; } #wlf-lighthouse .lh-org-root .lh-org-ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--lh-sp-3); } #wlf-lighthouse .lh-org-root .lh-org-ins-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--lh-card-border); border-left: 4px solid var(--tc, var(--lh-line)); border-radius: var(--lh-r-md); background: var(--lh-card); } #wlf-lighthouse .lh-org-root .lh-org-ins-tag { align-self: flex-start; padding: 0 8px; border-radius: var(--lh-r-pill); font: 600 11px/18px var(--lh-f-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--c); background: var(--cb); } #wlf-lighthouse .lh-org-root .lh-org-ins-title { font: 600 15px/20px var(--lh-f-sans); color: var(--lh-ink); } #wlf-lighthouse .lh-org-root .lh-org-ins-text { font-size: 13px; line-height: 18px; color: var(--lh-ink-muted); } #wlf-lighthouse .lh-org-root .lh-org-go { align-self: flex-start; margin-top: 4px; font-size: 13px; } #wlf-lighthouse .lh-org-root .lh-org-qhidden { font-style: italic; } #wlf-lighthouse .lh-org-root .lh-org-table tbody th.lh-org-k { min-width: 160px; } #wlf-lighthouse .lh-org-root .lh-org-mini, #wlf-lighthouse .lh-org-root .lh-org-twin-row { white-space: nowrap; } @media (max-width: 600px) { #wlf-lighthouse .lh-org-root .lh-org-subtab { padding: 6px 10px; font-size: 13px; } #wlf-lighthouse .lh-org-root .lh-org-lag-btn { margin-left: 0; } } @media print { #wlf-lighthouse .lh-org-root .lh-org-subnav { position: static; } } /* ===== 1.22.2: Traffic (GA4) channel colours, Maps (Whitespark) grid ===== */ #wlf-lighthouse .lh-org-root { --org-gch-organic: #2f6fdb; --org-gch-direct: #b26a00; --org-gch-ai: #c2479a; --org-gch-maps: #6553c8; --org-gch-referral: #00838f; --org-gch-paid: #6f7d1c; --org-gch-social: #d1495b; --org-gch-other: #808aa1; --org-rk-good: #1f8a4c; --org-rk-good-ink: #ffffff; --org-rk-info: #2f6fdb; --org-rk-info-ink: #ffffff; --org-rk-warn: #e3a008; --org-rk-warn-ink: #1e2a4a; --org-rk-far: #d9b48a; --org-rk-far-ink: #1e2a4a; --org-rk-none: #c3c8d2; --org-rk-none-ink: #1e2a4a; } #wlf-lighthouse[data-theme="dark"] .lh-org-root { --org-gch-organic: #7aa7f0; --org-gch-direct: #e0a34a; --org-gch-ai: #e58cc6; --org-gch-maps: #a597ee; --org-gch-referral: #4fc3cc; --org-gch-paid: #b5c25a; --org-gch-social: #f08a98; --org-gch-other: #9aa3b8; --org-rk-good: #3fae6c; --org-rk-good-ink: #0b1530; --org-rk-info: #7aa7f0; --org-rk-info-ink: #0b1530; --org-rk-warn: #f3c47c; --org-rk-warn-ink: #0b1530; --org-rk-far: #a98a64; --org-rk-far-ink: #0b1530; --org-rk-none: #4b5674; --org-rk-none-ink: #e8ecf4; } #wlf-lighthouse .lh-org-root .lh-org-gch-organic { --bk: var(--org-gch-organic); } #wlf-lighthouse .lh-org-root .lh-org-gch-direct { --bk: var(--org-gch-direct); } #wlf-lighthouse .lh-org-root .lh-org-gch-ai { --bk: var(--org-gch-ai); } #wlf-lighthouse .lh-org-root .lh-org-gch-maps { --bk: var(--org-gch-maps); } #wlf-lighthouse .lh-org-root .lh-org-gch-referral { --bk: var(--org-gch-referral); } #wlf-lighthouse .lh-org-root .lh-org-gch-paid { --bk: var(--org-gch-paid); } #wlf-lighthouse .lh-org-root .lh-org-gch-social { --bk: var(--org-gch-social); } #wlf-lighthouse .lh-org-root .lh-org-gch-other { --bk: var(--org-gch-other); } #wlf-lighthouse .lh-org-root .lh-org-bar-fill[class*="lh-org-gch-"] { background: var(--bk); } #wlf-lighthouse .lh-org-root .lh-org-gch-tile { border-top: 4px solid var(--bk); } #wlf-lighthouse .lh-org-root .lh-org-tile-info .lh-org-val { color: var(--org-info); } #wlf-lighthouse .lh-org-root .lh-org-mini-fill.lh-org-mini-org { background: var(--org-gch-organic); } #wlf-lighthouse .lh-org-root .lh-org-togs { display: inline-flex; gap: 4px; } #wlf-lighthouse .lh-org-root .lh-org-tog[aria-pressed="true"] { background: var(--lh-selected-bg); color: var(--lh-selected-ink); border-color: var(--lh-selected-bg); } #wlf-lighthouse .lh-org-root .lh-org-vis { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; white-space: nowrap; } #wlf-lighthouse .lh-org-root .lh-org-chg { font-size: 12px; } #wlf-lighthouse .lh-org-root .lh-org-loc-l { display: inline-flex; align-items: center; gap: 6px; } #wlf-lighthouse .lh-org-root .lh-org-loc { width: auto; max-width: 100%; } #wlf-lighthouse .lh-org-root .lh-org-gridbtn { text-align: left; } #wlf-lighthouse .lh-org-root .lh-org-gridbtn.lh-on { font-weight: 700; } #wlf-lighthouse .lh-org-root .lh-org-grid { display: flex; flex-direction: column; gap: var(--lh-sp-2); padding-top: var(--lh-sp-2); border-top: 1px solid var(--lh-border); } #wlf-lighthouse .lh-org-root .lh-org-grid-head { display: flex; align-items: center; justify-content: space-between; gap: var(--lh-sp-3); } #wlf-lighthouse .lh-org-root .lh-org-grid-head .lh-org-h3 { margin: 0; } #wlf-lighthouse .lh-org-root .lh-org-grid-body { display: grid; grid-template-columns: minmax(260px, 460px) minmax(0, 1fr); gap: var(--lh-sp-4); align-items: start; } #wlf-lighthouse .lh-org-root .lh-org-gridmap { display: block; width: 100%; max-width: 460px; height: auto; } #wlf-lighthouse .lh-org-root .lh-org-grid-bg { fill: var(--lh-surface-2); stroke: var(--lh-border); } #wlf-lighthouse .lh-org-root .lh-org-pt circle { fill: var(--pf); stroke: var(--lh-card); stroke-width: 1.5; } #wlf-lighthouse .lh-org-root .lh-org-pt text { fill: var(--pi); font: 600 11px/1 var(--lh-f-sans); pointer-events: none; } #wlf-lighthouse .lh-org-root .lh-org-pt:hover circle { stroke: var(--lh-ink); stroke-width: 2; } #wlf-lighthouse .lh-org-root .lh-org-rk-good { --pf: var(--org-rk-good); --pi: var(--org-rk-good-ink); } #wlf-lighthouse .lh-org-root .lh-org-rk-info { --pf: var(--org-rk-info); --pi: var(--org-rk-info-ink); } #wlf-lighthouse .lh-org-root .lh-org-rk-warn { --pf: var(--org-rk-warn); --pi: var(--org-rk-warn-ink); } #wlf-lighthouse .lh-org-root .lh-org-rk-far { --pf: var(--org-rk-far); --pi: var(--org-rk-far-ink); } #wlf-lighthouse .lh-org-root .lh-org-rk-none { --pf: var(--org-rk-none); --pi: var(--org-rk-none-ink); } #wlf-lighthouse .lh-org-root .lh-org-grid-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } #wlf-lighthouse .lh-org-root .lh-org-rk-sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--pf); margin-right: 8px; vertical-align: -1px; } #wlf-lighthouse .lh-org-root .lh-org-shot { font-weight: 600; } @media (max-width: 760px) { #wlf-lighthouse .lh-org-root .lh-org-grid-body { grid-template-columns: minmax(0, 1fr); } } #wlf-lighthouse .lh-org-root .lh-org-ws-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } #wlf-lighthouse .lh-org-root .lh-org-kwq { font: inherit; font-size: 13px; padding: 5px 10px; border: 1px solid var(--lh-control-border); border-radius: var(--lh-r-md); background: var(--lh-card); color: var(--lh-ink); min-width: 180px; } #wlf-lighthouse .lh-org-root .lh-org-kwq:focus-visible { outline: 2px solid var(--lh-focus); outline-offset: 1px; } #wlf-lighthouse .lh-org-root .lh-org-mx-btn { border: 0; cursor: pointer; font-variant-numeric: tabular-nums; min-width: 3.4em; } #wlf-lighthouse .lh-org-root .lh-org-mx-btn:hover { box-shadow: 0 0 0 1px var(--c); } #wlf-lighthouse .lh-org-root .lh-org-mx-btn.lh-on { box-shadow: 0 0 0 2px var(--lh-ink); } #wlf-lighthouse .lh-org-root .lh-org-mx-btn:focus-visible { outline: 2px solid var(--lh-focus); outline-offset: 1px; } #wlf-lighthouse .lh-org-root .lh-org-matrix th.lh-org-mx-k { position: sticky; left: 0; background: var(--lh-card); z-index: 1; min-width: 200px; } #wlf-lighthouse .lh-org-root .lh-org-matrix thead th.lh-org-mx-k { background: var(--lh-surface-2); z-index: 2; } #wlf-lighthouse .lh-org-root .lh-org-matrix .lh-org-mx-h { padding: 8px 10px; font: 600 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); white-space: nowrap; } #wlf-lighthouse .lh-org-root .lh-org-matrix thead th.lh-org-mx-k, #wlf-lighthouse .lh-org-root .lh-org-matrix thead th.lh-n { padding: 8px 10px; font: 600 12px/16px var(--lh-f-sans); color: var(--lh-ink-muted); } #wlf-lighthouse .lh-org-root .lh-org-matrix td.lh-org-mx-c { padding: 4px 6px; text-align: center; } #wlf-lighthouse .lh-org-root .lh-org-matrix tfoot th, #wlf-lighthouse .lh-org-root .lh-org-matrix tfoot td { padding: 6px 10px; border-top: 1px solid var(--lh-card-border); background: var(--lh-surface-2); font-weight: 600; text-align: left; } #wlf-lighthouse .lh-org-root .lh-org-matrix tfoot td.lh-n { text-align: right; } #wlf-lighthouse .lh-org-root .lh-org-pending { color: var(--org-info); } /* 1.22.2: seven sub-tabs wrap on wide screens; phones scroll the row */ #wlf-lighthouse .lh-org-root .lh-org-subnav { flex-wrap: wrap; } @media (max-width: 600px) { #wlf-lighthouse .lh-org-root .lh-org-subnav { flex-wrap: nowrap; } } /* 1.22.3: grid detail header (office, address, the other grids of a cell) */ #wlf-lighthouse .lh-org-root .lh-org-grid-headw { display: flex; flex-direction: column; gap: 6px; } #wlf-lighthouse .lh-org-root .lh-org-addr { margin: 2px 0 0; font-size: 12px; } #wlf-lighthouse .lh-org-root .lh-org-grid-alts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* ===== 1.23.0 visual pass ===== */ #wlf-lighthouse .lh-org-root { /* Whitespark-style rank colours: 1–3 green, 4–10 yellow, 11–20 orange, 21+ red-orange, not found grey */ --org-rk-good: #2e9e5b; --org-rk-good-ink: #ffffff; --org-rk-info: #f2c94c; --org-rk-info-ink: #2b2200; --org-rk-warn: #f2994a; --org-rk-warn-ink: #2b1600; --org-rk-far: #e4572e; --org-rk-far-ink: #ffffff; --org-rk-none: #b8bfcc; --org-rk-none-ink: #1e2a4a; --org-sov-us: #2f6fdb; --org-sov-c0: #b4554b; --org-sov-c1: #d08c5a; --org-sov-c2: #9a7fb8; --org-sov-c3: #6b9a8b; --org-sov-o: #b8bfcc; --org-hero-a: #0f1b3d; --org-hero-b: #24407a; --org-hero-c: #2f6fdb; --org-hero-ink: #ffffff; --org-hero-sub: #d7e2fb; --org-spark: #2f6fdb; --org-spark-a: rgba(47, 111, 219, .14); } #wlf-lighthouse[data-theme="dark"] .lh-org-root { --org-rk-good: #3fae6c; --org-rk-good-ink: #08140c; --org-rk-info: #e8c252; --org-rk-info-ink: #1e1700; --org-rk-warn: #f0a160; --org-rk-warn-ink: #1e1000; --org-rk-far: #ef7350; --org-rk-far-ink: #160600; --org-rk-none: #56607a; --org-rk-none-ink: #e8ecf4; --org-sov-us: #7aa7f0; --org-sov-c0: #e0928a; --org-sov-c1: #e8b083; --org-sov-c2: #bfa8dc; --org-sov-c3: #8fc2b2; --org-sov-o: #56607a; --org-hero-a: #0b1530; --org-hero-b: #1b2d5c; --org-hero-c: #2a4f9a; --org-hero-sub: #b9c8ec; --org-spark: #7aa7f0; --org-spark-a: rgba(122, 167, 240, .18); } /* header */ #wlf-lighthouse .lh-org-root .lh-org-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px 22px; border-radius: var(--lh-r-lg); color: var(--org-hero-ink); background: linear-gradient(120deg, var(--org-hero-a) 0%, var(--org-hero-b) 55%, var(--org-hero-c) 100%); box-shadow: var(--lh-e0); } #wlf-lighthouse .lh-org-root .lh-org-hero-t { display: flex; align-items: center; gap: 14px; min-width: 0; } #wlf-lighthouse .lh-org-root .lh-org-hero-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .14); } #wlf-lighthouse .lh-org-root .lh-org-hero-ic .lh-org-ic { width: 24px; height: 24px; stroke: #fff; } #wlf-lighthouse .lh-org-root .lh-org-hero-h { font: 700 22px/28px var(--lh-f-sans); letter-spacing: -.01em; } #wlf-lighthouse .lh-org-root .lh-org-hero-s { font-size: 13px; line-height: 18px; color: var(--org-hero-sub); } #wlf-lighthouse .lh-org-root .lh-org-hero-k { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } #wlf-lighthouse .lh-org-root .lh-org-hero-k li { padding: 4px 12px; border-radius: var(--lh-r-pill); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); font: 600 13px/20px var(--lh-f-sans); white-space: nowrap; } /* icons */ #wlf-lighthouse .lh-org-root .lh-org-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } #wlf-lighthouse .lh-org-root .lh-org-hic { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; border-radius: 9px; background: var(--org-info-bg); color: var(--org-info); vertical-align: -7px; } #wlf-lighthouse .lh-org-root .lh-org-head h2 { display: flex; align-items: center; } /* card system */ #wlf-lighthouse .lh-org-root .lh-org-sec { border-radius: 14px; transition: box-shadow .15s ease; } #wlf-lighthouse .lh-org-root .lh-org-sec:hover { box-shadow: var(--lh-shadow); } #wlf-lighthouse .lh-org-root .lh-org-tile { position: relative; overflow: hidden; border-radius: 12px; transition: transform .15s ease, box-shadow .15s ease; } #wlf-lighthouse .lh-org-root .lh-org-tile:hover { box-shadow: var(--lh-shadow); transform: translateY(-1px); } #wlf-lighthouse .lh-org-root .lh-org-has-spark { padding-bottom: 6px; } #wlf-lighthouse .lh-org-root .lh-org-spark { display: block; width: 100%; height: 30px; margin-top: 4px; color: var(--org-spark); } #wlf-lighthouse .lh-org-root .lh-org-spark-l { stroke: var(--org-spark); stroke-width: 1.8; vector-effect: non-scaling-stroke; } #wlf-lighthouse .lh-org-root .lh-org-spark-a { fill: var(--org-spark-a); stroke: none; } #wlf-lighthouse .lh-org-root .lh-org-spark-d { fill: var(--org-spark); } #wlf-lighthouse .lh-org-root .lh-org-gch-tile .lh-org-spark-l, #wlf-lighthouse .lh-org-root .lh-org-gch-tile .lh-org-spark-d { stroke: var(--bk); fill: var(--bk); } #wlf-lighthouse .lh-org-root .lh-org-gch-tile .lh-org-spark-l { fill: none; } /* at a glance */ #wlf-lighthouse .lh-org-root .lh-org-viz-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--lh-sp-4); } #wlf-lighthouse .lh-org-root .lh-org-viz { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border: 1px solid var(--lh-border); border-radius: 12px; background: var(--lh-surface-2); text-align: center; } #wlf-lighthouse .lh-org-root .lh-org-viz .lh-org-h4 { margin: 0; align-self: flex-start; } #wlf-lighthouse .lh-org-root .lh-org-viz .lh-org-note { text-align: left; } #wlf-lighthouse .lh-org-root .lh-org-donut-w { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; width: 100%; } #wlf-lighthouse .lh-org-root .lh-org-donut-bg, #wlf-lighthouse .lh-org-root .lh-org-gauge-bg { stroke: var(--lh-band); } #wlf-lighthouse .lh-org-root .lh-org-donut-seg { stroke: var(--bk, var(--lh-step-3)); } #wlf-lighthouse .lh-org-root .lh-org-gauge-v { stroke: var(--org-sov-us); } #wlf-lighthouse .lh-org-root .lh-org-donut-c { fill: var(--lh-ink); font: 700 20px/1 var(--lh-f-sans); } #wlf-lighthouse .lh-org-root .lh-org-donut-s { fill: var(--lh-ink-faint); font: 12px/1 var(--lh-f-sans); } #wlf-lighthouse .lh-org-root .lh-org-donut-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; text-align: left; min-width: 160px; } #wlf-lighthouse .lh-org-root .lh-org-donut-leg li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; } #wlf-lighthouse .lh-org-root .lh-org-donut-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; } #wlf-lighthouse .lh-org-root .lh-org-donut-v { font-variant-numeric: tabular-nums; color: var(--lh-ink-muted); } #wlf-lighthouse .lh-org-root .lh-org-sov-us { --bk: var(--org-sov-us); } #wlf-lighthouse .lh-org-root .lh-org-sov-c0 { --bk: var(--org-sov-c0); } #wlf-lighthouse .lh-org-root .lh-org-sov-c1 { --bk: var(--org-sov-c1); } #wlf-lighthouse .lh-org-root .lh-org-sov-c2 { --bk: var(--org-sov-c2); } #wlf-lighthouse .lh-org-root .lh-org-sov-c3 { --bk: var(--org-sov-c3); } #wlf-lighthouse .lh-org-root .lh-org-sov-o { --bk: var(--org-sov-o); } /* insights with icons */ #wlf-lighthouse .lh-org-root .lh-org-ins-top { display: flex; align-items: center; gap: 8px; } #wlf-lighthouse .lh-org-root .lh-org-ins-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--c); background: var(--cb); } #wlf-lighthouse .lh-org-root .lh-org-ins-ic .lh-org-ic { width: 16px; height: 16px; } #wlf-lighthouse .lh-org-root .lh-org-ins-card { border-radius: 12px; transition: box-shadow .15s ease, transform .15s ease; } #wlf-lighthouse .lh-org-root .lh-org-ins-card:hover { box-shadow: var(--lh-shadow); transform: translateY(-1px); } #wlf-lighthouse .lh-org-root .lh-org-ins-tag { align-self: center; } /* horizontal bars */ #wlf-lighthouse .lh-org-root .lh-org-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } #wlf-lighthouse .lh-org-root .lh-org-hbars li { display: grid; grid-template-columns: minmax(120px, 240px) minmax(80px, 1fr) 4.2em; align-items: center; gap: 10px; font-size: 13px; padding: 2px 6px; border-radius: 6px; } #wlf-lighthouse .lh-org-root .lh-org-hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #wlf-lighthouse .lh-org-root .lh-org-hb-t { display: block; height: 12px; border-radius: var(--lh-r-pill); background: var(--lh-band); overflow: hidden; } #wlf-lighthouse .lh-org-root .lh-org-hb-f { display: block; height: 100%; width: 0; border-radius: var(--lh-r-pill); background: var(--bk, var(--lh-step-3)); } #wlf-lighthouse .lh-org-root .lh-org-hb-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--lh-ink-muted); } #wlf-lighthouse .lh-org-root .lh-org-hbars li.lh-org-hb-own { background: var(--org-info-bg); font-weight: 700; } #wlf-lighthouse .lh-org-root .lh-org-hbars li.lh-org-hb-own .lh-org-hb-n { color: var(--lh-ink); } #wlf-lighthouse .lh-org-root .lh-org-hb-eng-chatgpt { --bk: var(--org-eng-chatgpt); } #wlf-lighthouse .lh-org-root .lh-org-hb-eng-gemini { --bk: var(--org-eng-gemini); } #wlf-lighthouse .lh-org-root .lh-org-hb-eng-perplexity { --bk: var(--org-eng-perplexity); } #wlf-lighthouse .lh-org-root .lh-org-hb-eng-claude { --bk: var(--org-eng-claude); } #wlf-lighthouse .lh-org-root .lh-org-hb-eng-copilot { --bk: var(--org-eng-copilot); } /* bubble chart */ #wlf-lighthouse .lh-org-root .lh-org-bubble { display: block; max-width: 100%; height: auto; } #wlf-lighthouse .lh-org-root .lh-org-bb-zone { fill: var(--org-warn-bg); } #wlf-lighthouse .lh-org-root .lh-org-bb-zt { fill: var(--org-warn); font: 600 11px/1 var(--lh-f-sans); } #wlf-lighthouse .lh-org-root .lh-org-bb-grid { stroke: var(--lh-grid); } #wlf-lighthouse .lh-org-root .lh-org-bb { stroke: var(--lh-card); stroke-width: 1; fill-opacity: .72; } #wlf-lighthouse .lh-org-root .lh-org-bb:hover { fill-opacity: 1; stroke: var(--lh-ink); } #wlf-lighthouse .lh-org-root .lh-org-bb-non { fill: var(--org-gch-organic); } #wlf-lighthouse .lh-org-root .lh-org-bb-brand { fill: var(--org-gch-maps); } #wlf-lighthouse .lh-org-root .lh-org-bb-sw-non { --bk: var(--org-gch-organic); background: var(--org-gch-organic); border-radius: 50%; } #wlf-lighthouse .lh-org-root .lh-org-bb-sw-brand { --bk: var(--org-gch-maps); background: var(--org-gch-maps); border-radius: 50%; } #wlf-lighthouse .lh-org-root .lh-org-bb-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--lh-ink-muted); } /* heatmap */ #wlf-lighthouse .lh-org-root .lh-org-mx-btn.lh-org-heat { color: #1e2a4a; border-radius: 6px; min-width: 3.6em; padding: 3px 8px; } #wlf-lighthouse[data-theme="dark"] .lh-org-root .lh-org-mx-btn.lh-org-heat { color: #e8ecf4; } #wlf-lighthouse .lh-org-root .lh-org-matrix td.lh-org-mx-c { padding: 3px 4px; } #wlf-lighthouse .lh-org-root .lh-org-avgbar { display: inline-flex; align-items: center; gap: 6px; } #wlf-lighthouse .lh-org-root .lh-org-avgbar-t { display: inline-block; width: 44px; height: 6px; border-radius: var(--lh-r-pill); background: var(--lh-band); overflow: hidden; } #wlf-lighthouse .lh-org-root .lh-org-avgbar-f { display: block; height: 100%; width: 0; background: var(--org-rk-good); } #wlf-lighthouse .lh-org-root .lh-org-avgbar-n { font-variant-numeric: tabular-nums; min-width: 1.8em; text-align: right; } /* the map */ #wlf-lighthouse .lh-org-root .lh-org-grid-body { grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); } #wlf-lighthouse .lh-org-root .lh-org-grid-stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; } #wlf-lighthouse .lh-org-root .lh-org-map { position: relative; width: 100%; height: 440px; border-radius: 12px; overflow: hidden; border: 1px solid var(--lh-card-border); background: var(--lh-surface-2); } #wlf-lighthouse .lh-org-root .lh-org-map > .lh-org-note { padding: 12px; } #wlf-lighthouse .lh-org-root .lh-org-map .lh-org-gridmap { max-width: 440px; margin: 0 auto; } #wlf-lighthouse .lh-org-root .lh-org-shotimg { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; } #wlf-lighthouse .lh-org-root .leaflet-container { font: 12px/1.4 var(--lh-f-sans); } #wlf-lighthouse .lh-org-root .lh-org-mk { display: grid; place-items: center; border-radius: 50%; background: var(--pf); color: var(--pi); border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 1px 3px rgba(15, 27, 61, .35); } #wlf-lighthouse .lh-org-root .lh-org-mk-n { font: 700 11px/1 var(--lh-f-sans); letter-spacing: -.02em; } #wlf-lighthouse .lh-org-root .lh-org-pin { background: none; border: 0; } #wlf-lighthouse .lh-org-root .lh-org-pin-in { display: block; width: 24px; height: 24px; margin: 0 auto; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #0f1b3d; border: 3px solid #fff; box-shadow: 0 2px 5px rgba(15, 27, 61, .45); } #wlf-lighthouse .lh-org-root .lh-org-pin-sw { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #0f1b3d; vertical-align: -1px; } #wlf-lighthouse .lh-org-root .lh-org-grid-share { font-size: 14px; color: var(--lh-ink-muted); } #wlf-lighthouse .lh-org-root .lh-org-grid-share strong { font-size: 22px; color: var(--lh-ink); margin-right: 4px; } #wlf-lighthouse .lh-org-root .lh-org-ptlist summary { cursor: pointer; font-weight: 600; font-size: 13px; } #wlf-lighthouse .lh-org-root .lh-org-ptlist .lh-org-table { margin-top: 6px; } #wlf-lighthouse .lh-org-root .lh-org-rk-chip { color: var(--pi); background: var(--pf); } @media (max-width: 760px) { #wlf-lighthouse .lh-org-root .lh-org-grid-body { grid-template-columns: minmax(0, 1fr); } #wlf-lighthouse .lh-org-root .lh-org-map { height: 340px; } #wlf-lighthouse .lh-org-root .lh-org-hbars li { grid-template-columns: minmax(90px, 140px) minmax(60px, 1fr) 3.8em; } } @media (max-width: 600px) { #wlf-lighthouse .lh-org-root .lh-org-hero { padding: 14px 16px; } #wlf-lighthouse .lh-org-root .lh-org-hero-h { font-size: 19px; } } @media (prefers-reduced-motion: reduce) { #wlf-lighthouse .lh-org-root .lh-org-sec, #wlf-lighthouse .lh-org-root .lh-org-tile, #wlf-lighthouse .lh-org-root .lh-org-ins-card { transition: none; } #wlf-lighthouse .lh-org-root .lh-org-tile:hover, #wlf-lighthouse .lh-org-root .lh-org-ins-card:hover { transform: none; } } @media print { #wlf-lighthouse .lh-org-root .lh-org-hero { background: none; color: var(--lh-ink); border: 1px solid var(--lh-card-border); } } /* 1.23.0: OSM tiles have no dark style; dim and invert them in dark mode */ #wlf-lighthouse[data-theme="dark"] .lh-org-root .lh-org-map-osm .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }