/* ══════════════════════════════════════════════════════════════════════ AIToolsay · /ai-skills — DELTA sheet --------------------------------------------------------------------- Loaded AFTER assets/css/ext/v2-public-directory-listing.css (which is /ai-directory's OWN live stylesheet, not a copy). This file holds ONLY what the capability listing needs on top of it: §PLATE the icon plate that replaces the directory's logo §HERO the four hero tiles (contrast-measured, one set both themes) §FEAT the featured star on a card §SUP the "n tools" support badge §CHIP active-filter chips §BUSY the mid-filter dim (the base sheet has NO `is-busy` rule) §CUR "you are here" on the category rail (no rule in the base sheet) §CTA the closing call to action ⚠ Anything that belongs to a `dir-*` component shared with /ai-directory, /browser-extensions and /gpts goes in the BASE sheet so all four pages move together — never here as a skills-only override. The one lesson that cost a redesign already: an override that flattened `.dir-tc-btn` to a single blue killed the per-card tone cycling that IS the look of the grid. TONE RANGES of the base sheet (verified against the deployed file — read them there before adding a tone, do not guess; an out-of-range value does not error, it silently renders blue): .dir-fx-dot 6 amber blue cyan emerald rose violet .dir-hh-stat 12 amber blue cyan emerald green indigo orange pink rose slate teal violet .dir-tc-pill 10 amber blue cyan emerald indigo orange rose slate teal violet .dir-cat-card 8 amber blue cyan emerald indigo orange rose violet .dir-why-card 6 amber blue cyan emerald rose violet .dir-ts-ic 5 amber blue cyan indigo violet ══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ §PLATE — capability icon plate --------------------------------------------------------------------- The directory's cards show a product LOGO (or a monogram fallback). Capabilities have no logo, so every plate renders the capability's own icon instead. It deliberately inherits `color` from the plate box it sits in, which means inside .dir-tc-logo / .dir-lc-logo it picks up the card's tone-cycled --dtc-ink-dark for free — so the 8-tone cycle that gives the grid its rhythm keeps working, unchanged, with zero new colour decisions and no new contrast surface. The per-skill `ai_skills.color` is deliberately NOT used here. Its six values measure 2.89–5.27:1 against a pale plate of themselves, so two of them (#0CA678 · 2.95, #F76707 · 2.89) sit under the 3:1 non-text floor. The base sheet's tone cycle is already verified, and matching the directory's design language is the point of this page. The skill's own accent still drives the DETAIL page, via --skl-accent on .sklx. ══════════════════════════════════════════════════════════════════════ */ .v2x .skl-plate{display:grid;place-items:center;width:100%;height:100%;color:inherit} .v2x .skl-plate svg{width:56%;height:56%;max-width:34px;max-height:34px} /* The trending rail's plate is NOT tone-cycled — .dir-tr-lg is a fixed --v2-accent-soft box in the base sheet — so it takes the brand ink. */ .v2x .skl-plate.is-rail{color:var(--brand-blue-dark,#2060C0)} .v2x .skl-plate.is-rail svg{width:60%;height:60%} body.theme-dark .v2x .skl-plate.is-rail{color:var(--brand-blue-light,#8FC0F8)} /* The list row's plate is smaller than the grid card's (52px vs 66px). */ .v2x .dir-lc-logo .skl-plate svg{max-width:27px;max-height:27px} /* ══════════════════════════════════════════════════════════════════════ §HERO — the four orbit tiles --------------------------------------------------------------------- /ai-directory puts four model LOGOS here. Skills have no artwork, so each tile carries the capability's icon on a solid plate, cycled through four gradients by tile index. MEASURED, not eyeballed. One set serves BOTH themes. Every value below clears two floors simultaneously — white glyph ≥ 4.5:1 at BOTH gradient stops, and plate-vs-tile-ground ≥ 3:1 on the dark tile (#1C1F2A), which is the tighter of the two constraints and the reason violet and rose are lighter here than the base sheet's: blue #2C6FD1 → #1B4C9E white 4.88 / 8.16 vs dark tile 3.36 violet #8250E8 → #5B21B6 white 4.93 / 8.98 vs dark tile 3.33 teal #0B7A66 → #075E52 white 5.26 / 7.69 vs dark tile 3.12 rose #CE2E63 → #9B1C46 white 5.01 / 7.93 vs dark tile 3.28 Worst case 4.88 (text floor 4.5) and 3.12 (non-text floor 3.0). Darkening a first stop raises the glyph ratio but drops the dark-tile ratio, so the usable band is narrow — re-measure both if you touch one. ══════════════════════════════════════════════════════════════════════ */ .v2x .skl-hh-plate{display:grid;place-items:center;width:100%;height:100%; border-radius:14px;color:#fff; background-image:linear-gradient(135deg,var(--skl-g1) 0%,var(--skl-g2) 100%); box-shadow:0 6px 16px -6px var(--skl-gs,rgba(16,24,40,.4)); transition:transform .3s var(--ease-out,cubic-bezier(.16,1,.3,1))} .v2x .skl-hh-plate svg{width:56%;height:56%;max-width:30px;max-height:30px} .v2x .dir-hh-tile:hover .skl-hh-plate{transform:scale(1.06)} .v2x .skl-hh-plate[data-tone="blue"] {--skl-g1:#2C6FD1;--skl-g2:#1B4C9E;--skl-gs:rgba(44,111,209,.45)} .v2x .skl-hh-plate[data-tone="violet"]{--skl-g1:#8250E8;--skl-g2:#5B21B6;--skl-gs:rgba(130,80,232,.45)} .v2x .skl-hh-plate[data-tone="teal"] {--skl-g1:#0B7A66;--skl-g2:#075E52;--skl-gs:rgba(11,122,102,.45)} .v2x .skl-hh-plate[data-tone="rose"] {--skl-g1:#CE2E63;--skl-g2:#9B1C46;--skl-gs:rgba(206,46,99,.45)} /* .dir-hh-tip is deliberately NOT overridden here. It is a permanently visible CAPTION (the base sheet gives it no hover gate) set in white-space:nowrap, so its second line must stay short — the directory puts a maker name there. This page puts the CATEGORY there for the same reason. An earlier version put the skill's tagline in that slot and added `white-space:normal;max-width:190px` here to cope; the result was three lines of mid-word-truncated text under every tile, colliding with the hero copy. Keep the caption short instead of teaching the tip to wrap. */ /* ══════════════════════════════════════════════════════════════════════ §FEAT — featured marker The directory uses the top-right slot for a bookmark button. Skills are not a favouritable entity (favourites coerce unknown types to `directory_tool`, which would silently save the wrong row), so the slot is free and carries the featured star instead. ══════════════════════════════════════════════════════════════════════ */ .v2x .skl-tc-feat{position:absolute;top:12px;inset-inline-end:12px;z-index:3; display:inline-grid;place-items:center;width:26px;height:26px;border-radius:9px; background:rgba(245,158,11,.14);color:#A85B08; box-shadow:inset 0 0 0 1px rgba(245,158,11,.24); transition:transform .3s var(--ease-spring,cubic-bezier(.16,1.3,.3,1))} .v2x .skl-tc-feat svg{width:14px;height:14px} .v2x .dir-tc:hover .skl-tc-feat{transform:scale(1.1) rotate(8deg)} body.theme-dark .v2x .skl-tc-feat{background:rgba(245,158,11,.2);color:#FBC97A; box-shadow:inset 0 0 0 1px rgba(251,191,36,.3)} /* ══════════════════════════════════════════════════════════════════════ §SUP — "n tools" support badge (list rows) Rendered only when tools_count > 0: most capabilities have nothing mapped yet on this install and "0 tools" reads as a broken catalogue rather than as an honest zero (live-count contract). ══════════════════════════════════════════════════════════════════════ */ .v2x .skl-sup{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px; font-size:11.5px;font-weight:650;color:var(--v2-muted); background:var(--v2-bg);box-shadow:inset 0 0 0 1px var(--v2-line)} .v2x .skl-sup svg{width:12px;height:12px;opacity:.8} .v2x .skl-sup b{color:var(--v2-ink);font-weight:800;font-variant-numeric:tabular-nums} body.theme-dark .v2x .skl-sup{background:rgba(255,255,255,.05)} /* ══════════════════════════════════════════════════════════════════════ §CHIP — active-filter chips A second, always-visible readout of what is narrowing the list. The facet rail collapses to its header on ≤820px, so without these the filter state would be completely hidden on mobile — which is when it matters most. ══════════════════════════════════════════════════════════════════════ */ .v2x .skl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} .v2x .skl-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 12px; border-radius:999px;font-size:12.5px;font-weight:650;line-height:1.2; color:var(--brand-blue-dark,#2060C0);background:var(--v2-accent-soft,#eaf1fe); box-shadow:inset 0 0 0 1px rgba(54,128,237,.22)} .v2x .skl-chip button{display:inline-grid;place-items:center;width:19px;height:19px;padding:0; border:0;border-radius:50%;cursor:pointer;color:inherit;background:rgba(54,128,237,.16); transition:background .18s ease,transform .18s ease} .v2x .skl-chip button svg{width:11px;height:11px} .v2x .skl-chip button:hover{background:rgba(54,128,237,.3);transform:rotate(90deg)} .v2x .skl-chip button:focus-visible{outline:2px solid var(--brand-blue,#3680ED);outline-offset:2px} body.theme-dark .v2x .skl-chip{color:#8FC0F8;background:rgba(54,128,237,.16); box-shadow:inset 0 0 0 1px rgba(96,164,245,.28)} body.theme-dark .v2x .skl-chip button{background:rgba(96,164,245,.2)} body.theme-dark .v2x .skl-chip button:hover{background:rgba(96,164,245,.34)} /* ══════════════════════════════════════════════════════════════════════ §BUSY — mid-filter state `wire:loading.class="is-busy"` lands a class the BASE SHEET DEFINES NOWHERE (verified: zero occurrences). Without this rule the attribute is inert and the rows on screen during a filter round-trip are the OLD set, fully interactive, with nothing saying so. `.dir-cards` has its own `.is-loading` rule; this covers the list layout too and is the single class both branches use. ══════════════════════════════════════════════════════════════════════ */ .v2x .skl-results{transition:opacity .18s ease} .v2x .skl-results.is-busy{opacity:.55;pointer-events:none} /* ══════════════════════════════════════════════════════════════════════ §CUR — "you are here" on the category rail The rail renders on the category hubs too, so one of its cards is the page you are already on. The base sheet has no `is-current` rule, so without this the current category is indistinguishable from a link to somewhere else. ══════════════════════════════════════════════════════════════════════ */ .v2x .dir-cat-card.is-current{box-shadow:inset 0 0 0 2px var(--brand-blue,#3680ED),0 10px 26px -14px rgba(16,24,40,.28)} .v2x .dir-cat-card.is-current .dir-cat-card-nm::after{content:"•";margin-inline-start:7px;color:var(--brand-blue,#3680ED)} body.theme-dark .v2x .dir-cat-card.is-current{box-shadow:inset 0 0 0 2px var(--brand-blue-light,#60A4F5),0 10px 26px -14px rgba(0,0,0,.6)} /* ══════════════════════════════════════════════════════════════════════ §CTA — closing band ══════════════════════════════════════════════════════════════════════ */ .v2x .skl-cta{margin:56px 0 8px} .v2x .skl-cta-in{display:flex;align-items:center;gap:20px;padding:26px 28px;border-radius:22px; background-image:linear-gradient(135deg,#2560B8 0%,#17408A 100%);color:#fff; box-shadow:0 20px 44px -24px rgba(23,64,138,.7)} .v2x .skl-cta-ico{flex:0 0 auto;display:grid;place-items:center;width:54px;height:54px;border-radius:16px; background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} .v2x .skl-cta-ico svg{width:26px;height:26px} .v2x .skl-cta-tx{flex:1 1 auto;min-width:0} .v2x .skl-cta-tx h2{margin:0 0 4px;font-size:1.32rem;font-weight:800;letter-spacing:-.02em;color:#fff} /* MEASURED against BOTH gradient stops, which is the part that is easy to get wrong: the first stop is the light one and therefore the binding constraint. On the original #2C6FD1 first stop this line was 4.06:1 — under the 4.5 floor — even though it cleared comfortably on the second. With the darker gradient above it is 4.98 (stop 1) / 7.71 (stop 2), and the white h2 is 6.10 / 9.83. Re-measure stop 1, not stop 2, if you re-tone this band. */ .v2x .skl-cta-tx p{margin:0;font-size:13.6px;line-height:1.55;color:rgba(255,255,255,.86)} .v2x .skl-cta-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px; padding:12px 20px;border-radius:12px;font-size:14px;font-weight:750;text-decoration:none; color:#17408A;background:#fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.4); transition:transform .2s var(--ease-out,cubic-bezier(.16,1,.3,1)),box-shadow .2s ease} .v2x .skl-cta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(0,0,0,.5);color:#17408A} .v2x .skl-cta-btn:focus-visible{outline:2px solid #fff;outline-offset:3px} .v2x .skl-cta-btn svg{transition:transform .2s ease} .v2x .skl-cta-btn:hover svg{transform:translateX(3px)} @media (max-width:680px){ .v2x .skl-cta-in{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 20px} .v2x .skl-cta-btn{width:100%;justify-content:center} } /* ══════════════════════════════════════════════════════════════════════ RESPONSIVE — the base sheet already handles the dir-* components at 1180 / 820 / 680. Only the skills-only pieces need breakpoints here. ══════════════════════════════════════════════════════════════════════ */ @media (max-width:820px){ .v2x .skl-cta{margin-top:40px} } @media (max-width:480px){ .v2x .skl-chips{gap:6px} .v2x .skl-chip{font-size:11.8px;padding:4px 5px 4px 10px} .v2x .skl-cta-tx h2{font-size:1.16rem} } /* Coarse pointers never hover — drop the lifts so a tap doesn't stick. */ @media (hover:none){ .v2x .dir-hh-tile:hover .skl-hh-plate{transform:none} .v2x .dir-tc:hover .skl-tc-feat{transform:none} .v2x .skl-cta-btn:hover{transform:none} } @media (prefers-reduced-motion:reduce){ .v2x .skl-hh-plate,.v2x .skl-tc-feat,.v2x .skl-cta-btn, .v2x .skl-cta-btn svg,.v2x .skl-chip button,.v2x .skl-results{transition:none} .v2x .dir-hh-tile:hover .skl-hh-plate, .v2x .dir-tc:hover .skl-tc-feat, .v2x .skl-cta-btn:hover{transform:none} .v2x .skl-chip button:hover{transform:none} }