/* ===== BALLAST THEME TOKENS ===== Light is :root; dark is [data-theme="dark"] (set on before first paint by the bootstrap script api.py injects into ). ballast.css loads LAST, so these :root tokens override any same-named tokens templates define locally. Dark palette follows the Echelon brand: primary-dark #1a1f2e family backgrounds, cream #f5f3eb text (never pure white body text, never pure black bg), gold #c4a962 unchanged as the accent. */ :root{ color-scheme:light; --bg:#fafafa; --card:#ffffff; --surface:#f4f4f5; --surface-2:#f8f8f8; --border:#e4e4e7; --border-soft:#f0f0f0; --text:#18181b; --text-2:#27272a; --heading:#1a1f2e; --muted:#71717a; --subtle:#6b7280; /* UX-AUDIT 2026-06-13: --faint was #a1a1aa (2.56:1 on white = fails WCAG AA) yet it carries information (table headers, units, timestamps). Raised to 4.83:1. */ --faint:#6b7280; --disabled:#d4d4d8; --gold:#c4a962; --gold-dim:rgba(196,169,98,0.10); --gold-border:rgba(196,169,98,0.30); /* UX-AUDIT 2026-06-13: gold as TEXT on light is 2.28:1 (fails AA). Use --gold-text (the Echelon bronze, 5.09:1) wherever gold styles informational text on a light surface; keep --gold for fills, borders, the wordmark, and dark-bg text. */ --gold-text:#8b6914; --green:#16a34a; --green-2:#22c55e; --green-bg:#f0fdf4; --green-border:#bbf7d0; --green-text:#15803d; --green-deep:#166534; --red:#dc2626; --red-2:#b91c1c; --red-bg:#fef2f2; --red-border:#fecaca; --amber:#d97706; --amber-2:#f59e0b; --amber-bg:#fffbeb; --amber-border:#fde68a; --amber-deep:#92400e; --amber-chip:#fef3c7; --blue:#3b82f6; --indigo-bg:#eef2ff; --indigo-text:#4338ca; --btn-bg:#1c1917; --btn-bg-hover:#000000; --btn-text:#ffffff; --input-bg:#fcfcfb; --nav-bg:rgba(255,255,255,0.92); --hover-fill:rgba(0,0,0,0.04); --chart-grid:rgba(0,0,0,0.05); --tooltip-bg:#18181b; --shadow:0 8px 24px rgba(0,0,0,0.15); --shadow-soft:0 10px 40px rgba(0,0,0,0.05); --nav-shadow:0 2px 8px rgba(26,31,46,0.07); } [data-theme="dark"]{ color-scheme:dark; --bg:#161b26; --card:#1f2533; --surface:#273043; --surface-2:#242c3c; --border:#323b4e; --border-soft:#2a3344; --text:#f5f3eb; --text-2:#f5f3eb; --heading:#f5f3eb; --muted:#a8aeba; --subtle:#99a0ae; /* UX-AUDIT 2026-06-13: was #717a8c (3.55:1 on dark card = fails AA). Now 4.9:1. */ --faint:#8a92a3; --disabled:#4b5365; --gold:#c4a962; --gold-dim:rgba(196,169,98,0.14); --gold-border:rgba(196,169,98,0.38); /* gold as text on dark already passes (6.71:1) — keep gold. */ --gold-text:#c4a962; --green:#4ade80; --green-2:#4ade80; --green-bg:rgba(34,197,94,0.12); --green-border:rgba(34,197,94,0.35); --green-text:#86efac; --green-deep:#86efac; --red:#f87171; --red-2:#f87171; --red-bg:rgba(239,68,68,0.12); --red-border:rgba(239,68,68,0.35); --amber:#fbbf24; --amber-2:#fbbf24; --amber-bg:rgba(245,158,11,0.12); --amber-border:rgba(245,158,11,0.35); --amber-deep:#fcd34d; --amber-chip:rgba(245,158,11,0.18); --blue:#60a5fa; --indigo-bg:rgba(99,102,241,0.16); --indigo-text:#a5b4fc; --btn-bg:#c4a962; --btn-bg-hover:#d4bd80; --btn-text:#1a1f2e; --input-bg:#171c28; --nav-bg:rgba(26,31,46,0.92); --hover-fill:rgba(255,255,255,0.05); --chart-grid:rgba(255,255,255,0.07); --tooltip-bg:#0d1118; --shadow:0 8px 24px rgba(0,0,0,0.5); --shadow-soft:0 10px 40px rgba(0,0,0,0.35); --nav-shadow:0 4px 14px rgba(0,0,0,0.45); } /* ===== BASE (tokenized) ===== */ *,*::before,*::after{box-sizing:border-box;} html{background:var(--bg);} body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:13px;line-height:1.5;transition:background .2s,color .2s;} nav{position:sticky;top:0;z-index:999;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:56px;gap:16px;} /* DS 2026-07-02: slight grey falloff under the nav's 1px border — dedicated --nav-shadow token (NOT --shadow/--shadow-soft, which brain/company/globe re-scope to a heavy 24px blur on the nav); tight offset, no spread, no glow, mirrored for dark. */ nav{box-shadow:var(--nav-shadow);} .nav-brand{font-family:'Cormorant Garamond',serif;font-size:18px;letter-spacing:5px;color:var(--gold);font-weight:300;text-decoration:none;white-space:nowrap;flex-shrink:0;} /* UX-AUDIT 2026-06-13: was scrollbar-width:none + hidden webkit bar — items clipped silently on narrow laptops with no affordance. Show a slim scrollbar when the row actually overflows, so hidden destinations are discoverable. */ .nav-links{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--border) transparent;} .nav-links::-webkit-scrollbar{height:4px;} .nav-links::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;} .nav-link{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:2px;white-space:nowrap;border:none;background:transparent;font-family:'Inter',sans-serif;cursor:pointer;transition:color .2s,background .2s;} .nav-link:hover{color:var(--text);background:var(--hover-fill);} .nav-link.active{color:var(--gold-text);background:var(--gold-dim);border:1px solid var(--gold-border);padding:5px 9px;} .nav-link.disabled{color:var(--disabled)!important;cursor:default!important;pointer-events:none!important;background:transparent!important;border:none!important;} .nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0;} .live-dot{width:6px;height:6px;border-radius:50%;background:var(--green-2);display:inline-block;margin-right:4px;animation:bpulse 2s infinite;} @keyframes bpulse{0%,100%{opacity:1}50%{opacity:.4}} .nav-pill{font-size:10px;color:var(--muted);letter-spacing:1px;} .nav-dropdown{position:relative;display:inline-block;} .nav-dropdown-btn{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);background:transparent;padding:6px 10px;border-radius:2px;cursor:pointer;border:none;font-family:'Inter',sans-serif;display:inline-flex;align-items:center;gap:4px;transition:color .2s,background .2s;white-space:nowrap;} .nav-dropdown-btn:hover,.nav-dropdown-btn.adrop{color:var(--gold-text);background:var(--gold-dim);border:1px solid var(--gold-border);padding:5px 9px;} .nav-dropdown-btn::after{content:'▾';font-size:9px;} .nav-dropdown-menu{display:none;position:fixed;background:var(--card);border:1px solid var(--border);border-radius:2px;box-shadow:var(--shadow);min-width:180px;z-index:99999;overflow:hidden;} .nav-dropdown-menu.open{display:block!important;} .nav-dropdown-item{display:block;padding:10px 16px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text);text-decoration:none;transition:background .15s;white-space:nowrap;background:var(--card);} .nav-dropdown-item:hover{background:var(--surface);} .nav-dropdown-item.active{color:var(--gold-text);background:var(--gold-dim);} /* Theme toggle + account menu (mounted by ballast-auth.js) */ .ba-theme{background:none;border:none;border-radius:2px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);line-height:0;flex-shrink:0;transition:color .15s,background .15s;} .ba-theme:hover{color:var(--gold);background:var(--hover-fill);} .ba-theme.floating{position:fixed;top:14px;right:14px;z-index:1200;background:var(--card);border:1px solid var(--border);} .ba-acct{position:relative;flex-shrink:0;display:flex;align-items:center;} .ba-acct-btn{background:none;border:none;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;border-radius:50%;} .ba-avatar{width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font:500 12px 'Inter',sans-serif;transition:box-shadow .15s;} .ba-acct-btn:hover .ba-avatar,.ba-acct-btn[aria-expanded="true"] .ba-avatar{box-shadow:0 0 0 3px var(--gold-dim);} .ba-menu{position:absolute;right:0;top:calc(100% + 9px);min-width:210px;background:var(--card);border:1px solid var(--border);border-radius:2px;box-shadow:var(--shadow);padding:6px;display:none;z-index:1200;} .ba-menu.open{display:block;} .ba-menu-head{padding:8px 10px 10px;border-bottom:1px solid var(--border-soft);margin-bottom:4px;} .ba-menu-email{font:500 12.5px 'Inter',sans-serif;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:194px;} .ba-menu-role{font:400 10px 'Inter',sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-top:3px;} .ba-item{display:block;padding:8px 10px;border-radius:2px;text-decoration:none;color:var(--text);font:400 12.5px 'Inter',sans-serif;white-space:nowrap;transition:background .12s;} .ba-item:hover{background:var(--surface);} .ba-sep{height:1px;background:var(--border);margin:5px 8px;} /* Desktop: floating thumb button hidden */ .nav-burger{display:none;} /* ===== MOBILE NAV — floating thumb (bottom-right) button + pop-up panel ===== */ @media(max-width:768px){ /* backdrop-filter on nav would make it the containing block for the fixed FAB, pinning it to the nav instead of the viewport — disable it on mobile. */ nav{padding:0 16px; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;} .nav-right{margin-left:auto;} .nav-pill{display:none;} /* links collapse into a panel that opens just above the floating button */ .nav-links{ position:fixed; right:16px; bottom:84px; z-index:1001; display:none; flex-direction:column; align-items:stretch; gap:2px; width:auto; min-width:208px; max-height:72vh; overflow-y:auto; background:rgba(255,255,255,0.68); -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); border:1px solid rgba(228,228,231,0.55); border-radius:2px; box-shadow:0 12px 36px rgba(0,0,0,0.22); padding:8px; } [data-theme="dark"] .nav-links{ background:rgba(26,31,46,0.78); border:1px solid rgba(245,243,235,0.12); box-shadow:0 12px 36px rgba(0,0,0,0.6); } .nav-links.open{display:flex;} /* UX-AUDIT 2026-06-13: 44px minimum touch target (WCAG 2.5.8). */ .nav-link{width:100%; text-align:left; padding:12px 14px; border-radius:2px; min-height:44px; display:flex; align-items:center;} .nav-dropdown{width:100%;} .nav-dropdown-btn{width:100%; justify-content:flex-start; padding:12px 14px; min-height:44px;} .nav-dropdown-item{min-height:44px; display:flex; align-items:center;} .nav-dropdown-menu{position:static!important; box-shadow:none; border:none; min-width:0; padding-left:6px;} /* the floating action button itself */ .nav-burger{ display:flex; align-items:center; justify-content:center; position:fixed; right:16px; bottom:18px; z-index:1002; width:56px; height:56px; border-radius:50%; background:var(--gold); color:#fff; border:none; font-size:22px; line-height:1; box-shadow:0 6px 22px rgba(196,169,98,0.55); cursor:pointer; transition:transform .12s ease; } .nav-burger:active{transform:scale(0.94);} .nav-burger[aria-expanded="true"]{background:var(--tooltip-bg); color:#fff; box-shadow:0 6px 22px rgba(0,0,0,0.4);} /* Dark mode: the bright gold FAB + gold glow is glaring on navy — mute to a softer brass with a dark glyph and a neutral shadow (no gold halo). */ [data-theme="dark"] .nav-burger{background:#a3884f; color:#161b26; box-shadow:0 5px 16px rgba(0,0,0,0.55);} /* UX-AUDIT 2026-06-13: avoid iOS auto-zoom on focus — inputs must be >=16px on mobile. Overrides the per-tool 12-14px field rules. Desktop keeps its sizing. */ input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size:16px !important; } } .hero{padding:28px 28px 24px;border-bottom:1px solid var(--border);background:var(--card);max-width:100%;} .hero-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;} .hero-title{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:300;color:var(--gold);line-height:1.2;text-transform:uppercase;letter-spacing:1px;margin:0;} .hero-sub{font-size:12px;color:var(--muted);margin-top:6px;} /* ===================================================================== UX-AUDIT 2026-06-13 — shared accessibility, table, and form layer. Added by the audit remediation (Pillars 2, 4, 5). All additive; no existing rule above was removed. Per-page templates opt in to the table helpers via class names; focus/motion/skip apply globally. ===================================================================== */ /* --- Visible keyboard focus (WCAG 2.4.7). Was absent from the shared layer. --- */ :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px;} :focus:not(:focus-visible){outline:none;} /* keep the gold ring legible on gold backgrounds */ .btn-primary:focus-visible,.nav-burger:focus-visible{outline-color:var(--text);} /* --- Respect prefers-reduced-motion globally (covers the nav pulse, the globe/map animations, chart transitions, FAB transform — none were gated before). --- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* --- Skip-to-content link (injected as the first focusable node by ballast-auth.js; targets the page's
, which auth.js gives id="main" tabindex="-1"). --- */ .skip-link{position:absolute;left:-9999px;top:auto;z-index:2000; background:var(--primary-dark,#1a1f2e);color:#f5f3eb;padding:10px 16px;border-radius:0 0 2px 0; font:600 12px 'Inter',sans-serif;letter-spacing:.04em;text-decoration:none;} .skip-link:focus{left:0;top:0;outline:2px solid var(--gold);} /* --- Screen-reader-only utility (for table captions, hidden labels). --- */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* --- Shared data-table system (Pillar 4). Opt-in classes so existing tables are unaffected until a template adds them. .table-scroll wrapper: horizontal scroll + an edge-fade affordance on touch .data-table tabular-nums for true numeric column alignment + sticky header : .data-table.stickyhead thead th (sticks under the 56px nav) + sticky 1st col : .data-table.stickycol first cell stays while scrolling --- */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch; background: linear-gradient(to right, var(--card) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat, linear-gradient(to left, var(--card) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.10), transparent) left center / 12px 100% no-repeat, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.10), transparent) right center / 12px 100% no-repeat; background-attachment:local,local,scroll,scroll;} .data-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;} .data-table.stickyhead thead th{position:sticky;top:56px;z-index:3;background:var(--surface-2);} .data-table.stickycol thead th:first-child, .data-table.stickycol tbody td:first-child{position:sticky;left:0;z-index:2;background:var(--card);} .data-table.stickycol thead th:first-child{z-index:4;} /* numeric cells right-align with tabular figures */ .data-table td.num,.data-table th.num,.cell-num{text-align:right;font-variant-numeric:tabular-nums;} /* --- Gold accent topline on every data-table card, site-wide. Matches the /daily panel accent (.sentiment-panel/.sector-brief ::before) and extends it to all tabular feed cards for one consistent house treatment. Targets any .card that CONTAINS a , so it tracks current + future table cards with no per-page markup, and naturally skips chart/KPI cards (no table), the globe map overlay (.g-panel) and the Data Studio dynamic grid (.grid-scroll, not a .card). Fades to transparent at both edges; pointer-events:none so it never intercepts a collapsible card-header click. --- */ .card:has(table),.twrap:has(table){position:relative;} .card:has(table)::before,.twrap:has(table)::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;pointer-events:none; background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent);opacity:.85;} /* --- A tap/focus-revealable "explain this" disclosure to replace hover-only title= tooltips (Pillar 4 / mobile). Opt-in: value. Works on touch + keyboard, unlike title=. --- */ .hint{position:relative;cursor:help;border-bottom:1px dotted var(--faint);} .hint::after{content:attr(data-hint);position:absolute;left:0;bottom:calc(100% + 6px); min-width:160px;max-width:260px;background:var(--tooltip-bg);color:#fff;font:400 11px 'Inter',sans-serif; letter-spacing:.01em;line-height:1.4;padding:8px 10px;border-radius:2px;box-shadow:var(--shadow); opacity:0;visibility:hidden;transition:opacity .12s;z-index:1000;white-space:normal;text-transform:none;} .hint:hover::after,.hint:focus::after,.hint:focus-visible::after{opacity:1;visibility:visible;} /* --- TEMPORARY (2026-06-13): hide the Reports nav link site-wide. It is hard-coded in 13 templates but not all (voyage/account/admin/login), so it appeared to flicker in/out while navigating. Hidden until Reports returns with a weekly/monthly/quarterly dropdown — at which point remove this rule and add the grouped menu. --- */ .nav-link[href="/reports"]{display:none !important;} /* ===== DESIGN SYSTEM v1 (added 2026-06-28) ===== Canonical token contract + reference component classes for the BALLAST design-system convergence. PURELY ADDITIVE: nothing above is removed or renamed; existing pages render identically until migration adopts these. Font / spacing / type-scale / tracking tokens live in :root only (theme- independent). Colour-dependent tokens (--series-*, --sec-*) are mirrored in [data-theme="dark"] with slightly lighter / muted values so series colours stay legible on the dark navy cards. ================================================================ */ :root{ /* --- Type families --- */ --mono:'JetBrains Mono','SF Mono',Menlo,monospace; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',-apple-system,sans-serif; /* --- Spacing scale --- */ --s0:2px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px; /* --- Type scale --- */ --fs-eyebrow:10px; --fs-meta:11px; --fs-body:13px; --fs-lead:15px; --fs-h3:19px; --fs-h2:24px; --fs-h1:32px; /* --- Letter-spacing tiers --- */ --track-tight:.5px; --track-label:1.5px; --track-cap:2px; --track-eyebrow:3px; --track-wordmark:5px; /* --- Categorical chart series (Echelon palette) --- */ --series-1:#4a6584; --series-2:#8b6914; --series-3:#6b8f71; --series-4:#a3884f; --series-5:#7a8aa0; --series-6:#9c6b54; --series-7:#8a8a82; --series-8:#5f7385; /* --- Shipping sector colours --- */ --sec-dirty:#6b4423; --sec-clean:#4a6584; --sec-dry:#8b6914; --sec-gas:#5f7385; } [data-theme="dark"]{ /* Series + sector colours, lifted / muted for legibility on the dark navy card. */ --series-1:#6f8eae; --series-2:#c4a962; --series-3:#8fb398; --series-4:#c2a877; --series-5:#9aa9be; --series-6:#bf8e76; --series-7:#aeaea4; --series-8:#869aae; --sec-dirty:#a07a53; --sec-clean:#6f8eae; --sec-dry:#c4a962; --sec-gas:#869aae; } /* --- Reference card / panel: background + 1px border + 2px radius + s6 pad. --- */ .bx-card,.bx-panel{ background:var(--card); border:1px solid var(--border); border-radius:2px; padding:var(--s6); } /* card / panel title (eyebrow): the canonical uppercase label head. */ .bx-card-title,.bx-panel-title{ font:600 var(--fs-eyebrow)/1 var(--sans); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted); } /* --- Reference KPI tile --- */ .bx-kpi{ background:var(--card); border:1px solid var(--border); border-radius:2px; padding:var(--s5); } .bx-kpi-label{ font-size:var(--fs-eyebrow); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--muted); } .bx-kpi-value{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--heading); } /* --- Reference stat (numeric figure) --- */ .bx-stat{ font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--heading); } /* --- Reference badge / chip --- */ .bx-badge,.bx-chip{ font-size:var(--fs-meta); letter-spacing:var(--track-tight); border-radius:2px; padding:var(--s1) var(--s2); } /* --- Reference buttons --- */ .btn-primary{ background:var(--btn-bg); color:var(--btn-text); border:none; border-radius:2px; padding:var(--s3) var(--s5); font:600 var(--fs-meta)/1 var(--sans); letter-spacing:var(--track-label); text-transform:uppercase; cursor:pointer; transition:background .15s,transform .15s; } .btn-primary:hover{background:var(--btn-bg-hover);} .btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--border); border-radius:2px; padding:var(--s3) var(--s5); font:600 var(--fs-meta)/1 var(--sans); letter-spacing:var(--track-label); text-transform:uppercase; cursor:pointer; transition:background .15s,transform .15s; } .btn-ghost:hover{background:var(--hover-fill);} /* ===== Redesign 2026-07 prod: hide parked pages from nav (pages stay reachable by URL) ===== */ .nav-link[href="/globe"], .nav-link[href="/brain"], .nav-link[href="/markets"], .nav-link[href="/reports"], .nav-dropdown-item[href="/reports"], .nav-dropdown-item[href="/fleet-intel"], .nav-link[href="/fleet-intel"]{ display:none !important; } /* mobile-worldclass (Dion 2026-07-12): safe-area + touch ergonomics, site-wide. - the FAB and its panel clear the iPhone home-indicator (needs the viewport-fit=cover meta this bundle adds to every template) - inputs never drop below 16px on touch, so iOS stops zooming on focus - the shared control classes get a 44px touch baseline */ @media (max-width:768px){ .nav-burger{bottom:calc(18px + env(safe-area-inset-bottom, 0px));right:calc(16px + env(safe-area-inset-right, 0px));} .nav-links{bottom:calc(84px + env(safe-area-inset-bottom, 0px));right:calc(16px + env(safe-area-inset-right, 0px));} /* 44px touch baseline - INTERACTIVE controls only. Bare .pill is a status BADGE on ops/admin/company tables; the interactive pills live inside .pill-group (dashboard ranges) so the baseline is scoped there. */ .pill-group .pill,.fbtn,.cx-btn{min-height:44px;} .pill-group .pill,.cx-btn{display:inline-flex;align-items:center;justify-content:center;} } /* hover:none keeps this off touchscreen DESKTOPS, which report pointer:coarse at full width but still want the compact chrome */ @media (max-width:768px), (pointer:coarse) and (hover:none){ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea{font-size:16px !important;} }