:root { --paper: #f5f1e8; --paper-raised: #fffdf7; --ink: #1c1a15; --ink-soft: #5a5646; --ink-faint: #8a8570; --rule: #d8d0bc; --rule-strong: #b9ae8c; --accent: #b5482f; --accent-soft: #f0ded7; --focus: #1c1a15; --radius-sm: 3px; --radius-md: 6px; --font-serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-mono: "SFMono-Regular", "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace; /* One accent per category, cycled deterministically by index. */ --cat-0: #b5482f; --cat-1: #2f5f4f; --cat-2: #33567e; --cat-3: #8a5a2f; --cat-4: #6a4a8a; --cat-5: #3f6b3f; } /* ---------- Dark theme ---------- Toggled via [data-theme="dark"] on (set by the anti-FOUC inline script in index.html + assets/js/portal.js). Same token names as the light palette above are redefined here — every rule in this file already reads var(--paper)/var(--ink)/etc., so the whole page repaints without touching component styles. --focus and .brand-tile invert automatically because they're derived from --ink/--paper. */ html[data-theme="dark"] { --paper: #1b1914; --paper-raised: #262319; --ink: #ece6d6; --ink-soft: #b7ae95; --ink-faint: #8f8870; --rule: #3a362a; --rule-strong: #55503e; --accent: #e2825f; --accent-soft: #3a2620; --focus: #ece6d6; --cat-0: #e2825f; --cat-1: #7fbf9f; --cat-2: #8fb6e0; --cat-3: #d3a15f; --cat-4: #b39ce0; --cat-5: #8fcf8f; } * { box-sizing: border-box; } html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { margin: 0; background: var(--paper); background-image: linear-gradient(var(--rule) 1px, transparent 1px); background-size: 100% 2.6rem; color: var(--ink); font-family: var(--font-serif); line-height: 1.5; min-height: 100vh; /* Defense-in-depth for 320-500px viewports: nothing on this page needs horizontal scroll, so clip any future/edge-case overflow at the document level rather than let it introduce a page-wide scrollbar. */ overflow-x: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Matches web-countdown's .page container (the site's standard width/ centering) so both pages line up if opened side by side. */ .page { max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; } /* ---------- Masthead (standardized 2-line header — see web-countdown for the sibling implementation; keep both in sync if this pattern changes) ---------- */ .masthead { padding-bottom: 1.15rem; } .masthead-rule { border: none; border-top: 2px solid var(--ink); margin: 0 0 2.5rem; } .masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .masthead-brand { display: flex; align-items: center; gap: 0.65rem; min-width: 0; } .home-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: 50%; color: var(--ink-soft); text-decoration: none; transition: background-color 0.12s ease, color 0.12s ease; } a.home-icon:hover { background: var(--accent-soft); color: var(--ink); } a.home-icon:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .home-icon--current { opacity: 0.35; cursor: default; } @media (prefers-reduced-motion: reduce) { .home-icon { transition: none; } } .brand-tile { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); font-size: 1.05rem; } .brand-title { font-size: clamp(1.3rem, 3.2vw, 1.6rem); margin: 0; min-width: 0; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .masthead-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } /* Theme toggle — icon-only circular button; sun/moon cross-fade uses only opacity/transform (GPU-only rule) and is skipped under reduced motion. */ .theme-toggle { position: relative; width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--paper-raised); color: var(--ink-soft); cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, transform 0.1s ease; } .theme-toggle:hover { border-color: var(--ink); color: var(--ink); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .theme-icon { position: absolute; width: 1.1rem; height: 1.1rem; transition: opacity 0.15s ease, transform 0.15s ease; } .theme-icon--sun { opacity: 1; transform: scale(1) rotate(0deg); } .theme-icon--moon { opacity: 0; transform: scale(0.5) rotate(-40deg); } html[data-theme="dark"] .theme-icon--sun { opacity: 0; transform: scale(0.5) rotate(40deg); } html[data-theme="dark"] .theme-icon--moon { opacity: 1; transform: scale(1) rotate(0deg); } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-icon { transition: none; } } .masthead-sub { font-size: 1.05rem; color: var(--ink-soft); margin: 0.6rem 0 0; max-width: 46ch; } .controls { margin: 0 0 2.5rem; display: flex; flex-direction: column; gap: 0.9rem; } .search-input { font-family: var(--font-mono); font-size: 0.95rem; padding: 0.75rem 1rem; background: var(--paper-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); color: var(--ink); width: 100%; max-width: 420px; } .search-input::placeholder { color: var(--ink-faint); } .search-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .category-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; background: transparent; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0.4rem 0.85rem; color: var(--ink-soft); cursor: pointer; transition: transform 0.12s ease, background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .chip:hover { border-color: var(--ink); color: var(--ink); } .chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .chip:active { transform: scale(0.97); } .chip-active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .chip-active:hover { color: var(--paper); } /* ---------- States ---------- */ .state-panel { padding: 3.5rem 1.5rem; text-align: center; } .state-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.5rem; } .state-body { color: var(--ink-soft); margin: 0; max-width: 42ch; margin-inline: auto; } .state-hint { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); margin-top: 0.75rem; } .state-panel code, .state-body code { font-family: var(--font-mono); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0.1rem 0.35rem; font-size: 0.85em; } .loading-mark { width: 2.25rem; height: 2.25rem; margin: 0 auto 1rem; border: 2px solid var(--rule-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .loading-mark { animation: none; opacity: 0.7; } } /* ---------- Catalog ---------- */ #catalog { display: flex; flex-direction: column; gap: 2.75rem; } .category-section { scroll-margin-top: 1rem; } .category-heading { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 1.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); } .category-heading h2 { font-size: 1.2rem; margin: 0; font-weight: 600; } .category-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .tool-card { display: flex; flex-direction: column; gap: 0.65rem; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 1.25rem; text-decoration: none; color: var(--ink); border-left: 3px solid var(--card-accent, var(--accent)); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; /* Stagger Reveal (uimotion.fyi #22): each card fades/rises in with a small offset-and-delay driven by --i (set in portal.js). Communicates that the catalog is a deliberately ordered list, not a content dump. */ opacity: 0; animation: tool-card-in 0.4s ease both; animation-delay: calc(var(--i, 0) * 45ms); } @keyframes tool-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .tool-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -10px rgba(28, 26, 21, 0.35); } .tool-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .tool-card { animation: none; opacity: 1; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .tool-card:hover { transform: none; } } .card-head { display: flex; align-items: center; gap: 0.6rem; } .card-icon { font-size: 1.2rem; color: var(--card-accent, var(--accent)); width: 1.6rem; text-align: center; flex-shrink: 0; } .card-name { font-size: 1.05rem; font-weight: 600; margin: 0; } .card-tagline { color: var(--ink-soft); font-size: 0.92rem; margin: 0; } .card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.4rem; } .card-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 0.15rem 0.4rem; } /* ---------- Footer ---------- */ .page-footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); text-align: center; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-faint); } .page-footer code { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0.1rem 0.35rem; } .app-version { margin-top: 0.35rem; opacity: 0.6; } .app-version:empty { display: none; } /* ---------- Mobile (320-500px) ---------- Verified via CDP (Emulation.setDeviceMetricsOverride, mobile:false — mobile:true triggers a 4x viewport bug in this Chrome build) at 320/375/ 414/500px: no horizontal overflow found on this page pre-existing, this block only lifts the masthead's two interactive controls to the 44x44px minimum touch target (home-icon/theme-toggle are 33.6px on desktop, deliberately compact there — only bumped for touch here). */ @media (max-width: 500px) { .home-icon, .theme-toggle { width: 2.75rem; height: 2.75rem; } /* When the title wraps and pushes .masthead-actions to its own line, margin-left: auto keeps it pinned to the right instead of collapsing to flex-start (space-between has nothing to distribute for a lone item on a wrapped line). */ .masthead-actions { margin-left: auto; } .page { padding: 2rem 1rem 4rem; } }