/* ============================================================ WGO SEO — token system Matched to whitegloveorthodontist.com: near-black ink on an almost-white plane, Inter and Inter Tight, violet for action. Dark mode is a neutral night build of the same set, not an inversion. Series and family hues are the CVD-validated categorical sets and are never reused for chrome, so they stay as they are when the brand colours move. ============================================================ */ :root { color-scheme: light; --page: #fbfbfd; --surface: #ffffff; --surf-b: #ffffff; --surface-2: #f5f5f8; /* untinted bases, so the family tint below never self-references */ --surf2-b: #f5f5f8; --surface-3: #eaeaef; --ink: #181e15; --ink-2: #3a3a44; /* The homepage's grey is #71717f, which reads at 4.01:1 on our deepest light surface. A shade darker clears 4.5:1 everywhere this is used and is indistinguishable side by side. */ --muted: #696977; --hairline: #e8e8ef; --rule: #c9c9d4; --accent: #4b2fd6; /* action only: buttons, active chrome */ --accent-ink: #3a20b4; --accent-soft: #f4f1fe; --link: #4b2fd6; --link-soft: #f4f1fe; --s1: #2a78d6; /* Elate Orthodontics */ --s2: #eb6834; /* Tribute Family Dentistry */ --s3: #1baf7a; /* The Orthodontist Near Me */ --s4: #eda100; /* Inspire Dental & Orthodontics */ --s5: #e87ba4; /* White Glove Orthodontist */ /* Family hues: identify the five groups of work. Kept separate from the series hues above (which mean properties) and from the semantic set below (which means good/bad), and used only as thin identity marks. */ --f1: #38796c; --f1s: #e7f0ed; /* Local SEO */ --f2: #3f5f9c; --f2s: #e9eef7; /* Search performance */ --f3: #7d4c74; --f3s: #f2eaf0; /* Competition */ --f4: #8a6532; --f4s: #f3ede2; /* Site health */ --f5: #526070; --f5s: #eceff3; /* Portfolio */ --f6: #5f7333; --f6s: #edf1e4; /* Strategy */ --good: #1da867; --good-ink: #12734a; --good-soft: #e6f6ee; --warn: #fab219; --warn-ink: #8a5c00; --warn-soft: #fef4de; --serious: #ec835a; --serious-ink: #a1481f; --serious-soft:#fdeee6; --crit: #d63638; --crit-ink: #a8282a; --crit-soft: #fdeaea; --grid: #ececf1; --axis: #c9c9d4; --shadow-sm: 0 1px 2px rgba(24,30,21,.06); --shadow-md: 0 4px 16px rgba(24,30,21,.10); --r-sm: 4px; --r-md: 7px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --page: #0d0d11; --surface: #16161c; --surf-b: #16161c; --surface-2: #1c1c23; /* untinted bases, so the family tint below never self-references */ --surf2-b: #1c1c23; --surface-3: #26262f; --ink: #f2f2f5; --ink-2: #b4b4c0; --muted: #8b8b99; --hairline: #2a2a33; --rule: #3b3b47; --accent: #8f79ff; --accent-ink: #a996ff; --accent-soft: #241d45; --link: #a394ff; --link-soft: #201a3d; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --f1: #7cb8a9; --f1s: #16302b; --f2: #8fabd8; --f2s: #1a2436; --f3: #c795bb; --f3s: #2d1f2a; --f4: #cda36c; --f4s: #2f2619; --f5: #9dabbb; --f5s: #1d242d; --f6: #a9be76; --f6s: #222a16; --good: #1da867; --good-ink: #4cc98d; --good-soft: #123024; --warn: #fab219; --warn-ink: #e0a01a; --warn-soft: #33290f; --serious: #ec835a; --serious-ink: #f0a077; --serious-soft:#3a241b; --crit: #d63638; --crit-ink: #ea6b6d; --crit-soft: #331a1a; --grid: #23232c; --axis: #3b3b47; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 4px 16px rgba(0,0,0,.5); } } :root[data-theme="dark"] { color-scheme: dark; --page: #0d0d11; --surface: #16161c; --surf-b: #16161c; --surface-2: #1c1c23; /* untinted bases, so the family tint below never self-references */ --surf2-b: #1c1c23; --surface-3: #26262f; --ink: #f2f2f5; --ink-2: #b4b4c0; --muted: #8b8b99; --hairline: #2a2a33; --rule: #3b3b47; --accent: #8f79ff; --accent-ink: #a996ff; --accent-soft: #241d45; --link: #a394ff; --link-soft: #201a3d; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --f1: #7cb8a9; --f1s: #16302b; --f2: #8fabd8; --f2s: #1a2436; --f3: #c795bb; --f3s: #2d1f2a; --f4: #cda36c; --f4s: #2f2619; --f5: #9dabbb; --f5s: #1d242d; --f6: #a9be76; --f6s: #222a16; --good: #1da867; --good-ink: #4cc98d; --good-soft: #123024; --warn: #fab219; --warn-ink: #e0a01a; --warn-soft: #33290f; --serious: #ec835a; --serious-ink: #f0a077; --serious-soft:#3a241b; --crit: #d63638; --crit-ink: #ea6b6d; --crit-soft: #331a1a; --grid: #23232c; --axis: #3b3b47; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 4px 16px rgba(0,0,0,.5); } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--ink); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, .num, .brandmark { font-family: "Inter Tight", ui-sans-serif, system-ui, sans-serif; } /* ---------- App chrome ---------- */ .app { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100vh; } .rail { background: var(--surface); border-right: 1px solid var(--hairline); padding: 18px 0 24px; display: flex; flex-direction: column; gap: 22px; } .brand { display: flex; align-items: center; gap: 9px; padding: 0 18px; } /* The WGO mark, carried as a mask so it takes the accent colour in either theme rather than shipping two coloured copies. */ .brand-glyph { width: 26px; height: 26px; flex: none; background: var(--accent); -webkit-mask: url(data:image/png;base64,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) center / contain no-repeat; mask: url(data:image/png;base64,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) center / contain no-repeat; } .brandmark { font-size: 19px; font-weight: 700; letter-spacing: -.02em; } .brand-sub { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-top: -3px; } .rail-group { display: flex; flex-direction: column; gap: 2px; } .rail-label { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); padding: 0 18px 6px; font-weight: 600; } .prop { display: grid; grid-template-columns: 3px 1fr auto; align-items: center; gap: 9px; padding: 8px 18px 8px 0; border: 0; background: none; width: 100%; text-align: left; cursor: pointer; color: var(--ink-2); font: inherit; } .prop:hover { background: var(--surface-2); } .prop[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); } .prop-bar { height: 28px; border-radius: 0 3px 3px 0; background: transparent; } .prop[aria-pressed="true"] .prop-bar { background: var(--series); } .prop-name { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.25; } .prop-domain { display: block; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .prop-metric { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; } .prop-metric small { display: block; font-size: 9.5px; font-weight: 400; color: var(--muted); } .rail-nav a { display: block; padding: 6px 18px; color: var(--ink-2); text-decoration: none; font-size: 12.5px; border-left: 2px solid transparent; } .rail-nav a:hover { color: var(--ink); border-left-color: var(--rule); } .rail-nav a.on { color: var(--link); border-left-color: var(--accent); font-weight: 600; background: var(--surface-2); } .rail-foot { margin-top: auto; padding: 0 18px; font-size: 11px; color: var(--muted); } /* ---------- issue tracker ---------- */ .sev { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .sev-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; } .sev-warning { color: var(--warn-ink); } .sev-warning .sev-dot { background: var(--warn); } .sev-info { color: var(--ink-2); } .sev-info .sev-dot { background: var(--rule); } .sev-critical { color: var(--crit-ink); } .sev-critical .sev-dot { background: var(--crit); } .status-seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; } .status-seg button { border: 0; background: var(--surface); cursor: pointer; font: inherit; font-size: 11px; padding: 3px 8px; color: var(--muted); border-right: 1px solid var(--hairline); } .status-seg button:last-child { border-right: 0; } .status-seg button:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); } .status-seg button:disabled { cursor: not-allowed; opacity: .5; } .status-seg button[aria-pressed="true"][data-s="open"] { background: var(--crit-soft); color: var(--crit-ink); font-weight: 600; } .status-seg button[aria-pressed="true"][data-s="fixed"] { background: var(--good-soft); color: var(--good-ink); font-weight: 600; } .status-seg button[aria-pressed="true"][data-s="ignore"] { background: var(--surface-3); color: var(--ink-2); font-weight: 600; } tr.is-fixed td:not(:last-child) { opacity: .5; } tr.is-ignore td:not(:last-child) { opacity: .4; } .pagelist { font-size: 11.5px; color: var(--ink-2); margin-top: 5px; display: none; } .pagelist.on { display: block; } .pagelist ul { margin: 4px 0 0; padding-left: 0; list-style: none; display: grid; gap: 2px; } .pagelist li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1px solid var(--hairline); } .pagelist li span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; } .disclose { border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--link); cursor: pointer; margin-top: 3px; } .disclose:hover { text-decoration: underline; } .fixnote { font-size: 11.5px; color: var(--muted); margin-top: 3px; max-width: 62ch; } /* ---------- family dividers ---------- */ /* The five families are real groupings of the work, not decoration: where you stand on the map, how you do in results, what rivals do, what is broken, and how the portfolio compares. */ .famrule { display: flex; align-items: center; gap: 13px; margin: 16px 0 -6px; padding: 0 2px; } .famrule:first-child { margin-top: 0; } .famrule .fam-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--fam); white-space: nowrap; } .famrule::after { content: ""; flex: 1; height: 1px; background: var(--fam); opacity: .35; } .famrule .fam-n { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 5px; flex: none; background: var(--fam); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0; } .fam-tag { display: block; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--fam, var(--muted)); margin-bottom: 2px; } /* ---------- sticky section nav ---------- */ /* Two rows: the family the sections belong to, then the sections. Each family owns a hue, and that same hue marks its panels further down. */ .secnav { position: sticky; top: 58px; z-index: 19; background: color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); padding: 0 26px; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; } .secnav::-webkit-scrollbar { display: none; } .navgroup { display: flex; flex-direction: column; flex: none; padding: 0 11px; border-right: 1px solid var(--hairline); } .navgroup:first-child { padding-left: 0; } /* Trailing padding lives on the last group, not the nav, so it survives when the row overflows and scrolls. */ .navgroup:last-child { border-right: 0; padding-right: 26px; } .navgroup-lbl { display: flex; align-items: center; gap: 6px; padding: 7px 4px 0; white-space: nowrap; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--fam); } .navgroup-lbl .ng-n { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 4px; flex: none; background: var(--fam); color: #fff; font-size: 9px; letter-spacing: 0; } .navgroup-links { display: flex; flex: 1; align-items: flex-end; } .secnav a { padding: 4px 10px 8px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 4px 4px 0 0; } .secnav a:hover { color: var(--ink); background: var(--surface-2); } .secnav a.on { color: var(--fam); font-weight: 700; border-bottom-color: var(--fam); background: var(--fam-soft); } .nav-cnt { margin-left: 6px; font-size: 10px; font-weight: 700; background: var(--crit-soft); color: var(--crit-ink); padding: 1px 6px; border-radius: 9px; font-variant-numeric: tabular-nums; } /* ---------- strategy plays ---------- */ /* One row per action. Everything on it is either a measurement taken in a run or a decision Kevin recorded; nothing here is an opinion with no number behind it. */ .playfilters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 13px 17px; border-bottom: 1px solid var(--hairline); } .playfilters .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-right: 2px; } .plays { display: flex; flex-direction: column; } .play { display: grid; grid-template-columns: 4px minmax(0,1fr) 250px; gap: 0 16px; border-bottom: 1px solid var(--hairline); align-items: start; } .play:last-child { border-bottom: 0; } .play-stripe { background: var(--pfam); align-self: stretch; } .play-main { padding: 14px 0 15px 2px; min-width: 0; } .play-side { padding: 14px 17px 15px 0; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; } .play-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .play-fam { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pfam); display: inline-flex; align-items: center; gap: 5px; } .play-fam i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 4px; background: var(--pfam); color: #fff; font-size: 9px; letter-spacing: 0; } .play-prop { font-size: 10.5px; color: var(--muted); } .play h3 { font-size: 14.5px; margin: 0 0 6px; letter-spacing: -.005em; } .play dl { margin: 0; display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 3px 12px; font-size: 12.5px; } .play dt { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding-top: 3px; } .play dd { margin: 0; color: var(--ink-2); max-width: 74ch; } .play dd b, .play dd strong { color: var(--ink); font-weight: 600; } .play-effort { font-size: 11px; color: var(--muted); white-space: nowrap; } .play-when { font-size: 11px; color: var(--muted); white-space: nowrap; } .play-note { width: 100%; border: 1px solid var(--hairline); background: var(--surf-b); border-radius: var(--r-sm); padding: 5px 8px; font: inherit; font-size: 11.5px; color: var(--ink); resize: vertical; min-height: 30px; } .play-note::placeholder { color: var(--muted); } .play-note:focus { border-color: var(--pfam); outline: none; } .status-seg button[aria-pressed="true"][data-s="todo"] { background: var(--surface-3); color: var(--ink); font-weight: 600; } .status-seg button[aria-pressed="true"][data-s="doing"] { background: var(--warn-soft); color: var(--warn-ink); font-weight: 600; } .status-seg button[aria-pressed="true"][data-s="done"] { background: var(--good-soft); color: var(--good-ink); font-weight: 600; } .status-seg button[aria-pressed="true"][data-s="no"] { background: var(--surface-3); color: var(--muted); font-weight: 600; } .play.is-done .play-main, .play.is-no .play-main { opacity: .62; } .play.is-done h3 { text-decoration: none; } @media (max-width: 1020px) { .play { grid-template-columns: 4px minmax(0,1fr); } .play-side { grid-column: 2; padding: 0 17px 15px 0; align-items: flex-start; } .play dl { grid-template-columns: 1fr; gap: 1px; } .play dt { padding-top: 6px; } } /* ---------- history ---------- */ .histbar { margin-bottom: 13px; } .hnote { font-size: 12px; color: var(--muted); } .hnote b { color: var(--ink-2); font-weight: 600; } .hchip { display: inline-block; font-size: 11px; font-weight: 700; vertical-align: 3px; padding: 1px 6px; border-radius: var(--r-sm); margin-left: 5px; font-variant-numeric: tabular-nums; font-family: "Inter", sans-serif; } .hchip.up { background: var(--good-soft); color: var(--good-ink); } .hchip.down { background: var(--crit-soft); color: var(--crit-ink); } .hchip.flat { background: var(--surface-3); color: var(--muted); } .loctab-group { display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: -2px; } .tab[aria-selected="true"] .loctab-group { color: var(--accent-ink); } /* ---------- map grid ---------- */ .kwbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 15px; } .chip { border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; font: inherit; font-size: 12px; padding: 5px 12px; border-radius: 999px; color: var(--ink-2); } .chip:hover { background: var(--surface-2); color: var(--ink); border-color: var(--rule); } .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .chip-sep { width: 1px; height: 20px; background: var(--hairline); margin: 0 4px; } .kwinput { border: 1px solid var(--hairline); background: var(--surface); border-radius: 999px; padding: 5px 13px; font: inherit; font-size: 12px; color: var(--ink); min-width: 190px; } .kwinput::placeholder { color: var(--muted); } .kwinput:focus { border-color: var(--accent); outline: none; } .kwhint { font-size: 11.5px; color: var(--muted); } .kwhint.ok { color: var(--good-ink); font-weight: 600; } .gridwrap { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 26px; align-items: start; } .mapcol { position: relative; } .mapcol svg { display: block; width: 100%; height: auto; } /* On a wide screen this column inherits every remaining pixel, so a practice name and its bar ended up at opposite ends of the panel with a foot of white space between them. Nothing in here reads better wider. */ #gridSide { max-width: 660px; } .gstats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px; } .glegend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; } .lg { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; } .lg1 { background: var(--good); } .lg2 { background: var(--warn); } .lg3 { background: var(--serious); } .lgx { background: var(--surface-3); border: 1px dashed var(--rule); } /* The name column is 1fr, so on a wide panel the practice name and the bar it belongs to drifted to opposite ends of the row and stopped reading as one thing. A bar chart is read across, not spread out. */ .grivals { margin-top: 18px; max-width: 430px; } .rival-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 8px; } .rival { display: grid; grid-template-columns: minmax(0,1fr) 84px 26px; align-items: center; gap: 10px; font-size: 12px; padding: 3px 0; } .rival > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .rival-bar { height: 7px; background: var(--surface-3); border-radius: 4px; overflow: hidden; } .rival-bar span { display: block; height: 100%; background: var(--s2); border-radius: 4px; } .rival-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11.5px; } .rival-foot { font-size: 11px; color: var(--muted); margin-top: 8px; } /* ---------- small multiples ---------- */ .facets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .facet { min-width: 0; } .facet-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; } .facet-name { font-size: 12px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .facet-val { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; } .facet-sub { font-size: 10.5px; color: var(--muted); margin-bottom: 5px; font-variant-numeric: tabular-nums; } .facet svg { display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: var(--surface-2); } /* ---------- review benchmark ---------- */ .revhead { display: grid; grid-template-columns: minmax(0,1fr) 46px; gap: 10px; margin: 16px 0 6px; padding: 0 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .revhead span:last-child { text-align: right; } .revchart { display: flex; flex-direction: column; gap: 1px; } .revrow { display: grid; grid-template-columns: minmax(0,190px) minmax(0,1fr) 52px 34px; gap: 10px; align-items: center; padding: 4px 2px; border-radius: var(--r-sm); } .revrow:hover { background: var(--surface-2); } .revrow.ours { background: var(--link-soft); } .revname { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .revrow.ours .revname { color: var(--ink); font-weight: 600; } .assoc { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--surface-3); color: var(--muted); padding: 1px 4px; border-radius: 3px; margin-left: 6px; } .revbar { height: 9px; background: var(--surface-3); border-radius: 5px; overflow: hidden; } .revbar span { display: block; height: 100%; border-radius: 5px; } .revnum { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; } .revrate { text-align: right; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); } #aiPages .revrow, #aiCites .revrow, #rivalChart .revrow { grid-template-columns: minmax(0,330px) minmax(0,1fr) 62px 48px; } tr.ours-row { background: var(--link-soft); } tr.ours-row:hover { background: var(--link-soft); } /* ---------- delta bars ---------- */ .dbar { display: flex; align-items: center; gap: 8px; min-width: 150px; } .dbar-track { flex: 1; height: 8px; background: var(--surface-3); border-radius: 5px; position: relative; overflow: hidden; } .dbar-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rule); } .dbar-fill { position: absolute; top: 0; bottom: 0; border-radius: 5px; } .dbar-num { font-variant-numeric: tabular-nums; font-size: 11.5px; width: 52px; text-align: right; font-weight: 600; } .dbar-num.neg { color: var(--crit-ink); } .dbar-num.pos { color: var(--good-ink); } /* ---------- Main ---------- */ .main { min-width: 0; } .topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 93%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); padding: 12px 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .topbar h1 { font-size: 21px; font-weight: 600; margin: 0; letter-spacing: -.015em; } .topbar .spacer { flex: 1 1 auto; } .seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; background: var(--surface); } .seg button { border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; padding: 6px 12px; color: var(--ink-2); border-right: 1px solid var(--hairline); } .seg button:last-child { border-right: 0; } .seg button:hover { background: var(--surface-2); color: var(--ink); } .seg button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 600; } .ghost-btn { border: 1px solid var(--hairline); background: var(--surface); border-radius: var(--r-md); padding: 6px 12px; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; } .ghost-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--rule); } .wrap { padding: 22px 26px 60px; display: flex; flex-direction: column; gap: 24px; } /* ---------- KPI strip ---------- */ .kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); } .kpi { padding: 15px 17px 14px; border-right: 1px solid var(--hairline); } .kpi:last-child { border-right: 0; } .kpi-label { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .kpi-value { font-family: "Inter Tight", sans-serif; font-size: 33px; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; margin-top: 5px; } .kpi-foot { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; font-size: 11.5px; } .delta { font-weight: 600; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: var(--r-sm); } .delta.up { color: var(--good-ink); background: var(--good-soft); } .delta.down { color: var(--crit-ink); background: var(--crit-soft); } .delta.flat { color: var(--muted); background: var(--surface-3); } .kpi-foot span.cmp { color: var(--muted); } /* ---------- Panels ---------- */ .panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } /* Family wash. Redefining the two surface tokens on the box means every nested surface inside it (table headers, stat tiles, footnotes) shifts with it, so the whole box reads as one family instead of a white card with a coloured edge. Falls back to the plain surfaces when --fam is not set. */ .panel, .read, .kpis { --surface: color-mix(in srgb, var(--fam, var(--surf-b)) 7%, var(--surf-b)); --surface-2: color-mix(in srgb, var(--fam, var(--surf2-b)) 15%, var(--surf2-b)); border-color: color-mix(in srgb, var(--fam, var(--hairline)) 20%, var(--hairline)); } .panel-head, .note { border-color: color-mix(in srgb, var(--fam, var(--hairline)) 20%, var(--hairline)); } /* The heading band carries a little more of the hue than the body under it. */ .panel-head { background: color-mix(in srgb, var(--fam, var(--surf-b)) 11%, var(--surf-b)); } .panel-head { display: flex; align-items: center; gap: 12px; padding: 13px 17px 12px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; /* The section title stays on screen while you read the section, so it is always clear which one you are in. --stick is measured at runtime. */ position: sticky; top: var(--stick, 98px); z-index: 15; background: var(--surface); border-radius: var(--r-md) var(--r-md) 0 0; /* Family stripe, plus a lift off the rows sliding under it. */ box-shadow: inset 3px 0 0 0 var(--fam, transparent), 0 6px 10px -10px rgba(15, 23, 42, .45); } .titlewrap { display: flex; flex-direction: column; } .titlewrap h2 { margin: 0; } .panel, .kpis, .read { scroll-margin-top: calc(var(--stick, 98px) + 14px); } .panel-head h2 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.01em; } .panel-head .sub { font-size: 11.5px; color: var(--muted); } .panel-head .spacer { flex: 1 1 auto; } .panel-body { padding: 15px 17px 17px; } .legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); } .legend-swatch { display: inline-block; width: 12px; height: 3px; border-radius: 2px; flex: none; } /* ---------- Charts ---------- */ .chart-stack { display: flex; flex-direction: column; } .chart-holder { position: relative; } .chart-holder svg { display: block; width: 100%; height: auto; } .chart-cap { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; } .tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 9px 11px; font-size: 11.5px; min-width: 156px; opacity: 0; transition: opacity .1s; z-index: 12; } .tip.on { opacity: 1; } .tip-date { font-weight: 600; margin-bottom: 6px; font-size: 11px; color: var(--ink); } .tip-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; } .tip-row + .tip-row { margin-top: 3px; } .tip-key { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); } .tip-val { font-variant-numeric: tabular-nums; font-weight: 600; } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hairline); padding: 0 17px; } .tab { border: 0; background: none; font: inherit; cursor: pointer; padding: 13px 2px 11px; margin-right: 26px; color: var(--muted); font-size: 15px; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--ink); } .tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); } .tab .cnt { font-size: 11px; font-variant-numeric: tabular-nums; margin-left: 7px; background: var(--surface-3); color: var(--ink-2); padding: 1px 7px; border-radius: 9px; font-weight: 600; } .tab[aria-selected="true"] .cnt { background: var(--accent-soft); color: var(--accent-ink); } /* ---------- Stat row ---------- */ .stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 2px; } .stat { padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-sm); } .stat-lbl { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .stat-val { font-family: "Inter Tight", sans-serif; font-size: 25px; font-weight: 600; line-height: 1.2; margin-top: 3px; letter-spacing: -.02em; } .stat-sub { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .buckets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 14px; } .bucket { padding: 11px 13px; border-radius: var(--r-sm); background: var(--surface-2); border-left: 3px solid var(--bk, var(--rule)); } .bucket-lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .bucket-val { font-family: "Inter Tight", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.2; margin-top: 2px; } .bucket-sub { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } /* ---------- Tables ---------- */ .tbl-scroll { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.data th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 12px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; background: var(--surface-2); } table.data th.n, table.data td.n { text-align: right; font-variant-numeric: tabular-nums; } table.data td { padding: 8px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; } table.data tbody tr:hover { background: var(--surface-2); } table.data tbody tr:last-child td { border-bottom: 0; } th.sortable { cursor: pointer; user-select: none; } th.sortable:hover { color: var(--ink); } th.sortable[data-dir]::after { content: attr(data-arrow); margin-left: 4px; color: var(--accent); } .term { font-weight: 500; } .tag { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; margin-left: 7px; background: var(--link-soft); color: var(--link); vertical-align: 1px; } .url { font-size: 11.5px; color: var(--ink-2); word-break: break-word; max-width: 400px; display: block; } .url b { color: var(--ink); font-weight: 600; } .pos-chip { display: inline-block; min-width: 38px; text-align: center; padding: 2px 7px; border-radius: var(--r-sm); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11.5px; border: 1px solid transparent; } .pos-1 { background: var(--good-soft); color: var(--good-ink); border-color: color-mix(in srgb, var(--good) 35%, transparent); } .pos-2 { background: var(--warn-soft); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn) 42%, transparent); } .pos-3 { background: var(--serious-soft); color: var(--serious-ink); border-color: color-mix(in srgb, var(--serious) 42%, transparent); } .pos-4 { background: var(--crit-soft); color: var(--crit-ink); border-color: color-mix(in srgb, var(--crit) 32%, transparent); } .bar-cell { display: flex; align-items: center; gap: 9px; min-width: 132px; } .bar-track { flex: 1; height: 8px; background: var(--surface-3); border-radius: 5px; overflow: hidden; } .bar-fill { display: block; height: 100%; border-radius: 5px; } .bar-num { font-variant-numeric: tabular-nums; font-size: 11.5px; width: 44px; text-align: right; color: var(--ink-2); font-weight: 600; } /* ---------- Read / callout ---------- */ .read { display: grid; grid-template-columns: 4px minmax(0,1fr); gap: 15px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); } .read-stripe { background: var(--fam, var(--accent)); } .read-body { padding: 15px 17px 16px 2px; } .read h3 { font-size: 15.5px; margin: 0 0 8px; } .read p { margin: 0 0 9px; max-width: 70ch; color: var(--ink-2); } .read p:last-child { margin-bottom: 0; } .read strong { color: var(--ink); font-weight: 600; } /* ---------- Locations ---------- */ .locs { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .loc { padding: 14px 17px; border-right: 1px solid var(--hairline); } .loc:last-child { border-right: 0; } .loc-name { font-weight: 600; font-size: 12.5px; } .loc-addr { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .loc-state { margin-top: 11px; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--warn-ink); font-weight: 500; } .dot-warn { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; } .note { font-size: 11.5px; color: var(--muted); padding: 12px 17px; border-top: 1px solid var(--hairline); background: var(--surface-2); border-radius: 0 0 var(--r-md) var(--r-md); } .note b { color: var(--ink-2); font-weight: 600; } .note.empty { border-top: 0; border-radius: 0; background: var(--surface); padding: 20px 17px; font-size: 13px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media (max-width: 1320px) { .facets { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 1120px) { .gridwrap { grid-template-columns: 1fr; } .mapcol { max-width: 440px; } .gstats { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (max-width: 1020px) { .stats { grid-template-columns: repeat(3, 1fr); } .buckets { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 940px) { .app { grid-template-columns: 1fr; } .rail { border-right: 0; border-bottom: 1px solid var(--hairline); } .kpis { grid-template-columns: repeat(2, 1fr); } .kpi:nth-child(2) { border-right: 0; } .kpi:nth-child(1), .kpi:nth-child(2) { border-bottom: 1px solid var(--hairline); } .stats, .buckets, .facets { grid-template-columns: repeat(2, 1fr); } .wrap { padding: 18px 14px 50px; } .topbar, .tabs, .secnav { padding-left: 14px; padding-right: 14px; } .gstats { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ========================================================================== WGO brand overrides. Matches whitegloveorthodontist.com: near-black text and buttons, a violet accent, white surfaces. Appended rather than edited into the tokens above so the original palette stays readable and one block can be swapped if the brand moves. ========================================================================== */ :root{ --ink: #111114; --ink-2: #4b4b57; --muted: #86868f; --surface: #ffffff; --surface-2: #f7f7fa; --surface-3: #ecebf3; --hairline: #e8e7ef; --rule: #cfced9; --accent: #5b3df5; --accent-ink: #4429d0; --accent-soft: #efecff; --link: #5b3df5; /* Section families, pulled toward the violet so six colours still read as one palette rather than a rainbow. */ --f1: #3d7a6e; --f1s: #e8f2f0; --f2: #4a54c9; --f2s: #ecedfb; --f3: #7b3fa0; --f3s: #f3ebf8; --f4: #8a6532; --f4s: #f6f0e6; --f5: #4f5666; --f5s: #eef0f4; --f6: #b4531f; --f6s: #fbeee7; } html[data-theme="dark"]{ --ink:#f2f2f5; --ink-2:#b6b6c4; --surface:#16161c; --surface-2:#0f0f14; --surface-3:#23232e; --hairline:#2a2a36; --rule:#3d3d4d; --accent-soft:#241b45; } /* The section badges carry white numerals on a family colour. In light the family colours are deep and white reads at 5:1 or better. In dark they flip to pastels and white drops to 2.0 to 2.5:1, so the numbers all but vanish. Scoped to dark so light is untouched. */ :root[data-theme="dark"] .famrule .fam-n, :root[data-theme="dark"] .navgroup-lbl .ng-n, :root[data-theme="dark"] .play-fam i, :root[data-theme="dark"] .chip[aria-pressed="true"], :root[data-theme="dark"] .seg button[aria-pressed="true"]{ color: var(--page); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .famrule .fam-n, :root:not([data-theme="light"]) .navgroup-lbl .ng-n, :root:not([data-theme="light"]) .play-fam i, :root:not([data-theme="light"]) .chip[aria-pressed="true"], :root:not([data-theme="light"]) .seg button[aria-pressed="true"]{ color: var(--page); } } /* Primary actions are black, the way they are on the site. The violet is for links and section colour, not for buttons. */ /* The label is var(--page), not #fff. --ink flips to a near-white in dark mode, so a fixed white label left every primary button in the product at 1.11:1 contrast: legible in light, invisible in dark. --page is --ink's opposite in both themes, so the pair reads either way. */ .primary, .connect{ background: var(--ink) !important; border-color: var(--ink) !important; color: var(--page) !important; border-radius: 999px !important; padding: 11px 24px !important; letter-spacing: -.005em; } .primary:hover:not(:disabled), .connect:hover{ background:#2a2a33 !important; } .ghost{ border-radius:999px !important; padding:11px 22px !important; } .chip, .kw{ border-radius:999px; } /* The site leads with very heavy, tight headlines. */ h1,h2,h3,.brandmark,.big,.stat-val,.kpi-value{ font-family:"Inter Tight",ui-sans-serif,system-ui,sans-serif; font-weight:700; letter-spacing:-.025em; } /* The site sets its h1 at 800 with about -.03em. Matching it is the difference between looking like the same company and looking like a tool somebody bolted on. */ h1{ font-weight:800; letter-spacing:-.03em; } .step.on .dot{ background:var(--ink); border-color:var(--ink); } .step.done .dot{ background:var(--good); border-color:var(--good); } /* Finding cards. Shared, because the onboarding report and the dashboard action plan render the same markup and should look the same. */ .act{display:grid;grid-template-columns:4px 1fr;gap:15px;background:var(--surface); border:1px solid var(--hairline);border-radius:9px;overflow:hidden;margin-bottom:11px} .act>i{background:var(--sc,var(--rule))} .act .ab{padding:15px 18px 16px 0} .act .am{display:flex;gap:10px;align-items:center;margin-bottom:6px;flex-wrap:wrap} .act .rk{font-family:"Inter Tight",sans-serif;font-size:12px;font-weight:700;color:var(--muted)} .act .sv{font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:5px} .act .sv em{width:8px;height:8px;border-radius:2px;display:block;font-style:normal} .sv-crit{color:var(--crit-ink)}.sv-crit em{background:var(--crit)} .sv-warn{color:var(--warn-ink)}.sv-warn em{background:var(--warn)} .sv-info{color:var(--ink-2)}.sv-info em{background:var(--rule)} .act .sp{font-size:11.5px;color:var(--muted)} .act h3{font-size:15px;margin:0 0 5px;font-family:"Inter Tight",sans-serif; font-weight:700;letter-spacing:-.02em} .act p{margin:0;color:var(--ink-2);max-width:74ch} .act .dothis{margin-top:10px;padding-top:9px;border-top:1px solid var(--hairline); font-size:12.5px;color:var(--ink-2)} .act .dothis b{color:var(--ink)} /* ========================================================================== Overflow safety. Grid and flex children default to a minimum width of their content, so a long practice name or URL pushes past the edge instead of wrapping. This is the fix, plus wrapping for single long tokens. ========================================================================== */ *{min-width:0} p,li,h1,h2,h3,.lede,.hint,.howto li,.addon .ad,.prop-name,.prop-domain{ overflow-wrap:anywhere} /* Table cells get break-word, not anywhere. `anywhere` also shrinks a cell's intrinsic minimum width, which lets a column collapse to almost nothing and then shatters the text inside it: "Orthodonti / cs", "4.3 a mont / h", "3 day / s ago". `break-word` still breaks a word that genuinely cannot fit, such as a long domain, but it does not invite the column to collapse in the first place. A table that ends up wider than its box scrolls, which is what .tbl-scroll is for. */ td,th{overflow-wrap:break-word} a{word-break:break-word} input,select{max-width:100%} .tbl-scroll,.tw{overflow-x:auto;-webkit-overflow-scrolling:touch} img{max-width:100%;height:auto} .btn,.primary,.ghost,.connect{white-space:normal;line-height:1.3} @media(max-width:600px){ .ctarow,.row,.twoup{flex-direction:column;align-items:stretch} .ctarow button,.row button,.row .btn{width:100%;text-align:center} .addons,.covers,.plans{grid-template-columns:1fr} .steps{flex-wrap:wrap;gap:6px} .steps .bar{display:none} .step{font-size:11.5px} .top .who{margin-left:0;width:100%;text-align:left;margin-top:6px} .top{flex-wrap:wrap} } @media(max-width:400px){ .lockup b{font-size:14px} .logo{width:34px;height:34px} } /* -------------------------------------------------------------------------- Tables on a phone. Measured on an iPhone-width viewport: nine tables in one report ran 344 to 745 pixels inside a 327 pixel column, so most of every table sat off screen behind a sideways swipe with nothing to say it was there. The data was never the problem. The headers were. `white-space: nowrap` plus uppercase plus .08em tracking turned "Average of those" into a 148 pixel column holding the value 4.87, and "Referring domains" into 156 pixels holding 78. Letting the headers wrap fixed the width and produced something worse: seven columns sharing 327 pixels is 46 pixels each, so "Orthodontics" broke as "Orthodont / ics" and "3 days ago" as "3 day / s ago". Seven columns do not belong on a phone at any font size. So below 560px a table stops being a table. Each row becomes a card, each cell a label and a value on one line, with the first cell as the heading. Nothing scrolls sideways and nothing is hidden. The markup is identical; only the display changes, so the desktop table is untouched. -------------------------------------------------------------------------- */ @media (max-width: 560px){ table.data, table.data tbody, table.data tr, table.data td{ display:block; width:100%; } table.data thead{display:none} /* the labels move into the cells */ table.data{font-size:13px; border-collapse:separate} table.data tr{ border:1px solid var(--hairline); border-radius:8px; margin:0 0 8px; padding:2px 0; background:var(--surface); } table.data tbody tr:hover{background:var(--surface)} /* flex-wrap matters: a long value drops onto its own line under the label instead of pushing the card wider than the screen. */ table.data td{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 14px; text-align:right; padding:6px 12px; border:0; } /* The header text, carried on the cell by tbl(). */ table.data td[data-l]:not([data-l=""])::before{ content:attr(data-l); color:var(--muted); font-weight:500; text-align:left; flex:0 1 auto; font-size:12px; } /* First cell is the row's name, so it reads as the card's title. Specificity has to beat the rule above, which is why the attribute selectors are repeated here rather than left off. */ table.data td:first-child{ display:block; text-align:left; font-weight:600; font-size:13.5px; padding:9px 12px 8px; border-bottom:1px solid var(--hairline); margin-bottom:3px; } table.data td:first-child[data-l]:not([data-l=""])::before{content:none} table.data td:first-child::before{content:none} table.data td:last-child{padding-bottom:9px} /* A blank cell under a blank header is an empty row with padding. As a column it was invisible; as a card line it is a gap. */ table.data td:empty{display:none} /* A bar or a pill still has to sit inside 327px. */ table.data td .bar,table.data td .barwrap{max-width:55%} } /* Whatever is left over still scrolls, so say so rather than letting people assume the column they cannot see does not exist. Added by script only when the table actually overflows, so it never lies. */ .tbl-scroll{position:relative} .tbl-hint{font-size:11.5px;color:var(--muted);margin:6px 2px 0; display:flex;align-items:center;gap:6px} .tbl-hint::before{content:"\2194";font-size:13px;line-height:1} @media (min-width: 561px){ .tbl-hint{display:none} } /* ========================================================================== Site footer. Google's OAuth review checks that the privacy policy is reachable from the application itself, not only from a URL pasted into the console. It is also simply what a paid product should have. ========================================================================== */ .sitefoot{border-top:1px solid var(--hairline);margin-top:48px;padding:22px 0 10px; font-size:12px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap; align-items:center} .sitefoot a{color:var(--ink-2);text-decoration:none} .sitefoot a:hover{color:var(--ink);text-decoration:underline} .sitefoot .sep{opacity:.4} .sitefoot .grow{flex:1} .sitefoot .build{margin:0;font-size:11px;letter-spacing:.04em} @media(max-width:600px){.sitefoot{gap:10px}.sitefoot .grow{display:none}} /* Locked sections. Same reasoning as the dashboard: a grid rather than absolute positioning, so the container is as tall as the prompt and nothing overflows into the panel above. */ .lockwrap{display:grid;overflow:hidden;border-radius:7px;min-height:200px} .lockwrap > *{grid-area:1 / 1} .lockblur{filter:blur(4px);opacity:.4;pointer-events:none;user-select:none; overflow:hidden} .lockover{display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;gap:12px;padding:26px 22px;min-width:0} .lockover h3{margin:0;font-size:16px;line-height:1.3} .lockover p{margin:0;color:var(--ink-2);max-width:46ch;font-size:12.5px; overflow-wrap:anywhere} /* ========================================================================== The report on a phone. Measured on an emulated iPhone at 375x812 and 320x640. Nothing here was an overflow problem: the panels, tables and the map grid all fit. What was wrong was the sticky chrome, and it was wrong because its offsets were written as constants that only happen to be true on a desktop. The topbar is 58px tall on a desktop. On a phone its title, account line and five buttons wrapped onto three rows and it measured 147px, while .secnav stayed pinned at top:58px with a lower z-index than the topbar. The entire six-section nav pinned *inside* the header and disappeared behind it: hit-testing every point across it returned the topbar. The panel headings at top:98px lost their first 49px the same way, and scroll-margin-top:112px left every anchor jump 35px under the header. Two changes. The offsets now come from --topbar-h and --stick, which are measured at runtime (see setStick() in the dashboard script), so they are right at any width and after any wrap. And the topbar itself is folded down to one row on a phone, so the chrome stops eating a fifth of the screen before content starts. ========================================================================== */ .secnav{ top: var(--topbar-h, 58px) } /* The nav is 1440px of links in a 375px window, so most of it is off screen. It cannot be made to fit, so make it obvious that it moves: a fade on the edge that has more behind it, and the script keeps the current section's link scrolled into the middle as you read. */ .secnav{ scroll-behavior: smooth } @media (max-width: 940px){ .secnav{ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 26px), transparent 100%); } /* The mask would clip the first link's focus ring flush to the edge. */ .secnav .navgroup:first-child{ padding-left: 4px } } @media (max-width: 700px){ /* One row: the report's name, then everything else behind a menu. The buttons are moved rather than rebuilt, so #runBtn, #stopBtn, #acct and #runPicker keep their ids and the renderers that target them are untouched. */ .topbar{ flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px 14px } .topbar h1{ font-size: 16px; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topmenu{ position: relative; flex: none } .topmenu > summary{ display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 13px; cursor: pointer; user-select: none; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px; list-style: none; } .topmenu > summary::-webkit-details-marker{ display: none } .topmenu > summary::marker{ content: "" } .topmenu[open] > summary{ border-color: var(--rule); color: var(--ink) } .topmenu-bars{ width: 15px; height: 11px; flex: none; position: relative; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; } .topmenu-bars::after{ content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; transform: translateY(-50%); } .topmenu-items{ display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 218px; padding: 6px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 14px 30px -14px rgba(11,27,50,.4); } .topmenu-items > button, .topmenu-items > a{ width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font-size: 14px; text-align: left; display: flex; align-items: center; text-decoration: none; } .topmenu-items > button:hover, .topmenu-items > a:hover{ background: var(--surface-2); color: var(--ink) } /* The account line is a label, not a control. */ .topmenu-items > .acct{ white-space: normal; text-align: left; margin: 0; padding: 8px 12px 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; line-height: 1.4; } .topmenu-items > #runPicker{ padding: 4px 8px } .topmenu-items > #runPicker select{ width: 100%; font-size: 16px } } @media (max-width: 940px){ /* The rail is full width here, so the wordmark has about 290px to sit in and still broke onto two lines: the break is a
in the markup, put there for the 200px sidebar it no longer is. */ .brandmark br{ display: none } .brandmark{ font-size: 16px } } /* -------------------------------------------------------------------------- Touch targets and type. 44px is the floor for anything hit with a thumb. These were 29 to 34px and were noted and left alone in the September sweep because widening them changes the density of the whole interface; the change is scoped to phones, so the desktop density is untouched. -------------------------------------------------------------------------- */ @media (max-width: 700px){ .secnav a{ min-height: 44px; display: inline-flex; align-items: center; padding: 4px 11px 8px; font-size: 13.5px } .ghost-btn, .chip, .kw, .pbtn, .btn, .connect{ min-height: 44px } .chip, .kw{ display: inline-flex; align-items: center } .sitefoot a{ display: inline-flex; align-items: center; min-height: 44px } .sitefoot{ gap: 4px 16px } /* Nothing under 12px on a phone. The smallest here were the section numbers in the nav at 9px and the rail labels at 10.5. */ .brand-sub, .rail-label, .prop-domain, .fam-tag, .navgroup-lbl, .nav-cnt, .fam-n, .ng-n, .stat-lbl, .stat-sub, .panel-head .sub, .tbl-hint{ font-size: 12px } .navgroup-lbl .ng-n{ width: 16px; height: 16px; font-size: 10.5px } } /* ---------- section nav that fits the screen ---------- Six families and seventeen sections are about 1,570px wide. Hidden-scrollbar overflow is fine with a thumb on a phone, but with a mouse there is no way to reach what is cut off. Off the phone, the families wrap onto a second row instead, so every section is always on screen. The sticky offsets are measured (setStick), so a taller nav still pins the panel headings right. */ @media (min-width: 701px){ .secnav{ flex-wrap: wrap; overflow-x: visible; row-gap: 2px; -webkit-mask-image: none; mask-image: none; } .navgroup{ padding: 0 8px } .navgroup:first-child{ padding-left: 0 } .navgroup:last-child{ padding-right: 8px } .secnav a{ padding-left: 8px; padding-right: 8px } } /* ---------- section nav on a phone ---------- A 1,600px row behind a 375px window meant swiping blind for one of seventeen sections. On a phone the bar is one button naming where you are; tapping it opens every section, grouped, as a list of full-width rows. */ .secnav-phone{ display: none } @media (max-width: 700px){ .secnav{ flex-direction: column; flex-wrap: nowrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0 14px; } .secnav-phone{ display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 6px 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left; } .secnav-phone .ng-n{ display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; flex: none; background: var(--fam, var(--accent)); color: #fff; font-size: 12px; font-weight: 700; } .secnav-phone .sp-fam{ font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fam, var(--muted)); white-space: nowrap } .secnav-phone .sp-sec{ font-size: 15px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .secnav-phone .sp-all{ flex: none; font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; min-height: 36px; display: inline-flex; align-items: center; gap: 6px } .secnav-phone .sp-all::after{ content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s } .secnav.open .secnav-phone .sp-all::after{ transform: rotate(-135deg); margin-top: 3px } .secnav .navgroup{ display: none } .secnav.open{ max-height: calc(100dvh - var(--topbar-h, 58px)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 10px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.35) } .secnav.open .navgroup{ display: block; border-right: 0; padding: 8px 0 4px; border-top: 1px solid var(--hairline); } .secnav.open .navgroup:first-of-type{ padding-left: 0 } .secnav.open .navgroup-lbl{ padding: 2px 0 4px } .secnav.open .navgroup-links{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px } .secnav.open a{ border: 1px solid var(--hairline); border-radius: 10px; margin: 0; padding: 8px 12px; min-height: 44px; font-size: 14.5px; color: var(--ink); white-space: normal } .secnav.open a.on{ border-color: var(--fam) } } @media (max-width: 380px){ /* The number already carries the family's colour; the section name needs the room. */ .secnav-phone .sp-fam{ display: none } }