/*
* 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: oklch(0.81 0.085 190);
color: oklch(0.13 0.018 250);
font: 500 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 */
}
/* ============================================
PHASE 4 — "What this means" interpretation blocks
============================================ */
.wtm-block {
padding: 22px 28px;
border-left: 3px solid var(--line-soft);
border-radius: 0 10px 10px 0;
background: var(--bg-elev);
margin: 0;
transition: border-color 0.2s ease;
}
.wtm-block[data-wtm-state="ok"] { border-left-color: var(--ok, #4ade80); }
.wtm-block[data-wtm-state="bad"] { border-left-color: var(--err, #f87171); }
.wtm-block[data-wtm-state="warn"] { border-left-color: var(--warn, #fbbf24); }
.wtm-eyebrow {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-2);
margin: 0 0 6px;
}
.wtm-block[data-wtm-state="ok"] .wtm-eyebrow { color: var(--ok, #4ade80); }
.wtm-block[data-wtm-state="bad"] .wtm-eyebrow { color: var(--err, #f87171); }
.wtm-block[data-wtm-state="warn"] .wtm-eyebrow { color: var(--warn, #fbbf24); }
.wtm-headline {
font-size: 1.1rem;
font-weight: 500;
margin: 0 0 10px;
color: var(--fg-0);
}
.wtm-body {
color: var(--fg-1);
margin: 0 0 10px;
line-height: 1.6;
}
.wtm-next {
font-size: 0.9rem;
color: var(--fg-2);
margin: 0;
padding-left: 14px;
border-left: 2px solid var(--line-soft);
line-height: 1.5;
}
/* ============================================
PHASE 7 — /ip/{address} pages
============================================ */
.ip-hero-section {
padding: clamp(32px, 5vw, 56px) 0 28px;
border-bottom: 1px solid var(--line-soft);
}
.ip-hero-inner { max-width: 860px; }
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
list-style: none;
margin: 0 0 20px;
padding: 0;
font-size: 0.85rem;
color: var(--fg-2);
}
.breadcrumb a { color: var(--acc); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.ip-hero-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.t-eyebrow {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-2);
margin: 0 0 6px;
}
.ip-address-display {
font-size: clamp(1.6rem, 4vw, 2.6rem);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 4px;
font-family: var(--mono);
color: var(--fg-0);
}
.ip-label-text {
color: var(--fg-2);
margin: 0;
font-size: 1rem;
}
.ip-type-badge { font-size: 12px; flex-shrink: 0; margin-top: 8px; }
.ip-fact-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.ip-fact-grid > div {
background: var(--bg-elev);
border: 1px solid var(--line-soft);
border-radius: 8px;
padding: 12px 14px;
}
.ip-fact-grid dt {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--fg-2);
margin-bottom: 4px;
}
.ip-fact-grid dd {
margin: 0;
font-family: var(--mono);
font-size: 0.9rem;
color: var(--fg-0);
word-break: break-all;
}
.ip-cta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ip-what-section { padding: clamp(28px, 4vw, 48px) 0; }
.ip-what-inner { max-width: 780px; }
.ip-what-inner h2 { margin-top: 0; font-weight: 500; }
.ip-what-body { color: var(--fg-1); line-height: 1.7; font-size: 1.05rem; }
.ip-notes-block {
background: var(--bg-elev);
border-left: 3px solid var(--acc);
border-radius: 0 8px 8px 0;
padding: 14px 18px;
margin-top: 20px;
}
.ip-notes-block .t-eyebrow { color: var(--acc); }
.ip-notes-block p:last-child { margin: 0; color: var(--fg-1); line-height: 1.6; }
.ip-tools-section { padding: clamp(24px, 4vw, 44px) 0; border-top: 1px solid var(--line-soft); }
.ip-tools-section h2 { font-weight: 500; margin-top: 0; }
.ip-tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
margin-top: 18px;
}
.ip-tool-card {
display: block;
padding: 16px 18px;
background: var(--bg-elev);
border: 1px solid var(--line-soft);
border-radius: 10px;
text-decoration: none;
transition: border-color 0.15s;
}
.ip-tool-card:hover { border-color: var(--acc); }
.ip-tool-card strong { display: block; color: var(--fg-0); margin-bottom: 4px; }
.ip-tool-card span { display: block; font-size: 0.88rem; color: var(--fg-2); line-height: 1.4; }
.ip-faq-section { padding: clamp(24px, 4vw, 44px) 0; border-top: 1px solid var(--line-soft); }
.ip-faq-section h2 { font-weight: 500; margin-top: 0; }
.ip-faq-list { display: grid; gap: 10px; max-width: 780px; }
.ip-faq-item {
background: var(--bg-elev);
border: 1px solid var(--line-soft);
border-radius: 8px;
padding: 14px 18px;
}
.ip-faq-item summary {
cursor: pointer;
font-weight: 500;
color: var(--fg-0);
list-style: none;
}
.ip-faq-item summary::-webkit-details-marker { display: none; }
.ip-faq-item[open] summary { margin-bottom: 10px; color: var(--acc); }
.ip-faq-item p { margin: 0; color: var(--fg-1); line-height: 1.6; }
.ip-related-section { padding: clamp(24px, 4vw, 44px) 0; border-top: 1px solid var(--line-soft); }
.ip-related-section h2 { font-weight: 500; margin-top: 0; }
.ip-related-section p { color: var(--fg-2); margin-bottom: 16px; }
@media (max-width: 600px) {
.ip-hero-head { flex-direction: column; }
.ip-address-display { font-size: 1.6rem; }
.ip-fact-grid { grid-template-columns: 1fr 1fr; }
.ip-tools-grid { grid-template-columns: 1fr; }
}
/* font-weight cap: style.css uses 520 in phase5/phase6 components — clamp to 500 */
.phase5-platform-panel h3,
.phase5-intent-summary h2,
.phase5-intent-hero h1,
.phase5-intent-card h2,
.phase6-b2b-head h2,
.phase6-safe-client-card h3 {
font-weight: 500;
}