mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
b8f09c8142
* feat(site): scaffold Astro migration, convert 3 pages Phase 1+2 of the Astro migration: - Astro v6.2.1 installed, srcDir: 'site', static output to build/ - Shared layout: Base.astro (head, fonts, meta, slots), Header.astro (star count in one place: 23k), Footer.astro - CSS moved from public/css/ to site/styles/ (9 files, @import chains resolve via Vite) - Three pages converted: privacy, cases/neo-mirai, live-mode (all return 200 on astro dev) Remaining: designing, slop, homepage, content collections (docs), JS migration, server/index.js deletion, build.js cleanup. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(site): migrate all 6 main pages to Astro Converts the remaining pages: - designing/index.html → site/pages/designing/index.astro (551 lines) - slop/index.html → site/pages/slop/index.astro (909 lines) - index.html → site/pages/index.astro (1278 lines, the homepage) Base.astro gains OG meta tag props, before-header/after-header slots (for grain overlay and section nav), and configurable mainId. Homepage uses link tags to public/css/ instead of frontmatter CSS imports to avoid esbuild choking on :has() in main.css. Curly braces inside <code> elements (CSS snippets in changelog) escaped with HTML entities to prevent Astro JSX expression parsing. All 6 pages return 200 on astro dev. Branch: feat/astro-migration. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(site): content collections for docs and tutorials Replaces the 1532-line build-sub-pages.js generator with Astro v6 content collections: - 24 skill editorial files move to site/content/skills/ - 4 tutorial files move to site/content/tutorials/ - site/content.config.ts defines both collections with glob loaders - site/pages/docs/[...slug].astro reads skills collection + command metadata from source/skills/ at build time - site/pages/docs/index.astro renders the command grid grouped by category (create, evaluate, refine, simplify, harden, system) - site/pages/tutorials/ mirrors the pattern with ordered index - Doc.astro layout provides sidebar nav, breadcrumbs, and related- command chips from the COMMAND_RELATIONSHIPS data - Category/relationship data extracted to site/data/sub-pages-data.ts All 15 tested pages return 200: 6 main pages + 5 docs + 2 tutorials + 2 index pages. The old generator is not yet deleted (Task #6). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(site): move JS source from public/js/ to site/scripts/ Moves all 49 JS files (app.js + 48 in js/) into site/scripts/. Vite now processes them through its module bundler instead of serving them raw from public/. app.js import paths updated from ./js/X to ./X (the js/ nesting is gone since app.js now lives alongside the subdirectories). Homepage and live-mode page switch from <script is:inline src="/app.js"> to Vite-processed <script> imports, so tree-shaking, bundling, and minification happen automatically at build time. public/js/ still exists for now (cleanup in Task #6) and the generated/counts.js build output path needs updating there too. @paper-design/shaders added to npm dependencies (was missing). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * refactor(site): delete old Bun server, generator, and duplicated files Cleanup after the Astro migration: Deleted: - server/index.js (233 lines, replaced by `astro dev`) - scripts/build-sub-pages.js (1532 lines, replaced by content collections) - scripts/lib/render-page.js (247 lines, replaced by Base.astro layout) - content/site/partials/header.html (replaced by Header.astro component) - public/index.html, privacy.html, designing/, live-mode/, cases/ (replaced by .astro pages in site/pages/) - public/css/ (moved to site/styles/) - public/js/ old source files (moved to site/scripts/) - public/app.js (moved to site/scripts/app.js) Kept in public/: - antipattern-examples/ (standalone HTML demos, not Astro pages) - antipattern-images/, assets/, neo-mirai/ (static assets) - js/detect-antipatterns-browser.js (referenced by antipattern examples) - js/generated/counts.js (build output from scripts/build.js) - _data/api/ (generated API data, now written to public/ so Astro passes it through to build/) Updated: - astro.config.mjs: added redirects (skills->docs, cheatsheet->docs, gallery->slop, neon-mirai->neo-mirai, etc.) - package.json: dev->astro dev, build->build:skills+build:site, preview->astro preview - scripts/build.js: removed buildStaticSite(), generateSubPages(), static-asset copying. API data writes to public/_data/ instead of build/_data/. Site-header validator is a no-op (shared component). Em-dash validator scans site/components + site/layouts, not pages (pages contain content from other sources like detector descriptions). - .gitignore: removed public/slop/ entry Tests: 186/186 pass. Skills build: clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): fix redirect config for Astro compatibility Move the dynamic /skills/:id -> /docs/:id redirect to public/_redirects (Cloudflare Pages native format) since Astro's redirect config can't handle dynamic routes that don't match existing page patterns. Remove duplicate trailing-slash redirect entries that caused warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): switch remaining pages from /css/ link tags to frontmatter imports Doc.astro, docs/index, tutorials/index, and tutorials/[slug] were still using <link href="/css/sub-pages.css"> which pointed at the deleted public/css/ directory. Switched to frontmatter CSS imports (import '../../styles/sub-pages.css') which Vite resolves from site/styles/. Homepage also switches from link tags to frontmatter imports for main.css and sub-pages.css — the esbuild error that originally forced the link-tag workaround was caused by unescaped curly braces in the HTML content (since fixed), not by the CSS itself. All pages verified visually in Chrome: homepage hero, foundation grid, docs index (card grid with categories), docs detail (sidebar + editorial content + visual mockups), designing (core loop diagram), privacy, tutorials. Header renders with 23k stars on every page. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): fix edge-to-edge sections, broken API paths, CSS links Three fixes: 1. Homepage sections sat on the viewport edge because Base.astro's <main> lacked the site-content class (provides max-width + padding). Added mainClass prop to Base.astro; homepage sets mainClass="site-content". 2. "Failed to load commands" because app.js fetched /api/commands which only existed in the old Bun server's routing. Updated to fetch from /_data/api/commands.json (the static JSON files that build:skills writes to public/_data/). 3. CSS reference fix (previous commit was incomplete): Doc.astro, docs/index, tutorials pages all used <link href="/css/sub-pages.css"> pointing at deleted public/css/. Switched to frontmatter imports. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): add sidebar to docs index page The docs index was using Base.astro directly without the skills-layout grid, so it rendered without a sidebar. Added the same sidebar structure from Doc.astro (category-grouped command list) and wrapped the content in the skills-layout grid. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(site): extract footer CSS to shared file, import in Base.astro Footer was unstyled on sub-pages because footer CSS lived only in main.css (loaded by the homepage) not in sub-pages.css. Extracted the 95 lines of footer rules into site/styles/footer.css and imported it in Base.astro so every page gets footer styles regardless of which page-specific CSS it loads. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(demos): move landing-demo into repo, add as slop specimens Moves ~/code/landing-demo/ into demos/landing-demo/ (without node_modules or the redundant .claude/.agents skill copies — the repo root's skill is found by walking up). PRODUCT.md, DESIGN.md, DESIGN.json, PROMPT.md, and SCRIPT.md stay in place so running Claude from demos/landing-demo/ picks up the project context. Also copies both pages as slop specimens to public/antipattern-examples/ with the detector script baked in: - new-slop-2026.html (Fraunces + warm cream editorial monoculture) - old-slop-2022.html (purple gradient + glassmorphism + neon glow) These can be linked from the slop page gallery alongside the existing 11 synthetic specimens. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(slop): replace single demo iframe with Then vs Now comparison The "See it" section (01) on the slop page now shows two side-by-side browser frames: 2022 slop (purple gradients, glassmorphism, neon glow) and 2026 slop (Fraunces, warm cream, editorial restraint). Both run the detector overlay live — hover either to see which rules fire. Replaces the single visual-mode-demo.html iframe. Responsive: stacks vertically on viewports below 900px. Caption: "Same engine, different decade, both flagged." Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(slop): switch to single-frame era toggle, center the section Replaces the side-by-side dual-iframe layout with a single large frame and a segmented 2022/2026 toggle. Clicking the toggle swaps which iframe is visible (both pre-loaded, instant switch). Browser chrome title updates to match the active era. Centers the lede text and toggle above the frame for visual cohesion with the full-width iframe below. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(slop): left-align See It section, toggle inline with lede Moves the era toggle to the right of the lede paragraph using a flex row (align-items: flex-end). Left-aligned text + right-docked toggle matches the rest of the page's flow instead of standing out as a centered island. Stacks vertically on narrow viewports. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(slop): left-align iframe, remove max-width and auto margin The visual-mode-preview had max-width: 1040px + margin: 0 auto which centered it within the column. Override both in the .slop-then-now context so the frame fills the full content width flush with the text above. Caption left-aligned to match. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * chore(site): update star count to 24k (24,062) One file, one edit. The Astro migration working as intended. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): regenerate pnpm-lock.yaml for astro + shaders deps Cloudflare Pages uses pnpm with frozen-lockfile. The lockfile was stale after adding astro, @astrojs/cloudflare, and @paper-design/shaders via npm. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): resolve 3 bugbot review issues 1. Restore public/slop/ to .gitignore — prevents accidental legacy generator output from conflicting with the Astro page. 2. Move astro and @paper-design/shaders to devDependencies — these are site-build tools, not CLI runtime deps. Removes @astrojs/cloudflare entirely (unused; static output mode needs no adapter). 3. Fix Astro wiping build:skills output — CF config (_headers, _redirects, _routes.json) and API data now write to public/ so Astro copies them through. Dist ZIPs copy to build/_data/dist/ as a post-build step (after Astro finishes). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): merge duplicate devDependencies, use npx for astro CLI The previous commit created a second devDependencies key in package.json. JSON doesn't support duplicate keys — pnpm ignored the first block (with astro), so `astro build` wasn't found. Merged astro and @paper-design/shaders into the existing devDependencies block. Changed `astro build/dev/preview` to `npx astro build/dev/preview` so pnpm finds the local binary on Cloudflare Pages (which doesn't add node_modules/.bin to PATH by default). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(demos): remove private demo script and prompt from public repo SCRIPT.md contained a detailed conference talk script with personal delivery strategies, rehearsed Q&A answers, and venue details. PROMPT.md contained the origin brief for the demo page. Neither belongs in a public repo. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * fix(build): gitignore generated public/ artifacts, consolidate redirects 1. Generated files written to public/ by build:skills (API data, CF config, browser detector, counts.js) are now gitignored. Prevents noisy diffs and merge conflicts from committed build artifacts. 2. Removed duplicate redirects from astro.config.mjs. All redirects now live in one place: the _redirects file generated by scripts/build.js (which Cloudflare Pages processes natively). Eliminates the dual-maintenance risk where the two sources could drift apart. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4161 lines
87 KiB
CSS
4161 lines
87 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;
|
|
font-style: italic;
|
|
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;
|
|
font-style: italic;
|
|
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;
|
|
font-style: italic;
|
|
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);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ============================================
|
|
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-style: italic;
|
|
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;
|
|
font-style: italic;
|
|
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);
|
|
font-style: italic;
|
|
}
|
|
|
|
.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;
|
|
font-style: italic;
|
|
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;
|
|
}
|
|
}
|