/*
* MyIPScan Design Fixes
* Generated by audit 2026-06-11
* Apply by adding:
* to of every page, AFTER the main /assets/style.css
* These are all additive overrides — original styles.css is unchanged.
*
* NOTE: this file fixes internal-consistency issues of the shipped dark
* design system. It deliberately does NOT attempt the "Field Notes"
* (cream/brown) retheme — see DESIGN-UX-AUDIT.md, Finding Zero.
*/
/* ============================================
CRITICAL FIXES
============================================ */
/* C-6: define the missing --fg token referenced by style.css:763,11348
and by inline styles on dns-lookup / base64 / qr-code pages */
:root {
--fg: var(--fg-0);
}
/* B-1: DNS Lookup submit button (#go) has no rule anywhere — renders as a
native OS button. Give it the site's primary button treatment. */
#go {
min-height: 44px;
border: 1px solid var(--acc);
border-radius: 999px;
padding: 0 22px;
background: linear-gradient(180deg, oklch(0.88 0.085 190) 0%, oklch(0.74 0.085 190) 100%);
color: oklch(0.13 0.018 250);
font: 600 14px/1 var(--ui);
cursor: pointer;
transition: transform 0.12s ease, filter 0.15s ease;
}
#go:hover { transform: translateY(-1px); filter: brightness(1.03); }
#go:active { transform: translateY(1px); }
/* S-7: restore the three dead classes used by tools/dns-lookup.html
(p.hero, ul.inline, .tool-cta-block) whose support CSS was deleted */
p.hero {
color: var(--fg-2);
font-size: 18px;
line-height: 1.65;
max-width: 70ch;
}
ul.inline { padding-left: 18px; }
ul.inline li { margin-bottom: 6px; }
.tool-cta-block {
background: var(--bg-elev);
border-left: 3px solid var(--acc);
border-radius: 8px;
padding: 14px 16px;
margin: 24px 0;
}
.tool-cta-block ul { margin: 0; padding-left: 0; list-style: none; }
.tool-cta-block li { padding: 4px 0; }
.tool-cta-block a { color: var(--acc); }
/* M-1: inputs with inline font-size:15px trigger iOS Safari auto-zoom.
!important is required to beat the inline style; remove once the
inline styles are deleted (see design-fixes-html.md). */
@media (max-width: 640px) {
input[style*="font-size:15px"],
select[style*="font-size:15px"] { font-size: 16px !important; }
}
/* ============================================
HIGH PRIORITY FIXES
============================================ */
/* B-5: disabled buttons currently look fully active */
.btn:disabled,
.btn[aria-disabled="true"],
#go:disabled {
opacity: 0.6;
cursor: wait;
transform: none !important;
box-shadow: none;
filter: none;
}
/* S-1: header (1240px) and content (1200px) containers don't align */
.topnav-inner { max-width: 1200px; }
.container { width: min(1200px, calc(100% - 40px)); }
/* S-4: orphaned 280px sticky rail next to a deliberately empty column on
5 utility pages (dns-lookup, base64, calculator, json, qr).
Collapse to a single full-width column when the left cell is empty. */
.rail-grid:has(> div:empty) {
grid-template-columns: 1fr !important;
}
.rail-grid:has(> div:empty) > div:empty { display: none; }
.rail-grid:has(> div:empty) aside {
position: static !important;
max-width: 560px;
}
/* M-5: 70px dead bottom padding on every mobile page; the sticky bar it
compensates for is not present in any audited page's markup */
@media (max-width: 640px) {
body { padding-bottom: 0; }
body:has(.sticky-mobile) { padding-bottom: 70px; }
}
/* B-3: 44px touch targets on coarse pointers */
@media (pointer: coarse) {
.btn { min-height: 44px; }
.btn-sm, .copy-btn { min-height: 44px; }
.topnav nav a,
.topnav nav button {
min-height: 42px;
display: inline-flex;
align-items: center;
}
}
/* ============================================
MEDIUM PRIORITY FIXES
============================================ */
/* C-5: unify the four different "pass" greens onto the --ok token */
.status-badge.status-ok {
color: var(--ok);
border-color: oklch(0.78 0.13 145 / 0.34);
background: oklch(0.78 0.13 145 / 0.08);
}
/* G-2: visible activity indicator while a tool is running.
Pairs with the existing aria-busy attributes set by tool JS. */
.result-box[aria-busy="true"],
.webrtc-result-box[aria-busy="true"] {
position: relative;
}
.result-box[aria-busy="true"]::after,
.webrtc-result-box[aria-busy="true"]::after {
content: "";
position: absolute;
top: 14px;
right: 14px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--acc-line);
border-top-color: var(--acc);
animation: mips-spin 0.7s linear infinite;
}
@keyframes mips-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.result-box[aria-busy="true"]::after,
.webrtc-result-box[aria-busy="true"]::after { animation: none; opacity: 0.6; }
}
/* T-2: raise sub-12px data labels to a readable floor */
.t-label { font-size: 12px; }
.lookup-kv dt { font-size: 11px; }
.status-badge { font-size: 12px; }
/* T-4: don't force 120px min cell width onto every table at mobile size;
keep it only for the wide comparison tables that need scroll room */
@media (max-width: 640px) {
th, td { min-width: 0; }
.myipscan-comparison-table th,
.myipscan-comparison-table td { min-width: 110px; }
}
/* ============================================
LOW PRIORITY FIXES
============================================ */
/* K-1: unmistakable focus ring on form fields for all input modalities */
input:focus,
select:focus,
textarea:focus {
border-color: var(--acc);
outline: 2px solid oklch(0.78 0.08 185 / 0.28);
outline-offset: 1px;
}
/* DS-6: stylesheet support for the italic heading device, so pages
can drop the inline-styled (faq/index.html:72) */
h1 em,
h2 em {
font-style: italic;
color: var(--acc);
font-weight: inherit;
}
/* G-1 (belt-and-braces): if a page still ships the status-warn initial
badge, neutralize it until JS runs. Harmless once HTML is fixed. */
[data-webrtc-state].status-warn:not([data-has-run]) {
/* no-op hook left intentionally; real fix is in design-fixes-html.md */
}