mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
9ffd3211d5
* Add neo kinpaku design system page * skill: rip out baked-in category recipes and saturated-default motion tropes Programmatic bias mining (impeccable-evals) traced four major defects back to specific lines in this skill that contradicted SKILL.md's own first-order-reflex warning: - brand.md "Pairing and voice" prescribed four category→aesthetic recipes (editorial → serif+sans, tech/dev/fintech → tight tracking, consumer/food/travel → script/display serif, creative → rule-break). These directly drove OpenAI's 76% extreme-negative letter-spacing on tech briefs and Anthropic/Google's 28-34% italic-serif-display slop on editorial/food briefs. Replaced with one sentence: the shape depends on the brand, not on the brand's category. - brand.md "Brand permissions" had "Typographic risk. Enormous display type, unexpected italic cuts, mixed cases, hand-drawn headlines, a single oversize word as a hero." — a four-for-one slop driver behind 97% OpenAI comically-large H1, 42% bad-SVG illustration, and the editorial-italic slop. Deleted outright. - typeset.md and teach.md repeated the same category recipes; trimmed to the principle without the recipe. - SKILL.md Typography: added a hard hero-H1 ceiling (clamp() max ≤ 6rem ≈ 96px), with a <codex> block to make it explicit since OpenAI over-indexes here (97% ≥128px vs 24% for Anthropic). - animate.md, bolder.md, brand.md: removed "staggered reveals" and "scroll-triggered transitions" as the prescribed default ambitious motion. By 2026 that's the saturated AI tell, not a choreography. Reserved stagger for legitimate list-sibling rhythm. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: anti-cream + codex-specific defect bans + universal slop bans Second pass after measuring more biases against the eval corpus. - SKILL.md Color: explicit "cream/sand/beige body bg is the saturated AI default of 2026" rule. Tone down the "tint every neutral" line so it doesn't read as "default to warm-tinted near-white" (which OpenAI hits at 74% and Anthropic at 31%-47%). - SKILL.md Absolute bans: add universal bans for two slop patterns detected at 55-95% across providers — tiny uppercase tracked eyebrow above every section (the 2023-era kicker that's now AI grammar) and numbered section markers (01/02/03). Also explicit "text that overflows its container is the universal defect on tablet/mobile." - SKILL.md Absolute bans → <codex> block: ban the GPT-specific defects Paul annotated repeatedly — `border:1px solid` + soft-wide-shadow (≥16px blur) "ghost cards", `border-radius:32px+` over-rounding, hand-drawn/sketchy SVG illustrations (loose-sketch / *-sketch classes, feTurbulence paper-grain filters), repeating-linear-gradient stripes, "X theater" AI-slop copy phrases. - SKILL.md Motion → <gemini> block: the image :hover transform tell (38% Google skill-on rate). Hover effects on images add no info; the image isn't an action target. Animate card chrome, not the image. - SKILL.md Typography: hard display letter-spacing floor ≥-0.04em (OpenAI defaults to -0.075em → cramped). Existing hero ceiling <codex> block extended with the letter-spacing rule. - codex.md Step A example: stop seeding "warm-grounded (deep oxblood + cream)" as the warm-palette template, which primes the cream default. - colorize.md Tinted backgrounds: stop printing the literal cream recipe `oklch(97% 0.01 60)`; replace with brand-anchored guidance. - document.md examples: warm-ash-cream → cool-paper so the example doesn't seed cream as the canonical neutral example. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: universal anti-slop bans + contrast/font-count/all-caps-body rules Third pass after measuring the rest of the cross-provider matrix: - Color: explicit "Verify contrast" rule. Low-contrast text fires at 68% across all providers skill-on (90+% off). The most common failure is muted gray body on a tinted near-white; light-gray-for- elegance is named as the single biggest cause of unreadable AI pages. - Typography: max-3-font-families rule. Overused-fonts (>4 families) fires at 28% Anthropic / 36% Google / 0% OpenAI skill-on; >50% off. Also: universal "no all-caps body copy" (moved from brand-only ban to Shared design laws since product-register also overuses caps). - Copy: anti-aphoristic-cadence ban targets Anthropic's signature "X. No Y." / "X. Just Y." voice (63% skill-on copy-slop rate, 77% off — the worst rate in the matrix). Once-is-voice / three-or-more- is-tell framing per the runner's copy-slop detector. - Copy: anti-SaaS-buzzword-string ban with the literal phrase list the detector watches for (streamline/empower/supercharge, trusted- by-leading, best-in-class/enterprise-grade/cutting-edge, etc). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: strengthen anti-cream rule across full warm-neutral band Smoke validation showed the cream fix worked for Google + OpenAI but Anthropic Sonnet italian-restaurant still shipped `--paper: oklch(90% .018 88)` — cream just outside the L≥95% band the rule cited. Broaden the rule: - Band: OKLCH L 0.84-0.97, C < 0.06, hue 40-100 (was 95-97% / 60-95). - Name the token-name tells explicitly (paper / cream / sand / bone / flour / linen / parchment / wheat / biscuit / ivory) — the model defaults to one of these regardless of what hex it lands on. - Call out the specific brief patterns ("warm, traditional, family- coastal-Italian" / "editorial-restraint") that the model translates into cream by reflex. Then provide three explicit non-cream options: saturated brand color, true off-white at C=0, or darker mid-tone. Warmth in the brand is carried by accent + typography + imagery, not by body bg. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * v3.2.0: skill bias-fix release Bumps version from 3.1.1 to mark the four-commit skill cleanup that rips out baked-in category recipes (brand.md), saturated-default motion tropes (staggered reveals everywhere), the cream/sand body-bg AI tell, codex-specific defects (1px+wide-shadow, over-rounding, hand-drawn SVGs, stripes, X-theater copy), the extreme-letter-spacing default, and universal slop bans (all-caps eyebrow on every section, numbered-section markers, all-caps body, font-family-count > 3, aphoristic copy cadence, SaaS buzzword strings). Plus a hard hero-H1 ceiling (clamp() ≤6rem) and a Gemini-specific image:hover transform block. Validated against ~190 post-fix samples — see impeccable-evals biases tab for per-provider deltas. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * drop "no pure black/white" rule entirely The rule was contested in the design world and causing more damage than good — pushing every page into the tinted-near-white default which is the cream/sand AI tell we already explicitly ban elsewhere. Vercel, SVKMS, Brutalist sites, et al. use pure black/white successfully; the skill shouldn't second-guess that. Skill markdown deletions: - SKILL.md Color: drop the "Never use #000 or #fff" bullet. - color-and-contrast.md: drop the "Never Use Pure Gray or Pure Black" subsection, the "Never pure black" table-row prescription, and the "Avoid: Using pure black for large areas" bullet. - colorize.md: drop the "NEVER use pure black or pure white for large areas" bullet. - polish.md: drop the "Tinted neutrals: No pure gray or pure black" half of the bullet (the gray-on-color bullet survives). Detector code (cli/engine): - registry/antipatterns.mjs: remove the `pure-black-white` entry. - rules/checks.mjs: remove the three `findings.push({ id: 'pure-black-white', ... })` emit points (inline #000 bg, Tailwind bg-black class, plain-HTML scan path). - engines/regex/detect-text.mjs: remove the two pure-black-white regex rules (CSS `background: #000…` + Tailwind `bg-black`). - detect-antipatterns-browser.js: regenerated via scripts/build-browser-detector.js. Tests: - detect-antipatterns-fixtures.test.mjs: invert the assertion that pure-black-white fires; expect it to NOT fire post-v3.2. Drop the Tailwind bg-black-opacity edge-case test (no longer relevant). - detect-antipatterns.test.js: drop the standalone "detects pure- black-white in styled-components" test and remove pure-black-white from the multi-detector assertions in PricingCard, globals.css, and GlobalStyle.tsx tests. 166 bun tests pass; 24 node fixture tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: strip example patterns from copy rules, strengthen gemini block v3.2 rerun validation surfaced two issues: 1. Copy-slop detector fires more on Gemini under v3.2 (48% → 84%) than under no-skill baseline. Root cause: the anti-aphoristic-cadence rule printed the literal "X. No Y." / "X. Just Y." patterns as examples, and Gemini imitated them as the recommended voice. Same recipe-becomes- bias trap we hit with brand.md:116's "Enormous display type, unexpected italic cuts, mixed cases, hand-drawn headlines" enumeration. Fix: describe the cadence as a rhythm ("serious statement, then punchy short negation") without printing literal patterns. Buzzword list trimmed to a single inline phrase family rather than quoted strings. 2. Gemini image:hover transform Gemini-tell hadn't dropped (31% off → 32% v3.2). Strengthen the <gemini> block: explicit "Never animate <img> elements on hover", call out the Tailwind group-hover:scale / group-hover:rotate / group-hover:translate parent-hover patterns by name (Gemini was reaching for these via Tailwind even though the prior text talked about :hover on the image directly). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: simplify context loading and inline register directive Replaces load-context.mjs's JSON output with a tight markdown block from the renamed context.mjs. The script now extracts PRODUCT.md's `## Register` field and appends a `NEXT STEP:` directive naming the matching reference (brand.md / product.md), which moved Gemini from skipping the register load entirely to honoring it. Drops the `.impeccable.md` auto-migration; makes IMPECCABLE_CONTEXT_DIR a lazy escape hatch consulted only when the default paths come up empty. Setup is now four bullets in one list. The DESIGN.md nudge is gone; in its place, a "familiarize with the existing design system" step that calls out CSS / tokens / running app as authoritative sources alongside DESIGN.md. The standalone `### Register` H3 stays for the cascade rules (task cue → surface → register field). New LLM-backed test suite at tests/skill-behavior/ runs five scenarios against claude-haiku-4-5, gpt-5.4-mini, and gemini-3.1-flash-lite via Vercel AI SDK. Captures real tool traces, asserts on context.mjs calls, brand.md loads, and teach.md fallback. Skips cleanly when API keys are unset. 13-14/15 pass; only stable failure is the v3.2.0-era gpt-mini S4 "don't re-run" regression. Adds @ai-sdk/google as devDep and the test:skill-behavior npm script. Touches em-dashes in skill/SKILL.md and four reference files so `bun run build:skills` passes its skill-prose validator. teach.md and document.md drop their "re-run the loader to refresh session cache" steps since the agent's own write is now the freshest source. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: merge orphan reference files into command sub-skills + inline S-tier invariants Two related restructurings: 1. SKILL.md now carries the cross-domain invariants that catch defects in any project (contrast/placeholder/gray-on-color, similar-font pairing, text-wrap, tabular-nums, centered-stack default, Flex/Grid choice, auto-fit grids, semantic z-index, reduced motion, stagger vs section-fade, premium motion materials, focus-visible, placeholders-aren't-labels, dropdown overflow trap, button/link copy). Greenfield-only rules (theme picking, color strategy, tinted neutrals) live under "New projects only". 2. Reference files merged into their command counterparts: - spatial-design.md -> layout.md - motion-design.md -> animate.md - color-and-contrast.md -> colorize.md - responsive-design.md -> adapt.md - ux-writing.md -> clarify.md - typography.md -> typeset.md (bolder.md redirected) - cognitive-load.md + heuristics-scoring.md + personas.md -> critique.md craft.md and shape.md "load references" lists updated to new file homes. interaction-design.md stays standalone (no 1:1 command verb). Net: 36 -> 27 reference files. Same content, fewer files, no orphaned reference loaded only from craft.md. Also extends the routing rules: if the user's first word doesn't match a command but the intent clearly maps to one, load that command's reference and proceed as if invoked. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: add sub-command + existing-project scenarios; move sub-command load to step 2 Adds three new LLM-backed scenarios to tests/skill-behavior: - S6: `/impeccable polish` → loads polish.md - S7: `/impeccable audit` → loads audit.md - S8: existing SvelteKit project (PRODUCT.md + DESIGN.md + src/app.css + src/lib/components/*.svelte + src/routes/+page.svelte) → agent reads at least one project code file to understand the existing design system S6/S7 surface a real model-floor: gpt-5.4-mini reads brand.md, reads the target index.html, and just does the polish/audit without ever loading the sub-command reference. Stronger SKILL.md wording didn't move it. Captured in the README baseline as a known weakness. Claude and Gemini honor the load reliably. To fix Gemini on S6/S7, sub-command reference loading is now Setup step 2 (right after context.mjs), not step 4 — placing it before the model gets focused on "doing the work". Step 3 (design-system familiarization) is tightened to require at least one project code read even when a sub-command reference loads in step 2, so Claude doesn't laser-focus on the sub-command flow and skip the broader exploration. Two new fixtures: MINIMAL_LANDING_HTML (a tiny static landing page for S6/S7) and SVELTE_PROJECT_FILES (a minimal SvelteKit scaffold with tokens, components, and a routes/+page.svelte for S8). Both designed to look real enough that agents treat them as production code. Suite is now 24 tests across three providers; baseline is 21-22/24, with the stable failures being gpt-5.4-mini scenarios 6 and 7. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: add reveal-animation safety rule (must enhance, not gate visibility) Class-triggered visibility transitions pause on hidden tabs and headless renderers. The italian-restaurant smoke produced a build where 2 sections shipped opacity:0 because the CSS transition never advanced past currentTime=0 (timeline paused). Added one-liner under Motion to prevent the antipattern: reveals must enhance an already-visible default, never gate content visibility on a class-triggered transition. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: restore prescriptive cream/sand/beige paragraph Bisection across 5 historical skill commits on Gemini 3.5 flash fast lane n=3 found that0cf2debdwas the peak quality state. The regression between0cf2debdand HEAD came from simplifying the long anti-cream paragraph into a one-liner. Restoring the paragraph (with em-dashes replaced by parens to satisfy prose lint) recovers ~0.22pt average on Gemini vs HEAD, with the largest gains on: - 09-luxury-hotel: +0.50 (restores editorial drama in photo-led briefs) - 10-food-magazine: +0.67 - 03-italian-restaurant: +0.51 The paragraph's load-bearing parts are the (a)(b)(c) alternatives that give the model actionable replacements for cream-tinted body bg ("saturated brand color as body", "true off-white at chroma 0", "darker mid-tone tinted neutral"). Without them, the one-line warning left the model with no concrete alternative. Cross-provider validation showed the pattern matches historical behavior: Gemini benefits from prescriptive scaffold (+0.12 over off), Sonnet is roughly neutral (+0.01), GPT-5.5 slightly regresses (-0.11 matching the v3.1.0 pattern of -0.11). The skill has never been uniformly better than skill-off across providers; this is the closest achievable state without provider-specific rework. The structural improvements from the prior restructure stay (file merges, S-tier inlines, routing rule extension, reveal-animation safety rule). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs: teach CLAUDE.md / AGENTS.md / DEVELOP.md about the skill-behavior tests Adds the `bun run test:skill-behavior` script to the test commands lists in all three docs. CLAUDE.md gets a full `### Skill-behavior tests` subsection paralleling the existing Live-mode E2E one: how the suite works (inlines source SKILL.md, scoped tools, asserts on the trace), which providers it always runs (claude-haiku-4-5, gpt-5.4-mini, gemini-3.1-flash-lite — all three every run), the eight scenarios, the baseline (21-22/24 with stable gpt-mini sub-command-routing failures), auth via repo-root `.env`, and how to add a scenario. AGENTS.md gets the one-liner plus a paragraph in Testing Guidelines that points contributors at the suite for Setup-touching edits (SKILL.md Setup section, context.mjs, teach.md, document.md, register / sub-command refs). DEVELOP.md gets a short Testing section that didn't exist before, plus a nudge in the "Test across providers" bullet pointing at the new suite as the automated way to do that. No code changes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * detector: add 5 new antipatterns (em-dash-overuse, broken-image, marketing-buzzword, numbered-section-markers, aphoristic-cadence) Consolidates eval-side detection logic into the canonical impeccable detector. Before this change, the eval harness had its own duplicate implementations of em-dash, copy-slop, and broken-image checks. They now live alongside the existing 28 antipatterns in the impeccable registry, available to the CLI, browser extension, critique skill, and eval (via the existing slop grader child-process call). New antipatterns: - em-dash-overuse: 5+ em-dashes in body text content (threshold permits legitimate prose use of em-dash; only triggers on AI cadence-level density) - broken-image: <img> with empty src, missing src, or src="#" - marketing-buzzword: SaaS phrase list (streamline / empower / supercharge / enterprise-grade / cutting-edge / etc) - numbered-section-markers: repeated 01 / 02 / 03 sequence as section labels — the AI editorial scaffold one tier deeper than tracked eyebrow chips - aphoristic-cadence: 3+ manufactured-contrast ("Not a X. A Y.") or short-rebuttal ("Sentence. No clause." / "Sentence. Just clause.") constructions in body text Engine wiring: - broken-image runs as a static-html element rule (selector: img) and a fallback regex matcher (for non-HTML files) - em-dash / buzzword / numbered / aphoristic run as regex page-analyzers, factored into a new runTextContentAnalyzers() helper that both detectText (non-HTML) and detectHtml (HTML) call, so .html files get the same coverage as .css/.tsx Tests: 166 detector + 12 browser + 24 fixture all pass. Browser detector rebuilt (162.7 KB). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: drop unvalidated anti-centering rule; add image-led hero carve-out The anti-centering rule ("Don't default to centering everything") was added without empirical support. We have a detector for it (everything-centered, threshold ≥70%) that fires on 0 / 998 samples in the corpus — never validated, never useful. Meanwhile the rule was almost certainly responsible for collapsing Gemini 3.5 flash's luxury-hotel skill-on output from the canonical "full-bleed photo + centered overlay headline" cinematic hero (the shape skill-off Gemini chooses 67% of the time) to a 50/50 magazine grid (full-bleed rate drops to 18% under skill-on, -49pp). Changes: - skill/SKILL.md #### Layout: drop "Don't default to centering..." - skill/reference/brand.md ## Layout: drop the same rule; replace with a positive carve-out — image-led briefs (hotels, restaurants, magazines, photography) often want full-bleed hero with overlaid menu and centered headline; let the photograph be the design - skill/reference/layout.md: drop the assessment question and the "asymmetric breaks centered-content pattern" framing Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Apply neo-kinpaku design system and improve live picker UX Restyle the live picker to match the site kinpaku kit, persist pick mode in localStorage, fix DESIGN.md color swatches in the parser, and land the neo-kinpaku site refresh with new tokens, assets, palette script, and detector rules. Co-authored-by: Cursor <cursoragent@cursor.com> * Add live Steer end-to-end: poll protocol, browser UI, and E2E harness. Wire page-level Steer through the live server and agent poll loop with steer_done unlock semantics, extend live.md for agents, and add smoke tests with LLM handleSteer plus recovery for hidden heroes, HMR lag, and dev-tool overlays. Co-authored-by: Cursor <cursoragent@cursor.com> * Add experimental live-poll --stream mode; keep one-shot default for Cursor. Stream keeps one process alive with ack-aware resume, but live.md documents that Cursor should stay on one-shot background notify after testing showed ~5s pickup vs sub-second on exit-based notify. Co-authored-by: Cursor <cursoragent@cursor.com> * Sync harness output and fix build validators for poll stream release. Regenerate provider skills after live-poll --stream work, update homepage detection counts to 41, and replace em dashes in site/skill copy so bun run build passes prose and count checks. Co-authored-by: Cursor <cursoragent@cursor.com> * homepage: add testimonials marquee section A two-row testimonial marquee on a tinted graphite plinth, sitting between the hero and the slop teaser. 29 testimonials sourced via api.fxtwitter.com (lightly cleaned: leading @-mention reply targets stripped, trailing self-links removed). Avatars downloaded into site/public/assets/testimonials/ so they're served locally. Quote order curated for impact — both rows lead with the punchiest quotes (Ben Davis spotlight, "Impeccable > Claude design", "THIS. This shit works.", "Uninstall whatever frontend skill you're using.") so the first viewport is loaded with the most memorable testimonials. Engineering notes: - Section uses width:100vw + margin-left:calc(50% - 50vw) to escape main.site-content's max-width + side padding (cards now clip cleanly at the actual viewport edges). - Marquee runs at 110s linear infinite. Both rows share the same duration so on-screen speeds match; track is doubled so the loop back to 0 reads as continuous. - Hero min-height reduced from 100svh to calc(100svh - 115px) so the dotted divider and top of row A peek above the fold on landing, signalling the section is there. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * homepage: keep the hero demo clear of the fixed header on short viewports The hero centers its content in the full viewport (the site header is a fixed overlay), so on shorter screens the tall Live Mode demo tucked under the nav. Raise the hero's top padding above the 97px header (113px wide, 108/92px when stacked) so content always pins below the header while still centering on tall viewports, and cap the demo frame to the viewport so the whole demo stays on screen. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Add steer voice input and refine processing animation. Wire Web Speech API on the Steer mic with auto-submit, block Cursor's preview browser with a clear message, and replace truncated "Working" text with a dots-only processing state. Co-authored-by: Cursor <cursoragent@cursor.com> * Add agent poll connectivity indicator and tighten global bar spacing. Surface poller state on the Impeccable mark via SSE and /status, with an instant disconnected tooltip, steer timeout failsafe, and matched brand/chat section gaps. Co-authored-by: Cursor <cursoragent@cursor.com> * Fix steer focus to allow page text selection without losing type-to-steer. Blur the hidden steer input on page interaction, pause refocus during selection gestures, and reschedule focus recovery after clicks and cleared selections. Co-authored-by: Cursor <cursoragent@cursor.com> * site: rework "Design in production" section glyphs and audience band Put the three how-it-works steps back into thin-line cards and drop the overused browser-chrome bars from each glyph. Redraw the step 2 and 3 visuals to mirror the real Live Mode UI: step 2 shows the on-canvas pick outline with an attached comment bubble, step 3 shows the floating contextual accept bar plus the source-write confirmation. Re-treat the audience tiles as verdigris-lined text (no card box) under a "Who it's for" eyebrow, so each role reads as distinct from the gold step band. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Add live insert mode with HMR-safe placeholder recovery. Ships insert picking, scaffold helpers, variant cycling fixes for hidden variants, and placeholder snapshot/recreation so Astro HMR does not drop the wait-state box or re-anchor to the hero container. Co-authored-by: Cursor <cursoragent@cursor.com> * site: mobile pass — hamburger nav + designing hero overflow fix The header was rendering inline nav links + GitHub button that overflowed narrow viewports (~363px). Pre-existing display:none hacks hid Designing and Live to make the row fit, but those items still belonged in the menu. Header.astro: added a hamburger toggle button + inline script. The right cluster (nav + GitHub) becomes a collapsible drawer below the header on mobile, with data-nav-open driving the open/closed state and animating the two-line glyph into an X. kinpaku-kit.css: hamburger button (kinpaku-bordered glyph), mobile drawer panel (solid lacquer-deep bg, hairline separators between rows, full-width tappable rows), and overrides for the older sub-pages.css mobile rules (horizontal-scroll mask on the nav, hidden [data-nav="home"] item, hidden GitHub star label) — all redundant now that the drawer surfaces everything. home-kinpaku.css: dropped the @media (max-width: 560px) block that hid Designing / Live / GitHub. The drawer pattern shows them all. designing-kinpaku.css: hero h1 "Designing with Impeccable" was overflowing at narrow viewports. Three fixes: - grid-template-columns 1fr → minmax(0, 1fr) so the column shrinks to fit container instead of growing to "Impeccable"'s 472px intrinsic min-content width. - mobile h1 size override (clamp(2.2rem, 11vw, 3rem) at <=480px) since the display token's 3.4rem minimum is sized for desktop hero impact. - hide the decorative loop-wheel SVG below 600px (was overflowing 22px past the right edge). Verified clean at both 363px and 403px viewports across /, /docs, /docs/animate, /slop, /designing, /live-mode. scrollWidth matches viewport width on every page (no horizontal scroll). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * detector: refine new rules + run provider tells in browser env Follow-up to the detector port (rules landed in7648af00): - oversized-h1: flag long headlines set at display size, not punchy one/two-word heroes (length, not size alone, is the tell) - provider tells (--gpt/--gemini) now always run in a real browser env (detector page, live overlay, extension); gating is a CLI-output concern only, applied in the Node engine return paths - move theater-slop-phrase into checkHtmlPatterns so it runs in the bundled browser path, not just CLI/static (browser bundle excludes detect-text.mjs) - hero-eyebrow-chip overlay highlights the eyebrow, not the heading - gemini-tells fixture: data-URI images so the hover-zoom renders - rebuild browser bundle Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: migrate /detector lab to neo-kinpaku design system Rebuild the detector lab tool shell on --ks-* tokens (lacquer ground, gold hairlines, champagne/mono type) instead of the legacy warm-paper palette. Swap the "/" placeholder for the real carved-tile brand lockup, restyle the toolbar actions as kinpaku primary/secondary buttons, and recolor the finding overlay from off-brand magenta to vermilion. Update the global theme-color from #fafafa to #010101 (the sRGB render of the lacquer ground) so the browser chrome matches the dark site. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Homepage: hero finalist, compact live demo, real picker bar. Switch the hero to m-01-v2-01, tighten the in-hero demo layout, and replace the marketing gbar with a shared LiveDemoGbar that mirrors live-browser.js. Size the bar with max-content so controls are not clipped inside the capsule. Co-authored-by: Cursor <cursoragent@cursor.com> * site: migrate /cases/neo-mirai to neo-kinpaku design system Rebuild the Neo Mirai case-study page on --ks-* tokens: lacquer ground (drops the off-brand magenta radial spotlight), Alumni Sans Pinstripe display headings instead of the banned italic serif, gold eyebrow/labels, gold hairline image frames, kinpaku primary/secondary buttons, and a lacquer-deep command panel with a gold-bordered code block. Opt .neon-case-page into the shared kinpaku site-header/footer chrome in kinpaku-kit.css (per the "add new kinpaku pages to the selector list" note) so the global header and footer go dark to match the page. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: consolidate kinpaku header+footer into one reusable .kinpaku-chrome class The dark header/footer were not a reusable unit: the header was scoped to a per-page selector list, the github star pill was home-only, and the default footer was copy-pasted into four page stylesheets. Pages not on the lists (like /cases/neo-mirai) fell back to the legacy light chrome. Collapse all of it into one `.kinpaku-chrome` block in kinpaku-kit.css — header, github pill, and default footer — and opt every kinpaku page in via a single body class. Delete the four duplicated per-page footer blocks and the home-only github pill. The home page keeps its textured verdigris footer as a deliberate override, raised to body.home-kinpaku specificity so it wins regardless of import order. Genuinely light pages (privacy, tutorials) just omit the class. Fixes on /cases/neo-mirai: footer and github star now render dark/kinpaku (were legacy-light), and the content sections are wrapped in the .neon-case container so they sit in header-aligned gutters instead of bleeding to the viewport edge. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: migrate privacy + tutorials to kinpaku via a reusable surface class These were the last two light pages. Rather than rewrite their per-rule styling, add a reusable .kinpaku-surface class that remaps the legacy --color-* / --font-* tokens to kinpaku values at the body scope, so the existing legacy-token CSS (sub-pages.css prose, the pages' inline styles) renders dark for free. Same trick docs-kinpaku/slop-kinpaku use per page, lifted into one shared class. Pair it with .kinpaku-chrome for header + footer. privacy + both tutorials pages now carry both classes. Also force the sub-1.2rem headings (tutorial card titles, prose h1/h2) back to the upright body face: the legacy display face was italic serif, and the kinpaku Pinstripe face reads wrong synthesized-italic at small sizes. No light pages remain. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: re-add Tutorials to the /docs sidebar Tutorials lost its docs placement across two refactors: the Astro docs rebuild never carried over the sidebar tutorials list the old generated pages had, and the kinpaku homepage redesign dropped the "Full walkthrough" link. It survived only via /designing and /live-mode. Add a "Tutorials" group at the top of the docs sidebar (matching the command-category styling) linking the index plus all four tutorials, restoring the old information architecture. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: make kinpaku the default — flip legacy :root tokens to dark (phase 1) Repoint the legacy design tokens in tokens.css from light-mode to kinpaku: --font-* now reference the --ks-* brand faces (retiring Cormorant/Instrument/ Space Grotesk), surfaces carry dark-lacquer oklch, and --color-accent is gold instead of magenta. Values mirror the per-page kinpaku remaps. Every live page already overrides these at its body-class scope, so this changes the fallback (any classless/new page now renders kinpaku) without altering existing pages — verified home, designing, slop, live-mode, docs unchanged, and the deliberate-light demos (slop specimens, home's Aurelia mock) still render light via their own colors. First step toward removing the per-page remaps; those become redundant next. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * detector + slop: cream-palette rule, drop everything-centered, polish catalog - new deterministic cream-palette rule ("claude beige"): flags warm lightly-tinted off-white page backgrounds; wired into static + browser engines, with fixture + test - remove everything-centered rule entirely (no longer in the skill) from registry, regex analyzer (+ index-offset fix), checkPageLayout, and tests - catch Instrument Serif in overused-font (regex + OVERUSED_FONTS) - /slop: reconcile catalog (cream card in, everything-centered out; counts), and fix demo visuals — visible hairline border, gigantic clipped hero, more extreme crushed tracking, padded gray-on-color card, uniform-rhythm monotonous-spacing, long line-length line, elastic-overshoot dialog for bounce easing, real zooming image for image-hover; flip the demo surface off warm beige to a cool neutral Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * detector page: add cream-palette fixture to the catalog Surfaces the new cream/beige palette rule on /detector alongside the other Color specimens. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: shared docs sidebar + tutorial pages join the layout Extract the /docs section sidebar into a reusable DocsSidebar component and wire it into all three entry points so the navigation is consistent across docs index, command pages, and tutorial pages. site/components/DocsSidebar.astro (new): one source of truth. Loads the tutorials + skills collections, renders Tutorials → Commands grouped by category, and highlights the active entry via activeCommand / activeTutorial props. site/pages/docs/index.astro: swap the inline sidebar markup for the component. Drop the "All tutorials" link — the dedicated tutorials listing page wasn't earning its slot in the rail. site/layouts/Doc.astro: same swap. Command pages now also see the Tutorials section above Commands, matching /docs. site/pages/tutorials/[...slug].astro: rewrite from a standalone page (custom .tutorial-page wrapper, ad-hoc breadcrumb) to the full skills-layout shell with DocsSidebar in the left rail. Tutorial content now reads in the same layout as command reference pages. site/content/tutorials/brand-vs-product.md (deleted): the skill picks the register automatically from PRODUCT.md, so a tutorial telling users to pick it themselves was misleading. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * detector: catch Tailwind warm-light bg utilities in cream-palette The static engine can't resolve Tailwind classes to computed CSS, so a `bg-amber-50` on <body> slipped past the cream-palette rule. Add a class-list fallback that scans body/html for arbitrary `bg-[...]` values and named warm-light utilities (amber/orange/yellow/stone), each run through the same isCreamColor test so neutrals and over-saturated shades drop out. Fixture + test for the class-only case. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: drop redundant per-page token remaps (phase 2) With kinpaku now the :root default, the --color-* / --font-* remap blocks in docs/slop/designing/live-mode-kinpaku.css re-declared values identical to :root. Removed them, keeping only the --ks-muted alias (still read by name in those files) and each page's shell (gradient bg, color, min-height). home-kinpaku.css keeps its remap: it uses home-specific values (e.g. --color-charcoal: var(--ks-text), --color-cream: var(--ks-lacquer-raised)) plus the --cat-* gradient overrides, so it is not redundant. Verified designing (PRODUCT.md viz), slop (specimens stay light), docs, live-mode unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: drop italic from 15 dead editorial-serif heading rules Audited every font-style: italic in sub-pages.css and main.css against the live markup. Removed italic from the 15 rules whose selectors don't appear in any page/component/content/script: sub-pages.css: docs-home-card-title, docs-category-title, tutorial-embed-caption, skill-demo-caption, skill-source-card-subtitle, skill-references-heading, skill-reference-title main.css: hero-title-combined, hero-tagline-combined, impeccable-title, loading-state, install-primary-howto .install-path-desc em, install-howto-steps > li::before, install-step-status, consulting-title These were dormant remnants of the retired Cormorant italic-serif look — the kinpaku Pinstripe face renders them as bad synthesized-italic, but no markup matches the selectors so nothing rendered. Removed only the font-style declaration; the rest of each rule stays (whole-rule cleanup is out of scope). Kept the 5 live selectors (slop-section-heading, tutorial-card-title, visual-mode-demo-caption, visual-mode-method-name, gallery-card-title) per the "if they're not used anywhere" condition, plus .prose em (real emphasis) and .prose blockquote (conventional blockquote italic). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: brand-seed palette.mjs + Setup step to run it New-brand color now starts from a curated seed color (129 OKLCH seeds) instead of the model guessing or defaulting to warm-cream. The script returns one seed + composition guidance (pure-bg architecture, perceptual text-on-fill, anti-cliché moods, jewel-tone range), with inverse-frequency hue weighting for fair rainbow exposure and deterministic --from picking. SKILL.md Setup step 5 makes it run for greenfield projects. Curation tooling lives in the impeccable-evals repo (tools/palette/). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * Remove accidental live mode inject from Base.astro. The localhost live.js tag was left in the site layout after a dev session and should never ship in the Astro template. Co-authored-by: Cursor <cursoragent@cursor.com> * site: dedicated /changelog + /faq, epic v3.5.0 notes, Live Mode → Beta Split changelog and FAQ out of the homepage into two standalone kinpaku pages, linked from the footer (and a quiet hint under the Get-started CTA). /changelog: every release inline (no collapsible), newest first. The v3.5.0 entry leads with a one-line summary, a real before/after pair from the GPT-5.5 eval corpus (luxury-hotel brief, skill off vs on), and a stat row (74% cream-bg, 76% extreme tracking, 90%+ low-contrast — measured across ~190 samples). Then five scannable bold-led bullets, biggest takeaway first: per-provider skill compilation, the bias-fix, Live Mode, the 7 new detector rules, the tighter skill. Before/after JPGs optimized to ~470KB total (down from ~2.5MB PNGs). /faq: the six support questions, each deep-linkable. Live Mode is now Beta everywhere it surfaces: the /live-mode eyebrow badge and note, the homepage bento tile badge, and the changelog entry. The historical v3.0 changelog entry stays "Alpha" — accurate to what shipped then. Footer trimmed to the four links not already in the top nav (Changelog, FAQ, Privacy, GitHub). Version bumped 3.2.0 → 3.5.0 across the three plugin manifests; the 3.2 bias-fix work folds into this release rather than shipping separately. astro.config.mjs: disable the dev toolbar. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: point /design-system hero at the m-01-v2-01 finalist design-system.css referenced kintsugi-hero-v2.png, an untracked orphan that was never committed. Repoint it at the committed m-01-v2-01 finalist so /design-system and the homepage hero share one image, and the page no longer depends on a file outside the repo. The v2 orphan moved to tmp/. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * build: sync harness mirrors + green the prose gate Rebuild propagates the committed skill source (palette.mjs Setup step, detector rule updates, brand.md) into the 13 harness output dirs and the plugin subtree, which had drifted from source. Also fixes the prose validator, which had been red on six pre-existing hits across committed files: - Four em dashes in code comments (Testimonials.astro, LiveDemoGbar.astro, index.astro) and one in skill/reference/live.md — reworded to colons/commas. - Two in the slop catalog (an em-dash-overuse specimen and the marketing-buzzword rule naming "empower"). Those are intentional: the slop page documents every antipattern by example, so it must contain them. Exempted site/pages/slop from validateProse rather than neutering the specimens. `bun run build` is now green end to end: counts validate, prose passes, site builds. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * skill: rewrite no-section-fade rule to fix Gemini zero-motion overcorrection The old rule ("whole-section fade-on-scroll is the saturated AI motion reflex") drove Gemini to overcorrect into shipping pages with no motion at all: motion-variety 39% / zero-motion 12% with the skill on, vs ~74-78% variety and ~3% zero-motion without it. Rewrite keeps the legitimate-stagger carve-out, names the defect at shape level (one identical entrance on every section) without enumerating motion primitives, and adds an explicit clause that suppressing the reflex is never grounds for a static page. Validated on Gemini 3.5-flash (n=10, luxury-hotel + infra-platform): motion-variety 39% -> 70%, zero-motion 12% -> 0%, staggered-reveal stays 0% (reflex not re-inflated). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * release: bump CLI to 2.2.0 and extension to 1.1.0 Both ship the expanded detector: the 7 new rules (cream-palette, em-dash-overuse, marketing-buzzword, numbered-section-markers, aphoristic-cadence, broken-image, italic-serif-display) plus hero-eyebrow-chip, with everything-centered removed. 41 rules total. The extension settings page already supports toggling them: the rule list renders from detector/antipatterns.json, grouped by category, and disabledRules flows through chrome.storage.sync into the scan config, which detect.js honors by rule id. New rules are toggleable with no UI change. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * release: fix release.mjs for the moved changelog + add CLI/ext entries The changelog moved from site/pages/index.astro to its own site/pages/changelog.astro with new markup (cf-version / cf-entry / cf-items), which left release.mjs reading the wrong file with the old selectors. All three release commands would have failed at note extraction. Point it at changelog.astro, match cf-version, and scope notes to the <ul class="cf-items"> bullet list — that also skips the lead paragraph, before/after figure, and stat row on the v3.5.0 entry, keeping release notes to clean bullets. Add CLI v2.2.0 and Extension v1.1.0 changelog entries (the shared detector update: 7 new rules, everything-centered removed, 41 total; plus the extension's per-rule toggles) so release:cli and release:ext have notes to extract. Verified extraction for all three labels: v3.5.0 (5 bullets), CLI v2.2.0 (3), Extension v1.1.0 (2). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix: correct dev server port to 4321 and drop stale pnpm-lock Astro serves on 4321, not 3000 as the docs claimed; update CLAUDE.md, AGENTS.md, and screenshot-antipatterns.js. Remove the leftover pnpm-lock.yaml from the Astro migration so Cloudflare's frozen install uses the maintained, in-sync bun.lock instead of a drifted pnpm lockfile. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: rework /designing flow, rhythm, Live Mode mock, and CTA Restructure the page so iteration reads as the core value, not net-new. The four loop phases are wrapped in a track with a sticky scroll-spy nav (Start/Iterate/Polish/Maintain) that pins under the header and highlights the active phase; the surfaces section (skill/CLI/extension) moves out of the loop into the post-loop context group so the loop runs uninterrupted. Fix the iterate split: shared subgrid row tracks so the terminal and the Live Mode mock align on the same baseline regardless of paragraph length, wider intro measure (52ch, was a crammed 36ch), and a deeper picker stage so the context and global bars breathe instead of stacking on the card. Rebuild the Live Mode mock to mirror the real picker: carved-tile mark plus Pick / Insert / Detect / DESIGN.md controls on lacquer-deep with the gold border, and a /impeccable live entry line so the reader knows how to start. Reframe Start as the hard mode, move h3 subheads off the thin display face onto Albert Sans, and trim Start so it no longer dominates the loop. Rework the closing CTA into two standalone raised cards (the bento plinth made them read as boxes nested in a box), and fix the tutorials copy: there are three walkthroughs now, and the brand-vs-product tutorial is gone, so drop it from the CTA and remove the dead lane link to it. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: reorder Get Started so usage follows setup, link out to more Move the /impeccable usage examples below the Chrome extension, CLI, and Stay-updated block. Running a command is the logical next step once the skill, extension, CLI, and subscriptions are all in place, so the section now reads install -> set up the extras -> use it. Add a closing "Go deeper" line linking to the Designing with Impeccable workflow page and the docs. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix: install compiled per-provider skill variants, not uncompiled source `npx skills add` (and `impeccable skills install`, which wrapped it) installed the uncompiled skill/ source verbatim: the skills CLI dedupes discovery by name and picks skill/SKILL.md first, so installs shipped unresolved {{placeholders}} and no vendored detector (#168). - Rename skill/SKILL.md -> skill/SKILL.src.md so the skills CLI's discovery skips the source and falls through to a compiled .agents variant; update the build reader, skill-behavior harness, and docs to match. - Refactor `impeccable skills install` to copy each harness's compiled variant from the universal bundle (real dirs, no npx skills, no symlink), with project/global harness detection and a --providers override. - Fix stale unit tests (replacePlaceholders, readPatterns, transformer prefix/summary) that asserted removed pre-v3.0 behavior, and wire the three orphaned test files into `bun run test` so the drift can't recur. - Split skills-cli.test.js: pure blocks run by default, network blocks move behind a new `bun run test:cli-e2e`; fix its stale update assertions. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: default to `npx impeccable skills install`, restore install-method panel Get Started recommended `npx skills add`, which installs a single shared build across harnesses. Make our CLI the default (it installs the build compiled for each harness) and bring back the "Other install methods" disclosure the neo-kinpaku redesign dropped. - Homepage: primary command is now `npx impeccable skills install`; a native <details> panel offers the Claude Code plugin and `npx skills` (caveated as installing one shared build rather than the per-harness one). - FAQ: recommend `npx impeccable skills install` to install, `--force` to reinstall, and note the npx skills shared-build caveat. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * site: reword craft tagline so it doesn't lead with "Shape" The craft card's tagline began with the word "Shape", which reads like the name of the sibling /shape command and made the two cards look swapped (#166). Reword to "Design it, then build it, all in one flow." No data was actually swapped; this is a copy collision fix. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * skill: rename teach -> init and expand its setup flow Rename the `/impeccable teach` command to `/impeccable init` across the skill, site, CLI, and tests. `teach` stays as a deprecated router alias and /docs/teach + /skills/teach redirect to /docs/init. Expand the command beyond writing PRODUCT.md/DESIGN.md: the same codebase crawl now also pre-configures `.impeccable/live/config.json` (Step 6, with CSP consent) so live mode boots with no first-time detour, and the flow ends by recommending the best commands to run next from what the scan surfaced (Step 7). Fold two items into the unreleased v3.5.0 changelog entry: the init rename and the brand-seed palette picker. No version bump. Regenerates all harness skill output dirs and the _redirects file. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * docs: lead README install + usage with the CLI installer Add `npx impeccable skills install` as the recommended install option and update the Usage section to the `/impeccable <command>` form, dropping the nonexistent `/normalize` example. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test(skill-behavior): swap to production-tier models (sonnet + gpt-5.5) Replace the cheap-tier default lineup (claude-haiku-4-5, gpt-5.4-mini) with production-tier models (claude-sonnet-4-6, gpt-5.5) so the skill-behavior suite reflects what users actually run. gemini stays on flash-lite. Sync the docs (CLAUDE.md, AGENTS.md, tests/skill-behavior/README.md): new model names, cost estimate raised to ~$0.50-1.50/sweep, and the old 21-22/24 baseline reframed as previous-cheap-tier history pending re-measurement on the new lineup. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat: self-updating skill via boot-time version check context.mjs now polls a new lightweight /api/version endpoint at most once per day (cached globally in ~/.impeccable) and appends an UPDATE_AVAILABLE directive when a newer skill version has shipped, prompting the agent to offer `npx impeccable skills update`. Best-effort and silent on any failure; asks before updating; suppresses re-prompts for a declined version for a week. Opt out with IMPECCABLE_NO_UPDATE_CHECK=1. - skill/scripts/context.mjs: version read, throttle + anti-nag cache, directive - scripts/build.js + _redirects: /api/version endpoint (from plugin.json version) - skill/SKILL.src.md: document the UPDATE_AVAILABLE boot branch - tests/context.test.mjs: coverage for cached/newer/suppressed/opt-out paths - changelog: v3.5.0 entry - synced harness skill dirs via bun run build Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * test: cover the self-update path (network + LLM behavior) context.test.mjs: add a localhost stub-server integration test for the live fetch path (poll /api/version, cache a newer version, stay silent on same-or-older, fail silent + stamp lastCheck when unreachable). Runs against 127.0.0.1 only, never the real site; uses async spawn so the in-process stub isn't deadlocked by spawnSync blocking the event loop. skill-behavior: add scenario 9 asserting the agent surfaces UPDATE_AVAILABLE but never auto-runs `npx impeccable skills update` without asking. New prepareWorkspace `skillVersion` copy-mode (so context.mjs has a SKILL.md to version-check), env threading through runTurn -> execBash, and bash-output capture to prove the agent actually received the directive. Passed on claude-sonnet-4-6, gpt-5.5, and gemini-3.1-flash-lite. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-authored-by: Cursor <cursoragent@cursor.com>
4153 lines
86 KiB
CSS
4153 lines
86 KiB
CSS
/*
|
|
* impeccable.style — Renaissance Redesign
|
|
*
|
|
* Editorial precision meets fluid motion.
|
|
* Light, high-contrast, typographically bold.
|
|
*/
|
|
|
|
/* Shared design tokens + minimal reset */
|
|
@import "./tokens.css";
|
|
|
|
/* Section partials (landing page only) */
|
|
@import "./problem-section.css";
|
|
@import "./workflow.css";
|
|
@import "./live-mode.css";
|
|
@import "./gallery.css";
|
|
@import "./skill-demos.css";
|
|
|
|
|
|
/* ============================================
|
|
SKIP LINK (Accessibility)
|
|
============================================ */
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10000;
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
border-radius: 0 0 8px 8px;
|
|
transition: top 0.2s ease;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
FLOATING BOTTOM NAV
|
|
============================================ */
|
|
|
|
.section-nav {
|
|
position: fixed;
|
|
bottom: var(--spacing-md);
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(20px);
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 4px;
|
|
background: oklch(98% 0 0 / 0.85);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 100px;
|
|
box-shadow: 0 4px 24px -4px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
|
|
}
|
|
|
|
.section-nav.is-visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
.section-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px 12px;
|
|
text-decoration: none;
|
|
border-radius: 100px;
|
|
transition: background 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.section-nav-item:hover {
|
|
background: var(--color-mist);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.section-nav-item.is-active {
|
|
background: var(--color-ink);
|
|
}
|
|
|
|
.section-nav-item.is-active .section-nav-num {
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.section-nav-item.is-active .section-nav-label {
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.section-nav-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.5625rem;
|
|
font-weight: 500;
|
|
color: var(--color-ash);
|
|
letter-spacing: 0.02em;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.section-nav-label {
|
|
font-family: var(--font-body);
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
transition: color 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.section-nav-label {
|
|
display: none;
|
|
}
|
|
.section-nav-item {
|
|
padding: 8px 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.section-nav-item {
|
|
padding: 8px;
|
|
}
|
|
|
|
.section-nav-num {
|
|
font-size: 0.625rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
BASE STYLES
|
|
============================================ */
|
|
|
|
html {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
overflow-x: clip; /* Prevent horizontal scroll without breaking position:sticky */
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: 16px;
|
|
line-height: 1.625;
|
|
color: var(--color-text);
|
|
background: var(--color-paper);
|
|
overflow-x: clip;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-accent);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 2px;
|
|
transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-accent-hover);
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
/* Remove underline for buttons styled as links */
|
|
.btn,
|
|
.footer-logo,
|
|
[class*="nav-item"] {
|
|
text-decoration: none;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9em;
|
|
padding: 0.15em 0.4em;
|
|
background: var(--color-accent-dim);
|
|
color: var(--color-accent);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--color-accent-soft);
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* ============================================
|
|
GRAIN OVERLAY
|
|
============================================ */
|
|
|
|
.grain-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.03;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
/* ============================================
|
|
LAYOUT
|
|
============================================ */
|
|
|
|
.site-content {
|
|
max-width: var(--width-max);
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-lg);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.site-content {
|
|
padding: 0 var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
SECTION HEADERS
|
|
============================================ */
|
|
|
|
.section-header {
|
|
margin-bottom: var(--spacing-lg);
|
|
position: relative;
|
|
}
|
|
|
|
.section-number {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-ash);
|
|
margin-bottom: var(--spacing-xs);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
margin-top: var(--spacing-sm);
|
|
max-width: 55ch;
|
|
}
|
|
|
|
.cheatsheet-link {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.cheatsheet-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.section-lead {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
max-width: 55ch;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
/* ============================================
|
|
HERO SECTION - Combined Layout
|
|
============================================ */
|
|
|
|
.hero-combined {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
padding: var(--spacing-lg) 0 var(--spacing-2xl);
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
.github-link {
|
|
position: absolute;
|
|
top: var(--spacing-md);
|
|
right: var(--spacing-lg);
|
|
z-index: 10;
|
|
color: var(--color-ash);
|
|
transition: color 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.github-link:hover {
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.github-stars {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--color-ash);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.github-link:hover .github-stars {
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.hero-combined-container {
|
|
max-width: var(--width-max);
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-lg);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--spacing-xl);
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.hero-combined-container {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-lg);
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-combined-right {
|
|
order: -1;
|
|
padding-top: var(--spacing-xl);
|
|
}
|
|
|
|
.hero-combined-container {
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.hero-combined-left {
|
|
gap: var(--spacing-sm);
|
|
padding-top: var(--spacing-md);
|
|
}
|
|
|
|
.hero-hook-text,
|
|
.hero-included-box,
|
|
.hero-cta-group {
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
}
|
|
|
|
.hero-combined-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.hero-combined-left {
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.hero-title-combined {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2.5rem, 7vw, 4.5rem);
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
margin: 0;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.hero-tagline-combined {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.125rem, 2.5vw, 1.75rem);
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.hero-hook-text {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
max-width: 45ch;
|
|
margin: 0;
|
|
}
|
|
|
|
.hero-hook-text--short {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-hook-text--full {
|
|
display: none;
|
|
}
|
|
|
|
.hero-hook-text--short {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Hero Included Box - Subtle "What's included" */
|
|
.hero-included-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--color-mist);
|
|
background: transparent;
|
|
max-width: 45ch;
|
|
}
|
|
|
|
.hero-included-title {
|
|
font-family: var(--font-body);
|
|
font-size: 0.5625rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.hero-included-items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.hero-included-items em {
|
|
font-style: normal;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.hero-included-sep {
|
|
color: var(--color-mist);
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.hero-included-items {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
.hero-included-sep {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.hero-cta-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-lg);
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.hero-cta-group {
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
.hero-cta-combined {
|
|
display: inline-block;
|
|
padding: var(--spacing-sm) var(--spacing-xl);
|
|
font-family: var(--font-body);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
color: var(--color-paper);
|
|
background: var(--color-ink);
|
|
border: none;
|
|
transition: transform 0.2s ease, background 0.2s ease;
|
|
}
|
|
|
|
.hero-cta-combined:hover {
|
|
transform: translateY(-2px);
|
|
background: var(--color-accent);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.hero-logos-inline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
}
|
|
|
|
.hero-logos-inline .hero-logos-label {
|
|
font-size: 0.6875rem;
|
|
color: var(--color-ash);
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.hero-logos-inline .hero-logos-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-logos-inline .hero-logos-row img {
|
|
border-radius: 4px;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.hero-logos-inline .hero-logos-row img:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hero-combined-right {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero-combined-right .split-comparison {
|
|
max-width: 520px;
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-combined-right .split-container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Bias tags at bottom of hero */
|
|
.hero-bias-tags {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
margin-top: var(--spacing-lg);
|
|
padding-top: var(--spacing-md);
|
|
border-top: 1px solid var(--color-mist);
|
|
max-width: var(--width-max);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
padding-bottom: var(--spacing-md);
|
|
}
|
|
|
|
/* ============================================
|
|
PROBLEM SECTION - Clarity Lens
|
|
============================================ */
|
|
|
|
.problem-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.problem-content {
|
|
display: grid;
|
|
gap: var(--spacing-xl);
|
|
}
|
|
|
|
/* Split Screen Comparison */
|
|
.split-comparison {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
margin-top: -20px;
|
|
margin-bottom: -20px;
|
|
}
|
|
|
|
.split-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
height: 380px;
|
|
margin: 0 auto;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
cursor: ew-resize;
|
|
user-select: none;
|
|
}
|
|
|
|
.split-before,
|
|
.split-after {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.split-before {
|
|
z-index: 1;
|
|
}
|
|
|
|
.split-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.split-after {
|
|
/* Angled clip-path matching divider's skewX(-10deg): top-right, bottom-left */
|
|
clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
|
|
z-index: 2;
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
.split-divider {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 3px;
|
|
background: var(--color-accent);
|
|
transform: translateX(-50%) skewX(-10deg);
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.split-label {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) skewX(10deg);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--color-paper);
|
|
background: var(--color-accent);
|
|
padding: 6px 14px;
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
/* Slop Card - Generic AI output */
|
|
.slop-card {
|
|
width: 280px;
|
|
height: 280px;
|
|
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #ddd6fe 100%);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.slop-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.slop-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.slop-text { flex: 1; }
|
|
.slop-title { font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 2px; }
|
|
.slop-subtitle { font-size: 12px; color: #6b7280; }
|
|
.slop-body { font-size: 13px; line-height: 1.5; color: #4b5563; margin-bottom: auto; flex: 1; }
|
|
|
|
.slop-button {
|
|
width: 100%;
|
|
padding: 10px 20px;
|
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* Callout labels pointing to issues */
|
|
.slop-callouts {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.slop-callout {
|
|
position: absolute;
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--color-accent);
|
|
background: var(--color-paper);
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--color-accent);
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
animation: calloutFadeIn 0.4s var(--ease-out) forwards;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.slop-callout[data-point="font"] {
|
|
top: 15%;
|
|
right: 5%;
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.slop-callout[data-point="gradient"] {
|
|
top: 40%;
|
|
left: 5%;
|
|
animation-delay: 0.25s;
|
|
}
|
|
|
|
.slop-callout[data-point="copy"] {
|
|
bottom: 35%;
|
|
right: 8%;
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.slop-callout[data-point="rounded"] {
|
|
bottom: 12%;
|
|
left: 10%;
|
|
animation-delay: 0.55s;
|
|
}
|
|
|
|
@keyframes calloutFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Impeccable Card - With Design Skills */
|
|
.impeccable-card {
|
|
width: 280px;
|
|
height: 300px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
padding: var(--spacing-lg);
|
|
text-align: left;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.impeccable-eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.impeccable-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.75rem;
|
|
font-weight: 300;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-sm);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.impeccable-body {
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
color: var(--color-ash);
|
|
margin-bottom: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.impeccable-button {
|
|
display: inline-flex;
|
|
margin-top: var(--spacing-sm);
|
|
padding: 0.625rem 1.5rem;
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
border: none;
|
|
font-family: var(--font-body);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.03em;
|
|
cursor: pointer;
|
|
transition: all var(--duration-base) var(--ease-out);
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.impeccable-button:hover {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
/* Split Labels */
|
|
.split-labels {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--spacing-xl);
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.split-label-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.split-comparison {
|
|
padding: 8px;
|
|
margin-top: -8px;
|
|
margin-bottom: -8px;
|
|
}
|
|
|
|
.split-labels {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.split-label-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--color-mist);
|
|
}
|
|
|
|
.split-label-dot--accent {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
/* ============================================
|
|
FOUNDATION SECTION
|
|
============================================ */
|
|
|
|
.foundation-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.foundation-content {
|
|
display: grid;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.foundation-grid {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 600px;
|
|
gap: var(--spacing-sm);
|
|
margin-top: -80px; /* Pull up into the header whitespace */
|
|
position: relative;
|
|
}
|
|
|
|
.foundation-column {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
justify-content: flex-end;
|
|
cursor: pointer;
|
|
min-width: 0;
|
|
}
|
|
|
|
.foundation-card {
|
|
padding: var(--spacing-md);
|
|
background: white;
|
|
border: 1px solid var(--color-bg);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 280px;
|
|
margin-bottom: var(--spacing-xs);
|
|
transition: transform var(--duration-slow) var(--ease-out-quint), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
|
|
position: relative;
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.foundation-column:hover .foundation-card {
|
|
transform: translateY(-12px);
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.foundation-plinth {
|
|
width: 100%;
|
|
background: repeating-linear-gradient(45deg, var(--color-bg), var(--color-bg) 2px, transparent 2px, transparent 10px);
|
|
border: 1px solid var(--color-mist);
|
|
border-bottom: none;
|
|
border-radius: 8px 8px 0 0;
|
|
transition: all var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.foundation-column:hover .foundation-plinth {
|
|
background: var(--color-mist);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Plinth Heights - More dramatic steps */
|
|
.plinth-1 { height: 4%; }
|
|
.plinth-2 { height: 12%; }
|
|
.plinth-3 { height: 20%; }
|
|
.plinth-4 { height: 28%; }
|
|
.plinth-5 { height: 36%; }
|
|
.plinth-6 { height: 44%; }
|
|
.plinth-7 { height: 52%; }
|
|
|
|
.foundation-card-viz {
|
|
height: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.foundation-card-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--spacing-xs);
|
|
margin-bottom: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.foundation-card-label {
|
|
font-family: var(--font-display);
|
|
font-size: 1.35rem;
|
|
color: var(--color-ink);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.foundation-card-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
color: var(--color-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.foundation-card-detail {
|
|
font-size: 0.875rem;
|
|
color: var(--color-ash);
|
|
line-height: 1.4;
|
|
margin: auto 0 0 0;
|
|
}
|
|
|
|
.foundation-svg {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
/* Typography & Spatial (Breathing draw + full draw on hover) */
|
|
.anim-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw-breathe 4s ease-in-out infinite; }
|
|
.foundation-column:hover .anim-draw { animation: draw-in 0.8s var(--ease-out) forwards; }
|
|
.anim-draw-delay { stroke-dasharray: 100; stroke-dashoffset: 100; }
|
|
.foundation-column:hover .anim-draw-delay { animation: draw-in 1s var(--ease-out) 0.2s forwards; }
|
|
@keyframes draw-breathe { 0%, 100% { stroke-dashoffset: 100; } 50% { stroke-dashoffset: 40; } }
|
|
@keyframes draw-in { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
|
|
|
|
/* Color & Contrast (Breathing pulse + spread on hover) */
|
|
.anim-move-x { animation: pulse-x 3s ease-in-out infinite; }
|
|
.foundation-column:hover .anim-move-x { animation: spread-x 0.6s var(--ease-in-out) forwards; }
|
|
.anim-move-x-opp { animation: pulse-x-opp 3s ease-in-out infinite; }
|
|
.foundation-column:hover .anim-move-x-opp { animation: spread-x-opp 0.6s var(--ease-in-out) forwards; }
|
|
.anim-fade-in { opacity: 0; transition: opacity 0.6s var(--ease-in-out); }
|
|
.foundation-column:hover .anim-fade-in { opacity: 1; }
|
|
@keyframes pulse-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
|
|
@keyframes pulse-x-opp { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.5px); } }
|
|
@keyframes spread-x { from { transform: translateX(0); } to { transform: translateX(4px); } }
|
|
@keyframes spread-x-opp { from { transform: translateX(0); } to { transform: translateX(-4px); } }
|
|
|
|
/* Responsive (Staggered reflow from desktop 2-col to mobile stack) */
|
|
.anim-res-frame, .anim-res-img, .anim-res-title, .anim-res-line-1, .anim-res-line-2 {
|
|
transform-box: fill-box;
|
|
transform-origin: 50% 50%;
|
|
transition: transform 0.4s var(--ease-in-out);
|
|
}
|
|
.anim-res-frame { transition-delay: 0s; }
|
|
.anim-res-img { transition-delay: 0s; }
|
|
.anim-res-title { transition-delay: 0s; }
|
|
.anim-res-line-1 { transition-delay: 0s; }
|
|
.anim-res-line-2 { transition-delay: 0s; }
|
|
.foundation-column:hover .anim-res-frame { transform: scaleX(0.57) scaleY(1.17); transition-delay: 0s; }
|
|
.foundation-column:hover .anim-res-img { transform: translate(6px, -4px) scale(0.65); transition-delay: 0.05s; }
|
|
.foundation-column:hover .anim-res-title { transform: translate(-7px, 6px) scaleX(0.65); transition-delay: 0.1s; }
|
|
.foundation-column:hover .anim-res-line-1 { transform: translate(-7px, 4.75px) scaleX(0.65); transition-delay: 0.15s; }
|
|
.foundation-column:hover .anim-res-line-2 { transform: translate(-6px, 4.25px) scaleX(0.6); transition-delay: 0.2s; }
|
|
|
|
/* Interaction (Gentle wobble + full toggle on hover) */
|
|
.anim-toggle-move { animation: toggle-wobble 3s ease-in-out infinite; }
|
|
.foundation-column:hover .anim-toggle-move { animation: toggle-snap 0.35s var(--ease-in-out) forwards; }
|
|
@keyframes toggle-wobble { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
|
|
@keyframes toggle-snap { from { transform: translateX(0); fill: var(--color-mist); } to { transform: translateX(8px); fill: var(--color-accent); } }
|
|
|
|
/* Motion (Gentle bob + full bounce on hover) */
|
|
.anim-squash-ball { transform-origin: 20px 20px; animation: ball-bob 2.5s ease-in-out infinite; }
|
|
.foundation-column:hover .anim-squash-ball { animation: bounce-ball 1.5s linear infinite; }
|
|
@keyframes ball-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
|
|
@keyframes bounce-ball {
|
|
0% { transform: translateY(0); }
|
|
6% { transform: translateY(0.5px); }
|
|
18% { transform: translateY(4px); }
|
|
35% { transform: translateY(12px); }
|
|
42% { transform: translateY(12px) scaleX(1.3) scaleY(0.6); }
|
|
48% { transform: translateY(12px); }
|
|
65% { transform: translateY(4px); }
|
|
78% { transform: translateY(0.5px); }
|
|
88%, 100% { transform: translateY(0); }
|
|
}
|
|
|
|
/* UX Writing (Cursor always blinks) */
|
|
.anim-blink { animation: blink-key 1s step-end infinite; }
|
|
@keyframes blink-key { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
|
|
|
|
/* Tablet: 3-col grid (switch before stairs clip) */
|
|
@media (max-width: 1200px) {
|
|
.foundation-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
height: auto;
|
|
gap: var(--spacing-md);
|
|
margin-top: var(--spacing-xl);
|
|
}
|
|
.foundation-column { height: auto; }
|
|
.foundation-card { height: auto; min-height: 200px; }
|
|
.foundation-plinth { display: none; }
|
|
.foundation-column:hover .foundation-card { transform: translateY(-4px); }
|
|
|
|
/* Enable hover animations on card hover for grid */
|
|
.foundation-card:hover .anim-draw { animation: draw-in 0.8s var(--ease-out) forwards; }
|
|
.foundation-card:hover .anim-draw-delay { animation: draw-in 1s var(--ease-out) 0.2s forwards; }
|
|
.foundation-card:hover .anim-move-x { animation: spread-x 0.6s var(--ease-in-out) forwards; }
|
|
.foundation-card:hover .anim-move-x-opp { animation: spread-x-opp 0.6s var(--ease-in-out) forwards; }
|
|
.foundation-card:hover .anim-fade-in { opacity: 1; }
|
|
.foundation-card:hover .anim-res-frame { transform: scaleX(0.57) scaleY(1.17); }
|
|
.foundation-card:hover .anim-res-img { transform: translate(6px, -4px) scale(0.65); }
|
|
.foundation-card:hover .anim-res-title { transform: translate(-7px, 6px) scaleX(0.65); }
|
|
.foundation-card:hover .anim-res-line-1 { transform: translate(-7px, 4.75px) scaleX(0.65); }
|
|
.foundation-card:hover .anim-res-line-2 { transform: translate(-6px, 4.25px) scaleX(0.6); }
|
|
.foundation-card:hover .anim-toggle-move { animation: toggle-snap 0.35s var(--ease-in-out) forwards; }
|
|
.foundation-card:hover .anim-squash-ball { animation: bounce-ball 1.5s linear infinite; }
|
|
}
|
|
|
|
/* Small tablet: 2-col grid */
|
|
@media (max-width: 768px) {
|
|
.foundation-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
|
|
/* Small mobile: compact horizontal cards */
|
|
@media (max-width: 520px) {
|
|
.foundation-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
.foundation-card {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: auto auto;
|
|
align-items: start;
|
|
min-height: auto;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
gap: 0 var(--spacing-md);
|
|
}
|
|
.foundation-card-viz {
|
|
grid-row: 1 / -1;
|
|
align-self: center;
|
|
height: auto;
|
|
margin-bottom: 0;
|
|
}
|
|
.foundation-card-header { margin-bottom: 2px; }
|
|
.foundation-card-label { font-size: 1.1rem; }
|
|
.foundation-card-detail { margin: 0; font-size: 0.8125rem; }
|
|
}
|
|
|
|
.foundation-cta {
|
|
text-align: center;
|
|
}
|
|
|
|
.foundation-cta-text {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
}
|
|
|
|
.foundation-cta-text code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.foundation-slash {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* ============================================
|
|
LANGUAGE SECTION (wraps periodic table + commands)
|
|
============================================ */
|
|
|
|
.language-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.language-content {
|
|
display: grid;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
/* Grid and flex items default to min-width: auto, which lets them expand to
|
|
fit their intrinsic content. The mobile commands layout has a split-compare
|
|
demo wide enough to blow out the entire section on mobile (~2400px wide).
|
|
Cascade min-width: 0 through every layer of the language section so the
|
|
intrinsic width can't propagate up the parent chain. */
|
|
.language-section,
|
|
.language-section * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.language-content .section-lead {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.commands-subsection {
|
|
display: grid;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.commands-header-subtitle {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-warm-gray);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
VISUAL MODE SECTION
|
|
============================================ */
|
|
|
|
.visual-mode-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.visual-mode-content {
|
|
display: grid;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.visual-mode-demo {
|
|
display: grid;
|
|
grid-template-columns: 3fr 2fr;
|
|
gap: var(--spacing-xl);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.visual-mode-demo {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Browser chrome frame for the iframe */
|
|
.visual-mode-preview {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-mist);
|
|
box-shadow: 0 8px 30px -6px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.visual-mode-preview-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 14px;
|
|
background: var(--color-cream);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.visual-mode-preview-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.visual-mode-preview-dot.red { background: #ff5f56; }
|
|
.visual-mode-preview-dot.yellow { background: #ffbd2e; }
|
|
.visual-mode-preview-dot.green { background: #27c93f; }
|
|
|
|
.visual-mode-preview-title {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.visual-mode-iframe {
|
|
display: block;
|
|
width: 100%;
|
|
height: 480px;
|
|
border: none;
|
|
background: white;
|
|
}
|
|
|
|
/* Details sidebar — editorial blocks, no cards.
|
|
The live detection overlay (left iframe) is the visual anchor for the
|
|
whole section; the right column should be quiet text + a single image
|
|
for the Chrome extension CTA. Hierarchy via typography + space, not
|
|
bordered containers. */
|
|
.visual-mode-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xl);
|
|
padding: var(--spacing-md) 0;
|
|
}
|
|
|
|
.visual-mode-feature {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.visual-mode-feature-label {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.visual-mode-feature p {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
}
|
|
|
|
.visual-mode-feature code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* ============================================
|
|
SOLUTION SECTION (legacy styles for periodic table)
|
|
============================================ */
|
|
|
|
.solution-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
}
|
|
|
|
.solution-content {
|
|
display: grid;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.solution-content .section-lead {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Two-pillar visual layout */
|
|
.solution-visual {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
gap: var(--spacing-lg);
|
|
align-items: stretch;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.solution-visual {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* Interactive Framework Viz - Periodic Table */
|
|
.solution-visual-interactive {
|
|
width: 100%;
|
|
min-height: 380px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
|
|
.solution-pillar {
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
padding: var(--spacing-lg);
|
|
transition: all var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.solution-pillar:hover {
|
|
border-color: var(--color-accent);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 60px var(--color-accent-dim);
|
|
}
|
|
|
|
.pillar-header {
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.pillar-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent-dim);
|
|
color: var(--color-accent);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.pillar-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.75rem;
|
|
font-weight: 400;
|
|
margin: 0 0 var(--spacing-xs);
|
|
}
|
|
|
|
.pillar-subtitle {
|
|
font-size: 0.875rem;
|
|
color: var(--color-ash);
|
|
margin: 0;
|
|
}
|
|
|
|
.pillar-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.pillar-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--spacing-sm);
|
|
background: var(--color-paper);
|
|
border-radius: 4px;
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.pillar-item:hover {
|
|
background: var(--color-accent-dim);
|
|
}
|
|
|
|
.pillar-item-name {
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.pillar-item-code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
.pillar-item-desc {
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.pillar-item--more {
|
|
justify-content: center;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
background: transparent;
|
|
border: 1px dashed var(--color-mist);
|
|
}
|
|
|
|
/* Connector between pillars */
|
|
.solution-connector {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.connector-plus {
|
|
font-family: var(--font-display);
|
|
font-size: 3rem;
|
|
font-weight: 300;
|
|
color: var(--color-accent);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.solution-connector {
|
|
padding: var(--spacing-sm) 0;
|
|
}
|
|
|
|
.connector-plus {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
SKILLS SECTION
|
|
============================================ */
|
|
|
|
.skills-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.skills-gallery {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr;
|
|
gap: var(--spacing-xl);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 968px) {
|
|
.skills-gallery {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
}
|
|
|
|
.skills-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
position: sticky;
|
|
top: var(--spacing-lg);
|
|
}
|
|
|
|
@media (max-width: 968px) {
|
|
.skills-nav {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-xs);
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
.skill-nav-item {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
background: transparent;
|
|
border: none;
|
|
border-left: 2px solid transparent;
|
|
color: var(--color-ash);
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.skill-nav-item:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.skill-nav-item.active {
|
|
color: var(--color-accent);
|
|
border-left-color: var(--color-accent);
|
|
background: var(--color-accent-dim);
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 968px) {
|
|
.skill-nav-item {
|
|
border-left: none;
|
|
border-bottom: 2px solid transparent;
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
}
|
|
|
|
.skill-nav-item.active {
|
|
border-bottom-color: var(--color-accent);
|
|
}
|
|
}
|
|
|
|
.skills-showcase {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 1fr;
|
|
gap: var(--spacing-lg);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.skills-showcase {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.loading-state {
|
|
padding: var(--spacing-xl);
|
|
text-align: center;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
/* ============================================
|
|
MOBILE COMMANDS LAYOUT
|
|
============================================ */
|
|
|
|
.mobile-commands-layout {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.mobile-commands-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
/* Without min-width: 0, the flex container expands to fit any intrinsically
|
|
wide descendant (the split-compare demo blows it out to ~2400px otherwise).
|
|
The same constraint cascades to direct children via the next rule. */
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile-commands-layout > * {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.commands-container {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.mobile-carousel-wrapper {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
padding: var(--spacing-xs) 0;
|
|
}
|
|
|
|
.mobile-carousel-wrapper::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-carousel {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
padding-right: var(--spacing-md);
|
|
}
|
|
|
|
.mobile-cmd-pill {
|
|
flex-shrink: 0;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
min-height: 44px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
background: none;
|
|
border: none;
|
|
border-radius: 100px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease, color 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-cmd-pill:hover {
|
|
background: var(--color-mist);
|
|
}
|
|
|
|
.mobile-cmd-pill.active {
|
|
color: var(--color-paper);
|
|
background: var(--color-ink);
|
|
}
|
|
|
|
.mobile-demo-area {
|
|
padding: 0;
|
|
}
|
|
|
|
.mobile-demo-area .demo-split-comparison {
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile-demo-area .split-container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 320px;
|
|
}
|
|
|
|
.mobile-demo-area .demo-caption {
|
|
font-size: 0.75rem;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.mobile-info-area {
|
|
padding-top: var(--spacing-sm);
|
|
}
|
|
|
|
.mobile-cmd-info {
|
|
display: none;
|
|
padding: var(--spacing-sm) 0;
|
|
}
|
|
|
|
.mobile-cmd-info.active {
|
|
display: block;
|
|
}
|
|
|
|
.mobile-cmd-name {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
margin: 0 0 var(--spacing-xs) 0;
|
|
}
|
|
|
|
.mobile-cmd-namespace {
|
|
color: var(--color-ash);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.mobile-cmd-desc {
|
|
font-size: 0.875rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.mobile-cmd-rel {
|
|
margin-top: var(--spacing-xs);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.mobile-cmd-rel code {
|
|
font-family: var(--font-mono);
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* ============================================
|
|
DOWNLOADS SECTION
|
|
============================================ */
|
|
|
|
.downloads-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.downloads-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.download-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: var(--spacing-lg);
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
transition: all var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.download-card:hover {
|
|
border-color: var(--color-accent);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 60px var(--color-accent-dim);
|
|
}
|
|
|
|
.download-card-icon {
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.download-card-icon img {
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.download-card-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
margin: 0 0 var(--spacing-sm) 0;
|
|
}
|
|
|
|
.download-card-note {
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.download-card .btn {
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
|
|
/* Install command box */
|
|
.install-command {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
padding: var(--spacing-sm);
|
|
margin-top: var(--spacing-sm);
|
|
width: 100%;
|
|
}
|
|
|
|
.install-command code {
|
|
flex: 1;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ink);
|
|
background: transparent;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.copy-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: transparent;
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 4px;
|
|
color: var(--color-ash);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background: var(--color-accent-dim);
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.copy-btn.copied {
|
|
background: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.install-hint {
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
margin: var(--spacing-xs) 0 0 0;
|
|
}
|
|
|
|
.install-hint code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-mist);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.download-card-details {
|
|
width: 100%;
|
|
margin-top: var(--spacing-sm);
|
|
font-size: 0.8125rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.download-card-details summary {
|
|
cursor: pointer;
|
|
color: var(--color-ash);
|
|
font-size: 0.75rem;
|
|
padding: var(--spacing-xs) 0;
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.download-card-details summary::before {
|
|
content: '▶';
|
|
font-size: 0.5rem;
|
|
transition: transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.download-card-details[open] summary::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.download-card-details summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.download-card-details ol {
|
|
margin: var(--spacing-sm) 0;
|
|
padding-left: var(--spacing-md);
|
|
color: var(--color-charcoal);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.download-card-details li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.download-card-details code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-mist);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.download-card-details a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.download-card-details a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============================================
|
|
OPEN SOURCE SECTION
|
|
============================================ */
|
|
|
|
.opensource-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
text-align: center;
|
|
}
|
|
|
|
.opensource-content {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.opensource-title {
|
|
font-size: clamp(1.5rem, 4vw, 2rem);
|
|
font-weight: 300;
|
|
}
|
|
|
|
.opensource-desc {
|
|
font-size: 1.125rem;
|
|
color: var(--color-ash);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ============================================
|
|
FOOTER
|
|
============================================ */
|
|
|
|
.site-footer {
|
|
border-top: 1px solid var(--color-mist);
|
|
padding: var(--spacing-xl) var(--spacing-lg);
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
/* Single horizontal row: wordmark left, nav centered, credit right.
|
|
Three groups, no two-tier split, no dividers. */
|
|
.footer-row {
|
|
max-width: var(--width-max);
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: var(--spacing-xl);
|
|
}
|
|
|
|
.footer-logo {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--spacing-lg);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer-links a {
|
|
font-size: 0.875rem;
|
|
color: var(--color-ash);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.footer-credit {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ash);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.footer-credit a {
|
|
color: var(--color-text);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.footer-credit a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.footer-social-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
color: var(--color-ash);
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.footer-social-link:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.footer-row {
|
|
grid-template-columns: 1fr;
|
|
justify-items: center;
|
|
text-align: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.footer-links {
|
|
justify-content: center;
|
|
gap: var(--spacing-sm) var(--spacing-md);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.site-footer {
|
|
padding: var(--spacing-lg) var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTONS
|
|
============================================ */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-xs);
|
|
padding: 1rem 2rem;
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.03em;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all var(--duration-base) var(--ease-out);
|
|
position: relative;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--color-accent);
|
|
transform: translateY(100%);
|
|
transition: transform var(--duration-base) var(--ease-out);
|
|
z-index: 0;
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.btn-primary span,
|
|
.btn-primary svg {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* For buttons without span wrapper */
|
|
.btn-primary:not(:has(span)) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--color-ink);
|
|
border: 1px solid var(--color-ink);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
/* Focus styles for all buttons */
|
|
.btn:focus-visible {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.btn-primary:focus-visible {
|
|
outline-color: var(--color-paper);
|
|
box-shadow: 0 0 0 4px var(--color-accent);
|
|
}
|
|
|
|
.btn-secondary:focus-visible {
|
|
outline-color: var(--color-accent);
|
|
}
|
|
|
|
/* ============================================
|
|
ANIMATIONS
|
|
============================================ */
|
|
|
|
@keyframes revealUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateX(-50%) translateY(0); }
|
|
50% { transform: translateX(-50%) translateY(-8px); }
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(4px); }
|
|
}
|
|
|
|
/* Reveal animation for scroll */
|
|
[data-reveal] {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
|
|
}
|
|
|
|
[data-reveal].revealed {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Staggered reveals */
|
|
[data-reveal]:nth-child(1) { transition-delay: 0s; }
|
|
[data-reveal]:nth-child(2) { transition-delay: 0.1s; }
|
|
[data-reveal]:nth-child(3) { transition-delay: 0.2s; }
|
|
[data-reveal]:nth-child(4) { transition-delay: 0.3s; }
|
|
|
|
/* ============================================
|
|
REDUCED MOTION (Accessibility)
|
|
============================================ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
/* Allow smooth scrolling to remain for anchor links only if user explicitly triggers */
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
/* Disable hero canvas animation */
|
|
.hero-canvas {
|
|
display: none;
|
|
}
|
|
|
|
/* Disable scroll indicator animation */
|
|
.hero-scroll-indicator {
|
|
animation: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Disable reveal animations - show content immediately */
|
|
[data-reveal] {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
/* Disable gallery frame transitions */
|
|
.gallery-frame {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
ERROR STATES
|
|
============================================ */
|
|
|
|
.load-error {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: var(--spacing-2xl) var(--spacing-lg);
|
|
gap: var(--spacing-md);
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.load-error-icon {
|
|
font-size: 2.5rem;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.load-error-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.load-error-text {
|
|
font-size: 1rem;
|
|
color: var(--color-ash);
|
|
max-width: 40ch;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.load-error-retry {
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
/* ============================================
|
|
BIAS TAGS (Compact Problem Section)
|
|
============================================ */
|
|
|
|
.bias-tags {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
|
|
.bias-tags-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.bias-tags-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.bias-tag {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
padding: 6px 12px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
color: var(--color-charcoal);
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.bias-tag:hover {
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* ============================================
|
|
ANTIDOTE SECTION
|
|
============================================ */
|
|
|
|
.antidote-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
/* Antidote row: patterns + gallery side by side */
|
|
.antidote-row {
|
|
display: flex;
|
|
gap: var(--spacing-xl);
|
|
align-items: stretch;
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.antidote-row .patterns-tabbed {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Gallery of Shame — 3D card stack */
|
|
.gallery-stack-container {
|
|
flex: 0 0 clamp(320px, 34vw, 420px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* Header: ← Gallery of Shame → */
|
|
.gallery-stack-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.gallery-stack-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
flex: 1;
|
|
}
|
|
|
|
.gallery-stack-btn {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--color-mist);
|
|
background: white;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.6875rem;
|
|
color: var(--color-charcoal);
|
|
flex-shrink: 0;
|
|
transition: border-color var(--duration-fast), background var(--duration-fast);
|
|
position: relative;
|
|
}
|
|
|
|
/* Invisible 44px touch target */
|
|
.gallery-stack-btn::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -10px;
|
|
}
|
|
|
|
.gallery-stack-btn:hover {
|
|
border-color: var(--color-charcoal);
|
|
}
|
|
|
|
/* Card stack — stacked deck offset to bottom-right */
|
|
.gallery-stack {
|
|
position: relative;
|
|
width: calc(100% - 20px);
|
|
aspect-ratio: 3 / 2;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.gallery-stack-card {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-mist);
|
|
text-decoration: none;
|
|
background: white;
|
|
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, box-shadow 0.35s ease;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.gallery-stack-card img {
|
|
flex: 1;
|
|
min-height: 0;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
object-position: top left;
|
|
}
|
|
|
|
.gallery-stack-label {
|
|
padding: 6px 10px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--color-charcoal);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Stack depth: cards peek behind at bottom-right */
|
|
.gallery-stack-card[data-offset="0"] {
|
|
z-index: 3;
|
|
transform: translate(0, 0);
|
|
opacity: 1;
|
|
box-shadow: 0 2px 12px oklch(0.2 0 0 / 0.1);
|
|
}
|
|
|
|
.gallery-stack-card[data-offset="1"] {
|
|
z-index: 2;
|
|
transform: translate(8px, 8px);
|
|
opacity: 1;
|
|
box-shadow: 0 1px 6px oklch(0.2 0 0 / 0.08);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gallery-stack-card[data-offset="2"] {
|
|
z-index: 1;
|
|
transform: translate(16px, 16px);
|
|
opacity: 1;
|
|
box-shadow: 0 1px 4px oklch(0.2 0 0 / 0.06);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gallery-stack-card:not([data-offset="0"]):not([data-offset="1"]):not([data-offset="2"]) {
|
|
z-index: 0;
|
|
transform: translate(20px, 20px);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gallery-stack-link {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.gallery-stack-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.antidote-row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.gallery-stack-container {
|
|
flex: none;
|
|
width: 100%;
|
|
max-width: 360px;
|
|
}
|
|
|
|
}
|
|
|
|
/* ---- Pattern tabs ---- */
|
|
.patterns-tabbed {
|
|
margin-bottom: var(--spacing-xl);
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.patterns-tabs-wrap {
|
|
position: relative;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.patterns-tabs {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
scroll-snap-type: x proximity;
|
|
}
|
|
|
|
.patterns-tabs::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Edge fade only on sides where more content exists. data-scroll is set
|
|
by JS: start | middle | end | none. */
|
|
.patterns-tabs[data-scroll="start"] {
|
|
mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
|
|
-webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
|
|
}
|
|
.patterns-tabs[data-scroll="middle"] {
|
|
mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 40px), transparent);
|
|
-webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 40px), transparent);
|
|
}
|
|
.patterns-tabs[data-scroll="end"] {
|
|
mask-image: linear-gradient(to right, transparent, black 32px);
|
|
-webkit-mask-image: linear-gradient(to right, transparent, black 32px);
|
|
}
|
|
.patterns-tabs[data-scroll="none"] {
|
|
mask-image: none;
|
|
-webkit-mask-image: none;
|
|
}
|
|
|
|
/* Chevrons sit on the wrapper (outside the mask) so they're always fully
|
|
opaque, regardless of edge fade. Visible only when scroll can progress
|
|
in that direction. */
|
|
.patterns-tabs-wrap::before,
|
|
.patterns-tabs-wrap::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-top: 1.5px solid var(--color-ash);
|
|
border-right: 1.5px solid var(--color-ash);
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.18s ease;
|
|
}
|
|
.patterns-tabs-wrap::before {
|
|
left: 2px;
|
|
transform: translateY(-50%) rotate(-135deg);
|
|
}
|
|
.patterns-tabs-wrap::after {
|
|
right: 2px;
|
|
transform: translateY(-50%) rotate(45deg);
|
|
}
|
|
.patterns-tabs-wrap[data-scroll="start"]::after,
|
|
.patterns-tabs-wrap[data-scroll="middle"]::after { opacity: 1; }
|
|
.patterns-tabs-wrap[data-scroll="end"]::before,
|
|
.patterns-tabs-wrap[data-scroll="middle"]::before { opacity: 1; }
|
|
|
|
.patterns-tab {
|
|
scroll-snap-align: start;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.patterns-tab {
|
|
font-family: var(--font-body);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
background: none;
|
|
border: none;
|
|
border-radius: 100px;
|
|
padding: 6px 12px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.patterns-tab:hover {
|
|
background: var(--color-mist);
|
|
}
|
|
|
|
.patterns-tab.is-active {
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.patterns-content {
|
|
display: none;
|
|
}
|
|
|
|
.patterns-content.is-active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.patterns-col ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.patterns-col li {
|
|
font-size: 0.8125rem;
|
|
line-height: 1.55;
|
|
padding-left: var(--spacing-sm);
|
|
position: relative;
|
|
color: var(--color-charcoal);
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.patterns-col--dont li::before {
|
|
content: '\00d7';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--color-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.patterns-col--do li::before {
|
|
content: '\2713';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--color-success, #22c55e);
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
/* Detection callout — flat editorial CTA, no card chrome.
|
|
Image thumbnail on the left, NEW eyebrow + CTA stacked on the right.
|
|
The whole element is a clickable anchor. Hover shifts color, no
|
|
transform or shadow theatrics. */
|
|
.detection-callout {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
padding: var(--spacing-sm) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.detection-callout-image {
|
|
display: block;
|
|
width: 132px;
|
|
height: 112px;
|
|
flex-shrink: 0;
|
|
object-fit: cover;
|
|
object-position: top left;
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.detection-callout:hover .detection-callout-image {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.detection-callout-inner {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.detection-eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.detection-callout-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.detection-callout:hover .detection-callout-title {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.detection-desc {
|
|
flex: 1;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.55;
|
|
color: var(--color-ash);
|
|
min-width: 200px;
|
|
}
|
|
|
|
.detection-desc code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.detection-cmd {
|
|
flex-shrink: 0;
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
white-space: nowrap;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.detection-callout:hover .detection-cmd {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Antidote footer */
|
|
.antidote-footer {
|
|
text-align: center;
|
|
}
|
|
|
|
.antidote-suggest-link {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.antidote-suggest-link:hover {
|
|
color: var(--color-accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============================================
|
|
SOLUTION SECTION ENHANCEMENTS
|
|
============================================ */
|
|
|
|
/* Main skill item styling */
|
|
.pillar-item--main {
|
|
background: var(--color-accent-dim);
|
|
border: 1px solid var(--color-accent);
|
|
}
|
|
|
|
.pillar-item--main .pillar-item-name {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.pillar-item--ref {
|
|
background: transparent;
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
}
|
|
|
|
.pillar-item-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
/* Reference domain tags */
|
|
.pillar-refs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-xs);
|
|
padding: 0 var(--spacing-sm);
|
|
}
|
|
|
|
.pillar-ref {
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
padding: 4px 10px;
|
|
background: var(--color-paper);
|
|
color: var(--color-ash);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 3px;
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.pillar-ref:hover {
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Command groups */
|
|
.pillar-command-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
padding: var(--spacing-sm);
|
|
background: var(--color-paper);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.pillar-group-label {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-ash);
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.pillar-command-group .pillar-item-code {
|
|
font-size: 0.8125rem;
|
|
padding: 4px 8px;
|
|
background: var(--color-accent-dim);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* ============================================
|
|
PLATFORMS SECTION (alias for downloads)
|
|
============================================ */
|
|
|
|
.platforms-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
@media (min-width: 1100px) {
|
|
.platforms-section {
|
|
border-top: none;
|
|
}
|
|
}
|
|
|
|
.platforms-section .section-subtitle {
|
|
max-width: 60ch;
|
|
}
|
|
|
|
/* Two-path install layout */
|
|
/* Row 1: full-width primary install card with internal 2-column split */
|
|
.install-row-primary {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--spacing-xl);
|
|
align-items: start;
|
|
margin: 0 0 var(--spacing-xl);
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: var(--spacing-lg);
|
|
min-width: 0;
|
|
}
|
|
|
|
.install-primary-main,
|
|
.install-primary-howto {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.install-primary-howto {
|
|
padding-left: var(--spacing-xl);
|
|
border-left: 1px solid var(--color-mist);
|
|
}
|
|
|
|
/* The "Use it" side uses the hero body copy size so both columns feel balanced
|
|
in typographic weight, not just pixel width. */
|
|
.install-primary-howto .install-path-desc {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--color-ink);
|
|
max-width: 48ch;
|
|
}
|
|
|
|
.install-primary-howto .install-path-desc em {
|
|
font-family: var(--font-display);
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-primary-alts {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* "Other install methods" is a collapsed <details> panel that sits
|
|
directly under the main install card. The alternatives are worth
|
|
keeping discoverable but don't need to be visible by default. */
|
|
.install-primary-main > .install-primary-alts {
|
|
margin-top: var(--spacing-lg);
|
|
padding-top: var(--spacing-md);
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-primary-alts[open] > .install-alts-summary > .install-alts-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.install-alts-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
list-style: none;
|
|
cursor: pointer;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.install-alts-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.install-alts-arrow {
|
|
color: var(--color-ash);
|
|
transition: transform var(--duration-fast) var(--ease-out, ease);
|
|
}
|
|
|
|
.install-primary-alts[open] > .install-alts-summary {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.install-primary-alts[open] > .install-alt-method + .install-alt-method {
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
|
|
/* Editorial "How to use" step list on the right side of the install row.
|
|
Uses display-font numerals as prominent visual anchors, generous vertical
|
|
rhythm, and body text at the same scale as the hero copy for hierarchy
|
|
parity with the rest of the page. */
|
|
.install-howto-steps {
|
|
list-style: none;
|
|
counter-reset: howto-step;
|
|
padding: 0;
|
|
margin: var(--spacing-lg) 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.install-howto-steps > li {
|
|
counter-increment: howto-step;
|
|
position: relative;
|
|
padding-left: 3rem;
|
|
min-height: 2.5rem;
|
|
}
|
|
|
|
.install-howto-steps > li::before {
|
|
content: counter(howto-step, decimal-leading-zero);
|
|
position: absolute;
|
|
left: 0;
|
|
top: -0.1em;
|
|
font-family: var(--font-display);
|
|
font-size: 1.75rem;
|
|
font-weight: 400;
|
|
color: var(--color-accent);
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.install-howto-step-label {
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
margin-bottom: 0.35rem;
|
|
line-height: 1.3;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
.install-howto-steps > li p {
|
|
margin: 0;
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.install-howto-steps code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
background: var(--color-accent-dim);
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-howto-steps .install-path-slash {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Compact 3-row "try it" table. Replaces the numbered sub-steps
|
|
inside step 2 to condense vertical height. Each row: mono command
|
|
example + one-line caption. Collapses to stacked on narrow screens. */
|
|
.install-howto-rows {
|
|
margin: var(--spacing-lg) 0 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.install-howto-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
|
|
gap: var(--spacing-md);
|
|
align-items: baseline;
|
|
padding: var(--spacing-sm) 0;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-howto-row:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.install-howto-row:last-child {
|
|
padding-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.install-howto-row dt {
|
|
margin: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.install-howto-row dt code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
background: var(--color-accent-dim);
|
|
padding: 3px 8px;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-howto-row dd {
|
|
margin: 0;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.55;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.install-howto-row dd code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125em;
|
|
background: var(--color-mist);
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
color: var(--color-ink);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-howto-row .install-path-slash {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.install-howto-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 6px;
|
|
}
|
|
}
|
|
|
|
.install-howto-footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-lg);
|
|
margin-top: var(--spacing-xl);
|
|
padding-top: var(--spacing-lg);
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-howto-link {
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 0.35em;
|
|
transition: gap 0.2s var(--ease-out-quart, ease);
|
|
}
|
|
|
|
.install-howto-link:hover {
|
|
gap: 0.6em;
|
|
}
|
|
|
|
.install-howto-link span {
|
|
display: inline-block;
|
|
transition: transform 0.2s var(--ease-out-quart, ease);
|
|
}
|
|
|
|
.install-howto-link:hover span {
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
/* Two-tool grid inside the "Anti-pattern tools" step. */
|
|
.install-tool-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--spacing-lg);
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.install-tool {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Solo install-tool (no grid wrapper) — used when step 3 is Chrome-only.
|
|
The preview screenshot sits to the left of the CTA button so neither
|
|
dominates vertical space. Collapses to a stack on narrow screens. */
|
|
.install-tool--solo {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: var(--spacing-lg);
|
|
margin-top: var(--spacing-md);
|
|
width: 100%;
|
|
}
|
|
|
|
.install-tool--solo .install-tool-preview {
|
|
flex: 0 1 260px;
|
|
min-width: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.install-tool--solo .install-tool-cta {
|
|
flex: 1 1 auto;
|
|
margin-top: 0;
|
|
width: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.install-tool--solo {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.install-tool--solo .install-tool-preview,
|
|
.install-tool--solo .install-tool-cta {
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
|
|
.install-tool-label {
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.install-tool-desc {
|
|
margin: 0;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ink);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* Chrome extension screenshot preview inside the install-tool column */
|
|
.install-tool-preview {
|
|
display: block;
|
|
margin-top: var(--spacing-sm);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
background: var(--color-paper);
|
|
transition: border-color var(--duration-fast) var(--ease-out, ease),
|
|
transform var(--duration-fast) var(--ease-out, ease);
|
|
}
|
|
|
|
.install-tool-preview:hover {
|
|
border-color: var(--color-accent);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.install-tool-preview img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.install-tool-preview-caption {
|
|
display: block;
|
|
padding: 0.4rem 0.75rem;
|
|
font-family: var(--font-body);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
/* "Install from Chrome Web Store" uses the standard .btn .btn-primary
|
|
styles; this modifier only adds layout (full width + top spacing). */
|
|
.install-tool-cta {
|
|
margin-top: var(--spacing-sm);
|
|
width: 100%;
|
|
}
|
|
|
|
.install-alts-label {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.install-alt-sublabel {
|
|
font-family: var(--font-body);
|
|
font-size: 0.75rem;
|
|
font-weight: 400;
|
|
color: var(--color-ash);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Compact zip download links — replaces the old big black download button.
|
|
Two equal-weight options stacked vertically, each is its own affordance. */
|
|
.install-zip-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
|
|
.install-zip-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
padding: 8px 12px;
|
|
font-family: var(--font-body);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
background: transparent;
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.install-zip-link:hover {
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-zip-link svg {
|
|
flex-shrink: 0;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.install-zip-link:hover svg {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-zip-link-name {
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-zip-link:hover .install-zip-link-name {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-zip-link-examples {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 4px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.install-alt-method .install-zip-link-examples code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-accent-dim);
|
|
color: var(--color-accent);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-path {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.install-path-primary {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
/* Steps 2-4: vertical accordion. Native <details name="install-steps">
|
|
gives mutual exclusion (opening one closes the others). Items are
|
|
separated by hairlines, not card chrome. */
|
|
.install-accordion {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 0 var(--spacing-xl);
|
|
}
|
|
|
|
.install-step {
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-step:last-child {
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-step-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md) var(--spacing-xs);
|
|
cursor: pointer;
|
|
list-style: none;
|
|
transition: background var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.install-step-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.install-step-summary:hover {
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.install-step-summary h3 {
|
|
flex: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
.install-step-arrow {
|
|
flex-shrink: 0;
|
|
color: var(--color-ash);
|
|
transition: transform var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.install-step[open] .install-step-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.install-step-body {
|
|
padding: 0 var(--spacing-xs) var(--spacing-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 56ch;
|
|
}
|
|
|
|
.install-step-body .install-path-desc {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.install-step-status {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
margin: 0 0 var(--spacing-sm);
|
|
}
|
|
|
|
.install-path-title {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin: 0 0 var(--spacing-sm);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* titles unified - no size override for step 3 */
|
|
|
|
.install-path-badge {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.5rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-accent);
|
|
border: 1px solid var(--color-accent);
|
|
border-radius: 3px;
|
|
padding: 2px 6px;
|
|
vertical-align: middle;
|
|
margin-left: 6px;
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
.install-path-badge-muted {
|
|
color: var(--color-ash);
|
|
border-color: var(--color-mist);
|
|
}
|
|
|
|
.install-path-desc {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
margin: 0 0 var(--spacing-md);
|
|
}
|
|
|
|
.terminal-header-license {
|
|
margin-left: auto;
|
|
font-size: 0.6875rem;
|
|
color: oklch(65% 0.01 350);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.terminal-header-license a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
text-decoration-color: oklch(85% 0.005 350);
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.terminal-header-license a:hover {
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
/* removed - unified font sizes across columns */
|
|
|
|
.install-path-terminal {
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.install-path-terminal .glass-terminal {
|
|
height: auto;
|
|
}
|
|
|
|
.install-path-terminal .terminal-body {
|
|
padding: 0;
|
|
}
|
|
|
|
.install-path-next {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.5;
|
|
margin-top: auto;
|
|
padding-top: var(--spacing-md);
|
|
}
|
|
|
|
.install-path-next code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.install-path-slash {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
|
|
.install-path-subcommands {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.install-path-subcommand {
|
|
font-size: 0.75rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.install-path-subcommand code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
background: var(--color-mist);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.install-path-link {
|
|
margin-top: auto;
|
|
padding-top: var(--spacing-md);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.install-path-link a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.install-path-link a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Lightweight terminal block — used in row 2 (CLI) where the heavy
|
|
skeuomorphic glass-terminal would be visually too much. Just a thin
|
|
bordered code line with a copy button and an optional note below. */
|
|
.install-cmd-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.install-cmd-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
padding: 10px 14px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.install-cmd-line .terminal-prompt {
|
|
flex-shrink: 0;
|
|
color: var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.install-cmd-line code {
|
|
flex: 1;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ink);
|
|
background: transparent;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.install-cmd-line .copy-btn {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.install-cmd-note {
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
line-height: 1.5;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.install-cmd-note code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-mist);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
color: var(--color-ink);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-cmd-note a {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/* Better together callout */
|
|
.install-together {
|
|
max-width: 960px;
|
|
margin: 0 0 var(--spacing-xl);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
.install-together-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.install-together-badge {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-accent);
|
|
border: 1px solid var(--color-accent);
|
|
padding: 2px 10px;
|
|
border-radius: 99px;
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-together-text {
|
|
font-size: 0.8125rem;
|
|
line-height: 1.55;
|
|
color: var(--color-ash);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Inline step numbers — sit to the left of the title text inside each h3.
|
|
The h3 uses flex with align-items: center so the step is centered with
|
|
the text without needing vertical-align fiddling. Margin/gap is handled
|
|
by the parent flex's gap. */
|
|
.install-path-step {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid var(--color-accent);
|
|
color: var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Stay updated (third column) */
|
|
.install-updated-subscribe {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-md);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.install-updated-substack {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 130px;
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
.install-updated-x {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-xs);
|
|
height: 130px;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
background: var(--color-paper);
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
background var(--duration-fast) var(--ease-out),
|
|
transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.install-updated-x:hover {
|
|
border-color: var(--color-ink);
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.install-updated-x-icon {
|
|
color: var(--color-ink);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.install-updated-x-label {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-ash);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.install-updated-x-handle {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.install-updated-x:hover .install-updated-x-handle {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-updated-refs {
|
|
margin-top: auto;
|
|
padding-top: var(--spacing-md);
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-updated-refs-label {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.5625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.install-updated-ref {
|
|
display: block;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
text-decoration: none;
|
|
margin-bottom: 6px;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
a.install-updated-ref:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-updated-ref-terminal {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-charcoal);
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
padding: 6px 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.install-updated-ref-terminal .terminal-prompt {
|
|
color: var(--color-ash);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.install-updated-ref-terminal code {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
background: none;
|
|
padding: 0;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.install-row-primary {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-lg);
|
|
max-width: calc(100vw - var(--spacing-md) * 2);
|
|
}
|
|
|
|
.install-primary-howto {
|
|
padding-left: 0;
|
|
padding-top: var(--spacing-lg);
|
|
border-left: none;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-tool-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.install-path-primary {
|
|
margin-bottom: var(--spacing-sm);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.install-path-title {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.install-path-desc {
|
|
font-size: 0.875rem;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.install-together-inner {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.install-updated-subscribe {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.install-updated-substack {
|
|
height: 130px;
|
|
}
|
|
|
|
.install-updated-x {
|
|
height: auto;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: var(--spacing-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
.install-updated-x-label {
|
|
display: none;
|
|
}
|
|
|
|
.install-terminal-cmd code {
|
|
font-size: 0.75rem;
|
|
white-space: normal;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.install-alt-method {
|
|
padding: var(--spacing-sm);
|
|
}
|
|
|
|
.install-alt-method .install-terminal-cmd code {
|
|
font-size: 0.6875rem;
|
|
white-space: normal;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.install-alt-method .install-terminal-cmd .copy-btn {
|
|
display: none;
|
|
}
|
|
|
|
.install-path-terminal .glass-terminal {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.install-terminal {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.install-alternatives {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Install terminal (glass terminal style) */
|
|
.install-terminal {
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.install-terminal .glass-terminal {
|
|
height: auto;
|
|
}
|
|
|
|
.install-terminal .terminal-body {
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.install-terminal-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
}
|
|
|
|
.install-terminal-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.install-terminal-cmd {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.install-terminal-cmd .terminal-prompt {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.install-terminal-cmd code {
|
|
flex: 1;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink);
|
|
background: transparent;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.install-terminal-cmd .copy-btn {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.install-terminal-cmd .btn {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.install-terminal-note {
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
padding-left: calc(0.75rem + var(--spacing-sm)); /* align with code after prompt */
|
|
}
|
|
|
|
.install-terminal-note code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-mist);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.install-terminal-divider {
|
|
height: 1px;
|
|
background: var(--color-mist);
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.install-terminal-row {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
.install-terminal-cmd code {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* Works with provider badges */
|
|
.install-providers {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.install-providers-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.install-providers-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.install-provider-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.install-provider-badge img {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Install alternatives (collapsible) */
|
|
.install-alternatives {
|
|
max-width: 640px;
|
|
margin: var(--spacing-sm) auto 0;
|
|
}
|
|
|
|
.install-alternatives-toggle {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-ash);
|
|
cursor: pointer;
|
|
padding: var(--spacing-sm) 0;
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.install-alternatives-toggle::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.install-alternatives-toggle::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 5px solid currentColor;
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid transparent;
|
|
transition: transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.install-alternatives[open] .install-alternatives-toggle::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.install-alternatives-toggle:hover {
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.install-alternatives-content {
|
|
animation: altFadeIn 0.2s var(--ease-out);
|
|
}
|
|
|
|
@keyframes altFadeIn {
|
|
from { opacity: 0; transform: translateY(-4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.install-alt-method {
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
}
|
|
|
|
.install-alt-label {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.install-alt-method .install-terminal-cmd {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.install-alt-method .terminal-prompt {
|
|
color: var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-weight: bold;
|
|
user-select: none;
|
|
}
|
|
|
|
.install-alt-method code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.install-alt-note {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.install-alt-note code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-mist);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* Visually hidden helper (kept for accessibility patterns elsewhere) */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.install-alt-method code {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* Tooltips */
|
|
.has-tooltip {
|
|
position: relative;
|
|
cursor: default;
|
|
}
|
|
|
|
.has-tooltip::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 6px 10px;
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-size: 0.6875rem;
|
|
line-height: 1.4;
|
|
border-radius: 6px;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
z-index: 100;
|
|
}
|
|
|
|
.has-tooltip:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Hero logo icon wrapper */
|
|
.hero-logo-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.download-tip {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
margin-top: var(--spacing-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
.download-tip a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.download-tip a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
CONSULTING SECTION
|
|
============================================ */
|
|
|
|
.consulting-section {
|
|
padding: var(--spacing-xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.consulting-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-lg);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.consulting-actions {
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.consulting-text {
|
|
flex: 1;
|
|
min-width: 280px;
|
|
}
|
|
|
|
.consulting-title {
|
|
font-size: clamp(1.5rem, 4vw, 2rem);
|
|
font-weight: 300;
|
|
margin: 0 0 var(--spacing-sm) 0;
|
|
}
|
|
|
|
.consulting-desc {
|
|
font-size: 1rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
max-width: 45ch;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.consulting-content {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.consulting-actions {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.consulting-actions .btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|