/* Shared site chrome, loaded from on every page with the same tag so the head merge after a boosted navigation leaves it alone. These rules used to be strings injected into by consent.js on every page load. As a real stylesheet the browser caches them, they apply before first paint instead of after, and boosted navigation never has to re-add them. */ /* The link back to the index that site.js adds to any section header without one, plus the row it sits in. */ .home-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; margin: 0 0 0 12px; border: 1px solid var(--line, #d9d9d9); border-radius: 6px; text-decoration: none; color: var(--accent, #2f56c6); font-weight: 600; background: var(--card, transparent); } .home-btn:hover { filter: brightness(1.05); } .home-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* A drop zone held shut while its controller is still loading. No opacity or colour change, because on a warm cache that would be a flash and nothing more; the cursor is enough to say "not yet" to anyone who gets there first. */ .drop[aria-disabled="true"] { cursor: progress; } /* Ad slots stay hidden until consent.js has a publisher id to work with. The class goes on , which a boosted swap never touches, so the decision outlives navigation. Hiding is written as :not(.ads-on) rather than as an override so that once ads are on these rules stop applying altogether and each section's own sizing and media queries are left to govern. */ html:not(.ads-on) .ad-slot, html:not(.ads-on) .ad-rail { display: none !important; } /* Consent banner. consent.js builds the element and this styles it; between them there is no CSS left being assembled from strings at runtime. */ #consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #f6f5f3; color: #222; border-top: 1px solid #ccc; padding: 12px 16px; font: 14px/1.5 system-ui, sans-serif; } #consent-banner .cb-inner { max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; } #consent-banner p { margin: 0; flex: 1 1 320px; } #consent-banner a { color: inherit; } #consent-banner .cb-buttons { display: flex; gap: 8px; } #consent-banner button { min-height: 44px; padding: 0 18px; font: inherit; cursor: pointer; border: 1px solid #888; border-radius: 3px; background: #fff; color: #222; } #consent-banner button.cb-accept { background: #222; color: #fff; border-color: #222; } /* Small, local-only return loop for tool hubs. The list stays useful without JavaScript; search, saved stars and recent links are progressive enhancement. */ .tool-discovery { max-width: 780px; margin: 28px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } .tool-discovery h2 { margin: 0 0 6px; } .tool-discovery h3 { margin: 0 0 8px; } .discovery-copy { color: var(--muted); margin-bottom: 16px; } .tool-search-label { display: block; font-weight: 600; margin-bottom: 6px; } .tool-search { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: var(--bg); font: inherit; } .tool-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .tool-filter { min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: var(--card); font: inherit; cursor: pointer; } .tool-filter[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .tool-search-status { min-height: 1.6em; margin: 12px 0 0; color: var(--muted); font-size: .9rem; } .tool-discovery .tool-list { margin-top: 10px; } .tool-discovery .tool-list > li { position: relative; } .tool-discovery .tool-list > li > a { padding-right: 62px; } .tool-discovery .tool-list > li > a:hover, .tool-discovery .tool-list > li > a:focus-visible { border-color: var(--accent); background: var(--accent-soft); } .tool-favorite { position: absolute; top: 10px; right: 10px; min-width: 44px; min-height: 44px; padding: 0; border: 0; color: var(--accent); background: transparent; font: 1.4rem/1 system-ui, sans-serif; cursor: pointer; } .tool-favorite:hover { background: var(--accent-soft); border-radius: 6px; } .tool-empty, .tool-return-empty { color: var(--muted); } .tool-return { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .tool-return-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; } .tool-return-list a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; } .tool-return-list a:hover, .tool-return-list a:focus-visible { border-color: var(--accent); background: var(--accent-soft); } @media (max-width: 520px) { .tool-discovery { padding: 16px; } } @media (prefers-color-scheme: dark) { #consent-banner { background: #1c1c1a; color: #ddd; border-top-color: #444; } #consent-banner button { background: #2a2a28; color: #ddd; border-color: #666; } #consent-banner button.cb-accept { background: #ddd; color: #1c1c1a; border-color: #ddd; } }