/* ═══════════════════════════════════════════════════════════════════ TaimurTools — Agency design system (2026-08-26) Shared chrome (nav + footer) for every page, plus the component set used by the agency pages (home, services, case studies, resources, audits, contact). Namespaced under .ag- so it never fights the tool engine's stylesheet or older page styles. Palette/tokens extend the existing redesign skin (--a1/--a2/--a3/--grad). ═══════════════════════════════════════════════════════════════════ */ /* ── TOKENS ────────────────────────────────────────────────────────── 2026-09-22: the homepage's private --h-* palette was promoted here, so every page inherits the design that used to live only on index.html. Names are unchanged; values are the homepage's. The three values that failed WCAG AA in the old light set (--ag-a2 2.77, --ag-a3 1.81, --ag-mut2 2.96) are retired, not carried over. Measured contrast on --ag-bg: ink 18.45, ink2 14.40, mut 8.97, a1 6.26, a2/a3 8.07, ok 8.69. See reports/design/00-inventory.md §6. */ :root{ --ag-a1:#5B8CFF; --ag-a2:#7DA3FF; --ag-a3:#7DA3FF; /* the fill is deliberately light: its label is --ag-ink-on-accent (near-black), which gives 8.07:1 at the light stop and 6.26:1 at the dark stop. The old white-on-#3D6CFA was 4.45:1 — a real AA miss on a 14.5px label. */ --ag-grad:linear-gradient(120deg,#7DA3FF,#5B8CFF); --ag-ink-on-accent:#080A0F; --ag-accent:#5B8CFF; --ag-violet:#8B5CF6; /* --ag-violet is 4.23:1 on --ag-card, i.e. large text only. Use this for violet TEXT at any size: 5.41 on card, 5.98 on bg, 5.15 on card2. */ --ag-violet-ink:#9B76F8; --ag-bg:#080A0F; --ag-bg2:#0E1118; --ag-card:#121722; --ag-card2:#161c29; --ag-line:rgba(255,255,255,.08); --ag-line2:rgba(255,255,255,.14); --ag-ink:#F5F7FA; --ag-ink2:#D7DCE6; --ag-mut:#A7AFBD; /* 2026-09-22: was #6F7788, which measured 3.99:1 on --ag-card and was being used for 10.5-13px labels in nine places. #7F8899 clears 4.5:1 on ALL four surfaces (worst case 4.78 on --ag-card2), so there is no size caveat left. */ --ag-mut2:#7F8899; --ag-soft:rgba(91,140,255,.12); --ag-ok:#22C55E; --ag-ok-bg:rgba(34,197,94,.12); --ag-warn:#F5B544; --ag-warn-bg:rgba(245,181,68,.12); --ag-err:#FF6B5E; --ag-err-bg:rgba(255,107,94,.12); /* kept as aliases: they meant "a dark band on a light site", which the whole site now is. Anything still asking for them gets a real surface. */ --ag-dark:#080A0F; --ag-dark2:#121722; /* shadows re-tuned for dark surfaces: a light-surface shadow is invisible here, so depth comes from opacity and emphasis comes from --ag-glow. */ --ag-sh:0 24px 60px -28px rgba(0,0,0,.75); --ag-sh2:0 2px 10px rgba(0,0,0,.45); --ag-sh3:0 40px 80px -40px rgba(0,0,0,.8); --ag-glow:0 0 0 1px rgba(91,140,255,.35),0 24px 60px -24px rgba(91,140,255,.55); --ag-r:20px; --ag-r2:14px; --ag-r3:999px; --ag-font:'Inter','Inter Fallback','Inter Fallback A',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --ag-serif:'Instrument Serif','Instrument Serif Fallback','Instrument Serif Fallback A',Georgia,'Times New Roman',serif; --ag-nav-h:64px; /* spacing scale: every gap and gutter comes from these six steps. Ad-hoc values (10px, 22px, 34px...) are what made the rhythm drift. */ --ag-s1:8px; --ag-s2:12px; --ag-s3:16px; --ag-s4:24px; --ag-s5:32px; --ag-s6:56px; --ag-gutter:20px; /* display headings use the clamp scale above. These three are the COMPONENT tiers -- a card title must not be 38px. Nothing else. */ --ag-h2-section:1.625rem; --ag-h2-block:1.375rem; --ag-h2-card:1.125rem; } /* ── ALIAS LAYER ───────────────────────────────────────────────────── The 57 tool pages and the 6 tool category pages speak a different token vocabulary (--x*, --a1/--a2/--a3/--grad, --surface/--text*), with ~4,600 var() references between them. Rather than rewrite those rules, the names are aliased onto the shared system here, once. Each page's own :root — which used to define these as light values — is deleted, so these win. Do not give these independent values: they exist to have none. */ :root{ --xbg:var(--ag-bg); --xcard:var(--ag-card); --xline:var(--ag-line); --xink:var(--ag-ink); --xmut:var(--ag-mut); --xsh:var(--ag-sh); --xsh2:var(--ag-sh2); --a1:var(--ag-a1); --a2:var(--ag-a2); --a3:var(--ag-a3); --grad:var(--ag-grad); --bg:var(--ag-bg); --surface:var(--ag-card); --surface2:var(--ag-card2); --border:var(--ag-line); --text:var(--ag-ink); --text2:var(--ag-ink2); --text3:var(--ag-mut); --text4:var(--ag-mut2); --blue:var(--ag-a1); --accent:var(--ag-warn); --shadow:var(--ag-sh2); --shadow-lg:var(--ag-sh); --shadow-sm:var(--ag-sh2); --card:var(--ag-card); --muted:var(--ag-mut); --bg-elev:var(--ag-card); --bg-elev-2:var(--ag-card2); --text-2:var(--ag-ink2); --text-muted:var(--ag-mut); --text-dim:var(--ag-mut2); /* names used only as var(--x, #lightfallback) on a few pages -- undefined meant the light fallback always won. */ --t1:var(--ag-ink); --teal:var(--ag-a2); --g1:var(--ag-a1); --orange:var(--ag-warn); } .ag-page{background:var(--ag-bg);color:var(--ag-ink);font-family:var(--ag-font);-webkit-font-smoothing:antialiased;line-height:1.6} .ag-page *,.ag-page *::before,.ag-page *::after{box-sizing:border-box} .ag-page img{max-width:100%;height:auto} .ag-wrap{max-width:1180px;margin:0 auto;padding:0 var(--ag-gutter)} .ag-wrap.narrow{max-width:860px} .ag-body{padding-top:calc(var(--ag-nav-h) + 24px)} .ag-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── Metric-matched font fallbacks (2026-09-23) ── Google Fonts loads with display=swap, so a first visit renders in a system font and swaps. Unadjusted, that swap cost CLS 0.23 on a cold mobile load of /tools/merge-pdf.html (the H1 rewrapped 39px). These local faces are scaled to occupy exactly the web fonts' space (widths within 0.05%, identical ascent/descent - measured in Chrome), so the swap moves nothing. Every font stack lists them straight after the web font: 'Inter','Inter Fallback','Inter Fallback A',... 'X Fallback' = Arial / Times New Roman (Windows, macOS, iOS); 'X Fallback A' = Roboto / Noto Serif (Android, which has no Arial). Overrides are divided by size-adjust because the browser scales them by it. Re-measure if the web fonts or their weights change. */ @font-face{font-family:'Inter Fallback';font-style:normal;font-weight:400;src:local('Arial'),local('ArialMT');size-adjust:106.53%;ascent-override:91.05%;descent-override:22.53%;line-gap-override:0%} @font-face{font-family:'Inter Fallback';font-style:normal;font-weight:500;src:local('Arial'),local('ArialMT');size-adjust:107.43%;ascent-override:90.29%;descent-override:22.34%;line-gap-override:0%} @font-face{font-family:'Inter Fallback';font-style:normal;font-weight:600;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:100.97%;ascent-override:96.07%;descent-override:23.77%;line-gap-override:0%} @font-face{font-family:'Inter Fallback';font-style:normal;font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:101.80%;ascent-override:95.28%;descent-override:23.58%;line-gap-override:0%} @font-face{font-family:'Inter Fallback';font-style:normal;font-weight:800;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:102.82%;ascent-override:94.34%;descent-override:23.34%;line-gap-override:0%} @font-face{font-family:'Inter Fallback';font-style:normal;font-weight:900;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:103.94%;ascent-override:93.32%;descent-override:23.09%;line-gap-override:0%} @font-face{font-family:'Inter Fallback A';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular');size-adjust:107.55%;ascent-override:90.19%;descent-override:22.32%;line-gap-override:0%} @font-face{font-family:'Inter Fallback A';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium');size-adjust:107.54%;ascent-override:90.20%;descent-override:22.32%;line-gap-override:0%} @font-face{font-family:'Inter Fallback A';font-style:normal;font-weight:600;src:local('Roboto Bold'),local('Roboto-Bold');size-adjust:107.66%;ascent-override:90.10%;descent-override:22.29%;line-gap-override:0%} @font-face{font-family:'Inter Fallback A';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold');size-adjust:108.54%;ascent-override:89.37%;descent-override:22.11%;line-gap-override:0%} @font-face{font-family:'Inter Fallback A';font-style:normal;font-weight:800;src:local('Roboto Black'),local('Roboto-Black');size-adjust:108.80%;ascent-override:89.15%;descent-override:22.06%;line-gap-override:0%} @font-face{font-family:'Inter Fallback A';font-style:normal;font-weight:900;src:local('Roboto Black'),local('Roboto-Black');size-adjust:109.99%;ascent-override:88.19%;descent-override:21.82%;line-gap-override:0%} @font-face{font-family:'Instrument Serif Fallback';font-style:normal;font-weight:400;src:local('Times New Roman'),local('TimesNewRomanPSMT');size-adjust:82.54%;ascent-override:119.94%;descent-override:37.56%;line-gap-override:0%} @font-face{font-family:'Instrument Serif Fallback';font-style:italic;font-weight:400;src:local('Times New Roman Italic'),local('TimesNewRomanPS-ItalicMT');size-adjust:86.41%;ascent-override:114.57%;descent-override:35.88%;line-gap-override:0%} @font-face{font-family:'Instrument Serif Fallback A';font-style:normal;font-weight:400;src:local('Noto Serif'),local('NotoSerif-Regular');size-adjust:70.48%;ascent-override:140.47%;descent-override:43.98%;line-gap-override:0%} @font-face{font-family:'Instrument Serif Fallback A';font-style:italic;font-weight:400;src:local('Noto Serif Italic'),local('NotoSerif-Italic');size-adjust:75.89%;ascent-override:130.45%;descent-override:40.85%;line-gap-override:0%} /* ───────── NAV (2026-09-23 redesign) ───────── Full-width bar, a 3-column mega-menu with a featured card, and a full-height mobile sheet with Services as an accordion. Why the selectors below are all prefixed (.ag-nav …, .ag-dd-menu …, .ag-mobile …): the TYPE section styles `a:not([class])` blue + underlined so inline body links meet WCAG 1.4.1. That rule has specificity (0,1,1) — the same as `.ag-links>a` — and sits later in the file, so it silently won and turned 4 of 5 nav links and every menu item blue-underlined. Two-class selectors (0,2,1) beat it regardless of source order. Do not "simplify" them back to one class. --ag-nav-top is 0 everywhere except the homepage, where home.css sets it to the announcement bar's measured height (see agency.js). The bar, the menu and the mobile sheet all hang off it, so they can never disagree. */ /* height/display/padding are reset explicitly: assets/tools.css:21 still has a legacy bare `nav{height:48px;display:flex;padding:0 clamp(1rem,4vw,3rem)…}` rule from the old tool-site chrome. It matches .ag-nav on all 64 tool pages and squeezed this 64px bar into a 48px box, drawing the bottom border through the middle of it (measured 2026-09-23). The old floating pill had no background of its own, which is why nobody saw it. */ .ag-nav{position:fixed;top:var(--ag-nav-top,0px);left:0;right:0;z-index:1000;height:auto;display:block;padding:0;font-family:var(--ag-font); background:rgba(8,10,15,.72);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid var(--ag-line);transition:background .2s ease,border-color .2s ease} .ag-nav.scrolled{background:rgba(8,10,15,.92);border-bottom-color:var(--ag-line2)} .ag-nav-in{max-width:1200px;height:var(--ag-nav-h);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px} /* brand — the base rules are shared with the footer, so they stay generic; the nav-only overrides give the glyph a light tile it can be read on (6.26:1; it was dark-on-dark at 1.09:1) */ .ag-brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;color:#F5F7FA;text-decoration:none;font-size:17px;white-space:nowrap} .ag-brand .lg{width:30px;height:30px;border-radius:9px;background:var(--ag-card);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .ag-brand .lg svg{width:18px;height:18px} .ag-brand .lg svg g{fill:#0b0b12} .ag-brand small{font-weight:600;color:var(--ag-mut);font-size:11.5px;letter-spacing:.02em;margin-left:2px} .ag-nav .ag-brand{gap:10px;font-weight:700;font-size:16px;flex-shrink:0;border-radius:8px} .ag-nav .ag-brand .lg{border-radius:8px;background:var(--ag-grad)} .ag-nav .ag-brand .lg svg g{fill:var(--ag-ink-on-accent)} /* top-level links */ .ag-nav .ag-links{display:flex;align-items:center;gap:2px;height:100%} .ag-nav .ag-nl{position:relative;height:100%;display:flex;align-items:center} .ag-nav .ag-nl>a,.ag-nav .ag-nl>button{position:relative;font:inherit;font-size:14px;font-weight:500;color:var(--ag-ink2);text-decoration:none;background:none;border:0;cursor:pointer; display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:8px;white-space:nowrap;transition:color .15s ease,background .15s ease} .ag-nav .ag-nl>a:hover,.ag-nav .ag-nl>button:hover,.ag-nav .ag-nl>button[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.06);text-decoration:none} .ag-nav .ag-nl>button svg{width:12px;height:12px;transition:transform .2s ease} .ag-nav .ag-nl>button[aria-expanded="true"] svg{transform:rotate(180deg)} /* current section: white text + a 2px accent bar on the bar's bottom edge. Drawn from the 36px link, so it drops by half the leftover bar height. */ .ag-nav .ag-nl.on>a,.ag-nav .ag-nl.on>button{color:#fff} .ag-nav .ag-nl.on>a::after,.ag-nav .ag-nl.on>button::after{content:"";position:absolute;left:12px;right:12px;bottom:calc((36px - var(--ag-nav-h)) / 2 - 1px);height:2px;border-radius:2px;background:var(--ag-a1)} /* The Services item is left unpositioned on purpose: its panel lives INSIDE it (so Tab moves from the button straight into the menu), and this makes the panel resolve against .ag-nav. .ag-nav's backdrop-filter makes it the containing block for descendants anyway, so position:fixed would not mean the viewport here - absolute + top:100% is the honest version. */ .ag-nav .ag-nl.ag-dd{position:static} /* primary action */ .ag-nav .ag-actions{margin-left:auto;display:flex;align-items:center;gap:8px} .ag-nav-cta{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:8px;background:var(--ag-grad);color:var(--ag-ink-on-accent); font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:filter .15s ease,transform .15s ease} .ag-nav-cta:hover{filter:brightness(1.08);color:var(--ag-ink-on-accent);text-decoration:none} .ag-nav-cta:active{transform:translateY(1px)} /* ── mega-menu: a disclosure panel (not an ARIA menu) ── */ .ag-dd-menu{position:absolute;left:50%;top:calc(100% + 8px);width:min(1120px,calc(100vw - 48px));z-index:1001; max-height:calc(100vh - var(--ag-nav-top,0px) - var(--ag-nav-h) - 24px);overflow-y:auto;overscroll-behavior:contain; transform:translate(-50%,-6px);opacity:0;visibility:hidden;pointer-events:none;font-family:var(--ag-font); background:var(--ag-bg2);border:1px solid var(--ag-line2);border-radius:16px;box-shadow:0 32px 80px -24px rgba(0,0,0,.85); transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s} /* invisible bridge over the 8px gap, so the pointer never 'leaves' on the way down */ .ag-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} .ag-dd-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .16s ease,transform .16s ease} .ag-dd-menu .ag-dd-grid{display:grid;grid-template-columns:repeat(3,1fr) 280px;gap:8px 20px;padding:20px} .ag-dd-menu .ag-dd-h{margin:0 0 6px;padding:0 10px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ag-mut2);line-height:1.6} .ag-dd-menu .ag-dd-h.gap{margin-top:14px} .ag-dd-menu .ag-dd-col a{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;transition:background .15s ease} .ag-dd-menu .ag-dd-col a:hover{background:rgba(255,255,255,.05);text-decoration:none} .ag-dd-menu .ag-dd-col a b{display:block;font-size:14px;font-weight:600;color:var(--ag-ink);line-height:1.35} .ag-dd-menu .ag-dd-col a span{display:block;font-size:12.5px;font-weight:400;color:var(--ag-mut);line-height:1.4;margin-top:2px} .ag-dd-menu .ag-dd-feat{background:linear-gradient(160deg,rgba(91,140,255,.16),rgba(91,140,255,.04) 60%);border:1px solid rgba(91,140,255,.28); border-radius:12px;padding:18px;display:flex;flex-direction:column;align-self:start} .ag-dd-menu .ag-dd-feat .eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ag-a2)} .ag-dd-menu .ag-dd-feat strong{display:block;font-size:17px;font-weight:700;line-height:1.3;margin:8px 0 6px;color:#fff} .ag-dd-menu .ag-dd-feat p{margin:0 0 16px;font-size:13.5px;color:var(--ag-ink2);line-height:1.5} .ag-dd-menu .ag-dd-feat .ag-nav-cta{white-space:normal;text-align:center;height:auto;min-height:40px;padding:10px 14px;line-height:1.3} .ag-dd-menu .ag-dd-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 30px;border-top:1px solid var(--ag-line);font-size:13px;color:var(--ag-mut)} .ag-dd-menu .ag-dd-foot a{color:var(--ag-a2);font-weight:600;text-decoration:none} .ag-dd-menu .ag-dd-foot a:hover{color:#fff;text-decoration:none} /* Compact menu on short or narrow desktops. Measured 2026-09-23: the full menu is 684px tall (722px at 1024px wide) and needs ~772px of viewport, so it had to scroll INSIDE itself at 1366x768 (the most common laptop), 1280x720 and 1024x768. A menu you must scroll is worse than one without subtitles, and the service titles carry the meaning on their own - so drop the one-line descriptions there. 1280x800 and up keep the full design. */ @media(max-height:779px),(max-width:1279px){ .ag-dd-menu .ag-dd-col a span{display:none} .ag-dd-menu .ag-dd-col a{padding:7px 10px} } /* ── burger: light lines (were --ag-card, 1.10:1), 44px target ── */ .ag-nav .ag-burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--ag-line2);background:transparent;cursor:pointer; align-items:center;justify-content:center;flex-shrink:0;padding:0} .ag-nav .ag-burger span,.ag-nav .ag-burger span::before,.ag-nav .ag-burger span::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--ag-ink);transition:transform .2s ease,background .2s ease} .ag-nav .ag-burger span{position:relative} .ag-nav .ag-burger span::before,.ag-nav .ag-burger span::after{content:"";position:absolute;left:0} .ag-nav .ag-burger span::before{top:-6px} .ag-nav .ag-burger span::after{top:6px} .ag-nav .ag-burger[aria-expanded="true"] span{background:transparent} .ag-nav .ag-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)} .ag-nav .ag-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)} /* ── mobile sheet ── */ .ag-mobile{position:fixed;top:calc(var(--ag-nav-top,0px) + var(--ag-nav-h));left:0;right:0;bottom:0;z-index:999;background:var(--ag-bg); display:none;flex-direction:column;border-top:1px solid var(--ag-line);font-family:var(--ag-font)} .ag-mobile.open{display:flex} .ag-mobile .ag-mob-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 20px 16px} .ag-mobile .ag-mob-row,.ag-mobile .ag-mob-acc{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0 4px; font:inherit;font-size:17px;font-weight:500;color:var(--ag-ink);text-decoration:none;background:none;border:0;border-bottom:1px solid var(--ag-line);cursor:pointer;text-align:left} .ag-mobile .ag-mob-acc svg{width:14px;height:14px;flex-shrink:0;transition:transform .2s ease;color:var(--ag-mut)} .ag-mobile .ag-mob-acc[aria-expanded="true"] svg{transform:rotate(180deg)} .ag-mobile .ag-mob-sub{display:none;padding:4px 0 12px;border-bottom:1px solid var(--ag-line)} .ag-mobile .ag-mob-sub.open{display:block} .ag-mobile .ag-mob-h{margin:12px 4px 2px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ag-mut2)} .ag-mobile .ag-mob-sub a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;font-size:15px;font-weight:400;color:var(--ag-ink2);text-decoration:none} .ag-mobile .ag-mob-sub a:active{background:rgba(255,255,255,.05)} .ag-mobile .ag-mob-cta{padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--ag-line);background:var(--ag-bg2);display:grid;gap:10px} .ag-mobile .ag-mob-cta a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;text-align:center;padding:0 16px;line-height:1.3} .ag-mobile .ag-mob-cta .primary{background:var(--ag-grad);color:var(--ag-ink-on-accent)} .ag-mobile .ag-mob-cta .ghost{border:1px solid var(--ag-line2);color:var(--ag-ink)} /* ≤1023px: burger replaces the links and the bar CTA (both CTAs live in the sheet — owner decision 2026-09-23) */ @media(max-width:1023px){ .ag-nav .ag-links,.ag-nav .ag-actions .ag-nav-cta{display:none} .ag-nav .ag-burger{display:inline-flex} .ag-nav .ag-nav-in{padding:0 16px;gap:12px} } /* the mega-menu is desktop-only; never let it linger if the window narrows */ @media(max-width:1023px){.ag-dd-menu{display:none}} @media(prefers-reduced-motion:reduce){ .ag-nav,.ag-nav *,.ag-dd-menu,.ag-dd-menu *,.ag-mobile *{transition:none!important} } /* ───────── BUTTONS ───────── */ .ag-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ag-grad);color:var(--ag-ink-on-accent);font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:999px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;font-family:inherit;box-shadow:0 10px 22px -10px rgba(91,140,255,.7);transition:transform .2s,box-shadow .2s,filter .2s} .ag-btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -10px rgba(91,140,255,.8);filter:brightness(1.07)} .ag-btn:focus-visible{outline:3px solid rgba(125,163,255,.85);outline-offset:2px} /* ── FOCUS (WCAG 2.4.7) ─────────────────────────────────────────────── 15 rules across the page stylesheets set `outline:none` on inputs and rely on a border-colour change, which is not a reliable focus indicator. agency.css now loads FIRST, so a plain rule here would lose to them: !important is deliberate and is scoped to :focus-visible only, so it never affects the resting state and never shows for mouse users. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible, [contenteditable]:focus-visible,[role="button"]:focus-visible{ outline:3px solid var(--ag-a2)!important;outline-offset:2px!important; } /* on a light island (the printable invoice) the ring needs a dark colour */ #ws-invoice .inv-doc :focus-visible{outline-color:#2563eb!important} /* ── TARGET SIZE (WCAG 2.5.8) ───────────────────────────────────────── Block links in the nav and footer columns measured 19px tall at 390px. Inline links inside a sentence are exempt from 2.5.8 and are left alone; these are standalone list targets, so they get a real 24px hit area. Padding rather than height, so nothing reflows. */ .ag-footer a,.ag-footer-grid a, .ag-footer-bottom a,.ftr-col a,.bnav-item,.nlinks a{ min-height:24px;display:inline-flex;align-items:center; } .ag-footer-grid a,.ftr-col a{padding-block:3px} /* small icon-only controls: close buttons, row delete, stepper arrows */ .dl-promo-close,.ann .x,button.del,.inv-gbtn{min-width:24px;min-height:24px} /* the announcement-bar CTA and the invoice adjustment links were 15-19px tall */ .ann a,.inv-adj a,.inv-trow a{min-height:24px;display:inline-flex;align-items:center} /* the invoice line-item description collapses to 20px wide in its grid column */ .inv-row .desc,.inv-row input.desc{min-width:24px} .q #qv{min-height:24px} /* native checkboxes and radios render 13x13. Enlarge them and make the label that wraps them a 24px target, which is what a pointer actually hits. */ input[type="checkbox"],input[type="radio"]{width:24px;height:24px;accent-color:var(--ag-a1);flex-shrink:0} label:has(> input[type="checkbox"]),label:has(> input[type="radio"]), .wb-pattern-opt,.ag-check,.ag-checks label{min-height:24px;display:inline-flex;align-items:center;gap:8px} .ag-btn.ghost{background:transparent;color:var(--ag-ink);box-shadow:none;border:1px solid var(--ag-line2)} .ag-btn.ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)} .ag-btn.dark{background:var(--ag-card2);color:var(--ag-ink);box-shadow:none;border:1px solid var(--ag-line2)} .ag-btn.lg{padding:15px 26px;font-size:16px} .ag-btn.wide{width:100%} .ag-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none} /* Unclassed links in prose had no colour of their own, so they fell back to the browser default #0000EE -- 1.9:1 on a dark card. :not([class]) keeps this away from every component that styles its own anchors. */ /* WCAG 1.4.1: a link inside a block of text needs a non-colour cue, or it is invisible to anyone who cannot distinguish the hue. Underline, offset so it does not collide with descenders. Classed links (nav, cards, buttons) are excluded -- they are visually distinguishable by their own treatment. */ a:not([class]){color:var(--ag-a1);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} a:not([class]):hover{color:var(--ag-a2);text-decoration-thickness:2px} .ag-link{color:var(--ag-a1);font-weight:600;text-decoration:none} .ag-link:hover{text-decoration:underline} /* ───────── TYPE ───────── */ /* ── TYPE SCALE (2026-09-22) ────────────────────────────────────────── One scale for the whole site. It replaces 27 different H1 font-size declarations that had accumulated across tools.css, theme.css, website-builder.css, home.css and ~100 inline