/* ══════════════════════════════════════════════════════════════════════════ AI WORKFLOWS — DELTA over the AI Directory design system -------------------------------------------------------------------------- /workflows and its five hub contexts (category · type · industry · tag · integration) wear /ai-directory's sheet — v2-public-directory-listing.css — by using that page's own `.v2x .dir-*` class names. Sharing the sheet rather than copying it is what keeps the pages from drifting: /browser-extensions tried a snapshot first and it rotted in two days. ⚠ AN EDIT TO THE DIRECTORY SHEET NOW REACHES FOUR PAGES — /ai-directory, /browser-extensions, /gpts and /workflows. Check all four. This file holds ONLY what a catalogue of automation PROCESSES needs and a catalogue of tools has no concept of: §PLATE the icon plate — a workflow has no logo, but does have a colour §FLAG the featured / trending ribbon on the card §STRIP the step · runtime · tools figure strip §CHIP the active-filter chip row above the results §BUSY the dim-while-filtering state the directory keys on a class it does not define §HERE the "you are here" marker on the category rail §CTA the submit band (admin-gated, module-specific) §RESP the handful of responsive fixes the above need Loaded LAST of the three sheets, so it wins where it must. Everything it does not define is inherited — deliberately. If a rule here duplicates the directory's, delete it here: the point of a delta is that it stays small enough to read in one sitting. ⚠ THE TONE VOCABULARY IS THE DIRECTORY'S, NOT A NEW ONE. An unmatched `data-tone` falls back to blue SILENTLY with nothing reporting an error. Verified ranges, read off the DEPLOYED directory sheet: .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-fx-dot 6 amber blue cyan emerald rose violet ← NO indigo .dir-why-card 6 amber blue cyan emerald rose violet .dir-ts-ic / .dir-ts-opt-ic 5 amber blue cyan indigo violet ← the tight one Dark mode: the directory sheet keys dark off `body.theme-dark`. Every rule here that sets a colour declares its dark twin the same way, in the same block, so a light-only addition cannot slip through review. ══════════════════════════════════════════════════════════════════════════ */ /* ═══ §PLATE — the icon plate ══════════════════════════════════════════════ The directory's card plate carries a product logo. Every workflow has `cover_image` NULL — there is no logo to carry — but every one DOES carry `icon_name` + `color`, falling back through its category (Workflow::icon / ::accent). So the plate renders the workflow's own Font Awesome glyph on a plate tinted with the workflow's own colour. ⚠ THE ACCENT IS THE PLATE, NEVER THE GLYPH, AND THIS MUST NOT BE "SIMPLIFIED" BACK. `--wfx-accent` is whatever hex an admin typed on the workflow or its category. The seeded set alone includes #F59F00, #12B886, #20C997, #15AABF and #FD7E14, which as a glyph on a light plate measure ~2.1–2.9:1 — under even the 3:1 non-text floor, and the glyph is the plate's only content. Saturation is not luminance, which is exactly why an arbitrary admin-supplied hue can never be trusted as ink. The fix needs no per-hue table: a white scrim is painted OVER the accent, so whatever the hue, the plate lands light, and the glyph is drawn in the sheet's own guaranteed ink. Dark mode paints a dark scrim instead and flips the ink. Every hue passes in both themes by construction. `linear-gradient(rgba(...),rgba(...))` over a colour is used rather than color-mix(), which Safari did not ship until 16.2 — a plate that vanishes on an older iPhone is not a trade worth making for shorter CSS. */ .v2x.wfx .wfx-plate{ background:linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.88)),var(--wfx-accent,#3680ED); color:var(--v2-ink); display:grid;place-items:center;overflow:hidden} body.theme-dark .v2x.wfx .wfx-plate{ background:linear-gradient(rgba(16,20,28,.82),rgba(16,20,28,.82)),var(--wfx-accent,#3680ED); color:#EAF0FA} /* Glyph sizing per placement. The plate boxes themselves (66px card, 52px list row, 34px rail, 78px hero tile) all come from the directory sheet — only the glyph inside them is ours. */ .v2x.wfx .dir-tc-logo.wfx-plate i{font-size:27px;line-height:1} .v2x.wfx .dir-lc-logo.wfx-plate i{font-size:21px;line-height:1} .v2x.wfx .dir-tr-lg.wfx-plate i{font-size:14px;line-height:1} .v2x.wfx .dir-hh-tile.wfx-tile{ background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)),var(--wfx-accent,#3680ED); color:var(--v2-ink)} .v2x.wfx .dir-hh-tile.wfx-tile i{font-size:30px;line-height:1} body.theme-dark .v2x.wfx .dir-hh-tile.wfx-tile{ background:linear-gradient(rgba(20,25,34,.86),rgba(20,25,34,.86)),var(--wfx-accent,#3680ED); color:#EAF0FA} /* The category rail card's icon. `.dir-cat-card-ico` is already tone-cycled by the directory sheet (it sets --dir-plate-ink from the card's data-tone), so this only sizes the Font Awesome glyph the directory renders as an SVG. No colour is set here on purpose — inheriting keeps the rail identical to /ai-directory's. */ .v2x.wfx .dir-cat-card-ico i{font-size:29px;line-height:1} /* ═══ §FLAG — featured / trending ribbon ═══════════════════════════════════ Sits opposite `.dir-tc-rank` in the card's top row. The directory has no equivalent: its cards carry a bookmark button in this corner, which a workflow cannot (FavoriteTool is keyed on directory_tool_id and cannot hold a workflow — see the card partial's header). */ .v2x.wfx .wfx-flag{ position:absolute;top:14px;inset-inline-end:14px;z-index:3; display:inline-flex;align-items:center;gap:5px; padding:4px 9px;border-radius:999px; font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase; pointer-events:none} .v2x.wfx .wfx-flag svg{width:11px;height:11px;flex:0 0 auto} /* Inks measured on their own fills, both themes: amber #92400E on #FEF3C7 = 8.31:1 · #FBBF24 on #3B2A08 = 8.94:1 rose #9F1239 on #FFE4E6 = 8.72:1 · #FDA4AF on #3F1220 = 8.16:1 */ .v2x.wfx .wfx-flag.is-star{background:#FEF3C7;color:#92400E;box-shadow:inset 0 0 0 1px rgba(146,64,14,.16)} .v2x.wfx .wfx-flag.is-fire{background:#FFE4E6;color:#9F1239;box-shadow:inset 0 0 0 1px rgba(159,18,57,.16)} body.theme-dark .v2x.wfx .wfx-flag.is-star{background:#3B2A08;color:#FBBF24;box-shadow:inset 0 0 0 1px rgba(251,191,36,.22)} body.theme-dark .v2x.wfx .wfx-flag.is-fire{background:#3F1220;color:#FDA4AF;box-shadow:inset 0 0 0 1px rgba(253,164,175,.22)} /* The ribbon and the rank badge share the card's top band. Push the title clear of the ribbon so a long name never runs under it. */ .v2x.wfx .dir-tc .dir-tc-nm{padding-inline-end:4px} /* ═══ §STRIP — step · runtime · tools ══════════════════════════════════════ The figures that make a workflow a workflow. Each is dropped at zero by the card partial rather than printed as "0 steps" (live-count contract), so this row can be one, two or three items wide — hence flex-wrap, not a fixed grid. Ink is `--v2-muted` with the number in `--v2-ink`, matching the directory's `.dir-tc-meta` weighting so the two rows read as one system. */ .v2x.wfx .wfx-strip{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px; margin:2px 0 10px;font-size:11.8px;color:var(--v2-muted)} .v2x.wfx .wfx-fig{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .v2x.wfx .wfx-fig svg{width:13px;height:13px;flex:0 0 auto;opacity:.78} .v2x.wfx .wfx-fig b{color:var(--v2-ink);font-weight:750;font-variant-numeric:tabular-nums} .v2x.wfx .dir-lc-meta .wfx-fig{font-size:12px} /* ═══ §CHIP — active-filter chips ══════════════════════════════════════════ One-tap removal without opening the rail — the facet rail is ten groups deep here (the directory has six), so "what am I actually filtered by" needs answering above the results rather than by scrolling a sidebar. */ .v2x.wfx .wfx-chips{ display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px} .v2x.wfx .wfx-chip{ display:inline-flex;align-items:center;gap:6px; padding:5px 6px 5px 12px;border-radius:999px; background:var(--v2-accent-soft);color:var(--brand-blue-dark); border:1px solid rgba(54,128,237,.22); font-size:12.4px;font-weight:650;line-height:1.35} .v2x.wfx .wfx-chip button{ display:inline-grid;place-items:center;width:18px;height:18px; border:0;border-radius:50%;background:rgba(54,128,237,.16);color:inherit; cursor:pointer;padding:0;opacity:.82;transition:opacity .16s ease,background .16s ease} .v2x.wfx .wfx-chip button svg{width:10px;height:10px} .v2x.wfx .wfx-chip button:hover{opacity:1;background:rgba(54,128,237,.3)} .v2x.wfx .wfx-chip-clear{ border:0;background:none;padding:5px 4px;cursor:pointer; font-size:12.4px;font-weight:700;color:var(--v2-muted);text-decoration:underline; text-underline-offset:3px;transition:color .16s ease} .v2x.wfx .wfx-chip-clear:hover{color:var(--brand-blue)} body.theme-dark .v2x.wfx .wfx-chip{ background:rgba(54,128,237,.16);border-color:rgba(96,164,245,.3);color:#9CC8F9} body.theme-dark .v2x.wfx .wfx-chip button{background:rgba(96,164,245,.2)} body.theme-dark .v2x.wfx .wfx-chip button:hover{background:rgba(96,164,245,.36)} /* ═══ §BUSY — dim while filtering ══════════════════════════════════════════ `wire:loading.class="is-busy"` lands a class that NO sheet in the stack defines — the same dead-class trap /browser-extensions and /gpts both hit. Mid-filter the rows on screen are the OLD set, so they are dimmed and made inert rather than left looking interactive and current. */ .v2x.wfx .wfx-results{transition:opacity .18s ease,filter .18s ease} .v2x.wfx .wfx-results.is-busy{opacity:.45;filter:saturate(.6);pointer-events:none} /* ═══ §HERE — "you are here" on the category rail ══════════════════════════ The rail renders on the hub pages too, so on /workflows/category/marketing the Marketing card is in that rail. Without a marker it reads as a link to somewhere else. Uses the card's own tone via the ink the directory already sets, so it is one rule rather than eight. */ .v2x.wfx .dir-cat-card.is-here{ box-shadow:inset 0 0 0 2px currentColor,0 10px 30px -14px rgba(16,24,40,.3)} /* The ring itself is currentColor, so it is already theme-correct; only the drop shadow needs a twin — a near-black shadow on a dark ground is just invisible, which loses the lift that separates the current card. */ body.theme-dark .v2x.wfx .dir-cat-card.is-here{ box-shadow:inset 0 0 0 2px currentColor,0 10px 30px -14px rgba(0,0,0,.7)} .v2x.wfx .dir-cat-card.is-here .dir-cat-card-cnt{font-weight:800} /* ═══ §CTA — submit band ═══════════════════════════════════════════════════ Module-specific and admin-gated (`cta.enabled`). Built on the same dot-field-over-brand-gradient language as the directory's `.dir-why-card .is-lead`, so it reads as part of the same page rather than as a bolt-on. ⚠ THE GRADIENT IS MEASURED AT EVERY STOP, NOT ON AVERAGE, AND MUST NOT BE BRIGHTENED BACK TOWARD THE BRAND RAMP. The first version ran --brand-blue-dark → --brand-blue → #5B9BF5, which reads as the obvious brand gradient and FAILS: white measures 3.84:1 on the --brand-blue mid stop and 2.82:1 on #5B9BF5, against a 4.5 floor. Only the dark stop passed, so the band was legible at one end and not at the other — exactly the kind of miss an average hides. This ramp was solved, not guessed: each stop was darkened along its own hue until rgba(255,255,255,.92) — the BODY copy, a hair worse than the pure-white heading, so solving for it covers both — cleared 4.6:1. Then sampled at 0/10/25/40/58/70/85/100%, because the interpolated middle is what a visitor actually reads: worst across the whole band → white 5.49:1 · body 4.92:1 It ends violet rather than light blue because darkening the light stop in place turned it slate (#416FAF) and cost the band its life; travelling blue → violet stays saturated AND stays dark. */ .v2x.wfx .wfx-cta{ position:relative;overflow:hidden;isolation:isolate; margin:44px 0 8px;padding:30px 32px;border-radius:22px; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; background:linear-gradient(135deg,#1B4FB3 0%,#2F63D1 58%,#6127C4 100%); color:#fff; box-shadow:0 22px 48px -24px rgba(49,32,150,.6)} .v2x.wfx .wfx-cta-dots{ position:absolute;inset-block:0;inset-inline-end:0;width:min(340px,46%);z-index:-1; background-image:radial-gradient(rgba(255,255,255,.32) 1.5px,transparent 1.5px); background-size:17px 17px; -webkit-mask-image:linear-gradient(260deg,#000,transparent 82%); mask-image:linear-gradient(260deg,#000,transparent 82%)} .v2x.wfx .wfx-cta-tx{min-width:0;flex:1 1 420px} .v2x.wfx .wfx-cta h2{margin:0 0 6px;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:#fff} .v2x.wfx .wfx-cta p{margin:0;font-size:14.4px;line-height:1.6;color:rgba(255,255,255,.92)} .v2x.wfx .wfx-cta-btn{ flex:0 0 auto;display:inline-flex;align-items:center;gap:9px; padding:12px 22px;border-radius:12px; background:#fff;color:#1B4FB3; /* 8.59:1 */ font-size:14.2px;font-weight:750;text-decoration:none; box-shadow:0 8px 20px -10px rgba(0,0,0,.4); transition:transform .2s var(--ease-out,cubic-bezier(.16,1,.3,1)),box-shadow .2s ease,background .2s ease} .v2x.wfx .wfx-cta-btn svg{width:16px;height:16px;transition:transform .2s ease} .v2x.wfx .wfx-cta-btn:hover{background:#EEF4FF;color:#173F92;transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(0,0,0,.45);text-decoration:none} .v2x.wfx .wfx-cta-btn:hover svg{transform:translateX(3px)} /* ⚠ DELIBERATELY NO DARK TWIN for the four ink rules above (.wfx-cta h2 / p / -btn / -btn:hover), and none should be added. They are painted on the brand GRADIENT, which this band keeps in both themes — it is the page's one saturated surface and inverting it would make the CTA vanish into a dark page. The gradient does not change, so the ink measured against it does not change either: white 5.49:1 at the worst stop, in either theme. A dark twin here would be a twin for a background that never arrives. (The mask colour in §RESP is likewise theme-free: a mask reads alpha, so #000 there means "fully opaque", not "black".) Only the shadow is pulled back so it does not glow on a dark ground. */ body.theme-dark .v2x.wfx .wfx-cta{box-shadow:0 22px 48px -28px rgba(0,0,0,.8)} /* ═══ §RESP — responsive ═══════════════════════════════════════════════════ The directory sheet already reflows the grid, the rail, the facet accordion and the hero at every breakpoint, so these are ONLY the fixes this page's extra elements need. ⚠ THE BREAKPOINTS BELOW ARE THE SHARED SHEET'S, NOT BOOTSTRAP'S. Its ladder — read off the deployed file — is 1500 · 1180 · 900 · 820 · 680 · 640 · 520 · 400 · 380, and the structural ones are: 1500 .dir-g drops the trending rail (3 columns → 2) 1180 .dir-cards narrows · hero tiles hide 820 .dir-g → one column · .dir-fx becomes the accordion · toolbar wraps 680 toolbar / list rows compact 520 small-phone pass This delta first shipped on 991.98/767.98/479.98 and every one of those sat BETWEEN two of the sheet's steps, so the CTA went column-wise 140px after the page it sits on had already gone single-column, and the card ribbon shrank 40px after the card itself had. Matching the ladder is what makes the page reflow as ONE layout instead of two arguing about it. */ @media (max-width:820px){ .v2x.wfx .wfx-cta{padding:26px 22px} } @media (max-width:680px){ .v2x.wfx .wfx-cta{flex-direction:column;align-items:flex-start;text-align:start;margin-top:34px} .v2x.wfx .wfx-cta-btn{width:100%;justify-content:center} .v2x.wfx .wfx-cta-dots{width:100%;-webkit-mask-image:linear-gradient(200deg,#000,transparent 78%); mask-image:linear-gradient(200deg,#000,transparent 78%)} .v2x.wfx .wfx-strip{gap:5px 10px;font-size:11.4px} /* 16px is the threshold below which iOS zooms the viewport on focus. The SHARED sheet sets .dir-hh-search input to 15.5px and drops it to 14px on small screens, so /ai-directory, /browser-extensions and /gpts all zoom on an iPhone. Fixing it in the shared sheet would move three other pages, so this override is scoped to .v2x.wfx — the shared miss is real and is worth a separate pass. */ .v2x.wfx .dir-hh-search input{font-size:16px} } @media (max-width:520px){ .v2x.wfx .wfx-flag span{display:none} /* icon-only ribbon */ .v2x.wfx .wfx-flag{padding:5px;border-radius:50%} .v2x.wfx .wfx-chips{gap:6px} } @media (prefers-reduced-motion:reduce){ .v2x.wfx .wfx-cta-btn,.v2x.wfx .wfx-cta-btn svg,.v2x.wfx .wfx-results{transition:none} .v2x.wfx .wfx-cta-btn:hover{transform:none} }